From 89237e9c04aedd612c49214c507998bb43f0f050 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi <sungik.dev@gmail.com> Date: Mon, 6 Jan 2025 22:27:51 +0900 Subject: [PATCH] chore: wip --- .../components/AlphaButton/Button.module.scss | 90 ++++++------ .../FloatingButton.module.scss | 64 ++++----- .../FloatingIconButton.module.scss | 62 ++++----- .../AlphaIconButton/IconButton.module.scss | 80 +++++------ .../components/AlphaLoader/Loader.module.scss | 12 +- .../AlphaStatusBadge/StatusBadge.module.scss | 4 +- .../AlphaStatusBadge/StatusBadge.tsx | 4 +- .../ToggleButton.module.scss | 20 +-- .../ToggleEmojiButtonGroup.module.scss | 14 +- .../bezier-react/src/components/Icon/Icon.tsx | 4 +- .../SmoothCornersBox/SmoothCornersBox.tsx | 9 +- .../src/components/Spinner/Spinner.tsx | 4 +- .../src/components/Status/Status.tsx | 4 +- .../bezier-react/src/components/Text/Text.tsx | 4 +- .../bezier-react/src/stories/alpha-color.mdx | 14 +- .../bezier-react/src/stories/alpha-shadow.mdx | 14 +- .../src/styles/_alpha-tokens.scss | 2 - packages/bezier-react/src/styles/_tokens.scss | 2 + packages/bezier-react/src/styles/index.scss | 6 +- .../bezier-react/src/types/alpha-tokens.ts | 25 ++-- .../bezier-react/src/types/props-helpers.ts | 6 +- packages/bezier-react/src/utils/style.ts | 128 +++++++++++++++++- .../bezier-tokens/scripts/lib/transform.ts | 6 + 23 files changed, 353 insertions(+), 225 deletions(-) delete mode 100644 packages/bezier-react/src/styles/_alpha-tokens.scss diff --git a/packages/bezier-react/src/components/AlphaButton/Button.module.scss b/packages/bezier-react/src/components/AlphaButton/Button.module.scss index 5a4ded7793..2f2c063279 100644 --- a/packages/bezier-react/src/components/AlphaButton/Button.module.scss +++ b/packages/bezier-react/src/components/AlphaButton/Button.module.scss @@ -6,28 +6,28 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; .Button { $primary-color-map: ( - blue: --alpha-color-primary-bg-normal, - cobalt: --alpha-color-accent-bg-normal, - red: --alpha-color-critical-bg-normal, - orange: --alpha-color-warning-bg-normal, - green: --alpha-color-success-bg-normal, - pink: --alpha-color-bg-pink-normal, - purple: --alpha-color-bg-purple-normal, - dark-grey: --alpha-color-bg-grey-darkest, - light-grey: --alpha-color-bg-black-dark, - white-absolute: --alpha-color-bg-absolute-white-dark, + blue: --alpha-primary-bg-normal, + cobalt: --alpha-accent-bg-normal, + red: --alpha-critical-bg-normal, + orange: --alpha-warning-bg-normal, + green: --alpha-success-bg-normal, + pink: --alpha-bg-pink-normal, + purple: --alpha-bg-purple-normal, + dark-grey: --alpha-bg-grey-darkest, + light-grey: --alpha-bg-black-dark, + white-absolute: --alpha-bg-absolute-white-dark, ); $secondary-color-map: ( - blue: --alpha-color-primary-bg-lightest, - cobalt: --alpha-color-accent-bg-lightest, - red: --alpha-color-critical-bg-lightest, - orange: --alpha-color-warning-bg-lightest, - green: --alpha-color-success-bg-lightest, - pink: --alpha-color-bg-pink-lightest, - purple: --alpha-color-bg-purple-lightest, - dark-grey: --alpha-color-bg-black-lighter, - light-grey: --alpha-color-bg-black-lighter, - white-absolute: --alpha-color-bg-absolute-white-lightest, + blue: --alpha-primary-bg-lightest, + cobalt: --alpha-accent-bg-lightest, + red: --alpha-critical-bg-lightest, + orange: --alpha-warning-bg-lightest, + green: --alpha-success-bg-lightest, + pink: --alpha-bg-pink-lightest, + purple: --alpha-bg-purple-lightest, + dark-grey: --alpha-bg-black-lighter, + light-grey: --alpha-bg-black-lighter, + white-absolute: --alpha-bg-absolute-white-lightest, ); position: relative; @@ -101,48 +101,48 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; @each $color in $chromatic-colors { &:where(.color-#{'' + $color}) { /* stylelint-disable-next-line bezier/validate-token */ - background-color: var(--alpha-color-bg-#{$color}-transparent); + background-color: var(--alpha-bg-#{$color}-transparent); } } &:where(.color-dark-grey, .color-light-grey) { - background-color: var(--alpha-color-bg-black-transparent); + background-color: var(--alpha-bg-black-transparent); } &:where(.color-white-absolute) { - background-color: var(--alpha-color-bg-absolute-white-transparent); + background-color: var(--alpha-bg-absolute-white-transparent); } } /* color */ /* stylelint-disable-next-line no-duplicate-selectors */ &:where(.variant-primary) { - color: var(--alpha-color-fg-absolute-white-dark); + color: var(--alpha-fg-absolute-white-dark); &:where(.color-dark-grey) { - color: var(--alpha-color-fg-white-normal); + color: var(--alpha-fg-white-normal); } &:where(.color-light-grey) { - color: var(--alpha-color-fg-absolute-white-normal); + color: var(--alpha-fg-absolute-white-normal); } &:where(.color-white-absolute) { - color: var(--alpha-color-fg-absolute-black-normal); + color: var(--alpha-fg-absolute-black-normal); } } &:where(.variant-secondary, .variant-tertiary) { $color-map: ( - blue: var(--alpha-color-primary-fg-normal), - cobalt: var(--alpha-color-accent-fg-normal), - red: var(--alpha-color-critical-fg-normal), - orange: var(--alpha-color-warning-fg-normal), - green: var(--alpha-color-success-fg-normal), - pink: var(--alpha-color-fg-pink-normal), - purple: var(--alpha-color-fg-purple-normal), - dark-grey: var(--alpha-color-fg-black-darkest), - light-grey: var(--alpha-color-fg-black-darker), + blue: var(--alpha-primary-fg-normal), + cobalt: var(--alpha-accent-fg-normal), + red: var(--alpha-critical-fg-normal), + orange: var(--alpha-warning-fg-normal), + green: var(--alpha-success-fg-normal), + pink: var(--alpha-fg-pink-normal), + purple: var(--alpha-fg-purple-normal), + dark-grey: var(--alpha-fg-black-darkest), + light-grey: var(--alpha-fg-black-darker), ); @each $button-color, $color in $color-map { @@ -153,24 +153,24 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.color-dark-grey) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-black-darker); + color: var(--alpha-fg-black-darker); } } &:where(.color-light-grey) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-black-dark); + color: var(--alpha-fg-black-dark); } } } &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-absolute-white-light); + color: var(--alpha-fg-absolute-white-light); } & :where(.ButtonText) { - color: var(--alpha-color-fg-absolute-white-normal); + color: var(--alpha-fg-absolute-white-normal); } } @@ -215,18 +215,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; @each $color in $chromatic-colors { &:where(.color-#{'' + $color}) { /* stylelint-disable-next-line bezier/validate-token */ - background-color: var(--alpha-color-bg-#{$color}-transparent-hovered); + background-color: var(--alpha-bg-#{$color}-transparent-hovered); } } &:where(.color-dark-grey, .color-light-grey) { - background-color: var(--alpha-color-bg-black-transparent-hovered); + background-color: var(--alpha-bg-black-transparent-hovered); } &:where(.color-white-absolute) { - background-color: var( - --alpha-color-bg-absolute-white-transparent-hovered - ); + background-color: var(--alpha-bg-absolute-white-transparent-hovered); } } @@ -244,7 +242,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.color-white-absolute.variant-tertiary) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-absolute-white-normal); + color: var(--alpha-fg-absolute-white-normal); } } } diff --git a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss index 50a209afcf..9036c34f00 100644 --- a/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss +++ b/packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss @@ -6,41 +6,41 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; .FloatingButton { $background-color-map: ( - blue: --alpha-color-primary-bg-normal, - cobalt: --alpha-color-accent-bg-normal, - red: --alpha-color-critical-bg-normal, - orange: --alpha-color-warning-bg-normal, - green: --alpha-color-success-bg-normal, - pink: --alpha-color-bg-pink-normal, - purple: --alpha-color-bg-purple-normal, - dark-grey: --alpha-color-bg-grey-darkest, - light-grey: --alpha-color-bg-grey-dark, + blue: --alpha-primary-bg-normal, + cobalt: --alpha-accent-bg-normal, + red: --alpha-critical-bg-normal, + orange: --alpha-warning-bg-normal, + green: --alpha-success-bg-normal, + pink: --alpha-bg-pink-normal, + purple: --alpha-bg-purple-normal, + dark-grey: --alpha-bg-grey-darkest, + light-grey: --alpha-bg-grey-dark, ); $color-map: ( - blue: --alpha-color-primary-fg-normal, - cobalt: --alpha-color-accent-fg-normal, - red: --alpha-color-critical-fg-normal, - orange: --alpha-color-warning-fg-normal, - green: --alpha-color-success-fg-normal, - pink: --alpha-color-fg-pink-normal, - purple: --alpha-color-fg-purple-normal, - dark-grey: --alpha-color-fg-black-darkest, - light-grey: --alpha-color-fg-black-darker, + blue: --alpha-primary-fg-normal, + cobalt: --alpha-accent-fg-normal, + red: --alpha-critical-fg-normal, + orange: --alpha-warning-fg-normal, + green: --alpha-success-fg-normal, + pink: --alpha-fg-pink-normal, + purple: --alpha-fg-purple-normal, + dark-grey: --alpha-fg-black-darkest, + light-grey: --alpha-fg-black-darker, ); $hovered-color-map: ( - blue: --alpha-color-primary-fg-dark, - cobalt: --alpha-color-accent-fg-dark, - red: --alpha-color-critical-fg-dark, - orange: --alpha-color-warning-fg-dark, - green: --alpha-color-success-fg-dark, - pink: --alpha-color-fg-pink-dark, - purple: --alpha-color-fg-purple-dark, - dark-grey: --alpha-color-fg-black-darkest, - light-grey: --alpha-color-fg-black-darkest, + blue: --alpha-primary-fg-dark, + cobalt: --alpha-accent-fg-dark, + red: --alpha-critical-fg-dark, + orange: --alpha-warning-fg-dark, + green: --alpha-success-fg-dark, + pink: --alpha-fg-pink-dark, + purple: --alpha-fg-purple-dark, + dark-grey: --alpha-fg-black-darkest, + light-grey: --alpha-fg-black-darkest, ); $icon-color-map: ( - dark-grey: --alpha-color-fg-black-darker, - light-grey: --alpha-color-fg-black-dark, + dark-grey: --alpha-fg-black-darker, + light-grey: --alpha-fg-black-dark, ); position: relative; @@ -108,16 +108,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; } &:where(.variant-secondary) { - background-color: var(--alpha-color-bg-white-higher); + background-color: var(--alpha-bg-white-higher); } /* color */ /* stylelint-disable-next-line no-duplicate-selectors */ &:where(.variant-primary) { - color: var(--alpha-color-fg-absolute-white-dark); + color: var(--alpha-fg-absolute-white-dark); &:where(.color-dark-grey) { - color: var(--alpha-color-fg-white-normal); + color: var(--alpha-fg-white-normal); } } diff --git a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss index f2a740903f..6e41912749 100644 --- a/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss +++ b/packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss @@ -6,37 +6,37 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; .FloatingIconButton { $primary-color-map: ( - blue: --alpha-color-primary-bg-normal, - cobalt: --alpha-color-accent-bg-normal, - red: --alpha-color-critical-bg-normal, - orange: --alpha-color-warning-bg-normal, - green: --alpha-color-success-bg-normal, - pink: --alpha-color-bg-pink-normal, - purple: --alpha-color-bg-purple-normal, - dark-grey: --alpha-color-bg-grey-darkest, - light-grey: --alpha-color-bg-grey-dark, + blue: --alpha-primary-bg-normal, + cobalt: --alpha-accent-bg-normal, + red: --alpha-critical-bg-normal, + orange: --alpha-warning-bg-normal, + green: --alpha-success-bg-normal, + pink: --alpha-bg-pink-normal, + purple: --alpha-bg-purple-normal, + dark-grey: --alpha-bg-grey-darkest, + light-grey: --alpha-bg-grey-dark, ); $color-map: ( - blue: --alpha-color-primary-fg-normal, - cobalt: --alpha-color-accent-fg-normal, - red: --alpha-color-critical-fg-normal, - orange: --alpha-color-warning-fg-normal, - green: --alpha-color-success-fg-normal, - pink: --alpha-color-fg-pink-normal, - purple: --alpha-color-fg-purple-normal, - dark-grey: --alpha-color-fg-black-darker, - light-grey: --alpha-color-fg-black-dark, + blue: --alpha-primary-fg-normal, + cobalt: --alpha-accent-fg-normal, + red: --alpha-critical-fg-normal, + orange: --alpha-warning-fg-normal, + green: --alpha-success-fg-normal, + pink: --alpha-fg-pink-normal, + purple: --alpha-fg-purple-normal, + dark-grey: --alpha-fg-black-darker, + light-grey: --alpha-fg-black-dark, ); $hovered-color-map: ( - blue: --alpha-color-primary-fg-dark, - cobalt: --alpha-color-accent-fg-dark, - red: --alpha-color-critical-fg-dark, - orange: --alpha-color-warning-fg-dark, - green: --alpha-color-success-fg-dark, - pink: --alpha-color-fg-pink-dark, - purple: --alpha-color-fg-purple-dark, - dark-grey: --alpha-color-fg-black-darkest, - light-grey: --alpha-color-fg-black-darker, + blue: --alpha-primary-fg-dark, + cobalt: --alpha-accent-fg-dark, + red: --alpha-critical-fg-dark, + orange: --alpha-warning-fg-dark, + green: --alpha-success-fg-dark, + pink: --alpha-fg-pink-dark, + purple: --alpha-fg-purple-dark, + dark-grey: --alpha-fg-black-darkest, + light-grey: --alpha-fg-black-darker, ); position: relative; @@ -89,20 +89,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; } &:where(.variant-secondary) { - background-color: var(--alpha-color-bg-white-higher); + background-color: var(--alpha-bg-white-higher); } /* color */ /* stylelint-disable-next-line no-duplicate-selectors */ &:where(.variant-primary) { - color: var(--alpha-color-fg-absolute-white-dark); + color: var(--alpha-fg-absolute-white-dark); &:where(.color-dark-grey) { - color: var(--alpha-color-fg-white-normal); + color: var(--alpha-fg-white-normal); } &:where(.color-light-grey) { - color: var(--alpha-color-fg-absolute-white-dark); + color: var(--alpha-fg-absolute-white-dark); } } diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss index c900b6d333..3ed311e852 100644 --- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss +++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss @@ -43,16 +43,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; /* background-color */ &:where(.variant-primary) { $background-color-by-color: ( - blue: var(--alpha-color-primary-bg-normal), - cobalt: var(--alpha-color-accent-bg-normal), - red: var(--alpha-color-critical-bg-normal), - orange: var(--alpha-color-warning-bg-normal), - green: var(--alpha-color-success-bg-normal), - pink: var(--alpha-color-bg-pink-normal), - purple: var(--alpha-color-bg-purple-normal), - dark-grey: var(--alpha-color-bg-grey-darkest), - light-grey: var(--alpha-color-bg-black-dark), - white-absolute: var(--alpha-color-bg-absolute-white-dark), + blue: var(--alpha-primary-bg-normal), + cobalt: var(--alpha-accent-bg-normal), + red: var(--alpha-critical-bg-normal), + orange: var(--alpha-warning-bg-normal), + green: var(--alpha-success-bg-normal), + pink: var(--alpha-bg-pink-normal), + purple: var(--alpha-bg-purple-normal), + dark-grey: var(--alpha-bg-grey-darkest), + light-grey: var(--alpha-bg-black-dark), + white-absolute: var(--alpha-bg-absolute-white-dark), ); @each $color, $background-color in $background-color-by-color { @@ -64,16 +64,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.variant-secondary) { $background-color-by-color: ( - blue: var(--alpha-color-primary-bg-lightest), - cobalt: var(--alpha-color-accent-bg-lightest), - red: var(--alpha-color-critical-bg-lightest), - orange: var(--alpha-color-warning-bg-lightest), - green: var(--alpha-color-success-bg-lightest), - pink: var(--alpha-color-bg-pink-lightest), - purple: var(--alpha-color-bg-purple-lightest), - dark-grey: var(--alpha-color-bg-black-lighter), - light-grey: var(--alpha-color-bg-black-lighter), - white-absolute: var(--alpha-color-bg-absolute-white-lightest), + blue: var(--alpha-primary-bg-lightest), + cobalt: var(--alpha-accent-bg-lightest), + red: var(--alpha-critical-bg-lightest), + orange: var(--alpha-warning-bg-lightest), + green: var(--alpha-success-bg-lightest), + pink: var(--alpha-bg-pink-lightest), + purple: var(--alpha-bg-purple-lightest), + dark-grey: var(--alpha-bg-black-lighter), + light-grey: var(--alpha-bg-black-lighter), + white-absolute: var(--alpha-bg-absolute-white-lightest), ); @each $color, $background-color in $background-color-by-color { @@ -87,48 +87,48 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; @each $color in $chromatic-colors { &:where(.color-#{'' + $color}) { /* stylelint-disable-next-line bezier/validate-token */ - background-color: var(--alpha-color-bg-#{$color}-transparent); + background-color: var(--alpha-bg-#{$color}-transparent); } } &:where(.color-dark-grey, .color-light-grey) { - background-color: var(--alpha-color-bg-black-transparent); + background-color: var(--alpha-bg-black-transparent); } &:where(.color-white-absolute) { - background-color: var(--alpha-color-bg-absolute-white-transparent); + background-color: var(--alpha-bg-absolute-white-transparent); } } /* color */ /* stylelint-disable-next-line no-duplicate-selectors */ &:where(.variant-primary) { - color: var(--alpha-color-fg-absolute-white-dark); + color: var(--alpha-fg-absolute-white-dark); &:where(.color-dark-grey) { - color: var(--alpha-color-fg-white-normal); + color: var(--alpha-fg-white-normal); } &:where(.color-light-grey) { - color: var(--alpha-color-fg-absolute-white-normal); + color: var(--alpha-fg-absolute-white-normal); } &:where(.color-white-absolute) { - color: var(--alpha-color-fg-absolute-black-normal); + color: var(--alpha-fg-absolute-black-normal); } } &:where(.variant-secondary, .variant-tertiary) { $color-map: ( - blue: var(--alpha-color-primary-fg-normal), - cobalt: var(--alpha-color-accent-fg-normal), - red: var(--alpha-color-critical-fg-normal), - orange: var(--alpha-color-warning-fg-normal), - green: var(--alpha-color-success-fg-normal), - pink: var(--alpha-color-fg-pink-normal), - purple: var(--alpha-color-fg-purple-normal), - dark-grey: var(--alpha-color-fg-black-darkest), - light-grey: var(--alpha-color-fg-black-darker), + blue: var(--alpha-primary-fg-normal), + cobalt: var(--alpha-accent-fg-normal), + red: var(--alpha-critical-fg-normal), + orange: var(--alpha-warning-fg-normal), + green: var(--alpha-success-fg-normal), + pink: var(--alpha-fg-pink-normal), + purple: var(--alpha-fg-purple-normal), + dark-grey: var(--alpha-fg-black-darkest), + light-grey: var(--alpha-fg-black-darker), ); @each $button-color, $color in $color-map { @@ -139,20 +139,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.color-dark-grey) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-black-darker); + color: var(--alpha-fg-black-darker); } } &:where(.color-light-grey) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-black-dark); + color: var(--alpha-fg-black-dark); } } } &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-absolute-white-normal); + color: var(--alpha-fg-absolute-white-normal); } } @@ -238,7 +238,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; &:where(.color-white-absolute.variant-tertiary) { & :where(.ButtonIcon) { - color: var(--alpha-color-fg-absolute-white-normal); + color: var(--alpha-fg-absolute-white-normal); } } } diff --git a/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss b/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss index 886a2b1816..cc9813d034 100644 --- a/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss +++ b/packages/bezier-react/src/components/AlphaLoader/Loader.module.scss @@ -59,17 +59,17 @@ } &:where(.variant-primary) { - --b-loader-track-color: var(--alpha-color-primary-bg-lightest); - --b-loader-indicator-color: var(--alpha-color-fg-blue-normal); + --b-loader-track-color: var(--alpha-primary-bg-lightest); + --b-loader-indicator-color: var(--alpha-fg-blue-normal); } &:where(.variant-secondary) { - --b-loader-track-color: var(--alpha-color-bg-black-light); - --b-loader-indicator-color: var(--alpha-color-fg-black-light); + --b-loader-track-color: var(--alpha-bg-black-light); + --b-loader-indicator-color: var(--alpha-fg-black-light); } &:where(.variant-on-overlay) { - --b-loader-track-color: var(--alpha-color-bg-absolute-white-lightest); - --b-loader-indicator-color: var(--alpha-color-fg-absolute-white-light); + --b-loader-track-color: var(--alpha-bg-absolute-white-lightest); + --b-loader-indicator-color: var(--alpha-fg-absolute-white-light); } } diff --git a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss index 4d54b9e54f..b2f30fa17d 100644 --- a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss +++ b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.module.scss @@ -12,8 +12,8 @@ width: var(--b-status-size); height: var(--b-status-size); - background-color: var(--alpha-color-bg-white-highest); - border: var(--b-status-border-width) solid var(--alpha-color-bg-white-highest); + background-color: var(--alpha-bg-white-highest); + border: var(--b-status-border-width) solid var(--alpha-bg-white-highest); border-radius: 50%; &::after { diff --git a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx index a98294df5f..5a2815726a 100644 --- a/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx +++ b/packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx @@ -6,7 +6,7 @@ import { MoonFilledIcon } from '@channel.io/bezier-icons' import classNames from 'classnames' import { type SemanticColor } from '~/src/types/tokens' -import { cssVar } from '~/src/utils/style' +import { colorTokenCssVar } from '~/src/utils/style' import { Icon } from '~/src/components/Icon' @@ -54,7 +54,7 @@ export const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>( ref={forwardedRef} style={ { - '--b-status-bg-color': cssVar(backgroundColor), + '--b-status-bg-color': colorTokenCssVar(backgroundColor), ...style, } as CSSProperties } diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss index f29776e7dc..c940a6bad6 100644 --- a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss +++ b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss @@ -19,13 +19,13 @@ } &:where(.variant-primary) { - color: var(--alpha-color-fg-black-darkest); - background-color: var(--alpha-color-bg-grey-lightest); + color: var(--alpha-fg-black-darkest); + background-color: var(--alpha-bg-grey-lightest); box-shadow: var(--alpha-shadow-input-default); } &:where(.variant-secondary) { - background-color: var(--alpha-color-bg-black-lightest); + background-color: var(--alpha-bg-black-lightest); } &:where(.shape-rectangle) { @@ -39,11 +39,11 @@ /* visual effect on interaction */ &:where(:hover) { &:where(.variant-primary) { - background-color: var(--alpha-color-bg-grey-lighter); + background-color: var(--alpha-bg-grey-lighter); } &:where(.variant-secondary) { - background-color: var(--alpha-color-bg-black-lighter); + background-color: var(--alpha-bg-black-lighter); } &:where([data-state='off']) { @@ -54,16 +54,16 @@ } &:where([data-state='on']) { - color: var(--alpha-color-fg-blue-normal); + color: var(--alpha-fg-blue-normal); &:where(.variant-primary) { - background-color: var(--alpha-color-bg-blue-lightest); + background-color: var(--alpha-bg-blue-lightest); box-shadow: var(--alpha-shadow-input-default); - box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset; + box-shadow: 0 0 0 1px var(--alpha-primary-bg-normal) inset; } &:where(.variant-secondary) { - background-color: var(--alpha-color-primary-bg-lighter); + background-color: var(--alpha-primary-bg-lighter); } & :where(.ButtonText) { @@ -77,7 +77,7 @@ /* internal components */ &:where([data-state='off']) :where(.ButtonIcon) { - color: var(--alpha-color-fg-black-dark); + color: var(--alpha-fg-black-dark); } & :where(.ButtonContent) { diff --git a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss index 70a76542b3..7565aa8608 100644 --- a/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss +++ b/packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss @@ -43,28 +43,28 @@ } &:where(.variant-primary) { - background-color: var(--alpha-color-bg-grey-lightest); + background-color: var(--alpha-bg-grey-lightest); box-shadow: var(--alpha-shadow-input-default); &:where(&:hover) { - background-color: var(--alpha-color-bg-grey-lighter); + background-color: var(--alpha-bg-grey-lighter); } &:where([data-state='on']) { - background-color: var(--alpha-color-bg-blue-lightest); - box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset; + background-color: var(--alpha-bg-blue-lightest); + box-shadow: 0 0 0 1px var(--alpha-primary-bg-normal) inset; } } &:where(.variant-secondary) { - background-color: var(--alpha-color-bg-black-lightest); + background-color: var(--alpha-bg-black-lightest); &:where(&:hover) { - background-color: var(--alpha-color-bg-black-lighter); + background-color: var(--alpha-bg-black-lighter); } &:where([data-state='on']) { - background-color: var(--alpha-color-primary-bg-lighter); + background-color: var(--alpha-primary-bg-lighter); } } diff --git a/packages/bezier-react/src/components/Icon/Icon.tsx b/packages/bezier-react/src/components/Icon/Icon.tsx index 194006df03..0cb7fd524b 100644 --- a/packages/bezier-react/src/components/Icon/Icon.tsx +++ b/packages/bezier-react/src/components/Icon/Icon.tsx @@ -5,7 +5,7 @@ import * as React from 'react' import classNames from 'classnames' import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers' -import { tokenCssVar } from '~/src/utils/style' +import { colorTokenCssVar } from '~/src/utils/style' import { type IconProps } from './Icon.types' @@ -32,7 +32,7 @@ export const Icon = memo( ref={forwardedRef} style={ { - '--b-icon-color': tokenCssVar(color), + '--b-icon-color': colorTokenCssVar(color), ...marginStyles.style, ...style, } as React.CSSProperties diff --git a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx index 7c9e54870d..3b957567b4 100644 --- a/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx +++ b/packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx @@ -5,7 +5,7 @@ import * as React from 'react' import classNames from 'classnames' -import { cssUrl, cssVar, px } from '~/src/utils/style' +import { colorTokenCssVar, cssUrl, px } from '~/src/utils/style' import { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider' @@ -57,14 +57,17 @@ export const SmoothCornersBox = forwardRef< '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY), '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`, '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`, - '--b-smooth-corners-box-shadow-color': cssVar(shadow?.color), + '--b-smooth-corners-box-shadow-color': colorTokenCssVar( + shadow?.color + ), /** * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet. * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts} */ '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`, '--b-smooth-corners-box-margin': `${margin ?? 0}px`, - '--b-smooth-corners-box-background-color': cssVar(backgroundColor), + '--b-smooth-corners-box-background-color': + colorTokenCssVar(backgroundColor), '--b-smooth-corners-box-background-image': cssUrl(backgroundImage), } as React.CSSProperties } diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx index 3213158b19..8de510860b 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx @@ -5,7 +5,7 @@ import * as React from 'react' import classNames from 'classnames' -import { cssVar } from '~/src/utils/style' +import { colorTokenCssVar } from '~/src/utils/style' import { type SpinnerProps } from './Spinner.types' @@ -24,7 +24,7 @@ export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>( ref={forwardedRef} style={ { - '--b-spinner-color': cssVar(color), + '--b-spinner-color': colorTokenCssVar(color), ...style, } as React.CSSProperties } diff --git a/packages/bezier-react/src/components/Status/Status.tsx b/packages/bezier-react/src/components/Status/Status.tsx index 302324bac5..997608c666 100644 --- a/packages/bezier-react/src/components/Status/Status.tsx +++ b/packages/bezier-react/src/components/Status/Status.tsx @@ -6,7 +6,7 @@ import { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons' import classNames from 'classnames' import { type SemanticColor } from '~/src/types/tokens' -import { cssVar } from '~/src/utils/style' +import { colorTokenCssVar } from '~/src/utils/style' import { Icon } from '~/src/components/Icon' @@ -44,7 +44,7 @@ export const Status = memo( ref={forwardedRef} style={ { - '--b-status-bg-color': cssVar(backgroundColor), + '--b-status-bg-color': colorTokenCssVar(backgroundColor), ...style, } as CSSProperties } diff --git a/packages/bezier-react/src/components/Text/Text.tsx b/packages/bezier-react/src/components/Text/Text.tsx index ea95e71249..cde760932d 100644 --- a/packages/bezier-react/src/components/Text/Text.tsx +++ b/packages/bezier-react/src/components/Text/Text.tsx @@ -5,7 +5,7 @@ import { createElement, forwardRef } from 'react' import classNames from 'classnames' import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers' -import { tokenCssVar } from '~/src/utils/style' +import { colorTokenCssVar } from '~/src/utils/style' import { isNumber } from '~/src/utils/type' import { type TextProps } from './Text.types' @@ -50,7 +50,7 @@ export const Text = forwardRef<HTMLElement, TextProps>( { ref: forwardedRef, style: { - '--b-text-color': tokenCssVar(color), + '--b-text-color': colorTokenCssVar(color), '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined, ...marginStyles.style, ...style, diff --git a/packages/bezier-react/src/stories/alpha-color.mdx b/packages/bezier-react/src/stories/alpha-color.mdx index 6a6eeedfa8..b7b07c970d 100644 --- a/packages/bezier-react/src/stories/alpha-color.mdx +++ b/packages/bezier-react/src/stories/alpha-color.mdx @@ -38,7 +38,7 @@ return ( <VStack style={{ flex: 1, - color: 'var(--alpha-color-fg-black-darkest)', + color: 'var(--alpha-fg-black-darkest)', }} spacing={4} justify="center" @@ -51,7 +51,7 @@ return ( gap: 3, fontSize: 9, lineHeight: 1, - color: 'var(--alpha-color-fg-black-dark)', + color: 'var(--alpha-fg-black-dark)', }} > {isHoveredColor ? '' : reference ? 'var' : ''} @@ -61,9 +61,9 @@ return ( fontSize: 'inherit', lineHeight: 'inherit', padding: '1px 2px', - backgroundColor: 'var(--alpha-color-bg-grey-lighter)', + backgroundColor: 'var(--alpha-bg-grey-lighter)', borderRadius: 3, - border: '1px solid var(--alpha-color-bg-black-lightest)', + border: '1px solid var(--alpha-bg-black-lightest)', }} > {isHoveredColor ? value : reference ? reference : value} @@ -75,7 +75,7 @@ return ( export const Primary = () => ( <HStack> - <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}> + <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={0}> {Object.entries(tokens.global.color).map(([key, { value, ref }]) => ( <Color key={key} @@ -87,7 +87,7 @@ export const Primary = () => ( </VStack> <LightThemeProvider> - <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}> + <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={0}> {Object.entries(tokens.lightTheme.color).map(([key, { value, ref }]) => ( <Color key={key} @@ -100,7 +100,7 @@ export const Primary = () => ( </LightThemeProvider> <DarkThemeProvider> - <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}> + <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={0}> {Object.entries(tokens.darkTheme.color).map(([key, { value, ref }]) => ( <Color key={key} diff --git a/packages/bezier-react/src/stories/alpha-shadow.mdx b/packages/bezier-react/src/stories/alpha-shadow.mdx index 6c9d654b25..942c75cad8 100644 --- a/packages/bezier-react/src/stories/alpha-shadow.mdx +++ b/packages/bezier-react/src/stories/alpha-shadow.mdx @@ -16,14 +16,14 @@ export const Shadow = ({ name, value, reference }) => { style={{ flex: 1, boxShadow: value, - backgroundColor: 'var(--alpha-color-surface-normal)', + backgroundColor: 'var(--alpha-surface-normal)', height: 60, }} /> <VStack style={{ flex: 1, - color: 'var(--alpha-color-fg-black-darkest)', + color: 'var(--alpha-fg-black-darkest)', }} spacing={4} justify="center" @@ -36,7 +36,7 @@ export const Shadow = ({ name, value, reference }) => { gap: 3, fontSize: 9, lineHeight: 1, - color: 'var(--alpha-color-fg-black-dark)', + color: 'var(--alpha-fg-black-dark)', }} > {reference ? 'var' : ''} @@ -46,9 +46,9 @@ export const Shadow = ({ name, value, reference }) => { fontSize: 'inherit', lineHeight: 'inherit', padding: '1px 2px', - backgroundColor: 'var(--alpha-color-bg-grey-lighter)', + backgroundColor: 'var(--alpha-bg-grey-lighter)', borderRadius: 3, - border: '1px solid var(--alpha-color-bg-black-lightest)', + border: '1px solid var(--alpha-bg-black-lightest)', }} > {reference ? reference : value} @@ -63,7 +63,7 @@ export const Primary = () => ( <HStack> <LightThemeProvider> - <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={40}> + <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={40}> <VStack spacing={40}> {Object.entries(tokens.lightTheme.shadow).map(([key, { value, ref }]) => ( <Shadow @@ -78,7 +78,7 @@ export const Primary = () => ( </LightThemeProvider> <DarkThemeProvider> - <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={40}> + <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-surface-normal)' }} padding={40}> <VStack spacing={40}> {Object.entries(tokens.darkTheme.shadow).map(([key, { value, ref }]) => ( <Shadow diff --git a/packages/bezier-react/src/styles/_alpha-tokens.scss b/packages/bezier-react/src/styles/_alpha-tokens.scss deleted file mode 100644 index d9ad0aa838..0000000000 --- a/packages/bezier-react/src/styles/_alpha-tokens.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use '../../node_modules/@channel.io/bezier-tokens/dist/alpha/css/styles.css' - as *; diff --git a/packages/bezier-react/src/styles/_tokens.scss b/packages/bezier-react/src/styles/_tokens.scss index c73835b501..1604a52584 100644 --- a/packages/bezier-react/src/styles/_tokens.scss +++ b/packages/bezier-react/src/styles/_tokens.scss @@ -1 +1,3 @@ @use '../../node_modules/@channel.io/bezier-tokens/dist/css/styles.css' as *; +@use '../../node_modules/@channel.io/bezier-tokens/dist/alpha/css/styles.css' + as *; diff --git a/packages/bezier-react/src/styles/index.scss b/packages/bezier-react/src/styles/index.scss index 6f0927e21e..81fa6cfc0e 100644 --- a/packages/bezier-react/src/styles/index.scss +++ b/packages/bezier-react/src/styles/index.scss @@ -1,15 +1,11 @@ @use 'sass:meta'; -@layer tokens, alpha-tokens, base, components; +@layer tokens, base, components; @layer tokens { @include meta.load-css('tokens'); } -@layer alpha-tokens { - @include meta.load-css('alpha-tokens'); -} - @layer base { @include meta.load-css('base'); } diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts index 8d842c5767..3f22b57f95 100644 --- a/packages/bezier-react/src/types/alpha-tokens.ts +++ b/packages/bezier-react/src/types/alpha-tokens.ts @@ -15,18 +15,22 @@ export type GlobalToken = typeof tokens.global */ export type SemanticToken = typeof tokens.lightTheme | typeof tokens.darkTheme +// NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names export type FlattenGlobalToken = ExtractKeys<GlobalToken[keyof GlobalToken]> export type FlattenSemanticToken = ExtractKeys< SemanticToken[keyof SemanticToken] > export type FlattenAllToken = FlattenGlobalToken | FlattenSemanticToken -export type GlobalColor = keyof GlobalToken['color'] +export type GlobalColor = RemovePrefix<'alpha', keyof GlobalToken['color']> /** * Functional & Semantic color tokens */ -export type BaseSemanticColor = keyof SemanticToken['color'] +export type BaseSemanticColor = RemovePrefix< + 'alpha', + keyof SemanticToken['color'] +> export type BackgroundFunctionalColor = StartsWithPrefix< 'bg', @@ -60,20 +64,23 @@ export type SemanticColor = StartsWithPrefix< export type Color = GlobalColor | FunctionalColor | SemanticColor -export type Radius = RemovePrefix<'radius', keyof GlobalToken['radius']> -export type Opacity = RemovePrefix<'opacity', keyof GlobalToken['opacity']> -export type Font = RemovePrefix<'font', keyof GlobalToken['font']> +export type Radius = RemovePrefix<'alpha-radius', keyof GlobalToken['radius']> +export type Opacity = RemovePrefix< + 'alpha-opacity', + keyof GlobalToken['opacity'] +> +export type Font = RemovePrefix<'alpha-font', keyof GlobalToken['font']> export type Typography = RemovePrefix< - 'typography', + 'alpha-typography', keyof GlobalToken['typography'] > export type GlobalGradient = RemovePrefix< - 'gradient', + 'alpha-gradient', keyof GlobalToken['gradient'] > -export type Shadow = RemovePrefix<'shadow', keyof SemanticToken['shadow']> +export type Shadow = RemovePrefix<'alpha-shadow', keyof SemanticToken['shadow']> export type FunctionalGradient = RemovePrefix< - 'gradient', + 'alpha-gradient', keyof SemanticToken['gradient'] > diff --git a/packages/bezier-react/src/types/props-helpers.ts b/packages/bezier-react/src/types/props-helpers.ts index 84f168c356..04df72b269 100644 --- a/packages/bezier-react/src/types/props-helpers.ts +++ b/packages/bezier-react/src/types/props-helpers.ts @@ -6,7 +6,7 @@ import { type MarginProps, } from '~/src/types/props' import { type Elevation, type Radius, type ZIndex } from '~/src/types/tokens' -import { cssDimension, tokenCssVar } from '~/src/utils/style' +import { colorTokenCssVar, cssDimension } from '~/src/utils/style' // NOTE: 'typescript-plugin-css-modules' does not support path alias /* eslint-disable no-restricted-imports */ @@ -210,8 +210,8 @@ export const getLayoutStyles = ({ '--b-basis': cssDimension(basis), '--b-shrink': shrink, '--b-grow': grow, - '--b-background-color': tokenCssVar(backgroundColor), - '--b-border-color': tokenCssVar(borderColor), + '--b-background-color': colorTokenCssVar(backgroundColor), + '--b-border-color': colorTokenCssVar(borderColor), '--b-border-width': cssDimension(borderWidth), '--b-border-top-width': cssDimension(borderTopWidth), '--b-border-right-width': cssDimension(borderRightWidth), diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts index 705e0f367c..ef840bb0df 100644 --- a/packages/bezier-react/src/utils/style.ts +++ b/packages/bezier-react/src/utils/style.ts @@ -1,4 +1,5 @@ -import { type FlattenAllToken } from '~/src/types/tokens' +import type * as AlphaTokens from '~/src/types/alpha-tokens' +import { type FlattenAllToken, type SemanticColor } from '~/src/types/tokens' import { isNil, isString } from '~/src/utils/type' /** @@ -38,21 +39,138 @@ export function cssDimension<Value extends number | string>(value?: Value) { export function cssVar<PropertyName extends string | undefined>( propertyName: PropertyName ) { - /* eslint-disable no-nested-ternary */ return !isNil(propertyName) ? (`var(--${propertyName})` as const) : undefined - /* eslint-enable no-nested-ternary */ } /** * Wrapper function for `cssVar` to handle tokens specifically. * It generates a CSS variable string for a given design token. */ -export function tokenCssVar<PropertyName extends FlattenAllToken | undefined>( +export const tokenCssVar = cssVar as < + PropertyName extends FlattenAllToken | undefined, +>( propertyName: PropertyName +) => ReturnType<typeof cssVar<PropertyName>> + +/** + * NOTE: (@ed) Converts a legacy color token to alpha color token. + * **Should be removed after the migration is complete.** + */ +function alphaColorTokenCssVar< + PropertyName extends + | AlphaTokens.FunctionalColor + | AlphaTokens.SemanticColor + | undefined, +>(propertyName: PropertyName) { + return !isNil(propertyName) + ? (`var(--alpha-${propertyName})` as const) + : undefined +} + +/** + * NOTE: (@ed) Converts a legacy color token to alpha color token. + * **Should be removed after the migration is complete.** + */ +export function colorTokenCssVar<ColorToken extends SemanticColor | undefined>( + colorToken: ColorToken ) { - return cssVar(propertyName) + return alphaColorTokenCssVar( + legacyToAlphaColorTokenMap[ + colorToken as keyof typeof legacyToAlphaColorTokenMap + ] ?? colorToken + ) } +export const legacyToAlphaColorTokenMap = Object.freeze({ + 'txt-black-darkest': 'fg-black-darkest', + 'txt-black-darker': 'fg-black-darker', + 'txt-black-dark': 'fg-black-dark', + 'txt-black-pure': 'fg-black-pure', + 'txt-white-normal': 'fg-white-normal', + 'bg-header': 'bg-white-higher', + 'bg-header-float': 'bg-white-alpha-lightest', + 'bg-navi': 'bg-grey-alpha-dark', + 'bg-gnb': 'bg-grey-alpha-darkest', + 'bg-lounge': 'bg-grey-alpha-darker', + 'bg-grey-dim-lightest': 'bg-grey-alpha-light', + 'bg-white-high': 'bg-white-highest', + 'bg-white-low': 'bg-white-higher', + 'bg-white-dim-light': 'bg-white-alpha-light', + 'bg-white-dim-dark': 'bg-white-alpha-lighter', + 'bgtxt-blue-normal': 'bg-blue-normal', + 'bgtxt-blue-light': 'bg-blue-light', + 'bgtxt-blue-lighter': 'bg-blue-lighter', + 'bgtxt-blue-lightest': 'bg-blue-lightest', + 'bgtxt-blue-dark': 'bg-blue-dark', + 'bgtxt-cobalt-normal': 'bg-cobalt-normal', + 'bgtxt-cobalt-light': 'bg-cobalt-light', + 'bgtxt-cobalt-lighter': 'bg-cobalt-lighter', + 'bgtxt-cobalt-lightest': 'bg-cobalt-lightest', + 'bgtxt-cobalt-dark': 'bg-cobalt-dark', + 'bgtxt-red-normal': 'bg-red-normal', + 'bgtxt-red-light': 'bg-red-light', + 'bgtxt-red-lighter': 'bg-red-lighter', + 'bgtxt-red-lightest': 'bg-red-lightest', + 'bgtxt-red-dark': 'bg-red-dark', + 'bgtxt-orange-normal': 'bg-orange-normal', + 'bgtxt-orange-light': 'bg-orange-light', + 'bgtxt-orange-lighter': 'bg-orange-lighter', + 'bgtxt-orange-lightest': 'bg-orange-lightest', + 'bgtxt-orange-dark': 'bg-orange-dark', + 'bgtxt-green-normal': 'bg-green-normal', + 'bgtxt-green-light': 'bg-green-light', + 'bgtxt-green-lighter': 'bg-green-lighter', + 'bgtxt-green-lightest': 'bg-green-lightest', + 'bgtxt-green-dark': 'bg-green-dark', + 'bgtxt-teal-normal': 'bg-teal-normal', + 'bgtxt-teal-light': 'bg-teal-light', + 'bgtxt-teal-lighter': 'bg-teal-lighter', + 'bgtxt-teal-lightest': 'bg-teal-lightest', + 'bgtxt-teal-dark': 'bg-teal-dark', + 'bgtxt-olive-normal': 'bg-olive-normal', + 'bgtxt-olive-light': 'bg-olive-light', + 'bgtxt-olive-lighter': 'bg-olive-lighter', + 'bgtxt-olive-lightest': 'bg-olive-lightest', + 'bgtxt-olive-dark': 'bg-olive-dark', + 'bgtxt-yellow-normal': 'bg-yellow-normal', + 'bgtxt-yellow-light': 'bg-yellow-light', + 'bgtxt-yellow-lighter': 'bg-yellow-lighter', + 'bgtxt-yellow-lightest': 'bg-yellow-lightest', + 'bgtxt-yellow-dark': 'bg-yellow-dark', + 'bgtxt-pink-normal': 'bg-pink-normal', + 'bgtxt-pink-light': 'bg-pink-light', + 'bgtxt-pink-lighter': 'bg-pink-lighter', + 'bgtxt-pink-lightest': 'bg-pink-lightest', + 'bgtxt-pink-dark': 'bg-pink-dark', + 'bgtxt-purple-normal': 'bg-purple-normal', + 'bgtxt-purple-light': 'bg-purple-light', + 'bgtxt-purple-lighter': 'bg-purple-lighter', + 'bgtxt-purple-lightest': 'bg-purple-lightest', + 'bgtxt-purple-dark': 'bg-purple-dark', + 'bgtxt-navy-normal': 'bg-navy-normal', + 'bgtxt-navy-light': 'bg-navy-light', + 'bgtxt-navy-lighter': 'bg-navy-lighter', + 'bgtxt-navy-lightest': 'bg-navy-lightest', + 'bgtxt-navy-dark': 'bg-navy-dark', + 'bgtxt-absolute-black-dark': 'bg-absolute-black-dark', + 'bgtxt-absolute-black-normal': 'bg-absolute-black-normal', + 'bgtxt-absolute-black-light': 'bg-absolute-black-light', + 'bgtxt-absolute-black-lighter': 'bg-absolute-black-lighter', + 'bgtxt-absolute-black-lightest': 'bg-absolute-black-lightest', + 'bgtxt-absolute-white-dark': 'bg-absolute-white-dark', + 'bgtxt-absolute-white-normal': 'bg-absolute-white-normal', + 'bgtxt-absolute-white-light': 'bg-absolute-white-light', + 'bgtxt-absolute-white-lighter': 'bg-absolute-white-lighter', + 'bgtxt-absolute-white-lightest': 'bg-absolute-white-lightest', + 'bdr-black-lightest': 'bg-black-lightest', + 'bdr-black-light': 'bg-black-light', + 'bdr-grey-light': 'bg-grey-light', + 'bdr-white': 'bg-white-highest', + 'bdr-black-dark': 'bg-black-dark', +}) satisfies Partial< + Record<SemanticColor, AlphaTokens.FunctionalColor | AlphaTokens.SemanticColor> +> + /** * Formats a given URL string into a CSS `url()` function format. */ diff --git a/packages/bezier-tokens/scripts/lib/transform.ts b/packages/bezier-tokens/scripts/lib/transform.ts index 57d9472b86..f33d7c9fe1 100644 --- a/packages/bezier-tokens/scripts/lib/transform.ts +++ b/packages/bezier-tokens/scripts/lib/transform.ts @@ -6,6 +6,12 @@ type CustomTransform = Named<Transform<unknown>> type Transforms = Record<string, CustomTransform> export const CSSTransforms = { + alphaNamespace: { + name: 'custom/alpha/namespace', + type: 'name', + matcher: (token) => token.filePath.startsWith('src/alpha'), + transformer: ({ name }) => `alpha-${name}`, + }, fontRem: { name: 'custom/css/font/rem', type: 'value',