e74c285b70
Major feature migration from dt-shopify-storefront into the design system: - Card system: per-card color modes (normal/emphasis/warning/success/other), progress bars, full-bleed card body (card-body-flush), image bevel clip-paths, and visible structural borders at bevel corners - Badge system: dt-card-badge with position-aware offsets for cards vs media frames - Media frames: dt-bevel-media with inner surface fill, image clipping, and "MISSING MEDIA" placeholder for empty containers - Interactive bevel buttons: dt-btn with hover/selected states and pulse animation - Menu items: dt-menu-item with active states and level indentation - Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes - Feature legend: CSS grid for product feature icons with state colors - Scrollbar styling for DT brand - New @dangerousthings/react package wrapping web CSS components - New @dangerousthings/tailwind-preset package - New @dangerousthings/hex-background package - Desktop showcase rewritten in React with Tailwind CSS - Mobile showcase updated with new screens (animations, filters, advanced cards) - Tokens: added mode color tokens, RGB variants, and selected-state tokens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3.0 KiB
@dangerousthings/web
Web CSS themes and components for the Dangerous Things design system — bevels, glows, and form styles 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";
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";
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. Card color modes, selected states, progress bars, badge overlays, interactive bevel buttons |
glows.css |
Neon drop-shadow and text-shadow effects — mode-aware via --dt-glow-color |
forms-dt.css |
Text inputs, checkboxes, switches, radio buttons, progress bars, accordions, steppers, menu items, filter headers, filter overlays |
animations.css |
Entrance animations (scale-in, fade-in, slide-up), interactive animations (pulse, ping, spin), stagger container, transition utilities |
scrollbar.css |
Thin neon scrollbar styling scoped under [data-brand="dt"] |
feature-legend.css |
Product feature grid with icons and rotated labels, state-based coloring |
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
Card Modes — .mode-normal, .mode-emphasis, .mode-warning, .mode-success, .mode-other, .card.selected, .dt-card-progress, .dt-badge-overlay
Interactive Buttons — .dt-btn (outlined rectangle, bevels on hover/select)
Glows — .dt-glow, .dt-glow-strong, .dt-glow-inset, .dt-text-glow
Animations — .dt-animate-scale-in, .dt-animate-fade-in, .dt-animate-slide-up, .dt-animate-pulse, .dt-animate-ping, .dt-animate-spin, .dt-stagger-container
Scrollbar — .dt-scrollbar, .dt-scrollbar-mode
Filters — .dt-menu-item, .dt-filter-header, .dt-filter-overlay
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 |