@xetwa/design-system 1.0.35 → 1.0.37

package/src/components/Charts/WeeklyProgressChart/WeeklyProgressChart.tsx

@@ -34,19 +34,19 @@ export const WeeklyProgressChart = ({
   // Compute dimensions based on size variant
   let defaultMaxHeight = 80;
   let barWidth = 24;
-  let titleFontSize = 14;
-  let labelFontSize = 12;
+  let titleVariant: any = 'btnMd';
+  let labelVariant: any = 'bodySm';
 
   if (size === 'sm') {
     defaultMaxHeight = 50;
     barWidth = 16;
-    titleFontSize = 12;
-    labelFontSize = 10;
+    titleVariant = 'btnSm';
+    labelVariant = 'caption';
   } else if (size === 'lg') {
     defaultMaxHeight = 110;
     barWidth = 32;
-    titleFontSize = 16;
-    labelFontSize = 14;
+    titleVariant = 'btnLg';
+    labelVariant = 'bodyMd';
   }
 
   const finalMaxHeight = maxHeight ?? defaultMaxHeight;
@@ -77,7 +77,7 @@ export const WeeklyProgressChart = ({
     <View style={[styles.container, style]}>
       {/* Header / Title */}
       <View style={styles.header}>
-        <Typography style={[styles.title, { fontSize: scaleText(titleFontSize) }]}>
+        <Typography variant={titleVariant} style={[styles.title]}>
           {title.toUpperCase()}
           {subtitle ? ` · ${subtitle.toUpperCase()}` : ''}
         </Typography>
@@ -122,12 +122,11 @@ export const WeeklyProgressChart = ({
                 />
               </View>
               <Typography
+                variant={labelVariant}
                 style={[
                   styles.dayLabel,
                   {
                     color: labelColor,
-                    fontSize: scaleText(labelFontSize),
-
                     marginTop: scale(12),
                   }
                 ]}

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -44,12 +44,12 @@ const SQUARE_RADIUS_MAP: Record<AvatarSize, number> = {
   xl: 22,
 };
 
-const FONT_SIZE_MAP: Record<AvatarSize, number> = {
-  xs: 12,
-  sm: 14,
-  md: 18,
-  lg: 22,
-  xl: 28,
+const VARIANT_MAP: Record<AvatarSize, any> = {
+  xs: 'bodySm',
+  sm: 'btnMd',
+  md: 'h2',
+  lg: 'h1',
+  xl: 'display1',
 };
 
 export const Avatar = ({
@@ -67,8 +67,7 @@ export const Avatar = ({
     ? pxSize / 2
     : scale(SQUARE_RADIUS_MAP[size]);
 
-  const fontSize = scaleText(FONT_SIZE_MAP[size]);
-  const lineHeight = fontSize * 1.2;
+  const typographyVariant = VARIANT_MAP[size];
 
   const containerStyles = [
     styles.container,
@@ -96,7 +95,7 @@ export const Avatar = ({
   return (
     <View style={containerStyles}>
       {initials ? (
-        <Typography style={[styles.text, { fontSize, lineHeight }]}>
+        <Typography variant={typographyVariant} style={[styles.text]}>
           {initials}
         </Typography>
       ) : null}

package/src/components/DataDisplay/Badge/Badge.tsx

@@ -70,6 +70,18 @@ export const Badge = ({
 
   const vStyles = getVariantStyles();
 
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'xs': return 'caption';
+      case 'sm': return 'caption';
+      case 'md': return 'bodySm';
+      case 'lg': return 'bodyMd';
+      case 'xl': return 'h3';
+      case 'xxl': return 'h2';
+      default: return 'caption';
+    }
+  };
+
   return (
     <View style={[
       styles.container,
@@ -78,9 +90,8 @@ export const Badge = ({
       style
     ]}>
       {typeof content === 'string' || typeof content === 'number' ? (
-        <Typography style={[
+        <Typography variant={getTypographyVariant()} style={[
           styles.text,
-          size === 'xs' ? styles.textXs : size === 'sm' ? styles.textSm : size === 'md' ? styles.textMd : size === 'lg' ? styles.textLg : size === 'xl' ? styles.textXl : styles.textXxl,
           { color: vStyles.color }
         ]}>
           {content}
@@ -125,22 +136,4 @@ const styles = StyleSheet.create({
   text: {
 
   },
-  textXs: {
-    fontSize: 9,
-  },
-  textSm: {
-    fontSize: 10,
-  },
-  textMd: {
-    fontSize: 12,
-  },
-  textLg: {
-    fontSize: 14,
-  },
-  textXl: {
-    fontSize: 16,
-  },
-  textXxl: {
-    fontSize: 18,
-  },
 });

package/src/components/DataDisplay/InstructionBubble/InstructionBubble.tsx

@@ -45,11 +45,11 @@ export const InstructionBubble = ({
           borderWidth: scale(2),
         }
       ]}>
-        <Typography style={[styles.title, { fontSize: scaleText(22), lineHeight: scaleText(28) }]}>
+        <Typography variant="h1" style={[styles.title]}>
           {title}
         </Typography>
         {subtitle && (
-          <Typography style={[styles.subtitle, { fontSize: scaleText(14), marginTop: scale(4) }]}>
+          <Typography variant="bodyMd" style={[styles.subtitle, { marginTop: scale(4) }]}>
             {subtitle}
           </Typography>
         )}

package/src/components/DataDisplay/LevelBadge/LevelBadge.tsx

@@ -75,13 +75,13 @@ export const LevelBadge = ({
       />
 
       {/* Level Code */}
-      <Typography style={[styles.levelText, isLarge ? styles.levelTextLg : styles.levelTextSm]}>
+      <Typography variant={isLarge ? 'display1' : 'btnMd'} style={[styles.levelText]}>
         {levelCode}
       </Typography>
 
       {/* Optional Descriptive Label for Large Badge */}
       {isLarge && (
-        <Typography style={[styles.labelText, { color: config.color }]}>
+        <Typography variant="btnMd" style={[styles.labelText, { color: config.color }]}>
           {config.label}
         </Typography>
       )}
@@ -98,21 +98,8 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
   },
   levelText: {
-
     color: '#51332d',
-    lineHeight: 28, // Matches large font alignment
-  },
-  levelTextLg: {
-    fontSize: 28,
-    lineHeight: 30,
-  },
-  levelTextSm: {
-    fontSize: 14,
-    lineHeight: 16,
   },
   labelText: {
-
-    fontSize: 14,
-    lineHeight: 16,
   },
 });

package/src/components/DataDisplay/NumberBadge/NumberBadge.tsx

@@ -29,8 +29,7 @@ export const NumberBadge = ({ value, selected = false, correct = false }: Number
       alignItems: 'center',
       justifyContent: 'center',
     }}>
-      <Typography style={{
-        fontSize: 14,
+      <Typography variant="btnMd" style={{
         color: textColor,
       }}>
         {value}

package/src/components/DataDisplay/StatBadge/StatBadge.tsx

@@ -103,7 +103,7 @@ export const StatBadge = ({
       <View style={styles.iconContainer}>
         {renderIcon()}
       </View>
-      <Typography style={[styles.text, { fontSize: scaleText(16) }]}>
+      <Typography variant="h3" style={[styles.text]}>
         {value}
       </Typography>
     </View>

package/src/components/DataDisplay/Tag/Tag.tsx

@@ -72,6 +72,16 @@ export const Tag = ({
 
   const vStyles = getVariantStyles();
 
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'xs': return 'caption';
+      case 'sm': return 'caption';
+      case 'md': return 'caption';
+      case 'lg': return 'label';
+      default: return 'caption';
+    }
+  };
+
   return (
     <View style={[
       styles.container,
@@ -80,9 +90,8 @@ export const Tag = ({
       style
     ]}>
       {icon && <View style={styles.iconContainer}>{icon}</View>}
-      <Typography style={[
+      <Typography variant={getTypographyVariant()} style={[
         styles.text,
-        size === 'xs' ? styles.textXs : size === 'sm' ? styles.textSm : size === 'md' ? styles.textMd : styles.textLg,
         { color: vStyles.color }
       ]}>
         {label}
@@ -119,29 +128,8 @@ const styles = StyleSheet.create({
     borderRadius: 12,
   },
   text: {
-
     textTransform: 'uppercase',
   },
-  textXs: {
-    fontSize: 9,
-    lineHeight: 11,
-    letterSpacing: 0.54,
-  },
-  textSm: {
-    fontSize: 10,
-    lineHeight: 12,
-    letterSpacing: 0.6, // 10 * 0.06em
-  },
-  textMd: {
-    fontSize: 11,
-    lineHeight: 13,
-    letterSpacing: 0.66, // 11 * 0.06em
-  },
-  textLg: {
-    fontSize: 12,
-    lineHeight: 14,
-    letterSpacing: 0.72,
-  },
   iconContainer: {
     marginRight: 4,
   }

package/src/components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet.tsx

@@ -80,15 +80,15 @@ export const FeedbackBottomSheet: React.FC<FeedbackBottomSheetProps> = ({
           <Yaya variant={finalMascotVariant} avatarOnly size={64} />
         </View>
         <View style={styles.textContainer}>
-          <Typography style={[styles.title, { color: borderColor }]}>{title}</Typography>
-          <Typography style={[styles.subtitle, { color: borderColor }]}>{subtitle}</Typography>
+          <Typography variant="h1" style={[styles.title, { color: borderColor }]}>{title}</Typography>
+          <Typography variant="bodyLg" style={[styles.subtitle, { color: borderColor }]}>{subtitle}</Typography>
         </View>
       </View>
 
       {!isCorrect && correctAnswer && (
         <View style={styles.correctAnswerBox}>
-          <Typography style={styles.correctAnswerLabel}>RESPOSTA CERTA</Typography>
-          <Typography style={styles.correctAnswerText}>{correctAnswer}</Typography>
+          <Typography variant="label" style={styles.correctAnswerLabel}>RESPOSTA CERTA</Typography>
+          <Typography variant="h1" style={styles.correctAnswerText}>{correctAnswer}</Typography>
         </View>
       )}
 
@@ -132,9 +132,6 @@ const styles = StyleSheet.create({
     marginBottom: 2,
   },
   subtitle: {
-
-    fontSize: 15,
-
     marginTop: 2,
   },
   button: {
@@ -153,16 +150,10 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(207, 91, 72, 0.15)', // light red tint border
   },
   correctAnswerLabel: {
-
-    fontSize: 11,
-
     color: '#cf5b48',
-    letterSpacing: 0.8,
-    textTransform: 'uppercase',
     marginBottom: 4,
   },
   correctAnswerText: {
-    ...theme.typography.h1,
     color: theme.colors.brown[700],
   },
   buttonShadowCorrect: {

package/src/components/Headers/CountryHeader/CountryHeader.tsx

@@ -66,7 +66,7 @@ export const CountryHeader = ({
         {/* Top Bar: Back Button e Header Text */}
         <View style={[styles.topRow, { marginBottom: scale(16) }]}>
           <BackButton onPress={onBackPress} variant="glass" />
-          <Typography style={[styles.headerText, { fontSize: scaleText(13), lineHeight: scaleText(16), marginLeft: scale(12) }]}>
+          <Typography variant="label" style={[styles.headerText, { marginLeft: scale(12) }]}>
             {headerText}
           </Typography>
         </View>
@@ -77,10 +77,10 @@ export const CountryHeader = ({
             <Flag countryCode={countryCode} size={scale(56)} />
           </View>
           <View style={[styles.textContainer, { marginLeft: scale(12) }]}>
-            <Typography style={[styles.title, { fontSize: scaleText(26), lineHeight: scaleText(30) }]}>
+            <Typography variant="display1" style={[styles.title]}>
               {title}
             </Typography>
-            <Typography style={[styles.subtitle, { fontSize: scaleText(13), lineHeight: scaleText(16), marginTop: scale(2) }]}>
+            <Typography variant="bodyMd" style={[styles.subtitle, { marginTop: scale(2) }]}>
               {subtitle}
             </Typography>
           </View>

package/src/components/Headers/ProfileHeader/ProfileHeader.tsx

@@ -87,14 +87,16 @@ export const ProfileHeader = ({
             
             <View style={styles.userTexts}>
               <Typography 
-                style={[styles.userName, { fontSize: scaleText(26), lineHeight: scaleText(30) }]}
+                variant="display1"
+                style={[styles.userName]}
                 numberOfLines={1}
                 adjustsFontSizeToFit
               >
                 {userName}
               </Typography>
               <Typography 
-                style={[styles.userSubtitle, { fontSize: scaleText(14.5), lineHeight: scaleText(18), marginTop: scale(4) }]}
+                variant="bodyLg"
+                style={[styles.userSubtitle, { marginTop: scale(4) }]}
               >
                 {userSubtitle}
               </Typography>
@@ -134,19 +136,20 @@ export const ProfileHeader = ({
             ) : null}
             <View style={styles.progressCardTexts}>
               <Typography 
-                style={[styles.progressTitle, { fontSize: scaleText(16.5), lineHeight: scaleText(20) }]}
+                variant="h3"
+                style={[styles.progressTitle]}
                 numberOfLines={1}
                 adjustsFontSizeToFit
               >
                 {countryName} · {level}
               </Typography>
-              <Typography style={[styles.progressSubtitle, { fontSize: scaleText(13.5), lineHeight: scaleText(17), marginTop: scale(2) }]}>
+              <Typography variant="bodyMd" style={[styles.progressSubtitle, { marginTop: scale(2) }]}>
                 {moduleSubtitle}
               </Typography>
             </View>
           </View>
 
-          <Typography style={[styles.progressPercent, { fontSize: scaleText(22), lineHeight: scaleText(26) }]}>
+          <Typography variant="h1" style={[styles.progressPercent]}>
             {progressPercentage}%
           </Typography>
         </View>

package/src/components/Inputs/FillInTheBlank/FillInTheBlank.tsx

@@ -118,7 +118,7 @@ export const FillInTheBlank = ({
                 backgroundColor,
                 color: textColor,
                 borderRadius: scale(10),
-                fontSize: scaleText(16),
+                fontSize: theme.typography.bodyLg.fontSize,
                 paddingHorizontal: scale(12),
                 borderWidth: 2,
               }
@@ -141,11 +141,10 @@ export const FillInTheBlank = ({
             paddingHorizontal: scale(12),
           }
         ]}>
-          <Typography style={[
+          <Typography variant="btnLg" style={[
             styles.blankText,
             {
               color: isFilled ? textColor : theme.colors.brown[400],
-              fontSize: scaleText(16),
             }
           ]}>
             {value || (part as any).placeholder || ''}
@@ -216,7 +215,8 @@ export const FillInTheBlank = ({
         return (
           <Typography
             key={`text-${index}-${wIdx}`}
-            style={[styles.staticText, { fontSize: scaleText(17.5), marginRight: scale(6), marginVertical: scale(4) }]}
+            variant="h2"
+            style={[styles.staticText, { marginRight: scale(6), marginVertical: scale(4) }]}
           >
             {word}
           </Typography>
@@ -231,7 +231,7 @@ export const FillInTheBlank = ({
     <View style={[styles.container, style]}>
       {/* Opcional: Texto de instrução no topo */}
       {!!instruction && (
-        <Typography style={[styles.instructionText, { fontSize: scaleText(16), marginBottom: scale(16) }]}>
+        <Typography variant="h3" style={[styles.instructionText, { marginBottom: scale(16) }]}>
           {instruction}
         </Typography>
       )}

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -104,9 +104,9 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
     return (
       <View style={[styles.root, style]}>
         {label && (
-          <Typography style={[
+          <Typography variant="bodySm" style={[
             styles.label, 
-            { fontSize: scaleText(12), marginBottom: scale(6) },
+            { marginBottom: scale(6) },
             disabled && { color: theme.colors.brown[400] }
           ]}>
             {label}
@@ -131,7 +131,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
             style={[
               styles.input,
               {
-                fontSize: scaleText(15),
+                fontSize: theme.typography.bodyLg.fontSize,
               },
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               Platform.OS === 'web' && ({ outlineStyle: 'none' } as any),
@@ -144,7 +144,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
         </View>
 
         {messageText && (
-          <Typography style={[styles.message, { color: messageColor, fontSize: scaleText(12), marginTop: scale(5) }]}>
+          <Typography variant="bodySm" style={[styles.message, { color: messageColor, marginTop: scale(5) }]}>
             {messageText}
           </Typography>
         )}

package/src/components/Navigation/BottomTabBar/BottomTabBarItem.tsx

@@ -34,11 +34,11 @@ export const BottomTabBarItem = ({
         <IconComponent stroke={color} size={scale(24)} strokeWidth={2} />
       </View>
       <Typography
+        variant="caption"
         style={[
           styles.label,
           {
             color,
-            fontSize: scaleText(10),
             marginTop: scale(4),
           }
         ]}

package/src/components/Navigation/ProgressMap/ProgressMap.tsx

@@ -297,12 +297,11 @@ export const ProgressMap = ({
       {/* Header Container */}
       <View style={styles.header}>
         <View style={styles.headerLeft}>
-          <BackButton onPress={onBackPress} variant="default" />
           <View style={styles.headerText}>
-            <Typography style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
+            <Typography variant="h3" style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
               {title.toUpperCase()}
             </Typography>
-            <Typography style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
+            <Typography variant="bodyLg" style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
               {subtitle ?? `${stations.length} paragens · A1 → C1`}
             </Typography>
           </View>
@@ -313,7 +312,7 @@ export const ProgressMap = ({
           style={[styles.flightBtn, { borderRadius: scale(14), paddingHorizontal: scale(16), height: scale(40) }]}
         >
           <FlightIcon color="#ffffff" size={scale(16)} />
-          <Typography style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
+          <Typography variant="btnSm" style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
         </TouchableOpacity>
       </View>
 
@@ -514,7 +513,7 @@ export const ProgressMap = ({
                     },
                   ]}
                 >
-                  <Typography style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
+                  <Typography variant="label" style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
                     {idx + 1}
                   </Typography>
                 </View>
@@ -532,6 +531,7 @@ export const ProgressMap = ({
                   ]}
                 >
                   <Typography
+                    variant="bodySm"
                     numberOfLines={1}
                     style={[
                       isCurrent ? styles.activeLabelText : styles.labelText,
@@ -539,7 +539,7 @@ export const ProgressMap = ({
                     ]}
                   >
                     {p.label}{' '}
-                    <Typography style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
+                    <Typography variant="caption" style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
                       {p.levelCode}
                     </Typography>
                     {isCurrent && ' · AQUI'}
@@ -563,15 +563,15 @@ export const ProgressMap = ({
         >
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.success }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
+            <Typography variant="caption" style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.primary }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
+            <Typography variant="caption" style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.brown[300] }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
+            <Typography variant="caption" style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
           </View>
         </View>
 

package/src/components/Navigation/WorldProgressMap/WorldProgressMap.tsx

@@ -255,10 +255,10 @@ export const WorldProgressMap = ({
         <View style={styles.headerLeft}>
           <BackButton onPress={onBackPress} variant="default" />
           <View style={styles.headerText}>
-            <Typography style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
+            <Typography variant="btnMd" style={[styles.headerTitle]}>
               {title.toUpperCase()}
             </Typography>
-            <Typography style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
+            <Typography variant="h2" style={[styles.headerSubtitle]}>
               {subtitle ?? `${stations.length} destinos`}
             </Typography>
           </View>
@@ -269,7 +269,7 @@ export const WorldProgressMap = ({
           style={[styles.flightBtn, { borderRadius: scale(14), paddingHorizontal: scale(16), height: scale(40) }]}
         >
           <FlightIcon color="#ffffff" size={scale(16)} />
-          <Typography style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
+          <Typography variant="btnSm" style={[styles.flightBtnText]}>VOO</Typography>
         </TouchableOpacity>
       </View>
 
@@ -481,7 +481,7 @@ export const WorldProgressMap = ({
                         },
                       ]}
                     >
-                      <Typography style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
+                      <Typography variant="caption" style={[styles.indexBadgeText]}>
                         {idx + 1}
                       </Typography>
                     </View>
@@ -499,14 +499,14 @@ export const WorldProgressMap = ({
                       ]}
                     >
                       <Typography
+                        variant="bodySm"
                         numberOfLines={1}
                         style={[
                           isCurrent ? styles.activeLabelText : styles.labelText,
-                          { fontSize: scaleText(11.5) },
                         ]}
                       >
                         {p.label}{' '}
-                        <Typography style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
+                        <Typography variant="caption" style={{ opacity: isCurrent ? 0.9 : 0.6 }}>
                           {p.levelCode}
                         </Typography>
                         {isCurrent && ' · AQUI'}
@@ -532,15 +532,15 @@ export const WorldProgressMap = ({
         >
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.success }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
+            <Typography variant="caption" style={[styles.legendText]}>visitado · rever</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.primary }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
+            <Typography variant="caption" style={[styles.legendText]}>estás aqui</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.brown[300] }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
+            <Typography variant="caption" style={[styles.legendText]}>bloqueado</Typography>
           </View>
         </View>
 

package/src/components/Typography/Typography.tsx

@@ -16,33 +16,39 @@ export interface TypographyProps extends RNTextProps {
   align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
   /** Cor do texto (em formato hexadecimal ou rgba). */
   color?: string;
-  /** Peso da fonte opcional para sobrepor a variante. */
-  weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+  // A propriedade 'weight' foi removida para forçar o uso da variante correta e evitar furos na tipografia.
 }
 
 export const Typography = React.forwardRef<React.ElementRef<typeof RNText>, TypographyProps>(
-  ({ variant = 'bodyMd', color, align, weight, style, children, ...props }, ref) => {
+  ({ variant = 'bodyMd', color, align, style, children, ...props }, ref) => {
     const { colors } = useTheme();
-    const { scaleText } = useResponsive();
+    const { isDesktop } = useResponsive();
     
     // Resolve variant styles from the static theme tokens
-    const typographyStyle = theme.typography[variant];
+    const typographyStyle = theme.typography[variant] as any;
     
     // Default text color based on the current active theme
     const defaultColor = colors.textPrimary;
 
-    const responsiveStyle: TextStyle = {
+    // Use exact values from spec (no scaling!)
+    const exactFontSize = isDesktop && typographyStyle.desktopFontSize ? typographyStyle.desktopFontSize : typographyStyle.fontSize;
+    const exactLineHeight = isDesktop && typographyStyle.desktopFontSize && typographyStyle.lineHeight
+      ? (typographyStyle.desktopFontSize * (typographyStyle.lineHeight / typographyStyle.fontSize))
+      : typographyStyle.lineHeight;
+
+    const strictStyle: TextStyle = {
       ...typographyStyle,
-      fontSize: typographyStyle.fontSize ? scaleText(typographyStyle.fontSize) : undefined,
-      lineHeight: typographyStyle.lineHeight ? scaleText(typographyStyle.lineHeight) : undefined,
+      fontSize: exactFontSize,
+      lineHeight: exactLineHeight,
+      // Não propagamos campos web-only para o RN
+      desktopFontSize: undefined,
     };
 
     const combinedStyles = [
       { color: defaultColor },
-      responsiveStyle,
+      strictStyle,
       color ? { color } : null,
       align ? { textAlign: align } : null,
-      weight ? { fontWeight: weight } : null,
       style,
     ];