@umituz/react-native-settings 4.20.1 → 4.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -91,17 +91,17 @@ export const AboutContent: React.FC<AboutContentProps> = ({
 
 const getStyles = (tokens: any) => StyleSheet.create({
   content: {
-    paddingVertical: 8 * tokens.spacingMultiplier,
+    paddingVertical: 8,
   },
   section: {
-    marginBottom: 24 * tokens.spacingMultiplier,
+    marginBottom: 24,
   },
   sectionHeader: {
     fontSize: tokens.typography.labelSmall.responsiveFontSize,
     fontWeight: '600',
-    marginBottom: 8 * tokens.spacingMultiplier,
-    paddingHorizontal: 16 * tokens.spacingMultiplier,
+    marginBottom: 8,
+    paddingHorizontal: 16,
     textTransform: 'uppercase',
-    letterSpacing: 0.5 * tokens.spacingMultiplier,
+    letterSpacing: 0.5,
   },
 });

package/src/domains/about/presentation/components/AboutHeader.tsx

@@ -59,22 +59,22 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
 const getStyles = (tokens: any) => StyleSheet.create({
   header: {
     alignItems: 'center',
-    paddingVertical: 24 * tokens.spacingMultiplier,
-    paddingHorizontal: 16 * tokens.spacingMultiplier,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
     borderBottomWidth: 1,
   },
   appName: {
     fontSize: tokens.typography.headlineMedium.responsiveFontSize,
     fontWeight: 'bold',
-    marginBottom: 4 * tokens.spacingMultiplier,
+    marginBottom: 4,
   },
   version: {
     fontSize: tokens.typography.bodyLarge.responsiveFontSize,
-    marginBottom: 8 * tokens.spacingMultiplier,
+    marginBottom: 8,
   },
   description: {
     fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     textAlign: 'center',
-    lineHeight: 20 * tokens.spacingMultiplier,
+    lineHeight: 20,
   },
 });

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -173,14 +173,14 @@ const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 12 * tokens.spacingMultiplier,
-    paddingHorizontal: 16 * tokens.spacingMultiplier,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
   },
   disabled: {
     opacity: 0.5,
   },
   iconContainer: {
-    marginRight: 12 * tokens.spacingMultiplier,
+    marginRight: 12,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -193,17 +193,17 @@ const getStyles = (tokens: any) => StyleSheet.create({
   },
   description: {
     fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    marginTop: 2 * tokens.spacingMultiplier,
+    marginTop: 2,
   },
   value: {
     fontSize: tokens.typography.bodyLarge.responsiveFontSize,
-    marginRight: 8 * tokens.spacingMultiplier,
+    marginRight: 8,
     flexShrink: 1,
     textAlign: 'right',
     maxWidth: '60%',
   },
   chevron: {
-    fontSize: 20 * tokens.spacingMultiplier,
+    fontSize: 20,
     fontWeight: '300',
   },
 });

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -165,7 +165,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
     <ScrollView
       style={containerStyles}
       testID={testID}
-      contentContainerStyle={{ paddingBottom: 32 * tokens.spacingMultiplier }}
+      contentContainerStyle={{ paddingBottom: 32 }}
     >
       {renderHeader()}
       {renderContent()}
@@ -179,18 +179,18 @@ const getStyles = (tokens: any) => StyleSheet.create({
     flex: 1,
   },
   footer: {
-    paddingVertical: 16 * tokens.spacingMultiplier,
-    paddingHorizontal: 16 * tokens.spacingMultiplier,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
     borderTopWidth: 1,
   },
   loadingText: {
     textAlign: 'center',
     fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    marginTop: 20 * tokens.spacingMultiplier,
+    marginTop: 20,
   },
   errorText: {
     textAlign: 'center',
     fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    marginTop: 20 * tokens.spacingMultiplier,
+    marginTop: 20,
   },
 });

package/src/domains/appearance/presentation/components/AppearanceHeader.tsx

