michaelandClaude Fable 5.1
ed1d3c060b
Release / publish (push) Canceled after 0s
Migrates the storefront's colourblind palettes into tokens, generated as [data-cb] CSS blocks (dark mode only) for both brands. The storefront's ΔE / contrast check now runs in the tokens build and fails on a bad palette; it caught the deuteranopia error orange at 4.4:1 on classic's navy, so that value is now #c86000. Animation speed rides along: animations.css scales durations by --motion-scale, and both data-motion="0" and the classic brand bypass animation outright. Brand tokens carry an `animations` flag so React Native forces motion to 0 for classic too. DTWebThemeProvider and DTThemeProvider take colorVision and motionScale; buildThemeFromBrand moves into the react-native package from the showcase. DTSettingsPanel (react and react-native) renders theme, animation speed and colour vision as controlled sections. Changesets: onlyUpdatePeerDependentsWhenOutOfRange, so a minor on tokens no longer majors react through its `*` peer range. Versions bumped: tokens 0.4.0, web 0.6.0, react 2.2.0, react-native 0.5.0. Design: docs/plans/2026-09-12-color-vision-and-settings-design.md Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@dangerousthings/tokens
Canonical design tokens for the Dangerous Things design system — colors, typography, and shape values defined in TypeScript and exported as CSS custom properties.
Install
npm install @dangerousthings/tokens
Brands
Two brand themes are included:
| Brand | Description |
|---|---|
| dt | Neon cyberpunk — Tektur font, beveled corners, cyan/yellow/magenta palette |
| classic | Dark navy with magenta accents, standard border radius |
Each brand provides dark and light mode values.
Usage
TypeScript / JavaScript
import { dt } from "@dangerousthings/tokens/brands/dt";
console.log(dt.color.dark.primary); // "#00ffff"
console.log(dt.typography.heading); // "Tektur Variable"
console.log(dt.shape.bevelMd); // "2rem"
Import all brands at once:
import { brands } from "@dangerousthings/tokens";
Object.keys(brands); // ["dt", "classic"]
Types
import type { BrandTokens, ColorTokens, ThemeBrand } from "@dangerousthings/tokens";
CSS Custom Properties
Generated CSS files are available per brand:
@import "@dangerousthings/tokens/css/dt.css";
This provides custom properties like --color-primary, --color-primary-rgb, --font-heading, --bevel-md, etc.
Exports
| Path | Description |
|---|---|
@dangerousthings/tokens |
All brands, theme definitions, and types |
@dangerousthings/tokens/brands/dt |
DT brand tokens |
@dangerousthings/tokens/brands/classic |
Classic brand tokens |
@dangerousthings/tokens/css/dt.css |
DT CSS custom properties |
@dangerousthings/tokens/css/classic.css |
Classic CSS custom properties |
Token Categories
- Color — background, surface, text, brand primary/secondary/accent, semantic (success, warning, error, info)
- Typography — heading, body, and mono font families
- Shape — bevel sizes (sm/md/lg) and border radius (sm/md/lg)