redesign take 1

apps/mobile/src/styles/typography.ts

@@ -0,0 +1,145 @@
+/**
+ * FitAI Typography System
+ * Minimalist typography with clear hierarchy using system fonts
+ */
+
+import { TextStyle } from "react-native";
+
+/**
+ * Font Sizes
+ * Refined scale with fewer sizes for clearer hierarchy
+ */
+export const fontSize = {
+  xs: 11,
+  sm: 13,
+  base: 15,
+  md: 17, // Body emphasis
+  lg: 20,
+  xl: 24,
+  "2xl": 28,
+  "3xl": 34,
+  "4xl": 40,
+} as const;
+
+/**
+ * Font Weights
+ */
+export const fontWeight = {
+  regular: "400" as TextStyle["fontWeight"],
+  medium: "500" as TextStyle["fontWeight"],
+  semibold: "600" as TextStyle["fontWeight"],
+  bold: "700" as TextStyle["fontWeight"],
+} as const;
+
+/**
+ * Line Heights
+ */
+export const lineHeight = {
+  tight: 1.2,
+  normal: 1.5,
+  relaxed: 1.7,
+} as const;
+
+/**
+ * Letter Spacing
+ */
+export const letterSpacing = {
+  tight: -0.5,
+  normal: 0,
+  wide: 0.5,
+  wider: 1,
+} as const;
+
+/**
+ * Typography Presets
+ * Ready-to-use text styles for common use cases
+ */
+export interface TypographyPresets {
+  h1: TextStyle;
+  h2: TextStyle;
+  h3: TextStyle;
+  body: TextStyle;
+  bodyEmphasis: TextStyle;
+  label: TextStyle;
+  stat: TextStyle;
+  caption: TextStyle;
+}
+
+export const createTypographyPresets = (
+  textPrimary: string,
+  textSecondary: string,
+  textTertiary: string,
+): TypographyPresets => ({
+  // Display Text (Screen Titles)
+  h1: {
+    fontSize: fontSize["3xl"],
+    fontWeight: fontWeight.bold,
+    letterSpacing: letterSpacing.tight,
+    lineHeight: fontSize["3xl"] * lineHeight.tight,
+    color: textPrimary,
+  },
+
+  // Section Headers
+  h2: {
+    fontSize: fontSize.xl,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: -0.3,
+    color: textPrimary,
+  },
+
+  // Card Titles
+  h3: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.semibold,
+    color: textPrimary,
+  },
+
+  // Body Text
+  body: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.base * lineHeight.normal,
+    color: textSecondary,
+  },
+
+  // Emphasized Body
+  bodyEmphasis: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: fontSize.md * lineHeight.normal,
+    color: textPrimary,
+  },
+
+  // Labels (uppercase, spaced)
+  label: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.medium,
+    letterSpacing: letterSpacing.wide,
+    textTransform: "uppercase",
+    color: textTertiary,
+  },
+
+  // Stats/Numbers
+  stat: {
+    fontSize: fontSize["2xl"],
+    fontWeight: fontWeight.bold,
+    color: textPrimary,
+  },
+
+  // Caption/Small text
+  caption: {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.regular,
+    color: textTertiary,
+  },
+});
+
+/**
+ * Typography utility object
+ */
+export const typography = {
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+};