feat: implements AlphaTokenProvider

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

@@ -0,0 +1,49 @@
+'use client'
+
+import React, { 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 [AlphaTokenContextProvider, useAlphaTokenContext] =
+  createContext<TokenContextValue | null>(null, 'AlphaTokenProvider')
+
+export { useAlphaTokenContext }
+
+const tokenSet: Record<ThemeName, ThemeSpecificTokens> = Object.freeze({
+  light: {
+    global: tokens.global,
+    theme: tokens.lightTheme,
+  },
+  dark: {
+    global: tokens.global,
+    theme: tokens.darkTheme,
+  },
+})
+
+/**
+ * @private
+ */
+export function TokenProvider({ themeName, children }: TokenProviderProps) {
+  return (
+    <AlphaTokenContextProvider
+      value={useMemo(
+        () => ({
+          themeName,
+          tokens: tokenSet[themeName],
+        }),
+        [themeName]
+      )}
+    >
+      {children}
+    </AlphaTokenContextProvider>
+  )
+}

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

@@ -0,0 +1,20 @@
+import {
+  type GlobalToken,
+  type ThemeName,
+  type ThemeToken,
+} from '~/src/types/alpha-tokens'
+
+export interface ThemeSpecificTokens {
+  global: GlobalToken
+  theme: ThemeToken
+}
+
+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/types/alpha-tokens.ts

@@ -10,6 +10,9 @@ import {
 export type ThemeName = 'light' | 'dark'
 
 export type GlobalToken = typeof tokens.global
+/**
+ * FIXME: Separate functional and semantic tokens?
+ */
 export type ThemeToken = typeof tokens.lightTheme | typeof tokens.darkTheme
 
 // NOTE: (@ed) Do not remove alpha- prefix to match CSS variable names