Remove supra brand from design system

Supra (VivoKey MD3 theme) has been extracted into a standalone Dangerous-Pi theme plugin. Remove all supra references from tokens, web CSS, showcase apps, and documentation. - Delete supra brand tokens and elevation.css - Update ThemeBrand type to "dt" | "classic" - Remove supra from CSS generation, imports, and bevels - Update CLAUDE.md and package READMEs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 10:36:04 -08:00
parent da84736b4b
commit baf8cd3b2a
11 changed files with 308 additions and 197 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -5,10 +5,10 @@
 Monorepo for the Dangerous Things design system. Three 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, elevation, forms) consumed by web apps
+- **web** — CSS themes (bevels, glows, forms) consumed by web apps
 - **react-native** — React Native components built on React Native Paper

-Three brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / magenta), **supra** (MD3 / blue).
+Two brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / magenta).

 ## Build & Tooling

@@ -30,7 +30,7 @@ Three brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy /

 When adding or modifying a design token, component, or visual behavior, keep all three layers in sync:

-1. **Tokens** — add/update the value in every brand file (`packages/tokens/src/brands/{dt,classic,supra}.ts`) and in the shared type (`packages/tokens/src/types.ts`).
+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.

@@ -98,3 +98,288 @@ GitHub Actions runs on push to `main` and on PRs:
 - CSS uses BEM-ish class names prefixed with `dt-` (e.g., `.dt-bevel-card`).
 - 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
+
+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.
+
+### Card Color Modes (per-card `--mode`)
+
+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.
+
+**Five modes (tokens already exist, need component support):**
+
+| Mode | Token | Default (DT dark) | Use Case |
+|---|---|---|---|
+| `mode-normal` | `--color-primary` | `#00FFFF` cyan | Default product cards |
+| `mode-emphasis` | `--color-secondary` | `#FFFF00` yellow | Highlighted/selected states |
+| `mode-warning` | `--color-error` | `#FF0000` red | Lab products, warnings |
+| `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.
+
+**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
+<motion.div
+  initial={{scale: 0}}
+  animate={{scale: 1}}
+  transition={{ ease: 'easeInOut', duration: 0.33, delay: index * 0.075 }}
+/>
+```
+
+**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.
+
+### 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.
+
+**Product Feature Icons (react-icons/md — Material Design):**
+
+| Feature | Icon | Package |
+|---|---|---|
+| Illumination | `MdLightbulbOutline` | react-icons/md |
+| Visibility/Glow | `MdOutlineVisibility` | react-icons/md |
+| Data Sharing | `MdOutlineMobileScreenShare` | react-icons/md |
+| UID Cloning/Magic | `MdOutlineCopyAll` | react-icons/md |
+| Payment/NFC | `MdOutlineCreditCard` | react-icons/md |
+| Smartphone Compat | `MdOutlinePhonelinkRing` | react-icons/md |
+| Access Control | `MdOutlineVpnKey` | react-icons/md |
+| Temperature | `MdOutlineThermostat` | react-icons/md |
+| NFC Sensing | `MdOutlineSensors` | react-icons/md |
+| Fitness/Bio | `MdOutlineFitbit` | react-icons/md |
+| Vibration | `MdOutlineVibration` | react-icons/md |
+| Exploration | `MdOutlineExplore` | react-icons/md |
+| Cryptography | `LuBinary` | react-icons/lu |
+| Digital Security | `FaUserShield` | react-icons/fa |
+| Temperature (alt) | `BsThermometerHalf` | react-icons/bs |
+
+**UI Control Icons:**
+
+| Control | Icon | Package |
+|---|---|---|
+| Filter toggle | `MdFilterList` | react-icons/md |
+| Expand/collapse | `MdExpandMore` | react-icons/md |
+| Close/dismiss | `MdClose` | react-icons/md |
+| Dropdown arrow | `MdOutlineKeyboardArrowDown` | react-icons/md |
+| No image placeholder | `MdOutlineHideImage` | react-icons/md |
+| More details | `CgMoreR` | react-icons/cg |
+| Loading spinner | `FaSpinner` | react-icons/fa6 |
+| Cart | `FaCartShopping` | react-icons/fa6 |
+| Add to cart | `FaCartPlus` | react-icons/fa6 |
+| Search | `FaMagnifyingGlass` | react-icons/fa6 |
+| Back | `FaArrowLeft` | react-icons/fa6 |
+| User (logged in) | `FaUser` | react-icons/fa6 |
+| User (logged out) | `FaUserSlash` | react-icons/fa6 |
+| Delete | `FaTrash` | react-icons/fa |
+
+**Custom SVG Icons (ThemeToggle.tsx):**
+- Sun icon (24x24) — switch to clean theme
+- Terminal/matrix icon (24x24) — switch to cyberpunk theme
+
+**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
--- a/packages/tokens/README.md
+++ b/packages/tokens/README.md
@@ -10,13 +10,12 @@ npm install @dangerousthings/tokens

 ## Brands

