diff --git a/packages/bezier-react/src/styles/_alpha-tokens.scss b/packages/bezier-react/src/styles/_alpha-tokens.scss new file mode 100644 index 000000000..d9ad0aa83 --- /dev/null +++ b/packages/bezier-react/src/styles/_alpha-tokens.scss @@ -0,0 +1,2 @@ +@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 1604a5258..c73835b50 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/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 81fa6cfc0..6f0927e21 100644 --- a/packages/bezier-react/src/styles/index.scss +++ b/packages/bezier-react/src/styles/index.scss @@ -1,11 +1,15 @@ @use 'sass:meta'; -@layer tokens, base, components; +@layer tokens, alpha-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 4ea4938fa..8d842c576 100644 --- a/packages/bezier-react/src/types/alpha-tokens.ts +++ b/packages/bezier-react/src/types/alpha-tokens.ts @@ -15,25 +15,18 @@ 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 = RemovePrefix< - 'alpha-color', - keyof GlobalToken['color'] -> +export type GlobalColor = keyof GlobalToken['color'] /** * Functional & Semantic color tokens */ -export type BaseSemanticColor = RemovePrefix< - 'alpha-color', - keyof SemanticToken['color'] -> +export type BaseSemanticColor = keyof SemanticToken['color'] export type BackgroundFunctionalColor = StartsWithPrefix< 'bg', @@ -67,23 +60,20 @@ export type SemanticColor = StartsWithPrefix< export type Color = GlobalColor | FunctionalColor | SemanticColor -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 Radius = RemovePrefix<'radius', keyof GlobalToken['radius']> +export type Opacity = RemovePrefix<'opacity', keyof GlobalToken['opacity']> +export type Font = RemovePrefix<'font', keyof GlobalToken['font']> export type Typography = RemovePrefix< - 'alpha-typography', + 'typography', keyof GlobalToken['typography'] > export type GlobalGradient = RemovePrefix< - 'alpha-gradient', + 'gradient', keyof GlobalToken['gradient'] > -export type Shadow = RemovePrefix<'alpha-shadow', keyof SemanticToken['shadow']> +export type Shadow = RemovePrefix<'shadow', keyof SemanticToken['shadow']> export type FunctionalGradient = RemovePrefix< - 'alpha-gradient', + 'gradient', keyof SemanticToken['gradient'] >