bee19cb71f
Each published package now includes its own README (shown on npm) and a copy of the MIT license so both travel with the tarball. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dangerousthings/web
Web CSS themes and components for the Dangerous Things design system — bevels, glows, form styles, and elevation patterns powered by CSS custom properties.
Install
npm install @dangerousthings/web
Usage
Import the full bundle (base tokens + all components):
@import "@dangerousthings/web";
Or import individual pieces:
/* Brand tokens */
@import "@dangerousthings/web/tokens/dt.css";
/* Individual components */
@import "@dangerousthings/web/components/bevels.css";
@import "@dangerousthings/web/components/glows.css";
@import "@dangerousthings/web/components/forms-dt.css";
@import "@dangerousthings/web/components/elevation.css";
Switching Brands
Swap the token import to change the entire look:
/* Neon cyberpunk */
@import "@dangerousthings/web/tokens/dt.css";
/* Dark navy + magenta */
@import "@dangerousthings/web/tokens/classic.css";
/* Material Design 3 */
@import "@dangerousthings/web/tokens/supra.css";
Theme Registry (JS)
For runtime theme switching:
import { themes, brands } from "@dangerousthings/web/theme-registry";
CSS Modules
| File | Description |
|---|---|
bevels.css |
Angular clip-path bevels for cards, buttons, labels, modals, drawers |
glows.css |
Neon drop-shadow and text-shadow effects for clipped and standard elements |
forms-dt.css |
Text inputs, checkboxes, switches, radio buttons, progress bars, accordions, quantity steppers |
elevation.css |
Shadow elevation levels for the Supra / MD3 brand |
Key Classes
Bevels — .dt-bevel-card, .dt-bevel-btn, .dt-bevel-label, .dt-bevel-modal, .dt-bevel-drawer-left, .dt-bevel-drawer-right, .dt-bevel-sm
Glows — .dt-glow, .dt-glow-strong, .dt-glow-inset, .dt-text-glow
Elevation — .supra-elevation-1 through .supra-elevation-5
Exports
| Path | Description |
|---|---|
@dangerousthings/web |
Full CSS bundle (base + all components) |
@dangerousthings/web/tokens/* |
Per-brand CSS custom properties |
@dangerousthings/web/components/* |
Individual CSS component modules |
@dangerousthings/web/fonts/* |
Tektur font files |
@dangerousthings/web/theme-registry |
JS theme definitions for runtime switching |