Make RN components fully theme-driven for multi-brand support

Refactor all 18 React Native components from static DTColors imports to
dynamic useDTTheme() context, enabling proper visual differentiation
when switching between DT and Classic brands.

Key changes:
- Replace static DTColors with theme context in all components
- Add shape tokens (bevel/radius) to DTExtendedTheme interface
- Conditionally render SVG bevels (DT) vs borderRadius (Classic)
- Configure fonts per brand (Tektur for DT, system sans-serif for Classic)
- Update buildThemeFromBrand to parse shape and typography tokens
- Fix Metro config for monorepo singleton resolution

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

packages/showcase/mobile/metro.config.js

@@ -15,6 +15,34 @@ config.resolver.nodeModulesPaths = [
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
+// Force singleton packages to always resolve from the mobile project.
+// In monorepos, Metro can bundle two copies of react (one from root, one from
+// the project) causing "Cannot read property 'use' of null" crashes.
+const singletons = ['react', 'react-native', 'react-native-safe-area-context'];
+
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  // Check if this is a singleton or a deep import of one (e.g. react/jsx-runtime)
+  const isSingleton = singletons.some(
+    (s) => moduleName === s || moduleName.startsWith(s + '/')
+  );
+
+  if (isSingleton) {
+    // Resolve as if the import originated from the mobile project root
+    const mobileContext = {
+      ...context,
+      resolveRequest: undefined,
+      originModulePath: path.join(projectRoot, 'package.json'),
+    };
+    return context.resolveRequest(mobileContext, moduleName, platform);
+  }
+
+  return context.resolveRequest(
+    { ...context, resolveRequest: undefined },
+    moduleName,
+    platform,
+  );
+};
+
 // Block sibling packages' node_modules to prevent duplicate native modules
 const packagesDir = path.join(monorepoRoot, 'packages');
 const escapedPath = packagesDir.replace(/[/\\]/g, '[/\\\\]');