github chakra-ui/panda @pandacss/core@0.34.0

latest releases: @pandacss/types@0.49.0, @pandacss/token-dictionary@0.49.0, @pandacss/generator@0.49.0...
9 months ago

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

Don't miss a new panda release

NewReleases is sending notifications on new releases.