chore: connect asset token to props

chakra-ui · Feb 2, 2025 · 974961b · 974961b
1 parent c183c22
commit 974961b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git a/.changeset/itchy-planets-provide.md b/.changeset/itchy-planets-provide.md
@@ -1,10 +1,13 @@
 ---
-"@chakra-ui/react": patch
+"@chakra-ui/react": minor
 ---
 
-- **Styled System:** Boost performance of style resolution by removing
-  `JSON.stringify` in `memo` function and avoid memoizing non-primitive
-  arguments.
+- **Styled System:**
+
+  - Boost performance of style resolution by removing `JSON.stringify` in `memo`
+    function and avoid memoizing non-primitive arguments.
+  - Connect `assets` token to `backgroundImage` and `listStyleImage` css
+    properties.
 
 - **Menu, Tooltip:** Set `lazyMount` and `unmountOnExit` to `true` in the `Root`
   component to improve initial rendering performance.

diff --git a/apps/www/content/docs/styling/style-props/background.mdx b/apps/www/content/docs/styling/style-props/background.mdx
@@ -121,9 +121,9 @@ Use `bgImage` or `backgroundImage` to set the background image of an element.
 <Box bgImage="linear-gradient({colors.red.200}, {colors.blue.200})" />
 ```
 
-| Prop                         | CSS Property       | Token Category |
-| ---------------------------- | ------------------ | -------------- |
-| `bgImage`, `backgroundImage` | `background-image` | assets         |
+| Prop                         | CSS Property       | Token Category        |
+| ---------------------------- | ------------------ | --------------------- |
+| `bgImage`, `backgroundImage` | `background-image` | `assets`, `gradients` |
 
 ## Background Gradient
 

diff --git a/packages/react/src/preset-base.ts b/packages/react/src/preset-base.ts
@@ -298,7 +298,12 @@ export const defaultBaseConfig = defineConfig({
         }
       },
     },
-    backgroundImage: { values: "gradients", shorthand: ["bgImg", "bgImage"] },
+    backgroundImage: {
+      values(theme) {
+        return { ...theme("gradients"), ...theme("assets") }
+      },
+      shorthand: ["bgImg", "bgImage"],
+    },
     // border
     border: { values: "borders" },
     borderTop: { values: "borders" },
@@ -785,7 +790,7 @@ export const defaultBaseConfig = defineConfig({
     scrollSnapMarginRight: { values: "spacing" },
     // list
     listStylePosition: { shorthand: ["listStylePos"] },
-    listStyleImage: { shorthand: ["listStyleImg"] },
+    listStyleImage: { values: "assets", shorthand: ["listStyleImg"] },
     // position
     position: { shorthand: ["pos"] },
     zIndex: { values: "zIndex" },

diff --git a/packages/react/src/styled-system/generated/prop-types.gen.ts b/packages/react/src/styled-system/generated/prop-types.gen.ts
@@ -40,7 +40,7 @@ export interface UtilityValues {
   gradientFrom: Tokens["colors"] | "currentBg"
   gradientTo: Tokens["colors"] | "currentBg"
   gradientVia: Tokens["colors"] | "currentBg"
-  backgroundImage: Tokens["gradients"]
+  backgroundImage: Tokens["gradients"] | Tokens["assets"]
   border: Tokens["borders"]
   borderTop: Tokens["borders"]
   borderLeft: Tokens["borders"]
@@ -163,6 +163,7 @@ export interface UtilityValues {
   scrollSnapMarginBottom: Tokens["spacing"]
   scrollSnapMarginLeft: Tokens["spacing"]
   scrollSnapMarginRight: Tokens["spacing"]
+  listStyleImage: Tokens["assets"]
   zIndex: Tokens["zIndex"]
   inset: Tokens["spacing"]
   insetInline: Tokens["spacing"]

diff --git a/packages/react/src/styled-system/generated/system.gen.ts b/packages/react/src/styled-system/generated/system.gen.ts
@@ -278,7 +278,7 @@ export interface SystemProperties {
   lineHeight?: ConditionalValue<UtilityValues["lineHeight"] | CssVars | CssProperties["lineHeight"] | AnyString>
   lineHeightStep?: ConditionalValue<CssProperties["lineHeightStep"] | AnyString>
   listStyle?: ConditionalValue<CssProperties["listStyle"] | AnyString>
-  listStyleImage?: ConditionalValue<CssProperties["listStyleImage"] | AnyString>
+  listStyleImage?: ConditionalValue<UtilityValues["listStyleImage"] | CssVars | CssProperties["listStyleImage"] | AnyString>
   listStylePosition?: ConditionalValue<CssProperties["listStylePosition"] | AnyString>
   listStyleType?: ConditionalValue<CssProperties["listStyleType"] | AnyString>
   margin?: ConditionalValue<UtilityValues["margin"] | CssVars | CssProperties["margin"] | AnyString>
@@ -581,7 +581,7 @@ export interface SystemProperties {
   scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars | CssProperties["scrollPaddingInline"] | AnyString>
   scrollPaddingY?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars | CssProperties["scrollPaddingBlock"] | AnyString>
   listStylePos?: ConditionalValue<CssProperties["listStylePosition"] | AnyString>
-  listStyleImg?: ConditionalValue<CssProperties["listStyleImage"] | AnyString>
+  listStyleImg?: ConditionalValue<UtilityValues["listStyleImage"] | CssVars | CssProperties["listStyleImage"] | AnyString>
   pos?: ConditionalValue<CssProperties["position"] | AnyString>
   insetX?: ConditionalValue<UtilityValues["insetInline"] | CssVars | CssProperties["insetInline"] | AnyString>
   insetY?: ConditionalValue<UtilityValues["insetBlock"] | CssVars | CssProperties["insetBlock"] | AnyString>