Merge pull request #5532 from chakra-ui/feat/re-hoist-css-vars

feat: add semantic token support for data-theme attributes

.changeset/mighty-monkeys-wash.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/styled-system": minor
+---
+
+Updated `_dark` and `_light` pseudo selectors to allow semantic tokens to change
+with the `data-theme` attributes.

.changeset/twenty-cooks-visit.md

@@ -0,0 +1,7 @@
+---
+"@chakra-ui/system": minor
+---
+
+Added `[data-theme]` to the CSS variables root selector. This allows the
+semantic tokens to change according to `data-theme="dark"` and
+`data-theme="light"` DOM element attributes.

.storybook/preview.tsx

@@ -56,7 +56,20 @@ const withChakra = (StoryFn: Function, context: StoryContext) => {
   }, [dir])
 
   return (
-    <ChakraProvider theme={extendTheme({ direction: dir })}>
+    <ChakraProvider
+      theme={extendTheme({
+        direction: dir,
+        semanticTokens: {
+          colors: {
+            semantic: {
+              default: "red.500",
+              _light: "red.500",
+              _dark: "blue.400",
+            },
+          },
+        },
+      })}
+    >
       <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
         <ColorModeToggleBar />
         <StoryFn />

packages/styled-system/src/pseudos.ts

@@ -298,12 +298,18 @@ export const pseudoSelectors = {
    * Styles for when `data-theme` is applied to any parent of
    * this component or element.
    */
-  _dark: ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]",
+  _dark:
+    ".chakra-ui-dark &:not([data-theme])," +
+    "[data-theme=dark] &:not([data-theme])," +
+    "&[data-theme=dark]",
   /**
    * Styles for when `data-theme` is applied to any parent of
    * this component or element.
    */
-  _light: ".chakra-ui-light &, [data-theme=light] &, &[data-theme=light]",
+  _light:
+    ".chakra-ui-light &:not([data-theme])," +
+    "[data-theme=light] &:not([data-theme])," +
+    "&[data-theme=light]",
 }
 
 export type Pseudos = typeof pseudoSelectors

packages/styled-system/tests/css-var.test.ts

@@ -482,7 +482,7 @@ test("should convert semantic tokens", () => {
         "--colors-red-800": "#ff0080",
         "--colors-secondary": "var(--colors-red-800)",
         "--colors-success": "var(--colors-red-100)",
-        ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]": Object {
+        ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]": Object {
           "--colors-primary": "var(--colors-red-400)",
           "--colors-secondary": "var(--colors-red-700)",
         },

packages/system/src/providers.tsx

@@ -39,9 +39,13 @@ export interface CSSVarsProps {
   root?: string
 }
 
-export const CSSVars = ({ root = ":host, :root" }: CSSVarsProps) => (
-  <Global styles={(theme: any) => ({ [root]: theme.__cssVars })} />
-)
+export const CSSVars = ({ root = ":host, :root" }: CSSVarsProps) => {
+  /**
+   * Append color mode selector to allow semantic tokens to change according to the color mode
+   */
+  const selector = [root, `[data-theme]`].join(",")
+  return <Global styles={(theme: any) => ({ [selector]: theme.__cssVars })} />
+}
 
 export function useTheme<T extends object = Dict>() {
   const theme = React.useContext(

packages/system/stories/system.stories.tsx

@@ -195,3 +195,22 @@ export const WithCSSVarToken = () => {
     </chakra.div>
   )
 }
+
+export const WithSemanticTokens = () => {
+  return (
+    <div>
+      <chakra.p color="semantic">I am in the default color mode</chakra.p>
+      <div data-theme="light">
+        <chakra.p color="semantic">I am forced to light mode (red)</chakra.p>
+      </div>
+      <div data-theme="dark">
+        <chakra.p color="semantic">I am forced to dark mode (blue)</chakra.p>
+        <div data-theme="light">
+          <chakra.p pl="4" color="semantic">
+            I am nested and forced to light mode (red)
+          </chakra.p>
+        </div>
+      </div>
+    </div>
+  )
+}