Utility classes
Atomic CSS in @chroma/style utilities.css — catalog, component shells, animation hooks, and what is not included.
utilities.css maps a fixed set of class names to token variables. There is no build-step scanner and no arbitrary value syntax (bg-[#fff]). If a class is not in this file, it has no effect unless you add it in app CSS.
The authoritative list for tooling is the exported utilityClasses object in index.js (grouped by category). You can import it from the vendored plugin path:
import { utilityClasses } from "../plugins/chroma-style/index.js";Categories
| Category | Examples | Notes |
|---|---|---|
| Background | bg-background, bg-primary, bg-muted, bg-transparent | Uses semantic color tokens |
| Text | text-foreground, text-muted-foreground, text-sm, font-medium | Includes size and weight utilities |
| Border | border, border-input, border-destructive, border-transparent | border-2 sets width only |
| Rounded | rounded-md, rounded-xl, rounded-full | Maps to --radius-* |
| Shadow | shadow-sm … shadow-xl, shadow-none | |
| Layout | flex, flex-col, items-center, justify-between, gap-2, w-full | Small flex/spacing subset |
| Spacing | p-4, px-3, py-2, mt-4, mb-2 | Not a full spacing scale |
| Interaction | transition-colors, focus-ring, disabled:opacity-50, is-disabled | focus-ring uses --ring |
Presets in variants.js compose these names in cva base and variants strings — if you add a utility, presets can reference it after you rebuild or patch the vendored copy.
Component shells (.cs-*)
Stable classes for imperative DOM or animation libraries:
| Class | Role |
|---|---|
.cs-card | Card background, border, radius from tokens |
.cs-btn | Base button layout and font |
.cs-btn-primary, .cs-btn-secondary, .cs-btn-outline, .cs-btn-ghost, .cs-btn-destructive | Variant fills |
.cs-btn-sm, .cs-btn-md, .cs-btn-lg | Padding and font size |
Use these when you need document.querySelector(".cs-card") or when a legacy UMD library animates nodes by class.
Animation hooks
Initial state attributes (cleared inline after your animation runs):
| Attribute | Initial style |
|---|---|
[data-animate="fade-up"] | opacity: 0; transform: translateY(12px) |
[data-animate="fade-in"] | opacity: 0 |
[data-animate="scale-in"] | opacity: 0; transform: scale(0.96) |
@media (prefers-reduced-motion: reduce) resets [data-animate] to visible static layout.
What is intentionally missing
Chroma-Style is not Tailwind. Do not assume the following exist:
| Missing | What to do instead |
|---|---|
Responsive prefixes (sm:, md:, lg:) | CSS @media in app stylesheets, or Show + breakpoint state |
Grid (grid, grid-cols-*) | Domain CSS classes |
container, max-w-* (except patterns you add) | Layout CSS in index.html or src/styles/ |
| Arbitrary properties | Plain CSS or extend utilities.css in the vendored plugin |
import "./x.css" from .chr | <link rel="stylesheet"> in index.html (runtime) |
Invalid class names fail silently (no styles). Only use classes that appear in utilityClasses or your app CSS.
Extending utilities
Because the plugin is copied into your repo:
- Edit
plugins/chroma-style/utilities.css(and optionally updateutilityClassesinindex.jsfor autocomplete). - Or add parallel rules in
src/styles/components.csswith your own BEM-style prefixes (taf-card, etc.).
Keep token references (var(--primary)) so light/dark stay coherent.