Using colorPalette in a shadows token?

[NateWritesCode]

Hello,

Thank you to creators for this awesome library!

Does anyone know how to use a colorPalette in a shadows token?

I tried the following, but it does not appear to work.

0px 1px 2px 0px colorPalette.600/50

Thank you.

[astahmer]

tldr: colorPalette can not be used in tokens / semanticTokens due to the way CSS works

---

let's say you have this tokens object in your config

export const tokens = defineTokens({
  shadows: {
    example: {
      value: '0px 1px 2px 0px {colors.colorPalette.600}',
    },
  },
})

although it seems valid, it's not (and it's actually reported by the CLI when config.validation is not explicitly set to none)

❯ pnpm panda
🐼 warn [config] ⚠️ Invalid config:
- [tokens] Missing token: `colors.colorPalette.300` used in `theme.tokens.shadows.example`

the reason why is that tokens will generate CSS variables using the config.cssVarRoot selector (1), whereas colorPalette will be applied through a matching atomic class generated based on the value passed (2):

/* panda.css (1) */
@layer tokens {
  :where(:root, :host) {
    --shadows-example: 0px 1px 2px 0px var(--colors-color-palette-300);
  }
}

// app.tsx (2)
css({ colorPalette: "blue" }) //  .color-palette_blue

/* panda.css - later */
@layer utilities {
  .color-palette_blue {
    --colors-color-palette-50: var(--colors-blue-50);
    --colors-color-palette-100: var(--colors-blue-100);
    --colors-color-palette-200: var(--colors-blue-200);
    --colors-color-palette-300: var(--colors-blue-300);
    --colors-color-palette-400: var(--colors-blue-400);
    --colors-color-palette-500: var(--colors-blue-500);
    --colors-color-palette-600: var(--colors-blue-600);
    --colors-color-palette-700: var(--colors-blue-700);
    --colors-color-palette-800: var(--colors-blue-800);
    --colors-color-palette-900: var(--colors-blue-900);
    --colors-color-palette-950: var(--colors-blue-950);
  }
}

so, just like native CSS, the --shadows-example will not work due to the --colors-color-palette-300 being undefined at the point of the CSS var (--shadows-example) creation in the cssVarRoot selector (:where(:root, :host))

now; if you provide a default colorPalette by setting colorPalette: "blue" to the cssVarRoot selector, using Panda globalCss object in your config

// panda.config.ts
import { defineConfig } from "@pandacss/dev"

export default defineConfig({
// ...
globalCss: {
    '&:where(:root, :host)': {
      colorPalette: 'blue',
    },
  },
})

this will (somewhat) work for this specific use-case (using colorPalette with a value of blue), but it will not react to colorPalette: "red" set using an atomic class, for the same reason as before, the CSS variable --shadow-example would not be aware of the --colors-color-palette-300 at this point

[NateWritesCode]

Thank you so much for the thorough explanation. Truly appreciate it!