@xetwa/design-system 1.0.35 → 1.0.37

package/src/styles/theme.ts

@@ -1,10 +1,12 @@
 import { Platform } from 'react-native';
 
-const font = (family: string, webWeight: '600' | '700' | '800') => {
+const font = (family: string, webWeight: '400' | '500' | '600' | '700' | '800' | '900') => {
+  // Extract base family for web (e.g. 'Nunito-SemiBold' -> 'Nunito')
+  const webFamily = family.split('-')[0];
   return Platform.select({
-    web: { fontFamily: family.split('-')[0], fontWeight: webWeight },
+    web: { fontFamily: webFamily, fontWeight: webWeight },
     default: { fontFamily: family }
-  }) as { fontFamily: string; fontWeight?: '600' | '700' | '800' };
+  }) as { fontFamily: string; fontWeight?: '400' | '500' | '600' | '700' | '800' | '900' };
 };
 
 export const theme = {
@@ -173,71 +175,84 @@ export const theme = {
     display1: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 28,
-      lineHeight: 30,
+      lineHeight: 34,
+      desktopFontSize: 42,
     },
     display2: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 24,
-      lineHeight: 27,
+      lineHeight: 30,
+      desktopFontSize: 34,
     },
     h1: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 22,
-      lineHeight: 25,
+      lineHeight: 28,
+      desktopFontSize: 28,
     },
     h2: {
       ...font('Fredoka-SemiBold', '600'),
       fontSize: 18,
-      lineHeight: 22,
+      lineHeight: 24,
+      desktopFontSize: 22,
     },
     h3: {
       ...font('Fredoka-SemiBold', '600'),
       fontSize: 16,
-      lineHeight: 20,
+      lineHeight: 22,
+      desktopFontSize: 19,
     },
     label: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 10,
       lineHeight: 14,
-      letterSpacing: 1.2,
+      letterSpacing: 1.2, // 10 * 0.12
+      desktopFontSize: 11,
     },
     bodyLg: {
       ...font('Nunito-Bold', '700'),
       fontSize: 15,
-      lineHeight: 23,
+      lineHeight: 24,
+      desktopFontSize: 17,
     },
     bodyMd: {
       ...font('Nunito-Bold', '700'),
       fontSize: 13.5,
-      lineHeight: 20,
+      lineHeight: 22,
+      desktopFontSize: 15,
     },
     bodySm: {
-      ...font('Nunito-Bold', '700'),
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 12,
-      lineHeight: 17,
+      lineHeight: 18,
+      desktopFontSize: 13,
     },
     caption: {
-      ...font('Nunito-SemiBold', '600'),
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 10,
-      lineHeight: 14,
+      lineHeight: 16,
+      desktopFontSize: 11,
     },
     btnLg: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 16,
-      lineHeight: 22,
-      letterSpacing: 0.64,
+      lineHeight: 20,
+      letterSpacing: 0.64, // 16 * 0.04
+      desktopFontSize: 17,
     },
     btnMd: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 14,
-      lineHeight: 20,
-      letterSpacing: 0.56,
+      lineHeight: 18,
+      letterSpacing: 0.56, // 14 * 0.04
+      desktopFontSize: 15,
     },
     btnSm: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 12,
       lineHeight: 16,
-      letterSpacing: 0.48,
+      letterSpacing: 0.48, // 12 * 0.04
+      desktopFontSize: 12,
     },
   },