-Three brand themes are included:
+Two brand themes are included:

 | Brand | Description |
 |-------|-------------|
 | **dt** | Neon cyberpunk — Tektur font, beveled corners, cyan/yellow/magenta palette |
 | **classic** | Dark navy with magenta accents, standard border radius |
-| **supra** | Material Design 3 — VivoKey blue, rounded corners, elevation shadows |

 Each brand provides dark and light mode values.

@@ -37,7 +36,7 @@ Import all brands at once:
 ```ts
 import { brands } from "@dangerousthings/tokens";

-Object.keys(brands); // ["dt", "classic", "supra"]
+Object.keys(brands); // ["dt", "classic"]
 ```

 ### Types
@@ -63,10 +62,8 @@ This provides custom properties like `--color-primary`, `--color-primary-rgb`, `
 | `@dangerousthings/tokens` | All brands, theme definitions, and types |
 | `@dangerousthings/tokens/brands/dt` | DT brand tokens |
 | `@dangerousthings/tokens/brands/classic` | Classic brand tokens |
-| `@dangerousthings/tokens/brands/supra` | Supra brand tokens |
 | `@dangerousthings/tokens/css/dt.css` | DT CSS custom properties |
 | `@dangerousthings/tokens/css/classic.css` | Classic CSS custom properties |
-| `@dangerousthings/tokens/css/supra.css` | Supra CSS custom properties |

 ## Token Categories

--- a/packages/tokens/src/brands/supra.ts
+++ b/packages/tokens/src/brands/supra.ts
@@ -1,66 +0,0 @@
-import type { BrandTokens } from "../types.js";
-
-export const supra: BrandTokens = {
-  id: "supra",
-  name: "VivoKey Supra",
-  description: "Material Design 3 with VivoKey blue, rounded corners, elevation shadows",
-
-  dark: {
-    bg: "#000000",
-    surface: "#28292E",
-    surfaceHover: "#303136",
-    border: "#42667E",
-
-    textPrimary: "#ffffff",
-    textSecondary: "#e2e8f0",
-    textMuted: "#94a3b8",
-
-    primary: "#42667E",
-    primaryDim: "#385872",
-    secondary: "#8BAEC7",
-    accent: "#8BAEC7",
-    other: "#F67448",
-
-    success: "#8BB174",
-    warning: "#F67448",
-    error: "#ED4337",
-    info: "#42667E",
-  },
-
-  light: {
-    bg: "#ffffff",
-    surface: "#AFB8C2",
-    surfaceHover: "#C5CCD4",
-    border: "#000000",
-
-    textPrimary: "#000000",
-    textSecondary: "#374151",
-    textMuted: "#6b7280",
-
-    primary: "#000000",
-    primaryDim: "#1f2937",
-    secondary: "#F67448",
-    accent: "#FDFE1B",
-    other: "#F67448",
-
-    success: "#8BB174",
-    warning: "#F67448",
-    error: "#ED4337",
-    info: "#42667E",
-  },
-
-  typography: {
-    heading: "var(--font-sans)",
-    body: "var(--font-sans)",
-    mono: "'SF Mono', Monaco, 'Cascadia Code', monospace",
-  },
-
-  shape: {
-    bevelSm: "0px",
-    bevelMd: "0px",
-    bevelLg: "0px",
-    radiusSm: "0.5rem",
-    radius: "0.625rem",
-    radiusLg: "0.75rem",
-  },
-};
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -10,15 +10,13 @@ export type {

 export { dt } from "./brands/dt.js";
 export { classic } from "./brands/classic.js";
-export { supra } from "./brands/supra.js";

 import { dt } from "./brands/dt.js";
 import { classic } from "./brands/classic.js";
-import { supra } from "./brands/supra.js";
 import type { BrandTokens, ThemeDefinition } from "./types.js";

 /** All brand tokens keyed by id */
-export const brands: Record<string, BrandTokens> = { dt, classic, supra };
+export const brands: Record<string, BrandTokens> = { dt, classic };

 /** Theme registry for UI selectors */
 export const themes: ThemeDefinition[] = [
@@ -36,11 +34,4 @@ export const themes: ThemeDefinition[] = [
    supportsModes: ["dark", "light", "auto"],
    defaultMode: "dark",
  },
-  {
-    id: "supra",
-    name: supra.name,
-    description: supra.description,
-    supportsModes: ["dark", "light", "auto"],
-    defaultMode: "dark",
-  },
 ];
--- a/packages/tokens/src/scripts/generate-css.ts
+++ b/packages/tokens/src/scripts/generate-css.ts
@@ -9,7 +9,6 @@ import { fileURLToPath } from "node:url";
 import type { BrandTokens, ColorTokens } from "../types.js";
 import { dt } from "../brands/dt.js";
 import { classic } from "../brands/classic.js";
-import { supra } from "../brands/supra.js";

 const __dirname = dirname(fileURLToPath(import.meta.url));
 const outDir = join(__dirname, "..", "css");
@@ -119,7 +118,7 @@ function generateBrandCSS(brand: BrandTokens): string {
 // --- Main ---
 mkdirSync(outDir, { recursive: true });

-for (const brand of [dt, classic, supra]) {
+for (const brand of [dt, classic]) {
  const css = generateBrandCSS(brand);
  const path = join(outDir, `${brand.id}.css`);
  writeFileSync(path, css, "utf-8");
--- a/packages/tokens/src/types.ts
+++ b/packages/tokens/src/types.ts
@@ -1,5 +1,5 @@
 /** Brand identifiers */
-export type ThemeBrand = "dt" | "classic" | "supra";
+export type ThemeBrand = "dt" | "classic";

 /** Color mode */
 export type ThemeMode = "dark" | "light" | "auto";
--- 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, form styles, and elevation patterns powered by CSS custom properties.
+Web CSS themes and components for the Dangerous Things design system — bevels, glows, and form styles powered by CSS custom properties.

 ## Install

@@ -26,7 +26,6 @@ Or import individual pieces:
@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
@@ -39,9 +38,6 @@ Swap the token import to change the entire look:

 /* Dark navy + magenta */
@import "@dangerousthings/web/tokens/classic.css";
-
-/* Material Design 3 */
-@import "@dangerousthings/web/tokens/supra.css";
 ```

 ### Theme Registry (JS)
