diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png index e0f6505..ecf0b5a 100644 Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png differ diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png index 811e686..cb8dddc 100644 Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png differ diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png index dea7d2d..8937dbd 100644 Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png differ diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png index a092d41..8ce14ac 100644 Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png differ diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png index cbd23c1..a3451b9 100644 Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png differ diff --git a/generate-app-icons b/generate-app-icons new file mode 100755 index 0000000..f992c53 --- /dev/null +++ b/generate-app-icons @@ -0,0 +1,45 @@ +#!/usr/bin/env bash + +ICON="assets/app-icon.png" + +# Android icons +for d in mdpi:48 hdpi:72 xhdpi:96 xxhdpi:144 xxxhdpi:192; do + density="${d%%:*}" + size="${d##*:}" + + out_dir="android/app/src/main/res/mipmap-${density}" + round_icon="${out_dir}/ic_launcher_round.png" + + sips -z "$size" "$size" "$ICON" \ + --out "${out_dir}/ic_launcher.png" >/dev/null + + sips -z "$size" "$size" "$ICON" \ + --out "$round_icon" >/dev/null + + # Proper circular crop with preserved transparency (ImageMagick) + if command -v magick >/dev/null 2>&1; then + magick "$round_icon" \ + -alpha set -background none \ + \( -size ${size}x${size} xc:none \ + -fill white -draw "circle $((size/2)),$((size/2)) $((size/2)),1" \) \ + -compose CopyOpacity -composite \ + "$round_icon" + else + echo "Warning: ImageMagick not found; skipping circular crop for $round_icon" >&2 + fi +done + +# iOS icons +OUT="ios/Expensso/Images.xcassets/AppIcon.appiconset" + +sips -z 40 40 "$ICON" --out "$OUT/Icon-20@2x.png" >/dev/null +sips -z 60 60 "$ICON" --out "$OUT/Icon-20@3x.png" >/dev/null +sips -z 58 58 "$ICON" --out "$OUT/Icon-29@2x.png" >/dev/null +sips -z 87 87 "$ICON" --out "$OUT/Icon-29@3x.png" >/dev/null +sips -z 80 80 "$ICON" --out "$OUT/Icon-40@2x.png" >/dev/null +sips -z 120 120 "$ICON" --out "$OUT/Icon-40@3x.png" >/dev/null +sips -z 120 120 "$ICON" --out "$OUT/Icon-60@2x.png" >/dev/null +sips -z 180 180 "$ICON" --out "$OUT/Icon-60@3x.png" >/dev/null +sips -z 1024 1024 "$ICON" --out "$OUT/Icon-1024.png" >/dev/null + +echo "Icons generated!" diff --git a/package.json b/package.json index 27c897b..208c208 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "Expensso", - "version": "0.0.1", + "name": "expensso", + "version": "0.1.1-alpha", "private": true, "scripts": { "android": "react-native run-android", diff --git a/src/components/CustomBottomSheet.tsx b/src/components/CustomBottomSheet.tsx index 1537e6f..87387cf 100644 --- a/src/components/CustomBottomSheet.tsx +++ b/src/components/CustomBottomSheet.tsx @@ -199,6 +199,10 @@ function makeStyles(theme: MD3Theme) { backgroundColor: colors.surfaceContainerLow, borderTopLeftRadius: shape.extraLarge, borderTopRightRadius: shape.extraLarge, + borderTopWidth: 1, + borderLeftWidth: 1, + borderRightWidth: 1, + borderColor: colors.outlineVariant, }, handleContainer: { alignItems: 'center', diff --git a/src/components/SummaryCard.tsx b/src/components/SummaryCard.tsx index 5c02149..b5862cd 100644 --- a/src/components/SummaryCard.tsx +++ b/src/components/SummaryCard.tsx @@ -21,7 +21,13 @@ export const SummaryCard: React.FC = ({ }) => { const {colors, typography, elevation, shape, spacing} = useTheme(); return ( - + {icon && {icon}} {title} @@ -36,7 +42,6 @@ export const SummaryCard: React.FC = ({ const styles = StyleSheet.create({ card: { - borderRadius: 16, padding: 16, shadowColor: '#000', shadowOffset: {width: 0, height: 2}, diff --git a/src/components/TransactionItem.tsx b/src/components/TransactionItem.tsx index ffdd42d..552007b 100644 --- a/src/components/TransactionItem.tsx +++ b/src/components/TransactionItem.tsx @@ -76,7 +76,7 @@ const styles = StyleSheet.create({ iconCircle: { width: 44, height: 44, - borderRadius: 22, + borderRadius: 4, justifyContent: 'center', alignItems: 'center', }, diff --git a/src/components/dashboard/FinancialHealthGauges.tsx b/src/components/dashboard/FinancialHealthGauges.tsx index ff4e91b..80bcd56 100644 --- a/src/components/dashboard/FinancialHealthGauges.tsx +++ b/src/components/dashboard/FinancialHealthGauges.tsx @@ -187,6 +187,8 @@ function makeStyles(theme: MD3Theme) { flex: 1, backgroundColor: colors.surfaceContainerLow, borderRadius: shape.medium, + borderWidth: 1, + borderColor: colors.outlineVariant, padding: spacing.lg, ...elevation.level1, }, @@ -236,6 +238,8 @@ function makeStyles(theme: MD3Theme) { marginTop: spacing.md, backgroundColor: colors.surfaceContainerLow, borderRadius: shape.medium, + borderWidth: 1, + borderColor: colors.outlineVariant, padding: spacing.lg, ...elevation.level1, }, diff --git a/src/components/dashboard/NetWorthHeroCard.tsx b/src/components/dashboard/NetWorthHeroCard.tsx index 22e8ad9..2efa5e2 100644 --- a/src/components/dashboard/NetWorthHeroCard.tsx +++ b/src/components/dashboard/NetWorthHeroCard.tsx @@ -4,16 +4,18 @@ */ import React, {useMemo} from 'react'; -import {View, Text, StyleSheet} from 'react-native'; +import {View, Text, StyleSheet, Dimensions} from 'react-native'; import {LineChart} from 'react-native-gifted-charts'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import Animated, {FadeInDown} from 'react-native-reanimated'; +import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'; import {useTheme} from '../../theme'; import type {MD3Theme} from '../../theme'; import {formatCurrency, formatCompact} from '../../utils'; import type {Currency, NetWorthSnapshot} from '../../types'; +const {width: SCREEN_WIDTH} = Dimensions.get('window'); + interface NetWorthHeroCardProps { netWorth: number; totalAssets: number; @@ -39,10 +41,26 @@ export const NetWorthHeroCard: React.FC = ({ })); }, [history]); + // Calculate trend percentage from history + const trendPercentage = useMemo(() => { + if (history.length < 2) return null; + const latest = history[history.length - 1].netWorth; + const previous = history[history.length - 2].netWorth; + if (previous === 0) return null; + return ((latest - previous) / Math.abs(previous)) * 100; + }, [history]); + const isPositive = netWorth >= 0; + const isTrendUp = trendPercentage && trendPercentage > 0; return ( + {/* Decorative Background Pattern */} + + + + + {/* Sparkline Background */} {sparklineData.length >= 2 && ( @@ -55,69 +73,127 @@ export const NetWorthHeroCard: React.FC = ({ hideAxesAndRules color={ theme.isDark - ? theme.colors.primaryContainer + '40' - : theme.colors.primary + '25' + ? theme.colors.primaryContainer + '60' + : theme.colors.primary + '35' } startFillColor={ theme.isDark - ? theme.colors.primaryContainer + '20' - : theme.colors.primary + '12' + ? theme.colors.primaryContainer + '25' + : theme.colors.primary + '15' } endFillColor="transparent" - thickness={2} - width={280} - height={100} + thickness={2.5} + width={SCREEN_WIDTH - 80} + height={120} adjustToWidth isAnimated animationDuration={800} initialSpacing={0} endSpacing={0} - yAxisOffset={Math.min(...sparklineData.map(d => d.value)) * 0.95} + yAxisOffset={Math.min(...sparklineData.map(d => d.value)) * 0.92} /> )} {/* Content Overlay */} - - - NET WORTH + {/* Header with trend badge */} + + + + NET WORTH + + {trendPercentage !== null && ( + + + + {Math.abs(trendPercentage).toFixed(1)}% + + + )} + {/* Main Value */} {formatCurrency(netWorth, currency)} - {/* Asset / Liability Split */} - - - - - Assets - - {formatCompact(totalAssets, currency)} - + {/* Asset / Liability Split - Enhanced */} + + + + + + + + Assets + + {formatCompact(totalAssets, currency)} + + - - - - - - Liabilities - - {formatCompact(totalLiabilities, currency)} - + + + + + + + + + Liabilities + + {formatCompact(totalLiabilities, currency)} + + + + + {/* Visual Progress Bar */} + + + @@ -131,70 +207,143 @@ function makeStyles(theme: MD3Theme) { card: { marginHorizontal: spacing.xl, marginTop: spacing.md, - borderRadius: shape.extraLarge, + borderRadius: shape.medium, + borderWidth: 1.5, + borderColor: colors.outlineVariant, backgroundColor: colors.surfaceContainerLow, overflow: 'hidden', ...elevation.level3, }, + decorativeBackground: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + overflow: 'hidden', + }, + decorCircle: { + position: 'absolute', + width: 200, + height: 200, + borderRadius: 100, + top: -60, + right: -40, + }, + decorCircle2: { + position: 'absolute', + width: 150, + height: 150, + borderRadius: 75, + bottom: -30, + left: -20, + }, sparklineContainer: { position: 'absolute', bottom: 0, left: 0, right: 0, - opacity: 0.6, + opacity: 0.7, overflow: 'hidden', - borderRadius: shape.extraLarge, }, content: { padding: spacing.xxl, + paddingTop: spacing.xl, + paddingBottom: spacing.lg, + }, + headerRow: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: spacing.sm, }, labelRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs, - marginBottom: spacing.sm, }, label: { - ...typography.labelSmall, + ...typography.labelMedium, color: colors.onSurfaceVariant, - letterSpacing: 1.5, + letterSpacing: 1.2, + fontWeight: '600', + }, + trendBadge: { + flexDirection: 'row', + alignItems: 'center', + gap: 4, + paddingHorizontal: spacing.sm, + paddingVertical: 4, + borderRadius: shape.small, + }, + trendText: { + ...typography.labelSmall, + fontWeight: '700', }, value: { ...typography.displaySmall, - fontWeight: '700', + fontWeight: '800', marginBottom: spacing.lg, + marginTop: spacing.xs, + letterSpacing: -0.5, + }, + splitContainer: { + gap: spacing.md, }, splitRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: colors.surfaceContainer, borderRadius: shape.medium, - padding: spacing.md, + borderWidth: 1, + borderColor: colors.outlineVariant + '50', + padding: spacing.lg, }, splitItem: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: spacing.sm, - justifyContent: 'center', }, - splitDot: { - width: 8, - height: 8, - borderRadius: 4, + iconWrapper: { + width: 32, + height: 32, + borderRadius: shape.small, + justifyContent: 'center', + alignItems: 'center', + }, + splitTextContainer: { + flex: 1, }, splitLabel: { ...typography.labelSmall, color: colors.onSurfaceVariant, + marginBottom: 2, }, splitValue: { - ...typography.titleSmall, + ...typography.titleMedium, fontWeight: '700', }, splitDivider: { width: 1, - height: 28, + height: 36, backgroundColor: colors.outlineVariant, + marginHorizontal: spacing.xs, + }, + progressBar: { + flexDirection: 'row', + height: 6, + borderRadius: 3, + overflow: 'hidden', + backgroundColor: colors.surfaceContainerHighest, + }, + progressAsset: { + borderTopLeftRadius: 3, + borderBottomLeftRadius: 3, + }, + progressLiability: { + borderTopRightRadius: 3, + borderBottomRightRadius: 3, }, }); } diff --git a/src/components/dashboard/RecentActivityList.tsx b/src/components/dashboard/RecentActivityList.tsx index b20277a..9c1f2d7 100644 --- a/src/components/dashboard/RecentActivityList.tsx +++ b/src/components/dashboard/RecentActivityList.tsx @@ -174,7 +174,7 @@ function makeStyles(theme: MD3Theme) { iconCircle: { width: 40, height: 40, - borderRadius: 20, + borderRadius: 4, justifyContent: 'center', alignItems: 'center', }, diff --git a/src/components/dashboard/WealthDistributionChart.tsx b/src/components/dashboard/WealthDistributionChart.tsx index 6c613ea..3679e5c 100644 --- a/src/components/dashboard/WealthDistributionChart.tsx +++ b/src/components/dashboard/WealthDistributionChart.tsx @@ -126,6 +126,8 @@ function makeStyles(theme: MD3Theme) { marginTop: spacing.xl, backgroundColor: colors.surfaceContainerLow, borderRadius: shape.large, + borderWidth: 1, + borderColor: colors.outlineVariant, padding: spacing.xl, ...elevation.level1, }, @@ -164,7 +166,7 @@ function makeStyles(theme: MD3Theme) { legendDot: { width: 10, height: 10, - borderRadius: 5, + borderRadius: 2, }, legendText: { flex: 1, diff --git a/src/constants/index.ts b/src/constants/index.ts index f592bc3..3f4d63e 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -48,6 +48,7 @@ export const STATIC_EXCHANGE_RATES: ExchangeRates = { INR: 1, USD: 84.5, // 1 USD = 84.5 INR EUR: 91.2, // 1 EUR = 91.2 INR + GBP: 106.8, // 1 GBP = 106.8 INR }; // ─── Currency Symbols ──────────────────────────────────────────────── @@ -56,6 +57,7 @@ export const CURRENCY_SYMBOLS: Record = { INR: '₹', USD: '$', EUR: '€', + GBP: '£', }; // ─── Theme Colors ──────────────────────────────────────────────────── diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 0c7ee97..2c559cb 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -18,7 +18,7 @@ export default { // ─── Tabs ─── tabs: { dashboard: 'Dashboard', - expenses: 'Expenses', + expenses: 'Transactions', netWorth: 'Net Worth', settings: 'Settings', }, @@ -38,9 +38,9 @@ export default { lastMonth: 'Last Month', }, - // ─── Expenses ─── + // ─── Transactions ─── expenses: { - title: 'Expenses', + title: 'Transactions', addExpense: 'Add Expense', addIncome: 'Add Income', amount: 'Amount', diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index afd5b57..9cf38b3 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -17,7 +17,7 @@ const Tab = createBottomTabNavigator(); const TAB_ICONS: Record = { Dashboard: {focused: 'view-dashboard', unfocused: 'view-dashboard-outline'}, - Expenses: {focused: 'receipt', unfocused: 'receipt'}, + Transactions: {focused: 'receipt', unfocused: 'receipt'}, NetWorth: {focused: 'chart-line', unfocused: 'chart-line'}, Settings: {focused: 'cog', unfocused: 'cog-outline'}, }; @@ -71,7 +71,7 @@ const AppNavigator: React.FC = () => { options={{tabBarLabel: t('tabs.dashboard')}} /> diff --git a/src/screens/DashboardScreen.tsx b/src/screens/DashboardScreen.tsx index 5c691d0..5508170 100644 --- a/src/screens/DashboardScreen.tsx +++ b/src/screens/DashboardScreen.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect} from 'react'; +import React, {useCallback} from 'react'; import { View, Text, @@ -15,7 +15,7 @@ import {BarChart, PieChart} from 'react-native-gifted-charts'; import {SummaryCard, SectionHeader, TransactionItem, EmptyState} from '../components'; import {useSettingsStore, useNetWorthStore, useExpenseStore} from '../store'; -import {formatCurrency, formatCompact, percentageChange} from '../utils'; +import {formatCurrency, formatCompact} from '../utils'; import {COLORS} from '../constants'; import {useThemeColors, useIsDarkTheme} from '../hooks'; @@ -280,7 +280,9 @@ const styles = StyleSheet.create({ backgroundColor: COLORS.primary + '15', paddingHorizontal: 12, paddingVertical: 6, - borderRadius: 20, + borderRadius: 0, + borderWidth: 1, + borderColor: COLORS.primary + '30', }, currencyText: { fontSize: 13, @@ -297,7 +299,9 @@ const styles = StyleSheet.create({ backgroundColor: COLORS.surface, margin: 20, marginTop: 12, - borderRadius: 20, + borderRadius: 4, + borderWidth: 1, + borderColor: COLORS.border, padding: 24, shadowColor: '#000', shadowOffset: {width: 0, height: 4}, @@ -359,7 +363,9 @@ const styles = StyleSheet.create({ chartCard: { backgroundColor: COLORS.surface, marginHorizontal: 20, - borderRadius: 16, + borderRadius: 4, + borderWidth: 1, + borderColor: COLORS.border, padding: 20, alignItems: 'center', shadowColor: '#000', @@ -396,7 +402,7 @@ const styles = StyleSheet.create({ legendDot: { width: 10, height: 10, - borderRadius: 5, + borderRadius: 2, marginRight: 8, }, legendText: { @@ -414,7 +420,9 @@ const styles = StyleSheet.create({ transactionsList: { backgroundColor: COLORS.surface, marginHorizontal: 20, - borderRadius: 16, + borderRadius: 4, + borderWidth: 1, + borderColor: COLORS.border, overflow: 'hidden', shadowColor: '#000', shadowOffset: {width: 0, height: 2}, diff --git a/src/screens/ExpensesScreen.tsx b/src/screens/ExpensesScreen.tsx index a7bb713..d34094d 100644 --- a/src/screens/ExpensesScreen.tsx +++ b/src/screens/ExpensesScreen.tsx @@ -222,26 +222,29 @@ const ExpensesScreen: React.FC = () => { {t('expenses.title')} - item.id} - renderItem={({item}) => ( - - )} - ListHeaderComponent={renderHeader} - ListEmptyComponent={ - - } - ItemSeparatorComponent={() => ( - - )} - contentContainerStyle={{paddingBottom: 80 + insets.bottom}} - showsVerticalScrollIndicator={false} - /> + {renderHeader()} + + + item.id} + renderItem={({item}) => ( + + )} + ListEmptyComponent={ + + } + ItemSeparatorComponent={() => ( + + )} + contentContainerStyle={{paddingBottom: 80 + insets.bottom}} + showsVerticalScrollIndicator={false} + /> + {/* FAB */} { navigation.navigate('Expenses')} + onViewAll={() => navigation.navigate('Transactions')} /> @@ -196,7 +196,9 @@ function makeStyles(theme: MD3Theme) { backgroundColor: colors.primaryContainer, paddingHorizontal: spacing.md, paddingVertical: spacing.sm, - borderRadius: 20, + borderRadius: 4, + borderWidth: 1, + borderColor: colors.outline, }, currencyText: { ...typography.labelMedium, diff --git a/src/screens/NetWorthScreen.tsx b/src/screens/NetWorthScreen.tsx index 33c3705..4434697 100644 --- a/src/screens/NetWorthScreen.tsx +++ b/src/screens/NetWorthScreen.tsx @@ -545,6 +545,8 @@ function makeStyles(theme: MD3Theme) { marginHorizontal: spacing.xl, marginTop: spacing.md, borderRadius: shape.extraLarge, + borderWidth: 1.5, + borderColor: colors.outlineVariant, padding: spacing.xl, ...elevation.level2, }, @@ -586,6 +588,8 @@ function makeStyles(theme: MD3Theme) { backgroundColor: colors.surfaceContainerLow, marginHorizontal: spacing.xl, borderRadius: shape.large, + borderWidth: 1, + borderColor: colors.outlineVariant, padding: spacing.xl, alignItems: 'center', ...elevation.level1, @@ -594,6 +598,8 @@ function makeStyles(theme: MD3Theme) { backgroundColor: colors.surfaceContainerLow, marginHorizontal: spacing.xl, borderRadius: shape.large, + borderWidth: 1, + borderColor: colors.outlineVariant, overflow: 'hidden', ...elevation.level1, }, @@ -610,7 +616,7 @@ function makeStyles(theme: MD3Theme) { listIcon: { width: 42, height: 42, - borderRadius: 21, + borderRadius: 4, justifyContent: 'center', alignItems: 'center', }, diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index ee10de0..0adbc96 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -228,7 +228,7 @@ const SettingsScreen: React.FC = () => { icon="information" iconColor="#7E57C2" label={t('settings.version')} - value="0.1.0 Alpha" + value="0.1.1-alpha" /> @@ -346,6 +346,8 @@ function makeStyles(theme: MD3Theme) { sectionCard: { backgroundColor: colors.surfaceContainerLow, borderRadius: shape.large, + borderWidth: 1, + borderColor: colors.outlineVariant, overflow: 'hidden', ...elevation.level1, }, diff --git a/src/theme/md3.ts b/src/theme/md3.ts index a1e17cd..c69f1d9 100644 --- a/src/theme/md3.ts +++ b/src/theme/md3.ts @@ -167,67 +167,70 @@ export const MD3DarkColors: typeof MD3LightColors = { // ─── MD3 Typography Scale ──────────────────────────────────────────── -const fontFamily = 'System'; // Falls back to Roboto on Android, SF Pro on iOS +const fontFamily = 'JetBrainsMono-Regular'; +const fontFamilyMedium = 'JetBrainsMono-Medium'; +const fontFamilySemiBold = 'JetBrainsMono-SemiBold'; +const fontFamilyBold = 'JetBrainsMono-Bold'; export const MD3Typography = { displayLarge: { - fontFamily, + fontFamily: fontFamilyBold, fontSize: 57, fontWeight: '400' as const, lineHeight: 64, letterSpacing: -0.25, }, displayMedium: { - fontFamily, + fontFamily: fontFamilyBold, fontSize: 45, fontWeight: '400' as const, lineHeight: 52, letterSpacing: 0, }, displaySmall: { - fontFamily, + fontFamily: fontFamilySemiBold, fontSize: 36, fontWeight: '400' as const, lineHeight: 44, letterSpacing: 0, }, headlineLarge: { - fontFamily, + fontFamily: fontFamilySemiBold, fontSize: 32, fontWeight: '400' as const, lineHeight: 40, letterSpacing: 0, }, headlineMedium: { - fontFamily, + fontFamily: fontFamilySemiBold, fontSize: 28, fontWeight: '400' as const, lineHeight: 36, letterSpacing: 0, }, headlineSmall: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 24, fontWeight: '400' as const, lineHeight: 32, letterSpacing: 0, }, titleLarge: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 22, fontWeight: '500' as const, lineHeight: 28, letterSpacing: 0, }, titleMedium: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 16, fontWeight: '500' as const, lineHeight: 24, letterSpacing: 0.15, }, titleSmall: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 14, fontWeight: '500' as const, lineHeight: 20, @@ -255,21 +258,21 @@ export const MD3Typography = { letterSpacing: 0.4, }, labelLarge: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 14, fontWeight: '500' as const, lineHeight: 20, letterSpacing: 0.1, }, labelMedium: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 12, fontWeight: '500' as const, lineHeight: 16, letterSpacing: 0.5, }, labelSmall: { - fontFamily, + fontFamily: fontFamilyMedium, fontSize: 11, fontWeight: '500' as const, lineHeight: 16, @@ -328,11 +331,11 @@ export const MD3Elevation = { export const MD3Shape = { none: 0, - extraSmall: 4, - small: 8, - medium: 12, - large: 16, - extraLarge: 28, + extraSmall: 2, + small: 2, + medium: 4, + large: 4, + extraLarge: 6, full: 9999, };