Patch Changes
-
64d5144: Allow using the color opacity modifier syntax (
blue.300/70
) in token references:{colors.blue.300/70}
token(colors.blue.300/70)
Note that this works both in style usage and in build-time config.
// runtime usage import { css } from "../styled-system/css"; css({ bg: "{colors.blue.300/70}" }); // => @layer utilities { // .bg_token\(colors\.blue\.300\/70\) { // background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent); // } // } css({ bg: "token(colors.blue.300/70)" }); // => @layer utilities { // .bg_token\(colors\.blue\.300\/70\) { // background: color-mix(in srgb, var(--colors-blue-300) 70%, transparent); // } // }
// build-time usage import { defineConfig } from "@pandacss/dev"; export default defineConfig({ theme: { tokens: { colors: { blue: { 300: { value: "#00f" }, }, }, }, semanticTokens: { colors: { primary: { value: "{colors.blue.300/70}", }, }, }, }, });
@layer tokens { :where(:root, :host) { --colors-blue-300: #00f; --colors-primary: color-mix( in srgb, var(--colors-blue-300) 70%, transparent ); } }
-
Updated dependencies [64d5144]
-
Updated dependencies [d1516c8]
- @pandacss/token-dictionary@0.34.0
- @pandacss/types@0.34.0
- @pandacss/logger@0.34.0
- @pandacss/is-valid-prop@0.34.0
- @pandacss/shared@0.34.0