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/showcase/mobile/src/navigation/RootNavigator.tsx

@@ -10,6 +10,9 @@ import { FormsScreen } from '../screens/FormsScreen';
 import { FeedbackScreen } from '../screens/FeedbackScreen';
 import { OverlaysScreen } from '../screens/OverlaysScreen';
 import { ThemeScreen } from '../screens/ThemeScreen';
+import { AnimationsScreen } from '../screens/AnimationsScreen';
+import { CardsAdvancedScreen } from '../screens/CardsAdvancedScreen';
+import { FiltersScreen } from '../screens/FiltersScreen';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -42,6 +45,11 @@ export function RootNavigator() {
         component={CardsScreen}
         options={{ title: 'CARDS & LABELS' }}
       />
+      <Stack.Screen
+        name="CardsAdvanced"
+        component={CardsAdvancedScreen}
+        options={{ title: 'ADVANCED CARDS' }}
+      />
       <Stack.Screen
         name="Forms"
         component={FormsScreen}
@@ -57,6 +65,16 @@ export function RootNavigator() {
         component={OverlaysScreen}
         options={{ title: 'OVERLAYS & NAV' }}
       />
+      <Stack.Screen
+        name="Animations"
+        component={AnimationsScreen}
+        options={{ title: 'ANIMATIONS' }}
+      />
+      <Stack.Screen
+        name="Filters"
+        component={FiltersScreen}
+        options={{ title: 'FILTERS & FEATURES' }}
+      />
       <Stack.Screen
         name="Theme"
         component={ThemeScreen}

packages/showcase/mobile/src/navigation/types.ts

@@ -2,8 +2,11 @@ export type RootStackParamList = {
   Home: undefined;
   Buttons: undefined;
   Cards: undefined;
+  CardsAdvanced: undefined;
   Forms: undefined;
   Feedback: undefined;
   Overlays: undefined;
+  Animations: undefined;
+  Filters: undefined;
   Theme: undefined;
 };