defineVars

The defineVars function defines static CSS variables can be reused create() or defineTheme().

Use it to create reusable 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,
  },
});