@hero-design/rn 7.1.3-alpha → 7.1.3-alpha4

package/src/utils/scale.ts

@@ -1,10 +1,73 @@
-import { Dimensions } from 'react-native';
+import { PixelRatio, Dimensions } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
-
+const pixelRatio = PixelRatio.get();
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
 export const scale = (size: number) => {
-  const { width, height } = Dimensions.get('window');
-  const shortDimension = width < height ? width : height;
+  if (pixelRatio >= 2 && pixelRatio < 3) {
+    // iphone 5s and older Androids
+    if (deviceWidth < BASE_WIDTH) {
+      return size * 0.95;
+    }
+
+    // iphone 5
+    if (deviceHeight < 667) {
+      return size;
+      // iphone 6-6s
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    }
+    // older phablets
+    return size * 1.25;
+  }
+
+  if (pixelRatio >= 3 && pixelRatio < 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+    }
+
+    // Catch other weird android width sizings
+    if (deviceHeight < 667) {
+      return size * 1.15;
+      // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    }
+
+    // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+    return size * 1.27;
+  }
+
+  if (pixelRatio >= 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+      // Catch other smaller android height sizings
+    }
+
+    if (deviceHeight < 667) {
+      return size * 1.2;
+      // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    }
+
+    // catch larger phablet devices
+    return size * 1.4;
+  }
 
-  return (shortDimension / BASE_WIDTH) * size;
+  return size;
 };

package/types/src/theme/components/badge.d.ts

@@ -16,11 +16,11 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
     padding: {
         default: string;
     };
-    fontSizes: {
+    fonts: {
         default: string;
     };
-    fontWeights: {
-        default: number;
+    fontSizes: {
+        default: string;
     };
     radii: {
         default: string;

package/types/src/theme/components/fab.d.ts

@@ -3,6 +3,10 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     radii: {
         actionItem: string;
     };
+    fonts: {
+        header: string;
+        actionItemText: string;
+    };
     fontSizes: {
         header: string;
         buttonIcon: string;
@@ -23,10 +27,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         header: string;
         actionItemText: string;
     };
-    fontWeights: {
-        header: string;
-        actionItemText: string;
-    };
     space: {
         actionItemPaddingLeft: string;
         actionItemPaddingRight: string;

package/types/src/theme/components/typography.d.ts

@@ -5,17 +5,17 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         subdued: string;
         primary: string;
     };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
     fontSizes: {
         small: number;
         medium: number;
         large: number;
         xlarge: number;
     };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-    };
     lineHeights: {
         small: string;
         medium: string;

package/types/src/theme/global/index.d.ts

@@ -34,6 +34,11 @@ declare const globalTheme: {
         xxxlarge: number;
         xxxxlarge: number;
     };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
     fontSizes: {
         xxxxxlarge: number;
         xxxxlarge: number;
@@ -45,12 +50,6 @@ declare const globalTheme: {
         small: number;
         xsmall: number;
     };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-        bold: number;
-    };
     lineHeights: {
         xxxxxlarge: number;
         xxxxlarge: number;

package/types/src/theme/global/typography.d.ts

@@ -1,3 +1,8 @@
+declare const fonts: {
+    light: string;
+    regular: string;
+    semiBold: string;
+};
 declare const fontSizes: {
     xxxxxlarge: number;
     xxxxlarge: number;
@@ -9,12 +14,6 @@ declare const fontSizes: {
     small: number;
     xsmall: number;
 };
-declare const fontWeights: {
-    light: number;
-    regular: number;
-    semiBold: number;
-    bold: number;
-};
 declare const lineHeights: {
     xxxxxlarge: number;
     xxxxlarge: number;
@@ -26,4 +25,4 @@ declare const lineHeights: {
     small: number;
     xsmall: number;
 };
-export { fontSizes, fontWeights, lineHeights };
+export { fonts, fontSizes, lineHeights };