From 3cdc13e67794babd8f552fa0b0ad8fdb0283936e Mon Sep 17 00:00:00 2001 From: Ed Date: Fri, 7 Jul 2023 17:56:51 +0900 Subject: [PATCH 001/238] Set up deployment environment for 2.0.0 alpha version (#1474) --- .changeset/pre.json | 13 +++++++++++++ .github/workflows/chromatic.yml | 1 + .github/workflows/codeql-analysis.yml | 2 ++ .github/workflows/release.yml | 1 + 4 files changed, 17 insertions(+) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..0b0ddf486e --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,13 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "@channel.io/bezier-codemod": "0.2.1", + "bezier-figma-plugin": "0.3.9", + "@channel.io/bezier-icons": "0.4.0", + "@channel.io/bezier-react": "1.7.2", + "eslint-config-bezier": "0.0.1", + "tsconfig": "0.0.1" + }, + "changesets": [] +} diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index ccb4f1d283..b42d804c5e 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - alpha pull_request: types: [opened, reopened, synchronize] paths: diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index d5ac894395..41298aa666 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -15,9 +15,11 @@ on: push: branches: - main + - alpha pull_request: branches: - main + - alpha schedule: # ┌───────────── minute (0 - 59) # │ ┌───────────── hour (0 - 23) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 5c68272dc8..beee69f842 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - alpha jobs: release: From 731688d4c6498b7c8c0461e0c509288b775b3449 Mon Sep 17 00:00:00 2001 From: Ed Date: Tue, 11 Jul 2023 19:21:50 +0900 Subject: [PATCH 002/238] chore(changeset): update initial pkg versions of prerelease config (#1487) --- .changeset/pre.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 0b0ddf486e..6e553ad37b 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -3,9 +3,9 @@ "tag": "alpha", "initialVersions": { "@channel.io/bezier-codemod": "0.2.1", - "bezier-figma-plugin": "0.3.9", + "bezier-figma-plugin": "0.3.10", "@channel.io/bezier-icons": "0.4.0", - "@channel.io/bezier-react": "1.7.2", + "@channel.io/bezier-react": "1.8.0", "eslint-config-bezier": "0.0.1", "tsconfig": "0.0.1" }, From 13fba5e8734ae8e68bbda01442a8d7411c0bdbfb Mon Sep 17 00:00:00 2001 From: Ed Date: Tue, 11 Jul 2023 19:18:37 +0900 Subject: [PATCH 003/238] Implement layered structure of Sass-based styled-system (#1484) * feat(tokens): add core token * feat(tokens): change to mixin * feat(tokens): add semantic tokens * feat(tokens): merge tokens * chore(dev-deps): add sass * fix(tokens): change from underscore to hypen * feat(tokens): implement tokens layer structure * feat(styles): create styles dir and structure * feat(tokens): add bezier namspace to data attr * chore(dev-deps): add css reset * feat(styles): add reset and base layer * feat(styles): enhance monospace font stack * style(styles): change comment type to avoid including in css https://sass-lang.com/documentation/syntax/comments/ * feat(styles): add data attr selector to light theme semantic token * feat(styles): add utilities layer and todo comment --- packages/bezier-react/package.json | 2 + packages/bezier-react/src/styles/_base.scss | 18 ++ packages/bezier-react/src/styles/_reset.scss | 5 + packages/bezier-react/src/styles/index.scss | 16 ++ .../bezier-react/src/styles/tokens/_core.scss | 205 ++++++++++++++++++ .../src/styles/tokens/_index.scss | 15 ++ .../styles/tokens/semantic/_dark-theme.scss | 157 ++++++++++++++ .../src/styles/tokens/semantic/_index.scss | 2 + .../styles/tokens/semantic/_light-theme.scss | 158 ++++++++++++++ yarn.lock | 69 ++++-- 10 files changed, 627 insertions(+), 20 deletions(-) create mode 100644 packages/bezier-react/src/styles/_base.scss create mode 100644 packages/bezier-react/src/styles/_reset.scss create mode 100644 packages/bezier-react/src/styles/index.scss create mode 100644 packages/bezier-react/src/styles/tokens/_core.scss create mode 100644 packages/bezier-react/src/styles/tokens/_index.scss create mode 100644 packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss create mode 100644 packages/bezier-react/src/styles/tokens/semantic/_index.scss create mode 100644 packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index 403b116966..a270df12fb 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -109,7 +109,9 @@ "rollup": "^3.25.1", "rollup-plugin-node-externals": "^6.1.1", "rollup-plugin-visualizer": "^5.9.2", + "sass": "^1.63.6", "styled-components": "^5.3.11", + "the-new-css-reset": "^1.9.0", "ts-prune": "^0.10.3", "tsconfig": "workspace:*", "tsconfig-paths-webpack-plugin": "^4.0.1", diff --git a/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss new file mode 100644 index 0000000000..3ce7fa1e2f --- /dev/null +++ b/packages/bezier-react/src/styles/_base.scss @@ -0,0 +1,18 @@ +$system-fonts: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif; + +html { + font-family: 'Inter', 'NotoSansKR', 'NotoSansJP', $system-fonts; + + :lang(ja) { + font-family: 'Inter', 'NotoSansJP', 'NotoSansKR', $system-fonts; + } +} + +code { + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; +} + +::placeholder { + color: var(--fg-black-dark); + opacity: 1; +} diff --git a/packages/bezier-react/src/styles/_reset.scss b/packages/bezier-react/src/styles/_reset.scss new file mode 100644 index 0000000000..65d747e8f4 --- /dev/null +++ b/packages/bezier-react/src/styles/_reset.scss @@ -0,0 +1,5 @@ +@use "the-new-css-reset/css/reset.css"; + +* { + font-variant-ligatures: none; +} diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss new file mode 100644 index 0000000000..f9fcad8669 --- /dev/null +++ b/packages/bezier-react/src/styles/index.scss @@ -0,0 +1,16 @@ +@use 'sass:meta'; + +// TODO: components, utilities layers +@layer reset, base, tokens, components, utilities; + +@layer reset { + @include meta.load-css("reset") +} + +@layer base { + @include meta.load-css("base") +} + +@layer tokens { + @include meta.load-css("tokens") +} diff --git a/packages/bezier-react/src/styles/tokens/_core.scss b/packages/bezier-react/src/styles/tokens/_core.scss new file mode 100644 index 0000000000..a4f07c8051 --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/_core.scss @@ -0,0 +1,205 @@ +@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-100: 100%; + --radius-smooth-corners: 42%; + + --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); + + --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; + + --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); + + --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; + --grey-200: #EFEFF0; + --grey-500: #A7A7AA; + --grey-700: #464748; + --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); + + --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; + + --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; + + --letter-spacing-0: 0; + --letter-spacing-01: -0.1; + --letter-spacing-04: -0.4; + --letter-spacing-1: -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 new file mode 100644 index 0000000000..8c53c95c28 --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/_index.scss @@ -0,0 +1,15 @@ +@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 new file mode 100644 index 0000000000..7a5f209a82 --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss @@ -0,0 +1,157 @@ +// 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-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-grey-darkest: #FFFFFF; + --bg-grey-dark: #A7A7AA; + --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; + --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 */ +} diff --git a/packages/bezier-react/src/styles/tokens/semantic/_index.scss b/packages/bezier-react/src/styles/tokens/semantic/_index.scss new file mode 100644 index 0000000000..755ee791e4 --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/semantic/_index.scss @@ -0,0 +1,2 @@ +@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 new file mode 100644 index 0000000000..8e7e205ea0 --- /dev/null +++ b/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss @@ -0,0 +1,158 @@ +// 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-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-grey-darkest: #242428; + --bg-grey-dark: #A7A7AA; + --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; + --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 */ +} diff --git a/yarn.lock b/yarn.lock index 4aa3c19911..d8b157a57a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2999,8 +2999,10 @@ __metadata: rollup: ^3.25.1 rollup-plugin-node-externals: ^6.1.1 rollup-plugin-visualizer: ^5.9.2 + sass: ^1.63.6 ssr-window: ^4.0.2 styled-components: ^5.3.11 + the-new-css-reset: ^1.9.0 ts-prune: ^0.10.3 tsconfig: "workspace:*" tsconfig-paths-webpack-plugin: ^4.0.1 @@ -10227,6 +10229,25 @@ __metadata: languageName: node linkType: hard +"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2": + version: 3.5.3 + resolution: "chokidar@npm:3.5.3" + dependencies: + anymatch: ~3.1.2 + braces: ~3.0.2 + fsevents: ~2.3.2 + glob-parent: ~5.1.2 + is-binary-path: ~2.1.0 + is-glob: ~4.0.1 + normalize-path: ~3.0.0 + readdirp: ~3.6.0 + dependenciesMeta: + fsevents: + optional: true + checksum: b49fcde40176ba007ff361b198a2d35df60d9bb2a5aab228279eb810feae9294a6b4649ab15981304447afe1e6ffbf4788ad5db77235dc770ab777c6e771980c + languageName: node + linkType: hard + "chokidar@npm:^2.1.8": version: 2.1.8 resolution: "chokidar@npm:2.1.8" @@ -10250,25 +10271,6 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.4.1, chokidar@npm:^3.4.2": - version: 3.5.3 - resolution: "chokidar@npm:3.5.3" - dependencies: - anymatch: ~3.1.2 - braces: ~3.0.2 - fsevents: ~2.3.2 - glob-parent: ~5.1.2 - is-binary-path: ~2.1.0 - is-glob: ~4.0.1 - normalize-path: ~3.0.0 - readdirp: ~3.6.0 - dependenciesMeta: - fsevents: - optional: true - checksum: b49fcde40176ba007ff361b198a2d35df60d9bb2a5aab228279eb810feae9294a6b4649ab15981304447afe1e6ffbf4788ad5db77235dc770ab777c6e771980c - languageName: node - linkType: hard - "chownr@npm:^1.1.1": version: 1.1.4 resolution: "chownr@npm:1.1.4" @@ -14857,6 +14859,13 @@ __metadata: languageName: node linkType: hard +"immutable@npm:^4.0.0": + version: 4.3.0 + resolution: "immutable@npm:4.3.0" + checksum: bbd7ea99e2752e053323543d6ff1cc71a4b4614fa6121f321ca766db2bd2092f3f1e0a90784c5431350b7344a4f792fa002eac227062d59b9377b6c09063b58b + languageName: node + linkType: hard + "import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -21155,6 +21164,19 @@ __metadata: languageName: node linkType: hard +"sass@npm:^1.63.6": + version: 1.63.6 + resolution: "sass@npm:1.63.6" + dependencies: + chokidar: ">=3.0.0 <4.0.0" + immutable: ^4.0.0 + source-map-js: ">=0.6.2 <2.0.0" + bin: + sass: sass.js + checksum: 3372319904658eeafaf78a09a6fcb3368a68e6d76fe3c43c2d009f4f72e475ab22b82ef483ef5c00fcda3ab00066846c0bd88c36b42771b855f6ab80c7eda541 + languageName: node + linkType: hard + "saxes@npm:^6.0.0": version: 6.0.0 resolution: "saxes@npm:6.0.0" @@ -21692,7 +21714,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": version: 1.0.2 resolution: "source-map-js@npm:1.0.2" checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c @@ -22773,6 +22795,13 @@ __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 + languageName: node + linkType: hard + "throttle-debounce@npm:^3.0.1": version: 3.0.1 resolution: "throttle-debounce@npm:3.0.1" From 1eb7b1ac0b5e9428714cfae60602f64815ef3048 Mon Sep 17 00:00:00 2001 From: Ed Date: Thu, 13 Jul 2023 11:54:14 +0900 Subject: [PATCH 004/238] Set up SCSS module environment(ts, storybook) and change `Spinner` to classname-based styling (#1488) * chore(d.ts): add scss module declaration * style(eslint): add scss module pattern to eslint import order rule * test(story): sass environment setting * feat(spinner): change to classname-based styling * docs(component-props): deprecated interpolation prop * refactor(d.ts): change target module pattern * chore(storybook): delete mock style * refactor(spinner): rename component to element * chore(env): enhance to support CSS modules in TS * fix: delete unused ts interface * chore(styles): apply temporary relative path * style(storybook): apply tilde alias * fix(spinner): fix xl size * refactor(spinner): use mixin * test(spinner): rm test cases that don't work * test: update snapshot * test(spinner): enhance * test(spinner): add test case for forward ref * chore: change code owner * test(spinner): add test case for color prop --- .github/CODEOWNERS | 2 +- .vscode/settings.json | 9 +- package.json | 4 +- packages/bezier-react/.eslintrc.js | 2 +- packages/bezier-react/.storybook/main.js | 8 + packages/bezier-react/.storybook/preview.js | 2 + .../Button/__snapshots__/Button.test.tsx.snap | 18 +- .../components/Spinner/Spinner.module.scss | 60 + .../components/Spinner/Spinner.stories.tsx | 1 + .../src/components/Spinner/Spinner.styled.ts | 55 - .../src/components/Spinner/Spinner.test.tsx | 119 +- .../src/components/Spinner/Spinner.tsx | 24 +- .../src/components/Spinner/Spinner.types.ts | 15 +- packages/bezier-react/src/styles/_reset.scss | 3 +- .../bezier-react/src/types/ComponentProps.ts | 1 + .../src/types/declaration/custom.d.ts | 5 + packages/bezier-react/tsconfig.json | 3 +- yarn.lock | 1098 ++++++++++++++++- 18 files changed, 1220 insertions(+), 209 deletions(-) create mode 100644 packages/bezier-react/src/components/Spinner/Spinner.module.scss delete mode 100644 packages/bezier-react/src/components/Spinner/Spinner.styled.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a60e4bb53e..f5db5f19d9 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -35,7 +35,7 @@ /packages/bezier-react/src/components/Overlay/ @sungik-choi /packages/bezier-react/src/components/ProgressBar/ @Dogdriip /packages/bezier-react/src/components/SectionLabel/ @sungik-choi -/packages/bezier-react/src/components/Spinner/ @quino0627 +/packages/bezier-react/src/components/Spinner/ @sungik-choi /packages/bezier-react/src/components/Stack/ @sungik-choi /packages/bezier-react/src/components/Status/ @sungik-choi /packages/bezier-react/src/components/Tabs/ @sungik-choi diff --git a/.vscode/settings.json b/.vscode/settings.json index 90a3ad34e6..f10919822d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,8 @@ { - "eslint.workingDirectories": [{ "mode": "auto" }] -} \ No newline at end of file + "eslint.workingDirectories": [ + { + "mode": "auto" + } + ], + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/package.json b/package.json index c6c0b7393d..5265ab051e 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@channel.io/stylelint-config": "^1.2.0", "@commitlint/cli": "^17.6.5", "@commitlint/config-conventional": "^17.6.5", + "@storybook/addon-styling": "^1.3.2", "cz-conventional-changelog": "^3.3.0", "eslint": "^7.32.0", "eslint-config-bezier": "workspace:*", @@ -35,7 +36,8 @@ "stylelint": "^13.13.1", "ts-node": "^10.9.1", "turbo": "^1.10.3", - "typescript": "^4.9.5" + "typescript": "^4.9.5", + "typescript-plugin-css-modules": "^5.0.1" }, "engines": { "node": "18.15.0", diff --git a/packages/bezier-react/.eslintrc.js b/packages/bezier-react/.eslintrc.js index 15bc0b6359..88ad76be25 100644 --- a/packages/bezier-react/.eslintrc.js +++ b/packages/bezier-react/.eslintrc.js @@ -46,7 +46,7 @@ module.exports = { position: 'after', }, { - pattern: './**/*.styled', + pattern: './**/*.+(styled|scss)', group: 'sibling', position: 'after', }, diff --git a/packages/bezier-react/.storybook/main.js b/packages/bezier-react/.storybook/main.js index 22359f76a4..a91daa69fe 100644 --- a/packages/bezier-react/.storybook/main.js +++ b/packages/bezier-react/.storybook/main.js @@ -16,6 +16,14 @@ module.exports = { '@storybook/addon-toolbars', '@storybook/addon-docs', '@storybook/addon-backgrounds', + { + name: '@storybook/addon-styling', + options: { + sass: { + implementation: require('sass'), + }, + }, + }, ], features: { postcss: false, diff --git a/packages/bezier-react/.storybook/preview.js b/packages/bezier-react/.storybook/preview.js index 4d467d8ad6..be8bb4942b 100644 --- a/packages/bezier-react/.storybook/preview.js +++ b/packages/bezier-react/.storybook/preview.js @@ -12,6 +12,8 @@ import { import BezierProvider from '~/src/providers/BezierProvider' import { Text } from '~/src/components/Text' +import '~/src/styles/index.scss' + const FoundationKeyword = { Light: 'light', Dark: 'dark', diff --git a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap index 08768ae5ca..3011f1df9c 100644 --- a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -213,21 +213,6 @@ exports[`Button Test > Disabled Test > Button can have disabled attribute 1`] = `; exports[`Button Test > Loading Test > Active prop change Button to hover style 1`] = ` -.c5 { - display: inline-block; - width: 16px; - height: 16px; - border-style: solid; - border-width: 2px; - border-top-color: transparent; - border-right-color: inherit; - border-bottom-color: inherit; - border-left-color: inherit; - border-radius: 50%; - -webkit-animation: epmXAj 1s infinite linear; - animation: epmXAj 1s infinite linear; -} - .c2 { font-size: 1.4rem; line-height: 1.8rem; @@ -355,9 +340,8 @@ exports[`Button Test > Loading Test > Active prop change Button to hover style 1 class="c4" >
diff --git a/packages/bezier-react/src/components/Spinner/Spinner.module.scss b/packages/bezier-react/src/components/Spinner/Spinner.module.scss new file mode 100644 index 0000000000..b4d8db4c47 --- /dev/null +++ b/packages/bezier-react/src/components/Spinner/Spinner.module.scss @@ -0,0 +1,60 @@ +@mixin size($size) { + width: $size; + height: $size; +} + +@layer components { + @keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .Spinner { + --bezier-spinner-color: inherit; + + display: inline-block; + border-style: solid; + border-top-color: transparent; + border-right-color: var(--bezier-spinner-color); + border-bottom-color: var(--bezier-spinner-color); + border-left-color: var(--bezier-spinner-color); + border-radius: 50%; + animation: spin 1s linear infinite; + + &.xl { + @include size(50px); + border-width: 4px; + } + + &.l, + &.m { + border-width: 3px; + } + + &.l { + @include size(24px); + } + + &.m { + @include size(20px); + } + + &.s, + &.xs { + border-width: 2px; + } + + &.s { + @include size(16px); + } + + &.xs { + @include size(12px); + } + } +} diff --git a/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx b/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx index 38d7da61b6..b541811a35 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx @@ -36,4 +36,5 @@ const Template: Story = ({ ...args }) => export const Primary = Template.bind({}) Primary.args = { size: SpinnerSize.M, + color: 'bg-black-dark', } diff --git a/packages/bezier-react/src/components/Spinner/Spinner.styled.ts b/packages/bezier-react/src/components/Spinner/Spinner.styled.ts deleted file mode 100644 index 910d6bca41..0000000000 --- a/packages/bezier-react/src/components/Spinner/Spinner.styled.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { - css, - keyframes, - styled, -} from '~/src/foundation' - -import { - SpinnerSize, - SpinnerThickness, - type StyledSpinnerProps, -} from './Spinner.types' - -function getThicknessFromSize(size: SpinnerSize) { - switch (size) { - case SpinnerSize.XL: - return SpinnerThickness.Bold - case SpinnerSize.S: - case SpinnerSize.XS: - return SpinnerThickness.Light - case SpinnerSize.L: - case SpinnerSize.M: - default: - return SpinnerThickness.Normal - } -} - -const spinnerKeyframes = keyframes` - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -` - -const spinnerAnimation = () => css` - animation: ${spinnerKeyframes} 1s infinite linear; -` - -export const SpinIcon = styled.div` - display: inline-block; - width: ${({ size }) => size}px; - height: ${({ size }) => size}px; - border-style: solid; - border-width: ${({ size }) => getThicknessFromSize(size)}px; - border-top-color: transparent; - border-right-color: ${({ foundation, color }) => (color ? foundation?.theme?.[color] : 'inherit')}; - border-bottom-color: ${({ foundation, color }) => (color ? foundation?.theme?.[color] : 'inherit')}; - border-left-color: ${({ foundation, color }) => (color ? foundation?.theme?.[color] : 'inherit')}; - border-radius: 50%; - ${spinnerAnimation} - - ${({ interpolation }) => interpolation}; -` diff --git a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx index 63be75fde6..5f0900880d 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx @@ -1,102 +1,61 @@ import React from 'react' -import { LightFoundation } from '~/src/foundation' - import { render } from '~/src/utils/testUtils' import Spinner, { SPINNER_TEST_ID } from './Spinner' -import type SpinnerProps from './Spinner.types' import { SpinnerSize } from './Spinner.types' -describe('Spinner test >', () => { - let props: SpinnerProps - - beforeEach(() => { - props = {} - }) - - const renderSpinner = (optionProps?: SpinnerProps) => render( - , +describe('Spinner >', () => { + const renderSpinner = (props?: React.ComponentProps) => render( + , ) - it('Spinner has default style', () => { + it('should render', () => { const { getByTestId } = renderSpinner() const renderedSpinner = getByTestId(SPINNER_TEST_ID) - - expect(renderedSpinner).toHaveStyle('width: 20px;') - expect(renderedSpinner).toHaveStyle('height: 20px;') - expect(renderedSpinner).toHaveStyle('border-style: solid;') - expect(renderedSpinner).toHaveStyle('border-width: 3px;') - expect(renderedSpinner).toHaveStyle('border-radius: 50%;') + expect(renderedSpinner).toBeInTheDocument() }) - describe('Color >', () => { - it('Default color is inherited color', () => { - const { getByTestId } = renderSpinner() - const renderedSpinner = getByTestId(SPINNER_TEST_ID) - - expect(renderedSpinner).toHaveStyle('border-top-color: transparent;') - expect(renderedSpinner).toHaveStyle('border-right-color: inherit;') - expect(renderedSpinner).toHaveStyle('border-bottom-color: inherit;') - expect(renderedSpinner).toHaveStyle('border-left-color: inherit;') - }) - - it('Spinner received SemanticNames', () => { - const targetSemanticName = 'bgtxt-blue-normal' - const { getByTestId } = renderSpinner({ color: targetSemanticName }) - const renderedSpinner = getByTestId(SPINNER_TEST_ID) - - expect(renderedSpinner).toHaveStyle('border-top-color: transparent;') - expect(renderedSpinner).toHaveStyle(`border-right-color: ${LightFoundation.theme[targetSemanticName]};`) - expect(renderedSpinner).toHaveStyle(`border-bottom-color: ${LightFoundation.theme[targetSemanticName]};`) - expect(renderedSpinner).toHaveStyle(`border-left-color: ${LightFoundation.theme[targetSemanticName]};`) - }) + it('should render as a div by default', () => { + const { getByTestId } = renderSpinner() + const renderedSpinner = getByTestId(SPINNER_TEST_ID) + expect(renderedSpinner.tagName).toBe('DIV') }) - describe('Spinner Size >', () => { - it('Size XL', () => { - const { getByTestId } = renderSpinner({ size: SpinnerSize.XL }) - const xlSpinner = getByTestId(SPINNER_TEST_ID) - - expect(xlSpinner).toHaveStyle('width: 50px;') - expect(xlSpinner).toHaveStyle('height: 50px;') - expect(xlSpinner).toHaveStyle('border-width: 4px;') - }) - - it('Size L', () => { - const { getByTestId } = renderSpinner({ size: SpinnerSize.L }) - const lSpinner = getByTestId(SPINNER_TEST_ID) - - expect(lSpinner).toHaveStyle('width: 24px;') - expect(lSpinner).toHaveStyle('height: 24px;') - expect(lSpinner).toHaveStyle('border-width: 3px;') - }) - - it('Size M', () => { - const { getByTestId } = renderSpinner({ size: SpinnerSize.M }) - const mSpinner = getByTestId(SPINNER_TEST_ID) + it('should render as a different element depending on `as` prop', () => { + const { getByTestId } = renderSpinner({ as: 'span' }) + const renderedSpinner = getByTestId(SPINNER_TEST_ID) + expect(renderedSpinner.tagName).toBe('SPAN') + }) - expect(mSpinner).toHaveStyle('width: 20px;') - expect(mSpinner).toHaveStyle('height: 20px;') - expect(mSpinner).toHaveStyle('border-width: 3px;') - }) + it('should forward ref', () => { + const ref = React.createRef() + renderSpinner({ ref }) + expect(ref.current).toBeInTheDocument() + }) - it('Size S', () => { - const { getByTestId } = renderSpinner({ size: SpinnerSize.S }) - const sSpinner = getByTestId(SPINNER_TEST_ID) + it('should receive style', () => { + const { getByTestId } = renderSpinner({ style: { color: 'red' } }) + const renderedSpinner = getByTestId(SPINNER_TEST_ID) + expect(renderedSpinner).toHaveStyle('color: red') + }) - expect(sSpinner).toHaveStyle('width: 16px;') - expect(sSpinner).toHaveStyle('height: 16px;') - expect(sSpinner).toHaveStyle('border-width: 2px;') - }) + it('should receive class name', () => { + const { getByTestId } = renderSpinner({ className: 'test-class' }) + const renderedSpinner = getByTestId(SPINNER_TEST_ID) + expect(renderedSpinner).toHaveClass('test-class') + }) - it('Size XS', () => { - const { getByTestId } = renderSpinner({ size: SpinnerSize.XS }) - const xsSpinner = getByTestId(SPINNER_TEST_ID) + it('should recieve color', () => { + const color = 'bg-black-lighter' + const { getByTestId } = renderSpinner({ color }) + const renderedSpinner = getByTestId(SPINNER_TEST_ID) + expect(renderedSpinner).toHaveStyle(`--bezier-spinner-color: var(--${color})`) + }) - expect(xsSpinner).toHaveStyle('width: 12px;') - expect(xsSpinner).toHaveStyle('height: 12px;') - expect(xsSpinner).toHaveStyle('border-width: 2px;') - }) + it('should receive size', () => { + const { getByTestId } = renderSpinner({ size: SpinnerSize.M }) + const renderedSpinner = getByTestId(SPINNER_TEST_ID) + expect(renderedSpinner).toHaveClass(SpinnerSize.M) }) }) diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx index 32e516a26e..344105f152 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx @@ -1,31 +1,39 @@ import React, { forwardRef } from 'react' +import classNames from 'classnames' + import type SpinnerProps from './Spinner.types' import { SpinnerSize } from './Spinner.types' -import { SpinIcon } from './Spinner.styled' +import styles from './Spinner.module.scss' export const SPINNER_TEST_ID = 'bezier-react-spinner' const Spinner = forwardRef(function Spinner({ testId = SPINNER_TEST_ID, + as, style, className, - interpolation, size = SpinnerSize.M, color, ...rest }, forwardedRef) { + const Element = as || 'div' + return ( - ) diff --git a/packages/bezier-react/src/components/Spinner/Spinner.types.ts b/packages/bezier-react/src/components/Spinner/Spinner.types.ts index 320d3e6656..b4a09dacec 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.types.ts +++ b/packages/bezier-react/src/components/Spinner/Spinner.types.ts @@ -5,13 +5,14 @@ import { } from '~/src/types/ComponentProps' export enum SpinnerSize { - XL = 50, - L = 24, - M = 20, - S = 16, - XS = 12, + XL = 'xl', + L = 'l', + M = 'm', + S = 's', + XS = 'xs', } +/** @deprecated */ export enum SpinnerThickness { Bold = 4, Normal = 3, @@ -23,7 +24,3 @@ export default interface SpinnerProps extends SizeProps, ColorProps, Omit, 'color'> {} - -export interface StyledSpinnerProps extends SpinnerProps { - size: NonNullable -} diff --git a/packages/bezier-react/src/styles/_reset.scss b/packages/bezier-react/src/styles/_reset.scss index 65d747e8f4..64c3832885 100644 --- a/packages/bezier-react/src/styles/_reset.scss +++ b/packages/bezier-react/src/styles/_reset.scss @@ -1,4 +1,5 @@ -@use "the-new-css-reset/css/reset.css"; +// FIXME: Use absolute paths, change to resolve in bundler(rollup, webpack in storybook) +@use "../../node_modules/the-new-css-reset/css/reset.css"; * { font-variant-ligatures: none; diff --git a/packages/bezier-react/src/types/ComponentProps.ts b/packages/bezier-react/src/types/ComponentProps.ts index d84e5ca990..25cdb0a531 100644 --- a/packages/bezier-react/src/types/ComponentProps.ts +++ b/packages/bezier-react/src/types/ComponentProps.ts @@ -34,6 +34,7 @@ export interface StylableComponentProps { className?: string /** + * @deprecated * Customized style interpolation for this component. */ interpolation?: InjectedInterpolation diff --git a/packages/bezier-react/src/types/declaration/custom.d.ts b/packages/bezier-react/src/types/declaration/custom.d.ts index 79152e2bab..f86bb9a9ca 100644 --- a/packages/bezier-react/src/types/declaration/custom.d.ts +++ b/packages/bezier-react/src/types/declaration/custom.d.ts @@ -1,3 +1,8 @@ +declare module '*.module.scss' { + const classes: { [className: string]: string } + export default classes +} + declare module '*.svg' { import React = require('react') diff --git a/packages/bezier-react/tsconfig.json b/packages/bezier-react/tsconfig.json index b77db92c82..ce07cf1357 100644 --- a/packages/bezier-react/tsconfig.json +++ b/packages/bezier-react/tsconfig.json @@ -19,7 +19,8 @@ "baseUrl": ".", "paths": { "~/*": ["./*"] - } + }, + "plugins": [{ "name": "typescript-plugin-css-modules" }] }, "types": ["react", "jest"], "include": [ diff --git a/yarn.lock b/yarn.lock index d8b157a57a..b87b078426 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3406,6 +3406,169 @@ __metadata: languageName: node linkType: hard +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0": + version: 1.0.1 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" + peerDependencies: + react: ">=16.8.0" + checksum: 700b6e5bbb37a9231f203bb3af11295eed01d73b2293abece0bc2a2237015e944d7b5114d4887ad9a79776504aa51ed2a8b0ddbc117c54495dd01a6b22f93786 + languageName: node + linkType: hard + +"@esbuild/android-arm64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/android-arm64@npm:0.17.19" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/android-arm@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/android-arm@npm:0.17.19" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + +"@esbuild/android-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/android-x64@npm:0.17.19" + conditions: os=android & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/darwin-arm64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/darwin-arm64@npm:0.17.19" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/darwin-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/darwin-x64@npm:0.17.19" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/freebsd-arm64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/freebsd-arm64@npm:0.17.19" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/freebsd-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/freebsd-x64@npm:0.17.19" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/linux-arm64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-arm64@npm:0.17.19" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/linux-arm@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-arm@npm:0.17.19" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@esbuild/linux-ia32@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-ia32@npm:0.17.19" + conditions: os=linux & cpu=ia32 + languageName: node + linkType: hard + +"@esbuild/linux-loong64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-loong64@npm:0.17.19" + conditions: os=linux & cpu=loong64 + languageName: node + linkType: hard + +"@esbuild/linux-mips64el@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-mips64el@npm:0.17.19" + conditions: os=linux & cpu=mips64el + languageName: node + linkType: hard + +"@esbuild/linux-ppc64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-ppc64@npm:0.17.19" + conditions: os=linux & cpu=ppc64 + languageName: node + linkType: hard + +"@esbuild/linux-riscv64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-riscv64@npm:0.17.19" + conditions: os=linux & cpu=riscv64 + languageName: node + linkType: hard + +"@esbuild/linux-s390x@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-s390x@npm:0.17.19" + conditions: os=linux & cpu=s390x + languageName: node + linkType: hard + +"@esbuild/linux-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/linux-x64@npm:0.17.19" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/netbsd-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/netbsd-x64@npm:0.17.19" + conditions: os=netbsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/openbsd-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/openbsd-x64@npm:0.17.19" + conditions: os=openbsd & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/sunos-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/sunos-x64@npm:0.17.19" + conditions: os=sunos & cpu=x64 + languageName: node + linkType: hard + +"@esbuild/win32-arm64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/win32-arm64@npm:0.17.19" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@esbuild/win32-ia32@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/win32-ia32@npm:0.17.19" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@esbuild/win32-x64@npm:0.17.19": + version: 0.17.19 + resolution: "@esbuild/win32-x64@npm:0.17.19" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@eslint-community/eslint-utils@npm:^4.2.0": version: 4.3.0 resolution: "@eslint-community/eslint-utils@npm:4.3.0" @@ -3919,6 +4082,13 @@ __metadata: languageName: node linkType: hard +"@juggle/resize-observer@npm:^3.3.1": + version: 3.4.0 + resolution: "@juggle/resize-observer@npm:3.4.0" + checksum: 2505028c05cc2e17639fcad06218b1c4b60f932a4ebb4b41ab546ef8c157031ae377e3f560903801f6d01706dbefd4943b6c4704bf19ed86dfa1c62f1473a570 + languageName: node + linkType: hard + "@manypkg/find-root@npm:^1.1.0": version: 1.1.0 resolution: "@manypkg/find-root@npm:1.1.0" @@ -5580,6 +5750,41 @@ __metadata: languageName: node linkType: hard +"@storybook/addon-styling@npm:^1.3.2": + version: 1.3.2 + resolution: "@storybook/addon-styling@npm:1.3.2" + dependencies: + "@babel/template": ^7.20.7 + "@babel/types": ^7.21.5 + "@storybook/api": ^7.0.12 + "@storybook/components": ^7.0.12 + "@storybook/core-common": ^7.0.12 + "@storybook/core-events": ^7.0.12 + "@storybook/manager-api": ^7.0.12 + "@storybook/node-logger": ^7.0.12 + "@storybook/preview-api": ^7.0.12 + "@storybook/theming": ^7.0.12 + "@storybook/types": ^7.0.12 + css-loader: ^6.7.3 + less-loader: ^11.1.0 + postcss-loader: ^7.2.4 + resolve-url-loader: ^5.0.0 + sass-loader: ^13.2.2 + style-loader: ^3.3.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + bin: + addon-styling-setup: postinstall.js + checksum: d0e7db8cae396f5e602986b5154c535b3a6403380ec2c9968113ed39e583e3a06344cae19c014a34e8bbaa2d1d8bea123fea6e042998fee384390fed37883d90 + languageName: node + linkType: hard + "@storybook/addon-toolbars@npm:^6.5.16": version: 6.5.16 resolution: "@storybook/addon-toolbars@npm:6.5.16" @@ -5653,6 +5858,24 @@ __metadata: languageName: node linkType: hard +"@storybook/api@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/api@npm:7.0.26" + dependencies: + "@storybook/client-logger": 7.0.26 + "@storybook/manager-api": 7.0.26 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + checksum: d59e738f0d837af5179d32f264c187356243218e705f774dfa2102ed7204acaf3c536d0dbf1fcdbf49108704f069765ab68a17a4929a148e4f55678c813272cb + languageName: node + linkType: hard + "@storybook/builder-webpack4@npm:6.5.16": version: 6.5.16 resolution: "@storybook/builder-webpack4@npm:6.5.16" @@ -5781,6 +6004,20 @@ __metadata: languageName: node linkType: hard +"@storybook/channel-postmessage@npm:7.0.26": + version: 7.0.26 + resolution: "@storybook/channel-postmessage@npm:7.0.26" + dependencies: + "@storybook/channels": 7.0.26 + "@storybook/client-logger": 7.0.26 + "@storybook/core-events": 7.0.26 + "@storybook/global": ^5.0.0 + qs: ^6.10.0 + telejson: ^7.0.3 + checksum: bc050b3f9a5e700757a58d667315b00f6879fa0c036001a25028c44ba8e816d6cd14b841e5c3030b1e60f787f5eb05a43d59bdd26f7a1588991c3fa781fe86c1 + languageName: node + linkType: hard + "@storybook/channel-websocket@npm:6.5.16": version: 6.5.16 resolution: "@storybook/channel-websocket@npm:6.5.16" @@ -5805,6 +6042,13 @@ __metadata: languageName: node linkType: hard +"@storybook/channels@npm:7.0.26": + version: 7.0.26 + resolution: "@storybook/channels@npm:7.0.26" + checksum: 2b72a790e77804c652d79d1a6cea7db6f0c260c64471030855fea3b8a6b87a74cc3603255212a5715f8cdb4082953dcc62775674085fb42ce71bd7c7a183b996 + languageName: node + linkType: hard + "@storybook/client-api@npm:6.5.16": version: 6.5.16 resolution: "@storybook/client-api@npm:6.5.16" @@ -5846,6 +6090,15 @@ __metadata: languageName: node linkType: hard +"@storybook/client-logger@npm:7.0.26": + version: 7.0.26 + resolution: "@storybook/client-logger@npm:7.0.26" + dependencies: + "@storybook/global": ^5.0.0 + checksum: 80ad3f170922ade4556f5683b84afb9c0230f59af2dad3c7f2c8b3dd33eb15d170ea2b0edd0637548556590b86687ca397a10223af4f6334ce0026b8dc87dcae + languageName: node + linkType: hard + "@storybook/components@npm:6.5.16": version: 6.5.16 resolution: "@storybook/components@npm:6.5.16" @@ -5865,6 +6118,25 @@ __metadata: languageName: node linkType: hard +"@storybook/components@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/components@npm:7.0.26" + dependencies: + "@storybook/client-logger": 7.0.26 + "@storybook/csf": ^0.1.0 + "@storybook/global": ^5.0.0 + "@storybook/theming": 7.0.26 + "@storybook/types": 7.0.26 + memoizerific: ^1.11.3 + use-resize-observer: ^9.1.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 7e42daad24e9fd36c2a911de7473d6f777266fa8592fe706ebaacbc5da779357ce84312436142d584e6a57972927da0e4bda5a21d1c6ecd8344e5529c4c95175 + languageName: node + linkType: hard + "@storybook/core-client@npm:6.5.16": version: 6.5.16 resolution: "@storybook/core-client@npm:6.5.16" @@ -5964,6 +6236,35 @@ __metadata: languageName: node linkType: hard +"@storybook/core-common@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/core-common@npm:7.0.26" + dependencies: + "@storybook/node-logger": 7.0.26 + "@storybook/types": 7.0.26 + "@types/node": ^16.0.0 + "@types/node-fetch": ^2.6.4 + "@types/pretty-hrtime": ^1.0.0 + chalk: ^4.1.0 + esbuild: ^0.17.0 + esbuild-register: ^3.4.0 + file-system-cache: 2.3.0 + find-up: ^5.0.0 + fs-extra: ^11.1.0 + glob: ^8.1.0 + glob-promise: ^6.0.2 + handlebars: ^4.7.7 + lazy-universal-dotenv: ^4.0.0 + node-fetch: ^2.0.0 + picomatch: ^2.3.0 + pkg-dir: ^5.0.0 + pretty-hrtime: ^1.0.3 + resolve-from: ^5.0.0 + ts-dedent: ^2.0.0 + checksum: 43d110d591ea75907dacad8d02f5265bd31b829acc747eed5c84709c54e20db1568fec41b3696b37409bada916c699515339ac8353f2eaec227de5689bf0a0c4 + languageName: node + linkType: hard + "@storybook/core-events@npm:6.5.16": version: 6.5.16 resolution: "@storybook/core-events@npm:6.5.16" @@ -5973,6 +6274,13 @@ __metadata: languageName: node linkType: hard +"@storybook/core-events@npm:7.0.26, @storybook/core-events@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/core-events@npm:7.0.26" + checksum: 168029e6a882ab3d72ad4561707806f7b2cf261d35630d0cd7447f8c5e8cb0ea4d61df5fc51ad002ac61a3ce5f919ace8a600d7b11969cf37da3906e7efde0d6 + languageName: node + linkType: hard + "@storybook/core-server@npm:6.5.16": version: 6.5.16 resolution: "@storybook/core-server@npm:6.5.16" @@ -6102,6 +6410,15 @@ __metadata: languageName: node linkType: hard +"@storybook/csf@npm:^0.1.0": + version: 0.1.1 + resolution: "@storybook/csf@npm:0.1.1" + dependencies: + type-fest: ^2.19.0 + checksum: 1fbb827b50f0c15f21026a95d02cc096be4f9f2705ad8fd29f0a99330233606e69f6af7551d844ace2a4b8f08fcc9f81496d4d69160ba8c458698291efb60954 + languageName: node + linkType: hard + "@storybook/docs-tools@npm:6.5.16": version: 6.5.16 resolution: "@storybook/docs-tools@npm:6.5.16" @@ -6117,6 +6434,39 @@ __metadata: languageName: node linkType: hard +"@storybook/global@npm:^5.0.0": + version: 5.0.0 + resolution: "@storybook/global@npm:5.0.0" + checksum: ede0ad35ec411fe31c61150dbd118fef344d1d0e72bf5d3502368e35cf68126f6b7ae4a0ab5e2ffe2f0baa3b4286f03ad069ba3e098e1725449ef08b7e154ba8 + languageName: node + linkType: hard + +"@storybook/manager-api@npm:7.0.26, @storybook/manager-api@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/manager-api@npm:7.0.26" + dependencies: + "@storybook/channels": 7.0.26 + "@storybook/client-logger": 7.0.26 + "@storybook/core-events": 7.0.26 + "@storybook/csf": ^0.1.0 + "@storybook/global": ^5.0.0 + "@storybook/router": 7.0.26 + "@storybook/theming": 7.0.26 + "@storybook/types": 7.0.26 + dequal: ^2.0.2 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + semver: ^7.3.7 + store2: ^2.14.2 + telejson: ^7.0.3 + ts-dedent: ^2.0.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 98fd61b023efc3907eed1d29d4c60da7ae26edb516923eda9665b79642b8ab1f0f2c6243353422cb0aa45270c5f0db1e16cf3b32696e2506f52b71aee30a58be + languageName: node + linkType: hard + "@storybook/manager-webpack4@npm:6.5.16": version: 6.5.16 resolution: "@storybook/manager-webpack4@npm:6.5.16" @@ -6244,6 +6594,18 @@ __metadata: languageName: node linkType: hard +"@storybook/node-logger@npm:7.0.26, @storybook/node-logger@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/node-logger@npm:7.0.26" + dependencies: + "@types/npmlog": ^4.1.2 + chalk: ^4.1.0 + npmlog: ^5.0.1 + pretty-hrtime: ^1.0.3 + checksum: c448230516b148dfaa8914cc3059a7847b8f9ac30243ab98c74c3a2684debfc58ee0a3d7fbe06a77d582bf24690534ab44392dc35a8584ba1a22a3406c4b9a94 + languageName: node + linkType: hard + "@storybook/postinstall@npm:6.5.16": version: 6.5.16 resolution: "@storybook/postinstall@npm:6.5.16" @@ -6253,6 +6615,29 @@ __metadata: languageName: node linkType: hard +"@storybook/preview-api@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/preview-api@npm:7.0.26" + dependencies: + "@storybook/channel-postmessage": 7.0.26 + "@storybook/channels": 7.0.26 + "@storybook/client-logger": 7.0.26 + "@storybook/core-events": 7.0.26 + "@storybook/csf": ^0.1.0 + "@storybook/global": ^5.0.0 + "@storybook/types": 7.0.26 + "@types/qs": ^6.9.5 + dequal: ^2.0.2 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + qs: ^6.10.0 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + checksum: 137c3730e00b8ac1a75bbdffc2f80a5bd8ca3d27ea94d10a1f088a21ca6f4ccc85234e75d3d8f268ddbf1b97d2c53b59bab74cb553e1ebbdc4ce4892e6c354e0 + languageName: node + linkType: hard + "@storybook/preview-web@npm:6.5.16": version: 6.5.16 resolution: "@storybook/preview-web@npm:6.5.16" @@ -6379,6 +6764,20 @@ __metadata: languageName: node linkType: hard +"@storybook/router@npm:7.0.26": + version: 7.0.26 + resolution: "@storybook/router@npm:7.0.26" + dependencies: + "@storybook/client-logger": 7.0.26 + memoizerific: ^1.11.3 + qs: ^6.10.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 1bb84aabe3e63c4a53a26f7b0a2eb43507a4b2c156f6c538f9d24f800b9246a209b1cd64d62d0c79b7b88c42f66a15134ef0ff89b5fe3b209fa2943866482512 + languageName: node + linkType: hard + "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -6489,6 +6888,33 @@ __metadata: languageName: node linkType: hard +"@storybook/theming@npm:7.0.26, @storybook/theming@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/theming@npm:7.0.26" + dependencies: + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@storybook/client-logger": 7.0.26 + "@storybook/global": ^5.0.0 + memoizerific: ^1.11.3 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 2a77bbce441bcdf260e4662122bb7a1571830aae1c158f9eb39b4c4d83d2bfe44c1eda04da51df15a9a3fc4292884696c603e939ab07ab5420fcc36297b9428d + languageName: node + linkType: hard + +"@storybook/types@npm:7.0.26, @storybook/types@npm:^7.0.12": + version: 7.0.26 + resolution: "@storybook/types@npm:7.0.26" + dependencies: + "@storybook/channels": 7.0.26 + "@types/babel__core": ^7.0.0 + "@types/express": ^4.7.0 + file-system-cache: 2.3.0 + checksum: e5e28c353493b86120b72475ebe88853f62b64a3371e2ebcb16abca96096c1e3da5c8212a6daa4ff68d03b232099739c18e8c1abb9bc50dc08509fb227eec10c + languageName: node + linkType: hard + "@storybook/ui@npm:6.5.16": version: 6.5.16 resolution: "@storybook/ui@npm:6.5.16" @@ -6928,7 +7354,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.1.14": +"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14": version: 7.20.1 resolution: "@types/babel__core@npm:7.20.1" dependencies: @@ -6969,6 +7395,16 @@ __metadata: languageName: node linkType: hard +"@types/body-parser@npm:*": + version: 1.19.2 + resolution: "@types/body-parser@npm:1.19.2" + dependencies: + "@types/connect": "*" + "@types/node": "*" + checksum: e17840c7d747a549f00aebe72c89313d09fbc4b632b949b2470c5cb3b1cb73863901ae84d9335b567a79ec5efcfb8a28ff8e3f36bc8748a9686756b6d5681f40 + languageName: node + linkType: hard + "@types/btoa-lite@npm:^1.0.0": version: 1.0.0 resolution: "@types/btoa-lite@npm:1.0.0" @@ -6976,6 +7412,15 @@ __metadata: languageName: node linkType: hard +"@types/connect@npm:*": + version: 3.4.35 + resolution: "@types/connect@npm:3.4.35" + dependencies: + "@types/node": "*" + checksum: fe81351470f2d3165e8b12ce33542eef89ea893e36dd62e8f7d72566dfb7e448376ae962f9f3ea888547ce8b55a40020ca0e01d637fab5d99567673084542641 + languageName: node + linkType: hard + "@types/eslint-scope@npm:^3.7.3": version: 3.7.4 resolution: "@types/eslint-scope@npm:3.7.4" @@ -7017,6 +7462,30 @@ __metadata: languageName: node linkType: hard +"@types/express-serve-static-core@npm:^4.17.33": + version: 4.17.35 + resolution: "@types/express-serve-static-core@npm:4.17.35" + dependencies: + "@types/node": "*" + "@types/qs": "*" + "@types/range-parser": "*" + "@types/send": "*" + checksum: cc8995d10c6feda475ec1b3a0e69eb0f35f21ab6b49129ad5c6f279e0bc5de8175bc04ec51304cb79a43eec3ed2f5a1e01472eb6d5f827b8c35c6ca8ad24eb6e + languageName: node + linkType: hard + +"@types/express@npm:^4.7.0": + version: 4.17.17 + resolution: "@types/express@npm:4.17.17" + dependencies: + "@types/body-parser": "*" + "@types/express-serve-static-core": ^4.17.33 + "@types/qs": "*" + "@types/serve-static": "*" + checksum: 0196dacc275ac3ce89d7364885cb08e7fb61f53ca101f65886dbf1daf9b7eb05c0943e2e4bbd01b0cc5e50f37e0eea7e4cbe97d0304094411ac73e1b7998f4da + languageName: node + linkType: hard + "@types/glob@npm:*, @types/glob@npm:^7.1.1": version: 7.2.0 resolution: "@types/glob@npm:7.2.0" @@ -7027,6 +7496,16 @@ __metadata: languageName: node linkType: hard +"@types/glob@npm:^8.0.0": + version: 8.1.0 + resolution: "@types/glob@npm:8.1.0" + dependencies: + "@types/minimatch": ^5.1.2 + "@types/node": "*" + checksum: 9101f3a9061e40137190f70626aa0e202369b5ec4012c3fabe6f5d229cce04772db9a94fa5a0eb39655e2e4ad105c38afbb4af56a56c0996a8c7d4fc72350e3d + languageName: node + linkType: hard + "@types/graceful-fs@npm:^4.1.2": version: 4.1.5 resolution: "@types/graceful-fs@npm:4.1.5" @@ -7078,6 +7557,13 @@ __metadata: languageName: node linkType: hard +"@types/http-errors@npm:*": + version: 2.0.1 + resolution: "@types/http-errors@npm:2.0.1" + checksum: 3bb0c50b0a652e679a84c30cd0340d696c32ef6558518268c238840346c077f899315daaf1c26c09c57ddd5dc80510f2a7f46acd52bf949e339e35ed3ee9654f + languageName: node + linkType: hard + "@types/is-ci@npm:^3.0.0": version: 3.0.0 resolution: "@types/is-ci@npm:3.0.0" @@ -7179,6 +7665,20 @@ __metadata: languageName: node linkType: hard +"@types/mime@npm:*": + version: 3.0.1 + resolution: "@types/mime@npm:3.0.1" + checksum: 4040fac73fd0cea2460e29b348c1a6173da747f3a87da0dbce80dd7a9355a3d0e51d6d9a401654f3e5550620e3718b5a899b2ec1debf18424e298a2c605346e7 + languageName: node + linkType: hard + +"@types/mime@npm:^1": + version: 1.3.2 + resolution: "@types/mime@npm:1.3.2" + checksum: 0493368244cced1a69cb791b485a260a422e6fcc857782e1178d1e6f219f1b161793e9f87f5fae1b219af0f50bee24fcbe733a18b4be8fdd07a38a8fb91146fd + languageName: node + linkType: hard + "@types/minimatch@npm:*": version: 3.0.5 resolution: "@types/minimatch@npm:3.0.5" @@ -7186,6 +7686,13 @@ __metadata: languageName: node linkType: hard +"@types/minimatch@npm:^5.1.2": + version: 5.1.2 + resolution: "@types/minimatch@npm:5.1.2" + checksum: 0391a282860c7cb6fe262c12b99564732401bdaa5e395bee9ca323c312c1a0f45efbf34dce974682036e857db59a5c9b1da522f3d6055aeead7097264c8705a8 + languageName: node + linkType: hard + "@types/minimist@npm:^1.2.0, @types/minimist@npm:^1.2.2": version: 1.2.2 resolution: "@types/minimist@npm:1.2.2" @@ -7203,6 +7710,16 @@ __metadata: languageName: node linkType: hard +"@types/node-fetch@npm:^2.6.4": + version: 2.6.4 + resolution: "@types/node-fetch@npm:2.6.4" + dependencies: + "@types/node": "*" + form-data: ^3.0.0 + checksum: f3e1d881bb42269e676ecaf49f0e096ab345e22823a2b2d071d60619414817fe02df48a31a8d05adb23054028a2a65521bdb3906ceb763ab6d3339c8d8775058 + languageName: node + linkType: hard + "@types/node@npm:*, @types/node@npm:^20.3.1": version: 20.3.3 resolution: "@types/node@npm:20.3.3" @@ -7224,7 +7741,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0": +"@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0, @types/node@npm:^16.0.0": version: 16.18.38 resolution: "@types/node@npm:16.18.38" checksum: a3baa141e49ce94486f083eea1240cf38479a73ba663e1bf3f52f85b466125821b6e3ea85ded38fde3901530aca4601291395a50eefcea533a4f3b45171bda28 @@ -7259,6 +7776,24 @@ __metadata: languageName: node linkType: hard +"@types/postcss-modules-local-by-default@npm:^4.0.0": + version: 4.0.0 + resolution: "@types/postcss-modules-local-by-default@npm:4.0.0" + dependencies: + postcss: ^8.0.0 + checksum: 093a869240ddafc1b6946f3f6197c2de0ebd2f8ae3d5de7a6ec51aad5d6c8837a503496168f3d6230ddaa2bc4c815426a2353e8ddd88acae6bcb4a03477592d5 + languageName: node + linkType: hard + +"@types/postcss-modules-scope@npm:^3.0.1": + version: 3.0.1 + resolution: "@types/postcss-modules-scope@npm:3.0.1" + dependencies: + postcss: ^8.0.0 + checksum: 5c6359d885872bb8d92db8239283d9732c19311b378e56f9da2cfaa25aafa0a6b8b6997a6940c4505efdfeff251b5161ecb2e8e4e5d0bf3493ff09f99db25fc3 + languageName: node + linkType: hard + "@types/prettier@npm:^2.1.5": version: 2.7.2 resolution: "@types/prettier@npm:2.7.2" @@ -7280,13 +7815,20 @@ __metadata: languageName: node linkType: hard -"@types/qs@npm:^6.9.5": +"@types/qs@npm:*, @types/qs@npm:^6.9.5": version: 6.9.7 resolution: "@types/qs@npm:6.9.7" checksum: 7fd6f9c25053e9b5bb6bc9f9f76c1d89e6c04f7707a7ba0e44cc01f17ef5284adb82f230f542c2d5557d69407c9a40f0f3515e8319afd14e1e16b5543ac6cdba languageName: node linkType: hard +"@types/range-parser@npm:*": + version: 1.2.4 + resolution: "@types/range-parser@npm:1.2.4" + checksum: b7c0dfd5080a989d6c8bb0b6750fc0933d9acabeb476da6fe71d8bdf1ab65e37c136169d84148034802f48378ab94e3c37bb4ef7656b2bec2cb9c0f8d4146a95 + languageName: node + linkType: hard + "@types/react-dom@npm:^18.0.0": version: 18.0.5 resolution: "@types/react-dom@npm:18.0.5" @@ -7344,6 +7886,27 @@ __metadata: languageName: node linkType: hard +"@types/send@npm:*": + version: 0.17.1 + resolution: "@types/send@npm:0.17.1" + dependencies: + "@types/mime": ^1 + "@types/node": "*" + checksum: 10b620a5960058ef009afbc17686f680d6486277c62f640845381ec4baa0ea683fdd77c3afea4803daf5fcddd3fb2972c8aa32e078939f1d4e96f83195c89793 + languageName: node + linkType: hard + +"@types/serve-static@npm:*": + version: 1.15.2 + resolution: "@types/serve-static@npm:1.15.2" + dependencies: + "@types/http-errors": "*" + "@types/mime": "*" + "@types/node": "*" + checksum: 15c261dbfc57890f7cc17c04d5b22b418dfa0330c912b46c5d8ae2064da5d6f844ef7f41b63c7f4bbf07675e97ebe6ac804b032635ec742ae45d6f1274259b3e + languageName: node + linkType: hard + "@types/source-list-map@npm:*": version: 0.1.2 resolution: "@types/source-list-map@npm:0.1.2" @@ -8419,6 +8982,16 @@ __metadata: languageName: node linkType: hard +"adjust-sourcemap-loader@npm:^4.0.0": + version: 4.0.0 + resolution: "adjust-sourcemap-loader@npm:4.0.0" + dependencies: + loader-utils: ^2.0.0 + regex-parser: ^2.2.11 + checksum: d524ae23582f41e2275af5d88faab7a9dc09770ed588244e0a76d3196d0d6a90bf02760c71bc6213dbfef3aef4a86232ac9521bfd629752c32b7af37bc74c660 + languageName: node + linkType: hard + "agent-base@npm:6, agent-base@npm:^6.0.2": version: 6.0.2 resolution: "agent-base@npm:6.0.2" @@ -10901,6 +11474,15 @@ __metadata: languageName: node linkType: hard +"copy-anything@npm:^2.0.1": + version: 2.0.6 + resolution: "copy-anything@npm:2.0.6" + dependencies: + is-what: ^3.14.1 + checksum: 7318dc00ca14f846d14fc886845cff63bf20a3c5f4fcdd31f68c40a213648c78a1093426947ac0f8f8577845e9a7a11eeaaeefb05d9a6f1b78ca5ec60c2aaf6e + languageName: node + linkType: hard + "copy-concurrently@npm:^1.0.0": version: 1.0.5 resolution: "copy-concurrently@npm:1.0.5" @@ -11008,7 +11590,19 @@ __metadata: js-yaml: ^4.1.0 parse-json: ^5.0.0 path-type: ^4.0.0 - checksum: b3d277bc3a8a9e649bf4c3fc9740f4c52bf07387481302aa79839f595045368903bf26ea24a8f7f7b8b180bf46037b027c5cb63b1391ab099f3f78814a147b2b + checksum: b3d277bc3a8a9e649bf4c3fc9740f4c52bf07387481302aa79839f595045368903bf26ea24a8f7f7b8b180bf46037b027c5cb63b1391ab099f3f78814a147b2b + languageName: node + linkType: hard + +"cosmiconfig@npm:^8.2.0": + version: 8.2.0 + resolution: "cosmiconfig@npm:8.2.0" + dependencies: + import-fresh: ^3.2.1 + js-yaml: ^4.1.0 + parse-json: ^5.0.0 + path-type: ^4.0.0 + checksum: 836d5d8efa750f3fb17b03d6ca74cd3154ed025dffd045304b3ef59637f662bde1e5dc88f8830080d180ec60841719cf4ea2ce73fb21ec694b16865c478ff297 languageName: node linkType: hard @@ -11189,7 +11783,7 @@ __metadata: languageName: node linkType: hard -"css-loader@npm:^6.8.1": +"css-loader@npm:^6.7.3, css-loader@npm:^6.8.1": version: 6.8.1 resolution: "css-loader@npm:6.8.1" dependencies: @@ -11452,7 +12046,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.3, debug@npm:^4.3.4": +"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4": version: 4.3.4 resolution: "debug@npm:4.3.4" dependencies: @@ -11464,7 +12058,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:^3.0.0, debug@npm:^3.1.0, debug@npm:^3.2.7": +"debug@npm:^3.0.0, debug@npm:^3.1.0, debug@npm:^3.2.6, debug@npm:^3.2.7": version: 3.2.7 resolution: "debug@npm:3.2.7" dependencies: @@ -11678,6 +12272,13 @@ __metadata: languageName: node linkType: hard +"dequal@npm:^2.0.2": + version: 2.0.3 + resolution: "dequal@npm:2.0.3" + checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90 + languageName: node + linkType: hard + "des.js@npm:^1.0.0": version: 1.0.1 resolution: "des.js@npm:1.0.1" @@ -11998,6 +12599,13 @@ __metadata: languageName: node linkType: hard +"dotenv-expand@npm:^10.0.0": + version: 10.0.0 + resolution: "dotenv-expand@npm:10.0.0" + checksum: 2a38b470efe0abcb1ac8490421a55e1d764dc9440fd220942bce40965074f3fb00b585f4346020cb0f0f219966ee6b4ee5023458b3e2953fe5b3214de1b314ee + languageName: node + linkType: hard + "dotenv-expand@npm:^5.1.0": version: 5.1.0 resolution: "dotenv-expand@npm:5.1.0" @@ -12005,6 +12613,13 @@ __metadata: languageName: node linkType: hard +"dotenv@npm:^16.0.0, dotenv@npm:^16.0.3": + version: 16.3.1 + resolution: "dotenv@npm:16.3.1" + checksum: 15d75e7279018f4bafd0ee9706593dd14455ddb71b3bcba9c52574460b7ccaf67d5cf8b2c08a5af1a9da6db36c956a04a1192b101ee102a3e0cf8817bbcf3dfd + languageName: node + linkType: hard + "dotenv@npm:^8.0.0": version: 8.6.0 resolution: "dotenv@npm:8.6.0" @@ -12251,7 +12866,7 @@ __metadata: languageName: node linkType: hard -"errno@npm:^0.1.3, errno@npm:~0.1.7": +"errno@npm:^0.1.1, errno@npm:^0.1.3, errno@npm:~0.1.7": version: 0.1.8 resolution: "errno@npm:0.1.8" dependencies: @@ -12404,6 +13019,94 @@ __metadata: languageName: node linkType: hard +"esbuild-register@npm:^3.4.0": + version: 3.4.2 + resolution: "esbuild-register@npm:3.4.2" + dependencies: + debug: ^4.3.4 + peerDependencies: + esbuild: ">=0.12 <1" + checksum: f65d1ccb58b1ccbba376efb1fc023abe22731d9b79eead1b0120e57d4413318f063696257a5af637b527fa1d3f009095aa6edb1bf6ff69d637a9ab281fb727b3 + languageName: node + linkType: hard + +"esbuild@npm:^0.17.0": + version: 0.17.19 + resolution: "esbuild@npm:0.17.19" + dependencies: + "@esbuild/android-arm": 0.17.19 + "@esbuild/android-arm64": 0.17.19 + "@esbuild/android-x64": 0.17.19 + "@esbuild/darwin-arm64": 0.17.19 + "@esbuild/darwin-x64": 0.17.19 + "@esbuild/freebsd-arm64": 0.17.19 + "@esbuild/freebsd-x64": 0.17.19 + "@esbuild/linux-arm": 0.17.19 + "@esbuild/linux-arm64": 0.17.19 + "@esbuild/linux-ia32": 0.17.19 + "@esbuild/linux-loong64": 0.17.19 + "@esbuild/linux-mips64el": 0.17.19 + "@esbuild/linux-ppc64": 0.17.19 + "@esbuild/linux-riscv64": 0.17.19 + "@esbuild/linux-s390x": 0.17.19 + "@esbuild/linux-x64": 0.17.19 + "@esbuild/netbsd-x64": 0.17.19 + "@esbuild/openbsd-x64": 0.17.19 + "@esbuild/sunos-x64": 0.17.19 + "@esbuild/win32-arm64": 0.17.19 + "@esbuild/win32-ia32": 0.17.19 + "@esbuild/win32-x64": 0.17.19 + dependenciesMeta: + "@esbuild/android-arm": + optional: true + "@esbuild/android-arm64": + optional: true + "@esbuild/android-x64": + optional: true + "@esbuild/darwin-arm64": + optional: true + "@esbuild/darwin-x64": + optional: true + "@esbuild/freebsd-arm64": + optional: true + "@esbuild/freebsd-x64": + optional: true + "@esbuild/linux-arm": + optional: true + "@esbuild/linux-arm64": + optional: true + "@esbuild/linux-ia32": + optional: true + "@esbuild/linux-loong64": + optional: true + "@esbuild/linux-mips64el": + optional: true + "@esbuild/linux-ppc64": + optional: true + "@esbuild/linux-riscv64": + optional: true + "@esbuild/linux-s390x": + optional: true + "@esbuild/linux-x64": + optional: true + "@esbuild/netbsd-x64": + optional: true + "@esbuild/openbsd-x64": + optional: true + "@esbuild/sunos-x64": + optional: true + "@esbuild/win32-arm64": + optional: true + "@esbuild/win32-ia32": + optional: true + "@esbuild/win32-x64": + optional: true + bin: + esbuild: bin/esbuild + checksum: ac11b1a5a6008e4e37ccffbd6c2c054746fc58d0ed4a2f9ee643bd030cfcea9a33a235087bc777def8420f2eaafb3486e76adb7bdb7241a9143b43a69a10afd8 + languageName: node + linkType: hard + "escalade@npm:^3.1.1": version: 3.1.1 resolution: "escalade@npm:3.1.1" @@ -13291,6 +13994,16 @@ __metadata: languageName: node linkType: hard +"file-system-cache@npm:2.3.0": + version: 2.3.0 + resolution: "file-system-cache@npm:2.3.0" + dependencies: + fs-extra: 11.1.1 + ramda: 0.29.0 + checksum: 74afa2870a062500643d41e02d1fbd47a3f30100f9e153dec5233d59f05545f4c8ada6085629d624e043479ac28c0cafc31824f7b49a3f997efab8cc5d05bfee + languageName: node + linkType: hard + "file-system-cache@npm:^1.0.5": version: 1.1.0 resolution: "file-system-cache@npm:1.1.0" @@ -13632,6 +14345,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:11.1.1, fs-extra@npm:^11.0.0, fs-extra@npm:^11.1.0": + version: 11.1.1 + resolution: "fs-extra@npm:11.1.1" + dependencies: + graceful-fs: ^4.2.0 + jsonfile: ^6.0.1 + universalify: ^2.0.0 + checksum: fb883c68245b2d777fbc1f2082c9efb084eaa2bbf9fddaa366130d196c03608eebef7fb490541276429ee1ca99f317e2d73e96f5ca0999eefedf5a624ae1edfd + languageName: node + linkType: hard + "fs-extra@npm:8.1.0, fs-extra@npm:^8.1.0": version: 8.1.0 resolution: "fs-extra@npm:8.1.0" @@ -13654,17 +14378,6 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:^11.0.0": - version: 11.1.1 - resolution: "fs-extra@npm:11.1.1" - dependencies: - graceful-fs: ^4.2.0 - jsonfile: ^6.0.1 - universalify: ^2.0.0 - checksum: fb883c68245b2d777fbc1f2082c9efb084eaa2bbf9fddaa366130d196c03608eebef7fb490541276429ee1ca99f317e2d73e96f5ca0999eefedf5a624ae1edfd - languageName: node - linkType: hard - "fs-extra@npm:^7.0.1": version: 7.0.1 resolution: "fs-extra@npm:7.0.1" @@ -13986,6 +14699,17 @@ __metadata: languageName: node linkType: hard +"glob-promise@npm:^6.0.2": + version: 6.0.3 + resolution: "glob-promise@npm:6.0.3" + dependencies: + "@types/glob": ^8.0.0 + peerDependencies: + glob: ^8.0.3 + checksum: f8f2d3551445211af80f64f95883a6716e9a99cbb470be329d827e6c0ebc830e64a8c37f07150084217b5cf28b86a8a738c48d8c2664b591951235ded44d8595 + languageName: node + linkType: hard + "glob-to-regexp@npm:^0.3.0": version: 0.3.0 resolution: "glob-to-regexp@npm:0.3.0" @@ -14041,7 +14765,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^8.0.3": +"glob@npm:^8.0.3, glob@npm:^8.1.0": version: 8.1.0 resolution: "glob@npm:8.1.0" dependencies: @@ -14781,7 +15505,7 @@ __metadata: languageName: node linkType: hard -"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2": +"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3": version: 0.6.3 resolution: "iconv-lite@npm:0.6.3" dependencies: @@ -14852,6 +15576,15 @@ __metadata: languageName: node linkType: hard +"image-size@npm:~0.5.0": + version: 0.5.5 + resolution: "image-size@npm:0.5.5" + bin: + image-size: bin/image-size.js + checksum: 6709d5cb73e96d5097ae5e9aa746dd36d6a9c8cf645e7eecac72ea07dbd6f312a65183752762fa92e2f3b698d4ed8d85dd55bf5207b6367245996bd16576d8fe + languageName: node + linkType: hard + "immer@npm:^9.0.7": version: 9.0.15 resolution: "immer@npm:9.0.15" @@ -15740,6 +16473,13 @@ __metadata: languageName: node linkType: hard +"is-what@npm:^3.14.1": + version: 3.14.1 + resolution: "is-what@npm:3.14.1" + checksum: a9a6ce92d33799f1ae0916c7afb6f8128a23ce9d28bd69d9ec3ec88910e7a1f68432e6236c3c8a4d544cf0b864675e5d828437efde60ee0cf8102061d395c1df + languageName: node + linkType: hard + "is-whitespace-character@npm:^1.0.0": version: 1.0.4 resolution: "is-whitespace-character@npm:1.0.4" @@ -16482,6 +17222,15 @@ __metadata: languageName: node linkType: hard +"jiti@npm:^1.18.2": + version: 1.19.1 + resolution: "jiti@npm:1.19.1" + bin: + jiti: bin/jiti.js + checksum: fdf55e315f9e81c04ae902416642062851d92c6cdcc17a59d5d1d35e1a0842e4e79be38da86613c5776fa18c579954542a441b93d1c347a50137dee2e558cbd0 + languageName: node + linkType: hard + "js-string-escape@npm:^1.0.1": version: 1.0.1 resolution: "js-string-escape@npm:1.0.1" @@ -16825,6 +17574,62 @@ __metadata: languageName: node linkType: hard +"lazy-universal-dotenv@npm:^4.0.0": + version: 4.0.0 + resolution: "lazy-universal-dotenv@npm:4.0.0" + dependencies: + app-root-dir: ^1.0.2 + dotenv: ^16.0.0 + dotenv-expand: ^10.0.0 + checksum: 196e0d701100144fbfe078d604a477573413ebf38dfe8d543748605e6a7074978508a3bb9f8135acd319db4fa947eef78836497163617d15a22163c59a00996b + languageName: node + linkType: hard + +"less-loader@npm:^11.1.0": + version: 11.1.3 + resolution: "less-loader@npm:11.1.3" + peerDependencies: + less: ^3.5.0 || ^4.0.0 + webpack: ^5.0.0 + checksum: fe0de6b5ab930a4521d04555d9bd77723164bfa0f71eb5724d91c45090af544000e2d7f598cd83ec4e1445e6b943cc0c0dd1445fb2e83fd7c12f4ad3a0db05c5 + languageName: node + linkType: hard + +"less@npm:^4.1.3": + version: 4.1.3 + resolution: "less@npm:4.1.3" + dependencies: + copy-anything: ^2.0.1 + errno: ^0.1.1 + graceful-fs: ^4.1.2 + image-size: ~0.5.0 + make-dir: ^2.1.0 + mime: ^1.4.1 + needle: ^3.1.0 + parse-node-version: ^1.0.1 + source-map: ~0.6.0 + tslib: ^2.3.0 + dependenciesMeta: + errno: + optional: true + graceful-fs: + optional: true + image-size: + optional: true + make-dir: + optional: true + mime: + optional: true + needle: + optional: true + source-map: + optional: true + bin: + lessc: bin/lessc + checksum: 1470fbec993a375eb28d729cd906805fd62b7a7f1b4f5b4d62d04e81eaba987a9373e74aa0b9fa9191149ebc0bfb42e2ea98a038555555b7b241c10a854067cc + languageName: node + linkType: hard + "leven@npm:^3.1.0": version: 3.1.0 resolution: "leven@npm:3.1.0" @@ -16852,6 +17657,13 @@ __metadata: languageName: node linkType: hard +"lilconfig@npm:^2.0.5": + version: 2.1.0 + resolution: "lilconfig@npm:2.1.0" + checksum: 8549bb352b8192375fed4a74694cd61ad293904eee33f9d4866c2192865c44c4eb35d10782966242634e0cbc1e91fe62b1247f148dc5514918e3a966da7ea117 + languageName: node + linkType: hard + "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -17722,7 +18534,7 @@ __metadata: languageName: node linkType: hard -"mime@npm:1.6.0": +"mime@npm:1.6.0, mime@npm:^1.4.1": version: 1.6.0 resolution: "mime@npm:1.6.0" bin: @@ -18104,6 +18916,19 @@ __metadata: languageName: node linkType: hard +"needle@npm:^3.1.0": + version: 3.2.0 + resolution: "needle@npm:3.2.0" + dependencies: + debug: ^3.2.6 + iconv-lite: ^0.6.3 + sax: ^1.2.4 + bin: + needle: bin/needle + checksum: d6f3e8668bbaf943d28ced0ad843eff793b56025e80152e511fd02313b8974e4dd9674bcbe3d8f9aa31882adb190dafe29ea5fce03a92b4724adf4850070bcfc + languageName: node + linkType: hard + "negotiator@npm:0.6.3, negotiator@npm:^0.6.3": version: 0.6.3 resolution: "negotiator@npm:0.6.3" @@ -18151,6 +18976,20 @@ __metadata: languageName: node linkType: hard +"node-fetch@npm:^2.0.0": + version: 2.6.12 + resolution: "node-fetch@npm:2.6.12" + dependencies: + whatwg-url: ^5.0.0 + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + checksum: 3bc1655203d47ee8e313c0d96664b9673a3d4dd8002740318e9d27d14ef306693a4b2ef8d6525775056fd912a19e23f3ac0d7111ad8925877b7567b29a625592 + languageName: node + linkType: hard + "node-fetch@npm:^2.5.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7": version: 2.6.7 resolution: "node-fetch@npm:2.6.7" @@ -18917,6 +19756,13 @@ __metadata: languageName: node linkType: hard +"parse-node-version@npm:^1.0.1": + version: 1.0.1 + resolution: "parse-node-version@npm:1.0.1" + checksum: c192393b6a978092c1ef8df2c42c0a02e4534b96543e23d335f1b9b5b913ac75473d18fe6050b58d6995c57fb383ee71a5cb8397e363caaf38a6df8215cc52fd + languageName: node + linkType: hard + "parse-passwd@npm:^1.0.0": version: 1.0.0 resolution: "parse-passwd@npm:1.0.0" @@ -19310,6 +20156,24 @@ __metadata: languageName: node linkType: hard +"postcss-load-config@npm:^3.1.4": + version: 3.1.4 + resolution: "postcss-load-config@npm:3.1.4" + dependencies: + lilconfig: ^2.0.5 + yaml: ^1.10.2 + peerDependencies: + postcss: ">=8.0.9" + ts-node: ">=9.0.0" + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + checksum: 1c589504c2d90b1568aecae8238ab993c17dba2c44f848a8f13619ba556d26a1c09644d5e6361b5784e721e94af37b604992f9f3dc0483e687a0cc1cc5029a34 + languageName: node + linkType: hard + "postcss-loader@npm:^4.2.0": version: 4.3.0 resolution: "postcss-loader@npm:4.3.0" @@ -19326,6 +20190,20 @@ __metadata: languageName: node linkType: hard +"postcss-loader@npm:^7.2.4": + version: 7.3.3 + resolution: "postcss-loader@npm:7.3.3" + dependencies: + cosmiconfig: ^8.2.0 + jiti: ^1.18.2 + semver: ^7.3.8 + peerDependencies: + postcss: ^7.0.0 || ^8.0.1 + webpack: ^5.0.0 + checksum: c724044d6ae56334535c26bb4efc9c151431d44d60bc8300157c760747281a242757d8dab32db72738434531175b38a408cb0b270bb96207c07584dcfcd899ff + languageName: node + linkType: hard + "postcss-media-query-parser@npm:^0.2.3": version: 0.2.3 resolution: "postcss-media-query-parser@npm:0.2.3" @@ -19522,6 +20400,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.0.0, postcss@npm:^8.2.14": + version: 8.4.25 + resolution: "postcss@npm:8.4.25" + dependencies: + nanoid: ^3.3.6 + picocolors: ^1.0.0 + source-map-js: ^1.0.2 + checksum: 9ed3ab8af43ad5210c28f56f916fd9b8c9f94fbeaebbf645dcf579bc28bdd8056c2a7ecc934668d399b81fedb6128f0c4b299f931e50454964bc911c25a3a0a2 + languageName: node + linkType: hard + "postcss@npm:^8.2.15": version: 8.4.19 resolution: "postcss@npm:8.4.19" @@ -19922,6 +20811,13 @@ __metadata: languageName: node linkType: hard +"ramda@npm:0.29.0": + version: 0.29.0 + resolution: "ramda@npm:0.29.0" + checksum: 9ab26c06eb7545cbb7eebcf75526d6ee2fcaae19e338f165b2bf32772121e7b28192d6664d1ba222ff76188ba26ab307342d66e805dbb02c860560adc4d5dd57 + languageName: node + linkType: hard + "ramda@npm:^0.28.0": version: 0.28.0 resolution: "ramda@npm:0.28.0" @@ -20503,6 +21399,13 @@ __metadata: languageName: node linkType: hard +"regex-parser@npm:^2.2.11": + version: 2.2.11 + resolution: "regex-parser@npm:2.2.11" + checksum: 78200331ec0cc372302d287a4946c38681eb5fe435453fca572cb53cac0ba579e5eb3b9e25eac24c0c80a555fb3ea7a637814a35da1e9bc88e8819110ae5de24 + languageName: node + linkType: hard + "regexp.prototype.flags@npm:^1.4.3": version: 1.4.3 resolution: "regexp.prototype.flags@npm:1.4.3" @@ -20785,6 +21688,13 @@ __metadata: languageName: node linkType: hard +"reserved-words@npm:^0.1.2": + version: 0.1.2 + resolution: "reserved-words@npm:0.1.2" + checksum: 72e80f71dcde1e2d697e102473ad6d597e1659118836092c63cc4db68a64857f07f509176d239c8675b24f7f03574336bf202a780cc1adb39574e2884d1fd1fa + languageName: node + linkType: hard + "resolve-cwd@npm:^3.0.0": version: 3.0.0 resolution: "resolve-cwd@npm:3.0.0" @@ -20827,6 +21737,19 @@ __metadata: languageName: node linkType: hard +"resolve-url-loader@npm:^5.0.0": + version: 5.0.0 + resolution: "resolve-url-loader@npm:5.0.0" + dependencies: + adjust-sourcemap-loader: ^4.0.0 + convert-source-map: ^1.7.0 + loader-utils: ^2.0.0 + postcss: ^8.2.14 + source-map: 0.6.1 + checksum: 6d483733a4c26f75ce930a61943113bf730b5ba33a7186791cf1ae9c2ca02c3e94610bc6484ca008a372ee9e31750eccea74856a89daf1a29b8437ff564d27f2 + languageName: node + linkType: hard + "resolve-url@npm:^0.2.1": version: 0.2.1 resolution: "resolve-url@npm:0.2.1" @@ -21044,6 +21967,7 @@ __metadata: "@channel.io/stylelint-config": ^1.2.0 "@commitlint/cli": ^17.6.5 "@commitlint/config-conventional": ^17.6.5 + "@storybook/addon-styling": ^1.3.2 cz-conventional-changelog: ^3.3.0 eslint: ^7.32.0 eslint-config-bezier: "workspace:*" @@ -21053,6 +21977,7 @@ __metadata: ts-node: ^10.9.1 turbo: ^1.10.3 typescript: ^4.9.5 + typescript-plugin-css-modules: ^5.0.1 languageName: unknown linkType: soft @@ -21164,7 +22089,31 @@ __metadata: languageName: node linkType: hard -"sass@npm:^1.63.6": +"sass-loader@npm:^13.2.2": + version: 13.3.2 + resolution: "sass-loader@npm:13.3.2" + dependencies: + neo-async: ^2.6.2 + peerDependencies: + fibers: ">= 3.1.0" + node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 + sass: ^1.3.0 + sass-embedded: "*" + webpack: ^5.0.0 + peerDependenciesMeta: + fibers: + optional: true + node-sass: + optional: true + sass: + optional: true + sass-embedded: + optional: true + checksum: 7394a8d1b818a289b9caabd979543c907b83e28ae08bc80ccb836e0ccabc4ae574c077ab2fa520ba5fb8abb2ec3e7c9822a1cbd8c58a28ff30018be9d1dc6c27 + languageName: node + linkType: hard + +"sass@npm:^1.58.3, sass@npm:^1.63.6": version: 1.63.6 resolution: "sass@npm:1.63.6" dependencies: @@ -21177,6 +22126,13 @@ __metadata: languageName: node linkType: hard +"sax@npm:^1.2.4, sax@npm:~1.2.4": + version: 1.2.4 + resolution: "sax@npm:1.2.4" + checksum: d3df7d32b897a2c2f28e941f732c71ba90e27c24f62ee918bd4d9a8cfb3553f2f81e5493c7f0be94a11c1911b643a9108f231dd6f60df3fa9586b5d2e3e9e1fe + languageName: node + linkType: hard + "saxes@npm:^6.0.0": version: 6.0.0 resolution: "saxes@npm:6.0.0" @@ -21761,6 +22717,13 @@ __metadata: languageName: node linkType: hard +"source-map@npm:0.6.1, source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": + version: 0.6.1 + resolution: "source-map@npm:0.6.1" + checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2 + languageName: node + linkType: hard + "source-map@npm:^0.5.0, source-map@npm:^0.5.6": version: 0.5.7 resolution: "source-map@npm:0.5.7" @@ -21768,13 +22731,6 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": - version: 0.6.1 - resolution: "source-map@npm:0.6.1" - checksum: 59ce8640cf3f3124f64ac289012c2b8bd377c238e316fb323ea22fbfe83da07d81e000071d7242cad7a23cd91c7de98e4df8830ec3f133cb6133a5f6e9f67bc2 - languageName: node - linkType: hard - "source-map@npm:^0.7.3, source-map@npm:^0.7.4": version: 0.7.4 resolution: "source-map@npm:0.7.4" @@ -21964,6 +22920,13 @@ __metadata: languageName: node linkType: hard +"store2@npm:^2.14.2": + version: 2.14.2 + resolution: "store2@npm:2.14.2" + checksum: 6f270fc5bab99b63f45fcc7bd8b99c2714b4adf880f557ed7ffb5ed3987131251165bccde425a00928aaf044870aee79ddeef548576d093c68703ed2edec45d7 + languageName: node + linkType: hard + "stream-browserify@npm:^2.0.1": version: 2.0.2 resolution: "stream-browserify@npm:2.0.2" @@ -22282,7 +23245,7 @@ __metadata: languageName: node linkType: hard -"style-loader@npm:^3.3.3": +"style-loader@npm:^3.3.2, style-loader@npm:^3.3.3": version: 3.3.3 resolution: "style-loader@npm:3.3.3" peerDependencies: @@ -22450,6 +23413,21 @@ __metadata: languageName: node linkType: hard +"stylus@npm:^0.59.0": + version: 0.59.0 + resolution: "stylus@npm:0.59.0" + dependencies: + "@adobe/css-tools": ^4.0.1 + debug: ^4.3.2 + glob: ^7.1.6 + sax: ~1.2.4 + source-map: ^0.7.3 + bin: + stylus: bin/stylus + checksum: 2faf4a5618747c17b7d10854e40efdd43b438a6cf99d197b0231578f5091bfe9313663d846b5666bb37140140420c51606bb127fd877bbf2db46730c01403b01 + languageName: node + linkType: hard + "sugarss@npm:^2.0.0": version: 2.0.0 resolution: "sugarss@npm:2.0.0" @@ -22626,6 +23604,15 @@ __metadata: languageName: node linkType: hard +"telejson@npm:^7.0.3": + version: 7.1.0 + resolution: "telejson@npm:7.1.0" + dependencies: + memoizerific: ^1.11.3 + checksum: 8000e43dc862a87ab1ca342a2635641923d55c2585f85ea8c7c60293681d6f920e8b9570cc12d90ecef286f065c176da5f769f42f4828ba18a626627bed1ac07 + languageName: node + linkType: hard + "term-size@npm:^2.1.0": version: 2.2.1 resolution: "term-size@npm:2.2.1" @@ -23243,6 +24230,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.3.0": + version: 2.6.0 + resolution: "tslib@npm:2.6.0" + checksum: c01066038f950016a18106ddeca4649b4d76caa76ec5a31e2a26e10586a59fceb4ee45e96719bf6c715648e7c14085a81fee5c62f7e9ebee68e77a5396e5538f + languageName: node + linkType: hard + "tsutils@npm:^3.21.0": version: 3.21.0 resolution: "tsutils@npm:3.21.0" @@ -23438,7 +24432,7 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^2.0.0, type-fest@npm:^2.13.0, type-fest@npm:^2.5.0": +"type-fest@npm:^2.0.0, type-fest@npm:^2.13.0, type-fest@npm:^2.19.0, type-fest@npm:^2.5.0": version: 2.19.0 resolution: "type-fest@npm:2.19.0" checksum: a4ef07ece297c9fba78fc1bd6d85dff4472fe043ede98bd4710d2615d15776902b595abf62bd78339ed6278f021235fb28a96361f8be86ed754f778973a0d278 @@ -23496,6 +24490,32 @@ __metadata: languageName: node linkType: hard +"typescript-plugin-css-modules@npm:^5.0.1": + version: 5.0.1 + resolution: "typescript-plugin-css-modules@npm:5.0.1" + dependencies: + "@types/postcss-modules-local-by-default": ^4.0.0 + "@types/postcss-modules-scope": ^3.0.1 + dotenv: ^16.0.3 + icss-utils: ^5.1.0 + less: ^4.1.3 + lodash.camelcase: ^4.3.0 + postcss: ^8.4.21 + postcss-load-config: ^3.1.4 + postcss-modules-extract-imports: ^3.0.0 + postcss-modules-local-by-default: ^4.0.0 + postcss-modules-scope: ^3.0.0 + reserved-words: ^0.1.2 + sass: ^1.58.3 + source-map-js: ^1.0.2 + stylus: ^0.59.0 + tsconfig-paths: ^4.1.2 + peerDependencies: + typescript: ">=4.0.0" + checksum: 5d6d6003c97ce821904981273f9d6e9c1bb27b1b712b187fd17255eb27634a9dfe0a5e961b5dad3d1274c90161439736b65b605fd55c22d88907275a8abda9c8 + languageName: node + linkType: hard + "typescript-transform-paths@npm:^3.4.6": version: 3.4.6 resolution: "typescript-transform-paths@npm:3.4.6" @@ -23968,6 +24988,18 @@ __metadata: languageName: node linkType: hard +"use-resize-observer@npm:^9.1.0": + version: 9.1.0 + resolution: "use-resize-observer@npm:9.1.0" + dependencies: + "@juggle/resize-observer": ^3.3.1 + peerDependencies: + react: 16.8.0 - 18 + react-dom: 16.8.0 - 18 + checksum: 92be0ac34a3b3cf884cd55847c90792b5b44833dc258e96d650152815ad246afe45825aa223332203004d836535a927ab74f18dc0313229e2c7c69510eddf382 + languageName: node + linkType: hard + "use-sidecar@npm:^1.1.2": version: 1.1.2 resolution: "use-sidecar@npm:1.1.2" @@ -24839,7 +25871,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^1.10.0, yaml@npm:^1.7.2": +"yaml@npm:^1.10.0, yaml@npm:^1.10.2, yaml@npm:^1.7.2": version: 1.10.2 resolution: "yaml@npm:1.10.2" checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f From 75722d3acc41ddd58b05509981a31daf8141bd04 Mon Sep 17 00:00:00 2001 From: Ed Date: Thu, 13 Jul 2023 12:02:13 +0900 Subject: [PATCH 005/238] Set up rollup and package json for SCSS (#1491) * feat(styles): add rollup-postcss-plugin and set up build config * chore(pkg): add css files to side effects and sub path module * chore(changeset): add changeset * build(rollup): add custom generate scoped name string --- .changeset/tall-maps-lick.md | 5 + packages/bezier-react/package.json | 11 +- packages/bezier-react/rollup.config.mjs | 13 + packages/bezier-react/src/index.ts | 2 + packages/bezier-react/src/styles/_reset.scss | 2 +- yarn.lock | 675 ++++++++++++++++++- 6 files changed, 686 insertions(+), 22 deletions(-) create mode 100644 .changeset/tall-maps-lick.md diff --git a/.changeset/tall-maps-lick.md b/.changeset/tall-maps-lick.md new file mode 100644 index 0000000000..9056b21719 --- /dev/null +++ b/.changeset/tall-maps-lick.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": major +--- + +Export the css style sheet for the new design system. diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index a270df12fb..ea590919ff 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -15,9 +15,16 @@ "types": "./dist/types/index.d.ts", "require": "./dist/cjs/index.js", "import": "./dist/esm/index.mjs" + }, + "./style.css": { + "require": "./dist/cjs/style.css", + "import": "./dist/esm/style.css" } }, - "sideEffects": false, + "sideEffects": [ + "**/*.css", + "**/*.scss" + ], "files": [ "dist", "!dist/*.tsbuildinfo", @@ -92,6 +99,7 @@ "@types/react-dom": "^18.2.6", "@types/styled-components": "^5.1.26", "@types/uuid": "^9.0.2", + "autoprefixer": "^10.4.14", "babel-loader": "^9.1.2", "babel-plugin-styled-components": "^2.1.3", "babel-preset-react-app": "^10.0.1", @@ -108,6 +116,7 @@ "react-dom": "^18.2.0", "rollup": "^3.25.1", "rollup-plugin-node-externals": "^6.1.1", + "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-visualizer": "^5.9.2", "sass": "^1.63.6", "styled-components": "^5.3.11", diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs index a67d536c1f..bda687db64 100644 --- a/packages/bezier-react/rollup.config.mjs +++ b/packages/bezier-react/rollup.config.mjs @@ -8,8 +8,10 @@ import babel from '@rollup/plugin-babel' import commonjs from '@rollup/plugin-commonjs' import { nodeResolve } from '@rollup/plugin-node-resolve' import url from '@rollup/plugin-url' +import autoprefixer from 'autoprefixer' import { defineConfig } from 'rollup' import nodeExternals from 'rollup-plugin-node-externals' +import postcss from 'rollup-plugin-postcss' import { visualizer } from 'rollup-plugin-visualizer' const pkg = JSON.parse( @@ -33,6 +35,17 @@ const generateConfig = ({ replacement: rootDir, }], }), + postcss({ + extract: 'style.css', + autoModules: true, + modules: { + /** + * ex. Bezier-Button__Button__1w3e4 + */ + generateScopedName: 'Bezier-[folder]__[local]__[hash:base64:5]', + }, + plugins: [autoprefixer()], + }), /** * **IMPORTANT**: Order matters! * If you're also using @rollup/plugin-node-resolve, make sure this plugin comes before it in the plugins array diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts index de8b4649aa..d121364aca 100644 --- a/packages/bezier-react/src/index.ts +++ b/packages/bezier-react/src/index.ts @@ -1,3 +1,5 @@ +import '~/src/styles/index.scss' + /* Provider */ export { default as BezierProvider } from '~/src/providers/BezierProvider' diff --git a/packages/bezier-react/src/styles/_reset.scss b/packages/bezier-react/src/styles/_reset.scss index 64c3832885..be9f836d11 100644 --- a/packages/bezier-react/src/styles/_reset.scss +++ b/packages/bezier-react/src/styles/_reset.scss @@ -1,4 +1,4 @@ -// FIXME: Use absolute paths, change to resolve in bundler(rollup, webpack in storybook) +// 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"; * { diff --git a/yarn.lock b/yarn.lock index b87b078426..0c1c70d75d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2979,6 +2979,7 @@ __metadata: "@types/react-dom": ^18.2.6 "@types/styled-components": ^5.1.26 "@types/uuid": ^9.0.2 + autoprefixer: ^10.4.14 babel-loader: ^9.1.2 babel-plugin-styled-components: ^2.1.3 babel-preset-react-app: ^10.0.1 @@ -2998,6 +2999,7 @@ __metadata: react-textarea-autosize: ^8.4.1 rollup: ^3.25.1 rollup-plugin-node-externals: ^6.1.1 + rollup-plugin-postcss: ^4.0.2 rollup-plugin-visualizer: ^5.9.2 sass: ^1.63.6 ssr-window: ^4.0.2 @@ -9622,6 +9624,24 @@ __metadata: languageName: node linkType: hard +"autoprefixer@npm:^10.4.14": + version: 10.4.14 + resolution: "autoprefixer@npm:10.4.14" + dependencies: + browserslist: ^4.21.5 + caniuse-lite: ^1.0.30001464 + fraction.js: ^4.2.0 + normalize-range: ^0.1.2 + picocolors: ^1.0.0 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.1.0 + bin: + autoprefixer: bin/autoprefixer + checksum: e9f18e664a4e4a54a8f4ec5f6b49ed228ec45afaa76efcae361c93721795dc5ab644f36d2fdfc0dea446b02a8067b9372f91542ea431994399e972781ed46d95 + languageName: node + linkType: hard + "autoprefixer@npm:^9.8.6": version: 9.8.8 resolution: "autoprefixer@npm:9.8.8" @@ -10349,6 +10369,20 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.0.0, browserslist@npm:^4.21.4, browserslist@npm:^4.21.5, browserslist@npm:^4.21.9": + version: 4.21.9 + resolution: "browserslist@npm:4.21.9" + dependencies: + caniuse-lite: ^1.0.30001503 + electron-to-chromium: ^1.4.431 + node-releases: ^2.0.12 + update-browserslist-db: ^1.0.11 + bin: + browserslist: cli.js + checksum: 80d3820584e211484ad1b1a5cfdeca1dd00442f47be87e117e1dda34b628c87e18b81ae7986fa5977b3e6a03154f6d13cd763baa6b8bf5dd9dd19f4926603698 + languageName: node + linkType: hard + "browserslist@npm:^4.12.0, browserslist@npm:^4.14.5, browserslist@npm:^4.18.1, browserslist@npm:^4.21.0, browserslist@npm:^4.21.3": version: 4.21.4 resolution: "browserslist@npm:4.21.4" @@ -10363,20 +10397,6 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.21.9": - version: 4.21.9 - resolution: "browserslist@npm:4.21.9" - dependencies: - caniuse-lite: ^1.0.30001503 - electron-to-chromium: ^1.4.431 - node-releases: ^2.0.12 - update-browserslist-db: ^1.0.11 - bin: - browserslist: cli.js - checksum: 80d3820584e211484ad1b1a5cfdeca1dd00442f47be87e117e1dda34b628c87e18b81ae7986fa5977b3e6a03154f6d13cd763baa6b8bf5dd9dd19f4926603698 - languageName: node - linkType: hard - "bs-logger@npm:0.x": version: 0.2.6 resolution: "bs-logger@npm:0.2.6" @@ -10692,6 +10712,25 @@ __metadata: languageName: node linkType: hard +"caniuse-api@npm:^3.0.0": + version: 3.0.0 + resolution: "caniuse-api@npm:3.0.0" + dependencies: + browserslist: ^4.0.0 + caniuse-lite: ^1.0.0 + lodash.memoize: ^4.1.2 + lodash.uniq: ^4.5.0 + checksum: db2a229383b20d0529b6b589dde99d7b6cb56ba371366f58cbbfa2929c9f42c01f873e2b6ef641d4eda9f0b4118de77dbb2805814670bdad4234bf08e720b0b4 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001464": + version: 1.0.30001515 + resolution: "caniuse-lite@npm:1.0.30001515" + checksum: ec5d51785aea6af5cf62ca9d35821d36ab7fa0f85e3e7f752d532025ad59e07131fa3cb3a0a6c486b5ac8620c8c3440e761dc5b38c990d49c17655906f216123 + languageName: node + linkType: hard + "caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001400": version: 1.0.30001445 resolution: "caniuse-lite@npm:1.0.30001445" @@ -11177,6 +11216,13 @@ __metadata: languageName: node linkType: hard +"colord@npm:^2.9.1": + version: 2.9.3 + resolution: "colord@npm:2.9.3" + checksum: 95d909bfbcfd8d5605cbb5af56f2d1ce2b323990258fd7c0d2eb0e6d3bb177254d7fb8213758db56bb4ede708964f78c6b992b326615f81a18a6aaf11d64c650 + languageName: node + linkType: hard + "colorette@npm:^1.2.2": version: 1.4.0 resolution: "colorette@npm:1.4.0" @@ -11349,6 +11395,15 @@ __metadata: languageName: node linkType: hard +"concat-with-sourcemaps@npm:^1.1.0": + version: 1.1.0 + resolution: "concat-with-sourcemaps@npm:1.1.0" + dependencies: + source-map: ^0.6.1 + checksum: 57faa6f4a6f38a1846a58f96b2745ec8435755e0021f069e89085c651d091b78d9bc20807ea76c38c85021acca80dc2fa4cedda666aade169b602604215d25b9 + languageName: node + linkType: hard + "confusing-browser-globals@npm:^1.0.10": version: 1.0.11 resolution: "confusing-browser-globals@npm:1.0.11" @@ -11740,6 +11795,15 @@ __metadata: languageName: node linkType: hard +"css-declaration-sorter@npm:^6.3.1": + version: 6.4.1 + resolution: "css-declaration-sorter@npm:6.4.1" + peerDependencies: + postcss: ^8.0.9 + checksum: cbdc9e0d481011b1a28fd5b60d4eb55fe204391d31a0b1b490b2cecf4baa85810f9b8c48adab4df644f4718104ed3ed72c64a9745e3216173767bf4aeca7f9b8 + languageName: node + linkType: hard + "css-loader@npm:^3.6.0": version: 3.6.0 resolution: "css-loader@npm:3.6.0" @@ -11838,6 +11902,16 @@ __metadata: languageName: node linkType: hard +"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3": + version: 1.1.3 + resolution: "css-tree@npm:1.1.3" + dependencies: + mdn-data: 2.0.14 + source-map: ^0.6.1 + checksum: 79f9b81803991b6977b7fcb1588799270438274d89066ce08f117f5cdb5e20019b446d766c61506dd772c839df84caa16042d6076f20c97187f5abe3b50e7d1f + languageName: node + linkType: hard + "css-tree@npm:^2.2.1": version: 2.3.1 resolution: "css-tree@npm:2.3.1" @@ -11881,6 +11955,76 @@ __metadata: languageName: node linkType: hard +"cssnano-preset-default@npm:^5.2.14": + version: 5.2.14 + resolution: "cssnano-preset-default@npm:5.2.14" + dependencies: + css-declaration-sorter: ^6.3.1 + cssnano-utils: ^3.1.0 + postcss-calc: ^8.2.3 + postcss-colormin: ^5.3.1 + postcss-convert-values: ^5.1.3 + postcss-discard-comments: ^5.1.2 + postcss-discard-duplicates: ^5.1.0 + postcss-discard-empty: ^5.1.1 + postcss-discard-overridden: ^5.1.0 + postcss-merge-longhand: ^5.1.7 + postcss-merge-rules: ^5.1.4 + postcss-minify-font-values: ^5.1.0 + postcss-minify-gradients: ^5.1.1 + postcss-minify-params: ^5.1.4 + postcss-minify-selectors: ^5.2.1 + postcss-normalize-charset: ^5.1.0 + postcss-normalize-display-values: ^5.1.0 + postcss-normalize-positions: ^5.1.1 + postcss-normalize-repeat-style: ^5.1.1 + postcss-normalize-string: ^5.1.0 + postcss-normalize-timing-functions: ^5.1.0 + postcss-normalize-unicode: ^5.1.1 + postcss-normalize-url: ^5.1.0 + postcss-normalize-whitespace: ^5.1.1 + postcss-ordered-values: ^5.1.3 + postcss-reduce-initial: ^5.1.2 + postcss-reduce-transforms: ^5.1.0 + postcss-svgo: ^5.1.0 + postcss-unique-selectors: ^5.1.1 + peerDependencies: + postcss: ^8.2.15 + checksum: d3bbbe3d50c6174afb28d0bdb65b511fdab33952ec84810aef58b87189f3891c34aaa8b6a6101acd5314f8acded839b43513e39a75f91a698ddc985a1b1d9e95 + languageName: node + linkType: hard + +"cssnano-utils@npm:^3.1.0": + version: 3.1.0 + resolution: "cssnano-utils@npm:3.1.0" + peerDependencies: + postcss: ^8.2.15 + checksum: 975c84ce9174cf23bb1da1e9faed8421954607e9ea76440cd3bb0c1bea7e17e490d800fca5ae2812d1d9e9d5524eef23ede0a3f52497d7ccc628e5d7321536f2 + languageName: node + linkType: hard + +"cssnano@npm:^5.0.1": + version: 5.1.15 + resolution: "cssnano@npm:5.1.15" + dependencies: + cssnano-preset-default: ^5.2.14 + lilconfig: ^2.0.3 + yaml: ^1.10.2 + peerDependencies: + postcss: ^8.2.15 + checksum: ca9e1922178617c66c2f1548824b2c7af2ecf69cc3a187fc96bf8d29251c2e84d9e4966c69cf64a2a6a057a37dff7d6d057bc8a2a0957e6ea382e452ae9d0bbb + languageName: node + linkType: hard + +"csso@npm:^4.2.0": + version: 4.2.0 + resolution: "csso@npm:4.2.0" + dependencies: + css-tree: ^1.1.2 + checksum: 380ba9663da3bcea58dee358a0d8c4468bb6539be3c439dc266ac41c047217f52fd698fb7e4b6b6ccdfb8cf53ef4ceed8cc8ceccb8dfca2aa628319826b5b998 + languageName: node + linkType: hard + "csso@npm:^5.0.5": version: 5.0.5 resolution: "csso@npm:5.0.5" @@ -13617,6 +13761,13 @@ __metadata: languageName: node linkType: hard +"estree-walker@npm:^0.6.1": + version: 0.6.1 + resolution: "estree-walker@npm:0.6.1" + checksum: 9d6f82a4921f11eec18f8089fb3cce6e53bcf45a8e545c42a2674d02d055fb30f25f90495f8be60803df6c39680c80dcee7f944526867eb7aa1fc9254883b23d + languageName: node + linkType: hard + "estree-walker@npm:^2.0.2": version: 2.0.2 resolution: "estree-walker@npm:2.0.2" @@ -13638,6 +13789,13 @@ __metadata: languageName: node linkType: hard +"eventemitter3@npm:^4.0.4": + version: 4.0.7 + resolution: "eventemitter3@npm:4.0.7" + checksum: 1875311c42fcfe9c707b2712c32664a245629b42bb0a5a84439762dd0fd637fc54d078155ea83c2af9e0323c9ac13687e03cfba79b03af9f40c89b4960099374 + languageName: node + linkType: hard + "events@npm:^3.0.0, events@npm:^3.2.0": version: 3.3.0 resolution: "events@npm:3.3.0" @@ -14312,6 +14470,13 @@ __metadata: languageName: node linkType: hard +"fraction.js@npm:^4.2.0": + version: 4.2.0 + resolution: "fraction.js@npm:4.2.0" + checksum: 8c76a6e21dedea87109d6171a0ac77afa14205794a565d71cb10d2925f629a3922da61bf45ea52dbc30bce4d8636dc0a27213a88cbd600eab047d82f9a3a94c5 + languageName: node + linkType: hard + "fragment-cache@npm:^0.2.1": version: 0.2.1 resolution: "fragment-cache@npm:0.2.1" @@ -14542,6 +14707,15 @@ __metadata: languageName: node linkType: hard +"generic-names@npm:^4.0.0": + version: 4.0.0 + resolution: "generic-names@npm:4.0.0" + dependencies: + loader-utils: ^3.2.0 + checksum: 8dabd2505164191501b75f2861b5e1194458a344ae2a7c9776bdd72d1f50b248dff737bcdf118fff677275edb3632f2d10662e6ac122dd7b245c5baa8d303270 + languageName: node + linkType: hard + "gensync@npm:^1.0.0-beta.1, gensync@npm:^1.0.0-beta.2": version: 1.0.0-beta.2 resolution: "gensync@npm:1.0.0-beta.2" @@ -15514,6 +15688,13 @@ __metadata: languageName: node linkType: hard +"icss-replace-symbols@npm:^1.1.0": + version: 1.1.0 + resolution: "icss-replace-symbols@npm:1.1.0" + checksum: 24575b2c2f7e762bfc6f4beee31be9ba98a01cad521b5aa9954090a5de2b5e1bf67814c17e22f9e51b7d798238db8215a173d6c2b4726ce634ce06b68ece8045 + languageName: node + linkType: hard + "icss-utils@npm:^4.0.0, icss-utils@npm:^4.1.1": version: 4.1.1 resolution: "icss-utils@npm:4.1.1" @@ -15599,6 +15780,15 @@ __metadata: languageName: node linkType: hard +"import-cwd@npm:^3.0.0": + version: 3.0.0 + resolution: "import-cwd@npm:3.0.0" + dependencies: + import-from: ^3.0.0 + checksum: f2c4230e8389605154a390124381f9136811306ae4ba1c8017398c3c6926bc5cf75cf89350372b4938f79792ea373776b4efabd27506440ec301ce34c4e867eb + languageName: node + linkType: hard + "import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -15609,6 +15799,15 @@ __metadata: languageName: node linkType: hard +"import-from@npm:^3.0.0": + version: 3.0.0 + resolution: "import-from@npm:3.0.0" + dependencies: + resolve-from: ^5.0.0 + checksum: 5040a7400e77e41e2c3bb6b1b123b52a15a284de1ffc03d605879942c00e3a87428499d8d031d554646108a0f77652549411167f6a7788e4fc7027eefccf3356 + languageName: node + linkType: hard + "import-lazy@npm:^4.0.0": version: 4.0.0 resolution: "import-lazy@npm:4.0.0" @@ -17657,7 +17856,7 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:^2.0.5": +"lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5": version: 2.1.0 resolution: "lilconfig@npm:2.1.0" checksum: 8549bb352b8192375fed4a74694cd61ad293904eee33f9d4866c2192865c44c4eb35d10782966242634e0cbc1e91fe62b1247f148dc5514918e3a966da7ea117 @@ -17841,7 +18040,7 @@ __metadata: languageName: node linkType: hard -"lodash.memoize@npm:4.x": +"lodash.memoize@npm:4.x, lodash.memoize@npm:^4.1.2": version: 4.1.2 resolution: "lodash.memoize@npm:4.1.2" checksum: 9ff3942feeccffa4f1fafa88d32f0d24fdc62fd15ded5a74a5f950ff5f0c6f61916157246744c620173dddf38d37095a92327d5fd3861e2063e736a5c207d089 @@ -18237,6 +18436,13 @@ __metadata: languageName: node linkType: hard +"mdn-data@npm:2.0.14": + version: 2.0.14 + resolution: "mdn-data@npm:2.0.14" + checksum: 9d0128ed425a89f4cba8f787dca27ad9408b5cb1b220af2d938e2a0629d17d879a34d2cb19318bdb26c3f14c77dd5dfbae67211f5caaf07b61b1f2c5c8c7dc16 + languageName: node + linkType: hard + "mdn-data@npm:2.0.28": version: 2.0.28 resolution: "mdn-data@npm:2.0.28" @@ -19153,7 +19359,7 @@ __metadata: languageName: node linkType: hard -"normalize-url@npm:^6.1.0": +"normalize-url@npm:^6.0.1, normalize-url@npm:^6.1.0": version: 6.1.0 resolution: "normalize-url@npm:6.1.0" checksum: 4a4944631173e7d521d6b80e4c85ccaeceb2870f315584fa30121f505a6dfd86439c5e3fdd8cd9e0e291290c41d0c3599f0cb12ab356722ed242584c30348e50 @@ -19645,7 +19851,17 @@ __metadata: languageName: node linkType: hard -"p-timeout@npm:^3.1.0": +"p-queue@npm:^6.6.2": + version: 6.6.2 + resolution: "p-queue@npm:6.6.2" + dependencies: + eventemitter3: ^4.0.4 + p-timeout: ^3.2.0 + checksum: 832642fcc4ab6477b43e6d7c30209ab10952969ed211c6d6f2931be8a4f9935e3578c72e8cce053dc34f2eb6941a408a2c516a54904e989851a1a209cf19761c + languageName: node + linkType: hard + +"p-timeout@npm:^3.1.0, p-timeout@npm:^3.2.0": version: 3.2.0 resolution: "p-timeout@npm:3.2.0" dependencies: @@ -20033,6 +20249,13 @@ __metadata: languageName: node linkType: hard +"pify@npm:^5.0.0": + version: 5.0.0 + resolution: "pify@npm:5.0.0" + checksum: 443e3e198ad6bfa8c0c533764cf75c9d5bc976387a163792fb553ffe6ce923887cf14eebf5aea9b7caa8eab930da8c33612990ae85bd8c2bc18bedb9eae94ecb + languageName: node + linkType: hard + "pinkie-promise@npm:^2.0.0": version: 2.0.1 resolution: "pinkie-promise@npm:2.0.1" @@ -20126,6 +20349,80 @@ __metadata: languageName: node linkType: hard +"postcss-calc@npm:^8.2.3": + version: 8.2.4 + resolution: "postcss-calc@npm:8.2.4" + dependencies: + postcss-selector-parser: ^6.0.9 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.2 + checksum: 314b4cebb0c4ed0cf8356b4bce71eca78f5a7842e6a3942a3bba49db168d5296b2bd93c3f735ae1c616f2651d94719ade33becc03c73d2d79c7394fb7f73eabb + languageName: node + linkType: hard + +"postcss-colormin@npm:^5.3.1": + version: 5.3.1 + resolution: "postcss-colormin@npm:5.3.1" + dependencies: + browserslist: ^4.21.4 + caniuse-api: ^3.0.0 + colord: ^2.9.1 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: e5778baab30877cd1f51e7dc9d2242a162aeca6360a52956acd7f668c5bc235c2ccb7e4df0370a804d65ebe00c5642366f061db53aa823f9ed99972cebd16024 + languageName: node + linkType: hard + +"postcss-convert-values@npm:^5.1.3": + version: 5.1.3 + resolution: "postcss-convert-values@npm:5.1.3" + dependencies: + browserslist: ^4.21.4 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: df48cdaffabf9737f9cfdc58a3dc2841cf282506a7a944f6c70236cff295d3a69f63de6e0935eeb8a9d3f504324e5b4e240abc29e21df9e35a02585d3060aeb5 + languageName: node + linkType: hard + +"postcss-discard-comments@npm:^5.1.2": + version: 5.1.2 + resolution: "postcss-discard-comments@npm:5.1.2" + peerDependencies: + postcss: ^8.2.15 + checksum: abfd064ebc27aeaf5037643dd51ffaff74d1fa4db56b0523d073ace4248cbb64ffd9787bd6924b0983a9d0bd0e9bf9f10d73b120e50391dc236e0d26c812fa2a + languageName: node + linkType: hard + +"postcss-discard-duplicates@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-discard-duplicates@npm:5.1.0" + peerDependencies: + postcss: ^8.2.15 + checksum: 88d6964201b1f4ed6bf7a32cefe68e86258bb6e42316ca01d9b32bdb18e7887d02594f89f4a2711d01b51ea6e3fcca8c54be18a59770fe5f4521c61d3eb6ca35 + languageName: node + linkType: hard + +"postcss-discard-empty@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-discard-empty@npm:5.1.1" + peerDependencies: + postcss: ^8.2.15 + checksum: 970adb12fae5c214c0768236ad9a821552626e77dedbf24a8213d19cc2c4a531a757cd3b8cdd3fc22fb1742471b8692a1db5efe436a71236dec12b1318ee8ff4 + languageName: node + linkType: hard + +"postcss-discard-overridden@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-discard-overridden@npm:5.1.0" + peerDependencies: + postcss: ^8.2.15 + checksum: d64d4a545aa2c81b22542895cfcddc787d24119f294d35d29b0599a1c818b3cc51f4ee80b80f5a0a09db282453dd5ac49f104c2117cc09112d0ac9b40b499a41 + languageName: node + linkType: hard + "postcss-flexbugs-fixes@npm:^4.2.1": version: 4.2.1 resolution: "postcss-flexbugs-fixes@npm:4.2.1" @@ -20156,7 +20453,7 @@ __metadata: languageName: node linkType: hard -"postcss-load-config@npm:^3.1.4": +"postcss-load-config@npm:^3.0.0, postcss-load-config@npm:^3.1.4": version: 3.1.4 resolution: "postcss-load-config@npm:3.1.4" dependencies: @@ -20211,6 +20508,80 @@ __metadata: languageName: node linkType: hard +"postcss-merge-longhand@npm:^5.1.7": + version: 5.1.7 + resolution: "postcss-merge-longhand@npm:5.1.7" + dependencies: + postcss-value-parser: ^4.2.0 + stylehacks: ^5.1.1 + peerDependencies: + postcss: ^8.2.15 + checksum: 81c3fc809f001b9b71a940148e242bdd6e2d77713d1bfffa15eb25c1f06f6648d5e57cb21645746d020a2a55ff31e1740d2b27900442913a9d53d8a01fb37e1b + languageName: node + linkType: hard + +"postcss-merge-rules@npm:^5.1.4": + version: 5.1.4 + resolution: "postcss-merge-rules@npm:5.1.4" + dependencies: + browserslist: ^4.21.4 + caniuse-api: ^3.0.0 + cssnano-utils: ^3.1.0 + postcss-selector-parser: ^6.0.5 + peerDependencies: + postcss: ^8.2.15 + checksum: 8ab6a569babe6cb412d6612adee74f053cea7edb91fa013398515ab36754b1fec830d68782ed8cdfb44cffdc6b78c79eab157bff650f428aa4460d3f3857447e + languageName: node + linkType: hard + +"postcss-minify-font-values@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-minify-font-values@npm:5.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 35e858fa41efa05acdeb28f1c76579c409fdc7eabb1744c3bd76e895bb9fea341a016746362a67609688ab2471f587202b9a3e14ea28ad677754d663a2777ece + languageName: node + linkType: hard + +"postcss-minify-gradients@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-minify-gradients@npm:5.1.1" + dependencies: + colord: ^2.9.1 + cssnano-utils: ^3.1.0 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 27354072a07c5e6dab36731103b94ca2354d4ed3c5bc6aacfdf2ede5a55fa324679d8fee5450800bc50888dbb5e9ed67569c0012040c2be128143d0cebb36d67 + languageName: node + linkType: hard + +"postcss-minify-params@npm:^5.1.4": + version: 5.1.4 + resolution: "postcss-minify-params@npm:5.1.4" + dependencies: + browserslist: ^4.21.4 + cssnano-utils: ^3.1.0 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: bd63e2cc89edcf357bb5c2a16035f6d02ef676b8cede4213b2bddd42626b3d428403849188f95576fc9f03e43ebd73a29bf61d33a581be9a510b13b7f7f100d5 + languageName: node + linkType: hard + +"postcss-minify-selectors@npm:^5.2.1": + version: 5.2.1 + resolution: "postcss-minify-selectors@npm:5.2.1" + dependencies: + postcss-selector-parser: ^6.0.5 + peerDependencies: + postcss: ^8.2.15 + checksum: 6fdbc84f99a60d56b43df8930707da397775e4c36062a106aea2fd2ac81b5e24e584a1892f4baa4469fa495cb87d1422560eaa8f6c9d500f9f0b691a5f95bab5 + languageName: node + linkType: hard + "postcss-modules-extract-imports@npm:^2.0.0": version: 2.0.0 resolution: "postcss-modules-extract-imports@npm:2.0.0" @@ -20309,6 +20680,158 @@ __metadata: languageName: node linkType: hard +"postcss-modules@npm:^4.0.0": + version: 4.3.1 + resolution: "postcss-modules@npm:4.3.1" + dependencies: + generic-names: ^4.0.0 + icss-replace-symbols: ^1.1.0 + lodash.camelcase: ^4.3.0 + postcss-modules-extract-imports: ^3.0.0 + postcss-modules-local-by-default: ^4.0.0 + postcss-modules-scope: ^3.0.0 + postcss-modules-values: ^4.0.0 + string-hash: ^1.1.1 + peerDependencies: + postcss: ^8.0.0 + checksum: fa592183bb3d96c4aaf535e3b9b3bcfc54274cbb5b337616543c24ec68cd56675e9fd8aabf994e627513af628d090e43d2f1f4928ff6cdd4b9d3b1ba3fce4d42 + languageName: node + linkType: hard + +"postcss-normalize-charset@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-normalize-charset@npm:5.1.0" + peerDependencies: + postcss: ^8.2.15 + checksum: e79d92971fc05b8b3c9b72f3535a574e077d13c69bef68156a0965f397fdf157de670da72b797f57b0e3bac8f38155b5dd1735ecab143b9cc4032d72138193b4 + languageName: node + linkType: hard + +"postcss-normalize-display-values@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-normalize-display-values@npm:5.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: b6eb7b9b02c3bdd62bbc54e01e2b59733d73a1c156905d238e178762962efe0c6f5104544da39f32cade8a4fb40f10ff54b63a8ebfbdff51e8780afb9fbdcf86 + languageName: node + linkType: hard + +"postcss-normalize-positions@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-normalize-positions@npm:5.1.1" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: d9afc233729c496463c7b1cdd06732469f401deb387484c3a2422125b46ec10b4af794c101f8c023af56f01970b72b535e88373b9058ecccbbf88db81662b3c4 + languageName: node + linkType: hard + +"postcss-normalize-repeat-style@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-normalize-repeat-style@npm:5.1.1" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 2c6ad2b0ae10a1fda156b948c34f78c8f1e185513593de4d7e2480973586675520edfec427645fa168c337b0a6b3ceca26f92b96149741ca98a9806dad30d534 + languageName: node + linkType: hard + +"postcss-normalize-string@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-normalize-string@npm:5.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 6e549c6e5b2831e34c7bdd46d8419e2278f6af1d5eef6d26884a37c162844e60339340c57e5e06058cdbe32f27fc6258eef233e811ed2f71168ef2229c236ada + languageName: node + linkType: hard + +"postcss-normalize-timing-functions@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-normalize-timing-functions@npm:5.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: da550f50e90b0b23e17b67449a7d1efd1aa68288e66d4aa7614ca6f5cc012896be1972b7168eee673d27da36504faccf7b9f835c0f7e81243f966a42c8c030aa + languageName: node + linkType: hard + +"postcss-normalize-unicode@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-normalize-unicode@npm:5.1.1" + dependencies: + browserslist: ^4.21.4 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 4c24d26cc9f4b19a9397db4e71dd600dab690f1de8e14a3809e2aa1452dbc3791c208c38a6316bbc142f29e934fdf02858e68c94038c06174d78a4937e0f273c + languageName: node + linkType: hard + +"postcss-normalize-url@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-normalize-url@npm:5.1.0" + dependencies: + normalize-url: ^6.0.1 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 3bd4b3246d6600230bc827d1760b24cb3101827ec97570e3016cbe04dc0dd28f4dbe763245d1b9d476e182c843008fbea80823061f1d2219b96f0d5c724a24c0 + languageName: node + linkType: hard + +"postcss-normalize-whitespace@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-normalize-whitespace@npm:5.1.1" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 12d8fb6d1c1cba208cc08c1830959b7d7ad447c3f5581873f7e185f99a9a4230c43d3af21ca12c818e4690a5085a95b01635b762ad4a7bef69d642609b4c0e19 + languageName: node + linkType: hard + +"postcss-ordered-values@npm:^5.1.3": + version: 5.1.3 + resolution: "postcss-ordered-values@npm:5.1.3" + dependencies: + cssnano-utils: ^3.1.0 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 6f3ca85b6ceffc68aadaf319d9ee4c5ac16d93195bf8cba2d1559b631555ad61941461cda6d3909faab86e52389846b2b36345cff8f0c3f4eb345b1b8efadcf9 + languageName: node + linkType: hard + +"postcss-reduce-initial@npm:^5.1.2": + version: 5.1.2 + resolution: "postcss-reduce-initial@npm:5.1.2" + dependencies: + browserslist: ^4.21.4 + caniuse-api: ^3.0.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 55db697f85231a81f1969d54c894e4773912d9ddb914f9b03d2e73abc4030f2e3bef4d7465756d0c1acfcc2c2d69974bfb50a972ab27546a7d68b5a4fc90282b + languageName: node + linkType: hard + +"postcss-reduce-transforms@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-reduce-transforms@npm:5.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.2.15 + checksum: 0c6af2cba20e3ff63eb9ad045e634ddfb9c3e5c0e614c020db2a02f3aa20632318c4ede9e0c995f9225d9a101e673de91c0a6e10bb2fa5da6d6c75d15a55882f + languageName: node + linkType: hard + "postcss-resolve-nested-selector@npm:^0.1.1": version: 0.1.1 resolution: "postcss-resolve-nested-selector@npm:0.1.1" @@ -20354,7 +20877,7 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.5": +"postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9": version: 6.0.13 resolution: "postcss-selector-parser@npm:6.0.13" dependencies: @@ -20374,6 +20897,18 @@ __metadata: languageName: node linkType: hard +"postcss-svgo@npm:^5.1.0": + version: 5.1.0 + resolution: "postcss-svgo@npm:5.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + svgo: ^2.7.0 + peerDependencies: + postcss: ^8.2.15 + checksum: d86eb5213d9f700cf5efe3073799b485fb7cacae0c731db3d7749c9c2b1c9bc85e95e0baeca439d699ff32ea24815fc916c4071b08f67ed8219df229ce1129bd + languageName: node + linkType: hard + "postcss-syntax@npm:^0.36.2": version: 0.36.2 resolution: "postcss-syntax@npm:0.36.2" @@ -20383,6 +20918,17 @@ __metadata: languageName: node linkType: hard +"postcss-unique-selectors@npm:^5.1.1": + version: 5.1.1 + resolution: "postcss-unique-selectors@npm:5.1.1" + dependencies: + postcss-selector-parser: ^6.0.5 + peerDependencies: + postcss: ^8.2.15 + checksum: 637e7b786e8558265775c30400c54b6b3b24d4748923f4a39f16a65fd0e394f564ccc9f0a1d3c0e770618a7637a7502ea1d0d79f731d429cb202255253c23278 + languageName: node + linkType: hard + "postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0": version: 4.2.0 resolution: "postcss-value-parser@npm:4.2.0" @@ -20589,6 +21135,13 @@ __metadata: languageName: node linkType: hard +"promise.series@npm:^0.2.0": + version: 0.2.0 + resolution: "promise.series@npm:0.2.0" + checksum: 26b5956b5463d032b43d39fd8d34fdacf453ed3352462eed9626494a11d44beb385f86d6544dd12e51482a6ca8f303e0dfdee8653db4703213ba27dd2234754a + languageName: node + linkType: hard + "prompts@npm:^2.0.1, prompts@npm:^2.4.0, prompts@npm:^2.4.2": version: 2.4.2 resolution: "prompts@npm:2.4.2" @@ -21924,6 +22477,29 @@ __metadata: languageName: node linkType: hard +"rollup-plugin-postcss@npm:^4.0.2": + version: 4.0.2 + resolution: "rollup-plugin-postcss@npm:4.0.2" + dependencies: + chalk: ^4.1.0 + concat-with-sourcemaps: ^1.1.0 + cssnano: ^5.0.1 + import-cwd: ^3.0.0 + p-queue: ^6.6.2 + pify: ^5.0.0 + postcss-load-config: ^3.0.0 + postcss-modules: ^4.0.0 + promise.series: ^0.2.0 + resolve: ^1.19.0 + rollup-pluginutils: ^2.8.2 + safe-identifier: ^0.4.2 + style-inject: ^0.3.0 + peerDependencies: + postcss: 8.x + checksum: 67875e024fa36ba4bd43604dc50d02eabba0c93626cc372588260ae42aae3f98015ea1b0c3a78bcbd345ebea465ef636e5cb0f60dbc8b2e94fbe2514384395f0 + languageName: node + linkType: hard + "rollup-plugin-visualizer@npm:^5.9.2": version: 5.9.2 resolution: "rollup-plugin-visualizer@npm:5.9.2" @@ -21943,6 +22519,15 @@ __metadata: languageName: node linkType: hard +"rollup-pluginutils@npm:^2.8.2": + version: 2.8.2 + resolution: "rollup-pluginutils@npm:2.8.2" + dependencies: + estree-walker: ^0.6.1 + checksum: 339fdf866d8f4ff6e408fa274c0525412f7edb01dc46b5ccda51f575b7e0d20ad72965773376fb5db95a77a7fcfcab97bf841ec08dbadf5d6b08af02b7a2cf5e + languageName: node + linkType: hard + "rollup@npm:^3.25.1": version: 3.26.2 resolution: "rollup@npm:3.26.2" @@ -22043,6 +22628,13 @@ __metadata: languageName: node linkType: hard +"safe-identifier@npm:^0.4.2": + version: 0.4.2 + resolution: "safe-identifier@npm:0.4.2" + checksum: 67e28ed89a74cf20b827419003d3cb60a0ebaec0771c2c818f4b2239bf4f96e01ad90aa8db6dc57ee90c0c438b6f46323e4b5a3d955d18d8c4e158ea035cabdd + languageName: node + linkType: hard + "safe-regex-test@npm:^1.0.0": version: 1.0.0 resolution: "safe-regex-test@npm:1.0.0" @@ -22976,6 +23568,13 @@ __metadata: languageName: node linkType: hard +"string-hash@npm:^1.1.1": + version: 1.1.3 + resolution: "string-hash@npm:1.1.3" + checksum: 104b8667a5e0dc71bfcd29fee09cb88c6102e27bfb07c55f95535d90587d016731d52299380052e514266f4028a7a5172e0d9ac58e2f8f5001be61dc77c0754d + languageName: node + linkType: hard + "string-length@npm:^4.0.1": version: 4.0.2 resolution: "string-length@npm:4.0.2" @@ -23221,6 +23820,13 @@ __metadata: languageName: node linkType: hard +"style-inject@npm:^0.3.0": + version: 0.3.0 + resolution: "style-inject@npm:0.3.0" + checksum: fa5f5f6730c3eb4ccc5735347935703c7c02759d4ddb5983d037ed0efda3c50a80640c2fed4f4d4c5ea600c97cdfdb45f79f734630324fa21a3a86723c0472da + languageName: node + linkType: hard + "style-loader@npm:^1.3.0": version: 1.3.0 resolution: "style-loader@npm:1.3.0" @@ -23292,6 +23898,18 @@ __metadata: languageName: node linkType: hard +"stylehacks@npm:^5.1.1": + version: 5.1.1 + resolution: "stylehacks@npm:5.1.1" + dependencies: + browserslist: ^4.21.4 + postcss-selector-parser: ^6.0.4 + peerDependencies: + postcss: ^8.2.15 + checksum: 11175366ef52de65bf06cefba0ddc9db286dc3a1451fd2989e74c6ea47091a02329a4bf6ce10b1a36950056927b6bbbe47c5ab3a1f4c7032df932d010fbde5a2 + languageName: node + linkType: hard + "stylelint-config-recess-order@npm:^2.0.4": version: 2.6.0 resolution: "stylelint-config-recess-order@npm:2.6.0" @@ -23485,6 +24103,23 @@ __metadata: languageName: node linkType: hard +"svgo@npm:^2.7.0": + version: 2.8.0 + resolution: "svgo@npm:2.8.0" + dependencies: + "@trysound/sax": 0.2.0 + commander: ^7.2.0 + css-select: ^4.1.3 + css-tree: ^1.1.3 + csso: ^4.2.0 + picocolors: ^1.0.0 + stable: ^0.1.8 + bin: + svgo: bin/svgo + checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420 + languageName: node + linkType: hard + "svgo@npm:^3.0.2": version: 3.0.2 resolution: "svgo@npm:3.0.2" From d3853f6f65f9bb0db67bfb7b46ac545fe78bb8b0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 13 Jul 2023 13:39:39 +0900 Subject: [PATCH 006/238] ci(changesets): version packages (alpha) (#1493) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 4 +++- packages/bezier-figma-plugin/CHANGELOG.md | 7 +++++++ packages/bezier-figma-plugin/package.json | 2 +- packages/bezier-react/CHANGELOG.md | 6 ++++++ packages/bezier-react/package.json | 2 +- 5 files changed, 18 insertions(+), 3 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 6e553ad37b..7bb59d46d3 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -9,5 +9,7 @@ "eslint-config-bezier": "0.0.1", "tsconfig": "0.0.1" }, - "changesets": [] + "changesets": [ + "tall-maps-lick" + ] } diff --git a/packages/bezier-figma-plugin/CHANGELOG.md b/packages/bezier-figma-plugin/CHANGELOG.md index 4ea610f167..5932a87413 100644 --- a/packages/bezier-figma-plugin/CHANGELOG.md +++ b/packages/bezier-figma-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # bezier-figma-plugin +## 0.3.12-alpha.0 + +### Patch Changes + +- Updated dependencies + - @channel.io/bezier-react@2.0.0-alpha.0 + ## 0.3.11 ### Patch Changes diff --git a/packages/bezier-figma-plugin/package.json b/packages/bezier-figma-plugin/package.json index 80b269d330..81746a6710 100644 --- a/packages/bezier-figma-plugin/package.json +++ b/packages/bezier-figma-plugin/package.json @@ -1,6 +1,6 @@ { "name": "bezier-figma-plugin", - "version": "0.3.11", + "version": "0.3.12-alpha.0", "private": true, "description": "Figma plugin that helps build Bezier design system and increase productivity.", "repository": { diff --git a/packages/bezier-react/CHANGELOG.md b/packages/bezier-react/CHANGELOG.md index 680e82b21b..cac7b39300 100644 --- a/packages/bezier-react/CHANGELOG.md +++ b/packages/bezier-react/CHANGELOG.md @@ -1,5 +1,11 @@ # @channel.io/bezier-react +## 2.0.0-alpha.0 + +### Major Changes + +- Export the css style sheet for the new design system. ([#1492](https://github.com/channel-io/bezier-react/pull/1492)) by @sungik-choi + ## 1.8.0 ### Minor Changes diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index ea590919ff..fb6f0e2d07 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-react", - "version": "1.8.0", + "version": "2.0.0-alpha.0", "description": "React components library that implements Bezier design system.", "repository": { "type": "git", From a265aff4f36301a0befbd4902d86cd3f3c2e2369 Mon Sep 17 00:00:00 2001 From: Ed Date: Mon, 20 Nov 2023 13:21:26 +0900 Subject: [PATCH 007/238] Add postcss preset env (#1510) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English**. - [x] I added an appropriate **label** to the PR. - [x] I wrote a commit message in **English**. - [x] I wrote a commit message according to [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [ ] [I added the appropriate **changeset**](https://github.com/channel-io/bezier-react/blob/main/CONTRIBUTING.md#add-a-changeset) for the changes. - [ ] [Component] I wrote **a unit test** about the implementation. - [ ] [Component] I wrote **a storybook document** about the implementation. - [ ] [Component] I tested the implementation in **various browsers**. - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox - [ ] [*New* Component] I added my username to the correct directory in the `CODEOWNERS` file. ## Summary - postcss presetenv를 추가합니다 - alpha << main branch merge conflict를 해소합니다. (누락된 storybook styling addon 추가 등) ## Details 올해 7월에 본래 CSS cascade layer polyfill을 위해 작업한 PR이었으나, 현재 (2023/11/16) 동일한 브라우저 타겟으로 재빌드 시 polyfill이 생성되지 않아 PR 컨텍스트를 변경했습니다. (https://github.com/channel-io/bezier-react/pull/1510#issuecomment-1645225099) ## Breaking change or not (Yes/No) 없음. ## References - https://www.npmjs.com/package/postcss-preset-env --- package.json | 1 - packages/bezier-react/.storybook/main.ts | 8 + packages/bezier-react/package.json | 4 +- packages/bezier-react/rollup.config.mjs | 6 +- .../Button/__snapshots__/Button.test.tsx.snap | 15 - yarn.lock | 836 +++++++++++++++++- 6 files changed, 849 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 10ccd6ac83..6d3f81487c 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "@channel.io/stylelint-config": "^1.2.0", "@commitlint/cli": "^17.7.1", "@commitlint/config-conventional": "^17.7.0", - "@storybook/addon-styling": "^1.3.2", "@swc/core": "^1.3.83", "@swc/jest": "^0.2.29", "@types/jest": "^29.5.4", diff --git a/packages/bezier-react/.storybook/main.ts b/packages/bezier-react/.storybook/main.ts index f0b8dbfe65..4215d4694e 100644 --- a/packages/bezier-react/.storybook/main.ts +++ b/packages/bezier-react/.storybook/main.ts @@ -19,6 +19,14 @@ const config: StorybookConfig = { getAbsolutePath("@storybook/addon-toolbars"), getAbsolutePath("@storybook/addon-docs"), getAbsolutePath("@storybook/addon-backgrounds"), + { + name: '@storybook/addon-styling', + options: { + sass: { + implementation: require('sass'), + }, + }, + }, ], typescript: { diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index 8fee002b84..f90f6aae00 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -62,7 +62,7 @@ "> 1% in KR", "> 1% in JP", "> 1% in US", - "not ie <= 11" + "not dead" ], "devDependencies": { "@babel/core": "^7.22.17", @@ -82,6 +82,7 @@ "@storybook/addon-backgrounds": "^7.4.2", "@storybook/addon-controls": "^7.4.2", "@storybook/addon-docs": "^7.4.2", + "@storybook/addon-styling": "^1.3.2", "@storybook/addon-toolbars": "^7.4.2", "@storybook/react": "^7.4.2", "@storybook/react-webpack5": "^7.4.2", @@ -105,6 +106,7 @@ "identity-obj-proxy": "^3.0.0", "jest-styled-components": "^7.1.1", "paths.macro": "^3.0.1", + "postcss-preset-env": "^9.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "rollup": "^3.29.1", diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs index bda687db64..08a147eadb 100644 --- a/packages/bezier-react/rollup.config.mjs +++ b/packages/bezier-react/rollup.config.mjs @@ -9,6 +9,7 @@ import commonjs from '@rollup/plugin-commonjs' import { nodeResolve } from '@rollup/plugin-node-resolve' import url from '@rollup/plugin-url' import autoprefixer from 'autoprefixer' +import postcssPresetEnv from 'postcss-preset-env' import { defineConfig } from 'rollup' import nodeExternals from 'rollup-plugin-node-externals' import postcss from 'rollup-plugin-postcss' @@ -44,7 +45,10 @@ const generateConfig = ({ */ generateScopedName: 'Bezier-[folder]__[local]__[hash:base64:5]', }, - plugins: [autoprefixer()], + plugins: [ + autoprefixer(), + postcssPresetEnv(), + ], }), /** * **IMPORTANT**: Order matters! diff --git a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap index b5efaf0108..3011f1df9c 100644 --- a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -230,21 +230,6 @@ exports[`Button Test > Loading Test > Active prop change Button to hover style 1 transition-property: color; } -.c5 { - display: inline-block; - width: 16px; - height: 16px; - border-style: solid; - border-width: 2px; - border-top-color: transparent; - border-right-color: inherit; - border-bottom-color: inherit; - border-left-color: inherit; - border-radius: 50%; - -webkit-animation: epmXAj 1s infinite linear; - animation: epmXAj 1s infinite linear; -} - .c1 { display: -webkit-box; display: -webkit-flex; diff --git a/yarn.lock b/yarn.lock index 5fd9b6cc17..6ceea352d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2500,6 +2500,7 @@ __metadata: "@storybook/addon-backgrounds": ^7.4.2 "@storybook/addon-controls": ^7.4.2 "@storybook/addon-docs": ^7.4.2 + "@storybook/addon-styling": ^1.3.2 "@storybook/addon-toolbars": ^7.4.2 "@storybook/react": ^7.4.2 "@storybook/react-webpack5": ^7.4.2 @@ -2524,6 +2525,7 @@ __metadata: identity-obj-proxy: ^3.0.0 jest-styled-components: ^7.1.1 paths.macro: ^3.0.1 + postcss-preset-env: ^9.3.0 react: ^18.2.0 react-dom: ^18.2.0 react-resize-detector: ^9.1.0 @@ -2874,6 +2876,413 @@ __metadata: languageName: node linkType: hard +"@csstools/cascade-layer-name-parser@npm:^1.0.5": + version: 1.0.5 + resolution: "@csstools/cascade-layer-name-parser@npm:1.0.5" + peerDependencies: + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + checksum: 91c533690b249fc5a284dcdedcb29b4129cc64d8325895c566c13b795c381d65b4b9829eb2e66df883d5b9468536f6010cccc74c8bf78fbbd85ecc595656c8f6 + languageName: node + linkType: hard + +"@csstools/color-helpers@npm:^3.0.2": + version: 3.0.2 + resolution: "@csstools/color-helpers@npm:3.0.2" + checksum: 199b55081959a67fb7eaa7be468f7e899d3c607c1b97eeb120aa8a1eff202e7592890b1233882ec3554467dedd530e21aec070cc2ce6b9184f366fa470a05fbd + languageName: node + linkType: hard + +"@csstools/css-calc@npm:^1.1.4": + version: 1.1.4 + resolution: "@csstools/css-calc@npm:1.1.4" + peerDependencies: + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + checksum: 71788155c73b4f482f19de5b91f37d14ccb8fc1fb3f8336a83c4b3197a5d0b499ccad86b067699ac559a721f8d46d81612eba0fc79923b8f5058977032a7e8c0 + languageName: node + linkType: hard + +"@csstools/css-color-parser@npm:^1.4.0": + version: 1.4.0 + resolution: "@csstools/css-color-parser@npm:1.4.0" + dependencies: + "@csstools/color-helpers": ^3.0.2 + "@csstools/css-calc": ^1.1.4 + peerDependencies: + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + checksum: 5bb07c02ee30ad4991b756443aea7dd7675f652bc4a3d5199851843a003a7233ef42c6b1acd159f40f00914b7d20d5fabf864211c56365c96c0a915a77a93748 + languageName: node + linkType: hard + +"@csstools/css-parser-algorithms@npm:2.3.2, @csstools/css-parser-algorithms@npm:^2.3.2": + version: 2.3.2 + resolution: "@csstools/css-parser-algorithms@npm:2.3.2" + peerDependencies: + "@csstools/css-tokenizer": ^2.2.1 + checksum: 71663a00369014727ac89ae738f0acd1341b2dc1474ff16799a6f4d24674c55c3ddb89d70c8f1ffc4e03508b18a621830f8f8a51707fda6cc5ea48f1a53cc559 + languageName: node + linkType: hard + +"@csstools/css-tokenizer@npm:^2.2.1": + version: 2.2.1 + resolution: "@csstools/css-tokenizer@npm:2.2.1" + checksum: ebd9f65b253037d3a575ded45dbe41c12e71d83d6aa8a6a3a9fc2427862a805678df2a825cd19cf36b587be93f5cb1bd0932bb5c362d227ed9533db35b1fc6fa + languageName: node + linkType: hard + +"@csstools/media-query-list-parser@npm:^2.1.5": + version: 2.1.5 + resolution: "@csstools/media-query-list-parser@npm:2.1.5" + peerDependencies: + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + checksum: 119c27951377781c06c0b68ee6f7815c71d7623e439da0d5009f2101a6cd996f60b3fd60466d7059b8f7a936fbc9fbd2306ba953fa2daf9728a710881971ab08 + languageName: node + linkType: hard + +"@csstools/postcss-cascade-layers@npm:^4.0.1": + version: 4.0.1 + resolution: "@csstools/postcss-cascade-layers@npm:4.0.1" + dependencies: + "@csstools/selector-specificity": ^3.0.0 + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: 71f30dec7a123cadfc749246acfa60ebbb9dff0064834fb51afd08bf3928c5488bae564f826581889de8ed9235a20c1cecde0ee7d148eefc6ce4f5f1ab9a570f + languageName: node + linkType: hard + +"@csstools/postcss-color-function@npm:^3.0.7": + version: 3.0.7 + resolution: "@csstools/postcss-color-function@npm:3.0.7" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + peerDependencies: + postcss: ^8.4 + checksum: 42fd3459b9e7093fb7d5017c6ef7a5a31b75a9fb4cf63aef8b894040e43c3c130fee64f8e478cfb445070c76d6029c9f4dd11c7d8f444aa0d26217369bc4500c + languageName: node + linkType: hard + +"@csstools/postcss-color-mix-function@npm:^2.0.7": + version: 2.0.7 + resolution: "@csstools/postcss-color-mix-function@npm:2.0.7" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + peerDependencies: + postcss: ^8.4 + checksum: fc46036a73486ad0f3771de214021dc39a841d013eb30a154324f766029a1cbbbc05101d5dd399a296ad1d94e55c0a8b456bd4ba23c6ba0535b153d94a1be9d3 + languageName: node + linkType: hard + +"@csstools/postcss-exponential-functions@npm:^1.0.1": + version: 1.0.1 + resolution: "@csstools/postcss-exponential-functions@npm:1.0.1" + dependencies: + "@csstools/css-calc": ^1.1.4 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + peerDependencies: + postcss: ^8.4 + checksum: fc670637e3dfc1394d343bcdaed941e307ba6470b2928ae08c90fa7042ebd0abe0bc007c9fd5bb8a4e20f8fb772d6af271df7588491f91e21681bd2c10a65ef5 + languageName: node + linkType: hard + +"@csstools/postcss-font-format-keywords@npm:^3.0.0": + version: 3.0.0 + resolution: "@csstools/postcss-font-format-keywords@npm:3.0.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 3a36a11ea871a21442459bb46e8602e2a71d0520309e9fe5e062b544db612bcc9e3df13facfcbe6b5046bb6872aa9c2368dd12371b2ed81bfca5c64c71f5721d + languageName: node + linkType: hard + +"@csstools/postcss-gamut-mapping@npm:^1.0.0": + version: 1.0.0 + resolution: "@csstools/postcss-gamut-mapping@npm:1.0.0" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": 2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + peerDependencies: + postcss: ^8.4 + checksum: 003f25554d81d053e3f4ab39c6977569d5e5da169a23c92e20c966fd747fa782d9fabdb35af7e6cdef8dd49e390396184a6427ab8de0134bb3d50d82d7e7e533 + languageName: node + linkType: hard + +"@csstools/postcss-gradients-interpolation-method@npm:^4.0.7": + version: 4.0.7 + resolution: "@csstools/postcss-gradients-interpolation-method@npm:4.0.7" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + peerDependencies: + postcss: ^8.4 + checksum: 3bdce32d87f465cf91da5bcb0c3a450ef9a909efa747a9d41a8975dade10543a709f3e60f69dff2a4c4085043fb2b5e919d9ed296b4c522211d557edd216fb64 + languageName: node + linkType: hard + +"@csstools/postcss-hwb-function@npm:^3.0.6": + version: 3.0.6 + resolution: "@csstools/postcss-hwb-function@npm:3.0.6" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + peerDependencies: + postcss: ^8.4 + checksum: a8b83fe03438411d47993308df3e595f373170e4807fc8d0e06a27c68bfaae6fa665546950dcabb6adc2bd010d0181dacfeecc77498d69a71570fee60bae73c1 + languageName: node + linkType: hard + +"@csstools/postcss-ic-unit@npm:^3.0.2": + version: 3.0.2 + resolution: "@csstools/postcss-ic-unit@npm:3.0.2" + dependencies: + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 29b2e00f81f991709e9a24968dde6e806ad939c161b0cd08538ae1831a0177c7220ab4247c272b49c8eebbbd0999fae9d635f05e688ab509e14cebd22f06a09c + languageName: node + linkType: hard + +"@csstools/postcss-initial@npm:^1.0.0": + version: 1.0.0 + resolution: "@csstools/postcss-initial@npm:1.0.0" + peerDependencies: + postcss: ^8.4 + checksum: 21d15759921509ddc78505265bd376854bf2710cdc27f62c138d4ee991581a34bebd8f61f100fd053e0bb95760121f1e1e4dbe61ae41cbef7b3f817e42c35743 + languageName: node + linkType: hard + +"@csstools/postcss-is-pseudo-class@npm:^4.0.3": + version: 4.0.3 + resolution: "@csstools/postcss-is-pseudo-class@npm:4.0.3" + dependencies: + "@csstools/selector-specificity": ^3.0.0 + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: 6e4a957fb8b229b74e1dad5484a0705687e02ed94f6e3e31531ed2b063cfd55b318271478915c924346ea93fa5ded6cc605203f2921dd86812dd03ce805e57f2 + languageName: node + linkType: hard + +"@csstools/postcss-logical-float-and-clear@npm:^2.0.0": + version: 2.0.0 + resolution: "@csstools/postcss-logical-float-and-clear@npm:2.0.0" + peerDependencies: + postcss: ^8.4 + checksum: 6a1349e180e633e6287927b12bfbde605bc372bca9b35e06aca2d548cb4b2ff040a0ea7f6804f5c89512846eb707429fe4b436c420cc4a7ea7fe5a1a8d76f724 + languageName: node + linkType: hard + +"@csstools/postcss-logical-overflow@npm:^1.0.0": + version: 1.0.0 + resolution: "@csstools/postcss-logical-overflow@npm:1.0.0" + peerDependencies: + postcss: ^8.4 + checksum: 6111f6741753b7d20a00d3f224976c353e85c25ec333cad6ce12cb403186cd8f37caa9e11565233e86487e45ce96173255b5add66e35663bdeeff3d9a4a77eaf + languageName: node + linkType: hard + +"@csstools/postcss-logical-overscroll-behavior@npm:^1.0.0": + version: 1.0.0 + resolution: "@csstools/postcss-logical-overscroll-behavior@npm:1.0.0" + peerDependencies: + postcss: ^8.4 + checksum: 32f9e96af8e5a0d40610203e4077accadd3b5baa01e874103f4748bc84ca8e241be23460327e29637e424468616fdda62bee0d0b7608fcb8f79a0bf53522f938 + languageName: node + linkType: hard + +"@csstools/postcss-logical-resize@npm:^2.0.0": + version: 2.0.0 + resolution: "@csstools/postcss-logical-resize@npm:2.0.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 2334309e97876a95fe6cf940b888b59f0896eb5110a11a275ce8b096e85d3b859b71a7e1f3e741c25f171bd3d724986c58845c0770ee21545b6129f591a020ca + languageName: node + linkType: hard + +"@csstools/postcss-logical-viewport-units@npm:^2.0.3": + version: 2.0.3 + resolution: "@csstools/postcss-logical-viewport-units@npm:2.0.3" + dependencies: + "@csstools/css-tokenizer": ^2.2.1 + peerDependencies: + postcss: ^8.4 + checksum: e7be536b1bbdae949371b8bd1af0a42327f3387cd2e9641fdd181637e3d25036c686e5205d3c218d1c66a03234f958b0b9a8134eb4ace92c4d8a15529c183452 + languageName: node + linkType: hard + +"@csstools/postcss-media-minmax@npm:^1.1.0": + version: 1.1.0 + resolution: "@csstools/postcss-media-minmax@npm:1.1.0" + dependencies: + "@csstools/css-calc": ^1.1.4 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/media-query-list-parser": ^2.1.5 + peerDependencies: + postcss: ^8.4 + checksum: 9cd9693b08f665a009dd34d0d39257a0032a70787fecc4e5cc47b9621417ebcbafa7135494b63669ce353285d3b6a5e17c3542f3ec4ba760364b487182a89e4f + languageName: node + linkType: hard + +"@csstools/postcss-media-queries-aspect-ratio-number-values@npm:^2.0.3": + version: 2.0.3 + resolution: "@csstools/postcss-media-queries-aspect-ratio-number-values@npm:2.0.3" + dependencies: + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/media-query-list-parser": ^2.1.5 + peerDependencies: + postcss: ^8.4 + checksum: d6b550abf1c75118da79233ca002932c848e004cb4280748231ec39fc683ba63653a0c772c115f35cb6e5a4ea8167bceeb67f79f33e4f1d4ead302aa1da78e3c + languageName: node + linkType: hard + +"@csstools/postcss-nested-calc@npm:^3.0.0": + version: 3.0.0 + resolution: "@csstools/postcss-nested-calc@npm:3.0.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 1b9e75d157a9df49a382071f127900fc4ded044ca671ef402b09def584635fcaf225b6fdbb932db37d3a94bb30154be0123b22ae4e1426be4fb9e26bb98d468b + languageName: node + linkType: hard + +"@csstools/postcss-normalize-display-values@npm:^3.0.1": + version: 3.0.1 + resolution: "@csstools/postcss-normalize-display-values@npm:3.0.1" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 895873a7ec7551962fd2c03207b7899cc0f6a575b9bf816de49afff15b28dd751e8cf6fbf2a3bfb8372993309d600b3f35236ddf249a59ecf7c981ec72628305 + languageName: node + linkType: hard + +"@csstools/postcss-oklab-function@npm:^3.0.7": + version: 3.0.7 + resolution: "@csstools/postcss-oklab-function@npm:3.0.7" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + peerDependencies: + postcss: ^8.4 + checksum: d60d2e628c1a49e51c1fa9d074d12b269fc47e58ff443a97dd733cd33209183cb296b7d6baa20236a86dc8043cd303e340a0017574ce8010918f7355584b656b + languageName: node + linkType: hard + +"@csstools/postcss-progressive-custom-properties@npm:^3.0.2": + version: 3.0.2 + resolution: "@csstools/postcss-progressive-custom-properties@npm:3.0.2" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: e7685f1ce7224204619cece0f5c4fe55ece74127c0de54294f827f1bae3be0a4bf4dda49f192267f0069d03942334888f61161bbc62b3ecea3801ec303972361 + languageName: node + linkType: hard + +"@csstools/postcss-relative-color-syntax@npm:^2.0.7": + version: 2.0.7 + resolution: "@csstools/postcss-relative-color-syntax@npm:2.0.7" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + peerDependencies: + postcss: ^8.4 + checksum: 987d71ef10e93e3f15fd8121db9a8535a2181abde049817ebfa0b99a379c740123236062064efecb30bad009ad47f329cc3b7cac60b5f62b1acec23f2177f09b + languageName: node + linkType: hard + +"@csstools/postcss-scope-pseudo-class@npm:^3.0.0": + version: 3.0.0 + resolution: "@csstools/postcss-scope-pseudo-class@npm:3.0.0" + dependencies: + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: 4616dcabf3294beb979004b295beec3f08e5544dca7919668e7befa5d445de9a23f662c395d52cbce153efbb3becdd72006dcdbc6f100a84a35d3bd3ec0542d8 + languageName: node + linkType: hard + +"@csstools/postcss-stepped-value-functions@npm:^3.0.2": + version: 3.0.2 + resolution: "@csstools/postcss-stepped-value-functions@npm:3.0.2" + dependencies: + "@csstools/css-calc": ^1.1.4 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + peerDependencies: + postcss: ^8.4 + checksum: 8a15ccfa69bd7ad4f44c1c7c8e9ff3f3c48a315f2a7e65dfe17e1d646d3fdb38b759fc37d9339e5433701c87f9489c20137bc4dedb21c8f4e9f8afec41a6e4e6 + languageName: node + linkType: hard + +"@csstools/postcss-text-decoration-shorthand@npm:^3.0.3": + version: 3.0.3 + resolution: "@csstools/postcss-text-decoration-shorthand@npm:3.0.3" + dependencies: + "@csstools/color-helpers": ^3.0.2 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: c39e4e7aa275f49c2dc565e606bdecc6605eac3fd46c1bdf551b75674034511c666294f935e203c2e0103f7c422c09ccdbbe1a5c3fb16991072744a963a820ad + languageName: node + linkType: hard + +"@csstools/postcss-trigonometric-functions@npm:^3.0.2": + version: 3.0.2 + resolution: "@csstools/postcss-trigonometric-functions@npm:3.0.2" + dependencies: + "@csstools/css-calc": ^1.1.4 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + peerDependencies: + postcss: ^8.4 + checksum: 314067759cb18725b90ce0ec86d570597dfb63ea4c6b312d62c79cdf64b2b5aad54949b9af2f6a86fd2a75f4a97840454d7edb838048d4426cd25935feac56c0 + languageName: node + linkType: hard + +"@csstools/postcss-unset-value@npm:^3.0.0": + version: 3.0.0 + resolution: "@csstools/postcss-unset-value@npm:3.0.0" + peerDependencies: + postcss: ^8.4 + checksum: ebd5db2054333f6fdc92992179f3810e2b027f2a90b904845aebf4871494d67615a3e9173cd9415dbd12d9917a5db02f07acb5e5d45acb776932d389eec15205 + languageName: node + linkType: hard + +"@csstools/selector-specificity@npm:^3.0.0": + version: 3.0.0 + resolution: "@csstools/selector-specificity@npm:3.0.0" + peerDependencies: + postcss-selector-parser: ^6.0.13 + checksum: 4a2dfe69998a499155d9dab4c2a0e7ae7594d8db98bb8a487d2d5347c0c501655051eb5eacad3fe323c86b0ba8212fe092c27fc883621e6ac2a27662edfc3528 + languageName: node + linkType: hard + "@discoveryjs/json-ext@npm:^0.5.0, @discoveryjs/json-ext@npm:^0.5.3": version: 0.5.7 resolution: "@discoveryjs/json-ext@npm:0.5.7" @@ -8580,6 +8989,24 @@ __metadata: languageName: node linkType: hard +"autoprefixer@npm:^10.4.16": + version: 10.4.16 + resolution: "autoprefixer@npm:10.4.16" + dependencies: + browserslist: ^4.21.10 + caniuse-lite: ^1.0.30001538 + fraction.js: ^4.3.6 + normalize-range: ^0.1.2 + picocolors: ^1.0.0 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.1.0 + bin: + autoprefixer: bin/autoprefixer + checksum: 45fad7086495048dacb14bb7b00313e70e135b5d8e8751dcc60548889400763705ab16fc2d99ea628b44c3472698fb0e39598f595ba28409c965ab159035afde + languageName: node + linkType: hard + "autoprefixer@npm:^9.8.6": version: 9.8.8 resolution: "autoprefixer@npm:9.8.8" @@ -8997,7 +9424,6 @@ __metadata: "@channel.io/stylelint-config": ^1.2.0 "@commitlint/cli": ^17.7.1 "@commitlint/config-conventional": ^17.7.0 - "@storybook/addon-styling": ^1.3.2 "@swc/core": ^1.3.83 "@swc/jest": ^0.2.29 "@types/jest": ^29.5.4 @@ -9157,7 +9583,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.22.1": +"browserslist@npm:^4.21.10, browserslist@npm:^4.22.1": version: 4.22.1 resolution: "browserslist@npm:4.22.1" dependencies: @@ -9390,6 +9816,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001538": + version: 1.0.30001562 + resolution: "caniuse-lite@npm:1.0.30001562" + checksum: 414ed45ae47a432607be1c9588bd478440acb033e46ede74c97501bfdb9ba4b1615e221d3ce7c7be55e1e0834725fd1ce5bf5e037bb9dd384c8e85b5e83dc6d1 + languageName: node + linkType: hard + "caniuse-lite@npm:^1.0.30001541": version: 1.0.30001549 resolution: "caniuse-lite@npm:1.0.30001549" @@ -10246,6 +10679,17 @@ __metadata: languageName: node linkType: hard +"css-blank-pseudo@npm:^6.0.0": + version: 6.0.0 + resolution: "css-blank-pseudo@npm:6.0.0" + dependencies: + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: d005d57610af249708d385ce3f5e1f0b60ac3d7fb22d5a5b065b76a15db68c1f92498c8358e9ae4b819c93e24def312c4975e4d7a6be45569880ffc0e61a1693 + languageName: node + linkType: hard + "css-color-keywords@npm:^1.0.0": version: 1.0.0 resolution: "css-color-keywords@npm:1.0.0" @@ -10262,6 +10706,19 @@ __metadata: languageName: node linkType: hard +"css-has-pseudo@npm:^6.0.0": + version: 6.0.0 + resolution: "css-has-pseudo@npm:6.0.0" + dependencies: + "@csstools/selector-specificity": ^3.0.0 + postcss-selector-parser: ^6.0.13 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 0d1fecb8339e815c0e5d04c2d4d36357b92974dcb51f328c64b9aa668c509aade348235fcd169441fd71e1411a7984f5c309128b092033e00070200b0043bf11 + languageName: node + linkType: hard + "css-loader@npm:^6.7.1, css-loader@npm:^6.7.3, css-loader@npm:^6.8.1": version: 6.8.1 resolution: "css-loader@npm:6.8.1" @@ -10280,6 +10737,15 @@ __metadata: languageName: node linkType: hard +"css-prefers-color-scheme@npm:^9.0.0": + version: 9.0.0 + resolution: "css-prefers-color-scheme@npm:9.0.0" + peerDependencies: + postcss: ^8.4 + checksum: 8508fbb8ca223bf53095ce71a962ceeff34ee7349705f6d7e36e148260bfb2e25fd93517a3d83d39d0ac9c60fe5fd5ec3bf4443b5d01ca711922d1b176d0b0e2 + languageName: node + linkType: hard + "css-select@npm:^4.1.3": version: 4.3.0 resolution: "css-select@npm:4.3.0" @@ -10361,6 +10827,13 @@ __metadata: languageName: node linkType: hard +"cssdb@npm:^7.9.0": + version: 7.9.0 + resolution: "cssdb@npm:7.9.0" + checksum: 83c2e3192336345bfcfb824f94f46afb5e0cd8b9a9755690bc0eecf004de57a1e031c31437be74bf957f348c4808cc5c8e378f4fb910ab3fd150ac69f30ae38a + languageName: node + linkType: hard + "cssesc@npm:^3.0.0": version: 3.0.0 resolution: "cssesc@npm:3.0.0" @@ -12798,6 +13271,13 @@ __metadata: languageName: node linkType: hard +"fraction.js@npm:^4.3.6": + version: 4.3.7 + resolution: "fraction.js@npm:4.3.7" + checksum: e1553ae3f08e3ba0e8c06e43a3ab20b319966dfb7ddb96fd9b5d0ee11a66571af7f993229c88ebbb0d4a816eb813a24ed48207b140d442a8f76f33763b8d1f3f + languageName: node + linkType: hard + "fresh@npm:0.5.2": version: 0.5.2 resolution: "fresh@npm:0.5.2" @@ -17757,6 +18237,17 @@ __metadata: languageName: node linkType: hard +"postcss-attribute-case-insensitive@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-attribute-case-insensitive@npm:6.0.2" + dependencies: + postcss-selector-parser: ^6.0.10 + peerDependencies: + postcss: ^8.4 + checksum: c2df4ad608679820b42851d87e7ad3a09ee0f429fb5879fdea0ac630ade2d4ae442119044a962c3a5db32496dc64b31e8bc92ece176f9b995bef1e8225335a31 + languageName: node + linkType: hard + "postcss-calc@npm:^8.2.3": version: 8.2.4 resolution: "postcss-calc@npm:8.2.4" @@ -17769,6 +18260,51 @@ __metadata: languageName: node linkType: hard +"postcss-clamp@npm:^4.1.0": + version: 4.1.0 + resolution: "postcss-clamp@npm:4.1.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4.6 + checksum: 118eec936b3b035dc8d75c89973408f15c5a3de3d1ee210a2b3511e3e431d9c56e6f354b509a90540241e2225ffe3caaa2fdf25919c63348ce4583a28ada642c + languageName: node + linkType: hard + +"postcss-color-functional-notation@npm:^6.0.2": + version: 6.0.2 + resolution: "postcss-color-functional-notation@npm:6.0.2" + dependencies: + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 35f81de7107f6680fc11fcb70102f2ade204a6fc4dcf6a379b299b62a52b38f29d940f261c077a027792b33b81c23e71b992b8938ddd7c729a12035ca7fbc0e5 + languageName: node + linkType: hard + +"postcss-color-hex-alpha@npm:^9.0.2": + version: 9.0.2 + resolution: "postcss-color-hex-alpha@npm:9.0.2" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 2b622500d7815fc54027c8be35ae6c147e4b5b86c008ba8a396e434eac44301211fc14f23a1bfa6cd9a05676f40a4375eb26a19d749c74d49ea1eba9dc7f906e + languageName: node + linkType: hard + +"postcss-color-rebeccapurple@npm:^9.0.1": + version: 9.0.1 + resolution: "postcss-color-rebeccapurple@npm:9.0.1" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: baf61a300dc4922a9bbcb34c3c7b224c53bd2a3f504fae3cd30ad62a8ded0dea61c5c8e2f15a554d810ff1c2c9f2d681d58f816ee1e6c6049152c76d242e1dca + languageName: node + linkType: hard + "postcss-colormin@npm:^5.3.1": version: 5.3.1 resolution: "postcss-colormin@npm:5.3.1" @@ -17795,6 +18331,59 @@ __metadata: languageName: node linkType: hard +"postcss-custom-media@npm:^10.0.2": + version: 10.0.2 + resolution: "postcss-custom-media@npm:10.0.2" + dependencies: + "@csstools/cascade-layer-name-parser": ^1.0.5 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/media-query-list-parser": ^2.1.5 + peerDependencies: + postcss: ^8.4 + checksum: fc249688ce87016d55e2cbb32172f11ad58beb3a2786d42e98f956f8805487c997b79f4ca3d0fec559b89e8f353beb387b7d482955789233d0b06242ca4ef80f + languageName: node + linkType: hard + +"postcss-custom-properties@npm:^13.3.2": + version: 13.3.2 + resolution: "postcss-custom-properties@npm:13.3.2" + dependencies: + "@csstools/cascade-layer-name-parser": ^1.0.5 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: d53f6b2514b9d144008e646c16bd000d3536aec5776941bd1452d39fe9b173e131b429672e946fd1811820d2dc2938f7ea20b52f1c7abd2a713644b8d43fdcc4 + languageName: node + linkType: hard + +"postcss-custom-selectors@npm:^7.1.6": + version: 7.1.6 + resolution: "postcss-custom-selectors@npm:7.1.6" + dependencies: + "@csstools/cascade-layer-name-parser": ^1.0.5 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: b37ff361a2252c1a671c091ae4d7bed4d1c0f956a24c0e71446e35aabe2822a85b11d2bc5b145af263feeecfc7799babeb456672a868fd43fe4f09fcdd1d018d + languageName: node + linkType: hard + +"postcss-dir-pseudo-class@npm:^8.0.0": + version: 8.0.0 + resolution: "postcss-dir-pseudo-class@npm:8.0.0" + dependencies: + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: 4a951409b3641e2bc8a0319937688cdfaa4a90e60b7ae822f3392d7519cd6728e07193452f59ab48c7cc2acf2c71365661c000151b763e3f8dcc998701e1daca + languageName: node + linkType: hard + "postcss-discard-comments@npm:^5.1.2": version: 5.1.2 resolution: "postcss-discard-comments@npm:5.1.2" @@ -17831,6 +18420,58 @@ __metadata: languageName: node linkType: hard +"postcss-double-position-gradients@npm:^5.0.2": + version: 5.0.2 + resolution: "postcss-double-position-gradients@npm:5.0.2" + dependencies: + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: c8bfa195bef375514c47042cd71f557b8f02060e689e496ec28e380d1b835d47edfcc73905bbc0a42a98a0e0c20919e21b51d213a184ca34fcfee911b0e2187c + languageName: node + linkType: hard + +"postcss-focus-visible@npm:^9.0.0": + version: 9.0.0 + resolution: "postcss-focus-visible@npm:9.0.0" + dependencies: + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: 2a262056453387da4c614d6be4d9dede919202b1746e20d87b4194b169bfa29bb47bbbd37b1689ebe27c8695ed8f622d5893d0cbac0bd59bdeab9540b090ab6c + languageName: node + linkType: hard + +"postcss-focus-within@npm:^8.0.0": + version: 8.0.0 + resolution: "postcss-focus-within@npm:8.0.0" + dependencies: + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: cf0d175c5c09c99df5c59d5b0ed16f6071e7d493d3366bcb660c772b7518fbd7da3b97a2228b39ad8edb47cd0331bf37ccaed928b069f39402741aa781a1f999 + languageName: node + linkType: hard + +"postcss-font-variant@npm:^5.0.0": + version: 5.0.0 + resolution: "postcss-font-variant@npm:5.0.0" + peerDependencies: + postcss: ^8.1.0 + checksum: a19286589261c2bc3e20470486e1ee3b4daf34271c5020167f30856c9b30c26f23264307cb97a184d503814e1b8c5d8a1f9f64a14fd4fd9551c173dca9424695 + languageName: node + linkType: hard + +"postcss-gap-properties@npm:^5.0.0": + version: 5.0.0 + resolution: "postcss-gap-properties@npm:5.0.0" + peerDependencies: + postcss: ^8.4 + checksum: 42481ce5f272e722ce623c8aa21f2d18b5da250c8fa18ddbb72725c8c158f2894e3f682c7adfb2451ba01bc07fbc5168182e021d779d96e64f7b1604149db6e5 + languageName: node + linkType: hard + "postcss-html@npm:^0.36.0": version: 0.36.0 resolution: "postcss-html@npm:0.36.0" @@ -17843,6 +18484,31 @@ __metadata: languageName: node linkType: hard +"postcss-image-set-function@npm:^6.0.1": + version: 6.0.1 + resolution: "postcss-image-set-function@npm:6.0.1" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 0a4043591af3b92725f439651330cfb0a43f1388772e7aa4441ceee502e347bd131e71b1bcaa3fc50205195f1e00513d3d515108c4de6f57a60b1b06a28ca9a0 + languageName: node + linkType: hard + +"postcss-lab-function@npm:^6.0.7": + version: 6.0.7 + resolution: "postcss-lab-function@npm:6.0.7" + dependencies: + "@csstools/css-color-parser": ^1.4.0 + "@csstools/css-parser-algorithms": ^2.3.2 + "@csstools/css-tokenizer": ^2.2.1 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + peerDependencies: + postcss: ^8.4 + checksum: f9c53bf0b7a44b55350b902a98cb744c741ec1aade222fd8078fe556b5af9ac071b695a6d31b595c5a305dccd49612724ad95e32a5f0c63fc718e599d093b089 + languageName: node + linkType: hard + "postcss-less@npm:^3.1.4": version: 3.1.4 resolution: "postcss-less@npm:3.1.4" @@ -17884,6 +18550,17 @@ __metadata: languageName: node linkType: hard +"postcss-logical@npm:^7.0.0": + version: 7.0.0 + resolution: "postcss-logical@npm:7.0.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 1d8c0f97dfc4ab3fed5f9dd6718f52e35ac00f3612ddf477771a4a0e2027f92be69f97d4dcdde275bcef680c2ac9af9dce455b87b82639926ff4a731c31986f8 + languageName: node + linkType: hard + "postcss-media-query-parser@npm:^0.2.3": version: 0.2.3 resolution: "postcss-media-query-parser@npm:0.2.3" @@ -18027,6 +18704,18 @@ __metadata: languageName: node linkType: hard +"postcss-nesting@npm:^12.0.1": + version: 12.0.1 + resolution: "postcss-nesting@npm:12.0.1" + dependencies: + "@csstools/selector-specificity": ^3.0.0 + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: fa6157fbdc9109b3859cdb925ec8357ea7c9c984110015381a55e63770d1b5aaddaac5f5816a32b9efbb55fbdb87f8187ff7fc2db24331c82b2f74091aa9ba06 + languageName: node + linkType: hard + "postcss-normalize-charset@npm:^5.1.0": version: 5.1.0 resolution: "postcss-normalize-charset@npm:5.1.0" @@ -18126,6 +18815,15 @@ __metadata: languageName: node linkType: hard +"postcss-opacity-percentage@npm:^2.0.0": + version: 2.0.0 + resolution: "postcss-opacity-percentage@npm:2.0.0" + peerDependencies: + postcss: ^8.2 + checksum: 57948eb722fef5c733eb598fca93e92b364b91c565bd2fd35c59234bf52f797df613be8c790a77c85700d4a62172cfb2e21d4e313093cd32023531190b8e20d4 + languageName: node + linkType: hard + "postcss-ordered-values@npm:^5.1.3": version: 5.1.3 resolution: "postcss-ordered-values@npm:5.1.3" @@ -18138,6 +18836,118 @@ __metadata: languageName: node linkType: hard +"postcss-overflow-shorthand@npm:^5.0.0": + version: 5.0.0 + resolution: "postcss-overflow-shorthand@npm:5.0.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 9f14c56f00736dd19838d6f833e58cb5e87d214c521b8d49d430abb106c9a6e7c7eb6a439b3d6699f1b0667d1a43a5dc60947a267321430d293272509b01fb82 + languageName: node + linkType: hard + +"postcss-page-break@npm:^3.0.4": + version: 3.0.4 + resolution: "postcss-page-break@npm:3.0.4" + peerDependencies: + postcss: ^8 + checksum: a7d08c945fc691f62c77ac701e64722218b14ec5c8fc1972b8af9c21553492d40808cf95e61b9697b1dacaf7e6180636876d7fee314f079e6c9e39ac1b1edc6f + languageName: node + linkType: hard + +"postcss-place@npm:^9.0.0": + version: 9.0.0 + resolution: "postcss-place@npm:9.0.0" + dependencies: + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 5ca970f19f5078406d3349cc200057cdee4d7b5fb58b6872aa06a55c4cae5e28c9726bd6cf5ba3fd6a4f85f26cd3db804e4e26da09ff8519b2eb49824097cbd0 + languageName: node + linkType: hard + +"postcss-preset-env@npm:^9.3.0": + version: 9.3.0 + resolution: "postcss-preset-env@npm:9.3.0" + dependencies: + "@csstools/postcss-cascade-layers": ^4.0.1 + "@csstools/postcss-color-function": ^3.0.7 + "@csstools/postcss-color-mix-function": ^2.0.7 + "@csstools/postcss-exponential-functions": ^1.0.1 + "@csstools/postcss-font-format-keywords": ^3.0.0 + "@csstools/postcss-gamut-mapping": ^1.0.0 + "@csstools/postcss-gradients-interpolation-method": ^4.0.7 + "@csstools/postcss-hwb-function": ^3.0.6 + "@csstools/postcss-ic-unit": ^3.0.2 + "@csstools/postcss-initial": ^1.0.0 + "@csstools/postcss-is-pseudo-class": ^4.0.3 + "@csstools/postcss-logical-float-and-clear": ^2.0.0 + "@csstools/postcss-logical-overflow": ^1.0.0 + "@csstools/postcss-logical-overscroll-behavior": ^1.0.0 + "@csstools/postcss-logical-resize": ^2.0.0 + "@csstools/postcss-logical-viewport-units": ^2.0.3 + "@csstools/postcss-media-minmax": ^1.1.0 + "@csstools/postcss-media-queries-aspect-ratio-number-values": ^2.0.3 + "@csstools/postcss-nested-calc": ^3.0.0 + "@csstools/postcss-normalize-display-values": ^3.0.1 + "@csstools/postcss-oklab-function": ^3.0.7 + "@csstools/postcss-progressive-custom-properties": ^3.0.2 + "@csstools/postcss-relative-color-syntax": ^2.0.7 + "@csstools/postcss-scope-pseudo-class": ^3.0.0 + "@csstools/postcss-stepped-value-functions": ^3.0.2 + "@csstools/postcss-text-decoration-shorthand": ^3.0.3 + "@csstools/postcss-trigonometric-functions": ^3.0.2 + "@csstools/postcss-unset-value": ^3.0.0 + autoprefixer: ^10.4.16 + browserslist: ^4.22.1 + css-blank-pseudo: ^6.0.0 + css-has-pseudo: ^6.0.0 + css-prefers-color-scheme: ^9.0.0 + cssdb: ^7.9.0 + postcss-attribute-case-insensitive: ^6.0.2 + postcss-clamp: ^4.1.0 + postcss-color-functional-notation: ^6.0.2 + postcss-color-hex-alpha: ^9.0.2 + postcss-color-rebeccapurple: ^9.0.1 + postcss-custom-media: ^10.0.2 + postcss-custom-properties: ^13.3.2 + postcss-custom-selectors: ^7.1.6 + postcss-dir-pseudo-class: ^8.0.0 + postcss-double-position-gradients: ^5.0.2 + postcss-focus-visible: ^9.0.0 + postcss-focus-within: ^8.0.0 + postcss-font-variant: ^5.0.0 + postcss-gap-properties: ^5.0.0 + postcss-image-set-function: ^6.0.1 + postcss-lab-function: ^6.0.7 + postcss-logical: ^7.0.0 + postcss-nesting: ^12.0.1 + postcss-opacity-percentage: ^2.0.0 + postcss-overflow-shorthand: ^5.0.0 + postcss-page-break: ^3.0.4 + postcss-place: ^9.0.0 + postcss-pseudo-class-any-link: ^9.0.0 + postcss-replace-overflow-wrap: ^4.0.0 + postcss-selector-not: ^7.0.1 + postcss-value-parser: ^4.2.0 + peerDependencies: + postcss: ^8.4 + checksum: 51838c416eac4a1fb5ed64be61de8697ecb0b9dbd79133d60d76c23c9b5068f766b60d50c992f3ab92079d8d479b352ab631759ee6591442524c30a09209a381 + languageName: node + linkType: hard + +"postcss-pseudo-class-any-link@npm:^9.0.0": + version: 9.0.0 + resolution: "postcss-pseudo-class-any-link@npm:9.0.0" + dependencies: + postcss-selector-parser: ^6.0.13 + peerDependencies: + postcss: ^8.4 + checksum: af9c586f33dab93ef9167e53c5696f2f896310809523594c066230fba3611cd5f7c0ef4452153a3d1165cda66e4c3f97b5621b9f23bf815e915997eb99bc2e50 + languageName: node + linkType: hard + "postcss-reduce-initial@npm:^5.1.2": version: 5.1.2 resolution: "postcss-reduce-initial@npm:5.1.2" @@ -18161,6 +18971,15 @@ __metadata: languageName: node linkType: hard +"postcss-replace-overflow-wrap@npm:^4.0.0": + version: 4.0.0 + resolution: "postcss-replace-overflow-wrap@npm:4.0.0" + peerDependencies: + postcss: ^8.0.3 + checksum: 3ffe20b300a4c377a11c588b142740d8557e03c707474c45234c934190ac374750ddc92c7906c373471d273a20504a429c2062c21fdcaff830fb28e0a81ac1dc + languageName: node + linkType: hard + "postcss-resolve-nested-selector@npm:^0.1.1": version: 0.1.1 resolution: "postcss-resolve-nested-selector@npm:0.1.1" @@ -18196,7 +19015,18 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9": +"postcss-selector-not@npm:^7.0.1": + version: 7.0.1 + resolution: "postcss-selector-not@npm:7.0.1" + dependencies: + postcss-selector-parser: ^6.0.10 + peerDependencies: + postcss: ^8.4 + checksum: 4dec95f785a06356b6eb1aadb0b06b86cf80d21765b44acdbc4a028ab1183b2ac2fd992c41bc2d15b24bec2b71e016750baf73624621937eb3a1770c44c82096 + languageName: node + linkType: hard + +"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9": version: 6.0.13 resolution: "postcss-selector-parser@npm:6.0.13" dependencies: From 576616aa9fe12f1e6a88b7f9d150fbce07792d3f Mon Sep 17 00:00:00 2001 From: Ed Date: Wed, 22 Nov 2023 10:16:09 +0900 Subject: [PATCH 008/238] Implement bezier-tokens package (#1685) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue Fixes #994 ## Summary 베지어 디자인 시스템의 디자인 토큰 패키지인 bezier-tokens 패키지를 추가합니다. > **디자인 토큰이 무엇인가요?** > > Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organisations. (from w3c dtcg) > > - https://design-tokens.github.io/community-group/format/ > - https://m3.material.io/foundations/design-tokens/overview ## Details ### Note - 여러 디자인 토큰 변환 라이브러리를 리서치해보았습니다. 사용자의 규모와 향후 업데이트 로드맵, 커스터마이즈 가능 범위 등을 살펴보았을 때, Style dictionary가 가장 적절하다고 생각하여 선택하였습니다. - 디자인 토큰을 피그마에서 연동하기에는 현상황에서 어려웠습니다. 현재 피그마 Variables가 오픈베타여서 타이포그래피 등의 토큰 등을 지원하고 있지 않는 상황입니다. 또한 피그마 Variables의 등장으로 Token Studio같은 서드파티 플러그인을 사용하지 않기로 팀 내부에서 결정했기 때문에, 피그마 Variables의 스펙이 언제든지 추가되거나 변할 수 있다는 뜻입니다. 따라서 지금 피그마-소스 코드 변환기를 구현하는 건 시기상조라고 생각했습니다. - 현재 작업중인 새로운 디자인 시스템에 토큰을 적용하지 않고, 기존의(프로덕션) 레거시 디자인 토큰을 적용했습니다. 정확히는 현재 bezier-react의 Foundation들을 디자인 토큰으로 분해했습니다(= 피그마에는 토큰으로 분류되지 않은 경우도 있습니다). 토큰 적용 & 정적 스타일링 방식으로 변경 -> 새로운 디자인 토큰 적용으로 단계를 나누어가기 위해서입니다. ### Build step 빌드는 간략하게 다음의 과정으로 이루어집니다. 1. JSON(Design token)을 cjs/esm/css 로 변환합니다. 2. 변환된 cjs/esm 의 엔트리포인트(index.js)를 만듭니다. 3. 타입스크립트 컴파일러를 통해 변환된 js 파일로부터 타입 선언을 만듭니다. - **향후 1번의 변환 과정에 iOS, Android용 스타일 변환기, JSON 변환기 등을 추가할 수 있습니다.** - 1번의 변환 과정은 글로벌 토큰(기존의 팔레트, 레디우스 등)과 시맨틱 토큰(라이트/다크 테마)이 별개로 이루어집니다. 라이트/다크 테마를 함께 빌드하게 되면 키가 충돌했다는 메세지와 함께 빌드 에러가 발생합니다. themeable같은 속성을 사용할 수도 있으나, JSON에 style-dictionary 라이브러리에 종속적인 속성을 포함시키고 싶지 않았습니다. 토큰은 더 순수하게 두는 게 나중을 위하여 좋다고 판단했습니다. - Composite token(예: 타이포그래피)를 지원하지 않습니다. 현재 공식적으로 지원하지 않는 스펙이며, 현상황에서는 개별 토큰들을 bezier-react(그 외 각 플랫폼 디자인 시스템)에서 조합해도 큰 무리가 없다고 판단했습니다. #### File tree ```md dist ┣ cjs ┃ ┣ darkTheme.js ┃ ┣ global.js ┃ ┣ index.js ┃ ┗ lightTheme.js ┣ css ┃ ┣ dark-theme.css ┃ ┣ global.css ┃ ┗ light-theme.css ┣ esm ┃ ┣ darkTheme.mjs ┃ ┣ global.mjs ┃ ┣ index.mjs ┃ ┗ lightTheme.mjs ┗ types ┃ ┣ cjs ┃ ┃ ┣ darkTheme.d.ts ┃ ┃ ┣ darkTheme.d.ts.map ┃ ┃ ┣ global.d.ts ┃ ┃ ┣ global.d.ts.map ┃ ┃ ┣ index.d.ts ┃ ┃ ┣ index.d.ts.map ┃ ┃ ┣ lightTheme.d.ts ┃ ┃ ┗ lightTheme.d.ts.map ┃ ┗ esm ┃ ┃ ┣ darkTheme.d.mts ┃ ┃ ┣ darkTheme.d.mts.map ┃ ┃ ┣ global.d.mts ┃ ┃ ┣ global.d.mts.map ┃ ┃ ┣ index.d.mts ┃ ┃ ┣ index.d.mts.map ┃ ┃ ┣ lightTheme.d.mts ┃ ┃ ┗ lightTheme.d.mts.map ``` ### Next - 이 패키지의 js, css를 가지고 bezier-react의 스타일 시스템, 테마 기능을 구성하게 됩니다. (#1690) - 이 패키지의 토큰에 더해 bezier-react의 constants(disabled 0.4, z-index), 타이포그래피 등을 bezier-react에서 추가, 확장하여 최종적으로 사용자 애플리케이션에 제공하는 방향으로 구현하고자 합니다. (#1495 에서 작업) ### Breaking change? (Yes/No) No ## References - https://amzn.github.io/style-dictionary - https://dbanks.design/blog/dark-mode-with-style-dictionary/ - https://github.com/amzn/style-dictionary/issues/848 : Composite token 관련 이슈 --- .changeset/rare-coats-sing.md | 5 + package.json | 1 + packages/bezier-figma-plugin/README.md | 2 +- packages/bezier-icons/README.md | 2 +- packages/bezier-react/README.md | 2 +- packages/bezier-tokens/.eslintignore | 2 + packages/bezier-tokens/.eslintrc.js | 26 ++ packages/bezier-tokens/README.md | 44 ++ packages/bezier-tokens/package.json | 56 +++ .../bezier-tokens/scripts/build-js-index.ts | 73 +++ .../bezier-tokens/scripts/build-tokens.ts | 108 +++++ packages/bezier-tokens/scripts/lib/format.ts | 41 ++ .../bezier-tokens/scripts/lib/transform.ts | 19 + packages/bezier-tokens/scripts/lib/utils.ts | 2 + packages/bezier-tokens/src/global/color.json | 438 ++++++++++++++++++ packages/bezier-tokens/src/global/font.json | 95 ++++ packages/bezier-tokens/src/global/radius.json | 46 ++ .../bezier-tokens/src/global/transition.json | 18 + .../src/semantic/dark-theme/color.json | 369 +++++++++++++++ .../src/semantic/light-theme/color.json | 369 +++++++++++++++ packages/bezier-tokens/tsconfig.build.json | 11 + packages/bezier-tokens/tsconfig.eslint.json | 4 + packages/bezier-tokens/tsconfig.json | 12 + yarn.lock | 138 +++++- 24 files changed, 1875 insertions(+), 8 deletions(-) create mode 100644 .changeset/rare-coats-sing.md create mode 100644 packages/bezier-tokens/.eslintignore create mode 100644 packages/bezier-tokens/.eslintrc.js create mode 100644 packages/bezier-tokens/README.md create mode 100644 packages/bezier-tokens/package.json create mode 100644 packages/bezier-tokens/scripts/build-js-index.ts create mode 100644 packages/bezier-tokens/scripts/build-tokens.ts create mode 100644 packages/bezier-tokens/scripts/lib/format.ts create mode 100644 packages/bezier-tokens/scripts/lib/transform.ts create mode 100644 packages/bezier-tokens/scripts/lib/utils.ts create mode 100644 packages/bezier-tokens/src/global/color.json create mode 100644 packages/bezier-tokens/src/global/font.json create mode 100644 packages/bezier-tokens/src/global/radius.json create mode 100644 packages/bezier-tokens/src/global/transition.json create mode 100644 packages/bezier-tokens/src/semantic/dark-theme/color.json create mode 100644 packages/bezier-tokens/src/semantic/light-theme/color.json create mode 100644 packages/bezier-tokens/tsconfig.build.json create mode 100644 packages/bezier-tokens/tsconfig.eslint.json create mode 100644 packages/bezier-tokens/tsconfig.json diff --git a/.changeset/rare-coats-sing.md b/.changeset/rare-coats-sing.md new file mode 100644 index 0000000000..d469d838e5 --- /dev/null +++ b/.changeset/rare-coats-sing.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +First release diff --git a/package.json b/package.json index 6d3f81487c..9b50689622 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "jest-environment-jsdom": "^29.6.4", "npm-run-all": "^4.1.5", "stylelint": "^13.13.1", + "ts-node": "^10.9.1", "turbo": "^1.10.13", "typescript": "^4.9.5", "typescript-plugin-css-modules": "^5.0.1" diff --git a/packages/bezier-figma-plugin/README.md b/packages/bezier-figma-plugin/README.md index 8a624ba06f..7be614aa4b 100644 --- a/packages/bezier-figma-plugin/README.md +++ b/packages/bezier-figma-plugin/README.md @@ -20,7 +20,7 @@ Plugins > Development > Import plugin from manifest ## Contributing -See [contribution guide](../../CONTRIBUTING.md). +See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute). ## Maintainers diff --git a/packages/bezier-icons/README.md b/packages/bezier-icons/README.md index 6fa1626ebd..6bf69920af 100644 --- a/packages/bezier-icons/README.md +++ b/packages/bezier-icons/README.md @@ -61,7 +61,7 @@ console.log(isBezierIcon()) // false ## Contributing -See [contribution guide](../../CONTRIBUTING.md). +See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute). ## Maintainers diff --git a/packages/bezier-react/README.md b/packages/bezier-react/README.md index 5a4a4694d5..825556d2ad 100644 --- a/packages/bezier-react/README.md +++ b/packages/bezier-react/README.md @@ -49,7 +49,7 @@ root.render( ## Contributing -See [contribution guide](../../CONTRIBUTING.md). +See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute). ## Maintainers diff --git a/packages/bezier-tokens/.eslintignore b/packages/bezier-tokens/.eslintignore new file mode 100644 index 0000000000..f06235c460 --- /dev/null +++ b/packages/bezier-tokens/.eslintignore @@ -0,0 +1,2 @@ +node_modules +dist diff --git a/packages/bezier-tokens/.eslintrc.js b/packages/bezier-tokens/.eslintrc.js new file mode 100644 index 0000000000..d39161acf4 --- /dev/null +++ b/packages/bezier-tokens/.eslintrc.js @@ -0,0 +1,26 @@ +module.exports = { + root: true, + extends: ['bezier'], + parserOptions: { + tsconfigRootDir: __dirname, + project: './tsconfig.eslint.json', + }, + rules: { + 'no-restricted-imports': 'off', + 'sort-imports': [ + 'error', + { + ignoreDeclarationSort: true, + }, + ], + 'import/order': [ + 'error', + { + 'newlines-between': 'always', + alphabetize: { order: 'asc' }, + groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], + }, + ], + '@typescript-eslint/naming-convention': 'off', + }, +} diff --git a/packages/bezier-tokens/README.md b/packages/bezier-tokens/README.md new file mode 100644 index 0000000000..988bf4137a --- /dev/null +++ b/packages/bezier-tokens/README.md @@ -0,0 +1,44 @@ +# Bezier Tokens + +Bezier Tokens is a design tokens library that implements Bezier design system. + +## Installation + +```bash +npm i -D @channel.io/bezier-tokens +``` + +## Usage + +### JavaScript + +You can access and use values by token group. + +```ts +import { tokens } from '@channel.io/bezier-tokens' + +console.log(tokens.global['blue-300']) // "#..." +console.log(tokens.lightTheme['bg-black-dark']) // "#..." +``` + +### CSS + +Provide all design tokens as CSS variables. If you want to apply dark theme tokens, add the `data-bezier-theme="dark"` attribute to the parent element. The default is light theme tokens, which can also be applied by adding the `data-bezier-theme="light"` attribute to the parent element. + +```ts +import '@channel.io/bezier-tokens/css/global.css' +import '@channel.io/bezier-tokens/css/light-theme.css' +import '@channel.io/bezier-tokens/css/dark-theme.css' + +div { + background: var(--bg-black-dark); +} +``` + +## Contributing + +See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute). + +## Maintainers + +This package is mainly contributed by Channel Corp. Although feel free to contribution, or raise concerns! diff --git a/packages/bezier-tokens/package.json b/packages/bezier-tokens/package.json new file mode 100644 index 0000000000..f2adf7b95c --- /dev/null +++ b/packages/bezier-tokens/package.json @@ -0,0 +1,56 @@ +{ + "name": "@channel.io/bezier-tokens", + "version": "0.1.0", + "description": "Design tokens for Bezier design system.", + "repository": { + "type": "git", + "url": "https://github.com/channel-io/bezier-react", + "directory": "packages/bezier-tokens" + }, + "main": "dist/cjs/index.js", + "module": "dist/esm/index.mjs", + "types": "dist/types/cjs/index.d.ts", + "exports": { + ".": { + "require": { + "types": "./dist/types/cjs/index.d.ts", + "default": "./dist/cjs/index.js" + }, + "import": { + "types": "./dist/types/esm/index.d.mts", + "default": "./dist/esm/index.mjs" + } + }, + "./css/*": "./dist/css/*" + }, + "sideEffects": [ + "**/*.css" + ], + "files": [ + "dist" + ], + "scripts": { + "build": "run-s clean:build build:tokens build:js-index build:types", + "build:tokens": "ts-node-esm scripts/build-tokens.ts", + "build:js-index": "ts-node-esm scripts/build-js-index.ts", + "build:types": "tsc -p tsconfig.build.json", + "lint": "TIMING=1 eslint --cache .", + "typecheck": "tsc --noEmit", + "clean": "run-s 'clean:*'", + "clean:build": "rm -rf dist", + "clean:cache": "rm -rf node_modules .turbo .eslintcache" + }, + "keywords": [ + "channel", + "design", + "tokens", + "design tokens" + ], + "author": "Channel Corp.", + "license": "Apache-2.0", + "devDependencies": { + "eslint-config-bezier": "workspace:*", + "style-dictionary": "^3.9.0", + "tsconfig": "workspace:*" + } +} diff --git a/packages/bezier-tokens/scripts/build-js-index.ts b/packages/bezier-tokens/scripts/build-js-index.ts new file mode 100644 index 0000000000..2eafbd578f --- /dev/null +++ b/packages/bezier-tokens/scripts/build-js-index.ts @@ -0,0 +1,73 @@ +import fs from 'fs' +import path from 'path' + +interface BuildJsIndexFileOptions { + buildPath: string + isCjs: boolean +} + +const getFileExtensionByModuleSystem = (isCjs: boolean) => + (isCjs ? '.js' : '.mjs') + +function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) { + const fileExtension = getFileExtensionByModuleSystem(isCjs) + const indexFile = `index${fileExtension}` + let exportStatements = '' + + if (!fs.existsSync(buildPath)) { + // eslint-disable-next-line no-console + console.log(`Directory not found: ${buildPath}`) + return + } + + const files = fs.readdirSync(buildPath) + // eslint-disable-next-line no-console + console.log(`Reading files in ${buildPath}:`, files) + + files.forEach((file) => { + if (file.endsWith(fileExtension) && file !== indexFile) { + const moduleName = file.replace(fileExtension, '') + if (!isCjs) { + exportStatements += `import ${moduleName} from './${file}';\n` + } + } + }) + + if (isCjs) { + exportStatements += 'exports.tokens = Object.freeze({\n' + } else { + exportStatements += '\nexport const tokens = Object.freeze({\n' + } + + files.forEach((file) => { + if (file.endsWith(fileExtension) && file !== indexFile) { + const moduleName = file.replace(fileExtension, '') + if (isCjs) { + exportStatements += ` ${moduleName}: require('./${moduleName}'),\n` + } else { + exportStatements += ` ${moduleName},\n` + } + } + }) + + exportStatements += '});\n' + + fs.writeFileSync(path.join(buildPath, indexFile), exportStatements) + // eslint-disable-next-line no-console + console.log(`✅ Created ${indexFile} in ${buildPath}`) +} + +function main() { + [ + { + buildPath: 'dist/cjs', + isCjs: true, + }, + { + buildPath: 'dist/esm', + isCjs: false, + }, + ].forEach(buildJsIndexFile) +} + +main() diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts new file mode 100644 index 0000000000..8785f334e7 --- /dev/null +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -0,0 +1,108 @@ +import StyleDictionary, { type Config } from 'style-dictionary' + +import { + customJsCjs, + customJsEsm, +} from './lib/format' +import { customFontPxToRem } from './lib/transform' +import { toCamelCase } from './lib/utils' + +const TokenBuilder = StyleDictionary.registerTransform(customFontPxToRem) + .registerFormat(customJsCjs) + .registerFormat(customJsEsm) + +const COMMON_WEB_TRANSFORMS = [ + 'attribute/cti', + 'name/cti/kebab', + 'size/rem', + 'color/css', + customFontPxToRem.name, +] + +interface DefineConfigOptions { + source: string[] + destination: string + options?: { + cssSelector: string + } +} + +function defineConfig({ + source, + destination, + options, +}: DefineConfigOptions): Config { + return { + source, + platforms: { + 'js/cjs': { + transforms: COMMON_WEB_TRANSFORMS, + buildPath: 'dist/cjs/', + files: [ + { + destination: `${toCamelCase(destination)}.js`, + format: customJsCjs.name, + filter: (token) => token.filePath.includes(destination), + }, + ], + }, + 'js/esm': { + transforms: COMMON_WEB_TRANSFORMS, + buildPath: 'dist/esm/', + files: [ + { + destination: `${toCamelCase(destination)}.mjs`, + format: customJsEsm.name, + filter: (token) => token.filePath.includes(destination), + }, + ], + }, + css: { + transforms: COMMON_WEB_TRANSFORMS, + basePxFontSize: 10, + buildPath: 'dist/css/', + files: [ + { + destination: `${destination}.css`, + format: 'css/variables', + filter: (token) => token.filePath.includes(destination), + options: { + selector: options?.cssSelector, + outputReferences: true, + }, + }, + ], + }, + }, + } +} + +function main() { + [ + TokenBuilder.extend( + defineConfig({ + source: ['src/global/*.json'], + destination: 'global', + options: { cssSelector: ':where(:root, :host)' }, + }), + ), + TokenBuilder.extend( + defineConfig({ + source: ['src/global/*.json', 'src/semantic/light-theme/*.json'], + destination: 'light-theme', + options: { + cssSelector: ':where(:root, :host), [data-bezier-theme="light"]', + }, + }), + ), + TokenBuilder.extend( + defineConfig({ + source: ['src/global/*.json', 'src/semantic/dark-theme/*.json'], + destination: 'dark-theme', + options: { cssSelector: '[data-bezier-theme="dark"]' }, + }), + ), + ].forEach((builder) => builder.buildAllPlatforms()) +} + +main() diff --git a/packages/bezier-tokens/scripts/lib/format.ts b/packages/bezier-tokens/scripts/lib/format.ts new file mode 100644 index 0000000000..d757e21a99 --- /dev/null +++ b/packages/bezier-tokens/scripts/lib/format.ts @@ -0,0 +1,41 @@ +import { + type Format, + type Named, + formatHelpers, +} from 'style-dictionary' + +type CustomFormat = Named + +const { fileHeader } = formatHelpers + +export const customJsCjs: CustomFormat = { + name: 'custom/js/cjs', + formatter({ dictionary, file }) { + return ( + `${fileHeader({ file }) + }module.exports = {` + + `\n${ + dictionary.allTokens + .map((token) => ` "${token.name}": ${JSON.stringify(token.value)},`) + .join('\n') + }\n` + + '}' + ) + }, +} + +export const customJsEsm: CustomFormat = { + name: 'custom/js/esm', + formatter({ dictionary, file }) { + return ( + `${fileHeader({ file }) + }export default {` + + `\n${ + dictionary.allTokens + .map((token) => ` "${token.name}": ${JSON.stringify(token.value)},`) + .join('\n') + }\n` + + '}' + ) + }, +} diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts new file mode 100644 index 0000000000..0d8d2994bd --- /dev/null +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -0,0 +1,19 @@ +import type { + Named, + Transform, +} from 'style-dictionary' + +type CustomTransform = Named> + +export const customFontPxToRem: CustomTransform = { + name: 'custom/font/pxToRem', + type: 'value', + transitive: true, + matcher(token) { + const { attributes: { category, type } = {} } = token + return category === 'font' && (type === 'size' || type === 'line-height') + }, + transformer(token, options) { + return `${token.value / ((options && options.basePxFontSize) || 16)}rem` + }, +} diff --git a/packages/bezier-tokens/scripts/lib/utils.ts b/packages/bezier-tokens/scripts/lib/utils.ts new file mode 100644 index 0000000000..2c54293505 --- /dev/null +++ b/packages/bezier-tokens/scripts/lib/utils.ts @@ -0,0 +1,2 @@ +export const toCamelCase = (str: string) => + str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase()) diff --git a/packages/bezier-tokens/src/global/color.json b/packages/bezier-tokens/src/global/color.json new file mode 100644 index 0000000000..5599048838 --- /dev/null +++ b/packages/bezier-tokens/src/global/color.json @@ -0,0 +1,438 @@ +{ + "blue": { + "300": { + "value": "#6687FF" + }, + "300-40": { + "value": "#6687FF66" + }, + "300-30": { + "value": "#6687FF4D" + }, + "300-20": { + "value": "#6687FF33" + }, + "400": { + "value": "#5E56F0" + }, + "400-30": { + "value": "#5E56F04D" + }, + "400-20": { + "value": "#5E56F033" + }, + "400-10": { + "value": "#5E56F01A" + }, + "500": { + "value": "#4E40C9" + } + }, + "cobalt": { + "300": { + "value": "#47C8FF" + }, + "300-40": { + "value": "#47C8FF66" + }, + "300-30": { + "value": "#47C8FF4D" + }, + "300-20": { + "value": "#47C8FF33" + }, + "400": { + "value": "#329BE7" + }, + "400-30": { + "value": "#329BE74D" + }, + "400-20": { + "value": "#329BE733" + }, + "400-10": { + "value": "#329BE71A" + }, + "500": { + "value": "#327AB8" + } + }, + "teal": { + "300": { + "value": "#3CDDCD" + }, + "300-40": { + "value": "#3CDDCD66" + }, + "300-30": { + "value": "#3CDDCD4D" + }, + "300-20": { + "value": "#3CDDCD33" + }, + "400": { + "value": "#0FB3A3" + }, + "400-30": { + "value": "#0FB3A34D" + }, + "400-20": { + "value": "#0FB3A333" + }, + "400-10": { + "value": "#0FB3A31A" + }, + "500": { + "value": "#449C8A" + } + }, + "green": { + "300": { + "value": "#3ACF5A" + }, + "300-40": { + "value": "#3ACF5A66" + }, + "300-30": { + "value": "#3ACF5A4D" + }, + "300-20": { + "value": "#3ACF5A33" + }, + "400": { + "value": "#31A552" + }, + "400-30": { + "value": "#31A5524D" + }, + "400-20": { + "value": "#31A55233" + }, + "400-10": { + "value": "#31A5521A" + }, + "500": { + "value": "#41904F" + } + }, + "olive": { + "300": { + "value": "#CAD548" + }, + "300-40": { + "value": "#CAD54866" + }, + "300-30": { + "value": "#CAD5484D" + }, + "300-20": { + "value": "#CAD54833" + }, + "400": { + "value": "#A0A540" + }, + "400-30": { + "value": "#A0A5404D" + }, + "400-20": { + "value": "#A0A54033" + }, + "400-10": { + "value": "#A0A5401A" + }, + "500": { + "value": "#818628" + } + }, + "yellow": { + "300": { + "value": "#FDD353" + }, + "300-40": { + "value": "#FDD35366" + }, + "300-30": { + "value": "#FDD3534D" + }, + "300-20": { + "value": "#FDD35333" + }, + "400": { + "value": "#EDBC40" + }, + "400-30": { + "value": "#EDBC404D" + }, + "400-20": { + "value": "#EDBC4033" + }, + "400-10": { + "value": "#EDBC401A" + }, + "500": { + "value": "#C39E37" + } + }, + "orange": { + "300": { + "value": "#FFAB5C" + }, + "300-40": { + "value": "#FFAB5C66" + }, + "300-30": { + "value": "#FFAB5C4D" + }, + "300-20": { + "value": "#FFAB5C33" + }, + "400": { + "value": "#F4800B" + }, + "400-30": { + "value": "#F4800B4D" + }, + "400-20": { + "value": "#F4800B33" + }, + "400-10": { + "value": "#F4800B1A" + }, + "500": { + "value": "#C57417" + } + }, + "red": { + "300": { + "value": "#FF5C5C" + }, + "300-40": { + "value": "#FF5C5C66" + }, + "300-30": { + "value": "#FF5C5C4D" + }, + "300-20": { + "value": "#FF5C5C33" + }, + "400": { + "value": "#E94E58" + }, + "400-30": { + "value": "#E94E584D" + }, + "400-20": { + "value": "#E94E5833" + }, + "400-10": { + "value": "#E94E581A" + }, + "500": { + "value": "#AC3E46" + } + }, + "pink": { + "300": { + "value": "#EC6FD3" + }, + "300-40": { + "value": "#EC6FD366" + }, + "300-30": { + "value": "#EC6FD34D" + }, + "300-20": { + "value": "#EC6FD333" + }, + "400": { + "value": "#CB48AD" + }, + "400-30": { + "value": "#CB48AD4D" + }, + "400-20": { + "value": "#CB48AD33" + }, + "400-10": { + "value": "#CB48AD1A" + }, + "500": { + "value": "#A32E92" + } + }, + "purple": { + "300": { + "value": "#B570FF" + }, + "300-40": { + "value": "#B570FF66" + }, + "300-30": { + "value": "#B570FF4D" + }, + "300-20": { + "value": "#B570FF33" + }, + "400": { + "value": "#915CE0" + }, + "400-30": { + "value": "#915CE04D" + }, + "400-20": { + "value": "#915CE033" + }, + "400-10": { + "value": "#915CE01A" + }, + "500": { + "value": "#6B23B3" + } + }, + "navy": { + "300": { + "value": "#647CC9" + }, + "300-40": { + "value": "#647CC966" + }, + "300-30": { + "value": "#647CC94D" + }, + "300-20": { + "value": "#647CC933" + }, + "400": { + "value": "#3A4F8D" + }, + "400-30": { + "value": "#3A4F8D4D" + }, + "400-20": { + "value": "#3A4F8D33" + }, + "400-10": { + "value": "#3A4F8D1A" + }, + "500": { + "value": "#333D5B" + } + }, + "grey": { + "50": { + "value": "#FCFCFC" + }, + "50-80": { + "value": "#FCFCFCCC" + }, + "100": { + "value": "#F7F7F8" + }, + "100-90": { + "value": "#F7F7F8E6" + }, + "100-80": { + "value": "#F7F7F8CC" + }, + "200": { + "value": "#EFEFF0" + }, + "200-80": { + "value": "#EFEFF0CC" + }, + "500": { + "value": "#A7A7AA" + }, + "700": { + "value": "#464748" + }, + "700-80": { + "value": "#464748CC" + }, + "800": { + "value": "#313234" + }, + "800-90": { + "value": "#313234E6" + }, + "800-80": { + "value": "#313234CC" + }, + "850": { + "value": "#2A2B2D" + }, + "850-80": { + "value": "#2A2B2DCC" + }, + "900": { + "value": "#242428" + }, + "900-90": { + "value": "#242428E6" + } + }, + "white": { + "100": { + "value": "#FFFFFF" + }, + "90": { + "value": "#FFFFFFE6" + }, + "80": { + "value": "#FFFFFFCC" + }, + "60": { + "value": "#FFFFFF99" + }, + "40": { + "value": "#FFFFFF66" + }, + "20": { + "value": "#FFFFFF33" + }, + "12": { + "value": "#FFFFFF1F" + }, + "8": { + "value": "#FFFFFF14" + }, + "5": { + "value": "#FFFFFF0D" + } + }, + "black": { + "100": { + "value": "#000000" + }, + "85": { + "value": "#000000D9" + }, + "60": { + "value": "#00000099" + }, + "40": { + "value": "#00000066" + }, + "30": { + "value": "#0000004D" + }, + "22": { + "value": "#00000038" + }, + "20": { + "value": "#00000033" + }, + "15": { + "value": "#00000026" + }, + "8": { + "value": "#00000014" + }, + "5": { + "value": "#0000000D" + }, + "3": { + "value": "#00000008" + } + } +} diff --git a/packages/bezier-tokens/src/global/font.json b/packages/bezier-tokens/src/global/font.json new file mode 100644 index 0000000000..8210c041ae --- /dev/null +++ b/packages/bezier-tokens/src/global/font.json @@ -0,0 +1,95 @@ +{ + "font": { + "size": { + "11": { + "value": "11" + }, + "12": { + "value": "12" + }, + "13": { + "value": "13" + }, + "14": { + "value": "14" + }, + "15": { + "value": "15" + }, + "16": { + "value": "16" + }, + "17": { + "value": "17" + }, + "18": { + "value": "18" + }, + "22": { + "value": "22" + }, + "24": { + "value": "24" + }, + "30": { + "value": "30" + }, + "36": { + "value": "36" + } + }, + "line-height": { + "16": { + "value": "16" + }, + "18": { + "value": "18" + }, + "20": { + "value": "20" + }, + "22": { + "value": "22" + }, + "24": { + "value": "24" + }, + "28": { + "value": "28" + }, + "32": { + "value": "32" + }, + "36": { + "value": "36" + }, + "44": { + "value": "44" + } + }, + "weight": { + "400": { + "value": "400" + }, + "700": { + "value": "700" + } + }, + "family": { + "sans": { + "system": { + "value": "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" + }, + "kr": { + "value": "'Inter', 'NotoSansKR', 'NotoSansJP', {font.family.sans.system}" + }, + "jp": { + "value": "'Inter', 'NotoSansJP', 'NotoSansKR', {font.family.sans.system}" + } + }, + "mono": { + "value": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace" + } + } + } +} diff --git a/packages/bezier-tokens/src/global/radius.json b/packages/bezier-tokens/src/global/radius.json new file mode 100644 index 0000000000..5e3f794831 --- /dev/null +++ b/packages/bezier-tokens/src/global/radius.json @@ -0,0 +1,46 @@ +{ + "radius": { + "2": { + "value": "2" + }, + "3": { + "value": "3" + }, + "4": { + "value": "4" + }, + "6": { + "value": "6" + }, + "8": { + "value": "8" + }, + "10": { + "value": "10" + }, + "12": { + "value": "12" + }, + "14": { + "value": "14" + }, + "16": { + "value": "16" + }, + "20": { + "value": "20" + }, + "32": { + "value": "32" + }, + "44": { + "value": "44" + }, + "42-p": { + "value": "42%" + }, + "100-p": { + "value": "100%" + } + } +} diff --git a/packages/bezier-tokens/src/global/transition.json b/packages/bezier-tokens/src/global/transition.json new file mode 100644 index 0000000000..70d39abe68 --- /dev/null +++ b/packages/bezier-tokens/src/global/transition.json @@ -0,0 +1,18 @@ +{ + "transition": { + "easing": { + "value": "cubic-bezier(.3,0,0,1)" + }, + "duration": { + "s": { + "value": "150ms" + }, + "m": { + "value": "300ms" + }, + "l": { + "value": "450ms" + } + } + } +} diff --git a/packages/bezier-tokens/src/semantic/dark-theme/color.json b/packages/bezier-tokens/src/semantic/dark-theme/color.json new file mode 100644 index 0000000000..2c946dcf9f --- /dev/null +++ b/packages/bezier-tokens/src/semantic/dark-theme/color.json @@ -0,0 +1,369 @@ +{ + "bg": { + "white": { + "high": { + "value": "{grey.700}" + }, + "normal": { + "value": "{grey.900}" + }, + "low": { + "value": "{grey.800}" + }, + "dim": { + "dark": { + "value": "{black.60}" + }, + "light": { + "value": "{black.20}" + } + } + }, + "gnb": { + "value": "{grey.700-80}" + }, + "navi": { + "value": "{grey.800-80}" + }, + "header": { + "value": "{grey.800}", + "float": { + "value": "{grey.800-80}" + } + }, + "lounge": { + "value": "{grey.800-90}" + }, + "black": { + "darkest": { + "value": "{white.60}" + }, + "darker": { + "value": "{white.40}" + }, + "dark": { + "value": "{white.20}" + }, + "light": { + "value": "{white.12}" + }, + "lighter": { + "value": "{white.8}" + }, + "lightest": { + "value": "{white.5}" + } + }, + "grey": { + "darkest": { + "value": "{white.100}" + }, + "dark": { + "value": "{grey.500}" + }, + "dim": { + "lightest": { + "value": "{grey.850-80}" + } + }, + "light": { + "value": "{grey.700}" + }, + "lighter": { + "value": "{grey.800}" + }, + "lightest": { + "value": "{grey.850}" + } + } + }, + "bgtxt": { + "blue": { + "dark": { + "value": "{blue.400}" + }, + "normal": { + "value": "{blue.300}" + }, + "light": { + "value": "{blue.300-40}" + }, + "lighter": { + "value": "{blue.300-30}" + }, + "lightest": { + "value": "{blue.300-20}" + } + }, + "cobalt": { + "dark": { + "value": "{cobalt.400}" + }, + "normal": { + "value": "{cobalt.300}" + }, + "light": { + "value": "{cobalt.300-40}" + }, + "lighter": { + "value": "{cobalt.300-30}" + }, + "lightest": { + "value": "{cobalt.300-20}" + } + }, + "teal": { + "dark": { + "value": "{teal.400}" + }, + "normal": { + "value": "{teal.300}" + }, + "light": { + "value": "{teal.300-40}" + }, + "lighter": { + "value": "{teal.300-30}" + }, + "lightest": { + "value": "{teal.300-20}" + } + }, + "green": { + "dark": { + "value": "{green.400}" + }, + "normal": { + "value": "{green.300}" + }, + "light": { + "value": "{green.300-40}" + }, + "lighter": { + "value": "{green.300-30}" + }, + "lightest": { + "value": "{green.300-20}" + } + }, + "olive": { + "dark": { + "value": "{olive.400}" + }, + "normal": { + "value": "{olive.300}" + }, + "light": { + "value": "{olive.300-40}" + }, + "lighter": { + "value": "{olive.300-30}" + }, + "lightest": { + "value": "{olive.300-20}" + } + }, + "yellow": { + "dark": { + "value": "{yellow.400}" + }, + "normal": { + "value": "{yellow.300}" + }, + "light": { + "value": "{yellow.300-40}" + }, + "lighter": { + "value": "{yellow.300-30}" + }, + "lightest": { + "value": "{yellow.300-20}" + } + }, + "orange": { + "dark": { + "value": "{orange.400}" + }, + "normal": { + "value": "{orange.300}" + }, + "light": { + "value": "{orange.300-40}" + }, + "lighter": { + "value": "{orange.300-30}" + }, + "lightest": { + "value": "{orange.300-20}" + } + }, + "red": { + "dark": { + "value": "{red.400}" + }, + "normal": { + "value": "{red.300}" + }, + "light": { + "value": "{red.300-40}" + }, + "lighter": { + "value": "{red.300-30}" + }, + "lightest": { + "value": "{red.300-20}" + } + }, + "pink": { + "dark": { + "value": "{pink.400}" + }, + "normal": { + "value": "{pink.300}" + }, + "light": { + "value": "{pink.300-40}" + }, + "lighter": { + "value": "{pink.300-30}" + }, + "lightest": { + "value": "{pink.300-20}" + } + }, + "purple": { + "dark": { + "value": "{purple.400}" + }, + "normal": { + "value": "{purple.300}" + }, + "light": { + "value": "{purple.300-40}" + }, + "lighter": { + "value": "{purple.300-30}" + }, + "lightest": { + "value": "{purple.300-20}" + } + }, + "navy": { + "dark": { + "value": "{navy.400}" + }, + "normal": { + "value": "{navy.300}" + }, + "light": { + "value": "{navy.300-40}" + }, + "lighter": { + "value": "{navy.300-30}" + }, + "lightest": { + "value": "{navy.300-20}" + } + }, + "absolute": { + "black": { + "dark": { + "value": "{black.100}" + }, + "normal": { + "value": "{black.85}" + }, + "light": { + "value": "{black.60}" + }, + "lighter": { + "value": "{black.40}" + }, + "lightest": { + "value": "{black.20}" + } + }, + "white": { + "dark": { + "value": "{white.100}" + }, + "normal": { + "value": "{white.90}" + }, + "light": { + "value": "{white.60}" + }, + "lighter": { + "value": "{white.40}" + }, + "lightest": { + "value": "{white.20}" + } + } + } + }, + "txt": { + "black": { + "pure": { + "value": "{white.100}" + }, + "darkest": { + "value": "{white.80}" + }, + "darker": { + "value": "{white.60}" + }, + "dark": { + "value": "{white.40}" + } + }, + "white": { + "normal": { + "value": "{grey.900}" + } + } + }, + "bdr": { + "black": { + "dark": { + "value": "{white.20}" + }, + "light": { + "value": "{white.12}" + }, + "lightest": { + "value": "{white.5}" + } + }, + "grey": { + "light": { + "value": "{grey.700}" + } + }, + "white": { + "value": "{grey.700}" + } + }, + "shdw": { + "xlarge": { + "value": "{black.60}" + }, + "large": { + "value": "{black.40}" + }, + "medium": { + "value": "{black.20}" + }, + "small": { + "value": "{black.15}" + }, + "base": { + "value": "{black.8}" + }, + "inner": { + "base": { + "value": "{white.8}" + } + } + } +} diff --git a/packages/bezier-tokens/src/semantic/light-theme/color.json b/packages/bezier-tokens/src/semantic/light-theme/color.json new file mode 100644 index 0000000000..45417e4082 --- /dev/null +++ b/packages/bezier-tokens/src/semantic/light-theme/color.json @@ -0,0 +1,369 @@ +{ + "bg": { + "white": { + "high": { + "value": "{white.100}" + }, + "normal": { + "value": "{white.100}" + }, + "low": { + "value": "{white.100}" + }, + "dim": { + "dark": { + "value": "{white.60}" + }, + "light": { + "value": "{white.20}" + } + } + }, + "gnb": { + "value": "{grey.200-80}" + }, + "navi": { + "value": "{grey.100-80}" + }, + "header": { + "value": "{white.100}", + "float": { + "value": "{white.90}" + } + }, + "lounge": { + "value": "{grey.100-90}" + }, + "black": { + "darkest": { + "value": "{black.60}" + }, + "darker": { + "value": "{black.40}" + }, + "dark": { + "value": "{black.15}" + }, + "light": { + "value": "{black.8}" + }, + "lighter": { + "value": "{black.5}" + }, + "lightest": { + "value": "{black.3}" + } + }, + "grey": { + "darkest": { + "value": "{grey.900}" + }, + "dark": { + "value": "{grey.500}" + }, + "dim": { + "lightest": { + "value": "{grey.50-80}" + } + }, + "light": { + "value": "{grey.200}" + }, + "lighter": { + "value": "{grey.100}" + }, + "lightest": { + "value": "{grey.50}" + } + } + }, + "bgtxt": { + "blue": { + "dark": { + "value": "{blue.500}" + }, + "normal": { + "value": "{blue.400}" + }, + "light": { + "value": "{blue.400-30}" + }, + "lighter": { + "value": "{blue.400-20}" + }, + "lightest": { + "value": "{blue.400-10}" + } + }, + "cobalt": { + "dark": { + "value": "{cobalt.500}" + }, + "normal": { + "value": "{cobalt.400}" + }, + "light": { + "value": "{cobalt.400-30}" + }, + "lighter": { + "value": "{cobalt.400-20}" + }, + "lightest": { + "value": "{cobalt.400-10}" + } + }, + "teal": { + "dark": { + "value": "{teal.500}" + }, + "normal": { + "value": "{teal.400}" + }, + "light": { + "value": "{teal.400-30}" + }, + "lighter": { + "value": "{teal.400-20}" + }, + "lightest": { + "value": "{teal.400-10}" + } + }, + "green": { + "dark": { + "value": "{green.500}" + }, + "normal": { + "value": "{green.400}" + }, + "light": { + "value": "{green.400-30}" + }, + "lighter": { + "value": "{green.400-20}" + }, + "lightest": { + "value": "{green.400-10}" + } + }, + "olive": { + "dark": { + "value": "{olive.500}" + }, + "normal": { + "value": "{olive.400}" + }, + "light": { + "value": "{olive.400-30}" + }, + "lighter": { + "value": "{olive.400-20}" + }, + "lightest": { + "value": "{olive.400-10}" + } + }, + "yellow": { + "dark": { + "value": "{yellow.500}" + }, + "normal": { + "value": "{yellow.400}" + }, + "light": { + "value": "{yellow.400-30}" + }, + "lighter": { + "value": "{yellow.400-20}" + }, + "lightest": { + "value": "{yellow.400-10}" + } + }, + "orange": { + "dark": { + "value": "{orange.500}" + }, + "normal": { + "value": "{orange.400}" + }, + "light": { + "value": "{orange.400-30}" + }, + "lighter": { + "value": "{orange.400-20}" + }, + "lightest": { + "value": "{orange.400-10}" + } + }, + "red": { + "dark": { + "value": "{red.500}" + }, + "normal": { + "value": "{red.400}" + }, + "light": { + "value": "{red.400-30}" + }, + "lighter": { + "value": "{red.400-20}" + }, + "lightest": { + "value": "{red.400-10}" + } + }, + "pink": { + "dark": { + "value": "{pink.500}" + }, + "normal": { + "value": "{pink.400}" + }, + "light": { + "value": "{pink.400-30}" + }, + "lighter": { + "value": "{pink.400-20}" + }, + "lightest": { + "value": "{pink.400-10}" + } + }, + "purple": { + "dark": { + "value": "{purple.500}" + }, + "normal": { + "value": "{purple.400}" + }, + "light": { + "value": "{purple.400-30}" + }, + "lighter": { + "value": "{purple.400-20}" + }, + "lightest": { + "value": "{purple.400-10}" + } + }, + "navy": { + "dark": { + "value": "{navy.500}" + }, + "normal": { + "value": "{navy.400}" + }, + "light": { + "value": "{navy.400-30}" + }, + "lighter": { + "value": "{navy.400-20}" + }, + "lightest": { + "value": "{navy.400-10}" + } + }, + "absolute": { + "black": { + "dark": { + "value": "{black.100}" + }, + "normal": { + "value": "{black.85}" + }, + "light": { + "value": "{black.60}" + }, + "lighter": { + "value": "{black.40}" + }, + "lightest": { + "value": "{black.20}" + } + }, + "white": { + "dark": { + "value": "{white.100}" + }, + "normal": { + "value": "{white.90}" + }, + "light": { + "value": "{white.60}" + }, + "lighter": { + "value": "{white.40}" + }, + "lightest": { + "value": "{white.20}" + } + } + } + }, + "txt": { + "black": { + "pure": { + "value": "{black.100}" + }, + "darkest": { + "value": "{black.85}" + }, + "darker": { + "value": "{black.60}" + }, + "dark": { + "value": "{black.40}" + } + }, + "white": { + "normal": { + "value": "{white.100}" + } + } + }, + "bdr": { + "black": { + "dark": { + "value": "{black.15}" + }, + "light": { + "value": "{black.8}" + }, + "lightest": { + "value": "{black.3}" + } + }, + "grey": { + "light": { + "value": "{grey.200}" + } + }, + "white": { + "value": "{white.100}" + } + }, + "shdw": { + "xlarge": { + "value": "{black.30}" + }, + "large": { + "value": "{black.22}" + }, + "medium": { + "value": "{black.15}" + }, + "small": { + "value": "{black.8}" + }, + "base": { + "value": "{black.5}" + }, + "inner": { + "base": { + "value": "{white.12}" + } + } + } +} diff --git a/packages/bezier-tokens/tsconfig.build.json b/packages/bezier-tokens/tsconfig.build.json new file mode 100644 index 0000000000..16baf02f24 --- /dev/null +++ b/packages/bezier-tokens/tsconfig.build.json @@ -0,0 +1,11 @@ +{ + "extends": "./tsconfig.json", + "include": ["dist/**/*"], + "compilerOptions": { + "allowJs": true, + "declaration": true, + "emitDeclarationOnly": true, + "outDir": "dist/types", + "declarationMap": true + } +} diff --git a/packages/bezier-tokens/tsconfig.eslint.json b/packages/bezier-tokens/tsconfig.eslint.json new file mode 100644 index 0000000000..5adcaa142b --- /dev/null +++ b/packages/bezier-tokens/tsconfig.eslint.json @@ -0,0 +1,4 @@ +{ + "extends": "tsconfig/eslint.json", + "include": ["scripts/**/*", ".eslintrc.js"] +} diff --git a/packages/bezier-tokens/tsconfig.json b/packages/bezier-tokens/tsconfig.json new file mode 100644 index 0000000000..7925837e11 --- /dev/null +++ b/packages/bezier-tokens/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "tsconfig/script.json", + "compilerOptions": { + "target": "es2020", + "module": "nodenext", + "strict": true, + "skipLibCheck": true, + "esModuleInterop": true + }, + "include": ["scripts"], + "exclude": ["node_modules"] +} diff --git a/yarn.lock b/yarn.lock index 6ceea352d3..6154e4cbe5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2556,6 +2556,16 @@ __metadata: languageName: unknown linkType: soft +"@channel.io/bezier-tokens@workspace:packages/bezier-tokens": + version: 0.0.0-use.local + resolution: "@channel.io/bezier-tokens@workspace:packages/bezier-tokens" + dependencies: + eslint-config-bezier: "workspace:*" + style-dictionary: ^3.9.0 + tsconfig: "workspace:*" + languageName: unknown + linkType: soft + "@channel.io/eslint-config@npm:^1.5.1": version: 1.5.1 resolution: "@channel.io/eslint-config@npm:1.5.1" @@ -7505,9 +7515,9 @@ __metadata: linkType: hard "@types/mime@npm:^1": - version: 1.3.4 - resolution: "@types/mime@npm:1.3.4" - checksum: d8670d2993773903e00fc0d7aa3254be2f8b384300ce3278999d057afbb80a5f71543d656d9d9725d691088c0b94e4acfca84359becf122cdf5942e53c9a75ce + version: 1.3.2 + resolution: "@types/mime@npm:1.3.2" + checksum: 0493368244cced1a69cb791b485a260a422e6fcc857782e1178d1e6f219f1b161793e9f87f5fae1b219af0f50bee24fcbe733a18b4be8fdd07a38a8fb91146fd languageName: node linkType: hard @@ -9435,6 +9445,7 @@ __metadata: jest-environment-jsdom: ^29.6.4 npm-run-all: ^4.1.5 stylelint: ^13.13.1 + ts-node: ^10.9.1 turbo: ^1.10.13 typescript: ^4.9.5 typescript-plugin-css-modules: ^5.0.1 @@ -9830,6 +9841,17 @@ __metadata: languageName: node linkType: hard +"capital-case@npm:^1.0.4": + version: 1.0.4 + resolution: "capital-case@npm:1.0.4" + dependencies: + no-case: ^3.0.4 + tslib: ^2.0.3 + upper-case-first: ^2.0.2 + checksum: 41fa8fa87f6d24d0835a2b4a9341a3eaecb64ac29cd7c5391f35d6175a0fa98ab044e7f2602e1ec3afc886231462ed71b5b80c590b8b41af903ec2c15e5c5931 + languageName: node + linkType: hard + "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -9875,6 +9897,26 @@ __metadata: languageName: node linkType: hard +"change-case@npm:^4.1.2": + version: 4.1.2 + resolution: "change-case@npm:4.1.2" + dependencies: + camel-case: ^4.1.2 + capital-case: ^1.0.4 + constant-case: ^3.0.4 + dot-case: ^3.0.4 + header-case: ^2.0.4 + no-case: ^3.0.4 + param-case: ^3.0.4 + pascal-case: ^3.1.2 + path-case: ^3.0.4 + sentence-case: ^3.0.4 + snake-case: ^3.0.4 + tslib: ^2.0.3 + checksum: e4bc4a093a1f7cce8b33896665cf9e456e3bc3cc0def2ad7691b1994cfca99b3188d0a513b16855b01a6bd20692fcde12a7d4d87a5615c4c515bbbf0e651f116 + languageName: node + linkType: hard + "char-regex@npm:^1.0.2": version: 1.0.2 resolution: "char-regex@npm:1.0.2" @@ -10397,6 +10439,17 @@ __metadata: languageName: node linkType: hard +"constant-case@npm:^3.0.4": + version: 3.0.4 + resolution: "constant-case@npm:3.0.4" + dependencies: + no-case: ^3.0.4 + tslib: ^2.0.3 + upper-case: ^2.0.2 + checksum: 6c3346d51afc28d9fae922e966c68eb77a19d94858dba230dd92d7b918b37d36db50f0311e9ecf6847e43e934b1c01406a0936973376ab17ec2c471fbcfb2cf3 + languageName: node + linkType: hard + "constants-browserify@npm:^1.0.0": version: 1.0.0 resolution: "constants-browserify@npm:1.0.0" @@ -14000,6 +14053,16 @@ __metadata: languageName: node linkType: hard +"header-case@npm:^2.0.4": + version: 2.0.4 + resolution: "header-case@npm:2.0.4" + dependencies: + capital-case: ^1.0.4 + tslib: ^2.0.3 + checksum: 571c83eeb25e8130d172218712f807c0b96d62b020981400bccc1503a7cf14b09b8b10498a962d2739eccf231d950e3848ba7d420b58a6acd2f9283439546cd9 + languageName: node + linkType: hard + "hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" @@ -16012,7 +16075,7 @@ __metadata: languageName: node linkType: hard -"jsonc-parser@npm:^3.2.0": +"jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0": version: 3.2.0 resolution: "jsonc-parser@npm:3.2.0" checksum: 946dd9a5f326b745aa326d48a7257e3f4a4b62c5e98ec8e49fa2bdd8d96cef7e6febf1399f5c7016114fd1f68a1c62c6138826d5d90bc650448e3cf0951c53c7 @@ -18007,6 +18070,16 @@ __metadata: languageName: node linkType: hard +"path-case@npm:^3.0.4": + version: 3.0.4 + resolution: "path-case@npm:3.0.4" + dependencies: + dot-case: ^3.0.4 + tslib: ^2.0.3 + checksum: 61de0526222629f65038a66f63330dd22d5b54014ded6636283e1d15364da38b3cf29e4433aa3f9d8b0dba407ae2b059c23b0104a34ee789944b1bc1c5c7e06d + languageName: node + linkType: hard + "path-exists@npm:^3.0.0": version: 3.0.0 resolution: "path-exists@npm:3.0.0" @@ -20689,6 +20762,17 @@ __metadata: languageName: node linkType: hard +"sentence-case@npm:^3.0.4": + version: 3.0.4 + resolution: "sentence-case@npm:3.0.4" + dependencies: + no-case: ^3.0.4 + tslib: ^2.0.3 + upper-case-first: ^2.0.2 + checksum: 3cfe6c0143e649132365695706702d7f729f484fa7b25f43435876efe7af2478243eefb052bacbcce10babf9319fd6b5b6bc59b94c80a1c819bcbb40651465d5 + languageName: node + linkType: hard + "serialize-javascript@npm:^6.0.1": version: 6.0.1 resolution: "serialize-javascript@npm:6.0.1" @@ -21386,6 +21470,25 @@ __metadata: languageName: node linkType: hard +"style-dictionary@npm:^3.9.0": + version: 3.9.0 + resolution: "style-dictionary@npm:3.9.0" + dependencies: + chalk: ^4.0.0 + change-case: ^4.1.2 + commander: ^8.3.0 + fs-extra: ^10.0.0 + glob: ^7.2.0 + json5: ^2.2.2 + jsonc-parser: ^3.0.0 + lodash: ^4.17.15 + tinycolor2: ^1.4.1 + bin: + style-dictionary: bin/style-dictionary + checksum: 70ac197c75e0d97dcbfeb52ed5292b43fa83c5716c2d5a3217f65eaf4812181e847b78a3227271baffc2f5e60b9de1a7d582a3d886a575570ee658ccd687e5ce + languageName: node + linkType: hard + "style-inject@npm:^0.3.0": version: 0.3.0 resolution: "style-inject@npm:0.3.0" @@ -21935,6 +22038,13 @@ __metadata: languageName: node linkType: hard +"tinycolor2@npm:^1.4.1": + version: 1.6.0 + resolution: "tinycolor2@npm:1.6.0" + checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230 + languageName: node + linkType: hard + "tmp@npm:^0.0.33": version: 0.0.33 resolution: "tmp@npm:0.0.33" @@ -22079,7 +22189,7 @@ __metadata: languageName: node linkType: hard -"ts-node@npm:^10.8.1": +"ts-node@npm:^10.8.1, ts-node@npm:^10.9.1": version: 10.9.1 resolution: "ts-node@npm:10.9.1" dependencies: @@ -22844,6 +22954,24 @@ __metadata: languageName: node linkType: hard +"upper-case-first@npm:^2.0.2": + version: 2.0.2 + resolution: "upper-case-first@npm:2.0.2" + dependencies: + tslib: ^2.0.3 + checksum: 4487db4701effe3b54ced4b3e4aa4d9ab06c548f97244d04aafb642eedf96a76d5a03cf5f38f10f415531d5792d1ac6e1b50f2a76984dc6964ad530f12876409 + languageName: node + linkType: hard + +"upper-case@npm:^2.0.2": + version: 2.0.2 + resolution: "upper-case@npm:2.0.2" + dependencies: + tslib: ^2.0.3 + checksum: 508723a2b03ab90cf1d6b7e0397513980fab821cbe79c87341d0e96cedefadf0d85f9d71eac24ab23f526a041d585a575cfca120a9f920e44eb4f8a7cf89121c + languageName: node + linkType: hard + "uri-js@npm:^4.2.2": version: 4.4.1 resolution: "uri-js@npm:4.4.1" From fd4799f77884b4f4fa6711a7f75e4daa76d12ca0 Mon Sep 17 00:00:00 2001 From: Ed Date: Wed, 22 Nov 2023 10:25:38 +0900 Subject: [PATCH 009/238] chore(bezier-tokens): set initial version to 0.0.0 (#1750) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary bezier-tokens 패키지의 초기 버전을 0.0.0 으로 설정하고, changeset에 의해서 0.1.0 으로 버전업되도록 합니다. --- packages/bezier-tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bezier-tokens/package.json b/packages/bezier-tokens/package.json index f2adf7b95c..e5558e3ac8 100644 --- a/packages/bezier-tokens/package.json +++ b/packages/bezier-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-tokens", - "version": "0.1.0", + "version": "0.0.0", "description": "Design tokens for Bezier design system.", "repository": { "type": "git", From 3de94c580eb2569141f4efbd7a20cff713aff5be Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 22 Nov 2023 10:40:02 +0900 Subject: [PATCH 010/238] ci(changesets): version packages (alpha) (#1749) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated. ⚠️⚠️⚠️⚠️⚠️⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`. ⚠️⚠️⚠️⚠️⚠️⚠️ # Releases ## @channel.io/bezier-tokens@0.1.0-alpha.0 ### Minor Changes - First release ([#1685](https://github.com/channel-io/bezier-react/pull/1685)) by @sungik-choi Co-authored-by: github-actions[bot] --- .changeset/pre.json | 4 +++- packages/bezier-tokens/CHANGELOG.md | 7 +++++++ packages/bezier-tokens/package.json | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 packages/bezier-tokens/CHANGELOG.md diff --git a/.changeset/pre.json b/.changeset/pre.json index 7bb59d46d3..57278635ad 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -7,9 +7,11 @@ "@channel.io/bezier-icons": "0.4.0", "@channel.io/bezier-react": "1.8.0", "eslint-config-bezier": "0.0.1", - "tsconfig": "0.0.1" + "tsconfig": "0.0.1", + "@channel.io/bezier-tokens": "0.0.0" }, "changesets": [ + "rare-coats-sing", "tall-maps-lick" ] } diff --git a/packages/bezier-tokens/CHANGELOG.md b/packages/bezier-tokens/CHANGELOG.md new file mode 100644 index 0000000000..ac08f70caa --- /dev/null +++ b/packages/bezier-tokens/CHANGELOG.md @@ -0,0 +1,7 @@ +# @channel.io/bezier-tokens + +## 0.1.0-alpha.0 + +### Minor Changes + +- First release ([#1685](https://github.com/channel-io/bezier-react/pull/1685)) by @sungik-choi diff --git a/packages/bezier-tokens/package.json b/packages/bezier-tokens/package.json index e5558e3ac8..38b0ff74c0 100644 --- a/packages/bezier-tokens/package.json +++ b/packages/bezier-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-tokens", - "version": "0.0.0", + "version": "0.1.0-alpha.0", "description": "Design tokens for Bezier design system.", "repository": { "type": "git", From e9968a6a47d0ccc7eb244f35efd8d5f33011d809 Mon Sep 17 00:00:00 2001 From: Ed Date: Wed, 22 Nov 2023 14:05:38 +0900 Subject: [PATCH 011/238] Apply bezier-tokens to bezier-react's style sheet (#1495) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary bezier-react 스타일 시트의 tokens layer에 bezier-tokens를 적용합니다. ## Details - bezier-tokens alpha.0 버전을 의존성으로 추가하고, 내보낸 토큰 스타일시트를 import 합니다. - base layer에서 tokens layer의 토큰을 사용하게 되어서, 의미상 base layer가 tokens 레이어 뒤에 위치하는 게 적합하다고 판단하여 이동 및 디자인 토큰을 적용합니다. - css reset 의존성 최신 버전으로 업데이트 ### Breaking change? (Yes/No) No ## References - #1685 --- .changeset/silver-pets-hammer.md | 5 + packages/bezier-react/package.json | 3 +- packages/bezier-react/src/styles/_base.scss | 15 +- packages/bezier-react/src/styles/_reset.scss | 1 - packages/bezier-react/src/styles/_tokens.scss | 3 + packages/bezier-react/src/styles/index.scss | 11 +- .../bezier-react/src/styles/tokens/_core.scss | 205 ------------------ .../src/styles/tokens/_index.scss | 15 -- .../styles/tokens/semantic/_dark-theme.scss | 157 -------------- .../src/styles/tokens/semantic/_index.scss | 2 - .../styles/tokens/semantic/_light-theme.scss | 158 -------------- .../bezier-react/src/styles/utils/_index.scss | 1 + .../src/styles/utils/_typography.scss | 3 + yarn.lock | 13 +- 14 files changed, 35 insertions(+), 557 deletions(-) create mode 100644 .changeset/silver-pets-hammer.md create mode 100644 packages/bezier-react/src/styles/_tokens.scss 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 create mode 100644 packages/bezier-react/src/styles/utils/_index.scss create mode 100644 packages/bezier-react/src/styles/utils/_typography.scss 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. diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index f90f6aae00..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", @@ -116,7 +117,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/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss index 3ce7fa1e2f..986b49235a 100644 --- a/packages/bezier-react/src/styles/_base.scss +++ b/packages/bezier-react/src/styles/_base.scss @@ -1,18 +1,17 @@ -$system-fonts: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif; - html { - font-family: 'Inter', 'NotoSansKR', 'NotoSansJP', $system-fonts; + font-size: 62.5%; // 10/16 = 0.625. Make REM calculations easier. + 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 { - color: var(--fg-black-dark); + color: var(--txt-black-dark); opacity: 1; } 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"; * { 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"; diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss index f9fcad8669..60d3de3654 100644 --- a/packages/bezier-react/src/styles/index.scss +++ b/packages/bezier-react/src/styles/index.scss @@ -1,16 +1,19 @@ @use 'sass:meta'; -// TODO: components, utilities layers -@layer reset, base, tokens, components, utilities; +@layer reset, tokens, base, components, utils; @layer reset { @include meta.load-css("reset") } +@layer tokens { + @include meta.load-css("tokens") +} + @layer base { @include meta.load-css("base") } -@layer tokens { - @include meta.load-css("tokens") +@layer utils { + @include meta.load-css("utils") } 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 a4f07c8051..0000000000 --- a/packages/bezier-react/src/styles/tokens/_core.scss +++ /dev/null @@ -1,205 +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-100: 100%; - --radius-smooth-corners: 42%; - - --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); - - --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; - - --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); - - --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; - --grey-200: #EFEFF0; - --grey-500: #A7A7AA; - --grey-700: #464748; - --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); - - --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; - - --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; - - --letter-spacing-0: 0; - --letter-spacing-01: -0.1; - --letter-spacing-04: -0.4; - --letter-spacing-1: -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 7a5f209a82..0000000000 --- a/packages/bezier-react/src/styles/tokens/semantic/_dark-theme.scss +++ /dev/null @@ -1,157 +0,0 @@ -// 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-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-grey-darkest: #FFFFFF; - --bg-grey-dark: #A7A7AA; - --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; - --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 */ -} 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 8e7e205ea0..0000000000 --- a/packages/bezier-react/src/styles/tokens/semantic/_light-theme.scss +++ /dev/null @@ -1,158 +0,0 @@ -// 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-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-grey-darkest: #242428; - --bg-grey-dark: #A7A7AA; - --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; - --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 */ -} diff --git a/packages/bezier-react/src/styles/utils/_index.scss b/packages/bezier-react/src/styles/utils/_index.scss new file mode 100644 index 0000000000..ca815dc914 --- /dev/null +++ b/packages/bezier-react/src/styles/utils/_index.scss @@ -0,0 +1 @@ +@use 'typography'; diff --git a/packages/bezier-react/src/styles/utils/_typography.scss b/packages/bezier-react/src/styles/utils/_typography.scss new file mode 100644 index 0000000000..fe8692290a --- /dev/null +++ b/packages/bezier-react/src/styles/utils/_typography.scss @@ -0,0 +1,3 @@ + + // TODO: Add typography utilities + // TODO: Make externally available via class name diff --git a/yarn.lock b/yarn.lock index 6154e4cbe5..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 @@ -2538,7 +2539,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 @@ -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: @@ -21998,10 +21999,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 5fd109594ecda36a851b2df3aa435c9bfba2b0df Mon Sep 17 00:00:00 2001 From: Ed Date: Wed, 22 Nov 2023 14:05:55 +0900 Subject: [PATCH 012/238] fix invalid design token config (#1752) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary design token의 잘못된 설정을 몇 수정하고, 리팩토링을 적용합니다. ## Details - font-familiy 토큰을 올바른 포맷으로 수정합니다. 불필요해진 system-font 토큰은 제거합니다. - radius 토큰에 누락된 px 유닛을 추가합니다. - cjs/esm 빌드에서 basePxFontSize가 누락되어 rem이 16px 기준으로 계산되고 있었던 걸 수정합니다. - 리팩토링: 변수명 수정 및 함수 분리 ### Breaking change? (Yes/No) Yes (alpha version) --- .changeset/wicked-months-sparkle.md | 5 ++ .../bezier-tokens/scripts/build-tokens.ts | 49 +++++++++++-------- .../bezier-tokens/scripts/lib/transform.ts | 19 ++++++- packages/bezier-tokens/scripts/lib/utils.ts | 2 + packages/bezier-tokens/src/global/font.json | 7 +-- 5 files changed, 55 insertions(+), 27 deletions(-) create mode 100644 .changeset/wicked-months-sparkle.md diff --git a/.changeset/wicked-months-sparkle.md b/.changeset/wicked-months-sparkle.md new file mode 100644 index 0000000000..3ba9d1f0d1 --- /dev/null +++ b/.changeset/wicked-months-sparkle.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +Remove unused tokens and add missing unit to radius tokens. diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 8785f334e7..3b58a18a76 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -1,23 +1,36 @@ -import StyleDictionary, { type Config } from 'style-dictionary' +import StyleDictionary, { + type Config, + type Platform, +} from 'style-dictionary' import { customJsCjs, customJsEsm, } from './lib/format' -import { customFontPxToRem } from './lib/transform' +import { + customFontRem, + customRadiusPx, +} from './lib/transform' import { toCamelCase } from './lib/utils' -const TokenBuilder = StyleDictionary.registerTransform(customFontPxToRem) +const TokenBuilder = StyleDictionary + .registerTransform(customFontRem) + .registerTransform(customRadiusPx) .registerFormat(customJsCjs) .registerFormat(customJsEsm) -const COMMON_WEB_TRANSFORMS = [ - 'attribute/cti', - 'name/cti/kebab', - 'size/rem', - 'color/css', - customFontPxToRem.name, -] +function defineWebPlatform(options: Platform): Platform { + return { + transforms: [ + 'attribute/cti', + 'name/cti/kebab', + customFontRem.name, + customRadiusPx.name, + ], + basePxFontSize: 10, + ...options, + } +} interface DefineConfigOptions { source: string[] @@ -35,8 +48,7 @@ function defineConfig({ return { source, platforms: { - 'js/cjs': { - transforms: COMMON_WEB_TRANSFORMS, + 'web/cjs': defineWebPlatform({ buildPath: 'dist/cjs/', files: [ { @@ -45,9 +57,8 @@ function defineConfig({ filter: (token) => token.filePath.includes(destination), }, ], - }, - 'js/esm': { - transforms: COMMON_WEB_TRANSFORMS, + }), + 'web/esm': defineWebPlatform({ buildPath: 'dist/esm/', files: [ { @@ -56,10 +67,8 @@ function defineConfig({ filter: (token) => token.filePath.includes(destination), }, ], - }, - css: { - transforms: COMMON_WEB_TRANSFORMS, - basePxFontSize: 10, + }), + 'web/css': defineWebPlatform({ buildPath: 'dist/css/', files: [ { @@ -72,7 +81,7 @@ function defineConfig({ }, }, ], - }, + }), }, } } diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts index 0d8d2994bd..9be24d7423 100644 --- a/packages/bezier-tokens/scripts/lib/transform.ts +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -3,10 +3,12 @@ import type { Transform, } from 'style-dictionary' +import { endsWithNumber } from './utils' + type CustomTransform = Named> -export const customFontPxToRem: CustomTransform = { - name: 'custom/font/pxToRem', +export const customFontRem: CustomTransform = { + name: 'custom/font/rem', type: 'value', transitive: true, matcher(token) { @@ -17,3 +19,16 @@ export const customFontPxToRem: CustomTransform = { return `${token.value / ((options && options.basePxFontSize) || 16)}rem` }, } + +export const customRadiusPx: CustomTransform = { + name: 'custom/radius/px', + type: 'value', + transitive: true, + matcher(token) { + const { attributes: { category } = {} } = token + return category === 'radius' + }, + transformer(token) { + return endsWithNumber(token.value) ? `${token.value}px` : token.value + }, +} diff --git a/packages/bezier-tokens/scripts/lib/utils.ts b/packages/bezier-tokens/scripts/lib/utils.ts index 2c54293505..baeec903a9 100644 --- a/packages/bezier-tokens/scripts/lib/utils.ts +++ b/packages/bezier-tokens/scripts/lib/utils.ts @@ -1,2 +1,4 @@ export const toCamelCase = (str: string) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase()) + +export const endsWithNumber = (str: string) => /\d$/.test(str) diff --git a/packages/bezier-tokens/src/global/font.json b/packages/bezier-tokens/src/global/font.json index 8210c041ae..d8946772cc 100644 --- a/packages/bezier-tokens/src/global/font.json +++ b/packages/bezier-tokens/src/global/font.json @@ -77,14 +77,11 @@ }, "family": { "sans": { - "system": { - "value": "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" - }, "kr": { - "value": "'Inter', 'NotoSansKR', 'NotoSansJP', {font.family.sans.system}" + "value": "'Inter', 'NotoSansKR', 'NotoSansJP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" }, "jp": { - "value": "'Inter', 'NotoSansJP', 'NotoSansKR', {font.family.sans.system}" + "value": "'Inter', 'NotoSansJP', 'NotoSansKR', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" } }, "mono": { From 11b35877dfd3e89c849537008bc82f38a454953a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 23 Nov 2023 15:24:52 +0900 Subject: [PATCH 013/238] ci(changesets): version packages (alpha) (#1753) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated. ⚠️⚠️⚠️⚠️⚠️⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`. ⚠️⚠️⚠️⚠️⚠️⚠️ # Releases ## @channel.io/bezier-react@2.0.0-alpha.1 ### Minor Changes - Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector. ([#1495](https://github.com/channel-io/bezier-react/pull/1495)) by @sungik-choi ## @channel.io/bezier-tokens@0.1.0-alpha.1 ### Minor Changes - Remove unused tokens and add missing unit to radius tokens. ([#1752](https://github.com/channel-io/bezier-react/pull/1752)) by @sungik-choi ## bezier-figma-plugin@0.4.11-alpha.0 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@2.0.0-alpha.1 Co-authored-by: github-actions[bot] --- .changeset/pre.json | 4 +++- packages/bezier-figma-plugin/CHANGELOG.md | 7 +++++++ packages/bezier-figma-plugin/package.json | 2 +- packages/bezier-react/CHANGELOG.md | 6 ++++++ packages/bezier-react/package.json | 4 ++-- packages/bezier-tokens/CHANGELOG.md | 6 ++++++ packages/bezier-tokens/package.json | 2 +- yarn.lock | 4 ++-- 8 files changed, 28 insertions(+), 7 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 57278635ad..c736687c16 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -12,6 +12,8 @@ }, "changesets": [ "rare-coats-sing", - "tall-maps-lick" + "silver-pets-hammer", + "tall-maps-lick", + "wicked-months-sparkle" ] } diff --git a/packages/bezier-figma-plugin/CHANGELOG.md b/packages/bezier-figma-plugin/CHANGELOG.md index da5b00237d..3a2c4022e2 100644 --- a/packages/bezier-figma-plugin/CHANGELOG.md +++ b/packages/bezier-figma-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # bezier-figma-plugin +## 0.4.11-alpha.0 + +### Patch Changes + +- Updated dependencies + - @channel.io/bezier-react@2.0.0-alpha.1 + ## 0.4.10 ### Patch Changes diff --git a/packages/bezier-figma-plugin/package.json b/packages/bezier-figma-plugin/package.json index eb7d27fd07..bc844c9c65 100644 --- a/packages/bezier-figma-plugin/package.json +++ b/packages/bezier-figma-plugin/package.json @@ -1,6 +1,6 @@ { "name": "bezier-figma-plugin", - "version": "0.4.10", + "version": "0.4.11-alpha.0", "private": true, "description": "Figma plugin that helps build Bezier design system and increase productivity.", "repository": { diff --git a/packages/bezier-react/CHANGELOG.md b/packages/bezier-react/CHANGELOG.md index 6204c81d15..c35a25ff6c 100644 --- a/packages/bezier-react/CHANGELOG.md +++ b/packages/bezier-react/CHANGELOG.md @@ -1,5 +1,11 @@ # @channel.io/bezier-react +## 2.0.0-alpha.1 + +### Minor Changes + +- Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector. ([#1495](https://github.com/channel-io/bezier-react/pull/1495)) by @sungik-choi + ## 2.0.0-alpha.0 ### Major Changes diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index b951544534..64b8c8e6b2 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-react", - "version": "2.0.0-alpha.0", + "version": "2.0.0-alpha.1", "description": "React components library that implements Bezier design system.", "repository": { "type": "git", @@ -70,7 +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", + "@channel.io/bezier-tokens": "0.1.0-alpha.1", "@mdx-js/react": "^1.6.22", "@rollup/plugin-alias": "^5.0.0", "@rollup/plugin-babel": "^6.0.3", diff --git a/packages/bezier-tokens/CHANGELOG.md b/packages/bezier-tokens/CHANGELOG.md index ac08f70caa..14152842dd 100644 --- a/packages/bezier-tokens/CHANGELOG.md +++ b/packages/bezier-tokens/CHANGELOG.md @@ -1,5 +1,11 @@ # @channel.io/bezier-tokens +## 0.1.0-alpha.1 + +### Minor Changes + +- Remove unused tokens and add missing unit to radius tokens. ([#1752](https://github.com/channel-io/bezier-react/pull/1752)) by @sungik-choi + ## 0.1.0-alpha.0 ### Minor Changes diff --git a/packages/bezier-tokens/package.json b/packages/bezier-tokens/package.json index 38b0ff74c0..45d7529c2c 100644 --- a/packages/bezier-tokens/package.json +++ b/packages/bezier-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-tokens", - "version": "0.1.0-alpha.0", + "version": "0.1.0-alpha.1", "description": "Design tokens for Bezier design system.", "repository": { "type": "git", diff --git a/yarn.lock b/yarn.lock index 1af7ca27ef..1b81c775c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2477,7 +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 + "@channel.io/bezier-tokens": 0.1.0-alpha.1 "@mdx-js/react": ^1.6.22 "@radix-ui/react-checkbox": ^1.0.4 "@radix-ui/react-dialog": ^1.0.4 @@ -2557,7 +2557,7 @@ __metadata: languageName: unknown linkType: soft -"@channel.io/bezier-tokens@0.1.0-alpha.0, @channel.io/bezier-tokens@workspace:packages/bezier-tokens": +"@channel.io/bezier-tokens@0.1.0-alpha.1, @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 a8c65230455ff5eb23b2d7d3d2e28431b9d6b96b Mon Sep 17 00:00:00 2001 From: Ed Date: Thu, 30 Nov 2023 14:49:04 +0900 Subject: [PATCH 014/238] Add z-index and opacity tokens, Add token category to js build artifacts (#1766) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary - z-index와 opacity 디자인 토큰을 추가합니다. - 모든 플랫폼을 위한 토큰은 아니고, bezier-react에서만 사용하기 위한 임시 토큰으로 추가했습니다. (기존 `Constants/` 디렉터리 하위) - JS 빌드 아티팩트에 토큰별 카테고리를 추가합니다. json 파일명이 토큰의 카테고리가 됩니다. 기존 `SemanticNames` 과 같이 카테고리별타입스크립트 타입을 쉽게 뽑아내기 위한 변경입니다. ## Details 토큰별 카테고리에 대해: 아래와 같이 타입을 추출하여 사용할 수 있습니다. ```tsx // AS-IS color: SemanticNames // TO-BE color: keyof typeof tokens.lightTheme.color ``` JS 빌드 아티팩트가 아래와 같은 형식으로 변경됩니다. ```tsx // AS-IS 모두 1-depth로 flat한 구조 // TO-BE export default { "color": { ... } "typography": { ... } ... } ``` > 생각들: > 색상 토큰에 color prefix를 붙이는 걸 고민했으나, 기존 팀의 컨벤션과 마이그레이션 비용을 고려하여 작업하지 않았음. ### Breaking change? (Yes/No) Yes --- .changeset/metal-planets-peel.md | 5 +++ .changeset/silent-falcons-behave.md | 5 +++ packages/bezier-tokens/scripts/lib/format.ts | 44 ++++++++++++++----- .../bezier-tokens/src/global/opacity.json | 7 +++ .../bezier-tokens/src/global/z-index.json | 28 ++++++++++++ 5 files changed, 77 insertions(+), 12 deletions(-) create mode 100644 .changeset/metal-planets-peel.md create mode 100644 .changeset/silent-falcons-behave.md create mode 100644 packages/bezier-tokens/src/global/opacity.json create mode 100644 packages/bezier-tokens/src/global/z-index.json diff --git a/.changeset/metal-planets-peel.md b/.changeset/metal-planets-peel.md new file mode 100644 index 0000000000..5666f8b8ad --- /dev/null +++ b/.changeset/metal-planets-peel.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +Add z-index and opacity tokens. diff --git a/.changeset/silent-falcons-behave.md b/.changeset/silent-falcons-behave.md new file mode 100644 index 0000000000..f996da91ef --- /dev/null +++ b/.changeset/silent-falcons-behave.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +Add categories by token to the JavaScript build file. diff --git a/packages/bezier-tokens/scripts/lib/format.ts b/packages/bezier-tokens/scripts/lib/format.ts index d757e21a99..2660fa66db 100644 --- a/packages/bezier-tokens/scripts/lib/format.ts +++ b/packages/bezier-tokens/scripts/lib/format.ts @@ -11,15 +11,25 @@ const { fileHeader } = formatHelpers export const customJsCjs: CustomFormat = { name: 'custom/js/cjs', formatter({ dictionary, file }) { + const categorizedTokens = dictionary.allTokens.reduce((acc, token) => { + const fileNameWithoutExtension = token.filePath.split('/').pop()!.split('.').shift()! + acc[fileNameWithoutExtension] = acc[fileNameWithoutExtension] || [] + acc[fileNameWithoutExtension].push(token) + return acc + }, {} as Record) + return ( `${fileHeader({ file }) }module.exports = {` + - `\n${ - dictionary.allTokens - .map((token) => ` "${token.name}": ${JSON.stringify(token.value)},`) - .join('\n') - }\n` + - '}' + `${Object.keys(categorizedTokens).map(category => ( + `\n "${category}": {\n` + + `${ + categorizedTokens[category] + .map((token) => ` "${token.name}": ${JSON.stringify(token.value)},`) + .join('\n') + }\n }` + ))}\n` + + '}\n' ) }, } @@ -27,15 +37,25 @@ export const customJsCjs: CustomFormat = { export const customJsEsm: CustomFormat = { name: 'custom/js/esm', formatter({ dictionary, file }) { + const categorizedTokens = dictionary.allTokens.reduce((acc, token) => { + const fileNameWithoutExtension = token.filePath.split('/').pop()!.split('.').shift()! + acc[fileNameWithoutExtension] = acc[fileNameWithoutExtension] || [] + acc[fileNameWithoutExtension].push(token) + return acc + }, {} as Record) + return ( `${fileHeader({ file }) }export default {` + - `\n${ - dictionary.allTokens - .map((token) => ` "${token.name}": ${JSON.stringify(token.value)},`) - .join('\n') - }\n` + - '}' + `${Object.keys(categorizedTokens).map(category => ( + `\n "${category}": {\n` + + `${ + categorizedTokens[category] + .map((token) => ` "${token.name}": ${JSON.stringify(token.value)},`) + .join('\n') + }\n }` + ))}\n` + + '}\n' ) }, } diff --git a/packages/bezier-tokens/src/global/opacity.json b/packages/bezier-tokens/src/global/opacity.json new file mode 100644 index 0000000000..674a4b2a40 --- /dev/null +++ b/packages/bezier-tokens/src/global/opacity.json @@ -0,0 +1,7 @@ +{ + "opacity": { + "disabled": { + "value": 0.4 + } + } +} diff --git a/packages/bezier-tokens/src/global/z-index.json b/packages/bezier-tokens/src/global/z-index.json new file mode 100644 index 0000000000..8dc9a5e405 --- /dev/null +++ b/packages/bezier-tokens/src/global/z-index.json @@ -0,0 +1,28 @@ +{ + "z-index": { + "hidden": { + "value": -1 + }, + "base": { + "value": 0 + }, + "floating": { + "value": 1 + }, + "overlay": { + "value": 1000 + }, + "modal": { + "value": 1100 + }, + "toast": { + "value": 1200 + }, + "tooltip": { + "value": 1300 + }, + "important": { + "value": 2000 + } + } +} From 49e464bddae18724638f176b1a7f8e051c70a2b4 Mon Sep 17 00:00:00 2001 From: Ed Date: Thu, 30 Nov 2023 15:17:05 +0900 Subject: [PATCH 015/238] docs(bezier-tokens): apply changes from #1766 (#1768) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary #1766 의 변경사항을 README에도 적용합니다. --- packages/bezier-tokens/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bezier-tokens/README.md b/packages/bezier-tokens/README.md index 988bf4137a..16d916f21c 100644 --- a/packages/bezier-tokens/README.md +++ b/packages/bezier-tokens/README.md @@ -17,8 +17,8 @@ You can access and use values by token group. ```ts import { tokens } from '@channel.io/bezier-tokens' -console.log(tokens.global['blue-300']) // "#..." -console.log(tokens.lightTheme['bg-black-dark']) // "#..." +console.log(tokens.global.color['blue-300']) // "#..." +console.log(tokens.lightTheme.color['bg-black-dark']) // "#..." ``` ### CSS From 8f88a03b0b61f82c8a469aac79fe8bd9bef220c0 Mon Sep 17 00:00:00 2001 From: Ed Date: Fri, 1 Dec 2023 17:55:03 +0900 Subject: [PATCH 016/238] Implement multi theme feature based on data attributes (#1756) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [ ] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue Fixes #1690 ## Summary data attributes를 기반으로 한 멀티 테마 기능을 구현합니다. ## Details foundation 객체를 주입받는 형식에서, themeNam 문자열을 주입받아 하위 엘리먼트(루트 엘리먼트가 되길 기대)의 data attribute를 변경 & 해당하는 토큰 객체를 컨텍스트로 전달하는 AppProvider를 구현합니다. - features prop: 사용 편의성을 위해 `FeatureProvider` 를 빌트인으로 가지는 방향으로 변경했습니다. 기본값은 빈 배열입니다. - BezierProvider to AppProvider: 앱의 루트에 적용하는 Provider라는 점을 강조하기 위해 Bezier 대신 App이라는 접두어를 붙였습니다. 라이트테마, 다크테마 혹은 테마 역전(Tooltip 등)이 필요한 곳에서 테마를 고정해서 사용할 수 있는 ThemeProvider를 구현합니다. 이제 `--inverted-` 토큰이 사라지는 대신, 하위 엘리먼트에 radix-ui Slot을 통해 data theme attribute를 전달하여 토큰을 스위칭하는 방식으로 동작하게 됩니다. ### Breaking change? (Yes/No) No. 기존 BezierProvider는 그대로 유지합니다. ## References - https://www.radix-ui.com/themes/docs/components/theme - https://panda-css.com/docs/guides/multiple-themes - https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/AppProvider/AppProvider.tsx --- .changeset/chilled-dots-divide.md | 5 + packages/bezier-react/src/features/index.ts | 1 + packages/bezier-react/src/index.ts | 14 +- .../src/providers/AlphaAppProvider.tsx | 85 ++++++++++ .../src/providers/BezierProvider.tsx | 14 +- .../src/providers/ThemeProvider.tsx | 151 ++++++++++++++++++ .../src/providers/WindowProvider.tsx | 13 +- packages/bezier-react/src/styles/_base.scss | 14 +- 8 files changed, 275 insertions(+), 22 deletions(-) create mode 100644 .changeset/chilled-dots-divide.md create mode 100644 packages/bezier-react/src/providers/AlphaAppProvider.tsx create mode 100644 packages/bezier-react/src/providers/ThemeProvider.tsx diff --git a/.changeset/chilled-dots-divide.md b/.changeset/chilled-dots-divide.md new file mode 100644 index 0000000000..a687358a76 --- /dev/null +++ b/.changeset/chilled-dots-divide.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": minor +--- + +Implement multi theme feature based on data attributes. diff --git a/packages/bezier-react/src/features/index.ts b/packages/bezier-react/src/features/index.ts index d63c91c461..1dc94e5a4e 100644 --- a/packages/bezier-react/src/features/index.ts +++ b/packages/bezier-react/src/features/index.ts @@ -1,3 +1,4 @@ +export type { Feature } from './Feature' export { FeatureType } from './Feature' export { diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts index f867045692..c4efe51ee1 100644 --- a/packages/bezier-react/src/index.ts +++ b/packages/bezier-react/src/index.ts @@ -2,7 +2,19 @@ import '~/src/styles/index.scss' /* Provider */ export { default as BezierProvider } from '~/src/providers/BezierProvider' -export { default as WindowProvider, useWindow } from '~/src/providers/WindowProvider' +export * from '~/src/providers/WindowProvider' +export * from '~/src/providers/AlphaAppProvider' +export { + useThemeName, + useToken, + ThemeProvider, + LightThemeProvider, + DarkThemeProvider, + InvertedThemeProvider, + type ThemeName, + type ThemeProviderProps, + type FixedThemeProviderProps, +} from '~/src/providers/ThemeProvider' /* Foundation */ export * from '~/src/foundation' diff --git a/packages/bezier-react/src/providers/AlphaAppProvider.tsx b/packages/bezier-react/src/providers/AlphaAppProvider.tsx new file mode 100644 index 0000000000..37c687fad5 --- /dev/null +++ b/packages/bezier-react/src/providers/AlphaAppProvider.tsx @@ -0,0 +1,85 @@ +import React, { useEffect } from 'react' + +import { + type Feature, + FeatureProvider, +} from '~/src/features' +import { window as defaultWindow } from '~/src/utils/dom' + +import { TooltipProvider } from '~/src/components/Tooltip' + +import { + type ThemeName, + TokenProvider, +} from './ThemeProvider' +import { WindowProvider } from './WindowProvider' + +export interface AlphaAppProviderProps { + children: React.ReactNode + /** + * Name of the theme to use for the app. + * @default 'light' + */ + themeName?: ThemeName + /** + * List of features to enable for the app. + * @default [] + */ + features?: Feature[] + /** + * Window object to use for the app. + * @default window + */ + window?: Window +} + +/** + * `AlphaAppProvider` is a required wrapper component that provides context for the app. + * + * @example + * + * ```tsx + * import React from 'react' + * import { createRoot } from 'react-dom/client' + * import { AlphaAppProvider } from '@channel.io/bezier-react' + * + * const container = document.getElementById('root') + * const root = createRoot(container) + * + * root.render( + * + * + * , + * ) + * ``` + */ +export function AlphaAppProvider({ + children, + themeName = 'light', + features = [], + window = defaultWindow, +}: AlphaAppProviderProps) { + useEffect(function updateRootThemeDataAttribute() { + const rootElement = window.document.documentElement + // TODO: Change data attribute constant to import from bezier-tokens + rootElement.setAttribute('data-bezier-theme', themeName) + return function cleanup() { + rootElement.removeAttribute('data-bezier-theme') + } + }, [ + window, + themeName, + ]) + + return ( + + + + + { children } + + + + + ) +} diff --git a/packages/bezier-react/src/providers/BezierProvider.tsx b/packages/bezier-react/src/providers/BezierProvider.tsx index 88760007f3..d1543bb0b1 100644 --- a/packages/bezier-react/src/providers/BezierProvider.tsx +++ b/packages/bezier-react/src/providers/BezierProvider.tsx @@ -9,14 +9,11 @@ import { type ThemeVarsAdditionalType, } from '~/src/foundation' -import { - document as defaultDocument, - window as defaultWindow, -} from '~/src/utils/dom' +import { window as defaultWindow } from '~/src/utils/dom' import { TooltipProvider } from '~/src/components/Tooltip' -import WindowProvider from './WindowProvider' +import { WindowProvider } from './WindowProvider' interface BezierProviderProps { foundation: Foundation & GlobalStyleProp @@ -29,13 +26,10 @@ function BezierProvider({ foundation, children, themeVarsScope, - externalWindow, + externalWindow = defaultWindow, }: BezierProviderProps) { return ( - + diff --git a/packages/bezier-react/src/providers/ThemeProvider.tsx b/packages/bezier-react/src/providers/ThemeProvider.tsx new file mode 100644 index 0000000000..5a980b1c4d --- /dev/null +++ b/packages/bezier-react/src/providers/ThemeProvider.tsx @@ -0,0 +1,151 @@ +import React, { + forwardRef, + useMemo, +} from 'react' + +import { tokens } from '@channel.io/bezier-tokens' +import { Slot } from '@radix-ui/react-slot' + +import { createContext } from '~/src/utils/react' + +type Tokens = typeof tokens +type GlobalTokens = Tokens['global'] +type SemanticTokens = Omit + +interface ThemedTokenSet { + global: GlobalTokens + semantic: SemanticTokens[keyof SemanticTokens] +} + +// TODO: Change theme name constant to import from bezier-tokens +export type ThemeName = 'light' | 'dark' + +interface TokenContextValue { + themeName: ThemeName + tokens: ThemedTokenSet +} + +const [TokenContextProvider, useTokenContext] = createContext(null, 'TokenProvider') + +const tokenSet: Record = Object.freeze({ + light: { + global: tokens.global, + semantic: tokens.lightTheme, + }, + dark: { + global: tokens.global, + semantic: tokens.darkTheme, + }, +}) + +interface TokenProviderProps { + themeName: ThemeName + children: React.ReactNode +} + +/** + * @private For internal use only. + */ +export function TokenProvider({ + themeName, + children, +}: TokenProviderProps) { + return ( + ({ + themeName, + tokens: tokenSet[themeName], + }), [themeName])} + > + { children } + + ) +} + +/** + * `useThemeName` is a hook that returns the current theme name. + */ +export function useThemeName() { + return useTokenContext('useThemeName').themeName +} + +/** + * `useToken` is a hook that returns the design token for the current theme. + */ +export function useToken() { + return useTokenContext('useToken').tokens +} + +export interface ThemeProviderProps { + themeName: ThemeName + children: React.ReactElement +} + +export type FixedThemeProviderProps = Omit + +/** + * `ThemeProvider` is a wrapper component that provides theme context. + */ +export const ThemeProvider = forwardRef(function ThemeProvider({ + themeName, + children, +}, forwardedRef) { + return ( + + + { children } + + + ) +}) + +/** + * `LightThemeProvider` is a wrapper component that provides light theme context. + */ +export const LightThemeProvider = forwardRef(function LightTheme({ + children, +}, forwardedRef) { + return ( + + { children } + + ) +}) + +/** + * `DarkThemeProvider` is a wrapper component that provides dark theme context. + */ +export const DarkThemeProvider = forwardRef(function DarkTheme({ + children, +}, forwardedRef) { + return ( + + { children } + + ) +}) + +/** + * `InvertedThemeProvider` is a wrapper component that provides inverted theme context. + */ +export const InvertedThemeProvider = forwardRef(function InvertedTheme({ + children, +}, forwardedRef) { + return ( + + { children } + + ) +}) diff --git a/packages/bezier-react/src/providers/WindowProvider.tsx b/packages/bezier-react/src/providers/WindowProvider.tsx index 74033d08cb..e8e251660d 100644 --- a/packages/bezier-react/src/providers/WindowProvider.tsx +++ b/packages/bezier-react/src/providers/WindowProvider.tsx @@ -23,19 +23,14 @@ interface WindowProviderProps extends PropsWithChildren { * @required */ window: Window - - /** - * injected document - * @required - */ - document: Document } /** * A Provider that provides window and document object * you can use this provider to inject an external window */ -function WindowProvider({ window, document, children }: WindowProviderProps) { +export function WindowProvider({ window, children }: WindowProviderProps) { + const document = window.document const rootElement = document.body const value = useMemo(() => ({ @@ -43,8 +38,8 @@ function WindowProvider({ window, document, children }: WindowProviderProps) { document, rootElement, }), [ - document, window, + document, rootElement, ]) @@ -52,5 +47,3 @@ function WindowProvider({ window, document, children }: WindowProviderProps) { { children } ) } - -export default WindowProvider diff --git a/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss index 986b49235a..b265edfeef 100644 --- a/packages/bezier-react/src/styles/_base.scss +++ b/packages/bezier-react/src/styles/_base.scss @@ -1,6 +1,18 @@ -html { +:where(:root, :host) { font-size: 62.5%; // 10/16 = 0.625. Make REM calculations easier. font-family: var(--font-family-sans-kr); + color: var(--txt-black-darkest); + color-scheme: light; +} + +// TODO: Change data attribute constant to import from bezier-tokens +[data-bezier-theme='light'] { + color-scheme: light; +} + +// TODO: Change data attribute constant to import from bezier-tokens +[data-bezier-theme='dark'] { + color-scheme: dark; } :lang(ja) { From d1e0fc7de89b2fa95673c43fa9b0ddfaf40e88b6 Mon Sep 17 00:00:00 2001 From: Ed Date: Tue, 5 Dec 2023 16:23:53 +0900 Subject: [PATCH 017/238] feat(bezier-tokens): create a CSS entry point and add composition tokens (#1769) --- .changeset/large-pants-brush.md | 5 + .changeset/little-bikes-obey.md | 5 + .../components/Spinner/Spinner.module.scss | 15 +-- packages/bezier-react/src/styles/_tokens.scss | 4 +- packages/bezier-react/src/styles/index.scss | 6 +- .../src/styles/mixins/_dimension.scss | 4 + .../src/styles/mixins/_typography.scss | 67 ++++++++++ .../bezier-react/src/styles/utils/_index.scss | 1 - .../src/styles/utils/_typography.scss | 3 - packages/bezier-tokens/README.md | 4 +- packages/bezier-tokens/package.json | 7 +- .../bezier-tokens/scripts/build-css-index.ts | 35 +++++ .../bezier-tokens/scripts/build-js-index.ts | 12 +- .../bezier-tokens/scripts/build-tokens.ts | 50 ++++--- .../bezier-tokens/scripts/lib/transform.ts | 39 +++--- packages/bezier-tokens/scripts/lib/utils.ts | 2 +- packages/bezier-tokens/src/global/font.json | 63 +++++---- packages/bezier-tokens/src/global/radius.json | 24 ++-- .../bezier-tokens/src/global/transition.json | 25 +++- .../bezier-tokens/src/global/typography.json | 123 ++++++++++++++++++ .../bezier-tokens/src/semantic/elevation.json | 28 ++++ .../bezier-tokens/src/semantic/input.json | 13 ++ yarn.lock | 3 +- 23 files changed, 425 insertions(+), 113 deletions(-) create mode 100644 .changeset/large-pants-brush.md create mode 100644 .changeset/little-bikes-obey.md create mode 100644 packages/bezier-react/src/styles/mixins/_dimension.scss create mode 100644 packages/bezier-react/src/styles/mixins/_typography.scss delete mode 100644 packages/bezier-react/src/styles/utils/_index.scss delete mode 100644 packages/bezier-react/src/styles/utils/_typography.scss create mode 100644 packages/bezier-tokens/scripts/build-css-index.ts create mode 100644 packages/bezier-tokens/src/global/typography.json create mode 100644 packages/bezier-tokens/src/semantic/elevation.json create mode 100644 packages/bezier-tokens/src/semantic/input.json diff --git a/.changeset/large-pants-brush.md b/.changeset/large-pants-brush.md new file mode 100644 index 0000000000..7fc51b864e --- /dev/null +++ b/.changeset/large-pants-brush.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +Add composition tokens, such as box-shadow. diff --git a/.changeset/little-bikes-obey.md b/.changeset/little-bikes-obey.md new file mode 100644 index 0000000000..ec0f42c23a --- /dev/null +++ b/.changeset/little-bikes-obey.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": minor +--- + +Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`. diff --git a/packages/bezier-react/src/components/Spinner/Spinner.module.scss b/packages/bezier-react/src/components/Spinner/Spinner.module.scss index b4d8db4c47..f1f04ac7f4 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.module.scss +++ b/packages/bezier-react/src/components/Spinner/Spinner.module.scss @@ -1,7 +1,4 @@ -@mixin size($size) { - width: $size; - height: $size; -} +@use "../../styles/mixins/dimension"; @layer components { @keyframes spin { @@ -27,7 +24,7 @@ animation: spin 1s linear infinite; &.xl { - @include size(50px); + @include dimension.square(50px); border-width: 4px; } @@ -37,11 +34,11 @@ } &.l { - @include size(24px); + @include dimension.square(24px); } &.m { - @include size(20px); + @include dimension.square(20px); } &.s, @@ -50,11 +47,11 @@ } &.s { - @include size(16px); + @include dimension.square(16px); } &.xs { - @include size(12px); + @include dimension.square(12px); } } } diff --git a/packages/bezier-react/src/styles/_tokens.scss b/packages/bezier-react/src/styles/_tokens.scss index 997a7ab6c5..2ff0ce6573 100644 --- a/packages/bezier-react/src/styles/_tokens.scss +++ b/packages/bezier-react/src/styles/_tokens.scss @@ -1,3 +1 @@ -@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"; +@use "../../node_modules/@channel.io/bezier-tokens/dist/css/styles.css"; diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss index 60d3de3654..12559d4c19 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, tokens, base, components, utils; +@layer reset, tokens, base, components; @layer reset { @include meta.load-css("reset") @@ -13,7 +13,3 @@ @layer base { @include meta.load-css("base") } - -@layer utils { - @include meta.load-css("utils") -} diff --git a/packages/bezier-react/src/styles/mixins/_dimension.scss b/packages/bezier-react/src/styles/mixins/_dimension.scss new file mode 100644 index 0000000000..345d3eca41 --- /dev/null +++ b/packages/bezier-react/src/styles/mixins/_dimension.scss @@ -0,0 +1,4 @@ +@mixin square($dimension) { + width: $dimension; + height: $dimension; +} diff --git a/packages/bezier-react/src/styles/mixins/_typography.scss b/packages/bezier-react/src/styles/mixins/_typography.scss new file mode 100644 index 0000000000..1c918d1c7b --- /dev/null +++ b/packages/bezier-react/src/styles/mixins/_typography.scss @@ -0,0 +1,67 @@ +// NOTE: WIP. Change to only accessible from the Text component? +@mixin size-11 { + font-size: var(--typography-size-11-font-size); + line-height: var(--typography-size-11-line-height); +} + +@mixin size-12 { + font-size: var(--typography-size-12-font-size); + line-height: var(--typography-size-12-line-height); +} + +@mixin size-13 { + font-size: var(--typography-size-13-font-size); + line-height: var(--typography-size-13-line-height); +} + +@mixin size-14 { + font-size: var(--typography-size-14-font-size); + line-height: var(--typography-size-14-line-height); +} + +@mixin size-15 { + font-size: var(--typography-size-15-font-size); + line-height: var(--typography-size-15-line-height); + letter-spacing: var(--typography-size-15-letter-spacing); +} + +@mixin size-16 { + font-size: var(--typography-size-16-font-size); + line-height: var(--typography-size-16-line-height); + letter-spacing: var(--typography-size-16-letter-spacing); +} + +@mixin size-17 { + font-size: var(--typography-size-17-font-size); + line-height: var(--typography-size-17-line-height); + letter-spacing: var(--typography-size-17-letter-spacing); +} + +@mixin size-18 { + font-size: var(--typography-size-18-font-size); + line-height: var(--typography-size-18-line-height); +} + +@mixin size-22 { + font-size: var(--typography-size-22-font-size); + line-height: var(--typography-size-22-line-height); + letter-spacing: var(--typography-size-22-letter-spacing); +} + +@mixin size-24 { + font-size: var(--typography-size-24-font-size); + line-height: var(--typography-size-24-line-height); + letter-spacing: var(--typography-size-24-letter-spacing); +} + +@mixin size-30 { + font-size: var(--typography-size-30-font-size); + line-height: var(--typography-size-30-line-height); + letter-spacing: var(--typography-size-30-letter-spacing); +} + +@mixin size-36 { + font-size: var(--typography-size-36-font-size); + line-height: var(--typography-size-36-line-height); + letter-spacing: var(--typography-size-36-letter-spacing); +} diff --git a/packages/bezier-react/src/styles/utils/_index.scss b/packages/bezier-react/src/styles/utils/_index.scss deleted file mode 100644 index ca815dc914..0000000000 --- a/packages/bezier-react/src/styles/utils/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@use 'typography'; diff --git a/packages/bezier-react/src/styles/utils/_typography.scss b/packages/bezier-react/src/styles/utils/_typography.scss deleted file mode 100644 index fe8692290a..0000000000 --- a/packages/bezier-react/src/styles/utils/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ - - // TODO: Add typography utilities - // TODO: Make externally available via class name diff --git a/packages/bezier-tokens/README.md b/packages/bezier-tokens/README.md index 16d916f21c..4b8e6ee4ed 100644 --- a/packages/bezier-tokens/README.md +++ b/packages/bezier-tokens/README.md @@ -26,9 +26,7 @@ console.log(tokens.lightTheme.color['bg-black-dark']) // "#..." Provide all design tokens as CSS variables. If you want to apply dark theme tokens, add the `data-bezier-theme="dark"` attribute to the parent element. The default is light theme tokens, which can also be applied by adding the `data-bezier-theme="light"` attribute to the parent element. ```ts -import '@channel.io/bezier-tokens/css/global.css' -import '@channel.io/bezier-tokens/css/light-theme.css' -import '@channel.io/bezier-tokens/css/dark-theme.css' +import '@channel.io/bezier-tokens/css/styles.css' div { background: var(--bg-black-dark); diff --git a/packages/bezier-tokens/package.json b/packages/bezier-tokens/package.json index 45d7529c2c..2b83d1213c 100644 --- a/packages/bezier-tokens/package.json +++ b/packages/bezier-tokens/package.json @@ -30,9 +30,11 @@ "dist" ], "scripts": { - "build": "run-s clean:build build:tokens build:js-index build:types", + "build": "run-s clean:build build:tokens build:web build:types", "build:tokens": "ts-node-esm scripts/build-tokens.ts", - "build:js-index": "ts-node-esm scripts/build-js-index.ts", + "build:web": "run-p 'build:web:*'", + "build:web:index-js": "ts-node-esm scripts/build-js-index.ts", + "build:web:index-css": "ts-node-esm scripts/build-css-index.ts", "build:types": "tsc -p tsconfig.build.json", "lint": "TIMING=1 eslint --cache .", "typecheck": "tsc --noEmit", @@ -50,6 +52,7 @@ "license": "Apache-2.0", "devDependencies": { "eslint-config-bezier": "workspace:*", + "minimatch": "^9.0.3", "style-dictionary": "^3.9.0", "tsconfig": "workspace:*" } diff --git a/packages/bezier-tokens/scripts/build-css-index.ts b/packages/bezier-tokens/scripts/build-css-index.ts new file mode 100644 index 0000000000..1a3c356915 --- /dev/null +++ b/packages/bezier-tokens/scripts/build-css-index.ts @@ -0,0 +1,35 @@ +import fs from 'fs' +import path from 'path' + +const buildPath = 'dist/css' +const destination = 'styles.css' + +function concatenateStylesheet() { + const files = fs.readdirSync(buildPath) + const outputData = files + .filter(file => file.endsWith('.css') && file !== destination) + .map(file => fs.readFileSync(path.join(buildPath, file), 'utf8')) + .join('\n') + + fs.writeFileSync(path.join(buildPath, destination), outputData) + // eslint-disable-next-line no-console + console.log(`\n✔︎ Created ${buildPath}/${destination}`) +} + +function cleanUp() { + const files = fs.readdirSync(buildPath) + files.forEach(file => { + if (file !== destination) { + fs.unlinkSync(path.join(buildPath, file)) + // eslint-disable-next-line no-console + console.log(` ✔︎ Removed ${buildPath}/${file}`) + } + }) +} + +function main() { + concatenateStylesheet() + cleanUp() +} + +main() diff --git a/packages/bezier-tokens/scripts/build-js-index.ts b/packages/bezier-tokens/scripts/build-js-index.ts index 2eafbd578f..9aaf669bdd 100644 --- a/packages/bezier-tokens/scripts/build-js-index.ts +++ b/packages/bezier-tokens/scripts/build-js-index.ts @@ -11,7 +11,7 @@ const getFileExtensionByModuleSystem = (isCjs: boolean) => function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) { const fileExtension = getFileExtensionByModuleSystem(isCjs) - const indexFile = `index${fileExtension}` + const destination = `index${fileExtension}` let exportStatements = '' if (!fs.existsSync(buildPath)) { @@ -21,11 +21,9 @@ function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) { } const files = fs.readdirSync(buildPath) - // eslint-disable-next-line no-console - console.log(`Reading files in ${buildPath}:`, files) files.forEach((file) => { - if (file.endsWith(fileExtension) && file !== indexFile) { + if (file.endsWith(fileExtension) && file !== destination) { const moduleName = file.replace(fileExtension, '') if (!isCjs) { exportStatements += `import ${moduleName} from './${file}';\n` @@ -40,7 +38,7 @@ function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) { } files.forEach((file) => { - if (file.endsWith(fileExtension) && file !== indexFile) { + if (file.endsWith(fileExtension) && file !== destination) { const moduleName = file.replace(fileExtension, '') if (isCjs) { exportStatements += ` ${moduleName}: require('./${moduleName}'),\n` @@ -52,9 +50,9 @@ function buildJsIndexFile({ buildPath, isCjs }: BuildJsIndexFileOptions) { exportStatements += '});\n' - fs.writeFileSync(path.join(buildPath, indexFile), exportStatements) + fs.writeFileSync(path.join(buildPath, destination), exportStatements) // eslint-disable-next-line no-console - console.log(`✅ Created ${indexFile} in ${buildPath}`) + console.log(`\n✔︎ Created ${buildPath}/${destination}`) } function main() { diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 3b58a18a76..5dcae00fe9 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -1,5 +1,7 @@ +import { minimatch } from 'minimatch' import StyleDictionary, { type Config, + type Options, type Platform, } from 'style-dictionary' @@ -8,53 +10,61 @@ import { customJsEsm, } from './lib/format' import { + customCubicBezier, + customFontFamily, customFontRem, - customRadiusPx, } from './lib/transform' -import { toCamelCase } from './lib/utils' -const TokenBuilder = StyleDictionary +const TokenBuilder = StyleDictionary.registerTransform(customCubicBezier) + .registerTransform(customFontFamily) .registerTransform(customFontRem) - .registerTransform(customRadiusPx) .registerFormat(customJsCjs) .registerFormat(customJsEsm) -function defineWebPlatform(options: Platform): Platform { +function defineWebPlatform({ options, ...rest }: Platform): Platform { return { transforms: [ 'attribute/cti', 'name/cti/kebab', + customCubicBezier.name, + customFontFamily.name, customFontRem.name, - customRadiusPx.name, ], basePxFontSize: 10, - ...options, + options: { + showFileHeader: false, + ...options, + }, + ...rest, } } interface DefineConfigOptions { source: string[] + reference?: string[] destination: string - options?: { + options?: Options & { cssSelector: string } } function defineConfig({ source, + reference = [], destination, options, }: DefineConfigOptions): Config { return { - source, + source: [...source, ...reference], platforms: { 'web/cjs': defineWebPlatform({ buildPath: 'dist/cjs/', files: [ { - destination: `${toCamelCase(destination)}.js`, + destination: `${destination}.js`, format: customJsCjs.name, - filter: (token) => token.filePath.includes(destination), + filter: ({ filePath }) => + source.some((src) => minimatch(filePath, src)), }, ], }), @@ -62,9 +72,10 @@ function defineConfig({ buildPath: 'dist/esm/', files: [ { - destination: `${toCamelCase(destination)}.mjs`, + destination: `${destination}.mjs`, format: customJsEsm.name, - filter: (token) => token.filePath.includes(destination), + filter: ({ filePath }) => + source.some((src) => minimatch(filePath, src)), }, ], }), @@ -74,7 +85,8 @@ function defineConfig({ { destination: `${destination}.css`, format: 'css/variables', - filter: (token) => token.filePath.includes(destination), + filter: ({ filePath }) => + source.some((src) => minimatch(filePath, src)), options: { selector: options?.cssSelector, outputReferences: true, @@ -97,8 +109,9 @@ function main() { ), TokenBuilder.extend( defineConfig({ - source: ['src/global/*.json', 'src/semantic/light-theme/*.json'], - destination: 'light-theme', + source: ['src/semantic/*.json', 'src/semantic/light-theme/*.json'], + reference: ['src/global/*.json'], + destination: 'lightTheme', options: { cssSelector: ':where(:root, :host), [data-bezier-theme="light"]', }, @@ -106,8 +119,9 @@ function main() { ), TokenBuilder.extend( defineConfig({ - source: ['src/global/*.json', 'src/semantic/dark-theme/*.json'], - destination: 'dark-theme', + source: ['src/semantic/*.json', 'src/semantic/dark-theme/*.json'], + reference: ['src/global/*.json'], + destination: 'darkTheme', options: { cssSelector: '[data-bezier-theme="dark"]' }, }), ), diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts index 9be24d7423..031b053163 100644 --- a/packages/bezier-tokens/scripts/lib/transform.ts +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -3,7 +3,7 @@ import type { Transform, } from 'style-dictionary' -import { endsWithNumber } from './utils' +import { extractNumber } from './utils' type CustomTransform = Named> @@ -11,24 +11,29 @@ export const customFontRem: CustomTransform = { name: 'custom/font/rem', type: 'value', transitive: true, - matcher(token) { - const { attributes: { category, type } = {} } = token - return category === 'font' && (type === 'size' || type === 'line-height') - }, - transformer(token, options) { - return `${token.value / ((options && options.basePxFontSize) || 16)}rem` - }, + matcher: ({ attributes: { category, type } = {} }) => + category === 'font' && (type === 'size' || type === 'line-height'), + transformer: ({ value }: { value: string }, options) => + `${parseFloat(extractNumber(value) ?? '') / ((options && options.basePxFontSize) || 16)}rem`, } -export const customRadiusPx: CustomTransform = { - name: 'custom/radius/px', +export const customFontFamily: CustomTransform = { + name: 'custom/font/family', type: 'value', transitive: true, - matcher(token) { - const { attributes: { category } = {} } = token - return category === 'radius' - }, - transformer(token) { - return endsWithNumber(token.value) ? `${token.value}px` : token.value - }, + matcher: ({ original: { $type } }) => $type === 'fontFamily', + transformer: ({ value }: { value: string[] }) => + /** + * @see {@link https://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes} + */ + value.map((fontFamily) => `'${fontFamily}'`).join(', '), +} + +export const customCubicBezier: CustomTransform = { + name: 'custom/cubicBezier', + type: 'value', + transitive: true, + matcher: ({ original: { $type } }) => $type === 'cubicBezier', + transformer: ({ value: [x1, y1, x2, y2] }: { value: [number, number, number, number] }) => + `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`, } diff --git a/packages/bezier-tokens/scripts/lib/utils.ts b/packages/bezier-tokens/scripts/lib/utils.ts index baeec903a9..d9ac74aa33 100644 --- a/packages/bezier-tokens/scripts/lib/utils.ts +++ b/packages/bezier-tokens/scripts/lib/utils.ts @@ -1,4 +1,4 @@ export const toCamelCase = (str: string) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase()) -export const endsWithNumber = (str: string) => /\d$/.test(str) +export const extractNumber = (str: string) => str.match(/\d+/g)?.join('') diff --git a/packages/bezier-tokens/src/global/font.json b/packages/bezier-tokens/src/global/font.json index d8946772cc..17a1fc57ca 100644 --- a/packages/bezier-tokens/src/global/font.json +++ b/packages/bezier-tokens/src/global/font.json @@ -2,90 +2,101 @@ "font": { "size": { "11": { - "value": "11" + "value": "11px" }, "12": { - "value": "12" + "value": "12px" }, "13": { - "value": "13" + "value": "13px" }, "14": { - "value": "14" + "value": "14px" }, "15": { - "value": "15" + "value": "15px" }, "16": { - "value": "16" + "value": "16px" }, "17": { - "value": "17" + "value": "17px" }, "18": { - "value": "18" + "value": "18px" }, "22": { - "value": "22" + "value": "22px" }, "24": { - "value": "24" + "value": "24px" }, "30": { - "value": "30" + "value": "30px" }, "36": { - "value": "36" + "value": "36px" } }, "line-height": { "16": { - "value": "16" + "value": "16px" }, "18": { - "value": "18" + "value": "18px" }, "20": { - "value": "20" + "value": "20px" }, "22": { - "value": "22" + "value": "22px" }, "24": { - "value": "24" + "value": "24px" }, "28": { - "value": "28" + "value": "28px" }, "32": { - "value": "32" + "value": "32px" }, "36": { - "value": "36" + "value": "36px" }, "44": { - "value": "44" + "value": "44px" } }, "weight": { "400": { - "value": "400" + "value": 400 }, "700": { - "value": "700" + "value": 700 } }, "family": { "sans": { "kr": { - "value": "'Inter', 'NotoSansKR', 'NotoSansJP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" + "value": ["Inter", "NotoSansKR", "NotoSansJP", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Roboto", "system-ui", "sans-serif"], + "$type": "fontFamily" }, "jp": { - "value": "'Inter', 'NotoSansJP', 'NotoSansKR', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Roboto', system-ui, sans-serif" + "value": ["Inter", "NotoSansJP", "NotoSansKR", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Roboto", "system-ui", "sans-serif"], + "$type": "fontFamily" } }, "mono": { - "value": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace" + "value": ["ui-monospace", "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", "monospace"], + "$type": "fontFamily" + } + }, + "letter-spacing": { + "1": { + "value": "-0.1px" + }, + "2": { + "value": "-0.4px" } } } diff --git a/packages/bezier-tokens/src/global/radius.json b/packages/bezier-tokens/src/global/radius.json index 5e3f794831..877d403c82 100644 --- a/packages/bezier-tokens/src/global/radius.json +++ b/packages/bezier-tokens/src/global/radius.json @@ -1,40 +1,40 @@ { "radius": { "2": { - "value": "2" + "value": "2px" }, "3": { - "value": "3" + "value": "3px" }, "4": { - "value": "4" + "value": "4px" }, "6": { - "value": "6" + "value": "6px" }, "8": { - "value": "8" + "value": "8px" }, "10": { - "value": "10" + "value": "10px" }, "12": { - "value": "12" + "value": "12px" }, "14": { - "value": "14" + "value": "14px" }, "16": { - "value": "16" + "value": "16px" }, "20": { - "value": "20" + "value": "20px" }, "32": { - "value": "32" + "value": "32px" }, "44": { - "value": "44" + "value": "44px" }, "42-p": { "value": "42%" diff --git a/packages/bezier-tokens/src/global/transition.json b/packages/bezier-tokens/src/global/transition.json index 70d39abe68..a8efc45175 100644 --- a/packages/bezier-tokens/src/global/transition.json +++ b/packages/bezier-tokens/src/global/transition.json @@ -1,18 +1,33 @@ { "transition": { - "easing": { - "value": "cubic-bezier(.3,0,0,1)" + "timing-function": { + "default": { + "value": [0.3, 0, 0, 1], + "$type": "cubicBezier" + } }, "duration": { "s": { - "value": "150ms" + "value": "150ms", + "$type": "duration" }, "m": { - "value": "300ms" + "value": "300ms", + "$type": "duration" }, "l": { - "value": "450ms" + "value": "450ms", + "$type": "duration" } + }, + "s": { + "value": "{transition.duration.s} {transition.timing-function.default}" + }, + "m": { + "value": "{transition.duration.m} {transition.timing-function.default}" + }, + "l": { + "value": "{transition.duration.l} {transition.timing-function.default}" } } } diff --git a/packages/bezier-tokens/src/global/typography.json b/packages/bezier-tokens/src/global/typography.json new file mode 100644 index 0000000000..7247be19ba --- /dev/null +++ b/packages/bezier-tokens/src/global/typography.json @@ -0,0 +1,123 @@ +{ + "typography": { + "size": { + "11": { + "font-size": { + "value": "{font.size.11}" + }, + "line-height": { + "value": "{font.line-height.16}" + } + }, + "12": { + "font-size": { + "value": "{font.size.12}" + }, + "line-height": { + "value": "{font.line-height.16}" + } + }, + "13": { + "font-size": { + "value": "{font.size.13}" + }, + "line-height": { + "value": "{font.line-height.18}" + } + }, + "14": { + "font-size": { + "value": "{font.size.14}" + }, + "line-height": { + "value": "{font.line-height.18}" + } + }, + "15": { + "font-size": { + "value": "{font.size.15}" + }, + "line-height": { + "value": "{font.line-height.20}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.1}" + } + }, + "16": { + "font-size": { + "value": "{font.size.16}" + }, + "line-height": { + "value": "{font.line-height.22}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.1}" + } + }, + "17": { + "font-size": { + "value": "{font.size.17}" + }, + "line-height": { + "value": "{font.line-height.22}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.1}" + } + }, + "18": { + "font-size": { + "value": "{font.size.18}" + }, + "line-height": { + "value": "{font.line-height.24}" + } + }, + "22": { + "font-size": { + "value": "{font.size.22}" + }, + "line-height": { + "value": "{font.line-height.28}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.2}" + } + }, + "24": { + "font-size": { + "value": "{font.size.24}" + }, + "line-height": { + "value": "{font.line-height.32}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.2}" + } + }, + "30": { + "font-size": { + "value": "{font.size.30}" + }, + "line-height": { + "value": "{font.line-height.36}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.2}" + } + }, + "36": { + "font-size": { + "value": "{font.size.36}" + }, + "line-height": { + "value": "{font.line-height.44}" + }, + "letter-spacing": { + "value": "{font.letter-spacing.2}" + } + } + } + } +} diff --git a/packages/bezier-tokens/src/semantic/elevation.json b/packages/bezier-tokens/src/semantic/elevation.json new file mode 100644 index 0000000000..1acff6b225 --- /dev/null +++ b/packages/bezier-tokens/src/semantic/elevation.json @@ -0,0 +1,28 @@ +{ + "ev": { + "inner": { + "value": "inset 0 0 2px 0 {shdw.inner.base}" + }, + "base": { + "value": "0 0 2px 0 {shdw.base}" + }, + "1": { + "value": "{ev.inner}, {ev.base}, 0 1px 2px {shdw.small}" + }, + "2": { + "value": "{ev.inner}, {ev.base}, 0 2px 6px {shdw.small}" + }, + "3": { + "value": "{ev.inner}, {ev.base}, 0 4px 12px {shdw.medium}" + }, + "4": { + "value": "{ev.inner}, {ev.base}, 0 4px 20px {shdw.large}" + }, + "5": { + "value": "{ev.inner}, {ev.base}, 0 6px 40px {shdw.xlarge}" + }, + "6": { + "value": "{ev.inner}, {ev.base}, 0 12px 60px {shdw.xlarge}" + } + } +} diff --git a/packages/bezier-tokens/src/semantic/input.json b/packages/bezier-tokens/src/semantic/input.json new file mode 100644 index 0000000000..28c861dfaa --- /dev/null +++ b/packages/bezier-tokens/src/semantic/input.json @@ -0,0 +1,13 @@ +{ + "input": { + "box-shadow": { + "value": "0 1px 2px {bg.black.lighter}, inset 0 0 0 1px {bg.black.dark}" + }, + "box-shadow-focused": { + "value": "0 0 0 3px {bgtxt.blue.light}, inset 0 0 0 1px {bgtxt.blue.normal}" + }, + "box-shadow-invalid": { + "value": "0 0 0 3px {bgtxt.orange.light}, inset 0 0 0 1px {bgtxt.orange.normal}" + } + } +} diff --git a/yarn.lock b/yarn.lock index 7d4e40a757..80494a9b21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2562,6 +2562,7 @@ __metadata: resolution: "@channel.io/bezier-tokens@workspace:packages/bezier-tokens" dependencies: eslint-config-bezier: "workspace:*" + minimatch: ^9.0.3 style-dictionary: ^3.9.0 tsconfig: "workspace:*" languageName: unknown @@ -17043,7 +17044,7 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:^9.0.1": +"minimatch@npm:^9.0.1, minimatch@npm:^9.0.3": version: 9.0.3 resolution: "minimatch@npm:9.0.3" dependencies: From 957e4f8508f1baab02c823cf83d9c31d9e2cd504 Mon Sep 17 00:00:00 2001 From: Ed Date: Tue, 12 Dec 2023 13:45:11 +0900 Subject: [PATCH 018/238] feat(bezier-tokens): Implementing composition tokens and removing duplicate CSS (#1779) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary - Composition token의 스펙을 DTCG format과 비슷하게 정의하고, 커스텀 Transformer를 구현합니다. - 공통 Semantic token이 불필요하게 라이트 테마, 다크 테마에 중복해서 들어가던 문제를 수정합니다. ## Details - Composition token이 CSS spec에 의존하지 않도록 [DTCG format](https://design-tokens.github.io/community-group/format/#composite-types)을 참고하여 수정했습니다. shadow와 transition 타입에 적용했습니다. - letter-spacing에도 rem 단위를 적용합니다. dimension type을 만들어서 기존 font-size와 line-height에 적용하던 custom Transformer를 적용했습니다. - 공통 Semantic token이 불필요하게 들어가는 문제를 해결하기 위해서는 기존 defineConfig 함수를 해체하는 것이 불가피했습니다. CSS/JS 빌드를 구분하는 플래그 등을 만들어서 기존 defineConfig를 재사용하는 것도 가능했으나, 오히려 가독성이 떨어진다고 판단했습니다. 기존에 global, light theme, dark theme 빌드를 3번 진행했다면 이제는 global, light theme로 묶어서 빌드를 1번 진행하고, dark theme로 따로 한번 더 진행합니다. 스타일 시트를 확인해보면, global token 영역에 공통 semantic token도 포함되어 있는 걸 확인하실 수 있습니다. ### Breaking change? (Yes/No) No ## References - #1769 - https://github.com/tokens-studio/sd-transforms/tree/main : composite token transformer 구현 참고 --- .changeset/mighty-hornets-promise.md | 5 + .../bezier-tokens/scripts/build-tokens.ts | 184 +++++++++++------- .../bezier-tokens/scripts/lib/transform.ts | 117 ++++++++--- packages/bezier-tokens/scripts/lib/utils.ts | 2 + packages/bezier-tokens/src/global/font.json | 75 ++++--- .../bezier-tokens/src/global/transition.json | 26 ++- .../bezier-tokens/src/semantic/elevation.json | 104 +++++++++- .../bezier-tokens/src/semantic/input.json | 60 +++++- 8 files changed, 430 insertions(+), 143 deletions(-) create mode 100644 .changeset/mighty-hornets-promise.md diff --git a/.changeset/mighty-hornets-promise.md b/.changeset/mighty-hornets-promise.md new file mode 100644 index 0000000000..8012c716d2 --- /dev/null +++ b/.changeset/mighty-hornets-promise.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-tokens": patch +--- + +Remove duplicate styles in styles.css diff --git a/packages/bezier-tokens/scripts/build-tokens.ts b/packages/bezier-tokens/scripts/build-tokens.ts index 5dcae00fe9..87576f45f7 100644 --- a/packages/bezier-tokens/scripts/build-tokens.ts +++ b/packages/bezier-tokens/scripts/build-tokens.ts @@ -1,23 +1,18 @@ import { minimatch } from 'minimatch' -import StyleDictionary, { - type Config, - type Options, - type Platform, -} from 'style-dictionary' +import StyleDictionary, { type Platform } from 'style-dictionary' import { customJsCjs, customJsEsm, } from './lib/format' -import { - customCubicBezier, - customFontFamily, - customFontRem, -} from './lib/transform' +import { CSSTransforms } from './lib/transform' + +const CustomTransforms = [...Object.values(CSSTransforms)] -const TokenBuilder = StyleDictionary.registerTransform(customCubicBezier) - .registerTransform(customFontFamily) - .registerTransform(customFontRem) +const TokenBuilder = CustomTransforms.reduce( + (builder, transform) => builder.registerTransform(transform), + StyleDictionary, +) .registerFormat(customJsCjs) .registerFormat(customJsEsm) @@ -26,9 +21,7 @@ function defineWebPlatform({ options, ...rest }: Platform): Platform { transforms: [ 'attribute/cti', 'name/cti/kebab', - customCubicBezier.name, - customFontFamily.name, - customFontRem.name, + ...CustomTransforms.map((transform) => transform.name), ], basePxFontSize: 10, options: { @@ -39,93 +32,146 @@ function defineWebPlatform({ options, ...rest }: Platform): Platform { } } -interface DefineConfigOptions { - source: string[] - reference?: string[] - destination: string - options?: Options & { - cssSelector: string - } -} +const PATH = { + GLOBAL: 'src/global/*.json', + SEMANTIC_COMMON: 'src/semantic/*.json', + SEMANTIC_LIGHT: 'src/semantic/light-theme/*.json', + SEMANTIC_DARK: 'src/semantic/dark-theme/*.json', +} as const -function defineConfig({ - source, - reference = [], - destination, - options, -}: DefineConfigOptions): Config { - return { - source: [...source, ...reference], +function main() { + TokenBuilder.extend({ + source: [PATH.GLOBAL, PATH.SEMANTIC_COMMON, PATH.SEMANTIC_LIGHT], platforms: { - 'web/cjs': defineWebPlatform({ + 'web/cjs/global': defineWebPlatform({ + buildPath: 'dist/cjs/', + files: [ + { + destination: 'global.js', + format: customJsCjs.name, + filter: ({ filePath }) => + [PATH.GLOBAL].some((src) => minimatch(filePath, src)), + }, + ], + }), + 'web/esm/global': defineWebPlatform({ + buildPath: 'dist/esm/', + files: [ + { + destination: 'global.mjs', + format: customJsEsm.name, + filter: ({ filePath }) => + [PATH.GLOBAL].some((src) => minimatch(filePath, src)), + }, + ], + }), + 'web/css/global': defineWebPlatform({ + buildPath: 'dist/css/', + files: [ + { + destination: 'global.css', + format: 'css/variables', + filter: ({ filePath }) => + [PATH.GLOBAL, PATH.SEMANTIC_COMMON].some((src) => + minimatch(filePath, src), + ), + options: { + selector: ':where(:root, :host)', + outputReferences: true, + }, + }, + ], + }), + 'web/cjs/light-theme': defineWebPlatform({ buildPath: 'dist/cjs/', files: [ { - destination: `${destination}.js`, + destination: 'lightTheme.js', format: customJsCjs.name, filter: ({ filePath }) => - source.some((src) => minimatch(filePath, src)), + [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_LIGHT].some((src) => + minimatch(filePath, src), + ), }, ], }), - 'web/esm': defineWebPlatform({ + 'web/esm/light-theme': defineWebPlatform({ buildPath: 'dist/esm/', files: [ { - destination: `${destination}.mjs`, + destination: 'lightTheme.mjs', format: customJsEsm.name, filter: ({ filePath }) => - source.some((src) => minimatch(filePath, src)), + [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_LIGHT].some((src) => + minimatch(filePath, src), + ), }, ], }), - 'web/css': defineWebPlatform({ + 'web/css/light-theme': defineWebPlatform({ buildPath: 'dist/css/', files: [ { - destination: `${destination}.css`, + destination: 'light-theme.css', format: 'css/variables', filter: ({ filePath }) => - source.some((src) => minimatch(filePath, src)), + [PATH.SEMANTIC_LIGHT].some((src) => minimatch(filePath, src)), options: { - selector: options?.cssSelector, + selector: ':where(:root, :host), [data-bezier-theme="light"]', outputReferences: true, }, }, ], }), }, - } -} + }).buildAllPlatforms() -function main() { - [ - TokenBuilder.extend( - defineConfig({ - source: ['src/global/*.json'], - destination: 'global', - options: { cssSelector: ':where(:root, :host)' }, + TokenBuilder.extend({ + source: [PATH.GLOBAL, PATH.SEMANTIC_COMMON, PATH.SEMANTIC_DARK], + platforms: { + 'web/cjs/dark-theme': defineWebPlatform({ + buildPath: 'dist/cjs/', + files: [ + { + destination: 'darkTheme.js', + format: customJsCjs.name, + filter: ({ filePath }) => + [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_DARK].some((src) => + minimatch(filePath, src), + ), + }, + ], }), - ), - TokenBuilder.extend( - defineConfig({ - source: ['src/semantic/*.json', 'src/semantic/light-theme/*.json'], - reference: ['src/global/*.json'], - destination: 'lightTheme', - options: { - cssSelector: ':where(:root, :host), [data-bezier-theme="light"]', - }, + 'web/esm/dark-theme': defineWebPlatform({ + buildPath: 'dist/esm/', + files: [ + { + destination: 'darkTheme.mjs', + format: customJsEsm.name, + filter: ({ filePath }) => + [PATH.SEMANTIC_COMMON, PATH.SEMANTIC_DARK].some((src) => + minimatch(filePath, src), + ), + }, + ], }), - ), - TokenBuilder.extend( - defineConfig({ - source: ['src/semantic/*.json', 'src/semantic/dark-theme/*.json'], - reference: ['src/global/*.json'], - destination: 'darkTheme', - options: { cssSelector: '[data-bezier-theme="dark"]' }, + 'web/css/dark-theme': defineWebPlatform({ + buildPath: 'dist/css/', + files: [ + { + destination: 'darkTheme.css', + format: 'css/variables', + filter: ({ filePath }) => + [PATH.SEMANTIC_DARK].some((src) => minimatch(filePath, src)), + options: { + selector: '[data-bezier-theme="dark"]', + outputReferences: true, + }, + }, + ], }), - ), - ].forEach((builder) => builder.buildAllPlatforms()) + }, + }).buildAllPlatforms() } main() diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts index 031b053163..fa99f52c55 100644 --- a/packages/bezier-tokens/scripts/lib/transform.ts +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -3,37 +3,94 @@ import type { Transform, } from 'style-dictionary' -import { extractNumber } from './utils' +import { + extractNumber, + toCSSDimension, +} from './utils' type CustomTransform = Named> +type Transforms = Record -export const customFontRem: CustomTransform = { - name: 'custom/font/rem', - type: 'value', - transitive: true, - matcher: ({ attributes: { category, type } = {} }) => - category === 'font' && (type === 'size' || type === 'line-height'), - transformer: ({ value }: { value: string }, options) => - `${parseFloat(extractNumber(value) ?? '') / ((options && options.basePxFontSize) || 16)}rem`, -} +export const CSSTransforms = { + fontRem: { + name: 'custom/css/font/rem', + type: 'value', + transitive: true, + matcher: (token) => + token.attributes?.category === 'font' && token.type === 'dimension', + transformer: ({ value }: { value: string }, options) => { + const extractedNumber = extractNumber(value) + const isNegative = value.trim().startsWith('-') + const numberValue = + parseFloat(extractedNumber ?? '') / + ((options && options.basePxFontSize) || 16) + return `${isNegative ? -numberValue : numberValue}rem` + }, + }, + fontFamily: { + name: 'custom/css/font/family', + type: 'value', + transitive: true, + matcher: (token) => token.type === 'fontFamily', + transformer: ({ value }: { value: string[] }) => + /** + * @see {@link https://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes} + */ + value.map((fontFamily) => `'${fontFamily}'`).join(', '), + }, + cubicBezier: { + name: 'custom/css/cubicBezier', + type: 'value', + transitive: true, + matcher: (token) => token.type === 'cubicBezier', + transformer: ({ + value: [x1, y1, x2, y2], + }: { + value: [number, number, number, number] + }) => `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`, + }, + shadow: { + name: 'custom/css/shadow', + type: 'value', + transitive: true, + matcher: (token) => token.type === 'shadow', + transformer: ({ value }) => { + function transform(shadow?: { + offsetX?: string + offsetY?: string + blur?: string + spread?: string + color: string + type: 'dropShadow' | 'innerShadow' + }) { + if (typeof shadow !== 'object') { + return shadow + } + const { offsetX, offsetY, blur, spread, color, type } = shadow + return `${type === 'innerShadow' ? 'inset ' : ''}${offsetX ? toCSSDimension(offsetX) : 0 + } ${offsetY ? toCSSDimension(offsetY) : 0} ${blur ? toCSSDimension(blur) : 0 + }${spread ? ` ${toCSSDimension(spread)} ` : ' '}${color || 'rgba(0, 0, 0, 1)' + }`.trim() + } -export const customFontFamily: CustomTransform = { - name: 'custom/font/family', - type: 'value', - transitive: true, - matcher: ({ original: { $type } }) => $type === 'fontFamily', - transformer: ({ value }: { value: string[] }) => - /** - * @see {@link https://stackoverflow.com/questions/13751412/why-would-font-names-need-quotes} - */ - value.map((fontFamily) => `'${fontFamily}'`).join(', '), -} - -export const customCubicBezier: CustomTransform = { - name: 'custom/cubicBezier', - type: 'value', - transitive: true, - matcher: ({ original: { $type } }) => $type === 'cubicBezier', - transformer: ({ value: [x1, y1, x2, y2] }: { value: [number, number, number, number] }) => - `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`, -} + return Array.isArray(value) + ? value.map((v) => transform(v)).join(', ') + : transform(value) + }, + }, + transition: { + name: 'custom/css/transition', + type: 'value', + transitive: true, + matcher: (token) => token.type === 'transition', + transformer: ({ + value: { duration, timingFunction, delay }, + }: { + value: { + duration: string + timingFunction?: string + delay?: string + } + }) => `${duration} ${timingFunction || ''}${delay || ''}`.trim(), + }, +} satisfies Transforms diff --git a/packages/bezier-tokens/scripts/lib/utils.ts b/packages/bezier-tokens/scripts/lib/utils.ts index d9ac74aa33..bb494f98b2 100644 --- a/packages/bezier-tokens/scripts/lib/utils.ts +++ b/packages/bezier-tokens/scripts/lib/utils.ts @@ -2,3 +2,5 @@ export const toCamelCase = (str: string) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase()) export const extractNumber = (str: string) => str.match(/\d+/g)?.join('') + +export const toCSSDimension = (value: string) => (/^0[a-zA-Z]+$/.test(value) ? 0 : value) diff --git a/packages/bezier-tokens/src/global/font.json b/packages/bezier-tokens/src/global/font.json index 17a1fc57ca..a7c01e0824 100644 --- a/packages/bezier-tokens/src/global/font.json +++ b/packages/bezier-tokens/src/global/font.json @@ -2,69 +2,90 @@ "font": { "size": { "11": { - "value": "11px" + "value": "11px", + "type": "dimension" }, "12": { - "value": "12px" + "value": "12px", + "type": "dimension" }, "13": { - "value": "13px" + "value": "13px", + "type": "dimension" }, "14": { - "value": "14px" + "value": "14px", + "type": "dimension" }, "15": { - "value": "15px" + "value": "15px", + "type": "dimension" }, "16": { - "value": "16px" + "value": "16px", + "type": "dimension" }, "17": { - "value": "17px" + "value": "17px", + "type": "dimension" }, "18": { - "value": "18px" + "value": "18px", + "type": "dimension" }, "22": { - "value": "22px" + "value": "22px", + "type": "dimension" }, "24": { - "value": "24px" + "value": "24px", + "type": "dimension" }, "30": { - "value": "30px" + "value": "30px", + "type": "dimension" }, "36": { - "value": "36px" + "value": "36px", + "type": "dimension" } }, "line-height": { "16": { - "value": "16px" + "value": "16px", + "type": "dimension" }, "18": { - "value": "18px" + "value": "18px", + "type": "dimension" }, "20": { - "value": "20px" + "value": "20px", + "type": "dimension" }, "22": { - "value": "22px" + "value": "22px", + "type": "dimension" }, "24": { - "value": "24px" + "value": "24px", + "type": "dimension" }, "28": { - "value": "28px" + "value": "28px", + "type": "dimension" }, "32": { - "value": "32px" + "value": "32px", + "type": "dimension" }, "36": { - "value": "36px" + "value": "36px", + "type": "dimension" }, "44": { - "value": "44px" + "value": "44px", + "type": "dimension" } }, "weight": { @@ -79,24 +100,26 @@ "sans": { "kr": { "value": ["Inter", "NotoSansKR", "NotoSansJP", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Roboto", "system-ui", "sans-serif"], - "$type": "fontFamily" + "type": "fontFamily" }, "jp": { "value": ["Inter", "NotoSansJP", "NotoSansKR", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Roboto", "system-ui", "sans-serif"], - "$type": "fontFamily" + "type": "fontFamily" } }, "mono": { "value": ["ui-monospace", "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", "monospace"], - "$type": "fontFamily" + "type": "fontFamily" } }, "letter-spacing": { "1": { - "value": "-0.1px" + "value": "-0.1px", + "type": "dimension" }, "2": { - "value": "-0.4px" + "value": "-0.4px", + "type": "dimension" } } } diff --git a/packages/bezier-tokens/src/global/transition.json b/packages/bezier-tokens/src/global/transition.json index a8efc45175..de9ea9e936 100644 --- a/packages/bezier-tokens/src/global/transition.json +++ b/packages/bezier-tokens/src/global/transition.json @@ -3,31 +3,43 @@ "timing-function": { "default": { "value": [0.3, 0, 0, 1], - "$type": "cubicBezier" + "type": "cubicBezier" } }, "duration": { "s": { "value": "150ms", - "$type": "duration" + "type": "duration" }, "m": { "value": "300ms", - "$type": "duration" + "type": "duration" }, "l": { "value": "450ms", - "$type": "duration" + "type": "duration" } }, "s": { - "value": "{transition.duration.s} {transition.timing-function.default}" + "value": { + "duration": "{transition.duration.s}", + "timingFunction": "{transition.timing-function.default}" + }, + "type": "transition" }, "m": { - "value": "{transition.duration.m} {transition.timing-function.default}" + "value": { + "duration": "{transition.duration.m}", + "timingFunction": "{transition.timing-function.default}" + }, + "type": "transition" }, "l": { - "value": "{transition.duration.l} {transition.timing-function.default}" + "value": { + "duration": "{transition.duration.l}", + "timingFunction": "{transition.timing-function.default}" + }, + "type": "transition" } } } diff --git a/packages/bezier-tokens/src/semantic/elevation.json b/packages/bezier-tokens/src/semantic/elevation.json index 1acff6b225..9d60653502 100644 --- a/packages/bezier-tokens/src/semantic/elevation.json +++ b/packages/bezier-tokens/src/semantic/elevation.json @@ -1,28 +1,116 @@ { "ev": { "inner": { - "value": "inset 0 0 2px 0 {shdw.inner.base}" + "value": { + "offsetX": "0px", + "offsetY": "0px", + "blur": "2px", + "spread": "0px", + "color": "{shdw.inner.base}", + "type": "innerShadow" + }, + "type": "shadow" }, "base": { - "value": "0 0 2px 0 {shdw.base}" + "value": { + "offsetX": "0px", + "offsetY": "0px", + "blur": "2px", + "spread": "0px", + "color": "{shdw.base}", + "type": "dropShadow" + }, + "type": "shadow" }, "1": { - "value": "{ev.inner}, {ev.base}, 0 1px 2px {shdw.small}" + "value": [ + "{ev.inner}", + "{ev.base}", + { + "offsetX": "0px", + "offsetY": "1px", + "blur": "2px", + "spread": "0px", + "color": "{shdw.small}", + "type": "dropShadow" + } + ], + "type": "shadow" }, "2": { - "value": "{ev.inner}, {ev.base}, 0 2px 6px {shdw.small}" + "value": [ + "{ev.inner}", + "{ev.base}", + { + "offsetX": "0px", + "offsetY": "2px", + "blur": "6px", + "spread": "0px", + "color": "{shdw.small}", + "type": "dropShadow" + } + ], + "type": "shadow" }, "3": { - "value": "{ev.inner}, {ev.base}, 0 4px 12px {shdw.medium}" + "value": [ + "{ev.inner}", + "{ev.base}", + { + "offsetX": "0px", + "offsetY": "4px", + "blur": "12px", + "spread": "0px", + "color": "{shdw.medium}", + "type": "dropShadow" + } + ], + "type": "shadow" }, "4": { - "value": "{ev.inner}, {ev.base}, 0 4px 20px {shdw.large}" + "value": [ + "{ev.inner}", + "{ev.base}", + { + "offsetX": "0px", + "offsetY": "4px", + "blur": "20px", + "spread": "0px", + "color": "{shdw.large}", + "type": "dropShadow" + } + ], + "type": "shadow" }, "5": { - "value": "{ev.inner}, {ev.base}, 0 6px 40px {shdw.xlarge}" + "value": [ + "{ev.inner}", + "{ev.base}", + { + "offsetX": "0px", + "offsetY": "6px", + "blur": "40px", + "spread": "0px", + "color": "{shdw.xlarge}", + "type": "dropShadow" + } + ], + "type": "shadow" }, "6": { - "value": "{ev.inner}, {ev.base}, 0 12px 60px {shdw.xlarge}" + "value": [ + "{ev.inner}", + "{ev.base}", + { + "offsetX": "0px", + "offsetY": "12px", + "blur": "60px", + "spread": "0px", + "color": "{shdw.xlarge}", + "type": "dropShadow" + } + ], + "type": "shadow" } } } diff --git a/packages/bezier-tokens/src/semantic/input.json b/packages/bezier-tokens/src/semantic/input.json index 28c861dfaa..d61f40ee9b 100644 --- a/packages/bezier-tokens/src/semantic/input.json +++ b/packages/bezier-tokens/src/semantic/input.json @@ -1,13 +1,67 @@ { "input": { "box-shadow": { - "value": "0 1px 2px {bg.black.lighter}, inset 0 0 0 1px {bg.black.dark}" + "value": [ + { + "offsetX": "0px", + "offsetY": "1px", + "blur": "2px", + "spread": "0px", + "color": "{bg.black.lighter}", + "type": "dropShadow" + }, + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "0px", + "spread": "1px", + "color": "{bg.black.dark}", + "type": "innerShadow" + } + ], + "type": "shadow" }, "box-shadow-focused": { - "value": "0 0 0 3px {bgtxt.blue.light}, inset 0 0 0 1px {bgtxt.blue.normal}" + "value": [ + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "0px", + "spread": "3px", + "color": "{bgtxt.blue.light}", + "type": "dropShadow" + }, + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "0px", + "spread": "1px", + "color": "{bgtxt.blue.normal}", + "type": "innerShadow" + } + ], + "type": "shadow" }, "box-shadow-invalid": { - "value": "0 0 0 3px {bgtxt.orange.light}, inset 0 0 0 1px {bgtxt.orange.normal}" + "value": [ + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "0px", + "spread": "3px", + "color": "{bgtxt.orange.light}", + "type": "dropShadow" + }, + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "0px", + "spread": "1px", + "color": "{bgtxt.orange.normal}", + "type": "innerShadow" + } + ], + "type": "shadow" } } } From c59d2b2a72f22c25df3311631299a11e44a7bd64 Mon Sep 17 00:00:00 2001 From: "Yang Wooseong (Andrew)" Date: Tue, 12 Dec 2023 13:59:33 +0900 Subject: [PATCH 019/238] Add codmod to transform foundation to css variable (#1781) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue - Fixes #1777 ## Summary - styled component 의 foundation 객체를 사용한 스타일링을 css variable 로 변환하는 codemod 를 추가합니다. - 변환 결과의 전 후를 보려면 테스트 코드나 이슈를 참조해주세요. ## Details - theme, rounding, border, elevation, transition 에 대하여 개별로 transform 함수를 작성해서, 사용처에서 하나씩 사용하거나 한꺼번에 사용할 수 있게 했습니다. theme 마이그레이션만 해도 몇 백 줄이 변하기 때문에 개별적으로 적용할 수 있게 열어주는 게 좋을 것 같았습니다. spacing 은 데스크 코드에서 사용처가 없기 때문에 손으로 지워도 되리라 생각합니다. - 어플리케이션에서 테스트 해보려면 @channel.io/bezier-codemod 패키지를 빌드 한 후 아래 명령어로 테스트 가능합니다. 테스트 결과 80\~90% 이상 커버를 해주는 것을 확인했습니다. 동작 속도는 개별 transform 별로 30초~1분 정도 걸립니다. ``` npx bezier-react/packages/bezier-codemod/node_modules/.bin/bezier-codemod ``` - transform 이 커버하지 못하는 코드 조각은 다음과 같습니다. 아래와 같은 코드를 만났을 경우 처리하지 않고 그대로 두는 것이 의도입니다. 이에 대한 테스트 코드 또한 별도로 작성했습니다. **argument 가 foundation 이외에 여러 개 있을 경우** ```typescript const div = styled.div` ${({ foundation, isRounding }) => isRounding && foundation?.elevation?.ev3()}; ` ``` **constant 를 사용하는 경우** ```typescript background-color: ${({ foundation }) => foundation?.theme[SOME_CONSTANT]}; ``` - transform 이 끝나면 바뀐 파일 갯수를 2배로 보여주는 버그가 있습니다. 아래 코드에서 파일이 두 번씩 들어가서 그런 것 같은데, 아직 정확한 원인은 찾지 못했습니다. 여기서 바로 해결하지 않고 이슈로 남겨두겠습니다. App.tsx ```typescript const sourceFiles = project.addSourceFilesAtPaths(filePath) ``` ### Breaking change? (Yes/No) - No ## References - #1777 - [AST viewer](https://ts-ast-viewer.com/#code/FAYw9gdgzgLgBAYTAW2QQwgEzgXjrATwBsBTTAOkwEsA3AA2DjgBIBvAClbmqjQCNS2AL4BKXAD5GTblV4CycAGSKpTEFCgNp05YritV2lhy4AzMAFcsaGFUhxREw0bjmrmG3YgB+cjABOGFBUtpDkAOYkMAAqgdAhXlAIAMrJ7ADazi5wAOR8aCAA1uH+llgAtOBEYP45ADRZLjlVNfWNRjlgAA4FIQRt2dIAuiJCWWPadGN0QA) --- .changeset/tough-lions-change.md | 6 ++ packages/bezier-codemod/README.md | 90 +++++++++++++++---- packages/bezier-codemod/src/App.tsx | 18 ++++ .../foundation-to-css-variable-border.ts | 83 +++++++++++++++++ .../foundation-to-css-variable-elevation.ts | 58 ++++++++++++ .../foundation-to-css-variable-rounding.ts | 41 +++++++++ .../foundation-to-css-variable-theme.ts | 36 ++++++++ .../foundation-to-css-variable-transition.ts | 69 ++++++++++++++ .../transforms/foundation-to-css-variable.ts | 18 ++++ .../fixtures/border1.input.tsx | 42 +++++++++ .../fixtures/border1.output.tsx | 30 +++++++ .../fixtures/border2.input.tsx | 32 +++++++ .../fixtures/border2.output.tsx | 32 +++++++ .../fixtures/elevation1.input.tsx | 23 +++++ .../fixtures/elevation1.output.tsx | 29 ++++++ .../fixtures/elevation2.input.tsx | 4 + .../fixtures/elevation2.output.tsx | 4 + .../fixtures/rounding1.input.tsx | 40 +++++++++ .../fixtures/rounding1.output.tsx | 48 ++++++++++ .../fixtures/rounding2.input.tsx | 4 + .../fixtures/rounding2.output.tsx | 4 + .../fixtures/theme1.input.tsx | 66 ++++++++++++++ .../fixtures/theme1.output.tsx | 60 +++++++++++++ .../fixtures/theme2.input.tsx | 10 +++ .../fixtures/theme2.output.tsx | 10 +++ .../fixtures/transition1.input.tsx | 41 +++++++++ .../fixtures/transition1.output.tsx | 30 +++++++ .../fixtures/transition2.input.tsx | 12 +++ .../fixtures/transition2.output.tsx | 12 +++ .../foundation-to-css-variable.test.ts | 56 ++++++++++++ packages/bezier-codemod/src/utils/function.ts | 10 +++ packages/bezier-codemod/src/utils/test.ts | 19 ++++ 32 files changed, 1020 insertions(+), 17 deletions(-) create mode 100644 .changeset/tough-lions-change.md create mode 100644 packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts create mode 100644 packages/bezier-codemod/src/transforms/foundation-to-css-variable-elevation.ts create mode 100644 packages/bezier-codemod/src/transforms/foundation-to-css-variable-rounding.ts create mode 100644 packages/bezier-codemod/src/transforms/foundation-to-css-variable-theme.ts create mode 100644 packages/bezier-codemod/src/transforms/foundation-to-css-variable-transition.ts create mode 100644 packages/bezier-codemod/src/transforms/foundation-to-css-variable.ts create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.input.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.output.tsx create mode 100644 packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/foundation-to-css-variable.test.ts create mode 100644 packages/bezier-codemod/src/utils/function.ts create mode 100644 packages/bezier-codemod/src/utils/test.ts diff --git a/.changeset/tough-lions-change.md b/.changeset/tough-lions-change.md new file mode 100644 index 0000000000..772c8f2fc8 --- /dev/null +++ b/.changeset/tough-lions-change.md @@ -0,0 +1,6 @@ +--- +"@channel.io/bezier-codemod": minor +--- + +Add transform functions to help to migrate foundation to css variable generated by `@channel.io/bezier-tokens` package. +They cover theme, transition, elevation, rounding, and border of foundation. diff --git a/packages/bezier-codemod/README.md b/packages/bezier-codemod/README.md index 31cb2d9203..6b371b9125 100644 --- a/packages/bezier-codemod/README.md +++ b/packages/bezier-codemod/README.md @@ -21,20 +21,31 @@ Update the import syntax for the icon source moved from `@channel.io/bezier-reac For example: ```tsx -import React from 'react' -import { AllIcon, Button, CheckIcon as CheckIconSource, Icon, type IconName, IconSize } from '@channel.io/bezier-react' - -import Foo from './foo' +import React from "react"; +import { + AllIcon, + Button, + CheckIcon as CheckIconSource, + Icon, + type IconName, + IconSize, +} from "@channel.io/bezier-react"; + +import Foo from "./foo"; ``` Transforms into: ```tsx -import React from 'react' -import { AllIcon, CheckIcon as CheckIconSource, type IconName } from '@channel.io/bezier-icons' -import { Button, Icon, IconSize } from '@channel.io/bezier-react' - -import Foo from './foo' +import React from "react"; +import { + AllIcon, + CheckIcon as CheckIconSource, + type IconName, +} from "@channel.io/bezier-icons"; +import { Button, Icon, IconSize } from "@channel.io/bezier-react"; + +import Foo from "./foo"; ``` ### Enum Member to String Literal @@ -46,29 +57,74 @@ Replace deprecated enum usage to string literal. For example: ```tsx -import { ProgressBar, ProgressBarSize, ProgressBarVariant } from '@channel.io/bezier-react' +import { + ProgressBar, + ProgressBarSize, + ProgressBarVariant, +} from "@channel.io/bezier-react"; export default () => ( -) +); ``` Transforms into: ```tsx -import { ProgressBar } from '@channel.io/bezier-react' +import { ProgressBar } from "@channel.io/bezier-react"; export default () => ( -) +); +``` + +### Foundation to CSS Variable + +**`foundation-to-css-variable`** + +Replace foundation to css variable +You can also use individual transform function such as `foundation-to-css-theme`, `foundation-to-css-rounding`, and so on. + +For example: + +```tsx +import { styled } from "@channel.io/bezier-react"; + +const Wrapper = styled.div` + color: ${({ foundation }) => foundation?.theme?.["txt-black-dark"]}; + ${({ foundation }) => foundation?.rounding.round12}; + ${({ foundation }) => + foundation?.border?.getBorder(0.5, foundation.theme["bdr-black-light"], { + top: false, + right: false, + left: false, + })}; + ${({ foundation }) => foundation?.elevation?.ev1()}; + ${({ foundation }) => foundation?.transition?.getTransitionsCSS("color")}; +`; +``` + +Transforms into: + +```tsx +import { styled } from "@channel.io/bezier-react"; + +const Wrapper = styled.div` + color: var(--txt-black-dark); + border-radius: var(--radius-12); + border-bottom: 0.5px solid var(--bdr-black-light); + background-color: var(--bg-white-low); + box-shadow: var(--ev-1); + transition: color var(--transition-s); +`; ``` diff --git a/packages/bezier-codemod/src/App.tsx b/packages/bezier-codemod/src/App.tsx index 0467dd949f..ac2ac52083 100644 --- a/packages/bezier-codemod/src/App.tsx +++ b/packages/bezier-codemod/src/App.tsx @@ -19,6 +19,12 @@ import { import project from './project.js' import enumMemberToStringLiteral from './transforms/enum-member-to-string-literal.js' +import foundationToCssVariableBorder from './transforms/foundation-to-css-variable-border.js' +import foundationToCssVariableElevation from './transforms/foundation-to-css-variable-elevation.js' +import foundationToCssVariableRounding from './transforms/foundation-to-css-variable-rounding.js' +import foundationToCssVariableTheme from './transforms/foundation-to-css-variable-theme.js' +import foundationToCssVariableTransition from './transforms/foundation-to-css-variable-transition.js' +import foundationToCssVariable from './transforms/foundation-to-css-variable.js' import iconNameToBezierIcon from './transforms/icon-name-to-bezier-icon.js' import iconsToBezierIcons from './transforms/icons-to-bezier-icons.js' @@ -33,6 +39,12 @@ enum Option { IconsToBezierIcons = 'icons-to-bezier-icons', IconNameToBezierIcon = 'icon-name-to-bezier-icon', EnumMemberToStringLiteral = 'enum-member-to-string-literal', + FoundationToCssVariableTheme = 'foundation-to-css-variable-theme', + FoundationToCssVariableBorder = 'foundation-to-css-variable-border', + FoundationToCssVariableElevation = 'foundation-to-css-variable-elevation', + FoundationToCssVariableRounding = 'foundation-to-css-variable-rounding', + FoundationToCssVariableTransition = 'foundation-to-css-variable-transition', + FoundationToCssVariable = 'foundation-to-css-variable', Exit = 'Exit', } @@ -42,6 +54,12 @@ const transformMap = { [Option.IconsToBezierIcons]: iconsToBezierIcons, [Option.IconNameToBezierIcon]: iconNameToBezierIcon, [Option.EnumMemberToStringLiteral]: enumMemberToStringLiteral, + [Option.FoundationToCssVariableTheme]: foundationToCssVariableTheme, + [Option.FoundationToCssVariableBorder]: foundationToCssVariableBorder, + [Option.FoundationToCssVariableElevation]: foundationToCssVariableElevation, + [Option.FoundationToCssVariableRounding]: foundationToCssVariableRounding, + [Option.FoundationToCssVariableTransition]: foundationToCssVariableTransition, + [Option.FoundationToCssVariable]: foundationToCssVariable, } const options = (Object.keys(transformMap) as Option[]).map((transformName) => ({ diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts new file mode 100644 index 0000000000..594b488e25 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-border.ts @@ -0,0 +1,83 @@ +/* eslint-disable no-template-curly-in-string */ +import { + type CallExpression, + Node, + type SourceFile, + SyntaxKind, + type ts, +} from 'ts-morph' + +import { getArrowFunctionsWithOneArgument } from '../utils/function.js' + +const getBorderStyle = (borderCallExpression: CallExpression) => { + const width = borderCallExpression + .getArguments() + .find(Node.isNumericLiteral) + ?.getText() + + const color = borderCallExpression + .getArguments() + .find(Node.isElementAccessExpression) + ?.getArgumentExpression() + ?.getText() + .slice(1, -1) + + if (!color || !width) { return null } + + const borderDirection = borderCallExpression + .getArguments() + .find(Node.isObjectLiteralExpression) + + const hasBorders = ['top', 'right', 'bottom', 'left'] + .map((value) => borderDirection?.getProperty(value)?.getText() !== `${value}: false`) + + let borderStyle = '' + + if (hasBorders.every((v => v))) { + borderStyle = `border: ${width}px solid var(--${color});\n` + } else { + borderStyle += `border-color: var(--${color});\n` + borderStyle += ` border-style: ${hasBorders + .map((hasBorder) => (hasBorder ? 'solid' : 'none')) + .join(' ') + };\n` + borderStyle += ` border-width: ${width}px;\n` + } + + return borderStyle +} + +const hasBorderFoundation = (node: Node) => node.getText().includes('getBorder') + +const replaceBorder = (sourceFile: SourceFile) => { + const oldSourceFileText = sourceFile.getText() + sourceFile.forEachDescendant((node) => { + if (Node.isTemplateExpression(node)) { + const borderCallExpression = node + .getDescendantsOfKind(SyntaxKind.CallExpression) + .find(hasBorderFoundation) + + if (!borderCallExpression) { return } + + const borderArrowFunctions = getArrowFunctionsWithOneArgument( + node, hasBorderFoundation, + ) + const borderStyle = getBorderStyle(borderCallExpression) + + if (!borderStyle) { return } + + borderArrowFunctions + .map((v) => v.getText()) + .forEach((text) => { + node.replaceWithText( + node.getText() + .replace(`\${${text}};\n` ?? '', borderStyle) + .replace(`\${${text}}\n` ?? '', borderStyle), + ) + }) + } + }) + return sourceFile.getText() !== oldSourceFileText +} + +export default replaceBorder diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-elevation.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-elevation.ts new file mode 100644 index 0000000000..0e4c2ea574 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-elevation.ts @@ -0,0 +1,58 @@ +/* eslint-disable no-template-curly-in-string */ +import { + Node, + type SourceFile, +} from 'ts-morph' + +import { getArrowFunctionsWithOneArgument } from '../utils/function.js' + +const getElevationNum = (text: string) => text.match(/ev(\d+)/)?.[1] + +const bgColorByElevationNum = (ev?: string) => { + switch (ev) { + case '1': + case '2': + return 'bg-white-low' + case '3': + case '4': + case '5': + case '6': + default: + return 'bg-white-high' + } +} + +const getCssVarCode = (arrowFn: string) => { + const ev = getElevationNum(arrowFn) + let css = '' + css += `background-color: var(--${bgColorByElevationNum(ev)});\n` + css += ` box-shadow: var(--ev-${getElevationNum(arrowFn)});` + + return css +} + +const isElevationTheme = (node: Node) => + node.getText().includes('foundation?.elevation') || node.getText().includes('foundation.elevation') + +const replaceElevation = (sourceFile: SourceFile) => { + const oldSourceFileText = sourceFile.getText() + sourceFile.forEachDescendant((node) => { + if (Node.isTemplateExpression(node)) { + const elevationArrowFunctions = getArrowFunctionsWithOneArgument( + node, isElevationTheme, + ) + elevationArrowFunctions + .map((v => v.getText())) + .forEach(text => { + node.replaceWithText( + node.getText() + .replace(`\${${text}}`, getCssVarCode(text)) + .replaceAll(';;', ';'), + ) + }) + } + }) + return sourceFile.getText() !== oldSourceFileText +} + +export default replaceElevation diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-rounding.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-rounding.ts new file mode 100644 index 0000000000..b143029a91 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-rounding.ts @@ -0,0 +1,41 @@ +/* eslint-disable no-template-curly-in-string */ +import { + Node, + type SourceFile, +} from 'ts-morph' + +import { getArrowFunctionsWithOneArgument } from '../utils/function.js' + +const getRound = (text: string) => text.match(/round(\d+)/)?.[1] + +const isRoundingTheme = (node: Node) => node.getText().includes('foundation?.rounding') + +const getRoundStyle = (text: string) => { + let roundStyle = '' + roundStyle += 'overflow: hidden;\n' + roundStyle += ` border-radius: var(--radius-${getRound(text)});` + return roundStyle +} + +const replaceRound = (sourceFile: SourceFile) => { + const oldSourceFileText = sourceFile.getText() + sourceFile.forEachDescendant((node) => { + if (Node.isTemplateExpression(node)) { + const roundArrowFunctions = getArrowFunctionsWithOneArgument( + node, isRoundingTheme, + ) + roundArrowFunctions + .map((v) => v.getText()) + .forEach(text => { + node.replaceWithText( + node.getText() + .replace(`\${${text}}`, getRoundStyle(text)) + .replaceAll(';;', ';'), + ) + }) + } + }) + return oldSourceFileText !== sourceFile.getText() +} + +export default replaceRound diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-theme.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-theme.ts new file mode 100644 index 0000000000..e19c6a5e31 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-theme.ts @@ -0,0 +1,36 @@ +/* eslint-disable no-template-curly-in-string */ +import { + Node, + type SourceFile, +} from 'ts-morph' + +import { getArrowFunctionsWithOneArgument } from '../utils/function.js' + +const getColor = (text: string) => text.match(/\['([a-z-]+)'\]/)?.[1] ?? '' + +const isFoundationTheme = (node: Node) => node.getText().includes('foundation?.theme') && !node.getText().includes('getBorder') + +const replaceTheme = (sourceFile: SourceFile) => { + const oldSourceFileText = sourceFile.getText() + sourceFile.forEachDescendant((node) => { + if (Node.isTemplateExpression(node)) { + const themeArrowFunctions = getArrowFunctionsWithOneArgument(node, isFoundationTheme) + + themeArrowFunctions + .map(v => v.getText()) + .forEach(text => { + const color = getColor(text) + + if (color) { + node.replaceWithText( + node.getText() + .replace(`\${${text}}`, `var(--${getColor(text)})`), + ) + } + }) + } + }) + return sourceFile.getText() !== oldSourceFileText +} + +export default replaceTheme diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable-transition.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-transition.ts new file mode 100644 index 0000000000..999607dd26 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable-transition.ts @@ -0,0 +1,69 @@ +/* eslint-disable no-template-curly-in-string */ +import { + type CallExpression, + Node, + type SourceFile, + SyntaxKind, + type ts, +} from 'ts-morph' + +import { getArrowFunctionsWithOneArgument } from '../utils/function.js' + +const cssVarByDuration: Record = { + 'TransitionDuration.S': 'var(--transition-s)', + 'TransitionDuration.M': 'var(--transition-m)', + 'TransitionDuration.L': 'var(--transition-l)', +} + +const getTransitionStyle = (transitionCallExpression: CallExpression) => { + const firstArg = transitionCallExpression.getArguments()[0] + + if (!firstArg.getText().includes("'")) { return null } + + const properties = (Node.isArrayLiteralExpression(firstArg) ? firstArg.getElements().map(v => v.getText()) : [firstArg.getText()]) + .map(text => text.slice(1, -1)) + const duration = transitionCallExpression.getArguments()[1]?.getText() ?? 'TransitionDuration.S' + const thirdArg = transitionCallExpression.getArguments()[2]?.getText() + const delay = thirdArg ? ` ${thirdArg}ms` : '' + + if (!cssVarByDuration[duration]) { return null } + + const transitionStyle = `transition: ${properties.map((property) => `${property} ${cssVarByDuration[duration]}${delay}`).join(', ')};\n` + + return transitionStyle +} + +const hasTransitionFoundation = (node: Node) => node.getText().includes('getTransitionsCSS') + +const replaceTransitionsCSS = (sourceFile: SourceFile) => { + const oldSourceFileText = sourceFile.getText() + sourceFile.forEachDescendant((node) => { + if (Node.isTemplateExpression(node)) { + const transitionCallExpression = node + .getDescendantsOfKind(SyntaxKind.CallExpression) + .find(hasTransitionFoundation) + + if (!transitionCallExpression) { return } + + const transitionArrowFunctions = getArrowFunctionsWithOneArgument( + node, hasTransitionFoundation, + ) + const transitionStyle = getTransitionStyle(transitionCallExpression) + + if (!transitionStyle) { return } + + transitionArrowFunctions + .map(v => v.getText()) + .forEach((text) => { + node.replaceWithText( + node.getText() + .replace(`\${${text}};\n` ?? '', transitionStyle) + .replace(`\${${text}}\n` ?? '', transitionStyle), + ) + }) + } + }) + return oldSourceFileText !== sourceFile.getText() +} + +export default replaceTransitionsCSS diff --git a/packages/bezier-codemod/src/transforms/foundation-to-css-variable.ts b/packages/bezier-codemod/src/transforms/foundation-to-css-variable.ts new file mode 100644 index 0000000000..4bfdbc379e --- /dev/null +++ b/packages/bezier-codemod/src/transforms/foundation-to-css-variable.ts @@ -0,0 +1,18 @@ +/* eslint-disable no-template-curly-in-string */ +import { type SourceFile } from 'ts-morph' + +import borderTransform from './foundation-to-css-variable-border.js' +import elevationTransform from './foundation-to-css-variable-elevation.js' +import roundingTransform from './foundation-to-css-variable-rounding.js' +import themeTransform from './foundation-to-css-variable-theme.js' +import transitionTransform from './foundation-to-css-variable-transition.js' + +const transform = (sourceFile: SourceFile) => { + transitionTransform(sourceFile) + themeTransform(sourceFile) + elevationTransform(sourceFile) + roundingTransform(sourceFile) + borderTransform(sourceFile) +} + +export default transform diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.input.tsx new file mode 100644 index 0000000000..26d1720be7 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.input.tsx @@ -0,0 +1,42 @@ + +const Wrapper = styled.div` + ${({ foundation }) => + foundation?.border?.getBorder(0.5, foundation.theme['bdr-black-light'], { + top: false, + right: false, + left: false, + })}; +` + +const Wrapper = styled.div` + ${({ foundation }) => + foundation?.border.getBorder(1, foundation.theme?.['bg-txt-black'], { + top: true, + right: true, + bottom: false, + left: true, + })}; +` + +const Wrapper = styled.div` + ${({ foundation }) => + foundation?.border.getBorder(1, foundation.theme?.['bdr-black-light'])} +` + +const Wrapper = styled.div` + ${({ foundation }) => + foundation?.border?.getBorder(1, foundation.theme?.['bdr-black-light'])}; +` + +const div = style.div` + ${({ divider }) => + divider && + css` + ${({ foundation }) => + foundation?.border.getBorder(1, foundation.theme?.['bdr-black-light'], { + top: false, + right: false, + left: false, + })} + `} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx new file mode 100644 index 0000000000..1cd239279f --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border1.output.tsx @@ -0,0 +1,30 @@ + +const Wrapper = styled.div` + border-color: var(--bdr-black-light); + border-style: none none solid none; + border-width: 0.5px; +` + +const Wrapper = styled.div` + border-color: var(--bg-txt-black); + border-style: solid solid none solid; + border-width: 1px; +` + +const Wrapper = styled.div` + border: 1px solid var(--bdr-black-light); +` + +const Wrapper = styled.div` + border: 1px solid var(--bdr-black-light); +` + +const div = style.div` + ${({ divider }) => + divider && + css` + border-color: var(--bdr-black-light); + border-style: none none solid none; + border-width: 1px; + `} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.input.tsx new file mode 100644 index 0000000000..2c8ea382a8 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.input.tsx @@ -0,0 +1,32 @@ +const borderBaseStyle = css` + ${({ foundation }) => + foundation?.border.getBorder(1, 'transparent', { + top: false, + right: false, + bottom: true, + left: false, + })} +` + +const div = style.div` + ${({ divider }) => + divider && + css` + ${({ hasBorder, foundation }) => + hasBorder && foundation?.border.getBorder(1, foundation.theme?.['bdr-black-light'], { + top: false, + right: false, + left: false, + })} + `} +` + +const Row = styled.div` + ${({ foundation }) => + foundation?.border.getBorder( + ROW_BORDER_WIDTH, + foundation?.theme?.['bdr-black-light'], + { top: false, right: false, left: false } + )}; +` + diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.output.tsx new file mode 100644 index 0000000000..2c8ea382a8 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/border2.output.tsx @@ -0,0 +1,32 @@ +const borderBaseStyle = css` + ${({ foundation }) => + foundation?.border.getBorder(1, 'transparent', { + top: false, + right: false, + bottom: true, + left: false, + })} +` + +const div = style.div` + ${({ divider }) => + divider && + css` + ${({ hasBorder, foundation }) => + hasBorder && foundation?.border.getBorder(1, foundation.theme?.['bdr-black-light'], { + top: false, + right: false, + left: false, + })} + `} +` + +const Row = styled.div` + ${({ foundation }) => + foundation?.border.getBorder( + ROW_BORDER_WIDTH, + foundation?.theme?.['bdr-black-light'], + { top: false, right: false, left: false } + )}; +` + diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.input.tsx new file mode 100644 index 0000000000..e4f5104fb6 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.input.tsx @@ -0,0 +1,23 @@ +const div = styled.div` + ${({ foundation }) => foundation?.elevation?.ev1()}; +` + +const div = styled.div` + ${({ foundation }) => foundation?.elevation?.ev2()} +` + +const div = styled.div` + ${({ foundation }) => foundation?.elevation.ev3()}; +` + +const div = styled.div` + ${({ foundation }) => foundation?.elevation.ev4()} +` + +const div = styled.div` + ${({ foundation }) => foundation?.elevation.ev5()} +` + +const div = styled.div` + ${({ foundation }) => foundation?.elevation.ev6()} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.output.tsx new file mode 100644 index 0000000000..4d035991b0 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation1.output.tsx @@ -0,0 +1,29 @@ +const div = styled.div` + background-color: var(--bg-white-low); + box-shadow: var(--ev-1); +` + +const div = styled.div` + background-color: var(--bg-white-low); + box-shadow: var(--ev-2); +` + +const div = styled.div` + background-color: var(--bg-white-high); + box-shadow: var(--ev-3); +` + +const div = styled.div` + background-color: var(--bg-white-high); + box-shadow: var(--ev-4); +` + +const div = styled.div` + background-color: var(--bg-white-high); + box-shadow: var(--ev-5); +` + +const div = styled.div` + background-color: var(--bg-white-high); + box-shadow: var(--ev-6); +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.input.tsx new file mode 100644 index 0000000000..89111ddc30 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.input.tsx @@ -0,0 +1,4 @@ +const div = styled.div` + ${({ foundation, showNavigation }) => + !showNavigation && foundation?.elevation?.ev3()}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.output.tsx new file mode 100644 index 0000000000..89111ddc30 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/elevation2.output.tsx @@ -0,0 +1,4 @@ +const div = styled.div` + ${({ foundation, showNavigation }) => + !showNavigation && foundation?.elevation?.ev3()}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.input.tsx new file mode 100644 index 0000000000..25cf34bbcb --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.input.tsx @@ -0,0 +1,40 @@ +const div = styled.div` + ${({ foundation }) => foundation?.rounding.round12}; +` + +const div= styled.div` + ${({ foundation }) => foundation?.rounding.round8} + + > img { + ${({ foundation }) => foundation?.rounding.round8}; + } +` + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + padding: 16px; + margin: 0 10px 12px; + + ${({ foundation }) => foundation?.rounding?.round12} + ${({ foundation }) => foundation?.elevation?.ev1()} + + background-color: ${({ foundation }) => + foundation?.theme?.['bg-grey-lightest']}; +` + +const div = styled.div` + ${({ foundation }) => foundation?.rounding?.round12}; +` + +const div = styled.div` + ${({ foundation }) => foundation?.rounding?.round12} +` + +const div = styled.div` + ${({ foundation }) => foundation?.rounding.round12}; +` + +const div = styled.div` + ${({ foundation }) => foundation?.rounding.round12} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.output.tsx new file mode 100644 index 0000000000..fdc5ceed4b --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding1.output.tsx @@ -0,0 +1,48 @@ +const div = styled.div` + overflow: hidden; + border-radius: var(--radius-12); +` + +const div= styled.div` + overflow: hidden; + border-radius: var(--radius-8); + + > img { + overflow: hidden; + border-radius: var(--radius-8); + } +` + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + padding: 16px; + margin: 0 10px 12px; + + overflow: hidden; + border-radius: var(--radius-12); + ${({ foundation }) => foundation?.elevation?.ev1()} + + background-color: ${({ foundation }) => + foundation?.theme?.['bg-grey-lightest']}; +` + +const div = styled.div` + overflow: hidden; + border-radius: var(--radius-12); +` + +const div = styled.div` + overflow: hidden; + border-radius: var(--radius-12); +` + +const div = styled.div` + overflow: hidden; + border-radius: var(--radius-12); +` + +const div = styled.div` + overflow: hidden; + border-radius: var(--radius-12); +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.input.tsx new file mode 100644 index 0000000000..a932dcc2f7 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.input.tsx @@ -0,0 +1,4 @@ +const div = styled.div` + ${({ foundation, isRounding }) => + isRounding && foundation?.elevation?.ev3()}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.output.tsx new file mode 100644 index 0000000000..a932dcc2f7 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/rounding2.output.tsx @@ -0,0 +1,4 @@ +const div = styled.div` + ${({ foundation, isRounding }) => + isRounding && foundation?.elevation?.ev3()}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.input.tsx new file mode 100644 index 0000000000..77a881c6bd --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.input.tsx @@ -0,0 +1,66 @@ +const div = styled.div` + color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']}; + background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-lighter']}; +` + +const CountryNumberSelect = styled(BaseCountryNumberSelect)` + margin: 0; + + &&& { + > *:first-child { + color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']}; + background-color: ${({ foundation }) => + foundation?.theme?.['bg-black-lighter']}; + box-shadow: none; + + &:hover { + background-color: ${({ foundation }) => + foundation?.theme?.['bg-black-light']}; + } + } + } +` + +const MessageContainer = styled.div` + background-color: ${({ foundation }) => + foundation?.theme['bgtxt-absolute-black-light']}; + border: 1px solid ${({ foundation }) => foundation?.theme['bdr-black-light']}; + border-radius: 6px; + box-shadow: 0 4px 12px 0 + ${({ foundation }) => foundation?.theme['shdw-large']}; +` + +const Wrapper = styled.div` + .video-react { + border: 1px solid + ${({ foundation }) => foundation?.theme?.['bdr-black-light']} !important; +` + +const Row = styled.div` + ${({ divider }) => + divider && + css` + &:not(:last-child) { + box-shadow: inset 0 -1px 0 ${({ foundation }) => foundation?.theme?.['shdw-small']}; + } + `} + + ${({ disabledHover, isDraggingGlobal }) => + !disabledHover && + !isDraggingGlobal && + css` + &:hover { + background-color: ${({ foundation }) => + foundation?.theme?.['bg-grey-lighter']}; + } + `} +` + +const MessageWrapper = styled.div` + color: ${({ foundation }) => + foundation?.theme?.['bgtxt-white-dark']}; + background-color: ${({ foundation }) => + foundation?.theme?.['bgtxt-absolute-white-dark']}; + ${({ foundation }) => + foundation?.border.getBorder(1, foundation?.theme?.['bdr-black-light'])}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.output.tsx new file mode 100644 index 0000000000..5235e55896 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme1.output.tsx @@ -0,0 +1,60 @@ +const div = styled.div` + color: var(--txt-black-dark); + background-color: var(--bg-grey-lighter); +` + +const CountryNumberSelect = styled(BaseCountryNumberSelect)` + margin: 0; + + &&& { + > *:first-child { + color: var(--txt-black-darkest); + background-color: var(--bg-black-lighter); + box-shadow: none; + + &:hover { + background-color: var(--bg-black-light); + } + } + } +` + +const MessageContainer = styled.div` + background-color: var(--bgtxt-absolute-black-light); + border: 1px solid var(--bdr-black-light); + border-radius: 6px; + box-shadow: 0 4px 12px 0 + var(--shdw-large); +` + +const Wrapper = styled.div` + .video-react { + border: 1px solid + var(--bdr-black-light) !important; +` + +const Row = styled.div` + ${({ divider }) => + divider && + css` + &:not(:last-child) { + box-shadow: inset 0 -1px 0 var(--shdw-small); + } + `} + + ${({ disabledHover, isDraggingGlobal }) => + !disabledHover && + !isDraggingGlobal && + css` + &:hover { + background-color: var(--bg-grey-lighter); + } + `} +` + +const MessageWrapper = styled.div` + color: var(--bgtxt-white-dark); + background-color: var(--bgtxt-absolute-white-dark); + ${({ foundation }) => + foundation?.border.getBorder(1, foundation?.theme?.['bdr-black-light'])}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.input.tsx new file mode 100644 index 0000000000..0c0b4341d1 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.input.tsx @@ -0,0 +1,10 @@ +const div = styled.div` + background-color: ${({ foundation, colorVariant }) => + colorVariant === MessageButtonColorVariant.Null + ? foundation?.theme?.['bg-grey-dark'] + : foundation?.theme?.[SemanticNameByMessageButtonColor[colorVariant]]}; +` + +const div = styled.div` + color: ${({ foundation }) => foundation?.theme?.[SOME_COLOR]}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.output.tsx new file mode 100644 index 0000000000..0c0b4341d1 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/theme2.output.tsx @@ -0,0 +1,10 @@ +const div = styled.div` + background-color: ${({ foundation, colorVariant }) => + colorVariant === MessageButtonColorVariant.Null + ? foundation?.theme?.['bg-grey-dark'] + : foundation?.theme?.[SemanticNameByMessageButtonColor[colorVariant]]}; +` + +const div = styled.div` + color: ${({ foundation }) => foundation?.theme?.[SOME_COLOR]}; +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.input.tsx new file mode 100644 index 0000000000..5446214b3f --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.input.tsx @@ -0,0 +1,41 @@ +const BackIcon = styled(Icon)` + ${({ foundation }) => foundation?.transition?.getTransitionsCSS('color')}; +` + +const Block = styled.div` + ${({ foundation }) => + foundation?.transition.getTransitionsCSS(['background-color'])}; +` + +const Wrapper = styled.div` + ${({ foundation }) => + foundation?.transition.getTransitionsCSS(['background-color', 'color'])}; +` + +const Wrapper = styled.div` + ${({ hasTransition, foundation }) => + hasTransition && foundation?.transition.getTransitionsCSS(['background-color', 'color'])}; +` + +const Command = styled.div` + ${({ disabled }) => + disabled && + css` + &&& { + ${({ foundation }) => + foundation?.transition.getTransitionsCSS([ + 'background-color', + 'color', + 'opacity', + ])} + } + `} +` + +const div = styled.div` + ${({ foundation }) => + foundation?.transition?.getTransitionsCSS( + 'background-color', + TransitionDuration.M + )} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.output.tsx new file mode 100644 index 0000000000..beec1b93fa --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition1.output.tsx @@ -0,0 +1,30 @@ +const BackIcon = styled(Icon)` + transition: color var(--transition-s); +` + +const Block = styled.div` + transition: background-color var(--transition-s); +` + +const Wrapper = styled.div` + transition: background-color var(--transition-s), color var(--transition-s); +` + +const Wrapper = styled.div` + ${({ hasTransition, foundation }) => + hasTransition && foundation?.transition.getTransitionsCSS(['background-color', 'color'])}; +` + +const Command = styled.div` + ${({ disabled }) => + disabled && + css` + &&& { + transition: background-color var(--transition-s), color var(--transition-s), opacity var(--transition-s); + } + `} +` + +const div = styled.div` + transition: background-color var(--transition-m); +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.input.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.input.tsx new file mode 100644 index 0000000000..c8d3e85a46 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.input.tsx @@ -0,0 +1,12 @@ +const div = styled.div` + ${({ foundation }) => + foundation?.transition.getTransitionsCSS( + ['top', 'opacity'], + foundation?.transition.TransitionDuration.S + )} +` + +const transitionStyleOf = (properties: string | string[]) => css` + ${({ foundation }) => + foundation?.transition.getTransitionsCSS(properties, TransitionDuration.M)} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.output.tsx b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.output.tsx new file mode 100644 index 0000000000..c8d3e85a46 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/fixtures/transition2.output.tsx @@ -0,0 +1,12 @@ +const div = styled.div` + ${({ foundation }) => + foundation?.transition.getTransitionsCSS( + ['top', 'opacity'], + foundation?.transition.TransitionDuration.S + )} +` + +const transitionStyleOf = (properties: string | string[]) => css` + ${({ foundation }) => + foundation?.transition.getTransitionsCSS(properties, TransitionDuration.M)} +` diff --git a/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/foundation-to-css-variable.test.ts b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/foundation-to-css-variable.test.ts new file mode 100644 index 0000000000..184b45c130 --- /dev/null +++ b/packages/bezier-codemod/src/transforms/tests/foundation-to-css-variable/foundation-to-css-variable.test.ts @@ -0,0 +1,56 @@ +import { testTransformFunction } from '../../../utils/test.js' +import borderTransform from '../../foundation-to-css-variable-border.js' +import elevationTransform from '../../foundation-to-css-variable-elevation.js' +import roundingTransform from '../../foundation-to-css-variable-rounding.js' +import themeTransform from '../../foundation-to-css-variable-theme.js' +import transitionTransform from '../../foundation-to-css-variable-transition.js' + +describe('theme transform', () => { + it('should transform foundation to css variable', () => { + testTransformFunction(__dirname, 'theme1', themeTransform) + }) + + it('should not transform foundation to css variable', () => { + testTransformFunction(__dirname, 'theme2', themeTransform) + }) +}) + +describe('rounding transform', () => { + it('should transform foundation to css variable', () => { + testTransformFunction(__dirname, 'rounding1', roundingTransform) + }) + + it('should not transform foundation to css variable', () => { + testTransformFunction(__dirname, 'rounding2', roundingTransform) + }) +}) + +describe('border transform', () => { + it('should transform foundation to css variable', () => { + testTransformFunction(__dirname, 'border1', borderTransform) + }) + + it('should not transform foundation to css variable', () => { + testTransformFunction(__dirname, 'border2', borderTransform) + }) +}) + +describe('elevation transform', () => { + it('should transform foundation to css variable', () => { + testTransformFunction(__dirname, 'elevation1', elevationTransform) + }) + + it('should not transform foundation to css variable', () => { + testTransformFunction(__dirname, 'elevation2', elevationTransform) + }) +}) + +describe('transition transform', () => { + it('should transform foundation to css variable', () => { + testTransformFunction(__dirname, 'transition1', transitionTransform) + }) + + it('should not transform foundation to css variable', () => { + testTransformFunction(__dirname, 'transition2', transitionTransform) + }) +}) diff --git a/packages/bezier-codemod/src/utils/function.ts b/packages/bezier-codemod/src/utils/function.ts new file mode 100644 index 0000000000..1ea21dcbf2 --- /dev/null +++ b/packages/bezier-codemod/src/utils/function.ts @@ -0,0 +1,10 @@ +import { + type Node, + SyntaxKind, +} from 'ts-morph' + +export const getArrowFunctionsWithOneArgument = (node: Node, predicate: (node: Node) => boolean) => node + .getDescendantsOfKind(SyntaxKind.ArrowFunction) + .filter(v => v.getDescendantsOfKind(SyntaxKind.ArrowFunction).length === 0) + .filter(v => v.getDescendantsOfKind(SyntaxKind.BindingElement).length === 1) + .filter(predicate) diff --git a/packages/bezier-codemod/src/utils/test.ts b/packages/bezier-codemod/src/utils/test.ts new file mode 100644 index 0000000000..fd9a3807f4 --- /dev/null +++ b/packages/bezier-codemod/src/utils/test.ts @@ -0,0 +1,19 @@ +import fs from 'fs' +import path from 'path' + +import { type SourceFile } from 'ts-morph' + +import project from '../project.js' + +export const testTransformFunction = (dirName: string, fileName: string, transform: (sourceFile: SourceFile) => void) => { + const inputPath = path.join(dirName, 'fixtures', `${fileName}.input.tsx`) + const outputPath = path.join(dirName, 'fixtures', `${fileName}.output.tsx`) + + const inputCode = fs.readFileSync(inputPath, 'utf-8') + const outputCode = fs.readFileSync(outputPath, 'utf-8') + const sourceFile = project.createSourceFile('test.tsx', inputCode, { overwrite: true }) + + transform(sourceFile) + + expect(sourceFile.getFullText()).toBe(outputCode) +} From 8cdbc477394ce9821e030c597c1abb9e15beae5d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 12 Dec 2023 15:11:22 +0900 Subject: [PATCH 020/238] ci(changesets): version packages (alpha) (#1767) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated. ⚠️⚠️⚠️⚠️⚠️⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`. ⚠️⚠️⚠️⚠️⚠️⚠️ # Releases ## @channel.io/bezier-codemod@0.5.0-alpha.0 ### Minor Changes - Add transform functions to help to migrate foundation to css variable generated by `@channel.io/bezier-tokens` package. ([#1781](https://github.com/channel-io/bezier-react/pull/1781)) by @yangwooseong They cover theme, transition, elevation, rounding, and border of foundation. ## @channel.io/bezier-react@2.0.0-alpha.2 ### Minor Changes - Implement multi theme feature based on data attributes. ([#1756](https://github.com/channel-io/bezier-react/pull/1756)) by @sungik-choi ## @channel.io/bezier-tokens@0.1.0-alpha.2 ### Minor Changes - Add composition tokens, such as box-shadow. ([#1769](https://github.com/channel-io/bezier-react/pull/1769)) by @sungik-choi - Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`. ([#1769](https://github.com/channel-io/bezier-react/pull/1769)) by @sungik-choi - Add z-index and opacity tokens. ([#1766](https://github.com/channel-io/bezier-react/pull/1766)) by @sungik-choi - Add categories by token to the JavaScript build file. ([#1766](https://github.com/channel-io/bezier-react/pull/1766)) by @sungik-choi ### Patch Changes - Remove duplicate styles in styles.css ([#1779](https://github.com/channel-io/bezier-react/pull/1779)) by @sungik-choi ## bezier-figma-plugin@0.4.11-alpha.1 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@2.0.0-alpha.2 Co-authored-by: github-actions[bot] --- .changeset/pre.json | 7 +++++++ packages/bezier-codemod/CHANGELOG.md | 7 +++++++ packages/bezier-codemod/package.json | 2 +- packages/bezier-figma-plugin/CHANGELOG.md | 7 +++++++ packages/bezier-figma-plugin/package.json | 2 +- packages/bezier-react/CHANGELOG.md | 6 ++++++ packages/bezier-react/package.json | 4 ++-- packages/bezier-tokens/CHANGELOG.md | 16 ++++++++++++++++ packages/bezier-tokens/package.json | 2 +- yarn.lock | 4 ++-- 10 files changed, 50 insertions(+), 7 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index c736687c16..563716bb08 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -11,9 +11,16 @@ "@channel.io/bezier-tokens": "0.0.0" }, "changesets": [ + "chilled-dots-divide", + "large-pants-brush", + "little-bikes-obey", + "metal-planets-peel", + "mighty-hornets-promise", "rare-coats-sing", + "silent-falcons-behave", "silver-pets-hammer", "tall-maps-lick", + "tough-lions-change", "wicked-months-sparkle" ] } diff --git a/packages/bezier-codemod/CHANGELOG.md b/packages/bezier-codemod/CHANGELOG.md index 528f8fa6c5..f13d1331c0 100644 --- a/packages/bezier-codemod/CHANGELOG.md +++ b/packages/bezier-codemod/CHANGELOG.md @@ -1,5 +1,12 @@ # @channel.io/bezier-codemod +## 0.5.0-alpha.0 + +### Minor Changes + +- Add transform functions to help to migrate foundation to css variable generated by `@channel.io/bezier-tokens` package. ([#1781](https://github.com/channel-io/bezier-react/pull/1781)) by @yangwooseong + They cover theme, transition, elevation, rounding, and border of foundation. + ## 0.4.0 ### Minor Changes diff --git a/packages/bezier-codemod/package.json b/packages/bezier-codemod/package.json index f825cbf571..aedb1a17b6 100644 --- a/packages/bezier-codemod/package.json +++ b/packages/bezier-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-codemod", - "version": "0.4.0", + "version": "0.5.0-alpha.0", "description": "Codemod transformations to help upgrade app using Bezier design system.", "repository": { "type": "git", diff --git a/packages/bezier-figma-plugin/CHANGELOG.md b/packages/bezier-figma-plugin/CHANGELOG.md index 48dd252334..1e82353de3 100644 --- a/packages/bezier-figma-plugin/CHANGELOG.md +++ b/packages/bezier-figma-plugin/CHANGELOG.md @@ -1,5 +1,12 @@ # bezier-figma-plugin +## 0.4.11-alpha.1 + +### Patch Changes + +- Updated dependencies + - @channel.io/bezier-react@2.0.0-alpha.2 + ## 0.4.13 ### Patch Changes diff --git a/packages/bezier-figma-plugin/package.json b/packages/bezier-figma-plugin/package.json index 609f5a6015..8e09929e45 100644 --- a/packages/bezier-figma-plugin/package.json +++ b/packages/bezier-figma-plugin/package.json @@ -1,6 +1,6 @@ { "name": "bezier-figma-plugin", - "version": "0.4.11-alpha.0", + "version": "0.4.11-alpha.1", "private": true, "description": "Figma plugin that helps build Bezier design system and increase productivity.", "repository": { diff --git a/packages/bezier-react/CHANGELOG.md b/packages/bezier-react/CHANGELOG.md index 58f8467985..57e516f2ee 100644 --- a/packages/bezier-react/CHANGELOG.md +++ b/packages/bezier-react/CHANGELOG.md @@ -1,5 +1,11 @@ # @channel.io/bezier-react +## 2.0.0-alpha.2 + +### Minor Changes + +- Implement multi theme feature based on data attributes. ([#1756](https://github.com/channel-io/bezier-react/pull/1756)) by @sungik-choi + ## 2.0.0-alpha.1 ### Minor Changes diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index bdb8d38d0d..93e6b68d70 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-react", - "version": "2.0.0-alpha.1", + "version": "2.0.0-alpha.2", "description": "React components library that implements Bezier design system.", "repository": { "type": "git", @@ -70,7 +70,7 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.22.15", "@channel.io/bezier-icons": "^0.16.0", - "@channel.io/bezier-tokens": "0.1.0-alpha.1", + "@channel.io/bezier-tokens": "0.1.0-alpha.2", "@mdx-js/react": "^1.6.22", "@rollup/plugin-alias": "^5.0.0", "@rollup/plugin-babel": "^6.0.3", diff --git a/packages/bezier-tokens/CHANGELOG.md b/packages/bezier-tokens/CHANGELOG.md index 14152842dd..5c29e5f456 100644 --- a/packages/bezier-tokens/CHANGELOG.md +++ b/packages/bezier-tokens/CHANGELOG.md @@ -1,5 +1,21 @@ # @channel.io/bezier-tokens +## 0.1.0-alpha.2 + +### Minor Changes + +- Add composition tokens, such as box-shadow. ([#1769](https://github.com/channel-io/bezier-react/pull/1769)) by @sungik-choi + +- Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`. ([#1769](https://github.com/channel-io/bezier-react/pull/1769)) by @sungik-choi + +- Add z-index and opacity tokens. ([#1766](https://github.com/channel-io/bezier-react/pull/1766)) by @sungik-choi + +- Add categories by token to the JavaScript build file. ([#1766](https://github.com/channel-io/bezier-react/pull/1766)) by @sungik-choi + +### Patch Changes + +- Remove duplicate styles in styles.css ([#1779](https://github.com/channel-io/bezier-react/pull/1779)) by @sungik-choi + ## 0.1.0-alpha.1 ### Minor Changes diff --git a/packages/bezier-tokens/package.json b/packages/bezier-tokens/package.json index 2b83d1213c..c0c9e32d1c 100644 --- a/packages/bezier-tokens/package.json +++ b/packages/bezier-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@channel.io/bezier-tokens", - "version": "0.1.0-alpha.1", + "version": "0.1.0-alpha.2", "description": "Design tokens for Bezier design system.", "repository": { "type": "git", diff --git a/yarn.lock b/yarn.lock index 80494a9b21..99f2e6299f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2477,7 +2477,7 @@ __metadata: "@babel/preset-react": ^7.22.15 "@babel/preset-typescript": ^7.22.15 "@channel.io/bezier-icons": ^0.16.0 - "@channel.io/bezier-tokens": 0.1.0-alpha.1 + "@channel.io/bezier-tokens": 0.1.0-alpha.2 "@mdx-js/react": ^1.6.22 "@radix-ui/react-checkbox": ^1.0.4 "@radix-ui/react-dialog": ^1.0.4 @@ -2557,7 +2557,7 @@ __metadata: languageName: unknown linkType: soft -"@channel.io/bezier-tokens@0.1.0-alpha.1, @channel.io/bezier-tokens@workspace:packages/bezier-tokens": +"@channel.io/bezier-tokens@0.1.0-alpha.2, @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 027234f3dc812ec9b9e63640bea647bf8104b4db Mon Sep 17 00:00:00 2001 From: Ed Date: Wed, 13 Dec 2023 14:35:33 +0900 Subject: [PATCH 021/238] Remove `LegacySegmentedControl` and related utils (#1786) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary 지원중지된 `LegacySegementedControl` 컴포넌트를 제거합니다. 해당 컴포넌트에만 사용하고 있던 타입 및 유틸 함수를 함께 제거합니다. ## Details - 채널 데스크 기준 사용처가 없으며, `SegmentedControl` 컴포넌트가 상위 호환으로서 완벽하게 대체가 가능한 컴포넌트이기때문에 제거합니다. - 해당 컴포넌트에서 사용하고 있었던 타입 및 유틸 함수를 제거합니다. `ProgressBar` 에서 사용중이던 유틸은 적절한 다른 유틸 함수로 변경했습니다. 기존 동작과 100% 동일하지 않을 수 있으나, 문제 없을 것으로 판단됩니다. ### Breaking change? (Yes/No) Yes. Changeset에 명시해두었습니다. ## References - #1578 (Remove some deprecated components) --- .changeset/short-rice-press.md | 5 + packages/bezier-react/package.json | 2 - .../LegacySegmentedControl.const.ts | 37 - .../LegacySegmentedControl.stories.tsx | 248 ------ .../LegacySegmentedControl.styled.ts | 158 ---- .../LegacySegmentedControl.test.tsx | 73 -- .../LegacySegmentedControl.tsx | 205 ----- .../LegacySegmentedControl.types.ts | 43 - .../__mocks__/ResizeObserver.ts | 9 - .../LegacySegmentedControl.test.tsx.snap | 337 -------- .../LegacySegmentedControl/index.ts | 12 - .../ProgressBar/ProgressBar.styled.ts | 10 +- packages/bezier-react/src/index.ts | 1 - packages/bezier-react/src/types/CSS.ts | 57 -- packages/bezier-react/src/utils/style.test.ts | 137 ---- packages/bezier-react/src/utils/style.ts | 83 +- yarn.lock | 750 +++++++++++++----- 17 files changed, 582 insertions(+), 1585 deletions(-) create mode 100644 .changeset/short-rice-press.md delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.const.ts delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.stories.tsx delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.styled.ts delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.test.tsx delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.tsx delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.types.ts delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/__mocks__/ResizeObserver.ts delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/__snapshots__/LegacySegmentedControl.test.tsx.snap delete mode 100644 packages/bezier-react/src/components/LegacySegmentedControl/index.ts delete mode 100644 packages/bezier-react/src/types/CSS.ts delete mode 100644 packages/bezier-react/src/utils/style.test.ts diff --git a/.changeset/short-rice-press.md b/.changeset/short-rice-press.md new file mode 100644 index 0000000000..9a107e3179 --- /dev/null +++ b/.changeset/short-rice-press.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": major +--- + +Removed `LegacySegmentedControl` component. Previously deprecated in next-v1.204. This component was removed for reasons of web accessibility, keyboard navigation, and design modernization. Use `SegmentedControl` instead. diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index 93e6b68d70..5f3425238e 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -76,7 +76,6 @@ "@rollup/plugin-babel": "^6.0.3", "@rollup/plugin-commonjs": "^25.0.4", "@rollup/plugin-node-resolve": "^15.2.1", - "@rollup/plugin-typescript": "^11.1.3", "@rollup/plugin-url": "^8.0.1", "@storybook/addon-a11y": "^7.4.2", "@storybook/addon-actions": "^7.4.2", @@ -148,7 +147,6 @@ "@radix-ui/react-tooltip": "^1.0.6", "@radix-ui/react-visually-hidden": "^1.0.3", "classnames": "^2.3.2", - "react-resize-detector": "^9.1.0", "react-textarea-autosize": "8.3.4", "ssr-window": "^4.0.2", "uuid": "^9.0.0" diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.const.ts b/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.const.ts deleted file mode 100644 index cbfe442a6f..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.const.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { - Typography, - type css, -} from '~/src/foundation' - -import { LegacySegmentedControlSize } from './LegacySegmentedControl.types' - -export const SIZE_TO_HEIGHT: Record = { - [LegacySegmentedControlSize.XS]: 24, - [LegacySegmentedControlSize.S]: 28, - [LegacySegmentedControlSize.M]: 36, - [LegacySegmentedControlSize.L]: 44, -} - -export const SIZE_TO_PADDING: Record = { - [LegacySegmentedControlSize.XS]: 1, - [LegacySegmentedControlSize.S]: 2, - [LegacySegmentedControlSize.M]: 2, - [LegacySegmentedControlSize.L]: 4, -} - -export const DIVIDER_WIDTH = 1 -export const DIVIDER_SIDE_MARGIN = 6 - -export const SIZE_TO_DIVIDER_VERTICAL_MARGIN: Record = { - [LegacySegmentedControlSize.XS]: 1, - [LegacySegmentedControlSize.S]: 2, - [LegacySegmentedControlSize.M]: 2, - [LegacySegmentedControlSize.L]: 4, -} - -export const SIZE_TO_OPTION_TYPOGRAPHY: Record> = { - [LegacySegmentedControlSize.XS]: Typography.Size13, - [LegacySegmentedControlSize.S]: Typography.Size14, - [LegacySegmentedControlSize.M]: Typography.Size14, - [LegacySegmentedControlSize.L]: Typography.Size14, -} diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.stories.tsx b/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.stories.tsx deleted file mode 100644 index 0bb4398072..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.stories.tsx +++ /dev/null @@ -1,248 +0,0 @@ -import React, { - useCallback, - useRef, - useState, -} from 'react' - -import { - CancelIcon, - PlusIcon, -} from '@channel.io/bezier-icons' -import { - type Meta, - type StoryFn, -} from '@storybook/react' - -import { styled } from '~/src/foundation' - -import { range } from '~/src/utils/number' -import { isEmpty } from '~/src/utils/type' - -import { Icon } from '~/src/components/Icon' -import { Text } from '~/src/components/Text' - -import LegacySegmentedControl from './LegacySegmentedControl' -import type LegacySegmentedControlProps from './LegacySegmentedControl.types' -import { LegacySegmentedControlSize } from './LegacySegmentedControl.types' - -export default { - component: LegacySegmentedControl, - argTypes: { - width: { - control: { - type: 'text', - }, - }, - size: { - control: { - type: 'radio', - }, - options: [...Object.values(LegacySegmentedControlSize)], - }, - }, -} as Meta - -const Wrapper = styled.div` - display: flex; - flex-direction: column; -` - -const ItemList = styled.div` - display: flex; - margin-top: 20px; - flex-direction: column; -` - -const Item = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - box-sizing: border-box; - height: 38px; - padding: 6px 6px 6px 12px; - background-color: lightpink; - - &:first-child { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - } - - &:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - } - - &:not(first-child) { - margin-top: 4px; - } - - &:nth-child(even) { - background-color: skyblue; - } -` - -const InputItem = styled(Item)` - background-color: lightgrey !important; -` - -const CurrentItem = styled.div<{ selected: boolean }>` - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - width: 30px; - padding: 0 4px; - - ${props => (props.selected ? ` - &::after { - display: block; - content: '👉' - } - ` : '')} -` - -const ItemText = styled(Text)` - flex: 1 0 auto; -` - -const ItemIcon = styled(Icon)<{ disabled?: boolean }>` - cursor: ${props => (!props.disabled ? 'pointer' : 'not-allowed')}; -` - -const Input = styled.input` - margin: 0 8px 0 0; - padding: 0; - flex: 1 0 auto; - border: none; - background-color: transparent; - - &:active, &:focus { - border: none; - outline: none; - } -` - -const PrimaryStory: StoryFn = ({ - size, - width, - selectedOptionIndex, - ...otherProps -}) => ( - - { ['Open', 'Snoozed', 'Closed'] } - -) - -const PlaygroundStory: StoryFn = ({ - size, - width, - ...otherProps -}) => { - const inputWrapper = useRef(null) - - const [items, setItems] = useState(range(0, 5) as any[]) - const [currentIndex, setCurrentIndex] = useState(0) - - const clickRemoveIconHandlerFactory = useCallback((index) => ( - () => { - if (items.length > 1) { - setItems(prev => prev.filter((e, i) => (i !== index))) - setCurrentIndex(Math.min(items.length - 2, currentIndex)) - } - } - ), [ - items, - currentIndex, - ]) - - const handleClickAddIcon = useCallback(() => { - if (inputWrapper.current && inputWrapper.current.value) { - setItems((prev) => [...prev, inputWrapper.current!.value]) - inputWrapper.current.value = '' - } - }, []) - - const handleDownEnter = useCallback((e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - e.stopPropagation() - const value = e.currentTarget.value - if (!isEmpty(value.trim())) { - setItems(prev => [...prev, value]) - e.currentTarget.value = '' - } - } - }, []) - - const handleChangeOption = useCallback((index) => { - setCurrentIndex(index) - }, []) - - return ( - - - { items } - - - - { items.map((item, index, allItems) => ( - - - { item } - - - )) } - - - - - - - - ) -} - -export const Primary = { - render: PrimaryStory, - - args: { - disabled: false, - size: LegacySegmentedControlSize.M, - width: '400px', - selectedOptionIndex: 0, - }, -} - -export const Playground = { - render: PlaygroundStory, - - args: { - disabled: false, - size: LegacySegmentedControlSize.M, - width: '400px', - }, -} diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.styled.ts b/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.styled.ts deleted file mode 100644 index b9d30e5753..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.styled.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { - Transition, - css, - styled, -} from '~/src/foundation' - -import disabledOpacity from '~/src/constants/DisabledOpacity' -import type { BezierComponentProps } from '~/src/types/ComponentProps' -import { toLength } from '~/src/utils/style' - -import { - SIZE_TO_DIVIDER_VERTICAL_MARGIN, - SIZE_TO_HEIGHT, - SIZE_TO_PADDING, -} from './LegacySegmentedControl.const' -import { LegacySegmentedControlSize } from './LegacySegmentedControl.types' -import type { LegacySegmentedControlItemProps } from './LegacySegmentedControl.types' - -interface StyledWrapperProps extends BezierComponentProps { - disabled?: boolean - size: LegacySegmentedControlSize - wrapperWidth: number | string -} - -interface StyledOptionItemWrapperProps extends LegacySegmentedControlItemProps { - size: LegacySegmentedControlSize -} - -interface StyledIndicatorProps { - size: LegacySegmentedControlSize -} - -interface StyledDividerProps { - size: LegacySegmentedControlSize - hidden: boolean -} - -const heightStyle = css<{ size: LegacySegmentedControlSize }>` - height: ${({ size }) => SIZE_TO_HEIGHT[size]}px; -` - -const indicatorHeightStyle = css<{ size: LegacySegmentedControlSize }>` - height: ${({ size }) => SIZE_TO_HEIGHT[size] - (SIZE_TO_PADDING[size] * 2)}px; -` - -const verticalPaddingStyle = css<{ size: LegacySegmentedControlSize }>` - padding: ${({ size }) => SIZE_TO_PADDING[size]}px 0; -` - -const wrapperRoundingStyle = css<{ size: LegacySegmentedControlSize }>` - ${({ foundation, size }) => ({ - [LegacySegmentedControlSize.XS]: foundation?.rounding.round6, - [LegacySegmentedControlSize.S]: foundation?.rounding.round8, - [LegacySegmentedControlSize.M]: foundation?.rounding.round8, - [LegacySegmentedControlSize.L]: foundation?.rounding.round12, - })[size]} -` - -const itemRoundingStyle = css<{ size: LegacySegmentedControlSize }>` - ${({ foundation, size }) => ({ - [LegacySegmentedControlSize.XS]: foundation?.rounding.round4, - [LegacySegmentedControlSize.S]: foundation?.rounding.round6, - [LegacySegmentedControlSize.M]: foundation?.rounding.round6, - [LegacySegmentedControlSize.L]: foundation?.rounding.round6, - })[size]} -` - -const indicatorRoundingStyle = css<{ size: LegacySegmentedControlSize }>` - ${({ foundation, size }) => ({ - [LegacySegmentedControlSize.XS]: foundation?.rounding.round4, - [LegacySegmentedControlSize.S]: foundation?.rounding.round6, - [LegacySegmentedControlSize.M]: foundation?.rounding.round6, - [LegacySegmentedControlSize.L]: foundation?.rounding.round8, - })[size]} -` - -export const Wrapper = styled.div` - position: relative; - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - align-items: center; - width: ${({ wrapperWidth }) => toLength(wrapperWidth, '100%')}; - min-width: 50px; - overflow: hidden; - background-color: ${props => props.foundation?.theme?.['bg-black-lighter']}; - ${({ disabled }) => disabled && ` - opacity: ${disabledOpacity}; - `} - ${({ foundation }) => foundation?.transition?.getTransitionsCSS('background-color')}; - - ${heightStyle} - ${wrapperRoundingStyle} - ${verticalPaddingStyle} -` - -export const OptionItemWrapper = styled.div` - position: absolute; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - overflow: hidden; - color: ${props => ( - props.active - ? props.foundation?.theme?.['txt-black-darkest'] - : props.foundation?.theme?.['txt-black-dark'] - )}; - cursor: ${props => { - if (props.disabled) { return 'not-allowed' } - if (props.active) { return 'auto' } - return 'pointer' - }}; - ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'color'])}; - user-select: none; - - &:hover { - ${props => ((!props.disabled && !props.active) ? ` - background-color: ${props.foundation?.theme?.['bg-black-lighter']}; - ` : '')} - } - - ${heightStyle} - ${itemRoundingStyle} -` - -export const Indicator = styled.div` - position: absolute; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - cursor: default; - ${({ foundation }) => ( - foundation?.transition?.getTransitionsCSS('transform', Transition.TransitionDuration.M) - )}; - will-change: transform; - - ${indicatorHeightStyle} - ${indicatorRoundingStyle} -` - -export const IndicatorBox = styled.div` - ${({ foundation }) => foundation?.elevation?.ev1()}; - width: 100%; - height: 100%; - background-color: ${({ foundation }) => foundation?.theme?.['bg-white-high']}; -` - -export const DividerContainer = styled.div` - position: absolute; - top: ${({ size }) => SIZE_TO_DIVIDER_VERTICAL_MARGIN[size]}px; - bottom: ${({ size }) => SIZE_TO_DIVIDER_VERTICAL_MARGIN[size]}px; - - ${({ hidden }) => hidden && ` - visibility: hidden; - `} -` diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.test.tsx b/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.test.tsx deleted file mode 100644 index 02a2324c77..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.test.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react' - -import { LightFoundation } from '~/src/foundation' - -import disabledOpacity from '~/src/constants/DisabledOpacity' -import { range } from '~/src/utils/number' -import { render } from '~/src/utils/test' - -import { Text } from '~/src/components/Text' - -import LegacySegmentedControl, { - SEGMENTED_CONTROL_TEST_ID, - segmentedControlOptionItemTestId, -} from './LegacySegmentedControl' -import type LegacySegmentedControlProps from './LegacySegmentedControl.types' -import ResizeObserver from './__mocks__/ResizeObserver' - -describe('LegacySegmentedControl', () => { - const defaultProps: Partial = { - width: 144, - selectedOptionIndex: 1, - children: range(4).map((i) => { i }), - } - - const renderComponent = (props?: Partial) => render( - , - ) - - let oldWindowResizeObserver - - beforeAll(() => { - oldWindowResizeObserver = window.ResizeObserver - window.ResizeObserver = ResizeObserver - }) - - afterAll(() => { - window.ResizeObserver = oldWindowResizeObserver - }) - - it('Snapshot', () => { - const { getByTestId } = renderComponent() - const rendered = getByTestId(SEGMENTED_CONTROL_TEST_ID) - - expect(rendered).toMatchSnapshot() - }) - - it('has active and non-active items with correct style', () => { - const { getByTestId } = renderComponent({ selectedOptionIndex: 1 }) - - const firstItem = getByTestId(segmentedControlOptionItemTestId(0)) - const secondItem = getByTestId(segmentedControlOptionItemTestId(1)) - - expect(firstItem).toHaveStyle(`color: ${LightFoundation.theme['txt-black-dark']};`) - expect(secondItem).toHaveStyle(`color: ${LightFoundation.theme['txt-black-darkest']};`) - }) - - it('should have correct disabled style', () => { - const { getByTestId } = renderComponent({ disabled: true }) - const rendered = getByTestId(SEGMENTED_CONTROL_TEST_ID) - - expect(rendered).toHaveStyle(`opacity: ${disabledOpacity};`) - }) - - it('has active and non-active items with correct style, even if disabled', () => { - const { getByTestId } = renderComponent({ disabled: true, selectedOptionIndex: 1 }) - - const firstItem = getByTestId(segmentedControlOptionItemTestId(0)) - const secondItem = getByTestId(segmentedControlOptionItemTestId(1)) - - expect(firstItem).toHaveStyle(`color: ${LightFoundation.theme['txt-black-dark']};`) - expect(secondItem).toHaveStyle(`color: ${LightFoundation.theme['txt-black-darkest']};`) - }) -}) diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.tsx b/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.tsx deleted file mode 100644 index efa342e7b7..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import React, { - type Ref, - forwardRef, - useCallback, - useEffect, - useMemo, - useState, -} from 'react' - -import { useResizeDetector } from 'react-resize-detector' -import { v4 as uuid } from 'uuid' - -import useMergeRefs from '~/src/hooks/useMergeRefs' -import { noop } from '~/src/utils/function' -import { range } from '~/src/utils/number' -import { isNumber } from '~/src/utils/type' - -import { Divider } from '~/src/components/Divider' -import useFormFieldProps from '~/src/components/Forms/useFormFieldProps' -import { Text } from '~/src/components/Text' - -import { - DIVIDER_SIDE_MARGIN, - DIVIDER_WIDTH, - SIZE_TO_OPTION_TYPOGRAPHY, - SIZE_TO_PADDING, -} from './LegacySegmentedControl.const' -import type LegacySegmentedControlProps from './LegacySegmentedControl.types' -import { LegacySegmentedControlSize } from './LegacySegmentedControl.types' - -import * as Styled from './LegacySegmentedControl.styled' - -export const SEGMENTED_CONTROL_TEST_ID = 'bezier-react-segmented-control' -const SEGMENTED_CONTROL_OPTION_ITEM_TEST_ID_PREFIX = 'bezier-react-segmented-control-option-item' -export const segmentedControlOptionItemTestId = (index: number) => - [SEGMENTED_CONTROL_OPTION_ITEM_TEST_ID_PREFIX, index.toString()].join('-') - -const itemWidth = (width: number, numItems: number, size: LegacySegmentedControlSize): number => - (width - (2 * SIZE_TO_PADDING[size]) - ((numItems - 1) * DIVIDER_WIDTH)) / Math.max(1, numItems) - -const itemLeft = (width: number, numItems: number, size: LegacySegmentedControlSize) => - (index: number): number => ( - SIZE_TO_PADDING[size] - + (itemWidth(width, numItems, size) * index) - + (DIVIDER_WIDTH * index) - ) - -const dividerLeft = (width: number, numItems: number, size: LegacySegmentedControlSize) => - (index: number): number => ( - SIZE_TO_PADDING[size] - + (itemWidth(width, numItems, size) * index) - + (DIVIDER_WIDTH * (index - 1)) - - DIVIDER_SIDE_MARGIN - ) - -function LegacySegmentedControl( - { - testId = SEGMENTED_CONTROL_TEST_ID, - width = '100%', - size = LegacySegmentedControlSize.M, - /* OptionItemHost props */ - selectedOptionIndex = 0, - onChangeOption = noop, - /* HTMLAttribute props */ - children, - ...rest - }: LegacySegmentedControlProps, - forwardedRef: Ref, -) { - const { - disabled, - ...ownProps - } = useFormFieldProps(rest) - - const [currentIndex, setCurrentIndex] = useState(selectedOptionIndex) - const [wrapperWidth, setWrapperWidth] = useState(0) - - const numItems = useMemo(() => React.Children.count(children), [children]) - - const optionItemWidth = itemWidth(wrapperWidth, numItems, size) - const optionItemLeft = useMemo(() => ( - itemLeft(wrapperWidth, numItems, size) - ), [ - wrapperWidth, - numItems, - size, - ]) - const dividerItemLeft = useMemo(() => ( - dividerLeft(wrapperWidth, numItems, size) - ), [ - wrapperWidth, - numItems, - size, - ]) - - const updateDimensions = useCallback((_width?: number) => { - if (isNumber(_width)) { setWrapperWidth(_width) } - }, []) - - const { ref: resizeDetectorRef } = useResizeDetector({ onResize: updateDimensions }) - - const wrapperRef = useMergeRefs(resizeDetectorRef, forwardedRef) - - useEffect(() => { - if (isNumber(selectedOptionIndex)) { - setCurrentIndex(selectedOptionIndex) - } - }, [selectedOptionIndex]) - - const handleClickOptionItem = useCallback((index: number) => { - setCurrentIndex(index) - onChangeOption(index) - }, [onChangeOption]) - - const renderOption = useCallback((Element: React.ReactNode, index: number) => ( - (disabled ? noop : handleClickOptionItem(index))} - > - - { Element } - - - ), [ - disabled, - size, - currentIndex, - optionItemWidth, - optionItemLeft, - handleClickOptionItem, - ]) - - const Content = useMemo(() => ( - React.Children.map(children, renderOption) - ), [ - children, - renderOption, - ]) - - const Dividers = useMemo(() => ( - range(1, numItems) - .map(index => ( - - )) - ), [ - size, - numItems, - currentIndex, - dividerItemLeft, - ]) - - const IndicatorComponent = useMemo(() => ( - - - - ), [ - size, - currentIndex, - optionItemWidth, - optionItemLeft, - ]) - - return ( - - { IndicatorComponent } - { Content } - { Dividers } - - ) -} - -export default forwardRef(LegacySegmentedControl) diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.types.ts b/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.types.ts deleted file mode 100644 index e85a14b6e9..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/LegacySegmentedControl.types.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type { - BoxSizingUnit, - ExplicitDefaulting, -} from '~/src/types/CSS' -import type { - ActivatableProps, - BezierComponentProps, - ChildrenProps, - OptionItemHostProps, -} from '~/src/types/ComponentProps' - -import type { FormComponentProps } from '~/src/components/Forms/Form.types' - -type SegmentedControlBaseProps = BezierComponentProps & ChildrenProps & FormComponentProps - -type CSSSizingProperty = number | string | ExplicitDefaulting | BoxSizingUnit - -export enum LegacySegmentedControlSize { - XS = 'xs', - S = 's', - M = 'm', - L = 'l', -} - -interface LegacySegmentedControlOptions { - width?: CSSSizingProperty - - /** - * Size variant of this SegmentedControl. - * - * @default SegmentedControlSize.M - */ - size?: LegacySegmentedControlSize -} - -export default interface LegacySegmentedControlProps extends - SegmentedControlBaseProps, - OptionItemHostProps, - LegacySegmentedControlOptions {} - -export interface LegacySegmentedControlItemProps extends - SegmentedControlBaseProps, - Pick {} diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/__mocks__/ResizeObserver.ts b/packages/bezier-react/src/components/LegacySegmentedControl/__mocks__/ResizeObserver.ts deleted file mode 100644 index 16d0043b3b..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/__mocks__/ResizeObserver.ts +++ /dev/null @@ -1,9 +0,0 @@ -class ResizeObserver { - observe() {} - - unobserve() {} - - disconnect() {} -} - -export default ResizeObserver diff --git a/packages/bezier-react/src/components/LegacySegmentedControl/__snapshots__/LegacySegmentedControl.test.tsx.snap b/packages/bezier-react/src/components/LegacySegmentedControl/__snapshots__/LegacySegmentedControl.test.tsx.snap deleted file mode 100644 index 18c2d997c7..0000000000 --- a/packages/bezier-react/src/components/LegacySegmentedControl/__snapshots__/LegacySegmentedControl.test.tsx.snap +++ /dev/null @@ -1,337 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LegacySegmentedControl Snapshot 1`] = ` -.c4 { - font-size: 1.4rem; - line-height: 1.8rem; - margin: 0px 0px 0px 0px; - font-style: normal; - font-weight: bold; - color: inherit; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; - -webkit-transition-timing-function: cubic-bezier(.3,0,0,1); - transition-timing-function: cubic-bezier(.3,0,0,1); - -webkit-transition-duration: 150ms; - transition-duration: 150ms; - -webkit-transition-property: color; - transition-property: color; -} - -.c5 { - font-size: 1.5rem; - line-height: 2rem; - -webkit-letter-spacing: -0.1px; - -moz-letter-spacing: -0.1px; - -ms-letter-spacing: -0.1px; - letter-spacing: -0.1px; - margin: 0px 0px 0px 0px; - font-style: normal; - font-weight: normal; - color: inherit; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; - -webkit-transition-timing-function: cubic-bezier(.3,0,0,1); - transition-timing-function: cubic-bezier(.3,0,0,1); - -webkit-transition-duration: 150ms; - transition-duration: 150ms; - -webkit-transition-property: color; - transition-property: color; -} - -.c8 { - overflow: hidden; - border-radius: 1px; - background-color: #00000014; - width: 1px; - height: calc(100% - 12px); - margin: 6px; -} - -.c0 { - position: relative; - box-sizing: border-box; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 144px; - min-width: 50px; - overflow: hidden; - background-color: #0000000D; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; - -webkit-transition-timing-function: cubic-bezier(.3,0,0,1); - transition-timing-function: cubic-bezier(.3,0,0,1); - -webkit-transition-duration: 150ms; - transition-duration: 150ms; - -webkit-transition-property: background-color; - transition-property: background-color; - height: 36px; - overflow: hidden; - border-radius: 8px; - padding: 2px 0; -} - -.c3 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - overflow: hidden; - color: #00000066; - cursor: pointer; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; - -webkit-transition-timing-function: cubic-bezier(.3,0,0,1); - transition-timing-function: cubic-bezier(.3,0,0,1); - -webkit-transition-duration: 150ms; - transition-duration: 150ms; - -webkit-transition-property: background-color,color; - transition-property: background-color,color; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - height: 36px; - overflow: hidden; - border-radius: 6px; -} - -.c3:hover { - background-color: #0000000D; -} - -.c6 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - overflow: hidden; - color: #000000D9; - cursor: auto; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; - -webkit-transition-timing-function: cubic-bezier(.3,0,0,1); - transition-timing-function: cubic-bezier(.3,0,0,1); - -webkit-transition-duration: 150ms; - transition-duration: 150ms; - -webkit-transition-property: background-color,color; - transition-property: background-color,color; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - height: 36px; - overflow: hidden; - border-radius: 6px; -} - -.c1 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - cursor: default; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; - -webkit-transition-timing-function: cubic-bezier(.3,0,0,1); - transition-timing-function: cubic-bezier(.3,0,0,1); - -webkit-transition-duration: 300ms; - transition-duration: 300ms; - -webkit-transition-property: -webkit-transform; - -webkit-transition-property: transform; - transition-property: transform; - will-change: transform; - height: 32px; - overflow: hidden; - border-radius: 6px; -} - -.c2 { - background-color: #FFFFFF; - box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 1px 2px #00000014; - width: 100%; - height: 100%; - background-color: #FFFFFF; -} - -.c7 { - position: absolute; - top: 2px; - bottom: 2px; - visibility: hidden; -} - -.c9 { - position: absolute; - top: 2px; - bottom: 2px; -} - -
-
-
-
-
- - - 0 - - -
-
- - - 1 - - -
-
- - - 2 - - -
-
- - - 3 - - -
-