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/tokens/src/index.ts

@@ -6,8 +6,11 @@ export type {
   TypographyTokens,
   ShapeTokens,
   BrandTokens,
+  DTVariant,
 } from "./types.js";
 
+export { variantToCSSProperty, variantToClassName } from "./types.js";
+
 export { dt } from "./brands/dt.js";
 export { classic } from "./brands/classic.js";
 

packages/tokens/src/scripts/generate-css.ts

@@ -56,7 +56,24 @@ function colorVars(colors: ColorTokens): string {
   --color-error: ${colors.error};
   --color-error-rgb: ${hexToRgb(colors.error)};
   --color-info: ${colors.info};
-  --color-info-rgb: ${hexToRgb(colors.info)};`;
+  --color-info-rgb: ${hexToRgb(colors.info)};
+
+  /* Mode Aliases — per-component color overrides (cards, badges, buttons) */
+  --mode-normal: var(--color-primary);
+  --mode-normal-rgb: var(--color-primary-rgb);
+  --mode-normal-selected: rgba(var(--color-primary-rgb), 0.7);
+  --mode-emphasis: var(--color-secondary);
+  --mode-emphasis-rgb: var(--color-secondary-rgb);
+  --mode-emphasis-selected: rgba(var(--color-secondary-rgb), 0.7);
+  --mode-warning: var(--color-error);
+  --mode-warning-rgb: var(--color-error-rgb);
+  --mode-warning-selected: rgba(var(--color-error-rgb), 0.7);
+  --mode-success: var(--color-accent);
+  --mode-success-rgb: var(--color-accent-rgb);
+  --mode-success-selected: rgba(var(--color-accent-rgb), 0.7);
+  --mode-other: var(--color-other);
+  --mode-other-rgb: var(--color-other-rgb);
+  --mode-other-selected: rgba(var(--color-other-rgb), 0.7);`;
 }
 
 /** Generate a full brand CSS file */

packages/tokens/src/types.ts

@@ -53,6 +53,27 @@ export interface ShapeTokens {
   radiusLg: string;
 }
 
+/** Color variant for component accent colors (shared across web + React Native) */
+export type DTVariant = 'normal' | 'emphasis' | 'warning' | 'success' | 'other';
+
+/** Maps DTVariant to CSS custom property names */
+export const variantToCSSProperty: Record<DTVariant, string> = {
+  normal: '--mode-normal',
+  emphasis: '--mode-emphasis',
+  warning: '--mode-warning',
+  success: '--mode-success',
+  other: '--mode-other',
+};
+
+/** Maps DTVariant to CSS class names */
+export const variantToClassName: Record<DTVariant, string> = {
+  normal: 'mode-normal',
+  emphasis: 'mode-emphasis',
+  warning: 'mode-warning',
+  success: 'mode-success',
+  other: 'mode-other',
+};
+
 /** Complete brand definition */
 export interface BrandTokens {
   id: ThemeBrand;