2.3 KiB
2.3 KiB
name, description, category, risk, source, source_repo, source_type, date_added, author, tags, tools
| name | description | category | risk | source | source_repo | source_type | date_added | author | tags | tools | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ui-tokens | List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync. | design | safe | community | bitjaru/styleseed | community | 2026-04-08 | bitjaru |
|
|
UI Tokens
Overview
Part of StyleSeed, this skill manages design tokens without letting the source-of-truth files drift apart. It is meant for teams using the Toss seed's JSON token files and CSS implementation together.
When to Use
- Use when you need to inspect the current token set
- Use when you want to add a new color, shadow, radius, spacing, or typography token
- Use when you need to update a token and propagate the change safely
- Use when the project has both JSON token files and CSS variables that must stay aligned
How It Works
Supported Actions
list: show the current tokens in a human-readable formadd: introduce a new token and wire it through the implementationupdate: change an existing token value and audit the downstream usage
Typical Source-of-Truth Split
For the Toss seed:
- JSON under
tokens/ - CSS variables and theme wiring under
css/theme.css - typography support in the font and base CSS files
Rules
- keep JSON and CSS in sync
- prefer semantic names over descriptive names
- provide dark-mode support where relevant
- update the token implementation, not just the source manifest
- check for direct component usage that might now be stale
Output
Return:
- The requested token inventory or change summary
- Every file touched
- Any affected components or utilities that should be reviewed
- Follow-up actions if the new token requires broader adoption
Best Practices
- Add semantic intent, not one-off brand shades
- Avoid token sprawl by extending existing scales first
- Keep naming consistent with the rest of the system
- Review contrast and accessibility when introducing new colors