From a2585c06fb5f00733c74aa6cb15954ea1303ecee Mon Sep 17 00:00:00 2001 From: mimo Date: Thu, 11 Jul 2024 17:21:51 +0900 Subject: [PATCH 001/102] fix(token-cli): prefix, selector, actions --- .github/workflows/tokens.yml | 13 +- .prettierignore | 1 - packages/theme/src/json/base.json | 328 +++++++++++++++++- packages/theme/src/json/pixiv-dark.json | 182 +++++++++- packages/theme/src/json/pixiv-light.json | 176 +++++++++- packages/token-cli/pixiv-dark.config.js | 17 +- packages/token-cli/pixiv-light.config.js | 18 +- packages/token-cli/src/transformer/index.js | 8 +- .../token-cli/src/transformer/index.test.js | 20 +- 9 files changed, 728 insertions(+), 35 deletions(-) diff --git a/.github/workflows/tokens.yml b/.github/workflows/tokens.yml index 241a2bc71..b99f65951 100644 --- a/.github/workflows/tokens.yml +++ b/.github/workflows/tokens.yml @@ -10,7 +10,10 @@ jobs: run: working-directory: packages/token-cli steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 + with: + ref: ${{ github.base_ref }} + - uses: actions/setup-node@v3 with: node-version-file: '.node-version' @@ -50,9 +53,15 @@ jobs: - name: Copy to theme package run: | + rm -rf ../theme/src/json + rm -rf ../theme/src/css cp -r ./tokens ../theme/src/json cp -r ./build/css ../theme/src/css + - name: Run prettier + working-directory: ./ + run: yarn fmt:prettier + - name: Generate github token id: generate_token uses: tibdex/github-app-token@v1 @@ -66,7 +75,7 @@ jobs: GITHUB_ACCESS_TOKEN: ${{ steps.generate_token.outputs.token }} GITHUB_REPO_OWNER: pixiv GITHUB_REPO_NAME: charcoal - GITHUB_DEFAULT_BRANCH: main + GITHUB_DEFAULT_BRANCH: ${{ github.ref_name }} TARGET_DIR: packages/theme run: yarn pullrequest-cli github:pr -c theme -t 'Update theme' diff --git a/.prettierignore b/.prettierignore index aa0aee3da..2f239363f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -15,5 +15,4 @@ LICENSE /packages/token-cli/build/ /packages/token-cli/tokens/ /packages/token-cli/out/ -/packages/theme/src/json/ /packages/theme/src/css/ \ No newline at end of file diff --git a/packages/theme/src/json/base.json b/packages/theme/src/json/base.json index 3ee7394b7..36e77424e 100644 --- a/packages/theme/src/json/base.json +++ b/packages/theme/src/json/base.json @@ -1 +1,327 @@ -{"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)"}},"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)"}},"Spacings":{"space/0":{"value":"0"},"space/1":{"value":"2"},"space/10":{"value":"4"},"space/15":{"value":"6"},"space/20":{"value":"8"},"space/25":{"value":"12"},"space/30":{"value":"16"},"space/35":{"value":"20"},"space/40":{"value":"24"},"space/43":{"value":"28"},"space/46":{"value":"32"},"space/50":{"value":"40"},"space/55":{"value":"48"},"space/60":{"value":"64"},"space/63":{"value":"80"},"space/66":{"value":"96"},"space/70":{"value":"104"},"space/80":{"value":"168"},"space/90":{"value":"272"},"space/100":{"value":"440"},"space/999":{"value":"999999"}},"Text":{"font-size/0":{"value":"11"},"font-size/1":{"value":"12"},"font-size/5":{"value":"14"},"font-size/10":{"value":"16"},"font-size/20":{"value":"18"},"font-size/30":{"value":"20"},"font-size/40":{"value":"22"},"font-size/50":{"value":"25"},"font-size/60":{"value":"28"},"font-size/70":{"value":"32"},"font-size/80":{"value":"36"},"font-size/90":{"value":"40"},"font-size/100":{"value":"45"},"font-size/110":{"value":"50"},"font-size/120":{"value":"60"},"line-height/0":{"value":"16"},"font-weight/40":{"value":"400"},"font-weight/70":{"value":"700"},"line-height/1":{"value":"18"},"line-height/5":{"value":"20"},"line-height/10":{"value":"24"},"line-height/20":{"value":"28"},"line-height/30":{"value":"32"},"line-height/40":{"value":"36"},"line-height/50":{"value":"40"},"line-height/60":{"value":"44"},"line-height/70":{"value":"52"},"line-height/80":{"value":"56"},"line-height/90":{"value":"64"},"line-height/100":{"value":"72"},"font-family/sans":{"value":"Sarasa UI J"}}} \ No newline at end of file +{ + "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)" } + }, + "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)" } + }, + "Spacings": { + "space/0": { "value": "0" }, + "space/1": { "value": "2" }, + "space/10": { "value": "4" }, + "space/15": { "value": "6" }, + "space/20": { "value": "8" }, + "space/25": { "value": "12" }, + "space/30": { "value": "16" }, + "space/35": { "value": "20" }, + "space/40": { "value": "24" }, + "space/43": { "value": "28" }, + "space/46": { "value": "32" }, + "space/50": { "value": "40" }, + "space/55": { "value": "48" }, + "space/60": { "value": "64" }, + "space/63": { "value": "80" }, + "space/66": { "value": "96" }, + "space/70": { "value": "104" }, + "space/80": { "value": "168" }, + "space/90": { "value": "272" }, + "space/100": { "value": "440" }, + "space/999": { "value": "999999" } + }, + "Text": { + "font-size/0": { "value": "11" }, + "font-size/1": { "value": "12" }, + "font-size/5": { "value": "14" }, + "font-size/10": { "value": "16" }, + "font-size/20": { "value": "18" }, + "font-size/30": { "value": "20" }, + "font-size/40": { "value": "22" }, + "font-size/50": { "value": "25" }, + "font-size/60": { "value": "28" }, + "font-size/70": { "value": "32" }, + "font-size/80": { "value": "36" }, + "font-size/90": { "value": "40" }, + "font-size/100": { "value": "45" }, + "font-size/110": { "value": "50" }, + "font-size/120": { "value": "60" }, + "line-height/0": { "value": "16" }, + "font-weight/40": { "value": "400" }, + "font-weight/70": { "value": "700" }, + "line-height/1": { "value": "18" }, + "line-height/5": { "value": "20" }, + "line-height/10": { "value": "24" }, + "line-height/20": { "value": "28" }, + "line-height/30": { "value": "32" }, + "line-height/40": { "value": "36" }, + "line-height/50": { "value": "40" }, + "line-height/60": { "value": "44" }, + "line-height/70": { "value": "52" }, + "line-height/80": { "value": "56" }, + "line-height/90": { "value": "64" }, + "line-height/100": { "value": "72" }, + "font-family/sans": { "value": "Sarasa UI J" } + } +} diff --git a/packages/theme/src/json/pixiv-dark.json b/packages/theme/src/json/pixiv-dark.json index 92ca5d5ab..022ab875b 100644 --- a/packages/theme/src/json/pixiv-dark.json +++ b/packages/theme/src/json/pixiv-dark.json @@ -1 +1,181 @@ -{"Color":{"pixiv/dark":{"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":{"target-size/compact":{"value":"24"},"target-size/default":{"value":"32"},"target-size/cozy":{"value":"48"},"component/0":{"value":"{Spacings.space/0}"},"component/1":{"value":"{Spacings.space/1}"},"component/10":{"value":"{Spacings.space/10}"},"component/15":{"value":"{Spacings.space/15}"},"component/20":{"value":"{Spacings.space/20}"},"component/25":{"value":"{Spacings.space/25}"},"component/30":{"value":"{Spacings.space/30}"},"component/35":{"value":"{Spacings.space/35}"},"component/40":{"value":"{Spacings.space/40}"},"component/43":{"value":"{Spacings.space/43}"},"component/46":{"value":"{Spacings.space/46}"},"component/50":{"value":"{Spacings.space/50}"},"component/55":{"value":"{Spacings.space/55}"},"component/60":{"value":"{Spacings.space/60}"},"component/63":{"value":"{Spacings.space/63}"},"component/66":{"value":"{Spacings.space/66}"},"layout/0":{"value":"{Spacings.space/0}"},"layout/10":{"value":"{Spacings.space/10}"},"layout/20":{"value":"{Spacings.space/20}"},"layout/30":{"value":"{Spacings.space/30}"},"layout/40":{"value":"{Spacings.space/40}"},"layout/50":{"value":"{Spacings.space/50}"},"layout/60":{"value":"{Spacings.space/60}"},"layout/70":{"value":"{Spacings.space/70}"},"layout/80":{"value":"{Spacings.space/80}"},"layout/90":{"value":"{Spacings.space/90}"},"layout/100":{"value":"{Spacings.space/100}"}}} \ No newline at end of file +{ + "Color": { + "pixiv/dark": { + "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": { + "target-size/compact": { "value": "24" }, + "target-size/default": { "value": "32" }, + "target-size/cozy": { "value": "48" }, + "component/0": { "value": "{Spacings.space/0}" }, + "component/1": { "value": "{Spacings.space/1}" }, + "component/10": { "value": "{Spacings.space/10}" }, + "component/15": { "value": "{Spacings.space/15}" }, + "component/20": { "value": "{Spacings.space/20}" }, + "component/25": { "value": "{Spacings.space/25}" }, + "component/30": { "value": "{Spacings.space/30}" }, + "component/35": { "value": "{Spacings.space/35}" }, + "component/40": { "value": "{Spacings.space/40}" }, + "component/43": { "value": "{Spacings.space/43}" }, + "component/46": { "value": "{Spacings.space/46}" }, + "component/50": { "value": "{Spacings.space/50}" }, + "component/55": { "value": "{Spacings.space/55}" }, + "component/60": { "value": "{Spacings.space/60}" }, + "component/63": { "value": "{Spacings.space/63}" }, + "component/66": { "value": "{Spacings.space/66}" }, + "layout/0": { "value": "{Spacings.space/0}" }, + "layout/10": { "value": "{Spacings.space/10}" }, + "layout/20": { "value": "{Spacings.space/20}" }, + "layout/30": { "value": "{Spacings.space/30}" }, + "layout/40": { "value": "{Spacings.space/40}" }, + "layout/50": { "value": "{Spacings.space/50}" }, + "layout/60": { "value": "{Spacings.space/60}" }, + "layout/70": { "value": "{Spacings.space/70}" }, + "layout/80": { "value": "{Spacings.space/80}" }, + "layout/90": { "value": "{Spacings.space/90}" }, + "layout/100": { "value": "{Spacings.space/100}" } + } +} diff --git a/packages/theme/src/json/pixiv-light.json b/packages/theme/src/json/pixiv-light.json index dc14c0c4c..b4895ebef 100644 --- a/packages/theme/src/json/pixiv-light.json +++ b/packages/theme/src/json/pixiv-light.json @@ -1 +1,175 @@ -{"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":{"target-size/compact":{"value":"24"},"target-size/default":{"value":"32"},"target-size/cozy":{"value":"48"},"component/0":{"value":"{Spacings.space/0}"},"component/1":{"value":"{Spacings.space/1}"},"component/10":{"value":"{Spacings.space/10}"},"component/15":{"value":"{Spacings.space/15}"},"component/20":{"value":"{Spacings.space/20}"},"component/25":{"value":"{Spacings.space/25}"},"component/30":{"value":"{Spacings.space/30}"},"component/35":{"value":"{Spacings.space/35}"},"component/40":{"value":"{Spacings.space/40}"},"component/43":{"value":"{Spacings.space/43}"},"component/46":{"value":"{Spacings.space/46}"},"component/50":{"value":"{Spacings.space/50}"},"component/55":{"value":"{Spacings.space/55}"},"component/60":{"value":"{Spacings.space/60}"},"component/63":{"value":"{Spacings.space/63}"},"component/66":{"value":"{Spacings.space/66}"},"layout/0":{"value":"{Spacings.space/0}"},"layout/10":{"value":"{Spacings.space/10}"},"layout/20":{"value":"{Spacings.space/20}"},"layout/30":{"value":"{Spacings.space/30}"},"layout/40":{"value":"{Spacings.space/40}"},"layout/50":{"value":"{Spacings.space/50}"},"layout/60":{"value":"{Spacings.space/60}"},"layout/70":{"value":"{Spacings.space/70}"},"layout/80":{"value":"{Spacings.space/80}"},"layout/90":{"value":"{Spacings.space/90}"},"layout/100":{"value":"{Spacings.space/100}"}}} \ No newline at end of file +{ + "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": { + "target-size/compact": { "value": "24" }, + "target-size/default": { "value": "32" }, + "target-size/cozy": { "value": "48" }, + "component/0": { "value": "{Spacings.space/0}" }, + "component/1": { "value": "{Spacings.space/1}" }, + "component/10": { "value": "{Spacings.space/10}" }, + "component/15": { "value": "{Spacings.space/15}" }, + "component/20": { "value": "{Spacings.space/20}" }, + "component/25": { "value": "{Spacings.space/25}" }, + "component/30": { "value": "{Spacings.space/30}" }, + "component/35": { "value": "{Spacings.space/35}" }, + "component/40": { "value": "{Spacings.space/40}" }, + "component/43": { "value": "{Spacings.space/43}" }, + "component/46": { "value": "{Spacings.space/46}" }, + "component/50": { "value": "{Spacings.space/50}" }, + "component/55": { "value": "{Spacings.space/55}" }, + "component/60": { "value": "{Spacings.space/60}" }, + "component/63": { "value": "{Spacings.space/63}" }, + "component/66": { "value": "{Spacings.space/66}" }, + "layout/0": { "value": "{Spacings.space/0}" }, + "layout/10": { "value": "{Spacings.space/10}" }, + "layout/20": { "value": "{Spacings.space/20}" }, + "layout/30": { "value": "{Spacings.space/30}" }, + "layout/40": { "value": "{Spacings.space/40}" }, + "layout/50": { "value": "{Spacings.space/50}" }, + "layout/60": { "value": "{Spacings.space/60}" }, + "layout/70": { "value": "{Spacings.space/70}" }, + "layout/80": { "value": "{Spacings.space/80}" }, + "layout/90": { "value": "{Spacings.space/90}" }, + "layout/100": { "value": "{Spacings.space/100}" } + } +} diff --git a/packages/token-cli/pixiv-dark.config.js b/packages/token-cli/pixiv-dark.config.js index d3d33c8fc..2ecab5547 100644 --- a/packages/token-cli/pixiv-dark.config.js +++ b/packages/token-cli/pixiv-dark.config.js @@ -1,29 +1,30 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires -const { transformer } = require('./src/transformer') +const { nameTransformer } = require('./src/transformer') -/** @type { import('style-dictionary') } */ +/** @type { import('style-dictionary').Config } */ module.exports = { source: ['tokens/base.json', 'tokens/pixiv-dark.json'], transform: { - 'name/cti/kebab': { + 'charcoal/kebab': { type: 'name', - transformer: transformer, + transformer: nameTransformer, }, }, platforms: { css: { + transforms: ['charcoal/kebab'], transformGroup: 'css', buildPath: 'build/css/', - prefix: 'charcoal', files: [ { destination: '_variables_dark.css', format: 'css/variables', + options: { + selector: ":root[data-color-scheme='dark']", + outputReferences: true, + }, }, ], - options: { - outputReferences: true, - }, }, }, } diff --git a/packages/token-cli/pixiv-light.config.js b/packages/token-cli/pixiv-light.config.js index 821335bd8..f68b6e826 100644 --- a/packages/token-cli/pixiv-light.config.js +++ b/packages/token-cli/pixiv-light.config.js @@ -1,29 +1,31 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires -const { transformer } = require('./src/transformer') +const { nameTransformer } = require('./src/transformer') -/** @type { import('style-dictionary') } */ +/** @type { import('style-dictionary').Config } */ module.exports = { source: ['tokens/base.json', 'tokens/pixiv-light.json'], transform: { - 'name/cti/kebab': { + 'charcoal/kebab': { type: 'name', - transformer: transformer, + transformer: nameTransformer, }, }, platforms: { css: { + transforms: ['charcoal/kebab'], transformGroup: 'css', buildPath: 'build/css/', - prefix: 'charcoal', files: [ { destination: '_variables_light.css', format: 'css/variables', + options: { + selector: + ":root[data-color-scheme='light'], :root:not([data-color-scheme])", + outputReferences: true, + }, }, ], - options: { - outputReferences: true, - }, }, }, } diff --git a/packages/token-cli/src/transformer/index.js b/packages/token-cli/src/transformer/index.js index 9296cc2f1..c9ad88748 100644 --- a/packages/token-cli/src/transformer/index.js +++ b/packages/token-cli/src/transformer/index.js @@ -2,8 +2,8 @@ * @param {import('style-dictionary').TransformedToken} token * @return {string} */ -const transformer = (token) => { - return token.path +const nameTransformer = (token) => { + const name = token.path .join('-') .replace(/(.)([A-Z])/g, '$1-$2') .replace(/([A-Z])([A-Z])/g, '$1-$2') @@ -11,8 +11,10 @@ const transformer = (token) => { .replaceAll('/', '-') .replaceAll(' ', '-') .replace(/(--)(\D)/g, '-$2') + + return `charcoal-${name}` } module.exports = { - transformer, + nameTransformer, } diff --git a/packages/token-cli/src/transformer/index.test.js b/packages/token-cli/src/transformer/index.test.js index ce9270c9c..603beb93e 100644 --- a/packages/token-cli/src/transformer/index.test.js +++ b/packages/token-cli/src/transformer/index.test.js @@ -1,22 +1,22 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires -const { transformer } = require('.') +const { nameTransformer } = require('.') test('tests transformer real case', () => { - expect(transformer({ path: ['Color', 'container/secondary/defaultA'] })).toBe( - 'color-container-secondary-default-a' - ) + expect( + nameTransformer({ path: ['Color', 'container/secondary/defaultA'] }) + ).toBe('charcoal-color-container-secondary-default-a') }) test('tests transformer negative primitive value case', () => { - expect(transformer({ path: ['Colors', 'Dark/Neutral/-10'] })).toBe( - 'colors-dark-neutral--10' + expect(nameTransformer({ path: ['Colors', 'Dark/Neutral/-10'] })).toBe( + 'charcoal-colors-dark-neutral--10' ) }) test('tests transformer negative primitive value unreal case', () => { - expect(transformer({ path: ['Colors', 'dark/neutralABCDEF/-10'] })).toBe( - 'colors-dark-neutral-a-b-c-d-e-f--10' + expect(nameTransformer({ path: ['Colors', 'dark/neutralABCDEF/-10'] })).toBe( + 'charcoal-colors-dark-neutral-a-b-c-d-e-f--10' ) }) test('tests transformer unreal case', () => { expect( - transformer({ path: ['Color', 'Container/Secondary/DefaultABCDEF'] }) - ).toBe('color-container-secondary-default-a-b-c-d-e-f') + nameTransformer({ path: ['Color', 'Container/Secondary/DefaultABCDEF'] }) + ).toBe('charcoal-color-container-secondary-default-a-b-c-d-e-f') }) From ebfc4075500b611b2cf5e7179ea7638a8ae58e78 Mon Sep 17 00:00:00 2001 From: "charcoal-bot[bot]" <102140162+charcoal-bot[bot]@users.noreply.github.com> Date: Thu, 11 Jul 2024 08:59:43 +0000 Subject: [PATCH 002/102] Update theme --- packages/theme/src/css/_variables_dark.css | 977 ++++++++++---------- packages/theme/src/css/_variables_light.css | 977 ++++++++++---------- packages/theme/src/json/base.json | 44 +- packages/theme/src/json/pixiv-dark.json | 345 ++++--- packages/theme/src/json/pixiv-light.json | 61 +- 5 files changed, 1201 insertions(+), 1203 deletions(-) diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css index eb156902a..1db6b6d1a 100644 --- a/packages/theme/src/css/_variables_dark.css +++ b/packages/theme/src/css/_variables_dark.css @@ -1,493 +1,494 @@ /** * Do not edit directly - * Generated on Wed, 26 Jun 2024 06:50:10 GMT + * Generated on Thu, 11 Jul 2024 08:59:35 GMT */ -:root { - --space-target-size-cozy: 48; - --space-target-size-default: 32; - --space-target-size-compact: 24; - --color-text-brand-premium-press: rgba(213, 133, 18, 1); - --color-text-brand-premium-hover: rgba(243, 152, 21, 1); - --color-container-subtle: rgba(31, 31, 31, 0.02); - --text-font-family-sans: Sarasa UI J; - --text-line-height-100: 72; - --text-line-height-90: 64; - --text-line-height-80: 56; - --text-line-height-70: 52; - --text-line-height-60: 44; - --text-line-height-50: 40; - --text-line-height-40: 36; - --text-line-height-30: 32; - --text-line-height-20: 28; - --text-line-height-10: 24; - --text-line-height-5: 20; - --text-line-height-1: 18; - --text-font-weight-70: 700; - --text-font-weight-40: 400; - --text-line-height-0: 16; - --text-font-size-120: 60; - --text-font-size-110: 50; - --text-font-size-100: 45; - --text-font-size-90: 40; - --text-font-size-80: 36; - --text-font-size-70: 32; - --text-font-size-60: 28; - --text-font-size-50: 25; - --text-font-size-40: 22; - --text-font-size-30: 20; - --text-font-size-20: 18; - --text-font-size-10: 16; - --text-font-size-5: 14; - --text-font-size-1: 12; - --text-font-size-0: 11; - --spacings-space-999: 999999; - --spacings-space-100: 440; - --spacings-space-90: 272; - --spacings-space-80: 168; - --spacings-space-70: 104; - --spacings-space-66: 96; - --spacings-space-63: 80; - --spacings-space-60: 64; - --spacings-space-55: 48; - --spacings-space-50: 40; - --spacings-space-46: 32; - --spacings-space-43: 28; - --spacings-space-40: 24; - --spacings-space-35: 20; - --spacings-space-30: 16; - --spacings-space-25: 12; - --spacings-space-20: 8; - --spacings-space-15: 6; - --spacings-space-10: 4; - --spacings-space-1: 2; - --spacings-space-0: 0; - --colors-dark-magenta-90: rgba(253, 217, 233, 1); - --colors-dark-magenta-80: rgba(247, 184, 213, 1); - --colors-dark-magenta-70: rgba(243, 163, 200, 1); - --colors-dark-magenta-60: rgba(240, 146, 191, 1); - --colors-dark-magenta-50: rgba(220, 114, 168, 1); - --colors-dark-magenta-40: rgba(202, 91, 149, 1); - --colors-dark-magenta-30: rgba(185, 64, 130, 1); - --colors-dark-magenta-20: rgba(124, 58, 91, 1); - --colors-dark-magenta-10: rgba(69, 44, 56, 1); - --colors-dark-magenta-5: rgba(48, 36, 42, 1); - --colors-dark-magenta-0: rgba(31, 31, 31, 1); - --colors-dark-magenta--5: rgba(21, 21, 21, 1); - --colors-dark-magenta--10: rgba(6, 6, 6, 1); - --colors-dark-purple-90: rgba(233, 223, 255, 1); - --colors-dark-purple-80: rgba(210, 192, 245, 1); - --colors-dark-purple-70: rgba(201, 176, 249, 1); - --colors-dark-purple-60: rgba(191, 160, 246, 1); - --colors-dark-purple-50: rgba(169, 133, 229, 1); - --colors-dark-purple-40: rgba(149, 110, 210, 1); - --colors-dark-purple-30: rgba(131, 88, 194, 1); - --colors-dark-purple-20: rgba(93, 68, 132, 1); - --colors-dark-purple-10: rgba(56, 48, 71, 1); - --colors-dark-purple-5: rgba(42, 38, 49, 1); - --colors-dark-purple-0: rgba(31, 31, 31, 1); - --colors-dark-purple--5: rgba(21, 21, 21, 1); - --colors-dark-purple--10: rgba(6, 6, 6, 1); - --colors-dark-indigo-90: rgba(222, 227, 255, 1); - --colors-dark-indigo-80: rgba(192, 199, 248, 1); - --colors-dark-indigo-70: rgba(175, 184, 254, 1); - --colors-dark-indigo-60: rgba(160, 170, 249, 1); - --colors-dark-indigo-50: rgba(135, 143, 231, 1); - --colors-dark-indigo-40: rgba(115, 123, 219, 1); - --colors-dark-indigo-30: rgba(96, 100, 199, 1); - --colors-dark-indigo-20: rgba(72, 76, 134, 1); - --colors-dark-indigo-10: rgba(48, 51, 74, 1); - --colors-dark-indigo-5: rgba(39, 40, 46, 1); - --colors-dark-indigo-0: rgba(31, 31, 31, 1); - --colors-dark-indigo--5: rgba(21, 21, 21, 1); - --colors-dark-indigo--10: rgba(6, 6, 6, 1); - --colors-dark-blue-90: rgba(207, 230, 253, 1); - --colors-dark-blue-80: rgba(166, 205, 245, 1); - --colors-dark-blue-70: rgba(139, 193, 248, 1); - --colors-dark-blue-60: rgba(114, 181, 245, 1); - --colors-dark-blue-50: rgba(83, 156, 224, 1); - --colors-dark-blue-40: rgba(55, 136, 208, 1); - --colors-dark-blue-30: rgba(8, 114, 190, 1); - --colors-dark-blue-20: rgba(39, 84, 126, 1); - --colors-dark-blue-10: rgba(36, 55, 73, 1); - --colors-dark-blue-5: rgba(33, 41, 50, 1); - --colors-dark-blue-0: rgba(31, 31, 31, 1); - --colors-dark-blue--5: rgba(21, 21, 21, 1); - --colors-dark-blue--10: rgba(6, 6, 6, 1); - --colors-dark-turquoise-90: rgba(180, 239, 234, 1); - --colors-dark-turquoise-80: rgba(144, 213, 207, 1); - --colors-dark-turquoise-70: rgba(118, 205, 199, 1); - --colors-dark-turquoise-60: rgba(84, 193, 186, 1); - --colors-dark-turquoise-50: rgba(32, 170, 164, 1); - --colors-dark-turquoise-40: rgba(0, 147, 142, 1); - --colors-dark-turquoise-30: rgba(0, 123, 118, 1); - --colors-dark-turquoise-20: rgba(0, 91, 88, 1); - --colors-dark-turquoise-10: rgba(26, 60, 58, 1); - --colors-dark-turquoise-5: rgba(35, 42, 41, 1); - --colors-dark-turquoise-0: rgba(31, 31, 31, 1); - --colors-dark-turquoise--5: rgba(21, 21, 21, 1); - --colors-dark-turquoise--10: rgba(6, 6, 6, 1); - --colors-dark-green-90: rgba(191, 241, 186, 1); - --colors-dark-green-80: rgba(161, 215, 155, 1); - --colors-dark-green-70: rgba(141, 204, 135, 1); - --colors-dark-green-60: rgba(120, 194, 113, 1); - --colors-dark-green-50: rgba(86, 169, 79, 1); - --colors-dark-green-40: rgba(58, 150, 52, 1); - --colors-dark-green-30: rgba(13, 129, 5, 1); - --colors-dark-green-20: rgba(39, 92, 35, 1); - --colors-dark-green-10: rgba(41, 59, 40, 1); - --colors-dark-green-5: rgba(37, 43, 37, 1); - --colors-dark-green-0: rgba(31, 31, 31, 1); - --colors-dark-green--5: rgba(21, 21, 21, 1); - --colors-dark-green--10: rgba(6, 6, 6, 1); - --colors-dark-yellow-90: rgba(252, 227, 145, 1); - --colors-dark-yellow-80: rgba(231, 199, 80, 1); - --colors-dark-yellow-70: rgba(222, 185, 7, 1); - --colors-dark-yellow-60: rgba(222, 167, 29, 1); - --colors-dark-yellow-50: rgba(199, 140, 10, 1); - --colors-dark-yellow-40: rgba(174, 121, 14, 1); - --colors-dark-yellow-30: rgba(153, 99, 8, 1); - --colors-dark-yellow-20: rgba(109, 75, 31, 1); - --colors-dark-yellow-10: rgba(66, 51, 30, 1); - --colors-dark-yellow-5: rgba(44, 40, 35, 1); - --colors-dark-yellow-0: rgba(31, 31, 31, 1); - --colors-dark-yellow--5: rgba(21, 21, 21, 1); - --colors-dark-yellow--10: rgba(6, 6, 6, 1); - --colors-dark-orange-90: rgba(252, 221, 207, 1); - --colors-dark-orange-80: rgba(245, 188, 163, 1); - --colors-dark-orange-70: rgba(248, 170, 135, 1); - --colors-dark-orange-60: rgba(246, 151, 107, 1); - --colors-dark-orange-50: rgba(229, 121, 68, 1); - --colors-dark-orange-40: rgba(212, 97, 41, 1); - --colors-dark-orange-30: rgba(188, 74, 14, 1); - --colors-dark-orange-20: rgba(134, 58, 22, 1); - --colors-dark-orange-10: rgba(72, 48, 38, 1); - --colors-dark-orange-5: rgba(48, 39, 34, 1); - --colors-dark-orange-0: rgba(31, 31, 31, 1); - --colors-dark-orange--5: rgba(21, 21, 21, 1); - --colors-dark-orange--10: rgba(6, 6, 6, 1); - --colors-dark-red-90: rgba(254, 219, 214, 1); - --colors-dark-red-80: rgba(249, 186, 177, 1); - --colors-dark-red-70: rgba(254, 167, 155, 1); - --colors-dark-red-60: rgba(252, 147, 134, 1); - --colors-dark-red-50: rgba(233, 114, 102, 1); - --colors-dark-red-40: rgba(217, 88, 76, 1); - --colors-dark-red-30: rgba(197, 60, 51, 1); - --colors-dark-red-20: rgba(136, 54, 46, 1); - --colors-dark-red-10: rgba(73, 47, 43, 1); - --colors-dark-red-5: rgba(47, 39, 38, 1); - --colors-dark-red-0: rgba(31, 31, 31, 1); - --colors-dark-red--5: rgba(21, 21, 21, 1); - --colors-dark-red--10: rgba(6, 6, 6, 1); - --colors-dark-neutral-90: rgba(228, 228, 228, 1); - --colors-dark-neutral-80: rgba(202, 202, 202, 1); - --colors-dark-neutral-70: rgba(188, 188, 188, 1); - --colors-dark-neutral-60: rgba(175, 175, 175, 1); - --colors-dark-neutral-50: rgba(151, 151, 151, 1); - --colors-dark-neutral-40: rgba(130, 130, 130, 1); - --colors-dark-neutral-30: rgba(112, 112, 112, 1); - --colors-dark-neutral-20: rgba(81, 81, 81, 1); - --colors-dark-neutral-10: rgba(51, 51, 51, 1); - --colors-dark-neutral-5: rgba(41, 41, 41, 1); - --colors-dark-neutral-0: rgba(31, 31, 31, 1); - --colors-dark-neutral--5: rgba(21, 21, 21, 1); - --colors-dark-neutrala-80: rgba(228, 228, 228, 0.87); - --colors-dark-neutrala-70: rgba(228, 228, 228, 0.795); - --colors-dark-neutrala-60: rgba(228, 228, 228, 0.73); - --colors-dark-neutrala-50: rgba(228, 228, 228, 0.61); - --colors-dark-neutrala-40: rgba(228, 228, 228, 0.505); - --colors-dark-neutrala-30: rgba(228, 228, 228, 0.41); - --colors-dark-neutrala-20: rgba(228, 228, 228, 0.255); - --colors-dark-neutrala-10: rgba(228, 228, 228, 0.1); - --colors-dark-neutrala-5: rgba(228, 228, 228, 0.05); - --colors-dark-neutrala-0: rgba(228, 228, 228, 0); - --colors-dark-neutrala--5: rgba(6, 6, 6, 0.41); - --colors-dark-neutrala--10: rgba(6, 6, 6, 1); - --colors-dark-neutral--10: rgba(6, 6, 6, 1); - --colors-light-magenta-90: rgba(59, 5, 37, 1); - --colors-light-magenta-80: rgba(98, 27, 67, 1); - --colors-light-magenta-70: rgba(141, 33, 96, 1); - --colors-light-magenta-60: rgba(196, 53, 135, 1); - --colors-light-magenta-50: rgba(235, 95, 170, 1); - --colors-light-magenta-40: rgba(250, 131, 192, 1); - --colors-light-magenta-30: rgba(245, 173, 206, 1); - --colors-light-magenta-20: rgba(255, 204, 226, 1); - --colors-light-magenta-10: rgba(251, 226, 237, 1); - --colors-light-magenta-5: rgba(252, 239, 244, 1); - --colors-light-purple-90: rgba(40, 16, 70, 1); - --colors-light-purple-80: rgba(70, 32, 115, 1); - --colors-light-purple-70: rgba(103, 39, 171, 1); - --colors-light-purple-60: rgba(143, 77, 225, 1); - --colors-light-purple-50: rgba(173, 120, 252, 1); - --colors-light-purple-40: rgba(190, 153, 253, 1); - --colors-light-purple-30: rgba(207, 183, 253, 1); - --colors-light-purple-20: rgba(224, 210, 253, 1); - --colors-light-purple-10: rgba(236, 229, 251, 1); - --colors-light-purple-5: rgba(244, 241, 252, 1); - --colors-light-indigo-90: rgba(24, 24, 70, 1); - --colors-light-indigo-80: rgba(45, 47, 109, 1); - --colors-light-indigo-70: rgba(68, 70, 155, 1); - --colors-light-indigo-60: rgba(95, 97, 222, 1); - --colors-light-indigo-50: rgba(129, 136, 253, 1); - --colors-light-indigo-40: rgba(156, 165, 252, 1); - --colors-light-indigo-30: rgba(181, 189, 253, 1); - --colors-light-indigo-20: rgba(210, 216, 252, 1); - --colors-light-indigo-10: rgba(226, 231, 253, 1); - --colors-light-indigo-5: rgba(241, 242, 253, 1); - --colors-light-blue-90: rgba(3, 35, 63, 1); - --colors-light-blue-80: rgba(19, 58, 93, 1); - --colors-light-blue-70: rgba(24, 81, 130, 1); - --colors-light-blue-60: rgba(31, 117, 188, 1); - --colors-light-blue-50: rgba(0, 150, 250, 1); - --colors-light-blue-40: rgba(85, 178, 253, 1); - --colors-light-blue-30: rgba(137, 200, 253, 1); - --colors-light-blue-20: rgba(188, 222, 252, 1); - --colors-light-blue-10: rgba(216, 235, 251, 1); - --colors-light-blue-5: rgba(236, 244, 253, 1); - --colors-light-blue-0: rgba(255, 255, 255, 1); - --colors-light-turquoise-90: rgba(1, 37, 37, 1); - --colors-light-turquoise-80: rgba(1, 61, 62, 1); - --colors-light-turquoise-70: rgba(3, 87, 89, 1); - --colors-light-turquoise-60: rgba(11, 126, 128, 1); - --colors-light-turquoise-50: rgba(27, 161, 163, 1); - --colors-light-turquoise-40: rgba(63, 184, 186, 1); - --colors-light-turquoise-30: rgba(109, 204, 205, 1); - --colors-light-turquoise-20: rgba(152, 228, 229, 1); - --colors-light-turquoise-10: rgba(196, 240, 241, 1); - --colors-light-turquoise-5: rgba(225, 249, 249, 1); - --colors-light-turquoise-0: rgba(255, 255, 255, 1); - --colors-light-green-90: rgba(1, 40, 0, 1); - --colors-light-green-80: rgba(7, 64, 4, 1); - --colors-light-green-70: rgba(4, 93, 0, 1); - --colors-light-green-60: rgba(17, 131, 8, 1); - --colors-light-green-50: rgba(37, 170, 28, 1); - --colors-light-green-40: rgba(80, 192, 72, 1); - --colors-light-green-30: rgba(121, 214, 112, 1); - --colors-light-green-20: rgba(164, 234, 157, 1); - --colors-light-green-10: rgba(204, 243, 200, 1); - --colors-light-green-5: rgba(234, 248, 232, 1); - --colors-light-green-0: rgba(255, 255, 255, 1); - --colors-light-yellow-90: rgba(44, 28, 0, 1); - --colors-light-yellow-80: rgba(74, 51, 7, 1); - --colors-light-yellow-70: rgba(110, 72, 5, 1); - --colors-light-yellow-60: rgba(161, 99, 9, 1); - --colors-light-yellow-50: rgba(205, 131, 2, 1); - --colors-light-yellow-40: rgba(231, 157, 20, 1); - --colors-light-yellow-30: rgba(245, 183, 17, 1); - --colors-light-yellow-20: rgba(254, 214, 61, 1); - --colors-light-yellow-10: rgba(246, 232, 176, 1); - --colors-light-yellow-5: rgba(250, 243, 221, 1); - --colors-light-yellow-0: rgba(255, 255, 255, 1); - --colors-light-orange-90: rgba(55, 18, 2, 1); - --colors-light-orange-80: rgba(91, 38, 13, 1); - --colors-light-orange-70: rgba(132, 54, 7, 1); - --colors-light-orange-60: rgba(190, 79, 4, 1); - --colors-light-orange-50: rgba(242, 105, 21, 1); - --colors-light-orange-40: rgba(253, 143, 53, 1); - --colors-light-orange-30: rgba(254, 176, 121, 1); - --colors-light-orange-20: rgba(253, 209, 177, 1); - --colors-light-orange-10: rgba(252, 229, 211, 1); - --colors-light-orange-5: rgba(253, 241, 229, 1); - --colors-light-red-90: rgba(66, 0, 1, 1); - --colors-light-red-80: rgba(103, 22, 17, 1); - --colors-light-red-70: rgba(147, 33, 28, 1); - --colors-light-red-60: rgba(206, 54, 46, 1); - --colors-light-red-50: rgba(253, 91, 78, 1); - --colors-light-red-40: rgba(252, 138, 124, 1); - --colors-light-red-30: rgba(253, 174, 163, 1); - --colors-light-red-20: rgba(253, 206, 199, 1); - --colors-light-red-10: rgba(250, 228, 225, 1); - --colors-light-red-5: rgba(253, 240, 237, 1); - --colors-light-red-0: rgba(255, 255, 255, 1); - --colors-light-neutral-90: rgba(31, 31, 31, 1); - --colors-light-neutral-80: rgba(56, 56, 56, 1); - --colors-light-neutral-70: rgba(81, 81, 81, 1); - --colors-light-neutral-60: rgba(113, 113, 113, 1); - --colors-light-neutral-50: rgba(148, 148, 148, 1); - --colors-light-neutral-40: rgba(172, 172, 172, 1); - --colors-light-neutral-30: rgba(194, 194, 194, 1); - --colors-light-neutral-20: rgba(217, 217, 217, 1); - --colors-light-neutral-10: rgba(232, 232, 232, 1); - --colors-light-neutral-5: rgba(243, 243, 243, 1); - --colors-light-neutrala-80: rgba(31, 31, 31, 0.885); - --colors-light-neutrala-70: rgba(31, 31, 31, 0.775); - --colors-light-neutrala-60: rgba(31, 31, 31, 0.635); - --colors-light-neutrala-50: rgba(31, 31, 31, 0.475); - --colors-light-neutrala-40: rgba(31, 31, 31, 0.37); - --colors-light-neutrala-30: rgba(31, 31, 31, 0.27); - --colors-light-neutrala-20: rgba(31, 31, 31, 0.17); - --colors-light-neutrala-10: rgba(31, 31, 31, 0.102); - --colors-light-neutrala-5: rgba(31, 31, 31, 0.055); - --colors-light-neutrala-0: rgba(31, 31, 31, 0); - --colors-light-neutral-0: rgba(255, 255, 255, 1); - --brand-color-factory: rgba(0, 184, 205, 1); - --brand-color-booth: rgba(252, 77, 80, 1); - --brand-color-comic: rgba(255, 196, 0, 1); - --brand-color-premium: rgba(253, 158, 22, 1); - --brand-color-pixiv: rgba(0, 150, 250, 1); - --space-layout-100: var(--spacings-space-100); - --space-layout-90: var(--spacings-space-90); - --space-layout-80: var(--spacings-space-80); - --space-layout-70: var(--spacings-space-70); - --space-layout-60: var(--spacings-space-60); - --space-layout-50: var(--spacings-space-50); - --space-layout-40: var(--spacings-space-40); - --space-layout-30: var(--spacings-space-30); - --space-layout-20: var(--spacings-space-20); - --space-layout-10: var(--spacings-space-10); - --space-layout-0: var(--spacings-space-0); - --space-component-66: var(--spacings-space-66); - --space-component-63: var(--spacings-space-63); - --space-component-60: var(--spacings-space-60); - --space-component-55: var(--spacings-space-55); - --space-component-50: var(--spacings-space-50); - --space-component-46: var(--spacings-space-46); - --space-component-43: var(--spacings-space-43); - --space-component-40: var(--spacings-space-40); - --space-component-35: var(--spacings-space-35); - --space-component-30: var(--spacings-space-30); - --space-component-25: var(--spacings-space-25); - --space-component-20: var(--spacings-space-20); - --space-component-15: var(--spacings-space-15); - --space-component-10: var(--spacings-space-10); - --space-component-1: var(--spacings-space-1); - --space-component-0: var(--spacings-space-0); - --color-border-negative: var(--colors-light-red-20); - --color-border-focus: var(--colors-light-blue-20); - --color-border-disable: var(--colors-light-neutrala-10); - --color-border-secondary: var(--colors-light-neutrala-10); - --color-border-default: var(--colors-light-neutrala-50); - --color-icon-on-neutral-press: var(--colors-light-neutral-10); - --color-icon-on-neutral-hover: var(--colors-light-neutral-5); - --color-icon-on-neutral-default: var(--colors-light-neutral-0); - --color-text-brand-premium-default: var(--brand-color-premium); - --color-text-on-hud-press: var(--colors-dark-neutral-90); - --color-text-on-hud-hover: var(--colors-dark-neutral-90); - --color-text-on-hud-default: var(--colors-dark-neutral-90); - --color-text-on-discovery-press: var(--colors-light-neutral-0); - --color-text-on-discovery-hover: var(--colors-light-neutral-0); - --color-text-on-discovery-default: var(--colors-light-neutral-0); - --color-text-on-notice-press: var(--colors-light-neutral-90); - --color-text-on-notice-hover: var(--colors-light-neutral-90); - --color-text-on-notice-default: var(--colors-light-neutral-90); - --color-text-on-positive-press: var(--colors-light-neutral-0); - --color-text-on-positive-hover: var(--colors-light-neutral-0); - --color-text-on-positive-default: var(--colors-light-neutral-0); - --color-text-on-negative-press: var(--colors-light-neutral-0); - --color-text-on-negative-hover: var(--colors-light-neutral-0); - --color-text-on-negative-default: var(--colors-light-neutral-0); - --color-text-on-primary-press: var(--colors-light-neutral-0); - --color-text-on-primary-hover: var(--colors-light-neutral-0); - --color-text-on-on-img-press: var(--colors-light-neutral-0); - --color-text-on-on-img-hover: var(--colors-light-neutral-0); - --color-text-on-on-img-default: var(--colors-light-neutral-0); - --color-text-on-primary-default: var(--colors-light-neutral-0); - --color-text-visited-press: var(--colors-light-purple-90); - --color-text-visited-hover: var(--colors-light-purple-80); - --color-text-visited-default: var(--colors-light-purple-70); - --color-text-info-press: var(--colors-light-blue-80); - --color-text-info-hover: var(--colors-light-blue-70); - --color-text-info-default: var(--colors-light-blue-60); - --color-text-notice-press: var(--colors-light-yellow-80); - --color-text-notice-hover: var(--colors-light-yellow-70); - --color-text-notice-default: var(--colors-light-yellow-60); - --color-text-positive-press: var(--colors-light-green-80); - --color-text-positive-hover: var(--colors-light-green-70); - --color-text-positive-default: var(--colors-light-green-60); - --color-text-negative-press: var(--colors-light-red-80); - --color-text-negative-hover: var(--colors-light-red-70); - --color-text-negative-default: var(--colors-light-red-60); - --color-text-placeholder-press: var(--colors-light-neutral-70); - --color-text-placeholder-hover: var(--colors-light-neutral-60); - --color-text-placeholder-default: var(--colors-light-neutral-50); - --color-text-tertiary-press: var(--colors-light-neutral-80); - --color-text-tertiary-hover: var(--colors-light-neutral-70); - --color-text-tertiary-default: var(--colors-light-neutral-60); - --color-text-secondary-press: var(--colors-light-neutral-90); - --color-text-secondary-hover: var(--colors-light-neutral-80); - --color-text-secondary-default: var(--colors-light-neutral-70); - --color-text-disable: var(--colors-light-neutral-30); - --color-text-press: var(--colors-light-neutral-70); - --color-text-hover: var(--colors-light-neutral-80); - --color-text-default: var(--colors-light-neutral-90); - --color-container-skeleton: var(--colors-light-neutrala-5); - --color-container-hud-press: var(--colors-light-neutral-60); - --color-container-hud-hover: var(--colors-light-neutral-70); - --color-container-hud-default: var(--colors-light-neutral-80); - --color-container-neutral-press: var(--colors-light-neutral-70); - --color-container-neutral-hover: var(--colors-light-neutral-60); - --color-container-discovery-press: var(--colors-light-red-70); - --color-container-discovery-hover: var(--colors-light-red-60); - --color-container-discovery-default: var(--colors-light-red-50); - --color-container-neutral-default: var(--colors-light-neutral-50); - --color-container-notice-press: var(--colors-light-yellow-40); - --color-container-notice-hover: var(--colors-light-yellow-30); - --color-container-notice-default: var(--colors-light-yellow-20); - --color-container-positive-press: var(--colors-light-green-70); - --color-container-positive-hover: var(--colors-light-green-60); - --color-container-positive-default: var(--colors-light-green-50); - --color-container-negative-press: var(--colors-light-red-70); - --color-container-negative-hover: var(--colors-light-red-60); - --color-container-negative-default: var(--colors-light-red-50); - --color-container-on-img-press: var(--colors-light-neutrala-60); - --color-container-on-img-hover: var(--colors-light-neutrala-50); - --color-container-on-img-default: var(--colors-light-neutrala-40); - --color-container-secondary-pressa: var(--colors-light-neutrala-20); - --color-container-secondary-hovera: var(--colors-light-neutrala-10); - --color-container-secondary-defaulta: var(--colors-light-neutrala-5); - --color-container-secondary-press: var(--colors-light-neutral-20); - --color-container-secondary-hover: var(--colors-light-neutral-10); - --color-container-primary-press: var(--colors-light-blue-70); - --color-container-primary-hover: var(--colors-light-blue-60); - --color-container-primary-default: var(--colors-light-blue-50); - --color-container-tertiary-pressa: var(--colors-light-neutrala-30); - --color-container-tertiary-hovera: var(--colors-light-neutrala-20); - --color-container-tertiary-defaulta: var(--colors-light-neutrala-10); - --color-container-tertiary-press: var(--colors-light-neutral-30); - --color-container-tertiary-hover: var(--colors-light-neutral-20); - --color-container-tertiary-default: var(--colors-light-neutral-10); - --color-container-secondary-default: var(--colors-light-neutral-5); - --color-container-disable: var(--colors-light-neutral-10); - --color-container-press: var(--colors-light-neutral-10); - --color-container-hover: var(--colors-light-neutral-5); - --color-container-default: var(--colors-light-neutral-0); - --color-background-tertiary: var(--colors-light-neutral-10); - --color-background-secondary: var(--colors-light-neutral-5); - --color-background-default: var(--colors-light-neutral-0); - --colors-dark-neutrala-90: var(--colors-dark-neutral-90); - --colors-light-neutrala-90: var(--colors-light-neutral-90); - --color-icon-on-positive-press: var(--color-text-on-positive-press); - --color-icon-on-positive-hover: var(--color-text-on-positive-hover); - --color-icon-on-notice-press: var(--color-text-on-notice-press); - --color-icon-on-notice-hover: var(--color-text-on-notice-hover); - --color-icon-on-notice-default: var(--color-text-on-notice-default); - --color-icon-on-positive-default: var(--color-text-on-positive-default); - --color-icon-on-negative-press: var(--color-text-on-negative-press); - --color-icon-on-negative-hover: var(--color-text-on-negative-hover); - --color-icon-on-negative-default: var(--color-text-on-negative-default); - --color-icon-on-on-img-press: var(--color-text-on-on-img-press); - --color-icon-on-on-img-hover: var(--color-text-on-on-img-hover); - --color-icon-on-on-img-default: var(--color-text-on-on-img-default); - --color-icon-on-primary-press: var(--color-text-on-primary-press); - --color-icon-on-primary-hover: var(--color-text-on-primary-hover); - --color-icon-on-primary-default: var(--color-text-on-primary-default); - --color-icon-disable: var(--color-text-disable); - --color-icon-press: var(--color-text-press); - --color-icon-hover: var(--color-text-hover); - --color-icon-default: var(--color-text-default); - --color-icon-secondary-press: var(--color-text-secondary-press); - --color-icon-secondary-hover: var(--color-text-secondary-hover); - --color-icon-tertiary-press: var(--color-text-tertiary-press); - --color-icon-tertiary-hover: var(--color-text-tertiary-hover); - --color-icon-notice-press: var(--color-text-notice-press); - --color-icon-notice-hover: var(--color-text-notice-hover); - --color-icon-notice-default: var(--color-text-notice-default); - --color-icon-positive-press: var(--color-text-positive-hover); - --color-icon-positive-hover: var(--color-text-positive-hover); - --color-icon-positive-default: var(--color-text-positive-default); - --color-icon-negative-press: var(--color-text-negative-press); - --color-icon-negative-hover: var(--color-text-negative-hover); - --color-icon-negative-default: var(--color-text-negative-default); - --color-icon-tertiary-default: var(--color-text-tertiary-default); - --color-icon-secondary-default: var(--color-text-secondary-default); +:root[data-color-scheme='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-text-font-family-sans: Sarasa UI J; + --charcoal-text-line-height-100: 72; + --charcoal-text-line-height-90: 64; + --charcoal-text-line-height-80: 56; + --charcoal-text-line-height-70: 52; + --charcoal-text-line-height-60: 44; + --charcoal-text-line-height-50: 40; + --charcoal-text-line-height-40: 36; + --charcoal-text-line-height-30: 32; + --charcoal-text-line-height-20: 28; + --charcoal-text-line-height-10: 24; + --charcoal-text-line-height-5: 20; + --charcoal-text-line-height-1: 18; + --charcoal-text-font-weight-70: 700; + --charcoal-text-font-weight-40: 400; + --charcoal-text-line-height-0: 16; + --charcoal-text-font-size-120: 60; + --charcoal-text-font-size-110: 50; + --charcoal-text-font-size-100: 45; + --charcoal-text-font-size-90: 40; + --charcoal-text-font-size-80: 36; + --charcoal-text-font-size-70: 32; + --charcoal-text-font-size-60: 28; + --charcoal-text-font-size-50: 25; + --charcoal-text-font-size-40: 22; + --charcoal-text-font-size-30: 20; + --charcoal-text-font-size-20: 18; + --charcoal-text-font-size-10: 16; + --charcoal-text-font-size-5: 14; + --charcoal-text-font-size-1: 12; + --charcoal-text-font-size-0: 11; + --charcoal-space-target-l: 48; + --charcoal-space-target-m: 40; + --charcoal-space-target-s: 32; + --charcoal-space-target-xs: 24; + --charcoal-space-999: 999999; + --charcoal-space-100: 440; + --charcoal-space-90: 272; + --charcoal-space-80: 168; + --charcoal-space-70: 104; + --charcoal-space-66: 96; + --charcoal-space-63: 80; + --charcoal-space-60: 64; + --charcoal-space-55: 48; + --charcoal-space-50: 40; + --charcoal-space-46: 32; + --charcoal-space-43: 28; + --charcoal-space-40: 24; + --charcoal-space-35: 20; + --charcoal-space-30: 16; + --charcoal-space-25: 12; + --charcoal-space-20: 8; + --charcoal-space-15: 6; + --charcoal-space-10: 4; + --charcoal-space-1: 2; + --charcoal-space-0: 0; + --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-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-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-space-layout-100: var(--charcoal-space-100); + --charcoal-space-layout-90: var(--charcoal-space-90); + --charcoal-space-layout-80: var(--charcoal-space-80); + --charcoal-space-layout-70: var(--charcoal-space-70); + --charcoal-space-layout-60: var(--charcoal-space-60); + --charcoal-space-layout-50: var(--charcoal-space-50); + --charcoal-space-layout-40: var(--charcoal-space-40); + --charcoal-space-layout-30: var(--charcoal-space-30); + --charcoal-space-layout-20: var(--charcoal-space-20); + --charcoal-space-layout-10: var(--charcoal-space-10); + --charcoal-space-layout-0: var(--charcoal-space-0); + --charcoal-space-component-66: var(--charcoal-space-66); + --charcoal-space-component-63: var(--charcoal-space-63); + --charcoal-space-component-60: var(--charcoal-space-60); + --charcoal-space-component-55: var(--charcoal-space-55); + --charcoal-space-component-50: var(--charcoal-space-50); + --charcoal-space-component-46: var(--charcoal-space-46); + --charcoal-space-component-43: var(--charcoal-space-43); + --charcoal-space-component-40: var(--charcoal-space-40); + --charcoal-space-component-35: var(--charcoal-space-35); + --charcoal-space-component-30: var(--charcoal-space-30); + --charcoal-space-component-25: var(--charcoal-space-25); + --charcoal-space-component-20: var(--charcoal-space-20); + --charcoal-space-component-15: var(--charcoal-space-15); + --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-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-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); + --charcoal-color-icon-on-notice-hover: var(--charcoal-color-text-on-notice-hover); + --charcoal-color-icon-on-notice-default: var(--charcoal-color-text-on-notice-default); + --charcoal-color-icon-on-positive-default: var(--charcoal-color-text-on-positive-default); + --charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press); + --charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover); + --charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default); + --charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press); + --charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover); + --charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default); + --charcoal-color-icon-on-primary-press: var(--charcoal-color-text-on-primary-press); + --charcoal-color-icon-on-primary-hover: var(--charcoal-color-text-on-primary-hover); + --charcoal-color-icon-on-primary-default: var(--charcoal-color-text-on-primary-default); + --charcoal-color-icon-disable: var(--charcoal-color-text-disable); + --charcoal-color-icon-press: var(--charcoal-color-text-press); + --charcoal-color-icon-hover: var(--charcoal-color-text-hover); + --charcoal-color-icon-default: var(--charcoal-color-text-default); + --charcoal-color-icon-secondary-press: var(--charcoal-color-text-secondary-press); + --charcoal-color-icon-secondary-hover: var(--charcoal-color-text-secondary-hover); + --charcoal-color-icon-tertiary-press: var(--charcoal-color-text-tertiary-press); + --charcoal-color-icon-tertiary-hover: var(--charcoal-color-text-tertiary-hover); + --charcoal-color-icon-notice-press: var(--charcoal-color-text-notice-press); + --charcoal-color-icon-notice-hover: var(--charcoal-color-text-notice-hover); + --charcoal-color-icon-notice-default: var(--charcoal-color-text-notice-default); + --charcoal-color-icon-positive-press: var(--charcoal-color-text-positive-press); + --charcoal-color-icon-positive-hover: var(--charcoal-color-text-positive-hover); + --charcoal-color-icon-positive-default: var(--charcoal-color-text-positive-default); + --charcoal-color-icon-negative-press: var(--charcoal-color-text-negative-press); + --charcoal-color-icon-negative-hover: var(--charcoal-color-text-negative-hover); + --charcoal-color-icon-negative-default: var(--charcoal-color-text-negative-default); + --charcoal-color-icon-tertiary-default: var(--charcoal-color-text-tertiary-default); + --charcoal-color-icon-secondary-default: var(--charcoal-color-text-secondary-default); } diff --git a/packages/theme/src/css/_variables_light.css b/packages/theme/src/css/_variables_light.css index bb16e9552..16c3872de 100644 --- a/packages/theme/src/css/_variables_light.css +++ b/packages/theme/src/css/_variables_light.css @@ -1,493 +1,494 @@ /** * Do not edit directly - * Generated on Wed, 26 Jun 2024 06:50:09 GMT + * Generated on Thu, 11 Jul 2024 08:59:34 GMT */ -:root { - --space-target-size-cozy: 48; - --space-target-size-default: 32; - --space-target-size-compact: 24; - --color-text-brand-premium-press: rgba(213, 133, 18, 1); - --color-text-brand-premium-hover: rgba(243, 152, 21, 1); - --color-container-subtle: rgba(31, 31, 31, 0.02); - --text-font-family-sans: Sarasa UI J; - --text-line-height-100: 72; - --text-line-height-90: 64; - --text-line-height-80: 56; - --text-line-height-70: 52; - --text-line-height-60: 44; - --text-line-height-50: 40; - --text-line-height-40: 36; - --text-line-height-30: 32; - --text-line-height-20: 28; - --text-line-height-10: 24; - --text-line-height-5: 20; - --text-line-height-1: 18; - --text-font-weight-70: 700; - --text-font-weight-40: 400; - --text-line-height-0: 16; - --text-font-size-120: 60; - --text-font-size-110: 50; - --text-font-size-100: 45; - --text-font-size-90: 40; - --text-font-size-80: 36; - --text-font-size-70: 32; - --text-font-size-60: 28; - --text-font-size-50: 25; - --text-font-size-40: 22; - --text-font-size-30: 20; - --text-font-size-20: 18; - --text-font-size-10: 16; - --text-font-size-5: 14; - --text-font-size-1: 12; - --text-font-size-0: 11; - --spacings-space-999: 999999; - --spacings-space-100: 440; - --spacings-space-90: 272; - --spacings-space-80: 168; - --spacings-space-70: 104; - --spacings-space-66: 96; - --spacings-space-63: 80; - --spacings-space-60: 64; - --spacings-space-55: 48; - --spacings-space-50: 40; - --spacings-space-46: 32; - --spacings-space-43: 28; - --spacings-space-40: 24; - --spacings-space-35: 20; - --spacings-space-30: 16; - --spacings-space-25: 12; - --spacings-space-20: 8; - --spacings-space-15: 6; - --spacings-space-10: 4; - --spacings-space-1: 2; - --spacings-space-0: 0; - --colors-dark-magenta-90: rgba(253, 217, 233, 1); - --colors-dark-magenta-80: rgba(247, 184, 213, 1); - --colors-dark-magenta-70: rgba(243, 163, 200, 1); - --colors-dark-magenta-60: rgba(240, 146, 191, 1); - --colors-dark-magenta-50: rgba(220, 114, 168, 1); - --colors-dark-magenta-40: rgba(202, 91, 149, 1); - --colors-dark-magenta-30: rgba(185, 64, 130, 1); - --colors-dark-magenta-20: rgba(124, 58, 91, 1); - --colors-dark-magenta-10: rgba(69, 44, 56, 1); - --colors-dark-magenta-5: rgba(48, 36, 42, 1); - --colors-dark-magenta-0: rgba(31, 31, 31, 1); - --colors-dark-magenta--5: rgba(21, 21, 21, 1); - --colors-dark-magenta--10: rgba(6, 6, 6, 1); - --colors-dark-purple-90: rgba(233, 223, 255, 1); - --colors-dark-purple-80: rgba(210, 192, 245, 1); - --colors-dark-purple-70: rgba(201, 176, 249, 1); - --colors-dark-purple-60: rgba(191, 160, 246, 1); - --colors-dark-purple-50: rgba(169, 133, 229, 1); - --colors-dark-purple-40: rgba(149, 110, 210, 1); - --colors-dark-purple-30: rgba(131, 88, 194, 1); - --colors-dark-purple-20: rgba(93, 68, 132, 1); - --colors-dark-purple-10: rgba(56, 48, 71, 1); - --colors-dark-purple-5: rgba(42, 38, 49, 1); - --colors-dark-purple-0: rgba(31, 31, 31, 1); - --colors-dark-purple--5: rgba(21, 21, 21, 1); - --colors-dark-purple--10: rgba(6, 6, 6, 1); - --colors-dark-indigo-90: rgba(222, 227, 255, 1); - --colors-dark-indigo-80: rgba(192, 199, 248, 1); - --colors-dark-indigo-70: rgba(175, 184, 254, 1); - --colors-dark-indigo-60: rgba(160, 170, 249, 1); - --colors-dark-indigo-50: rgba(135, 143, 231, 1); - --colors-dark-indigo-40: rgba(115, 123, 219, 1); - --colors-dark-indigo-30: rgba(96, 100, 199, 1); - --colors-dark-indigo-20: rgba(72, 76, 134, 1); - --colors-dark-indigo-10: rgba(48, 51, 74, 1); - --colors-dark-indigo-5: rgba(39, 40, 46, 1); - --colors-dark-indigo-0: rgba(31, 31, 31, 1); - --colors-dark-indigo--5: rgba(21, 21, 21, 1); - --colors-dark-indigo--10: rgba(6, 6, 6, 1); - --colors-dark-blue-90: rgba(207, 230, 253, 1); - --colors-dark-blue-80: rgba(166, 205, 245, 1); - --colors-dark-blue-70: rgba(139, 193, 248, 1); - --colors-dark-blue-60: rgba(114, 181, 245, 1); - --colors-dark-blue-50: rgba(83, 156, 224, 1); - --colors-dark-blue-40: rgba(55, 136, 208, 1); - --colors-dark-blue-30: rgba(8, 114, 190, 1); - --colors-dark-blue-20: rgba(39, 84, 126, 1); - --colors-dark-blue-10: rgba(36, 55, 73, 1); - --colors-dark-blue-5: rgba(33, 41, 50, 1); - --colors-dark-blue-0: rgba(31, 31, 31, 1); - --colors-dark-blue--5: rgba(21, 21, 21, 1); - --colors-dark-blue--10: rgba(6, 6, 6, 1); - --colors-dark-turquoise-90: rgba(180, 239, 234, 1); - --colors-dark-turquoise-80: rgba(144, 213, 207, 1); - --colors-dark-turquoise-70: rgba(118, 205, 199, 1); - --colors-dark-turquoise-60: rgba(84, 193, 186, 1); - --colors-dark-turquoise-50: rgba(32, 170, 164, 1); - --colors-dark-turquoise-40: rgba(0, 147, 142, 1); - --colors-dark-turquoise-30: rgba(0, 123, 118, 1); - --colors-dark-turquoise-20: rgba(0, 91, 88, 1); - --colors-dark-turquoise-10: rgba(26, 60, 58, 1); - --colors-dark-turquoise-5: rgba(35, 42, 41, 1); - --colors-dark-turquoise-0: rgba(31, 31, 31, 1); - --colors-dark-turquoise--5: rgba(21, 21, 21, 1); - --colors-dark-turquoise--10: rgba(6, 6, 6, 1); - --colors-dark-green-90: rgba(191, 241, 186, 1); - --colors-dark-green-80: rgba(161, 215, 155, 1); - --colors-dark-green-70: rgba(141, 204, 135, 1); - --colors-dark-green-60: rgba(120, 194, 113, 1); - --colors-dark-green-50: rgba(86, 169, 79, 1); - --colors-dark-green-40: rgba(58, 150, 52, 1); - --colors-dark-green-30: rgba(13, 129, 5, 1); - --colors-dark-green-20: rgba(39, 92, 35, 1); - --colors-dark-green-10: rgba(41, 59, 40, 1); - --colors-dark-green-5: rgba(37, 43, 37, 1); - --colors-dark-green-0: rgba(31, 31, 31, 1); - --colors-dark-green--5: rgba(21, 21, 21, 1); - --colors-dark-green--10: rgba(6, 6, 6, 1); - --colors-dark-yellow-90: rgba(252, 227, 145, 1); - --colors-dark-yellow-80: rgba(231, 199, 80, 1); - --colors-dark-yellow-70: rgba(222, 185, 7, 1); - --colors-dark-yellow-60: rgba(222, 167, 29, 1); - --colors-dark-yellow-50: rgba(199, 140, 10, 1); - --colors-dark-yellow-40: rgba(174, 121, 14, 1); - --colors-dark-yellow-30: rgba(153, 99, 8, 1); - --colors-dark-yellow-20: rgba(109, 75, 31, 1); - --colors-dark-yellow-10: rgba(66, 51, 30, 1); - --colors-dark-yellow-5: rgba(44, 40, 35, 1); - --colors-dark-yellow-0: rgba(31, 31, 31, 1); - --colors-dark-yellow--5: rgba(21, 21, 21, 1); - --colors-dark-yellow--10: rgba(6, 6, 6, 1); - --colors-dark-orange-90: rgba(252, 221, 207, 1); - --colors-dark-orange-80: rgba(245, 188, 163, 1); - --colors-dark-orange-70: rgba(248, 170, 135, 1); - --colors-dark-orange-60: rgba(246, 151, 107, 1); - --colors-dark-orange-50: rgba(229, 121, 68, 1); - --colors-dark-orange-40: rgba(212, 97, 41, 1); - --colors-dark-orange-30: rgba(188, 74, 14, 1); - --colors-dark-orange-20: rgba(134, 58, 22, 1); - --colors-dark-orange-10: rgba(72, 48, 38, 1); - --colors-dark-orange-5: rgba(48, 39, 34, 1); - --colors-dark-orange-0: rgba(31, 31, 31, 1); - --colors-dark-orange--5: rgba(21, 21, 21, 1); - --colors-dark-orange--10: rgba(6, 6, 6, 1); - --colors-dark-red-90: rgba(254, 219, 214, 1); - --colors-dark-red-80: rgba(249, 186, 177, 1); - --colors-dark-red-70: rgba(254, 167, 155, 1); - --colors-dark-red-60: rgba(252, 147, 134, 1); - --colors-dark-red-50: rgba(233, 114, 102, 1); - --colors-dark-red-40: rgba(217, 88, 76, 1); - --colors-dark-red-30: rgba(197, 60, 51, 1); - --colors-dark-red-20: rgba(136, 54, 46, 1); - --colors-dark-red-10: rgba(73, 47, 43, 1); - --colors-dark-red-5: rgba(47, 39, 38, 1); - --colors-dark-red-0: rgba(31, 31, 31, 1); - --colors-dark-red--5: rgba(21, 21, 21, 1); - --colors-dark-red--10: rgba(6, 6, 6, 1); - --colors-dark-neutral-90: rgba(228, 228, 228, 1); - --colors-dark-neutral-80: rgba(202, 202, 202, 1); - --colors-dark-neutral-70: rgba(188, 188, 188, 1); - --colors-dark-neutral-60: rgba(175, 175, 175, 1); - --colors-dark-neutral-50: rgba(151, 151, 151, 1); - --colors-dark-neutral-40: rgba(130, 130, 130, 1); - --colors-dark-neutral-30: rgba(112, 112, 112, 1); - --colors-dark-neutral-20: rgba(81, 81, 81, 1); - --colors-dark-neutral-10: rgba(51, 51, 51, 1); - --colors-dark-neutral-5: rgba(41, 41, 41, 1); - --colors-dark-neutral-0: rgba(31, 31, 31, 1); - --colors-dark-neutral--5: rgba(21, 21, 21, 1); - --colors-dark-neutrala-80: rgba(228, 228, 228, 0.87); - --colors-dark-neutrala-70: rgba(228, 228, 228, 0.795); - --colors-dark-neutrala-60: rgba(228, 228, 228, 0.73); - --colors-dark-neutrala-50: rgba(228, 228, 228, 0.61); - --colors-dark-neutrala-40: rgba(228, 228, 228, 0.505); - --colors-dark-neutrala-30: rgba(228, 228, 228, 0.41); - --colors-dark-neutrala-20: rgba(228, 228, 228, 0.255); - --colors-dark-neutrala-10: rgba(228, 228, 228, 0.1); - --colors-dark-neutrala-5: rgba(228, 228, 228, 0.05); - --colors-dark-neutrala-0: rgba(228, 228, 228, 0); - --colors-dark-neutrala--5: rgba(6, 6, 6, 0.41); - --colors-dark-neutrala--10: rgba(6, 6, 6, 1); - --colors-dark-neutral--10: rgba(6, 6, 6, 1); - --colors-light-magenta-90: rgba(59, 5, 37, 1); - --colors-light-magenta-80: rgba(98, 27, 67, 1); - --colors-light-magenta-70: rgba(141, 33, 96, 1); - --colors-light-magenta-60: rgba(196, 53, 135, 1); - --colors-light-magenta-50: rgba(235, 95, 170, 1); - --colors-light-magenta-40: rgba(250, 131, 192, 1); - --colors-light-magenta-30: rgba(245, 173, 206, 1); - --colors-light-magenta-20: rgba(255, 204, 226, 1); - --colors-light-magenta-10: rgba(251, 226, 237, 1); - --colors-light-magenta-5: rgba(252, 239, 244, 1); - --colors-light-purple-90: rgba(40, 16, 70, 1); - --colors-light-purple-80: rgba(70, 32, 115, 1); - --colors-light-purple-70: rgba(103, 39, 171, 1); - --colors-light-purple-60: rgba(143, 77, 225, 1); - --colors-light-purple-50: rgba(173, 120, 252, 1); - --colors-light-purple-40: rgba(190, 153, 253, 1); - --colors-light-purple-30: rgba(207, 183, 253, 1); - --colors-light-purple-20: rgba(224, 210, 253, 1); - --colors-light-purple-10: rgba(236, 229, 251, 1); - --colors-light-purple-5: rgba(244, 241, 252, 1); - --colors-light-indigo-90: rgba(24, 24, 70, 1); - --colors-light-indigo-80: rgba(45, 47, 109, 1); - --colors-light-indigo-70: rgba(68, 70, 155, 1); - --colors-light-indigo-60: rgba(95, 97, 222, 1); - --colors-light-indigo-50: rgba(129, 136, 253, 1); - --colors-light-indigo-40: rgba(156, 165, 252, 1); - --colors-light-indigo-30: rgba(181, 189, 253, 1); - --colors-light-indigo-20: rgba(210, 216, 252, 1); - --colors-light-indigo-10: rgba(226, 231, 253, 1); - --colors-light-indigo-5: rgba(241, 242, 253, 1); - --colors-light-blue-90: rgba(3, 35, 63, 1); - --colors-light-blue-80: rgba(19, 58, 93, 1); - --colors-light-blue-70: rgba(24, 81, 130, 1); - --colors-light-blue-60: rgba(31, 117, 188, 1); - --colors-light-blue-50: rgba(0, 150, 250, 1); - --colors-light-blue-40: rgba(85, 178, 253, 1); - --colors-light-blue-30: rgba(137, 200, 253, 1); - --colors-light-blue-20: rgba(188, 222, 252, 1); - --colors-light-blue-10: rgba(216, 235, 251, 1); - --colors-light-blue-5: rgba(236, 244, 253, 1); - --colors-light-blue-0: rgba(255, 255, 255, 1); - --colors-light-turquoise-90: rgba(1, 37, 37, 1); - --colors-light-turquoise-80: rgba(1, 61, 62, 1); - --colors-light-turquoise-70: rgba(3, 87, 89, 1); - --colors-light-turquoise-60: rgba(11, 126, 128, 1); - --colors-light-turquoise-50: rgba(27, 161, 163, 1); - --colors-light-turquoise-40: rgba(63, 184, 186, 1); - --colors-light-turquoise-30: rgba(109, 204, 205, 1); - --colors-light-turquoise-20: rgba(152, 228, 229, 1); - --colors-light-turquoise-10: rgba(196, 240, 241, 1); - --colors-light-turquoise-5: rgba(225, 249, 249, 1); - --colors-light-turquoise-0: rgba(255, 255, 255, 1); - --colors-light-green-90: rgba(1, 40, 0, 1); - --colors-light-green-80: rgba(7, 64, 4, 1); - --colors-light-green-70: rgba(4, 93, 0, 1); - --colors-light-green-60: rgba(17, 131, 8, 1); - --colors-light-green-50: rgba(37, 170, 28, 1); - --colors-light-green-40: rgba(80, 192, 72, 1); - --colors-light-green-30: rgba(121, 214, 112, 1); - --colors-light-green-20: rgba(164, 234, 157, 1); - --colors-light-green-10: rgba(204, 243, 200, 1); - --colors-light-green-5: rgba(234, 248, 232, 1); - --colors-light-green-0: rgba(255, 255, 255, 1); - --colors-light-yellow-90: rgba(44, 28, 0, 1); - --colors-light-yellow-80: rgba(74, 51, 7, 1); - --colors-light-yellow-70: rgba(110, 72, 5, 1); - --colors-light-yellow-60: rgba(161, 99, 9, 1); - --colors-light-yellow-50: rgba(205, 131, 2, 1); - --colors-light-yellow-40: rgba(231, 157, 20, 1); - --colors-light-yellow-30: rgba(245, 183, 17, 1); - --colors-light-yellow-20: rgba(254, 214, 61, 1); - --colors-light-yellow-10: rgba(246, 232, 176, 1); - --colors-light-yellow-5: rgba(250, 243, 221, 1); - --colors-light-yellow-0: rgba(255, 255, 255, 1); - --colors-light-orange-90: rgba(55, 18, 2, 1); - --colors-light-orange-80: rgba(91, 38, 13, 1); - --colors-light-orange-70: rgba(132, 54, 7, 1); - --colors-light-orange-60: rgba(190, 79, 4, 1); - --colors-light-orange-50: rgba(242, 105, 21, 1); - --colors-light-orange-40: rgba(253, 143, 53, 1); - --colors-light-orange-30: rgba(254, 176, 121, 1); - --colors-light-orange-20: rgba(253, 209, 177, 1); - --colors-light-orange-10: rgba(252, 229, 211, 1); - --colors-light-orange-5: rgba(253, 241, 229, 1); - --colors-light-red-90: rgba(66, 0, 1, 1); - --colors-light-red-80: rgba(103, 22, 17, 1); - --colors-light-red-70: rgba(147, 33, 28, 1); - --colors-light-red-60: rgba(206, 54, 46, 1); - --colors-light-red-50: rgba(253, 91, 78, 1); - --colors-light-red-40: rgba(252, 138, 124, 1); - --colors-light-red-30: rgba(253, 174, 163, 1); - --colors-light-red-20: rgba(253, 206, 199, 1); - --colors-light-red-10: rgba(250, 228, 225, 1); - --colors-light-red-5: rgba(253, 240, 237, 1); - --colors-light-red-0: rgba(255, 255, 255, 1); - --colors-light-neutral-90: rgba(31, 31, 31, 1); - --colors-light-neutral-80: rgba(56, 56, 56, 1); - --colors-light-neutral-70: rgba(81, 81, 81, 1); - --colors-light-neutral-60: rgba(113, 113, 113, 1); - --colors-light-neutral-50: rgba(148, 148, 148, 1); - --colors-light-neutral-40: rgba(172, 172, 172, 1); - --colors-light-neutral-30: rgba(194, 194, 194, 1); - --colors-light-neutral-20: rgba(217, 217, 217, 1); - --colors-light-neutral-10: rgba(232, 232, 232, 1); - --colors-light-neutral-5: rgba(243, 243, 243, 1); - --colors-light-neutrala-80: rgba(31, 31, 31, 0.885); - --colors-light-neutrala-70: rgba(31, 31, 31, 0.775); - --colors-light-neutrala-60: rgba(31, 31, 31, 0.635); - --colors-light-neutrala-50: rgba(31, 31, 31, 0.475); - --colors-light-neutrala-40: rgba(31, 31, 31, 0.37); - --colors-light-neutrala-30: rgba(31, 31, 31, 0.27); - --colors-light-neutrala-20: rgba(31, 31, 31, 0.17); - --colors-light-neutrala-10: rgba(31, 31, 31, 0.102); - --colors-light-neutrala-5: rgba(31, 31, 31, 0.055); - --colors-light-neutrala-0: rgba(31, 31, 31, 0); - --colors-light-neutral-0: rgba(255, 255, 255, 1); - --brand-color-factory: rgba(0, 184, 205, 1); - --brand-color-booth: rgba(252, 77, 80, 1); - --brand-color-comic: rgba(255, 196, 0, 1); - --brand-color-premium: rgba(253, 158, 22, 1); - --brand-color-pixiv: rgba(0, 150, 250, 1); - --space-layout-100: var(--spacings-space-100); - --space-layout-90: var(--spacings-space-90); - --space-layout-80: var(--spacings-space-80); - --space-layout-70: var(--spacings-space-70); - --space-layout-60: var(--spacings-space-60); - --space-layout-50: var(--spacings-space-50); - --space-layout-40: var(--spacings-space-40); - --space-layout-30: var(--spacings-space-30); - --space-layout-20: var(--spacings-space-20); - --space-layout-10: var(--spacings-space-10); - --space-layout-0: var(--spacings-space-0); - --space-component-66: var(--spacings-space-66); - --space-component-63: var(--spacings-space-63); - --space-component-60: var(--spacings-space-60); - --space-component-55: var(--spacings-space-55); - --space-component-50: var(--spacings-space-50); - --space-component-46: var(--spacings-space-46); - --space-component-43: var(--spacings-space-43); - --space-component-40: var(--spacings-space-40); - --space-component-35: var(--spacings-space-35); - --space-component-30: var(--spacings-space-30); - --space-component-25: var(--spacings-space-25); - --space-component-20: var(--spacings-space-20); - --space-component-15: var(--spacings-space-15); - --space-component-10: var(--spacings-space-10); - --space-component-1: var(--spacings-space-1); - --space-component-0: var(--spacings-space-0); - --color-border-negative: var(--colors-light-red-20); - --color-border-focus: var(--colors-light-blue-20); - --color-border-disable: var(--colors-light-neutrala-10); - --color-border-secondary: var(--colors-light-neutrala-10); - --color-border-default: var(--colors-light-neutrala-50); - --color-icon-on-neutral-press: var(--colors-light-neutral-10); - --color-icon-on-neutral-hover: var(--colors-light-neutral-5); - --color-icon-on-neutral-default: var(--colors-light-neutral-0); - --color-text-brand-premium-default: var(--brand-color-premium); - --color-text-on-hud-press: var(--colors-dark-neutral-90); - --color-text-on-hud-hover: var(--colors-dark-neutral-90); - --color-text-on-hud-default: var(--colors-dark-neutral-90); - --color-text-on-discovery-press: var(--colors-light-neutral-0); - --color-text-on-discovery-hover: var(--colors-light-neutral-0); - --color-text-on-discovery-default: var(--colors-light-neutral-0); - --color-text-on-notice-press: var(--colors-light-neutral-90); - --color-text-on-notice-hover: var(--colors-light-neutral-90); - --color-text-on-notice-default: var(--colors-light-neutral-90); - --color-text-on-positive-press: var(--colors-light-neutral-0); - --color-text-on-positive-hover: var(--colors-light-neutral-0); - --color-text-on-positive-default: var(--colors-light-neutral-0); - --color-text-on-negative-press: var(--colors-light-neutral-0); - --color-text-on-negative-hover: var(--colors-light-neutral-0); - --color-text-on-negative-default: var(--colors-light-neutral-0); - --color-text-on-primary-press: var(--colors-light-neutral-0); - --color-text-on-primary-hover: var(--colors-light-neutral-0); - --color-text-on-on-img-press: var(--colors-light-neutral-0); - --color-text-on-on-img-hover: var(--colors-light-neutral-0); - --color-text-on-on-img-default: var(--colors-light-neutral-0); - --color-text-on-primary-default: var(--colors-light-neutral-0); - --color-text-visited-press: var(--colors-light-purple-90); - --color-text-visited-hover: var(--colors-light-purple-80); - --color-text-visited-default: var(--colors-light-purple-70); - --color-text-info-press: var(--colors-light-blue-80); - --color-text-info-hover: var(--colors-light-blue-70); - --color-text-info-default: var(--colors-light-blue-60); - --color-text-notice-press: var(--colors-light-yellow-80); - --color-text-notice-hover: var(--colors-light-yellow-70); - --color-text-notice-default: var(--colors-light-yellow-60); - --color-text-positive-press: var(--colors-light-green-80); - --color-text-positive-hover: var(--colors-light-green-70); - --color-text-positive-default: var(--colors-light-green-60); - --color-text-negative-press: var(--colors-light-red-80); - --color-text-negative-hover: var(--colors-light-red-70); - --color-text-negative-default: var(--colors-light-red-60); - --color-text-placeholder-press: var(--colors-light-neutral-70); - --color-text-placeholder-hover: var(--colors-light-neutral-60); - --color-text-placeholder-default: var(--colors-light-neutral-50); - --color-text-tertiary-press: var(--colors-light-neutral-80); - --color-text-tertiary-hover: var(--colors-light-neutral-70); - --color-text-tertiary-default: var(--colors-light-neutral-60); - --color-text-secondary-press: var(--colors-light-neutral-90); - --color-text-secondary-hover: var(--colors-light-neutral-80); - --color-text-secondary-default: var(--colors-light-neutral-70); - --color-text-disable: var(--colors-light-neutral-30); - --color-text-press: var(--colors-light-neutral-70); - --color-text-hover: var(--colors-light-neutral-80); - --color-text-default: var(--colors-light-neutral-90); - --color-container-skeleton: var(--colors-light-neutrala-5); - --color-container-hud-press: var(--colors-light-neutral-60); - --color-container-hud-hover: var(--colors-light-neutral-70); - --color-container-hud-default: var(--colors-light-neutral-80); - --color-container-neutral-press: var(--colors-light-neutral-70); - --color-container-neutral-hover: var(--colors-light-neutral-60); - --color-container-discovery-press: var(--colors-light-red-70); - --color-container-discovery-hover: var(--colors-light-red-60); - --color-container-discovery-default: var(--colors-light-red-50); - --color-container-neutral-default: var(--colors-light-neutral-50); - --color-container-notice-press: var(--colors-light-yellow-40); - --color-container-notice-hover: var(--colors-light-yellow-30); - --color-container-notice-default: var(--colors-light-yellow-20); - --color-container-positive-press: var(--colors-light-green-70); - --color-container-positive-hover: var(--colors-light-green-60); - --color-container-positive-default: var(--colors-light-green-50); - --color-container-negative-press: var(--colors-light-red-70); - --color-container-negative-hover: var(--colors-light-red-60); - --color-container-negative-default: var(--colors-light-red-50); - --color-container-on-img-press: var(--colors-light-neutrala-60); - --color-container-on-img-hover: var(--colors-light-neutrala-50); - --color-container-on-img-default: var(--colors-light-neutrala-40); - --color-container-secondary-pressa: var(--colors-light-neutrala-20); - --color-container-secondary-hovera: var(--colors-light-neutrala-10); - --color-container-secondary-defaulta: var(--colors-light-neutrala-5); - --color-container-secondary-press: var(--colors-light-neutral-20); - --color-container-secondary-hover: var(--colors-light-neutral-10); - --color-container-primary-press: var(--colors-light-blue-70); - --color-container-primary-hover: var(--colors-light-blue-60); - --color-container-primary-default: var(--colors-light-blue-50); - --color-container-tertiary-pressa: var(--colors-light-neutrala-30); - --color-container-tertiary-hovera: var(--colors-light-neutrala-20); - --color-container-tertiary-defaulta: var(--colors-light-neutrala-10); - --color-container-tertiary-press: var(--colors-light-neutral-30); - --color-container-tertiary-hover: var(--colors-light-neutral-20); - --color-container-tertiary-default: var(--colors-light-neutral-10); - --color-container-secondary-default: var(--colors-light-neutral-5); - --color-container-disable: var(--colors-light-neutral-10); - --color-container-press: var(--colors-light-neutral-10); - --color-container-hover: var(--colors-light-neutral-5); - --color-container-default: var(--colors-light-neutral-0); - --color-background-tertiary: var(--colors-light-neutral-10); - --color-background-secondary: var(--colors-light-neutral-5); - --color-background-default: var(--colors-light-neutral-0); - --colors-dark-neutrala-90: var(--colors-dark-neutral-90); - --colors-light-neutrala-90: var(--colors-light-neutral-90); - --color-icon-on-positive-press: var(--color-text-on-positive-press); - --color-icon-on-positive-hover: var(--color-text-on-positive-hover); - --color-icon-on-notice-press: var(--color-text-on-notice-press); - --color-icon-on-notice-hover: var(--color-text-on-notice-hover); - --color-icon-on-notice-default: var(--color-text-on-notice-default); - --color-icon-on-positive-default: var(--color-text-on-positive-default); - --color-icon-on-negative-press: var(--color-text-on-negative-press); - --color-icon-on-negative-hover: var(--color-text-on-negative-hover); - --color-icon-on-negative-default: var(--color-text-on-negative-default); - --color-icon-on-on-img-press: var(--color-text-on-on-img-press); - --color-icon-on-on-img-hover: var(--color-text-on-on-img-hover); - --color-icon-on-on-img-default: var(--color-text-on-on-img-default); - --color-icon-on-primary-press: var(--color-text-on-primary-press); - --color-icon-on-primary-hover: var(--color-text-on-primary-hover); - --color-icon-on-primary-default: var(--color-text-on-primary-default); - --color-icon-disable: var(--color-text-disable); - --color-icon-press: var(--color-text-press); - --color-icon-hover: var(--color-text-hover); - --color-icon-default: var(--color-text-default); - --color-icon-secondary-press: var(--color-text-secondary-press); - --color-icon-secondary-hover: var(--color-text-secondary-hover); - --color-icon-tertiary-press: var(--color-text-tertiary-press); - --color-icon-tertiary-hover: var(--color-text-tertiary-hover); - --color-icon-notice-press: var(--color-text-notice-press); - --color-icon-notice-hover: var(--color-text-notice-hover); - --color-icon-notice-default: var(--color-text-notice-default); - --color-icon-positive-press: var(--color-text-positive-hover); - --color-icon-positive-hover: var(--color-text-positive-hover); - --color-icon-positive-default: var(--color-text-positive-default); - --color-icon-negative-press: var(--color-text-negative-press); - --color-icon-negative-hover: var(--color-text-negative-hover); - --color-icon-negative-default: var(--color-text-negative-default); - --color-icon-tertiary-default: var(--color-text-tertiary-default); - --color-icon-secondary-default: var(--color-text-secondary-default); +:root[data-color-scheme='light'], :root:not([data-color-scheme]) { + --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-text-font-family-sans: Sarasa UI J; + --charcoal-text-line-height-100: 72; + --charcoal-text-line-height-90: 64; + --charcoal-text-line-height-80: 56; + --charcoal-text-line-height-70: 52; + --charcoal-text-line-height-60: 44; + --charcoal-text-line-height-50: 40; + --charcoal-text-line-height-40: 36; + --charcoal-text-line-height-30: 32; + --charcoal-text-line-height-20: 28; + --charcoal-text-line-height-10: 24; + --charcoal-text-line-height-5: 20; + --charcoal-text-line-height-1: 18; + --charcoal-text-font-weight-70: 700; + --charcoal-text-font-weight-40: 400; + --charcoal-text-line-height-0: 16; + --charcoal-text-font-size-120: 60; + --charcoal-text-font-size-110: 50; + --charcoal-text-font-size-100: 45; + --charcoal-text-font-size-90: 40; + --charcoal-text-font-size-80: 36; + --charcoal-text-font-size-70: 32; + --charcoal-text-font-size-60: 28; + --charcoal-text-font-size-50: 25; + --charcoal-text-font-size-40: 22; + --charcoal-text-font-size-30: 20; + --charcoal-text-font-size-20: 18; + --charcoal-text-font-size-10: 16; + --charcoal-text-font-size-5: 14; + --charcoal-text-font-size-1: 12; + --charcoal-text-font-size-0: 11; + --charcoal-space-target-l: 48; + --charcoal-space-target-m: 40; + --charcoal-space-target-s: 32; + --charcoal-space-target-xs: 24; + --charcoal-space-999: 999999; + --charcoal-space-100: 440; + --charcoal-space-90: 272; + --charcoal-space-80: 168; + --charcoal-space-70: 104; + --charcoal-space-66: 96; + --charcoal-space-63: 80; + --charcoal-space-60: 64; + --charcoal-space-55: 48; + --charcoal-space-50: 40; + --charcoal-space-46: 32; + --charcoal-space-43: 28; + --charcoal-space-40: 24; + --charcoal-space-35: 20; + --charcoal-space-30: 16; + --charcoal-space-25: 12; + --charcoal-space-20: 8; + --charcoal-space-15: 6; + --charcoal-space-10: 4; + --charcoal-space-1: 2; + --charcoal-space-0: 0; + --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-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-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-space-layout-100: var(--charcoal-space-100); + --charcoal-space-layout-90: var(--charcoal-space-90); + --charcoal-space-layout-80: var(--charcoal-space-80); + --charcoal-space-layout-70: var(--charcoal-space-70); + --charcoal-space-layout-60: var(--charcoal-space-60); + --charcoal-space-layout-50: var(--charcoal-space-50); + --charcoal-space-layout-40: var(--charcoal-space-40); + --charcoal-space-layout-30: var(--charcoal-space-30); + --charcoal-space-layout-20: var(--charcoal-space-20); + --charcoal-space-layout-10: var(--charcoal-space-10); + --charcoal-space-layout-0: var(--charcoal-space-0); + --charcoal-space-component-66: var(--charcoal-space-66); + --charcoal-space-component-63: var(--charcoal-space-63); + --charcoal-space-component-60: var(--charcoal-space-60); + --charcoal-space-component-55: var(--charcoal-space-55); + --charcoal-space-component-50: var(--charcoal-space-50); + --charcoal-space-component-46: var(--charcoal-space-46); + --charcoal-space-component-43: var(--charcoal-space-43); + --charcoal-space-component-40: var(--charcoal-space-40); + --charcoal-space-component-35: var(--charcoal-space-35); + --charcoal-space-component-30: var(--charcoal-space-30); + --charcoal-space-component-25: var(--charcoal-space-25); + --charcoal-space-component-20: var(--charcoal-space-20); + --charcoal-space-component-15: var(--charcoal-space-15); + --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-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-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); + --charcoal-color-icon-on-notice-hover: var(--charcoal-color-text-on-notice-hover); + --charcoal-color-icon-on-notice-default: var(--charcoal-color-text-on-notice-default); + --charcoal-color-icon-on-positive-default: var(--charcoal-color-text-on-positive-default); + --charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press); + --charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover); + --charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default); + --charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press); + --charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover); + --charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default); + --charcoal-color-icon-on-primary-press: var(--charcoal-color-text-on-primary-press); + --charcoal-color-icon-on-primary-hover: var(--charcoal-color-text-on-primary-hover); + --charcoal-color-icon-on-primary-default: var(--charcoal-color-text-on-primary-default); + --charcoal-color-icon-disable: var(--charcoal-color-text-disable); + --charcoal-color-icon-press: var(--charcoal-color-text-press); + --charcoal-color-icon-hover: var(--charcoal-color-text-hover); + --charcoal-color-icon-default: var(--charcoal-color-text-default); + --charcoal-color-icon-secondary-press: var(--charcoal-color-text-secondary-press); + --charcoal-color-icon-secondary-hover: var(--charcoal-color-text-secondary-hover); + --charcoal-color-icon-tertiary-press: var(--charcoal-color-text-tertiary-press); + --charcoal-color-icon-tertiary-hover: var(--charcoal-color-text-tertiary-hover); + --charcoal-color-icon-notice-press: var(--charcoal-color-text-notice-press); + --charcoal-color-icon-notice-hover: var(--charcoal-color-text-notice-hover); + --charcoal-color-icon-notice-default: var(--charcoal-color-text-notice-default); + --charcoal-color-icon-positive-press: var(--charcoal-color-text-positive-hover); + --charcoal-color-icon-positive-hover: var(--charcoal-color-text-positive-hover); + --charcoal-color-icon-positive-default: var(--charcoal-color-text-positive-default); + --charcoal-color-icon-negative-press: var(--charcoal-color-text-negative-press); + --charcoal-color-icon-negative-hover: var(--charcoal-color-text-negative-hover); + --charcoal-color-icon-negative-default: var(--charcoal-color-text-negative-default); + --charcoal-color-icon-tertiary-default: var(--charcoal-color-text-tertiary-default); + --charcoal-color-icon-secondary-default: var(--charcoal-color-text-secondary-default); } diff --git a/packages/theme/src/json/base.json b/packages/theme/src/json/base.json index 36e77424e..39866f4a6 100644 --- a/packages/theme/src/json/base.json +++ b/packages/theme/src/json/base.json @@ -268,28 +268,28 @@ "Dark/Magenta/80": { "value": "rgba(247, 184, 213, 1)" }, "Dark/Magenta/90": { "value": "rgba(253, 217, 233, 1)" } }, - "Spacings": { - "space/0": { "value": "0" }, - "space/1": { "value": "2" }, - "space/10": { "value": "4" }, - "space/15": { "value": "6" }, - "space/20": { "value": "8" }, - "space/25": { "value": "12" }, - "space/30": { "value": "16" }, - "space/35": { "value": "20" }, - "space/40": { "value": "24" }, - "space/43": { "value": "28" }, - "space/46": { "value": "32" }, - "space/50": { "value": "40" }, - "space/55": { "value": "48" }, - "space/60": { "value": "64" }, - "space/63": { "value": "80" }, - "space/66": { "value": "96" }, - "space/70": { "value": "104" }, - "space/80": { "value": "168" }, - "space/90": { "value": "272" }, - "space/100": { "value": "440" }, - "space/999": { "value": "999999" } + "Space": { + "0": { "value": "0" }, + "1": { "value": "2" }, + "10": { "value": "4" }, + "15": { "value": "6" }, + "20": { "value": "8" }, + "25": { "value": "12" }, + "30": { "value": "16" }, + "35": { "value": "20" }, + "40": { "value": "24" }, + "43": { "value": "28" }, + "46": { "value": "32" }, + "50": { "value": "40" }, + "55": { "value": "48" }, + "60": { "value": "64" }, + "63": { "value": "80" }, + "66": { "value": "96" }, + "70": { "value": "104" }, + "80": { "value": "168" }, + "90": { "value": "272" }, + "100": { "value": "440" }, + "999": { "value": "999999" } }, "Text": { "font-size/0": { "value": "11" }, diff --git a/packages/theme/src/json/pixiv-dark.json b/packages/theme/src/json/pixiv-dark.json index 022ab875b..9b83e7ee0 100644 --- a/packages/theme/src/json/pixiv-dark.json +++ b/packages/theme/src/json/pixiv-dark.json @@ -1,181 +1,176 @@ { "Color": { - "pixiv/dark": { - "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}" } - } + "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": { - "target-size/compact": { "value": "24" }, - "target-size/default": { "value": "32" }, - "target-size/cozy": { "value": "48" }, - "component/0": { "value": "{Spacings.space/0}" }, - "component/1": { "value": "{Spacings.space/1}" }, - "component/10": { "value": "{Spacings.space/10}" }, - "component/15": { "value": "{Spacings.space/15}" }, - "component/20": { "value": "{Spacings.space/20}" }, - "component/25": { "value": "{Spacings.space/25}" }, - "component/30": { "value": "{Spacings.space/30}" }, - "component/35": { "value": "{Spacings.space/35}" }, - "component/40": { "value": "{Spacings.space/40}" }, - "component/43": { "value": "{Spacings.space/43}" }, - "component/46": { "value": "{Spacings.space/46}" }, - "component/50": { "value": "{Spacings.space/50}" }, - "component/55": { "value": "{Spacings.space/55}" }, - "component/60": { "value": "{Spacings.space/60}" }, - "component/63": { "value": "{Spacings.space/63}" }, - "component/66": { "value": "{Spacings.space/66}" }, - "layout/0": { "value": "{Spacings.space/0}" }, - "layout/10": { "value": "{Spacings.space/10}" }, - "layout/20": { "value": "{Spacings.space/20}" }, - "layout/30": { "value": "{Spacings.space/30}" }, - "layout/40": { "value": "{Spacings.space/40}" }, - "layout/50": { "value": "{Spacings.space/50}" }, - "layout/60": { "value": "{Spacings.space/60}" }, - "layout/70": { "value": "{Spacings.space/70}" }, - "layout/80": { "value": "{Spacings.space/80}" }, - "layout/90": { "value": "{Spacings.space/90}" }, - "layout/100": { "value": "{Spacings.space/100}" } + "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}" } } } diff --git a/packages/theme/src/json/pixiv-light.json b/packages/theme/src/json/pixiv-light.json index b4895ebef..df2d6bfd7 100644 --- a/packages/theme/src/json/pixiv-light.json +++ b/packages/theme/src/json/pixiv-light.json @@ -141,35 +141,36 @@ "icon/on-positive/press": { "value": "{Color.text/on-positive/press}" } }, "Space": { - "target-size/compact": { "value": "24" }, - "target-size/default": { "value": "32" }, - "target-size/cozy": { "value": "48" }, - "component/0": { "value": "{Spacings.space/0}" }, - "component/1": { "value": "{Spacings.space/1}" }, - "component/10": { "value": "{Spacings.space/10}" }, - "component/15": { "value": "{Spacings.space/15}" }, - "component/20": { "value": "{Spacings.space/20}" }, - "component/25": { "value": "{Spacings.space/25}" }, - "component/30": { "value": "{Spacings.space/30}" }, - "component/35": { "value": "{Spacings.space/35}" }, - "component/40": { "value": "{Spacings.space/40}" }, - "component/43": { "value": "{Spacings.space/43}" }, - "component/46": { "value": "{Spacings.space/46}" }, - "component/50": { "value": "{Spacings.space/50}" }, - "component/55": { "value": "{Spacings.space/55}" }, - "component/60": { "value": "{Spacings.space/60}" }, - "component/63": { "value": "{Spacings.space/63}" }, - "component/66": { "value": "{Spacings.space/66}" }, - "layout/0": { "value": "{Spacings.space/0}" }, - "layout/10": { "value": "{Spacings.space/10}" }, - "layout/20": { "value": "{Spacings.space/20}" }, - "layout/30": { "value": "{Spacings.space/30}" }, - "layout/40": { "value": "{Spacings.space/40}" }, - "layout/50": { "value": "{Spacings.space/50}" }, - "layout/60": { "value": "{Spacings.space/60}" }, - "layout/70": { "value": "{Spacings.space/70}" }, - "layout/80": { "value": "{Spacings.space/80}" }, - "layout/90": { "value": "{Spacings.space/90}" }, - "layout/100": { "value": "{Spacings.space/100}" } + "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}" } } } From 1b020fc4d35e80f78bee5229814d9992ed71ed59 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Thu, 11 Jul 2024 09:51:16 +0000 Subject: [PATCH 003/102] chore(token-cli): change selector --- packages/token-cli/pixiv-dark.config.js | 2 +- packages/token-cli/pixiv-light.config.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/token-cli/pixiv-dark.config.js b/packages/token-cli/pixiv-dark.config.js index 2ecab5547..f6e30d5ba 100644 --- a/packages/token-cli/pixiv-dark.config.js +++ b/packages/token-cli/pixiv-dark.config.js @@ -20,7 +20,7 @@ module.exports = { destination: '_variables_dark.css', format: 'css/variables', options: { - selector: ":root[data-color-scheme='dark']", + selector: ":root[data-theme='dark']", outputReferences: true, }, }, diff --git a/packages/token-cli/pixiv-light.config.js b/packages/token-cli/pixiv-light.config.js index f68b6e826..80b3bff6d 100644 --- a/packages/token-cli/pixiv-light.config.js +++ b/packages/token-cli/pixiv-light.config.js @@ -20,8 +20,7 @@ module.exports = { destination: '_variables_light.css', format: 'css/variables', options: { - selector: - ":root[data-color-scheme='light'], :root:not([data-color-scheme])", + selector: ":root[data-theme='light'], :root:not([data-theme])", outputReferences: true, }, }, From 2e1e61a8445a2c9d8873c2edf137dda52e7bdb8a Mon Sep 17 00:00:00 2001 From: "charcoal-bot[bot]" <102140162+charcoal-bot[bot]@users.noreply.github.com> Date: Thu, 11 Jul 2024 10:03:44 +0000 Subject: [PATCH 004/102] Update theme --- packages/theme/src/css/_variables_dark.css | 120 ++++++++++---------- packages/theme/src/css/_variables_light.css | 120 ++++++++++---------- packages/theme/src/json/base.json | 112 +++++++++--------- 3 files changed, 176 insertions(+), 176 deletions(-) diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css index 1db6b6d1a..ca1904b37 100644 --- a/packages/theme/src/css/_variables_dark.css +++ b/packages/theme/src/css/_variables_dark.css @@ -1,68 +1,12 @@ /** * Do not edit directly - * Generated on Thu, 11 Jul 2024 08:59:35 GMT + * Generated on Thu, 11 Jul 2024 10:03:37 GMT */ -:root[data-color-scheme='dark'] { +: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-text-font-family-sans: Sarasa UI J; - --charcoal-text-line-height-100: 72; - --charcoal-text-line-height-90: 64; - --charcoal-text-line-height-80: 56; - --charcoal-text-line-height-70: 52; - --charcoal-text-line-height-60: 44; - --charcoal-text-line-height-50: 40; - --charcoal-text-line-height-40: 36; - --charcoal-text-line-height-30: 32; - --charcoal-text-line-height-20: 28; - --charcoal-text-line-height-10: 24; - --charcoal-text-line-height-5: 20; - --charcoal-text-line-height-1: 18; - --charcoal-text-font-weight-70: 700; - --charcoal-text-font-weight-40: 400; - --charcoal-text-line-height-0: 16; - --charcoal-text-font-size-120: 60; - --charcoal-text-font-size-110: 50; - --charcoal-text-font-size-100: 45; - --charcoal-text-font-size-90: 40; - --charcoal-text-font-size-80: 36; - --charcoal-text-font-size-70: 32; - --charcoal-text-font-size-60: 28; - --charcoal-text-font-size-50: 25; - --charcoal-text-font-size-40: 22; - --charcoal-text-font-size-30: 20; - --charcoal-text-font-size-20: 18; - --charcoal-text-font-size-10: 16; - --charcoal-text-font-size-5: 14; - --charcoal-text-font-size-1: 12; - --charcoal-text-font-size-0: 11; - --charcoal-space-target-l: 48; - --charcoal-space-target-m: 40; - --charcoal-space-target-s: 32; - --charcoal-space-target-xs: 24; - --charcoal-space-999: 999999; - --charcoal-space-100: 440; - --charcoal-space-90: 272; - --charcoal-space-80: 168; - --charcoal-space-70: 104; - --charcoal-space-66: 96; - --charcoal-space-63: 80; - --charcoal-space-60: 64; - --charcoal-space-55: 48; - --charcoal-space-50: 40; - --charcoal-space-46: 32; - --charcoal-space-43: 28; - --charcoal-space-40: 24; - --charcoal-space-35: 20; - --charcoal-space-30: 16; - --charcoal-space-25: 12; - --charcoal-space-20: 8; - --charcoal-space-15: 6; - --charcoal-space-10: 4; - --charcoal-space-1: 2; - --charcoal-space-0: 0; --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); @@ -321,6 +265,62 @@ --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-text-font-family-sans: Sarasa UI J; + --charcoal-text-line-height-100: 72; + --charcoal-text-line-height-90: 64; + --charcoal-text-line-height-80: 56; + --charcoal-text-line-height-70: 52; + --charcoal-text-line-height-60: 44; + --charcoal-text-line-height-50: 40; + --charcoal-text-line-height-40: 36; + --charcoal-text-line-height-30: 32; + --charcoal-text-line-height-20: 28; + --charcoal-text-line-height-10: 24; + --charcoal-text-line-height-5: 20; + --charcoal-text-line-height-1: 18; + --charcoal-text-font-weight-70: 700; + --charcoal-text-font-weight-40: 400; + --charcoal-text-line-height-0: 16; + --charcoal-text-font-size-120: 60; + --charcoal-text-font-size-110: 50; + --charcoal-text-font-size-100: 45; + --charcoal-text-font-size-90: 40; + --charcoal-text-font-size-80: 36; + --charcoal-text-font-size-70: 32; + --charcoal-text-font-size-60: 28; + --charcoal-text-font-size-50: 25; + --charcoal-text-font-size-40: 22; + --charcoal-text-font-size-30: 20; + --charcoal-text-font-size-20: 18; + --charcoal-text-font-size-10: 16; + --charcoal-text-font-size-5: 14; + --charcoal-text-font-size-1: 12; + --charcoal-text-font-size-0: 11; + --charcoal-space-target-l: 48; + --charcoal-space-target-m: 40; + --charcoal-space-target-s: 32; + --charcoal-space-target-xs: 24; + --charcoal-space-999: 999999; + --charcoal-space-100: 440; + --charcoal-space-90: 272; + --charcoal-space-80: 168; + --charcoal-space-70: 104; + --charcoal-space-66: 96; + --charcoal-space-63: 80; + --charcoal-space-60: 64; + --charcoal-space-55: 48; + --charcoal-space-50: 40; + --charcoal-space-46: 32; + --charcoal-space-43: 28; + --charcoal-space-40: 24; + --charcoal-space-35: 20; + --charcoal-space-30: 16; + --charcoal-space-25: 12; + --charcoal-space-20: 8; + --charcoal-space-15: 6; + --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-comic: rgba(255, 196, 0, 1); @@ -428,6 +428,8 @@ --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-space-layout-100: var(--charcoal-space-100); --charcoal-space-layout-90: var(--charcoal-space-90); --charcoal-space-layout-80: var(--charcoal-space-80); @@ -455,8 +457,6 @@ --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-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-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 16c3872de..5f5339f69 100644 --- a/packages/theme/src/css/_variables_light.css +++ b/packages/theme/src/css/_variables_light.css @@ -1,68 +1,12 @@ /** * Do not edit directly - * Generated on Thu, 11 Jul 2024 08:59:34 GMT + * Generated on Thu, 11 Jul 2024 10:03:36 GMT */ -:root[data-color-scheme='light'], :root:not([data-color-scheme]) { +: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-text-font-family-sans: Sarasa UI J; - --charcoal-text-line-height-100: 72; - --charcoal-text-line-height-90: 64; - --charcoal-text-line-height-80: 56; - --charcoal-text-line-height-70: 52; - --charcoal-text-line-height-60: 44; - --charcoal-text-line-height-50: 40; - --charcoal-text-line-height-40: 36; - --charcoal-text-line-height-30: 32; - --charcoal-text-line-height-20: 28; - --charcoal-text-line-height-10: 24; - --charcoal-text-line-height-5: 20; - --charcoal-text-line-height-1: 18; - --charcoal-text-font-weight-70: 700; - --charcoal-text-font-weight-40: 400; - --charcoal-text-line-height-0: 16; - --charcoal-text-font-size-120: 60; - --charcoal-text-font-size-110: 50; - --charcoal-text-font-size-100: 45; - --charcoal-text-font-size-90: 40; - --charcoal-text-font-size-80: 36; - --charcoal-text-font-size-70: 32; - --charcoal-text-font-size-60: 28; - --charcoal-text-font-size-50: 25; - --charcoal-text-font-size-40: 22; - --charcoal-text-font-size-30: 20; - --charcoal-text-font-size-20: 18; - --charcoal-text-font-size-10: 16; - --charcoal-text-font-size-5: 14; - --charcoal-text-font-size-1: 12; - --charcoal-text-font-size-0: 11; - --charcoal-space-target-l: 48; - --charcoal-space-target-m: 40; - --charcoal-space-target-s: 32; - --charcoal-space-target-xs: 24; - --charcoal-space-999: 999999; - --charcoal-space-100: 440; - --charcoal-space-90: 272; - --charcoal-space-80: 168; - --charcoal-space-70: 104; - --charcoal-space-66: 96; - --charcoal-space-63: 80; - --charcoal-space-60: 64; - --charcoal-space-55: 48; - --charcoal-space-50: 40; - --charcoal-space-46: 32; - --charcoal-space-43: 28; - --charcoal-space-40: 24; - --charcoal-space-35: 20; - --charcoal-space-30: 16; - --charcoal-space-25: 12; - --charcoal-space-20: 8; - --charcoal-space-15: 6; - --charcoal-space-10: 4; - --charcoal-space-1: 2; - --charcoal-space-0: 0; --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); @@ -321,6 +265,62 @@ --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-text-font-family-sans: Sarasa UI J; + --charcoal-text-line-height-100: 72; + --charcoal-text-line-height-90: 64; + --charcoal-text-line-height-80: 56; + --charcoal-text-line-height-70: 52; + --charcoal-text-line-height-60: 44; + --charcoal-text-line-height-50: 40; + --charcoal-text-line-height-40: 36; + --charcoal-text-line-height-30: 32; + --charcoal-text-line-height-20: 28; + --charcoal-text-line-height-10: 24; + --charcoal-text-line-height-5: 20; + --charcoal-text-line-height-1: 18; + --charcoal-text-font-weight-70: 700; + --charcoal-text-font-weight-40: 400; + --charcoal-text-line-height-0: 16; + --charcoal-text-font-size-120: 60; + --charcoal-text-font-size-110: 50; + --charcoal-text-font-size-100: 45; + --charcoal-text-font-size-90: 40; + --charcoal-text-font-size-80: 36; + --charcoal-text-font-size-70: 32; + --charcoal-text-font-size-60: 28; + --charcoal-text-font-size-50: 25; + --charcoal-text-font-size-40: 22; + --charcoal-text-font-size-30: 20; + --charcoal-text-font-size-20: 18; + --charcoal-text-font-size-10: 16; + --charcoal-text-font-size-5: 14; + --charcoal-text-font-size-1: 12; + --charcoal-text-font-size-0: 11; + --charcoal-space-target-l: 48; + --charcoal-space-target-m: 40; + --charcoal-space-target-s: 32; + --charcoal-space-target-xs: 24; + --charcoal-space-999: 999999; + --charcoal-space-100: 440; + --charcoal-space-90: 272; + --charcoal-space-80: 168; + --charcoal-space-70: 104; + --charcoal-space-66: 96; + --charcoal-space-63: 80; + --charcoal-space-60: 64; + --charcoal-space-55: 48; + --charcoal-space-50: 40; + --charcoal-space-46: 32; + --charcoal-space-43: 28; + --charcoal-space-40: 24; + --charcoal-space-35: 20; + --charcoal-space-30: 16; + --charcoal-space-25: 12; + --charcoal-space-20: 8; + --charcoal-space-15: 6; + --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-comic: rgba(255, 196, 0, 1); @@ -428,6 +428,8 @@ --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-space-layout-100: var(--charcoal-space-100); --charcoal-space-layout-90: var(--charcoal-space-90); --charcoal-space-layout-80: var(--charcoal-space-80); @@ -455,8 +457,6 @@ --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-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-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 39866f4a6..63583468d 100644 --- a/packages/theme/src/json/base.json +++ b/packages/theme/src/json/base.json @@ -6,6 +6,62 @@ "BOOTH": { "value": "rgba(252, 77, 80, 1)" }, "FACTORY": { "value": "rgba(0, 184, 205, 1)" } }, + "Space": { + "0": { "value": "0" }, + "1": { "value": "2" }, + "10": { "value": "4" }, + "15": { "value": "6" }, + "20": { "value": "8" }, + "25": { "value": "12" }, + "30": { "value": "16" }, + "35": { "value": "20" }, + "40": { "value": "24" }, + "43": { "value": "28" }, + "46": { "value": "32" }, + "50": { "value": "40" }, + "55": { "value": "48" }, + "60": { "value": "64" }, + "63": { "value": "80" }, + "66": { "value": "96" }, + "70": { "value": "104" }, + "80": { "value": "168" }, + "90": { "value": "272" }, + "100": { "value": "440" }, + "999": { "value": "999999" } + }, + "Text": { + "font-size/0": { "value": "11" }, + "font-size/1": { "value": "12" }, + "font-size/5": { "value": "14" }, + "font-size/10": { "value": "16" }, + "font-size/20": { "value": "18" }, + "font-size/30": { "value": "20" }, + "font-size/40": { "value": "22" }, + "font-size/50": { "value": "25" }, + "font-size/60": { "value": "28" }, + "font-size/70": { "value": "32" }, + "font-size/80": { "value": "36" }, + "font-size/90": { "value": "40" }, + "font-size/100": { "value": "45" }, + "font-size/110": { "value": "50" }, + "font-size/120": { "value": "60" }, + "line-height/0": { "value": "16" }, + "font-weight/40": { "value": "400" }, + "font-weight/70": { "value": "700" }, + "line-height/1": { "value": "18" }, + "line-height/5": { "value": "20" }, + "line-height/10": { "value": "24" }, + "line-height/20": { "value": "28" }, + "line-height/30": { "value": "32" }, + "line-height/40": { "value": "36" }, + "line-height/50": { "value": "40" }, + "line-height/60": { "value": "44" }, + "line-height/70": { "value": "52" }, + "line-height/80": { "value": "56" }, + "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)" }, @@ -267,61 +323,5 @@ "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)" } - }, - "Space": { - "0": { "value": "0" }, - "1": { "value": "2" }, - "10": { "value": "4" }, - "15": { "value": "6" }, - "20": { "value": "8" }, - "25": { "value": "12" }, - "30": { "value": "16" }, - "35": { "value": "20" }, - "40": { "value": "24" }, - "43": { "value": "28" }, - "46": { "value": "32" }, - "50": { "value": "40" }, - "55": { "value": "48" }, - "60": { "value": "64" }, - "63": { "value": "80" }, - "66": { "value": "96" }, - "70": { "value": "104" }, - "80": { "value": "168" }, - "90": { "value": "272" }, - "100": { "value": "440" }, - "999": { "value": "999999" } - }, - "Text": { - "font-size/0": { "value": "11" }, - "font-size/1": { "value": "12" }, - "font-size/5": { "value": "14" }, - "font-size/10": { "value": "16" }, - "font-size/20": { "value": "18" }, - "font-size/30": { "value": "20" }, - "font-size/40": { "value": "22" }, - "font-size/50": { "value": "25" }, - "font-size/60": { "value": "28" }, - "font-size/70": { "value": "32" }, - "font-size/80": { "value": "36" }, - "font-size/90": { "value": "40" }, - "font-size/100": { "value": "45" }, - "font-size/110": { "value": "50" }, - "font-size/120": { "value": "60" }, - "line-height/0": { "value": "16" }, - "font-weight/40": { "value": "400" }, - "font-weight/70": { "value": "700" }, - "line-height/1": { "value": "18" }, - "line-height/5": { "value": "20" }, - "line-height/10": { "value": "24" }, - "line-height/20": { "value": "28" }, - "line-height/30": { "value": "32" }, - "line-height/40": { "value": "36" }, - "line-height/50": { "value": "40" }, - "line-height/60": { "value": "44" }, - "line-height/70": { "value": "52" }, - "line-height/80": { "value": "56" }, - "line-height/90": { "value": "64" }, - "line-height/100": { "value": "72" }, - "font-family/sans": { "value": "Sarasa UI J" } } } From 29bc1e30fcde022b30f1143f2f66914804053103 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 17 Jul 2024 02:43:20 +0000 Subject: [PATCH 005/102] chore: replace variables css --- .storybook/theme-decorator.tsx | 16 ++++++---------- packages/theme/package.json | 18 ++++++++++++++---- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx index c66ed63b9..1cfa875b6 100644 --- a/.storybook/theme-decorator.tsx +++ b/.storybook/theme-decorator.tsx @@ -1,8 +1,12 @@ -import { useLayoutEffect } from 'react' +import React, { useLayoutEffect } from 'react' import { ThemeProvider } from 'styled-components' import { useDarkMode } from 'storybook-dark-mode' import { light, dark } from '@charcoal-ui/theme' -import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled' +import { themeSetter } from '@charcoal-ui/styled' + +// +import '../packages/theme/src/css/_variables_dark.css' +import '../packages/theme/src/css/_variables_light.css' const setter = themeSetter() @@ -20,14 +24,6 @@ const Theme = ({ children }) => { return (
{children}
- ) } diff --git a/packages/theme/package.json b/packages/theme/package.json index 8e3945ceb..53b1497b1 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -5,10 +5,20 @@ "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", "exports": { - "types": "./dist/index.d.ts", - "require": "./dist/index.cjs.js", - "import": "./dist/index.esm.js", - "default": "./dist/index.esm.js" + ".": { + "types": "./dist/index.d.ts", + "require": "./dist/index.cjs.js", + "import": "./dist/index.esm.js", + "default": "./dist/index.esm.js" + }, + "./dark.css": { + "require": "./dist/css/_variables_dark.css", + "import": "./dist/css/_variables_dark.css" + }, + "./light.css": { + "require": "./dist/css/_variables_light.css", + "import": "./dist/css/_variables_light.css" + } }, "types": "./dist/index.d.ts", "sideEffects": [ From e5129302b5e17a1afc3e7a9e05891f72980b8276 Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 13:56:49 +0900 Subject: [PATCH 006/102] chore: remove comment --- .storybook/theme-decorator.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx index 1cfa875b6..4dac09046 100644 --- a/.storybook/theme-decorator.tsx +++ b/.storybook/theme-decorator.tsx @@ -4,7 +4,6 @@ import { useDarkMode } from 'storybook-dark-mode' import { light, dark } from '@charcoal-ui/theme' import { themeSetter } from '@charcoal-ui/styled' -// import '../packages/theme/src/css/_variables_dark.css' import '../packages/theme/src/css/_variables_light.css' From aa6f66e4ace392965133772b612ae6641ef258a5 Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 13:57:17 +0900 Subject: [PATCH 007/102] chore: replace `--charcoal` `--charcoal-color` --- .../react/src/components/Button/index.css | 60 +++++++++---------- .../Checkbox/CheckboxInput/index.css | 20 +++---- .../Checkbox/CheckboxInput/index.story.tsx | 2 +- .../react/src/components/Checkbox/index.css | 2 +- .../DropdownMenuItem/index.css | 4 +- .../DropdownSelector/ListItem/index.css | 2 +- .../DropdownSelector/MenuItemGroup/index.css | 2 +- .../DropdownSelector/Popover/index.css | 4 +- .../src/components/DropdownSelector/index.css | 12 ++-- .../react/src/components/FieldLabel/index.css | 6 +- .../react/src/components/IconButton/index.css | 32 +++++----- .../src/components/LoadingSpinner/index.css | 14 ++--- .../src/components/Modal/Dialog/index.css | 2 +- .../src/components/Modal/ModalPlumbing.css | 2 +- packages/react/src/components/Modal/index.css | 4 +- .../src/components/Modal/index.story.tsx | 2 +- .../src/components/Radio/RadioInput/index.css | 20 +++---- packages/react/src/components/Radio/index.css | 2 +- .../src/components/SegmentedControl/index.css | 8 +-- .../components/Switch/SwitchInput/index.css | 18 +++--- .../react/src/components/Switch/index.css | 2 +- .../react/src/components/TagItem/index.css | 20 +++---- .../src/components/TagItem/index.story.tsx | 2 +- .../react/src/components/TextArea/index.css | 16 ++--- .../TextField/AssistiveText/index.css | 4 +- .../components/TextField/TextField.story.tsx | 2 +- .../react/src/components/TextField/index.css | 12 ++-- 27 files changed, 138 insertions(+), 138 deletions(-) diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index 9f179b7c9..4c1412b64 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -24,8 +24,8 @@ font-size: 14px; line-height: 22px; font-weight: bold; - color: var(--charcoal-text2); - background-color: var(--charcoal-surface3); + color: var(--charcoal-color-text2); + background-color: var(--charcoal-color-surface3); transition: 0.2s color, 0.2s background-color, 0.2s box-shadow; height: 40px; } @@ -41,77 +41,77 @@ } .charcoal-button:not(:disabled):hover { - color: var(--charcoal-text2-hover); - background-color: var(--charcoal-surface3-hover); + color: var(--charcoal-color-text2-hover); + background-color: var(--charcoal-color-surface3-hover); } .charcoal-button:not(:disabled):active, .charcoal-button[data-active='true'] { - color: var(--charcoal-text2-press); - background-color: var(--charcoal-surface3-press); + color: var(--charcoal-color-text2-press); + background-color: var(--charcoal-color-surface3-press); } .charcoal-button[data-variant='Primary'] { - color: var(--charcoal-text5); - background-color: var(--charcoal-brand); + color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-brand); } .charcoal-button[data-variant='Primary']:hover:not(:disabled) { - color: var(--charcoal-text5-hover); - background-color: var(--charcoal-brand-hover); + color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-brand-hover); } .charcoal-button[data-variant='Primary']:active:not(:disabled), .charcoal-button[data-variant='Primary'][data-active='true'] { - color: var(--charcoal-text5-press); - background-color: var(--charcoal-brand-press); + color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-brand-press); } .charcoal-button[data-variant='Overlay'] { - color: var(--charcoal-text5); - background-color: var(--charcoal-surface4); + color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-surface4); } .charcoal-button[data-variant='Overlay']:hover:not(:disabled) { - color: var(--charcoal-text5-hover); - background-color: var(--charcoal-surface4-hover); + color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-surface4-hover); } .charcoal-button[data-variant='Overlay']:active:not(:disabled), .charcoal-button[data-variant='Overlay'][data-active='true'] { - color: var(--charcoal-text5-press); - background-color: var(--charcoal-surface4-press); + color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-surface4-press); } .charcoal-button[data-variant='Navigation'] { - color: var(--charcoal-text5); - background-color: var(--charcoal-surface6); + color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-surface6); } .charcoal-button[data-variant='Navigation']:hover:not(:disabled) { - color: var(--charcoal-text5-hover); - background-color: var(--charcoal-surface6-hover); + color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-surface6-hover); } .charcoal-button[data-variant='Navigation']:active:not(:disabled), .charcoal-button[data-variant='Navigation'][data-active='true'] { - color: var(--charcoal-text5-press); - background-color: var(--charcoal-surface6-press); + color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-surface6-press); } .charcoal-button[data-variant='Danger'] { - color: var(--charcoal-text5); - background-color: var(--charcoal-assertive); + color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-assertive); } .charcoal-button[data-variant='Danger']:hover:not(:disabled) { - color: var(--charcoal-text5-hover); - background-color: var(--charcoal-assertive-hover); + color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-assertive-hover); } .charcoal-button[data-variant='Danger']:active:not(:disabled), .charcoal-button[data-variant='Danger'][data-active='true'] { - color: var(--charcoal-text5-press); - background-color: var(--charcoal-assertive-press); + color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-assertive-press); } .charcoal-button[data-size='S'] { diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css index 47e2cd077..05b27e3db 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/index.css +++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css @@ -18,7 +18,7 @@ } .charcoal-checkbox-input:checked { - background-color: var(--charcoal-brand); + background-color: var(--charcoal-color-brand); } .charcoal-checkbox-input:checked::after { @@ -36,7 +36,7 @@ .charcoal-checkbox-input:not(:checked) { border-width: 2px; border-style: solid; - border-color: var(--charcoal-text4); + border-color: var(--charcoal-color-text4); } .charcoal-checkbox-input:not(:disabled):focus { @@ -51,10 +51,10 @@ } .charcoal-checkbox-input:checked:not(:disabled):hover { - background-color: var(--charcoal-brand-hover); + background-color: var(--charcoal-color-brand-hover); } .charcoal-checkbox-input:checked:not(:disabled):active { - background-color: var(--charcoal-brand-press); + background-color: var(--charcoal-color-brand-press); } .charcoal-checkbox-input[aria-invalid='true'], @@ -64,19 +64,19 @@ .charcoal-checkbox-input[data-rounded='true'] { border-radius: 10px; - background-color: var(--charcoal-surface3); + background-color: var(--charcoal-color-surface3); border: 2px solid transparent; } .charcoal-checkbox-input[data-rounded='true']:checked { - background-color: var(--charcoal-brand); + background-color: var(--charcoal-color-brand); } .charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover { - background-color: var(--charcoal-surface3-hover); + background-color: var(--charcoal-color-surface3-hover); } .charcoal-checkbox-input[data-rounded='true']:not(:disabled):active { - background-color: var(--charcoal-surface3-press); + background-color: var(--charcoal-color-surface3-press); } .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible { @@ -84,10 +84,10 @@ } .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover { - background-color: var(--charcoal-brand-hover); + background-color: var(--charcoal-color-brand-hover); } .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active { - background-color: var(--charcoal-brand-press); + background-color: var(--charcoal-color-brand-press); } .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'], diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx b/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx index 9258ac814..1b563f31e 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx +++ b/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx @@ -42,7 +42,7 @@ export const Rounded: StoryObj = { const [checked, setChecked] = useState(false) return (
diff --git a/packages/react/src/components/Checkbox/index.css b/packages/react/src/components/Checkbox/index.css index f9d9b5c18..96ccd0001 100644 --- a/packages/react/src/components/Checkbox/index.css +++ b/packages/react/src/components/Checkbox/index.css @@ -15,7 +15,7 @@ } .charcoal-checkbox__label_div { - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); font-size: 14px; line-height: 20px; } diff --git a/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css index 6c3c8f3d6..d17ba7e08 100644 --- a/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css +++ b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css @@ -1,7 +1,7 @@ .charcoal-dropdown-selector-menu-item { font-size: 14px; line-height: 22px; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); padding: 9px 0; display: flex; @@ -15,6 +15,6 @@ } .charcoal-dropdown-selector-menu-item-icon { - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); padding-right: 4px; } diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.css b/packages/react/src/components/DropdownSelector/ListItem/index.css index 4fabf12bb..745335b3f 100644 --- a/packages/react/src/components/DropdownSelector/ListItem/index.css +++ b/packages/react/src/components/DropdownSelector/ListItem/index.css @@ -15,7 +15,7 @@ .charcoal-list-item:not([aria-disabled='true']):hover, .charcoal-list-item:not([aria-disabled='true']):focus, .charcoal-list-item:not([aria-disabled='true']):focus-within { - background-color: var(--charcoal-surface3); + background-color: var(--charcoal-color-surface3); } .charcoal-list-item[aria-disabled='true'] { diff --git a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css index a34d43442..8cc1972e1 100644 --- a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css +++ b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css @@ -4,7 +4,7 @@ .charcoal-menu-item-group > span { display: block; - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); font-size: 12px; font-weight: bold; padding: 12px 0 8px 16px; diff --git a/packages/react/src/components/DropdownSelector/Popover/index.css b/packages/react/src/components/DropdownSelector/Popover/index.css index e8fc9d795..cef09f8a3 100644 --- a/packages/react/src/components/DropdownSelector/Popover/index.css +++ b/packages/react/src/components/DropdownSelector/Popover/index.css @@ -3,8 +3,8 @@ list-style: none; overflow: auto; max-height: inherit; - background-color: var(--charcoal-background1); - border: solid 1px var(--charcoal-border-default); + background-color: var(--charcoal-color-background1); + border: solid 1px var(--charcoal-color-border-default); border-radius: 8px; padding-top: 8px; padding-bottom: 8px; diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css index 0a0fc9298..2f70dbb29 100644 --- a/packages/react/src/components/DropdownSelector/index.css +++ b/packages/react/src/components/DropdownSelector/index.css @@ -25,7 +25,7 @@ padding-right: 8px; padding-left: 8px; - background-color: var(--charcoal-surface3); + background-color: var(--charcoal-color-surface3); border-radius: 4px; transition: 0.2s box-shadow, 0.2s background-color; @@ -46,11 +46,11 @@ .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'], .charcoal-dropdown-selector-button:not(:disabled):active { - background-color: var(--charcoal-surface3-press); + background-color: var(--charcoal-color-surface3-press); } .charcoal-dropdown-selector-button:not(:disabled):hover { - background-color: var(--charcoal-surface3-hover); + background-color: var(--charcoal-color-surface3-hover); } .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) { @@ -69,16 +69,16 @@ font-size: 14px; line-height: 22px; display: flow-root; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .charcoal-ui-dropdown-selector-text[data-placeholder='true'] { - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); } .charcoal-ui-dropdown-selector-icon { - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); } diff --git a/packages/react/src/components/FieldLabel/index.css b/packages/react/src/components/FieldLabel/index.css index bc141b8c6..0a5e23461 100644 --- a/packages/react/src/components/FieldLabel/index.css +++ b/packages/react/src/components/FieldLabel/index.css @@ -3,21 +3,21 @@ line-height: 22px; font-weight: bold; display: flow-root; - color: var(--charcoal-text1); + color: var(--charcoal-color-text1); } .charcoal-field-label-required-text { font-size: 14px; line-height: 22px; display: flow-root; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); } .charcoal-field-label-sub-label { font-size: 14px; line-height: 22px; display: flow-root; - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); transition: 0.2s color, 0.2s box-shadow; } diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index 5d8a88eee..a7f37f92f 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -50,55 +50,55 @@ } .charcoal-icon-button[data-variant='Default'] { - color: var(--charcoal-text3); - background-color: var(--charcoal-transparent); + color: var(--charcoal-color-text3); + background-color: var(--charcoal-color-transparent); } .charcoal-icon-button[data-variant='Default'][data-active='true']:not( :disabled ):not([aria-disabled]), .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] { - color: var(--charcoal-text3-press); - background-color: var(--charcoal-transparent-press); + color: var(--charcoal-color-text3-press); + background-color: var(--charcoal-color-transparent-press); } .charcoal-icon-button[data-variant='Default'][data-active='false']:not( :disabled ):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover { - color: var(--charcoal-text3-hover); - background-color: var(--charcoal-transparent-hover); + color: var(--charcoal-color-text3-hover); + background-color: var(--charcoal-color-transparent-hover); } .charcoal-icon-button[data-variant='Default'][data-active='false']:not( :disabled ):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active { - color: var(--charcoal-text3-press); - background-color: var(--charcoal-transparent-press); + color: var(--charcoal-color-text3-press); + background-color: var(--charcoal-color-transparent-press); } .charcoal-icon-button[data-variant='Overlay'] { - color: var(--charcoal-text5); - background-color: var(--charcoal-surface4); + color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-surface4); } .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not( :disabled ):not([aria-disabled]), .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] { - color: var(--charcoal-text5-press); - background-color: var(--charcoal-surface4-press); + color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-surface4-press); } .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not( :disabled ):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover { - color: var(--charcoal-text5-hover); - background-color: var(--charcoal-surface4-hover); + color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-surface4-hover); } .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not( :disabled ):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active { - color: var(--charcoal-text5-press); - background-color: var(--charcoal-surface4-press); + color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-surface4-press); } .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus, diff --git a/packages/react/src/components/LoadingSpinner/index.css b/packages/react/src/components/LoadingSpinner/index.css index 3a7fe69b7..78483be83 100644 --- a/packages/react/src/components/LoadingSpinner/index.css +++ b/packages/react/src/components/LoadingSpinner/index.css @@ -1,17 +1,17 @@ .charcoal-loading-spinner { box-sizing: content-box; margin: auto; - padding: var(--charcoal-loading-spinner-padding); + padding: var(--charcoal-color-loading-spinner-padding); border-radius: 8px; - font-size: var(--charcoal-loading-spinner-size); - width: var(--charcoal-loading-spinner-size); - height: var(--charcoal-loading-spinner-size); + font-size: var(--charcoal-color-loading-spinner-size); + width: var(--charcoal-color-loading-spinner-size); + height: var(--charcoal-color-loading-spinner-size); opacity: 0.84; - color: var(--charcoal-text4); - background-color: var(--charcoal-background1); + color: var(--charcoal-color-text4); + background-color: var(--charcoal-color-background1); } .charcoal-loading-spinner[data-transparent='true'] { - background-color: var(--charcoal-transparent); + background-color: var(--charcoal-color-transparent); } @keyframes charcoal-loading-spinner-icon-scale-out { diff --git a/packages/react/src/components/Modal/Dialog/index.css b/packages/react/src/components/Modal/Dialog/index.css index 03de6c2ad..797245c67 100644 --- a/packages/react/src/components/Modal/Dialog/index.css +++ b/packages/react/src/components/Modal/Dialog/index.css @@ -4,7 +4,7 @@ height: fit-content; width: 440px; - background-color: var(--charcoal-surface1); + background-color: var(--charcoal-color-surface1); border-radius: 24px; } diff --git a/packages/react/src/components/Modal/ModalPlumbing.css b/packages/react/src/components/Modal/ModalPlumbing.css index 3b5ff3853..bcae63599 100644 --- a/packages/react/src/components/Modal/ModalPlumbing.css +++ b/packages/react/src/components/Modal/ModalPlumbing.css @@ -13,7 +13,7 @@ } .charcoal-modal-header-title { - color: var(--charcoal-text1); + color: var(--charcoal-color-text1); font-size: 16px; line-height: 24px; font-weight: bold; diff --git a/packages/react/src/components/Modal/index.css b/packages/react/src/components/Modal/index.css index 2f0b4cf5f..ca22d07fd 100644 --- a/packages/react/src/components/Modal/index.css +++ b/packages/react/src/components/Modal/index.css @@ -10,7 +10,7 @@ padding: 40px 0; box-sizing: border-box; - background-color: var(--charcoal-surface4); + background-color: var(--charcoal-color-surface4); } @media (max-width: 743px) { @@ -25,7 +25,7 @@ top: 8px; right: 8px; - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); transition: 0.2s color; } diff --git a/packages/react/src/components/Modal/index.story.tsx b/packages/react/src/components/Modal/index.story.tsx index 4ca855701..94fa94807 100644 --- a/packages/react/src/components/Modal/index.story.tsx +++ b/packages/react/src/components/Modal/index.story.tsx @@ -124,7 +124,7 @@ const StyledModalText = (props: Omit, 'style'>) => { fontSize: 14, lineHeight: '22px', padding: '0 16px', - color: 'var(--charcoal-text2)', + color: 'var(--charcoal-color-text2)', }} {...props} /> diff --git a/packages/react/src/components/Radio/RadioInput/index.css b/packages/react/src/components/Radio/RadioInput/index.css index 71d62dea9..afeb838e4 100644 --- a/packages/react/src/components/Radio/RadioInput/index.css +++ b/packages/react/src/components/Radio/RadioInput/index.css @@ -10,12 +10,12 @@ height: 20px; cursor: pointer; border-radius: 999999px; - background-color: var(--charcoal-surface1); + background-color: var(--charcoal-color-surface1); transition: 0.2s background-color, 0.2s box-shadow; } .charcoal-radio-input:checked { - background-color: var(--charcoal-brand); + background-color: var(--charcoal-color-brand); } .charcoal-radio-input:checked::after { @@ -24,7 +24,7 @@ width: 8px; height: 8px; pointer-events: none; - background-color: var(--charcoal-text5); + background-color: var(--charcoal-color-text5); border-radius: 999999px; transition: 0.2s background-color, 0.2s box-shadow; } @@ -32,7 +32,7 @@ .charcoal-radio-input:not(:checked) { border-width: 2px; border-style: solid; - border-color: var(--charcoal-text3); + border-color: var(--charcoal-color-text3); } .charcoal-radio-input:disabled { @@ -40,11 +40,11 @@ } .charcoal-radio-input:not(:disabled):hover { - background-color: var(--charcoal-surface1-hover); + background-color: var(--charcoal-color-surface1-hover); } .charcoal-radio-input:not(:disabled):active { - background-color: var(--charcoal-surface1-press); + background-color: var(--charcoal-color-surface1-press); } .charcoal-radio-input:not(:disabled):focus { @@ -66,17 +66,17 @@ } .charcoal-radio-input:checked:not(:disabled):hover { - background-color: var(--charcoal-brand-hover); + background-color: var(--charcoal-color-brand-hover); } .charcoal-radio-input:checked:not(:disabled):hover::after { - background-color: var(--charcoal-text5-hover); + background-color: var(--charcoal-color-text5-hover); } .charcoal-radio-input:checked:not(:disabled):active { - background-color: var(--charcoal-brand-press); + background-color: var(--charcoal-color-brand-press); } .charcoal-radio-input:checked:not(:disabled):active::after { - background-color: var(--charcoal-text5-press); + background-color: var(--charcoal-color-text5-press); } diff --git a/packages/react/src/components/Radio/index.css b/packages/react/src/components/Radio/index.css index 67e33bc19..b43c51a23 100644 --- a/packages/react/src/components/Radio/index.css +++ b/packages/react/src/components/Radio/index.css @@ -14,5 +14,5 @@ .charcoal-radio__label_div { font-size: 14px; line-height: 22px; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); } diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css index 8d15b67c1..4dd13cbeb 100644 --- a/packages/react/src/components/SegmentedControl/index.css +++ b/packages/react/src/components/SegmentedControl/index.css @@ -2,7 +2,7 @@ display: inline-flex; align-items: center; - background-color: var(--charcoal-surface3); + background-color: var(--charcoal-color-surface3); border-radius: 16px; } @@ -16,7 +16,7 @@ padding-right: 16px; padding-left: 16px; border-radius: 16px; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); font-size: 14px; line-height: 22px; @@ -30,8 +30,8 @@ } .charcoal-segmented-control-radio__label[data-checked='true'] { - background-color: var(--charcoal-brand); - color: var(--charcoal-text5); + background-color: var(--charcoal-color-brand); + color: var(--charcoal-color-text5); } .charcoal-segmented-control-radio__input { diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css index fe53283ab..ee38f11a4 100644 --- a/packages/react/src/components/Switch/SwitchInput/index.css +++ b/packages/react/src/components/Switch/SwitchInput/index.css @@ -14,7 +14,7 @@ border-radius: 16px; height: 16px; margin: 0; - background-color: var(--charcoal-text4); + background-color: var(--charcoal-color-text4); } .charcoal-switch-input:disabled, @@ -34,7 +34,7 @@ transform: translateX(0); transition: transform 0.2s; border-radius: 1024px; - background-color: var(--charcoal-text5); + background-color: var(--charcoal-color-text5); } .charcoal-switch-input:checked::after { @@ -43,15 +43,15 @@ } .charcoal-switch-input:checked { - background-color: var(--charcoal-brand); + background-color: var(--charcoal-color-brand); } .charcoal-switch-input:not(:disabled):hover { - background-color: var(--charcoal-text4-hover); + background-color: var(--charcoal-color-text4-hover); } .charcoal-switch-input:not(:disabled):active { - background-color: var(--charcoal-text4-press); + background-color: var(--charcoal-color-text4-press); } .charcoal-switch-input:not(:disabled):focus { @@ -66,17 +66,17 @@ } .charcoal-switch-input:not(:disabled)::after:hover { - background-color: var(--charcoal-text5-hover); + background-color: var(--charcoal-color-text5-hover); } .charcoal-switch-input:not(:disabled)::after:active { - background-color: var(--charcoal-text5-press); + background-color: var(--charcoal-color-text5-press); } .charcoal-switch-input:not(:disabled):checked:hover { - background-color: var(--charcoal-brand-hover); + background-color: var(--charcoal-color-brand-hover); } .charcoal-switch-input:not(:disabled):checked:active { - background-color: var(--charcoal-brand-press); + background-color: var(--charcoal-color-brand-press); } diff --git a/packages/react/src/components/Switch/index.css b/packages/react/src/components/Switch/index.css index 75ecd4aea..0c4a99916 100644 --- a/packages/react/src/components/Switch/index.css +++ b/packages/react/src/components/Switch/index.css @@ -19,5 +19,5 @@ .charcoal-switch__label_div { font-size: 14px; line-height: 22px; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); } diff --git a/packages/react/src/components/TagItem/index.css b/packages/react/src/components/TagItem/index.css index d5fbb20fa..0c7a157cb 100644 --- a/packages/react/src/components/TagItem/index.css +++ b/packages/react/src/components/TagItem/index.css @@ -1,5 +1,5 @@ .charcoal-tag-item { - --charcoal-tag-item-color: var(--charcoal-text5); + --charcoal-tag-item-color: var(--charcoal-color-text5); --charcoal-tag-item-size: 40px; --charcoal-tag-item-padding-left: 24px; --charcoal-tag-item-padding-right: 24px; @@ -20,12 +20,12 @@ cursor: pointer; overflow: hidden; - color: var(--charcoal-tag-item-color); - height: var(--charcoal-tag-item-size); + color: var(--charcoal-color-tag-item-color); + height: var(--charcoal-color-tag-item-size); padding-top: 4px; padding-bottom: 4px; - padding-left: var(--charcoal-tag-item-padding-left); - padding-right: var(--charcoal-tag-item-padding-right); + padding-left: var(--charcoal-color-tag-item-padding-left); + padding-right: var(--charcoal-color-tag-item-padding-right); box-sizing: border-box; border-radius: 4px; @@ -43,7 +43,7 @@ --charcoal-tag-item-padding-right: 16px; } .charcoal-tag-item[data-state='inactive'] { - --charcoal-tag-item-color: var(--charcoal-text2); + --charcoal-tag-item-color: var(--charcoal-color-text2); } .charcoal-tag-item[data-state='active'] { --charcoal-tag-item-padding-left: 16px; @@ -73,11 +73,11 @@ } .charcoal-tag-item__bg { - background-color: var(--charcoal-tag-item-bg); + background-color: var(--charcoal-color-tag-item-bg); } .charcoal-tag-item__bg[data-bg-variant='image'] { - background-color: var(--charcoal-surface4); + background-color: var(--charcoal-color-surface4); } .charcoal-tag-item__bg[data-bg-variant='image']::before { @@ -90,12 +90,12 @@ height: 100%; background-position: center; background-size: cover; - background-image: var(--charcoal-tag-item-bg); + background-image: var(--charcoal-color-tag-item-bg); mix-blend-mode: overlay; } .charcoal-tag-item__bg[data-state='inactive'] { - background-color: var(--charcoal-surface3); + background-color: var(--charcoal-color-surface3); } .charcoal-tag-item__label { diff --git a/packages/react/src/components/TagItem/index.story.tsx b/packages/react/src/components/TagItem/index.story.tsx index 57a72fb79..a3c54ed3d 100644 --- a/packages/react/src/components/TagItem/index.story.tsx +++ b/packages/react/src/components/TagItem/index.story.tsx @@ -26,7 +26,7 @@ export const TranslatedLabel: StoryObj = { export const BGColor: StoryObj = { render: function Render() { - return + return }, } diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css index 89e572545..8d221b484 100644 --- a/packages/react/src/components/TextArea/index.css +++ b/packages/react/src/components/TextArea/index.css @@ -12,11 +12,11 @@ position: relative; overflow: hidden; - color: var(--charcoal-text2); - background-color: var(--charcoal-surface3); + color: var(--charcoal-color-text2); + background-color: var(--charcoal-color-surface3); border-radius: 4px; transition: 0.2s background-color, 0.2s box-shadow; - height: calc(22px * var(--charcoal-text-area-rows) + 18px); + height: calc(22px * var(--charcoal-color-text-area-rows) + 18px); } .charcoal-text-area-container[aria-invalid='true'] { @@ -29,7 +29,7 @@ } .charcoal-text-area-container:not(aria-disabled='true'):hover { - background-color: var(--charcoal-surface3-hover); + background-color: var(--charcoal-color-surface3-hover); } .charcoal-text-area-container[aria-invalid='true']:focus-within { @@ -51,7 +51,7 @@ font-size: calc(14px / 0.875); line-height: calc(22px / 0.875); padding: calc(9px / 0.875) calc(8px / 0.875); - height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px); + height: calc(22px / 0.875 * var(--charcoal-color-text-area-rows) + 20px); /* Display box-shadow for iOS Safari */ appearance: none; @@ -60,11 +60,11 @@ } .charcoal-text-area-textarea[data-no-bottom-padding='true'] { padding: calc(9px / 0.875) calc(8px / 0.875) 0; - height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px); + height: calc(22px / 0.875 * (var(--charcoal-color-text-area-rows) - 1) + 9px); } .charcoal-text-area-textarea::placeholder { - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); } .charcoal-text-area-counter { @@ -74,5 +74,5 @@ line-height: 22px; font-size: 14px; - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); } diff --git a/packages/react/src/components/TextField/AssistiveText/index.css b/packages/react/src/components/TextField/AssistiveText/index.css index c7e3e70d0..03c0a717e 100644 --- a/packages/react/src/components/TextField/AssistiveText/index.css +++ b/packages/react/src/components/TextField/AssistiveText/index.css @@ -2,9 +2,9 @@ font-size: 14px; line-height: 22px; margin: 0; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); } .charcoal-text-field-assistive-text[data-invalid='true'] { - color: var(--charcoal-assertive); + color: var(--charcoal-color-assertive); } diff --git a/packages/react/src/components/TextField/TextField.story.tsx b/packages/react/src/components/TextField/TextField.story.tsx index a65463e3d..b7917f0a6 100644 --- a/packages/react/src/components/TextField/TextField.story.tsx +++ b/packages/react/src/components/TextField/TextField.story.tsx @@ -101,7 +101,7 @@ export const Prefix: StoryObj = { style={{ display: 'flex', alignItems: 'center', - color: 'var(--charcoal-text3)', + color: 'var(--charcoal-color-text3)', }} > diff --git a/packages/react/src/components/TextField/index.css b/packages/react/src/components/TextField/index.css index 3dde5ba27..b3063acff 100644 --- a/packages/react/src/components/TextField/index.css +++ b/packages/react/src/components/TextField/index.css @@ -12,8 +12,8 @@ display: flex; height: 40px; transition: 0.2s background-color, 0.2s box-shadow; - color: var(--charcoal-text2); - background-color: var(--charcoal-surface3); + color: var(--charcoal-color-text2); + background-color: var(--charcoal-color-surface3); border-radius: 4px; padding: 0 8px; line-height: 22px; @@ -25,7 +25,7 @@ } .charcoal-text-field-container:not([aria-disabled='true']):hover { - background-color: var(--charcoal-surface3-hover); + background-color: var(--charcoal-color-surface3-hover); } .charcoal-text-field-container:not([aria-disabled='true']):focus-within { @@ -73,15 +73,15 @@ appearance: none; background: transparent; - color: var(--charcoal-text2); + color: var(--charcoal-color-text2); } .charcoal-text-field-input::placeholder { - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); } .charcoal-text-field-line-counter { line-height: 22px; font-size: 14px; - color: var(--charcoal-text3); + color: var(--charcoal-color-text3); } From 2438b75487fec23e65bb615b0853fb79f30b2f78 Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 14:48:08 +0900 Subject: [PATCH 008/102] feat(react): create css variables test --- packages/react/src/css-variables.test.tsx | 53 +++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 packages/react/src/css-variables.test.tsx diff --git a/packages/react/src/css-variables.test.tsx b/packages/react/src/css-variables.test.tsx new file mode 100644 index 000000000..ec25e5728 --- /dev/null +++ b/packages/react/src/css-variables.test.tsx @@ -0,0 +1,53 @@ +import glob from 'glob' +import { readFile } from 'fs/promises' +import path, { join } from 'path' + +const dir = path.resolve(__dirname, 'components') + +const extractVariables = (cssContent: string): string[] => { + const variablePattern = /--[\w-]+(?=:)/g + return cssContent.match(variablePattern) ?? [] +} +const extractUsedVariables = (cssContent: string): string[] => { + const usedVariablePattern = /var\((--[\w-]+)\)/g + const matches = [] + let match + while ((match = usedVariablePattern.exec(cssContent)) !== null) { + matches.push(match[1]) + } + return matches +} + +const variablesSet = new Set() +const variableFiles = glob.sync(join(__dirname, '../../theme/src/css/*.css')) + +for (const file of variableFiles) { + const content = await readFile(file, 'utf-8') + const variables = extractVariables(content) + for (const variable of variables) { + variablesSet.add(variable) + } +} + +describe('CSS Variables Check', () => { + const cssFiles = glob.sync(`${dir}/**/*.css`) + + describe.each(cssFiles)('Check file: %s', async (file) => { + const content = await readFile(file, 'utf-8') + const usedVariables = extractUsedVariables(content) + const definedVariables = new Set(extractVariables(content)) + + it('should not empty', () => { + expect(content).not.toBe('') + }) + + it.each(usedVariables)( + 'should contain all used variables in %s', + (variable) => { + const contained = + variablesSet.has(variable) || definedVariables.has(variable) + expect(contained).toBeTruthy() + } + ) + }) +}) From 3a1cc80d3ae500adc27dfc8b39986ac5b575d6e0 Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 17:56:47 +0900 Subject: [PATCH 009/102] feat(react): replace new tokens --- .../react/src/components/Button/index.css | 60 +++++++++---------- .../__snapshots__/index.story.storyshot | 2 +- .../Checkbox/CheckboxInput/index.css | 18 +++--- .../Checkbox/CheckboxInput/index.story.tsx | 5 +- .../react/src/components/Checkbox/index.css | 2 +- .../DropdownMenuItem/index.css | 4 +- .../DropdownSelector/ListItem/index.css | 2 +- .../DropdownSelector/MenuItemGroup/index.css | 2 +- .../DropdownSelector/Popover/index.css | 2 +- .../src/components/DropdownSelector/index.css | 12 ++-- .../react/src/components/FieldLabel/index.css | 6 +- .../react/src/components/IconButton/index.css | 24 ++++---- .../src/components/LoadingSpinner/index.css | 13 ++-- .../src/components/Modal/Dialog/index.css | 2 +- .../src/components/Modal/ModalPlumbing.css | 2 +- .../Modal/__snapshots__/index.story.storyshot | 10 ++-- packages/react/src/components/Modal/index.css | 4 +- .../src/components/Modal/index.story.tsx | 2 +- .../src/components/Radio/RadioInput/index.css | 20 +++---- packages/react/src/components/Radio/index.css | 2 +- .../src/components/SegmentedControl/index.css | 8 +-- .../components/Switch/SwitchInput/index.css | 12 ++-- .../react/src/components/Switch/index.css | 2 +- .../__snapshots__/index.story.storyshot | 2 +- .../react/src/components/TagItem/index.css | 21 +++---- .../src/components/TagItem/index.story.tsx | 7 ++- .../react/src/components/TextArea/index.css | 17 +++--- .../TextField/AssistiveText/index.css | 4 +- .../components/TextField/TextField.story.tsx | 2 +- .../__snapshots__/TextField.story.storyshot | 2 +- .../react/src/components/TextField/index.css | 12 ++-- 31 files changed, 148 insertions(+), 135 deletions(-) diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index 4c1412b64..c8fa44198 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -24,8 +24,8 @@ font-size: 14px; line-height: 22px; font-weight: bold; - color: var(--charcoal-color-text2); - background-color: var(--charcoal-color-surface3); + color: var(--charcoal-color-text-secondary-default); + background-color: var(--charcoal-color-container-secondary-default); transition: 0.2s color, 0.2s background-color, 0.2s box-shadow; height: 40px; } @@ -41,77 +41,77 @@ } .charcoal-button:not(:disabled):hover { - color: var(--charcoal-color-text2-hover); - background-color: var(--charcoal-color-surface3-hover); + color: var(--charcoal-color-text-secondary-hover); + background-color: var(--charcoal-color-container-secondary-hover); } .charcoal-button:not(:disabled):active, .charcoal-button[data-active='true'] { - color: var(--charcoal-color-text2-press); - background-color: var(--charcoal-color-surface3-press); + color: var(--charcoal-color-text-secondary-press); + background-color: var(--charcoal-color-container-secondary-press); } .charcoal-button[data-variant='Primary'] { - color: var(--charcoal-color-text5); - background-color: var(--charcoal-color-brand); + color: var(--charcoal-color-text-on-primary-default); + background-color: var(--charcoal-color-container-primary-default); } .charcoal-button[data-variant='Primary']:hover:not(:disabled) { - color: var(--charcoal-color-text5-hover); - background-color: var(--charcoal-color-brand-hover); + color: var(--charcoal-color-text-on-primary-hover); + background-color: var(--charcoal-color-container-primary-hover); } .charcoal-button[data-variant='Primary']:active:not(:disabled), .charcoal-button[data-variant='Primary'][data-active='true'] { - color: var(--charcoal-color-text5-press); - background-color: var(--charcoal-color-brand-press); + color: var(--charcoal-color-text-on-primary-press); + background-color: var(--charcoal-color-container-primary-press); } .charcoal-button[data-variant='Overlay'] { - color: var(--charcoal-color-text5); - background-color: var(--charcoal-color-surface4); + color: var(--charcoal-color-text-on-primary-default); + background-color: var(--charcoal-color-container-neutral-default); } .charcoal-button[data-variant='Overlay']:hover:not(:disabled) { - color: var(--charcoal-color-text5-hover); - background-color: var(--charcoal-color-surface4-hover); + color: var(--charcoal-color-text-on-primary-hover); + background-color: var(--charcoal-color-container-neutral-hover); } .charcoal-button[data-variant='Overlay']:active:not(:disabled), .charcoal-button[data-variant='Overlay'][data-active='true'] { - color: var(--charcoal-color-text5-press); - background-color: var(--charcoal-color-surface4-press); + color: var(--charcoal-color-text-on-primary-press); + background-color: var(--charcoal-color-container-neutral-press); } .charcoal-button[data-variant='Navigation'] { - color: var(--charcoal-color-text5); - background-color: var(--charcoal-color-surface6); + color: var(--charcoal-color-text-on-primary-default); + background-color: var(--charcoal-color-container-h-u-d-default); } .charcoal-button[data-variant='Navigation']:hover:not(:disabled) { - color: var(--charcoal-color-text5-hover); - background-color: var(--charcoal-color-surface6-hover); + color: var(--charcoal-color-text-on-primary-hover); + background-color: var(--charcoal-color-container-h-u-d-hover); } .charcoal-button[data-variant='Navigation']:active:not(:disabled), .charcoal-button[data-variant='Navigation'][data-active='true'] { - color: var(--charcoal-color-text5-press); - background-color: var(--charcoal-color-surface6-press); + color: var(--charcoal-color-text-on-primary-press); + background-color: var(--charcoal-color-container-h-u-d-press); } .charcoal-button[data-variant='Danger'] { - color: var(--charcoal-color-text5); - background-color: var(--charcoal-color-assertive); + color: var(--charcoal-color-text-on-primary-default); + background-color: var(--charcoal-color-container-discovery-default); } .charcoal-button[data-variant='Danger']:hover:not(:disabled) { - color: var(--charcoal-color-text5-hover); - background-color: var(--charcoal-color-assertive-hover); + color: var(--charcoal-color-text-on-primary-hover); + background-color: var(--charcoal-color-container-discovery-hover); } .charcoal-button[data-variant='Danger']:active:not(:disabled), .charcoal-button[data-variant='Danger'][data-active='true'] { - color: var(--charcoal-color-text5-press); - background-color: var(--charcoal-color-assertive-press); + color: var(--charcoal-color-text-on-primary-press); + background-color: var(--charcoal-color-container-discovery-press); } .charcoal-button[data-size='S'] { diff --git a/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot b/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot index 8381e06f0..9e2fd12fe 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot @@ -60,7 +60,7 @@ exports[`Storybook Tests > react/internals/CheckboxInput > Rounded 1`] = `
= { const [checked, setChecked] = useState(false) return (
diff --git a/packages/react/src/components/Checkbox/index.css b/packages/react/src/components/Checkbox/index.css index 96ccd0001..abb9770c8 100644 --- a/packages/react/src/components/Checkbox/index.css +++ b/packages/react/src/components/Checkbox/index.css @@ -15,7 +15,7 @@ } .charcoal-checkbox__label_div { - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); font-size: 14px; line-height: 20px; } diff --git a/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css index d17ba7e08..3f0aabf79 100644 --- a/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css +++ b/packages/react/src/components/DropdownSelector/DropdownMenuItem/index.css @@ -1,7 +1,7 @@ .charcoal-dropdown-selector-menu-item { font-size: 14px; line-height: 22px; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); padding: 9px 0; display: flex; @@ -15,6 +15,6 @@ } .charcoal-dropdown-selector-menu-item-icon { - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); padding-right: 4px; } diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.css b/packages/react/src/components/DropdownSelector/ListItem/index.css index 745335b3f..2079808c8 100644 --- a/packages/react/src/components/DropdownSelector/ListItem/index.css +++ b/packages/react/src/components/DropdownSelector/ListItem/index.css @@ -15,7 +15,7 @@ .charcoal-list-item:not([aria-disabled='true']):hover, .charcoal-list-item:not([aria-disabled='true']):focus, .charcoal-list-item:not([aria-disabled='true']):focus-within { - background-color: var(--charcoal-color-surface3); + background-color: var(--charcoal-color-container-secondary-default); } .charcoal-list-item[aria-disabled='true'] { diff --git a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css index 8cc1972e1..13976a592 100644 --- a/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css +++ b/packages/react/src/components/DropdownSelector/MenuItemGroup/index.css @@ -4,7 +4,7 @@ .charcoal-menu-item-group > span { display: block; - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-tertiary-default); font-size: 12px; font-weight: bold; padding: 12px 0 8px 16px; diff --git a/packages/react/src/components/DropdownSelector/Popover/index.css b/packages/react/src/components/DropdownSelector/Popover/index.css index cef09f8a3..87bb66a1f 100644 --- a/packages/react/src/components/DropdownSelector/Popover/index.css +++ b/packages/react/src/components/DropdownSelector/Popover/index.css @@ -3,7 +3,7 @@ list-style: none; overflow: auto; max-height: inherit; - background-color: var(--charcoal-color-background1); + background-color: var(--charcoal-color-background-default); border: solid 1px var(--charcoal-color-border-default); border-radius: 8px; padding-top: 8px; diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css index 2f70dbb29..e670e5fbc 100644 --- a/packages/react/src/components/DropdownSelector/index.css +++ b/packages/react/src/components/DropdownSelector/index.css @@ -25,7 +25,7 @@ padding-right: 8px; padding-left: 8px; - background-color: var(--charcoal-color-surface3); + background-color: var(--charcoal-color-container-secondary-default); border-radius: 4px; transition: 0.2s box-shadow, 0.2s background-color; @@ -46,11 +46,11 @@ .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'], .charcoal-dropdown-selector-button:not(:disabled):active { - background-color: var(--charcoal-color-surface3-press); + background-color: var(--charcoal-color-container-secondary-press); } .charcoal-dropdown-selector-button:not(:disabled):hover { - background-color: var(--charcoal-color-surface3-hover); + background-color: var(--charcoal-color-container-secondary-hover); } .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) { @@ -69,16 +69,16 @@ font-size: 14px; line-height: 22px; display: flow-root; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .charcoal-ui-dropdown-selector-text[data-placeholder='true'] { - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-placeholder-default); } .charcoal-ui-dropdown-selector-icon { - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); } diff --git a/packages/react/src/components/FieldLabel/index.css b/packages/react/src/components/FieldLabel/index.css index 0a5e23461..28f7631fd 100644 --- a/packages/react/src/components/FieldLabel/index.css +++ b/packages/react/src/components/FieldLabel/index.css @@ -3,21 +3,21 @@ line-height: 22px; font-weight: bold; display: flow-root; - color: var(--charcoal-color-text1); + color: var(--charcoal-color-text-default); } .charcoal-field-label-required-text { font-size: 14px; line-height: 22px; display: flow-root; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); } .charcoal-field-label-sub-label { font-size: 14px; line-height: 22px; display: flow-root; - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-tertiary-default); transition: 0.2s color, 0.2s box-shadow; } diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index a7f37f92f..451e43b39 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -50,55 +50,55 @@ } .charcoal-icon-button[data-variant='Default'] { - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-tertiary-default); background-color: var(--charcoal-color-transparent); } .charcoal-icon-button[data-variant='Default'][data-active='true']:not( :disabled ):not([aria-disabled]), .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] { - color: var(--charcoal-color-text3-press); + color: var(--charcoal-color-text-tertiary-press); background-color: var(--charcoal-color-transparent-press); } .charcoal-icon-button[data-variant='Default'][data-active='false']:not( :disabled ):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover { - color: var(--charcoal-color-text3-hover); + color: var(--charcoal-color-text-tertiary-hover); background-color: var(--charcoal-color-transparent-hover); } .charcoal-icon-button[data-variant='Default'][data-active='false']:not( :disabled ):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active { - color: var(--charcoal-color-text3-press); + color: var(--charcoal-color-text-tertiary-press); background-color: var(--charcoal-color-transparent-press); } .charcoal-icon-button[data-variant='Overlay'] { - color: var(--charcoal-color-text5); - background-color: var(--charcoal-color-surface4); + color: var(--charcoal-color-text-on-primary-default); + background-color: var(--charcoal-color-container-neutral-default); } .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not( :disabled ):not([aria-disabled]), .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] { - color: var(--charcoal-color-text5-press); - background-color: var(--charcoal-color-surface4-press); + color: var(--charcoal-color-text-on-primary-press); + background-color: var(--charcoal-color-container-neutral-press); } .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not( :disabled ):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover { - color: var(--charcoal-color-text5-hover); - background-color: var(--charcoal-color-surface4-hover); + color: var(--charcoal-color-text-on-primary-hover); + background-color: var(--charcoal-color-container-neutral-hover); } .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not( :disabled ):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active { - color: var(--charcoal-color-text5-press); - background-color: var(--charcoal-color-surface4-press); + color: var(--charcoal-color-text-on-primary-press); + background-color: var(--charcoal-color-container-neutral-press); } .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus, diff --git a/packages/react/src/components/LoadingSpinner/index.css b/packages/react/src/components/LoadingSpinner/index.css index 78483be83..f911dec9b 100644 --- a/packages/react/src/components/LoadingSpinner/index.css +++ b/packages/react/src/components/LoadingSpinner/index.css @@ -1,14 +1,17 @@ .charcoal-loading-spinner { + --charcoal-loading-spinner-size: 48px; + --charcoal-loading-spinner-padding: 16px; + box-sizing: content-box; margin: auto; - padding: var(--charcoal-color-loading-spinner-padding); + padding: var(--charcoal-loading-spinner-padding); border-radius: 8px; - font-size: var(--charcoal-color-loading-spinner-size); - width: var(--charcoal-color-loading-spinner-size); - height: var(--charcoal-color-loading-spinner-size); + font-size: var(--charcoal-loading-spinner-size); + width: var(--charcoal-loading-spinner-size); + height: var(--charcoal-loading-spinner-size); opacity: 0.84; color: var(--charcoal-color-text4); - background-color: var(--charcoal-color-background1); + background-color: var(--charcoal-color-background-default); } .charcoal-loading-spinner[data-transparent='true'] { background-color: var(--charcoal-color-transparent); diff --git a/packages/react/src/components/Modal/Dialog/index.css b/packages/react/src/components/Modal/Dialog/index.css index 797245c67..66444f48c 100644 --- a/packages/react/src/components/Modal/Dialog/index.css +++ b/packages/react/src/components/Modal/Dialog/index.css @@ -4,7 +4,7 @@ height: fit-content; width: 440px; - background-color: var(--charcoal-color-surface1); + background-color: var(--charcoal-color-container-default); border-radius: 24px; } diff --git a/packages/react/src/components/Modal/ModalPlumbing.css b/packages/react/src/components/Modal/ModalPlumbing.css index bcae63599..389ac16da 100644 --- a/packages/react/src/components/Modal/ModalPlumbing.css +++ b/packages/react/src/components/Modal/ModalPlumbing.css @@ -13,7 +13,7 @@ } .charcoal-modal-header-title { - color: var(--charcoal-color-text1); + color: var(--charcoal-color-text-default); font-size: 16px; line-height: 24px; font-weight: bold; diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot index ed6c01d77..a27fa0795 100644 --- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot @@ -66,7 +66,7 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
react/Modal > BottomSheet 1`] = `
react/Modal > Default 1`] = `
react/Modal > FullBottomSheet 1`] = `
react/Modal > NotDismmissableStory 1`] = `
, 'style'>) => { fontSize: 14, lineHeight: '22px', padding: '0 16px', - color: 'var(--charcoal-color-text2)', + color: 'var(--charcoal-color-text-secondary-default)', }} {...props} /> diff --git a/packages/react/src/components/Radio/RadioInput/index.css b/packages/react/src/components/Radio/RadioInput/index.css index afeb838e4..d8a917db3 100644 --- a/packages/react/src/components/Radio/RadioInput/index.css +++ b/packages/react/src/components/Radio/RadioInput/index.css @@ -10,12 +10,12 @@ height: 20px; cursor: pointer; border-radius: 999999px; - background-color: var(--charcoal-color-surface1); + background-color: var(--charcoal-color-container-default); transition: 0.2s background-color, 0.2s box-shadow; } .charcoal-radio-input:checked { - background-color: var(--charcoal-color-brand); + background-color: var(--charcoal-color-container-primary-default); } .charcoal-radio-input:checked::after { @@ -24,7 +24,7 @@ width: 8px; height: 8px; pointer-events: none; - background-color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-text-on-primary-default); border-radius: 999999px; transition: 0.2s background-color, 0.2s box-shadow; } @@ -32,7 +32,7 @@ .charcoal-radio-input:not(:checked) { border-width: 2px; border-style: solid; - border-color: var(--charcoal-color-text3); + border-color: var(--charcoal-color-text-tertiary-default); } .charcoal-radio-input:disabled { @@ -40,11 +40,11 @@ } .charcoal-radio-input:not(:disabled):hover { - background-color: var(--charcoal-color-surface1-hover); + background-color: var(--charcoal-color-container-hover); } .charcoal-radio-input:not(:disabled):active { - background-color: var(--charcoal-color-surface1-press); + background-color: var(--charcoal-color-container-press); } .charcoal-radio-input:not(:disabled):focus { @@ -66,17 +66,17 @@ } .charcoal-radio-input:checked:not(:disabled):hover { - background-color: var(--charcoal-color-brand-hover); + background-color: var(--charcoal-color-container-primary-hover); } .charcoal-radio-input:checked:not(:disabled):hover::after { - background-color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-text-on-primary-hover); } .charcoal-radio-input:checked:not(:disabled):active { - background-color: var(--charcoal-color-brand-press); + background-color: var(--charcoal-color-container-primary-press); } .charcoal-radio-input:checked:not(:disabled):active::after { - background-color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-text-on-primary-press); } diff --git a/packages/react/src/components/Radio/index.css b/packages/react/src/components/Radio/index.css index b43c51a23..08d3dc550 100644 --- a/packages/react/src/components/Radio/index.css +++ b/packages/react/src/components/Radio/index.css @@ -14,5 +14,5 @@ .charcoal-radio__label_div { font-size: 14px; line-height: 22px; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); } diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css index 4dd13cbeb..e1dbd4484 100644 --- a/packages/react/src/components/SegmentedControl/index.css +++ b/packages/react/src/components/SegmentedControl/index.css @@ -2,7 +2,7 @@ display: inline-flex; align-items: center; - background-color: var(--charcoal-color-surface3); + background-color: var(--charcoal-color-container-secondary-default); border-radius: 16px; } @@ -16,7 +16,7 @@ padding-right: 16px; padding-left: 16px; border-radius: 16px; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); font-size: 14px; line-height: 22px; @@ -30,8 +30,8 @@ } .charcoal-segmented-control-radio__label[data-checked='true'] { - background-color: var(--charcoal-color-brand); - color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-container-primary-default); + color: var(--charcoal-color-text-on-primary-default); } .charcoal-segmented-control-radio__input { diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css index ee38f11a4..2766640e9 100644 --- a/packages/react/src/components/Switch/SwitchInput/index.css +++ b/packages/react/src/components/Switch/SwitchInput/index.css @@ -34,7 +34,7 @@ transform: translateX(0); transition: transform 0.2s; border-radius: 1024px; - background-color: var(--charcoal-color-text5); + background-color: var(--charcoal-color-text-on-primary-default); } .charcoal-switch-input:checked::after { @@ -43,7 +43,7 @@ } .charcoal-switch-input:checked { - background-color: var(--charcoal-color-brand); + background-color: var(--charcoal-color-container-primary-default); } .charcoal-switch-input:not(:disabled):hover { @@ -66,17 +66,17 @@ } .charcoal-switch-input:not(:disabled)::after:hover { - background-color: var(--charcoal-color-text5-hover); + background-color: var(--charcoal-color-text-on-primary-hover); } .charcoal-switch-input:not(:disabled)::after:active { - background-color: var(--charcoal-color-text5-press); + background-color: var(--charcoal-color-text-on-primary-press); } .charcoal-switch-input:not(:disabled):checked:hover { - background-color: var(--charcoal-color-brand-hover); + background-color: var(--charcoal-color-container-primary-hover); } .charcoal-switch-input:not(:disabled):checked:active { - background-color: var(--charcoal-color-brand-press); + background-color: var(--charcoal-color-container-primary-press); } diff --git a/packages/react/src/components/Switch/index.css b/packages/react/src/components/Switch/index.css index 0c4a99916..a89617b5f 100644 --- a/packages/react/src/components/Switch/index.css +++ b/packages/react/src/components/Switch/index.css @@ -19,5 +19,5 @@ .charcoal-switch__label_div { font-size: 14px; line-height: 22px; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); } diff --git a/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot b/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot index 67de955bb..2cbcc273c 100644 --- a/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot @@ -44,7 +44,7 @@ exports[`Storybook Tests > react/TagItem > BGColor 1`] = ` data-state="default" style={ Object { - "--charcoal-tag-item-bg": "var(--charcoal-brand)", + "--charcoal-tag-item-bg": "var(--charcoal-color-brand)", } } > diff --git a/packages/react/src/components/TagItem/index.css b/packages/react/src/components/TagItem/index.css index 0c7a157cb..4e8482b17 100644 --- a/packages/react/src/components/TagItem/index.css +++ b/packages/react/src/components/TagItem/index.css @@ -1,8 +1,9 @@ .charcoal-tag-item { - --charcoal-tag-item-color: var(--charcoal-color-text5); + --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default); --charcoal-tag-item-size: 40px; --charcoal-tag-item-padding-left: 24px; --charcoal-tag-item-padding-right: 24px; + --charcoal-tag-item-bg: ; isolation: isolate; position: relative; @@ -20,12 +21,12 @@ cursor: pointer; overflow: hidden; - color: var(--charcoal-color-tag-item-color); - height: var(--charcoal-color-tag-item-size); + color: var(--charcoal-tag-item-color); + height: var(--charcoal-tag-item-size); padding-top: 4px; padding-bottom: 4px; - padding-left: var(--charcoal-color-tag-item-padding-left); - padding-right: var(--charcoal-color-tag-item-padding-right); + padding-left: var(--charcoal-tag-item-padding-left); + padding-right: var(--charcoal-tag-item-padding-right); box-sizing: border-box; border-radius: 4px; @@ -43,7 +44,7 @@ --charcoal-tag-item-padding-right: 16px; } .charcoal-tag-item[data-state='inactive'] { - --charcoal-tag-item-color: var(--charcoal-color-text2); + --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default); } .charcoal-tag-item[data-state='active'] { --charcoal-tag-item-padding-left: 16px; @@ -73,11 +74,11 @@ } .charcoal-tag-item__bg { - background-color: var(--charcoal-color-tag-item-bg); + background-color: var(--charcoal-tag-item-bg); } .charcoal-tag-item__bg[data-bg-variant='image'] { - background-color: var(--charcoal-color-surface4); + background-color: var(--charcoal-color-container-on-img-default); } .charcoal-tag-item__bg[data-bg-variant='image']::before { @@ -90,12 +91,12 @@ height: 100%; background-position: center; background-size: cover; - background-image: var(--charcoal-color-tag-item-bg); + background-image: var(--charcoal-tag-item-bg); mix-blend-mode: overlay; } .charcoal-tag-item__bg[data-state='inactive'] { - background-color: var(--charcoal-color-surface3); + background-color: var(--charcoal-color-container-secondary-default); } .charcoal-tag-item__label { diff --git a/packages/react/src/components/TagItem/index.story.tsx b/packages/react/src/components/TagItem/index.story.tsx index a3c54ed3d..7a5dc96a8 100644 --- a/packages/react/src/components/TagItem/index.story.tsx +++ b/packages/react/src/components/TagItem/index.story.tsx @@ -26,7 +26,12 @@ export const TranslatedLabel: StoryObj = { export const BGColor: StoryObj = { render: function Render() { - return + return ( + + ) }, } diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css index 8d221b484..11e964b46 100644 --- a/packages/react/src/components/TextArea/index.css +++ b/packages/react/src/components/TextArea/index.css @@ -1,4 +1,5 @@ .charcoal-text-area-root { + --charcoal-text-area-rows: ; display: grid; grid-template-columns: 1fr; grid-gap: 4px; @@ -12,11 +13,11 @@ position: relative; overflow: hidden; - color: var(--charcoal-color-text2); - background-color: var(--charcoal-color-surface3); + color: var(--charcoal-color-text-secondary-default); + background-color: var(--charcoal-color-container-secondary-default); border-radius: 4px; transition: 0.2s background-color, 0.2s box-shadow; - height: calc(22px * var(--charcoal-color-text-area-rows) + 18px); + height: calc(22px * var(--charcoal-text-area-rows) + 18px); } .charcoal-text-area-container[aria-invalid='true'] { @@ -29,7 +30,7 @@ } .charcoal-text-area-container:not(aria-disabled='true'):hover { - background-color: var(--charcoal-color-surface3-hover); + background-color: var(--charcoal-color-container-secondary-hover); } .charcoal-text-area-container[aria-invalid='true']:focus-within { @@ -51,7 +52,7 @@ font-size: calc(14px / 0.875); line-height: calc(22px / 0.875); padding: calc(9px / 0.875) calc(8px / 0.875); - height: calc(22px / 0.875 * var(--charcoal-color-text-area-rows) + 20px); + height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px); /* Display box-shadow for iOS Safari */ appearance: none; @@ -60,11 +61,11 @@ } .charcoal-text-area-textarea[data-no-bottom-padding='true'] { padding: calc(9px / 0.875) calc(8px / 0.875) 0; - height: calc(22px / 0.875 * (var(--charcoal-color-text-area-rows) - 1) + 9px); + height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px); } .charcoal-text-area-textarea::placeholder { - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-placeholder-default); } .charcoal-text-area-counter { @@ -74,5 +75,5 @@ line-height: 22px; font-size: 14px; - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-tertiary-default); } diff --git a/packages/react/src/components/TextField/AssistiveText/index.css b/packages/react/src/components/TextField/AssistiveText/index.css index 03c0a717e..53ea9bd91 100644 --- a/packages/react/src/components/TextField/AssistiveText/index.css +++ b/packages/react/src/components/TextField/AssistiveText/index.css @@ -2,9 +2,9 @@ font-size: 14px; line-height: 22px; margin: 0; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); } .charcoal-text-field-assistive-text[data-invalid='true'] { - color: var(--charcoal-color-assertive); + color: var(--charcoal-color-container-negative-default); } diff --git a/packages/react/src/components/TextField/TextField.story.tsx b/packages/react/src/components/TextField/TextField.story.tsx index b7917f0a6..ff1e081c4 100644 --- a/packages/react/src/components/TextField/TextField.story.tsx +++ b/packages/react/src/components/TextField/TextField.story.tsx @@ -101,7 +101,7 @@ export const Prefix: StoryObj = { style={{ display: 'flex', alignItems: 'center', - color: 'var(--charcoal-color-text3)', + color: 'var(--charcoal-color-text-tertiary-default)', }} > diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot index 36e19f449..9866e1db1 100644 --- a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot +++ b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot @@ -523,7 +523,7 @@ exports[`Storybook Tests > react/TextField > Prefix 1`] = ` style={ Object { "alignItems": "center", - "color": "var(--charcoal-text3)", + "color": "var(--charcoal-color-text-tertiary-default)", "display": "flex", } } diff --git a/packages/react/src/components/TextField/index.css b/packages/react/src/components/TextField/index.css index b3063acff..d2f2aff2d 100644 --- a/packages/react/src/components/TextField/index.css +++ b/packages/react/src/components/TextField/index.css @@ -12,8 +12,8 @@ display: flex; height: 40px; transition: 0.2s background-color, 0.2s box-shadow; - color: var(--charcoal-color-text2); - background-color: var(--charcoal-color-surface3); + color: var(--charcoal-color-text-secondary-default); + background-color: var(--charcoal-color-container-secondary-default); border-radius: 4px; padding: 0 8px; line-height: 22px; @@ -25,7 +25,7 @@ } .charcoal-text-field-container:not([aria-disabled='true']):hover { - background-color: var(--charcoal-color-surface3-hover); + background-color: var(--charcoal-color-container-secondary-hover); } .charcoal-text-field-container:not([aria-disabled='true']):focus-within { @@ -73,15 +73,15 @@ appearance: none; background: transparent; - color: var(--charcoal-color-text2); + color: var(--charcoal-color-text-secondary-default); } .charcoal-text-field-input::placeholder { - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-placeholder-default); } .charcoal-text-field-line-counter { line-height: 22px; font-size: 14px; - color: var(--charcoal-color-text3); + color: var(--charcoal-color-text-tertiary-default); } From 93cad83bac559a0b0fdaede4133315c12d2064f6 Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 18:01:58 +0900 Subject: [PATCH 010/102] chore(react): update snapshot --- .../Modal/__snapshots__/index.story.storyshot | 10 +++++----- .../TagItem/__snapshots__/index.story.storyshot | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot index a27fa0795..40ae2d318 100644 --- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot @@ -66,7 +66,7 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
react/Modal > BottomSheet 1`] = `
react/Modal > Default 1`] = `
react/Modal > FullBottomSheet 1`] = `
react/Modal > NotDismmissableStory 1`] = `
react/TagItem > BGColor 1`] = ` data-state="default" style={ Object { - "--charcoal-tag-item-bg": "var(--charcoal-color-brand)", + "--charcoal-tag-item-bg": "var(---charcoal-color-container-primary-default)", } } > From 981322845df2762f1ec9abd945af438003d22db6 Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 18:45:01 +0900 Subject: [PATCH 011/102] chore(react): fix styling --- .storybook/global.css | 1 + packages/react/src/components/Button/index.css | 14 +++++++------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/.storybook/global.css b/.storybook/global.css index 507ac625e..254477a08 100644 --- a/.storybook/global.css +++ b/.storybook/global.css @@ -6,6 +6,7 @@ font-family: 'Noto Sans JP', sans-serif; font-optical-sizing: auto; font-style: normal; + background-color: var(--charcoal-color-background-default); } #storybook-docs pre { diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index c8fa44198..5c91b9838 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -84,7 +84,7 @@ } .charcoal-button[data-variant='Navigation'] { - color: var(--charcoal-color-text-on-primary-default); + color: var(--charcoal-color-text-on-h-u-d-default); background-color: var(--charcoal-color-container-h-u-d-default); } @@ -100,18 +100,18 @@ } .charcoal-button[data-variant='Danger'] { - color: var(--charcoal-color-text-on-primary-default); - background-color: var(--charcoal-color-container-discovery-default); + color: var(--charcoal-color-text-on-negative-default); + background-color: var(--charcoal-color-container-negative-default); } .charcoal-button[data-variant='Danger']:hover:not(:disabled) { - color: var(--charcoal-color-text-on-primary-hover); - background-color: var(--charcoal-color-container-discovery-hover); + color: var(--charcoal-color-text-on-negative-hover); + background-color: var(--charcoal-color-container-negative-hover); } .charcoal-button[data-variant='Danger']:active:not(:disabled), .charcoal-button[data-variant='Danger'][data-active='true'] { - color: var(--charcoal-color-text-on-primary-press); - background-color: var(--charcoal-color-container-discovery-press); + color: var(--charcoal-color-text-on-negative-press); + background-color: var(--charcoal-color-container-negative-press); } .charcoal-button[data-size='S'] { From 8c9fa77b232826f17dd541419bfad39204b48d3c Mon Sep 17 00:00:00 2001 From: naporitan Date: Wed, 17 Jul 2024 19:24:28 +0900 Subject: [PATCH 012/102] chore(react): fix styling --- packages/react/src/components/Checkbox/CheckboxInput/index.css | 2 +- .../react/src/components/Checkbox/CheckboxInput/index.story.tsx | 2 +- packages/react/src/components/LoadingSpinner/index.css | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css index 163088321..979d8ca68 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/index.css +++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css @@ -36,7 +36,7 @@ .charcoal-checkbox-input:not(:checked) { border-width: 2px; border-style: solid; - border-color: var(--charcoal-color-text4); + border-color: var(--charcoal-color-border-default); } .charcoal-checkbox-input:not(:disabled):focus { diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx b/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx index d3307a763..ac4aff04c 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx +++ b/packages/react/src/components/Checkbox/CheckboxInput/index.story.tsx @@ -44,7 +44,7 @@ export const Rounded: StoryObj = {
diff --git a/packages/react/src/components/LoadingSpinner/index.css b/packages/react/src/components/LoadingSpinner/index.css index f911dec9b..ff29a5a0b 100644 --- a/packages/react/src/components/LoadingSpinner/index.css +++ b/packages/react/src/components/LoadingSpinner/index.css @@ -10,7 +10,6 @@ width: var(--charcoal-loading-spinner-size); height: var(--charcoal-loading-spinner-size); opacity: 0.84; - color: var(--charcoal-color-text4); background-color: var(--charcoal-color-background-default); } .charcoal-loading-spinner[data-transparent='true'] { From f3bc60067bf4ea9a652a2b4186356065ce5a875d Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 17 Jul 2024 10:29:17 +0000 Subject: [PATCH 013/102] chore(react): update snapshot --- .../Checkbox/CheckboxInput/__snapshots__/index.story.storyshot | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot b/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot index 9e2fd12fe..ceab6a029 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot @@ -60,7 +60,7 @@ exports[`Storybook Tests > react/internals/CheckboxInput > Rounded 1`] = `
Date: Fri, 19 Jul 2024 09:13:19 +0000 Subject: [PATCH 014/102] chore(react): transparent -> rgba(0,0,0,0) --- packages/react/src/components/IconButton/index.css | 2 +- packages/react/src/components/LoadingSpinner/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index 451e43b39..4fd9d2e5d 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -51,7 +51,7 @@ .charcoal-icon-button[data-variant='Default'] { color: var(--charcoal-color-text-tertiary-default); - background-color: var(--charcoal-color-transparent); + background-color: rgba(0, 0, 0, 0); } .charcoal-icon-button[data-variant='Default'][data-active='true']:not( :disabled diff --git a/packages/react/src/components/LoadingSpinner/index.css b/packages/react/src/components/LoadingSpinner/index.css index ff29a5a0b..c9e99c6a6 100644 --- a/packages/react/src/components/LoadingSpinner/index.css +++ b/packages/react/src/components/LoadingSpinner/index.css @@ -13,7 +13,7 @@ background-color: var(--charcoal-color-background-default); } .charcoal-loading-spinner[data-transparent='true'] { - background-color: var(--charcoal-color-transparent); + background-color: rgba(0, 0, 0, 0); } @keyframes charcoal-loading-spinner-icon-scale-out { From 11a3059d9151913fd7d2e31aee8b827700b26e39 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Fri, 19 Jul 2024 10:35:29 +0000 Subject: [PATCH 015/102] chore: use on-img --- packages/react/src/components/IconButton/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index 4fd9d2e5d..ee1dd1bf6 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -77,28 +77,28 @@ .charcoal-icon-button[data-variant='Overlay'] { color: var(--charcoal-color-text-on-primary-default); - background-color: var(--charcoal-color-container-neutral-default); + background-color: var(--charcoal-color-container-on-img-default); } .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not( :disabled ):not([aria-disabled]), .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] { color: var(--charcoal-color-text-on-primary-press); - background-color: var(--charcoal-color-container-neutral-press); + background-color: var(--charcoal-color-container-on-img-press); } .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not( :disabled ):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover { color: var(--charcoal-color-text-on-primary-hover); - background-color: var(--charcoal-color-container-neutral-hover); + background-color: var(--charcoal-color-container-on-img-hover); } .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not( :disabled ):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active { color: var(--charcoal-color-text-on-primary-press); - background-color: var(--charcoal-color-container-neutral-press); + background-color: var(--charcoal-color-container-on-img-press); } .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus, From 7629333635f721aa70713ec7b277428ef2248552 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Fri, 19 Jul 2024 10:40:05 +0000 Subject: [PATCH 016/102] chore(react): text4 -> container-neutral --- packages/react/src/components/Switch/SwitchInput/index.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css index 2766640e9..ba446db92 100644 --- a/packages/react/src/components/Switch/SwitchInput/index.css +++ b/packages/react/src/components/Switch/SwitchInput/index.css @@ -14,7 +14,7 @@ border-radius: 16px; height: 16px; margin: 0; - background-color: var(--charcoal-color-text4); + background-color: var(--charcoal-color-container-neutral-default); } .charcoal-switch-input:disabled, @@ -47,11 +47,11 @@ } .charcoal-switch-input:not(:disabled):hover { - background-color: var(--charcoal-color-text4-hover); + background-color: var(--charcoal-color-container-neutral-hover); } .charcoal-switch-input:not(:disabled):active { - background-color: var(--charcoal-color-text4-press); + background-color: var(--charcoal-color-container-neutral-press); } .charcoal-switch-input:not(:disabled):focus { From 63764346f4f6ffc8633fdbc709992cde7fd3b587 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Fri, 19 Jul 2024 10:40:16 +0000 Subject: [PATCH 017/102] chore(react): use container press, hover --- packages/react/src/components/IconButton/index.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index ee1dd1bf6..01a5683e2 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -58,21 +58,21 @@ ):not([aria-disabled]), .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] { color: var(--charcoal-color-text-tertiary-press); - background-color: var(--charcoal-color-transparent-press); + background-color: var(--charcoal-color-container-press-a); } .charcoal-icon-button[data-variant='Default'][data-active='false']:not( :disabled ):not([aria-disabled]):hover, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover { color: var(--charcoal-color-text-tertiary-hover); - background-color: var(--charcoal-color-transparent-hover); + background-color: var(--charcoal-color-container-hover-a); } .charcoal-icon-button[data-variant='Default'][data-active='false']:not( :disabled ):not([aria-disabled]):active, .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active { color: var(--charcoal-color-text-tertiary-press); - background-color: var(--charcoal-color-transparent-press); + background-color: var(--charcoal-color-container-press-a); } .charcoal-icon-button[data-variant='Overlay'] { From 70acd175cd74707d7764d2a3082f8361daba709e Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 24 Jul 2024 06:21:38 +0000 Subject: [PATCH 018/102] feat(react): replace focus effect --- .storybook/theme-decorator.tsx | 1 + packages/react/src/components/Button/index.css | 2 +- .../src/components/Checkbox/CheckboxInput/index.css | 10 +++++----- .../react/src/components/DropdownSelector/index.css | 6 +++--- packages/react/src/components/IconButton/index.css | 4 ++-- .../react/src/components/Radio/RadioInput/index.css | 6 +++--- .../react/src/components/Switch/SwitchInput/index.css | 4 ++-- packages/react/src/components/TagItem/index.css | 4 ++-- packages/react/src/components/TextArea/index.css | 6 +++--- packages/react/src/components/TextField/index.css | 6 +++--- packages/react/src/index.css | 8 ++++++++ packages/react/src/index.ts | 2 ++ 12 files changed, 35 insertions(+), 24 deletions(-) create mode 100644 packages/react/src/index.css diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx index 4dac09046..7fefc65a4 100644 --- a/.storybook/theme-decorator.tsx +++ b/.storybook/theme-decorator.tsx @@ -6,6 +6,7 @@ import { themeSetter } from '@charcoal-ui/styled' import '../packages/theme/src/css/_variables_dark.css' import '../packages/theme/src/css/_variables_light.css' +import '../packages/react/src/index.css' const setter = themeSetter() diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index 5c91b9838..c03db1951 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -37,7 +37,7 @@ .charcoal-button:not(:disabled):focus-visible { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-button:not(:disabled):hover { diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css index 979d8ca68..f30a5666f 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/index.css +++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css @@ -41,10 +41,10 @@ .charcoal-checkbox-input:not(:disabled):focus { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-checkbox-input:not(:disabled):focus-visible { - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) { box-shadow: none; @@ -59,7 +59,7 @@ .charcoal-checkbox-input[aria-invalid='true'], .charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-checkbox-input[data-rounded='true'] { @@ -80,7 +80,7 @@ } .charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible { - box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover { @@ -94,7 +94,7 @@ .charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not( :disabled ):focus { - box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-checkbox-input[data-rounded='true']::before { diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css index e670e5fbc..4278b2164 100644 --- a/packages/react/src/components/DropdownSelector/index.css +++ b/packages/react/src/components/DropdownSelector/index.css @@ -37,11 +37,11 @@ .charcoal-dropdown-selector-button:not(:disabled):focus { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-dropdown-selector-button:not(:disabled):focus-visible { - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-dropdown-selector-button:not(:disabled)[data-active='true'], @@ -61,7 +61,7 @@ .charcoal-dropdown-selector-button:not( :disabled )[aria-invalid='true']:focus:not(:focus-visible) { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-ui-dropdown-selector-text { diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index 01a5683e2..b411b38ab 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -104,11 +104,11 @@ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus, .charcoal-icon-button[aria-disabled='false']:focus { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible, .charcoal-icon-button[aria-disabled='false']:focus-visible { - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not( :focus-visible diff --git a/packages/react/src/components/Radio/RadioInput/index.css b/packages/react/src/components/Radio/RadioInput/index.css index d8a917db3..238c51d92 100644 --- a/packages/react/src/components/Radio/RadioInput/index.css +++ b/packages/react/src/components/Radio/RadioInput/index.css @@ -49,11 +49,11 @@ .charcoal-radio-input:not(:disabled):focus { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-radio-input:not(:disabled):focus-visible { - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-radio-input:not(:disabled):focus:not(:focus-visible) { @@ -62,7 +62,7 @@ .charcoal-radio-input:not(:disabled)[aria-invalid='true'], .charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-radio-input:checked:not(:disabled):hover { diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css index ba446db92..8cdd5f4fe 100644 --- a/packages/react/src/components/Switch/SwitchInput/index.css +++ b/packages/react/src/components/Switch/SwitchInput/index.css @@ -56,10 +56,10 @@ .charcoal-switch-input:not(:disabled):focus { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-switch-input:not(:disabled):focus-visible { - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-switch-input:not(:disabled):focus:not(:focus-visible) { box-shadow: none; diff --git a/packages/react/src/components/TagItem/index.css b/packages/react/src/components/TagItem/index.css index 4e8482b17..3a210a01d 100644 --- a/packages/react/src/components/TagItem/index.css +++ b/packages/react/src/components/TagItem/index.css @@ -59,12 +59,12 @@ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible, .charcoal-tag-item[aria-disabled='false']:focus-visible { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus, .charcoal-tag-item[aria-disabled='false']:focus { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not( :focus-visible diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css index 11e964b46..0c8024739 100644 --- a/packages/react/src/components/TextArea/index.css +++ b/packages/react/src/components/TextArea/index.css @@ -21,12 +21,12 @@ } .charcoal-text-area-container[aria-invalid='true'] { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-text-area-container:focus-within { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-text-area-container:not(aria-disabled='true'):hover { @@ -34,7 +34,7 @@ } .charcoal-text-area-container[aria-invalid='true']:focus-within { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-text-area-textarea { diff --git a/packages/react/src/components/TextField/index.css b/packages/react/src/components/TextField/index.css index d2f2aff2d..e4ac6fca6 100644 --- a/packages/react/src/components/TextField/index.css +++ b/packages/react/src/components/TextField/index.css @@ -21,7 +21,7 @@ } .charcoal-text-field-container[data-invalid='true'] { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-error-effect); } .charcoal-text-field-container:not([aria-disabled='true']):hover { @@ -30,13 +30,13 @@ .charcoal-text-field-container:not([aria-disabled='true']):focus-within { outline: none; - box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-text-field-container:not( [aria-disabled='true'] )[data-invalid='true']:focus-within { - box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32); + box-shadow: var(--charcoal-color-custom-focus-effect); } .charcoal-text-field-prefix { diff --git a/packages/react/src/index.css b/packages/react/src/index.css new file mode 100644 index 000000000..9c93e514f --- /dev/null +++ b/packages/react/src/index.css @@ -0,0 +1,8 @@ +:root { + /* charcoal custom css variables */ + --charcoal-color-custom-focus-effect: inset 0px 0px 0px 1px + var(--charcoal-color-border-focus-1), + 0px 0px 0px 2px var(--charcoal-color-border-focus-2); + --charcoal-color-custom-error-effect: 0px 0px 0px 2px + var(--charcoal-color-border-negative); +} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 630885c27..715889c03 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,3 +1,5 @@ +import './index.css' + export { SSRProvider } from './core/SSRProvider' export { OverlayProvider } from './core/OverlayProvider' export { From 26afbc6e062fdf69b86ebdac920df78b714f4a1b Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 24 Jul 2024 06:32:09 +0000 Subject: [PATCH 019/102] chore(react): add component custom variables --- packages/react/src/css-variables.test.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/src/css-variables.test.tsx b/packages/react/src/css-variables.test.tsx index ec25e5728..f33dbdf37 100644 --- a/packages/react/src/css-variables.test.tsx +++ b/packages/react/src/css-variables.test.tsx @@ -19,7 +19,10 @@ const extractUsedVariables = (cssContent: string): string[] => { } const variablesSet = new Set() -const variableFiles = glob.sync(join(__dirname, '../../theme/src/css/*.css')) +const variableFiles = [ + join(__dirname, './index.css'), + ...glob.sync(join(__dirname, '../../theme/src/css/*.css')), +] for (const file of variableFiles) { const content = await readFile(file, 'utf-8') From 7fa1ab625b628020c4819f6d281c82a18b07b564 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 24 Jul 2024 06:56:23 +0000 Subject: [PATCH 020/102] fix(react): fix OverlayButtoncolor --- packages/react/src/components/Button/index.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index c03db1951..b4682c9ba 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -68,19 +68,19 @@ } .charcoal-button[data-variant='Overlay'] { - color: var(--charcoal-color-text-on-primary-default); - background-color: var(--charcoal-color-container-neutral-default); + color: var(--charcoal-color-text-on-on-img-default); + background-color: var(--charcoal-color-container-on-img-default); } .charcoal-button[data-variant='Overlay']:hover:not(:disabled) { - color: var(--charcoal-color-text-on-primary-hover); - background-color: var(--charcoal-color-container-neutral-hover); + color: var(--charcoal-color-text-on-on-img-hover); + background-color: var(--charcoal-color-container-on-img-hover); } .charcoal-button[data-variant='Overlay']:active:not(:disabled), .charcoal-button[data-variant='Overlay'][data-active='true'] { - color: var(--charcoal-color-text-on-primary-press); - background-color: var(--charcoal-color-container-neutral-press); + color: var(--charcoal-color-text-on-on-img-press); + background-color: var(--charcoal-color-container-on-img-press); } .charcoal-button[data-variant='Navigation'] { From b800a12a8964fcc8e73af8f79b757b69c8dab5d2 Mon Sep 17 00:00:00 2001 From: mimo Date: Wed, 24 Jul 2024 19:01:55 +0900 Subject: [PATCH 021/102] feat(token-cli-workflow): update variable collection name --- .github/workflows/tokens.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/tokens.yml b/.github/workflows/tokens.yml index b99f65951..4d64b2eed 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: | From 03a4da1926e12bb0896036753caf347fc6491696 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Thu, 25 Jul 2024 07:17:42 +0000 Subject: [PATCH 022/102] chore(react): add HUD token commented --- packages/react/src/components/Button/index.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index b4682c9ba..97753d571 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -83,6 +83,13 @@ background-color: var(--charcoal-color-container-on-img-press); } +/* + * HUD 要素ではないが、以下の理由で HUD を色として利用する。 + * 1. UI パッケージであるがゆえにデザインを大幅に変えたくない + * a. このコンポーネントデザインは改善できると思っている + * 2. この要素を説明するための Applied Token が存在しないため、例外的に Component Token という位置づけを追加することになる + * 改善するとなくなる要素のために新しく Token を追加することは避けたいので、今回は最も近しい Applied Token の HUD を利用することにした。 + */ .charcoal-button[data-variant='Navigation'] { color: var(--charcoal-color-text-on-h-u-d-default); background-color: var(--charcoal-color-container-h-u-d-default); From 81f5fee97eae9b8408abb095f1c5b4cdb0927981 Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Thu, 25 Jul 2024 10:19:20 +0000 Subject: [PATCH 023/102] feat(react): change disabled styling --- packages/react/src/components/Button/index.css | 3 ++- .../components/Checkbox/CheckboxInput/index.css | 2 +- packages/react/src/components/Checkbox/index.css | 9 +++------ .../components/DropdownSelector/ListItem/index.css | 3 ++- .../src/components/DropdownSelector/index.css | 3 ++- packages/react/src/components/IconButton/index.css | 3 ++- packages/react/src/components/Radio/index.css | 3 ++- .../src/components/SegmentedControl/index.css | 3 ++- .../src/components/Switch/SwitchInput/index.css | 3 ++- packages/react/src/components/Switch/index.css | 3 ++- packages/react/src/components/TagItem/index.css | 3 ++- packages/react/src/components/TextArea/index.css | 14 +++++++++----- packages/react/src/components/TextArea/index.tsx | 1 + packages/react/src/components/TextField/index.css | 12 ++++++++---- packages/react/src/components/TextField/index.tsx | 1 + 15 files changed, 41 insertions(+), 25 deletions(-) diff --git a/packages/react/src/components/Button/index.css b/packages/react/src/components/Button/index.css index 97753d571..3600d25f6 100644 --- a/packages/react/src/components/Button/index.css +++ b/packages/react/src/components/Button/index.css @@ -32,7 +32,8 @@ .charcoal-button:disabled { cursor: default; - opacity: 0.32; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-button:not(:disabled):focus-visible { diff --git a/packages/react/src/components/Checkbox/CheckboxInput/index.css b/packages/react/src/components/Checkbox/CheckboxInput/index.css index f30a5666f..75a9ca3ae 100644 --- a/packages/react/src/components/Checkbox/CheckboxInput/index.css +++ b/packages/react/src/components/Checkbox/CheckboxInput/index.css @@ -13,8 +13,8 @@ .charcoal-checkbox-input:disabled, .charcoal-checkbox-input[readonly] { - opacity: 0.32; cursor: default; + background-color: var(--charcoal-color-container-disable); } .charcoal-checkbox-input:checked { diff --git a/packages/react/src/components/Checkbox/index.css b/packages/react/src/components/Checkbox/index.css index abb9770c8..674650fcd 100644 --- a/packages/react/src/components/Checkbox/index.css +++ b/packages/react/src/components/Checkbox/index.css @@ -3,19 +3,16 @@ cursor: pointer; display: flex; gap: 4px; + color: var(--charcoal-color-text-secondary-default); } .charcoal-checkbox__label[aria-disabled='true'] { cursor: default; - opacity: 0.32; -} - -.charcoal-checkbox__label[aria-disabled='true'] > input { - opacity: 1; + color: var(--charcoal-color-text-disable); } .charcoal-checkbox__label_div { - color: var(--charcoal-color-text-secondary-default); + color: inherit; font-size: 14px; line-height: 20px; } diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.css b/packages/react/src/components/DropdownSelector/ListItem/index.css index 2079808c8..348140cf7 100644 --- a/packages/react/src/components/DropdownSelector/ListItem/index.css +++ b/packages/react/src/components/DropdownSelector/ListItem/index.css @@ -19,6 +19,7 @@ } .charcoal-list-item[aria-disabled='true'] { - opacity: 0.32; cursor: default; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } diff --git a/packages/react/src/components/DropdownSelector/index.css b/packages/react/src/components/DropdownSelector/index.css index 4278b2164..fc3448953 100644 --- a/packages/react/src/components/DropdownSelector/index.css +++ b/packages/react/src/components/DropdownSelector/index.css @@ -7,7 +7,8 @@ .charcoal-dropdown-selector-root[aria-disabled='true'] { cursor: default; - opacity: 0.32; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-dropdown-selector-button { diff --git a/packages/react/src/components/IconButton/index.css b/packages/react/src/components/IconButton/index.css index b411b38ab..a6e0b5ed0 100644 --- a/packages/react/src/components/IconButton/index.css +++ b/packages/react/src/components/IconButton/index.css @@ -26,7 +26,8 @@ .charcoal-icon-button:disabled, .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) { cursor: default; - opacity: 0.32; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-icon-button:focus { outline: none; diff --git a/packages/react/src/components/Radio/index.css b/packages/react/src/components/Radio/index.css index 08d3dc550..22e9a901e 100644 --- a/packages/react/src/components/Radio/index.css +++ b/packages/react/src/components/Radio/index.css @@ -7,8 +7,9 @@ } .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) { - opacity: 0.32; cursor: default; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-radio__label_div { diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css index e1dbd4484..d4fcdf9be 100644 --- a/packages/react/src/components/SegmentedControl/index.css +++ b/packages/react/src/components/SegmentedControl/index.css @@ -26,7 +26,8 @@ [aria-disabled='false'] ) { cursor: default; - opacity: 0.32; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-segmented-control-radio__label[data-checked='true'] { diff --git a/packages/react/src/components/Switch/SwitchInput/index.css b/packages/react/src/components/Switch/SwitchInput/index.css index 8cdd5f4fe..2bc29d57c 100644 --- a/packages/react/src/components/Switch/SwitchInput/index.css +++ b/packages/react/src/components/Switch/SwitchInput/index.css @@ -19,8 +19,9 @@ .charcoal-switch-input:disabled, .charcoal-switch-input[readonly] { - opacity: 0.32; cursor: default; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-switch-input::after { diff --git a/packages/react/src/components/Switch/index.css b/packages/react/src/components/Switch/index.css index a89617b5f..e9f307a4e 100644 --- a/packages/react/src/components/Switch/index.css +++ b/packages/react/src/components/Switch/index.css @@ -8,8 +8,9 @@ } .charcoal-switch__label[aria-disabled='true'] { - opacity: 0.32; cursor: default; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-switch__label[aria-disabled='true'] > input { diff --git a/packages/react/src/components/TagItem/index.css b/packages/react/src/components/TagItem/index.css index 3a210a01d..34b8aa251 100644 --- a/packages/react/src/components/TagItem/index.css +++ b/packages/react/src/components/TagItem/index.css @@ -53,8 +53,9 @@ .charcoal-tag-item:disabled, .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) { - opacity: 0.32; cursor: default; + color: var(--charcoal-color-text-disable); + background-color: var(--charcoal-color-container-disable); } .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible, .charcoal-tag-item[aria-disabled='false']:focus-visible { diff --git a/packages/react/src/components/TextArea/index.css b/packages/react/src/components/TextArea/index.css index 0c8024739..831fbece0 100644 --- a/packages/react/src/components/TextArea/index.css +++ b/packages/react/src/components/TextArea/index.css @@ -5,10 +5,6 @@ grid-gap: 4px; } -.charcoal-text-area-root[aria-disabled='true'] { - opacity: 0.32; -} - .charcoal-text-area-container { position: relative; overflow: hidden; @@ -29,7 +25,11 @@ box-shadow: var(--charcoal-color-custom-focus-effect); } -.charcoal-text-area-container:not(aria-disabled='true'):hover { +.charcoal-text-area-container[aria-disabled='true'] { + background-color: var(--charcoal-color-container-disable); +} + +.charcoal-text-area-container:not([aria-disabled='true']):hover { background-color: var(--charcoal-color-container-secondary-hover); } @@ -64,6 +64,10 @@ height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px); } +.charcoal-text-area-textarea[aria-disabled='true'] { + color: var(--charcoal-color-text-disable); +} + .charcoal-text-area-textarea::placeholder { color: var(--charcoal-color-text-placeholder-default); } diff --git a/packages/react/src/components/TextArea/index.tsx b/packages/react/src/components/TextArea/index.tsx index c436f6664..5f898ec94 100644 --- a/packages/react/src/components/TextArea/index.tsx +++ b/packages/react/src/components/TextArea/index.tsx @@ -130,6 +130,7 @@ const TextArea = forwardRef( aria-describedby={showAssistiveText ? describedbyId : undefined} aria-invalid={invalid} aria-labelledby={labelledbyId} + aria-disabled={props['aria-disabled'] ?? disabled} id={textAreaId} maxLength={maxLength} data-no-bottom-padding={showCount} diff --git a/packages/react/src/components/TextField/index.css b/packages/react/src/components/TextField/index.css index e4ac6fca6..43c6635de 100644 --- a/packages/react/src/components/TextField/index.css +++ b/packages/react/src/components/TextField/index.css @@ -4,10 +4,6 @@ grid-gap: 4px; } -.charcoal-text-field-root[aria-disabled='true'] { - opacity: 0.32; -} - .charcoal-text-field-container { display: flex; height: 40px; @@ -24,6 +20,10 @@ box-shadow: var(--charcoal-color-custom-error-effect); } +.charcoal-text-field-container[aria-disabled='true'] { + background-color: var(--charcoal-color-container-disable); +} + .charcoal-text-field-container:not([aria-disabled='true']):hover { background-color: var(--charcoal-color-container-secondary-hover); } @@ -76,6 +76,10 @@ color: var(--charcoal-color-text-secondary-default); } +.charcoal-text-field-input[aria-disabled='true'] { + color: var(--charcoal-color-text-disable); +} + .charcoal-text-field-input::placeholder { color: var(--charcoal-color-text-placeholder-default); } diff --git a/packages/react/src/components/TextField/index.tsx b/packages/react/src/components/TextField/index.tsx index 2b97848c0..61798cf76 100644 --- a/packages/react/src/components/TextField/index.tsx +++ b/packages/react/src/components/TextField/index.tsx @@ -114,6 +114,7 @@ const TextField = React.forwardRef( aria-describedby={showAssistiveText ? describedbyId : undefined} aria-invalid={invalid} aria-labelledby={labelledbyId} + aria-disabled={props['aria-disabled'] ?? disabled} id={inputId} data-invalid={invalid === true} maxLength={maxLength} From ed4db920a8e4ba9367bb9b3f7b7e06e1374b53d6 Mon Sep 17 00:00:00 2001 From: "charcoal-bot[bot]" <102140162+charcoal-bot[bot]@users.noreply.github.com> Date: Fri, 26 Jul 2024 05:09:46 +0000 Subject: [PATCH 024/102] Update theme --- packages/theme/src/css/_variables_dark.css | 748 ++++++++++---------- packages/theme/src/css/_variables_light.css | 748 ++++++++++---------- packages/theme/src/json/base.json | 534 +++++++------- packages/theme/src/json/pixiv-dark.json | 352 ++++----- packages/theme/src/json/pixiv-light.json | 352 ++++----- 5 files changed, 1393 insertions(+), 1341 deletions(-) diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css index ca1904b37..7d9978a98 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 5f5339f69..ded0450ce 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 63583468d..ec0e85232 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 9b83e7ee0..3d47d1afc 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 df2d6bfd7..ed6f84b92 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}" } } } From a7e17010e45078260f4ae2b53d2341b61630ba1b Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 31 Jul 2024 06:57:10 +0000 Subject: [PATCH 025/102] chore(react): update snapshot --- .../Modal/__snapshots__/index.story.storyshot | 6 ++++++ .../TextArea/__snapshots__/TextArea.story.storyshot | 11 +++++++++++ .../__snapshots__/TextField.story.storyshot | 13 +++++++++++++ 3 files changed, 30 insertions(+) diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot index 40ae2d318..8115c99cf 100644 --- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot @@ -103,6 +103,7 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = ` data-invalid={false} > react/Modal > BackgroundScroll 1`] = ` data-invalid={false} > react/Modal > Default 1`] = ` data-invalid={false} > react/Modal > Default 1`] = ` data-invalid={false} > react/Modal > FullBottomSheet 1`] = ` data-invalid={false} > react/Modal > FullBottomSheet 1`] = ` data-invalid={false} > react/TextArea > AssistiveText 1`] = ` >