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>

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
 

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",
-  },
-};

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",
-  },
 ];

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");

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";

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 |

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;

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

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);
-}

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';