fix(tv): font sizes

2026-03-15 22:06:17 +00:00 · 2026-01-19 20:01:00 +01:00
parent f4445c4152
commit 2b36d4bc76
35 changed files with 437 additions and 167 deletions
--- a/components/tv/TVActorCard.tsx
+++ b/components/tv/TVActorCard.tsx
@@ -3,6 +3,7 @@ import { Image } from "expo-image";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVActorCardProps {
@@ -22,7 +23,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
      useTVFocusAnimation({ scaleAmount: 1.08 });

    const imageUrl = person.Id
-      ? `${apiBasePath}/Items/${person.Id}/Images/Primary?fillWidth=200&fillHeight=200&quality=90`
+      ? `${apiBasePath}/Items/${person.Id}/Images/Primary?fillWidth=280&fillHeight=280&quality=90`
      : null;

    return (
@@ -38,7 +39,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
            animatedStyle,
            {
              alignItems: "center",
-              width: 120,
+              width: 160,
              shadowColor: "#fff",
              shadowOffset: { width: 0, height: 0 },
              shadowOpacity: focused ? 0.5 : 0,
@@ -48,12 +49,12 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
        >
          <View
            style={{
-              width: 100,
-              height: 100,
-              borderRadius: 50,
+              width: 140,
+              height: 140,
+              borderRadius: 70,
              overflow: "hidden",
              backgroundColor: "rgba(255,255,255,0.1)",
-              marginBottom: 12,
+              marginBottom: 14,
              borderWidth: focused ? 3 : 0,
              borderColor: "#fff",
            }}
@@ -74,7 +75,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
              >
                <Ionicons
                  name='person'
-                  size={40}
+                  size={56}
                  color='rgba(255,255,255,0.4)'
                />
              </View>
@@ -83,11 +84,11 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(

          <Text
            style={{
-              fontSize: 14,
+              fontSize: TVTypography.body,
              fontWeight: "600",
              color: focused ? "#fff" : "rgba(255,255,255,0.9)",
              textAlign: "center",
-              marginBottom: 2,
+              marginBottom: 4,
            }}
            numberOfLines={1}
          >
@@ -97,7 +98,7 @@ export const TVActorCard = React.forwardRef<View, TVActorCardProps>(
          {person.Role && (
            <Text
              style={{
-                fontSize: 12,
+                fontSize: TVTypography.callout,
                color: focused
                  ? "rgba(255,255,255,0.8)"
                  : "rgba(255,255,255,0.5)",
--- a/components/tv/TVCancelButton.tsx
+++ b/components/tv/TVCancelButton.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVCancelButtonProps {
@@ -47,7 +48,7 @@ export const TVCancelButton: React.FC<TVCancelButtonProps> = ({
        />
        <Text
          style={{
-            fontSize: 16,
+            fontSize: TVTypography.callout,
            color: focused ? "#000" : "rgba(255,255,255,0.8)",
            fontWeight: "500",
          }}
--- a/components/tv/TVCastCrewText.tsx
+++ b/components/tv/TVCastCrewText.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";

 export interface TVCastCrewTextProps {
  director?: BaseItemPerson | null;
@@ -23,7 +24,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
      <View style={{ marginBottom: 32 }}>
        <Text
          style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
            fontWeight: "600",
            color: "#FFFFFF",
            marginBottom: 16,
@@ -36,7 +37,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
            <View>
              <Text
                style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                  color: "#6B7280",
                  textTransform: "uppercase",
                  letterSpacing: 1,
@@ -45,7 +46,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
              >
                {t("item_card.director")}
              </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                {director.Name}
              </Text>
            </View>
@@ -54,7 +55,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
            <View style={{ flex: 1 }}>
              <Text
                style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                  color: "#6B7280",
                  textTransform: "uppercase",
                  letterSpacing: 1,
@@ -63,7 +64,7 @@ export const TVCastCrewText: React.FC<TVCastCrewTextProps> = React.memo(
              >
                {t("item_card.cast")}
              </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                {cast.map((c) => c.Name).join(", ")}
              </Text>
            </View>
--- a/components/tv/TVCastSection.tsx
+++ b/components/tv/TVCastSection.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, TVFocusGuideView, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { TVActorCard } from "./TVActorCard";

 export interface TVCastSectionProps {
@@ -30,13 +31,13 @@ export const TVCastSection: React.FC<TVCastSectionProps> = React.memo(
    }

    return (
-      <View style={{ marginBottom: 32 }}>
+      <View style={{ marginBottom: 40 }}>
        <Text
          style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
            fontWeight: "600",
            color: "#FFFFFF",
-            marginBottom: 20,
+            marginBottom: 24,
          }}
        >
          {t("item_card.cast")}
@@ -54,8 +55,8 @@ export const TVCastSection: React.FC<TVCastSectionProps> = React.memo(
          style={{ marginHorizontal: -80, overflow: "visible" }}
          contentContainerStyle={{
            paddingHorizontal: 80,
-            paddingVertical: 12,
-            gap: 20,
+            paddingVertical: 16,
+            gap: 28,
          }}
        >
          {cast.map((person, index) => (
--- a/components/tv/TVLanguageCard.tsx
+++ b/components/tv/TVLanguageCard.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVLanguageCardProps {
@@ -81,11 +82,11 @@ const styles = StyleSheet.create({
    paddingHorizontal: 12,
  },
  languageCardText: {
-    fontSize: 15,
+    fontSize: TVTypography.callout,
    fontWeight: "500",
  },
  languageCardCode: {
-    fontSize: 11,
+    fontSize: TVTypography.callout,
    marginTop: 2,
  },
  checkmark: {
--- a/components/tv/TVMetadataBadges.tsx
+++ b/components/tv/TVMetadataBadges.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { View } from "react-native";
 import { Badge } from "@/components/Badge";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";

 export interface TVMetadataBadgesProps {
  year?: number | null;
@@ -19,15 +20,19 @@ export const TVMetadataBadges: React.FC<TVMetadataBadgesProps> = React.memo(
          flexDirection: "row",
          alignItems: "center",
          flexWrap: "wrap",
-          gap: 12,
-          marginBottom: 20,
+          gap: 16,
+          marginBottom: 24,
        }}
      >
        {year != null && (
-          <Text style={{ color: "#9CA3AF", fontSize: 18 }}>{year}</Text>
+          <Text style={{ color: "white", fontSize: TVTypography.body }}>
+            {year}
+          </Text>
        )}
        {duration && (
-          <Text style={{ color: "#9CA3AF", fontSize: 18 }}>{duration}</Text>
+          <Text style={{ color: "white", fontSize: TVTypography.body }}>
+            {duration}
+          </Text>
        )}
        {officialRating && <Badge text={officialRating} variant='gray' />}
        {communityRating != null && (
--- a/components/tv/TVNextEpisodeCountdown.tsx
+++ b/components/tv/TVNextEpisodeCountdown.tsx
@@ -13,6 +13,7 @@ import Animated, {
  withTiming,
 } from "react-native-reanimated";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

 export interface TVNextEpisodeCountdownProps {
@@ -129,19 +130,19 @@ const styles = StyleSheet.create({
    width: 280,
  },
  label: {
-    fontSize: 13,
+    fontSize: TVTypography.callout,
    color: "rgba(255,255,255,0.5)",
    textTransform: "uppercase",
    letterSpacing: 1,
    marginBottom: 4,
  },
  seriesName: {
-    fontSize: 16,
+    fontSize: TVTypography.callout,
    color: "rgba(255,255,255,0.7)",
    marginBottom: 2,
  },
  episodeInfo: {
-    fontSize: 20,
+    fontSize: TVTypography.body,
    color: "#fff",
    fontWeight: "600",
    marginBottom: 12,
--- a/components/tv/TVOptionButton.tsx
+++ b/components/tv/TVOptionButton.tsx
@@ -1,6 +1,8 @@
+import { BlurView } from "expo-blur";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVOptionButtonProps {
@@ -34,36 +36,77 @@ export const TVOptionButton = React.forwardRef<View, TVOptionButtonProps>(
            },
          ]}
        >
-          <View
-            style={{
-              backgroundColor: focused ? "#fff" : "rgba(255,255,255,0.1)",
-              borderRadius: 10,
-              paddingVertical: 10,
-              paddingHorizontal: 16,
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 8,
-            }}
-          >
-            <Text
+          {focused ? (
+            <View
              style={{
-                fontSize: 14,
-                color: focused ? "#444" : "#bbb",
+                backgroundColor: "#fff",
+                borderRadius: 8,
+                paddingVertical: 10,
+                paddingHorizontal: 16,
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 8,
              }}
            >
-              {label}
-            </Text>
-            <Text
+              <Text
+                style={{
+                  fontSize: TVTypography.callout,
+                  color: "#444",
+                }}
+              >
+                {label}
+              </Text>
+              <Text
+                style={{
+                  fontSize: TVTypography.callout,
+                  color: "#000",
+                  fontWeight: "500",
+                }}
+                numberOfLines={1}
+              >
+                {value}
+              </Text>
+            </View>
+          ) : (
+            <BlurView
+              intensity={10}
+              tint='light'
              style={{
-                fontSize: 14,
-                color: focused ? "#000" : "#FFFFFF",
-                fontWeight: "500",
+                borderRadius: 8,
+                overflow: "hidden",
              }}
-              numberOfLines={1}
            >
-              {value}
-            </Text>
-          </View>
+              <View
+                style={{
+                  backgroundColor: "rgba(0,0,0,0.3)",
+                  paddingVertical: 10,
+                  paddingHorizontal: 16,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 8,
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: TVTypography.callout,
+                    color: "#bbb",
+                  }}
+                >
+                  {label}
+                </Text>
+                <Text
+                  style={{
+                    fontSize: TVTypography.callout,
+                    color: "#E5E7EB",
+                    fontWeight: "500",
+                  }}
+                  numberOfLines={1}
+                >
+                  {value}
+                </Text>
+              </View>
+            </BlurView>
+          )}
        </Animated.View>
      </Pressable>
    );
--- a/components/tv/TVOptionCard.tsx
+++ b/components/tv/TVOptionCard.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVOptionCardProps {
@@ -58,7 +59,7 @@ export const TVOptionCard = React.forwardRef<View, TVOptionCardProps>(
        >
          <Text
            style={{
-              fontSize: 16,
+              fontSize: TVTypography.callout,
              color: focused ? "#000" : "#fff",
              fontWeight: focused || selected ? "600" : "400",
              textAlign: "center",
@@ -70,7 +71,7 @@ export const TVOptionCard = React.forwardRef<View, TVOptionCardProps>(
          {sublabel && (
            <Text
              style={{
-                fontSize: 12,
+                fontSize: TVTypography.callout,
                color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.5)",
                textAlign: "center",
                marginTop: 2,
--- a/components/tv/TVOptionSelector.tsx
+++ b/components/tv/TVOptionSelector.tsx
@@ -9,6 +9,7 @@ import {
  View,
 } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { TVCancelButton } from "./TVCancelButton";
 import { TVOptionCard } from "./TVOptionCard";

@@ -175,7 +176,7 @@ const styles = StyleSheet.create({
    overflow: "visible",
  },
  title: {
-    fontSize: 18,
+    fontSize: TVTypography.callout,
    fontWeight: "500",
    color: "rgba(255,255,255,0.6)",
    marginBottom: 16,
--- a/components/tv/TVSeriesNavigation.tsx
+++ b/components/tv/TVSeriesNavigation.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { TVSeriesSeasonCard } from "./TVSeriesSeasonCard";

 export interface TVSeriesNavigationProps {
@@ -26,10 +27,10 @@ export const TVSeriesNavigation: React.FC<TVSeriesNavigationProps> = React.memo(
      <View style={{ marginBottom: 32 }}>
        <Text
          style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
            fontWeight: "600",
            color: "#FFFFFF",
-            marginBottom: 20,
+            marginBottom: 24,
          }}
        >
          {t("item_card.from_this_series") || "From this Series"}
--- a/components/tv/TVSeriesSeasonCard.tsx
+++ b/components/tv/TVSeriesSeasonCard.tsx
@@ -3,6 +3,7 @@ import { Image } from "expo-image";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVSeriesSeasonCardProps {
@@ -34,22 +35,22 @@ export const TVSeriesSeasonCard: React.FC<TVSeriesSeasonCardProps> = ({
        style={[
          animatedStyle,
          {
-            width: 140,
+            width: 210,
            shadowColor: "#fff",
            shadowOffset: { width: 0, height: 0 },
            shadowOpacity: focused ? 0.5 : 0,
-            shadowRadius: focused ? 16 : 0,
+            shadowRadius: focused ? 20 : 0,
          },
        ]}
      >
        <View
          style={{
-            width: 140,
-            aspectRatio: 2 / 3,
-            borderRadius: 12,
+            width: 210,
+            aspectRatio: 10 / 15,
+            borderRadius: 24,
            overflow: "hidden",
            backgroundColor: "rgba(255,255,255,0.1)",
-            marginBottom: 12,
+            marginBottom: 14,
            borderWidth: focused ? 3 : 0,
            borderColor: "#fff",
          }}
@@ -68,18 +69,18 @@ export const TVSeriesSeasonCard: React.FC<TVSeriesSeasonCardProps> = ({
                alignItems: "center",
              }}
            >
-              <Ionicons name='film' size={40} color='rgba(255,255,255,0.4)' />
+              <Ionicons name='film' size={56} color='rgba(255,255,255,0.4)' />
            </View>
          )}
        </View>

        <Text
          style={{
-            fontSize: 14,
+            fontSize: TVTypography.body,
            fontWeight: "600",
            color: focused ? "#fff" : "rgba(255,255,255,0.9)",
            textAlign: "center",
-            marginBottom: 2,
+            marginBottom: 4,
          }}
          numberOfLines={2}
        >
@@ -89,7 +90,7 @@ export const TVSeriesSeasonCard: React.FC<TVSeriesSeasonCardProps> = ({
        {subtitle && (
          <Text
            style={{
-              fontSize: 12,
+              fontSize: TVTypography.callout,
              color: focused
                ? "rgba(255,255,255,0.8)"
                : "rgba(255,255,255,0.5)",
--- a/components/tv/TVSubtitleResultCard.tsx
+++ b/components/tv/TVSubtitleResultCard.tsx
@@ -8,6 +8,7 @@ import {
  View,
 } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import type { SubtitleSearchResult } from "@/hooks/useRemoteSubtitles";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

@@ -212,13 +213,13 @@ const styles = StyleSheet.create({
    marginBottom: 8,
  },
  providerText: {
-    fontSize: 11,
+    fontSize: TVTypography.callout,
    fontWeight: "600",
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  resultName: {
-    fontSize: 14,
+    fontSize: TVTypography.callout,
    fontWeight: "500",
    marginBottom: 8,
    lineHeight: 18,
@@ -230,7 +231,7 @@ const styles = StyleSheet.create({
    marginBottom: 8,
  },
  resultMetaText: {
-    fontSize: 12,
+    fontSize: TVTypography.callout,
  },
  ratingContainer: {
    flexDirection: "row",
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
    borderRadius: 4,
  },
  flagText: {
-    fontSize: 10,
+    fontSize: TVTypography.callout,
    fontWeight: "600",
    color: "#fff",
  },
--- a/components/tv/TVTabButton.tsx
+++ b/components/tv/TVTabButton.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Animated, Pressable } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVTabButtonProps {
@@ -55,7 +56,7 @@ export const TVTabButton: React.FC<TVTabButtonProps> = ({
      >
        <Text
          style={{
-            fontSize: 16,
+            fontSize: TVTypography.callout,
            color: focused ? "#000" : "#fff",
            fontWeight: focused || active ? "600" : "400",
          }}
--- a/components/tv/TVTechnicalDetails.tsx
+++ b/components/tv/TVTechnicalDetails.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";

 export interface TVTechnicalDetailsProps {
  mediaStreams: MediaStream[];
@@ -23,10 +24,10 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
      <View style={{ marginBottom: 32 }}>
        <Text
          style={{
-            fontSize: 22,
+            fontSize: TVTypography.heading,
            fontWeight: "600",
            color: "#FFFFFF",
-            marginBottom: 16,
+            marginBottom: 20,
          }}
        >
          {t("item_card.technical_details")}
@@ -36,7 +37,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
            <View>
              <Text
                style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                  color: "#6B7280",
                  textTransform: "uppercase",
                  letterSpacing: 1,
@@ -45,7 +46,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
              >
                Video
              </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                {videoStream.DisplayTitle ||
                  `${videoStream.Codec?.toUpperCase()} ${videoStream.Width}x${videoStream.Height}`}
              </Text>
@@ -55,7 +56,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
            <View>
              <Text
                style={{
-                  fontSize: 14,
+                  fontSize: TVTypography.callout,
                  color: "#6B7280",
                  textTransform: "uppercase",
                  letterSpacing: 1,
@@ -64,7 +65,7 @@ export const TVTechnicalDetails: React.FC<TVTechnicalDetailsProps> = React.memo(
              >
                Audio
              </Text>
-              <Text style={{ fontSize: 18, color: "#FFFFFF" }}>
+              <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
                {audioStream.DisplayTitle ||
                  `${audioStream.Codec?.toUpperCase()} ${audioStream.Channels}ch`}
              </Text>
--- a/components/tv/TVTrackCard.tsx
+++ b/components/tv/TVTrackCard.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation";

 export interface TVTrackCardProps {
@@ -86,11 +87,11 @@ const styles = StyleSheet.create({
    paddingHorizontal: 12,
  },
  trackCardText: {
-    fontSize: 16,
+    fontSize: TVTypography.callout,
    textAlign: "center",
  },
  trackCardSublabel: {
-    fontSize: 12,
+    fontSize: TVTypography.callout,
    marginTop: 2,
  },
  checkmark: {
--- a/components/tv/settings/TVLogoutButton.tsx
+++ b/components/tv/settings/TVLogoutButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";

 export interface TVLogoutButtonProps {
@@ -48,7 +49,7 @@ export const TVLogoutButton: React.FC<TVLogoutButtonProps> = ({
        >
          <Text
            style={{
-              fontSize: 20,
+              fontSize: TVTypography.body,
              fontWeight: "bold",
              color: "#FFFFFF",
            }}
--- a/components/tv/settings/TVSectionHeader.tsx
+++ b/components/tv/settings/TVSectionHeader.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";

 export interface TVSectionHeaderProps {
  title: string;
@@ -8,7 +9,7 @@ export interface TVSectionHeaderProps {
 export const TVSectionHeader: React.FC<TVSectionHeaderProps> = ({ title }) => (
  <Text
    style={{
-      fontSize: 16,
+      fontSize: TVTypography.callout,
      fontWeight: "600",
      color: "#9CA3AF",
      textTransform: "uppercase",
--- a/components/tv/settings/TVSettingsOptionButton.tsx
+++ b/components/tv/settings/TVSettingsOptionButton.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";

 export interface TVSettingsOptionButtonProps {
@@ -48,11 +49,13 @@ export const TVSettingsOptionButton: React.FC<TVSettingsOptionButtonProps> = ({
          },
        ]}
      >
-        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          {label}
+        </Text>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text
            style={{
-              fontSize: 18,
+              fontSize: TVTypography.callout,
              color: "#9CA3AF",
              marginRight: 12,
            }}
--- a/components/tv/settings/TVSettingsRow.tsx
+++ b/components/tv/settings/TVSettingsRow.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";

 export interface TVSettingsRowProps {
@@ -50,11 +51,13 @@ export const TVSettingsRow: React.FC<TVSettingsRowProps> = ({
          },
        ]}
      >
-        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          {label}
+        </Text>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text
            style={{
-              fontSize: 18,
+              fontSize: TVTypography.callout,
              color: "#9CA3AF",
              marginRight: showChevron ? 12 : 0,
            }}
--- a/components/tv/settings/TVSettingsStepper.tsx
+++ b/components/tv/settings/TVSettingsStepper.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";

 export interface TVSettingsStepperProps {
@@ -53,7 +54,9 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
        focusable={!disabled}
      >
        <Animated.View style={labelAnim.animatedStyle}>
-          <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+          <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+            {label}
+          </Text>
        </Animated.View>
      </Pressable>
      <View style={{ flexDirection: "row", alignItems: "center" }}>
@@ -86,7 +89,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
        </Pressable>
        <Text
          style={{
-            fontSize: 18,
+            fontSize: TVTypography.callout,
            color: "#FFFFFF",
            minWidth: 60,
            textAlign: "center",
--- a/components/tv/settings/TVSettingsTextInput.tsx
+++ b/components/tv/settings/TVSettingsTextInput.tsx
@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import { Animated, Pressable, TextInput } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";

 export interface TVSettingsTextInputProps {
@@ -53,7 +54,13 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
          },
        ]}
      >
-        <Text style={{ fontSize: 16, color: "#9CA3AF", marginBottom: 8 }}>
+        <Text
+          style={{
+            fontSize: TVTypography.callout,
+            color: "#9CA3AF",
+            marginBottom: 8,
+          }}
+        >
          {label}
        </Text>
        <TextInput
@@ -67,7 +74,7 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
          autoCapitalize='none'
          autoCorrect={false}
          style={{
-            fontSize: 18,
+            fontSize: TVTypography.body,
            color: "#FFFFFF",
            backgroundColor: "rgba(255, 255, 255, 0.05)",
            borderRadius: 8,
--- a/components/tv/settings/TVSettingsToggle.tsx
+++ b/components/tv/settings/TVSettingsToggle.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
+import { TVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";

 export interface TVSettingsToggleProps {
@@ -47,7 +48,9 @@ export const TVSettingsToggle: React.FC<TVSettingsToggleProps> = ({
          },
        ]}
      >
-        <Text style={{ fontSize: 20, color: "#FFFFFF" }}>{label}</Text>
+        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          {label}
+        </Text>
        <View
          style={{
            width: 56,