Add storefront component migration: cards, badges, progress bars, animations, and React wrapper package

Major feature migration from dt-shopify-storefront into the design system:

- Card system: per-card color modes (normal/emphasis/warning/success/other),
  progress bars, full-bleed card body (card-body-flush), image bevel clip-paths,
  and visible structural borders at bevel corners
- Badge system: dt-card-badge with position-aware offsets for cards vs media frames
- Media frames: dt-bevel-media with inner surface fill, image clipping, and
  "MISSING MEDIA" placeholder for empty containers
- Interactive bevel buttons: dt-btn with hover/selected states and pulse animation
- Menu items: dt-menu-item with active states and level indentation
- Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes
- Feature legend: CSS grid for product feature icons with state colors
- Scrollbar styling for DT brand
- New @dangerousthings/react package wrapping web CSS components
- New @dangerousthings/tailwind-preset package
- New @dangerousthings/hex-background package
- Desktop showcase rewritten in React with Tailwind CSS
- Mobile showcase updated with new screens (animations, filters, advanced cards)
- Tokens: added mode color tokens, RGB variants, and selected-state tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/tailwind-preset/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@dangerousthings/tailwind-preset",
+  "version": "0.1.0",
+  "description": "Tailwind CSS v3 preset mapping DT design tokens to Tailwind theme",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.8.0"
+  }
+}

packages/tailwind-preset/src/index.ts

@@ -0,0 +1,76 @@
+/**
+ * DT Design System — Tailwind CSS v3 Preset
+ *
+ * Maps design tokens (CSS custom properties) to Tailwind theme values.
+ * Uses var() references so the same utility classes work with both
+ * DT and Classic brands at runtime via [data-brand] switching.
+ *
+ * Usage in consumer's tailwind.config.js:
+ *
+ *   import dtPreset from '@dangerousthings/tailwind-preset';
+ *
+ *   export default {
+ *     presets: [dtPreset],
+ *     content: ['./src/**\/*.{tsx,ts,html}'],
+ *   };
+ *
+ * Then use: bg-dt-primary, text-dt-text-primary, gap-dt-4, rounded-dt, etc.
+ * Opacity modifiers work for colors with -rgb variants: bg-dt-primary/50
+ */
+import type { Config } from 'tailwindcss';
+
+const dtPreset: Partial<Config> = {
+  theme: {
+    extend: {
+      colors: {
+        dt: {
+          // Colors with -rgb variants support Tailwind opacity modifiers (bg-dt-primary/50)
+          bg: 'rgb(var(--color-bg-rgb) / <alpha-value>)',
+          surface: 'rgb(var(--color-surface-rgb) / <alpha-value>)',
+          primary: 'rgb(var(--color-primary-rgb) / <alpha-value>)',
+          secondary: 'rgb(var(--color-secondary-rgb) / <alpha-value>)',
+          accent: 'rgb(var(--color-accent-rgb) / <alpha-value>)',
+          other: 'rgb(var(--color-other-rgb) / <alpha-value>)',
+          error: 'rgb(var(--color-error-rgb) / <alpha-value>)',
+          warning: 'rgb(var(--color-warning-rgb) / <alpha-value>)',
+          success: 'rgb(var(--color-success-rgb) / <alpha-value>)',
+          info: 'rgb(var(--color-info-rgb) / <alpha-value>)',
+          // Colors without -rgb variants (plain var)
+          border: 'var(--color-border)',
+          'surface-hover': 'var(--color-surface-hover)',
+          'primary-dim': 'var(--color-primary-dim)',
+          'text-primary': 'var(--color-text-primary)',
+          'text-secondary': 'var(--color-text-secondary)',
+          'text-muted': 'var(--color-text-muted)',
+        },
+        mode: {
+          normal: 'var(--mode-normal)',
+          emphasis: 'var(--mode-emphasis)',
+          warning: 'var(--mode-warning)',
+          success: 'var(--mode-success)',
+          other: 'var(--mode-other)',
+        },
+      },
+      spacing: {
+        'dt-1': 'var(--space-1)',
+        'dt-2': 'var(--space-2)',
+        'dt-3': 'var(--space-3)',
+        'dt-4': 'var(--space-4)',
+        'dt-6': 'var(--space-6)',
+        'dt-8': 'var(--space-8)',
+      },
+      borderRadius: {
+        'dt-sm': 'var(--radius-sm)',
+        dt: 'var(--radius)',
+        'dt-lg': 'var(--radius-lg)',
+      },
+      fontFamily: {
+        'dt-heading': 'var(--font-heading)',
+        'dt-body': 'var(--font-body)',
+        'dt-mono': 'var(--font-mono)',
+      },
+    },
+  },
+};
+
+export default dtPreset;

packages/tailwind-preset/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*.ts"]
+}