diff --git a/CLAUDE.md b/CLAUDE.md
index 1c1c4ea..4013788 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,11 +2,14 @@
## Project Overview
-Monorepo for the Dangerous Things design system. Three npm packages publish under `@dangerousthings/*`:
+Monorepo for the Dangerous Things design system. Six npm packages publish under `@dangerousthings/*`:
- **tokens** — canonical design tokens in TypeScript, compiled to JS and auto-generated as CSS custom properties
-- **web** — CSS themes (bevels, glows, forms) consumed by web apps
+- **web** — CSS themes (bevels, forms, animations) consumed by web apps
+- **react** — React web components wrapping web CSS
- **react-native** — React Native components built on React Native Paper
+- **tailwind-preset** — Tailwind CSS v3 preset mapping DT tokens
+- **hex-background** — 3D hexagon grid background (Three.js)
Two brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / magenta).
@@ -16,7 +19,7 @@ Two brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / ma
- Build everything: `npm run build`
- Typecheck everything: `npm run typecheck`
- Tokens build: `tsc` then `node dist/scripts/generate-css.js`
-- Web build: `node scripts/build.js` (copies CSS, assembles brand token CSS, copies fonts)
+- Web build: `node scripts/build.cjs` (copies CSS, assembles brand token CSS, copies fonts)
- React Native build: `tsc`
- Versioning: Changesets (`npx changeset`, `npm run version-packages`, `npm run release`)
@@ -28,20 +31,22 @@ Two brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / ma
## Feature Parity
-When adding or modifying a design token, component, or visual behavior, keep all three layers in sync:
+When adding or modifying a design token, component, or visual behavior, keep all four layers in sync:
1. **Tokens** — add/update the value in every brand file (`packages/tokens/src/brands/{dt,classic}.ts`) and in the shared type (`packages/tokens/src/types.ts`).
2. **Web** — if the token maps to a CSS component, update the relevant CSS file under `packages/web/src/components/`. Ensure the CSS custom property name matches the token path (e.g., `--dt-color-brand-primary`).
-3. **React Native** — update the corresponding component(s) under `packages/react-native/src/components/` and ensure the theme provider maps the new token.
+3. **React** — if there is a React web component wrapper, update or create the corresponding component in `packages/react/src/components/`.
+4. **React Native** — update the corresponding component(s) under `packages/react-native/src/components/` and ensure the theme provider maps the new token.
### Parity Checklist (use before closing any PR)
-- [ ] New tokens exist in all three brand files with correct values
+- [ ] New tokens exist in all brand files with correct values
- [ ] Token types are updated if the shape of the token object changed
- [ ] CSS generation script produces the expected custom properties (`npm run build:tokens` then inspect `dist/css/`)
- [ ] Web CSS files reference the new/changed custom properties
+- [ ] React web components are updated if applicable
- [ ] React Native components consume the new tokens via the theme
-- [ ] All three packages build cleanly (`npm run build`)
+- [ ] All packages build cleanly (`npm run build`)
- [ ] TypeScript typechecks pass (`npm run typecheck`)
## Testing
@@ -65,10 +70,10 @@ When adding or modifying a design token, component, or visual behavior, keep all
### Adding a New Component
-1. Create the React Native component in `packages/react-native/src/components/DTFoo.tsx`.
-2. Re-export it from `packages/react-native/src/index.ts`.
-3. If it needs new tokens, add them to all brand files and types first.
-4. If there is a web equivalent (CSS-only), add a CSS file in `packages/web/src/components/`.
+1. If it needs new tokens, add them to all brand files and types first.
+2. If there is a web equivalent, add a CSS file in `packages/web/src/components/`.
+3. Create a React web component wrapper in `packages/react/src/components/DTFoo.tsx` and re-export from `packages/react/src/index.ts`.
+4. Create the React Native component in `packages/react-native/src/components/DTFoo.tsx` and re-export from `packages/react-native/src/index.ts`.
5. Create a changeset: `npx changeset` — select affected packages and describe the change.
### Adding a New Brand
@@ -99,19 +104,28 @@ GitHub Actions runs on push to `main` and on PRs:
- React Native components are prefixed `DT` (e.g., `DTButton`).
- Keep files focused — one component per file, one brand per file.
-## Storefront Component Migration — Features to Extend
+## Storefront Component Migration — Implementation Reference
-The DT Shopify Storefront (`dt-shopify-storefront`) is the genesis project for this design system. Several
-storefront features are not yet represented in the design system and need to be baked in. This section
-documents everything that must be supported before the storefront can fully adopt design system components.
+The DT Shopify Storefront (`dt-shopify-storefront`) is the genesis project for this design system.
+The storefront features documented below have been migrated into the design system. This section
+serves as a reference for the implemented components and their locations.
-### Card Color Modes (per-card `--mode`)
+### Implemented Features
-The storefront assigns each card a color mode that controls border, header background, glow, and accent colors.
-The design system's current `.card` component only uses `--color-primary` (always cyan). Cards must support
-per-instance mode overrides.
+| Feature | CSS (web) | React Component | Notes |
+|---|---|---|---|
+| Card Color Modes | `.mode-normal`, `.mode-emphasis`, `.mode-warning`, `.mode-success`, `.mode-other` in `bevels.css` | `DTCard` | Five modes with `*-selected` variants at 70% opacity |
+| Card Progress Bar | `.dt-card-progress` in `bevels.css` | `DTCard` (`progress` prop) | Vertical left-edge bar, 0-100%, fills on hover |
+| Card Chip Badges | `.dt-badge-overlay` in `bevels.css` | `DTBadgeOverlay` | Positioned bottom-right, mode-color-aware |
+| Card Hover/Selected | `.card.selected` and hover states in `bevels.css` | `DTCard` | Fills with `var(--dt-card-color-selected)` |
+| Staggered Container | `.dt-stagger-container` in `animations.css` | `DTStaggerContainer` | CSS `nth-child` staggered `animation-delay` |
+| Animation Library | `animations.css` | -- | `dt-scale-in`, `dt-fade-in`, `dt-slide-up`, `dt-pulse`, `dt-ping`, `dt-spin`, transition utilities |
+| Filter System UI | `.dt-menu-item`, `.dt-filter-header`, `.dt-filter-overlay` in `forms-dt.css` | `DTMenu`, `DTMobileFilterOverlay` | Nested menus, filter accordions, mobile overlay |
+| Feature Legend | `feature-legend.css` | `DTFeatureLegend` | Icon grid with rotated labels, mode-colored header, feature states |
+| Theme Branching | `[data-brand="dt"]` / `[data-brand="classic"]` CSS scoping | -- | No JS conditionals needed; CSS handles visual differences |
+| Scrollbar Styling | `scrollbar.css` (`.dt-scrollbar`) | -- | Thin scrollbar with mode-normal color |
-**Five modes (tokens already exist, need component support):**
+**Card color modes reference:**
| Mode | Token | Default (DT dark) | Use Case |
|---|---|---|---|
@@ -121,144 +135,20 @@ per-instance mode overrides.
| `mode-success` | `--color-accent` | `#00FF00` green | Positive/success states |
| `mode-other` | `--color-other` | `#FF00FF` magenta | Bundles, alternative states |
-Each mode also has a `*-selected` variant at 70% opacity for hover/active states.
+**Theme branching differences (handled by CSS, not JS):**
-**Implementation pattern in storefront:**
-```css
-.mode-normal {
- --mode: var(--mode-normal);
- --accent-mode: var(--mode-emphasis);
- --selected: var(--mode-normal-selected);
-}
-.selected {
- background-color: var(--selected) !important;
- color: black !important;
-}
-```
-
-**Recommendation:** Add a `--dt-card-color` custom property that defaults to `--color-primary` and can be
-overridden per-card. All card sub-components (header bg, border, glow, progress bar) should reference this
-variable instead of `--color-primary` directly.
-
-### Card Progress Bar (thick left edge)
-
-Product cards have a vertical progress bar on the left edge that fills based on a percentage value.
-This does not exist in the design system.
-
-**Storefront implementation:**
-- CSS variable: `--card-thick-edge-width: 0.75em`
-- Class: `.progress` — left-side vertical bar inheriting the card's `--mode` color
-- Fill: Dynamic height (0-100%) controlled by `progress` prop
-- Hover: Fills to 100% on hover
-- States: `.progress-indicator` (semi-transparent), `.progress-indicator-1` (darker with bevel clip)
-
-**Recommendation:** Add an optional `.dt-card-progress` child element to the card component, driven by
-a `--dt-card-progress` custom property (0-100).
-
-### Card Chip Badges
-
-Product cards display contextual badges (e.g., "LAB", "BUNDLE") positioned absolute bottom-right of the
-image area, with background color matching the card's mode.
-
-**Recommendation:** The existing `.badge` component in `bevels.css` could be extended with positioning
-utilities (`.badge-overlay`, `.badge-bottom-right`) and mode-color-aware variants.
-
-### Card Hover / Selected State
-
-On hover, the storefront card fills with the mode's selected color and the progress bar fills to 100%.
-The entire card gets a `.selected` class. The design system's `.card:hover` only applies a `drop-shadow`
-but doesn't change fill color.
-
-**Recommendation:** Add `.card.selected` and `.card:hover` states that fill with `var(--dt-card-color-selected)`
-(defaulting to `rgba(var(--color-primary-rgb), 0.7)`).
-
-### Staggered Card Container (Sequential Loading Animation)
-
-The storefront animates product cards with staggered scale-in entrances — each card scales from 0 to 1 with
-an incrementing delay. This creates a sequential "loading" effect across the grid.
-
-**Current storefront pattern (per-card, using framer-motion):**
-```tsx
-
-```
-
-**Recommendation:** Create a `dt-stagger-container` component that automatically assigns staggered
-`animation-delay` values to its children. This should work with pure CSS (using `nth-child` or CSS
-custom properties) so consumers don't need a JS animation library. Example:
-
-```css
-.dt-stagger-container {
- --dt-stagger-duration: 0.33s;
- --dt-stagger-interval: 75ms;
-}
-.dt-stagger-container > * {
- animation: dt-scale-in var(--dt-stagger-duration) ease-in-out both;
-}
-.dt-stagger-container > :nth-child(1) { animation-delay: calc(0 * var(--dt-stagger-interval)); }
-.dt-stagger-container > :nth-child(2) { animation-delay: calc(1 * var(--dt-stagger-interval)); }
-/* ... up to a reasonable limit, or use @property for dynamic calculation */
-
-@keyframes dt-scale-in {
- from { transform: scale(0); }
- to { transform: scale(1); }
-}
-```
-
-### Animation Library
-
-The storefront uses several animation patterns that should be standardized in the design system:
-
-**Entrance animations:**
-- `dt-scale-in` — scale 0→1 (card entrance, staggered)
-- `dt-fade-in` — opacity 0→1
-- `dt-slide-up` — translateY(100%)→0 (mobile menus, modals)
-
-**Interactive animations:**
-- `dt-pulse` — opacity oscillation for hover glow (`2s cubic-bezier(0.4, 0, 0.6, 1) infinite`)
-- `dt-ping` — scale + fade-out ping effect (used on active filter indicators)
-- `dt-spin` — 360deg rotation (loading spinners)
-
-**Transition utilities:**
-- `dt-accordion-expand` — max-height 0→auto with 250ms ease-in-out
-- `dt-chevron-rotate` — 180deg rotation for expand/collapse indicators
-- `dt-progress-fill` — height transition for progress bars
-
-**Recommendation:** Add `packages/web/src/components/animations.css` with `@keyframes` definitions
-and utility classes. These should be brand-independent (no color references in animations).
-
-### Filter System UI
-
-The storefront's filter system includes several components that are not in the design system:
-
-**NestedMenu:** Hierarchical filter navigation with recursive submenus.
-- Level 0: Large icons (4xl) with vertical rotated labels below
-- Level 1+: `.menu-item-clipped` buttons with bevel clip-path and thick top border
-- Submenus: Portal-rendered, absolute positioned, hover-activated with 120ms close delay
-- Selected state: `mode-emphasis` color, `menu-item-clipped-selected` class
-
-**FilterAccordion:** Expandable filter panel with nested levels.
-- Thick top border (5px in cyberpunk, 1px in clean)
-- Active state: border and text color switch to `--mode-emphasis`
-- Indent per level: `paddingLeft: (level + 1) * 16px`
-- Chevron: MdExpandMore with 180deg rotation on expand
-
-**MobileFilterMenu:** Full-screen overlay with spring animation.
-- Backdrop: `rgba(0,0,0,0.5)` with blur(4px)
-- Slide-up animation: `y: 100%` → `y: 0`
-- Active filter count badge in header
-- "Clear All Filters" button when filters are active
-
-**Recommendation:** These are complex interactive components. Start with CSS patterns
-(`.dt-menu-item`, `.dt-filter-header`) and leave JS behavior to consumers.
+| Aspect | Cyberpunk (`data-brand="dt"`) | Clean (`data-brand="classic"`) |
+|---|---|---|
+| Clip-paths | Heavy bevels | `border-radius: 0.75rem` |
+| Colors | Neon (#00FFFF, #FF00FF) | B&W or muted tones |
+| Hover effects | Pulse glow animations | None |
+| Typography | Tektur | system-ui sans-serif |
+| Text shadows | `0 0 8px var(--mode)` | None |
+| Borders | Thick neon (5px top) | Subtle 1px |
### Icon Set — Product Features & Filtering
-The storefront uses a specific set of icons from `react-icons` for product features and UI controls.
-These should be documented as the canonical icon set for the DT design system.
+Canonical icon set for the DT design system, sourced from `react-icons`.
**Product Feature Icons (react-icons/md — Material Design):**
@@ -271,7 +161,7 @@ These should be documented as the canonical icon set for the DT design system.
| Payment/NFC | `MdOutlineCreditCard` | react-icons/md |
| Smartphone Compat | `MdOutlinePhonelinkRing` | react-icons/md |
| Access Control | `MdOutlineVpnKey` | react-icons/md |
-| Temperature | `MdOutlineThermostat` | react-icons/md |
+| Sensors | `MdOutlineThermostat` | react-icons/md |
| NFC Sensing | `MdOutlineSensors` | react-icons/md |
| Fitness/Bio | `MdOutlineFitbit` | react-icons/md |
| Vibration | `MdOutlineVibration` | react-icons/md |
@@ -306,80 +196,6 @@ These should be documented as the canonical icon set for the DT design system.
**Icon display standard:** Feature icons render at 42px in the UseCaseLegend grid. UI icons at 1.5em.
Icons inherit color from their parent's `--mode` variable.
-**Recommendation:** The design system should document this icon set as the canonical reference.
-Consider bundling an icon sprite or re-exporting the specific react-icons subset as
-`@dangerousthings/icons` for consistency across projects.
-
-### Feature Legend Component
-
-The storefront has a specialized `UseCaseLegend` component that displays product features in a
-grid with icons, rotated labels, and a hover-driven detail header. This is a key product page
-component that should be represented in the design system.
-
-**Structure:**
-- **Header bar:** Full-width, mode-colored background, shows chip name + hovered feature details
-- **Icon grid:** 5-column flex layout with icons + vertical rotated labels
-- **Labels:** `writing-mode: vertical-rl` + `transform: rotate(180deg)`, 0.85rem, font-weight 600
-- **Feature states:** Supported (mode-normal/cyan), disabled (mode-other/magenta), unsupported (mode-warning/red)
-
-**Color assignment in the legend uses hardcoded hex values** in `app/lib/cyberTheme.ts` — these
-need to be migrated to use CSS variables. This is a known pre-existing issue in the storefront.
-
-### Theme Branching Pattern
-
-Many storefront components have two rendering paths: cyberpunk and clean. The design system should
-support this via the two-axis theme system (`data-brand` + `data-theme`) so that components
-automatically adapt without conditional JS logic.
-
-**Key differences between branches:**
-
-| Aspect | Cyberpunk (DT brand) | Clean |
-|---|---|---|
-| Clip-paths | Heavy bevels | `border-radius: 0.75rem` |
-| Colors | Neon (#00FFFF, #FF00FF) | B&W or muted tones |
-| Hover effects | Pulse glow animations | None |
-| Typography | Tektur | system-ui sans-serif |
-| Text shadows | `0 0 8px var(--mode)` | None |
-| Borders | Thick neon (5px top) | Subtle 1px |
-
-**Recommendation:** The clean theme should be a brand variant (e.g., `data-brand="classic"`) that
-nullifies bevels, glows, and animations via CSS. Components should not need JS `if (isClean)` branches
-if the design system CSS handles the visual differences.
-
-### Scrollbar Styling
-
-The storefront styles scrollbars in cyberpunk mode:
-```css
-scrollbar-width: thin;
-scrollbar-color: var(--mode-normal) transparent;
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-thumb { background: var(--mode-normal); border-radius: 3px; }
-```
-
-**Recommendation:** Add to design system as a utility: `.dt-scrollbar` or scope under `[data-brand="dt"]`.
-
## Known Issues
-### Link hover glow ignores per-element mode colors (glows.css)
-
-`packages/web/dist/components/glows.css` line 37-38 applies a blanket link hover glow:
-
-```css
-[data-brand="dt"] a:hover {
- text-shadow: 0 0 8px var(--color-primary);
-}
-```
-
-`--color-primary` is always the brand's primary color (cyan for DT). This means **every** link glows cyan on hover, even inside elements that define their own mode color (e.g., a product card with `--mode: var(--mode-warning)` still gets a cyan glow instead of red).
-
-**Workaround (dt-shopify-storefront):** The storefront overrides this with a higher-specificity rule:
-```css
-[data-brand="dt"] .card-container a:hover {
- text-shadow: 0 0 8px var(--mode);
-}
-```
-
-**Proper fix:** The link glow rule should respect a local color variable. Options:
-1. Use `currentColor` instead of `var(--color-primary)` — glows whatever color the text already is
-2. Introduce a `--glow-color` custom property defaulting to `--color-primary`, which components can override locally
-3. Scope the rule more narrowly so it doesn't apply inside component containers that define their own color context
+(none currently)
diff --git a/README.md b/README.md
index 6fca671..cfc18d9 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,10 @@ Shared design tokens, web CSS, and React Native components for the Dangerous Thi
| Package | Description |
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| [`@dangerousthings/tokens`](packages/tokens) | Canonical design tokens (colors, typography, shape) defined in TypeScript and exported as CSS custom properties |
-| [`@dangerousthings/web`](packages/web) | Web CSS themes — bevels, glows, animations, forms, and filter styles |
+| [`@dangerousthings/web`](packages/web) | Web CSS themes — bevels, animations, forms, and component styles |
+| [`@dangerousthings/react`](packages/react) | React web components wrapping @dangerousthings/web CSS |
| [`@dangerousthings/react-native`](packages/react-native) | React Native components built on React Native Paper |
+| [`@dangerousthings/tailwind-preset`](packages/tailwind-preset) | Tailwind CSS v3 preset mapping DT tokens to Tailwind theme |
| [`@dangerousthings/hex-background`](packages/hex-background) | 3D hexagon grid background using Three.js + React Three Fiber (web and React Native) |
## Brand Themes
@@ -50,6 +52,25 @@ npm run build:react-native
@import "@dangerousthings/web/components/bevels.css";
```
+### React (Web)
+
+```tsx
+import "@dangerousthings/web";
+import { DTWebThemeProvider, DTButton, DTCard } from "@dangerousthings/react";
+
+export default function App() {
+ return (
+
+
+
+ Scan NFC
+
+
+
+ );
+}
+```
+
### React Native
```tsx
@@ -76,6 +97,17 @@ import { dt } from "@dangerousthings/tokens/brands/dt";
console.log(dt.color.brand.primary); // "#00ffff"
```
+### Tailwind
+
+```js
+// tailwind.config.js
+import dtPreset from "@dangerousthings/tailwind-preset";
+export default {
+ presets: [dtPreset],
+ content: ["./src/**/*.{tsx,ts,html}"],
+};
+```
+
## Development
### Scripts
@@ -85,7 +117,6 @@ console.log(dt.color.brand.primary); // "#00ffff"
| `npm run build` | Build all packages (Turbo) |
| `npm run clean` | Remove all `dist/` directories |
| `npm run typecheck` | Run TypeScript type checking |
-| `npm run lint` | Lint all packages |
### Release
@@ -97,6 +128,12 @@ npm run version-packages # bump versions from pending changesets
npm run release # build + publish to npm
```
+## React Web Components
+
+The `@dangerousthings/react` package provides React web components that wrap the CSS from `@dangerousthings/web`. The component API mirrors the React Native package for consistency:
+
+DTAccordion, DTBadgeOverlay, DTButton, DTCard, DTCheckbox, DTChip, DTDrawer, DTFeatureLegend, DTGallery, DTHexagon, DTLabel, DTMediaFrame, DTMenu, DTMobileFilterOverlay, DTModal, DTProgressBar, DTQuantityStepper, DTRadioGroup, DTSearchInput, DTStaggerContainer, DTSwitch, DTTextInput
+
## React Native Components
DTAccordion, DTBadgeOverlay, DTButton, DTCard, DTCheckbox, DTChip, DTDrawer, DTFeatureLegend, DTGallery, DTHexagon, DTLabel, DTMediaFrame, DTMenu, DTMobileFilterOverlay, DTModal, DTProgressBar, DTQuantityStepper, DTRadioGroup, DTSearchInput, DTStaggerContainer, DTSwitch, DTTextInput
@@ -106,7 +143,6 @@ DTAccordion, DTBadgeOverlay, DTButton, DTCard, DTCheckbox, DTChip, DTDrawer, DTF
## Web CSS Modules
- `bevels.css` — angular clip-path bevels, card modes, selected states, progress bars, badge overlays, interactive bevel buttons
-- `glows.css` — neon drop-shadow and text-shadow effects (mode-aware)
- `forms-dt.css` — text inputs, checkboxes, radio buttons, switches, menu items, filter headers
- `animations.css` — entrance animations, stagger containers, transition utilities
- `scrollbar.css` — thin neon scrollbar styling
@@ -119,7 +155,9 @@ dt-design-system/
├── packages/
│ ├── tokens/ # Design token definitions + CSS generation
│ ├── web/ # CSS themes and components
+│ ├── react/ # React web components
│ ├── react-native/ # React Native Paper components
+│ ├── tailwind-preset/ # Tailwind CSS v3 preset
│ ├── hex-background/ # 3D hexagon grid (Three.js)
│ └── showcase/ # Demo apps (desktop + mobile)
├── turbo.json # Turbo pipeline config
diff --git a/packages/hex-background/README.md b/packages/hex-background/README.md
index 57b536c..49a5154 100644
--- a/packages/hex-background/README.md
+++ b/packages/hex-background/README.md
@@ -77,7 +77,7 @@ function Background() {
## Monorepo
-Part of the [DT Design System](https://github.com/nicholasgriffintn/dt-design-system) monorepo.
+Part of the [DT Design System](https://github.com/dangerous-tac0s/dt-design-system) monorepo.
## License
diff --git a/packages/react/README.md b/packages/react/README.md
index 0a2b670..4c7e367 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -124,7 +124,7 @@ variantToClassName("warning"); // token-level variant mapping
## Monorepo
-Part of the [DT Design System](https://github.com/nicholasgriffintn/dt-design-system) monorepo.
+Part of the [DT Design System](https://github.com/dangerous-tac0s/dt-design-system) monorepo.
## License
diff --git a/packages/tailwind-preset/README.md b/packages/tailwind-preset/README.md
index 6df0541..c4f24fe 100644
--- a/packages/tailwind-preset/README.md
+++ b/packages/tailwind-preset/README.md
@@ -102,7 +102,7 @@ Because the preset uses `var()` references, switching brands at runtime requires
## Monorepo
-Part of the [DT Design System](https://github.com/nicholasgriffintn/dt-design-system) monorepo.
+Part of the [DT Design System](https://github.com/dangerous-tac0s/dt-design-system) monorepo.
## License
diff --git a/packages/web/README.md b/packages/web/README.md
index fec301a..cdc6e5d 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -1,6 +1,6 @@
# @dangerousthings/web
-Web CSS themes and components for the Dangerous Things design system — bevels, glows, and form styles powered by CSS custom properties.
+Web CSS themes and components for the Dangerous Things design system — bevels, animations, and form styles powered by CSS custom properties.
## Install
@@ -24,7 +24,6 @@ Or import individual pieces:
/* Individual components */
@import "@dangerousthings/web/components/bevels.css";
-@import "@dangerousthings/web/components/glows.css";
@import "@dangerousthings/web/components/forms-dt.css";
```
@@ -53,7 +52,6 @@ import { themes, brands } from "@dangerousthings/web/theme-registry";
| 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"]` |
@@ -67,8 +65,6 @@ import { themes, brands } from "@dangerousthings/web/theme-registry";
**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`