@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 |

License

MIT