fix: gradient token issue

Author: segunadebayo

.changeset/fair-pets-occur.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/preset-base': patch
+---
+
+Fix issue where `bgGradient` did not respect the gradient token.

packages/generator/__tests__/generate-prop-types.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, test } from 'vitest'
 import { generatePropTypes } from '../src/artifacts/types/prop-types'
 
 describe('generate property types', () => {
-  test('should ', () => {
+  test('should work', () => {
     expect(generatePropTypes(createContext())).toMatchInlineSnapshot(`
       "import type { ConditionalValue } from './conditions';
       import type { CssProperties } from './system-types';
@@ -93,9 +93,9 @@ describe('generate property types', () => {
       	truncate: boolean;
       	background: Tokens["colors"];
       	backgroundColor: Tokens["colors"];
-      	backgroundGradient: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
-      	backgroundLinear: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
-      	textGradient: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
+      	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+      	backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+      	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
       	gradientFrom: Tokens["colors"];
       	gradientTo: Tokens["colors"];
       	gradientVia: Tokens["colors"];

packages/preset-base/src/utilities/gradient.ts

@@ -3,12 +3,6 @@ import { createColorMixTransform } from '../color-mix-transform'
 
 const gradientVia = createColorMixTransform('--gradient-via')
 
-const union = (values: Iterable<string>) => {
-  return Array.from(values)
-    .map((value) => `'${value}'`)
-    .join(' | ')
-}
-
 const linearGradientDirectionMap = new Map([
   ['to-t', 'to top'],
   ['to-tr', 'to top right'],
@@ -20,8 +14,11 @@ const linearGradientDirectionMap = new Map([
   ['to-tl', 'to top left'],
 ])
 
-const linearGradientValues: PropertyValues = {
-  type: union(linearGradientDirectionMap.keys()),
+const linearGradientValues: PropertyValues = (theme) => {
+  return {
+    ...theme('gradients'),
+    ...Object.fromEntries(linearGradientDirectionMap.entries()),
+  }
 }
 
 const gradientStops =
@@ -36,7 +33,11 @@ export const backgroundGradients: UtilityConfig = {
     className: 'bg-grad',
     group: 'Background Gradient',
     values: linearGradientValues,
-    transform(value) {
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`)
+      if (tokenValue) {
+        return { backgroundImage: tokenValue }
+      }
       return {
         '--gradient-stops': gradientStops,
         '--gradient-position': linearGradientDirectionMap.get(value) || value,
@@ -50,7 +51,11 @@ export const backgroundGradients: UtilityConfig = {
     className: 'bg-linear',
     group: 'Background Gradient',
     values: linearGradientValues,
-    transform(value) {
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`)
+      if (tokenValue) {
+        return { backgroundImage: tokenValue }
+      }
       return {
         '--gradient-stops': gradientStops,
         '--gradient-position': linearGradientDirectionMap.get(value) || value,
@@ -63,7 +68,12 @@ export const backgroundGradients: UtilityConfig = {
     shorthand: 'bgRadial',
     className: 'bg-radial',
     group: 'Background Gradient',
-    transform(value) {
+    values: 'gradients',
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`)
+      if (tokenValue) {
+        return { backgroundImage: tokenValue }
+      }
       return {
         '--gradient-stops': gradientStops,
         '--gradient-position': value,
@@ -89,7 +99,15 @@ export const backgroundGradients: UtilityConfig = {
     className: 'txt-grad',
     group: 'Background Gradient',
     values: linearGradientValues,
-    transform(value) {
+    transform(_value, { raw: value, token }) {
+      const tokenValue = token(`gradients.${value}`)
+      if (tokenValue) {
+        return {
+          backgroundImage: tokenValue,
+          WebkitBackgroundClip: 'text',
+          color: 'transparent',
+        }
+      }
       return {
         '--gradient-stops': gradientStops,
         '--gradient-position': linearGradientDirectionMap.get(value) || value,

packages/studio/styled-system/types/prop-type.d.ts

@@ -89,9 +89,9 @@ export interface UtilityValues {
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
 	backgroundImage: Tokens["assets"];
-	backgroundGradient: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
-	backgroundLinear: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
-	textGradient: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
+	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
 	gradientVia: Tokens["colors"];

sandbox/solid-ts/panda.config.ts

@@ -7,6 +7,16 @@ export default defineConfig({
   theme: {
     extend: {
       tokens: {
+        gradients: {
+          simple: { value: 'linear-gradient(to right, red, blue)' },
+          primary: {
+            value: {
+              type: 'linear',
+              placement: 'to right',
+              stops: ['pink', 'green'],
+            },
+          },
+        },
         colors: {
           black: { value: 'black' },
           white: { value: 'white' },

sandbox/solid-ts/src/App.tsx

@@ -1,38 +1,10 @@
-import { ParentProps } from 'solid-js'
-import { RecipeVariantProps, css, cva } from '../styled-system/css'
-import { splitCssProps } from '../styled-system/jsx'
-import { HTMLStyledProps, JsxStyleProps } from '../styled-system/types'
-
-const btn = cva({ variants: { size: { sm: { textStyle: 'sm' }, md: { textStyle: 'md' } } } })
-
-type ButtonProps = RecipeVariantProps<typeof btn>
-
-const Button = (props: ParentProps<ButtonProps & JsxStyleProps>) => {
-  const [variants, rest] = btn.splitVariantProps(props)
-  const [cssProps, elementProps] = splitCssProps(rest)
-  return (
-    <button {...elementProps} class={css(btn.raw(variants), cssProps)}>
-      aaa
-    </button>
-  )
-}
-
-type DivProps = HTMLStyledProps<'div'>
-
-export const Div = ({ css: cssProp = {}, children }: DivProps) => {
-  const className = css(cssProp)
-  // Argument of type 'SystemStyleObject | SystemStyleObject[]' is not assignable to parameter of type 'false | SystemStyleObject | null | undefined'.
-
-  return <div class={className}>{children}</div>
-}
+import { Gradient } from './scenarios/gradient'
 
 export function App() {
   return (
-    <>
-      <Div css={[{ color: 'red.300' }, { backgroundColor: 'blue.100' }]}>Div</Div>
-      <Div css={{ color: 'blue.500' }}>Div</Div>
-      <Button size="md">button</Button>
-    </>
+    <div>
+      <Gradient />
+    </div>
   )
 }
 

sandbox/solid-ts/src/scenarios/css-prop.tsx

@@ -0,0 +1,18 @@
+import { css } from '../../styled-system/css'
+import { HTMLStyledProps } from '../../styled-system/types'
+
+type DivProps = HTMLStyledProps<'div'>
+
+const Div = ({ css: cssProp = {}, children }: DivProps) => {
+  const className = css(cssProp)
+  return <div class={className}>{children}</div>
+}
+
+export const CssProp = () => {
+  return (
+    <div>
+      <Div css={[{ color: 'red.300' }, { backgroundColor: 'blue.100' }]}>Div</Div>
+      <Div css={{ color: 'blue.500' }}>Div</Div>
+    </div>
+  )
+}

sandbox/solid-ts/src/scenarios/gradient.tsx

@@ -0,0 +1,20 @@
+import { css } from '../../styled-system/css'
+
+export const Gradient = () => {
+  return (
+    <div class={css({ display: 'flex', gap: '4', p: '4' })}>
+      <div class={css({ boxSize: '100px', bgLinear: 'simple' })} />
+      <div class={css({ boxSize: '100px', bgLinear: 'primary' })} />
+      <div
+        class={css({
+          boxSize: '100px',
+          bgGradient: 'to-r',
+          gradientFrom: 'red.200',
+          gradientTo: 'blue.200',
+        })}
+      />
+      <h1 class={css({ textGradient: 'simple' })}>Hello</h1>
+      <h1 class={css({ textGradient: 'to-r', gradientFrom: 'red.200', gradientTo: 'blue.200' })}>Hello</h1>
+    </div>
+  )
+}

sandbox/solid-ts/src/scenarios/split-css-props.tsx

@@ -0,0 +1,33 @@
+import { ParentProps } from 'solid-js'
+import { RecipeVariantProps, css, cva } from '../../styled-system/css'
+import { splitCssProps } from '../../styled-system/jsx'
+import { JsxStyleProps } from '../../styled-system/types'
+
+const btn = cva({
+  variants: {
+    size: {
+      sm: { textStyle: 'sm' },
+      md: { textStyle: 'md' },
+    },
+  },
+})
+
+type VariantProps = RecipeVariantProps<typeof btn>
+
+const Button = (props: ParentProps<VariantProps & JsxStyleProps>) => {
+  const [variants, rest] = btn.splitVariantProps(props)
+  const [cssProps, elementProps] = splitCssProps(rest)
+  return (
+    <button {...elementProps} class={css(btn.raw(variants), cssProps)}>
+      aaa
+    </button>
+  )
+}
+
+export const SplitCssProps = () => {
+  return (
+    <div>
+      <Button size="md">button</Button>
+    </div>
+  )
+}