@fadyshawky/react-native-magic 2.0.5 → 2.0.7

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

@@ -1,102 +1,127 @@
-import {ISize} from '../../../types';
-import {scale, scaleFontSize, scaleSpacing, scaleBorderRadius} from './scaling';
+import {ISize} from './types';
 
-// Font sizes following design system
-export const FontSizes = {
-  // Header sizes
-  header1: scaleFontSize(48),
-  header2: scaleFontSize(48),
-
-  // Body sizes
-  body1: scaleFontSize(32),
-  body2: scaleFontSize(30),
+export const CommonSizes = {
+  font: {
+    // Body Text Sizes
+    bodySmall: 12, // Body Small
+    bodyMedium: 14, // Body Medium
+    bodyLarge: 16, // Body Large
+    bodyXLarge: 18, // Body XLarge
 
-  // Component specific sizes
-  button: scaleFontSize(36),
-  card: scaleFontSize(34),
-  searchBar: scaleFontSize(24),
-  balanceLabel: scaleFontSize(16),
-  label: scaleFontSize(20),
-  hyperlink: scaleFontSize(24),
-  // Additional utility sizes
-  small: scaleFontSize(24),
-  medium: scaleFontSize(30),
-  large: scaleFontSize(36),
-  extraLarge: scaleFontSize(48),
-  navBar: scaleFontSize(22),
-} as const;
+    // 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
 
-// Letter spacing for typography
-export const LetterSpacing = {
-  none: 0,
-  tiny: scale(-0.5),
-  small: scale(-0.25),
-  medium: scale(0),
-  extraMedium: scale(0.25),
-  large: scale(0.5),
-  extraLarge: scale(1),
-  huge: scale(2),
-} as const;
+    // 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: {
+    // Default letter spacing for Almarai
+    bodySmall: 0,
+    bodyMedium: 0,
+    bodyLarge: 0,
+    bodyXLarge: 0,
+    heading6: 0,
+    heading4: 0,
+    heading3: 0,
+    heading2: 0,
+    heading1: 0,
 
-// Line heights for consistent vertical rhythm
-export const LineHeight = {
-  none: 0,
-  tiny: scale(14),
-  small: scale(16),
-  medium: scale(18),
-  extraMedium: scale(20),
-  large: scale(22),
-  extraLarge: scale(24),
-  huge: scale(28),
-} as const;
+    // Legacy support
+    extraSmall: 0,
+    extraSmallPlus: 0,
+    small: 0,
+    smallPlus: 0,
+    medium: 0,
+    mediumPlus: 0,
+    large: 0,
+    largePlus: 0,
+    extraLarge: 0,
+    extraLargePlus: 0,
+  } as Readonly<ISize['letterSpacing']>,
+  lineHeight: {
+    // 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
 
-// Spacing system that aligns with theme spacing
-export const Spacing = {
-  none: 0,
-  tiny: scaleSpacing(2),
-  small: scaleSpacing(4),
-  medium: scaleSpacing(8),
-  extraMedium: scaleSpacing(12),
-  large: scaleSpacing(16),
-  largePlus: scaleSpacing(16),
-  extraLarge: scaleSpacing(24),
-  extraLargePlus: scaleSpacing(30),
-  huge: scaleSpacing(35),
-  xl: scaleSpacing(40),
-  xxl: scaleSpacing(50),
-} as const;
+    // 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: {
+    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)
 
-// Border radius system that aligns with theme borderRadius
-export const BorderRadius = {
-  none: 0,
-  tiny: scaleBorderRadius(2),
-  small: scaleBorderRadius(4),
-  medium: scaleBorderRadius(8),
-  extraMedium: scaleBorderRadius(12),
-  large: scaleBorderRadius(16),
-  extraLarge: scaleBorderRadius(24),
-  huge: scaleBorderRadius(32),
-  circular: 999,
-} as const;
+    // 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: {
+    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)
 
-// Border widths
-export const BorderWidth = {
-  none: 0,
-  tiny: scale(0.5),
-  small: scale(1),
-  medium: scale(2),
-  extraMedium: scale(3),
-  large: scale(4),
-  extraLarge: scale(6),
-  huge: scale(8),
-} as const;
+    // 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: {
+    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 export for backward compatibility
-export const CommonSizes = {
-  letterSpacing: LetterSpacing,
-  lineHeight: LineHeight,
-  spacing: Spacing,
-  borderRadius: BorderRadius,
-  borderWidth: BorderWidth,
-  fontSize: FontSizes,
-} as const;
+    // 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;
+};