@gravityforms/design-tokens/AGENTS.md

Design tokens as PostCSS variables, media queries, and mixins for Gravity Forms development.

# AGENTS.md - Design Tokens

Package-specific guidance for `@gravityforms/design-tokens`. See root `AGENTS.md` for shared conventions.

## Purpose

Design tokens delivered as PostCSS custom properties, custom media queries, and mixins. Consumed by all component CSS via PostCSS plugins.

## Multi-Product Structure

Tokens are organized by product. Each product directory contains `custom-properties/`, `custom-media/`, and `mixins/`:

- `gravityforms/` — Gravity Forms admin UI
- `gravity/` — Shared tokens across products (Gravity, CRM, SMTP, Billing, etc.)

Use the correct product namespace when selecting tokens.

## Key Files

- `index.js` — Package entry point, exports token paths for PostCSS config
- `*/custom-properties/` — CSS custom properties (`--gform-admin-*`)
- `*/custom-media/` — Breakpoint and viewport queries
- `*/mixins/` — PostCSS mixins for common patterns

## Token Naming

All tokens use the `--gform-admin-` prefix. Common families:

- `--gform-admin-color-*` — Colors
- `--gform-admin-spacing-*` — Spacing scale (1–7)
- `--gform-admin-font-size-*` — Typography sizes
- `--gform-admin-font-weight-*` — Typography weights
- `--gform-admin-border-radius` — Border radius
- `--gform-admin-shadow-*` — Box shadows

## Dependencies

- `@gravityforms/node-utils`