refactor(theme): rename Colors/Spacing to AppColors/AppSpacing

Author: fadi-george

examples/build.md

@@ -103,7 +103,7 @@ Build the app with:
 - TypeScript with strict mode enabled
 - Consistent theme using shared style reference (see Prompt 8.5)
 - App name: "OneSignal Demo"
-- Top navigation header: centered title with OneSignal logo SVG + "Sample App" text
+- Top navigation header: centered title with OneSignal logo SVG + "React Native" text
 - Support for both Android and iOS
 - Android package name: com.onesignal.example
 - iOS bundle identifier: com.onesignal.example
@@ -448,8 +448,8 @@ Send In-App Message Section (placed right after In-App Messaging):
 
 - Section title: "Send In-App Message" with info icon for tooltip
 - Four FULL-WIDTH buttons (not a grid):
-  1. TOP BANNER - icon: arrow-up-bold-box-outline, trigger: "iam_type" = "top_banner"
-  2. BOTTOM BANNER - icon: arrow-down-bold-box-outline, trigger: "iam_type" = "bottom_banner"
+  1. TOP BANNER - icon: format-vertical-align-top, trigger: "iam_type" = "top_banner"
+  2. BOTTOM BANNER - icon: format-vertical-align-bottom, trigger: "iam_type" = "bottom_banner"
   3. CENTER MODAL - icon: crop-square, trigger: "iam_type" = "center_modal"
   4. FULL SCREEN - icon: fullscreen, trigger: "iam_type" = "full_screen"
 - Button styling:

examples/demo/App.tsx

@@ -24,7 +24,7 @@ import LogManager from './src/services/LogManager';
 import OneSignalApiService from './src/services/OneSignalApiService';
 import PreferencesService from './src/services/PreferencesService';
 import TooltipHelper from './src/services/TooltipHelper';
-import { Colors } from './src/theme';
+import { AppColors } from './src/theme';
 
 const Stack = createNativeStackNavigator();
 const log = LogManager.getInstance();
@@ -136,15 +136,15 @@ function App() {
   return (
     <SafeAreaProvider>
       <StatusBar
-        backgroundColor={Colors.oneSignalRed}
+        backgroundColor={AppColors.osPrimary}
         barStyle="light-content"
       />
       <AppContextProvider>
         <NavigationContainer>
           <Stack.Navigator
             screenOptions={{
-              headerStyle: { backgroundColor: Colors.oneSignalRed },
-              headerTintColor: Colors.white,
+              headerStyle: { backgroundColor: AppColors.osPrimary },
+              headerTintColor: AppColors.white,
               headerTitleAlign: 'center',
             }}
           >
@@ -159,7 +159,7 @@ function App() {
                       width={99}
                       style={headerStyles.logo}
                     />
-                    <Text style={headerStyles.subtitle}>Sample App</Text>
+                    <Text style={headerStyles.subtitle}>React Native</Text>
                   </View>
                 ),
               }}
@@ -188,7 +188,7 @@ const headerStyles = StyleSheet.create({
   subtitle: {
     fontSize: 14,
     fontWeight: '400',
-    color: Colors.white,
+    color: AppColors.white,
     opacity: 0.9,
   },
 });

examples/demo/src/components/ActionButton.tsx

@@ -6,7 +6,7 @@ import {
   View,
   ActivityIndicator,
 } from 'react-native';
