chakra-ui/panda @pandacss/generator@0.35.0

on GitHub

Patch Changes

• 5585696: Allow using ! or !important when using strictTokens: true (without TS throwing an error)

• 44589ec: Change the styled-system/token JS token function to use raw value for semanticToken that do not have conditions other
  than base

  export default defineConfig({
    semanticTokens: {
      colors: {
        blue: { value: "blue" },
        green: {
          value: {
            base: "green",
            _dark: "white",
          },
        },
        red: {
          value: {
            base: "red",
          },
        },
      },
    },
  });

  This is the output of the styled-system/token JS token function:

  const tokens = {
      "colors.blue": {
  -     "value": "var(--colors-blue)",
  +     "value": "blue",
        "variable": "var(--colors-blue)"
      },
      "colors.green": {
        "value": "var(--colors-green)",
        "variable": "var(--colors-green)"
      },
      "colors.red": {
  -     "value": "var(--colors-red)",
  +     "value": "red",
        "variable": "var(--colors-red)"
      },
  }

• a0c4d27: Add an optional className key in sva config which will can be used to target slots in the DOM.

  Each slot will contain a ${className}__${slotName} class in addition to the atomic styles.

  import { sva } from "../styled-system/css";
  
  const button = sva({
    className: "btn",
    slots: ["root", "text"],
    base: {
      root: {
        bg: "blue.500",
        _hover: {
          // v--- 🎯 this will target the `text` slot
          "& .btn__text": {
            color: "white",
          },
        },
      },
    },
  });
  
  export const App = () => {
    const classes = button();
    return (
      <div className={classes.root}>
        <div className={classes.text}>Click me</div>
      </div>
    );
  };

• Updated dependencies [f2fdc48]

• Updated dependencies [50db354]

• Updated dependencies [c459b43]

• Updated dependencies [f6befbf]

• Updated dependencies [a0c4d27]

  • @pandacss/token-dictionary@0.35.0
  • @pandacss/types@0.35.0
  • @pandacss/core@0.35.0
  • @pandacss/logger@0.35.0
  • @pandacss/is-valid-prop@0.35.0
  • @pandacss/shared@0.35.0