feat: back to the root element

channel-io · Nov 30, 2023 · f2faf6b · f2faf6b
1 parent f8befb7
commit f2faf6b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts
@@ -4,7 +4,17 @@ import '~/src/styles/index.scss'
 export { default as BezierProvider } from '~/src/providers/BezierProvider'
 export * from '~/src/providers/WindowProvider'
 export * from '~/src/providers/AlphaAppProvider'
-export * from '~/src/providers/ThemeProvider'
+export {
+  useThemeName,
+  useToken,
+  ThemeProvider,
+  LightTheme,
+  DarkTheme,
+  InvertedTheme,
+  type ThemeName,
+  type ThemeProviderProps,
+  type FixedThemeProviderProps,
+} from '~/src/providers/ThemeProvider'
 
 /* Foundation */
 export * from '~/src/foundation'

diff --git a/packages/bezier-react/src/providers/AlphaAppProvider.tsx b/packages/bezier-react/src/providers/AlphaAppProvider.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import {
   type Feature,
@@ -10,7 +10,7 @@ import { TooltipProvider } from '~/src/components/Tooltip'
 
 import {
   type ThemeName,
-  ThemeProvider,
+  TokenProvider,
 } from './ThemeProvider'
 import { WindowProvider } from './WindowProvider'
 
@@ -59,16 +59,26 @@ export function AlphaAppProvider({
   features = [],
   window = defaultWindow,
 }: AlphaAppProviderProps) {
+  useEffect(function updateThemeDataAttribute() {
+    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}>
-        <TooltipProvider>
-          <ThemeProvider themeName={themeName}>
-            <div data-bezier-root>
-              { children }
-            </div>
-          </ThemeProvider>
-        </TooltipProvider>
+        <TokenProvider themeName={themeName}>
+          <TooltipProvider>
+            { children }
+          </TooltipProvider>
+        </TokenProvider>
       </FeatureProvider>
     </WindowProvider>
   )

diff --git a/packages/bezier-react/src/providers/ThemeProvider.tsx b/packages/bezier-react/src/providers/ThemeProvider.tsx
@@ -39,7 +39,10 @@ interface TokenProviderProps {
   children: React.ReactNode
 }
 
-function TokenProvider({
+/**
+ * @private For internal use only.
+ */
+export function TokenProvider({
   themeName,
   children,
 }: TokenProviderProps) {
@@ -120,7 +123,7 @@ export const DarkTheme = forwardRef<HTMLElement, FixedThemeProviderProps>(functi
   return (
     <ThemeProvider
       ref={forwardedRef}
-      themeName="light"
+      themeName="dark"
     >
       { children }
     </ThemeProvider>

diff --git a/packages/bezier-react/src/styles/_base.scss b/packages/bezier-react/src/styles/_base.scss
@@ -2,6 +2,7 @@
   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