chakra-ui/panda @pandacss/token-dictionary@0.34.0

on GitHub

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 [d1516c8]

  • @pandacss/types@0.34.0
  • @pandacss/logger@0.34.0
  • @pandacss/shared@0.34.0