Panda Preset

A preset and config for Panda-CSS projects from the Nurl Ganglion Design System.

Installation

1. Follow the instructions in the PandaCSS Website
2. Install the preset
3. Update your config

Install the Preset

pnpm install @nurl/panda-preset @pandacss/preset-panda

Update your config

import { defineConfig } from '@pandacss/dev'
import pandaPreset from '@pandacss/preset-panda'
import nurlPreset, { nurlConfig } from '@nurl/panda-preset'

export default defineConfig({
  ...nurlConfig,
  presets: [pandaPreset, nurlPreset],

  // Add your project specific config here
  include: ['./src/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
})

Usage

Conditions

export const conditions = {
  // themes
  nurlTheme: '[data-theme=nurl] &',

  // modes
  lightMode: '[data-color-mode=light] &, &.light, .light &',
  darkMode: '[data-color-mode=dark] &, &.dark, .dark &',

  // states
  modalOpen: '&:is([data-modal-open=true])',
  screenReaderOnly: '&:is([data-screen-reader-only=true])',
  invalid: '&:is(:invalid, [data-invalid], [aria-invalid])',
  userInvalid: '&:is(:user-invalid, [aria-invalid])',
  groupInvalid: '.group:is([data-invalid] &, [aria-invalid]) &',
  groupChecked: '.group:is([data-checked="true"] &, [aria-checked="true"]) &',

  // positions
  positionBottom: '&:is([data-position=bottom])',
  positionTop: '&:is([data-position=top])',
  positionLeft: '&:is([data-position=left])',
  positionRight: '&:is([data-position=right])',

  // elements
  startIcon: '&:is([data-start-icon=true])',

  // roles
  admin: '&:is([data-role=admin])',
  player: '&:is([data-role=player])',
  user: '&:is([data-role=user])',
  nuro: '&:is([data-role=nuro])',
}

Patterns

We use a set of patterns to theme our components. Here are the patterns we use: View Patterns

Utilities

We use a set of utilities to theme our components. Here are the utilities we use: View Utilities

Semantic Tokens

We use a set of semantic tokens to theme our components. Here are the tokens we use: View Semantic Tokens

TextStyles

We use a set of text styles to theme our components. Here are the text styles we use: View TextStyles

Fonts & Z-Indices

We use a set of fonts and z-indices to theme our components. Here are the fonts and z-indices we use: View Fonts & Z-Indices

Keyframes

We use a set of keyframes to animate our components. Here are the keyframes we use: View Keyframes