@@ -59,9 +59,9 @@ export const AppearanceHeader: React.FC<AppearanceHeaderProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     header: {
-      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.lg,
     },
     headerSubtitle: {
-      marginTop: tokens.spacing.sm * tokens.spacingMultiplier,
+      marginTop: tokens.spacing.sm,
     },
   });

package/src/domains/appearance/presentation/components/AppearancePreview.tsx

@@ -106,35 +106,35 @@ export const AppearancePreview: React.FC<AppearancePreviewProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     previewSection: {
-      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.lg,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xs,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.md,
     },
     previewContainer: {
       backgroundColor: tokens.colors.surface,
-      borderRadius: 12 * tokens.spacingMultiplier,
-      padding: tokens.spacing.md * tokens.spacingMultiplier,
+      borderRadius: 12,
+      padding: tokens.spacing.md,
       borderLeftWidth: 4,
       borderLeftColor: tokens.colors.primary,
     },
     previewColorRow: {
       flexDirection: "row",
       flexWrap: "wrap",
-      gap: tokens.spacing.md * tokens.spacingMultiplier,
-      marginTop: tokens.spacing.sm * tokens.spacingMultiplier,
+      gap: tokens.spacing.md,
+      marginTop: tokens.spacing.sm,
     },
     previewColorItem: {
       alignItems: "center",
     },
     previewColorCircle: {
-      width: 32 * tokens.spacingMultiplier,
-      height: 32 * tokens.spacingMultiplier,
-      borderRadius: 16 * tokens.spacingMultiplier,
-      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      marginBottom: tokens.spacing.xs,
       borderWidth: 1,
       borderColor: tokens.colors.border,
     },

package/src/domains/appearance/presentation/components/CustomColorsSection.tsx

@@ -166,21 +166,21 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     section: {
-      marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xl,
     },
     sectionHeader: {
       flexDirection: "row",
       justifyContent: "space-between",
       alignItems: "flex-start",
-      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.md,
     },
     titleContainer: {
       flex: 1,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xs,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.md,
     },
   });

package/src/domains/appearance/presentation/components/ThemeModeSection.tsx

@@ -99,12 +99,12 @@ export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     section: {
-      marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xl,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xs,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.md,
     },
   });

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -41,7 +41,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
     >
       <View style={styles.header}>
         <View style={styles.iconContainer}>
-          <AtomicIcon name={iconName} customSize={24 * tokens.spacingMultiplier} customColor={tokens.colors.primary} />
+          <AtomicIcon name={iconName} customSize={24} customColor={tokens.colors.primary} />
         </View>
         <View style={styles.textContainer}>
           <AtomicText type="titleLarge" color="primary">
@@ -53,7 +53,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
         </View>
         <AtomicIcon
           name={isSelected ? "checkmark-circle-outline" : "ellipse-outline"}
-          customSize={24 * tokens.spacingMultiplier}
+          customSize={24}
           customColor={isSelected ? tokens.colors.primary : tokens.colors.secondary}
         />
       </View>
@@ -93,9 +93,9 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       backgroundColor: tokens.colors.surface,
-      borderRadius: 12 * tokens.spacingMultiplier,
-      padding: 16 * tokens.spacingMultiplier,
-      marginBottom: 16 * tokens.spacingMultiplier,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
       borderWidth: 2,
       borderColor: tokens.colors.border,
     },
