@fadyshawky/react-native-magic 2.0.1 → 2.0.3

package/template/src/core/theme/commonSizes.ts

@@ -2,59 +2,126 @@ import {ISize} from './types';
 
 export const CommonSizes = {
   font: {
-    extraSmall: 11,
-    extraSmallPlus: 12,
-    small: 14,
-    smallPlus: 15,
-    medium: 16,
-    mediumPlus: 18,
-    extraMedium: 20,
-    large: 22,
-    largePlus: 28,
-    extraLarge: 34,
-    extraLargePlus: 44,
+    // Body Text Sizes
+    bodySmall: 12, // Body Small
+    bodyMedium: 14, // Body Medium
+    bodyLarge: 16, // Body Large
+    bodyXLarge: 18, // Body XLarge
+
+    // Heading Sizes
+    heading6: 18, // Heading 6 / Bold / 18px
+    heading4: 24, // Heading 4 / Bold / 24px
+    heading3: 32, // Heading 3 / Bold / 32px
+    heading2: 48, // Heading 2 / Bold / 48px
+    heading1: 64, // Heading 1 / Bold / 64px
+
+    // Legacy support - keeping these for backward compatibility
+    extraSmall: 12, // Maps to bodySmall
+    extraSmallPlus: 14, // Maps to bodyMedium
+    small: 14, // Maps to bodyMedium
+    smallPlus: 16, // Maps to bodyLarge
+    medium: 16, // Maps to bodyLarge
+    mediumPlus: 18, // Maps to bodyXLarge
+    extraMedium: 24, // Maps to heading4
+    large: 32, // Maps to heading3
+    largePlus: 48, // Maps to heading2
+    extraLarge: 64, // Maps to heading1
+    extraLargePlus: 64, // Maps to heading1
   } as Readonly<ISize['font']>,
   letterSpacing: {
-    extraSmall: 0.07,
+    // Default letter spacing for Almarai
+    bodySmall: 0,
+    bodyMedium: 0,
+    bodyLarge: 0,
+    bodyXLarge: 0,
+    heading6: 0,
+    heading4: 0,
+    heading3: 0,
+    heading2: 0,
+    heading1: 0,
+
+    // Legacy support
+    extraSmall: 0,
     extraSmallPlus: 0,
-    small: -0.08,
-    smallPlus: -0.24,
-    medium: -0.41,
-    mediumPlus: 0.38,
-    large: 0.35,
-    largePlus: 0.36,
-    extraLarge: 0.37,
-    extraLargePlus: 0.37,
+    small: 0,
+    smallPlus: 0,
+    medium: 0,
+    mediumPlus: 0,
+    large: 0,
+    largePlus: 0,
+    extraLarge: 0,
+    extraLargePlus: 0,
   } as Readonly<ISize['letterSpacing']>,
   lineHeight: {
-    extraSmall: 13,
-    extraSmallPlus: 16,
-    small: 19,
-    smallPlus: 20,
-    medium: 22,
-    mediumPlus: 25,
-    large: 28,
-    largePlus: 34,
-    extraLarge: 41,
-    extraLargePlus: 52,
+    // Line heights optimized for Almarai's large x-height
+    bodySmall: 16, // ~1.33 line height
+    bodyMedium: 20, // ~1.43 line height
+    bodyLarge: 24, // ~1.5 line height
+    bodyXLarge: 26, // ~1.44 line height
+    heading6: 24, // ~1.33 line height
+    heading4: 32, // ~1.33 line height
+    heading3: 40, // ~1.25 line height
+    heading2: 56, // ~1.17 line height
+    heading1: 72, // ~1.125 line height
+
+    // Legacy support
+    extraSmall: 16,
+    extraSmallPlus: 20,
+    small: 20,
+    smallPlus: 24,
+    medium: 24,
+    mediumPlus: 26,
+    large: 40,
+    largePlus: 56,
+    extraLarge: 72,
+    extraLargePlus: 72,
   } as Readonly<ISize['lineHeight']>,
   spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
+    none: 0, // space / 0
+    xSmall: 2, // space / 2
+    small: 4, // space / 4
+    medium: 8, // space / 8
+    large: 12, // space / 12
+    xLarge: 16, // space / 16
+    xxLarge: 24, // space / 24 (2X-Large)
+    xxxLarge: 32, // space / 32 (3X-Large)
+    xxxxLarge: 48, // space / 48 (4X-Large)
+    xxxxxLarge: 64, // space / 64 (5X-Large)
+    xxxxxxLarge: 80, // space / 80 (6X-Large)
+    full: 100, // space / 100 (Full)
+
+    // Legacy support - keeping these for backward compatibility
+    xs: 4, // Maps to small
+    sm: 8, // Maps to medium
+    md: 16, // Maps to xLarge
+    lg: 24, // Maps to xxLarge
+    xl: 32, // Maps to xxxLarge
   } as Readonly<ISize['spacing']>,
   borderRadius: {
-    xs: 4,
-    sm: 8,
-    md: 12,
-    lg: 16,
-    xl: 24,
+    none: 0, // Border / 0
+    xSmall: 2, // Border / 2
+    small: 4, // Border / 4
+    medium: 8, // Border / 8
+    large: 12, // Border / 12
+    xLarge: 16, // Border / 16
+    xxLarge: 24, // Border / 24 (2X-Large)
+    full: 1000, // Border / 1000 (Full)
+
+    // Legacy support - keeping these for backward compatibility
+    xs: 4, // Maps to small
+    sm: 8, // Maps to medium
+    md: 12, // Maps to large
+    lg: 16, // Maps to xLarge
+    xl: 24, // Maps to xxLarge
   } as Readonly<ISize['borderRadius']>,
   borderWidth: {
-    small: 1,
-    medium: 2,
-    large: 3,
+    none: 0, // Stroke / 0
+    xSmall: 0.5, // Stroke / 0.5
+    small: 1, // Stroke / 1
+    medium: 1.5, // Stroke / 1.5
+    large: 2, // Stroke / 2
+
+    // Legacy support - keeping these for backward compatibility
+    extraSmall: 0.5, // Maps to xSmall
   } as Readonly<ISize['borderWidth']>,
 };

