defineVars

The defineVars function defines static CSS variables that are available globally and can be reused across defineTheme() or create().

Use it to create semantic tokens like colors, spacing, or any design values that are consistent across your design system.

🎯 Example: Creating tokens

// tokens.ts
export const tokens = css.defineVars({
  white: 'white',
  black: 'black',
  textPrimary: '#eaeaea',
  textSecondary: '#333',
  link: 'lightblue',
  accent: 'purple',
});

These variables will be accessible in your theme or styles via tokens.white, tokens.textPrimary, etc.

🎨 Using tokens in a theme

import { css } from "@plumeria/core"
import { tokens } from './tokens'
 
export const theme = css.defineTheme({
  textPrimary: {
    light: tokens.black,
    dark: tokens.white,
  },
});