@@ -105,34 +105,34 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     header: {
       flexDirection: "row",
       alignItems: "center",
-      marginBottom: 12 * tokens.spacingMultiplier,
+      marginBottom: 12,
     },
     iconContainer: {
-      width: 48 * tokens.spacingMultiplier,
-      height: 48 * tokens.spacingMultiplier,
-      borderRadius: 24 * tokens.spacingMultiplier,
+      width: 48,
+      height: 48,
+      borderRadius: 24,
       backgroundColor: `${tokens.colors.primary}15`,
       justifyContent: "center",
       alignItems: "center",
-      marginRight: 12 * tokens.spacingMultiplier,
+      marginRight: 12,
     },
     textContainer: {
       flex: 1,
     },
     description: {
-      marginBottom: 12 * tokens.spacingMultiplier,
-      lineHeight: 20 * tokens.spacingMultiplier,
+      marginBottom: 12,
+      lineHeight: 20,
     },
     featuresContainer: {
       backgroundColor: `${tokens.colors.primary}08`,
-      borderRadius: 8 * tokens.spacingMultiplier,
-      padding: 12 * tokens.spacingMultiplier,
+      borderRadius: 8,
+      padding: 12,
     },
     featuresTitle: {
-      marginBottom: 8 * tokens.spacingMultiplier,
+      marginBottom: 8,
     },
     feature: {
-      marginBottom: 4 * tokens.spacingMultiplier,
-      lineHeight: 18 * tokens.spacingMultiplier,
+      marginBottom: 4,
+      lineHeight: 18,
     },
   });

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -221,7 +221,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flex: 1,
     },
     scrollContent: {
-      padding: tokens.spacing.md * tokens.spacingMultiplier,
-      paddingBottom: tokens.spacing.xl * tokens.spacingMultiplier,
+      padding: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
     },
   });

package/src/domains/disclaimer/presentation/components/DisclaimerCard.tsx

@@ -78,27 +78,27 @@ export const DisclaimerCard: React.FC<DisclaimerCardProps> = ({
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
-      paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
-      paddingVertical: tokens.spacing.md * tokens.spacingMultiplier,
-      marginHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
-      marginTop: 8 * tokens.spacingMultiplier,
-      marginBottom: 8 * tokens.spacingMultiplier,
-      borderRadius: 12 * tokens.spacingMultiplier,
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.md,
+      marginHorizontal: tokens.spacing.md,
+      marginTop: 8,
+      marginBottom: 8,
+      borderRadius: 12,
     },
 
     headerRow: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginBottom: 12 * tokens.spacingMultiplier,
+      marginBottom: 12,
     },
 
     iconContainer: {
-      width: 40 * tokens.spacingMultiplier,
-      height: 40 * tokens.spacingMultiplier,
-      borderRadius: 20 * tokens.spacingMultiplier,
+      width: 40,
+      height: 40,
+      borderRadius: 20,
       alignItems: 'center',
       justifyContent: 'center',
-      marginRight: 12 * tokens.spacingMultiplier,
+      marginRight: 12,
     },
 
     title: {
@@ -108,8 +108,8 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     },
 
     shortMessage: {
-      lineHeight: 18 * tokens.spacingMultiplier,
-      paddingLeft: 52 * tokens.spacingMultiplier, // Align with title (40px icon + 12px margin)
-      fontSize: 13 * tokens.spacingMultiplier, // Or tokens.typography.bodySmall.responsiveFontSize
+      lineHeight: 18,
+      paddingLeft: 52, // Align with title (40px icon + 12px margin)
+      fontSize: 13, // Or tokens.typography.bodySmall.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -81,8 +81,8 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 20 * tokens.spacingMultiplier,
-      paddingVertical: 16 * tokens.spacingMultiplier,
+      paddingHorizontal: 20,
+      paddingVertical: 16,
       borderBottomWidth: 1,
     },
 
@@ -91,11 +91,11 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     },
 
     modalContentContainer: {
-      padding: 20 * tokens.spacingMultiplier,
+      padding: 20,
     },
 
     modalText: {
-      lineHeight: 24 * tokens.spacingMultiplier,
-      fontSize: 15 * tokens.spacingMultiplier, // or tokens.typography.bodyMedium.responsiveFontSize
+      lineHeight: 24,
+      fontSize: 15, // or tokens.typography.bodyMedium.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -95,27 +95,27 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flex: 1,
     },
     scrollContent: {
-      padding: tokens.spacing.lg * tokens.spacingMultiplier,
-      paddingTop: tokens.spacing.xl * tokens.spacingMultiplier,
+      padding: tokens.spacing.lg,
+      paddingTop: tokens.spacing.xl,
     },
     iconHeader: {
       alignItems: 'center',
-      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.lg,
     },
     iconContainer: {
-      width: 72 * tokens.spacingMultiplier,
-      height: 72 * tokens.spacingMultiplier,
-      borderRadius: 36 * tokens.spacingMultiplier,
+      width: 72,
+      height: 72,
+      borderRadius: 36,
       alignItems: 'center',
       justifyContent: 'center',
       borderWidth: 2,
     },
     title: {
       textAlign: 'center',
-      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.lg,
     },
     content: {
-      lineHeight: 24 * tokens.spacingMultiplier,
+      lineHeight: 24,
       textAlign: 'left',
     },
   });