package/template/src/core/theme/commonStyles.ts

@@ -6,8 +6,8 @@ import {
   ViewStyle,
 } from 'react-native';
 import {Theme} from './types';
-import {FontSizes, LineHeight, Spacing} from './commonSizes';
 import {Fonts} from './fonts';
+import {CommonSizes} from './commonSizes';
 
 export const screenComponentWidth = Dimensions.get('screen').width - 60;
 export const screenWidth = Dimensions.get('screen').width;
@@ -131,34 +131,34 @@ export const createThemedStyles = (theme: Theme) =>
     } as TextStyle,
     h4_semiBold: {
       fontFamily: Fonts.semiBold,
-      fontSize: FontSizes.medium,
-      lineHeight: LineHeight.medium,
+      fontSize: CommonSizes.font.medium,
+      lineHeight: CommonSizes.lineHeight.medium,
     } as TextStyle,
     h4_regular: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.medium,
-      lineHeight: LineHeight.medium,
+      fontSize: CommonSizes.font.medium,
+      lineHeight: CommonSizes.lineHeight.medium,
     } as TextStyle,
     body_bold: {
       fontFamily: Fonts.bold,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
     } as TextStyle,
     body_bold_underlined: {
       fontFamily: Fonts.bold,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
       textDecorationLine: 'underline',
     } as TextStyle,
     body_semiBold: {
       fontFamily: Fonts.semiBold,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
     } as TextStyle,
     body_regular: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.small,
