Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@pandacss/token-dictionary

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pandacss/token-dictionary - npm Package Versions

segunadebayo
published 0.48.0 •

Changelog

Source

[0.48.0] - 2024-11-13

Fixed

Fix multi-theme issue where calling the getTheme function throws a Vite error due to invalid dynamic import format.

import { getTheme } from 'styled-system/themes'

getTheme('default')
// -> The above dynamic import cannot be analyzed by Vite.

Changed

[Breaking] Remove default utility values for gridTemplateColumns, gridTemplateRows, gridColumn and gridRow to prevent interference with native css values.

For example 1 or 2 is a valid native value for gridColumn or gridRow, and should not be overridden by the utility.

Find the previous default values below, you can add them back to your config if you need them.

const utilities = {
  gridTemplateColumns: {
    className: 'grid-tc',
    group: 'Grid Layout',
    values: {
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
      '7': 'repeat(7, minmax(0, 1fr))',
      '8': 'repeat(8, minmax(0, 1fr))',
      '9': 'repeat(9, minmax(0, 1fr))',
      '10': 'repeat(10, minmax(0, 1fr))',
      '11': 'repeat(11, minmax(0, 1fr))',
      '12': 'repeat(12, minmax(0, 1fr))',
    },
  },
  gridTemplateRows: {
    className: 'grid-tr',
    group: 'Grid Layout',
    values: {
      '1': 'repeat(1, minmax(0, 1fr))',
      '2': 'repeat(2, minmax(0, 1fr))',
      '3': 'repeat(3, minmax(0, 1fr))',
      '4': 'repeat(4, minmax(0, 1fr))',
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
      '7': 'repeat(7, minmax(0, 1fr))',
      '8': 'repeat(8, minmax(0, 1fr))',
      '9': 'repeat(9, minmax(0, 1fr))',
      '10': 'repeat(10, minmax(0, 1fr))',
      '11': 'repeat(11, minmax(0, 1fr))',
      '12': 'repeat(12, minmax(0, 1fr))',
    },
  },
  gridColumn: {
    className: 'grid-c',
    group: 'Grid Layout',
    values: {
      full: '1 / -1',
      '1': 'span 1 / span 1',
      '2': 'span 2 / span 2',
      '3': 'span 3 / span 3',
      '4': 'span 4 / span 4',
      '5': 'span 5 / span 5',
      '6': 'span 6 / span 6',
      '7': 'span 7 / span 7',
      '8': 'span 8 / span 8',
      '9': 'span 9 / span 9',
      '10': 'span 10 / span 10',
      '11': 'span 11 / span 11',
      '12': 'span 12 / span 12',
    },
  },
  gridRow: {
    className: 'grid-r',
    group: 'Grid Layout',
    values: {
      full: '1 / -1',
      '1': 'span 1 / span 1',
      '2': 'span 2 / span 2',
      '3': 'span 3 / span 3',
      '4': 'span 4 / span 4',
      '5': 'span 5 / span 5',
      '6': 'span 6 / span 6',
      '7': 'span 7 / span 7',
      '8': 'span 8 / span 8',
      '9': 'span 9 / span 9',
      '10': 'span 10 / span 10',
      '11': 'span 11 / span 11',
      '12': 'span 12 / span 12',
    },
  },
}
segunadebayo
published 0.0.0-dev-20241113153642 •

segunadebayo
published 0.0.0-dev-20241113144739 •

segunadebayo
published 0.0.0-dev-20241113133153 •

segunadebayo
published 0.0.0-dev-20241113132647 •

segunadebayo
published 0.0.0-dev-20241113131118 •

segunadebayo
published 0.47.1 •

Changelog

Source

[0.47.1] - 2024-11-06

Fixed

  • Fix postcss; race condition on builder instance for simultaneous plugin invocations
  • Fix issue where token reference in composite border token generates incorrect css.
segunadebayo
published 0.0.0-dev-20241026153443 •

segunadebayo
published 0.0.0-dev-20241022220846 •

segunadebayo
published 0.47.0 •

Changelog

Source

[0.47.0] - 2024-10-18

Added

Add support for cursor token types. Useful for tokenizing cursor types for interactive components.

Here's an example of how to define a cursor token in your panda.config.ts file:

// panda.config.ts
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        cursor: {
          button: { value: 'pointer' },
          checkbox: { value: 'default' },
        },
      },
    },
  },
})

Then you can use the cursor token in your styles or recipes.

<button className={css({ cursor: 'button' })}>Click me</button>

This makes it easy to manage cursor styles across your application.

Changed

Improve preflight css such that elements with hidden=until-found are visible. Previously, we always hide all elements with the hidden attribute