From 5d2b245f5a07fb95f8537a00cc982ae9a08510c8 Mon Sep 17 00:00:00 2001 From: michael Date: Sun, 8 Mar 2026 10:04:41 -0700 Subject: [PATCH] Update docs to reflect current 6-package architecture - README: add all 6 packages, React/Tailwind usage sections, remove glows refs - CLAUDE.md: rewrite for 6 packages, 4-layer parity, build.cjs, storefront migration as implemented reference - Package READMEs: fix monorepo links, remove glows references Co-Authored-By: Claude Opus 4.6 --- CLAUDE.md | 276 +++++------------------------ README.md | 44 ++++- packages/hex-background/README.md | 2 +- packages/react/README.md | 2 +- packages/tailwind-preset/README.md | 2 +- packages/web/README.md | 6 +- 6 files changed, 91 insertions(+), 241 deletions(-) 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`