Skip to content

v0.18.0 — engine-generated colors.css

Choose a tag to compare

View all tags
@abdulwahed-sweden abdulwahed-sweden released this 23 May 15:14
· 204 commits to main since this release
v0.18.0
9596def

The framework's live tokens/colors.css is now generated by rio-theme from a single brand input (#0d9488 — the existing teal). The engine becomes the source of truth for the color palette; future changes flow through rustio theme generate rather than hand-editing the token file.

# Regenerate with any brand
rustio theme generate --brand "#1e3a5f" --out crates/rustio-admin/assets/static/admin/tokens/colors.css
rustio theme generate --brand "#0d9488" --brand "#c9572e" --out crates/rustio-admin/assets/static/admin/tokens/colors.css

New tokens

Eleven canonical --rio-brand-* tokens shipped in the live file. These name the engine's decision-layer outputs — existing template consumers stay on the drop-in --rio-* aliases:

  • --rio-brand-light, -dark, -adaptive — mode-adaptive brand variants (today identical; structure anticipates a future dark theme).
  • --rio-brand-surface, --rio-brand-accent — large fills vs small touches (Case 3 vivid taming splits these when chroma > 0.16).
  • --rio-brand-secondary — second brand color for multi-input themes; falls back to hover for single-input.
  • --rio-brand-hover, --rio-brand-active, --rio-brand-tint, --rio-brand-text — derived shades.
  • --rio-muted — brand-tinted neutral.

Changed tokens

Brand-derived tokens now come from the engine, not hand-picked Tailwind ladder rungs:

Token v0.17.1 v0.18.0 Origin
--rio-accent-hover #0F766E #188278 engine: 12% black mix
--rio-accent-soft #F0FDFA #ebf4f3 engine: 90% white mix
--rio-accent-border #99F6E4 #b8d9d4 engine: lightened surface
--rio-bg #F2F4F7 #f9fcfb engine: 97% white mix — faint teal
--rio-border #CBD5E1 #e2f0ee engine: 86% white mix
--rio-success #059669 (emerald) #48a030 (lime) engine: Case 4 rotation
--rio-success-bg #ECFDF5 #f1f8ef engine: contrast-aware soft_bg
--rio-warning-bg #FFFBEB #fef7f2 engine: contrast-aware soft_bg
--rio-danger-bg #FEF2F2 #fff0ee engine: contrast-aware soft_bg
--rio-info-bg #F0FDFA #ebf4f3 engine: tracks accent-soft

Why --rio-success rotated

The biggest visible change. The previous emerald #059669 was deliberately chosen to sit next to the teal brand — the v0.16.0 "clinical SaaS" design favored a green family that visually rhymed with brand. The engine's Case 4 takes a different stance: when the brand hue falls inside a state's collision zone (between MIN_HUE_GAP/2 = 22.5° and MIN_HUE_GAP = 45°), rotate the state away — bounded by MAX_STATE_ROTATION = 30° so both colors stay in their conventional bands.

For teal brand #0d9488 and the success anchor #16a34a, that rotation lands at #48a030 — still a green, perceptually distinct from teal.

Unchanged

  • Slate scaffold stays brand-agnostic: --rio-surface*, --rio-text-strong/text/muted/subtle, --rio-border-soft/strong, --rio-surface-chrome, --rio-warning, --rio-danger. A brand swap will not move the operator chrome.
  • WCAG: all 18 realistic text-on-surface pairings still clear AA (full parity with the prior hand-tuned palette).

Removed

The ~100-line design-rationale comment block in the previous colors.css (v0.16.0 clinical-SaaS overhaul notes). The rationale is preserved in git history and in docs/design/DESIGN_DOCTRINE.md; per-case logic lives in crates/rio-theme/src/.

Migration

  • Projects that override --rio-* tokens in their own stylesheet: no change, overrides still cascade.
  • Projects that depended on specific token values (e.g. expecting --rio-success to be exactly #059669): regenerate with their preferred brand, or hand-edit colors.css — remember the engine will overwrite hand edits if rerun.

Compatibility

  • Library, macros, CLI public surface: unchanged.
  • MSRV: 1.88 (unchanged).
  • Drop-in upgrade from 0.17.x with one visible palette shift.
Assets 2
Loading