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

on GitHub

Minor Changes

• b1c31fd: - Introduces deep nested colorPalettes for enhanced color management

  • Previous color palette structure was flat and less flexible, now colorPalettes can be organized hierarchically for
    improved organization

  Example: Define colors within categories, variants and states

  const theme = {
    extend: {
      semanticTokens: {
        colors: {
          button: {
            dark: {
              value: 'navy',
            },
            light: {
              DEFAULT: {
                value: 'skyblue',
              },
              accent: {
                DEFAULT: {
                  value: 'cyan',
                },
                secondary: {
                  value: 'blue',
                },
              },
            },
          },
        },
      },
    },
  }

  You can now use the root button color palette and its values directly:

  import { css } from '../styled-system/css'
  
  export const App = () => {
    return (
      <button
        className={css({
          colorPalette: 'button',
          color: 'colorPalette.light',
          backgroundColor: 'colorPalette.dark',
          _hover: {
            color: 'colorPalette.light.accent',
            background: 'colorPalette.light.accent.secondary',
          },
        })}
      >
        Root color palette
      </button>
    )
  }

  Or you can use any deeply nested property (e.g. button.light.accent) as a root color palette:

  import { css } from '../styled-system/css'
  
  export const App = () => {
    return (
      <button
        className={css({
          colorPalette: 'button.light.accent',
          color: 'colorPalette.secondary',
        })}
      >
        Nested color palette leaf
      </button>
    )
  }

Patch Changes

• 9e79955: Fix issue where negative spacing tokens doesn't respect hash option
• Updated dependencies [8106b41]
• Updated dependencies [e6459a5]
• Updated dependencies [6f7ee19]
  • @pandacss/types@0.14.0
  • @pandacss/shared@0.14.0