feat(bezier-react): remove alpha prefix from alpha tokens

channel-io · Jan 6, 2025 · 43893e2 · 43893e2
1 parent 89f60f8
commit 43893e2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
diff --git a/packages/bezier-react/src/styles/_alpha-tokens.scss 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
@@ -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
@@ -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
@@ -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']
 >
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@use '../../node_modules/@channel.io/bezier-tokens/dist/alpha/css/styles.css'
		as *;