-import { Colors, Spacing } from '../theme';
+import { AppColors, AppSpacing } from '../theme';
 
 interface Props {
   label: string;
@@ -33,17 +33,17 @@ export default function ActionButton({
 }: Props) {
   const bgColor =
     variant === 'primary'
-      ? Colors.oneSignalRed
+      ? AppColors.osPrimary
       : variant === 'destructive'
-        ? Colors.destructiveRed
+        ? AppColors.osPrimary
         : 'transparent';
 
   const borderStyle =
     variant === 'outlined'
-      ? { borderWidth: 1, borderColor: Colors.oneSignalRed }
+      ? { borderWidth: 1, borderColor: AppColors.osPrimary }
       : {};
 
-  const textColor = variant === 'outlined' ? Colors.oneSignalRed : Colors.white;
+  const textColor = variant === 'outlined' ? AppColors.osPrimary : AppColors.white;
 
   return (
     <TouchableOpacity
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
     paddingVertical: 14,
     paddingHorizontal: 16,
     width: '100%',
-    marginBottom: Spacing.cardGap,
+    marginBottom: AppSpacing.gap,
   },
   inner: {
     flexDirection: 'row',

examples/demo/src/components/ListWidgets.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { Colors, AppTheme } from '../theme';
+import { AppColors, AppTheme } from '../theme';
 
 // PairItem
 interface PairItemProps {
@@ -46,7 +46,7 @@ export function PairItem({
           onPress={onDelete}
           hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         >
-          <Icon name="close" size={18} color={Colors.textSecondary} />
+          <Icon name="close" size={18} color={AppColors.osPrimary} />
         </TouchableOpacity>
       )}
     </View>
@@ -71,7 +71,7 @@ export function SingleItem({ value, onDelete, testID }: SingleItemProps) {
           onPress={onDelete}
           hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         >
-          <Icon name="close" size={18} color={Colors.textSecondary} />
+          <Icon name="close" size={18} color={AppColors.osPrimary} />
         </TouchableOpacity>
       )}
     </View>
@@ -195,28 +195,28 @@ const styles = StyleSheet.create({
   },
   pairStackedKey: {
     fontSize: 15,
-    color: Colors.textPrimary,
+    color: AppColors.osGrey700,
     fontWeight: '500',
     marginBottom: 2,
   },
   pairStackedValue: {
     fontSize: 14,
-    color: Colors.textSecondary,
+    color: AppColors.osGrey600,
   },
   pairKey: {
     flex: 1,
     fontSize: 14,
-    color: Colors.textSecondary,
+    color: AppColors.osGrey600,
   },
   pairSeparator: {
     fontSize: 14,
-    color: Colors.dividerColor,
+    color: AppColors.osDivider,
     marginHorizontal: 8,
   },
   pairValue: {
     flex: 1,
     fontSize: 14,
-    color: Colors.textPrimary,
+    color: AppColors.osGrey700,
     textAlign: 'right',
     marginRight: 8,
   },
@@ -228,28 +228,28 @@ const styles = StyleSheet.create({
   singleValue: {
     flex: 1,
     fontSize: 14,
-    color: Colors.textPrimary,
+    color: AppColors.osGrey700,
   },
   emptyContainer: {
     paddingVertical: 8,
     alignItems: 'center',
   },
   emptyText: {
     fontSize: 14,
-    color: Colors.textSecondary,
+    color: AppColors.osGrey600,
     fontStyle: 'italic',
   },
   divider: {
     height: 1,
-    backgroundColor: Colors.dividerColor,
+    backgroundColor: AppColors.osDivider,
   },
   moreButton: {
     paddingVertical: 8,
     alignItems: 'center',
   },
   moreText: {
     fontSize: 13,
-    color: Colors.oneSignalRed,
+    color: AppColors.osPrimary,
     fontWeight: '500',
   },
 });

examples/demo/src/components/LoadingOverlay.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ActivityIndicator, StyleSheet } from 'react-native';
-import { Colors } from '../theme';
+import { AppColors } from '../theme';
 
 interface Props {
   visible: boolean;
@@ -12,15 +12,15 @@ export default function LoadingOverlay({ visible }: Props) {
   }
   return (
     <View style={styles.overlay}>
-      <ActivityIndicator size="large" color={Colors.oneSignalRed} />
+      <ActivityIndicator size="large" color={AppColors.osPrimary} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.3)',
+    backgroundColor: AppColors.osOverlayScrim,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 999,

examples/demo/src/components/LogView.tsx

@@ -8,12 +8,13 @@ import {
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import LogManager, { LogEntry } from '../services/LogManager';
+import { AppColors } from '../theme';
 
 const LEVEL_COLORS: Record<string, string> = {
-  D: '#9E9E9E',
-  I: '#64B5F6',
-  W: '#FFB74D',
-  E: '#EF5350',
+  D: AppColors.osLogDebug,
+  I: AppColors.osLogInfo,
+  W: AppColors.osLogWarn,
+  E: AppColors.osLogError,
 };
 
 export default function LogView() {
@@ -28,7 +29,6 @@ export default function LogView() {
   useEffect(() => {
     const unsub = LogManager.getInstance().subscribe(updated => {
       setEntries(updated);
-      // auto-scroll to end
       setTimeout(() => {
         vertScrollRef.current?.scrollToEnd({ animated: false });
       }, 50);
@@ -43,7 +43,6 @@ export default function LogView() {
       style={[styles.container, { height: expanded ? 200 : 36 }]}
       testID="log_view_container"
     >
-      {/* Header */}
       <TouchableOpacity
         style={styles.header}
         onPress={() => setExpanded(prev => !prev)}
@@ -58,12 +57,12 @@ export default function LogView() {
             hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
             testID="log_view_clear_button"
           >
-            <Icon name="delete" size={18} color="#9E9E9E" />
+            <Icon name="delete" size={18} color={AppColors.osGrey500} />
           </TouchableOpacity>
           <Icon
             name={expanded ? 'expand-less' : 'expand-more'}
             size={18}
-            color="#9E9E9E"
+            color={AppColors.osGrey500}
             style={styles.expandIcon}
           />
         </View>
@@ -105,7 +104,7 @@ export default function LogView() {
                   <Text
                     style={[
                       styles.level,
-                      { color: LEVEL_COLORS[entry.level] ?? '#9E9E9E' },
+                      { color: LEVEL_COLORS[entry.level] ?? AppColors.osGrey500 },
                     ]}
                     testID={`log_entry_${index}_level`}
                   >
@@ -131,19 +130,19 @@ export default function LogView() {
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    backgroundColor: '#1A1B1E',
+    backgroundColor: AppColors.osLogBackground,
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
   },
   headerText: {
     fontSize: 11,
-    fontWeight: '600',
-    color: '#9E9E9E',
+    fontWeight: '700',
+    color: AppColors.white,
     letterSpacing: 0.8,
   },
   headerRight: {
@@ -166,7 +165,7 @@ const styles = StyleSheet.create({
   },
   timestamp: {
     fontSize: 11,
-    color: '#757575',
+    color: AppColors.osLogTimestamp,
     fontFamily: 'monospace',
   },
   level: {
@@ -176,12 +175,12 @@ const styles = StyleSheet.create({
   },
   message: {
     fontSize: 11,
-    color: '#E0E0E0',
+    color: AppColors.white,
     fontFamily: 'monospace',
   },
   emptyText: {
     fontSize: 11,
-    color: '#757575',
+    color: AppColors.osGrey500,
     fontStyle: 'italic',
     paddingVertical: 4,
   },

examples/demo/src/components/SectionCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Colors, AppTheme, Spacing } from '../theme';
+import { AppColors, AppTheme, AppSpacing } from '../theme';
 
 interface Props {
   title: string;
@@ -36,25 +36,25 @@ export default function SectionCard({
 const styles = StyleSheet.create({
   wrapper: {
     marginHorizontal: 16,
-    marginBottom: Spacing.sectionGap,
+    marginBottom: AppSpacing.sectionVertical,
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginBottom: Spacing.cardGap,
+    marginBottom: AppSpacing.gap,
     paddingHorizontal: 4,
   },
   title: {
     fontSize: 12,
-    fontWeight: '600',
-    color: Colors.textSecondary,
-    letterSpacing: 0.8,
+    fontWeight: '700',
+    color: AppColors.osGrey700,
+    letterSpacing: 0.5,
     textTransform: 'uppercase',
   },
   infoIcon: {
-    fontSize: 16,
-    color: Colors.textSecondary,
+    fontSize: 18,
+    color: AppColors.osGrey500,
   },
   card: {
     ...AppTheme.card,