manage-design-tokens

name	manage-design-tokens
description	Guidelines for updating and synchronizing design tokens across the monorepo.

Design Tokens Management Skill

Use this skill whenever you need to add, modify, or sync design tokens (colors, spacing, typography, etc.) in the gvtech-design library.

Workflow

1. Modify Source Tokens

• Location: packages/design-tokens/src/
• Files:
  • palette.ts: Raw color values.
  • theme.ts: Semantic mappings (e.g., primary, background) for light and dark modes.
  • spacing.ts, typography.ts, etc.: Other scale definitions.
• Rules:
  • Use HSL values for colors to support Tailwind's opacity modifiers.
  • Ensure any new semantic token is added to both light and dark themes in theme.ts.

2. Synchronize with CSS

• The design tokens must be synced to the CSS variables used by Tailwind and Radix.
• Command: Run bun sync-tokens (or bun validate).
• This script updates:
  • apps/playground-web/src/globals.css
  • Root src/globals.css (if applicable)
• Check: Look for /* @tokens-start */ markers in the CSS files to ensure they are updated.

3. Verify in Playground

• Start the web playground: bun dev.