@pandacss/node

Folder structure

• .panda
  • tokens (index.js, index.d.ts, index.css)
  • styled-system (index.js, index.d.ts)
  • package.json

const tokens = {
  'colors.red.400': { value: '...', variable: '...' },
}

const tokenMap = {
  colors: [{ group: 'red', key: 'red.400', value: '...' }],
  fonts: [],
}

function getToken(path) {
  const { value } = tokens[path] || {}
  return value
}

function getTokenVar(path) {
  const { variable } = tokens[path] || {}
  return variable
}

import { generateCssVar, generateDts, generateJs } from '@pandacss/generator'
import { createTokenMap } from '@pandacss/token-dictionary'

const conf = new Conf()

const dict = createTokenMap(config)

const cssVars = generateCssVar(dict, { root: ':root' })
const dts = generateDts(dict)
const files = generateJs(dict, { formats: ['esm', 'cjs'] })

{
  "name": "dot-panda",
  "description": "...",
  "exports": {
    "./tokens": {
      "import": "./generated/tokens/index.mjs"
    },
    "./css": {
      "import": "./generated/css/index.mjs"
    }
  },
  "typeVersions": {
    "*": {
      "tokens": ["./generated/tokens"],
      "css": ["./generated/css"]
    }
  }
}

import { definePackage, writePackage } from '@pandacss/generators'

const pkg = setupPackage({
  name: 'dot-panda',
  description: '...',
  dir: 'generated',
  exports: ['tokens', 'css'],
})

writePackage(pkg)

updateTsConfig({
  compilerOptions: {
    paths: {
      'design-system': ['./.panda'],
    },
  },
})

updateGitIgnore({ comment: '# Panda', path: '.@pandacss/dev' })

type ConditionType =
  | 'color-scheme'
  | 'resolution'
  | 'writing-mode'
  | 'pseudo'
  | 'selector'
  | 'viewport'
  | 'interaction-media'
  | 'reduced-motion'
  | 'reduced-data'
  | 'reduced-transparent'
  | 'contrast'

const conditions = {
  dark: {
    type: 'color-scheme',
    value: '[data-theme=dark]',
    colorScheme: 'dark',
  },
  darkDimmed: {
    type: 'color-scheme',
    value: '[data-theme=dark_dimmed]',
    colorScheme: 'dark',
  },
  ltr: {
    type: 'dir',
    value: '[dir=rtl]',
  },
  rtl: {
    type: 'dir',
    value: '[dir=rtl]',
  },
  hover: {
    type: 'pseudo',
    value: '&:hover',
  },
  focus: {
    type: 'pseudo',
    value: '&:focus',
  },
  sm: {
    type: 'viewport',
    value: '@media (min-width: 480px)',
  },
}

const defaults = {
  className: ({ prop, value }) => `${prop}-${esc(value)}`,
}

const tt = defineConfig({
  utilities: [
    {
      properties: {
        display: {
          className: ({ value }) => `d-${value}`,
          transform(value) {
            return { display: value }
          },
          values: {
            fl: 'flex',
            ib: 'inline-block',
          },
        },
        background: {
          className: ({ prop, value }) => `bg-${value}`,
          values: ({ tokens }) => ({
            ...tokens.colors,
            inherit: 'inherit',
          }),
        },
        color: {
          className: ({ prop, value }) => `text-${value}`,
          values: (tokens) => ({ ...tokens.colors }),
        },
        fill: { values: 'colors' },
        lineClamp: {
          className: ({ prop, value }) => `clamp-${value}`,
          values: {
            '1': {
              '--line-clamp': '1',
            },
          },
        },
      },
      shorthands: {
        bg: 'background',
      },
    },

    {
      properties: {
        strokeWidth: {
          values: { '1': '1px', 2: '2px' },
        },
      },
    },

    {
      properties: {
        paddingLeft: { values: 'space', className: 'pl' },
        paddingRight: { values: 'space', className: 'pr' },
        paddingX: {
          className: 'px',
          values({ theme, map }) {
            return map(theme.space, (value) => ({
              paddingLeft: value,
              paddingRight: value,
            }))
          },
        },
      },
      shorthands: {
        pl: 'paddingLeft',
        px: 'paddingX',
      },
    },
  ],
})

Changelog

[0.50.0] - 2024-12-27

Added

• Add support for semantic tokens in composite shadow blur, offsetX, offsetY and spread properties.

This enables the use of semantic tokens in composite shadow properties.

// panda.config.ts

export default defineConfig({
  theme: {
    tokens: {
      // ...
      shadows: {
        sm: {
          value: {
            offsetX: '{spacing.3}',
            offsetY: '{spacing.3}',
            blur: '1rem',
            spread: '{spacing.3}',
            color: '{colors.red}',
          },
        },
      },
    },
  },
})

• Adds support for static analysis of used tokens and recipe variants. It helps to get a birds-eye view of how your design system is used and answers the following questions:

• What tokens are most used?

• What recipe variants are most used?

• How many hardcoded values vs tokens do we have?

panda analyze --scope=<token|recipe>

Still work in progress but we're excited to get your feedback!

Changed

Improve inference of slots in slot recipes when spreading and concatenating slot names.

This handles the following case gracefully:

const styles = sva({
  className: 'foo',
  slots: [...componentAnatomy.keys(), 'additional', 'slots', 'here'],
})

Panda will now infer the slots from the anatomy and add them to the recipe.