Chroma-Style
@chroma/style — design tokens, utility CSS, and cva presets for Chroma, licensed under GPLv3.
Chroma-Style is the canonical @chroma/style package: design tokens (tokens.css), atomic utility classes (utilities.css), and shadcn-style component presets (variants.js) that compose with Chroma's WASM cva and cx helpers.
- Plugin folder:
chroma-style - Package id:
@chroma/style - Source: workspace
Chroma-Style/(published at github.com/Targ-Apps/Chroma-Style) - License: GNU GPL version 3 (
LICENSEin the package root)
When you run chroma new, the plugin is vendored into plugins/chroma-style/ from this package. Edit Chroma-Style/, then sync with ./scripts/sync-chroma-plugins.sh.
Brand tokens (TargApps)
Canonical hex values live on --cs-* variables in tokens.css. Semantic aliases (--background, --primary, …) map utilities and .cs-btn-* shells to the same palette.
| Token | Light | Dark |
|---|---|---|
--cs-background | #FAF9F5 | #262624 |
--cs-foreground | #3D3929 | #C3C0B6 |
--cs-primary | #C96442 | #D97757 |
--cs-primary-foreground | #FAF9F5 | #FAF9F5 |
--cs-secondary | #E9E6DC | #FAF9F5 |
--cs-muted | #EDE9DE | #1B1B19 |
--cs-muted-foreground | #7A7568 | #8A8780 |
--cs-border | #DAD9D4 | #3E3E38 |
--cs-destructive | #141413 | #EF4444 |
--cs-destructive-foreground | #FAF9F5 | #FAF9F5 |
Derived foregrounds (--cs-primary-foreground, --cs-muted-foreground) are chosen for WCAG contrast on their surfaces. Retheme by editing Chroma-Style/tokens.css only, then run ./scripts/sync-chroma-plugins.sh.
License
Chroma-Style is free software under the GNU General Public License v3.0 (GPLv3), copyright TargApps 2026. See the LICENSE file in the repository and the workspace license page.
Full guide
The complete API — tokens, utilities, bootstrapStyle, presets, and Desktop mirroring — lives in Styling Extension.