Implement multi theme feature based on data attributes

.changeset/chilled-dots-divide.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Implement multi theme feature based on data attributes.

packages/bezier-react/src/features/index.ts

@@ -1,3 +1,4 @@
+export type { Feature } from './Feature'
 export { FeatureType } from './Feature'
 
 export {

packages/bezier-react/src/index.ts

@@ -2,7 +2,19 @@ import '~/src/styles/index.scss'
 
 /* Provider */
 export { default as BezierProvider } from '~/src/providers/BezierProvider'
-export { default as WindowProvider, useWindow } from '~/src/providers/WindowProvider'
+export * from '~/src/providers/WindowProvider'
+export * from '~/src/providers/AlphaAppProvider'
+export {
+  useThemeName,
+  useToken,
+  ThemeProvider,
+  LightThemeProvider,
+  DarkThemeProvider,
+  InvertedThemeProvider,
+  type ThemeName,
+  type ThemeProviderProps,
+  type FixedThemeProviderProps,
+} from '~/src/providers/ThemeProvider'
 
 /* Foundation */
 export * from '~/src/foundation'

packages/bezier-react/src/providers/AlphaAppProvider.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react'
+
+import {
+  type Feature,
+  FeatureProvider,
+} from '~/src/features'
+import { window as defaultWindow } from '~/src/utils/dom'
+
+import { TooltipProvider } from '~/src/components/Tooltip'
+
+import {
+  type ThemeName,
+  TokenProvider,
+} from './ThemeProvider'
+import { WindowProvider } from './WindowProvider'
+
+export interface AlphaAppProviderProps {
+  children: React.ReactNode
+  /**
+   * Name of the theme to use for the app.
+   * @default 'light'
+   */
+  themeName?: ThemeName
+  /**
+   * List of features to enable for the app.
+   * @default []
+   */
+  features?: Feature[]
+  /**
+   * Window object to use for the app.
+   * @default window
+   */
+  window?: Window
+}
+
+/**
+ * `AlphaAppProvider` is a required wrapper component that provides context for the app.
+ *
+ * @example
+ *
+ * ```tsx
+ * import React from 'react'
+ * import { createRoot } from 'react-dom/client'
+ * import { AlphaAppProvider } from '@channel.io/bezier-react'
+ *
+ * const container = document.getElementById('root')
+ * const root = createRoot(container)
+ *
+ * root.render(
+ *   <AlphaAppProvider themeName="light">
+ *     <App />
+ *   </AlphaAppProvider>,
+ * )
+ * ```
+ */
+export function AlphaAppProvider({
+  children,
+  themeName = 'light',
+  features = [],
+  window = defaultWindow,
+}: AlphaAppProviderProps) {
+  useEffect(function updateRootThemeDataAttribute() {
+    const rootElement = window.document.documentElement
+    // TODO: Change data attribute constant to import from bezier-tokens
+    rootElement.setAttribute('data-bezier-theme', themeName)
+    return function cleanup() {
+      rootElement.removeAttribute('data-bezier-theme')
+    }
+  }, [
+    window,
+    themeName,
+  ])
+
+  return (
+    <WindowProvider window={window}>
+      <FeatureProvider features={features}>
+        <TokenProvider themeName={themeName}>
+          <TooltipProvider>
+            { children }
+          </TooltipProvider>
+        </TokenProvider>
+      </FeatureProvider>
+    </WindowProvider>
+  )
+}

packages/bezier-react/src/providers/BezierProvider.tsx

@@ -9,14 +9,11 @@ import {
   type ThemeVarsAdditionalType,
 } from '~/src/foundation'
 
-import {
-  document as defaultDocument,
-  window as defaultWindow,
-} from '~/src/utils/dom'
+import { window as defaultWindow } from '~/src/utils/dom'
 
 import { TooltipProvider } from '~/src/components/Tooltip'
 
-import WindowProvider from './WindowProvider'
+import { WindowProvider } from './WindowProvider'
 
 interface BezierProviderProps {
   foundation: Foundation & GlobalStyleProp
@@ -29,13 +26,10 @@ function BezierProvider({
   foundation,
   children,
   themeVarsScope,
-  externalWindow,
+  externalWindow = defaultWindow,
 }: BezierProviderProps) {
   return (
-    <WindowProvider
-      window={externalWindow ?? defaultWindow}
-      document={externalWindow?.document ?? defaultDocument}
-    >
+    <WindowProvider window={externalWindow}>
       <FoundationProvider foundation={foundation}>
         <TooltipProvider>
           <GlobalStyle foundation={foundation} />

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

@@ -0,0 +1,151 @@
+import React, {
+  forwardRef,
+  useMemo,
+} from 'react'
+
+import { tokens } from '@channel.io/bezier-tokens'
+import { Slot } from '@radix-ui/react-slot'
+
+import { createContext } from '~/src/utils/react'
+
+type Tokens = typeof tokens
+type GlobalTokens = Tokens['global']
+type SemanticTokens = Omit<Tokens, 'global'>
+
+interface ThemedTokenSet {
+  global: GlobalTokens
+  semantic: SemanticTokens[keyof SemanticTokens]
+}
+
+// TODO: Change theme name constant to import from bezier-tokens
+export type ThemeName = 'light' | 'dark'
+
+interface TokenContextValue {
+  themeName: ThemeName
+  tokens: ThemedTokenSet
+}
+
+const [TokenContextProvider, useTokenContext] = createContext<TokenContextValue | null>(null, 'TokenProvider')
+
+const tokenSet: Record<ThemeName, ThemedTokenSet> = Object.freeze({
+  light: {
+    global: tokens.global,
+    semantic: tokens.lightTheme,
+  },
+  dark: {
+    global: tokens.global,
+    semantic: tokens.darkTheme,
+  },
+})
+
+interface TokenProviderProps {
+  themeName: ThemeName
+  children: React.ReactNode
+}
+
+/**
+ * @private For internal use only.
+ */
+export function TokenProvider({
+  themeName,
+  children,
+}: TokenProviderProps) {
+  return (
+    <TokenContextProvider value={useMemo(() => ({
+      themeName,
+      tokens: tokenSet[themeName],
+    }), [themeName])}
+    >
+      { children }
+    </TokenContextProvider>
+  )
+}
+
+/**
+ * `useThemeName` is a hook that returns the current theme name.
+ */
+export function useThemeName() {
+  return useTokenContext('useThemeName').themeName
+}
+
+/**
+ * `useToken` is a hook that returns the design token for the current theme.
+ */
+export function useToken() {
+  return useTokenContext('useToken').tokens
+}
+
+export interface ThemeProviderProps {
+  themeName: ThemeName
+  children: React.ReactElement
+}
+
+export type FixedThemeProviderProps = Omit<ThemeProviderProps, 'themeName'>
+
+/**
+ * `ThemeProvider` is a wrapper component that provides theme context.
+ */
+export const ThemeProvider = forwardRef<HTMLElement, ThemeProviderProps>(function ThemeProvider({
+  themeName,
+  children,
+}, forwardedRef) {
+  return (
+    <TokenProvider themeName={themeName}>
+      <Slot
+        ref={forwardedRef}
+        // TODO: Change data attribute constant to import from bezier-tokens
+        data-bezier-theme={themeName}
+      >
+        { children }
+      </Slot>
+    </TokenProvider>
+  )
+})
+
+/**
+ * `LightThemeProvider` is a wrapper component that provides light theme context.
+ */
+export const LightThemeProvider = forwardRef<HTMLElement, FixedThemeProviderProps>(function LightTheme({
+  children,
+}, forwardedRef) {
+  return (
+    <ThemeProvider
+      ref={forwardedRef}
+      themeName="light"
+    >
+      { children }
+    </ThemeProvider>
+  )
+})
+
+/**
+ * `DarkThemeProvider` is a wrapper component that provides dark theme context.
+ */
+export const DarkThemeProvider = forwardRef<HTMLElement, FixedThemeProviderProps>(function DarkTheme({
+  children,
+}, forwardedRef) {
+  return (
+    <ThemeProvider
+      ref={forwardedRef}
+      themeName="dark"
+    >
+      { children }
+    </ThemeProvider>
+  )
+})
+
+/**
+ * `InvertedThemeProvider` is a wrapper component that provides inverted theme context.
+ */
+export const InvertedThemeProvider = forwardRef<HTMLElement, FixedThemeProviderProps>(function InvertedTheme({
+  children,
+}, forwardedRef) {
+  return (
+    <ThemeProvider
+      ref={forwardedRef}
+      themeName={useThemeName() === 'light' ? 'dark' : 'light'}
+    >
+      { children }
+    </ThemeProvider>
+  )
+})

packages/bezier-react/src/providers/WindowProvider.tsx

@@ -23,34 +23,27 @@ interface WindowProviderProps extends PropsWithChildren {
    * @required
    */
   window: Window
-
-  /**
-   * injected document
-   * @required
-   */
-  document: Document
 }
 
 /**
  * A Provider that provides window and document object
  * you can use this provider to inject an external window
  */
-function WindowProvider({ window, document, children }: WindowProviderProps) {
+export function WindowProvider({ window, children }: WindowProviderProps) {
+  const document = window.document
   const rootElement = document.body
 
   const value = useMemo(() => ({
     window,
     document,
     rootElement,
   }), [
-    document,
     window,
+    document,
     rootElement,
   ])
 
   return (
     <WindowContextProvider value={value}>{ children }</WindowContextProvider>
   )
 }
-
-export default WindowProvider

packages/bezier-react/src/styles/_base.scss

@@ -1,6 +1,18 @@
-html {
+:where(:root, :host) {
   font-size: 62.5%; // 10/16 = 0.625. Make REM calculations easier.
   font-family: var(--font-family-sans-kr);
+  color: var(--txt-black-darkest);
+  color-scheme: light;
+}
+
+// TODO: Change data attribute constant to import from bezier-tokens
+[data-bezier-theme='light'] {
+  color-scheme: light;
+}
+
+// TODO: Change data attribute constant to import from bezier-tokens
+[data-bezier-theme='dark'] {
+  color-scheme: dark;
 }
 
 :lang(ja) {