-      lineHeight: LineHeight.small,
+      fontSize: CommonSizes.font.small,
+      lineHeight: CommonSizes.lineHeight.small,
     } as TextStyle,
     tabBar_bold: {
       fontFamily: Fonts.bold,
@@ -204,47 +204,47 @@ export const CommonStyles = createThemedStyles({
   text: {
     header1: {
       fontFamily: Fonts.medium,
-      fontSize: FontSizes.header1,
+      fontSize: CommonSizes.font.large,
       color: '#000000',
     },
     header2: {
       fontFamily: Fonts.normal,
-      fontSize: FontSizes.header2,
+      fontSize: CommonSizes.font.largePlus,
       color: '#000000',
     },
     body1: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.body1,
+      fontSize: CommonSizes.font.medium,
       color: '#000000',
     },
     body2: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.body2,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     button: {
       fontFamily: Fonts.regular,
-      fontSize: FontSizes.button,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#FFFFFF',
     },
     cards: {
       fontFamily: Fonts.semiBold,
-      fontSize: FontSizes.card,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     SearchBar: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.searchBar,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     label: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.label,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
     },
     hyperlink: {
       fontFamily: Fonts.light,
-      fontSize: FontSizes.hyperlink,
+      fontSize: CommonSizes.font.mediumPlus,
       color: '#000000',
       textDecorationLine: 'underline',
     },

package/template/src/core/theme/fonts.ts

@@ -1,17 +1,16 @@
 export const Fonts = {
-  // Inter Variable Font
-  regular: 'Inter-VariableFont_opsz,wght',
-  italic: 'Inter-Italic-VariableFont_opsz,wght',
+  // Almarai Font Family
+  light: 'Almarai-Light',
+  regular: 'Almarai-Regular',
+  bold: 'Almarai-Bold',
+  extraBold: 'Almarai-ExtraBold',
 
-  // Kanit Font
-  medium: 'Kanit-Medium',
-
-  // Font weights for Inter Variable Font
-  thin: 'Inter-Thin',
-  light: 'Inter-Light',
-  normal: 'Inter-Regular',
-  semiBold: 'Inter-SemiBold',
-  bold: 'Inter-Bold',
-  extraBold: 'Inter-ExtraBold',
-  black: 'Inter-Black',
+  // Legacy support - keeping these for backward compatibility
+  // but they now map to Almarai equivalents
+  thin: 'Almarai-Light',
+  normal: 'Almarai-Regular',
+  medium: 'Almarai-Regular',
+  semiBold: 'Almarai-Bold',
+  black: 'Almarai-ExtraBold',
+  italic: 'Almarai-Regular', // Almarai doesn't have italic variant
 };

package/template/src/core/theme/shadows.ts

@@ -0,0 +1,135 @@
+export interface ShadowConfig {
+  shadowColor: string;
+  shadowOffset: {
+    width: number;
+    height: number;
+  };
+  shadowOpacity: number;
+  shadowRadius: number;
+  elevation?: number; // For Android
+}
+
+export interface ElevationShadow {
+  primary: ShadowConfig;
+  secondary: ShadowConfig;
+}
+
+export const Shadows: Record<number, ElevationShadow> = {
+  1: {
+    primary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.02, // 2%
+      shadowRadius: 1,
+      elevation: 1,
+    },
+    secondary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.04, // 4%
+      shadowRadius: 4,
+      elevation: 1,
+    },
+  },
+  2: {
+    primary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.04, // 4%
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    secondary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.08, // 8%
+      shadowRadius: 10,
+      elevation: 2,
+    },
+  },
+  3: {
+    primary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.04, // 4%
+      shadowRadius: 20,
+      elevation: 3,
+    },
+    secondary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 8,
+      },
+      shadowOpacity: 0.08, // 8%
+      shadowRadius: 32,
+      elevation: 3,
+    },
+  },
+  4: {
+    primary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 8,
+      },
+      shadowOpacity: 0.06, // 6%
+      shadowRadius: 20,
+      elevation: 4,
+    },
+    secondary: {
+      shadowColor: '#000000',
+      shadowOffset: {
+        width: 0,
+        height: 24,
+      },
+      shadowOpacity: 0.12, // 12%
+      shadowRadius: 60,
+      elevation: 4,
+    },
+  },
+};
+
+// Helper function to get shadow styles for a specific elevation
+export const getShadowStyle = (
+  elevation: number,
+  useSecondary = false,
+): ShadowConfig => {
+  const shadow = Shadows[elevation];
+  if (!shadow) {
+    throw new Error(
+      `Elevation ${elevation} is not defined. Available elevations: ${Object.keys(
+        Shadows,
+      ).join(', ')}`,
+    );
+  }
+  return useSecondary ? shadow.secondary : shadow.primary;
+};
+
+// Helper function to get both primary and secondary shadows for an elevation
+export const getElevationShadows = (elevation: number): ElevationShadow => {
+  const shadow = Shadows[elevation];
+  if (!shadow) {
+    throw new Error(
+      `Elevation ${elevation} is not defined. Available elevations: ${Object.keys(
+        Shadows,
+      ).join(', ')}`,
+    );
+  }
+  return shadow;
+};