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/react
React web components for the Dangerous Things design system — 20 themed components wrapping @dangerousthings/web CSS with React APIs matching @dangerousthings/react-native for cross-platform parity.
Install
npm install @dangerousthings/react
Peer Dependencies
npm install react react-dom @dangerousthings/tokens @dangerousthings/web
Setup
Wrap your app with DTWebThemeProvider and import the web CSS bundle:
import "@dangerousthings/web";
import { DTWebThemeProvider } from "@dangerousthings/react";
export default function App() {
return (
<DTWebThemeProvider brand="dt" theme="dark">
{/* your app */}
</DTWebThemeProvider>
);
}
The provider sets data-brand and data-theme attributes on a wrapper div and exposes brand/theme via React context.
Components
Bevel & Layout
| Component | Description |
|---|---|
DTCard |
Beveled card with header, progress bar, and mode colors |
DTButton |
Beveled button with variant colors |
DTLabel |
Top-right beveled label with status colors |
DTChip |
Compact labeled element |
DTMediaFrame |
Diagonal beveled frame for images |
DTModal |
Modal dialog with beveled corners |
DTDrawer |
Side drawer with edge bevels |
DTHexagon |
Decorative hexagon SVG shape |
Forms
| Component | Description |
|---|---|
DTTextInput |
Sharp-cornered input with focus glow |
DTCheckbox |
Beveled checkbox with opposing corner cuts |
DTSwitch |
Angular toggle switch |
DTRadioGroup |
Hexagonal radio buttons |
DTQuantityStepper |
Beveled +/- increment buttons |
DTSearchInput |
Search-styled text input |
Layout & Animation
| Component | Description |
|---|---|
DTProgressBar |
Angular progress bar with optional label |
DTAccordion |
Collapsible sections with accent border |
DTStaggerContainer |
Staggered scale-in entrance animation for children |
DTBadgeOverlay |
Absolute-positioned badge wrapper |
Filter & Feature
| Component | Description |
|---|---|
DTMenu |
Dropdown menu with item variants |
DTFeatureLegend |
Product feature grid with icons and rotated labels |
DTMobileFilterOverlay |
Full-screen slide-up filter overlay with backdrop |
DTGallery |
Image gallery |
Animation Hooks
| Hook | Description |
|---|---|
useScaleIn |
Scale 0 to 1 entrance animation |
usePulse |
Looping opacity pulse animation |
Usage Examples
import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react";
// Button with variant
<DTButton variant="normal" onClick={handleClick}>
Scan NFC
</DTButton>
// Card with title and progress bar
<DTCard title="PRODUCT" variant="emphasis" progress={60}>
<p>60% progress</p>
</DTCard>
// Text input
<DTTextInput variant="normal" label="Username" />
Theme Utilities
import { useDTWebTheme } from "@dangerousthings/react";
const { brand, theme } = useDTWebTheme();
// brand: "dt" | "classic"
// theme: "dark" | "light"
Variant Utilities
import { getVariantClass, variantToClassName } from "@dangerousthings/react";
getVariantClass("emphasis"); // mode class name for CSS
variantToClassName("warning"); // token-level variant mapping
Monorepo
Part of the DT Design System monorepo.