package/src/domains/faqs/presentation/components/FAQCategory.tsx

@@ -35,11 +35,11 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
         () =>
             StyleSheet.create({
                 container: {
-                    marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
+                    marginBottom: tokens.spacing.xl,
                 },
                 titleContainer: {
-                    marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
-                    paddingHorizontal: tokens.spacing.lg * tokens.spacingMultiplier,
+                    marginBottom: tokens.spacing.sm,
+                    paddingHorizontal: tokens.spacing.lg,
                     flexDirection: 'row',
                     alignItems: 'center',
                 },
@@ -47,7 +47,7 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
                     flex: 1,
                     height: 1,
                     backgroundColor: tokens.colors.border,
-                    marginLeft: tokens.spacing.md * tokens.spacingMultiplier,
+                    marginLeft: tokens.spacing.md,
                 }
             }),
         [tokens]

package/src/domains/faqs/presentation/components/FAQItem.tsx

@@ -38,9 +38,9 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
         () =>
             StyleSheet.create({
                 container: {
-                    marginHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
-                    marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
-                    borderRadius: 20 * tokens.spacingMultiplier,
+                    marginHorizontal: tokens.spacing.md,
+                    marginBottom: tokens.spacing.sm,
+                    borderRadius: 20,
                     backgroundColor: tokens.colors.surface,
                     borderWidth: 1,
                     borderColor: isExpanded ? tokens.colors.primary : tokens.colors.border,
@@ -49,26 +49,26 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                 header: {
                     flexDirection: 'row',
                     alignItems: 'center',
-                    padding: tokens.spacing.lg * tokens.spacingMultiplier,
+                    padding: tokens.spacing.lg,
                 },
                 content: {
                     flex: 1,
-                    marginRight: tokens.spacing.md * tokens.spacingMultiplier,
+                    marginRight: tokens.spacing.md,
                 },
                 questionText: {
                     fontWeight: '700',
                 },
                 answerContainer: {
-                    paddingHorizontal: tokens.spacing.lg * tokens.spacingMultiplier,
-                    paddingBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+                    paddingHorizontal: tokens.spacing.lg,
+                    paddingBottom: tokens.spacing.lg,
                     borderTopWidth: 1,
                     borderTopColor: tokens.colors.borderLight,
                     backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
                 },
                 iconContainer: {
-                    width: 36 * tokens.spacingMultiplier,
-                    height: 36 * tokens.spacingMultiplier,
-                    borderRadius: 18 * tokens.spacingMultiplier,
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18,
                     backgroundColor: isExpanded ? tokens.colors.primary : tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -107,7 +107,7 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                     <AtomicText
                         type="bodyMedium"
                         color="textSecondary"
-                        style={[{ lineHeight: 22 * tokens.spacingMultiplier }, customStyles?.answerStyle]}
+                        style={[{ lineHeight: 22 }, customStyles?.answerStyle]}
                     >
                         {item.answer}
                     </AtomicText>

package/src/domains/faqs/presentation/components/FAQSearchBar.tsx

@@ -35,14 +35,14 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
                     flexDirection: 'row',
                     alignItems: 'center',
                     backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
-                    borderRadius: 16 * tokens.spacingMultiplier,
-                    paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+                    borderRadius: 16,
+                    paddingHorizontal: tokens.spacing.md,
                     borderWidth: 1,
                     borderColor: tokens.colors.borderLight,
-                    height: 48 * tokens.spacingMultiplier,
+                    height: 48,
                 },
                 iconContainer: {
-                    marginRight: tokens.spacing.sm * tokens.spacingMultiplier,
+                    marginRight: tokens.spacing.sm,
                 },
                 input: {
                     flex: 1,

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -58,7 +58,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           flex: 1,
         },
         header: {
-          padding: tokens.spacing.md * tokens.spacingMultiplier,
+          padding: tokens.spacing.md,
         },
         content: {
           flex: 1,
@@ -84,7 +84,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           <AtomicText
             type="headlineMedium"
             color="textPrimary"
-            style={{ marginBottom: tokens.spacing.md * tokens.spacingMultiplier, fontWeight: '700' }}
+            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
           >
             {headerTitle}
           </AtomicText>
@@ -98,7 +98,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
 
         <ScrollView
           style={[styles.content, customStyles?.content]}
-          contentContainerStyle={{ paddingVertical: tokens.spacing.md * tokens.spacingMultiplier }}
+          contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
           showsVerticalScrollIndicator={false}
         >
           {filteredCategories.map((category) => (
@@ -110,7 +110,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
               styles={customStyles?.category}
             />
           ))}
-          <View style={{ height: tokens.spacing.xl * 2 * tokens.spacingMultiplier }} />
+          <View style={{ height: tokens.spacing.xl * 2 }} />
         </ScrollView>
       </View>
     );

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -49,7 +49,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
 
     const renderRating = () => (
         <View style={styles.ratingContainer}>
-            <AtomicText type="bodyMedium" style={{ marginBottom: 8 * tokens.spacingMultiplier, color: tokens.colors.textSecondary }}>
+            <AtomicText type="bodyMedium" style={{ marginBottom: 8, color: tokens.colors.textSecondary }}>
                 {texts.ratingLabel}
             </AtomicText>
             <View style={styles.stars}>
@@ -61,7 +61,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                     >
                         <AtomicIcon
                             name={star <= rating ? "star" : "star-outline"}
-                            customSize={32 * tokens.spacingMultiplier}
+                            customSize={32}
                             customColor={star <= rating ? tokens.colors.warning : tokens.colors.border}
                         />
                     </TouchableOpacity>
@@ -149,40 +149,40 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
         width: "100%",
     },
     typeContainer: {
-        marginBottom: 24 * tokens.spacingMultiplier,
+        marginBottom: 24,
     },
     typeScroll: {
-        gap: 8 * tokens.spacingMultiplier,
+        gap: 8,
     },
     typeButton: {
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: 16 * tokens.spacingMultiplier,
-        paddingVertical: 8 * tokens.spacingMultiplier,
-        borderRadius: 20 * tokens.spacingMultiplier,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
         borderWidth: 1,
-        gap: 6 * tokens.spacingMultiplier,
+        gap: 6,
     },
     ratingContainer: {
         alignItems: "center",
-        marginBottom: 24 * tokens.spacingMultiplier,
+        marginBottom: 24,
     },
     stars: {
         flexDirection: "row",
-        gap: 8 * tokens.spacingMultiplier,
+        gap: 8,
     },
     starButton: {
-        padding: 4 * tokens.spacingMultiplier,
+        padding: 4,
     },
     inputContainer: {
-        marginBottom: 24 * tokens.spacingMultiplier,
+        marginBottom: 24,
     },
     textArea: {
         textAlignVertical: "top",
-        minHeight: 120 * tokens.spacingMultiplier,
+        minHeight: 120,
         borderWidth: 1,
-        borderRadius: 8 * tokens.spacingMultiplier,
-        padding: 12 * tokens.spacingMultiplier,
+        borderRadius: 8,
+        padding: 12,
         fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     submitButton: {

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -47,7 +47,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
                                 {title}
                             </AtomicText>
                             {subtitle && (
-                                <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 * tokens.spacingMultiplier }}>
+                                <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
                                     {subtitle}
                                 </AtomicText>
                             )}
@@ -90,20 +90,20 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        padding: 16 * tokens.spacingMultiplier,
+        padding: 16,
         borderBottomWidth: 1,
     },
     headerText: {
         flex: 1,
     },
     closeButton: {
-        width: 36 * tokens.spacingMultiplier,
-        height: 36 * tokens.spacingMultiplier,
-        borderRadius: 18 * tokens.spacingMultiplier,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
         justifyContent: "center",
         alignItems: "center",
     },
     content: {
-        padding: 20 * tokens.spacingMultiplier,
+        padding: 20,
     },
 });

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -220,18 +220,18 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
 const createLegalScreenStyles = (tokens: DesignTokens) => {
   return StyleSheet.create({
     header: {
-      paddingBottom: tokens.spacing.lg * tokens.spacingMultiplier,
-      paddingTop: tokens.spacing.md * tokens.spacingMultiplier,
+      paddingBottom: tokens.spacing.lg,
+      paddingTop: tokens.spacing.md,
     },
     headerSubtitle: {
-      marginTop: tokens.spacing.xs * tokens.spacingMultiplier,
+      marginTop: tokens.spacing.xs,
     },
     section: {
-      marginTop: tokens.spacing.md * tokens.spacingMultiplier,
+      marginTop: tokens.spacing.md,
     },
     sectionHeader: {
-      marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
-      paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
     },
   });
 };

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -178,29 +178,29 @@ const createPrivacyPolicyStyles = (tokens: any) => {
     },
     scrollContent: {
       flexGrow: 1,
-      padding: 20 * tokens.spacingMultiplier,
+      padding: 20,
     },
     content: {
       flex: 1,
     },
     title: {
-      marginBottom: 24 * tokens.spacingMultiplier,
+      marginBottom: 24,
     },
     text: {
-      lineHeight: 24 * tokens.spacingMultiplier,
+      lineHeight: 24,
       fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
-      marginTop: 32 * tokens.spacingMultiplier,
+      marginTop: 32,
       alignItems: "center",
     },
     urlText: {
-      marginBottom: 16 * tokens.spacingMultiplier,
+      marginBottom: 16,
       textAlign: "center",
       fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
-      marginTop: 8 * tokens.spacingMultiplier,
+      marginTop: 8,
     },
   });
 };

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -178,29 +178,29 @@ const createTermsOfServiceStyles = (tokens: any) => {
     },
     scrollContent: {
       flexGrow: 1,
-      padding: 20 * tokens.spacingMultiplier,
+      padding: 20,
     },
     content: {
       flex: 1,
     },
     title: {
-      marginBottom: 24 * tokens.spacingMultiplier,
+      marginBottom: 24,
     },
     text: {
-      lineHeight: 24 * tokens.spacingMultiplier,
+      lineHeight: 24,
       fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
-      marginTop: 32 * tokens.spacingMultiplier,
+      marginTop: 32,
       alignItems: "center",
     },
     urlText: {
-      marginBottom: 16 * tokens.spacingMultiplier,
+      marginBottom: 16,
       textAlign: "center",
       fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
-      marginTop: 8 * tokens.spacingMultiplier,
+      marginTop: 8,
     },
   });
 };

