diff --git a/constants/TVSizes.ts b/constants/TVSizes.ts index 676609bc..403b8ebd 100644 --- a/constants/TVSizes.ts +++ b/constants/TVSizes.ts @@ -79,7 +79,7 @@ export const TVAnimation = { * Applied to poster sizes and gaps. */ const sizeScaleMultipliers: Record = { - [TVTypographyScale.Small]: 0.9, + [TVTypographyScale.Small]: 0.8, [TVTypographyScale.Default]: 1.0, [TVTypographyScale.Large]: 1.1, [TVTypographyScale.ExtraLarge]: 1.2, diff --git a/constants/TVTypography.ts b/constants/TVTypography.ts index 2d1c165b..d53726ad 100644 --- a/constants/TVTypography.ts +++ b/constants/TVTypography.ts @@ -1,46 +1,65 @@ import { TVTypographyScale, useSettings } from "@/utils/atoms/settings"; +import { scaleSize } from "@/utils/scaleSize"; /** * TV Typography Scale * * Consistent text sizes for TV interface components. - * Design values are for 1920×1080 and scaled proportionally - * to the actual viewport via scaleSize(). + * Base values are designed for 1920x1080 and scaled to the actual viewport via + * scaleSize(), then further adjusted by the user's tvTypographyScale setting. */ -import { scaleSize } from "@/utils/scaleSize"; +// ============================================================================= +// BASE VALUES (at Default scale) +// ============================================================================= export const TVTypography = { /** Hero titles, movie/show names */ - display: scaleSize(70), + display: 70, /** Episode series name, major headings */ - title: scaleSize(42), + title: 42, /** Section headers (Cast, Technical Details, From this Series) */ - heading: scaleSize(32), + heading: 32, /** Overview, actor names, card titles, metadata */ - body: scaleSize(40), + body: 40, /** Secondary text, labels, subtitles */ - callout: scaleSize(26), + callout: 26, }; export type TVTypographyKey = keyof typeof TVTypography; +// ============================================================================= +// SCALING +// ============================================================================= + const scaleMultipliers: Record = { - [TVTypographyScale.Small]: 0.85, + [TVTypographyScale.Small]: 0.8, [TVTypographyScale.Default]: 1.0, - [TVTypographyScale.Large]: 1.2, - [TVTypographyScale.ExtraLarge]: 1.4, + [TVTypographyScale.Large]: 1.1, + [TVTypographyScale.ExtraLarge]: 1.2, +}; + +// ============================================================================= +// HOOKS +// ============================================================================= + +export type ScaledTVTypography = { + display: number; + title: number; + heading: number; + body: number; + callout: number; }; /** * Hook that returns scaled TV typography values based on user settings. * Use this instead of the static TVTypography constant for dynamic scaling. */ -export const useScaledTVTypography = () => { +export const useScaledTVTypography = (): ScaledTVTypography => { const { settings } = useSettings(); const scale = scaleMultipliers[settings.tvTypographyScale] ??