feat: add and export alpha tokens

Author: sungik-choi

packages/bezier-react/src/index.ts

@@ -3,6 +3,7 @@ import '~/src/styles/index.scss'
 
 /* --------------------------------- TOKENS --------------------------------- */
 export { tokens } from '@channel.io/bezier-tokens'
+export { tokens as alphaTokens } from '@channel.io/bezier-tokens/alpha'
 
 /* ------------------------------- COMPONENTS ------------------------------- */
 export * from '~/src/components/AlphaAvatar'
@@ -78,3 +79,4 @@ export * from '~/src/hooks/useKeyboardActionLockerWhileComposing'
 /* ---------------------------------- TYPES --------------------------------- */
 export type * from '~/src/types/props'
 export type * from '~/src/types/tokens'
+export type * as AlphaTokens from '~/src/types/alpha-tokens'

packages/bezier-react/src/types/alpha-tokens.ts

@@ -0,0 +1,69 @@
+import { type tokens } from '@channel.io/bezier-tokens/alpha'
+
+import {
+  type ExtractKeys,
+  type RemovePrefix,
+  type StartsWithPrefix,
+} from './utils'
+
+// TODO: Change theme name constant to import from bezier-tokens
+export type ThemeName = 'light' | 'dark'
+
+export type GlobalToken = typeof tokens.global
+export type ThemeToken = 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 FlattenThemeToken = ExtractKeys<ThemeToken[keyof ThemeToken]>
+export type FlattenAllToken = FlattenGlobalToken | FlattenThemeToken
+
+export type GlobalColor = RemovePrefix<
+  'alpha-color',
+  keyof GlobalToken['color']
+>
+
+/**
+ * Functional & Semantic color tokens
+ */
+export type ThemeColor = RemovePrefix<'alpha-color', keyof ThemeToken['color']>
+
+export type BackgroundFunctionalColor = StartsWithPrefix<'bg', ThemeColor>
+export type ForegroundFunctionalColor = StartsWithPrefix<'fg', ThemeColor>
+export type SurfaceFunctionalColor = StartsWithPrefix<'surface', ThemeColor>
+export type ShadowFunctionalColor = StartsWithPrefix<'shadow', ThemeColor>
+export type DimFunctionalColor = StartsWithPrefix<'dim', ThemeColor>
+
+export type FunctionalColor =
+  | BackgroundFunctionalColor
+  | ForegroundFunctionalColor
+  | SurfaceFunctionalColor
+  | ShadowFunctionalColor
+  | DimFunctionalColor
+
+export type SemanticColor = StartsWithPrefix<
+  'primary' | 'critical' | 'warning' | 'accent' | 'success',
+  ThemeColor
+>
+
+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 Typography = RemovePrefix<
+  'alpha-typography',
+  keyof GlobalToken['typography']
+>
+export type GlobalGradient = RemovePrefix<
+  'alpha-gradient',
+  keyof GlobalToken['gradient']
+>
+
+export type Shadow = RemovePrefix<'alpha-shadow', keyof ThemeToken['shadow']>
+export type FunctionalGradient = RemovePrefix<
+  'alpha-gradient',
+  keyof ThemeToken['gradient']
+>

packages/bezier-react/src/types/tokens.ts

@@ -1,17 +1,10 @@
 import { type tokens } from '@channel.io/bezier-tokens'
 
-type RemovePrefix<
-  Prefix extends string,
-  Value extends string,
-> = Value extends `${Prefix}-${infer Rest}` ? Rest : never
-
-type StartsWithPrefix<
-  Prefix extends string,
-  Value extends string,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-> = Value extends `${Prefix}-${infer Rest}` ? Value : never
-
-type ExtractKeys<T> = T extends Record<infer K, any> ? K : never
+import {
+  type ExtractKeys,
+  type RemovePrefix,
+  type StartsWithPrefix,
+} from './utils'
 
 // TODO: Change theme name constant to import from bezier-tokens
 export type ThemeName = 'light' | 'dark'

packages/bezier-react/src/types/utils.ts

@@ -0,0 +1,12 @@
+export type RemovePrefix<
+  Prefix extends string,
+  Value extends string,
+> = Value extends `${Prefix}-${infer Rest}` ? Rest : never
+
+export type StartsWithPrefix<
+  Prefix extends string,
+  Value extends string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+> = Value extends `${Prefix}-${infer Rest}` ? Value : never
+
+export type ExtractKeys<T> = T extends Record<infer K, any> ? K : never