Review init-brand-tokens command implementation

[marcusgoll]

User description

Previously, the tokens.css example in the documentation was incomplete, missing several token categories that were present in tokens.json:

Missing tokens (now added):

• Semantic colors: warning and info (only had success/error)
• Typography: sizes, weights, lineHeights, letterSpacing
• Spacing: entire 4px grid scale (0-24)
• Motion: duration.slower, easing.accelerate
• DataViz: sequential and diverging color scales

Changes:

1. Updated .claude/commands/project/init-brand-tokens.md

   • Fixed tokens.css example to include ALL tokens from tokens.json
   • Added warning colors (bg/fg/border/icon)
   • Added info colors (bg/fg/border/icon)
   • Added complete typography tokens
   • Added complete spacing scale
   • Added missing motion tokens
   • Added sequential and diverging dataViz scales

2. Created .spec-flow/scripts/modules/emit.mjs

   • Programmatic generator for tokens.json and tokens.css
   • Ensures 100% parity between JSON and CSS output
   • Uses native fs/promises (no external dependencies)
   • Handles camelCase to kebab-case conversion for CSS vars

3. Created .spec-flow/scripts/modules/test-emit.mjs

   • Validates complete coverage of all token categories
   • Tests media queries (@prefers-color-scheme, @prefers-reduced-motion)
   • Tests @supports fallback for legacy browsers
   • All 38 expected tokens verified present in CSS

This fixes the documentation bug where tokens.css was missing ~40% of the tokens defined in tokens.json, ensuring developers have access to the complete design system via CSS variables.

## Summary

Testing

• pwsh -NoProfile -File .spec-flow/scripts/powershell/check-prerequisites.ps1 -Json
• Additional commands:

Screenshots / Artifacts

Attach snippets, screenshots, or token reports if the change updates docs or templates.

Feature Flags

• No new flags added OR flags registered with /flag.add
• Expired flags cleaned up (run /flag.list --expired)
• Code references removed before flag cleanup

Contract Changes

• No contract changes OR /contract.verify passes
• Breaking changes require RFC approval (major bumps)
• Golden fixtures refreshed if schemas changed

Checklist

• Follows Conventional Commits
• Documentation updated (if needed)
• Added or updated tests (if applicable)
• Branch age <24h (or feature flag added)

---

CodeAnt-AI Description

Ensure tokens.css contains all design tokens; add generator and tests

What Changed

• tokens.css example in the project docs now includes all tokens from tokens.json (added semantic warning/info, full typography sizes/weights/line-heights/letter-spacing, complete 4px spacing scale, additional motion easings/durations, and sequential/diverging data-visualization scales).
• Added a generator that emits tokens.json and tokens.css together so CSS variables exactly reflect the JSON source and include dark-mode, reduced-motion, and legacy-browser fallbacks.
• Added a test script that generates tokens, verifies every expected CSS variable and required media queries are present, and fails when tokens are missing.
• Updated the init-brand-tokens documentation to show the complete tokens.css example.

Impact

✅ Complete design tokens available as CSS variables
✅ Fewer missing tokens in documentation and starter projects
✅ Clearer accessibility and legacy-browser fallbacks (dark mode & reduced motion)

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[codeant-ai]

CodeAnt AI is reviewing your PR.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

CodeAnt AI finished reviewing your PR.