refactor(example): drop unused theme helpers

useThemedStyles had no call sites — screens keep static rules in a
module-level StyleSheet and read theme-dependent values at the call site. The
glass colour token was superseded by controlOnImage, and TypeToken was never
referenced.

Author: giaBaoJS

example/src/theme/index.ts

@@ -3,11 +3,13 @@
  *
  * Dark-first: an unknown/unset system scheme resolves to the dark theme, which
  * is the one the app was designed against.
+ *
+ * Screens keep their static rules in a module-level `StyleSheet.create` and pull
+ * only the theme-dependent values (colours, radii) from `useTheme()` at the call
+ * site, so nothing is rebuilt per render.
  */
 
-import { useMemo } from 'react';
-import { StyleSheet, useColorScheme } from 'react-native';
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { useColorScheme } from 'react-native';
 
 import { darkTheme, lightTheme } from './tokens';
 import type { Theme } from './tokens';
@@ -19,26 +21,3 @@ export function useTheme(): Theme {
   const scheme = useColorScheme();
   return scheme === 'light' ? lightTheme : darkTheme;
 }
-
-type NamedStyles<T> = {
-  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
-};
-
-/**
- * Build a themed stylesheet once per theme rather than on every render.
- *
- * `factory` must be a stable reference — declare it at module scope, not inline
- * in the component, or the memo will miss on every render.
- *
- * ```ts
- * const createStyles = (t: Theme) => ({ root: { backgroundColor: t.color.canvas } });
- * // inside the component:
- * const styles = useThemedStyles(createStyles);
- * ```
- */
-export function useThemedStyles<T extends NamedStyles<T>>(
-  factory: (theme: Theme) => T
-): T {
-  const theme = useTheme();
-  return useMemo(() => StyleSheet.create(factory(theme)), [factory, theme]);
-}

example/src/theme/tokens.ts

@@ -102,8 +102,6 @@ export const type = {
   },
 } as const;
 
-export type TypeToken = keyof typeof type;
-
 // =============================================================================
 // Motion
 // =============================================================================
@@ -125,7 +123,6 @@ export interface ThemeColor {
   canvas: string;
   surface: string;
   surfaceRaised: string;
-  glass: string;
   /**
    * Fill for a control that sits directly on a photograph. Identical in both
    * schemes on purpose: the backdrop is the image, not the canvas, so it must
@@ -157,8 +154,6 @@ const darkColor: ThemeColor = {
   surface: '#15151D',
   /** A surface sitting on top of another surface. */
   surfaceRaised: '#1E1E28',
-  /** Translucent fill for controls over imagery. */
-  glass: 'rgba(20, 20, 28, 0.62)',
   controlOnImage: 'rgba(10, 10, 16, 0.46)',
   borderOnImage: 'rgba(255, 255, 255, 0.28)',
   /** Hairline separators and card outlines. */
@@ -185,7 +180,6 @@ const lightColor: ThemeColor = {
   canvas: '#FBFAF8',
   surface: '#FFFFFF',
   surfaceRaised: '#FFFFFF',
-  glass: 'rgba(255, 255, 255, 0.74)',
   controlOnImage: 'rgba(10, 10, 16, 0.46)',
   borderOnImage: 'rgba(255, 255, 255, 0.28)',
   border: 'rgba(17, 17, 24, 0.10)',