@@ -59,7 +55,6 @@ import { themes, brands } from "@dangerousthings/web/theme-registry";
 | `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

@@ -67,8 +62,6 @@ import { themes, brands } from "@dangerousthings/web/theme-registry";

 **Glows** — `.dt-glow`, `.dt-glow-strong`, `.dt-glow-inset`, `.dt-text-glow`

-**Elevation** — `.supra-elevation-1` through `.supra-elevation-5`
-
 ## Exports

 | Path | Description |
--- a/packages/web/src/base.css
+++ b/packages/web/src/base.css
@@ -24,7 +24,7 @@
  --radius: 0.5rem;
  --radius-lg: 0.75rem;

-  /* Bevel sizes — DT sets real values; Classic/Supra leave at 0 */
+  /* Bevel sizes — DT sets real values; Classic leaves at 0 */
  --bevel-sm: 0px;
  --bevel-md: 0px;
  --bevel-lg: 0px;
--- a/packages/web/src/components/bevels.css
+++ b/packages/web/src/components/bevels.css
@@ -126,7 +126,7 @@
 }

 [data-brand="dt"] .btn-secondary:hover::before {
-  background: rgba(var(--color-primary-rgb), 0.1);
+  background: var(--color-surface-hover);
 }

 /* ============================================================================
@@ -187,6 +187,18 @@
  --badge-fill: rgba(var(--color-info-rgb), 0.25);
 }

+/* ============================================================================
+   Badge text override for Classic — ensure readable text in light mode
+   Status-color text on 25% opacity backgrounds fails WCAG AA on light bg.
+   Use primary text color instead (same approach as DT badges above).
+   ============================================================================ */
+[data-brand="classic"] .badge-success,
+[data-brand="classic"] .badge-error,
+[data-brand="classic"] .badge-warning,
+[data-brand="classic"] .badge-info {
+  color: var(--color-text-primary);
+}
+
 /* ============================================================================
   Opt-in Bevel Utility Classes
   Use these for custom elements that need bevel shapes
--- a/packages/web/src/components/elevation.css
+++ b/packages/web/src/components/elevation.css
@@ -1,96 +0,0 @@
-/* dt-web-theme: Supra Elevation & MD3 Styles */
-/* Source: react-native-supra-theme/src/theme/paperTheme.ts */
-/* Rounded Material Design 3 aesthetic with elevation shadows */
-
-/* ============================================================================
-   Card Elevation
-   ============================================================================ */
-[data-brand="supra"] .card {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
-  border-radius: var(--radius-lg);
-}
-
-[data-brand="supra"] .card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
-}
-
-/* ============================================================================
-   Button — Dual-layer inset shadow (hardware button feel)
-   Source: SupraButton.tsx — inner shadow for tactile appearance
-   ============================================================================ */
-[data-brand="supra"] .btn-primary {
-  box-shadow:
-    inset -2px -2px 4px rgba(0, 0, 0, 0.18),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.25);
-  border-radius: var(--radius);
-}
-
-[data-brand="supra"] .btn-primary:hover {
-  box-shadow:
-    inset -2px -2px 6px rgba(0, 0, 0, 0.22),
-    inset 2px 2px 6px rgba(255, 255, 255, 0.3);
-  transform: translateY(-1px);
-}
-
-[data-brand="supra"] .btn-secondary {
-  border-radius: var(--radius);
-}
-
-[data-brand="supra"] .btn-danger {
-  border-radius: var(--radius);
-}
-
-/* ============================================================================
-   Badge — Rounded pill (MD3 chip style)
-   ============================================================================ */
-[data-brand="supra"] .badge {
-  border-radius: 8px;
-}
-
-/* ============================================================================
-   Input — Rounded with standard focus ring
-   ============================================================================ */
-[data-brand="supra"] .input,
-[data-brand="supra"] input,
-[data-brand="supra"] textarea,
-[data-brand="supra"] select {
-  border-radius: var(--radius);
-}
-
-[data-brand="supra"] .input:focus,
-[data-brand="supra"] input:focus,
-[data-brand="supra"] textarea:focus,
-[data-brand="supra"] select:focus {
-  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
-}
-
-/* ============================================================================
-   Terminal — Rounded with subtle elevation
-   ============================================================================ */
-[data-brand="supra"] .terminal {
-  border-radius: var(--radius);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
-}
-
-/* ============================================================================
-   Elevation Utility Classes
-   ============================================================================ */
-.supra-elevation-1 {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
-}
-
-.supra-elevation-2 {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
-}
-
-.supra-elevation-3 {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
-}
-
-.supra-elevation-4 {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
-}
-
-.supra-elevation-5 {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-}
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -10,12 +10,8 @@
 /* Brand tokens — generated from @dangerousthings/tokens */
@import './tokens/dt.css';
@import './tokens/classic.css';
-@import './tokens/supra.css';

 /* Component styles — DT visual identity */
@import './components/bevels.css';
@import './components/glows.css';
@import './components/forms-dt.css';
-
-/* Component styles — Supra/MD3 visual identity */
-@import './components/elevation.css';