From e86c0fc3faf30b3a484b5971e94ae812a1310214 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 13 Jul 2023 13:30:52 +0900 Subject: [PATCH 01/18] feat(styles): change px to rem --- packages/bezier-react/src/styles/_base.scss | 1 + .../bezier-react/src/styles/tokens/_core.scss | 48 +++++++++---------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss index 3ce7fa1e2f..9e378cc923 100644 --- a/packages/bezier-react/src/styles/_base.scss +++ b/packages/bezier-react/src/styles/_base.scss @@ -1,6 +1,7 @@ $system-fonts: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif; html { + font-size: 62.5%; // 10/16 = 0.625. Make REM calculations easier. font-family: 'Inter', 'NotoSansKR', 'NotoSansJP', $system-fonts; :lang(ja) { diff --git a/packages/bezier-react/src/styles/tokens/_core.scss b/packages/bezier-react/src/styles/tokens/_core.scss index a4f07c8051..0f8511fa7e 100644 --- a/packages/bezier-react/src/styles/tokens/_core.scss +++ b/packages/bezier-react/src/styles/tokens/_core.scss @@ -11,8 +11,8 @@ --radius-20: 20px; --radius-32: 32px; --radius-44: 44px; - --radius-100: 100%; - --radius-smooth-corners: 42%; + --radius-42-p: 42%; + --radius-100-p: 100%; --blue-300: #6687FF; --blue-400: #5E56F0; @@ -164,34 +164,34 @@ --grey-100-80: rgba(247, 247, 248, 0.8); --grey-50-80: rgba(252, 252, 252, 0.8); - --line-height-16: 16px; - --line-height-18: 18px; - --line-height-20: 20px; - --line-height-22: 22px; - --line-height-24: 24px; - --line-height-28: 28px; - --line-height-32: 32px; - --line-height-44: 44px; + --line-height-16: 16rem; + --line-height-18: 18rem; + --line-height-20: 20rem; + --line-height-22: 22rem; + --line-height-24: 24rem; + --line-height-28: 28rem; + --line-height-32: 32rem; + --line-height-44: 44rem; --font-weight-400: 400; --font-weight-700: 700; - --font-size-11: 11px; - --font-size-12: 12px; - --font-size-13: 13px; - --font-size-14: 14px; - --font-size-15: 15px; - --font-size-16: 16px; - --font-size-17: 17px; - --font-size-18: 18px; - --font-size-22: 22px; - --font-size-24: 24px; - --font-size-36: 36px; + --font-size-11: 11rem; + --font-size-12: 12rem; + --font-size-13: 13rem; + --font-size-14: 14rem; + --font-size-15: 15rem; + --font-size-16: 16rem; + --font-size-17: 17rem; + --font-size-18: 18rem; + --font-size-22: 22rem; + --font-size-24: 24rem; + --font-size-36: 36rem; --letter-spacing-0: 0; - --letter-spacing-01: -0.1; - --letter-spacing-04: -0.4; - --letter-spacing-1: -1; + --letter-spacing-m-1: -0.1; + --letter-spacing-m-4: -0.4; + --letter-spacing-m-10: -1; --paragraph-spacing-0: 0; From 01180f4adbfc480af93ca2d537c126b66caaea9f Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 13 Jul 2023 13:56:01 +0900 Subject: [PATCH 02/18] style(styles): remove comment --- packages/bezier-react/src/styles/index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss index f9fcad8669..e399faa7fc 100644 --- a/packages/bezier-react/src/styles/index.scss +++ b/packages/bezier-react/src/styles/index.scss @@ -1,6 +1,5 @@ @use 'sass:meta'; -// TODO: components, utilities layers @layer reset, base, tokens, components, utilities; @layer reset { From a007602d1be9822e21b429e98ffaee52c236f2d5 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 13 Jul 2023 13:58:11 +0900 Subject: [PATCH 03/18] feat(styles): add typogrpaphy utils template --- packages/bezier-react/src/styles/utilities/_index.scss | 1 + packages/bezier-react/src/styles/utilities/_typography.scss | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 packages/bezier-react/src/styles/utilities/_index.scss create mode 100644 packages/bezier-react/src/styles/utilities/_typography.scss diff --git a/packages/bezier-react/src/styles/utilities/_index.scss b/packages/bezier-react/src/styles/utilities/_index.scss new file mode 100644 index 0000000000..ca815dc914 --- /dev/null +++ b/packages/bezier-react/src/styles/utilities/_index.scss @@ -0,0 +1 @@ +@use 'typography'; diff --git a/packages/bezier-react/src/styles/utilities/_typography.scss b/packages/bezier-react/src/styles/utilities/_typography.scss new file mode 100644 index 0000000000..3a684d889e --- /dev/null +++ b/packages/bezier-react/src/styles/utilities/_typography.scss @@ -0,0 +1,4 @@ +@layer utilities { + // TODO: Add typography utilities + // TODO: Make externally available via class name +} From 1088e7fe95cc90c54ee2de92b95325f29dd8f9d8 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 13 Jul 2023 14:01:55 +0900 Subject: [PATCH 04/18] fix(styles): fix rem --- .../bezier-react/src/styles/tokens/_core.scss | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/bezier-react/src/styles/tokens/_core.scss b/packages/bezier-react/src/styles/tokens/_core.scss index 0f8511fa7e..d7e033649d 100644 --- a/packages/bezier-react/src/styles/tokens/_core.scss +++ b/packages/bezier-react/src/styles/tokens/_core.scss @@ -164,29 +164,29 @@ --grey-100-80: rgba(247, 247, 248, 0.8); --grey-50-80: rgba(252, 252, 252, 0.8); - --line-height-16: 16rem; - --line-height-18: 18rem; - --line-height-20: 20rem; - --line-height-22: 22rem; - --line-height-24: 24rem; - --line-height-28: 28rem; - --line-height-32: 32rem; - --line-height-44: 44rem; + --line-height-16: 1.6rem; + --line-height-18: 1.8rem; + --line-height-20: 2.0rem; + --line-height-22: 2.2rem; + --line-height-24: 2.4rem; + --line-height-28: 2.8rem; + --line-height-32: 3.2rem; + --line-height-44: 4.4rem; --font-weight-400: 400; --font-weight-700: 700; - --font-size-11: 11rem; - --font-size-12: 12rem; - --font-size-13: 13rem; - --font-size-14: 14rem; - --font-size-15: 15rem; - --font-size-16: 16rem; - --font-size-17: 17rem; - --font-size-18: 18rem; - --font-size-22: 22rem; - --font-size-24: 24rem; - --font-size-36: 36rem; + --font-size-11: 1.1rem; + --font-size-12: 1.2rem; + --font-size-13: 1.3rem; + --font-size-14: 1.4rem; + --font-size-15: 1.5rem; + --font-size-16: 1.6rem; + --font-size-17: 1.7rem; + --font-size-18: 1.8rem; + --font-size-22: 2.2rem; + --font-size-24: 2.4rem; + --font-size-36: 3.6rem; --letter-spacing-0: 0; --letter-spacing-m-1: -0.1; From 2a9e46d1768e2f1e9841817d960b75701d312444 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 16 Nov 2023 20:23:16 +0900 Subject: [PATCH 05/18] chore(deps): update css reset --- packages/bezier-react/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index f90f6aae00..03e32d7d9d 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -116,7 +116,7 @@ "sass": "^1.63.6", "storybook": "^7.4.2", "styled-components": "^5.3.11", - "the-new-css-reset": "^1.9.0", + "the-new-css-reset": "^1.11.2", "ts-prune": "^0.10.3", "tsconfig": "workspace:*", "tsconfig-paths-webpack-plugin": "^4.1.0", diff --git a/yarn.lock b/yarn.lock index 6154e4cbe5..d913f51aa2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2538,7 +2538,7 @@ __metadata: ssr-window: ^4.0.2 storybook: ^7.4.2 styled-components: ^5.3.11 - the-new-css-reset: ^1.9.0 + the-new-css-reset: ^1.11.2 ts-prune: ^0.10.3 tsconfig: "workspace:*" tsconfig-paths-webpack-plugin: ^4.1.0 @@ -21998,10 +21998,10 @@ __metadata: languageName: node linkType: hard -"the-new-css-reset@npm:^1.9.0": - version: 1.9.0 - resolution: "the-new-css-reset@npm:1.9.0" - checksum: 07cdae4ef811e34de45d694a512d5a89dec9925da9905f0eeabcc03476bbac2f0f586476fba7e5afdb6f945bb11013f5de44c94632b65b44b4ed4950a258eefb +"the-new-css-reset@npm:^1.11.2": + version: 1.11.2 + resolution: "the-new-css-reset@npm:1.11.2" + checksum: 22c009bc660163f5438ebe4f2d2f381c5a98fa5f73937fe313db2540c2d85f417296043a07a705525846b130544c8eb5b240ff99a6e6f4c890fe051f9b644560 languageName: node linkType: hard From dcf2b70ab89339d656a36404929066c5a0c2b27a Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 16 Nov 2023 20:48:57 +0900 Subject: [PATCH 06/18] feat(style): update core style (legacy) --- .../bezier-react/src/styles/tokens/_core.scss | 235 +++++++++--------- 1 file changed, 124 insertions(+), 111 deletions(-) diff --git a/packages/bezier-react/src/styles/tokens/_core.scss b/packages/bezier-react/src/styles/tokens/_core.scss index d7e033649d..7963b017eb 100644 --- a/packages/bezier-react/src/styles/tokens/_core.scss +++ b/packages/bezier-react/src/styles/tokens/_core.scss @@ -17,136 +17,46 @@ --blue-300: #6687FF; --blue-400: #5E56F0; --blue-500: #4E40C9; - --blue-400-30: rgba(94, 86, 240, 0.3); - --blue-400-20: rgba(94, 86, 240, 0.2); - --blue-400-10: rgba(94, 86, 240, 0.1); - --blue-300-40: rgba(102, 135, 255, 0.4); - --blue-300-30: rgba(102, 135, 255, 0.3); - --blue-300-20: rgba(102, 135, 255, 0.2); --cobalt-300: #47C8FF; --cobalt-400: #329BE7; --cobalt-500: #327AB8; - --cobalt-400-30: rgba(50, 155, 231, 0.3); - --cobalt-400-20: rgba(50, 155, 231, 0.2); - --cobalt-400-10: rgba(50, 155, 231, 0.1); - --cobalt-300-40: rgba(71, 200, 255, 0.4); - --cobalt-300-30: rgba(71, 200, 255, 0.3); - --cobalt-300-20: rgba(71, 200, 255, 0.2); + + --teal-300: #3CDDCD; + --teal-400: #0FB3A3; + --teal-500: #449C8A; --green-300: #3ACF5A; --green-400: #31A552; --green-500: #41904F; - --green-400-30: rgba(49, 165, 82, 0.3); - --green-400-20: rgba(49, 165, 82, 0.2); - --green-400-10: rgba(49, 165, 82, 0.1); - --green-300-40: rgba(58, 207, 90, 0.4); - --green-300-30: rgba(58, 207, 90, 0.3); - --green-300-20: rgba(58, 207, 90, 0.2); - --red-300: #FF5C5C; - --red-400: #E94E58; - --red-500: #AC3E46; - --red-400-30: rgba(233, 78, 88, 0.3); - --red-400-20: rgba(233, 78, 88, 0.2); - --red-400-10: rgba(233, 78, 88, 0.1); - --red-300-40: rgba(255, 92, 92, 0.4); - --red-300-30: rgba(255, 92, 92, 0.3); - --red-300-20: rgba(255, 92, 92, 0.2); - - --black-3: rgba(0, 0, 0, 0.03); - --black-5: rgba(0, 0, 0, 0.05); - --black-8: rgba(0, 0, 0, 0.08); - --black-15: rgba(0, 0, 0, 0.15); - --black-20: rgba(0, 0, 0, 0.2); - --black-22: rgba(0, 0, 0, 0.22); - --black-30: rgba(0, 0, 0, 0.3); - --black-40: rgba(0, 0, 0, 0.4); - --black-60: rgba(0, 0, 0, 0.6); - --black-85: rgba(0, 0, 0, 0.85); - --black-100: #000000; - - --white-0: rgba(255, 255, 255, 0); - --white-5: rgba(255, 255, 255, 0.05); - --white-8: rgba(255, 255, 255, 0.08); - --white-12: rgba(255, 255, 255, 0.12); - --white-20: rgba(255, 255, 255, 0.2); - --white-40: rgba(255, 255, 255, 0.4); - --white-60: rgba(255, 255, 255, 0.6); - --white-80: rgba(255, 255, 255, 0.8); - --white-90: rgba(255, 255, 255, 0.9); - --white-100: #FFFFFF; + --olive-300: #CAD548; + --olive-400: #A0A540; + --olive-500: #818628; + + --yellow-300: #FDD353; + --yellow-400: #EDBC40; + --yellow-500: #C39E37; --orange-300: #FFAB5C; --orange-400: #F4800B; --orange-500: #C57417; - --orange-900: #544A3F; - --orange-400-30: rgba(244, 128, 11, 0.3); - --orange-400-20: rgba(244, 128, 11, 0.2); - --orange-400-10: rgba(244, 128, 11, 0.1); - --orange-300-40: rgba(255, 171, 92, 0.4); - --orange-300-30: rgba(255, 171, 92, 0.3); - --orange-300-20: rgba(255, 171, 92, 0.2); - --yellow-300: #FDD353; - --yellow-400: #EDBC40; - --yellow-500: #C39E37; - --yellow-400-30: rgba(237, 188, 64, 0.3); - --yellow-400-20: rgba(237, 188, 64, 0.2); - --yellow-400-10: rgba(237, 188, 64, 0.1); - --yellow-300-40: rgba(253, 211, 83, 0.4); - --yellow-300-30: rgba(253, 211, 83, 0.3); - --yellow-300-20: rgba(253, 211, 83, 0.2); + --red-300: #FF5C5C; + --red-400: #E94E58; + --red-500: #AC3E46; --pink-300: #EC6FD3; --pink-400: #CB48AD; --pink-500: #A32E92; - --pink-400-30: rgba(203, 72, 173, 0.3); - --pink-400-20: rgba(203, 72, 173, 0.2); - --pink-400-10: rgba(203, 72, 173, 0.1); - --pink-300-40: rgba(236, 111, 211, 0.4); - --pink-300-30: rgba(236, 111, 211, 0.3); - --pink-300-20: rgba(236, 111, 211, 0.2); --purple-300: #B570FF; --purple-400: #915CE0; --purple-500: #6B23B3; - --purple-400-30: rgba(145, 92, 224, 0.3); - --purple-400-20: rgba(145, 92, 224, 0.2); - --purple-400-10: rgba(145, 92, 224, 0.1); - --purple-300-40: rgba(181, 112, 255, 0.4); - --purple-300-30: rgba(181, 112, 255, 0.3); - --purple-300-20: rgba(181, 112, 255, 0.2); --navy-300: #647CC9; --navy-400: #3A4F8D; --navy-500: #333D5B; - --navy-400-30: rgba(58, 79, 141, 0.3); - --navy-400-20: rgba(58, 79, 141, 0.2); - --navy-400-10: rgba(58, 79, 141, 0.1); - --navy-300-40: rgba(100, 124, 201, 0.4); - --navy-300-30: rgba(100, 124, 201, 0.3); - --navy-300-20: rgba(100, 124, 201, 0.2); - - --teal-300: #3CDDCD; - --teal-400: #0FB3A3; - --teal-500: #449C8A; - --teal-400-30: rgba(15, 179, 163, 0.3); - --teal-400-20: rgba(15, 179, 163, 0.2); - --teal-400-10: rgba(15, 179, 163, 0.1); - --teal-300-40: rgba(60, 221, 205, 0.4); - --teal-300-30: rgba(60, 221, 205, 0.3); - --teal-300-20: rgba(60, 221, 205, 0.2); - - --olive-300: #CAD548; - --olive-400: #A0A540; - --olive-500: #818628; - --olive-400-30: rgba(160, 165, 64, 0.3); - --olive-400-20: rgba(160, 165, 64, 0.2); - --olive-400-10: rgba(160, 165, 64, 0.1); - --olive-300-40: rgba(202, 213, 72, 0.4); - --olive-300-30: rgba(202, 213, 72, 0.3); - --olive-300-20: rgba(202, 213, 72, 0.2); --grey-50: #FCFCFC; --grey-100: #F7F7F8; @@ -156,13 +66,116 @@ --grey-800: #313234; --grey-850: #2A2B2D; --grey-900: #242428; - --grey-900-90: rgba(36, 36, 40, 0.9); - --grey-850-80: rgba(42, 43, 45, 0.8); - --grey-800-80: rgba(49, 50, 52, 0.8); - --grey-700-80: rgba(70, 71, 72, 0.8); - --grey-200-80: rgba(239, 239, 240, 0.8); - --grey-100-80: rgba(247, 247, 248, 0.8); - --grey-50-80: rgba(252, 252, 252, 0.8); + + --white: #FFFFFF; + --black: #000000; + + --blue-400-30: #5E56F04D; + --blue-400-20: #5E56F033; + --blue-400-10: #5E56F01A; + --blue-300-40: #6687FF66; + --blue-300-30: #6687FF4D; + --blue-300-20: #6687FF33; + + --cobalt-400-30: #329BE74D; + --cobalt-400-20: #329BE733; + --cobalt-400-10: #329BE71A; + --cobalt-300-40: #47C8FF66; + --cobalt-300-30: #47C8FF4D; + --cobalt-300-20: #47C8FF33; + + --teal-400-30: #0FB3A34D; + --teal-400-20: #0FB3A333; + --teal-400-10: #0FB3A31A; + --teal-300-40: #3CDDCD66; + --teal-300-30: #3CDDCD4D; + --teal-300-20: #3CDDCD33; + + --green-400-30: #31A5524D; + --green-400-20: #31A55233; + --green-400-10: #31A5521A; + --green-300-40: #3ACF5A66; + --green-300-30: #3ACF5A4D; + --green-300-20: #3ACF5A33; + + --olive-400-30: #A0A5404D; + --olive-400-20: #A0A54033; + --olive-400-10: #A0A5401A; + --olive-300-40: #CAD54866; + --olive-300-30: #CAD5484D; + --olive-300-20: #CAD54833; + + --yellow-400-30: #EDBC404D; + --yellow-400-20: #EDBC4033; + --yellow-400-10: #EDBC401A; + --yellow-300-40: #FDD35366; + --yellow-300-30: #FDD3534D; + --yellow-300-20: #FDD35333; + + --orange-400-30: #F4800B4D; + --orange-400-20: #F4800B33; + --orange-400-10: #F4800B1A; + --orange-300-40: #FFAB5C66; + --orange-300-30: #FFAB5C4D; + --orange-300-20: #FFAB5C33; + + --red-400-30: #E94E584D; + --red-400-20: #E94E5833; + --red-400-10: #E94E581A; + --red-300-40: #FF5C5C66; + --red-300-30: #FF5C5C4D; + --red-300-20: #FF5C5C33; + + --pink-400-30: #CB48AD4D; + --pink-400-20: #CB48AD33; + --pink-400-10: #CB48AD1A; + --pink-300-40: #EC6FD366; + --pink-300-30: #EC6FD34D; + --pink-300-20: #EC6FD333; + + --purple-400-30: #915CE04D; + --purple-400-20: #915CE033; + --purple-400-10: #915CE01A; + --purple-300-40: #B570FF66; + --purple-300-30: #B570FF4D; + --purple-300-20: #B570FF33; + + --navy-400-30: #3A4F8D4D; + --navy-400-20: #3A4F8D33; + --navy-400-10: #3A4F8D1A; + --navy-300-40: #647CC966; + --navy-300-30: #647CC94D; + --navy-300-20: #647CC933; + + --grey-900-90: #242428E6; + --grey-850-80: #2A2B2DCC; + --grey-800-90: #313234E6; + --grey-800-80: #313234CC; + --grey-700-80: #464748CC; + --grey-200-80: #EFEFF0CC; + --grey-100-90: #F7F7F8E6; + --grey-100-80: #F7F7F8CC; + --grey-50-80: #FCFCFCCC; + + --white-90: #FFFFFFE6; + --white-80: #FFFFFFCC; + --white-60: #FFFFFF99; + --white-40: #FFFFFF66; + --white-20: #FFFFFF33; + --white-12: #FFFFFF1F; + --white-8: #FFFFFF14; + --white-5: #FFFFFF0D; + + --black-85: #000000D9; + --black-60: #00000099; + --black-40: #00000066; + --black-30: #0000004D; + --black-22: #00000038; + --black-20: #00000033; + --black-15: #00000026; + --black-8: #00000014; + --black-5: #0000000D; + --black-3: #00000008; --line-height-16: 1.6rem; --line-height-18: 1.8rem; From 142462cf4cbf895a1108fd7f3f63010b25255762 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 16 Nov 2023 20:49:24 +0900 Subject: [PATCH 07/18] feat(style): update light theme style (legacy) --- .../styles/tokens/semantic/_light-theme.scss | 347 ++++++++++-------- 1 file changed, 199 insertions(+), 148 deletions(-) diff --git a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss b/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss index 8e7e205ea0..27f9ab138d 100644 --- a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss +++ b/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss @@ -1,158 +1,209 @@ // TODO: Reference core token @mixin tokens { - --bg-blue-dark: #4E40C9; - --bg-blue-normal: #5E56F0; - --bg-blue-light: rgba(94, 86, 240, 0.3); - --bg-blue-lighter: rgba(94, 86, 240, 0.2); - --bg-blue-lightest: rgba(94, 86, 240, 0.1); - - --bg-red-dark: #AC3E46; - --bg-red-normal: #E94E58; - --bg-red-light: rgba(233, 78, 88, 0.3); - --bg-red-lighter: rgba(233, 78, 88, 0.2); - --bg-red-lightest: rgba(233, 78, 88, 0.1); - - --bg-orange-dark: #C57417; - --bg-orange-normal: #F4800B; - --bg-orange-light: rgba(244, 128, 11, 0.3); - --bg-orange-lighter: rgba(244, 128, 11, 0.2); - --bg-orange-lightest: rgba(244, 128, 11, 0.1); - - --bg-yellow-dark: #C39E37; - --bg-yellow-normal: #EDBC40; - --bg-yellow-light: rgba(237, 188, 64, 0.3); - --bg-yellow-lighter: rgba(237, 188, 64, 0.2); - --bg-yellow-lightest: rgba(237, 188, 64, 0.1); - - --bg-olive-dark: #818628; - --bg-olive-normal: #A0A540; - --bg-olive-light: rgba(160, 165, 64, 0.3); - --bg-olive-lighter: rgba(160, 165, 64, 0.2); - --bg-olive-lightest: rgba(160, 165, 64, 0.1); - - --bg-green-dark: #41904F; - --bg-green-normal: #31A552; - --bg-green-light: rgba(49, 165, 82, 0.3); - --bg-green-lighter: rgba(49, 165, 82, 0.2); - --bg-green-lightest: rgba(49, 165, 82, 0.1); - - --bg-teal-dark: #449C8A; - --bg-teal-normal: #0FB3A3; - --bg-teal-light: rgba(15, 179, 163, 0.3); - --bg-teal-lighter: rgba(15, 179, 163, 0.2); - --bg-teal-lightest: rgba(15, 179, 163, 0.1); - - --bg-cobalt-dark: #327AB8; - --bg-cobalt-normal: #329BE7; - --bg-cobalt-light: rgba(50, 155, 231, 0.3); - --bg-cobalt-lighter: rgba(50, 155, 231, 0.2); - --bg-cobalt-lightest: rgba(50, 155, 231, 0.1); - - --bg-navy-dark: #333D5B; - --bg-navy-normal: #3A4F8D; - --bg-navy-light: rgba(58, 79, 141, 0.3); - --bg-navy-lighter: rgba(58, 79, 141, 0.2); - --bg-navy-lightest: rgba(58, 79, 141, 0.1); - - --bg-purple-dark: #6B23B3; - --bg-purple-normal: #915CE0; - --bg-purple-light: rgba(145, 92, 224, 0.3); - --bg-purple--lighter: rgba(145, 92, 224, 0.2); - --bg-purple-lightest: rgba(145, 92, 224, 0.1); - - --bg-pink-dark: #A32E92; - --bg-pink-normal: #CB48AD; - --bg-pink-light: rgba(203, 72, 173, 0.3); - --bg-pink-lighter: rgba(203, 72, 173, 0.2); - --bg-pink-lightest: rgba(203, 72, 173, 0.1); - - --bg-white-highest: #FFFFFF; - --bg-white-higher: #FFFFFF; + --bg-white-high: #FFFFFF; --bg-white-normal: #FFFFFF; - - --bg-black-darkest: rgba(0, 0, 0, 0.6); - --bg-black-darker: rgba(0, 0, 0, 0.4); - --bg-black-dark: rgba(0, 0, 0, 0.2); - --bg-black-light: rgba(0, 0, 0, 0.08); - --bg-black-lighter: rgba(0, 0, 0, 0.05); - --bg-black-lightest: rgba(0, 0, 0, 0.03); - + --bg-white-low: #FFFFFF; + --bg-gnb: #EFEFF0CC; + --bg-navi: #F7F7F8CC; + --bg-header: #FFFFFF; + --bg-header-float: #FFFFFFE6; + --bg-lounge: #F7F7F8E6; + --bg-black-darkest: #00000099; + --bg-black-darker: #00000066; + --bg-black-dark: #00000026; + --bg-black-light: #00000014; + --bg-black-lighter: #0000000D; + --bg-black-lightest: #00000008; --bg-grey-darkest: #242428; --bg-grey-dark: #A7A7AA; + --bg-grey-dim-lightest: #FCFCFCCC; --bg-grey-light: #EFEFF0; --bg-grey-lighter: #F7F7F8; --bg-grey-lightest: #FCFCFC; - - --bg-alpha-white-lightest: rgba(255, 255, 255, 0.9); - --bg-alpha-white-lighter: rgba(255, 255, 255, 0.6); - --bg-alpha-white-light: rgba(255, 255, 255, 0.2); - --bg-alpha-grey-darkest: rgba(239, 239, 240, 0.8); - --bg-alpha-grey-darker: rgba(247, 247, 248, 0.8); - --bg-alpha-grey-dark: rgba(252, 252, 252, 0.8); - --bg-alpha-grey-light: rgba(247, 247, 248, 0.8); - - --bg-absolute-white-dark: #FFFFFF; - --bg-absolute-white-normal: rgba(255, 255, 255, 0.9); - --bg-absolute-white-light: rgba(255, 255, 255, 0.6); - --bg-absolute-white-lighter: rgba(255, 255, 255, 0.4); - --bg-absolute-white-lightest: rgba(255, 255, 255, 0.2); - - --bg-absolute-black-dark: #000000; - --bg-absolute-black-normal: rgba(0, 0, 0, 0.85); - --bg-absolute-black-light: rgba(0, 0, 0, 0.6); - --bg-absolute-black-lighter: rgba(0, 0, 0, 0.4); - --bg-absolute-black-lightest: rgba(0, 0, 0, 0.2); - - --fg-red: #E94E58; - --fg-orange: #F4800B; - --fg-yellow: #EDBC40; - --fg-olive: #A0A540; - --fg-green: #31A552; - --fg-teal: #0FB3A3; - --fg-cobalt: #329BE7; - --fg-blue: #5E56F0; - --fg-navy: #3A4F8D; - --fg-purple: #915CE0; - --fg-pink: #CB48AD; - - --fg-black-darkest: rgba(0, 0, 0, 0.85); - --fg-black-darker: rgba(0, 0, 0, 0.6); - --fg-black-dark: rgba(0, 0, 0, 0.4); - - --fg-white-normal: #FFFFFF; - --fg-absolute-white-dark: #FFFFFF; - --fg-absolute-white-normal: rgba(255, 255, 255, 0.9); - --fg-absolute-white-light: rgba(255, 255, 255, 0.6); - --fg-absolute-white-lighter: rgba(255, 255, 255, 0.4); - --fg-absolute-white-lightest: rgba(255, 255, 255, 0.2); - - --fg-absolute-black-dark: #000000; - --fg-absolute-black-normal: rgba(0, 0, 0, 0.85); - --fg-absolute-black-light: rgba(0, 0, 0, 0.6); - --fg-absolute-black-lighter: rgba(0, 0, 0, 0.4); - --fg-absolute-black-lightest: rgba(0, 0, 0, 0.2); - - --surface-lowest: #F7F7F8; /* edit marketing */ - --surface-lower: #FCFCFC; /* edit support-bot, report, mobile 2-depth */ - --surface-normal: #FFFFFF; - - --shadow-xl: rgba(0, 0, 0, 0.3); - --shadow-l: rgba(0, 0, 0, 0.22); - --shadow-m: rgba(0, 0, 0, 0.15); - --shadow-s: rgba(0, 0, 0, 0.08); - --shadow-base: rgba(0, 0, 0, 0.05); - --shadow-base-inner: rgba(255, 255, 255, 0.12); - - --bdr-black-dark: rgba(0, 0, 0, 0.15); - --bdr-black-light: rgba(0, 0, 0, 0.08); - --bdr-black-lightest: rgba(0, 0, 0, 0.03); - --bdr-grey: #EFEFF0; + --bg-white-dim-dark: #FFFFFF99; + --bg-white-dim-light: #FFFFFF33; + --bgtxt-blue-dark: #4E40C9; + --bgtxt-blue-normal: #5E56F0; + --bgtxt-blue-light: #5E56F04D; + --bgtxt-blue-lighter: #5E56F033; + --bgtxt-blue-lightest: #5E56F01A; + --bgtxt-cobalt-dark: #327AB8; + --bgtxt-cobalt-normal: #329BE7; + --bgtxt-cobalt-light: #329BE74D; + --bgtxt-cobalt-lighter: #329BE733; + --bgtxt-cobalt-lightest: #329BE71A; + --bgtxt-teal-dark: #449C8A; + --bgtxt-teal-normal: #0FB3A3; + --bgtxt-teal-light: #0FB3A34D; + --bgtxt-teal-lighter: #0FB3A333; + --bgtxt-teal-lightest: #0FB3A31A; + --bgtxt-green-dark: #41904F; + --bgtxt-green-normal: #31A552; + --bgtxt-green-light: #31A5524D; + --bgtxt-green-lighter: #31A55233; + --bgtxt-green-lightest: #31A5521A; + --bgtxt-olive-dark: #818628; + --bgtxt-olive-normal: #A0A540; + --bgtxt-olive-light: #A0A5404D; + --bgtxt-olive-lighter: #A0A54033; + --bgtxt-olive-lightest: #A0A5401A; + --bgtxt-yellow-dark: #C39E37; + --bgtxt-yellow-normal: #EDBC40; + --bgtxt-yellow-light: #EDBC404D; + --bgtxt-yellow-lighter: #EDBC4033; + --bgtxt-yellow-lightest: #EDBC401A; + --bgtxt-orange-dark: #C57417; + --bgtxt-orange-normal: #F4800B; + --bgtxt-orange-light: #F4800B4D; + --bgtxt-orange-lighter: #F4800B33; + --bgtxt-orange-lightest: #F4800B1A; + --bgtxt-red-dark: #AC3E46; + --bgtxt-red-normal: #E94E58; + --bgtxt-red-light: #E94E584D; + --bgtxt-red-lighter: #E94E5833; + --bgtxt-red-lightest: #E94E581A; + --bgtxt-pink-dark: #A32E92; + --bgtxt-pink-normal: #CB48AD; + --bgtxt-pink-light: #CB48AD4D; + --bgtxt-pink-lighter: #CB48AD33; + --bgtxt-pink-lightest: #CB48AD1A; + --bgtxt-purple-dark: #6B23B3; + --bgtxt-purple-normal: #915CE0; + --bgtxt-purple-light: #915CE04D; + --bgtxt-purple-lighter: #915CE033; + --bgtxt-purple-lightest: #915CE01A; + --bgtxt-navy-dark: #333D5B; + --bgtxt-navy-normal: #3A4F8D; + --bgtxt-navy-light: #3A4F8D4D; + --bgtxt-navy-lighter: #3A4F8D33; + --bgtxt-navy-lightest: #3A4F8D1A; + --txt-black-pure: #000000; + --txt-black-darkest: #000000D9; + --txt-black-darker: #00000099; + --txt-black-dark: #00000066; + --txt-white-normal: #FFFFFF; + --bgtxt-absolute-black-dark: #000000; + --bgtxt-absolute-black-normal: #000000D9; + --bgtxt-absolute-black-light: #00000099; + --bgtxt-absolute-black-lighter: #00000066; + --bgtxt-absolute-black-lightest: #00000033; + --bgtxt-absolute-white-dark: #FFFFFF; + --bgtxt-absolute-white-normal: #FFFFFFE6; + --bgtxt-absolute-white-light: #FFFFFF99; + --bgtxt-absolute-white-lighter: #FFFFFF66; + --bgtxt-absolute-white-lightest: #FFFFFF33; + --bdr-black-dark: #00000026; + --bdr-black-light: #00000014; + --bdr-black-lightest: #00000008; + --bdr-grey-light: #EFEFF0; --bdr-white: #FFFFFF; - - --dim-black: rgba(0, 0, 0, 0.4); - - --gradient-green: linear-gradient(90deg, #31A552 0%, #3ACF5A 100%); /* progress, line-banner */ - --gradient-purple: linear-gradient(90deg, #915CE0 0%, #B570FF 100%); /* line-banner */ - --gradient-orange: linear-gradient(90deg, #F4800B 0%, #FFAB5C 100%); /* line-banner */ - --gradient-grey: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%); /* progress */ + --shdw-xlarge: #0000004D; + --shdw-large: #00000038; + --shdw-medium: #00000026; + --shdw-small: #00000014; + --shdw-base: #0000000D; + --shdw-inner-base: #FFFFFF1F; + --inverted-bg-white-high: #464748; + --inverted-bg-white-normal: #242428; + --inverted-bg-white-low: #313234; + --inverted-bg-gnb: #464748CC; + --inverted-bg-navi: #313234CC; + --inverted-bg-header: #313234; + --inverted-bg-header-float: #313234CC; + --inverted-bg-lounge: #313234E6; + --inverted-bg-black-darkest: #FFFFFF99; + --inverted-bg-black-darker: #FFFFFF66; + --inverted-bg-black-dark: #FFFFFF33; + --inverted-bg-black-light: #FFFFFF1F; + --inverted-bg-black-lighter: #FFFFFF14; + --inverted-bg-black-lightest: #FFFFFF0D; + --inverted-bg-grey-darkest: #FFFFFF; + --inverted-bg-grey-dark: #A7A7AA; + --inverted-bg-grey-dim-lightest: #2A2B2DCC; + --inverted-bg-grey-light: #464748; + --inverted-bg-grey-lighter: #313234; + --inverted-bg-grey-lightest: #2A2B2D; + --inverted-bg-white-dim-dark: #00000099; + --inverted-bg-white-dim-light: #00000033; + --inverted-bgtxt-blue-dark: #5E56F0; + --inverted-bgtxt-blue-normal: #6687FF; + --inverted-bgtxt-blue-light: #6687FF66; + --inverted-bgtxt-blue-lighter: #6687FF4D; + --inverted-bgtxt-blue-lightest: #6687FF33; + --inverted-bgtxt-cobalt-dark: #329BE7; + --inverted-bgtxt-cobalt-normal: #47C8FF; + --inverted-bgtxt-cobalt-light: #47C8FF66; + --inverted-bgtxt-cobalt-lighter: #47C8FF4D; + --inverted-bgtxt-cobalt-lightest: #47C8FF33; + --inverted-bgtxt-teal-dark: #0FB3A3; + --inverted-bgtxt-teal-normal: #3CDDCD; + --inverted-bgtxt-teal-light: #3CDDCD66; + --inverted-bgtxt-teal-lighter: #3CDDCD4D; + --inverted-bgtxt-teal-lightest: #3CDDCD33; + --inverted-bgtxt-green-dark: #31A552; + --inverted-bgtxt-green-normal: #3ACF5A; + --inverted-bgtxt-green-light: #3ACF5A66; + --inverted-bgtxt-green-lighter: #3ACF5A4D; + --inverted-bgtxt-green-lightest: #3ACF5A33; + --inverted-bgtxt-olive-dark: #A0A540; + --inverted-bgtxt-olive-normal: #CAD548; + --inverted-bgtxt-olive-light: #CAD54866; + --inverted-bgtxt-olive-lighter: #CAD5484D; + --inverted-bgtxt-olive-lightest: #CAD54833; + --inverted-bgtxt-yellow-dark: #EDBC40; + --inverted-bgtxt-yellow-normal: #FDD353; + --inverted-bgtxt-yellow-light: #FDD35366; + --inverted-bgtxt-yellow-lighter: #FDD3534D; + --inverted-bgtxt-yellow-lightest: #FDD35333; + --inverted-bgtxt-orange-dark: #F4800B; + --inverted-bgtxt-orange-normal: #FFAB5C; + --inverted-bgtxt-orange-light: #FFAB5C66; + --inverted-bgtxt-orange-lighter: #FFAB5C4D; + --inverted-bgtxt-orange-lightest: #FFAB5C33; + --inverted-bgtxt-red-dark: #E94E58; + --inverted-bgtxt-red-normal: #FF5C5C; + --inverted-bgtxt-red-light: #FF5C5C66; + --inverted-bgtxt-red-lighter: #FF5C5C4D; + --inverted-bgtxt-red-lightest: #FF5C5C33; + --inverted-bgtxt-pink-dark: #CB48AD; + --inverted-bgtxt-pink-normal: #EC6FD3; + --inverted-bgtxt-pink-light: #EC6FD366; + --inverted-bgtxt-pink-lighter: #EC6FD34D; + --inverted-bgtxt-pink-lightest: #EC6FD333; + --inverted-bgtxt-purple-dark: #915CE0; + --inverted-bgtxt-purple-normal: #B570FF; + --inverted-bgtxt-purple-light: #B570FF66; + --inverted-bgtxt-purple-lighter: #B570FF4D; + --inverted-bgtxt-purple-lightest: #B570FF33; + --inverted-bgtxt-navy-dark: #3A4F8D; + --inverted-bgtxt-navy-normal: #647CC9; + --inverted-bgtxt-navy-light: #647CC966; + --inverted-bgtxt-navy-lighter: #647CC94D; + --inverted-bgtxt-navy-lightest: #647CC933; + --inverted-txt-black-pure: #FFFFFF; + --inverted-txt-black-darkest: #FFFFFFCC; + --inverted-txt-black-darker: #FFFFFF99; + --inverted-txt-black-dark: #FFFFFF66; + --inverted-txt-white-normal: #242428; + --inverted-bgtxt-absolute-black-dark: #000000; + --inverted-bgtxt-absolute-black-normal: #000000D9; + --inverted-bgtxt-absolute-black-light: #00000099; + --inverted-bgtxt-absolute-black-lighter: #00000066; + --inverted-bgtxt-absolute-black-lightest: #00000033; + --inverted-bgtxt-absolute-white-dark: #FFFFFF; + --inverted-bgtxt-absolute-white-normal: #FFFFFFE6; + --inverted-bgtxt-absolute-white-light: #FFFFFF99; + --inverted-bgtxt-absolute-white-lighter: #FFFFFF66; + --inverted-bgtxt-absolute-white-lightest: #FFFFFF33; + --inverted-bdr-black-dark: #FFFFFF33; + --inverted-bdr-black-light: #FFFFFF1F; + --inverted-bdr-black-lightest: #FFFFFF0D; + --inverted-bdr-grey-light: #464748; + --inverted-bdr-white: #464748; + --inverted-shdw-xlarge: #00000099; + --inverted-shdw-large: #00000066; + --inverted-shdw-medium: #00000033; + --inverted-shdw-small: #00000026; + --inverted-shdw-base: #00000014; + --inverted-shdw-inner-base: #FFFFFF14; } From 3128d8bced85baf654f341d5033cde9a6040007f Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 16 Nov 2023 20:51:27 +0900 Subject: [PATCH 08/18] feat(style): update dark theme style (legacy) --- .../styles/tokens/semantic/_dark-theme.scss | 346 ++++++++++-------- 1 file changed, 199 insertions(+), 147 deletions(-) diff --git a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss b/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss index 7a5f209a82..a407301df0 100644 --- a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss +++ b/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss @@ -1,157 +1,209 @@ // TODO: Reference core token @mixin tokens { - --bg-blue-dark: #5E56F0; - --bg-blue-normal: #6687FF; - --bg-blue-light: rgba(102, 135, 255, 0.4); - --bg-blue-lighter: rgba(102, 135, 255, 0.3); - --bg-blue-lightest: rgba(102, 135, 255, 0.2); - - --bg-red-dark: #E94E58; - --bg-red-normal: #FF5C5C; - --bg-red-light: rgba(255, 92, 92, 0.3); - --bg-red-lighter: rgba(255, 92, 92, 0.2); - --bg-red-lightest: rgba(255, 92, 92, 0.2); - - --bg-orange-dark: #F4800B; - --bg-orange-normal: #FFAB5C; - --bg-orange-light: rgba(255, 171, 92, 0.4); - --bg-orange-lighter: rgba(255, 171, 92, 0.3); - --bg-orange-lightest: rgba(255, 171, 92, 0.2); - - --bg-yellow-dark: #EDBC40; - --bg-yellow-normal: #FDD353; - --bg-yellow-light: rgba(253, 211, 83, 0.4); - --bg-yellow-lighter: rgba(253, 211, 83, 0.3); - --bg-yellow-lightest: rgba(253, 211, 83, 0.2); - - --bg-olive-dark: #A0A540; - --bg-olive-normal: #CAD548; - --bg-olive-light: rgba(202, 213, 72, 0.4); - --bg-olive-lighter: rgba(202, 213, 72, 0.3); - --bg-olive-lightest: rgba(202, 213, 72, 0.2); - - --bg-green-dark: #31A552; - --bg-green-normal: #3ACF5A; - --bg-green-light: rgba(58, 207, 90, 0.4); - --bg-green-lighter: rgba(58, 207, 90, 0.3); - --bg-green-lightest: rgba(58, 207, 90, 0.2); - - --bg-teal-dark: #0FB3A3; - --bg-teal-normal: #3CDDCD; - --bg-teal-light: rgba(60, 221, 205, 0.4); - --bg-teal-lighter: rgba(60, 221, 205, 0.3); - --bg-teal-lightest: rgba(60, 221, 205, 0.2); - - --bg-cobalt-dark: #329BE7; - --bg-cobalt-normal: #47C8FF; - --bg-cobalt-light: rgba(71, 200, 255, 0.4); - --bg-cobalt-lighter: rgba(71, 200, 255, 0.3); - --bg-cobalt-lightest: rgba(71, 200, 255, 0.2); - - --bg-navy-dark: #3A4F8D; - --bg-navy-normal: #647CC9; - --bg-navy-light: rgba(100, 124, 201, 0.4); - --bg-navy-lighter: rgba(100, 124, 201, 0.3); - --bg-navy-lightest: rgba(100, 124, 201, 0.2); - - --bg-purple-dark: #915CE0; - --bg-purple-normal: #B570FF; - --bg-purple-light: rgba(181, 112, 255, 0.4); - --bg-purple-lighter: rgba(181, 112, 255, 0.3); - --bg-purple-lightest: rgba(181, 112, 255, 0.2); - - --bg-pink-dark: #CB48AD; - --bg-pink-normal: #EC6FD3; - --bg-pink-light: rgba(236, 111, 211, 0.4); - --bg-pink-lighter: rgba(236, 111, 211, 0.3); - --bg-pink-lightest: rgba(236, 111, 211, 0.2); - - --bg-white-highest: #464748; - --bg-white-higher: #313234; + --bg-white-high: #464748; --bg-white-normal: #242428; - - --bg-black-darkest: rgba(255, 255, 255, 0.6); - --bg-black-darker: rgba(255, 255, 255, 0.4); - --bg-black-dark: rgba(255, 255, 255, 0.2); - --bg-black-light: rgba(255, 255, 255, 0.12); - --bg-black-lighter: rgba(255, 255, 255, 0.08); - --bg-black-lightest: rgba(255, 255, 255, 0.05); - + --bg-white-low: #313234; + --bg-gnb: #464748CC; + --bg-navi: #313234CC; + --bg-header: #313234; + --bg-header-float: #313234CC; + --bg-lounge: #313234E6; + --bg-black-darkest: #FFFFFF99; + --bg-black-darker: #FFFFFF66; + --bg-black-dark: #FFFFFF33; + --bg-black-light: #FFFFFF1F; + --bg-black-lighter: #FFFFFF14; + --bg-black-lightest: #FFFFFF0D; --bg-grey-darkest: #FFFFFF; --bg-grey-dark: #A7A7AA; + --bg-grey-dim-lightest: #2A2B2DCC; --bg-grey-light: #464748; --bg-grey-lighter: #313234; --bg-grey-lightest: #2A2B2D; - - --bg-alpha-white-lightest: rgba(49, 50, 52, 0.8); - --bg-alpha-white-lighter: rgba(0, 0, 0, 0.6); - --bg-alpha-white-light: rgba(0, 0, 0, 0.2); - --bg-alpha-grey-darkest: rgba(70, 71, 72, 0.8); - --bg-alpha-grey-darker: rgba(36, 36, 40, 0.9); - --bg-alpha-grey-dark: rgba(42, 43, 45, 0.8); - --bg-alpha-grey-light: rgba(49, 50, 52, 0.8); - - --bg-absolute-white-dark: #FFFFFF; - --bg-absolute-white-normal: rgba(255, 255, 255, 0.9); - --bg-absolute-white-light: rgba(255, 255, 255, 0.6); - --bg-absolute-white-lighter: rgba(255, 255, 255, 0.4); - --bg-absolute-white-lightest: rgba(255, 255, 255, 0.2); - - --bg-absolute-black-dark: #000000; - --bg-absolute-black-normal: rgba(0, 0, 0, 0.85); - --bg-absolute-black-light: rgba(0, 0, 0, 0.6); - --bg-absolute-black-lighter: rgba(0, 0, 0, 0.4); - --bg-absolute-black-lightest: rgba(0, 0, 0, 0.2); - - --fg-red: #FF5C5C; - --fg-orange: #FFAB5C; - --fg-yellow: #FDD353; - --fg-olive: #CAD548; - --fg-green: #3ACF5A; - --fg-teal: #3CDDCD; - --fg-cobalt: #47C8FF; - --fg-blue: #6687FF; - --fg-navy: #647CC9; - --fg-purple: #B570FF; - --fg-pink: #EC6FD3; - - --fg-black-darkest: rgba(255, 255, 255, 0.8); - --fg-black-darker: rgba(255, 255, 255, 0.6); - --fg-black-dark: rgba(255, 255, 255, 0.4); - - --fg-white-normal: #242428; - --fg-absolute-white-dark: #FFFFFF; - --fg-absolute-white-normal: rgba(255, 255, 255, 0.9); - --fg-absolute-white-light: rgba(255, 255, 255, 0.6); - --fg-absolute-white-lighter: rgba(255, 255, 255, 0.4); - --fg-absolute-white-lightest: rgba(255, 255, 255, 0.2); - --fg-absolute-black-dark: #000000; - --fg-absolute-black-normal: rgba(0, 0, 0, 0.85); - --fg-absolute-black-light: rgba(0, 0, 0, 0.6); - --fg-absolute-black-lighter: rgba(0, 0, 0, 0.4); - --fg-absolute-black-lightest: rgba(0, 0, 0, 0.2); - - --surface-lowest: #313234; /* edit marketing */ - --surface-lower: #2A2B2D; /* edit support-bot, report, mobile 2-depth */ - --surface-normal: #242428; - - --shadow-xl: rgba(0, 0, 0, 0.6); - --shadow-l: rgba(0, 0, 0, 0.4); - --shadow-m: rgba(0, 0, 0, 0.2); - --shadow-s: rgba(0, 0, 0, 0.15); - --shadow-base: rgba(0, 0, 0, 0.08); - --shadow-base-inner: rgba(255, 255, 255, 0.08); - - --bdr-black-dark: rgba(255, 255, 255, 0.2); - --bdr-black-light: rgba(255, 255, 255, 0.12); - --bdr-black-lightest: rgba(255, 255, 255, 0.05); - --bdr-grey: #464748; + --bg-white-dim-dark: #00000099; + --bg-white-dim-light: #00000033; + --bgtxt-blue-dark: #5E56F0; + --bgtxt-blue-normal: #6687FF; + --bgtxt-blue-light: #6687FF66; + --bgtxt-blue-lighter: #6687FF4D; + --bgtxt-blue-lightest: #6687FF33; + --bgtxt-cobalt-dark: #329BE7; + --bgtxt-cobalt-normal: #47C8FF; + --bgtxt-cobalt-light: #47C8FF66; + --bgtxt-cobalt-lighter: #47C8FF4D; + --bgtxt-cobalt-lightest: #47C8FF33; + --bgtxt-teal-dark: #0FB3A3; + --bgtxt-teal-normal: #3CDDCD; + --bgtxt-teal-light: #3CDDCD66; + --bgtxt-teal-lighter: #3CDDCD4D; + --bgtxt-teal-lightest: #3CDDCD33; + --bgtxt-green-dark: #31A552; + --bgtxt-green-normal: #3ACF5A; + --bgtxt-green-light: #3ACF5A66; + --bgtxt-green-lighter: #3ACF5A4D; + --bgtxt-green-lightest: #3ACF5A33; + --bgtxt-olive-dark: #A0A540; + --bgtxt-olive-normal: #CAD548; + --bgtxt-olive-light: #CAD54866; + --bgtxt-olive-lighter: #CAD5484D; + --bgtxt-olive-lightest: #CAD54833; + --bgtxt-yellow-dark: #EDBC40; + --bgtxt-yellow-normal: #FDD353; + --bgtxt-yellow-light: #FDD35366; + --bgtxt-yellow-lighter: #FDD3534D; + --bgtxt-yellow-lightest: #FDD35333; + --bgtxt-orange-dark: #F4800B; + --bgtxt-orange-normal: #FFAB5C; + --bgtxt-orange-light: #FFAB5C66; + --bgtxt-orange-lighter: #FFAB5C4D; + --bgtxt-orange-lightest: #FFAB5C33; + --bgtxt-red-dark: #E94E58; + --bgtxt-red-normal: #FF5C5C; + --bgtxt-red-light: #FF5C5C66; + --bgtxt-red-lighter: #FF5C5C4D; + --bgtxt-red-lightest: #FF5C5C33; + --bgtxt-pink-dark: #CB48AD; + --bgtxt-pink-normal: #EC6FD3; + --bgtxt-pink-light: #EC6FD366; + --bgtxt-pink-lighter: #EC6FD34D; + --bgtxt-pink-lightest: #EC6FD333; + --bgtxt-purple-dark: #915CE0; + --bgtxt-purple-normal: #B570FF; + --bgtxt-purple-light: #B570FF66; + --bgtxt-purple-lighter: #B570FF4D; + --bgtxt-purple-lightest: #B570FF33; + --bgtxt-navy-dark: #3A4F8D; + --bgtxt-navy-normal: #647CC9; + --bgtxt-navy-light: #647CC966; + --bgtxt-navy-lighter: #647CC94D; + --bgtxt-navy-lightest: #647CC933; + --txt-black-pure: #FFFFFF; + --txt-black-darkest: #FFFFFFCC; + --txt-black-darker: #FFFFFF99; + --txt-black-dark: #FFFFFF66; + --txt-white-normal: #242428; + --bgtxt-absolute-black-dark: #000000; + --bgtxt-absolute-black-normal: #000000D9; + --bgtxt-absolute-black-light: #00000099; + --bgtxt-absolute-black-lighter: #00000066; + --bgtxt-absolute-black-lightest: #00000033; + --bgtxt-absolute-white-dark: #FFFFFF; + --bgtxt-absolute-white-normal: #FFFFFFE6; + --bgtxt-absolute-white-light: #FFFFFF99; + --bgtxt-absolute-white-lighter: #FFFFFF66; + --bgtxt-absolute-white-lightest: #FFFFFF33; + --bdr-black-dark: #FFFFFF33; + --bdr-black-light: #FFFFFF1F; + --bdr-black-lightest: #FFFFFF0D; + --bdr-grey-light: #464748; --bdr-white: #464748; - - --dim-black: rgba(0, 0, 0, 0.4); - - --gradient-green: linear-gradient(90deg, #31A552 0%, #3ACF5A 100%); /* progress, line-banner */ - --gradient-purple: linear-gradient(90deg, #915CE0 0%, #B570FF 100%); /* line-banner */ - --gradient-orange: linear-gradient(90deg, #F4800B 0%, #FFAB5C 100%); /* line-banner */ - --gradient-grey: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%); /* progress */ + --shdw-xlarge: #00000099; + --shdw-large: #00000066; + --shdw-medium: #00000033; + --shdw-small: #00000026; + --shdw-base: #00000014; + --shdw-inner-base: #FFFFFF14; + --inverted-bg-white-high: #FFFFFF; + --inverted-bg-white-normal: #FFFFFF; + --inverted-bg-white-low: #FFFFFF; + --inverted-bg-gnb: #EFEFF0CC; + --inverted-bg-navi: #F7F7F8CC; + --inverted-bg-header: #FFFFFF; + --inverted-bg-header-float: #FFFFFFE6; + --inverted-bg-lounge: #F7F7F8E6; + --inverted-bg-black-darkest: #00000099; + --inverted-bg-black-darker: #00000066; + --inverted-bg-black-dark: #00000026; + --inverted-bg-black-light: #00000014; + --inverted-bg-black-lighter: #0000000D; + --inverted-bg-black-lightest: #00000008; + --inverted-bg-grey-darkest: #242428; + --inverted-bg-grey-dark: #A7A7AA; + --inverted-bg-grey-dim-lightest: #FCFCFCCC; + --inverted-bg-grey-light: #EFEFF0; + --inverted-bg-grey-lighter: #F7F7F8; + --inverted-bg-grey-lightest: #FCFCFC; + --inverted-bg-white-dim-dark: #FFFFFF99; + --inverted-bg-white-dim-light: #FFFFFF33; + --inverted-bgtxt-blue-dark: #4E40C9; + --inverted-bgtxt-blue-normal: #5E56F0; + --inverted-bgtxt-blue-light: #5E56F04D; + --inverted-bgtxt-blue-lighter: #5E56F033; + --inverted-bgtxt-blue-lightest: #5E56F01A; + --inverted-bgtxt-cobalt-dark: #327AB8; + --inverted-bgtxt-cobalt-normal: #329BE7; + --inverted-bgtxt-cobalt-light: #329BE74D; + --inverted-bgtxt-cobalt-lighter: #329BE733; + --inverted-bgtxt-cobalt-lightest: #329BE71A; + --inverted-bgtxt-teal-dark: #449C8A; + --inverted-bgtxt-teal-normal: #0FB3A3; + --inverted-bgtxt-teal-light: #0FB3A34D; + --inverted-bgtxt-teal-lighter: #0FB3A333; + --inverted-bgtxt-teal-lightest: #0FB3A31A; + --inverted-bgtxt-green-dark: #41904F; + --inverted-bgtxt-green-normal: #31A552; + --inverted-bgtxt-green-light: #31A5524D; + --inverted-bgtxt-green-lighter: #31A55233; + --inverted-bgtxt-green-lightest: #31A5521A; + --inverted-bgtxt-olive-dark: #818628; + --inverted-bgtxt-olive-normal: #A0A540; + --inverted-bgtxt-olive-light: #A0A5404D; + --inverted-bgtxt-olive-lighter: #A0A54033; + --inverted-bgtxt-olive-lightest: #A0A5401A; + --inverted-bgtxt-yellow-dark: #C39E37; + --inverted-bgtxt-yellow-normal: #EDBC40; + --inverted-bgtxt-yellow-light: #EDBC404D; + --inverted-bgtxt-yellow-lighter: #EDBC4033; + --inverted-bgtxt-yellow-lightest: #EDBC401A; + --inverted-bgtxt-orange-dark: #C57417; + --inverted-bgtxt-orange-normal: #F4800B; + --inverted-bgtxt-orange-light: #F4800B4D; + --inverted-bgtxt-orange-lighter: #F4800B33; + --inverted-bgtxt-orange-lightest: #F4800B1A; + --inverted-bgtxt-red-dark: #AC3E46; + --inverted-bgtxt-red-normal: #E94E58; + --inverted-bgtxt-red-light: #E94E584D; + --inverted-bgtxt-red-lighter: #E94E5833; + --inverted-bgtxt-red-lightest: #E94E581A; + --inverted-bgtxt-pink-dark: #A32E92; + --inverted-bgtxt-pink-normal: #CB48AD; + --inverted-bgtxt-pink-light: #CB48AD4D; + --inverted-bgtxt-pink-lighter: #CB48AD33; + --inverted-bgtxt-pink-lightest: #CB48AD1A; + --inverted-bgtxt-purple-dark: #6B23B3; + --inverted-bgtxt-purple-normal: #915CE0; + --inverted-bgtxt-purple-light: #915CE04D; + --inverted-bgtxt-purple-lighter: #915CE033; + --inverted-bgtxt-purple-lightest: #915CE01A; + --inverted-bgtxt-navy-dark: #333D5B; + --inverted-bgtxt-navy-normal: #3A4F8D; + --inverted-bgtxt-navy-light: #3A4F8D4D; + --inverted-bgtxt-navy-lighter: #3A4F8D33; + --inverted-bgtxt-navy-lightest: #3A4F8D1A; + --inverted-txt-black-pure: #000000; + --inverted-txt-black-darkest: #000000D9; + --inverted-txt-black-darker: #00000099; + --inverted-txt-black-dark: #00000066; + --inverted-txt-white-normal: #FFFFFF; + --inverted-bgtxt-absolute-black-dark: #000000; + --inverted-bgtxt-absolute-black-normal: #000000D9; + --inverted-bgtxt-absolute-black-light: #00000099; + --inverted-bgtxt-absolute-black-lighter: #00000066; + --inverted-bgtxt-absolute-black-lightest: #00000033; + --inverted-bgtxt-absolute-white-dark: #FFFFFF; + --inverted-bgtxt-absolute-white-normal: #FFFFFFE6; + --inverted-bgtxt-absolute-white-light: #FFFFFF99; + --inverted-bgtxt-absolute-white-lighter: #FFFFFF66; + --inverted-bgtxt-absolute-white-lightest: #FFFFFF33; + --inverted-bdr-black-dark: #00000026; + --inverted-bdr-black-light: #00000014; + --inverted-bdr-black-lightest: #00000008; + --inverted-bdr-grey-light: #EFEFF0; + --inverted-bdr-white: #FFFFFF; + --inverted-shdw-xlarge: #0000004D; + --inverted-shdw-large: #00000038; + --inverted-shdw-medium: #00000026; + --inverted-shdw-small: #00000014; + --inverted-shdw-base: #0000000D; + --inverted-shdw-inner-base: #FFFFFF1F; } From 100b4215e8118f7776aaa8512a4474b0c293076f Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Thu, 16 Nov 2023 20:51:41 +0900 Subject: [PATCH 09/18] feat(style): update base style (legacy) --- packages/bezier-react/src/styles/_base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss index 9e378cc923..0330153b73 100644 --- a/packages/bezier-react/src/styles/_base.scss +++ b/packages/bezier-react/src/styles/_base.scss @@ -14,6 +14,6 @@ code { } ::placeholder { - color: var(--fg-black-dark); + color: var(--txt-black-dark); opacity: 1; } From fecb243fdf9e12ff59bf511b553d6e5654caa035 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 17 Nov 2023 17:51:18 +0900 Subject: [PATCH 10/18] feat(style): change semantic tokens to reference core tokens --- .../styles/tokens/semantic/_dark-theme.scss | 413 +++++++++--------- .../styles/tokens/semantic/_light-theme.scss | 413 +++++++++--------- 2 files changed, 412 insertions(+), 414 deletions(-) diff --git a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss b/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss index a407301df0..57fd920c86 100644 --- a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss +++ b/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss @@ -1,209 +1,208 @@ -// TODO: Reference core token @mixin tokens { - --bg-white-high: #464748; - --bg-white-normal: #242428; - --bg-white-low: #313234; - --bg-gnb: #464748CC; - --bg-navi: #313234CC; - --bg-header: #313234; - --bg-header-float: #313234CC; - --bg-lounge: #313234E6; - --bg-black-darkest: #FFFFFF99; - --bg-black-darker: #FFFFFF66; - --bg-black-dark: #FFFFFF33; - --bg-black-light: #FFFFFF1F; - --bg-black-lighter: #FFFFFF14; - --bg-black-lightest: #FFFFFF0D; - --bg-grey-darkest: #FFFFFF; - --bg-grey-dark: #A7A7AA; - --bg-grey-dim-lightest: #2A2B2DCC; - --bg-grey-light: #464748; - --bg-grey-lighter: #313234; - --bg-grey-lightest: #2A2B2D; - --bg-white-dim-dark: #00000099; - --bg-white-dim-light: #00000033; - --bgtxt-blue-dark: #5E56F0; - --bgtxt-blue-normal: #6687FF; - --bgtxt-blue-light: #6687FF66; - --bgtxt-blue-lighter: #6687FF4D; - --bgtxt-blue-lightest: #6687FF33; - --bgtxt-cobalt-dark: #329BE7; - --bgtxt-cobalt-normal: #47C8FF; - --bgtxt-cobalt-light: #47C8FF66; - --bgtxt-cobalt-lighter: #47C8FF4D; - --bgtxt-cobalt-lightest: #47C8FF33; - --bgtxt-teal-dark: #0FB3A3; - --bgtxt-teal-normal: #3CDDCD; - --bgtxt-teal-light: #3CDDCD66; - --bgtxt-teal-lighter: #3CDDCD4D; - --bgtxt-teal-lightest: #3CDDCD33; - --bgtxt-green-dark: #31A552; - --bgtxt-green-normal: #3ACF5A; - --bgtxt-green-light: #3ACF5A66; - --bgtxt-green-lighter: #3ACF5A4D; - --bgtxt-green-lightest: #3ACF5A33; - --bgtxt-olive-dark: #A0A540; - --bgtxt-olive-normal: #CAD548; - --bgtxt-olive-light: #CAD54866; - --bgtxt-olive-lighter: #CAD5484D; - --bgtxt-olive-lightest: #CAD54833; - --bgtxt-yellow-dark: #EDBC40; - --bgtxt-yellow-normal: #FDD353; - --bgtxt-yellow-light: #FDD35366; - --bgtxt-yellow-lighter: #FDD3534D; - --bgtxt-yellow-lightest: #FDD35333; - --bgtxt-orange-dark: #F4800B; - --bgtxt-orange-normal: #FFAB5C; - --bgtxt-orange-light: #FFAB5C66; - --bgtxt-orange-lighter: #FFAB5C4D; - --bgtxt-orange-lightest: #FFAB5C33; - --bgtxt-red-dark: #E94E58; - --bgtxt-red-normal: #FF5C5C; - --bgtxt-red-light: #FF5C5C66; - --bgtxt-red-lighter: #FF5C5C4D; - --bgtxt-red-lightest: #FF5C5C33; - --bgtxt-pink-dark: #CB48AD; - --bgtxt-pink-normal: #EC6FD3; - --bgtxt-pink-light: #EC6FD366; - --bgtxt-pink-lighter: #EC6FD34D; - --bgtxt-pink-lightest: #EC6FD333; - --bgtxt-purple-dark: #915CE0; - --bgtxt-purple-normal: #B570FF; - --bgtxt-purple-light: #B570FF66; - --bgtxt-purple-lighter: #B570FF4D; - --bgtxt-purple-lightest: #B570FF33; - --bgtxt-navy-dark: #3A4F8D; - --bgtxt-navy-normal: #647CC9; - --bgtxt-navy-light: #647CC966; - --bgtxt-navy-lighter: #647CC94D; - --bgtxt-navy-lightest: #647CC933; - --txt-black-pure: #FFFFFF; - --txt-black-darkest: #FFFFFFCC; - --txt-black-darker: #FFFFFF99; - --txt-black-dark: #FFFFFF66; - --txt-white-normal: #242428; - --bgtxt-absolute-black-dark: #000000; - --bgtxt-absolute-black-normal: #000000D9; - --bgtxt-absolute-black-light: #00000099; - --bgtxt-absolute-black-lighter: #00000066; - --bgtxt-absolute-black-lightest: #00000033; - --bgtxt-absolute-white-dark: #FFFFFF; - --bgtxt-absolute-white-normal: #FFFFFFE6; - --bgtxt-absolute-white-light: #FFFFFF99; - --bgtxt-absolute-white-lighter: #FFFFFF66; - --bgtxt-absolute-white-lightest: #FFFFFF33; - --bdr-black-dark: #FFFFFF33; - --bdr-black-light: #FFFFFF1F; - --bdr-black-lightest: #FFFFFF0D; - --bdr-grey-light: #464748; - --bdr-white: #464748; - --shdw-xlarge: #00000099; - --shdw-large: #00000066; - --shdw-medium: #00000033; - --shdw-small: #00000026; - --shdw-base: #00000014; - --shdw-inner-base: #FFFFFF14; - --inverted-bg-white-high: #FFFFFF; - --inverted-bg-white-normal: #FFFFFF; - --inverted-bg-white-low: #FFFFFF; - --inverted-bg-gnb: #EFEFF0CC; - --inverted-bg-navi: #F7F7F8CC; - --inverted-bg-header: #FFFFFF; - --inverted-bg-header-float: #FFFFFFE6; - --inverted-bg-lounge: #F7F7F8E6; - --inverted-bg-black-darkest: #00000099; - --inverted-bg-black-darker: #00000066; - --inverted-bg-black-dark: #00000026; - --inverted-bg-black-light: #00000014; - --inverted-bg-black-lighter: #0000000D; - --inverted-bg-black-lightest: #00000008; - --inverted-bg-grey-darkest: #242428; - --inverted-bg-grey-dark: #A7A7AA; - --inverted-bg-grey-dim-lightest: #FCFCFCCC; - --inverted-bg-grey-light: #EFEFF0; - --inverted-bg-grey-lighter: #F7F7F8; - --inverted-bg-grey-lightest: #FCFCFC; - --inverted-bg-white-dim-dark: #FFFFFF99; - --inverted-bg-white-dim-light: #FFFFFF33; - --inverted-bgtxt-blue-dark: #4E40C9; - --inverted-bgtxt-blue-normal: #5E56F0; - --inverted-bgtxt-blue-light: #5E56F04D; - --inverted-bgtxt-blue-lighter: #5E56F033; - --inverted-bgtxt-blue-lightest: #5E56F01A; - --inverted-bgtxt-cobalt-dark: #327AB8; - --inverted-bgtxt-cobalt-normal: #329BE7; - --inverted-bgtxt-cobalt-light: #329BE74D; - --inverted-bgtxt-cobalt-lighter: #329BE733; - --inverted-bgtxt-cobalt-lightest: #329BE71A; - --inverted-bgtxt-teal-dark: #449C8A; - --inverted-bgtxt-teal-normal: #0FB3A3; - --inverted-bgtxt-teal-light: #0FB3A34D; - --inverted-bgtxt-teal-lighter: #0FB3A333; - --inverted-bgtxt-teal-lightest: #0FB3A31A; - --inverted-bgtxt-green-dark: #41904F; - --inverted-bgtxt-green-normal: #31A552; - --inverted-bgtxt-green-light: #31A5524D; - --inverted-bgtxt-green-lighter: #31A55233; - --inverted-bgtxt-green-lightest: #31A5521A; - --inverted-bgtxt-olive-dark: #818628; - --inverted-bgtxt-olive-normal: #A0A540; - --inverted-bgtxt-olive-light: #A0A5404D; - --inverted-bgtxt-olive-lighter: #A0A54033; - --inverted-bgtxt-olive-lightest: #A0A5401A; - --inverted-bgtxt-yellow-dark: #C39E37; - --inverted-bgtxt-yellow-normal: #EDBC40; - --inverted-bgtxt-yellow-light: #EDBC404D; - --inverted-bgtxt-yellow-lighter: #EDBC4033; - --inverted-bgtxt-yellow-lightest: #EDBC401A; - --inverted-bgtxt-orange-dark: #C57417; - --inverted-bgtxt-orange-normal: #F4800B; - --inverted-bgtxt-orange-light: #F4800B4D; - --inverted-bgtxt-orange-lighter: #F4800B33; - --inverted-bgtxt-orange-lightest: #F4800B1A; - --inverted-bgtxt-red-dark: #AC3E46; - --inverted-bgtxt-red-normal: #E94E58; - --inverted-bgtxt-red-light: #E94E584D; - --inverted-bgtxt-red-lighter: #E94E5833; - --inverted-bgtxt-red-lightest: #E94E581A; - --inverted-bgtxt-pink-dark: #A32E92; - --inverted-bgtxt-pink-normal: #CB48AD; - --inverted-bgtxt-pink-light: #CB48AD4D; - --inverted-bgtxt-pink-lighter: #CB48AD33; - --inverted-bgtxt-pink-lightest: #CB48AD1A; - --inverted-bgtxt-purple-dark: #6B23B3; - --inverted-bgtxt-purple-normal: #915CE0; - --inverted-bgtxt-purple-light: #915CE04D; - --inverted-bgtxt-purple-lighter: #915CE033; - --inverted-bgtxt-purple-lightest: #915CE01A; - --inverted-bgtxt-navy-dark: #333D5B; - --inverted-bgtxt-navy-normal: #3A4F8D; - --inverted-bgtxt-navy-light: #3A4F8D4D; - --inverted-bgtxt-navy-lighter: #3A4F8D33; - --inverted-bgtxt-navy-lightest: #3A4F8D1A; - --inverted-txt-black-pure: #000000; - --inverted-txt-black-darkest: #000000D9; - --inverted-txt-black-darker: #00000099; - --inverted-txt-black-dark: #00000066; - --inverted-txt-white-normal: #FFFFFF; - --inverted-bgtxt-absolute-black-dark: #000000; - --inverted-bgtxt-absolute-black-normal: #000000D9; - --inverted-bgtxt-absolute-black-light: #00000099; - --inverted-bgtxt-absolute-black-lighter: #00000066; - --inverted-bgtxt-absolute-black-lightest: #00000033; - --inverted-bgtxt-absolute-white-dark: #FFFFFF; - --inverted-bgtxt-absolute-white-normal: #FFFFFFE6; - --inverted-bgtxt-absolute-white-light: #FFFFFF99; - --inverted-bgtxt-absolute-white-lighter: #FFFFFF66; - --inverted-bgtxt-absolute-white-lightest: #FFFFFF33; - --inverted-bdr-black-dark: #00000026; - --inverted-bdr-black-light: #00000014; - --inverted-bdr-black-lightest: #00000008; - --inverted-bdr-grey-light: #EFEFF0; - --inverted-bdr-white: #FFFFFF; - --inverted-shdw-xlarge: #0000004D; - --inverted-shdw-large: #00000038; - --inverted-shdw-medium: #00000026; - --inverted-shdw-small: #00000014; - --inverted-shdw-base: #0000000D; - --inverted-shdw-inner-base: #FFFFFF1F; + --bg-white-high: var(--grey-700); + --bg-white-normal: var(--grey-900); + --bg-white-low: var(--grey-800); + --bg-gnb: var(--grey-700-80); + --bg-navi: var(--grey-800-80); + --bg-header: var(--grey-800); + --bg-header-float: var(--grey-800-80); + --bg-lounge: var(--grey-800-90); + --bg-black-darkest: var(--white-60); + --bg-black-darker: var(--white-40); + --bg-black-dark: var(--white-20); + --bg-black-light: var(--white-12); + --bg-black-lighter: var(--white-8); + --bg-black-lightest: var(--white-5); + --bg-grey-darkest: var(--white); + --bg-grey-dark: var(--grey-500); + --bg-grey-dim-lightest: var(--grey-850-80); + --bg-grey-light: var(--grey-700); + --bg-grey-lighter: var(--grey-800); + --bg-grey-lightest: var(--grey-850); + --bg-white-dim-dark: var(--black-60); + --bg-white-dim-light: var(--black-20); + --bgtxt-blue-dark: var(--blue-400); + --bgtxt-blue-normal: var(--blue-300); + --bgtxt-blue-light: var(--blue-300-40); + --bgtxt-blue-lighter: var(--blue-300-30); + --bgtxt-blue-lightest: var(--blue-300-20); + --bgtxt-cobalt-dark: var(--cobalt-400); + --bgtxt-cobalt-normal: var(--cobalt-300); + --bgtxt-cobalt-light: var(--cobalt-300-40); + --bgtxt-cobalt-lighter: var(--cobalt-300-30); + --bgtxt-cobalt-lightest: var(--cobalt-300-20); + --bgtxt-teal-dark: var(--teal-400); + --bgtxt-teal-normal: var(--teal-300); + --bgtxt-teal-light: var(--teal-300-40); + --bgtxt-teal-lighter: var(--teal-300-30); + --bgtxt-teal-lightest: var(--teal-300-20); + --bgtxt-green-dark: var(--green-400); + --bgtxt-green-normal: var(--green-300); + --bgtxt-green-light: var(--green-300-40); + --bgtxt-green-lighter: var(--green-300-30); + --bgtxt-green-lightest: var(--green-300-20); + --bgtxt-olive-dark: var(--olive-400); + --bgtxt-olive-normal: var(--olive-300); + --bgtxt-olive-light: var(--olive-300-40); + --bgtxt-olive-lighter: var(--olive-300-30); + --bgtxt-olive-lightest: var(--olive-300-20); + --bgtxt-yellow-dark: var(--yellow-400); + --bgtxt-yellow-normal: var(--yellow-300); + --bgtxt-yellow-light: var(--yellow-300-40); + --bgtxt-yellow-lighter: var(--yellow-300-30); + --bgtxt-yellow-lightest: var(--yellow-300-20); + --bgtxt-orange-dark: var(--orange-400); + --bgtxt-orange-normal: var(--orange-300); + --bgtxt-orange-light: var(--orange-300-40); + --bgtxt-orange-lighter: var(--orange-300-30); + --bgtxt-orange-lightest: var(--orange-300-20); + --bgtxt-red-dark: var(--red-400); + --bgtxt-red-normal: var(--red-300); + --bgtxt-red-light: var(--red-300-40); + --bgtxt-red-lighter: var(--red-300-30); + --bgtxt-red-lightest: var(--red-300-20); + --bgtxt-pink-dark: var(--pink-400); + --bgtxt-pink-normal: var(--pink-300); + --bgtxt-pink-light: var(--pink-300-40); + --bgtxt-pink-lighter: var(--pink-300-30); + --bgtxt-pink-lightest: var(--pink-300-20); + --bgtxt-purple-dark: var(--purple-400); + --bgtxt-purple-normal: var(--purple-300); + --bgtxt-purple-light: var(--purple-300-40); + --bgtxt-purple-lighter: var(--purple-300-30); + --bgtxt-purple-lightest: var(--purple-300-20); + --bgtxt-navy-dark: var(--navy-400); + --bgtxt-navy-normal: var(--navy-300); + --bgtxt-navy-light: var(--navy-300-40); + --bgtxt-navy-lighter: var(--navy-300-30); + --bgtxt-navy-lightest: var(--navy-300-20); + --txt-black-pure: var(--white); + --txt-black-darkest: var(--white-80); + --txt-black-darker: var(--white-60); + --txt-black-dark: var(--white-40); + --txt-white-normal: var(--grey-900); + --bgtxt-absolute-black-dark: var(--black); + --bgtxt-absolute-black-normal: var(--black-85); + --bgtxt-absolute-black-light: var(--black-60); + --bgtxt-absolute-black-lighter: var(--black-40); + --bgtxt-absolute-black-lightest: var(--black-20); + --bgtxt-absolute-white-dark: var(--white); + --bgtxt-absolute-white-normal: var(--white-90); + --bgtxt-absolute-white-light: var(--white-60); + --bgtxt-absolute-white-lighter: var(--white-40); + --bgtxt-absolute-white-lightest: var(--white-20); + --bdr-black-dark: var(--white-20); + --bdr-black-light: var(--white-12); + --bdr-black-lightest: var(--white-5); + --bdr-grey-light: var(--grey-700); + --bdr-white: var(--grey-700); + --shdw-xlarge: var(--black-60); + --shdw-large: var(--black-40); + --shdw-medium: var(--black-20); + --shdw-small: var(--black-15); + --shdw-base: var(--black-8); + --shdw-inner-base: var(--white-8); + --inverted-bg-white-high: var(--white); + --inverted-bg-white-normal: var(--white); + --inverted-bg-white-low: var(--white); + --inverted-bg-gnb: var(--grey-200-80); + --inverted-bg-navi: var(--grey-100-80); + --inverted-bg-header: var(--white); + --inverted-bg-header-float: var(--white-90); + --inverted-bg-lounge: var(--grey-100-90); + --inverted-bg-black-darkest: var(--black-60); + --inverted-bg-black-darker: var(--black-40); + --inverted-bg-black-dark: var(--black-15); + --inverted-bg-black-light: var(--black-8); + --inverted-bg-black-lighter: var(--black-5); + --inverted-bg-black-lightest: var(--black-3); + --inverted-bg-grey-darkest: var(--grey-900); + --inverted-bg-grey-dark: var(--grey-500); + --inverted-bg-grey-dim-lightest: var(--grey-50-80); + --inverted-bg-grey-light: var(--grey-200); + --inverted-bg-grey-lighter: var(--grey-100); + --inverted-bg-grey-lightest: var(--grey-50); + --inverted-bg-white-dim-dark: var(--white-60); + --inverted-bg-white-dim-light: var(--white-20); + --inverted-bgtxt-blue-dark: var(--blue-500); + --inverted-bgtxt-blue-normal: var(--blue-400); + --inverted-bgtxt-blue-light: var(--blue-400-30); + --inverted-bgtxt-blue-lighter: var(--blue-400-20); + --inverted-bgtxt-blue-lightest: var(--blue-400-10); + --inverted-bgtxt-cobalt-dark: var(--cobalt-500); + --inverted-bgtxt-cobalt-normal: var(--cobalt-400); + --inverted-bgtxt-cobalt-light: var(--cobalt-400-30); + --inverted-bgtxt-cobalt-lighter: var(--cobalt-400-20); + --inverted-bgtxt-cobalt-lightest: var(--cobalt-400-10); + --inverted-bgtxt-teal-dark: var(--teal-500); + --inverted-bgtxt-teal-normal: var(--teal-400); + --inverted-bgtxt-teal-light: var(--teal-400-30); + --inverted-bgtxt-teal-lighter: var(--teal-400-20); + --inverted-bgtxt-teal-lightest: var(--teal-400-10); + --inverted-bgtxt-green-dark: var(--green-500); + --inverted-bgtxt-green-normal: var(--green-400); + --inverted-bgtxt-green-light: var(--green-400-30); + --inverted-bgtxt-green-lighter: var(--green-400-20); + --inverted-bgtxt-green-lightest: var(--green-400-10); + --inverted-bgtxt-olive-dark: var(--olive-500); + --inverted-bgtxt-olive-normal: var(--olive-400); + --inverted-bgtxt-olive-light: var(--olive-400-30); + --inverted-bgtxt-olive-lighter: var(--olive-400-20); + --inverted-bgtxt-olive-lightest: var(--olive-400-10); + --inverted-bgtxt-yellow-dark: var(--yellow-500); + --inverted-bgtxt-yellow-normal: var(--yellow-400); + --inverted-bgtxt-yellow-light: var(--yellow-400-30); + --inverted-bgtxt-yellow-lighter: var(--yellow-400-20); + --inverted-bgtxt-yellow-lightest: var(--yellow-400-10); + --inverted-bgtxt-orange-dark: var(--orange-500); + --inverted-bgtxt-orange-normal: var(--orange-400); + --inverted-bgtxt-orange-light: var(--orange-400-30); + --inverted-bgtxt-orange-lighter: var(--orange-400-20); + --inverted-bgtxt-orange-lightest: var(--orange-400-10); + --inverted-bgtxt-red-dark: var(--red-500); + --inverted-bgtxt-red-normal: var(--red-400); + --inverted-bgtxt-red-light: var(--red-400-30); + --inverted-bgtxt-red-lighter: var(--red-400-20); + --inverted-bgtxt-red-lightest: var(--red-400-10); + --inverted-bgtxt-pink-dark: var(--pink-500); + --inverted-bgtxt-pink-normal: var(--pink-400); + --inverted-bgtxt-pink-light: var(--pink-400-30); + --inverted-bgtxt-pink-lighter: var(--pink-400-20); + --inverted-bgtxt-pink-lightest: var(--pink-400-10); + --inverted-bgtxt-purple-dark: var(--purple-500); + --inverted-bgtxt-purple-normal: var(--purple-400); + --inverted-bgtxt-purple-light: var(--purple-400-30); + --inverted-bgtxt-purple-lighter: var(--purple-400-20); + --inverted-bgtxt-purple-lightest: var(--purple-400-10); + --inverted-bgtxt-navy-dark: var(--navy-500); + --inverted-bgtxt-navy-normal: var(--navy-400); + --inverted-bgtxt-navy-light: var(--navy-400-30); + --inverted-bgtxt-navy-lighter: var(--navy-400-20); + --inverted-bgtxt-navy-lightest: var(--navy-400-10); + --inverted-txt-black-pure: var(--black); + --inverted-txt-black-darkest: var(--black-85); + --inverted-txt-black-darker: var(--black-60); + --inverted-txt-black-dark: var(--black-40); + --inverted-txt-white-normal: var(--white); + --inverted-bgtxt-absolute-black-dark: var(--black); + --inverted-bgtxt-absolute-black-normal: var(--black-85); + --inverted-bgtxt-absolute-black-light: var(--black-60); + --inverted-bgtxt-absolute-black-lighter: var(--black-40); + --inverted-bgtxt-absolute-black-lightest: var(--black-20); + --inverted-bgtxt-absolute-white-dark: var(--white); + --inverted-bgtxt-absolute-white-normal: var(--white-90); + --inverted-bgtxt-absolute-white-light: var(--white-60); + --inverted-bgtxt-absolute-white-lighter: var(--white-40); + --inverted-bgtxt-absolute-white-lightest: var(--white-20); + --inverted-bdr-black-dark: var(--black-15); + --inverted-bdr-black-light: var(--black-8); + --inverted-bdr-black-lightest: var(--black-3); + --inverted-bdr-grey-light: var(--grey-200); + --inverted-bdr-white: var(--white); + --inverted-shdw-xlarge: var(--black-30); + --inverted-shdw-large: var(--black-22); + --inverted-shdw-medium: var(--black-15); + --inverted-shdw-small: var(--black-8); + --inverted-shdw-base: var(--black-5); + --inverted-shdw-inner-base: var(--white-12); } diff --git a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss b/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss index 27f9ab138d..978fe939c5 100644 --- a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss +++ b/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss @@ -1,209 +1,208 @@ -// TODO: Reference core token @mixin tokens { - --bg-white-high: #FFFFFF; - --bg-white-normal: #FFFFFF; - --bg-white-low: #FFFFFF; - --bg-gnb: #EFEFF0CC; - --bg-navi: #F7F7F8CC; - --bg-header: #FFFFFF; - --bg-header-float: #FFFFFFE6; - --bg-lounge: #F7F7F8E6; - --bg-black-darkest: #00000099; - --bg-black-darker: #00000066; - --bg-black-dark: #00000026; - --bg-black-light: #00000014; - --bg-black-lighter: #0000000D; - --bg-black-lightest: #00000008; - --bg-grey-darkest: #242428; - --bg-grey-dark: #A7A7AA; - --bg-grey-dim-lightest: #FCFCFCCC; - --bg-grey-light: #EFEFF0; - --bg-grey-lighter: #F7F7F8; - --bg-grey-lightest: #FCFCFC; - --bg-white-dim-dark: #FFFFFF99; - --bg-white-dim-light: #FFFFFF33; - --bgtxt-blue-dark: #4E40C9; - --bgtxt-blue-normal: #5E56F0; - --bgtxt-blue-light: #5E56F04D; - --bgtxt-blue-lighter: #5E56F033; - --bgtxt-blue-lightest: #5E56F01A; - --bgtxt-cobalt-dark: #327AB8; - --bgtxt-cobalt-normal: #329BE7; - --bgtxt-cobalt-light: #329BE74D; - --bgtxt-cobalt-lighter: #329BE733; - --bgtxt-cobalt-lightest: #329BE71A; - --bgtxt-teal-dark: #449C8A; - --bgtxt-teal-normal: #0FB3A3; - --bgtxt-teal-light: #0FB3A34D; - --bgtxt-teal-lighter: #0FB3A333; - --bgtxt-teal-lightest: #0FB3A31A; - --bgtxt-green-dark: #41904F; - --bgtxt-green-normal: #31A552; - --bgtxt-green-light: #31A5524D; - --bgtxt-green-lighter: #31A55233; - --bgtxt-green-lightest: #31A5521A; - --bgtxt-olive-dark: #818628; - --bgtxt-olive-normal: #A0A540; - --bgtxt-olive-light: #A0A5404D; - --bgtxt-olive-lighter: #A0A54033; - --bgtxt-olive-lightest: #A0A5401A; - --bgtxt-yellow-dark: #C39E37; - --bgtxt-yellow-normal: #EDBC40; - --bgtxt-yellow-light: #EDBC404D; - --bgtxt-yellow-lighter: #EDBC4033; - --bgtxt-yellow-lightest: #EDBC401A; - --bgtxt-orange-dark: #C57417; - --bgtxt-orange-normal: #F4800B; - --bgtxt-orange-light: #F4800B4D; - --bgtxt-orange-lighter: #F4800B33; - --bgtxt-orange-lightest: #F4800B1A; - --bgtxt-red-dark: #AC3E46; - --bgtxt-red-normal: #E94E58; - --bgtxt-red-light: #E94E584D; - --bgtxt-red-lighter: #E94E5833; - --bgtxt-red-lightest: #E94E581A; - --bgtxt-pink-dark: #A32E92; - --bgtxt-pink-normal: #CB48AD; - --bgtxt-pink-light: #CB48AD4D; - --bgtxt-pink-lighter: #CB48AD33; - --bgtxt-pink-lightest: #CB48AD1A; - --bgtxt-purple-dark: #6B23B3; - --bgtxt-purple-normal: #915CE0; - --bgtxt-purple-light: #915CE04D; - --bgtxt-purple-lighter: #915CE033; - --bgtxt-purple-lightest: #915CE01A; - --bgtxt-navy-dark: #333D5B; - --bgtxt-navy-normal: #3A4F8D; - --bgtxt-navy-light: #3A4F8D4D; - --bgtxt-navy-lighter: #3A4F8D33; - --bgtxt-navy-lightest: #3A4F8D1A; - --txt-black-pure: #000000; - --txt-black-darkest: #000000D9; - --txt-black-darker: #00000099; - --txt-black-dark: #00000066; - --txt-white-normal: #FFFFFF; - --bgtxt-absolute-black-dark: #000000; - --bgtxt-absolute-black-normal: #000000D9; - --bgtxt-absolute-black-light: #00000099; - --bgtxt-absolute-black-lighter: #00000066; - --bgtxt-absolute-black-lightest: #00000033; - --bgtxt-absolute-white-dark: #FFFFFF; - --bgtxt-absolute-white-normal: #FFFFFFE6; - --bgtxt-absolute-white-light: #FFFFFF99; - --bgtxt-absolute-white-lighter: #FFFFFF66; - --bgtxt-absolute-white-lightest: #FFFFFF33; - --bdr-black-dark: #00000026; - --bdr-black-light: #00000014; - --bdr-black-lightest: #00000008; - --bdr-grey-light: #EFEFF0; - --bdr-white: #FFFFFF; - --shdw-xlarge: #0000004D; - --shdw-large: #00000038; - --shdw-medium: #00000026; - --shdw-small: #00000014; - --shdw-base: #0000000D; - --shdw-inner-base: #FFFFFF1F; - --inverted-bg-white-high: #464748; - --inverted-bg-white-normal: #242428; - --inverted-bg-white-low: #313234; - --inverted-bg-gnb: #464748CC; - --inverted-bg-navi: #313234CC; - --inverted-bg-header: #313234; - --inverted-bg-header-float: #313234CC; - --inverted-bg-lounge: #313234E6; - --inverted-bg-black-darkest: #FFFFFF99; - --inverted-bg-black-darker: #FFFFFF66; - --inverted-bg-black-dark: #FFFFFF33; - --inverted-bg-black-light: #FFFFFF1F; - --inverted-bg-black-lighter: #FFFFFF14; - --inverted-bg-black-lightest: #FFFFFF0D; - --inverted-bg-grey-darkest: #FFFFFF; - --inverted-bg-grey-dark: #A7A7AA; - --inverted-bg-grey-dim-lightest: #2A2B2DCC; - --inverted-bg-grey-light: #464748; - --inverted-bg-grey-lighter: #313234; - --inverted-bg-grey-lightest: #2A2B2D; - --inverted-bg-white-dim-dark: #00000099; - --inverted-bg-white-dim-light: #00000033; - --inverted-bgtxt-blue-dark: #5E56F0; - --inverted-bgtxt-blue-normal: #6687FF; - --inverted-bgtxt-blue-light: #6687FF66; - --inverted-bgtxt-blue-lighter: #6687FF4D; - --inverted-bgtxt-blue-lightest: #6687FF33; - --inverted-bgtxt-cobalt-dark: #329BE7; - --inverted-bgtxt-cobalt-normal: #47C8FF; - --inverted-bgtxt-cobalt-light: #47C8FF66; - --inverted-bgtxt-cobalt-lighter: #47C8FF4D; - --inverted-bgtxt-cobalt-lightest: #47C8FF33; - --inverted-bgtxt-teal-dark: #0FB3A3; - --inverted-bgtxt-teal-normal: #3CDDCD; - --inverted-bgtxt-teal-light: #3CDDCD66; - --inverted-bgtxt-teal-lighter: #3CDDCD4D; - --inverted-bgtxt-teal-lightest: #3CDDCD33; - --inverted-bgtxt-green-dark: #31A552; - --inverted-bgtxt-green-normal: #3ACF5A; - --inverted-bgtxt-green-light: #3ACF5A66; - --inverted-bgtxt-green-lighter: #3ACF5A4D; - --inverted-bgtxt-green-lightest: #3ACF5A33; - --inverted-bgtxt-olive-dark: #A0A540; - --inverted-bgtxt-olive-normal: #CAD548; - --inverted-bgtxt-olive-light: #CAD54866; - --inverted-bgtxt-olive-lighter: #CAD5484D; - --inverted-bgtxt-olive-lightest: #CAD54833; - --inverted-bgtxt-yellow-dark: #EDBC40; - --inverted-bgtxt-yellow-normal: #FDD353; - --inverted-bgtxt-yellow-light: #FDD35366; - --inverted-bgtxt-yellow-lighter: #FDD3534D; - --inverted-bgtxt-yellow-lightest: #FDD35333; - --inverted-bgtxt-orange-dark: #F4800B; - --inverted-bgtxt-orange-normal: #FFAB5C; - --inverted-bgtxt-orange-light: #FFAB5C66; - --inverted-bgtxt-orange-lighter: #FFAB5C4D; - --inverted-bgtxt-orange-lightest: #FFAB5C33; - --inverted-bgtxt-red-dark: #E94E58; - --inverted-bgtxt-red-normal: #FF5C5C; - --inverted-bgtxt-red-light: #FF5C5C66; - --inverted-bgtxt-red-lighter: #FF5C5C4D; - --inverted-bgtxt-red-lightest: #FF5C5C33; - --inverted-bgtxt-pink-dark: #CB48AD; - --inverted-bgtxt-pink-normal: #EC6FD3; - --inverted-bgtxt-pink-light: #EC6FD366; - --inverted-bgtxt-pink-lighter: #EC6FD34D; - --inverted-bgtxt-pink-lightest: #EC6FD333; - --inverted-bgtxt-purple-dark: #915CE0; - --inverted-bgtxt-purple-normal: #B570FF; - --inverted-bgtxt-purple-light: #B570FF66; - --inverted-bgtxt-purple-lighter: #B570FF4D; - --inverted-bgtxt-purple-lightest: #B570FF33; - --inverted-bgtxt-navy-dark: #3A4F8D; - --inverted-bgtxt-navy-normal: #647CC9; - --inverted-bgtxt-navy-light: #647CC966; - --inverted-bgtxt-navy-lighter: #647CC94D; - --inverted-bgtxt-navy-lightest: #647CC933; - --inverted-txt-black-pure: #FFFFFF; - --inverted-txt-black-darkest: #FFFFFFCC; - --inverted-txt-black-darker: #FFFFFF99; - --inverted-txt-black-dark: #FFFFFF66; - --inverted-txt-white-normal: #242428; - --inverted-bgtxt-absolute-black-dark: #000000; - --inverted-bgtxt-absolute-black-normal: #000000D9; - --inverted-bgtxt-absolute-black-light: #00000099; - --inverted-bgtxt-absolute-black-lighter: #00000066; - --inverted-bgtxt-absolute-black-lightest: #00000033; - --inverted-bgtxt-absolute-white-dark: #FFFFFF; - --inverted-bgtxt-absolute-white-normal: #FFFFFFE6; - --inverted-bgtxt-absolute-white-light: #FFFFFF99; - --inverted-bgtxt-absolute-white-lighter: #FFFFFF66; - --inverted-bgtxt-absolute-white-lightest: #FFFFFF33; - --inverted-bdr-black-dark: #FFFFFF33; - --inverted-bdr-black-light: #FFFFFF1F; - --inverted-bdr-black-lightest: #FFFFFF0D; - --inverted-bdr-grey-light: #464748; - --inverted-bdr-white: #464748; - --inverted-shdw-xlarge: #00000099; - --inverted-shdw-large: #00000066; - --inverted-shdw-medium: #00000033; - --inverted-shdw-small: #00000026; - --inverted-shdw-base: #00000014; - --inverted-shdw-inner-base: #FFFFFF14; + --bg-white-high: var(--white); + --bg-white-normal: var(--white); + --bg-white-low: var(--white); + --bg-gnb: var(--grey-200-80); + --bg-navi: var(--grey-100-80); + --bg-header: var(--white); + --bg-header-float: var(--white-90); + --bg-lounge: var(--grey-100-90); + --bg-black-darkest: var(--black-60); + --bg-black-darker: var(--black-40); + --bg-black-dark: var(--black-15); + --bg-black-light: var(--black-8); + --bg-black-lighter: var(--black-5); + --bg-black-lightest: var(--black-3); + --bg-grey-darkest: var(--grey-900); + --bg-grey-dark: var(--grey-500); + --bg-grey-dim-lightest: var(--grey-50-80); + --bg-grey-light: var(--grey-200); + --bg-grey-lighter: var(--grey-100); + --bg-grey-lightest: var(--grey-50); + --bg-white-dim-dark: var(--white-60); + --bg-white-dim-light: var(--white-20); + --bgtxt-blue-dark: var(--blue-500); + --bgtxt-blue-normal: var(--blue-400); + --bgtxt-blue-light: var(--blue-400-30); + --bgtxt-blue-lighter: var(--blue-400-20); + --bgtxt-blue-lightest: var(--blue-400-10); + --bgtxt-cobalt-dark: var(--cobalt-500); + --bgtxt-cobalt-normal: var(--cobalt-400); + --bgtxt-cobalt-light: var(--cobalt-400-30); + --bgtxt-cobalt-lighter: var(--cobalt-400-20); + --bgtxt-cobalt-lightest: var(--cobalt-400-10); + --bgtxt-teal-dark: var(--teal-500); + --bgtxt-teal-normal: var(--teal-400); + --bgtxt-teal-light: var(--teal-400-30); + --bgtxt-teal-lighter: var(--teal-400-20); + --bgtxt-teal-lightest: var(--teal-400-10); + --bgtxt-green-dark: var(--green-500); + --bgtxt-green-normal: var(--green-400); + --bgtxt-green-light: var(--green-400-30); + --bgtxt-green-lighter: var(--green-400-20); + --bgtxt-green-lightest: var(--green-400-10); + --bgtxt-olive-dark: var(--olive-500); + --bgtxt-olive-normal: var(--olive-400); + --bgtxt-olive-light: var(--olive-400-30); + --bgtxt-olive-lighter: var(--olive-400-20); + --bgtxt-olive-lightest: var(--olive-400-10); + --bgtxt-yellow-dark: var(--yellow-500); + --bgtxt-yellow-normal: var(--yellow-400); + --bgtxt-yellow-light: var(--yellow-400-30); + --bgtxt-yellow-lighter: var(--yellow-400-20); + --bgtxt-yellow-lightest: var(--yellow-400-10); + --bgtxt-orange-dark: var(--orange-500); + --bgtxt-orange-normal: var(--orange-400); + --bgtxt-orange-light: var(--orange-400-30); + --bgtxt-orange-lighter: var(--orange-400-20); + --bgtxt-orange-lightest: var(--orange-400-10); + --bgtxt-red-dark: var(--red-500); + --bgtxt-red-normal: var(--red-400); + --bgtxt-red-light: var(--red-400-30); + --bgtxt-red-lighter: var(--red-400-20); + --bgtxt-red-lightest: var(--red-400-10); + --bgtxt-pink-dark: var(--pink-500); + --bgtxt-pink-normal: var(--pink-400); + --bgtxt-pink-light: var(--pink-400-30); + --bgtxt-pink-lighter: var(--pink-400-20); + --bgtxt-pink-lightest: var(--pink-400-10); + --bgtxt-purple-dark: var(--purple-500); + --bgtxt-purple-normal: var(--purple-400); + --bgtxt-purple-light: var(--purple-400-30); + --bgtxt-purple-lighter: var(--purple-400-20); + --bgtxt-purple-lightest: var(--purple-400-10); + --bgtxt-navy-dark: var(--navy-500); + --bgtxt-navy-normal: var(--navy-400); + --bgtxt-navy-light: var(--navy-400-30); + --bgtxt-navy-lighter: var(--navy-400-20); + --bgtxt-navy-lightest: var(--navy-400-10); + --txt-black-pure: var(--black); + --txt-black-darkest: var(--black-85); + --txt-black-darker: var(--black-60); + --txt-black-dark: var(--black-40); + --txt-white-normal: var(--white); + --bgtxt-absolute-black-dark: var(--black); + --bgtxt-absolute-black-normal: var(--black-85); + --bgtxt-absolute-black-light: var(--black-60); + --bgtxt-absolute-black-lighter: var(--black-40); + --bgtxt-absolute-black-lightest: var(--black-20); + --bgtxt-absolute-white-dark: var(--white); + --bgtxt-absolute-white-normal: var(--white-90); + --bgtxt-absolute-white-light: var(--white-60); + --bgtxt-absolute-white-lighter: var(--white-40); + --bgtxt-absolute-white-lightest: var(--white-20); + --bdr-black-dark: var(--black-15); + --bdr-black-light: var(--black-8); + --bdr-black-lightest: var(--black-3); + --bdr-grey-light: var(--grey-200); + --bdr-white: var(--white); + --shdw-xlarge: var(--black-30); + --shdw-large: var(--black-22); + --shdw-medium: var(--black-15); + --shdw-small: var(--black-8); + --shdw-base: var(--black-5); + --shdw-inner-base: var(--white-12); + --inverted-bg-white-high: var(--grey-700); + --inverted-bg-white-normal: var(--grey-900); + --inverted-bg-white-low: var(--grey-800); + --inverted-bg-gnb: var(--grey-700-80); + --inverted-bg-navi: var(--grey-800-80); + --inverted-bg-header: var(--grey-800); + --inverted-bg-header-float: var(--grey-800-80); + --inverted-bg-lounge: var(--grey-800-90); + --inverted-bg-black-darkest: var(--white-60); + --inverted-bg-black-darker: var(--white-40); + --inverted-bg-black-dark: var(--white-20); + --inverted-bg-black-light: var(--white-12); + --inverted-bg-black-lighter: var(--white-8); + --inverted-bg-black-lightest: var(--white-5); + --inverted-bg-grey-darkest: var(--white); + --inverted-bg-grey-dark: var(--grey-500); + --inverted-bg-grey-dim-lightest: var(--grey-850-80); + --inverted-bg-grey-light: var(--grey-700); + --inverted-bg-grey-lighter: var(--grey-800); + --inverted-bg-grey-lightest: var(--grey-850); + --inverted-bg-white-dim-dark: var(--black-60); + --inverted-bg-white-dim-light: var(--black-20); + --inverted-bgtxt-blue-dark: var(--blue-400); + --inverted-bgtxt-blue-normal: var(--blue-300); + --inverted-bgtxt-blue-light: var(--blue-300-40); + --inverted-bgtxt-blue-lighter: var(--blue-300-30); + --inverted-bgtxt-blue-lightest: var(--blue-300-20); + --inverted-bgtxt-cobalt-dark: var(--cobalt-400); + --inverted-bgtxt-cobalt-normal: var(--cobalt-300); + --inverted-bgtxt-cobalt-light: var(--cobalt-300-40); + --inverted-bgtxt-cobalt-lighter: var(--cobalt-300-30); + --inverted-bgtxt-cobalt-lightest: var(--cobalt-300-20); + --inverted-bgtxt-teal-dark: var(--teal-400); + --inverted-bgtxt-teal-normal: var(--teal-300); + --inverted-bgtxt-teal-light: var(--teal-300-40); + --inverted-bgtxt-teal-lighter: var(--teal-300-30); + --inverted-bgtxt-teal-lightest: var(--teal-300-20); + --inverted-bgtxt-green-dark: var(--green-400); + --inverted-bgtxt-green-normal: var(--green-300); + --inverted-bgtxt-green-light: var(--green-300-40); + --inverted-bgtxt-green-lighter: var(--green-300-30); + --inverted-bgtxt-green-lightest: var(--green-300-20); + --inverted-bgtxt-olive-dark: var(--olive-400); + --inverted-bgtxt-olive-normal: var(--olive-300); + --inverted-bgtxt-olive-light: var(--olive-300-40); + --inverted-bgtxt-olive-lighter: var(--olive-300-30); + --inverted-bgtxt-olive-lightest: var(--olive-300-20); + --inverted-bgtxt-yellow-dark: var(--yellow-400); + --inverted-bgtxt-yellow-normal: var(--yellow-300); + --inverted-bgtxt-yellow-light: var(--yellow-300-40); + --inverted-bgtxt-yellow-lighter: var(--yellow-300-30); + --inverted-bgtxt-yellow-lightest: var(--yellow-300-20); + --inverted-bgtxt-orange-dark: var(--orange-400); + --inverted-bgtxt-orange-normal: var(--orange-300); + --inverted-bgtxt-orange-light: var(--orange-300-40); + --inverted-bgtxt-orange-lighter: var(--orange-300-30); + --inverted-bgtxt-orange-lightest: var(--orange-300-20); + --inverted-bgtxt-red-dark: var(--red-400); + --inverted-bgtxt-red-normal: var(--red-300); + --inverted-bgtxt-red-light: var(--red-300-40); + --inverted-bgtxt-red-lighter: var(--red-300-30); + --inverted-bgtxt-red-lightest: var(--red-300-20); + --inverted-bgtxt-pink-dark: var(--pink-400); + --inverted-bgtxt-pink-normal: var(--pink-300); + --inverted-bgtxt-pink-light: var(--pink-300-40); + --inverted-bgtxt-pink-lighter: var(--pink-300-30); + --inverted-bgtxt-pink-lightest: var(--pink-300-20); + --inverted-bgtxt-purple-dark: var(--purple-400); + --inverted-bgtxt-purple-normal: var(--purple-300); + --inverted-bgtxt-purple-light: var(--purple-300-40); + --inverted-bgtxt-purple-lighter: var(--purple-300-30); + --inverted-bgtxt-purple-lightest: var(--purple-300-20); + --inverted-bgtxt-navy-dark: var(--navy-400); + --inverted-bgtxt-navy-normal: var(--navy-300); + --inverted-bgtxt-navy-light: var(--navy-300-40); + --inverted-bgtxt-navy-lighter: var(--navy-300-30); + --inverted-bgtxt-navy-lightest: var(--navy-300-20); + --inverted-txt-black-pure: var(--white); + --inverted-txt-black-darkest: var(--white-80); + --inverted-txt-black-darker: var(--white-60); + --inverted-txt-black-dark: var(--white-40); + --inverted-txt-white-normal: var(--grey-900); + --inverted-bgtxt-absolute-black-dark: var(--black); + --inverted-bgtxt-absolute-black-normal: var(--black-85); + --inverted-bgtxt-absolute-black-light: var(--black-60); + --inverted-bgtxt-absolute-black-lighter: var(--black-40); + --inverted-bgtxt-absolute-black-lightest: var(--black-20); + --inverted-bgtxt-absolute-white-dark: var(--white); + --inverted-bgtxt-absolute-white-normal: var(--white-90); + --inverted-bgtxt-absolute-white-light: var(--white-60); + --inverted-bgtxt-absolute-white-lighter: var(--white-40); + --inverted-bgtxt-absolute-white-lightest: var(--white-20); + --inverted-bdr-black-dark: var(--white-20); + --inverted-bdr-black-light: var(--white-12); + --inverted-bdr-black-lightest: var(--white-5); + --inverted-bdr-grey-light: var(--grey-700); + --inverted-bdr-white: var(--grey-700); + --inverted-shdw-xlarge: var(--black-60); + --inverted-shdw-large: var(--black-40); + --inverted-shdw-medium: var(--black-20); + --inverted-shdw-small: var(--black-15); + --inverted-shdw-base: var(--black-8); + --inverted-shdw-inner-base: var(--white-8); } From 86e9e655f2676e05d889e463ded7f7b5cab4ec8b Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 17 Nov 2023 18:01:37 +0900 Subject: [PATCH 11/18] refactor(styles): rename utilities to utils --- packages/bezier-react/src/styles/index.scss | 6 +++++- .../src/styles/{utilities => utils}/_index.scss | 0 .../src/styles/{utilities => utils}/_typography.scss | 3 +-- 3 files changed, 6 insertions(+), 3 deletions(-) rename packages/bezier-react/src/styles/{utilities => utils}/_index.scss (100%) rename packages/bezier-react/src/styles/{utilities => utils}/_typography.scss (80%) diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss index e399faa7fc..50e9899f9d 100644 --- a/packages/bezier-react/src/styles/index.scss +++ b/packages/bezier-react/src/styles/index.scss @@ -1,6 +1,6 @@ @use 'sass:meta'; -@layer reset, base, tokens, components, utilities; +@layer reset, base, tokens, components, utils; @layer reset { @include meta.load-css("reset") @@ -13,3 +13,7 @@ @layer tokens { @include meta.load-css("tokens") } + +@layer utils { + @include meta.load-css("utils") +} diff --git a/packages/bezier-react/src/styles/utilities/_index.scss b/packages/bezier-react/src/styles/utils/_index.scss similarity index 100% rename from packages/bezier-react/src/styles/utilities/_index.scss rename to packages/bezier-react/src/styles/utils/_index.scss diff --git a/packages/bezier-react/src/styles/utilities/_typography.scss b/packages/bezier-react/src/styles/utils/_typography.scss similarity index 80% rename from packages/bezier-react/src/styles/utilities/_typography.scss rename to packages/bezier-react/src/styles/utils/_typography.scss index 3a684d889e..fe8692290a 100644 --- a/packages/bezier-react/src/styles/utilities/_typography.scss +++ b/packages/bezier-react/src/styles/utils/_typography.scss @@ -1,4 +1,3 @@ -@layer utilities { + // TODO: Add typography utilities // TODO: Make externally available via class name -} From 65f7a39d80a8cbaaa00360d227106e92d9c85ede Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 20 Nov 2023 13:22:52 +0900 Subject: [PATCH 12/18] feat(tokens): add js object (wip) --- .../src/styles/tokens/ts/darkTheme.ts | 208 ++++++++++++++++++ .../src/styles/tokens/ts/lightTheme.ts | 208 ++++++++++++++++++ 2 files changed, 416 insertions(+) create mode 100644 packages/bezier-react/src/styles/tokens/ts/darkTheme.ts create mode 100644 packages/bezier-react/src/styles/tokens/ts/lightTheme.ts diff --git a/packages/bezier-react/src/styles/tokens/ts/darkTheme.ts b/packages/bezier-react/src/styles/tokens/ts/darkTheme.ts new file mode 100644 index 0000000000..d525ea804c --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/ts/darkTheme.ts @@ -0,0 +1,208 @@ +export default { + bgWhiteHigh: 'var(--grey-700)', + bgWhiteNormal: 'var(--grey-900)', + bgWhiteLow: 'var(--grey-800)', + bgGnb: 'var(--grey-700-80)', + bgNavi: 'var(--grey-800-80)', + bgHeader: 'var(--grey-800)', + bgHeaderFloat: 'var(--grey-800-80)', + bgLounge: 'var(--grey-800-90)', + bgBlackDarkest: 'var(--white-60)', + bgBlackDarker: 'var(--white-40)', + bgBlackDark: 'var(--white-20)', + bgBlackLight: 'var(--white-12)', + bgBlackLighter: 'var(--white-8)', + bgBlackLightest: 'var(--white-5)', + bgGreyDarkest: 'var(--white)', + bgGreyDark: 'var(--grey-500)', + bgGreyDimLightest: 'var(--grey-850-80)', + bgGreyLight: 'var(--grey-700)', + bgGreyLighter: 'var(--grey-800)', + bgGreyLightest: 'var(--grey-850)', + bgWhiteDimDark: 'var(--black-60)', + bgWhiteDimLight: 'var(--black-20)', + bgtxtBlueDark: 'var(--blue-400)', + bgtxtBlueNormal: 'var(--blue-300)', + bgtxtBlueLight: 'var(--blue-300-40)', + bgtxtBlueLighter: 'var(--blue-300-30)', + bgtxtBlueLightest: 'var(--blue-300-20)', + bgtxtCobaltDark: 'var(--cobalt-400)', + bgtxtCobaltNormal: 'var(--cobalt-300)', + bgtxtCobaltLight: 'var(--cobalt-300-40)', + bgtxtCobaltLighter: 'var(--cobalt-300-30)', + bgtxtCobaltLightest: 'var(--cobalt-300-20)', + bgtxtTealDark: 'var(--teal-400)', + bgtxtTealNormal: 'var(--teal-300)', + bgtxtTealLight: 'var(--teal-300-40)', + bgtxtTealLighter: 'var(--teal-300-30)', + bgtxtTealLightest: 'var(--teal-300-20)', + bgtxtGreenDark: 'var(--green-400)', + bgtxtGreenNormal: 'var(--green-300)', + bgtxtGreenLight: 'var(--green-300-40)', + bgtxtGreenLighter: 'var(--green-300-30)', + bgtxtGreenLightest: 'var(--green-300-20)', + bgtxtOliveDark: 'var(--olive-400)', + bgtxtOliveNormal: 'var(--olive-300)', + bgtxtOliveLight: 'var(--olive-300-40)', + bgtxtOliveLighter: 'var(--olive-300-30)', + bgtxtOliveLightest: 'var(--olive-300-20)', + bgtxtYellowDark: 'var(--yellow-400)', + bgtxtYellowNormal: 'var(--yellow-300)', + bgtxtYellowLight: 'var(--yellow-300-40)', + bgtxtYellowLighter: 'var(--yellow-300-30)', + bgtxtYellowLightest: 'var(--yellow-300-20)', + bgtxtOrangeDark: 'var(--orange-400)', + bgtxtOrangeNormal: 'var(--orange-300)', + bgtxtOrangeLight: 'var(--orange-300-40)', + bgtxtOrangeLighter: 'var(--orange-300-30)', + bgtxtOrangeLightest: 'var(--orange-300-20)', + bgtxtRedDark: 'var(--red-400)', + bgtxtRedNormal: 'var(--red-300)', + bgtxtRedLight: 'var(--red-300-40)', + bgtxtRedLighter: 'var(--red-300-30)', + bgtxtRedLightest: 'var(--red-300-20)', + bgtxtPinkDark: 'var(--pink-400)', + bgtxtPinkNormal: 'var(--pink-300)', + bgtxtPinkLight: 'var(--pink-300-40)', + bgtxtPinkLighter: 'var(--pink-300-30)', + bgtxtPinkLightest: 'var(--pink-300-20)', + bgtxtPurpleDark: 'var(--purple-400)', + bgtxtPurpleNormal: 'var(--purple-300)', + bgtxtPurpleLight: 'var(--purple-300-40)', + bgtxtPurpleLighter: 'var(--purple-300-30)', + bgtxtPurpleLightest: 'var(--purple-300-20)', + bgtxtNavyDark: 'var(--navy-400)', + bgtxtNavyNormal: 'var(--navy-300)', + bgtxtNavyLight: 'var(--navy-300-40)', + bgtxtNavyLighter: 'var(--navy-300-30)', + bgtxtNavyLightest: 'var(--navy-300-20)', + txtBlackPure: 'var(--white)', + txtBlackDarkest: 'var(--white-80)', + txtBlackDarker: 'var(--white-60)', + txtBlackDark: 'var(--white-40)', + txtWhiteNormal: 'var(--grey-900)', + bgtxtAbsoluteBlackDark: 'var(--black)', + bgtxtAbsoluteBlackNormal: 'var(--black-85)', + bgtxtAbsoluteBlackLight: 'var(--black-60)', + bgtxtAbsoluteBlackLighter: 'var(--black-40)', + bgtxtAbsoluteBlackLightest: 'var(--black-20)', + bgtxtAbsoluteWhiteDark: 'var(--white)', + bgtxtAbsoluteWhiteNormal: 'var(--white-90)', + bgtxtAbsoluteWhiteLight: 'var(--white-60)', + bgtxtAbsoluteWhiteLighter: 'var(--white-40)', + bgtxtAbsoluteWhiteLightest: 'var(--white-20)', + bdrBlackDark: 'var(--white-20)', + bdrBlackLight: 'var(--white-12)', + bdrBlackLightest: 'var(--white-5)', + bdrGreyLight: 'var(--grey-700)', + bdrWhite: 'var(--grey-700)', + shdwXlarge: 'var(--black-60)', + shdwLarge: 'var(--black-40)', + shdwMedium: 'var(--black-20)', + shdwSmall: 'var(--black-15)', + shdwBase: 'var(--black-8)', + shdwInnerBase: 'var(--white-8)', + invertedBgWhiteHigh: 'var(--white)', + invertedBgWhiteNormal: 'var(--white)', + invertedBgWhiteLow: 'var(--white)', + invertedBgGnb: 'var(--grey-200-80)', + invertedBgNavi: 'var(--grey-100-80)', + invertedBgHeader: 'var(--white)', + invertedBgHeaderFloat: 'var(--white-90)', + invertedBgLounge: 'var(--grey-100-90)', + invertedBgBlackDarkest: 'var(--black-60)', + invertedBgBlackDarker: 'var(--black-40)', + invertedBgBlackDark: 'var(--black-15)', + invertedBgBlackLight: 'var(--black-8)', + invertedBgBlackLighter: 'var(--black-5)', + invertedBgBlackLightest: 'var(--black-3)', + invertedBgGreyDarkest: 'var(--grey-900)', + invertedBgGreyDark: 'var(--grey-500)', + invertedBgGreyDimLightest: 'var(--grey-50-80)', + invertedBgGreyLight: 'var(--grey-200)', + invertedBgGreyLighter: 'var(--grey-100)', + invertedBgGreyLightest: 'var(--grey-50)', + invertedBgWhiteDimDark: 'var(--white-60)', + invertedBgWhiteDimLight: 'var(--white-20)', + invertedBgtxtBlueDark: 'var(--blue-500)', + invertedBgtxtBlueNormal: 'var(--blue-400)', + invertedBgtxtBlueLight: 'var(--blue-400-30)', + invertedBgtxtBlueLighter: 'var(--blue-400-20)', + invertedBgtxtBlueLightest: 'var(--blue-400-10)', + invertedBgtxtCobaltDark: 'var(--cobalt-500)', + invertedBgtxtCobaltNormal: 'var(--cobalt-400)', + invertedBgtxtCobaltLight: 'var(--cobalt-400-30)', + invertedBgtxtCobaltLighter: 'var(--cobalt-400-20)', + invertedBgtxtCobaltLightest: 'var(--cobalt-400-10)', + invertedBgtxtTealDark: 'var(--teal-500)', + invertedBgtxtTealNormal: 'var(--teal-400)', + invertedBgtxtTealLight: 'var(--teal-400-30)', + invertedBgtxtTealLighter: 'var(--teal-400-20)', + invertedBgtxtTealLightest: 'var(--teal-400-10)', + invertedBgtxtGreenDark: 'var(--green-500)', + invertedBgtxtGreenNormal: 'var(--green-400)', + invertedBgtxtGreenLight: 'var(--green-400-30)', + invertedBgtxtGreenLighter: 'var(--green-400-20)', + invertedBgtxtGreenLightest: 'var(--green-400-10)', + invertedBgtxtOliveDark: 'var(--olive-500)', + invertedBgtxtOliveNormal: 'var(--olive-400)', + invertedBgtxtOliveLight: 'var(--olive-400-30)', + invertedBgtxtOliveLighter: 'var(--olive-400-20)', + invertedBgtxtOliveLightest: 'var(--olive-400-10)', + invertedBgtxtYellowDark: 'var(--yellow-500)', + invertedBgtxtYellowNormal: 'var(--yellow-400)', + invertedBgtxtYellowLight: 'var(--yellow-400-30)', + invertedBgtxtYellowLighter: 'var(--yellow-400-20)', + invertedBgtxtYellowLightest: 'var(--yellow-400-10)', + invertedBgtxtOrangeDark: 'var(--orange-500)', + invertedBgtxtOrangeNormal: 'var(--orange-400)', + invertedBgtxtOrangeLight: 'var(--orange-400-30)', + invertedBgtxtOrangeLighter: 'var(--orange-400-20)', + invertedBgtxtOrangeLightest: 'var(--orange-400-10)', + invertedBgtxtRedDark: 'var(--red-500)', + invertedBgtxtRedNormal: 'var(--red-400)', + invertedBgtxtRedLight: 'var(--red-400-30)', + invertedBgtxtRedLighter: 'var(--red-400-20)', + invertedBgtxtRedLightest: 'var(--red-400-10)', + invertedBgtxtPinkDark: 'var(--pink-500)', + invertedBgtxtPinkNormal: 'var(--pink-400)', + invertedBgtxtPinkLight: 'var(--pink-400-30)', + invertedBgtxtPinkLighter: 'var(--pink-400-20)', + invertedBgtxtPinkLightest: 'var(--pink-400-10)', + invertedBgtxtPurpleDark: 'var(--purple-500)', + invertedBgtxtPurpleNormal: 'var(--purple-400)', + invertedBgtxtPurpleLight: 'var(--purple-400-30)', + invertedBgtxtPurpleLighter: 'var(--purple-400-20)', + invertedBgtxtPurpleLightest: 'var(--purple-400-10)', + invertedBgtxtNavyDark: 'var(--navy-500)', + invertedBgtxtNavyNormal: 'var(--navy-400)', + invertedBgtxtNavyLight: 'var(--navy-400-30)', + invertedBgtxtNavyLighter: 'var(--navy-400-20)', + invertedBgtxtNavyLightest: 'var(--navy-400-10)', + invertedTxtBlackPure: 'var(--black)', + invertedTxtBlackDarkest: 'var(--black-85)', + invertedTxtBlackDarker: 'var(--black-60)', + invertedTxtBlackDark: 'var(--black-40)', + invertedTxtWhiteNormal: 'var(--white)', + invertedBgtxtAbsoluteBlackDark: 'var(--black)', + invertedBgtxtAbsoluteBlackNormal: 'var(--black-85)', + invertedBgtxtAbsoluteBlackLight: 'var(--black-60)', + invertedBgtxtAbsoluteBlackLighter: 'var(--black-40)', + invertedBgtxtAbsoluteBlackLightest: 'var(--black-20)', + invertedBgtxtAbsoluteWhiteDark: 'var(--white)', + invertedBgtxtAbsoluteWhiteNormal: 'var(--white-90)', + invertedBgtxtAbsoluteWhiteLight: 'var(--white-60)', + invertedBgtxtAbsoluteWhiteLighter: 'var(--white-40)', + invertedBgtxtAbsoluteWhiteLightest: 'var(--white-20)', + invertedBdrBlackDark: 'var(--black-15)', + invertedBdrBlackLight: 'var(--black-8)', + invertedBdrBlackLightest: 'var(--black-3)', + invertedBdrGreyLight: 'var(--grey-200)', + invertedBdrWhite: 'var(--white)', + invertedShdwXlarge: 'var(--black-30)', + invertedShdwLarge: 'var(--black-22)', + invertedShdwMedium: 'var(--black-15)', + invertedShdwSmall: 'var(--black-8)', + invertedShdwBase: 'var(--black-5)', + invertedShdwInnerBase: 'var(--white-12)', +} as const diff --git a/packages/bezier-react/src/styles/tokens/ts/lightTheme.ts b/packages/bezier-react/src/styles/tokens/ts/lightTheme.ts new file mode 100644 index 0000000000..103cd8de5d --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/ts/lightTheme.ts @@ -0,0 +1,208 @@ +export default { + bgWhiteHigh: 'var(--white)', + bgWhiteNormal: 'var(--white)', + bgWhiteLow: 'var(--white)', + bgGnb: 'var(--grey-200-80)', + bgNavi: 'var(--grey-100-80)', + bgHeader: 'var(--white)', + bgHeaderFloat: 'var(--white-90)', + bgLounge: 'var(--grey-100-90)', + bgBlackDarkest: 'var(--black-60)', + bgBlackDarker: 'var(--black-40)', + bgBlackDark: 'var(--black-15)', + bgBlackLight: 'var(--black-8)', + bgBlackLighter: 'var(--black-5)', + bgBlackLightest: 'var(--black-3)', + bgGreyDarkest: 'var(--grey-900)', + bgGreyDark: 'var(--grey-500)', + bgGreyDimLightest: 'var(--grey-50-80)', + bgGreyLight: 'var(--grey-200)', + bgGreyLighter: 'var(--grey-100)', + bgGreyLightest: 'var(--grey-50)', + bgWhiteDimDark: 'var(--white-60)', + bgWhiteDimLight: 'var(--white-20)', + bgtxtBlueDark: 'var(--blue-500)', + bgtxtBlueNormal: 'var(--blue-400)', + bgtxtBlueLight: 'var(--blue-400-30)', + bgtxtBlueLighter: 'var(--blue-400-20)', + bgtxtBlueLightest: 'var(--blue-400-10)', + bgtxtCobaltDark: 'var(--cobalt-500)', + bgtxtCobaltNormal: 'var(--cobalt-400)', + bgtxtCobaltLight: 'var(--cobalt-400-30)', + bgtxtCobaltLighter: 'var(--cobalt-400-20)', + bgtxtCobaltLightest: 'var(--cobalt-400-10)', + bgtxtTealDark: 'var(--teal-500)', + bgtxtTealNormal: 'var(--teal-400)', + bgtxtTealLight: 'var(--teal-400-30)', + bgtxtTealLighter: 'var(--teal-400-20)', + bgtxtTealLightest: 'var(--teal-400-10)', + bgtxtGreenDark: 'var(--green-500)', + bgtxtGreenNormal: 'var(--green-400)', + bgtxtGreenLight: 'var(--green-400-30)', + bgtxtGreenLighter: 'var(--green-400-20)', + bgtxtGreenLightest: 'var(--green-400-10)', + bgtxtOliveDark: 'var(--olive-500)', + bgtxtOliveNormal: 'var(--olive-400)', + bgtxtOliveLight: 'var(--olive-400-30)', + bgtxtOliveLighter: 'var(--olive-400-20)', + bgtxtOliveLightest: 'var(--olive-400-10)', + bgtxtYellowDark: 'var(--yellow-500)', + bgtxtYellowNormal: 'var(--yellow-400)', + bgtxtYellowLight: 'var(--yellow-400-30)', + bgtxtYellowLighter: 'var(--yellow-400-20)', + bgtxtYellowLightest: 'var(--yellow-400-10)', + bgtxtOrangeDark: 'var(--orange-500)', + bgtxtOrangeNormal: 'var(--orange-400)', + bgtxtOrangeLight: 'var(--orange-400-30)', + bgtxtOrangeLighter: 'var(--orange-400-20)', + bgtxtOrangeLightest: 'var(--orange-400-10)', + bgtxtRedDark: 'var(--red-500)', + bgtxtRedNormal: 'var(--red-400)', + bgtxtRedLight: 'var(--red-400-30)', + bgtxtRedLighter: 'var(--red-400-20)', + bgtxtRedLightest: 'var(--red-400-10)', + bgtxtPinkDark: 'var(--pink-500)', + bgtxtPinkNormal: 'var(--pink-400)', + bgtxtPinkLight: 'var(--pink-400-30)', + bgtxtPinkLighter: 'var(--pink-400-20)', + bgtxtPinkLightest: 'var(--pink-400-10)', + bgtxtPurpleDark: 'var(--purple-500)', + bgtxtPurpleNormal: 'var(--purple-400)', + bgtxtPurpleLight: 'var(--purple-400-30)', + bgtxtPurpleLighter: 'var(--purple-400-20)', + bgtxtPurpleLightest: 'var(--purple-400-10)', + bgtxtNavyDark: 'var(--navy-500)', + bgtxtNavyNormal: 'var(--navy-400)', + bgtxtNavyLight: 'var(--navy-400-30)', + bgtxtNavyLighter: 'var(--navy-400-20)', + bgtxtNavyLightest: 'var(--navy-400-10)', + txtBlackPure: 'var(--black)', + txtBlackDarkest: 'var(--black-85)', + txtBlackDarker: 'var(--black-60)', + txtBlackDark: 'var(--black-40)', + txtWhiteNormal: 'var(--white)', + bgtxtAbsoluteBlackDark: 'var(--black)', + bgtxtAbsoluteBlackNormal: 'var(--black-85)', + bgtxtAbsoluteBlackLight: 'var(--black-60)', + bgtxtAbsoluteBlackLighter: 'var(--black-40)', + bgtxtAbsoluteBlackLightest: 'var(--black-20)', + bgtxtAbsoluteWhiteDark: 'var(--white)', + bgtxtAbsoluteWhiteNormal: 'var(--white-90)', + bgtxtAbsoluteWhiteLight: 'var(--white-60)', + bgtxtAbsoluteWhiteLighter: 'var(--white-40)', + bgtxtAbsoluteWhiteLightest: 'var(--white-20)', + bdrBlackDark: 'var(--black-15)', + bdrBlackLight: 'var(--black-8)', + bdrBlackLightest: 'var(--black-3)', + bdrGreyLight: 'var(--grey-200)', + bdrWhite: 'var(--white)', + shdwXlarge: 'var(--black-30)', + shdwLarge: 'var(--black-22)', + shdwMedium: 'var(--black-15)', + shdwSmall: 'var(--black-8)', + shdwBase: 'var(--black-5)', + shdwInnerBase: 'var(--white-12)', + invertedBgWhiteHigh: 'var(--grey-700)', + invertedBgWhiteNormal: 'var(--grey-900)', + invertedBgWhiteLow: 'var(--grey-800)', + invertedBgGnb: 'var(--grey-700-80)', + invertedBgNavi: 'var(--grey-800-80)', + invertedBgHeader: 'var(--grey-800)', + invertedBgHeaderFloat: 'var(--grey-800-80)', + invertedBgLounge: 'var(--grey-800-90)', + invertedBgBlackDarkest: 'var(--white-60)', + invertedBgBlackDarker: 'var(--white-40)', + invertedBgBlackDark: 'var(--white-20)', + invertedBgBlackLight: 'var(--white-12)', + invertedBgBlackLighter: 'var(--white-8)', + invertedBgBlackLightest: 'var(--white-5)', + invertedBgGreyDarkest: 'var(--white)', + invertedBgGreyDark: 'var(--grey-500)', + invertedBgGreyDimLightest: 'var(--grey-850-80)', + invertedBgGreyLight: 'var(--grey-700)', + invertedBgGreyLighter: 'var(--grey-800)', + invertedBgGreyLightest: 'var(--grey-850)', + invertedBgWhiteDimDark: 'var(--black-60)', + invertedBgWhiteDimLight: 'var(--black-20)', + invertedBgtxtBlueDark: 'var(--blue-400)', + invertedBgtxtBlueNormal: 'var(--blue-300)', + invertedBgtxtBlueLight: 'var(--blue-300-40)', + invertedBgtxtBlueLighter: 'var(--blue-300-30)', + invertedBgtxtBlueLightest: 'var(--blue-300-20)', + invertedBgtxtCobaltDark: 'var(--cobalt-400)', + invertedBgtxtCobaltNormal: 'var(--cobalt-300)', + invertedBgtxtCobaltLight: 'var(--cobalt-300-40)', + invertedBgtxtCobaltLighter: 'var(--cobalt-300-30)', + invertedBgtxtCobaltLightest: 'var(--cobalt-300-20)', + invertedBgtxtTealDark: 'var(--teal-400)', + invertedBgtxtTealNormal: 'var(--teal-300)', + invertedBgtxtTealLight: 'var(--teal-300-40)', + invertedBgtxtTealLighter: 'var(--teal-300-30)', + invertedBgtxtTealLightest: 'var(--teal-300-20)', + invertedBgtxtGreenDark: 'var(--green-400)', + invertedBgtxtGreenNormal: 'var(--green-300)', + invertedBgtxtGreenLight: 'var(--green-300-40)', + invertedBgtxtGreenLighter: 'var(--green-300-30)', + invertedBgtxtGreenLightest: 'var(--green-300-20)', + invertedBgtxtOliveDark: 'var(--olive-400)', + invertedBgtxtOliveNormal: 'var(--olive-300)', + invertedBgtxtOliveLight: 'var(--olive-300-40)', + invertedBgtxtOliveLighter: 'var(--olive-300-30)', + invertedBgtxtOliveLightest: 'var(--olive-300-20)', + invertedBgtxtYellowDark: 'var(--yellow-400)', + invertedBgtxtYellowNormal: 'var(--yellow-300)', + invertedBgtxtYellowLight: 'var(--yellow-300-40)', + invertedBgtxtYellowLighter: 'var(--yellow-300-30)', + invertedBgtxtYellowLightest: 'var(--yellow-300-20)', + invertedBgtxtOrangeDark: 'var(--orange-400)', + invertedBgtxtOrangeNormal: 'var(--orange-300)', + invertedBgtxtOrangeLight: 'var(--orange-300-40)', + invertedBgtxtOrangeLighter: 'var(--orange-300-30)', + invertedBgtxtOrangeLightest: 'var(--orange-300-20)', + invertedBgtxtRedDark: 'var(--red-400)', + invertedBgtxtRedNormal: 'var(--red-300)', + invertedBgtxtRedLight: 'var(--red-300-40)', + invertedBgtxtRedLighter: 'var(--red-300-30)', + invertedBgtxtRedLightest: 'var(--red-300-20)', + invertedBgtxtPinkDark: 'var(--pink-400)', + invertedBgtxtPinkNormal: 'var(--pink-300)', + invertedBgtxtPinkLight: 'var(--pink-300-40)', + invertedBgtxtPinkLighter: 'var(--pink-300-30)', + invertedBgtxtPinkLightest: 'var(--pink-300-20)', + invertedBgtxtPurpleDark: 'var(--purple-400)', + invertedBgtxtPurpleNormal: 'var(--purple-300)', + invertedBgtxtPurpleLight: 'var(--purple-300-40)', + invertedBgtxtPurpleLighter: 'var(--purple-300-30)', + invertedBgtxtPurpleLightest: 'var(--purple-300-20)', + invertedBgtxtNavyDark: 'var(--navy-400)', + invertedBgtxtNavyNormal: 'var(--navy-300)', + invertedBgtxtNavyLight: 'var(--navy-300-40)', + invertedBgtxtNavyLighter: 'var(--navy-300-30)', + invertedBgtxtNavyLightest: 'var(--navy-300-20)', + invertedTxtBlackPure: 'var(--white)', + invertedTxtBlackDarkest: 'var(--white-80)', + invertedTxtBlackDarker: 'var(--white-60)', + invertedTxtBlackDark: 'var(--white-40)', + invertedTxtWhiteNormal: 'var(--grey-900)', + invertedBgtxtAbsoluteBlackDark: 'var(--black)', + invertedBgtxtAbsoluteBlackNormal: 'var(--black-85)', + invertedBgtxtAbsoluteBlackLight: 'var(--black-60)', + invertedBgtxtAbsoluteBlackLighter: 'var(--black-40)', + invertedBgtxtAbsoluteBlackLightest: 'var(--black-20)', + invertedBgtxtAbsoluteWhiteDark: 'var(--white)', + invertedBgtxtAbsoluteWhiteNormal: 'var(--white-90)', + invertedBgtxtAbsoluteWhiteLight: 'var(--white-60)', + invertedBgtxtAbsoluteWhiteLighter: 'var(--white-40)', + invertedBgtxtAbsoluteWhiteLightest: 'var(--white-20)', + invertedBdrBlackDark: 'var(--white-20)', + invertedBdrBlackLight: 'var(--white-12)', + invertedBdrBlackLightest: 'var(--white-5)', + invertedBdrGreyLight: 'var(--grey-700)', + invertedBdrWhite: 'var(--grey-700)', + invertedShdwXlarge: 'var(--black-60)', + invertedShdwLarge: 'var(--black-40)', + invertedShdwMedium: 'var(--black-20)', + invertedShdwSmall: 'var(--black-15)', + invertedShdwBase: 'var(--black-8)', + invertedShdwInnerBase: 'var(--white-8)', +} as const From ccf9c7d0840e8035f94c6fef58a7be0254c7a043 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:04:16 +0900 Subject: [PATCH 13/18] chore(deps): add bezier-tokens to bezier-react --- packages/bezier-react/package.json | 1 + yarn.lock | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index 03e32d7d9d..b951544534 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -70,6 +70,7 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.22.15", "@channel.io/bezier-icons": "^0.15.0", + "@channel.io/bezier-tokens": "0.1.0-alpha.0", "@mdx-js/react": "^1.6.22", "@rollup/plugin-alias": "^5.0.0", "@rollup/plugin-babel": "^6.0.3", diff --git a/yarn.lock b/yarn.lock index d913f51aa2..1af7ca27ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2477,6 +2477,7 @@ __metadata: "@babel/preset-react": ^7.22.15 "@babel/preset-typescript": ^7.22.15 "@channel.io/bezier-icons": ^0.15.0 + "@channel.io/bezier-tokens": 0.1.0-alpha.0 "@mdx-js/react": ^1.6.22 "@radix-ui/react-checkbox": ^1.0.4 "@radix-ui/react-dialog": ^1.0.4 @@ -2556,7 +2557,7 @@ __metadata: languageName: unknown linkType: soft -"@channel.io/bezier-tokens@workspace:packages/bezier-tokens": +"@channel.io/bezier-tokens@0.1.0-alpha.0, @channel.io/bezier-tokens@workspace:packages/bezier-tokens": version: 0.0.0-use.local resolution: "@channel.io/bezier-tokens@workspace:packages/bezier-tokens" dependencies: From c7604d1350be6429410922c76a7e1fe133f6bb08 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:05:34 +0900 Subject: [PATCH 14/18] chore(bezier-react): rm legacy tokens --- .../bezier-react/src/styles/tokens/_core.scss | 218 ------------------ .../src/styles/tokens/_index.scss | 15 -- .../styles/tokens/semantic/_dark-theme.scss | 208 ----------------- .../src/styles/tokens/semantic/_index.scss | 2 - .../styles/tokens/semantic/_light-theme.scss | 208 ----------------- .../src/styles/tokens/ts/darkTheme.ts | 208 ----------------- .../src/styles/tokens/ts/lightTheme.ts | 208 ----------------- 7 files changed, 1067 deletions(-) delete mode 100644 packages/bezier-react/src/styles/tokens/_core.scss delete mode 100644 packages/bezier-react/src/styles/tokens/_index.scss delete mode 100644 packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss delete mode 100644 packages/bezier-react/src/styles/tokens/semantic/_index.scss delete mode 100644 packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss delete mode 100644 packages/bezier-react/src/styles/tokens/ts/darkTheme.ts delete mode 100644 packages/bezier-react/src/styles/tokens/ts/lightTheme.ts diff --git a/packages/bezier-react/src/styles/tokens/_core.scss b/packages/bezier-react/src/styles/tokens/_core.scss deleted file mode 100644 index 7963b017eb..0000000000 --- a/packages/bezier-react/src/styles/tokens/_core.scss +++ /dev/null @@ -1,218 +0,0 @@ -@mixin tokens { - --radius-2: 2px; - --radius-3: 3px; - --radius-4: 4px; - --radius-6: 6px; - --radius-8: 8px; - --radius-10: 10px; - --radius-12: 12px; - --radius-14: 14px; - --radius-16: 16px; - --radius-20: 20px; - --radius-32: 32px; - --radius-44: 44px; - --radius-42-p: 42%; - --radius-100-p: 100%; - - --blue-300: #6687FF; - --blue-400: #5E56F0; - --blue-500: #4E40C9; - - --cobalt-300: #47C8FF; - --cobalt-400: #329BE7; - --cobalt-500: #327AB8; - - --teal-300: #3CDDCD; - --teal-400: #0FB3A3; - --teal-500: #449C8A; - - --green-300: #3ACF5A; - --green-400: #31A552; - --green-500: #41904F; - - --olive-300: #CAD548; - --olive-400: #A0A540; - --olive-500: #818628; - - --yellow-300: #FDD353; - --yellow-400: #EDBC40; - --yellow-500: #C39E37; - - --orange-300: #FFAB5C; - --orange-400: #F4800B; - --orange-500: #C57417; - - --red-300: #FF5C5C; - --red-400: #E94E58; - --red-500: #AC3E46; - - --pink-300: #EC6FD3; - --pink-400: #CB48AD; - --pink-500: #A32E92; - - --purple-300: #B570FF; - --purple-400: #915CE0; - --purple-500: #6B23B3; - - --navy-300: #647CC9; - --navy-400: #3A4F8D; - --navy-500: #333D5B; - - --grey-50: #FCFCFC; - --grey-100: #F7F7F8; - --grey-200: #EFEFF0; - --grey-500: #A7A7AA; - --grey-700: #464748; - --grey-800: #313234; - --grey-850: #2A2B2D; - --grey-900: #242428; - - --white: #FFFFFF; - --black: #000000; - - --blue-400-30: #5E56F04D; - --blue-400-20: #5E56F033; - --blue-400-10: #5E56F01A; - --blue-300-40: #6687FF66; - --blue-300-30: #6687FF4D; - --blue-300-20: #6687FF33; - - --cobalt-400-30: #329BE74D; - --cobalt-400-20: #329BE733; - --cobalt-400-10: #329BE71A; - --cobalt-300-40: #47C8FF66; - --cobalt-300-30: #47C8FF4D; - --cobalt-300-20: #47C8FF33; - - --teal-400-30: #0FB3A34D; - --teal-400-20: #0FB3A333; - --teal-400-10: #0FB3A31A; - --teal-300-40: #3CDDCD66; - --teal-300-30: #3CDDCD4D; - --teal-300-20: #3CDDCD33; - - --green-400-30: #31A5524D; - --green-400-20: #31A55233; - --green-400-10: #31A5521A; - --green-300-40: #3ACF5A66; - --green-300-30: #3ACF5A4D; - --green-300-20: #3ACF5A33; - - --olive-400-30: #A0A5404D; - --olive-400-20: #A0A54033; - --olive-400-10: #A0A5401A; - --olive-300-40: #CAD54866; - --olive-300-30: #CAD5484D; - --olive-300-20: #CAD54833; - - --yellow-400-30: #EDBC404D; - --yellow-400-20: #EDBC4033; - --yellow-400-10: #EDBC401A; - --yellow-300-40: #FDD35366; - --yellow-300-30: #FDD3534D; - --yellow-300-20: #FDD35333; - - --orange-400-30: #F4800B4D; - --orange-400-20: #F4800B33; - --orange-400-10: #F4800B1A; - --orange-300-40: #FFAB5C66; - --orange-300-30: #FFAB5C4D; - --orange-300-20: #FFAB5C33; - - --red-400-30: #E94E584D; - --red-400-20: #E94E5833; - --red-400-10: #E94E581A; - --red-300-40: #FF5C5C66; - --red-300-30: #FF5C5C4D; - --red-300-20: #FF5C5C33; - - --pink-400-30: #CB48AD4D; - --pink-400-20: #CB48AD33; - --pink-400-10: #CB48AD1A; - --pink-300-40: #EC6FD366; - --pink-300-30: #EC6FD34D; - --pink-300-20: #EC6FD333; - - --purple-400-30: #915CE04D; - --purple-400-20: #915CE033; - --purple-400-10: #915CE01A; - --purple-300-40: #B570FF66; - --purple-300-30: #B570FF4D; - --purple-300-20: #B570FF33; - - --navy-400-30: #3A4F8D4D; - --navy-400-20: #3A4F8D33; - --navy-400-10: #3A4F8D1A; - --navy-300-40: #647CC966; - --navy-300-30: #647CC94D; - --navy-300-20: #647CC933; - - --grey-900-90: #242428E6; - --grey-850-80: #2A2B2DCC; - --grey-800-90: #313234E6; - --grey-800-80: #313234CC; - --grey-700-80: #464748CC; - --grey-200-80: #EFEFF0CC; - --grey-100-90: #F7F7F8E6; - --grey-100-80: #F7F7F8CC; - --grey-50-80: #FCFCFCCC; - - --white-90: #FFFFFFE6; - --white-80: #FFFFFFCC; - --white-60: #FFFFFF99; - --white-40: #FFFFFF66; - --white-20: #FFFFFF33; - --white-12: #FFFFFF1F; - --white-8: #FFFFFF14; - --white-5: #FFFFFF0D; - - --black-85: #000000D9; - --black-60: #00000099; - --black-40: #00000066; - --black-30: #0000004D; - --black-22: #00000038; - --black-20: #00000033; - --black-15: #00000026; - --black-8: #00000014; - --black-5: #0000000D; - --black-3: #00000008; - - --line-height-16: 1.6rem; - --line-height-18: 1.8rem; - --line-height-20: 2.0rem; - --line-height-22: 2.2rem; - --line-height-24: 2.4rem; - --line-height-28: 2.8rem; - --line-height-32: 3.2rem; - --line-height-44: 4.4rem; - - --font-weight-400: 400; - --font-weight-700: 700; - - --font-size-11: 1.1rem; - --font-size-12: 1.2rem; - --font-size-13: 1.3rem; - --font-size-14: 1.4rem; - --font-size-15: 1.5rem; - --font-size-16: 1.6rem; - --font-size-17: 1.7rem; - --font-size-18: 1.8rem; - --font-size-22: 2.2rem; - --font-size-24: 2.4rem; - --font-size-36: 3.6rem; - - --letter-spacing-0: 0; - --letter-spacing-m-1: -0.1; - --letter-spacing-m-4: -0.4; - --letter-spacing-m-10: -1; - - --paragraph-spacing-0: 0; - - --text-case-none: none; - --text-decoration-none: none; - - --back-drop: 60px; - - --animation-duration-50: animation-duration: 50ms;; - --animation-easing: animation-timing-function: ease-out;; -} diff --git a/packages/bezier-react/src/styles/tokens/_index.scss b/packages/bezier-react/src/styles/tokens/_index.scss deleted file mode 100644 index 8c53c95c28..0000000000 --- a/packages/bezier-react/src/styles/tokens/_index.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use "core"; -@use "semantic"; - -:where(:root, :host) { - @include core.tokens; - - &, // Default theme - [data-bezier-theme="light"] { - @include semantic.light-theme-tokens; - } - - [data-bezier-theme="dark"] { - @include semantic.dark-theme-tokens; - } -} diff --git a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss b/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss deleted file mode 100644 index 57fd920c86..0000000000 --- a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss +++ /dev/null @@ -1,208 +0,0 @@ -@mixin tokens { - --bg-white-high: var(--grey-700); - --bg-white-normal: var(--grey-900); - --bg-white-low: var(--grey-800); - --bg-gnb: var(--grey-700-80); - --bg-navi: var(--grey-800-80); - --bg-header: var(--grey-800); - --bg-header-float: var(--grey-800-80); - --bg-lounge: var(--grey-800-90); - --bg-black-darkest: var(--white-60); - --bg-black-darker: var(--white-40); - --bg-black-dark: var(--white-20); - --bg-black-light: var(--white-12); - --bg-black-lighter: var(--white-8); - --bg-black-lightest: var(--white-5); - --bg-grey-darkest: var(--white); - --bg-grey-dark: var(--grey-500); - --bg-grey-dim-lightest: var(--grey-850-80); - --bg-grey-light: var(--grey-700); - --bg-grey-lighter: var(--grey-800); - --bg-grey-lightest: var(--grey-850); - --bg-white-dim-dark: var(--black-60); - --bg-white-dim-light: var(--black-20); - --bgtxt-blue-dark: var(--blue-400); - --bgtxt-blue-normal: var(--blue-300); - --bgtxt-blue-light: var(--blue-300-40); - --bgtxt-blue-lighter: var(--blue-300-30); - --bgtxt-blue-lightest: var(--blue-300-20); - --bgtxt-cobalt-dark: var(--cobalt-400); - --bgtxt-cobalt-normal: var(--cobalt-300); - --bgtxt-cobalt-light: var(--cobalt-300-40); - --bgtxt-cobalt-lighter: var(--cobalt-300-30); - --bgtxt-cobalt-lightest: var(--cobalt-300-20); - --bgtxt-teal-dark: var(--teal-400); - --bgtxt-teal-normal: var(--teal-300); - --bgtxt-teal-light: var(--teal-300-40); - --bgtxt-teal-lighter: var(--teal-300-30); - --bgtxt-teal-lightest: var(--teal-300-20); - --bgtxt-green-dark: var(--green-400); - --bgtxt-green-normal: var(--green-300); - --bgtxt-green-light: var(--green-300-40); - --bgtxt-green-lighter: var(--green-300-30); - --bgtxt-green-lightest: var(--green-300-20); - --bgtxt-olive-dark: var(--olive-400); - --bgtxt-olive-normal: var(--olive-300); - --bgtxt-olive-light: var(--olive-300-40); - --bgtxt-olive-lighter: var(--olive-300-30); - --bgtxt-olive-lightest: var(--olive-300-20); - --bgtxt-yellow-dark: var(--yellow-400); - --bgtxt-yellow-normal: var(--yellow-300); - --bgtxt-yellow-light: var(--yellow-300-40); - --bgtxt-yellow-lighter: var(--yellow-300-30); - --bgtxt-yellow-lightest: var(--yellow-300-20); - --bgtxt-orange-dark: var(--orange-400); - --bgtxt-orange-normal: var(--orange-300); - --bgtxt-orange-light: var(--orange-300-40); - --bgtxt-orange-lighter: var(--orange-300-30); - --bgtxt-orange-lightest: var(--orange-300-20); - --bgtxt-red-dark: var(--red-400); - --bgtxt-red-normal: var(--red-300); - --bgtxt-red-light: var(--red-300-40); - --bgtxt-red-lighter: var(--red-300-30); - --bgtxt-red-lightest: var(--red-300-20); - --bgtxt-pink-dark: var(--pink-400); - --bgtxt-pink-normal: var(--pink-300); - --bgtxt-pink-light: var(--pink-300-40); - --bgtxt-pink-lighter: var(--pink-300-30); - --bgtxt-pink-lightest: var(--pink-300-20); - --bgtxt-purple-dark: var(--purple-400); - --bgtxt-purple-normal: var(--purple-300); - --bgtxt-purple-light: var(--purple-300-40); - --bgtxt-purple-lighter: var(--purple-300-30); - --bgtxt-purple-lightest: var(--purple-300-20); - --bgtxt-navy-dark: var(--navy-400); - --bgtxt-navy-normal: var(--navy-300); - --bgtxt-navy-light: var(--navy-300-40); - --bgtxt-navy-lighter: var(--navy-300-30); - --bgtxt-navy-lightest: var(--navy-300-20); - --txt-black-pure: var(--white); - --txt-black-darkest: var(--white-80); - --txt-black-darker: var(--white-60); - --txt-black-dark: var(--white-40); - --txt-white-normal: var(--grey-900); - --bgtxt-absolute-black-dark: var(--black); - --bgtxt-absolute-black-normal: var(--black-85); - --bgtxt-absolute-black-light: var(--black-60); - --bgtxt-absolute-black-lighter: var(--black-40); - --bgtxt-absolute-black-lightest: var(--black-20); - --bgtxt-absolute-white-dark: var(--white); - --bgtxt-absolute-white-normal: var(--white-90); - --bgtxt-absolute-white-light: var(--white-60); - --bgtxt-absolute-white-lighter: var(--white-40); - --bgtxt-absolute-white-lightest: var(--white-20); - --bdr-black-dark: var(--white-20); - --bdr-black-light: var(--white-12); - --bdr-black-lightest: var(--white-5); - --bdr-grey-light: var(--grey-700); - --bdr-white: var(--grey-700); - --shdw-xlarge: var(--black-60); - --shdw-large: var(--black-40); - --shdw-medium: var(--black-20); - --shdw-small: var(--black-15); - --shdw-base: var(--black-8); - --shdw-inner-base: var(--white-8); - --inverted-bg-white-high: var(--white); - --inverted-bg-white-normal: var(--white); - --inverted-bg-white-low: var(--white); - --inverted-bg-gnb: var(--grey-200-80); - --inverted-bg-navi: var(--grey-100-80); - --inverted-bg-header: var(--white); - --inverted-bg-header-float: var(--white-90); - --inverted-bg-lounge: var(--grey-100-90); - --inverted-bg-black-darkest: var(--black-60); - --inverted-bg-black-darker: var(--black-40); - --inverted-bg-black-dark: var(--black-15); - --inverted-bg-black-light: var(--black-8); - --inverted-bg-black-lighter: var(--black-5); - --inverted-bg-black-lightest: var(--black-3); - --inverted-bg-grey-darkest: var(--grey-900); - --inverted-bg-grey-dark: var(--grey-500); - --inverted-bg-grey-dim-lightest: var(--grey-50-80); - --inverted-bg-grey-light: var(--grey-200); - --inverted-bg-grey-lighter: var(--grey-100); - --inverted-bg-grey-lightest: var(--grey-50); - --inverted-bg-white-dim-dark: var(--white-60); - --inverted-bg-white-dim-light: var(--white-20); - --inverted-bgtxt-blue-dark: var(--blue-500); - --inverted-bgtxt-blue-normal: var(--blue-400); - --inverted-bgtxt-blue-light: var(--blue-400-30); - --inverted-bgtxt-blue-lighter: var(--blue-400-20); - --inverted-bgtxt-blue-lightest: var(--blue-400-10); - --inverted-bgtxt-cobalt-dark: var(--cobalt-500); - --inverted-bgtxt-cobalt-normal: var(--cobalt-400); - --inverted-bgtxt-cobalt-light: var(--cobalt-400-30); - --inverted-bgtxt-cobalt-lighter: var(--cobalt-400-20); - --inverted-bgtxt-cobalt-lightest: var(--cobalt-400-10); - --inverted-bgtxt-teal-dark: var(--teal-500); - --inverted-bgtxt-teal-normal: var(--teal-400); - --inverted-bgtxt-teal-light: var(--teal-400-30); - --inverted-bgtxt-teal-lighter: var(--teal-400-20); - --inverted-bgtxt-teal-lightest: var(--teal-400-10); - --inverted-bgtxt-green-dark: var(--green-500); - --inverted-bgtxt-green-normal: var(--green-400); - --inverted-bgtxt-green-light: var(--green-400-30); - --inverted-bgtxt-green-lighter: var(--green-400-20); - --inverted-bgtxt-green-lightest: var(--green-400-10); - --inverted-bgtxt-olive-dark: var(--olive-500); - --inverted-bgtxt-olive-normal: var(--olive-400); - --inverted-bgtxt-olive-light: var(--olive-400-30); - --inverted-bgtxt-olive-lighter: var(--olive-400-20); - --inverted-bgtxt-olive-lightest: var(--olive-400-10); - --inverted-bgtxt-yellow-dark: var(--yellow-500); - --inverted-bgtxt-yellow-normal: var(--yellow-400); - --inverted-bgtxt-yellow-light: var(--yellow-400-30); - --inverted-bgtxt-yellow-lighter: var(--yellow-400-20); - --inverted-bgtxt-yellow-lightest: var(--yellow-400-10); - --inverted-bgtxt-orange-dark: var(--orange-500); - --inverted-bgtxt-orange-normal: var(--orange-400); - --inverted-bgtxt-orange-light: var(--orange-400-30); - --inverted-bgtxt-orange-lighter: var(--orange-400-20); - --inverted-bgtxt-orange-lightest: var(--orange-400-10); - --inverted-bgtxt-red-dark: var(--red-500); - --inverted-bgtxt-red-normal: var(--red-400); - --inverted-bgtxt-red-light: var(--red-400-30); - --inverted-bgtxt-red-lighter: var(--red-400-20); - --inverted-bgtxt-red-lightest: var(--red-400-10); - --inverted-bgtxt-pink-dark: var(--pink-500); - --inverted-bgtxt-pink-normal: var(--pink-400); - --inverted-bgtxt-pink-light: var(--pink-400-30); - --inverted-bgtxt-pink-lighter: var(--pink-400-20); - --inverted-bgtxt-pink-lightest: var(--pink-400-10); - --inverted-bgtxt-purple-dark: var(--purple-500); - --inverted-bgtxt-purple-normal: var(--purple-400); - --inverted-bgtxt-purple-light: var(--purple-400-30); - --inverted-bgtxt-purple-lighter: var(--purple-400-20); - --inverted-bgtxt-purple-lightest: var(--purple-400-10); - --inverted-bgtxt-navy-dark: var(--navy-500); - --inverted-bgtxt-navy-normal: var(--navy-400); - --inverted-bgtxt-navy-light: var(--navy-400-30); - --inverted-bgtxt-navy-lighter: var(--navy-400-20); - --inverted-bgtxt-navy-lightest: var(--navy-400-10); - --inverted-txt-black-pure: var(--black); - --inverted-txt-black-darkest: var(--black-85); - --inverted-txt-black-darker: var(--black-60); - --inverted-txt-black-dark: var(--black-40); - --inverted-txt-white-normal: var(--white); - --inverted-bgtxt-absolute-black-dark: var(--black); - --inverted-bgtxt-absolute-black-normal: var(--black-85); - --inverted-bgtxt-absolute-black-light: var(--black-60); - --inverted-bgtxt-absolute-black-lighter: var(--black-40); - --inverted-bgtxt-absolute-black-lightest: var(--black-20); - --inverted-bgtxt-absolute-white-dark: var(--white); - --inverted-bgtxt-absolute-white-normal: var(--white-90); - --inverted-bgtxt-absolute-white-light: var(--white-60); - --inverted-bgtxt-absolute-white-lighter: var(--white-40); - --inverted-bgtxt-absolute-white-lightest: var(--white-20); - --inverted-bdr-black-dark: var(--black-15); - --inverted-bdr-black-light: var(--black-8); - --inverted-bdr-black-lightest: var(--black-3); - --inverted-bdr-grey-light: var(--grey-200); - --inverted-bdr-white: var(--white); - --inverted-shdw-xlarge: var(--black-30); - --inverted-shdw-large: var(--black-22); - --inverted-shdw-medium: var(--black-15); - --inverted-shdw-small: var(--black-8); - --inverted-shdw-base: var(--black-5); - --inverted-shdw-inner-base: var(--white-12); -} diff --git a/packages/bezier-react/src/styles/tokens/semantic/_index.scss b/packages/bezier-react/src/styles/tokens/semantic/_index.scss deleted file mode 100644 index 755ee791e4..0000000000 --- a/packages/bezier-react/src/styles/tokens/semantic/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@forward 'light-theme' as light-theme-*; -@forward 'dark-theme' as dark-theme-*; diff --git a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss b/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss deleted file mode 100644 index 978fe939c5..0000000000 --- a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss +++ /dev/null @@ -1,208 +0,0 @@ -@mixin tokens { - --bg-white-high: var(--white); - --bg-white-normal: var(--white); - --bg-white-low: var(--white); - --bg-gnb: var(--grey-200-80); - --bg-navi: var(--grey-100-80); - --bg-header: var(--white); - --bg-header-float: var(--white-90); - --bg-lounge: var(--grey-100-90); - --bg-black-darkest: var(--black-60); - --bg-black-darker: var(--black-40); - --bg-black-dark: var(--black-15); - --bg-black-light: var(--black-8); - --bg-black-lighter: var(--black-5); - --bg-black-lightest: var(--black-3); - --bg-grey-darkest: var(--grey-900); - --bg-grey-dark: var(--grey-500); - --bg-grey-dim-lightest: var(--grey-50-80); - --bg-grey-light: var(--grey-200); - --bg-grey-lighter: var(--grey-100); - --bg-grey-lightest: var(--grey-50); - --bg-white-dim-dark: var(--white-60); - --bg-white-dim-light: var(--white-20); - --bgtxt-blue-dark: var(--blue-500); - --bgtxt-blue-normal: var(--blue-400); - --bgtxt-blue-light: var(--blue-400-30); - --bgtxt-blue-lighter: var(--blue-400-20); - --bgtxt-blue-lightest: var(--blue-400-10); - --bgtxt-cobalt-dark: var(--cobalt-500); - --bgtxt-cobalt-normal: var(--cobalt-400); - --bgtxt-cobalt-light: var(--cobalt-400-30); - --bgtxt-cobalt-lighter: var(--cobalt-400-20); - --bgtxt-cobalt-lightest: var(--cobalt-400-10); - --bgtxt-teal-dark: var(--teal-500); - --bgtxt-teal-normal: var(--teal-400); - --bgtxt-teal-light: var(--teal-400-30); - --bgtxt-teal-lighter: var(--teal-400-20); - --bgtxt-teal-lightest: var(--teal-400-10); - --bgtxt-green-dark: var(--green-500); - --bgtxt-green-normal: var(--green-400); - --bgtxt-green-light: var(--green-400-30); - --bgtxt-green-lighter: var(--green-400-20); - --bgtxt-green-lightest: var(--green-400-10); - --bgtxt-olive-dark: var(--olive-500); - --bgtxt-olive-normal: var(--olive-400); - --bgtxt-olive-light: var(--olive-400-30); - --bgtxt-olive-lighter: var(--olive-400-20); - --bgtxt-olive-lightest: var(--olive-400-10); - --bgtxt-yellow-dark: var(--yellow-500); - --bgtxt-yellow-normal: var(--yellow-400); - --bgtxt-yellow-light: var(--yellow-400-30); - --bgtxt-yellow-lighter: var(--yellow-400-20); - --bgtxt-yellow-lightest: var(--yellow-400-10); - --bgtxt-orange-dark: var(--orange-500); - --bgtxt-orange-normal: var(--orange-400); - --bgtxt-orange-light: var(--orange-400-30); - --bgtxt-orange-lighter: var(--orange-400-20); - --bgtxt-orange-lightest: var(--orange-400-10); - --bgtxt-red-dark: var(--red-500); - --bgtxt-red-normal: var(--red-400); - --bgtxt-red-light: var(--red-400-30); - --bgtxt-red-lighter: var(--red-400-20); - --bgtxt-red-lightest: var(--red-400-10); - --bgtxt-pink-dark: var(--pink-500); - --bgtxt-pink-normal: var(--pink-400); - --bgtxt-pink-light: var(--pink-400-30); - --bgtxt-pink-lighter: var(--pink-400-20); - --bgtxt-pink-lightest: var(--pink-400-10); - --bgtxt-purple-dark: var(--purple-500); - --bgtxt-purple-normal: var(--purple-400); - --bgtxt-purple-light: var(--purple-400-30); - --bgtxt-purple-lighter: var(--purple-400-20); - --bgtxt-purple-lightest: var(--purple-400-10); - --bgtxt-navy-dark: var(--navy-500); - --bgtxt-navy-normal: var(--navy-400); - --bgtxt-navy-light: var(--navy-400-30); - --bgtxt-navy-lighter: var(--navy-400-20); - --bgtxt-navy-lightest: var(--navy-400-10); - --txt-black-pure: var(--black); - --txt-black-darkest: var(--black-85); - --txt-black-darker: var(--black-60); - --txt-black-dark: var(--black-40); - --txt-white-normal: var(--white); - --bgtxt-absolute-black-dark: var(--black); - --bgtxt-absolute-black-normal: var(--black-85); - --bgtxt-absolute-black-light: var(--black-60); - --bgtxt-absolute-black-lighter: var(--black-40); - --bgtxt-absolute-black-lightest: var(--black-20); - --bgtxt-absolute-white-dark: var(--white); - --bgtxt-absolute-white-normal: var(--white-90); - --bgtxt-absolute-white-light: var(--white-60); - --bgtxt-absolute-white-lighter: var(--white-40); - --bgtxt-absolute-white-lightest: var(--white-20); - --bdr-black-dark: var(--black-15); - --bdr-black-light: var(--black-8); - --bdr-black-lightest: var(--black-3); - --bdr-grey-light: var(--grey-200); - --bdr-white: var(--white); - --shdw-xlarge: var(--black-30); - --shdw-large: var(--black-22); - --shdw-medium: var(--black-15); - --shdw-small: var(--black-8); - --shdw-base: var(--black-5); - --shdw-inner-base: var(--white-12); - --inverted-bg-white-high: var(--grey-700); - --inverted-bg-white-normal: var(--grey-900); - --inverted-bg-white-low: var(--grey-800); - --inverted-bg-gnb: var(--grey-700-80); - --inverted-bg-navi: var(--grey-800-80); - --inverted-bg-header: var(--grey-800); - --inverted-bg-header-float: var(--grey-800-80); - --inverted-bg-lounge: var(--grey-800-90); - --inverted-bg-black-darkest: var(--white-60); - --inverted-bg-black-darker: var(--white-40); - --inverted-bg-black-dark: var(--white-20); - --inverted-bg-black-light: var(--white-12); - --inverted-bg-black-lighter: var(--white-8); - --inverted-bg-black-lightest: var(--white-5); - --inverted-bg-grey-darkest: var(--white); - --inverted-bg-grey-dark: var(--grey-500); - --inverted-bg-grey-dim-lightest: var(--grey-850-80); - --inverted-bg-grey-light: var(--grey-700); - --inverted-bg-grey-lighter: var(--grey-800); - --inverted-bg-grey-lightest: var(--grey-850); - --inverted-bg-white-dim-dark: var(--black-60); - --inverted-bg-white-dim-light: var(--black-20); - --inverted-bgtxt-blue-dark: var(--blue-400); - --inverted-bgtxt-blue-normal: var(--blue-300); - --inverted-bgtxt-blue-light: var(--blue-300-40); - --inverted-bgtxt-blue-lighter: var(--blue-300-30); - --inverted-bgtxt-blue-lightest: var(--blue-300-20); - --inverted-bgtxt-cobalt-dark: var(--cobalt-400); - --inverted-bgtxt-cobalt-normal: var(--cobalt-300); - --inverted-bgtxt-cobalt-light: var(--cobalt-300-40); - --inverted-bgtxt-cobalt-lighter: var(--cobalt-300-30); - --inverted-bgtxt-cobalt-lightest: var(--cobalt-300-20); - --inverted-bgtxt-teal-dark: var(--teal-400); - --inverted-bgtxt-teal-normal: var(--teal-300); - --inverted-bgtxt-teal-light: var(--teal-300-40); - --inverted-bgtxt-teal-lighter: var(--teal-300-30); - --inverted-bgtxt-teal-lightest: var(--teal-300-20); - --inverted-bgtxt-green-dark: var(--green-400); - --inverted-bgtxt-green-normal: var(--green-300); - --inverted-bgtxt-green-light: var(--green-300-40); - --inverted-bgtxt-green-lighter: var(--green-300-30); - --inverted-bgtxt-green-lightest: var(--green-300-20); - --inverted-bgtxt-olive-dark: var(--olive-400); - --inverted-bgtxt-olive-normal: var(--olive-300); - --inverted-bgtxt-olive-light: var(--olive-300-40); - --inverted-bgtxt-olive-lighter: var(--olive-300-30); - --inverted-bgtxt-olive-lightest: var(--olive-300-20); - --inverted-bgtxt-yellow-dark: var(--yellow-400); - --inverted-bgtxt-yellow-normal: var(--yellow-300); - --inverted-bgtxt-yellow-light: var(--yellow-300-40); - --inverted-bgtxt-yellow-lighter: var(--yellow-300-30); - --inverted-bgtxt-yellow-lightest: var(--yellow-300-20); - --inverted-bgtxt-orange-dark: var(--orange-400); - --inverted-bgtxt-orange-normal: var(--orange-300); - --inverted-bgtxt-orange-light: var(--orange-300-40); - --inverted-bgtxt-orange-lighter: var(--orange-300-30); - --inverted-bgtxt-orange-lightest: var(--orange-300-20); - --inverted-bgtxt-red-dark: var(--red-400); - --inverted-bgtxt-red-normal: var(--red-300); - --inverted-bgtxt-red-light: var(--red-300-40); - --inverted-bgtxt-red-lighter: var(--red-300-30); - --inverted-bgtxt-red-lightest: var(--red-300-20); - --inverted-bgtxt-pink-dark: var(--pink-400); - --inverted-bgtxt-pink-normal: var(--pink-300); - --inverted-bgtxt-pink-light: var(--pink-300-40); - --inverted-bgtxt-pink-lighter: var(--pink-300-30); - --inverted-bgtxt-pink-lightest: var(--pink-300-20); - --inverted-bgtxt-purple-dark: var(--purple-400); - --inverted-bgtxt-purple-normal: var(--purple-300); - --inverted-bgtxt-purple-light: var(--purple-300-40); - --inverted-bgtxt-purple-lighter: var(--purple-300-30); - --inverted-bgtxt-purple-lightest: var(--purple-300-20); - --inverted-bgtxt-navy-dark: var(--navy-400); - --inverted-bgtxt-navy-normal: var(--navy-300); - --inverted-bgtxt-navy-light: var(--navy-300-40); - --inverted-bgtxt-navy-lighter: var(--navy-300-30); - --inverted-bgtxt-navy-lightest: var(--navy-300-20); - --inverted-txt-black-pure: var(--white); - --inverted-txt-black-darkest: var(--white-80); - --inverted-txt-black-darker: var(--white-60); - --inverted-txt-black-dark: var(--white-40); - --inverted-txt-white-normal: var(--grey-900); - --inverted-bgtxt-absolute-black-dark: var(--black); - --inverted-bgtxt-absolute-black-normal: var(--black-85); - --inverted-bgtxt-absolute-black-light: var(--black-60); - --inverted-bgtxt-absolute-black-lighter: var(--black-40); - --inverted-bgtxt-absolute-black-lightest: var(--black-20); - --inverted-bgtxt-absolute-white-dark: var(--white); - --inverted-bgtxt-absolute-white-normal: var(--white-90); - --inverted-bgtxt-absolute-white-light: var(--white-60); - --inverted-bgtxt-absolute-white-lighter: var(--white-40); - --inverted-bgtxt-absolute-white-lightest: var(--white-20); - --inverted-bdr-black-dark: var(--white-20); - --inverted-bdr-black-light: var(--white-12); - --inverted-bdr-black-lightest: var(--white-5); - --inverted-bdr-grey-light: var(--grey-700); - --inverted-bdr-white: var(--grey-700); - --inverted-shdw-xlarge: var(--black-60); - --inverted-shdw-large: var(--black-40); - --inverted-shdw-medium: var(--black-20); - --inverted-shdw-small: var(--black-15); - --inverted-shdw-base: var(--black-8); - --inverted-shdw-inner-base: var(--white-8); -} diff --git a/packages/bezier-react/src/styles/tokens/ts/darkTheme.ts b/packages/bezier-react/src/styles/tokens/ts/darkTheme.ts deleted file mode 100644 index d525ea804c..0000000000 --- a/packages/bezier-react/src/styles/tokens/ts/darkTheme.ts +++ /dev/null @@ -1,208 +0,0 @@ -export default { - bgWhiteHigh: 'var(--grey-700)', - bgWhiteNormal: 'var(--grey-900)', - bgWhiteLow: 'var(--grey-800)', - bgGnb: 'var(--grey-700-80)', - bgNavi: 'var(--grey-800-80)', - bgHeader: 'var(--grey-800)', - bgHeaderFloat: 'var(--grey-800-80)', - bgLounge: 'var(--grey-800-90)', - bgBlackDarkest: 'var(--white-60)', - bgBlackDarker: 'var(--white-40)', - bgBlackDark: 'var(--white-20)', - bgBlackLight: 'var(--white-12)', - bgBlackLighter: 'var(--white-8)', - bgBlackLightest: 'var(--white-5)', - bgGreyDarkest: 'var(--white)', - bgGreyDark: 'var(--grey-500)', - bgGreyDimLightest: 'var(--grey-850-80)', - bgGreyLight: 'var(--grey-700)', - bgGreyLighter: 'var(--grey-800)', - bgGreyLightest: 'var(--grey-850)', - bgWhiteDimDark: 'var(--black-60)', - bgWhiteDimLight: 'var(--black-20)', - bgtxtBlueDark: 'var(--blue-400)', - bgtxtBlueNormal: 'var(--blue-300)', - bgtxtBlueLight: 'var(--blue-300-40)', - bgtxtBlueLighter: 'var(--blue-300-30)', - bgtxtBlueLightest: 'var(--blue-300-20)', - bgtxtCobaltDark: 'var(--cobalt-400)', - bgtxtCobaltNormal: 'var(--cobalt-300)', - bgtxtCobaltLight: 'var(--cobalt-300-40)', - bgtxtCobaltLighter: 'var(--cobalt-300-30)', - bgtxtCobaltLightest: 'var(--cobalt-300-20)', - bgtxtTealDark: 'var(--teal-400)', - bgtxtTealNormal: 'var(--teal-300)', - bgtxtTealLight: 'var(--teal-300-40)', - bgtxtTealLighter: 'var(--teal-300-30)', - bgtxtTealLightest: 'var(--teal-300-20)', - bgtxtGreenDark: 'var(--green-400)', - bgtxtGreenNormal: 'var(--green-300)', - bgtxtGreenLight: 'var(--green-300-40)', - bgtxtGreenLighter: 'var(--green-300-30)', - bgtxtGreenLightest: 'var(--green-300-20)', - bgtxtOliveDark: 'var(--olive-400)', - bgtxtOliveNormal: 'var(--olive-300)', - bgtxtOliveLight: 'var(--olive-300-40)', - bgtxtOliveLighter: 'var(--olive-300-30)', - bgtxtOliveLightest: 'var(--olive-300-20)', - bgtxtYellowDark: 'var(--yellow-400)', - bgtxtYellowNormal: 'var(--yellow-300)', - bgtxtYellowLight: 'var(--yellow-300-40)', - bgtxtYellowLighter: 'var(--yellow-300-30)', - bgtxtYellowLightest: 'var(--yellow-300-20)', - bgtxtOrangeDark: 'var(--orange-400)', - bgtxtOrangeNormal: 'var(--orange-300)', - bgtxtOrangeLight: 'var(--orange-300-40)', - bgtxtOrangeLighter: 'var(--orange-300-30)', - bgtxtOrangeLightest: 'var(--orange-300-20)', - bgtxtRedDark: 'var(--red-400)', - bgtxtRedNormal: 'var(--red-300)', - bgtxtRedLight: 'var(--red-300-40)', - bgtxtRedLighter: 'var(--red-300-30)', - bgtxtRedLightest: 'var(--red-300-20)', - bgtxtPinkDark: 'var(--pink-400)', - bgtxtPinkNormal: 'var(--pink-300)', - bgtxtPinkLight: 'var(--pink-300-40)', - bgtxtPinkLighter: 'var(--pink-300-30)', - bgtxtPinkLightest: 'var(--pink-300-20)', - bgtxtPurpleDark: 'var(--purple-400)', - bgtxtPurpleNormal: 'var(--purple-300)', - bgtxtPurpleLight: 'var(--purple-300-40)', - bgtxtPurpleLighter: 'var(--purple-300-30)', - bgtxtPurpleLightest: 'var(--purple-300-20)', - bgtxtNavyDark: 'var(--navy-400)', - bgtxtNavyNormal: 'var(--navy-300)', - bgtxtNavyLight: 'var(--navy-300-40)', - bgtxtNavyLighter: 'var(--navy-300-30)', - bgtxtNavyLightest: 'var(--navy-300-20)', - txtBlackPure: 'var(--white)', - txtBlackDarkest: 'var(--white-80)', - txtBlackDarker: 'var(--white-60)', - txtBlackDark: 'var(--white-40)', - txtWhiteNormal: 'var(--grey-900)', - bgtxtAbsoluteBlackDark: 'var(--black)', - bgtxtAbsoluteBlackNormal: 'var(--black-85)', - bgtxtAbsoluteBlackLight: 'var(--black-60)', - bgtxtAbsoluteBlackLighter: 'var(--black-40)', - bgtxtAbsoluteBlackLightest: 'var(--black-20)', - bgtxtAbsoluteWhiteDark: 'var(--white)', - bgtxtAbsoluteWhiteNormal: 'var(--white-90)', - bgtxtAbsoluteWhiteLight: 'var(--white-60)', - bgtxtAbsoluteWhiteLighter: 'var(--white-40)', - bgtxtAbsoluteWhiteLightest: 'var(--white-20)', - bdrBlackDark: 'var(--white-20)', - bdrBlackLight: 'var(--white-12)', - bdrBlackLightest: 'var(--white-5)', - bdrGreyLight: 'var(--grey-700)', - bdrWhite: 'var(--grey-700)', - shdwXlarge: 'var(--black-60)', - shdwLarge: 'var(--black-40)', - shdwMedium: 'var(--black-20)', - shdwSmall: 'var(--black-15)', - shdwBase: 'var(--black-8)', - shdwInnerBase: 'var(--white-8)', - invertedBgWhiteHigh: 'var(--white)', - invertedBgWhiteNormal: 'var(--white)', - invertedBgWhiteLow: 'var(--white)', - invertedBgGnb: 'var(--grey-200-80)', - invertedBgNavi: 'var(--grey-100-80)', - invertedBgHeader: 'var(--white)', - invertedBgHeaderFloat: 'var(--white-90)', - invertedBgLounge: 'var(--grey-100-90)', - invertedBgBlackDarkest: 'var(--black-60)', - invertedBgBlackDarker: 'var(--black-40)', - invertedBgBlackDark: 'var(--black-15)', - invertedBgBlackLight: 'var(--black-8)', - invertedBgBlackLighter: 'var(--black-5)', - invertedBgBlackLightest: 'var(--black-3)', - invertedBgGreyDarkest: 'var(--grey-900)', - invertedBgGreyDark: 'var(--grey-500)', - invertedBgGreyDimLightest: 'var(--grey-50-80)', - invertedBgGreyLight: 'var(--grey-200)', - invertedBgGreyLighter: 'var(--grey-100)', - invertedBgGreyLightest: 'var(--grey-50)', - invertedBgWhiteDimDark: 'var(--white-60)', - invertedBgWhiteDimLight: 'var(--white-20)', - invertedBgtxtBlueDark: 'var(--blue-500)', - invertedBgtxtBlueNormal: 'var(--blue-400)', - invertedBgtxtBlueLight: 'var(--blue-400-30)', - invertedBgtxtBlueLighter: 'var(--blue-400-20)', - invertedBgtxtBlueLightest: 'var(--blue-400-10)', - invertedBgtxtCobaltDark: 'var(--cobalt-500)', - invertedBgtxtCobaltNormal: 'var(--cobalt-400)', - invertedBgtxtCobaltLight: 'var(--cobalt-400-30)', - invertedBgtxtCobaltLighter: 'var(--cobalt-400-20)', - invertedBgtxtCobaltLightest: 'var(--cobalt-400-10)', - invertedBgtxtTealDark: 'var(--teal-500)', - invertedBgtxtTealNormal: 'var(--teal-400)', - invertedBgtxtTealLight: 'var(--teal-400-30)', - invertedBgtxtTealLighter: 'var(--teal-400-20)', - invertedBgtxtTealLightest: 'var(--teal-400-10)', - invertedBgtxtGreenDark: 'var(--green-500)', - invertedBgtxtGreenNormal: 'var(--green-400)', - invertedBgtxtGreenLight: 'var(--green-400-30)', - invertedBgtxtGreenLighter: 'var(--green-400-20)', - invertedBgtxtGreenLightest: 'var(--green-400-10)', - invertedBgtxtOliveDark: 'var(--olive-500)', - invertedBgtxtOliveNormal: 'var(--olive-400)', - invertedBgtxtOliveLight: 'var(--olive-400-30)', - invertedBgtxtOliveLighter: 'var(--olive-400-20)', - invertedBgtxtOliveLightest: 'var(--olive-400-10)', - invertedBgtxtYellowDark: 'var(--yellow-500)', - invertedBgtxtYellowNormal: 'var(--yellow-400)', - invertedBgtxtYellowLight: 'var(--yellow-400-30)', - invertedBgtxtYellowLighter: 'var(--yellow-400-20)', - invertedBgtxtYellowLightest: 'var(--yellow-400-10)', - invertedBgtxtOrangeDark: 'var(--orange-500)', - invertedBgtxtOrangeNormal: 'var(--orange-400)', - invertedBgtxtOrangeLight: 'var(--orange-400-30)', - invertedBgtxtOrangeLighter: 'var(--orange-400-20)', - invertedBgtxtOrangeLightest: 'var(--orange-400-10)', - invertedBgtxtRedDark: 'var(--red-500)', - invertedBgtxtRedNormal: 'var(--red-400)', - invertedBgtxtRedLight: 'var(--red-400-30)', - invertedBgtxtRedLighter: 'var(--red-400-20)', - invertedBgtxtRedLightest: 'var(--red-400-10)', - invertedBgtxtPinkDark: 'var(--pink-500)', - invertedBgtxtPinkNormal: 'var(--pink-400)', - invertedBgtxtPinkLight: 'var(--pink-400-30)', - invertedBgtxtPinkLighter: 'var(--pink-400-20)', - invertedBgtxtPinkLightest: 'var(--pink-400-10)', - invertedBgtxtPurpleDark: 'var(--purple-500)', - invertedBgtxtPurpleNormal: 'var(--purple-400)', - invertedBgtxtPurpleLight: 'var(--purple-400-30)', - invertedBgtxtPurpleLighter: 'var(--purple-400-20)', - invertedBgtxtPurpleLightest: 'var(--purple-400-10)', - invertedBgtxtNavyDark: 'var(--navy-500)', - invertedBgtxtNavyNormal: 'var(--navy-400)', - invertedBgtxtNavyLight: 'var(--navy-400-30)', - invertedBgtxtNavyLighter: 'var(--navy-400-20)', - invertedBgtxtNavyLightest: 'var(--navy-400-10)', - invertedTxtBlackPure: 'var(--black)', - invertedTxtBlackDarkest: 'var(--black-85)', - invertedTxtBlackDarker: 'var(--black-60)', - invertedTxtBlackDark: 'var(--black-40)', - invertedTxtWhiteNormal: 'var(--white)', - invertedBgtxtAbsoluteBlackDark: 'var(--black)', - invertedBgtxtAbsoluteBlackNormal: 'var(--black-85)', - invertedBgtxtAbsoluteBlackLight: 'var(--black-60)', - invertedBgtxtAbsoluteBlackLighter: 'var(--black-40)', - invertedBgtxtAbsoluteBlackLightest: 'var(--black-20)', - invertedBgtxtAbsoluteWhiteDark: 'var(--white)', - invertedBgtxtAbsoluteWhiteNormal: 'var(--white-90)', - invertedBgtxtAbsoluteWhiteLight: 'var(--white-60)', - invertedBgtxtAbsoluteWhiteLighter: 'var(--white-40)', - invertedBgtxtAbsoluteWhiteLightest: 'var(--white-20)', - invertedBdrBlackDark: 'var(--black-15)', - invertedBdrBlackLight: 'var(--black-8)', - invertedBdrBlackLightest: 'var(--black-3)', - invertedBdrGreyLight: 'var(--grey-200)', - invertedBdrWhite: 'var(--white)', - invertedShdwXlarge: 'var(--black-30)', - invertedShdwLarge: 'var(--black-22)', - invertedShdwMedium: 'var(--black-15)', - invertedShdwSmall: 'var(--black-8)', - invertedShdwBase: 'var(--black-5)', - invertedShdwInnerBase: 'var(--white-12)', -} as const diff --git a/packages/bezier-react/src/styles/tokens/ts/lightTheme.ts b/packages/bezier-react/src/styles/tokens/ts/lightTheme.ts deleted file mode 100644 index 103cd8de5d..0000000000 --- a/packages/bezier-react/src/styles/tokens/ts/lightTheme.ts +++ /dev/null @@ -1,208 +0,0 @@ -export default { - bgWhiteHigh: 'var(--white)', - bgWhiteNormal: 'var(--white)', - bgWhiteLow: 'var(--white)', - bgGnb: 'var(--grey-200-80)', - bgNavi: 'var(--grey-100-80)', - bgHeader: 'var(--white)', - bgHeaderFloat: 'var(--white-90)', - bgLounge: 'var(--grey-100-90)', - bgBlackDarkest: 'var(--black-60)', - bgBlackDarker: 'var(--black-40)', - bgBlackDark: 'var(--black-15)', - bgBlackLight: 'var(--black-8)', - bgBlackLighter: 'var(--black-5)', - bgBlackLightest: 'var(--black-3)', - bgGreyDarkest: 'var(--grey-900)', - bgGreyDark: 'var(--grey-500)', - bgGreyDimLightest: 'var(--grey-50-80)', - bgGreyLight: 'var(--grey-200)', - bgGreyLighter: 'var(--grey-100)', - bgGreyLightest: 'var(--grey-50)', - bgWhiteDimDark: 'var(--white-60)', - bgWhiteDimLight: 'var(--white-20)', - bgtxtBlueDark: 'var(--blue-500)', - bgtxtBlueNormal: 'var(--blue-400)', - bgtxtBlueLight: 'var(--blue-400-30)', - bgtxtBlueLighter: 'var(--blue-400-20)', - bgtxtBlueLightest: 'var(--blue-400-10)', - bgtxtCobaltDark: 'var(--cobalt-500)', - bgtxtCobaltNormal: 'var(--cobalt-400)', - bgtxtCobaltLight: 'var(--cobalt-400-30)', - bgtxtCobaltLighter: 'var(--cobalt-400-20)', - bgtxtCobaltLightest: 'var(--cobalt-400-10)', - bgtxtTealDark: 'var(--teal-500)', - bgtxtTealNormal: 'var(--teal-400)', - bgtxtTealLight: 'var(--teal-400-30)', - bgtxtTealLighter: 'var(--teal-400-20)', - bgtxtTealLightest: 'var(--teal-400-10)', - bgtxtGreenDark: 'var(--green-500)', - bgtxtGreenNormal: 'var(--green-400)', - bgtxtGreenLight: 'var(--green-400-30)', - bgtxtGreenLighter: 'var(--green-400-20)', - bgtxtGreenLightest: 'var(--green-400-10)', - bgtxtOliveDark: 'var(--olive-500)', - bgtxtOliveNormal: 'var(--olive-400)', - bgtxtOliveLight: 'var(--olive-400-30)', - bgtxtOliveLighter: 'var(--olive-400-20)', - bgtxtOliveLightest: 'var(--olive-400-10)', - bgtxtYellowDark: 'var(--yellow-500)', - bgtxtYellowNormal: 'var(--yellow-400)', - bgtxtYellowLight: 'var(--yellow-400-30)', - bgtxtYellowLighter: 'var(--yellow-400-20)', - bgtxtYellowLightest: 'var(--yellow-400-10)', - bgtxtOrangeDark: 'var(--orange-500)', - bgtxtOrangeNormal: 'var(--orange-400)', - bgtxtOrangeLight: 'var(--orange-400-30)', - bgtxtOrangeLighter: 'var(--orange-400-20)', - bgtxtOrangeLightest: 'var(--orange-400-10)', - bgtxtRedDark: 'var(--red-500)', - bgtxtRedNormal: 'var(--red-400)', - bgtxtRedLight: 'var(--red-400-30)', - bgtxtRedLighter: 'var(--red-400-20)', - bgtxtRedLightest: 'var(--red-400-10)', - bgtxtPinkDark: 'var(--pink-500)', - bgtxtPinkNormal: 'var(--pink-400)', - bgtxtPinkLight: 'var(--pink-400-30)', - bgtxtPinkLighter: 'var(--pink-400-20)', - bgtxtPinkLightest: 'var(--pink-400-10)', - bgtxtPurpleDark: 'var(--purple-500)', - bgtxtPurpleNormal: 'var(--purple-400)', - bgtxtPurpleLight: 'var(--purple-400-30)', - bgtxtPurpleLighter: 'var(--purple-400-20)', - bgtxtPurpleLightest: 'var(--purple-400-10)', - bgtxtNavyDark: 'var(--navy-500)', - bgtxtNavyNormal: 'var(--navy-400)', - bgtxtNavyLight: 'var(--navy-400-30)', - bgtxtNavyLighter: 'var(--navy-400-20)', - bgtxtNavyLightest: 'var(--navy-400-10)', - txtBlackPure: 'var(--black)', - txtBlackDarkest: 'var(--black-85)', - txtBlackDarker: 'var(--black-60)', - txtBlackDark: 'var(--black-40)', - txtWhiteNormal: 'var(--white)', - bgtxtAbsoluteBlackDark: 'var(--black)', - bgtxtAbsoluteBlackNormal: 'var(--black-85)', - bgtxtAbsoluteBlackLight: 'var(--black-60)', - bgtxtAbsoluteBlackLighter: 'var(--black-40)', - bgtxtAbsoluteBlackLightest: 'var(--black-20)', - bgtxtAbsoluteWhiteDark: 'var(--white)', - bgtxtAbsoluteWhiteNormal: 'var(--white-90)', - bgtxtAbsoluteWhiteLight: 'var(--white-60)', - bgtxtAbsoluteWhiteLighter: 'var(--white-40)', - bgtxtAbsoluteWhiteLightest: 'var(--white-20)', - bdrBlackDark: 'var(--black-15)', - bdrBlackLight: 'var(--black-8)', - bdrBlackLightest: 'var(--black-3)', - bdrGreyLight: 'var(--grey-200)', - bdrWhite: 'var(--white)', - shdwXlarge: 'var(--black-30)', - shdwLarge: 'var(--black-22)', - shdwMedium: 'var(--black-15)', - shdwSmall: 'var(--black-8)', - shdwBase: 'var(--black-5)', - shdwInnerBase: 'var(--white-12)', - invertedBgWhiteHigh: 'var(--grey-700)', - invertedBgWhiteNormal: 'var(--grey-900)', - invertedBgWhiteLow: 'var(--grey-800)', - invertedBgGnb: 'var(--grey-700-80)', - invertedBgNavi: 'var(--grey-800-80)', - invertedBgHeader: 'var(--grey-800)', - invertedBgHeaderFloat: 'var(--grey-800-80)', - invertedBgLounge: 'var(--grey-800-90)', - invertedBgBlackDarkest: 'var(--white-60)', - invertedBgBlackDarker: 'var(--white-40)', - invertedBgBlackDark: 'var(--white-20)', - invertedBgBlackLight: 'var(--white-12)', - invertedBgBlackLighter: 'var(--white-8)', - invertedBgBlackLightest: 'var(--white-5)', - invertedBgGreyDarkest: 'var(--white)', - invertedBgGreyDark: 'var(--grey-500)', - invertedBgGreyDimLightest: 'var(--grey-850-80)', - invertedBgGreyLight: 'var(--grey-700)', - invertedBgGreyLighter: 'var(--grey-800)', - invertedBgGreyLightest: 'var(--grey-850)', - invertedBgWhiteDimDark: 'var(--black-60)', - invertedBgWhiteDimLight: 'var(--black-20)', - invertedBgtxtBlueDark: 'var(--blue-400)', - invertedBgtxtBlueNormal: 'var(--blue-300)', - invertedBgtxtBlueLight: 'var(--blue-300-40)', - invertedBgtxtBlueLighter: 'var(--blue-300-30)', - invertedBgtxtBlueLightest: 'var(--blue-300-20)', - invertedBgtxtCobaltDark: 'var(--cobalt-400)', - invertedBgtxtCobaltNormal: 'var(--cobalt-300)', - invertedBgtxtCobaltLight: 'var(--cobalt-300-40)', - invertedBgtxtCobaltLighter: 'var(--cobalt-300-30)', - invertedBgtxtCobaltLightest: 'var(--cobalt-300-20)', - invertedBgtxtTealDark: 'var(--teal-400)', - invertedBgtxtTealNormal: 'var(--teal-300)', - invertedBgtxtTealLight: 'var(--teal-300-40)', - invertedBgtxtTealLighter: 'var(--teal-300-30)', - invertedBgtxtTealLightest: 'var(--teal-300-20)', - invertedBgtxtGreenDark: 'var(--green-400)', - invertedBgtxtGreenNormal: 'var(--green-300)', - invertedBgtxtGreenLight: 'var(--green-300-40)', - invertedBgtxtGreenLighter: 'var(--green-300-30)', - invertedBgtxtGreenLightest: 'var(--green-300-20)', - invertedBgtxtOliveDark: 'var(--olive-400)', - invertedBgtxtOliveNormal: 'var(--olive-300)', - invertedBgtxtOliveLight: 'var(--olive-300-40)', - invertedBgtxtOliveLighter: 'var(--olive-300-30)', - invertedBgtxtOliveLightest: 'var(--olive-300-20)', - invertedBgtxtYellowDark: 'var(--yellow-400)', - invertedBgtxtYellowNormal: 'var(--yellow-300)', - invertedBgtxtYellowLight: 'var(--yellow-300-40)', - invertedBgtxtYellowLighter: 'var(--yellow-300-30)', - invertedBgtxtYellowLightest: 'var(--yellow-300-20)', - invertedBgtxtOrangeDark: 'var(--orange-400)', - invertedBgtxtOrangeNormal: 'var(--orange-300)', - invertedBgtxtOrangeLight: 'var(--orange-300-40)', - invertedBgtxtOrangeLighter: 'var(--orange-300-30)', - invertedBgtxtOrangeLightest: 'var(--orange-300-20)', - invertedBgtxtRedDark: 'var(--red-400)', - invertedBgtxtRedNormal: 'var(--red-300)', - invertedBgtxtRedLight: 'var(--red-300-40)', - invertedBgtxtRedLighter: 'var(--red-300-30)', - invertedBgtxtRedLightest: 'var(--red-300-20)', - invertedBgtxtPinkDark: 'var(--pink-400)', - invertedBgtxtPinkNormal: 'var(--pink-300)', - invertedBgtxtPinkLight: 'var(--pink-300-40)', - invertedBgtxtPinkLighter: 'var(--pink-300-30)', - invertedBgtxtPinkLightest: 'var(--pink-300-20)', - invertedBgtxtPurpleDark: 'var(--purple-400)', - invertedBgtxtPurpleNormal: 'var(--purple-300)', - invertedBgtxtPurpleLight: 'var(--purple-300-40)', - invertedBgtxtPurpleLighter: 'var(--purple-300-30)', - invertedBgtxtPurpleLightest: 'var(--purple-300-20)', - invertedBgtxtNavyDark: 'var(--navy-400)', - invertedBgtxtNavyNormal: 'var(--navy-300)', - invertedBgtxtNavyLight: 'var(--navy-300-40)', - invertedBgtxtNavyLighter: 'var(--navy-300-30)', - invertedBgtxtNavyLightest: 'var(--navy-300-20)', - invertedTxtBlackPure: 'var(--white)', - invertedTxtBlackDarkest: 'var(--white-80)', - invertedTxtBlackDarker: 'var(--white-60)', - invertedTxtBlackDark: 'var(--white-40)', - invertedTxtWhiteNormal: 'var(--grey-900)', - invertedBgtxtAbsoluteBlackDark: 'var(--black)', - invertedBgtxtAbsoluteBlackNormal: 'var(--black-85)', - invertedBgtxtAbsoluteBlackLight: 'var(--black-60)', - invertedBgtxtAbsoluteBlackLighter: 'var(--black-40)', - invertedBgtxtAbsoluteBlackLightest: 'var(--black-20)', - invertedBgtxtAbsoluteWhiteDark: 'var(--white)', - invertedBgtxtAbsoluteWhiteNormal: 'var(--white-90)', - invertedBgtxtAbsoluteWhiteLight: 'var(--white-60)', - invertedBgtxtAbsoluteWhiteLighter: 'var(--white-40)', - invertedBgtxtAbsoluteWhiteLightest: 'var(--white-20)', - invertedBdrBlackDark: 'var(--white-20)', - invertedBdrBlackLight: 'var(--white-12)', - invertedBdrBlackLightest: 'var(--white-5)', - invertedBdrGreyLight: 'var(--grey-700)', - invertedBdrWhite: 'var(--grey-700)', - invertedShdwXlarge: 'var(--black-60)', - invertedShdwLarge: 'var(--black-40)', - invertedShdwMedium: 'var(--black-20)', - invertedShdwSmall: 'var(--black-15)', - invertedShdwBase: 'var(--black-8)', - invertedShdwInnerBase: 'var(--white-8)', -} as const From 60b5659826deacc2565aa4f7fc37357479130a89 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:09:03 +0900 Subject: [PATCH 15/18] feat(styles): apply bezier-tokens --- packages/bezier-react/src/styles/_tokens.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/bezier-react/src/styles/_tokens.scss diff --git a/packages/bezier-react/src/styles/_tokens.scss b/packages/bezier-react/src/styles/_tokens.scss new file mode 100644 index 0000000000..997a7ab6c5 --- /dev/null +++ b/packages/bezier-react/src/styles/_tokens.scss @@ -0,0 +1,3 @@ +@use "../../node_modules/@channel.io/bezier-tokens/dist/css/global.css"; +@use "../../node_modules/@channel.io/bezier-tokens/dist/css/light-theme.css"; +@use "../../node_modules/@channel.io/bezier-tokens/dist/css/dark-theme.css"; From 840d22671539659db82dced295c111ec095fda9b Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:16:19 +0900 Subject: [PATCH 16/18] style: rm unnecessary comments --- packages/bezier-react/src/styles/_reset.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/bezier-react/src/styles/_reset.scss b/packages/bezier-react/src/styles/_reset.scss index be9f836d11..01303bddff 100644 --- a/packages/bezier-react/src/styles/_reset.scss +++ b/packages/bezier-react/src/styles/_reset.scss @@ -1,4 +1,3 @@ -// NOTE: Specify it as a relative path inside the monorepo so that both storybook and rollup can reference it without any setup. @use "../../node_modules/the-new-css-reset/css/reset.css"; * { From 9e05d2fc9d2db7e0f0320e6d552eb8aeee1a470c Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:20:47 +0900 Subject: [PATCH 17/18] feat(styles): change the base layer to a higher priority than the token layer, and apply the token --- packages/bezier-react/src/styles/_base.scss | 12 +++++------- packages/bezier-react/src/styles/index.scss | 10 +++++----- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss index 0330153b73..986b49235a 100644 --- a/packages/bezier-react/src/styles/_base.scss +++ b/packages/bezier-react/src/styles/_base.scss @@ -1,16 +1,14 @@ -$system-fonts: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif; - html { font-size: 62.5%; // 10/16 = 0.625. Make REM calculations easier. - font-family: 'Inter', 'NotoSansKR', 'NotoSansJP', $system-fonts; + font-family: var(--font-family-sans-kr); +} - :lang(ja) { - font-family: 'Inter', 'NotoSansJP', 'NotoSansKR', $system-fonts; - } +:lang(ja) { + font-family: var(--font-family-sans-jp); } code { - font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; + font-family: var(--font-family-mono); } ::placeholder { diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss index 50e9899f9d..60d3de3654 100644 --- a/packages/bezier-react/src/styles/index.scss +++ b/packages/bezier-react/src/styles/index.scss @@ -1,19 +1,19 @@ @use 'sass:meta'; -@layer reset, base, tokens, components, utils; +@layer reset, tokens, base, components, utils; @layer reset { @include meta.load-css("reset") } -@layer base { - @include meta.load-css("base") -} - @layer tokens { @include meta.load-css("tokens") } +@layer base { + @include meta.load-css("base") +} + @layer utils { @include meta.load-css("utils") } From b1704098feb6ebadbf1d591a4388fcf9b13f691b Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 22 Nov 2023 11:40:51 +0900 Subject: [PATCH 18/18] chore(changeset): add changeset --- .changeset/silver-pets-hammer.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silver-pets-hammer.md diff --git a/.changeset/silver-pets-hammer.md b/.changeset/silver-pets-hammer.md new file mode 100644 index 0000000000..962b0f2ea4 --- /dev/null +++ b/.changeset/silver-pets-hammer.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": minor +--- + +Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector.