175 lines
3.3 KiB
TypeScript
175 lines
3.3 KiB
TypeScript
/**
|
|
* FitAI Typography System - BOLD MODERN
|
|
* High-impact typography with clear hierarchy using system fonts
|
|
*/
|
|
|
|
import { TextStyle } from "react-native";
|
|
|
|
/**
|
|
* Font Sizes - Larger for bold impact
|
|
*/
|
|
export const fontSize = {
|
|
xs: 12,
|
|
sm: 14,
|
|
base: 16,
|
|
md: 18, // Body emphasis
|
|
lg: 22,
|
|
xl: 26,
|
|
"2xl": 32,
|
|
"3xl": 40,
|
|
"4xl": 52,
|
|
"5xl": 64,
|
|
} as const;
|
|
|
|
/**
|
|
* Font Weights - Emphasize bold
|
|
*/
|
|
export const fontWeight = {
|
|
regular: "400" as TextStyle["fontWeight"],
|
|
medium: "500" as TextStyle["fontWeight"],
|
|
semibold: "600" as TextStyle["fontWeight"],
|
|
bold: "700" as TextStyle["fontWeight"],
|
|
extrabold: "800" as TextStyle["fontWeight"],
|
|
} as const;
|
|
|
|
/**
|
|
* Line Heights
|
|
*/
|
|
export const lineHeight = {
|
|
tight: 1.15,
|
|
normal: 1.4,
|
|
relaxed: 1.6,
|
|
} as const;
|
|
|
|
/**
|
|
* Letter Spacing
|
|
*/
|
|
export const letterSpacing = {
|
|
tight: -1,
|
|
normal: 0,
|
|
wide: 0.5,
|
|
wider: 1.5,
|
|
} as const;
|
|
|
|
/**
|
|
* Typography Presets
|
|
* Ready-to-use text styles for common use cases
|
|
*/
|
|
export interface TypographyPresets {
|
|
h1: TextStyle;
|
|
h2: TextStyle;
|
|
h3: TextStyle;
|
|
h4: TextStyle;
|
|
body: TextStyle;
|
|
bodyEmphasis: TextStyle;
|
|
label: TextStyle;
|
|
stat: TextStyle;
|
|
statLarge: TextStyle;
|
|
caption: TextStyle;
|
|
button: TextStyle;
|
|
}
|
|
|
|
export const createTypographyPresets = (
|
|
textPrimary: string,
|
|
textSecondary: string,
|
|
textTertiary: string,
|
|
): TypographyPresets => ({
|
|
// Display Text (Screen Titles) - Extra Bold
|
|
h1: {
|
|
fontSize: fontSize["4xl"],
|
|
fontWeight: fontWeight.extrabold,
|
|
letterSpacing: letterSpacing.tight,
|
|
lineHeight: fontSize["4xl"] * lineHeight.tight,
|
|
color: textPrimary,
|
|
},
|
|
|
|
// Section Headers - Bold
|
|
h2: {
|
|
fontSize: fontSize["2xl"],
|
|
fontWeight: fontWeight.bold,
|
|
letterSpacing: -0.5,
|
|
color: textPrimary,
|
|
},
|
|
|
|
// Card Titles - Semibold
|
|
h3: {
|
|
fontSize: fontSize.lg,
|
|
fontWeight: fontWeight.semibold,
|
|
letterSpacing: -0.3,
|
|
color: textPrimary,
|
|
},
|
|
|
|
// Small Headers
|
|
h4: {
|
|
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.xs,
|
|
fontWeight: fontWeight.semibold,
|
|
letterSpacing: letterSpacing.wider,
|
|
textTransform: "uppercase",
|
|
color: textTertiary,
|
|
},
|
|
|
|
// Stats/Numbers - Bold Large
|
|
stat: {
|
|
fontSize: fontSize["3xl"],
|
|
fontWeight: fontWeight.bold,
|
|
letterSpacing: -1,
|
|
color: textPrimary,
|
|
},
|
|
|
|
// Large Stats (Hero numbers)
|
|
statLarge: {
|
|
fontSize: fontSize["5xl"],
|
|
fontWeight: fontWeight.extrabold,
|
|
letterSpacing: -2,
|
|
lineHeight: fontSize["5xl"] * lineHeight.tight,
|
|
color: textPrimary,
|
|
},
|
|
|
|
// Caption/Small text
|
|
caption: {
|
|
fontSize: fontSize.xs,
|
|
fontWeight: fontWeight.regular,
|
|
color: textTertiary,
|
|
},
|
|
|
|
// Button Text
|
|
button: {
|
|
fontSize: fontSize.base,
|
|
fontWeight: fontWeight.bold,
|
|
letterSpacing: 0.5,
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Typography utility object
|
|
*/
|
|
export const typography = {
|
|
fontSize,
|
|
fontWeight,
|
|
lineHeight,
|
|
letterSpacing,
|
|
};
|