@cdx-ui/styles 0.0.1-beta.7 → 0.0.1-beta.71

package/src/useForgeFonts.ts

@@ -0,0 +1,230 @@
+import { Platform } from 'react-native';
+import { type FontSource, useFonts } from 'expo-font';
+// Crimson Pro
+import { CrimsonPro_400Regular } from '@expo-google-fonts/crimson-pro/400Regular';
+import { CrimsonPro_500Medium } from '@expo-google-fonts/crimson-pro/500Medium';
+import { CrimsonPro_600SemiBold } from '@expo-google-fonts/crimson-pro/600SemiBold';
+import { CrimsonPro_700Bold } from '@expo-google-fonts/crimson-pro/700Bold';
+import { CrimsonPro_400Regular_Italic } from '@expo-google-fonts/crimson-pro/400Regular_Italic';
+import { CrimsonPro_500Medium_Italic } from '@expo-google-fonts/crimson-pro/500Medium_Italic';
+import { CrimsonPro_600SemiBold_Italic } from '@expo-google-fonts/crimson-pro/600SemiBold_Italic';
+import { CrimsonPro_700Bold_Italic } from '@expo-google-fonts/crimson-pro/700Bold_Italic';
+// Bitter
+import { Bitter_400Regular } from '@expo-google-fonts/bitter/400Regular';
+import { Bitter_500Medium } from '@expo-google-fonts/bitter/500Medium';
+import { Bitter_600SemiBold } from '@expo-google-fonts/bitter/600SemiBold';
+import { Bitter_700Bold } from '@expo-google-fonts/bitter/700Bold';
+import { Bitter_400Regular_Italic } from '@expo-google-fonts/bitter/400Regular_Italic';
+import { Bitter_500Medium_Italic } from '@expo-google-fonts/bitter/500Medium_Italic';
+import { Bitter_600SemiBold_Italic } from '@expo-google-fonts/bitter/600SemiBold_Italic';
+import { Bitter_700Bold_Italic } from '@expo-google-fonts/bitter/700Bold_Italic';
+// DM Sans
+import { DMSans_400Regular } from '@expo-google-fonts/dm-sans/400Regular';
+import { DMSans_500Medium } from '@expo-google-fonts/dm-sans/500Medium';
+import { DMSans_600SemiBold } from '@expo-google-fonts/dm-sans/600SemiBold';
+import { DMSans_700Bold } from '@expo-google-fonts/dm-sans/700Bold';
+import { DMSans_400Regular_Italic } from '@expo-google-fonts/dm-sans/400Regular_Italic';
+import { DMSans_500Medium_Italic } from '@expo-google-fonts/dm-sans/500Medium_Italic';
+import { DMSans_600SemiBold_Italic } from '@expo-google-fonts/dm-sans/600SemiBold_Italic';
+import { DMSans_700Bold_Italic } from '@expo-google-fonts/dm-sans/700Bold_Italic';
+// Libre Caslon Text — weights 400 + 700 only; italic at 400 only
+import { LibreCaslonText_400Regular } from '@expo-google-fonts/libre-caslon-text/400Regular';
+import { LibreCaslonText_700Bold } from '@expo-google-fonts/libre-caslon-text/700Bold';
+import { LibreCaslonText_400Regular_Italic } from '@expo-google-fonts/libre-caslon-text/400Regular_Italic';
+// Cormorant
+import { Cormorant_400Regular } from '@expo-google-fonts/cormorant/400Regular';
+import { Cormorant_500Medium } from '@expo-google-fonts/cormorant/500Medium';
+import { Cormorant_600SemiBold } from '@expo-google-fonts/cormorant/600SemiBold';
+import { Cormorant_700Bold } from '@expo-google-fonts/cormorant/700Bold';
+import { Cormorant_400Regular_Italic } from '@expo-google-fonts/cormorant/400Regular_Italic';
+import { Cormorant_500Medium_Italic } from '@expo-google-fonts/cormorant/500Medium_Italic';
+import { Cormorant_600SemiBold_Italic } from '@expo-google-fonts/cormorant/600SemiBold_Italic';
+import { Cormorant_700Bold_Italic } from '@expo-google-fonts/cormorant/700Bold_Italic';
+// Libre Franklin
+import { LibreFranklin_400Regular } from '@expo-google-fonts/libre-franklin/400Regular';
+import { LibreFranklin_500Medium } from '@expo-google-fonts/libre-franklin/500Medium';
+import { LibreFranklin_600SemiBold } from '@expo-google-fonts/libre-franklin/600SemiBold';
+import { LibreFranklin_700Bold } from '@expo-google-fonts/libre-franklin/700Bold';
+import { LibreFranklin_400Regular_Italic } from '@expo-google-fonts/libre-franklin/400Regular_Italic';
+import { LibreFranklin_500Medium_Italic } from '@expo-google-fonts/libre-franklin/500Medium_Italic';
+import { LibreFranklin_600SemiBold_Italic } from '@expo-google-fonts/libre-franklin/600SemiBold_Italic';
+import { LibreFranklin_700Bold_Italic } from '@expo-google-fonts/libre-franklin/700Bold_Italic';
+// Outfit — no italic files available
+import { Outfit_400Regular } from '@expo-google-fonts/outfit/400Regular';
+import { Outfit_500Medium } from '@expo-google-fonts/outfit/500Medium';
+import { Outfit_600SemiBold } from '@expo-google-fonts/outfit/600SemiBold';
+import { Outfit_700Bold } from '@expo-google-fonts/outfit/700Bold';
+// Manrope — no italic files available
+import { Manrope_400Regular } from '@expo-google-fonts/manrope/400Regular';
+import { Manrope_500Medium } from '@expo-google-fonts/manrope/500Medium';
+import { Manrope_600SemiBold } from '@expo-google-fonts/manrope/600SemiBold';
+import { Manrope_700Bold } from '@expo-google-fonts/manrope/700Bold';
+// Public Sans
+import { PublicSans_400Regular } from '@expo-google-fonts/public-sans/400Regular';
+import { PublicSans_500Medium } from '@expo-google-fonts/public-sans/500Medium';
+import { PublicSans_600SemiBold } from '@expo-google-fonts/public-sans/600SemiBold';
+import { PublicSans_700Bold } from '@expo-google-fonts/public-sans/700Bold';
+import { PublicSans_400Regular_Italic } from '@expo-google-fonts/public-sans/400Regular_Italic';
+import { PublicSans_500Medium_Italic } from '@expo-google-fonts/public-sans/500Medium_Italic';
+import { PublicSans_600SemiBold_Italic } from '@expo-google-fonts/public-sans/600SemiBold_Italic';
+import { PublicSans_700Bold_Italic } from '@expo-google-fonts/public-sans/700Bold_Italic';
+// Inter (web platform font)
+import { Inter_400Regular } from '@expo-google-fonts/inter/400Regular';
+import { Inter_500Medium } from '@expo-google-fonts/inter/500Medium';
+import { Inter_600SemiBold } from '@expo-google-fonts/inter/600SemiBold';
+import { Inter_700Bold } from '@expo-google-fonts/inter/700Bold';
+import { Inter_400Regular_Italic } from '@expo-google-fonts/inter/400Regular_Italic';
+import { Inter_500Medium_Italic } from '@expo-google-fonts/inter/500Medium_Italic';
+import { Inter_600SemiBold_Italic } from '@expo-google-fonts/inter/600SemiBold_Italic';
+import { Inter_700Bold_Italic } from '@expo-google-fonts/inter/700Bold_Italic';
+// IBM Plex Mono (web platform font)
+import { IBMPlexMono_400Regular } from '@expo-google-fonts/ibm-plex-mono/400Regular';
+import { IBMPlexMono_500Medium } from '@expo-google-fonts/ibm-plex-mono/500Medium';
+import { IBMPlexMono_600SemiBold } from '@expo-google-fonts/ibm-plex-mono/600SemiBold';
+import { IBMPlexMono_700Bold } from '@expo-google-fonts/ibm-plex-mono/700Bold';
+import { IBMPlexMono_400Regular_Italic } from '@expo-google-fonts/ibm-plex-mono/400Regular_Italic';
+import { IBMPlexMono_500Medium_Italic } from '@expo-google-fonts/ibm-plex-mono/500Medium_Italic';
+import { IBMPlexMono_600SemiBold_Italic } from '@expo-google-fonts/ibm-plex-mono/600SemiBold_Italic';
+import { IBMPlexMono_700Bold_Italic } from '@expo-google-fonts/ibm-plex-mono/700Bold_Italic';
+
+/**
+ * All 9 display fonts (3 per preset) with weight and italic variants.
+ * Keys are token-matching registered names so CSS variable values resolve
+ * to loaded font files on all platforms.
+ */
+const displayFonts = {
+  // Crimson Pro (Poise)
+  'Crimson Pro': CrimsonPro_400Regular,
+  'Crimson Pro Medium': CrimsonPro_500Medium,
+  'Crimson Pro SemiBold': CrimsonPro_600SemiBold,
+  'Crimson Pro Bold': CrimsonPro_700Bold,
+  'Crimson Pro Italic': CrimsonPro_400Regular_Italic,
+  'Crimson Pro Medium Italic': CrimsonPro_500Medium_Italic,
+  'Crimson Pro SemiBold Italic': CrimsonPro_600SemiBold_Italic,
+  'Crimson Pro Bold Italic': CrimsonPro_700Bold_Italic,
+
+  // Bitter (Poise)
+  Bitter: Bitter_400Regular,
+  'Bitter Medium': Bitter_500Medium,
+  'Bitter SemiBold': Bitter_600SemiBold,
+  'Bitter Bold': Bitter_700Bold,
+  'Bitter Italic': Bitter_400Regular_Italic,
+  'Bitter Medium Italic': Bitter_500Medium_Italic,
+  'Bitter SemiBold Italic': Bitter_600SemiBold_Italic,
+  'Bitter Bold Italic': Bitter_700Bold_Italic,
+
+  // DM Sans (Poise)
+  'DM Sans': DMSans_400Regular,
+  'DM Sans Medium': DMSans_500Medium,
+  'DM Sans SemiBold': DMSans_600SemiBold,
+  'DM Sans Bold': DMSans_700Bold,
+  'DM Sans Italic': DMSans_400Regular_Italic,
+  'DM Sans Medium Italic': DMSans_500Medium_Italic,
+  'DM Sans SemiBold Italic': DMSans_600SemiBold_Italic,
+  'DM Sans Bold Italic': DMSans_700Bold_Italic,
+
+  // Libre Caslon Text (Prestige) — 500/600 unavailable, mapped to 400;
+  // italic only at 400, all other italic keys map to 400 italic
+  'Libre Caslon Text': LibreCaslonText_400Regular,
+  'Libre Caslon Text Medium': LibreCaslonText_400Regular,
+  'Libre Caslon Text SemiBold': LibreCaslonText_400Regular,
+  'Libre Caslon Text Bold': LibreCaslonText_700Bold,
+  'Libre Caslon Text Italic': LibreCaslonText_400Regular_Italic,
+  'Libre Caslon Text Medium Italic': LibreCaslonText_400Regular_Italic,
+  'Libre Caslon Text SemiBold Italic': LibreCaslonText_400Regular_Italic,
+  'Libre Caslon Text Bold Italic': LibreCaslonText_400Regular_Italic,
+
+  // Cormorant (Prestige)
+  Cormorant: Cormorant_400Regular,
+  'Cormorant Medium': Cormorant_500Medium,
+  'Cormorant SemiBold': Cormorant_600SemiBold,
+  'Cormorant Bold': Cormorant_700Bold,
+  'Cormorant Italic': Cormorant_400Regular_Italic,
+  'Cormorant Medium Italic': Cormorant_500Medium_Italic,
+  'Cormorant SemiBold Italic': Cormorant_600SemiBold_Italic,
+  'Cormorant Bold Italic': Cormorant_700Bold_Italic,
+
+  // Libre Franklin (Prestige)
+  'Libre Franklin': LibreFranklin_400Regular,
+  'Libre Franklin Medium': LibreFranklin_500Medium,
+  'Libre Franklin SemiBold': LibreFranklin_600SemiBold,
+  'Libre Franklin Bold': LibreFranklin_700Bold,
+  'Libre Franklin Italic': LibreFranklin_400Regular_Italic,
+  'Libre Franklin Medium Italic': LibreFranklin_500Medium_Italic,
+  'Libre Franklin SemiBold Italic': LibreFranklin_600SemiBold_Italic,
+  'Libre Franklin Bold Italic': LibreFranklin_700Bold_Italic,
+
+  // Outfit (Pulse) — no italic files; italic keys map to regular variants
+  Outfit: Outfit_400Regular,
+  'Outfit Medium': Outfit_500Medium,
+  'Outfit SemiBold': Outfit_600SemiBold,
+  'Outfit Bold': Outfit_700Bold,
+  'Outfit Italic': Outfit_400Regular,
+  'Outfit Medium Italic': Outfit_500Medium,
+  'Outfit SemiBold Italic': Outfit_600SemiBold,
+  'Outfit Bold Italic': Outfit_700Bold,
+
+  // Manrope (Pulse) — no italic files; italic keys map to regular variants
+  Manrope: Manrope_400Regular,
+  'Manrope Medium': Manrope_500Medium,
+  'Manrope SemiBold': Manrope_600SemiBold,
+  'Manrope Bold': Manrope_700Bold,
+  'Manrope Italic': Manrope_400Regular,
+  'Manrope Medium Italic': Manrope_500Medium,
+  'Manrope SemiBold Italic': Manrope_600SemiBold,
+  'Manrope Bold Italic': Manrope_700Bold,
+
+  // Public Sans (Pulse)
+  'Public Sans': PublicSans_400Regular,
+  'Public Sans Medium': PublicSans_500Medium,
+  'Public Sans SemiBold': PublicSans_600SemiBold,
+  'Public Sans Bold': PublicSans_700Bold,
+  'Public Sans Italic': PublicSans_400Regular_Italic,
+  'Public Sans Medium Italic': PublicSans_500Medium_Italic,
+  'Public Sans SemiBold Italic': PublicSans_600SemiBold_Italic,
+  'Public Sans Bold Italic': PublicSans_700Bold_Italic,
+};
+
+/**
+ * Web platform fonts — only included when running on web.
+ * Imports remain top-level so Metro statically bundles the font files;
+ * the conditional controls whether useFonts receives them.
+ */
+const webFonts: Record<string, FontSource> =
+  Platform.OS === 'web'
+    ? {
+        Inter: Inter_400Regular,
+        'Inter Medium': Inter_500Medium,
+        'Inter SemiBold': Inter_600SemiBold,
+        'Inter Bold': Inter_700Bold,
+        'Inter Italic': Inter_400Regular_Italic,
+        'Inter Medium Italic': Inter_500Medium_Italic,
+        'Inter SemiBold Italic': Inter_600SemiBold_Italic,
+        'Inter Bold Italic': Inter_700Bold_Italic,
+
+        'IBM Plex Mono': IBMPlexMono_400Regular,
+        'IBM Plex Mono Medium': IBMPlexMono_500Medium,
+        'IBM Plex Mono SemiBold': IBMPlexMono_600SemiBold,
+        'IBM Plex Mono Bold': IBMPlexMono_700Bold,
+        'IBM Plex Mono Italic': IBMPlexMono_400Regular_Italic,
+        'IBM Plex Mono Medium Italic': IBMPlexMono_500Medium_Italic,
+        'IBM Plex Mono SemiBold Italic': IBMPlexMono_600SemiBold_Italic,
+        'IBM Plex Mono Bold Italic': IBMPlexMono_700Bold_Italic,
+      }
+    : {};
+
+/**
+ * Loads all Forge UI fonts — 9 display fonts (3 per preset) with weight/italic
+ * variants, plus web platform fonts (Inter, IBM Plex Mono) on web.
+ *
+ * This is a pure font loader with no preset or FI config awareness. Font
+ * selection is handled by the CSS variable layer via theme tokens.
+ */
+export function useForgeFonts(): { loaded: boolean; error: Error | null } {
+  const [loaded, error] = useFonts({
+    ...displayFonts,
+    ...webFonts,
+  });
+
+  return { loaded, error };
+}

package/tokens/presets/.manifest.json

@@ -1,5 +1,5 @@
 {
-  "poise.json": "8de6657e555788e1d9e10ae9c6868a2a886bdcb6bfdf01bdd2e3f628f6704586",
-  "prestige.json": "7828f391d212be0726839297dfa6638b575187faa6fc9eecd7d64219eaadf403",
-  "pulse.json": "1cbc3480aae055ae03360b243664e9a95e2eca96be3126334ea062d0d38d6033"
+  "poise.json": "aced9d145bf46c5eddba7b2155156c5d3ccc593588cd406f57d8a5a21c7b90f9",
+  "prestige.json": "d817cb775b15ec0293c0c1c99fd4e655646b07e4f7080c0aeedf2c81b4a82f7a",
+  "pulse.json": "5fa3ef89a369281ddcdd142860ab2c99381a0e81cf02fead9e77bdfd8585ad39"
 }