feat: apply AlphaTokenProvider and export useAlphaTokens

Author: sungik-choi

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 { forwardRef } from 'react'
 
 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 @@ export function useTokens() {
   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 @@ export const ThemeProvider = forwardRef<HTMLElement, ThemeProviderProps>(
   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 @@ export {
   ThemeProvider,
   useThemeName,
   useTokens,
+  useAlphaTokens,
 } from './ThemeProvider'
 export {
   type FixedThemeProviderProps,