diff --git a/.github/workflows/tokens.yml b/.github/workflows/tokens.yml index b99f6595..4d64b2ee 100644 --- a/.github/workflows/tokens.yml +++ b/.github/workflows/tokens.yml @@ -43,8 +43,8 @@ jobs: - name: Transform applied token run: | - yarn token-cli transform --source ./out/raw_applieds.json --output ./tokens/pixiv-light.json --variable-collection-names Color Space "Border radius" --mode-name "pixiv/light" - yarn token-cli transform --source ./out/raw_applieds.json --output ./tokens/pixiv-dark.json --variable-collection-names Color Space "Border radius" --mode-name "pixiv/dark" + yarn token-cli transform --source ./out/raw_applieds.json --output ./tokens/pixiv-light.json --variable-collection-names color space radius --mode-name "pixiv/light" + yarn token-cli transform --source ./out/raw_applieds.json --output ./tokens/pixiv-dark.json --variable-collection-names color space radius --mode-name "pixiv/dark" - name: Generate CSS variables run: | diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css index ca1904b3..7d9978a9 100644 --- a/packages/theme/src/css/_variables_dark.css +++ b/packages/theme/src/css/_variables_dark.css @@ -1,270 +1,10 @@ /** * Do not edit directly - * Generated on Thu, 11 Jul 2024 10:03:37 GMT + * Generated on Fri, 26 Jul 2024 05:09:39 GMT */ :root[data-theme='dark'] { - --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1); - --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1); - --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02); - --charcoal-colors-dark-magenta-90: rgba(253, 217, 233, 1); - --charcoal-colors-dark-magenta-80: rgba(247, 184, 213, 1); - --charcoal-colors-dark-magenta-70: rgba(243, 163, 200, 1); - --charcoal-colors-dark-magenta-60: rgba(240, 146, 191, 1); - --charcoal-colors-dark-magenta-50: rgba(220, 114, 168, 1); - --charcoal-colors-dark-magenta-40: rgba(202, 91, 149, 1); - --charcoal-colors-dark-magenta-30: rgba(185, 64, 130, 1); - --charcoal-colors-dark-magenta-20: rgba(124, 58, 91, 1); - --charcoal-colors-dark-magenta-10: rgba(69, 44, 56, 1); - --charcoal-colors-dark-magenta-5: rgba(48, 36, 42, 1); - --charcoal-colors-dark-magenta-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-magenta--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-magenta--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-purple-90: rgba(233, 223, 255, 1); - --charcoal-colors-dark-purple-80: rgba(210, 192, 245, 1); - --charcoal-colors-dark-purple-70: rgba(201, 176, 249, 1); - --charcoal-colors-dark-purple-60: rgba(191, 160, 246, 1); - --charcoal-colors-dark-purple-50: rgba(169, 133, 229, 1); - --charcoal-colors-dark-purple-40: rgba(149, 110, 210, 1); - --charcoal-colors-dark-purple-30: rgba(131, 88, 194, 1); - --charcoal-colors-dark-purple-20: rgba(93, 68, 132, 1); - --charcoal-colors-dark-purple-10: rgba(56, 48, 71, 1); - --charcoal-colors-dark-purple-5: rgba(42, 38, 49, 1); - --charcoal-colors-dark-purple-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-purple--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-purple--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-indigo-90: rgba(222, 227, 255, 1); - --charcoal-colors-dark-indigo-80: rgba(192, 199, 248, 1); - --charcoal-colors-dark-indigo-70: rgba(175, 184, 254, 1); - --charcoal-colors-dark-indigo-60: rgba(160, 170, 249, 1); - --charcoal-colors-dark-indigo-50: rgba(135, 143, 231, 1); - --charcoal-colors-dark-indigo-40: rgba(115, 123, 219, 1); - --charcoal-colors-dark-indigo-30: rgba(96, 100, 199, 1); - --charcoal-colors-dark-indigo-20: rgba(72, 76, 134, 1); - --charcoal-colors-dark-indigo-10: rgba(48, 51, 74, 1); - --charcoal-colors-dark-indigo-5: rgba(39, 40, 46, 1); - --charcoal-colors-dark-indigo-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-indigo--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-indigo--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-blue-90: rgba(207, 230, 253, 1); - --charcoal-colors-dark-blue-80: rgba(166, 205, 245, 1); - --charcoal-colors-dark-blue-70: rgba(139, 193, 248, 1); - --charcoal-colors-dark-blue-60: rgba(114, 181, 245, 1); - --charcoal-colors-dark-blue-50: rgba(83, 156, 224, 1); - --charcoal-colors-dark-blue-40: rgba(55, 136, 208, 1); - --charcoal-colors-dark-blue-30: rgba(8, 114, 190, 1); - --charcoal-colors-dark-blue-20: rgba(39, 84, 126, 1); - --charcoal-colors-dark-blue-10: rgba(36, 55, 73, 1); - --charcoal-colors-dark-blue-5: rgba(33, 41, 50, 1); - --charcoal-colors-dark-blue-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-blue--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-blue--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-turquoise-90: rgba(180, 239, 234, 1); - --charcoal-colors-dark-turquoise-80: rgba(144, 213, 207, 1); - --charcoal-colors-dark-turquoise-70: rgba(118, 205, 199, 1); - --charcoal-colors-dark-turquoise-60: rgba(84, 193, 186, 1); - --charcoal-colors-dark-turquoise-50: rgba(32, 170, 164, 1); - --charcoal-colors-dark-turquoise-40: rgba(0, 147, 142, 1); - --charcoal-colors-dark-turquoise-30: rgba(0, 123, 118, 1); - --charcoal-colors-dark-turquoise-20: rgba(0, 91, 88, 1); - --charcoal-colors-dark-turquoise-10: rgba(26, 60, 58, 1); - --charcoal-colors-dark-turquoise-5: rgba(35, 42, 41, 1); - --charcoal-colors-dark-turquoise-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-turquoise--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-turquoise--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-green-90: rgba(191, 241, 186, 1); - --charcoal-colors-dark-green-80: rgba(161, 215, 155, 1); - --charcoal-colors-dark-green-70: rgba(141, 204, 135, 1); - --charcoal-colors-dark-green-60: rgba(120, 194, 113, 1); - --charcoal-colors-dark-green-50: rgba(86, 169, 79, 1); - --charcoal-colors-dark-green-40: rgba(58, 150, 52, 1); - --charcoal-colors-dark-green-30: rgba(13, 129, 5, 1); - --charcoal-colors-dark-green-20: rgba(39, 92, 35, 1); - --charcoal-colors-dark-green-10: rgba(41, 59, 40, 1); - --charcoal-colors-dark-green-5: rgba(37, 43, 37, 1); - --charcoal-colors-dark-green-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-green--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-green--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-yellow-90: rgba(252, 227, 145, 1); - --charcoal-colors-dark-yellow-80: rgba(231, 199, 80, 1); - --charcoal-colors-dark-yellow-70: rgba(222, 185, 7, 1); - --charcoal-colors-dark-yellow-60: rgba(222, 167, 29, 1); - --charcoal-colors-dark-yellow-50: rgba(199, 140, 10, 1); - --charcoal-colors-dark-yellow-40: rgba(174, 121, 14, 1); - --charcoal-colors-dark-yellow-30: rgba(153, 99, 8, 1); - --charcoal-colors-dark-yellow-20: rgba(109, 75, 31, 1); - --charcoal-colors-dark-yellow-10: rgba(66, 51, 30, 1); - --charcoal-colors-dark-yellow-5: rgba(44, 40, 35, 1); - --charcoal-colors-dark-yellow-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-yellow--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-yellow--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-orange-90: rgba(252, 221, 207, 1); - --charcoal-colors-dark-orange-80: rgba(245, 188, 163, 1); - --charcoal-colors-dark-orange-70: rgba(248, 170, 135, 1); - --charcoal-colors-dark-orange-60: rgba(246, 151, 107, 1); - --charcoal-colors-dark-orange-50: rgba(229, 121, 68, 1); - --charcoal-colors-dark-orange-40: rgba(212, 97, 41, 1); - --charcoal-colors-dark-orange-30: rgba(188, 74, 14, 1); - --charcoal-colors-dark-orange-20: rgba(134, 58, 22, 1); - --charcoal-colors-dark-orange-10: rgba(72, 48, 38, 1); - --charcoal-colors-dark-orange-5: rgba(48, 39, 34, 1); - --charcoal-colors-dark-orange-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-orange--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-orange--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-red-90: rgba(254, 219, 214, 1); - --charcoal-colors-dark-red-80: rgba(249, 186, 177, 1); - --charcoal-colors-dark-red-70: rgba(254, 167, 155, 1); - --charcoal-colors-dark-red-60: rgba(252, 147, 134, 1); - --charcoal-colors-dark-red-50: rgba(233, 114, 102, 1); - --charcoal-colors-dark-red-40: rgba(217, 88, 76, 1); - --charcoal-colors-dark-red-30: rgba(197, 60, 51, 1); - --charcoal-colors-dark-red-20: rgba(136, 54, 46, 1); - --charcoal-colors-dark-red-10: rgba(73, 47, 43, 1); - --charcoal-colors-dark-red-5: rgba(47, 39, 38, 1); - --charcoal-colors-dark-red-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-red--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-red--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-neutral-90: rgba(228, 228, 228, 1); - --charcoal-colors-dark-neutral-80: rgba(202, 202, 202, 1); - --charcoal-colors-dark-neutral-70: rgba(188, 188, 188, 1); - --charcoal-colors-dark-neutral-60: rgba(175, 175, 175, 1); - --charcoal-colors-dark-neutral-50: rgba(151, 151, 151, 1); - --charcoal-colors-dark-neutral-40: rgba(130, 130, 130, 1); - --charcoal-colors-dark-neutral-30: rgba(112, 112, 112, 1); - --charcoal-colors-dark-neutral-20: rgba(81, 81, 81, 1); - --charcoal-colors-dark-neutral-10: rgba(51, 51, 51, 1); - --charcoal-colors-dark-neutral-5: rgba(41, 41, 41, 1); - --charcoal-colors-dark-neutral-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-neutral--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-neutral-a-80: rgba(228, 228, 228, 0.87); - --charcoal-colors-dark-neutral-a-70: rgba(228, 228, 228, 0.795); - --charcoal-colors-dark-neutral-a-60: rgba(228, 228, 228, 0.73); - --charcoal-colors-dark-neutral-a-50: rgba(228, 228, 228, 0.61); - --charcoal-colors-dark-neutral-a-40: rgba(228, 228, 228, 0.505); - --charcoal-colors-dark-neutral-a-30: rgba(228, 228, 228, 0.41); - --charcoal-colors-dark-neutral-a-20: rgba(228, 228, 228, 0.255); - --charcoal-colors-dark-neutral-a-10: rgba(228, 228, 228, 0.1); - --charcoal-colors-dark-neutral-a-5: rgba(228, 228, 228, 0.05); - --charcoal-colors-dark-neutral-a-0: rgba(228, 228, 228, 0); - --charcoal-colors-dark-neutral-a--5: rgba(6, 6, 6, 0.41); - --charcoal-colors-dark-neutral-a--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-neutral--10: rgba(6, 6, 6, 1); - --charcoal-colors-light-magenta-90: rgba(59, 5, 37, 1); - --charcoal-colors-light-magenta-80: rgba(98, 27, 67, 1); - --charcoal-colors-light-magenta-70: rgba(141, 33, 96, 1); - --charcoal-colors-light-magenta-60: rgba(196, 53, 135, 1); - --charcoal-colors-light-magenta-50: rgba(235, 95, 170, 1); - --charcoal-colors-light-magenta-40: rgba(250, 131, 192, 1); - --charcoal-colors-light-magenta-30: rgba(245, 173, 206, 1); - --charcoal-colors-light-magenta-20: rgba(255, 204, 226, 1); - --charcoal-colors-light-magenta-10: rgba(251, 226, 237, 1); - --charcoal-colors-light-magenta-5: rgba(252, 239, 244, 1); - --charcoal-colors-light-purple-90: rgba(40, 16, 70, 1); - --charcoal-colors-light-purple-80: rgba(70, 32, 115, 1); - --charcoal-colors-light-purple-70: rgba(103, 39, 171, 1); - --charcoal-colors-light-purple-60: rgba(143, 77, 225, 1); - --charcoal-colors-light-purple-50: rgba(173, 120, 252, 1); - --charcoal-colors-light-purple-40: rgba(190, 153, 253, 1); - --charcoal-colors-light-purple-30: rgba(207, 183, 253, 1); - --charcoal-colors-light-purple-20: rgba(224, 210, 253, 1); - --charcoal-colors-light-purple-10: rgba(236, 229, 251, 1); - --charcoal-colors-light-purple-5: rgba(244, 241, 252, 1); - --charcoal-colors-light-indigo-90: rgba(24, 24, 70, 1); - --charcoal-colors-light-indigo-80: rgba(45, 47, 109, 1); - --charcoal-colors-light-indigo-70: rgba(68, 70, 155, 1); - --charcoal-colors-light-indigo-60: rgba(95, 97, 222, 1); - --charcoal-colors-light-indigo-50: rgba(129, 136, 253, 1); - --charcoal-colors-light-indigo-40: rgba(156, 165, 252, 1); - --charcoal-colors-light-indigo-30: rgba(181, 189, 253, 1); - --charcoal-colors-light-indigo-20: rgba(210, 216, 252, 1); - --charcoal-colors-light-indigo-10: rgba(226, 231, 253, 1); - --charcoal-colors-light-indigo-5: rgba(241, 242, 253, 1); - --charcoal-colors-light-blue-90: rgba(3, 35, 63, 1); - --charcoal-colors-light-blue-80: rgba(19, 58, 93, 1); - --charcoal-colors-light-blue-70: rgba(24, 81, 130, 1); - --charcoal-colors-light-blue-60: rgba(31, 117, 188, 1); - --charcoal-colors-light-blue-50: rgba(0, 150, 250, 1); - --charcoal-colors-light-blue-40: rgba(85, 178, 253, 1); - --charcoal-colors-light-blue-30: rgba(137, 200, 253, 1); - --charcoal-colors-light-blue-20: rgba(188, 222, 252, 1); - --charcoal-colors-light-blue-10: rgba(216, 235, 251, 1); - --charcoal-colors-light-blue-5: rgba(236, 244, 253, 1); - --charcoal-colors-light-blue-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-turquoise-90: rgba(1, 37, 37, 1); - --charcoal-colors-light-turquoise-80: rgba(1, 61, 62, 1); - --charcoal-colors-light-turquoise-70: rgba(3, 87, 89, 1); - --charcoal-colors-light-turquoise-60: rgba(11, 126, 128, 1); - --charcoal-colors-light-turquoise-50: rgba(27, 161, 163, 1); - --charcoal-colors-light-turquoise-40: rgba(63, 184, 186, 1); - --charcoal-colors-light-turquoise-30: rgba(109, 204, 205, 1); - --charcoal-colors-light-turquoise-20: rgba(152, 228, 229, 1); - --charcoal-colors-light-turquoise-10: rgba(196, 240, 241, 1); - --charcoal-colors-light-turquoise-5: rgba(225, 249, 249, 1); - --charcoal-colors-light-turquoise-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-green-90: rgba(1, 40, 0, 1); - --charcoal-colors-light-green-80: rgba(7, 64, 4, 1); - --charcoal-colors-light-green-70: rgba(4, 93, 0, 1); - --charcoal-colors-light-green-60: rgba(17, 131, 8, 1); - --charcoal-colors-light-green-50: rgba(37, 170, 28, 1); - --charcoal-colors-light-green-40: rgba(80, 192, 72, 1); - --charcoal-colors-light-green-30: rgba(121, 214, 112, 1); - --charcoal-colors-light-green-20: rgba(164, 234, 157, 1); - --charcoal-colors-light-green-10: rgba(204, 243, 200, 1); - --charcoal-colors-light-green-5: rgba(234, 248, 232, 1); - --charcoal-colors-light-green-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-yellow-90: rgba(44, 28, 0, 1); - --charcoal-colors-light-yellow-80: rgba(74, 51, 7, 1); - --charcoal-colors-light-yellow-70: rgba(110, 72, 5, 1); - --charcoal-colors-light-yellow-60: rgba(161, 99, 9, 1); - --charcoal-colors-light-yellow-50: rgba(205, 131, 2, 1); - --charcoal-colors-light-yellow-40: rgba(231, 157, 20, 1); - --charcoal-colors-light-yellow-30: rgba(245, 183, 17, 1); - --charcoal-colors-light-yellow-20: rgba(254, 214, 61, 1); - --charcoal-colors-light-yellow-10: rgba(246, 232, 176, 1); - --charcoal-colors-light-yellow-5: rgba(250, 243, 221, 1); - --charcoal-colors-light-yellow-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-orange-90: rgba(55, 18, 2, 1); - --charcoal-colors-light-orange-80: rgba(91, 38, 13, 1); - --charcoal-colors-light-orange-70: rgba(132, 54, 7, 1); - --charcoal-colors-light-orange-60: rgba(190, 79, 4, 1); - --charcoal-colors-light-orange-50: rgba(242, 105, 21, 1); - --charcoal-colors-light-orange-40: rgba(253, 143, 53, 1); - --charcoal-colors-light-orange-30: rgba(254, 176, 121, 1); - --charcoal-colors-light-orange-20: rgba(253, 209, 177, 1); - --charcoal-colors-light-orange-10: rgba(252, 229, 211, 1); - --charcoal-colors-light-orange-5: rgba(253, 241, 229, 1); - --charcoal-colors-light-red-90: rgba(66, 0, 1, 1); - --charcoal-colors-light-red-80: rgba(103, 22, 17, 1); - --charcoal-colors-light-red-70: rgba(147, 33, 28, 1); - --charcoal-colors-light-red-60: rgba(206, 54, 46, 1); - --charcoal-colors-light-red-50: rgba(253, 91, 78, 1); - --charcoal-colors-light-red-40: rgba(252, 138, 124, 1); - --charcoal-colors-light-red-30: rgba(253, 174, 163, 1); - --charcoal-colors-light-red-20: rgba(253, 206, 199, 1); - --charcoal-colors-light-red-10: rgba(250, 228, 225, 1); - --charcoal-colors-light-red-5: rgba(253, 240, 237, 1); - --charcoal-colors-light-red-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-neutral-90: rgba(31, 31, 31, 1); - --charcoal-colors-light-neutral-80: rgba(56, 56, 56, 1); - --charcoal-colors-light-neutral-70: rgba(81, 81, 81, 1); - --charcoal-colors-light-neutral-60: rgba(113, 113, 113, 1); - --charcoal-colors-light-neutral-50: rgba(148, 148, 148, 1); - --charcoal-colors-light-neutral-40: rgba(172, 172, 172, 1); - --charcoal-colors-light-neutral-30: rgba(194, 194, 194, 1); - --charcoal-colors-light-neutral-20: rgba(217, 217, 217, 1); - --charcoal-colors-light-neutral-10: rgba(232, 232, 232, 1); - --charcoal-colors-light-neutral-5: rgba(243, 243, 243, 1); - --charcoal-colors-light-neutral-a-80: rgba(31, 31, 31, 0.885); - --charcoal-colors-light-neutral-a-70: rgba(31, 31, 31, 0.775); - --charcoal-colors-light-neutral-a-60: rgba(31, 31, 31, 0.635); - --charcoal-colors-light-neutral-a-50: rgba(31, 31, 31, 0.475); - --charcoal-colors-light-neutral-a-40: rgba(31, 31, 31, 0.37); - --charcoal-colors-light-neutral-a-30: rgba(31, 31, 31, 0.27); - --charcoal-colors-light-neutral-a-20: rgba(31, 31, 31, 0.17); - --charcoal-colors-light-neutral-a-10: rgba(31, 31, 31, 0.102); - --charcoal-colors-light-neutral-a-5: rgba(31, 31, 31, 0.055); - --charcoal-colors-light-neutral-a-0: rgba(31, 31, 31, 0); - --charcoal-colors-light-neutral-0: rgba(255, 255, 255, 1); + --charcoal-radius-oval: 999999; --charcoal-text-font-family-sans: Sarasa UI J; --charcoal-text-line-height-100: 72; --charcoal-text-line-height-90: 64; @@ -321,115 +61,272 @@ --charcoal-space-10: 4; --charcoal-space-1: 2; --charcoal-space-0: 0; - --charcoal-brand-color-f-a-c-t-o-r-y: rgba(0, 184, 205, 1); - --charcoal-brand-color-b-o-o-t-h: rgba(252, 77, 80, 1); + --charcoal-brand-color-factory: rgba(0, 184, 205, 1); + --charcoal-brand-color-booth: rgba(252, 77, 80, 1); --charcoal-brand-color-comic: rgba(255, 196, 0, 1); --charcoal-brand-color-premium: rgba(253, 158, 22, 1); --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1); - --charcoal-color-border-negative: var(--charcoal-colors-dark-red-20); - --charcoal-color-border-focus: var(--charcoal-colors-dark-blue-20); - --charcoal-color-border-disable: var(--charcoal-colors-dark-neutral-a-5); - --charcoal-color-border-secondary: var(--charcoal-colors-dark-neutral-a-10); - --charcoal-color-border-default: var(--charcoal-colors-dark-neutral-30); - --charcoal-color-icon-on-neutral-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-icon-on-neutral-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-icon-on-neutral-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium); - --charcoal-color-text-on-h-u-d-press: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-on-h-u-d-hover: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-on-h-u-d-default: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-on-discovery-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-discovery-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-discovery-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-notice-press: var(--charcoal-colors-dark-neutral-5); - --charcoal-color-text-on-notice-hover: var(--charcoal-colors-dark-neutral-5); - --charcoal-color-text-on-notice-default: var(--charcoal-colors-dark-neutral-5); - --charcoal-color-text-on-positive-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-positive-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-positive-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-negative-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-negative-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-negative-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-primary-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-primary-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-on-img-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-on-img-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-on-img-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-primary-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-visited-press: var(--charcoal-colors-dark-purple-90); - --charcoal-color-text-visited-hover: var(--charcoal-colors-dark-purple-80); - --charcoal-color-text-visited-default: var(--charcoal-colors-dark-purple-60); - --charcoal-color-text-info-press: var(--charcoal-colors-dark-blue-90); - --charcoal-color-text-info-hover: var(--charcoal-colors-dark-blue-80); - --charcoal-color-text-info-default: var(--charcoal-colors-dark-blue-60); - --charcoal-color-text-notice-press: var(--charcoal-colors-dark-yellow-90); - --charcoal-color-text-notice-hover: var(--charcoal-colors-dark-yellow-80); - --charcoal-color-text-notice-default: var(--charcoal-colors-dark-yellow-60); - --charcoal-color-text-positive-press: var(--charcoal-colors-dark-green-90); - --charcoal-color-text-positive-hover: var(--charcoal-colors-dark-green-80); - --charcoal-color-text-positive-default: var(--charcoal-colors-dark-green-60); - --charcoal-color-text-negative-press: var(--charcoal-colors-dark-red-90); - --charcoal-color-text-negative-hover: var(--charcoal-colors-dark-red-80); - --charcoal-color-text-negative-default: var(--charcoal-colors-dark-red-60); - --charcoal-color-text-placeholder-press: var(--charcoal-colors-dark-neutral-50); - --charcoal-color-text-placeholder-hover: var(--charcoal-colors-dark-neutral-40); - --charcoal-color-text-placeholder-default: var(--charcoal-colors-dark-neutral-30); - --charcoal-color-text-tertiary-press: var(--charcoal-colors-dark-neutral-70); - --charcoal-color-text-tertiary-hover: var(--charcoal-colors-dark-neutral-60); - --charcoal-color-text-tertiary-default: var(--charcoal-colors-dark-neutral-40); - --charcoal-color-text-secondary-press: var(--charcoal-colors-dark-neutral-80); - --charcoal-color-text-secondary-hover: var(--charcoal-colors-dark-neutral-70); - --charcoal-color-text-secondary-default: var(--charcoal-colors-dark-neutral-60); - --charcoal-color-text-disable: var(--charcoal-colors-dark-neutral-40); - --charcoal-color-text-press: var(--charcoal-colors-dark-neutral-70); - --charcoal-color-text-hover: var(--charcoal-colors-dark-neutral-80); - --charcoal-color-text-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-container-skeleton: var(--charcoal-colors-dark-neutral-a-5); - --charcoal-color-container-h-u-d-press: var(--charcoal-colors-light-neutral-20); - --charcoal-color-container-h-u-d-hover: var(--charcoal-colors-light-neutral-20); - --charcoal-color-container-h-u-d-default: var(--charcoal-colors-light-neutral-10); - --charcoal-color-container-neutral-press: var(--charcoal-colors-dark-neutral-50); - --charcoal-color-container-neutral-hover: var(--charcoal-colors-dark-neutral-40); - --charcoal-color-container-discovery-press: var(--charcoal-colors-dark-red-50); - --charcoal-color-container-discovery-hover: var(--charcoal-colors-dark-red-40); - --charcoal-color-container-discovery-default: var(--charcoal-colors-dark-red-30); - --charcoal-color-container-neutral-default: var(--charcoal-colors-dark-neutral-30); - --charcoal-color-container-notice-press: var(--charcoal-colors-dark-yellow-90); - --charcoal-color-container-notice-hover: var(--charcoal-colors-dark-yellow-80); - --charcoal-color-container-notice-default: var(--charcoal-colors-dark-yellow-70); - --charcoal-color-container-positive-press: var(--charcoal-colors-dark-green-50); - --charcoal-color-container-positive-hover: var(--charcoal-colors-dark-green-40); - --charcoal-color-container-positive-default: var(--charcoal-colors-dark-green-30); - --charcoal-color-container-negative-press: var(--charcoal-colors-dark-red-50); - --charcoal-color-container-negative-hover: var(--charcoal-colors-dark-red-40); - --charcoal-color-container-negative-default: var(--charcoal-colors-dark-red-30); - --charcoal-color-container-on-img-press: var(--charcoal-colors-light-neutral-a-60); - --charcoal-color-container-on-img-hover: var(--charcoal-colors-light-neutral-a-50); - --charcoal-color-container-on-img-default: var(--charcoal-colors-light-neutral-a-40); - --charcoal-color-container-secondary-press-a: var(--charcoal-colors-dark-neutral-a-20); - --charcoal-color-container-secondary-hover-a: var(--charcoal-colors-dark-neutral-a-10); - --charcoal-color-container-secondary-default-a: var(--charcoal-colors-dark-neutral-a-5); - --charcoal-color-container-secondary-press: var(--charcoal-colors-dark-neutral-20); - --charcoal-color-container-secondary-hover: var(--charcoal-colors-dark-neutral-10); - --charcoal-color-container-primary-press: var(--charcoal-colors-dark-blue-50); - --charcoal-color-container-primary-hover: var(--charcoal-colors-dark-blue-40); - --charcoal-color-container-primary-default: var(--charcoal-colors-dark-blue-30); - --charcoal-color-container-tertiary-press-a: var(--charcoal-colors-dark-neutral-a-30); - --charcoal-color-container-tertiary-hover-a: var(--charcoal-colors-dark-neutral-a-20); - --charcoal-color-container-tertiary-default-a: var(--charcoal-colors-dark-neutral-a-10); - --charcoal-color-container-tertiary-press: var(--charcoal-colors-dark-neutral-30); - --charcoal-color-container-tertiary-hover: var(--charcoal-colors-dark-neutral-20); - --charcoal-color-container-tertiary-default: var(--charcoal-colors-dark-neutral-10); - --charcoal-color-container-secondary-default: var(--charcoal-colors-dark-neutral-5); - --charcoal-color-container-disable: var(--charcoal-colors-dark-neutral-10); - --charcoal-color-container-press: var(--charcoal-colors-dark-neutral-10); - --charcoal-color-container-hover: var(--charcoal-colors-dark-neutral-5); - --charcoal-color-container-default: var(--charcoal-colors-dark-neutral-0); - --charcoal-color-background-tertiary: var(--charcoal-colors-dark-neutral--10); - --charcoal-color-background-secondary: var(--charcoal-colors-dark-neutral--5); - --charcoal-color-background-default: var(--charcoal-colors-dark-neutral-0); - --charcoal-colors-dark-neutral-a-90: var(--charcoal-colors-dark-neutral-90); - --charcoal-colors-light-neutral-a-90: var(--charcoal-colors-light-neutral-90); + --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1); + --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1); + --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02); + --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1); + --charcoal-color-dark-magenta-80: rgba(247, 184, 213, 1); + --charcoal-color-dark-magenta-70: rgba(243, 163, 200, 1); + --charcoal-color-dark-magenta-60: rgba(240, 146, 191, 1); + --charcoal-color-dark-magenta-50: rgba(220, 114, 168, 1); + --charcoal-color-dark-magenta-40: rgba(202, 91, 149, 1); + --charcoal-color-dark-magenta-30: rgba(185, 64, 130, 1); + --charcoal-color-dark-magenta-20: rgba(124, 58, 91, 1); + --charcoal-color-dark-magenta-10: rgba(69, 44, 56, 1); + --charcoal-color-dark-magenta-5: rgba(48, 36, 42, 1); + --charcoal-color-dark-magenta-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-magenta--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-magenta--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-purple-90: rgba(233, 223, 255, 1); + --charcoal-color-dark-purple-80: rgba(210, 192, 245, 1); + --charcoal-color-dark-purple-70: rgba(201, 176, 249, 1); + --charcoal-color-dark-purple-60: rgba(191, 160, 246, 1); + --charcoal-color-dark-purple-50: rgba(169, 133, 229, 1); + --charcoal-color-dark-purple-40: rgba(149, 110, 210, 1); + --charcoal-color-dark-purple-30: rgba(131, 88, 194, 1); + --charcoal-color-dark-purple-20: rgba(93, 68, 132, 1); + --charcoal-color-dark-purple-10: rgba(56, 48, 71, 1); + --charcoal-color-dark-purple-5: rgba(42, 38, 49, 1); + --charcoal-color-dark-purple-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-purple--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-purple--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-indigo-90: rgba(222, 227, 255, 1); + --charcoal-color-dark-indigo-80: rgba(192, 199, 248, 1); + --charcoal-color-dark-indigo-70: rgba(175, 184, 254, 1); + --charcoal-color-dark-indigo-60: rgba(160, 170, 249, 1); + --charcoal-color-dark-indigo-50: rgba(135, 143, 231, 1); + --charcoal-color-dark-indigo-40: rgba(115, 123, 219, 1); + --charcoal-color-dark-indigo-30: rgba(96, 100, 199, 1); + --charcoal-color-dark-indigo-20: rgba(72, 76, 134, 1); + --charcoal-color-dark-indigo-10: rgba(48, 51, 74, 1); + --charcoal-color-dark-indigo-5: rgba(39, 40, 46, 1); + --charcoal-color-dark-indigo-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-indigo--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-indigo--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-blue-90: rgba(207, 230, 253, 1); + --charcoal-color-dark-blue-80: rgba(166, 205, 245, 1); + --charcoal-color-dark-blue-70: rgba(139, 193, 248, 1); + --charcoal-color-dark-blue-60: rgba(114, 181, 245, 1); + --charcoal-color-dark-blue-50: rgba(83, 156, 224, 1); + --charcoal-color-dark-blue-40: rgba(55, 136, 208, 1); + --charcoal-color-dark-blue-30: rgba(8, 114, 190, 1); + --charcoal-color-dark-blue-20: rgba(39, 84, 126, 1); + --charcoal-color-dark-blue-10: rgba(36, 55, 73, 1); + --charcoal-color-dark-blue-5: rgba(33, 41, 50, 1); + --charcoal-color-dark-blue-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-blue--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-blue--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-turquoise-90: rgba(180, 239, 234, 1); + --charcoal-color-dark-turquoise-80: rgba(144, 213, 207, 1); + --charcoal-color-dark-turquoise-70: rgba(118, 205, 199, 1); + --charcoal-color-dark-turquoise-60: rgba(84, 193, 186, 1); + --charcoal-color-dark-turquoise-50: rgba(32, 170, 164, 1); + --charcoal-color-dark-turquoise-40: rgba(0, 147, 142, 1); + --charcoal-color-dark-turquoise-30: rgba(0, 123, 118, 1); + --charcoal-color-dark-turquoise-20: rgba(0, 91, 88, 1); + --charcoal-color-dark-turquoise-10: rgba(26, 60, 58, 1); + --charcoal-color-dark-turquoise-5: rgba(35, 42, 41, 1); + --charcoal-color-dark-turquoise-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-turquoise--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-turquoise--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-green-90: rgba(191, 241, 186, 1); + --charcoal-color-dark-green-80: rgba(161, 215, 155, 1); + --charcoal-color-dark-green-70: rgba(141, 204, 135, 1); + --charcoal-color-dark-green-60: rgba(120, 194, 113, 1); + --charcoal-color-dark-green-50: rgba(86, 169, 79, 1); + --charcoal-color-dark-green-40: rgba(58, 150, 52, 1); + --charcoal-color-dark-green-30: rgba(13, 129, 5, 1); + --charcoal-color-dark-green-20: rgba(39, 92, 35, 1); + --charcoal-color-dark-green-10: rgba(41, 59, 40, 1); + --charcoal-color-dark-green-5: rgba(37, 43, 37, 1); + --charcoal-color-dark-green-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-green--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-green--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-yellow-90: rgba(252, 227, 145, 1); + --charcoal-color-dark-yellow-80: rgba(231, 199, 80, 1); + --charcoal-color-dark-yellow-70: rgba(222, 185, 7, 1); + --charcoal-color-dark-yellow-60: rgba(222, 167, 29, 1); + --charcoal-color-dark-yellow-50: rgba(199, 140, 10, 1); + --charcoal-color-dark-yellow-40: rgba(174, 121, 14, 1); + --charcoal-color-dark-yellow-30: rgba(153, 99, 8, 1); + --charcoal-color-dark-yellow-20: rgba(109, 75, 31, 1); + --charcoal-color-dark-yellow-10: rgba(66, 51, 30, 1); + --charcoal-color-dark-yellow-5: rgba(44, 40, 35, 1); + --charcoal-color-dark-yellow-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-yellow--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-yellow--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-orange-90: rgba(252, 221, 207, 1); + --charcoal-color-dark-orange-80: rgba(245, 188, 163, 1); + --charcoal-color-dark-orange-70: rgba(248, 170, 135, 1); + --charcoal-color-dark-orange-60: rgba(246, 151, 107, 1); + --charcoal-color-dark-orange-50: rgba(229, 121, 68, 1); + --charcoal-color-dark-orange-40: rgba(212, 97, 41, 1); + --charcoal-color-dark-orange-30: rgba(188, 74, 14, 1); + --charcoal-color-dark-orange-20: rgba(134, 58, 22, 1); + --charcoal-color-dark-orange-10: rgba(72, 48, 38, 1); + --charcoal-color-dark-orange-5: rgba(48, 39, 34, 1); + --charcoal-color-dark-orange-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-orange--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-orange--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-red-90: rgba(254, 219, 214, 1); + --charcoal-color-dark-red-80: rgba(249, 186, 177, 1); + --charcoal-color-dark-red-70: rgba(254, 167, 155, 1); + --charcoal-color-dark-red-60: rgba(252, 147, 134, 1); + --charcoal-color-dark-red-50: rgba(233, 114, 102, 1); + --charcoal-color-dark-red-40: rgba(217, 88, 76, 1); + --charcoal-color-dark-red-30: rgba(197, 60, 51, 1); + --charcoal-color-dark-red-20: rgba(136, 54, 46, 1); + --charcoal-color-dark-red-10: rgba(73, 47, 43, 1); + --charcoal-color-dark-red-5: rgba(47, 39, 38, 1); + --charcoal-color-dark-red-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-red--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-red--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-neutral-90: rgba(228, 228, 228, 1); + --charcoal-color-dark-neutral-80: rgba(202, 202, 202, 1); + --charcoal-color-dark-neutral-70: rgba(188, 188, 188, 1); + --charcoal-color-dark-neutral-60: rgba(175, 175, 175, 1); + --charcoal-color-dark-neutral-50: rgba(151, 151, 151, 1); + --charcoal-color-dark-neutral-40: rgba(130, 130, 130, 1); + --charcoal-color-dark-neutral-30: rgba(112, 112, 112, 1); + --charcoal-color-dark-neutral-20: rgba(81, 81, 81, 1); + --charcoal-color-dark-neutral-10: rgba(51, 51, 51, 1); + --charcoal-color-dark-neutral-5: rgba(41, 41, 41, 1); + --charcoal-color-dark-neutral-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-neutral--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-neutral-a-80: rgba(228, 228, 228, 0.87); + --charcoal-color-dark-neutral-a-70: rgba(228, 228, 228, 0.795); + --charcoal-color-dark-neutral-a-60: rgba(228, 228, 228, 0.73); + --charcoal-color-dark-neutral-a-50: rgba(228, 228, 228, 0.61); + --charcoal-color-dark-neutral-a-40: rgba(228, 228, 228, 0.505); + --charcoal-color-dark-neutral-a-30: rgba(228, 228, 228, 0.41); + --charcoal-color-dark-neutral-a-20: rgba(228, 228, 228, 0.255); + --charcoal-color-dark-neutral-a-10: rgba(228, 228, 228, 0.1); + --charcoal-color-dark-neutral-a-5: rgba(228, 228, 228, 0.05); + --charcoal-color-dark-neutral-a-0: rgba(228, 228, 228, 0); + --charcoal-color-dark-neutral-a--5: rgba(6, 6, 6, 0.41); + --charcoal-color-dark-neutral-a--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-neutral--10: rgba(6, 6, 6, 1); + --charcoal-color-light-magenta-90: rgba(59, 5, 37, 1); + --charcoal-color-light-magenta-80: rgba(98, 27, 67, 1); + --charcoal-color-light-magenta-70: rgba(141, 33, 96, 1); + --charcoal-color-light-magenta-60: rgba(196, 53, 135, 1); + --charcoal-color-light-magenta-50: rgba(235, 95, 170, 1); + --charcoal-color-light-magenta-40: rgba(250, 131, 192, 1); + --charcoal-color-light-magenta-30: rgba(245, 173, 206, 1); + --charcoal-color-light-magenta-20: rgba(255, 204, 226, 1); + --charcoal-color-light-magenta-10: rgba(251, 226, 237, 1); + --charcoal-color-light-magenta-5: rgba(252, 239, 244, 1); + --charcoal-color-light-purple-90: rgba(40, 16, 70, 1); + --charcoal-color-light-purple-80: rgba(70, 32, 115, 1); + --charcoal-color-light-purple-70: rgba(103, 39, 171, 1); + --charcoal-color-light-purple-60: rgba(143, 77, 225, 1); + --charcoal-color-light-purple-50: rgba(173, 120, 252, 1); + --charcoal-color-light-purple-40: rgba(190, 153, 253, 1); + --charcoal-color-light-purple-30: rgba(207, 183, 253, 1); + --charcoal-color-light-purple-20: rgba(224, 210, 253, 1); + --charcoal-color-light-purple-10: rgba(236, 229, 251, 1); + --charcoal-color-light-purple-5: rgba(244, 241, 252, 1); + --charcoal-color-light-indigo-90: rgba(24, 24, 70, 1); + --charcoal-color-light-indigo-80: rgba(45, 47, 109, 1); + --charcoal-color-light-indigo-70: rgba(68, 70, 155, 1); + --charcoal-color-light-indigo-60: rgba(95, 97, 222, 1); + --charcoal-color-light-indigo-50: rgba(129, 136, 253, 1); + --charcoal-color-light-indigo-40: rgba(156, 165, 252, 1); + --charcoal-color-light-indigo-30: rgba(181, 189, 253, 1); + --charcoal-color-light-indigo-20: rgba(210, 216, 252, 1); + --charcoal-color-light-indigo-10: rgba(226, 231, 253, 1); + --charcoal-color-light-indigo-5: rgba(241, 242, 253, 1); + --charcoal-color-light-blue-90: rgba(3, 35, 63, 1); + --charcoal-color-light-blue-80: rgba(19, 58, 93, 1); + --charcoal-color-light-blue-70: rgba(24, 81, 130, 1); + --charcoal-color-light-blue-60: rgba(31, 117, 188, 1); + --charcoal-color-light-blue-50: rgba(0, 150, 250, 1); + --charcoal-color-light-blue-40: rgba(85, 178, 253, 1); + --charcoal-color-light-blue-30: rgba(137, 200, 253, 1); + --charcoal-color-light-blue-20: rgba(188, 222, 252, 1); + --charcoal-color-light-blue-10: rgba(216, 235, 251, 1); + --charcoal-color-light-blue-5: rgba(236, 244, 253, 1); + --charcoal-color-light-blue-0: rgba(255, 255, 255, 1); + --charcoal-color-light-turquoise-90: rgba(1, 37, 37, 1); + --charcoal-color-light-turquoise-80: rgba(1, 61, 62, 1); + --charcoal-color-light-turquoise-70: rgba(3, 87, 89, 1); + --charcoal-color-light-turquoise-60: rgba(11, 126, 128, 1); + --charcoal-color-light-turquoise-50: rgba(27, 161, 163, 1); + --charcoal-color-light-turquoise-40: rgba(63, 184, 186, 1); + --charcoal-color-light-turquoise-30: rgba(109, 204, 205, 1); + --charcoal-color-light-turquoise-20: rgba(152, 228, 229, 1); + --charcoal-color-light-turquoise-10: rgba(196, 240, 241, 1); + --charcoal-color-light-turquoise-5: rgba(225, 249, 249, 1); + --charcoal-color-light-turquoise-0: rgba(255, 255, 255, 1); + --charcoal-color-light-green-90: rgba(1, 40, 0, 1); + --charcoal-color-light-green-80: rgba(7, 64, 4, 1); + --charcoal-color-light-green-70: rgba(4, 93, 0, 1); + --charcoal-color-light-green-60: rgba(17, 131, 8, 1); + --charcoal-color-light-green-50: rgba(37, 170, 28, 1); + --charcoal-color-light-green-40: rgba(80, 192, 72, 1); + --charcoal-color-light-green-30: rgba(121, 214, 112, 1); + --charcoal-color-light-green-20: rgba(164, 234, 157, 1); + --charcoal-color-light-green-10: rgba(204, 243, 200, 1); + --charcoal-color-light-green-5: rgba(234, 248, 232, 1); + --charcoal-color-light-green-0: rgba(255, 255, 255, 1); + --charcoal-color-light-yellow-90: rgba(44, 28, 0, 1); + --charcoal-color-light-yellow-80: rgba(74, 51, 7, 1); + --charcoal-color-light-yellow-70: rgba(110, 72, 5, 1); + --charcoal-color-light-yellow-60: rgba(161, 99, 9, 1); + --charcoal-color-light-yellow-50: rgba(205, 131, 2, 1); + --charcoal-color-light-yellow-40: rgba(231, 157, 20, 1); + --charcoal-color-light-yellow-30: rgba(245, 183, 17, 1); + --charcoal-color-light-yellow-20: rgba(254, 214, 61, 1); + --charcoal-color-light-yellow-10: rgba(246, 232, 176, 1); + --charcoal-color-light-yellow-5: rgba(250, 243, 221, 1); + --charcoal-color-light-yellow-0: rgba(255, 255, 255, 1); + --charcoal-color-light-orange-90: rgba(55, 18, 2, 1); + --charcoal-color-light-orange-80: rgba(91, 38, 13, 1); + --charcoal-color-light-orange-70: rgba(132, 54, 7, 1); + --charcoal-color-light-orange-60: rgba(190, 79, 4, 1); + --charcoal-color-light-orange-50: rgba(242, 105, 21, 1); + --charcoal-color-light-orange-40: rgba(253, 143, 53, 1); + --charcoal-color-light-orange-30: rgba(254, 176, 121, 1); + --charcoal-color-light-orange-20: rgba(253, 209, 177, 1); + --charcoal-color-light-orange-10: rgba(252, 229, 211, 1); + --charcoal-color-light-orange-5: rgba(253, 241, 229, 1); + --charcoal-color-light-red-90: rgba(66, 0, 1, 1); + --charcoal-color-light-red-80: rgba(103, 22, 17, 1); + --charcoal-color-light-red-70: rgba(147, 33, 28, 1); + --charcoal-color-light-red-60: rgba(206, 54, 46, 1); + --charcoal-color-light-red-50: rgba(253, 91, 78, 1); + --charcoal-color-light-red-40: rgba(252, 138, 124, 1); + --charcoal-color-light-red-30: rgba(253, 174, 163, 1); + --charcoal-color-light-red-20: rgba(253, 206, 199, 1); + --charcoal-color-light-red-10: rgba(250, 228, 225, 1); + --charcoal-color-light-red-5: rgba(253, 240, 237, 1); + --charcoal-color-light-red-0: rgba(255, 255, 255, 1); + --charcoal-color-light-neutral-90: rgba(31, 31, 31, 1); + --charcoal-color-light-neutral-80: rgba(56, 56, 56, 1); + --charcoal-color-light-neutral-70: rgba(81, 81, 81, 1); + --charcoal-color-light-neutral-60: rgba(113, 113, 113, 1); + --charcoal-color-light-neutral-50: rgba(148, 148, 148, 1); + --charcoal-color-light-neutral-40: rgba(172, 172, 172, 1); + --charcoal-color-light-neutral-30: rgba(194, 194, 194, 1); + --charcoal-color-light-neutral-20: rgba(217, 217, 217, 1); + --charcoal-color-light-neutral-10: rgba(232, 232, 232, 1); + --charcoal-color-light-neutral-5: rgba(243, 243, 243, 1); + --charcoal-color-light-neutral-a-80: rgba(31, 31, 31, 0.885); + --charcoal-color-light-neutral-a-70: rgba(31, 31, 31, 0.775); + --charcoal-color-light-neutral-a-60: rgba(31, 31, 31, 0.635); + --charcoal-color-light-neutral-a-50: rgba(31, 31, 31, 0.475); + --charcoal-color-light-neutral-a-40: rgba(31, 31, 31, 0.37); + --charcoal-color-light-neutral-a-30: rgba(31, 31, 31, 0.27); + --charcoal-color-light-neutral-a-20: rgba(31, 31, 31, 0.17); + --charcoal-color-light-neutral-a-10: rgba(31, 31, 31, 0.102); + --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055); + --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0); + --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1); --charcoal-space-layout-100: var(--charcoal-space-100); --charcoal-space-layout-90: var(--charcoal-space-90); --charcoal-space-layout-80: var(--charcoal-space-80); @@ -457,6 +354,121 @@ --charcoal-space-component-10: var(--charcoal-space-10); --charcoal-space-component-1: var(--charcoal-space-1); --charcoal-space-component-0: var(--charcoal-space-0); + --charcoal-color-border-negative: var(--charcoal-color-dark-red-20); + --charcoal-color-border-focus-2: var(--charcoal-color-dark-blue-20); + --charcoal-color-border-disable: var(--charcoal-color-dark-neutral-a-5); + --charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60); + --charcoal-color-border-secondary: var(--charcoal-color-dark-neutral-a-10); + --charcoal-color-border-default: var(--charcoal-color-dark-neutral-30); + --charcoal-color-icon-on-neutral-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-icon-on-neutral-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium); + --charcoal-color-text-on-hud-press: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-on-hud-hover: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-on-hud-default: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-on-discovery-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-discovery-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-discovery-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-notice-press: var(--charcoal-color-dark-neutral-5); + --charcoal-color-text-on-notice-hover: var(--charcoal-color-dark-neutral-5); + --charcoal-color-text-on-notice-default: var(--charcoal-color-dark-neutral-5); + --charcoal-color-text-on-positive-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-positive-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-positive-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-negative-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-negative-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-negative-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-primary-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-primary-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-on-img-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-on-img-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-on-img-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-primary-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-positive-press: var(--charcoal-color-dark-green-90); + --charcoal-color-text-positive-hover: var(--charcoal-color-dark-green-80); + --charcoal-color-text-positive-default: var(--charcoal-color-dark-green-60); + --charcoal-color-text-notice-press: var(--charcoal-color-dark-yellow-90); + --charcoal-color-text-notice-hover: var(--charcoal-color-dark-yellow-80); + --charcoal-color-text-notice-default: var(--charcoal-color-dark-yellow-60); + --charcoal-color-text-negative-press: var(--charcoal-color-dark-red-90); + --charcoal-color-text-negative-hover: var(--charcoal-color-dark-red-80); + --charcoal-color-text-negative-default: var(--charcoal-color-dark-red-60); + --charcoal-color-text-visited-press: var(--charcoal-color-dark-purple-90); + --charcoal-color-text-visited-hover: var(--charcoal-color-dark-purple-80); + --charcoal-color-text-visited-default: var(--charcoal-color-dark-purple-60); + --charcoal-color-text-info-press: var(--charcoal-color-dark-blue-90); + --charcoal-color-text-info-hover: var(--charcoal-color-dark-blue-80); + --charcoal-color-text-info-default: var(--charcoal-color-dark-blue-60); + --charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-50); + --charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-40); + --charcoal-color-text-placeholder-default: var(--charcoal-color-dark-neutral-30); + --charcoal-color-text-tertiary-press: var(--charcoal-color-dark-neutral-70); + --charcoal-color-text-tertiary-hover: var(--charcoal-color-dark-neutral-60); + --charcoal-color-text-tertiary-default: var(--charcoal-color-dark-neutral-40); + --charcoal-color-text-secondary-press: var(--charcoal-color-dark-neutral-80); + --charcoal-color-text-secondary-hover: var(--charcoal-color-dark-neutral-70); + --charcoal-color-text-secondary-default: var(--charcoal-color-dark-neutral-60); + --charcoal-color-text-disable: var(--charcoal-color-dark-neutral-40); + --charcoal-color-text-press: var(--charcoal-color-dark-neutral-70); + --charcoal-color-text-hover: var(--charcoal-color-dark-neutral-80); + --charcoal-color-text-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-container-skeleton: var(--charcoal-color-dark-neutral-a-5); + --charcoal-color-container-hud-press: var(--charcoal-color-light-neutral-20); + --charcoal-color-container-hud-hover: var(--charcoal-color-light-neutral-20); + --charcoal-color-container-hud-default: var(--charcoal-color-light-neutral-10); + --charcoal-color-container-neutral-press: var(--charcoal-color-dark-neutral-50); + --charcoal-color-container-neutral-hover: var(--charcoal-color-dark-neutral-40); + --charcoal-color-container-discovery-press: var(--charcoal-color-dark-red-50); + --charcoal-color-container-discovery-hover: var(--charcoal-color-dark-red-40); + --charcoal-color-container-discovery-default: var(--charcoal-color-dark-red-30); + --charcoal-color-container-neutral-default: var(--charcoal-color-dark-neutral-30); + --charcoal-color-container-notice-press: var(--charcoal-color-dark-yellow-90); + --charcoal-color-container-notice-hover: var(--charcoal-color-dark-yellow-80); + --charcoal-color-container-notice-default: var(--charcoal-color-dark-yellow-70); + --charcoal-color-container-positive-press: var(--charcoal-color-dark-green-50); + --charcoal-color-container-positive-hover: var(--charcoal-color-dark-green-40); + --charcoal-color-container-positive-default: var(--charcoal-color-dark-green-30); + --charcoal-color-container-negative-press: var(--charcoal-color-dark-red-50); + --charcoal-color-container-negative-hover: var(--charcoal-color-dark-red-40); + --charcoal-color-container-negative-default: var(--charcoal-color-dark-red-30); + --charcoal-color-container-on-img-press: var(--charcoal-color-light-neutral-a-60); + --charcoal-color-container-on-img-hover: var(--charcoal-color-light-neutral-a-50); + --charcoal-color-container-on-img-default: var(--charcoal-color-light-neutral-a-40); + --charcoal-color-container-secondary-press-a: var(--charcoal-color-dark-neutral-a-20); + --charcoal-color-container-secondary-hover-a: var(--charcoal-color-dark-neutral-a-10); + --charcoal-color-container-secondary-default-a: var(--charcoal-color-dark-neutral-a-5); + --charcoal-color-container-secondary-press: var(--charcoal-color-dark-neutral-20); + --charcoal-color-container-secondary-hover: var(--charcoal-color-dark-neutral-10); + --charcoal-color-container-primary-press: var(--charcoal-color-dark-blue-50); + --charcoal-color-container-primary-hover: var(--charcoal-color-dark-blue-40); + --charcoal-color-container-primary-default: var(--charcoal-color-dark-blue-30); + --charcoal-color-container-tertiary-press-a: var(--charcoal-color-dark-neutral-a-30); + --charcoal-color-container-tertiary-hover-a: var(--charcoal-color-dark-neutral-a-20); + --charcoal-color-container-tertiary-default-a: var(--charcoal-color-dark-neutral-a-10); + --charcoal-color-container-tertiary-press: var(--charcoal-color-dark-neutral-30); + --charcoal-color-container-tertiary-hover: var(--charcoal-color-dark-neutral-20); + --charcoal-color-container-tertiary-default: var(--charcoal-color-dark-neutral-10); + --charcoal-color-container-secondary-default: var(--charcoal-color-dark-neutral-5); + --charcoal-color-container-disable: var(--charcoal-color-dark-neutral-10); + --charcoal-color-container-press-a: var(--charcoal-color-dark-neutral-a-10); + --charcoal-color-container-hover-a: var(--charcoal-color-dark-neutral-a-5); + --charcoal-color-container-default-a: var(--charcoal-color-dark-neutral-a-0); + --charcoal-color-container-press: var(--charcoal-color-dark-neutral-10); + --charcoal-color-container-hover: var(--charcoal-color-dark-neutral-5); + --charcoal-color-container-default: var(--charcoal-color-dark-neutral-0); + --charcoal-color-background-tertiary: var(--charcoal-color-dark-neutral--10); + --charcoal-color-background-secondary: var(--charcoal-color-dark-neutral--5); + --charcoal-color-background-default: var(--charcoal-color-dark-neutral-0); + --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90); + --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90); + --charcoal-radius-xxl: var(--charcoal-space-component-40); + --charcoal-radius-xl: var(--charcoal-space-component-30); + --charcoal-radius-l: var(--charcoal-space-component-25); + --charcoal-radius-m: var(--charcoal-space-component-20); + --charcoal-radius-s: var(--charcoal-space-component-10); + --charcoal-radius-xs: var(--charcoal-space-component-1); + --charcoal-radius-none: var(--charcoal-space-component-0); --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press); --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover); --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press); diff --git a/packages/theme/src/css/_variables_light.css b/packages/theme/src/css/_variables_light.css index 5f5339f6..ded0450c 100644 --- a/packages/theme/src/css/_variables_light.css +++ b/packages/theme/src/css/_variables_light.css @@ -1,270 +1,10 @@ /** * Do not edit directly - * Generated on Thu, 11 Jul 2024 10:03:36 GMT + * Generated on Fri, 26 Jul 2024 05:09:38 GMT */ :root[data-theme='light'], :root:not([data-theme]) { - --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1); - --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1); - --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02); - --charcoal-colors-dark-magenta-90: rgba(253, 217, 233, 1); - --charcoal-colors-dark-magenta-80: rgba(247, 184, 213, 1); - --charcoal-colors-dark-magenta-70: rgba(243, 163, 200, 1); - --charcoal-colors-dark-magenta-60: rgba(240, 146, 191, 1); - --charcoal-colors-dark-magenta-50: rgba(220, 114, 168, 1); - --charcoal-colors-dark-magenta-40: rgba(202, 91, 149, 1); - --charcoal-colors-dark-magenta-30: rgba(185, 64, 130, 1); - --charcoal-colors-dark-magenta-20: rgba(124, 58, 91, 1); - --charcoal-colors-dark-magenta-10: rgba(69, 44, 56, 1); - --charcoal-colors-dark-magenta-5: rgba(48, 36, 42, 1); - --charcoal-colors-dark-magenta-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-magenta--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-magenta--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-purple-90: rgba(233, 223, 255, 1); - --charcoal-colors-dark-purple-80: rgba(210, 192, 245, 1); - --charcoal-colors-dark-purple-70: rgba(201, 176, 249, 1); - --charcoal-colors-dark-purple-60: rgba(191, 160, 246, 1); - --charcoal-colors-dark-purple-50: rgba(169, 133, 229, 1); - --charcoal-colors-dark-purple-40: rgba(149, 110, 210, 1); - --charcoal-colors-dark-purple-30: rgba(131, 88, 194, 1); - --charcoal-colors-dark-purple-20: rgba(93, 68, 132, 1); - --charcoal-colors-dark-purple-10: rgba(56, 48, 71, 1); - --charcoal-colors-dark-purple-5: rgba(42, 38, 49, 1); - --charcoal-colors-dark-purple-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-purple--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-purple--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-indigo-90: rgba(222, 227, 255, 1); - --charcoal-colors-dark-indigo-80: rgba(192, 199, 248, 1); - --charcoal-colors-dark-indigo-70: rgba(175, 184, 254, 1); - --charcoal-colors-dark-indigo-60: rgba(160, 170, 249, 1); - --charcoal-colors-dark-indigo-50: rgba(135, 143, 231, 1); - --charcoal-colors-dark-indigo-40: rgba(115, 123, 219, 1); - --charcoal-colors-dark-indigo-30: rgba(96, 100, 199, 1); - --charcoal-colors-dark-indigo-20: rgba(72, 76, 134, 1); - --charcoal-colors-dark-indigo-10: rgba(48, 51, 74, 1); - --charcoal-colors-dark-indigo-5: rgba(39, 40, 46, 1); - --charcoal-colors-dark-indigo-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-indigo--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-indigo--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-blue-90: rgba(207, 230, 253, 1); - --charcoal-colors-dark-blue-80: rgba(166, 205, 245, 1); - --charcoal-colors-dark-blue-70: rgba(139, 193, 248, 1); - --charcoal-colors-dark-blue-60: rgba(114, 181, 245, 1); - --charcoal-colors-dark-blue-50: rgba(83, 156, 224, 1); - --charcoal-colors-dark-blue-40: rgba(55, 136, 208, 1); - --charcoal-colors-dark-blue-30: rgba(8, 114, 190, 1); - --charcoal-colors-dark-blue-20: rgba(39, 84, 126, 1); - --charcoal-colors-dark-blue-10: rgba(36, 55, 73, 1); - --charcoal-colors-dark-blue-5: rgba(33, 41, 50, 1); - --charcoal-colors-dark-blue-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-blue--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-blue--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-turquoise-90: rgba(180, 239, 234, 1); - --charcoal-colors-dark-turquoise-80: rgba(144, 213, 207, 1); - --charcoal-colors-dark-turquoise-70: rgba(118, 205, 199, 1); - --charcoal-colors-dark-turquoise-60: rgba(84, 193, 186, 1); - --charcoal-colors-dark-turquoise-50: rgba(32, 170, 164, 1); - --charcoal-colors-dark-turquoise-40: rgba(0, 147, 142, 1); - --charcoal-colors-dark-turquoise-30: rgba(0, 123, 118, 1); - --charcoal-colors-dark-turquoise-20: rgba(0, 91, 88, 1); - --charcoal-colors-dark-turquoise-10: rgba(26, 60, 58, 1); - --charcoal-colors-dark-turquoise-5: rgba(35, 42, 41, 1); - --charcoal-colors-dark-turquoise-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-turquoise--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-turquoise--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-green-90: rgba(191, 241, 186, 1); - --charcoal-colors-dark-green-80: rgba(161, 215, 155, 1); - --charcoal-colors-dark-green-70: rgba(141, 204, 135, 1); - --charcoal-colors-dark-green-60: rgba(120, 194, 113, 1); - --charcoal-colors-dark-green-50: rgba(86, 169, 79, 1); - --charcoal-colors-dark-green-40: rgba(58, 150, 52, 1); - --charcoal-colors-dark-green-30: rgba(13, 129, 5, 1); - --charcoal-colors-dark-green-20: rgba(39, 92, 35, 1); - --charcoal-colors-dark-green-10: rgba(41, 59, 40, 1); - --charcoal-colors-dark-green-5: rgba(37, 43, 37, 1); - --charcoal-colors-dark-green-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-green--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-green--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-yellow-90: rgba(252, 227, 145, 1); - --charcoal-colors-dark-yellow-80: rgba(231, 199, 80, 1); - --charcoal-colors-dark-yellow-70: rgba(222, 185, 7, 1); - --charcoal-colors-dark-yellow-60: rgba(222, 167, 29, 1); - --charcoal-colors-dark-yellow-50: rgba(199, 140, 10, 1); - --charcoal-colors-dark-yellow-40: rgba(174, 121, 14, 1); - --charcoal-colors-dark-yellow-30: rgba(153, 99, 8, 1); - --charcoal-colors-dark-yellow-20: rgba(109, 75, 31, 1); - --charcoal-colors-dark-yellow-10: rgba(66, 51, 30, 1); - --charcoal-colors-dark-yellow-5: rgba(44, 40, 35, 1); - --charcoal-colors-dark-yellow-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-yellow--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-yellow--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-orange-90: rgba(252, 221, 207, 1); - --charcoal-colors-dark-orange-80: rgba(245, 188, 163, 1); - --charcoal-colors-dark-orange-70: rgba(248, 170, 135, 1); - --charcoal-colors-dark-orange-60: rgba(246, 151, 107, 1); - --charcoal-colors-dark-orange-50: rgba(229, 121, 68, 1); - --charcoal-colors-dark-orange-40: rgba(212, 97, 41, 1); - --charcoal-colors-dark-orange-30: rgba(188, 74, 14, 1); - --charcoal-colors-dark-orange-20: rgba(134, 58, 22, 1); - --charcoal-colors-dark-orange-10: rgba(72, 48, 38, 1); - --charcoal-colors-dark-orange-5: rgba(48, 39, 34, 1); - --charcoal-colors-dark-orange-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-orange--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-orange--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-red-90: rgba(254, 219, 214, 1); - --charcoal-colors-dark-red-80: rgba(249, 186, 177, 1); - --charcoal-colors-dark-red-70: rgba(254, 167, 155, 1); - --charcoal-colors-dark-red-60: rgba(252, 147, 134, 1); - --charcoal-colors-dark-red-50: rgba(233, 114, 102, 1); - --charcoal-colors-dark-red-40: rgba(217, 88, 76, 1); - --charcoal-colors-dark-red-30: rgba(197, 60, 51, 1); - --charcoal-colors-dark-red-20: rgba(136, 54, 46, 1); - --charcoal-colors-dark-red-10: rgba(73, 47, 43, 1); - --charcoal-colors-dark-red-5: rgba(47, 39, 38, 1); - --charcoal-colors-dark-red-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-red--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-red--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-neutral-90: rgba(228, 228, 228, 1); - --charcoal-colors-dark-neutral-80: rgba(202, 202, 202, 1); - --charcoal-colors-dark-neutral-70: rgba(188, 188, 188, 1); - --charcoal-colors-dark-neutral-60: rgba(175, 175, 175, 1); - --charcoal-colors-dark-neutral-50: rgba(151, 151, 151, 1); - --charcoal-colors-dark-neutral-40: rgba(130, 130, 130, 1); - --charcoal-colors-dark-neutral-30: rgba(112, 112, 112, 1); - --charcoal-colors-dark-neutral-20: rgba(81, 81, 81, 1); - --charcoal-colors-dark-neutral-10: rgba(51, 51, 51, 1); - --charcoal-colors-dark-neutral-5: rgba(41, 41, 41, 1); - --charcoal-colors-dark-neutral-0: rgba(31, 31, 31, 1); - --charcoal-colors-dark-neutral--5: rgba(21, 21, 21, 1); - --charcoal-colors-dark-neutral-a-80: rgba(228, 228, 228, 0.87); - --charcoal-colors-dark-neutral-a-70: rgba(228, 228, 228, 0.795); - --charcoal-colors-dark-neutral-a-60: rgba(228, 228, 228, 0.73); - --charcoal-colors-dark-neutral-a-50: rgba(228, 228, 228, 0.61); - --charcoal-colors-dark-neutral-a-40: rgba(228, 228, 228, 0.505); - --charcoal-colors-dark-neutral-a-30: rgba(228, 228, 228, 0.41); - --charcoal-colors-dark-neutral-a-20: rgba(228, 228, 228, 0.255); - --charcoal-colors-dark-neutral-a-10: rgba(228, 228, 228, 0.1); - --charcoal-colors-dark-neutral-a-5: rgba(228, 228, 228, 0.05); - --charcoal-colors-dark-neutral-a-0: rgba(228, 228, 228, 0); - --charcoal-colors-dark-neutral-a--5: rgba(6, 6, 6, 0.41); - --charcoal-colors-dark-neutral-a--10: rgba(6, 6, 6, 1); - --charcoal-colors-dark-neutral--10: rgba(6, 6, 6, 1); - --charcoal-colors-light-magenta-90: rgba(59, 5, 37, 1); - --charcoal-colors-light-magenta-80: rgba(98, 27, 67, 1); - --charcoal-colors-light-magenta-70: rgba(141, 33, 96, 1); - --charcoal-colors-light-magenta-60: rgba(196, 53, 135, 1); - --charcoal-colors-light-magenta-50: rgba(235, 95, 170, 1); - --charcoal-colors-light-magenta-40: rgba(250, 131, 192, 1); - --charcoal-colors-light-magenta-30: rgba(245, 173, 206, 1); - --charcoal-colors-light-magenta-20: rgba(255, 204, 226, 1); - --charcoal-colors-light-magenta-10: rgba(251, 226, 237, 1); - --charcoal-colors-light-magenta-5: rgba(252, 239, 244, 1); - --charcoal-colors-light-purple-90: rgba(40, 16, 70, 1); - --charcoal-colors-light-purple-80: rgba(70, 32, 115, 1); - --charcoal-colors-light-purple-70: rgba(103, 39, 171, 1); - --charcoal-colors-light-purple-60: rgba(143, 77, 225, 1); - --charcoal-colors-light-purple-50: rgba(173, 120, 252, 1); - --charcoal-colors-light-purple-40: rgba(190, 153, 253, 1); - --charcoal-colors-light-purple-30: rgba(207, 183, 253, 1); - --charcoal-colors-light-purple-20: rgba(224, 210, 253, 1); - --charcoal-colors-light-purple-10: rgba(236, 229, 251, 1); - --charcoal-colors-light-purple-5: rgba(244, 241, 252, 1); - --charcoal-colors-light-indigo-90: rgba(24, 24, 70, 1); - --charcoal-colors-light-indigo-80: rgba(45, 47, 109, 1); - --charcoal-colors-light-indigo-70: rgba(68, 70, 155, 1); - --charcoal-colors-light-indigo-60: rgba(95, 97, 222, 1); - --charcoal-colors-light-indigo-50: rgba(129, 136, 253, 1); - --charcoal-colors-light-indigo-40: rgba(156, 165, 252, 1); - --charcoal-colors-light-indigo-30: rgba(181, 189, 253, 1); - --charcoal-colors-light-indigo-20: rgba(210, 216, 252, 1); - --charcoal-colors-light-indigo-10: rgba(226, 231, 253, 1); - --charcoal-colors-light-indigo-5: rgba(241, 242, 253, 1); - --charcoal-colors-light-blue-90: rgba(3, 35, 63, 1); - --charcoal-colors-light-blue-80: rgba(19, 58, 93, 1); - --charcoal-colors-light-blue-70: rgba(24, 81, 130, 1); - --charcoal-colors-light-blue-60: rgba(31, 117, 188, 1); - --charcoal-colors-light-blue-50: rgba(0, 150, 250, 1); - --charcoal-colors-light-blue-40: rgba(85, 178, 253, 1); - --charcoal-colors-light-blue-30: rgba(137, 200, 253, 1); - --charcoal-colors-light-blue-20: rgba(188, 222, 252, 1); - --charcoal-colors-light-blue-10: rgba(216, 235, 251, 1); - --charcoal-colors-light-blue-5: rgba(236, 244, 253, 1); - --charcoal-colors-light-blue-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-turquoise-90: rgba(1, 37, 37, 1); - --charcoal-colors-light-turquoise-80: rgba(1, 61, 62, 1); - --charcoal-colors-light-turquoise-70: rgba(3, 87, 89, 1); - --charcoal-colors-light-turquoise-60: rgba(11, 126, 128, 1); - --charcoal-colors-light-turquoise-50: rgba(27, 161, 163, 1); - --charcoal-colors-light-turquoise-40: rgba(63, 184, 186, 1); - --charcoal-colors-light-turquoise-30: rgba(109, 204, 205, 1); - --charcoal-colors-light-turquoise-20: rgba(152, 228, 229, 1); - --charcoal-colors-light-turquoise-10: rgba(196, 240, 241, 1); - --charcoal-colors-light-turquoise-5: rgba(225, 249, 249, 1); - --charcoal-colors-light-turquoise-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-green-90: rgba(1, 40, 0, 1); - --charcoal-colors-light-green-80: rgba(7, 64, 4, 1); - --charcoal-colors-light-green-70: rgba(4, 93, 0, 1); - --charcoal-colors-light-green-60: rgba(17, 131, 8, 1); - --charcoal-colors-light-green-50: rgba(37, 170, 28, 1); - --charcoal-colors-light-green-40: rgba(80, 192, 72, 1); - --charcoal-colors-light-green-30: rgba(121, 214, 112, 1); - --charcoal-colors-light-green-20: rgba(164, 234, 157, 1); - --charcoal-colors-light-green-10: rgba(204, 243, 200, 1); - --charcoal-colors-light-green-5: rgba(234, 248, 232, 1); - --charcoal-colors-light-green-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-yellow-90: rgba(44, 28, 0, 1); - --charcoal-colors-light-yellow-80: rgba(74, 51, 7, 1); - --charcoal-colors-light-yellow-70: rgba(110, 72, 5, 1); - --charcoal-colors-light-yellow-60: rgba(161, 99, 9, 1); - --charcoal-colors-light-yellow-50: rgba(205, 131, 2, 1); - --charcoal-colors-light-yellow-40: rgba(231, 157, 20, 1); - --charcoal-colors-light-yellow-30: rgba(245, 183, 17, 1); - --charcoal-colors-light-yellow-20: rgba(254, 214, 61, 1); - --charcoal-colors-light-yellow-10: rgba(246, 232, 176, 1); - --charcoal-colors-light-yellow-5: rgba(250, 243, 221, 1); - --charcoal-colors-light-yellow-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-orange-90: rgba(55, 18, 2, 1); - --charcoal-colors-light-orange-80: rgba(91, 38, 13, 1); - --charcoal-colors-light-orange-70: rgba(132, 54, 7, 1); - --charcoal-colors-light-orange-60: rgba(190, 79, 4, 1); - --charcoal-colors-light-orange-50: rgba(242, 105, 21, 1); - --charcoal-colors-light-orange-40: rgba(253, 143, 53, 1); - --charcoal-colors-light-orange-30: rgba(254, 176, 121, 1); - --charcoal-colors-light-orange-20: rgba(253, 209, 177, 1); - --charcoal-colors-light-orange-10: rgba(252, 229, 211, 1); - --charcoal-colors-light-orange-5: rgba(253, 241, 229, 1); - --charcoal-colors-light-red-90: rgba(66, 0, 1, 1); - --charcoal-colors-light-red-80: rgba(103, 22, 17, 1); - --charcoal-colors-light-red-70: rgba(147, 33, 28, 1); - --charcoal-colors-light-red-60: rgba(206, 54, 46, 1); - --charcoal-colors-light-red-50: rgba(253, 91, 78, 1); - --charcoal-colors-light-red-40: rgba(252, 138, 124, 1); - --charcoal-colors-light-red-30: rgba(253, 174, 163, 1); - --charcoal-colors-light-red-20: rgba(253, 206, 199, 1); - --charcoal-colors-light-red-10: rgba(250, 228, 225, 1); - --charcoal-colors-light-red-5: rgba(253, 240, 237, 1); - --charcoal-colors-light-red-0: rgba(255, 255, 255, 1); - --charcoal-colors-light-neutral-90: rgba(31, 31, 31, 1); - --charcoal-colors-light-neutral-80: rgba(56, 56, 56, 1); - --charcoal-colors-light-neutral-70: rgba(81, 81, 81, 1); - --charcoal-colors-light-neutral-60: rgba(113, 113, 113, 1); - --charcoal-colors-light-neutral-50: rgba(148, 148, 148, 1); - --charcoal-colors-light-neutral-40: rgba(172, 172, 172, 1); - --charcoal-colors-light-neutral-30: rgba(194, 194, 194, 1); - --charcoal-colors-light-neutral-20: rgba(217, 217, 217, 1); - --charcoal-colors-light-neutral-10: rgba(232, 232, 232, 1); - --charcoal-colors-light-neutral-5: rgba(243, 243, 243, 1); - --charcoal-colors-light-neutral-a-80: rgba(31, 31, 31, 0.885); - --charcoal-colors-light-neutral-a-70: rgba(31, 31, 31, 0.775); - --charcoal-colors-light-neutral-a-60: rgba(31, 31, 31, 0.635); - --charcoal-colors-light-neutral-a-50: rgba(31, 31, 31, 0.475); - --charcoal-colors-light-neutral-a-40: rgba(31, 31, 31, 0.37); - --charcoal-colors-light-neutral-a-30: rgba(31, 31, 31, 0.27); - --charcoal-colors-light-neutral-a-20: rgba(31, 31, 31, 0.17); - --charcoal-colors-light-neutral-a-10: rgba(31, 31, 31, 0.102); - --charcoal-colors-light-neutral-a-5: rgba(31, 31, 31, 0.055); - --charcoal-colors-light-neutral-a-0: rgba(31, 31, 31, 0); - --charcoal-colors-light-neutral-0: rgba(255, 255, 255, 1); + --charcoal-radius-oval: 999999; --charcoal-text-font-family-sans: Sarasa UI J; --charcoal-text-line-height-100: 72; --charcoal-text-line-height-90: 64; @@ -321,115 +61,272 @@ --charcoal-space-10: 4; --charcoal-space-1: 2; --charcoal-space-0: 0; - --charcoal-brand-color-f-a-c-t-o-r-y: rgba(0, 184, 205, 1); - --charcoal-brand-color-b-o-o-t-h: rgba(252, 77, 80, 1); + --charcoal-brand-color-factory: rgba(0, 184, 205, 1); + --charcoal-brand-color-booth: rgba(252, 77, 80, 1); --charcoal-brand-color-comic: rgba(255, 196, 0, 1); --charcoal-brand-color-premium: rgba(253, 158, 22, 1); --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1); - --charcoal-color-border-negative: var(--charcoal-colors-light-red-20); - --charcoal-color-border-focus: var(--charcoal-colors-light-blue-20); - --charcoal-color-border-disable: var(--charcoal-colors-light-neutral-a-10); - --charcoal-color-border-secondary: var(--charcoal-colors-light-neutral-a-10); - --charcoal-color-border-default: var(--charcoal-colors-light-neutral-a-50); - --charcoal-color-icon-on-neutral-press: var(--charcoal-colors-light-neutral-10); - --charcoal-color-icon-on-neutral-hover: var(--charcoal-colors-light-neutral-5); - --charcoal-color-icon-on-neutral-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium); - --charcoal-color-text-on-h-u-d-press: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-h-u-d-hover: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-h-u-d-default: var(--charcoal-colors-dark-neutral-90); - --charcoal-color-text-on-discovery-press: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-discovery-hover: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-discovery-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-notice-press: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-on-notice-hover: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-on-notice-default: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-on-positive-press: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-positive-hover: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-positive-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-negative-press: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-negative-hover: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-negative-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-primary-press: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-primary-hover: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-on-img-press: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-on-img-hover: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-on-img-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-on-primary-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-text-visited-press: var(--charcoal-colors-light-purple-90); - --charcoal-color-text-visited-hover: var(--charcoal-colors-light-purple-80); - --charcoal-color-text-visited-default: var(--charcoal-colors-light-purple-70); - --charcoal-color-text-info-press: var(--charcoal-colors-light-blue-80); - --charcoal-color-text-info-hover: var(--charcoal-colors-light-blue-70); - --charcoal-color-text-info-default: var(--charcoal-colors-light-blue-60); - --charcoal-color-text-notice-press: var(--charcoal-colors-light-yellow-80); - --charcoal-color-text-notice-hover: var(--charcoal-colors-light-yellow-70); - --charcoal-color-text-notice-default: var(--charcoal-colors-light-yellow-60); - --charcoal-color-text-positive-press: var(--charcoal-colors-light-green-80); - --charcoal-color-text-positive-hover: var(--charcoal-colors-light-green-70); - --charcoal-color-text-positive-default: var(--charcoal-colors-light-green-60); - --charcoal-color-text-negative-press: var(--charcoal-colors-light-red-80); - --charcoal-color-text-negative-hover: var(--charcoal-colors-light-red-70); - --charcoal-color-text-negative-default: var(--charcoal-colors-light-red-60); - --charcoal-color-text-placeholder-press: var(--charcoal-colors-light-neutral-70); - --charcoal-color-text-placeholder-hover: var(--charcoal-colors-light-neutral-60); - --charcoal-color-text-placeholder-default: var(--charcoal-colors-light-neutral-50); - --charcoal-color-text-tertiary-press: var(--charcoal-colors-light-neutral-80); - --charcoal-color-text-tertiary-hover: var(--charcoal-colors-light-neutral-70); - --charcoal-color-text-tertiary-default: var(--charcoal-colors-light-neutral-60); - --charcoal-color-text-secondary-press: var(--charcoal-colors-light-neutral-90); - --charcoal-color-text-secondary-hover: var(--charcoal-colors-light-neutral-80); - --charcoal-color-text-secondary-default: var(--charcoal-colors-light-neutral-70); - --charcoal-color-text-disable: var(--charcoal-colors-light-neutral-30); - --charcoal-color-text-press: var(--charcoal-colors-light-neutral-70); - --charcoal-color-text-hover: var(--charcoal-colors-light-neutral-80); - --charcoal-color-text-default: var(--charcoal-colors-light-neutral-90); - --charcoal-color-container-skeleton: var(--charcoal-colors-light-neutral-a-5); - --charcoal-color-container-h-u-d-press: var(--charcoal-colors-light-neutral-60); - --charcoal-color-container-h-u-d-hover: var(--charcoal-colors-light-neutral-70); - --charcoal-color-container-h-u-d-default: var(--charcoal-colors-light-neutral-80); - --charcoal-color-container-neutral-press: var(--charcoal-colors-light-neutral-70); - --charcoal-color-container-neutral-hover: var(--charcoal-colors-light-neutral-60); - --charcoal-color-container-discovery-press: var(--charcoal-colors-light-red-70); - --charcoal-color-container-discovery-hover: var(--charcoal-colors-light-red-60); - --charcoal-color-container-discovery-default: var(--charcoal-colors-light-red-50); - --charcoal-color-container-neutral-default: var(--charcoal-colors-light-neutral-50); - --charcoal-color-container-notice-press: var(--charcoal-colors-light-yellow-40); - --charcoal-color-container-notice-hover: var(--charcoal-colors-light-yellow-30); - --charcoal-color-container-notice-default: var(--charcoal-colors-light-yellow-20); - --charcoal-color-container-positive-press: var(--charcoal-colors-light-green-70); - --charcoal-color-container-positive-hover: var(--charcoal-colors-light-green-60); - --charcoal-color-container-positive-default: var(--charcoal-colors-light-green-50); - --charcoal-color-container-negative-press: var(--charcoal-colors-light-red-70); - --charcoal-color-container-negative-hover: var(--charcoal-colors-light-red-60); - --charcoal-color-container-negative-default: var(--charcoal-colors-light-red-50); - --charcoal-color-container-on-img-press: var(--charcoal-colors-light-neutral-a-60); - --charcoal-color-container-on-img-hover: var(--charcoal-colors-light-neutral-a-50); - --charcoal-color-container-on-img-default: var(--charcoal-colors-light-neutral-a-40); - --charcoal-color-container-secondary-press-a: var(--charcoal-colors-light-neutral-a-20); - --charcoal-color-container-secondary-hover-a: var(--charcoal-colors-light-neutral-a-10); - --charcoal-color-container-secondary-default-a: var(--charcoal-colors-light-neutral-a-5); - --charcoal-color-container-secondary-press: var(--charcoal-colors-light-neutral-20); - --charcoal-color-container-secondary-hover: var(--charcoal-colors-light-neutral-10); - --charcoal-color-container-primary-press: var(--charcoal-colors-light-blue-70); - --charcoal-color-container-primary-hover: var(--charcoal-colors-light-blue-60); - --charcoal-color-container-primary-default: var(--charcoal-colors-light-blue-50); - --charcoal-color-container-tertiary-press-a: var(--charcoal-colors-light-neutral-a-30); - --charcoal-color-container-tertiary-hover-a: var(--charcoal-colors-light-neutral-a-20); - --charcoal-color-container-tertiary-default-a: var(--charcoal-colors-light-neutral-a-10); - --charcoal-color-container-tertiary-press: var(--charcoal-colors-light-neutral-30); - --charcoal-color-container-tertiary-hover: var(--charcoal-colors-light-neutral-20); - --charcoal-color-container-tertiary-default: var(--charcoal-colors-light-neutral-10); - --charcoal-color-container-secondary-default: var(--charcoal-colors-light-neutral-5); - --charcoal-color-container-disable: var(--charcoal-colors-light-neutral-10); - --charcoal-color-container-press: var(--charcoal-colors-light-neutral-10); - --charcoal-color-container-hover: var(--charcoal-colors-light-neutral-5); - --charcoal-color-container-default: var(--charcoal-colors-light-neutral-0); - --charcoal-color-background-tertiary: var(--charcoal-colors-light-neutral-10); - --charcoal-color-background-secondary: var(--charcoal-colors-light-neutral-5); - --charcoal-color-background-default: var(--charcoal-colors-light-neutral-0); - --charcoal-colors-dark-neutral-a-90: var(--charcoal-colors-dark-neutral-90); - --charcoal-colors-light-neutral-a-90: var(--charcoal-colors-light-neutral-90); + --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1); + --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1); + --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02); + --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1); + --charcoal-color-dark-magenta-80: rgba(247, 184, 213, 1); + --charcoal-color-dark-magenta-70: rgba(243, 163, 200, 1); + --charcoal-color-dark-magenta-60: rgba(240, 146, 191, 1); + --charcoal-color-dark-magenta-50: rgba(220, 114, 168, 1); + --charcoal-color-dark-magenta-40: rgba(202, 91, 149, 1); + --charcoal-color-dark-magenta-30: rgba(185, 64, 130, 1); + --charcoal-color-dark-magenta-20: rgba(124, 58, 91, 1); + --charcoal-color-dark-magenta-10: rgba(69, 44, 56, 1); + --charcoal-color-dark-magenta-5: rgba(48, 36, 42, 1); + --charcoal-color-dark-magenta-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-magenta--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-magenta--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-purple-90: rgba(233, 223, 255, 1); + --charcoal-color-dark-purple-80: rgba(210, 192, 245, 1); + --charcoal-color-dark-purple-70: rgba(201, 176, 249, 1); + --charcoal-color-dark-purple-60: rgba(191, 160, 246, 1); + --charcoal-color-dark-purple-50: rgba(169, 133, 229, 1); + --charcoal-color-dark-purple-40: rgba(149, 110, 210, 1); + --charcoal-color-dark-purple-30: rgba(131, 88, 194, 1); + --charcoal-color-dark-purple-20: rgba(93, 68, 132, 1); + --charcoal-color-dark-purple-10: rgba(56, 48, 71, 1); + --charcoal-color-dark-purple-5: rgba(42, 38, 49, 1); + --charcoal-color-dark-purple-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-purple--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-purple--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-indigo-90: rgba(222, 227, 255, 1); + --charcoal-color-dark-indigo-80: rgba(192, 199, 248, 1); + --charcoal-color-dark-indigo-70: rgba(175, 184, 254, 1); + --charcoal-color-dark-indigo-60: rgba(160, 170, 249, 1); + --charcoal-color-dark-indigo-50: rgba(135, 143, 231, 1); + --charcoal-color-dark-indigo-40: rgba(115, 123, 219, 1); + --charcoal-color-dark-indigo-30: rgba(96, 100, 199, 1); + --charcoal-color-dark-indigo-20: rgba(72, 76, 134, 1); + --charcoal-color-dark-indigo-10: rgba(48, 51, 74, 1); + --charcoal-color-dark-indigo-5: rgba(39, 40, 46, 1); + --charcoal-color-dark-indigo-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-indigo--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-indigo--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-blue-90: rgba(207, 230, 253, 1); + --charcoal-color-dark-blue-80: rgba(166, 205, 245, 1); + --charcoal-color-dark-blue-70: rgba(139, 193, 248, 1); + --charcoal-color-dark-blue-60: rgba(114, 181, 245, 1); + --charcoal-color-dark-blue-50: rgba(83, 156, 224, 1); + --charcoal-color-dark-blue-40: rgba(55, 136, 208, 1); + --charcoal-color-dark-blue-30: rgba(8, 114, 190, 1); + --charcoal-color-dark-blue-20: rgba(39, 84, 126, 1); + --charcoal-color-dark-blue-10: rgba(36, 55, 73, 1); + --charcoal-color-dark-blue-5: rgba(33, 41, 50, 1); + --charcoal-color-dark-blue-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-blue--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-blue--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-turquoise-90: rgba(180, 239, 234, 1); + --charcoal-color-dark-turquoise-80: rgba(144, 213, 207, 1); + --charcoal-color-dark-turquoise-70: rgba(118, 205, 199, 1); + --charcoal-color-dark-turquoise-60: rgba(84, 193, 186, 1); + --charcoal-color-dark-turquoise-50: rgba(32, 170, 164, 1); + --charcoal-color-dark-turquoise-40: rgba(0, 147, 142, 1); + --charcoal-color-dark-turquoise-30: rgba(0, 123, 118, 1); + --charcoal-color-dark-turquoise-20: rgba(0, 91, 88, 1); + --charcoal-color-dark-turquoise-10: rgba(26, 60, 58, 1); + --charcoal-color-dark-turquoise-5: rgba(35, 42, 41, 1); + --charcoal-color-dark-turquoise-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-turquoise--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-turquoise--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-green-90: rgba(191, 241, 186, 1); + --charcoal-color-dark-green-80: rgba(161, 215, 155, 1); + --charcoal-color-dark-green-70: rgba(141, 204, 135, 1); + --charcoal-color-dark-green-60: rgba(120, 194, 113, 1); + --charcoal-color-dark-green-50: rgba(86, 169, 79, 1); + --charcoal-color-dark-green-40: rgba(58, 150, 52, 1); + --charcoal-color-dark-green-30: rgba(13, 129, 5, 1); + --charcoal-color-dark-green-20: rgba(39, 92, 35, 1); + --charcoal-color-dark-green-10: rgba(41, 59, 40, 1); + --charcoal-color-dark-green-5: rgba(37, 43, 37, 1); + --charcoal-color-dark-green-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-green--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-green--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-yellow-90: rgba(252, 227, 145, 1); + --charcoal-color-dark-yellow-80: rgba(231, 199, 80, 1); + --charcoal-color-dark-yellow-70: rgba(222, 185, 7, 1); + --charcoal-color-dark-yellow-60: rgba(222, 167, 29, 1); + --charcoal-color-dark-yellow-50: rgba(199, 140, 10, 1); + --charcoal-color-dark-yellow-40: rgba(174, 121, 14, 1); + --charcoal-color-dark-yellow-30: rgba(153, 99, 8, 1); + --charcoal-color-dark-yellow-20: rgba(109, 75, 31, 1); + --charcoal-color-dark-yellow-10: rgba(66, 51, 30, 1); + --charcoal-color-dark-yellow-5: rgba(44, 40, 35, 1); + --charcoal-color-dark-yellow-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-yellow--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-yellow--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-orange-90: rgba(252, 221, 207, 1); + --charcoal-color-dark-orange-80: rgba(245, 188, 163, 1); + --charcoal-color-dark-orange-70: rgba(248, 170, 135, 1); + --charcoal-color-dark-orange-60: rgba(246, 151, 107, 1); + --charcoal-color-dark-orange-50: rgba(229, 121, 68, 1); + --charcoal-color-dark-orange-40: rgba(212, 97, 41, 1); + --charcoal-color-dark-orange-30: rgba(188, 74, 14, 1); + --charcoal-color-dark-orange-20: rgba(134, 58, 22, 1); + --charcoal-color-dark-orange-10: rgba(72, 48, 38, 1); + --charcoal-color-dark-orange-5: rgba(48, 39, 34, 1); + --charcoal-color-dark-orange-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-orange--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-orange--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-red-90: rgba(254, 219, 214, 1); + --charcoal-color-dark-red-80: rgba(249, 186, 177, 1); + --charcoal-color-dark-red-70: rgba(254, 167, 155, 1); + --charcoal-color-dark-red-60: rgba(252, 147, 134, 1); + --charcoal-color-dark-red-50: rgba(233, 114, 102, 1); + --charcoal-color-dark-red-40: rgba(217, 88, 76, 1); + --charcoal-color-dark-red-30: rgba(197, 60, 51, 1); + --charcoal-color-dark-red-20: rgba(136, 54, 46, 1); + --charcoal-color-dark-red-10: rgba(73, 47, 43, 1); + --charcoal-color-dark-red-5: rgba(47, 39, 38, 1); + --charcoal-color-dark-red-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-red--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-red--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-neutral-90: rgba(228, 228, 228, 1); + --charcoal-color-dark-neutral-80: rgba(202, 202, 202, 1); + --charcoal-color-dark-neutral-70: rgba(188, 188, 188, 1); + --charcoal-color-dark-neutral-60: rgba(175, 175, 175, 1); + --charcoal-color-dark-neutral-50: rgba(151, 151, 151, 1); + --charcoal-color-dark-neutral-40: rgba(130, 130, 130, 1); + --charcoal-color-dark-neutral-30: rgba(112, 112, 112, 1); + --charcoal-color-dark-neutral-20: rgba(81, 81, 81, 1); + --charcoal-color-dark-neutral-10: rgba(51, 51, 51, 1); + --charcoal-color-dark-neutral-5: rgba(41, 41, 41, 1); + --charcoal-color-dark-neutral-0: rgba(31, 31, 31, 1); + --charcoal-color-dark-neutral--5: rgba(21, 21, 21, 1); + --charcoal-color-dark-neutral-a-80: rgba(228, 228, 228, 0.87); + --charcoal-color-dark-neutral-a-70: rgba(228, 228, 228, 0.795); + --charcoal-color-dark-neutral-a-60: rgba(228, 228, 228, 0.73); + --charcoal-color-dark-neutral-a-50: rgba(228, 228, 228, 0.61); + --charcoal-color-dark-neutral-a-40: rgba(228, 228, 228, 0.505); + --charcoal-color-dark-neutral-a-30: rgba(228, 228, 228, 0.41); + --charcoal-color-dark-neutral-a-20: rgba(228, 228, 228, 0.255); + --charcoal-color-dark-neutral-a-10: rgba(228, 228, 228, 0.1); + --charcoal-color-dark-neutral-a-5: rgba(228, 228, 228, 0.05); + --charcoal-color-dark-neutral-a-0: rgba(228, 228, 228, 0); + --charcoal-color-dark-neutral-a--5: rgba(6, 6, 6, 0.41); + --charcoal-color-dark-neutral-a--10: rgba(6, 6, 6, 1); + --charcoal-color-dark-neutral--10: rgba(6, 6, 6, 1); + --charcoal-color-light-magenta-90: rgba(59, 5, 37, 1); + --charcoal-color-light-magenta-80: rgba(98, 27, 67, 1); + --charcoal-color-light-magenta-70: rgba(141, 33, 96, 1); + --charcoal-color-light-magenta-60: rgba(196, 53, 135, 1); + --charcoal-color-light-magenta-50: rgba(235, 95, 170, 1); + --charcoal-color-light-magenta-40: rgba(250, 131, 192, 1); + --charcoal-color-light-magenta-30: rgba(245, 173, 206, 1); + --charcoal-color-light-magenta-20: rgba(255, 204, 226, 1); + --charcoal-color-light-magenta-10: rgba(251, 226, 237, 1); + --charcoal-color-light-magenta-5: rgba(252, 239, 244, 1); + --charcoal-color-light-purple-90: rgba(40, 16, 70, 1); + --charcoal-color-light-purple-80: rgba(70, 32, 115, 1); + --charcoal-color-light-purple-70: rgba(103, 39, 171, 1); + --charcoal-color-light-purple-60: rgba(143, 77, 225, 1); + --charcoal-color-light-purple-50: rgba(173, 120, 252, 1); + --charcoal-color-light-purple-40: rgba(190, 153, 253, 1); + --charcoal-color-light-purple-30: rgba(207, 183, 253, 1); + --charcoal-color-light-purple-20: rgba(224, 210, 253, 1); + --charcoal-color-light-purple-10: rgba(236, 229, 251, 1); + --charcoal-color-light-purple-5: rgba(244, 241, 252, 1); + --charcoal-color-light-indigo-90: rgba(24, 24, 70, 1); + --charcoal-color-light-indigo-80: rgba(45, 47, 109, 1); + --charcoal-color-light-indigo-70: rgba(68, 70, 155, 1); + --charcoal-color-light-indigo-60: rgba(95, 97, 222, 1); + --charcoal-color-light-indigo-50: rgba(129, 136, 253, 1); + --charcoal-color-light-indigo-40: rgba(156, 165, 252, 1); + --charcoal-color-light-indigo-30: rgba(181, 189, 253, 1); + --charcoal-color-light-indigo-20: rgba(210, 216, 252, 1); + --charcoal-color-light-indigo-10: rgba(226, 231, 253, 1); + --charcoal-color-light-indigo-5: rgba(241, 242, 253, 1); + --charcoal-color-light-blue-90: rgba(3, 35, 63, 1); + --charcoal-color-light-blue-80: rgba(19, 58, 93, 1); + --charcoal-color-light-blue-70: rgba(24, 81, 130, 1); + --charcoal-color-light-blue-60: rgba(31, 117, 188, 1); + --charcoal-color-light-blue-50: rgba(0, 150, 250, 1); + --charcoal-color-light-blue-40: rgba(85, 178, 253, 1); + --charcoal-color-light-blue-30: rgba(137, 200, 253, 1); + --charcoal-color-light-blue-20: rgba(188, 222, 252, 1); + --charcoal-color-light-blue-10: rgba(216, 235, 251, 1); + --charcoal-color-light-blue-5: rgba(236, 244, 253, 1); + --charcoal-color-light-blue-0: rgba(255, 255, 255, 1); + --charcoal-color-light-turquoise-90: rgba(1, 37, 37, 1); + --charcoal-color-light-turquoise-80: rgba(1, 61, 62, 1); + --charcoal-color-light-turquoise-70: rgba(3, 87, 89, 1); + --charcoal-color-light-turquoise-60: rgba(11, 126, 128, 1); + --charcoal-color-light-turquoise-50: rgba(27, 161, 163, 1); + --charcoal-color-light-turquoise-40: rgba(63, 184, 186, 1); + --charcoal-color-light-turquoise-30: rgba(109, 204, 205, 1); + --charcoal-color-light-turquoise-20: rgba(152, 228, 229, 1); + --charcoal-color-light-turquoise-10: rgba(196, 240, 241, 1); + --charcoal-color-light-turquoise-5: rgba(225, 249, 249, 1); + --charcoal-color-light-turquoise-0: rgba(255, 255, 255, 1); + --charcoal-color-light-green-90: rgba(1, 40, 0, 1); + --charcoal-color-light-green-80: rgba(7, 64, 4, 1); + --charcoal-color-light-green-70: rgba(4, 93, 0, 1); + --charcoal-color-light-green-60: rgba(17, 131, 8, 1); + --charcoal-color-light-green-50: rgba(37, 170, 28, 1); + --charcoal-color-light-green-40: rgba(80, 192, 72, 1); + --charcoal-color-light-green-30: rgba(121, 214, 112, 1); + --charcoal-color-light-green-20: rgba(164, 234, 157, 1); + --charcoal-color-light-green-10: rgba(204, 243, 200, 1); + --charcoal-color-light-green-5: rgba(234, 248, 232, 1); + --charcoal-color-light-green-0: rgba(255, 255, 255, 1); + --charcoal-color-light-yellow-90: rgba(44, 28, 0, 1); + --charcoal-color-light-yellow-80: rgba(74, 51, 7, 1); + --charcoal-color-light-yellow-70: rgba(110, 72, 5, 1); + --charcoal-color-light-yellow-60: rgba(161, 99, 9, 1); + --charcoal-color-light-yellow-50: rgba(205, 131, 2, 1); + --charcoal-color-light-yellow-40: rgba(231, 157, 20, 1); + --charcoal-color-light-yellow-30: rgba(245, 183, 17, 1); + --charcoal-color-light-yellow-20: rgba(254, 214, 61, 1); + --charcoal-color-light-yellow-10: rgba(246, 232, 176, 1); + --charcoal-color-light-yellow-5: rgba(250, 243, 221, 1); + --charcoal-color-light-yellow-0: rgba(255, 255, 255, 1); + --charcoal-color-light-orange-90: rgba(55, 18, 2, 1); + --charcoal-color-light-orange-80: rgba(91, 38, 13, 1); + --charcoal-color-light-orange-70: rgba(132, 54, 7, 1); + --charcoal-color-light-orange-60: rgba(190, 79, 4, 1); + --charcoal-color-light-orange-50: rgba(242, 105, 21, 1); + --charcoal-color-light-orange-40: rgba(253, 143, 53, 1); + --charcoal-color-light-orange-30: rgba(254, 176, 121, 1); + --charcoal-color-light-orange-20: rgba(253, 209, 177, 1); + --charcoal-color-light-orange-10: rgba(252, 229, 211, 1); + --charcoal-color-light-orange-5: rgba(253, 241, 229, 1); + --charcoal-color-light-red-90: rgba(66, 0, 1, 1); + --charcoal-color-light-red-80: rgba(103, 22, 17, 1); + --charcoal-color-light-red-70: rgba(147, 33, 28, 1); + --charcoal-color-light-red-60: rgba(206, 54, 46, 1); + --charcoal-color-light-red-50: rgba(253, 91, 78, 1); + --charcoal-color-light-red-40: rgba(252, 138, 124, 1); + --charcoal-color-light-red-30: rgba(253, 174, 163, 1); + --charcoal-color-light-red-20: rgba(253, 206, 199, 1); + --charcoal-color-light-red-10: rgba(250, 228, 225, 1); + --charcoal-color-light-red-5: rgba(253, 240, 237, 1); + --charcoal-color-light-red-0: rgba(255, 255, 255, 1); + --charcoal-color-light-neutral-90: rgba(31, 31, 31, 1); + --charcoal-color-light-neutral-80: rgba(56, 56, 56, 1); + --charcoal-color-light-neutral-70: rgba(81, 81, 81, 1); + --charcoal-color-light-neutral-60: rgba(113, 113, 113, 1); + --charcoal-color-light-neutral-50: rgba(148, 148, 148, 1); + --charcoal-color-light-neutral-40: rgba(172, 172, 172, 1); + --charcoal-color-light-neutral-30: rgba(194, 194, 194, 1); + --charcoal-color-light-neutral-20: rgba(217, 217, 217, 1); + --charcoal-color-light-neutral-10: rgba(232, 232, 232, 1); + --charcoal-color-light-neutral-5: rgba(243, 243, 243, 1); + --charcoal-color-light-neutral-a-80: rgba(31, 31, 31, 0.885); + --charcoal-color-light-neutral-a-70: rgba(31, 31, 31, 0.775); + --charcoal-color-light-neutral-a-60: rgba(31, 31, 31, 0.635); + --charcoal-color-light-neutral-a-50: rgba(31, 31, 31, 0.475); + --charcoal-color-light-neutral-a-40: rgba(31, 31, 31, 0.37); + --charcoal-color-light-neutral-a-30: rgba(31, 31, 31, 0.27); + --charcoal-color-light-neutral-a-20: rgba(31, 31, 31, 0.17); + --charcoal-color-light-neutral-a-10: rgba(31, 31, 31, 0.102); + --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055); + --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0); + --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1); --charcoal-space-layout-100: var(--charcoal-space-100); --charcoal-space-layout-90: var(--charcoal-space-90); --charcoal-space-layout-80: var(--charcoal-space-80); @@ -457,6 +354,121 @@ --charcoal-space-component-10: var(--charcoal-space-10); --charcoal-space-component-1: var(--charcoal-space-1); --charcoal-space-component-0: var(--charcoal-space-0); + --charcoal-color-border-negative: var(--charcoal-color-light-red-20); + --charcoal-color-border-focus-2: var(--charcoal-color-light-blue-20); + --charcoal-color-border-disable: var(--charcoal-color-light-neutral-a-10); + --charcoal-color-border-focus-1: var(--charcoal-color-light-blue-60); + --charcoal-color-border-secondary: var(--charcoal-color-light-neutral-a-10); + --charcoal-color-border-default: var(--charcoal-color-light-neutral-a-50); + --charcoal-color-icon-on-neutral-press: var(--charcoal-color-light-neutral-10); + --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-light-neutral-5); + --charcoal-color-icon-on-neutral-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium); + --charcoal-color-text-on-hud-press: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-hud-hover: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-hud-default: var(--charcoal-color-dark-neutral-90); + --charcoal-color-text-on-discovery-press: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-discovery-hover: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-discovery-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-notice-press: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-on-notice-hover: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-on-notice-default: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-on-positive-press: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-positive-hover: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-positive-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-negative-press: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-negative-hover: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-negative-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-primary-press: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-primary-hover: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-on-img-press: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-on-img-hover: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-on-img-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-on-primary-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-text-positive-press: var(--charcoal-color-light-green-80); + --charcoal-color-text-positive-hover: var(--charcoal-color-light-green-70); + --charcoal-color-text-positive-default: var(--charcoal-color-light-green-60); + --charcoal-color-text-notice-press: var(--charcoal-color-light-yellow-80); + --charcoal-color-text-notice-hover: var(--charcoal-color-light-yellow-70); + --charcoal-color-text-notice-default: var(--charcoal-color-light-yellow-60); + --charcoal-color-text-negative-press: var(--charcoal-color-light-red-80); + --charcoal-color-text-negative-hover: var(--charcoal-color-light-red-70); + --charcoal-color-text-negative-default: var(--charcoal-color-light-red-60); + --charcoal-color-text-visited-press: var(--charcoal-color-light-purple-90); + --charcoal-color-text-visited-hover: var(--charcoal-color-light-purple-80); + --charcoal-color-text-visited-default: var(--charcoal-color-light-purple-70); + --charcoal-color-text-info-press: var(--charcoal-color-light-blue-80); + --charcoal-color-text-info-hover: var(--charcoal-color-light-blue-70); + --charcoal-color-text-info-default: var(--charcoal-color-light-blue-60); + --charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-70); + --charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-60); + --charcoal-color-text-placeholder-default: var(--charcoal-color-light-neutral-50); + --charcoal-color-text-tertiary-press: var(--charcoal-color-light-neutral-80); + --charcoal-color-text-tertiary-hover: var(--charcoal-color-light-neutral-70); + --charcoal-color-text-tertiary-default: var(--charcoal-color-light-neutral-60); + --charcoal-color-text-secondary-press: var(--charcoal-color-light-neutral-90); + --charcoal-color-text-secondary-hover: var(--charcoal-color-light-neutral-80); + --charcoal-color-text-secondary-default: var(--charcoal-color-light-neutral-70); + --charcoal-color-text-disable: var(--charcoal-color-light-neutral-30); + --charcoal-color-text-press: var(--charcoal-color-light-neutral-70); + --charcoal-color-text-hover: var(--charcoal-color-light-neutral-80); + --charcoal-color-text-default: var(--charcoal-color-light-neutral-90); + --charcoal-color-container-skeleton: var(--charcoal-color-light-neutral-a-5); + --charcoal-color-container-hud-press: var(--charcoal-color-light-neutral-60); + --charcoal-color-container-hud-hover: var(--charcoal-color-light-neutral-70); + --charcoal-color-container-hud-default: var(--charcoal-color-light-neutral-80); + --charcoal-color-container-neutral-press: var(--charcoal-color-light-neutral-70); + --charcoal-color-container-neutral-hover: var(--charcoal-color-light-neutral-60); + --charcoal-color-container-discovery-press: var(--charcoal-color-light-red-70); + --charcoal-color-container-discovery-hover: var(--charcoal-color-light-red-60); + --charcoal-color-container-discovery-default: var(--charcoal-color-light-red-50); + --charcoal-color-container-neutral-default: var(--charcoal-color-light-neutral-50); + --charcoal-color-container-notice-press: var(--charcoal-color-light-yellow-40); + --charcoal-color-container-notice-hover: var(--charcoal-color-light-yellow-30); + --charcoal-color-container-notice-default: var(--charcoal-color-light-yellow-20); + --charcoal-color-container-positive-press: var(--charcoal-color-light-green-70); + --charcoal-color-container-positive-hover: var(--charcoal-color-light-green-60); + --charcoal-color-container-positive-default: var(--charcoal-color-light-green-50); + --charcoal-color-container-negative-press: var(--charcoal-color-light-red-70); + --charcoal-color-container-negative-hover: var(--charcoal-color-light-red-60); + --charcoal-color-container-negative-default: var(--charcoal-color-light-red-50); + --charcoal-color-container-on-img-press: var(--charcoal-color-light-neutral-a-60); + --charcoal-color-container-on-img-hover: var(--charcoal-color-light-neutral-a-50); + --charcoal-color-container-on-img-default: var(--charcoal-color-light-neutral-a-40); + --charcoal-color-container-secondary-press-a: var(--charcoal-color-light-neutral-a-20); + --charcoal-color-container-secondary-hover-a: var(--charcoal-color-light-neutral-a-10); + --charcoal-color-container-secondary-default-a: var(--charcoal-color-light-neutral-a-5); + --charcoal-color-container-secondary-press: var(--charcoal-color-light-neutral-20); + --charcoal-color-container-secondary-hover: var(--charcoal-color-light-neutral-10); + --charcoal-color-container-primary-press: var(--charcoal-color-light-blue-70); + --charcoal-color-container-primary-hover: var(--charcoal-color-light-blue-60); + --charcoal-color-container-primary-default: var(--charcoal-color-light-blue-50); + --charcoal-color-container-tertiary-press-a: var(--charcoal-color-light-neutral-a-30); + --charcoal-color-container-tertiary-hover-a: var(--charcoal-color-light-neutral-a-20); + --charcoal-color-container-tertiary-default-a: var(--charcoal-color-light-neutral-a-10); + --charcoal-color-container-tertiary-press: var(--charcoal-color-light-neutral-30); + --charcoal-color-container-tertiary-hover: var(--charcoal-color-light-neutral-20); + --charcoal-color-container-tertiary-default: var(--charcoal-color-light-neutral-10); + --charcoal-color-container-secondary-default: var(--charcoal-color-light-neutral-5); + --charcoal-color-container-disable: var(--charcoal-color-light-neutral-10); + --charcoal-color-container-press-a: var(--charcoal-color-light-neutral-a-10); + --charcoal-color-container-hover-a: var(--charcoal-color-light-neutral-a-5); + --charcoal-color-container-default-a: var(--charcoal-color-light-neutral-a-0); + --charcoal-color-container-press: var(--charcoal-color-light-neutral-10); + --charcoal-color-container-hover: var(--charcoal-color-light-neutral-5); + --charcoal-color-container-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-background-tertiary: var(--charcoal-color-light-neutral-10); + --charcoal-color-background-secondary: var(--charcoal-color-light-neutral-5); + --charcoal-color-background-default: var(--charcoal-color-light-neutral-0); + --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90); + --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90); + --charcoal-radius-xxl: var(--charcoal-space-component-40); + --charcoal-radius-xl: var(--charcoal-space-component-30); + --charcoal-radius-l: var(--charcoal-space-component-25); + --charcoal-radius-m: var(--charcoal-space-component-20); + --charcoal-radius-s: var(--charcoal-space-component-10); + --charcoal-radius-xs: var(--charcoal-space-component-1); + --charcoal-radius-none: var(--charcoal-space-component-0); --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press); --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover); --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press); diff --git a/packages/theme/src/json/base.json b/packages/theme/src/json/base.json index 63583468..ec0e8523 100644 --- a/packages/theme/src/json/base.json +++ b/packages/theme/src/json/base.json @@ -1,12 +1,274 @@ { - "Brand color": { + "color": { + "light/neutral/0": { "value": "rgba(255, 255, 255, 1)" }, + "light/neutral-a/0": { "value": "rgba(31, 31, 31, 0)" }, + "light/neutral-a/5": { "value": "rgba(31, 31, 31, 0.055)" }, + "light/neutral-a/10": { "value": "rgba(31, 31, 31, 0.102)" }, + "light/neutral-a/20": { "value": "rgba(31, 31, 31, 0.17)" }, + "light/neutral-a/30": { "value": "rgba(31, 31, 31, 0.27)" }, + "light/neutral-a/40": { "value": "rgba(31, 31, 31, 0.37)" }, + "light/neutral-a/50": { "value": "rgba(31, 31, 31, 0.475)" }, + "light/neutral-a/60": { "value": "rgba(31, 31, 31, 0.635)" }, + "light/neutral-a/70": { "value": "rgba(31, 31, 31, 0.775)" }, + "light/neutral-a/80": { "value": "rgba(31, 31, 31, 0.885)" }, + "light/neutral-a/90": { "value": "{color.light/neutral/90}" }, + "light/neutral/5": { "value": "rgba(243, 243, 243, 1)" }, + "light/neutral/10": { "value": "rgba(232, 232, 232, 1)" }, + "light/neutral/20": { "value": "rgba(217, 217, 217, 1)" }, + "light/neutral/30": { "value": "rgba(194, 194, 194, 1)" }, + "light/neutral/40": { "value": "rgba(172, 172, 172, 1)" }, + "light/neutral/50": { "value": "rgba(148, 148, 148, 1)" }, + "light/neutral/60": { "value": "rgba(113, 113, 113, 1)" }, + "light/neutral/70": { "value": "rgba(81, 81, 81, 1)" }, + "light/neutral/80": { "value": "rgba(56, 56, 56, 1)" }, + "light/neutral/90": { "value": "rgba(31, 31, 31, 1)" }, + "light/red/0": { "value": "rgba(255, 255, 255, 1)" }, + "light/red/5": { "value": "rgba(253, 240, 237, 1)" }, + "light/red/10": { "value": "rgba(250, 228, 225, 1)" }, + "light/red/20": { "value": "rgba(253, 206, 199, 1)" }, + "light/red/30": { "value": "rgba(253, 174, 163, 1)" }, + "light/red/40": { "value": "rgba(252, 138, 124, 1)" }, + "light/red/50": { "value": "rgba(253, 91, 78, 1)" }, + "light/red/60": { "value": "rgba(206, 54, 46, 1)" }, + "light/red/70": { "value": "rgba(147, 33, 28, 1)" }, + "light/red/80": { "value": "rgba(103, 22, 17, 1)" }, + "light/red/90": { "value": "rgba(66, 0, 1, 1)" }, + "light/orange/5": { "value": "rgba(253, 241, 229, 1)" }, + "light/orange/10": { "value": "rgba(252, 229, 211, 1)" }, + "light/orange/20": { "value": "rgba(253, 209, 177, 1)" }, + "light/orange/30": { "value": "rgba(254, 176, 121, 1)" }, + "light/orange/40": { "value": "rgba(253, 143, 53, 1)" }, + "light/orange/50": { "value": "rgba(242, 105, 21, 1)" }, + "light/orange/60": { "value": "rgba(190, 79, 4, 1)" }, + "light/orange/70": { "value": "rgba(132, 54, 7, 1)" }, + "light/orange/80": { "value": "rgba(91, 38, 13, 1)" }, + "light/orange/90": { "value": "rgba(55, 18, 2, 1)" }, + "light/yellow/0": { "value": "rgba(255, 255, 255, 1)" }, + "light/yellow/5": { "value": "rgba(250, 243, 221, 1)" }, + "light/yellow/10": { "value": "rgba(246, 232, 176, 1)" }, + "light/yellow/20": { "value": "rgba(254, 214, 61, 1)" }, + "light/yellow/30": { "value": "rgba(245, 183, 17, 1)" }, + "light/yellow/40": { "value": "rgba(231, 157, 20, 1)" }, + "light/yellow/50": { "value": "rgba(205, 131, 2, 1)" }, + "light/yellow/60": { "value": "rgba(161, 99, 9, 1)" }, + "light/yellow/70": { "value": "rgba(110, 72, 5, 1)" }, + "light/yellow/80": { "value": "rgba(74, 51, 7, 1)" }, + "light/yellow/90": { "value": "rgba(44, 28, 0, 1)" }, + "light/green/0": { "value": "rgba(255, 255, 255, 1)" }, + "light/green/5": { "value": "rgba(234, 248, 232, 1)" }, + "light/green/10": { "value": "rgba(204, 243, 200, 1)" }, + "light/green/20": { "value": "rgba(164, 234, 157, 1)" }, + "light/green/30": { "value": "rgba(121, 214, 112, 1)" }, + "light/green/40": { "value": "rgba(80, 192, 72, 1)" }, + "light/green/50": { "value": "rgba(37, 170, 28, 1)" }, + "light/green/60": { "value": "rgba(17, 131, 8, 1)" }, + "light/green/70": { "value": "rgba(4, 93, 0, 1)" }, + "light/green/80": { "value": "rgba(7, 64, 4, 1)" }, + "light/green/90": { "value": "rgba(1, 40, 0, 1)" }, + "light/turquoise/0": { "value": "rgba(255, 255, 255, 1)" }, + "light/turquoise/5": { "value": "rgba(225, 249, 249, 1)" }, + "light/turquoise/10": { "value": "rgba(196, 240, 241, 1)" }, + "light/turquoise/20": { "value": "rgba(152, 228, 229, 1)" }, + "light/turquoise/30": { "value": "rgba(109, 204, 205, 1)" }, + "light/turquoise/40": { "value": "rgba(63, 184, 186, 1)" }, + "light/turquoise/50": { "value": "rgba(27, 161, 163, 1)" }, + "light/turquoise/60": { "value": "rgba(11, 126, 128, 1)" }, + "light/turquoise/70": { "value": "rgba(3, 87, 89, 1)" }, + "light/turquoise/80": { "value": "rgba(1, 61, 62, 1)" }, + "light/turquoise/90": { "value": "rgba(1, 37, 37, 1)" }, + "light/blue/0": { "value": "rgba(255, 255, 255, 1)" }, + "light/blue/5": { "value": "rgba(236, 244, 253, 1)" }, + "light/blue/10": { "value": "rgba(216, 235, 251, 1)" }, + "light/blue/20": { "value": "rgba(188, 222, 252, 1)" }, + "light/blue/30": { "value": "rgba(137, 200, 253, 1)" }, + "light/blue/40": { "value": "rgba(85, 178, 253, 1)" }, + "light/blue/50": { "value": "rgba(0, 150, 250, 1)" }, + "light/blue/60": { "value": "rgba(31, 117, 188, 1)" }, + "light/blue/70": { "value": "rgba(24, 81, 130, 1)" }, + "light/blue/80": { "value": "rgba(19, 58, 93, 1)" }, + "light/blue/90": { "value": "rgba(3, 35, 63, 1)" }, + "light/indigo/5": { "value": "rgba(241, 242, 253, 1)" }, + "light/indigo/10": { "value": "rgba(226, 231, 253, 1)" }, + "light/indigo/20": { "value": "rgba(210, 216, 252, 1)" }, + "light/indigo/30": { "value": "rgba(181, 189, 253, 1)" }, + "light/indigo/40": { "value": "rgba(156, 165, 252, 1)" }, + "light/indigo/50": { "value": "rgba(129, 136, 253, 1)" }, + "light/indigo/60": { "value": "rgba(95, 97, 222, 1)" }, + "light/indigo/70": { "value": "rgba(68, 70, 155, 1)" }, + "light/indigo/80": { "value": "rgba(45, 47, 109, 1)" }, + "light/indigo/90": { "value": "rgba(24, 24, 70, 1)" }, + "light/purple/5": { "value": "rgba(244, 241, 252, 1)" }, + "light/purple/10": { "value": "rgba(236, 229, 251, 1)" }, + "light/purple/20": { "value": "rgba(224, 210, 253, 1)" }, + "light/purple/30": { "value": "rgba(207, 183, 253, 1)" }, + "light/purple/40": { "value": "rgba(190, 153, 253, 1)" }, + "light/purple/50": { "value": "rgba(173, 120, 252, 1)" }, + "light/purple/60": { "value": "rgba(143, 77, 225, 1)" }, + "light/purple/70": { "value": "rgba(103, 39, 171, 1)" }, + "light/purple/80": { "value": "rgba(70, 32, 115, 1)" }, + "light/purple/90": { "value": "rgba(40, 16, 70, 1)" }, + "light/magenta/5": { "value": "rgba(252, 239, 244, 1)" }, + "light/magenta/10": { "value": "rgba(251, 226, 237, 1)" }, + "light/magenta/20": { "value": "rgba(255, 204, 226, 1)" }, + "light/magenta/30": { "value": "rgba(245, 173, 206, 1)" }, + "light/magenta/40": { "value": "rgba(250, 131, 192, 1)" }, + "light/magenta/50": { "value": "rgba(235, 95, 170, 1)" }, + "light/magenta/60": { "value": "rgba(196, 53, 135, 1)" }, + "light/magenta/70": { "value": "rgba(141, 33, 96, 1)" }, + "light/magenta/80": { "value": "rgba(98, 27, 67, 1)" }, + "light/magenta/90": { "value": "rgba(59, 5, 37, 1)" }, + "dark/neutral/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/neutral-a/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/neutral-a/-5": { "value": "rgba(6, 6, 6, 0.41)" }, + "dark/neutral-a/0": { "value": "rgba(228, 228, 228, 0)" }, + "dark/neutral-a/5": { "value": "rgba(228, 228, 228, 0.05)" }, + "dark/neutral-a/10": { "value": "rgba(228, 228, 228, 0.1)" }, + "dark/neutral-a/20": { "value": "rgba(228, 228, 228, 0.255)" }, + "dark/neutral-a/30": { "value": "rgba(228, 228, 228, 0.41)" }, + "dark/neutral-a/40": { "value": "rgba(228, 228, 228, 0.505)" }, + "dark/neutral-a/50": { "value": "rgba(228, 228, 228, 0.61)" }, + "dark/neutral-a/60": { "value": "rgba(228, 228, 228, 0.73)" }, + "dark/neutral-a/70": { "value": "rgba(228, 228, 228, 0.795)" }, + "dark/neutral-a/80": { "value": "rgba(228, 228, 228, 0.87)" }, + "dark/neutral-a/90": { "value": "{color.dark/neutral/90}" }, + "dark/neutral/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/neutral/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/neutral/5": { "value": "rgba(41, 41, 41, 1)" }, + "dark/neutral/10": { "value": "rgba(51, 51, 51, 1)" }, + "dark/neutral/20": { "value": "rgba(81, 81, 81, 1)" }, + "dark/neutral/30": { "value": "rgba(112, 112, 112, 1)" }, + "dark/neutral/40": { "value": "rgba(130, 130, 130, 1)" }, + "dark/neutral/50": { "value": "rgba(151, 151, 151, 1)" }, + "dark/neutral/60": { "value": "rgba(175, 175, 175, 1)" }, + "dark/neutral/70": { "value": "rgba(188, 188, 188, 1)" }, + "dark/neutral/80": { "value": "rgba(202, 202, 202, 1)" }, + "dark/neutral/90": { "value": "rgba(228, 228, 228, 1)" }, + "dark/red/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/red/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/red/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/red/5": { "value": "rgba(47, 39, 38, 1)" }, + "dark/red/10": { "value": "rgba(73, 47, 43, 1)" }, + "dark/red/20": { "value": "rgba(136, 54, 46, 1)" }, + "dark/red/30": { "value": "rgba(197, 60, 51, 1)" }, + "dark/red/40": { "value": "rgba(217, 88, 76, 1)" }, + "dark/red/50": { "value": "rgba(233, 114, 102, 1)" }, + "dark/red/60": { "value": "rgba(252, 147, 134, 1)" }, + "dark/red/70": { "value": "rgba(254, 167, 155, 1)" }, + "dark/red/80": { "value": "rgba(249, 186, 177, 1)" }, + "dark/red/90": { "value": "rgba(254, 219, 214, 1)" }, + "dark/orange/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/orange/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/orange/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/orange/5": { "value": "rgba(48, 39, 34, 1)" }, + "dark/orange/10": { "value": "rgba(72, 48, 38, 1)" }, + "dark/orange/20": { "value": "rgba(134, 58, 22, 1)" }, + "dark/orange/30": { "value": "rgba(188, 74, 14, 1)" }, + "dark/orange/40": { "value": "rgba(212, 97, 41, 1)" }, + "dark/orange/50": { "value": "rgba(229, 121, 68, 1)" }, + "dark/orange/60": { "value": "rgba(246, 151, 107, 1)" }, + "dark/orange/70": { "value": "rgba(248, 170, 135, 1)" }, + "dark/orange/80": { "value": "rgba(245, 188, 163, 1)" }, + "dark/orange/90": { "value": "rgba(252, 221, 207, 1)" }, + "dark/yellow/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/yellow/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/yellow/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/yellow/5": { "value": "rgba(44, 40, 35, 1)" }, + "dark/yellow/10": { "value": "rgba(66, 51, 30, 1)" }, + "dark/yellow/20": { "value": "rgba(109, 75, 31, 1)" }, + "dark/yellow/30": { "value": "rgba(153, 99, 8, 1)" }, + "dark/yellow/40": { "value": "rgba(174, 121, 14, 1)" }, + "dark/yellow/50": { "value": "rgba(199, 140, 10, 1)" }, + "dark/yellow/60": { "value": "rgba(222, 167, 29, 1)" }, + "dark/yellow/70": { "value": "rgba(222, 185, 7, 1)" }, + "dark/yellow/80": { "value": "rgba(231, 199, 80, 1)" }, + "dark/yellow/90": { "value": "rgba(252, 227, 145, 1)" }, + "dark/green/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/green/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/green/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/green/5": { "value": "rgba(37, 43, 37, 1)" }, + "dark/green/10": { "value": "rgba(41, 59, 40, 1)" }, + "dark/green/20": { "value": "rgba(39, 92, 35, 1)" }, + "dark/green/30": { "value": "rgba(13, 129, 5, 1)" }, + "dark/green/40": { "value": "rgba(58, 150, 52, 1)" }, + "dark/green/50": { "value": "rgba(86, 169, 79, 1)" }, + "dark/green/60": { "value": "rgba(120, 194, 113, 1)" }, + "dark/green/70": { "value": "rgba(141, 204, 135, 1)" }, + "dark/green/80": { "value": "rgba(161, 215, 155, 1)" }, + "dark/green/90": { "value": "rgba(191, 241, 186, 1)" }, + "dark/turquoise/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/turquoise/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/turquoise/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/turquoise/5": { "value": "rgba(35, 42, 41, 1)" }, + "dark/turquoise/10": { "value": "rgba(26, 60, 58, 1)" }, + "dark/turquoise/20": { "value": "rgba(0, 91, 88, 1)" }, + "dark/turquoise/30": { "value": "rgba(0, 123, 118, 1)" }, + "dark/turquoise/40": { "value": "rgba(0, 147, 142, 1)" }, + "dark/turquoise/50": { "value": "rgba(32, 170, 164, 1)" }, + "dark/turquoise/60": { "value": "rgba(84, 193, 186, 1)" }, + "dark/turquoise/70": { "value": "rgba(118, 205, 199, 1)" }, + "dark/turquoise/80": { "value": "rgba(144, 213, 207, 1)" }, + "dark/turquoise/90": { "value": "rgba(180, 239, 234, 1)" }, + "dark/blue/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/blue/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/blue/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/blue/5": { "value": "rgba(33, 41, 50, 1)" }, + "dark/blue/10": { "value": "rgba(36, 55, 73, 1)" }, + "dark/blue/20": { "value": "rgba(39, 84, 126, 1)" }, + "dark/blue/30": { "value": "rgba(8, 114, 190, 1)" }, + "dark/blue/40": { "value": "rgba(55, 136, 208, 1)" }, + "dark/blue/50": { "value": "rgba(83, 156, 224, 1)" }, + "dark/blue/60": { "value": "rgba(114, 181, 245, 1)" }, + "dark/blue/70": { "value": "rgba(139, 193, 248, 1)" }, + "dark/blue/80": { "value": "rgba(166, 205, 245, 1)" }, + "dark/blue/90": { "value": "rgba(207, 230, 253, 1)" }, + "dark/indigo/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/indigo/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/indigo/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/indigo/5": { "value": "rgba(39, 40, 46, 1)" }, + "dark/indigo/10": { "value": "rgba(48, 51, 74, 1)" }, + "dark/indigo/20": { "value": "rgba(72, 76, 134, 1)" }, + "dark/indigo/30": { "value": "rgba(96, 100, 199, 1)" }, + "dark/indigo/40": { "value": "rgba(115, 123, 219, 1)" }, + "dark/indigo/50": { "value": "rgba(135, 143, 231, 1)" }, + "dark/indigo/60": { "value": "rgba(160, 170, 249, 1)" }, + "dark/indigo/70": { "value": "rgba(175, 184, 254, 1)" }, + "dark/indigo/80": { "value": "rgba(192, 199, 248, 1)" }, + "dark/indigo/90": { "value": "rgba(222, 227, 255, 1)" }, + "dark/purple/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/purple/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/purple/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/purple/5": { "value": "rgba(42, 38, 49, 1)" }, + "dark/purple/10": { "value": "rgba(56, 48, 71, 1)" }, + "dark/purple/20": { "value": "rgba(93, 68, 132, 1)" }, + "dark/purple/30": { "value": "rgba(131, 88, 194, 1)" }, + "dark/purple/40": { "value": "rgba(149, 110, 210, 1)" }, + "dark/purple/50": { "value": "rgba(169, 133, 229, 1)" }, + "dark/purple/60": { "value": "rgba(191, 160, 246, 1)" }, + "dark/purple/70": { "value": "rgba(201, 176, 249, 1)" }, + "dark/purple/80": { "value": "rgba(210, 192, 245, 1)" }, + "dark/purple/90": { "value": "rgba(233, 223, 255, 1)" }, + "dark/magenta/-10": { "value": "rgba(6, 6, 6, 1)" }, + "dark/magenta/-5": { "value": "rgba(21, 21, 21, 1)" }, + "dark/magenta/0": { "value": "rgba(31, 31, 31, 1)" }, + "dark/magenta/5": { "value": "rgba(48, 36, 42, 1)" }, + "dark/magenta/10": { "value": "rgba(69, 44, 56, 1)" }, + "dark/magenta/20": { "value": "rgba(124, 58, 91, 1)" }, + "dark/magenta/30": { "value": "rgba(185, 64, 130, 1)" }, + "dark/magenta/40": { "value": "rgba(202, 91, 149, 1)" }, + "dark/magenta/50": { "value": "rgba(220, 114, 168, 1)" }, + "dark/magenta/60": { "value": "rgba(240, 146, 191, 1)" }, + "dark/magenta/70": { "value": "rgba(243, 163, 200, 1)" }, + "dark/magenta/80": { "value": "rgba(247, 184, 213, 1)" }, + "dark/magenta/90": { "value": "rgba(253, 217, 233, 1)" } + }, + "brand-color": { "pixiv": { "value": "rgba(0, 150, 250, 1)" }, "premium": { "value": "rgba(253, 158, 22, 1)" }, "comic": { "value": "rgba(255, 196, 0, 1)" }, - "BOOTH": { "value": "rgba(252, 77, 80, 1)" }, - "FACTORY": { "value": "rgba(0, 184, 205, 1)" } + "booth": { "value": "rgba(252, 77, 80, 1)" }, + "factory": { "value": "rgba(0, 184, 205, 1)" } }, - "Space": { + "space": { "0": { "value": "0" }, "1": { "value": "2" }, "10": { "value": "4" }, @@ -29,7 +291,7 @@ "100": { "value": "440" }, "999": { "value": "999999" } }, - "Text": { + "text": { "font-size/0": { "value": "11" }, "font-size/1": { "value": "12" }, "font-size/5": { "value": "14" }, @@ -61,267 +323,5 @@ "line-height/90": { "value": "64" }, "line-height/100": { "value": "72" }, "font-family/sans": { "value": "Sarasa UI J" } - }, - "Colors": { - "Light/Neutral/0": { "value": "rgba(255, 255, 255, 1)" }, - "Light/NeutralA/0": { "value": "rgba(31, 31, 31, 0)" }, - "Light/NeutralA/5": { "value": "rgba(31, 31, 31, 0.055)" }, - "Light/NeutralA/10": { "value": "rgba(31, 31, 31, 0.102)" }, - "Light/NeutralA/20": { "value": "rgba(31, 31, 31, 0.17)" }, - "Light/NeutralA/30": { "value": "rgba(31, 31, 31, 0.27)" }, - "Light/NeutralA/40": { "value": "rgba(31, 31, 31, 0.37)" }, - "Light/NeutralA/50": { "value": "rgba(31, 31, 31, 0.475)" }, - "Light/NeutralA/60": { "value": "rgba(31, 31, 31, 0.635)" }, - "Light/NeutralA/70": { "value": "rgba(31, 31, 31, 0.775)" }, - "Light/NeutralA/80": { "value": "rgba(31, 31, 31, 0.885)" }, - "Light/NeutralA/90": { "value": "{Colors.Light/Neutral/90}" }, - "Light/Neutral/5": { "value": "rgba(243, 243, 243, 1)" }, - "Light/Neutral/10": { "value": "rgba(232, 232, 232, 1)" }, - "Light/Neutral/20": { "value": "rgba(217, 217, 217, 1)" }, - "Light/Neutral/30": { "value": "rgba(194, 194, 194, 1)" }, - "Light/Neutral/40": { "value": "rgba(172, 172, 172, 1)" }, - "Light/Neutral/50": { "value": "rgba(148, 148, 148, 1)" }, - "Light/Neutral/60": { "value": "rgba(113, 113, 113, 1)" }, - "Light/Neutral/70": { "value": "rgba(81, 81, 81, 1)" }, - "Light/Neutral/80": { "value": "rgba(56, 56, 56, 1)" }, - "Light/Neutral/90": { "value": "rgba(31, 31, 31, 1)" }, - "Light/Red/0": { "value": "rgba(255, 255, 255, 1)" }, - "Light/Red/5": { "value": "rgba(253, 240, 237, 1)" }, - "Light/Red/10": { "value": "rgba(250, 228, 225, 1)" }, - "Light/Red/20": { "value": "rgba(253, 206, 199, 1)" }, - "Light/Red/30": { "value": "rgba(253, 174, 163, 1)" }, - "Light/Red/40": { "value": "rgba(252, 138, 124, 1)" }, - "Light/Red/50": { "value": "rgba(253, 91, 78, 1)" }, - "Light/Red/60": { "value": "rgba(206, 54, 46, 1)" }, - "Light/Red/70": { "value": "rgba(147, 33, 28, 1)" }, - "Light/Red/80": { "value": "rgba(103, 22, 17, 1)" }, - "Light/Red/90": { "value": "rgba(66, 0, 1, 1)" }, - "Light/Orange/5": { "value": "rgba(253, 241, 229, 1)" }, - "Light/Orange/10": { "value": "rgba(252, 229, 211, 1)" }, - "Light/Orange/20": { "value": "rgba(253, 209, 177, 1)" }, - "Light/Orange/30": { "value": "rgba(254, 176, 121, 1)" }, - "Light/Orange/40": { "value": "rgba(253, 143, 53, 1)" }, - "Light/Orange/50": { "value": "rgba(242, 105, 21, 1)" }, - "Light/Orange/60": { "value": "rgba(190, 79, 4, 1)" }, - "Light/Orange/70": { "value": "rgba(132, 54, 7, 1)" }, - "Light/Orange/80": { "value": "rgba(91, 38, 13, 1)" }, - "Light/Orange/90": { "value": "rgba(55, 18, 2, 1)" }, - "Light/Yellow/0": { "value": "rgba(255, 255, 255, 1)" }, - "Light/Yellow/5": { "value": "rgba(250, 243, 221, 1)" }, - "Light/Yellow/10": { "value": "rgba(246, 232, 176, 1)" }, - "Light/Yellow/20": { "value": "rgba(254, 214, 61, 1)" }, - "Light/Yellow/30": { "value": "rgba(245, 183, 17, 1)" }, - "Light/Yellow/40": { "value": "rgba(231, 157, 20, 1)" }, - "Light/Yellow/50": { "value": "rgba(205, 131, 2, 1)" }, - "Light/Yellow/60": { "value": "rgba(161, 99, 9, 1)" }, - "Light/Yellow/70": { "value": "rgba(110, 72, 5, 1)" }, - "Light/Yellow/80": { "value": "rgba(74, 51, 7, 1)" }, - "Light/Yellow/90": { "value": "rgba(44, 28, 0, 1)" }, - "Light/Green/0": { "value": "rgba(255, 255, 255, 1)" }, - "Light/Green/5": { "value": "rgba(234, 248, 232, 1)" }, - "Light/Green/10": { "value": "rgba(204, 243, 200, 1)" }, - "Light/Green/20": { "value": "rgba(164, 234, 157, 1)" }, - "Light/Green/30": { "value": "rgba(121, 214, 112, 1)" }, - "Light/Green/40": { "value": "rgba(80, 192, 72, 1)" }, - "Light/Green/50": { "value": "rgba(37, 170, 28, 1)" }, - "Light/Green/60": { "value": "rgba(17, 131, 8, 1)" }, - "Light/Green/70": { "value": "rgba(4, 93, 0, 1)" }, - "Light/Green/80": { "value": "rgba(7, 64, 4, 1)" }, - "Light/Green/90": { "value": "rgba(1, 40, 0, 1)" }, - "Light/Turquoise/0": { "value": "rgba(255, 255, 255, 1)" }, - "Light/Turquoise/5": { "value": "rgba(225, 249, 249, 1)" }, - "Light/Turquoise/10": { "value": "rgba(196, 240, 241, 1)" }, - "Light/Turquoise/20": { "value": "rgba(152, 228, 229, 1)" }, - "Light/Turquoise/30": { "value": "rgba(109, 204, 205, 1)" }, - "Light/Turquoise/40": { "value": "rgba(63, 184, 186, 1)" }, - "Light/Turquoise/50": { "value": "rgba(27, 161, 163, 1)" }, - "Light/Turquoise/60": { "value": "rgba(11, 126, 128, 1)" }, - "Light/Turquoise/70": { "value": "rgba(3, 87, 89, 1)" }, - "Light/Turquoise/80": { "value": "rgba(1, 61, 62, 1)" }, - "Light/Turquoise/90": { "value": "rgba(1, 37, 37, 1)" }, - "Light/Blue/0": { "value": "rgba(255, 255, 255, 1)" }, - "Light/Blue/5": { "value": "rgba(236, 244, 253, 1)" }, - "Light/Blue/10": { "value": "rgba(216, 235, 251, 1)" }, - "Light/Blue/20": { "value": "rgba(188, 222, 252, 1)" }, - "Light/Blue/30": { "value": "rgba(137, 200, 253, 1)" }, - "Light/Blue/40": { "value": "rgba(85, 178, 253, 1)" }, - "Light/Blue/50": { "value": "rgba(0, 150, 250, 1)" }, - "Light/Blue/60": { "value": "rgba(31, 117, 188, 1)" }, - "Light/Blue/70": { "value": "rgba(24, 81, 130, 1)" }, - "Light/Blue/80": { "value": "rgba(19, 58, 93, 1)" }, - "Light/Blue/90": { "value": "rgba(3, 35, 63, 1)" }, - "Light/Indigo/5": { "value": "rgba(241, 242, 253, 1)" }, - "Light/Indigo/10": { "value": "rgba(226, 231, 253, 1)" }, - "Light/Indigo/20": { "value": "rgba(210, 216, 252, 1)" }, - "Light/Indigo/30": { "value": "rgba(181, 189, 253, 1)" }, - "Light/Indigo/40": { "value": "rgba(156, 165, 252, 1)" }, - "Light/Indigo/50": { "value": "rgba(129, 136, 253, 1)" }, - "Light/Indigo/60": { "value": "rgba(95, 97, 222, 1)" }, - "Light/Indigo/70": { "value": "rgba(68, 70, 155, 1)" }, - "Light/Indigo/80": { "value": "rgba(45, 47, 109, 1)" }, - "Light/Indigo/90": { "value": "rgba(24, 24, 70, 1)" }, - "Light/Purple/5": { "value": "rgba(244, 241, 252, 1)" }, - "Light/Purple/10": { "value": "rgba(236, 229, 251, 1)" }, - "Light/Purple/20": { "value": "rgba(224, 210, 253, 1)" }, - "Light/Purple/30": { "value": "rgba(207, 183, 253, 1)" }, - "Light/Purple/40": { "value": "rgba(190, 153, 253, 1)" }, - "Light/Purple/50": { "value": "rgba(173, 120, 252, 1)" }, - "Light/Purple/60": { "value": "rgba(143, 77, 225, 1)" }, - "Light/Purple/70": { "value": "rgba(103, 39, 171, 1)" }, - "Light/Purple/80": { "value": "rgba(70, 32, 115, 1)" }, - "Light/Purple/90": { "value": "rgba(40, 16, 70, 1)" }, - "Light/Magenta/5": { "value": "rgba(252, 239, 244, 1)" }, - "Light/Magenta/10": { "value": "rgba(251, 226, 237, 1)" }, - "Light/Magenta/20": { "value": "rgba(255, 204, 226, 1)" }, - "Light/Magenta/30": { "value": "rgba(245, 173, 206, 1)" }, - "Light/Magenta/40": { "value": "rgba(250, 131, 192, 1)" }, - "Light/Magenta/50": { "value": "rgba(235, 95, 170, 1)" }, - "Light/Magenta/60": { "value": "rgba(196, 53, 135, 1)" }, - "Light/Magenta/70": { "value": "rgba(141, 33, 96, 1)" }, - "Light/Magenta/80": { "value": "rgba(98, 27, 67, 1)" }, - "Light/Magenta/90": { "value": "rgba(59, 5, 37, 1)" }, - "Dark/Neutral/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/NeutralA/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/NeutralA/-5": { "value": "rgba(6, 6, 6, 0.41)" }, - "Dark/NeutralA/0": { "value": "rgba(228, 228, 228, 0)" }, - "Dark/NeutralA/5": { "value": "rgba(228, 228, 228, 0.05)" }, - "Dark/NeutralA/10": { "value": "rgba(228, 228, 228, 0.1)" }, - "Dark/NeutralA/20": { "value": "rgba(228, 228, 228, 0.255)" }, - "Dark/NeutralA/30": { "value": "rgba(228, 228, 228, 0.41)" }, - "Dark/NeutralA/40": { "value": "rgba(228, 228, 228, 0.505)" }, - "Dark/NeutralA/50": { "value": "rgba(228, 228, 228, 0.61)" }, - "Dark/NeutralA/60": { "value": "rgba(228, 228, 228, 0.73)" }, - "Dark/NeutralA/70": { "value": "rgba(228, 228, 228, 0.795)" }, - "Dark/NeutralA/80": { "value": "rgba(228, 228, 228, 0.87)" }, - "Dark/NeutralA/90": { "value": "{Colors.Dark/Neutral/90}" }, - "Dark/Neutral/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Neutral/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Neutral/5": { "value": "rgba(41, 41, 41, 1)" }, - "Dark/Neutral/10": { "value": "rgba(51, 51, 51, 1)" }, - "Dark/Neutral/20": { "value": "rgba(81, 81, 81, 1)" }, - "Dark/Neutral/30": { "value": "rgba(112, 112, 112, 1)" }, - "Dark/Neutral/40": { "value": "rgba(130, 130, 130, 1)" }, - "Dark/Neutral/50": { "value": "rgba(151, 151, 151, 1)" }, - "Dark/Neutral/60": { "value": "rgba(175, 175, 175, 1)" }, - "Dark/Neutral/70": { "value": "rgba(188, 188, 188, 1)" }, - "Dark/Neutral/80": { "value": "rgba(202, 202, 202, 1)" }, - "Dark/Neutral/90": { "value": "rgba(228, 228, 228, 1)" }, - "Dark/Red/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Red/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Red/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Red/5": { "value": "rgba(47, 39, 38, 1)" }, - "Dark/Red/10": { "value": "rgba(73, 47, 43, 1)" }, - "Dark/Red/20": { "value": "rgba(136, 54, 46, 1)" }, - "Dark/Red/30": { "value": "rgba(197, 60, 51, 1)" }, - "Dark/Red/40": { "value": "rgba(217, 88, 76, 1)" }, - "Dark/Red/50": { "value": "rgba(233, 114, 102, 1)" }, - "Dark/Red/60": { "value": "rgba(252, 147, 134, 1)" }, - "Dark/Red/70": { "value": "rgba(254, 167, 155, 1)" }, - "Dark/Red/80": { "value": "rgba(249, 186, 177, 1)" }, - "Dark/Red/90": { "value": "rgba(254, 219, 214, 1)" }, - "Dark/Orange/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Orange/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Orange/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Orange/5": { "value": "rgba(48, 39, 34, 1)" }, - "Dark/Orange/10": { "value": "rgba(72, 48, 38, 1)" }, - "Dark/Orange/20": { "value": "rgba(134, 58, 22, 1)" }, - "Dark/Orange/30": { "value": "rgba(188, 74, 14, 1)" }, - "Dark/Orange/40": { "value": "rgba(212, 97, 41, 1)" }, - "Dark/Orange/50": { "value": "rgba(229, 121, 68, 1)" }, - "Dark/Orange/60": { "value": "rgba(246, 151, 107, 1)" }, - "Dark/Orange/70": { "value": "rgba(248, 170, 135, 1)" }, - "Dark/Orange/80": { "value": "rgba(245, 188, 163, 1)" }, - "Dark/Orange/90": { "value": "rgba(252, 221, 207, 1)" }, - "Dark/Yellow/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Yellow/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Yellow/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Yellow/5": { "value": "rgba(44, 40, 35, 1)" }, - "Dark/Yellow/10": { "value": "rgba(66, 51, 30, 1)" }, - "Dark/Yellow/20": { "value": "rgba(109, 75, 31, 1)" }, - "Dark/Yellow/30": { "value": "rgba(153, 99, 8, 1)" }, - "Dark/Yellow/40": { "value": "rgba(174, 121, 14, 1)" }, - "Dark/Yellow/50": { "value": "rgba(199, 140, 10, 1)" }, - "Dark/Yellow/60": { "value": "rgba(222, 167, 29, 1)" }, - "Dark/Yellow/70": { "value": "rgba(222, 185, 7, 1)" }, - "Dark/Yellow/80": { "value": "rgba(231, 199, 80, 1)" }, - "Dark/Yellow/90": { "value": "rgba(252, 227, 145, 1)" }, - "Dark/Green/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Green/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Green/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Green/5": { "value": "rgba(37, 43, 37, 1)" }, - "Dark/Green/10": { "value": "rgba(41, 59, 40, 1)" }, - "Dark/Green/20": { "value": "rgba(39, 92, 35, 1)" }, - "Dark/Green/30": { "value": "rgba(13, 129, 5, 1)" }, - "Dark/Green/40": { "value": "rgba(58, 150, 52, 1)" }, - "Dark/Green/50": { "value": "rgba(86, 169, 79, 1)" }, - "Dark/Green/60": { "value": "rgba(120, 194, 113, 1)" }, - "Dark/Green/70": { "value": "rgba(141, 204, 135, 1)" }, - "Dark/Green/80": { "value": "rgba(161, 215, 155, 1)" }, - "Dark/Green/90": { "value": "rgba(191, 241, 186, 1)" }, - "Dark/Turquoise/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Turquoise/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Turquoise/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Turquoise/5": { "value": "rgba(35, 42, 41, 1)" }, - "Dark/Turquoise/10": { "value": "rgba(26, 60, 58, 1)" }, - "Dark/Turquoise/20": { "value": "rgba(0, 91, 88, 1)" }, - "Dark/Turquoise/30": { "value": "rgba(0, 123, 118, 1)" }, - "Dark/Turquoise/40": { "value": "rgba(0, 147, 142, 1)" }, - "Dark/Turquoise/50": { "value": "rgba(32, 170, 164, 1)" }, - "Dark/Turquoise/60": { "value": "rgba(84, 193, 186, 1)" }, - "Dark/Turquoise/70": { "value": "rgba(118, 205, 199, 1)" }, - "Dark/Turquoise/80": { "value": "rgba(144, 213, 207, 1)" }, - "Dark/Turquoise/90": { "value": "rgba(180, 239, 234, 1)" }, - "Dark/Blue/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Blue/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Blue/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Blue/5": { "value": "rgba(33, 41, 50, 1)" }, - "Dark/Blue/10": { "value": "rgba(36, 55, 73, 1)" }, - "Dark/Blue/20": { "value": "rgba(39, 84, 126, 1)" }, - "Dark/Blue/30": { "value": "rgba(8, 114, 190, 1)" }, - "Dark/Blue/40": { "value": "rgba(55, 136, 208, 1)" }, - "Dark/Blue/50": { "value": "rgba(83, 156, 224, 1)" }, - "Dark/Blue/60": { "value": "rgba(114, 181, 245, 1)" }, - "Dark/Blue/70": { "value": "rgba(139, 193, 248, 1)" }, - "Dark/Blue/80": { "value": "rgba(166, 205, 245, 1)" }, - "Dark/Blue/90": { "value": "rgba(207, 230, 253, 1)" }, - "Dark/Indigo/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Indigo/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Indigo/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Indigo/5": { "value": "rgba(39, 40, 46, 1)" }, - "Dark/Indigo/10": { "value": "rgba(48, 51, 74, 1)" }, - "Dark/Indigo/20": { "value": "rgba(72, 76, 134, 1)" }, - "Dark/Indigo/30": { "value": "rgba(96, 100, 199, 1)" }, - "Dark/Indigo/40": { "value": "rgba(115, 123, 219, 1)" }, - "Dark/Indigo/50": { "value": "rgba(135, 143, 231, 1)" }, - "Dark/Indigo/60": { "value": "rgba(160, 170, 249, 1)" }, - "Dark/Indigo/70": { "value": "rgba(175, 184, 254, 1)" }, - "Dark/Indigo/80": { "value": "rgba(192, 199, 248, 1)" }, - "Dark/Indigo/90": { "value": "rgba(222, 227, 255, 1)" }, - "Dark/Purple/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Purple/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Purple/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Purple/5": { "value": "rgba(42, 38, 49, 1)" }, - "Dark/Purple/10": { "value": "rgba(56, 48, 71, 1)" }, - "Dark/Purple/20": { "value": "rgba(93, 68, 132, 1)" }, - "Dark/Purple/30": { "value": "rgba(131, 88, 194, 1)" }, - "Dark/Purple/40": { "value": "rgba(149, 110, 210, 1)" }, - "Dark/Purple/50": { "value": "rgba(169, 133, 229, 1)" }, - "Dark/Purple/60": { "value": "rgba(191, 160, 246, 1)" }, - "Dark/Purple/70": { "value": "rgba(201, 176, 249, 1)" }, - "Dark/Purple/80": { "value": "rgba(210, 192, 245, 1)" }, - "Dark/Purple/90": { "value": "rgba(233, 223, 255, 1)" }, - "Dark/Magenta/-10": { "value": "rgba(6, 6, 6, 1)" }, - "Dark/Magenta/-5": { "value": "rgba(21, 21, 21, 1)" }, - "Dark/Magenta/0": { "value": "rgba(31, 31, 31, 1)" }, - "Dark/Magenta/5": { "value": "rgba(48, 36, 42, 1)" }, - "Dark/Magenta/10": { "value": "rgba(69, 44, 56, 1)" }, - "Dark/Magenta/20": { "value": "rgba(124, 58, 91, 1)" }, - "Dark/Magenta/30": { "value": "rgba(185, 64, 130, 1)" }, - "Dark/Magenta/40": { "value": "rgba(202, 91, 149, 1)" }, - "Dark/Magenta/50": { "value": "rgba(220, 114, 168, 1)" }, - "Dark/Magenta/60": { "value": "rgba(240, 146, 191, 1)" }, - "Dark/Magenta/70": { "value": "rgba(243, 163, 200, 1)" }, - "Dark/Magenta/80": { "value": "rgba(247, 184, 213, 1)" }, - "Dark/Magenta/90": { "value": "rgba(253, 217, 233, 1)" } } } diff --git a/packages/theme/src/json/pixiv-dark.json b/packages/theme/src/json/pixiv-dark.json index 9b83e7ee..3d47d1af 100644 --- a/packages/theme/src/json/pixiv-dark.json +++ b/packages/theme/src/json/pixiv-dark.json @@ -1,176 +1,190 @@ { - "Color": { - "background/default": { "value": "{Colors.Dark/Neutral/0}" }, - "background/secondary": { "value": "{Colors.Dark/Neutral/-5}" }, - "background/tertiary": { "value": "{Colors.Dark/Neutral/-10}" }, - "container/default": { "value": "{Colors.Dark/Neutral/0}" }, - "container/hover": { "value": "{Colors.Dark/Neutral/5}" }, - "container/press": { "value": "{Colors.Dark/Neutral/10}" }, - "container/disable": { "value": "{Colors.Dark/Neutral/10}" }, - "container/secondary/default": { "value": "{Colors.Dark/Neutral/5}" }, - "container/tertiary/default": { "value": "{Colors.Dark/Neutral/10}" }, - "container/tertiary/hover": { "value": "{Colors.Dark/Neutral/20}" }, - "container/tertiary/press": { "value": "{Colors.Dark/Neutral/30}" }, - "container/tertiary/defaultA": { "value": "{Colors.Dark/NeutralA/10}" }, - "container/tertiary/hoverA": { "value": "{Colors.Dark/NeutralA/20}" }, - "container/tertiary/pressA": { "value": "{Colors.Dark/NeutralA/30}" }, - "container/primary/default": { "value": "{Colors.Dark/Blue/30}" }, - "container/primary/hover": { "value": "{Colors.Dark/Blue/40}" }, - "container/primary/press": { "value": "{Colors.Dark/Blue/50}" }, - "container/secondary/hover": { "value": "{Colors.Dark/Neutral/10}" }, - "container/secondary/press": { "value": "{Colors.Dark/Neutral/20}" }, - "container/secondary/defaultA": { "value": "{Colors.Dark/NeutralA/5}" }, - "container/secondary/hoverA": { "value": "{Colors.Dark/NeutralA/10}" }, - "container/secondary/pressA": { "value": "{Colors.Dark/NeutralA/20}" }, - "container/on-img/default": { "value": "{Colors.Light/NeutralA/40}" }, - "container/on-img/hover": { "value": "{Colors.Light/NeutralA/50}" }, - "container/on-img/press": { "value": "{Colors.Light/NeutralA/60}" }, - "container/negative/default": { "value": "{Colors.Dark/Red/30}" }, - "container/negative/hover": { "value": "{Colors.Dark/Red/40}" }, - "container/negative/press": { "value": "{Colors.Dark/Red/50}" }, - "container/positive/default": { "value": "{Colors.Dark/Green/30}" }, - "container/positive/hover": { "value": "{Colors.Dark/Green/40}" }, - "container/positive/press": { "value": "{Colors.Dark/Green/50}" }, - "container/notice/default": { "value": "{Colors.Dark/Yellow/70}" }, - "container/notice/hover": { "value": "{Colors.Dark/Yellow/80}" }, - "container/notice/press": { "value": "{Colors.Dark/Yellow/90}" }, - "container/neutral/default": { "value": "{Colors.Dark/Neutral/30}" }, - "container/discovery/default": { "value": "{Colors.Dark/Red/30}" }, - "container/discovery/hover": { "value": "{Colors.Dark/Red/40}" }, - "container/discovery/press": { "value": "{Colors.Dark/Red/50}" }, - "container/neutral/hover": { "value": "{Colors.Dark/Neutral/40}" }, - "container/neutral/press": { "value": "{Colors.Dark/Neutral/50}" }, - "container/HUD/default": { "value": "{Colors.Light/Neutral/10}" }, - "container/HUD/hover": { "value": "{Colors.Light/Neutral/20}" }, - "container/HUD/press": { "value": "{Colors.Light/Neutral/20}" }, - "container/skeleton": { "value": "{Colors.Dark/NeutralA/5}" }, - "container/subtle": { "value": "rgba(228, 228, 228, 0.02)" }, - "icon/secondary/default": { "value": "{Color.text/secondary/default}" }, - "icon/tertiary/default": { "value": "{Color.text/tertiary/default}" }, - "icon/negative/default": { "value": "{Color.text/negative/default}" }, - "icon/negative/hover": { "value": "{Color.text/negative/hover}" }, - "icon/negative/press": { "value": "{Color.text/negative/press}" }, - "icon/positive/default": { "value": "{Color.text/positive/default}" }, - "icon/positive/hover": { "value": "{Color.text/positive/hover}" }, - "icon/positive/press": { "value": "{Color.text/positive/press}" }, - "icon/notice/default": { "value": "{Color.text/notice/default}" }, - "icon/notice/hover": { "value": "{Color.text/notice/hover}" }, - "icon/notice/press": { "value": "{Color.text/notice/press}" }, - "icon/tertiary/hover": { "value": "{Color.text/tertiary/hover}" }, - "icon/tertiary/press": { "value": "{Color.text/tertiary/press}" }, - "icon/secondary/hover": { "value": "{Color.text/secondary/hover}" }, - "icon/secondary/press": { "value": "{Color.text/secondary/press}" }, - "text/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/hover": { "value": "{Colors.Dark/Neutral/80}" }, - "text/press": { "value": "{Colors.Dark/Neutral/70}" }, - "text/disable": { "value": "{Colors.Dark/Neutral/40}" }, - "text/secondary/default": { "value": "{Colors.Dark/Neutral/60}" }, - "text/secondary/hover": { "value": "{Colors.Dark/Neutral/70}" }, - "text/secondary/press": { "value": "{Colors.Dark/Neutral/80}" }, - "text/tertiary/default": { "value": "{Colors.Dark/Neutral/40}" }, - "text/tertiary/hover": { "value": "{Colors.Dark/Neutral/60}" }, - "text/tertiary/press": { "value": "{Colors.Dark/Neutral/70}" }, - "text/placeholder/default": { "value": "{Colors.Dark/Neutral/30}" }, - "text/placeholder/hover": { "value": "{Colors.Dark/Neutral/40}" }, - "text/placeholder/press": { "value": "{Colors.Dark/Neutral/50}" }, - "text/negative/default": { "value": "{Colors.Dark/Red/60}" }, - "text/negative/hover": { "value": "{Colors.Dark/Red/80}" }, - "text/negative/press": { "value": "{Colors.Dark/Red/90}" }, - "text/positive/default": { "value": "{Colors.Dark/Green/60}" }, - "text/positive/hover": { "value": "{Colors.Dark/Green/80}" }, - "text/positive/press": { "value": "{Colors.Dark/Green/90}" }, - "text/notice/default": { "value": "{Colors.Dark/Yellow/60}" }, - "text/notice/hover": { "value": "{Colors.Dark/Yellow/80}" }, - "text/notice/press": { "value": "{Colors.Dark/Yellow/90}" }, - "text/info/default": { "value": "{Colors.Dark/Blue/60}" }, - "text/info/hover": { "value": "{Colors.Dark/Blue/80}" }, - "text/info/press": { "value": "{Colors.Dark/Blue/90}" }, - "text/visited/default": { "value": "{Colors.Dark/Purple/60}" }, - "text/visited/hover": { "value": "{Colors.Dark/Purple/80}" }, - "text/visited/press": { "value": "{Colors.Dark/Purple/90}" }, - "text/on-primary/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-on-img/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-on-img/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-on-img/press": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-primary/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-primary/press": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-negative/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-negative/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-negative/press": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-positive/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-positive/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-positive/press": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-notice/default": { "value": "{Colors.Dark/Neutral/5}" }, - "text/on-notice/hover": { "value": "{Colors.Dark/Neutral/5}" }, - "text/on-notice/press": { "value": "{Colors.Dark/Neutral/5}" }, - "text/on-discovery/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-discovery/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-discovery/press": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-HUD/default": { "value": "{Colors.Light/Neutral/90}" }, - "text/on-HUD/hover": { "value": "{Colors.Light/Neutral/90}" }, - "text/on-HUD/press": { "value": "{Colors.Light/Neutral/90}" }, - "text/brand-premium/default": { "value": "{Brand color.premium}" }, - "text/brand-premium/hover": { "value": "rgba(243, 152, 21, 1)" }, - "text/brand-premium/press": { "value": "rgba(213, 133, 18, 1)" }, - "icon/default": { "value": "{Color.text/default}" }, - "icon/hover": { "value": "{Color.text/hover}" }, - "icon/press": { "value": "{Color.text/press}" }, - "icon/disable": { "value": "{Color.text/disable}" }, - "icon/on-primary/default": { "value": "{Color.text/on-primary/default}" }, - "icon/on-primary/hover": { "value": "{Color.text/on-primary/hover}" }, - "icon/on-primary/press": { "value": "{Color.text/on-primary/press}" }, - "icon/on-on-img/default": { "value": "{Color.text/on-on-img/default}" }, - "icon/on-on-img/hover": { "value": "{Color.text/on-on-img/hover}" }, - "icon/on-on-img/press": { "value": "{Color.text/on-on-img/press}" }, - "icon/on-neutral/default": { "value": "{Colors.Dark/Neutral/90}" }, - "icon/on-neutral/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "icon/on-neutral/press": { "value": "{Colors.Dark/Neutral/90}" }, - "border/default": { "value": "{Colors.Dark/Neutral/30}" }, - "border/secondary": { "value": "{Colors.Dark/NeutralA/10}" }, - "border/disable": { "value": "{Colors.Dark/NeutralA/5}" }, - "border/focus": { "value": "{Colors.Dark/Blue/20}" }, - "border/negative": { "value": "{Colors.Dark/Red/20}" }, - "icon/on-negative/default": { "value": "{Color.text/on-negative/default}" }, - "icon/on-negative/hover": { "value": "{Color.text/on-negative/hover}" }, - "icon/on-negative/press": { "value": "{Color.text/on-negative/press}" }, - "icon/on-positive/default": { "value": "{Color.text/on-positive/default}" }, - "icon/on-notice/default": { "value": "{Color.text/on-notice/default}" }, - "icon/on-notice/hover": { "value": "{Color.text/on-notice/hover}" }, - "icon/on-notice/press": { "value": "{Color.text/on-notice/press}" }, - "icon/on-positive/hover": { "value": "{Color.text/on-positive/hover}" }, - "icon/on-positive/press": { "value": "{Color.text/on-positive/press}" } - }, - "Space": { + "space": { "target/xs": { "value": "24" }, "target/s": { "value": "32" }, "target/m": { "value": "40" }, "target/l": { "value": "48" }, - "component/0": { "value": "{Space.0}" }, - "component/1": { "value": "{Space.1}" }, - "component/10": { "value": "{Space.10}" }, - "component/15": { "value": "{Space.15}" }, - "component/20": { "value": "{Space.20}" }, - "component/25": { "value": "{Space.25}" }, - "component/30": { "value": "{Space.30}" }, - "component/35": { "value": "{Space.35}" }, - "component/40": { "value": "{Space.40}" }, - "component/43": { "value": "{Space.43}" }, - "component/46": { "value": "{Space.46}" }, - "component/50": { "value": "{Space.50}" }, - "component/55": { "value": "{Space.55}" }, - "component/60": { "value": "{Space.60}" }, - "component/63": { "value": "{Space.63}" }, - "component/66": { "value": "{Space.66}" }, - "layout/0": { "value": "{Space.0}" }, - "layout/10": { "value": "{Space.10}" }, - "layout/20": { "value": "{Space.20}" }, - "layout/30": { "value": "{Space.30}" }, - "layout/40": { "value": "{Space.40}" }, - "layout/50": { "value": "{Space.50}" }, - "layout/60": { "value": "{Space.60}" }, - "layout/70": { "value": "{Space.70}" }, - "layout/80": { "value": "{Space.80}" }, - "layout/90": { "value": "{Space.90}" }, - "layout/100": { "value": "{Space.100}" } + "component/0": { "value": "{space.0}" }, + "component/1": { "value": "{space.1}" }, + "component/10": { "value": "{space.10}" }, + "component/15": { "value": "{space.15}" }, + "component/20": { "value": "{space.20}" }, + "component/25": { "value": "{space.25}" }, + "component/30": { "value": "{space.30}" }, + "component/35": { "value": "{space.35}" }, + "component/40": { "value": "{space.40}" }, + "component/43": { "value": "{space.43}" }, + "component/46": { "value": "{space.46}" }, + "component/50": { "value": "{space.50}" }, + "component/55": { "value": "{space.55}" }, + "component/60": { "value": "{space.60}" }, + "component/63": { "value": "{space.63}" }, + "component/66": { "value": "{space.66}" }, + "layout/0": { "value": "{space.0}" }, + "layout/10": { "value": "{space.10}" }, + "layout/20": { "value": "{space.20}" }, + "layout/30": { "value": "{space.30}" }, + "layout/40": { "value": "{space.40}" }, + "layout/50": { "value": "{space.50}" }, + "layout/60": { "value": "{space.60}" }, + "layout/70": { "value": "{space.70}" }, + "layout/80": { "value": "{space.80}" }, + "layout/90": { "value": "{space.90}" }, + "layout/100": { "value": "{space.100}" } + }, + "radius": { + "none": { "value": "{space.component/0}" }, + "xs": { "value": "{space.component/1}" }, + "s": { "value": "{space.component/10}" }, + "m": { "value": "{space.component/20}" }, + "l": { "value": "{space.component/25}" }, + "xl": { "value": "{space.component/30}" }, + "xxl": { "value": "{space.component/40}" }, + "oval": { "value": "999999" } + }, + "color": { + "background/default": { "value": "{color.dark/neutral/0}" }, + "background/secondary": { "value": "{color.dark/neutral/-5}" }, + "background/tertiary": { "value": "{color.dark/neutral/-10}" }, + "container/default": { "value": "{color.dark/neutral/0}" }, + "container/hover": { "value": "{color.dark/neutral/5}" }, + "container/press": { "value": "{color.dark/neutral/10}" }, + "container/default-a": { "value": "{color.dark/neutral-a/0}" }, + "container/hover-a": { "value": "{color.dark/neutral-a/5}" }, + "container/press-a": { "value": "{color.dark/neutral-a/10}" }, + "container/disable": { "value": "{color.dark/neutral/10}" }, + "container/secondary/default": { "value": "{color.dark/neutral/5}" }, + "container/tertiary/default": { "value": "{color.dark/neutral/10}" }, + "container/tertiary/hover": { "value": "{color.dark/neutral/20}" }, + "container/tertiary/press": { "value": "{color.dark/neutral/30}" }, + "container/tertiary/default-a": { "value": "{color.dark/neutral-a/10}" }, + "container/tertiary/hover-a": { "value": "{color.dark/neutral-a/20}" }, + "container/tertiary/pressA": { "value": "{color.dark/neutral-a/30}" }, + "container/primary/default": { "value": "{color.dark/blue/30}" }, + "container/primary/hover": { "value": "{color.dark/blue/40}" }, + "container/primary/press": { "value": "{color.dark/blue/50}" }, + "container/secondary/hover": { "value": "{color.dark/neutral/10}" }, + "container/secondary/press": { "value": "{color.dark/neutral/20}" }, + "container/secondary/default-a": { "value": "{color.dark/neutral-a/5}" }, + "container/secondary/hover-a": { "value": "{color.dark/neutral-a/10}" }, + "container/secondary/press-a": { "value": "{color.dark/neutral-a/20}" }, + "container/on-img/default": { "value": "{color.light/neutral-a/40}" }, + "container/on-img/hover": { "value": "{color.light/neutral-a/50}" }, + "container/on-img/press": { "value": "{color.light/neutral-a/60}" }, + "container/negative/default": { "value": "{color.dark/red/30}" }, + "container/negative/hover": { "value": "{color.dark/red/40}" }, + "container/negative/press": { "value": "{color.dark/red/50}" }, + "container/positive/default": { "value": "{color.dark/green/30}" }, + "container/positive/hover": { "value": "{color.dark/green/40}" }, + "container/positive/press": { "value": "{color.dark/green/50}" }, + "container/notice/default": { "value": "{color.dark/yellow/70}" }, + "container/notice/hover": { "value": "{color.dark/yellow/80}" }, + "container/notice/press": { "value": "{color.dark/yellow/90}" }, + "container/neutral/default": { "value": "{color.dark/neutral/30}" }, + "container/discovery/default": { "value": "{color.dark/red/30}" }, + "container/discovery/hover": { "value": "{color.dark/red/40}" }, + "container/discovery/press": { "value": "{color.dark/red/50}" }, + "container/neutral/hover": { "value": "{color.dark/neutral/40}" }, + "container/neutral/press": { "value": "{color.dark/neutral/50}" }, + "container/hud/default": { "value": "{color.light/neutral/10}" }, + "container/hud/hover": { "value": "{color.light/neutral/20}" }, + "container/hud/press": { "value": "{color.light/neutral/20}" }, + "container/skeleton": { "value": "{color.dark/neutral-a/5}" }, + "container/subtle": { "value": "rgba(228, 228, 228, 0.02)" }, + "icon/secondary/default": { "value": "{color.text/secondary/default}" }, + "icon/tertiary/default": { "value": "{color.text/tertiary/default}" }, + "icon/negative/default": { "value": "{color.text/negative/default}" }, + "icon/negative/hover": { "value": "{color.text/negative/hover}" }, + "icon/negative/press": { "value": "{color.text/negative/press}" }, + "icon/positive/default": { "value": "{color.text/positive/default}" }, + "icon/positive/hover": { "value": "{color.text/positive/hover}" }, + "icon/positive/press": { "value": "{color.text/positive/press}" }, + "icon/notice/default": { "value": "{color.text/notice/default}" }, + "icon/notice/hover": { "value": "{color.text/notice/hover}" }, + "icon/notice/press": { "value": "{color.text/notice/press}" }, + "icon/tertiary/hover": { "value": "{color.text/tertiary/hover}" }, + "icon/tertiary/press": { "value": "{color.text/tertiary/press}" }, + "icon/secondary/hover": { "value": "{color.text/secondary/hover}" }, + "icon/secondary/press": { "value": "{color.text/secondary/press}" }, + "text/default": { "value": "{color.dark/neutral/90}" }, + "text/hover": { "value": "{color.dark/neutral/80}" }, + "text/press": { "value": "{color.dark/neutral/70}" }, + "text/disable": { "value": "{color.dark/neutral/40}" }, + "text/secondary/default": { "value": "{color.dark/neutral/60}" }, + "text/secondary/hover": { "value": "{color.dark/neutral/70}" }, + "text/secondary/press": { "value": "{color.dark/neutral/80}" }, + "text/tertiary/default": { "value": "{color.dark/neutral/40}" }, + "text/tertiary/hover": { "value": "{color.dark/neutral/60}" }, + "text/tertiary/press": { "value": "{color.dark/neutral/70}" }, + "text/placeholder/default": { "value": "{color.dark/neutral/30}" }, + "text/placeholder/hover": { "value": "{color.dark/neutral/40}" }, + "text/placeholder/press": { "value": "{color.dark/neutral/50}" }, + "text/info/default": { "value": "{color.dark/blue/60}" }, + "text/info/hover": { "value": "{color.dark/blue/80}" }, + "text/info/press": { "value": "{color.dark/blue/90}" }, + "text/visited/default": { "value": "{color.dark/purple/60}" }, + "text/visited/hover": { "value": "{color.dark/purple/80}" }, + "text/visited/press": { "value": "{color.dark/purple/90}" }, + "text/negative/default": { "value": "{color.dark/red/60}" }, + "text/negative/hover": { "value": "{color.dark/red/80}" }, + "text/negative/press": { "value": "{color.dark/red/90}" }, + "text/notice/default": { "value": "{color.dark/yellow/60}" }, + "text/notice/hover": { "value": "{color.dark/yellow/80}" }, + "text/notice/press": { "value": "{color.dark/yellow/90}" }, + "text/positive/default": { "value": "{color.dark/green/60}" }, + "text/positive/hover": { "value": "{color.dark/green/80}" }, + "text/positive/press": { "value": "{color.dark/green/90}" }, + "text/on-primary/default": { "value": "{color.dark/neutral/90}" }, + "text/on-on-img/default": { "value": "{color.dark/neutral/90}" }, + "text/on-on-img/hover": { "value": "{color.dark/neutral/90}" }, + "text/on-on-img/press": { "value": "{color.dark/neutral/90}" }, + "text/on-primary/hover": { "value": "{color.dark/neutral/90}" }, + "text/on-primary/press": { "value": "{color.dark/neutral/90}" }, + "text/on-negative/default": { "value": "{color.dark/neutral/90}" }, + "text/on-negative/hover": { "value": "{color.dark/neutral/90}" }, + "text/on-negative/press": { "value": "{color.dark/neutral/90}" }, + "text/on-positive/default": { "value": "{color.dark/neutral/90}" }, + "text/on-positive/hover": { "value": "{color.dark/neutral/90}" }, + "text/on-positive/press": { "value": "{color.dark/neutral/90}" }, + "text/on-notice/default": { "value": "{color.dark/neutral/5}" }, + "text/on-notice/hover": { "value": "{color.dark/neutral/5}" }, + "text/on-notice/press": { "value": "{color.dark/neutral/5}" }, + "text/on-discovery/default": { "value": "{color.dark/neutral/90}" }, + "text/on-discovery/hover": { "value": "{color.dark/neutral/90}" }, + "text/on-discovery/press": { "value": "{color.dark/neutral/90}" }, + "text/on-hud/default": { "value": "{color.light/neutral/90}" }, + "text/on-hud/hover": { "value": "{color.light/neutral/90}" }, + "text/on-hud/press": { "value": "{color.light/neutral/90}" }, + "text/brand-premium/default": { "value": "{brand-color.premium}" }, + "text/brand-premium/hover": { "value": "rgba(243, 152, 21, 1)" }, + "text/brand-premium/press": { "value": "rgba(213, 133, 18, 1)" }, + "icon/default": { "value": "{color.text/default}" }, + "icon/hover": { "value": "{color.text/hover}" }, + "icon/press": { "value": "{color.text/press}" }, + "icon/disable": { "value": "{color.text/disable}" }, + "icon/on-primary/default": { "value": "{color.text/on-primary/default}" }, + "icon/on-primary/hover": { "value": "{color.text/on-primary/hover}" }, + "icon/on-primary/press": { "value": "{color.text/on-primary/press}" }, + "icon/on-on-img/default": { "value": "{color.text/on-on-img/default}" }, + "icon/on-on-img/hover": { "value": "{color.text/on-on-img/hover}" }, + "icon/on-on-img/press": { "value": "{color.text/on-on-img/press}" }, + "icon/on-neutral/default": { "value": "{color.dark/neutral/90}" }, + "icon/on-neutral/hover": { "value": "{color.dark/neutral/90}" }, + "icon/on-neutral/press": { "value": "{color.dark/neutral/90}" }, + "border/default": { "value": "{color.dark/neutral/30}" }, + "border/secondary": { "value": "{color.dark/neutral-a/10}" }, + "border/focus/1": { "value": "{color.dark/blue/60}" }, + "border/disable": { "value": "{color.dark/neutral-a/5}" }, + "border/focus/2": { "value": "{color.dark/blue/20}" }, + "border/negative": { "value": "{color.dark/red/20}" }, + "icon/on-negative/default": { "value": "{color.text/on-negative/default}" }, + "icon/on-negative/hover": { "value": "{color.text/on-negative/hover}" }, + "icon/on-negative/press": { "value": "{color.text/on-negative/press}" }, + "icon/on-positive/default": { "value": "{color.text/on-positive/default}" }, + "icon/on-notice/default": { "value": "{color.text/on-notice/default}" }, + "icon/on-notice/hover": { "value": "{color.text/on-notice/hover}" }, + "icon/on-notice/press": { "value": "{color.text/on-notice/press}" }, + "icon/on-positive/hover": { "value": "{color.text/on-positive/hover}" }, + "icon/on-positive/press": { "value": "{color.text/on-positive/press}" } } } diff --git a/packages/theme/src/json/pixiv-light.json b/packages/theme/src/json/pixiv-light.json index df2d6bfd..ed6f84b9 100644 --- a/packages/theme/src/json/pixiv-light.json +++ b/packages/theme/src/json/pixiv-light.json @@ -1,176 +1,190 @@ { - "Color": { - "background/default": { "value": "{Colors.Light/Neutral/0}" }, - "background/secondary": { "value": "{Colors.Light/Neutral/5}" }, - "background/tertiary": { "value": "{Colors.Light/Neutral/10}" }, - "container/default": { "value": "{Colors.Light/Neutral/0}" }, - "container/hover": { "value": "{Colors.Light/Neutral/5}" }, - "container/press": { "value": "{Colors.Light/Neutral/10}" }, - "container/disable": { "value": "{Colors.Light/Neutral/10}" }, - "container/secondary/default": { "value": "{Colors.Light/Neutral/5}" }, - "container/tertiary/default": { "value": "{Colors.Light/Neutral/10}" }, - "container/tertiary/hover": { "value": "{Colors.Light/Neutral/20}" }, - "container/tertiary/press": { "value": "{Colors.Light/Neutral/30}" }, - "container/tertiary/defaultA": { "value": "{Colors.Light/NeutralA/10}" }, - "container/tertiary/hoverA": { "value": "{Colors.Light/NeutralA/20}" }, - "container/tertiary/pressA": { "value": "{Colors.Light/NeutralA/30}" }, - "container/primary/default": { "value": "{Colors.Light/Blue/50}" }, - "container/primary/hover": { "value": "{Colors.Light/Blue/60}" }, - "container/primary/press": { "value": "{Colors.Light/Blue/70}" }, - "container/secondary/hover": { "value": "{Colors.Light/Neutral/10}" }, - "container/secondary/press": { "value": "{Colors.Light/Neutral/20}" }, - "container/secondary/defaultA": { "value": "{Colors.Light/NeutralA/5}" }, - "container/secondary/hoverA": { "value": "{Colors.Light/NeutralA/10}" }, - "container/secondary/pressA": { "value": "{Colors.Light/NeutralA/20}" }, - "container/on-img/default": { "value": "{Colors.Light/NeutralA/40}" }, - "container/on-img/hover": { "value": "{Colors.Light/NeutralA/50}" }, - "container/on-img/press": { "value": "{Colors.Light/NeutralA/60}" }, - "container/negative/default": { "value": "{Colors.Light/Red/50}" }, - "container/negative/hover": { "value": "{Colors.Light/Red/60}" }, - "container/negative/press": { "value": "{Colors.Light/Red/70}" }, - "container/positive/default": { "value": "{Colors.Light/Green/50}" }, - "container/positive/hover": { "value": "{Colors.Light/Green/60}" }, - "container/positive/press": { "value": "{Colors.Light/Green/70}" }, - "container/notice/default": { "value": "{Colors.Light/Yellow/20}" }, - "container/notice/hover": { "value": "{Colors.Light/Yellow/30}" }, - "container/notice/press": { "value": "{Colors.Light/Yellow/40}" }, - "container/neutral/default": { "value": "{Colors.Light/Neutral/50}" }, - "container/discovery/default": { "value": "{Colors.Light/Red/50}" }, - "container/discovery/hover": { "value": "{Colors.Light/Red/60}" }, - "container/discovery/press": { "value": "{Colors.Light/Red/70}" }, - "container/neutral/hover": { "value": "{Colors.Light/Neutral/60}" }, - "container/neutral/press": { "value": "{Colors.Light/Neutral/70}" }, - "container/HUD/default": { "value": "{Colors.Light/Neutral/80}" }, - "container/HUD/hover": { "value": "{Colors.Light/Neutral/70}" }, - "container/HUD/press": { "value": "{Colors.Light/Neutral/60}" }, - "container/skeleton": { "value": "{Colors.Light/NeutralA/5}" }, - "container/subtle": { "value": "rgba(31, 31, 31, 0.02)" }, - "icon/secondary/default": { "value": "{Color.text/secondary/default}" }, - "icon/tertiary/default": { "value": "{Color.text/tertiary/default}" }, - "icon/negative/default": { "value": "{Color.text/negative/default}" }, - "icon/negative/hover": { "value": "{Color.text/negative/hover}" }, - "icon/negative/press": { "value": "{Color.text/negative/press}" }, - "icon/positive/default": { "value": "{Color.text/positive/default}" }, - "icon/positive/hover": { "value": "{Color.text/positive/hover}" }, - "icon/positive/press": { "value": "{Color.text/positive/hover}" }, - "icon/notice/default": { "value": "{Color.text/notice/default}" }, - "icon/notice/hover": { "value": "{Color.text/notice/hover}" }, - "icon/notice/press": { "value": "{Color.text/notice/press}" }, - "icon/tertiary/hover": { "value": "{Color.text/tertiary/hover}" }, - "icon/tertiary/press": { "value": "{Color.text/tertiary/press}" }, - "icon/secondary/hover": { "value": "{Color.text/secondary/hover}" }, - "icon/secondary/press": { "value": "{Color.text/secondary/press}" }, - "text/default": { "value": "{Colors.Light/Neutral/90}" }, - "text/hover": { "value": "{Colors.Light/Neutral/80}" }, - "text/press": { "value": "{Colors.Light/Neutral/70}" }, - "text/disable": { "value": "{Colors.Light/Neutral/30}" }, - "text/secondary/default": { "value": "{Colors.Light/Neutral/70}" }, - "text/secondary/hover": { "value": "{Colors.Light/Neutral/80}" }, - "text/secondary/press": { "value": "{Colors.Light/Neutral/90}" }, - "text/tertiary/default": { "value": "{Colors.Light/Neutral/60}" }, - "text/tertiary/hover": { "value": "{Colors.Light/Neutral/70}" }, - "text/tertiary/press": { "value": "{Colors.Light/Neutral/80}" }, - "text/placeholder/default": { "value": "{Colors.Light/Neutral/50}" }, - "text/placeholder/hover": { "value": "{Colors.Light/Neutral/60}" }, - "text/placeholder/press": { "value": "{Colors.Light/Neutral/70}" }, - "text/negative/default": { "value": "{Colors.Light/Red/60}" }, - "text/negative/hover": { "value": "{Colors.Light/Red/70}" }, - "text/negative/press": { "value": "{Colors.Light/Red/80}" }, - "text/positive/default": { "value": "{Colors.Light/Green/60}" }, - "text/positive/hover": { "value": "{Colors.Light/Green/70}" }, - "text/positive/press": { "value": "{Colors.Light/Green/80}" }, - "text/notice/default": { "value": "{Colors.Light/Yellow/60}" }, - "text/notice/hover": { "value": "{Colors.Light/Yellow/70}" }, - "text/notice/press": { "value": "{Colors.Light/Yellow/80}" }, - "text/info/default": { "value": "{Colors.Light/Blue/60}" }, - "text/info/hover": { "value": "{Colors.Light/Blue/70}" }, - "text/info/press": { "value": "{Colors.Light/Blue/80}" }, - "text/visited/default": { "value": "{Colors.Light/Purple/70}" }, - "text/visited/hover": { "value": "{Colors.Light/Purple/80}" }, - "text/visited/press": { "value": "{Colors.Light/Purple/90}" }, - "text/on-primary/default": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-on-img/default": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-on-img/hover": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-on-img/press": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-primary/hover": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-primary/press": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-negative/default": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-negative/hover": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-negative/press": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-positive/default": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-positive/hover": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-positive/press": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-notice/default": { "value": "{Colors.Light/Neutral/90}" }, - "text/on-notice/hover": { "value": "{Colors.Light/Neutral/90}" }, - "text/on-notice/press": { "value": "{Colors.Light/Neutral/90}" }, - "text/on-discovery/default": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-discovery/hover": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-discovery/press": { "value": "{Colors.Light/Neutral/0}" }, - "text/on-HUD/default": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-HUD/hover": { "value": "{Colors.Dark/Neutral/90}" }, - "text/on-HUD/press": { "value": "{Colors.Dark/Neutral/90}" }, - "text/brand-premium/default": { "value": "{Brand color.premium}" }, - "text/brand-premium/hover": { "value": "rgba(243, 152, 21, 1)" }, - "text/brand-premium/press": { "value": "rgba(213, 133, 18, 1)" }, - "icon/default": { "value": "{Color.text/default}" }, - "icon/hover": { "value": "{Color.text/hover}" }, - "icon/press": { "value": "{Color.text/press}" }, - "icon/disable": { "value": "{Color.text/disable}" }, - "icon/on-primary/default": { "value": "{Color.text/on-primary/default}" }, - "icon/on-primary/hover": { "value": "{Color.text/on-primary/hover}" }, - "icon/on-primary/press": { "value": "{Color.text/on-primary/press}" }, - "icon/on-on-img/default": { "value": "{Color.text/on-on-img/default}" }, - "icon/on-on-img/hover": { "value": "{Color.text/on-on-img/hover}" }, - "icon/on-on-img/press": { "value": "{Color.text/on-on-img/press}" }, - "icon/on-neutral/default": { "value": "{Colors.Light/Neutral/0}" }, - "icon/on-neutral/hover": { "value": "{Colors.Light/Neutral/5}" }, - "icon/on-neutral/press": { "value": "{Colors.Light/Neutral/10}" }, - "border/default": { "value": "{Colors.Light/NeutralA/50}" }, - "border/secondary": { "value": "{Colors.Light/NeutralA/10}" }, - "border/disable": { "value": "{Colors.Light/NeutralA/10}" }, - "border/focus": { "value": "{Colors.Light/Blue/20}" }, - "border/negative": { "value": "{Colors.Light/Red/20}" }, - "icon/on-negative/default": { "value": "{Color.text/on-negative/default}" }, - "icon/on-negative/hover": { "value": "{Color.text/on-negative/hover}" }, - "icon/on-negative/press": { "value": "{Color.text/on-negative/press}" }, - "icon/on-positive/default": { "value": "{Color.text/on-positive/default}" }, - "icon/on-notice/default": { "value": "{Color.text/on-notice/default}" }, - "icon/on-notice/hover": { "value": "{Color.text/on-notice/hover}" }, - "icon/on-notice/press": { "value": "{Color.text/on-notice/press}" }, - "icon/on-positive/hover": { "value": "{Color.text/on-positive/hover}" }, - "icon/on-positive/press": { "value": "{Color.text/on-positive/press}" } - }, - "Space": { + "space": { "target/xs": { "value": "24" }, "target/s": { "value": "32" }, "target/m": { "value": "40" }, "target/l": { "value": "48" }, - "component/0": { "value": "{Space.0}" }, - "component/1": { "value": "{Space.1}" }, - "component/10": { "value": "{Space.10}" }, - "component/15": { "value": "{Space.15}" }, - "component/20": { "value": "{Space.20}" }, - "component/25": { "value": "{Space.25}" }, - "component/30": { "value": "{Space.30}" }, - "component/35": { "value": "{Space.35}" }, - "component/40": { "value": "{Space.40}" }, - "component/43": { "value": "{Space.43}" }, - "component/46": { "value": "{Space.46}" }, - "component/50": { "value": "{Space.50}" }, - "component/55": { "value": "{Space.55}" }, - "component/60": { "value": "{Space.60}" }, - "component/63": { "value": "{Space.63}" }, - "component/66": { "value": "{Space.66}" }, - "layout/0": { "value": "{Space.0}" }, - "layout/10": { "value": "{Space.10}" }, - "layout/20": { "value": "{Space.20}" }, - "layout/30": { "value": "{Space.30}" }, - "layout/40": { "value": "{Space.40}" }, - "layout/50": { "value": "{Space.50}" }, - "layout/60": { "value": "{Space.60}" }, - "layout/70": { "value": "{Space.70}" }, - "layout/80": { "value": "{Space.80}" }, - "layout/90": { "value": "{Space.90}" }, - "layout/100": { "value": "{Space.100}" } + "component/0": { "value": "{space.0}" }, + "component/1": { "value": "{space.1}" }, + "component/10": { "value": "{space.10}" }, + "component/15": { "value": "{space.15}" }, + "component/20": { "value": "{space.20}" }, + "component/25": { "value": "{space.25}" }, + "component/30": { "value": "{space.30}" }, + "component/35": { "value": "{space.35}" }, + "component/40": { "value": "{space.40}" }, + "component/43": { "value": "{space.43}" }, + "component/46": { "value": "{space.46}" }, + "component/50": { "value": "{space.50}" }, + "component/55": { "value": "{space.55}" }, + "component/60": { "value": "{space.60}" }, + "component/63": { "value": "{space.63}" }, + "component/66": { "value": "{space.66}" }, + "layout/0": { "value": "{space.0}" }, + "layout/10": { "value": "{space.10}" }, + "layout/20": { "value": "{space.20}" }, + "layout/30": { "value": "{space.30}" }, + "layout/40": { "value": "{space.40}" }, + "layout/50": { "value": "{space.50}" }, + "layout/60": { "value": "{space.60}" }, + "layout/70": { "value": "{space.70}" }, + "layout/80": { "value": "{space.80}" }, + "layout/90": { "value": "{space.90}" }, + "layout/100": { "value": "{space.100}" } + }, + "radius": { + "none": { "value": "{space.component/0}" }, + "xs": { "value": "{space.component/1}" }, + "s": { "value": "{space.component/10}" }, + "m": { "value": "{space.component/20}" }, + "l": { "value": "{space.component/25}" }, + "xl": { "value": "{space.component/30}" }, + "xxl": { "value": "{space.component/40}" }, + "oval": { "value": "999999" } + }, + "color": { + "background/default": { "value": "{color.light/neutral/0}" }, + "background/secondary": { "value": "{color.light/neutral/5}" }, + "background/tertiary": { "value": "{color.light/neutral/10}" }, + "container/default": { "value": "{color.light/neutral/0}" }, + "container/hover": { "value": "{color.light/neutral/5}" }, + "container/press": { "value": "{color.light/neutral/10}" }, + "container/default-a": { "value": "{color.light/neutral-a/0}" }, + "container/hover-a": { "value": "{color.light/neutral-a/5}" }, + "container/press-a": { "value": "{color.light/neutral-a/10}" }, + "container/disable": { "value": "{color.light/neutral/10}" }, + "container/secondary/default": { "value": "{color.light/neutral/5}" }, + "container/tertiary/default": { "value": "{color.light/neutral/10}" }, + "container/tertiary/hover": { "value": "{color.light/neutral/20}" }, + "container/tertiary/press": { "value": "{color.light/neutral/30}" }, + "container/tertiary/default-a": { "value": "{color.light/neutral-a/10}" }, + "container/tertiary/hover-a": { "value": "{color.light/neutral-a/20}" }, + "container/tertiary/pressA": { "value": "{color.light/neutral-a/30}" }, + "container/primary/default": { "value": "{color.light/blue/50}" }, + "container/primary/hover": { "value": "{color.light/blue/60}" }, + "container/primary/press": { "value": "{color.light/blue/70}" }, + "container/secondary/hover": { "value": "{color.light/neutral/10}" }, + "container/secondary/press": { "value": "{color.light/neutral/20}" }, + "container/secondary/default-a": { "value": "{color.light/neutral-a/5}" }, + "container/secondary/hover-a": { "value": "{color.light/neutral-a/10}" }, + "container/secondary/press-a": { "value": "{color.light/neutral-a/20}" }, + "container/on-img/default": { "value": "{color.light/neutral-a/40}" }, + "container/on-img/hover": { "value": "{color.light/neutral-a/50}" }, + "container/on-img/press": { "value": "{color.light/neutral-a/60}" }, + "container/negative/default": { "value": "{color.light/red/50}" }, + "container/negative/hover": { "value": "{color.light/red/60}" }, + "container/negative/press": { "value": "{color.light/red/70}" }, + "container/positive/default": { "value": "{color.light/green/50}" }, + "container/positive/hover": { "value": "{color.light/green/60}" }, + "container/positive/press": { "value": "{color.light/green/70}" }, + "container/notice/default": { "value": "{color.light/yellow/20}" }, + "container/notice/hover": { "value": "{color.light/yellow/30}" }, + "container/notice/press": { "value": "{color.light/yellow/40}" }, + "container/neutral/default": { "value": "{color.light/neutral/50}" }, + "container/discovery/default": { "value": "{color.light/red/50}" }, + "container/discovery/hover": { "value": "{color.light/red/60}" }, + "container/discovery/press": { "value": "{color.light/red/70}" }, + "container/neutral/hover": { "value": "{color.light/neutral/60}" }, + "container/neutral/press": { "value": "{color.light/neutral/70}" }, + "container/hud/default": { "value": "{color.light/neutral/80}" }, + "container/hud/hover": { "value": "{color.light/neutral/70}" }, + "container/hud/press": { "value": "{color.light/neutral/60}" }, + "container/skeleton": { "value": "{color.light/neutral-a/5}" }, + "container/subtle": { "value": "rgba(31, 31, 31, 0.02)" }, + "icon/secondary/default": { "value": "{color.text/secondary/default}" }, + "icon/tertiary/default": { "value": "{color.text/tertiary/default}" }, + "icon/negative/default": { "value": "{color.text/negative/default}" }, + "icon/negative/hover": { "value": "{color.text/negative/hover}" }, + "icon/negative/press": { "value": "{color.text/negative/press}" }, + "icon/positive/default": { "value": "{color.text/positive/default}" }, + "icon/positive/hover": { "value": "{color.text/positive/hover}" }, + "icon/positive/press": { "value": "{color.text/positive/hover}" }, + "icon/notice/default": { "value": "{color.text/notice/default}" }, + "icon/notice/hover": { "value": "{color.text/notice/hover}" }, + "icon/notice/press": { "value": "{color.text/notice/press}" }, + "icon/tertiary/hover": { "value": "{color.text/tertiary/hover}" }, + "icon/tertiary/press": { "value": "{color.text/tertiary/press}" }, + "icon/secondary/hover": { "value": "{color.text/secondary/hover}" }, + "icon/secondary/press": { "value": "{color.text/secondary/press}" }, + "text/default": { "value": "{color.light/neutral/90}" }, + "text/hover": { "value": "{color.light/neutral/80}" }, + "text/press": { "value": "{color.light/neutral/70}" }, + "text/disable": { "value": "{color.light/neutral/30}" }, + "text/secondary/default": { "value": "{color.light/neutral/70}" }, + "text/secondary/hover": { "value": "{color.light/neutral/80}" }, + "text/secondary/press": { "value": "{color.light/neutral/90}" }, + "text/tertiary/default": { "value": "{color.light/neutral/60}" }, + "text/tertiary/hover": { "value": "{color.light/neutral/70}" }, + "text/tertiary/press": { "value": "{color.light/neutral/80}" }, + "text/placeholder/default": { "value": "{color.light/neutral/50}" }, + "text/placeholder/hover": { "value": "{color.light/neutral/60}" }, + "text/placeholder/press": { "value": "{color.light/neutral/70}" }, + "text/info/default": { "value": "{color.light/blue/60}" }, + "text/info/hover": { "value": "{color.light/blue/70}" }, + "text/info/press": { "value": "{color.light/blue/80}" }, + "text/visited/default": { "value": "{color.light/purple/70}" }, + "text/visited/hover": { "value": "{color.light/purple/80}" }, + "text/visited/press": { "value": "{color.light/purple/90}" }, + "text/negative/default": { "value": "{color.light/red/60}" }, + "text/negative/hover": { "value": "{color.light/red/70}" }, + "text/negative/press": { "value": "{color.light/red/80}" }, + "text/notice/default": { "value": "{color.light/yellow/60}" }, + "text/notice/hover": { "value": "{color.light/yellow/70}" }, + "text/notice/press": { "value": "{color.light/yellow/80}" }, + "text/positive/default": { "value": "{color.light/green/60}" }, + "text/positive/hover": { "value": "{color.light/green/70}" }, + "text/positive/press": { "value": "{color.light/green/80}" }, + "text/on-primary/default": { "value": "{color.light/neutral/0}" }, + "text/on-on-img/default": { "value": "{color.light/neutral/0}" }, + "text/on-on-img/hover": { "value": "{color.light/neutral/0}" }, + "text/on-on-img/press": { "value": "{color.light/neutral/0}" }, + "text/on-primary/hover": { "value": "{color.light/neutral/0}" }, + "text/on-primary/press": { "value": "{color.light/neutral/0}" }, + "text/on-negative/default": { "value": "{color.light/neutral/0}" }, + "text/on-negative/hover": { "value": "{color.light/neutral/0}" }, + "text/on-negative/press": { "value": "{color.light/neutral/0}" }, + "text/on-positive/default": { "value": "{color.light/neutral/0}" }, + "text/on-positive/hover": { "value": "{color.light/neutral/0}" }, + "text/on-positive/press": { "value": "{color.light/neutral/0}" }, + "text/on-notice/default": { "value": "{color.light/neutral/90}" }, + "text/on-notice/hover": { "value": "{color.light/neutral/90}" }, + "text/on-notice/press": { "value": "{color.light/neutral/90}" }, + "text/on-discovery/default": { "value": "{color.light/neutral/0}" }, + "text/on-discovery/hover": { "value": "{color.light/neutral/0}" }, + "text/on-discovery/press": { "value": "{color.light/neutral/0}" }, + "text/on-hud/default": { "value": "{color.dark/neutral/90}" }, + "text/on-hud/hover": { "value": "{color.dark/neutral/90}" }, + "text/on-hud/press": { "value": "{color.dark/neutral/90}" }, + "text/brand-premium/default": { "value": "{brand-color.premium}" }, + "text/brand-premium/hover": { "value": "rgba(243, 152, 21, 1)" }, + "text/brand-premium/press": { "value": "rgba(213, 133, 18, 1)" }, + "icon/default": { "value": "{color.text/default}" }, + "icon/hover": { "value": "{color.text/hover}" }, + "icon/press": { "value": "{color.text/press}" }, + "icon/disable": { "value": "{color.text/disable}" }, + "icon/on-primary/default": { "value": "{color.text/on-primary/default}" }, + "icon/on-primary/hover": { "value": "{color.text/on-primary/hover}" }, + "icon/on-primary/press": { "value": "{color.text/on-primary/press}" }, + "icon/on-on-img/default": { "value": "{color.text/on-on-img/default}" }, + "icon/on-on-img/hover": { "value": "{color.text/on-on-img/hover}" }, + "icon/on-on-img/press": { "value": "{color.text/on-on-img/press}" }, + "icon/on-neutral/default": { "value": "{color.light/neutral/0}" }, + "icon/on-neutral/hover": { "value": "{color.light/neutral/5}" }, + "icon/on-neutral/press": { "value": "{color.light/neutral/10}" }, + "border/default": { "value": "{color.light/neutral-a/50}" }, + "border/secondary": { "value": "{color.light/neutral-a/10}" }, + "border/focus/1": { "value": "{color.light/blue/60}" }, + "border/disable": { "value": "{color.light/neutral-a/10}" }, + "border/focus/2": { "value": "{color.light/blue/20}" }, + "border/negative": { "value": "{color.light/red/20}" }, + "icon/on-negative/default": { "value": "{color.text/on-negative/default}" }, + "icon/on-negative/hover": { "value": "{color.text/on-negative/hover}" }, + "icon/on-negative/press": { "value": "{color.text/on-negative/press}" }, + "icon/on-positive/default": { "value": "{color.text/on-positive/default}" }, + "icon/on-notice/default": { "value": "{color.text/on-notice/default}" }, + "icon/on-notice/hover": { "value": "{color.text/on-notice/hover}" }, + "icon/on-notice/press": { "value": "{color.text/on-notice/press}" }, + "icon/on-positive/hover": { "value": "{color.text/on-positive/hover}" }, + "icon/on-positive/press": { "value": "{color.text/on-positive/press}" } } }