[pull] main from chakra-ui:main

.changeset/fix-semantic-token-lookup-10822.md

@@ -0,0 +1,9 @@
+---
+"@chakra-ui/react": patch
+---
+
+Fix `system.token()` returning dark-mode resolved values for semantic tokens
+with light/dark conditions instead of the semantic CSS variable reference.
+
+Also fix token dictionary bookkeeping for semantic tokens without a base value
+so lookup maps stay in sync after empty tokens are removed.

packages/react/__tests__/system.test.ts

@@ -26,7 +26,6 @@ describe("system", () => {
         "@layer tokens": {
           "&:where(html)": {
             "--chakra-colors-primary": "#000",
-            "--chakra-colors-test": "",
           },
           ".dark &": {
             "--chakra-colors-test": "pink",
@@ -217,4 +216,76 @@ describe("system", () => {
       }
     `)
   })
+
+  test("system.token returns semantic css var for conditional color tokens (#10822)", () => {
+    const tokens = {
+      colors: {
+        teal: {
+          200: { value: "#light" },
+          800: { value: "#dark" },
+        },
+      },
+    }
+
+    const semanticTokens = {
+      colors: {
+        teal: {
+          muted: {
+            value: {
+              _light: "{colors.teal.200}",
+              _dark: "{colors.teal.800}",
+            },
+          },
+        },
+      },
+    }
+
+    const sys = createSystem({ theme: { tokens, semanticTokens } })
+
+    expect(sys.token("colors.teal.muted")).toBe(
+      "var(--chakra-colors-teal-muted)",
+    )
+    expect(sys.token.var("colors.teal.muted")).toBe(
+      "var(--chakra-colors-teal-muted)",
+    )
+    expect(sys.query.semanticTokens.list("colors")).toContain("teal.muted")
+    expect(sys.token("colors.teal.200")).toBe("#light")
+  })
+
+  test("system.token resolves semantic tokens with base condition (#10822)", () => {
+    const tokens = {
+      colors: {
+        teal: {
+          200: { value: "#light" },
+          800: { value: "#dark" },
+        },
+      },
+    }
+
+    const semanticTokens = {
+      colors: {
+        accent: {
+          value: {
+            base: "{colors.teal.200}",
+            _dark: "{colors.teal.800}",
+          },
+        },
+        plain: {
+          value: { base: "#fff" },
+        },
+        nested: {
+          DEFAULT: {
+            value: "{colors.accent}",
+          },
+        },
+      },
+    }
+
+    const sys = createSystem({ theme: { tokens, semanticTokens } })
+
+    expect(sys.token("colors.accent")).toBe("var(--chakra-colors-accent)")
+    expect(sys.token("colors.plain")).toBe("var(--chakra-colors-plain)")
+    expect(sys.token("colors.nested")).toBe("var(--chakra-colors-nested)")
+    expect(sys.token("colors.teal.200")).toBe("#light")
+  })
 })

packages/react/__tests__/token-dictionary.test.ts

@@ -138,6 +138,63 @@ describe("token dictionary", () => {
     expect(token?.extensions.conditions).toEqual({ base: "red", _dark: "blue" })
   })
 
+  test("keeps conditional semantic token views in sync", () => {
+    const dict = createTokenDictionary({
+      prefix: "chakra",
+      tokens: {
+        colors: {
+          teal: {
+            200: { value: "#light" },
+            800: { value: "#dark" },
+          },
+        },
+      },
+      semanticTokens: {
+        colors: {
+          teal: {
+            muted: {
+              value: {
+                _light: "{colors.teal.200}",
+                _dark: "{colors.teal.800}",
+              },
+            },
+          },
+        },
+      },
+    })
+
+    const conditions = {
+      _light: "{colors.teal.200}",
+      _dark: "{colors.teal.800}",
+    }
+
+    const token = dict.getByName("colors.teal.muted")
+    const categoryToken = dict.categoryMap.get("colors")?.get("teal.muted")
+    const darkToken = dict.allTokens.find(
+      (token) =>
+        token.name === "colors.teal.muted" &&
+        token.extensions.condition === "_dark",
+    )
+
+    expect(token).toBeDefined()
+    expect(dict.allTokens).toContain(token)
+    expect(token?.extensions.conditions).toEqual(conditions)
+
+    expect(categoryToken).toBe(token)
+    expect(dict.allTokens).toContain(categoryToken)
+
+    expect(darkToken?.extensions.conditions).toEqual(conditions)
+    expect(dict.cssVarMap.get("base")?.has("--chakra-colors-teal-muted")).toBe(
+      false,
+    )
+    expect(
+      dict.cssVarMap.get("_light")?.get("--chakra-colors-teal-muted"),
+    ).toBe("var(--chakra-colors-teal-200)")
+    expect(dict.cssVarMap.get("_dark")?.get("--chakra-colors-teal-muted")).toBe(
+      "var(--chakra-colors-teal-800)",
+    )
+  })
+
   test("semantic token references preserve conditional token references", () => {
     const dict = createTokenDictionary({
       prefix: "chakra",

packages/react/src/styled-system/system.ts

@@ -256,12 +256,17 @@ export function createSystem(...configs: SystemConfig[]): SystemContext {
 
 function getTokenMap(tokens: TokenDictionary) {
   const map = new Map<string, { value: string; variable: string }>()
+  const names = new Set(tokens.allTokens.map((token) => token.name))
+
+  for (const name of names) {
+    const token = tokens.getByName(name)
+    if (!token?.extensions.cssVar) continue
 
-  tokens.allTokens.forEach((token) => {
     const { cssVar, virtual, conditions } = token.extensions
-    const value = !!conditions || virtual ? cssVar!.ref : token.value
-    map.set(token.name, { value, variable: cssVar!.ref })
-  })
+    const isSemantic = !!conditions || virtual
+    const value = isSemantic ? cssVar.ref : token.value
+    map.set(name, { value, variable: cssVar.ref })
+  }
 
   return map
 }

packages/react/src/styled-system/token-dictionary.ts

@@ -8,7 +8,6 @@ import {
   mapEntries,
   mapObject,
   memo,
-  omit,
   walkObject,
 } from "../utils"
 import { cssVar } from "./css-var"
@@ -205,21 +204,30 @@ export function createTokenDictionary(options: Options): TokenDictionary {
   }
 
   function buildCategoryMap(token: Token) {
-    const { category, prop, condition } = token.extensions
+    const { category, prop, condition, conditions } = token.extensions
     if (!category) return
 
-    if (condition != null && condition !== "base") return
-
     if (!categoryMap.has(category)) {
       categoryMap.set(category, new Map())
     }
 
-    categoryMap.get(category)!.set(prop, token)
+    const map = categoryMap.get(category)!
+    const existing = map.get(prop)
+
+    if (condition == null || condition === "base") {
+      map.set(prop, token)
+      return
+    }
+
+    if (conditions && !existing) {
+      map.set(prop, token)
+    }
   }
 
   function buildCssVars(token: Token) {
     const { condition, negative, virtual, cssVar } = token.extensions
-    if (negative || virtual || !condition || !cssVar) return
+    if (negative || virtual || !condition || !cssVar || token.value === "")
+      return
 
     if (!cssVarMap.has(condition)) {
       cssVarMap.set(condition, new Map())
@@ -525,7 +533,7 @@ function getConditionalTokens(token: Token) {
       ...token,
       value,
       extensions: {
-        ...omit(token.extensions, ["conditions"]),
+        ...token.extensions,
         condition: nextPath.join(":"),
       },
     }

packages/react/src/styled-system/token-middleware.ts

@@ -134,9 +134,37 @@ export const addVirtualPalette: TokenMiddleware = {
 export const removeEmptyTokens: TokenMiddleware = {
   enforce: "post",
   transform(dictionary) {
-    dictionary.allTokens = dictionary.allTokens.filter(
-      (token) => token.value !== "",
-    )
+    const removed: Token[] = []
+    const next: Token[] = []
+
+    dictionary.allTokens.forEach((token) => {
+      if (token.value === "") {
+        removed.push(token)
+      } else {
+        next.push(token)
+      }
+    })
+
+    dictionary.allTokens.splice(0, dictionary.allTokens.length, ...next)
+
+    removed.forEach((token) => {
+      if (dictionary.tokenMap.get(token.name) !== token) return
+
+      const replacement = dictionary.allTokens.find(
+        (t) => t.name === token.name,
+      )
+      if (!replacement) {
+        dictionary.tokenMap.delete(token.name)
+        return
+      }
+
+      // Safety net for non-standard registration paths that omit conditions.
+      if (token.extensions.conditions && !replacement.extensions.conditions) {
+        replacement.extensions.conditions = token.extensions.conditions
+      }
+
+      dictionary.tokenMap.set(token.name, replacement)
+    })
   },
 }