feat: add [data-css-vars-root=true] as css var root

chakra-ui · Mar 9, 2022 · cedec80 · cedec80
1 parent 577aeb9
commit cedec80
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/twenty-cooks-visit.md b/.changeset/twenty-cooks-visit.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/system": minor
+---
+
+Added `[data-css-vars-root=true]` to the CSS variables root selector. This
+allows to layer the CSS variable definitions and allow the semantic tokens to
+react to `data-theme="dark"` and `data-theme="light"`.
diff --git a/packages/system/src/providers.tsx b/packages/system/src/providers.tsx
@@ -34,12 +34,17 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
 export interface CSSVarsProps {
   /**
    * The element to attach the CSS custom properties to.
-   * @default ":host, :root"
+   * Re-hoist CSS vars by attaching `data-css-vars-root={true}` to a DOM element.
+   * @example <div data-css-vars-root={true}></div>
+   *
+   * @default ":host, :root, [data-css-vars-root=true]"
    */
   root?: string
 }
 
-export const CSSVars = ({ root = ":host, :root" }: CSSVarsProps) => (
+export const CSSVars = ({
+  root = ":host, :root, [data-css-vars-root=true]",
+}: CSSVarsProps) => (
   <Global styles={(theme: any) => ({ [root]: theme.__cssVars })} />
 )