package/src/domains/rating/presentation/components/StarRating.tsx

@@ -31,7 +31,7 @@ export const StarRating: React.FC<StarRatingProps> = ({
     const emptyColor = inactiveColor || tokens.colors.border || "#E0E0E0";
     
     // Scale the size
-    const responsiveSize = size * tokens.spacingMultiplier;
+    const responsiveSize = size;
 
     const handlePress = (index: number) => {
         if (disabled) return;
@@ -66,9 +66,9 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     container: {
         flexDirection: "row",
         alignItems: "center",
-        gap: 4 * tokens.spacingMultiplier,
+        gap: 4,
     },
     starContainer: {
-        padding: 4 * tokens.spacingMultiplier,
+        padding: 4,
     },
 });

package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx

@@ -111,14 +111,14 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
   container: {
-    borderRadius: 12 * tokens.spacingMultiplier,
+    borderRadius: 12,
     borderWidth: 1,
-    marginBottom: 12 * tokens.spacingMultiplier,
+    marginBottom: 12,
     overflow: "hidden",
   },
   horizontalContainer: {
-    width: 280 * tokens.spacingMultiplier,
-    marginRight: 12 * tokens.spacingMultiplier,
+    width: 280,
+    marginRight: 12,
     marginBottom: 0,
   },
   imageContainer: {
@@ -126,56 +126,56 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   },
   thumbnail: {
     width: "100%",
-    height: 180 * tokens.spacingMultiplier,
+    height: 180,
   },
   horizontalThumbnail: {
-    height: 140 * tokens.spacingMultiplier,
+    height: 140,
   },
   durationBadge: {
     position: "absolute",
-    bottom: 8 * tokens.spacingMultiplier,
-    right: 8 * tokens.spacingMultiplier,
-    paddingHorizontal: 6 * tokens.spacingMultiplier,
-    paddingVertical: 2 * tokens.spacingMultiplier,
-    borderRadius: 4 * tokens.spacingMultiplier,
+    bottom: 8,
+    right: 8,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
   },
   durationText: {
     color: "white",
-    fontSize: 12 * tokens.spacingMultiplier,
+    fontSize: 12,
     fontWeight: "500",
   },
   featuredBadge: {
     position: "absolute",
-    top: 8 * tokens.spacingMultiplier,
-    left: 8 * tokens.spacingMultiplier,
-    paddingHorizontal: 8 * tokens.spacingMultiplier,
-    paddingVertical: 4 * tokens.spacingMultiplier,
-    borderRadius: 4 * tokens.spacingMultiplier,
+    top: 8,
+    left: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
   },
   featuredText: {
-    fontSize: 11 * tokens.spacingMultiplier,
+    fontSize: 11,
     fontWeight: "600",
   },
   content: {
-    padding: 12 * tokens.spacingMultiplier,
+    padding: 12,
   },
   title: {
     fontSize: tokens.typography.titleMedium.responsiveFontSize,
     fontWeight: "600",
-    marginBottom: 6 * tokens.spacingMultiplier,
+    marginBottom: 6,
   },
   horizontalTitle: {
     fontSize: tokens.typography.bodyLarge.responsiveFontSize,
   },
   description: {
     fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    lineHeight: 20 * tokens.spacingMultiplier,
-    marginBottom: 8 * tokens.spacingMultiplier,
+    lineHeight: 20,
+    marginBottom: 8,
   },
   horizontalDescription: {
     fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    lineHeight: 16 * tokens.spacingMultiplier,
-    marginBottom: 6 * tokens.spacingMultiplier,
+    lineHeight: 16,
+    marginBottom: 6,
   },
   metadata: {
     flexDirection: "row",
@@ -183,12 +183,12 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     alignItems: "center",
   },
   category: {
-    fontSize: 12 * tokens.spacingMultiplier,
+    fontSize: 12,
     textTransform: "capitalize",
     fontWeight: "500",
   },
   difficulty: {
-    fontSize: 12 * tokens.spacingMultiplier,
+    fontSize: 12,
     textTransform: "capitalize",
     fontWeight: "500",
   },

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -175,26 +175,26 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   title: {
     fontSize: tokens.typography.headlineLarge.responsiveFontSize,
     fontWeight: "600",
-    marginBottom: 24 * tokens.spacingMultiplier,
+    marginBottom: 24,
   },
   section: {
-    marginBottom: 24 * tokens.spacingMultiplier,
+    marginBottom: 24,
   },
   sectionTitle: {
     fontSize: tokens.typography.titleLarge.responsiveFontSize,
     fontWeight: "500",
-    marginBottom: 12 * tokens.spacingMultiplier,
+    marginBottom: 12,
   },
   horizontalList: {
-    paddingRight: 16 * tokens.spacingMultiplier,
+    paddingRight: 16,
   },
   verticalList: {
-    paddingBottom: 16 * tokens.spacingMultiplier,
+    paddingBottom: 16,
   },
   errorContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    padding: 20 * tokens.spacingMultiplier,
+    padding: 20,
   },
 });