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/react-native/src/components/DTSearchInput.tsx

@@ -11,7 +11,7 @@
 import {useState, useRef, useEffect} from 'react';
 import {StyleSheet, View, ViewStyle, TextStyle, StyleProp, Animated} from 'react-native';
 import {Searchbar, ActivityIndicator} from 'react-native-paper';
-import {DTColors} from '../theme/colors';
+import {useDTTheme} from '../theme/DTThemeProvider';
 import {type DTVariant, getVariantColor} from '../utils/variantColors';
 
 interface DTSearchInputProps {
@@ -86,7 +86,8 @@ export function DTSearchInput({
   style,
   inputStyle,
 }: DTSearchInputProps) {
-  const accentColor = getVariantColor(variant, color);
+  const theme = useDTTheme();
+  const accentColor = getVariantColor(theme, variant, color);
   const [focused, setFocused] = useState(false);
   const focusAnim = useRef(new Animated.Value(0)).current;
 
@@ -110,7 +111,7 @@ export function DTSearchInput({
         onBlur={() => setFocused(false)}
         returnKeyType="search"
         placeholder={placeholder}
-        placeholderTextColor={DTColors.disabled}
+        placeholderTextColor={theme.colors.onSurfaceDisabled}
         editable={!disabled}
         autoFocus={autoFocus}
         icon={
@@ -119,13 +120,13 @@ export function DTSearchInput({
             : 'magnify'
         }
         iconColor={accentColor}
-        inputStyle={[styles.input, {color: DTColors.light}, inputStyle]}
-        style={[styles.searchbar, {borderColor: accentColor}]}
+        inputStyle={[styles.input, {color: theme.colors.onSurface}, inputStyle]}
+        style={[styles.searchbar, {borderColor: accentColor, backgroundColor: theme.colors.background}]}
         rippleColor={accentColor}
         theme={{
           colors: {
-            elevation: {level3: DTColors.dark},
-            onSurface: DTColors.light,
+            elevation: {level3: theme.colors.background},
+            onSurface: theme.colors.onSurface,
             onSurfaceVariant: accentColor,
           },
           roundness: 0,
@@ -149,7 +150,6 @@ const styles = StyleSheet.create({
   container: {},
   searchbar: {
     borderWidth: 2,
-    backgroundColor: DTColors.dark,
     elevation: 0,
   },
   input: {