Add alpha design token types

.changeset/old-oranges-wink.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Export the `alphaTokens`, `AlphaTokens`, and `useAlphaTokens` modules.

packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import { tokens } from '@channel.io/bezier-tokens/alpha'
+
+import { type ThemeName } from '~/src/types/tokens'
+import { createContext } from '~/src/utils/react'
+
+import {
+  type ThemeSpecificTokens,
+  type TokenContextValue,
+  type TokenProviderProps,
+} from './TokenProvider.types'
+
+const [TokenContextProvider, useTokenContext] =
+  // FIXME: (@ed) Remove Alpha prefix after the migration is done
+  createContext<TokenContextValue | null>(null, 'AlphaTokenProvider')
+
+export { useTokenContext as useAlphaTokenContext }
+
+const tokenSet: Record<ThemeName, ThemeSpecificTokens> = Object.freeze({
+  light: {
+    global: tokens.global,
+    semantic: tokens.lightTheme,
+  },
+  dark: {
+    global: tokens.global,
+    semantic: tokens.darkTheme,
+  },
+})
+
+/**
+ * @private
+ */
+export function TokenProvider({ themeName, children }: TokenProviderProps) {
+  return (
+    <TokenContextProvider
+      value={useMemo(
+        () => ({
+          themeName,
+          tokens: tokenSet[themeName],
+        }),
+        [themeName]
+      )}
+    >
+      {children}
+    </TokenContextProvider>
+  )
+}

packages/bezier-react/src/components/AlphaTokenProvider/TokenProvider.types.ts

@@ -0,0 +1,20 @@
+import {
+  type GlobalToken,
+  type SemanticToken,
+  type ThemeName,
+} from '~/src/types/alpha-tokens'
+
+export interface ThemeSpecificTokens {
+  global: GlobalToken
+  semantic: SemanticToken
+}
+
+export interface TokenContextValue {
+  themeName: ThemeName
+  tokens: ThemeSpecificTokens
+}
+
+export interface TokenProviderProps {
+  themeName: ThemeName
+  children: React.ReactNode
+}

packages/bezier-react/src/components/AlphaTokenProvider/index.ts

@@ -0,0 +1,5 @@
+export {
+  TokenProvider as AlphaTokenProvider,
+  useAlphaTokenContext,
+} from './TokenProvider'
+export type { TokenProviderProps as AlphaTokenProviderProps } from './TokenProvider.types'

packages/bezier-react/src/components/AppProvider/AppProvider.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 
 import { getWindow } from 'ssr-window'
 
+import { AlphaTokenProvider } from '~/src/components/AlphaTokenProvider'
 import { FeatureProvider } from '~/src/components/FeatureProvider'
 import { TokenProvider } from '~/src/components/TokenProvider'
 import { WindowProvider } from '~/src/components/WindowProvider'
@@ -52,7 +53,11 @@ export function AppProvider({
   return (
     <WindowProvider window={window}>
       <FeatureProvider features={features}>
-        <TokenProvider themeName={themeName}>{children}</TokenProvider>
+        <TokenProvider themeName={themeName}>
+          <AlphaTokenProvider themeName={themeName}>
+            {children}
+          </AlphaTokenProvider>
+        </TokenProvider>
       </FeatureProvider>
     </WindowProvider>
   )

packages/bezier-react/src/components/ThemeProvider/ThemeProvider.tsx

@@ -4,6 +4,10 @@
 
 import { Slot } from '@radix-ui/react-slot'
 
+import {
+  AlphaTokenProvider,
+  useAlphaTokenContext,
+} from '~/src/components/AlphaTokenProvider'
 import { TokenProvider, useTokenContext } from '~/src/components/TokenProvider'
 
 import {
@@ -25,6 +29,14 @@
   return useTokenContext('useTokens').tokens
 }
 
+/**
+ * `useAlphaTokens` is a hook that returns the alpha tokens of the current theme.
+ * @internal
+ */
+export function useAlphaTokens() {
+  return useAlphaTokenContext('useAlphaTokens').tokens
+}
+
 /**
  * `ThemeProvider` is a wrapper component that provides theme context.
  *
@@ -34,14 +46,16 @@
   function ThemeProvider({ themeName, children, ...rest }, forwardedRef) {
     return (
       <TokenProvider themeName={themeName}>
-        <Slot
-          ref={forwardedRef}
-          // TODO: Change data attribute constant to import from bezier-tokens
-          data-bezier-theme={themeName}
-          {...rest}
-        >
-          {children}
-        </Slot>
+        <AlphaTokenProvider themeName={themeName}>
+          <Slot
+            ref={forwardedRef}
+            // TODO: Change data attribute constant to import from bezier-tokens
+            data-bezier-theme={themeName}
+            {...rest}
+          >
+            {children}
+          </Slot>
+        </AlphaTokenProvider>
       </TokenProvider>
     )
   }

packages/bezier-react/src/components/ThemeProvider/index.ts

@@ -5,6 +5,7 @@
   ThemeProvider,
   useThemeName,
   useTokens,
+  useAlphaTokens,
 } from './ThemeProvider'
 export {
   type FixedThemeProviderProps,

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,89 @@
+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
+/**
+ * FIXME: Separate functional and semantic tokens?
+ */
+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']
+>
+
+/**
+ * Functional & Semantic color tokens
+ */
+export type BaseSemanticColor = RemovePrefix<
+  'alpha-color',
+  keyof SemanticToken['color']
+>
+
+export type BackgroundFunctionalColor = StartsWithPrefix<
+  'bg',
+  BaseSemanticColor
+>
+export type ForegroundFunctionalColor = StartsWithPrefix<
+  'fg',
+  BaseSemanticColor
+>
+export type SurfaceFunctionalColor = StartsWithPrefix<
+  'surface',
+  BaseSemanticColor
+>
+export type ShadowFunctionalColor = StartsWithPrefix<
+  'shadow',
+  BaseSemanticColor
+>
+export type DimFunctionalColor = StartsWithPrefix<'dim', BaseSemanticColor>
+
+export type FunctionalColor =
+  | BackgroundFunctionalColor
+  | ForegroundFunctionalColor
+  | SurfaceFunctionalColor
+  | ShadowFunctionalColor
+  | DimFunctionalColor
+
+export type SemanticColor = StartsWithPrefix<
+  'primary' | 'critical' | 'warning' | 'accent' | 'success',
+  BaseSemanticColor
+>
+
+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 SemanticToken['shadow']>
+export type FunctionalGradient = RemovePrefix<
+  'alpha-gradient',
+  keyof SemanticToken['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