dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

redesign take 2 complete

Browse Source 
fix artefacts from previous dessign
This commit is contained in:
echo 2026-03-12 17:56:46 +01:00
parent aba9b1395b
commit 5d6166df1b
17 changed files with 941 additions and 878 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/admin/data/fitai.db
View File

Binary file not shown.

14
apps/mobile/src/app/(tabs)/attendance.tsx
View File

@ -103,20 +103,22 @@ export default function AttendanceScreen() {
> >
{/* Header */} {/* Header */}
<View style={styles.header}> <View style={styles.header}>
<Text style={[typography.h1, { color: colors.textPrimary }]}> <Text
📍 Attendance style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
>
Attendance
</Text> </Text>
<Text <Text
style={[ style={[
typography.body, typography.body,
{ color: colors.textSecondary, marginTop: 4 }, { color: colors.textSecondary, marginTop: 8 },
]} ]}
> >
{activeCheckIn {activeCheckIn
? "You're crushing it today! 💪" ? "You're crushing it today!"
: history.length === 0 : history.length === 0
? "Ready to start your fitness journey? 🚀" ? "Ready to start your fitness journey?"
: "Track your gym visits and build streaks! 🔥"} : "Track your gym visits and build streaks!"}
</Text> </Text>
</View> </View>

104
apps/mobile/src/app/(tabs)/goals.tsx
View File

@ -150,21 +150,26 @@ export default function GoalsScreen() {
> >
{/* Header */} {/* Header */}
<View style={styles.header}> <View style={styles.header}>
<View> <View style={{ flex: 1 }}>
<Text style={[typography.h1, { color: colors.textPrimary }]}> <Text
🎯 Fitness Goals style={[
typography.h1,
{ color: colors.textPrimary, fontSize: 32 },
]}
>
Goals
</Text> </Text>
<Text <Text
style={[ style={[
typography.body, typography.body,
{ color: colors.textSecondary, marginTop: 4 }, { color: colors.textSecondary, marginTop: 8 },
]} ]}
> >
{activeGoals.length === 0 {activeGoals.length === 0
? "Ready to crush some goals? 💪" ? "Ready to crush some goals?"
: activeGoals.length === 1 : activeGoals.length === 1
? "You're on a mission! Keep it up! 🚀" ? "You're on a mission! Keep it up!"
: `${activeGoals.length} goals in progress. Legend! ⭐`} : `${activeGoals.length} goals in progress. Let's go!`}
</Text> </Text>
</View> </View>
<TouchableOpacity <TouchableOpacity
@ -183,45 +188,69 @@ export default function GoalsScreen() {
{goals && goals.length > 0 && ( {goals && goals.length > 0 && (
<View style={styles.section}> <View style={styles.section}>
<View style={styles.statsRow}> <View style={styles.statsRow}>
<MinimalCard variant="bordered" style={styles.statCard}> <MinimalCard
<Text style={[typography.stat, { color: colors.primary }]}> variant="elevated"
style={[styles.statCard, { backgroundColor: colors.primary }]}
>
<Text
style={[
typography.statLarge,
{ color: colors.white, fontSize: 36 },
]}
>
{activeGoals.length} {activeGoals.length}
</Text> </Text>
<Text <Text
style={[ style={[
typography.caption, typography.label,
{ color: colors.textTertiary, marginTop: 4 }, { color: "rgba(255,255,255,0.8)", marginTop: 4 },
]} ]}
> >
🎯 Active ACTIVE
</Text> </Text>
</MinimalCard> </MinimalCard>
<MinimalCard variant="bordered" style={styles.statCard}> <MinimalCard
<Text style={[typography.stat, { color: colors.success }]}> variant="elevated"
style={[styles.statCard, { backgroundColor: colors.success }]}
>
<Text
style={[
typography.statLarge,
{ color: colors.white, fontSize: 36 },
]}
>
{completedGoals.length} {completedGoals.length}
</Text> </Text>
<Text <Text
style={[ style={[
typography.caption, typography.label,
{ color: colors.textTertiary, marginTop: 4 }, { color: "rgba(255,255,255,0.8)", marginTop: 4 },
]} ]}
> >
{completedGoals.length >= 5 ? "🏆" : "✅"} Completed COMPLETED
</Text> </Text>
</MinimalCard> </MinimalCard>
<MinimalCard variant="bordered" style={styles.statCard}> <MinimalCard
<Text style={[typography.stat, { color: colors.textPrimary }]}> variant="elevated"
style={[styles.statCard, { backgroundColor: colors.accent }]}
>
<Text
style={[
typography.statLarge,
{ color: colors.white, fontSize: 36 },
]}
>
{avgProgress}% {avgProgress}%
</Text> </Text>
<Text <Text
style={[ style={[
typography.caption, typography.label,
{ color: colors.textTertiary, marginTop: 4 }, { color: "rgba(255,255,255,0.8)", marginTop: 4 },
]} ]}
> >
{avgProgress >= 75 ? "🔥" : "📊"} Progress PROGRESS
</Text> </Text>
</MinimalCard> </MinimalCard>
</View> </View>
@ -287,8 +316,9 @@ export default function GoalsScreen() {
{/* Active Goals */} {/* Active Goals */}
<View style={styles.section}> <View style={styles.section}>
<SectionHeader <SectionHeader
title={`🚀 Active Goals (${activeGoals.length})`} title={`Active Goals (${activeGoals.length})`}
actionLabel="Add New" subtitle="Keep pushing forward!"
actionLabel="+ Add New"
onActionPress={() => setIsModalVisible(true)} onActionPress={() => setIsModalVisible(true)}
/> />
{activeGoals.length === 0 ? ( {activeGoals.length === 0 ? (
@ -331,7 +361,8 @@ export default function GoalsScreen() {
{completedGoals.length > 0 && ( {completedGoals.length > 0 && (
<View style={styles.section}> <View style={styles.section}>
<SectionHeader <SectionHeader
title={`✨ Completed Goals (${completedGoals.length})`} title={`Completed (${completedGoals.length})`}
subtitle="Great work!"
/> />
<View style={styles.goalsList}> <View style={styles.goalsList}>
{completedGoals.map((goal) => ( {completedGoals.map((goal) => (
@ -386,15 +417,15 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "flex-start",
paddingHorizontal: 24, paddingHorizontal: 20,
paddingTop: 60, paddingTop: 60,
paddingBottom: 24, paddingBottom: 20,
}, },
debugButton: { debugButton: {
padding: 8, padding: 8,
}, },
section: { section: {
paddingHorizontal: 24, paddingHorizontal: 20,
marginBottom: 24, marginBottom: 24,
}, },
statsRow: { statsRow: {
@ -405,6 +436,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
alignItems: "center", alignItems: "center",
paddingVertical: 20, paddingVertical: 20,
paddingHorizontal: 12,
borderRadius: 20, borderRadius: 20,
}, },
analyticsHeader: { analyticsHeader: {
@ -433,18 +465,18 @@ const styles = StyleSheet.create({
}, },
fabContainer: { fabContainer: {
position: "absolute", position: "absolute",
right: 24, right: 20,
bottom: 90, bottom: 90,
}, },
fab: { fab: {
width: 56, width: 64,
height: 56, height: 64,
borderRadius: 28, borderRadius: 22,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
shadowOffset: { width: 0, height: 4 }, shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.2, shadowOpacity: 0.35,
shadowRadius: 8, shadowRadius: 12,
elevation: 4, elevation: 8,
}, },
}); });

817
apps/mobile/src/app/(tabs)/index.tsx
View File

File diff suppressed because it is too large Load Diff

25
apps/mobile/src/app/(tabs)/profile.tsx
View File

@ -213,7 +213,10 @@ export default function ProfileScreen() {
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
> >
{/* Header Card */} {/* Header Card */}
<MinimalCard variant="elevated" style={styles.profileCard}> <MinimalCard
variant="elevated"
style={[styles.profileCard, { backgroundColor: colors.primary }]}
>
<View style={styles.avatarContainer}> <View style={styles.avatarContainer}>
{user?.imageUrl ? ( {user?.imageUrl ? (
<Image source={{ uri: user.imageUrl }} style={styles.avatar} /> <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
@ -221,29 +224,36 @@ export default function ProfileScreen() {
<View <View
style={[ style={[
styles.placeholderAvatar, styles.placeholderAvatar,
{ backgroundColor: colors.primary }, {
backgroundColor: colors.white,
borderWidth: 3,
borderColor: colors.white,
},
]} ]}
> >
<Ionicons name="person" size={40} color={colors.white} /> <Ionicons name="person" size={40} color={colors.primary} />
</View> </View>
)} )}
</View> </View>
<Text <Text
style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]} style={[
typography.h1,
{ color: colors.white, marginTop: 16, fontSize: 28 },
]}
> >
{user?.fullName || "User"} {user?.fullName || "User"}
</Text> </Text>
<Text <Text
style={[ style={[
typography.body, typography.body,
{ color: colors.textSecondary, marginTop: 4 }, { color: "rgba(255,255,255,0.8)", marginTop: 4 },
]} ]}
> >
{user?.primaryEmailAddress?.emailAddress} {user?.primaryEmailAddress?.emailAddress}
</Text> </Text>
<Badge <Badge
label="Premium Member" label="Premium Member"
variant="primary" variant="success"
style={{ marginTop: 12 }} style={{ marginTop: 12 }}
/> />
</MinimalCard> </MinimalCard>
@ -580,8 +590,9 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
}, },
content: { content: {
padding: 24, padding: 20,
paddingTop: 60, paddingTop: 60,
paddingBottom: 100,
}, },
profileCard: { profileCard: {
alignItems: "center", alignItems: "center",

25
apps/mobile/src/app/(tabs)/recommendations.tsx
View File

@ -130,19 +130,24 @@ export default function RecommendationsScreen() {
> >
{/* Header */} {/* Header */}
<View style={styles.header}> <View style={styles.header}>
<View> <View style={{ flex: 1 }}>
<Text style={[typography.h1, { color: colors.textPrimary }]}> <Text
✨ AI Recommendations style={[
typography.h1,
{ color: colors.textPrimary, fontSize: 32 },
]}
>
Recommendations
</Text> </Text>
<Text <Text
style={[ style={[
typography.body, typography.body,
{ color: colors.textSecondary, marginTop: 4 }, { color: colors.textSecondary, marginTop: 8 },
]} ]}
> >
{recommendations.length === 0 {recommendations.length === 0
? "Let's create your perfect plan! 🚀" ? "Let's create your perfect plan!"
: `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`} : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
</Text> </Text>
</View> </View>
<TouchableOpacity <TouchableOpacity
@ -152,9 +157,10 @@ export default function RecommendationsScreen() {
> >
<IconContainer <IconContainer
variant="colored" variant="colored"
backgroundColor={`${colors.accent}20`} backgroundColor={colors.accent}
size="lg"
> >
<Ionicons name="sparkles" size={24} color={colors.accent} /> <Ionicons name="sparkles" size={24} color={colors.white} />
{unreadCount > 0 && ( {unreadCount > 0 && (
<View <View
style={[ style={[
@ -174,10 +180,11 @@ export default function RecommendationsScreen() {
{/* Generate Button */} {/* Generate Button */}
<View style={styles.section}> <View style={styles.section}>
<MinimalButton <MinimalButton
title="🎯 Generate New Plan" title="Generate New Plan"
onPress={handleGenerateRecommendation} onPress={handleGenerateRecommendation}
variant="primary" variant="primary"
size="lg" size="lg"
fullWidth
loading={generating} loading={generating}
disabled={generating} disabled={generating}
textStyle={{ fontSize: 16 }} textStyle={{ fontSize: 16 }}

128
apps/mobile/src/components/ActivityRing.tsx Normal file
View File

@ -0,0 +1,128 @@
import React, { useEffect, useRef } from "react";
import { View, Animated, StyleSheet, Text } from "react-native";
import Svg, { Circle } from "react-native-svg";
import { useTheme } from "../contexts/ThemeContext";
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
interface ActivityRingProps {
size?: number;
strokeWidth?: number;
progress: number;
current: number;
goal: number;
label: string;
color: string;
icon?: React.ReactNode;
}
export function ActivityRing({
size = 100,
strokeWidth = 10,
progress,
current,
goal,
label,
color,
icon,
}: ActivityRingProps) {
const { colors, typography } = useTheme();
const animatedValue = useRef(new Animated.Value(0)).current;
const radius = (size - strokeWidth) / 2;
const circumference = radius * 2 * Math.PI;
useEffect(() => {
Animated.timing(animatedValue, {
toValue: Math.min(progress, 100),
duration: 1200,
useNativeDriver: true,
}).start();
}, [progress]);
const strokeDashoffset = animatedValue.interpolate({
inputRange: [0, 100],
outputRange: [circumference, 0],
});
return (
<View style={styles.container}>
<View
style={{
width: size,
height: size,
justifyContent: "center",
alignItems: "center",
}}
>
<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
<Circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke={colors.surfaceElevated}
strokeWidth={strokeWidth}
fill="transparent"
/>
<AnimatedCircle
cx={size / 2}
cy={size / 2}
r={radius}
stroke={color}
strokeWidth={strokeWidth}
fill="transparent"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
rotation="-90"
origin={`${size / 2}, ${size / 2}`}
/>
</Svg>
<View
style={[
StyleSheet.absoluteFillObject,
{ justifyContent: "center", alignItems: "center" },
]}
>
{icon ? (
<View style={styles.iconContainer}>{icon}</View>
) : (
<Text
style={[
typography.statLarge,
{ color: colors.textPrimary, fontSize: size * 0.28 },
]}
>
{Math.round(current)}
</Text>
)}
</View>
</View>
<Text
style={[
typography.label,
{ color: colors.textTertiary, marginTop: 8, textAlign: "center" },
]}
>
{label}
</Text>
<Text
style={[
typography.caption,
{ color: colors.textSecondary, marginTop: 2 },
]}
>
/ {goal.toLocaleString()}
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
},
iconContainer: {
justifyContent: "center",
alignItems: "center",
},
});

57
apps/mobile/src/components/Badge.tsx
View File

@ -10,49 +10,41 @@ type BadgeVariant =
| "danger" | "danger"
| "info" | "info"
| "primary"; | "primary";
type BadgeSize = "sm" | "md"; type BadgeSize = "sm" | "md" | "lg";
interface BadgeProps { interface BadgeProps {
label: string; label: string;
variant?: BadgeVariant; variant?: BadgeVariant;
size?: BadgeSize; size?: BadgeSize;
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
emoji?: string;
} }
/**
* Badge - Pill-shaped status indicator
*
* Variants:
* - neutral: Gray badge for general labels
* - success: Green badge for positive status
* - warning: Orange/yellow badge for warnings
* - danger: Red badge for errors or critical status
* - info: Blue badge for informational status
* - primary: Primary color badge
*
* Sizes:
* - sm: 5px vertical, 10px horizontal, 11px font
* - md: 6px vertical, 12px horizontal, 13px font (default)
*/
export function Badge({ export function Badge({
label, label,
variant = "neutral", variant = "neutral",
size = "md", size = "md",
style, style,
emoji,
}: BadgeProps) { }: BadgeProps) {
const { colors } = useTheme(); const { colors } = useTheme();
const sizeStyles = { const sizeStyles = {
sm: { sm: {
paddingVertical: 5, paddingVertical: 6,
paddingHorizontal: 10, paddingHorizontal: 12,
fontSize: fontSize.xs, fontSize: fontSize.xs,
}, },
md: { md: {
paddingVertical: 6, paddingVertical: 8,
paddingHorizontal: 12, paddingHorizontal: 14,
fontSize: fontSize.sm, fontSize: fontSize.sm,
}, },
lg: {
paddingVertical: 10,
paddingHorizontal: 18,
fontSize: fontSize.base,
},
}; };
const variantStyles: Record< const variantStyles: Record<
@ -64,24 +56,24 @@ export function Badge({
color: colors.textSecondary, color: colors.textSecondary,
}, },
success: { success: {
backgroundColor: `${colors.success}20`, // 20% opacity backgroundColor: colors.success,
color: colors.success, color: colors.white,
}, },
warning: { warning: {
backgroundColor: `${colors.warning}20`, backgroundColor: colors.warning,
color: colors.warning, color: colors.black,
}, },
danger: { danger: {
backgroundColor: `${colors.danger}20`, backgroundColor: colors.danger,
color: colors.danger, color: colors.white,
}, },
info: { info: {
backgroundColor: `${colors.info}20`, backgroundColor: colors.info,
color: colors.info, color: colors.white,
}, },
primary: { primary: {
backgroundColor: `${colors.primary}20`, backgroundColor: colors.primary,
color: colors.primary, color: colors.white,
}, },
}; };
@ -103,10 +95,11 @@ export function Badge({
{ {
color: variantStyles[variant].color, color: variantStyles[variant].color,
fontSize: sizeStyles[size].fontSize, fontSize: sizeStyles[size].fontSize,
fontWeight: fontWeight.medium, fontWeight: fontWeight.bold,
}, },
]} ]}
> >
{emoji && `${emoji} `}
{label} {label}
</Text> </Text>
</View> </View>
@ -115,7 +108,7 @@ export function Badge({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
badge: { badge: {
borderRadius: 999, // Full pill shape borderRadius: 12,
alignSelf: "flex-start", alignSelf: "flex-start",
}, },
label: { label: {

56
apps/mobile/src/components/CustomTabBar.tsx
View File

@ -1,21 +1,10 @@
import React from "react"; import React from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native"; import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs"; import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "../contexts/ThemeContext"; import { useTheme } from "../contexts/ThemeContext";
/**
* CustomTabBar - Minimal bottom navigation with pill indicator
*
* Design:
* - Simple flat design (no floating, no glassmorphism)
* - Clean icons with outline/filled states
* - Small pill indicator below active tab
* - 56px height (reduced from 70px)
* - No animations (just opacity fade on press)
* - Theme-aware colors
*/
export function CustomTabBar({ export function CustomTabBar({
state, state,
descriptors, descriptors,
@ -71,6 +60,23 @@ export function CustomTabBar({
} }
}; };
const getLabel = (routeName: string) => {
switch (routeName) {
case "index":
return "Home";
case "goals":
return "Goals";
case "attendance":
return "Attendance";
case "recommendations":
return "Plans";
case "profile":
return "Profile";
default:
return "";
}
};
return ( return (
<TouchableOpacity <TouchableOpacity
key={index} key={index}
@ -85,7 +91,7 @@ export function CustomTabBar({
<View style={styles.iconWrapper}> <View style={styles.iconWrapper}>
<Ionicons <Ionicons
name={getIconName(route.name, isFocused)} name={getIconName(route.name, isFocused)}
size={24} size={26}
color={isFocused ? colors.primary : colors.textTertiary} color={isFocused ? colors.primary : colors.textTertiary}
/> />
{isFocused && ( {isFocused && (
@ -97,6 +103,17 @@ export function CustomTabBar({
/> />
)} )}
</View> </View>
<Text
style={[
styles.label,
{
color: isFocused ? colors.primary : colors.textTertiary,
fontWeight: isFocused ? "700" : "500",
},
]}
>
{getLabel(route.name)}
</Text>
</TouchableOpacity> </TouchableOpacity>
); );
})} })}
@ -107,8 +124,9 @@ export function CustomTabBar({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexDirection: "row", flexDirection: "row",
height: 56, height: 70,
borderTopWidth: 1, borderTopWidth: 1,
paddingTop: 8,
}, },
tabItem: { tabItem: {
flex: 1, flex: 1,
@ -121,9 +139,13 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
}, },
indicator: { indicator: {
width: 24, width: 20,
height: 3, height: 4,
borderRadius: 999, borderRadius: 2,
marginTop: 4,
},
label: {
fontSize: 11,
marginTop: 4, marginTop: 4,
}, },
}); });

23
apps/mobile/src/components/GoalProgressCard.tsx
View File

@ -122,15 +122,17 @@ export function GoalProgressCard({
return ( return (
<Animated.View style={{ transform: [{ scale: scaleAnim }] }}> <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
<TouchableOpacity onPress={onPress} activeOpacity={0.7}> <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
<MinimalCard <MinimalCard
variant="bordered" variant="elevated"
style={[ style={[
styles.card, styles.card,
isCompleted && { isCompleted && {
backgroundColor: colors.overlayLight, backgroundColor: colors.surfaceElevated,
opacity: 0.8,
}, },
]} ]}
padding={20}
> >
{/* Header */} {/* Header */}
<View style={styles.header}> <View style={styles.header}>
@ -289,13 +291,14 @@ export function GoalProgressCard({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
marginBottom: 12, marginBottom: 16,
borderRadius: 20,
}, },
header: { header: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "flex-start",
marginBottom: 12, marginBottom: 16,
}, },
titleRow: { titleRow: {
flexDirection: "row", flexDirection: "row",
@ -304,23 +307,23 @@ const styles = StyleSheet.create({
}, },
titleContainer: { titleContainer: {
flex: 1, flex: 1,
marginLeft: 12, marginLeft: 14,
}, },
actions: { actions: {
flexDirection: "row", flexDirection: "row",
gap: 8, gap: 12,
}, },
actionButton: { actionButton: {
padding: 4, padding: 6,
}, },
progressSection: { progressSection: {
marginBottom: 12, marginBottom: 16,
}, },
progressInfo: { progressInfo: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
marginBottom: 8, marginBottom: 10,
}, },
footer: { footer: {
flexDirection: "row", flexDirection: "row",

38
apps/mobile/src/components/IconContainer.tsx
View File

@ -3,7 +3,7 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext"; import { useTheme } from "../contexts/ThemeContext";
type IconContainerVariant = "plain" | "subtle" | "colored"; type IconContainerVariant = "plain" | "subtle" | "colored";
type IconContainerSize = "sm" | "md" | "lg"; type IconContainerSize = "sm" | "md" | "lg" | "xl";
interface IconContainerProps { interface IconContainerProps {
children: React.ReactNode; children: React.ReactNode;
@ -13,19 +13,6 @@ interface IconContainerProps {
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
} }
/**
* IconContainer - Clean container for icons with subtle backgrounds
*
* Variants:
* - plain: No background, just the icon
* - subtle: Light background (surfaceSecondary)
* - colored: Custom background color (pass backgroundColor prop)
*
* Sizes:
* - sm: 32px circle
* - md: 40px circle (default)
* - lg: 48px circle
*/
export function IconContainer({ export function IconContainer({
children, children,
variant = "subtle", variant = "subtle",
@ -37,19 +24,24 @@ export function IconContainer({
const sizeStyles: Record<IconContainerSize, ViewStyle> = { const sizeStyles: Record<IconContainerSize, ViewStyle> = {
sm: { sm: {
width: 32, width: 36,
height: 32, height: 36,
borderRadius: 16, borderRadius: 10,
}, },
md: { md: {
width: 40,
height: 40,
borderRadius: 20,
},
lg: {
width: 48, width: 48,
height: 48, height: 48,
borderRadius: 24, borderRadius: 14,
},
lg: {
width: 56,
height: 56,
borderRadius: 16,
},
xl: {
width: 64,
height: 64,
borderRadius: 18,
}, },
}; };

86
apps/mobile/src/components/MinimalButton.tsx
View File

@ -11,8 +11,13 @@ import {
import { useTheme } from "../contexts/ThemeContext"; import { useTheme } from "../contexts/ThemeContext";
import { fontSize, fontWeight } from "../styles/typography"; import { fontSize, fontWeight } from "../styles/typography";
type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger"; type ButtonVariant =
type ButtonSize = "sm" | "md" | "lg"; | "primary"
| "secondary"
| "tertiary"
| "danger"
| "success";
type ButtonSize = "sm" | "md" | "lg" | "xl";
interface MinimalButtonProps { interface MinimalButtonProps {
title: string; title: string;
@ -23,22 +28,9 @@ interface MinimalButtonProps {
disabled?: boolean; disabled?: boolean;
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>; textStyle?: StyleProp<TextStyle>;
fullWidth?: boolean;
} }
/**
* MinimalButton - Clean button component with solid colors
*
* Variants:
* - primary: Solid primary background
* - secondary: Outlined with primary color
* - tertiary: Text only, no background
* - danger: Solid danger background
*
* Sizes:
* - sm: 12px vertical padding, 16px horizontal
* - md: 14px vertical padding, 24px horizontal (default)
* - lg: 16px vertical padding, 32px horizontal
*/
export function MinimalButton({ export function MinimalButton({
title, title,
onPress, onPress,
@ -48,37 +40,42 @@ export function MinimalButton({
disabled = false, disabled = false,
style, style,
textStyle, textStyle,
fullWidth = false,
}: MinimalButtonProps) { }: MinimalButtonProps) {
const { colors } = useTheme(); const { colors } = useTheme();
const isDisabled = disabled || loading; const isDisabled = disabled || loading;
// Get button styles based on variant
const getButtonStyle = (): ViewStyle => { const getButtonStyle = (): ViewStyle => {
const baseStyle: ViewStyle = { const baseStyle: ViewStyle = {
borderRadius: 10, borderRadius: 14,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
opacity: isDisabled ? 0.5 : 1, opacity: isDisabled ? 0.5 : 1,
}; };
// Size-specific padding
const sizeStyles: Record< const sizeStyles: Record<
ButtonSize, ButtonSize,
{ paddingVertical: number; paddingHorizontal: number } { paddingVertical: number; paddingHorizontal: number }
> = { > = {
sm: { paddingVertical: 12, paddingHorizontal: 16 }, sm: { paddingVertical: 12, paddingHorizontal: 20 },
md: { paddingVertical: 14, paddingHorizontal: 24 }, md: { paddingVertical: 16, paddingHorizontal: 28 },
lg: { paddingVertical: 16, paddingHorizontal: 32 }, lg: { paddingVertical: 18, paddingHorizontal: 36 },
xl: { paddingVertical: 20, paddingHorizontal: 44 },
}; };
const variantStyles: Record<ButtonVariant, ViewStyle> = { const variantStyles: Record<ButtonVariant, ViewStyle> = {
primary: { primary: {
backgroundColor: colors.primary, backgroundColor: colors.primary,
shadowColor: colors.primary,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 4,
}, },
secondary: { secondary: {
backgroundColor: "transparent", backgroundColor: "transparent",
borderWidth: 1.5, borderWidth: 2,
borderColor: colors.primary, borderColor: colors.primary,
}, },
tertiary: { tertiary: {
@ -86,6 +83,19 @@ export function MinimalButton({
}, },
danger: { danger: {
backgroundColor: colors.danger, backgroundColor: colors.danger,
shadowColor: colors.danger,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 4,
},
success: {
backgroundColor: colors.success,
shadowColor: colors.success,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 4,
}, },
}; };
@ -93,29 +103,23 @@ export function MinimalButton({
...baseStyle, ...baseStyle,
...sizeStyles[size], ...sizeStyles[size],
...variantStyles[variant], ...variantStyles[variant],
...(fullWidth && { width: "100%" }),
}; };
}; };
// Get text styles based on variant
const getTextStyle = (): TextStyle => { const getTextStyle = (): TextStyle => {
const baseTextStyle: TextStyle = { const baseTextStyle: TextStyle = {
fontSize: fontSize.base, fontSize: size === "sm" ? fontSize.sm : fontSize.md,
fontWeight: fontWeight.semibold, fontWeight: fontWeight.bold,
letterSpacing: 0.5,
}; };
const variantTextStyles: Record<ButtonVariant, TextStyle> = { const variantTextStyles: Record<ButtonVariant, TextStyle> = {
primary: { primary: { color: colors.white },
color: colors.white, secondary: { color: colors.primary },
}, tertiary: { color: colors.primary },
secondary: { danger: { color: colors.white },
color: colors.primary, success: { color: colors.white },
},
tertiary: {
color: colors.primary,
},
danger: {
color: colors.white,
},
}; };
return { return {
@ -129,7 +133,7 @@ export function MinimalButton({
style={[getButtonStyle(), style]} style={[getButtonStyle(), style]}
onPress={onPress} onPress={onPress}
disabled={isDisabled} disabled={isDisabled}
activeOpacity={0.7} activeOpacity={0.85}
> >
{loading ? ( {loading ? (
<ActivityIndicator <ActivityIndicator
@ -146,7 +150,3 @@ export function MinimalButton({
</TouchableOpacity> </TouchableOpacity>
); );
} }
const styles = StyleSheet.create({
// No static styles needed - all dynamic based on theme
});

42
apps/mobile/src/components/MinimalCard.tsx
View File

@ -8,28 +8,22 @@ import {
} from "react-native"; } from "react-native";
import { useTheme } from "../contexts/ThemeContext"; import { useTheme } from "../contexts/ThemeContext";
type CardVariant = "default" | "elevated" | "bordered"; type CardVariant = "default" | "elevated" | "bordered" | "gradient";
interface MinimalCardProps { interface MinimalCardProps {
children: React.ReactNode; children: React.ReactNode;
variant?: CardVariant; variant?: CardVariant;
onPress?: () => void; onPress?: () => void;
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
padding?: number;
} }
/**
* MinimalCard - Clean card component without gradients
*
* Variants:
* - default: Subtle shadow on surface background
* - elevated: More prominent shadow
* - bordered: Border instead of shadow
*/
export function MinimalCard({ export function MinimalCard({
children, children,
variant = "default", variant = "default",
onPress, onPress,
style, style,
padding = 20,
}: MinimalCardProps) { }: MinimalCardProps) {
const { colors } = useTheme(); const { colors } = useTheme();
@ -37,13 +31,20 @@ export function MinimalCard({
styles.base, styles.base,
{ {
backgroundColor: colors.surface, backgroundColor: colors.surface,
padding: padding,
}, },
variant === "default" && styles.default, variant === "default" && styles.default,
variant === "elevated" && styles.elevated, variant === "elevated" && {
...styles.elevated,
backgroundColor: colors.surfaceElevated,
},
variant === "bordered" && { variant === "bordered" && {
borderWidth: 1, borderWidth: 1,
borderColor: colors.border, borderColor: colors.border,
}, },
variant === "gradient" && {
backgroundColor: colors.surfaceElevated,
},
style, style,
]; ];
@ -52,7 +53,7 @@ export function MinimalCard({
<TouchableOpacity <TouchableOpacity
style={cardStyles} style={cardStyles}
onPress={onPress} onPress={onPress}
activeOpacity={0.7} activeOpacity={0.85}
> >
{children} {children}
</TouchableOpacity> </TouchableOpacity>
@ -64,21 +65,20 @@ export function MinimalCard({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
base: { base: {
borderRadius: 12, borderRadius: 20,
padding: 16,
}, },
default: { default: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 3,
elevation: 1,
},
elevated: {
shadowColor: "#000", shadowColor: "#000",
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.08, shadowOpacity: 0.08,
shadowRadius: 8, shadowRadius: 8,
elevation: 2, elevation: 3,
},
elevated: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.12,
shadowRadius: 16,
elevation: 6,
}, },
}); });

23
apps/mobile/src/components/ProgressBar.tsx
View File

@ -3,43 +3,28 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext"; import { useTheme } from "../contexts/ThemeContext";
interface ProgressBarProps { interface ProgressBarProps {
progress: number; // 0-1 (e.g., 0.75 for 75%) progress: number;
color?: string; color?: string;
backgroundColor?: string; backgroundColor?: string;
height?: number; height?: number;
borderRadius?: number; borderRadius?: number;
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
animated?: boolean;
} }
/**
* ProgressBar - Simple linear progress indicator
*
* Usage:
* - Goal progress tracking
* - Loading states
* - Completion indicators
*
* Props:
* - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
* - color: Custom fill color (defaults to theme primary)
* - backgroundColor: Custom track color (defaults to theme border)
* - height: Bar height in pixels (defaults to 8)
* - borderRadius: Corner radius (defaults to 999 for full pill shape)
*/
export function ProgressBar({ export function ProgressBar({
progress, progress,
color, color,
backgroundColor, backgroundColor,
height = 8, height = 10,
borderRadius = 999, borderRadius = 999,
style, style,
}: ProgressBarProps) { }: ProgressBarProps) {
const { colors } = useTheme(); const { colors } = useTheme();
// Clamp progress between 0 and 1
const clampedProgress = Math.min(Math.max(progress, 0), 1); const clampedProgress = Math.min(Math.max(progress, 0), 1);
const trackColor = backgroundColor || colors.border; const trackColor = backgroundColor || colors.surfaceElevated;
const fillColor = color || colors.primary; const fillColor = color || colors.primary;
return ( return (

19
apps/mobile/src/components/SectionHeader.tsx
View File

@ -17,14 +17,6 @@ interface SectionHeaderProps {
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
} }
/**
* SectionHeader - Clean section header with optional action button
*
* Usage:
* - Divides content into logical sections
* - Optional subtitle for additional context
* - Optional action button (e.g., "See All", "Add New")
*/
export function SectionHeader({ export function SectionHeader({
title, title,
subtitle, subtitle,
@ -44,7 +36,7 @@ export function SectionHeader({
<Text <Text
style={[ style={[
typography.caption, typography.caption,
{ color: colors.textTertiary, marginTop: 2 }, { color: colors.textTertiary, marginTop: 4 },
]} ]}
> >
{subtitle} {subtitle}
@ -53,12 +45,7 @@ export function SectionHeader({
</View> </View>
{actionLabel && onActionPress && ( {actionLabel && onActionPress && (
<TouchableOpacity onPress={onActionPress} activeOpacity={0.7}> <TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
<Text <Text style={[typography.bodyEmphasis, { color: colors.primary }]}>
style={[
typography.body,
{ color: colors.primary, fontWeight: "600" },
]}
>
{actionLabel} {actionLabel}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -72,7 +59,7 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
marginBottom: 12, marginBottom: 16,
}, },
textContainer: { textContainer: {
flex: 1, flex: 1,

143
apps/mobile/src/styles/colors.ts
View File

@ -1,7 +1,6 @@
/** /**
* FitAI Color System * FitAI Color System - BOLD MODERN
* Nord Color Palette - A minimal, arctic-inspired palette * Electric Blue palette with high-energy fitness app aesthetics
* https://www.nordtheme.com/
*/ */
export interface ColorScheme { export interface ColorScheme {
@ -12,6 +11,7 @@ export interface ColorScheme {
// Accent Colors // Accent Colors
accent: string; accent: string;
secondary: string;
terracotta: string; terracotta: string;
sand: string; sand: string;
@ -21,6 +21,11 @@ export interface ColorScheme {
danger: string; danger: string;
info: string; info: string;
// Activity Ring Colors
calories: string;
water: string;
workouts: string;
// Neutrals // Neutrals
background: string; background: string;
surface: string; surface: string;
@ -39,97 +44,119 @@ export interface ColorScheme {
overlay: string; overlay: string;
overlayLight: string; overlayLight: string;
// Legacy compatibility (will be phased out) // Gradients (as arrays)
primaryGradient: string[];
cardGradient: string[];
// Legacy compatibility
white: string; white: string;
black: string; black: string;
} }
/** /**
* Light Mode Color Palette * Light Mode - Bold & Energetic
* Nord Snow Storm (light backgrounds) with Polar Night (dark text)
*/ */
export const lightColors: ColorScheme = { export const lightColors: ColorScheme = {
// Primary Colors (Nord Frost - Aurora blue-green) // Primary Colors - Electric Blue
primary: "#88C0D0", // Nord Frost 8 (main actions, cyan) primary: "#0066FF",
primaryDark: "#5E81AC", // Nord Frost 10 (dark blue) primaryDark: "#0052CC",
primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan) primaryLight: "#3385FF",
// Accent Colors // Accent Colors
accent: "#81A1C1", // Nord Frost 9 (blue-gray) accent: "#7B2CBF", // Purple
terracotta: "#D08770", // Nord Aurora 12 (orange - replaces terracotta) secondary: "#FF3B7A", // Hot Pink
sand: "#EBCB8B", // Nord Aurora 13 (yellow - warm accent) terracotta: "#FF6B35", // Neon Orange
sand: "#FFD60A", // Electric Yellow
// Status Colors // Status Colors - Vibrant
success: "#A3BE8C", // Nord Aurora 14 (green) success: "#00D26A",
warning: "#EBCB8B", // Nord Aurora 13 (yellow) warning: "#FFB800",
danger: "#BF616A", // Nord Aurora 11 (red) danger: "#FF3B3B",
info: "#81A1C1", // Nord Frost 9 (blue) info: "#00B8D9",
// Neutrals (Snow Storm palette) // Activity Ring Colors
background: "#ECEFF4", // Nord Snow Storm 3 (lightest) calories: "#FF6B35", // Orange for calories
surface: "#E5E9F0", // Nord Snow Storm 2 (medium) water: "#00B8D9", // Cyan for water
surfaceElevated: "#D8DEE9", // Nord Snow Storm 1 (slightly darker) workouts: "#0066FF", // Blue for workouts
// Text (Polar Night palette) // Neutrals - Bold dark on light
textPrimary: "#2E3440", // Nord Polar Night 0 (darkest) background: "#F5F5F7",
textSecondary: "#3B4252", // Nord Polar Night 1 surface: "#FFFFFF",
textTertiary: "#4C566A", // Nord Polar Night 3 surfaceElevated: "#FFFFFF",
// Text - High contrast dark
textPrimary: "#1A1A1A",
textSecondary: "#4A4A4A",
textTertiary: "#8E8E93",
// Borders // Borders
border: "#D8DEE9", // Nord Snow Storm 1 border: "#E5E5EA",
borderLight: "#E5E9F0", // Nord Snow Storm 2 borderLight: "#F0F0F5",
// Overlays // Overlays
overlay: "rgba(46, 52, 64, 0.5)", // Polar Night 0 overlay: "rgba(0, 0, 0, 0.5)",
overlayLight: "rgba(46, 52, 64, 0.05)", overlayLight: "rgba(0, 0, 0, 0.03)",
// Gradients
primaryGradient: ["#0066FF", "#0052CC"],
cardGradient: ["#FFFFFF", "#F8F8FA"],
// Legacy // Legacy
white: "#ECEFF4", white: "#FFFFFF",
black: "#2E3440", black: "#1A1A1A",
}; };
/** /**
* Dark Mode Color Palette * Dark Mode - Premium & Immersive
* Nord Polar Night (dark backgrounds) with Snow Storm (light text)
*/ */
export const darkColors: ColorScheme = { export const darkColors: ColorScheme = {
// Primary Colors (Nord Frost - adjusted for dark mode) // Primary Colors - Electric Blue (brighter on dark)
primary: "#88C0D0", // Nord Frost 8 (cyan - brighter on dark) primary: "#0A84FF",
primaryDark: "#5E81AC", // Nord Frost 10 (dark blue) primaryDark: "#0066FF",
primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan) primaryLight: "#5AC8FA",
// Accent Colors // Accent Colors
accent: "#81A1C1", // Nord Frost 9 (blue-gray) accent: "#BF5AF2", // Purple
terracotta: "#D08770", // Nord Aurora 12 (orange) secondary: "#FF375F", // Hot Pink
sand: "#EBCB8B", // Nord Aurora 13 (yellow) terracotta: "#FF9500", // Orange
sand: "#FFD60A", // Yellow
// Status Colors // Status Colors
success: "#A3BE8C", // Nord Aurora 14 (green) success: "#30D158",
warning: "#EBCB8B", // Nord Aurora 13 (yellow) warning: "#FFD60A",
danger: "#BF616A", // Nord Aurora 11 (red) danger: "#FF453A",
info: "#81A1C1", // Nord Frost 9 (blue) info: "#64D2FF",
// Neutrals (Polar Night palette) // Activity Ring Colors (even brighter for dark mode)
background: "#2E3440", // Nord Polar Night 0 (darkest) calories: "#FF9500",
surface: "#3B4252", // Nord Polar Night 1 (medium dark) water: "#64D2FF",
surfaceElevated: "#434C5E", // Nord Polar Night 2 (lighter) workouts: "#0A84FF",
// Text (Snow Storm palette) // Neutrals - Dark backgrounds
textPrimary: "#ECEFF4", // Nord Snow Storm 3 (lightest) background: "#000000",
textSecondary: "#E5E9F0", // Nord Snow Storm 2 surface: "#1C1C1E",
textTertiary: "#D8DEE9", // Nord Snow Storm 1 surfaceElevated: "#2C2C2E",
// Text - Bright on dark
textPrimary: "#FFFFFF",
textSecondary: "#EBEBF5",
textTertiary: "#8E8E93",
// Borders // Borders
border: "#434C5E", // Nord Polar Night 2 border: "#38383A",
borderLight: "#3B4252", // Nord Polar Night 1 borderLight: "#48484A",
// Overlays // Overlays
overlay: "rgba(0, 0, 0, 0.6)", overlay: "rgba(0, 0, 0, 0.6)",
overlayLight: "rgba(236, 239, 244, 0.05)", // Snow Storm 3 overlayLight: "rgba(255, 255, 255, 0.05)",
// Gradients
primaryGradient: ["#0A84FF", "#0066FF"],
cardGradient: ["#1C1C1E", "#2C2C2E"],
// Legacy // Legacy
white: "#ECEFF4", white: "#FFFFFF",
black: "#2E3440", black: "#000000",
}; };
/** /**

93
apps/mobile/src/styles/typography.ts
View File

@ -1,53 +1,54 @@
/** /**
* FitAI Typography System * FitAI Typography System - BOLD MODERN
* Minimalist typography with clear hierarchy using system fonts * High-impact typography with clear hierarchy using system fonts
*/ */
import { TextStyle } from "react-native"; import { TextStyle } from "react-native";
/** /**
* Font Sizes * Font Sizes - Larger for bold impact
* Refined scale with fewer sizes for clearer hierarchy
*/ */
export const fontSize = { export const fontSize = {
xs: 11, xs: 12,
sm: 13, sm: 14,
base: 15, base: 16,
md: 17, // Body emphasis md: 18, // Body emphasis
lg: 20, lg: 22,
xl: 24, xl: 26,
"2xl": 28, "2xl": 32,
"3xl": 34, "3xl": 40,
"4xl": 40, "4xl": 52,
"5xl": 64,
} as const; } as const;
/** /**
* Font Weights * Font Weights - Emphasize bold
*/ */
export const fontWeight = { export const fontWeight = {
regular: "400" as TextStyle["fontWeight"], regular: "400" as TextStyle["fontWeight"],
medium: "500" as TextStyle["fontWeight"], medium: "500" as TextStyle["fontWeight"],
semibold: "600" as TextStyle["fontWeight"], semibold: "600" as TextStyle["fontWeight"],
bold: "700" as TextStyle["fontWeight"], bold: "700" as TextStyle["fontWeight"],
extrabold: "800" as TextStyle["fontWeight"],
} as const; } as const;
/** /**
* Line Heights * Line Heights
*/ */
export const lineHeight = { export const lineHeight = {
tight: 1.2, tight: 1.15,
normal: 1.5, normal: 1.4,
relaxed: 1.7, relaxed: 1.6,
} as const; } as const;
/** /**
* Letter Spacing * Letter Spacing
*/ */
export const letterSpacing = { export const letterSpacing = {
tight: -0.5, tight: -1,
normal: 0, normal: 0,
wide: 0.5, wide: 0.5,
wider: 1, wider: 1.5,
} as const; } as const;
/** /**
@ -58,11 +59,14 @@ export interface TypographyPresets {
h1: TextStyle; h1: TextStyle;
h2: TextStyle; h2: TextStyle;
h3: TextStyle; h3: TextStyle;
h4: TextStyle;
body: TextStyle; body: TextStyle;
bodyEmphasis: TextStyle; bodyEmphasis: TextStyle;
label: TextStyle; label: TextStyle;
stat: TextStyle; stat: TextStyle;
statLarge: TextStyle;
caption: TextStyle; caption: TextStyle;
button: TextStyle;
} }
export const createTypographyPresets = ( export const createTypographyPresets = (
@ -70,25 +74,33 @@ export const createTypographyPresets = (
textSecondary: string, textSecondary: string,
textTertiary: string, textTertiary: string,
): TypographyPresets => ({ ): TypographyPresets => ({
// Display Text (Screen Titles) // Display Text (Screen Titles) - Extra Bold
h1: { h1: {
fontSize: fontSize["3xl"], fontSize: fontSize["4xl"],
fontWeight: fontWeight.bold, fontWeight: fontWeight.extrabold,
letterSpacing: letterSpacing.tight, letterSpacing: letterSpacing.tight,
lineHeight: fontSize["3xl"] * lineHeight.tight, lineHeight: fontSize["4xl"] * lineHeight.tight,
color: textPrimary, color: textPrimary,
}, },
// Section Headers // Section Headers - Bold
h2: { h2: {
fontSize: fontSize.xl, fontSize: fontSize["2xl"],
fontWeight: fontWeight.bold,
letterSpacing: -0.5,
color: textPrimary,
},
// Card Titles - Semibold
h3: {
fontSize: fontSize.lg,
fontWeight: fontWeight.semibold, fontWeight: fontWeight.semibold,
letterSpacing: -0.3, letterSpacing: -0.3,
color: textPrimary, color: textPrimary,
}, },
// Card Titles // Small Headers
h3: { h4: {
fontSize: fontSize.md, fontSize: fontSize.md,
fontWeight: fontWeight.semibold, fontWeight: fontWeight.semibold,
color: textPrimary, color: textPrimary,
@ -112,17 +124,27 @@ export const createTypographyPresets = (
// Labels (uppercase, spaced) // Labels (uppercase, spaced)
label: { label: {
fontSize: fontSize.sm, fontSize: fontSize.xs,
fontWeight: fontWeight.medium, fontWeight: fontWeight.semibold,
letterSpacing: letterSpacing.wide, letterSpacing: letterSpacing.wider,
textTransform: "uppercase", textTransform: "uppercase",
color: textTertiary, color: textTertiary,
}, },
// Stats/Numbers // Stats/Numbers - Bold Large
stat: { stat: {
fontSize: fontSize["2xl"], fontSize: fontSize["3xl"],
fontWeight: fontWeight.bold, 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, color: textPrimary,
}, },
@ -132,6 +154,13 @@ export const createTypographyPresets = (
fontWeight: fontWeight.regular, fontWeight: fontWeight.regular,
color: textTertiary, color: textTertiary,
}, },
// Button Text
button: {
fontSize: fontSize.base,
fontWeight: fontWeight.bold,
letterSpacing: 0.5,
},
}); });
/** /**