Skip to content

Commit bf98d32

Browse files
fadi-georgefadi-george
committed
refactor(theme): rename Colors/Spacing to AppColors/AppSpacing
1 parent eb9bd05 commit bf98d32

28 files changed

+161
-197
lines changed

‎examples/demo/src/components/ActionButton.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
View,
77
ActivityIndicator,
88
} from 'react-native';
9-
import { Colors, Spacing } from '../theme';
9+
import { AppColors, AppSpacing } from '../theme';
1010

1111
interface Props {
1212
label: string;
@@ -33,17 +33,17 @@ export default function ActionButton({
3333
}: Props) {
3434
const bgColor =
3535
variant === 'primary'
36-
? Colors.oneSignalRed
36+
? AppColors.osPrimary
3737
: variant === 'destructive'
38-
? Colors.destructiveRed
38+
? AppColors.osPrimary
3939
: 'transparent';
4040

4141
const borderStyle =
4242
variant === 'outlined'
43-
? { borderWidth: 1, borderColor: Colors.oneSignalRed }
43+
? { borderWidth: 1, borderColor: AppColors.osPrimary }
4444
: {};
4545

46-
const textColor = variant === 'outlined' ? Colors.oneSignalRed : Colors.white;
46+
const textColor = variant === 'outlined' ? AppColors.osPrimary : AppColors.white;
4747

4848
return (
4949
<TouchableOpacity
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
8181
paddingVertical: 14,
8282
paddingHorizontal: 16,
8383
width: '100%',
84-
marginBottom: Spacing.cardGap,
84+
marginBottom: AppSpacing.gap,
8585
},
8686
inner: {
8787
flexDirection: 'row',

‎examples/demo/src/components/ListWidgets.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
33
import Icon from 'react-native-vector-icons/MaterialIcons';
4-
import { Colors, AppTheme } from '../theme';
4+
import { AppColors, AppTheme } from '../theme';
55

66
// PairItem
77
interface PairItemProps {
@@ -46,7 +46,7 @@ export function PairItem({
4646
onPress={onDelete}
4747
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
4848
>
49-
<Icon name="close" size={18} color={Colors.textSecondary} />
49+
<Icon name="close" size={18} color={AppColors.osPrimary} />
5050
</TouchableOpacity>
5151
)}
5252
</View>
@@ -71,7 +71,7 @@ export function SingleItem({ value, onDelete, testID }: SingleItemProps) {
7171
onPress={onDelete}
7272
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
7373
>
74-
<Icon name="close" size={18} color={Colors.textSecondary} />
74+
<Icon name="close" size={18} color={AppColors.osPrimary} />
7575
</TouchableOpacity>
7676
)}
7777
</View>
@@ -195,28 +195,28 @@ const styles = StyleSheet.create({
195195
},
196196
pairStackedKey: {
197197
fontSize: 15,
198-
color: Colors.textPrimary,
198+
color: AppColors.osGrey700,
199199
fontWeight: '500',
200200
marginBottom: 2,
201201
},
202202
pairStackedValue: {
203203
fontSize: 14,
204-
color: Colors.textSecondary,
204+
color: AppColors.osGrey600,
205205
},
206206
pairKey: {
207207
flex: 1,
208208
fontSize: 14,
209-
color: Colors.textSecondary,
209+
color: AppColors.osGrey600,
210210
},
211211
pairSeparator: {
212212
fontSize: 14,
213-
color: Colors.dividerColor,
213+
color: AppColors.osDivider,
214214
marginHorizontal: 8,
215215
},
216216
pairValue: {
217217
flex: 1,
218218
fontSize: 14,
219-
color: Colors.textPrimary,
219+
color: AppColors.osGrey700,
220220
textAlign: 'right',
221221
marginRight: 8,
222222
},
@@ -228,28 +228,28 @@ const styles = StyleSheet.create({
228228
singleValue: {
229229
flex: 1,
230230
fontSize: 14,
231-
color: Colors.textPrimary,
231+
color: AppColors.osGrey700,
232232
},
233233
emptyContainer: {
234234
paddingVertical: 8,
235235
alignItems: 'center',
236236
},
237237
emptyText: {
238238
fontSize: 14,
239-
color: Colors.textSecondary,
239+
color: AppColors.osGrey600,
240240
fontStyle: 'italic',
241241
},
242242
divider: {
243243
height: 1,
244-
backgroundColor: Colors.dividerColor,
244+
backgroundColor: AppColors.osDivider,
245245
},
246246
moreButton: {
247247
paddingVertical: 8,
248248
alignItems: 'center',
249249
},
250250
moreText: {
251251
fontSize: 13,
252-
color: Colors.oneSignalRed,
252+
color: AppColors.osPrimary,
253253
fontWeight: '500',
254254
},
255255
});

‎examples/demo/src/components/LoadingOverlay.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { View, ActivityIndicator, StyleSheet } from 'react-native';
3-
import { Colors } from '../theme';
3+
import { AppColors } from '../theme';
44

55
interface Props {
66
visible: boolean;
@@ -12,15 +12,15 @@ export default function LoadingOverlay({ visible }: Props) {
1212
}
1313
return (
1414
<View style={styles.overlay}>
15-
<ActivityIndicator size="large" color={Colors.oneSignalRed} />
15+
<ActivityIndicator size="large" color={AppColors.osPrimary} />
1616
</View>
1717
);
1818
}
1919

2020
const styles = StyleSheet.create({
2121
overlay: {
2222
...StyleSheet.absoluteFillObject,
23-
backgroundColor: 'rgba(0,0,0,0.3)',
23+
backgroundColor: AppColors.osOverlayScrim,
2424
alignItems: 'center',
2525
justifyContent: 'center',
2626
zIndex: 999,

‎examples/demo/src/components/LogView.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import {
88
} from 'react-native';
99
import Icon from 'react-native-vector-icons/MaterialIcons';
1010
import LogManager, { LogEntry } from '../services/LogManager';
11+
import { AppColors } from '../theme';
1112

1213
const LEVEL_COLORS: Record<string, string> = {
13-
D: '#9E9E9E',
14-
I: '#64B5F6',
15-
W: '#FFB74D',
16-
E: '#EF5350',
14+
D: AppColors.osLogDebug,
15+
I: AppColors.osLogInfo,
16+
W: AppColors.osLogWarn,
17+
E: AppColors.osLogError,
1718
};
1819

1920
export default function LogView() {
@@ -28,7 +29,6 @@ export default function LogView() {
2829
useEffect(() => {
2930
const unsub = LogManager.getInstance().subscribe(updated => {
3031
setEntries(updated);
31-
// auto-scroll to end
3232
setTimeout(() => {
3333
vertScrollRef.current?.scrollToEnd({ animated: false });
3434
}, 50);
@@ -43,7 +43,6 @@ export default function LogView() {
4343
style={[styles.container, { height: expanded ? 200 : 36 }]}
4444
testID="log_view_container"
4545
>
46-
{/* Header */}
4746
<TouchableOpacity
4847
style={styles.header}
4948
onPress={() => setExpanded(prev => !prev)}
@@ -58,12 +57,12 @@ export default function LogView() {
5857
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
5958
testID="log_view_clear_button"
6059
>
61-
<Icon name="delete" size={18} color="#9E9E9E" />
60+
<Icon name="delete" size={18} color={AppColors.osGrey500} />
6261
</TouchableOpacity>
6362
<Icon
6463
name={expanded ? 'expand-less' : 'expand-more'}
6564
size={18}
66-
color="#9E9E9E"
65+
color={AppColors.osGrey500}
6766
style={styles.expandIcon}
6867
/>
6968
</View>
@@ -105,7 +104,7 @@ export default function LogView() {
105104
<Text
106105
style={[
107106
styles.level,
108-
{ color: LEVEL_COLORS[entry.level] ?? '#9E9E9E' },
107+
{ color: LEVEL_COLORS[entry.level] ?? AppColors.osGrey500 },
109108
]}
110109
testID={`log_entry_${index}_level`}
111110
>
@@ -131,19 +130,19 @@ export default function LogView() {
131130
const styles = StyleSheet.create({
132131
container: {
133132
width: '100%',
134-
backgroundColor: '#1A1B1E',
133+
backgroundColor: AppColors.osLogBackground,
135134
},
136135
header: {
137136
flexDirection: 'row',
138137
alignItems: 'center',
139138
justifyContent: 'space-between',
140-
paddingHorizontal: 12,
141-
paddingVertical: 6,
139+
paddingHorizontal: 16,
140+
paddingVertical: 12,
142141
},
143142
headerText: {
144143
fontSize: 11,
145-
fontWeight: '600',
146-
color: '#9E9E9E',
144+
fontWeight: '700',
145+
color: AppColors.white,
147146
letterSpacing: 0.8,
148147
},
149148
headerRight: {
@@ -166,7 +165,7 @@ const styles = StyleSheet.create({
166165
},
167166
timestamp: {
168167
fontSize: 11,
169-
color: '#757575',
168+
color: AppColors.osLogTimestamp,
170169
fontFamily: 'monospace',
171170
},
172171
level: {
@@ -176,12 +175,12 @@ const styles = StyleSheet.create({
176175
},
177176
message: {
178177
fontSize: 11,
179-
color: '#E0E0E0',
178+
color: AppColors.white,
180179
fontFamily: 'monospace',
181180
},
182181
emptyText: {
183182
fontSize: 11,
184-
color: '#757575',
183+
color: AppColors.osGrey500,
185184
fontStyle: 'italic',
186185
paddingVertical: 4,
187186
},

‎examples/demo/src/components/SectionCard.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
3-
import { Colors, AppTheme, Spacing } from '../theme';
3+
import { AppColors, AppTheme, AppSpacing } from '../theme';
44

55
interface Props {
66
title: string;
@@ -36,25 +36,25 @@ export default function SectionCard({
3636
const styles = StyleSheet.create({
3737
wrapper: {
3838
marginHorizontal: 16,
39-
marginBottom: Spacing.sectionGap,
39+
marginBottom: AppSpacing.sectionVertical,
4040
},
4141
header: {
4242
flexDirection: 'row',
4343
alignItems: 'center',
4444
justifyContent: 'space-between',
45-
marginBottom: Spacing.cardGap,
45+
marginBottom: AppSpacing.gap,
4646
paddingHorizontal: 4,
4747
},
4848
title: {
4949
fontSize: 12,
50-
fontWeight: '600',
51-
color: Colors.textSecondary,
52-
letterSpacing: 0.8,
50+
fontWeight: '700',
51+
color: AppColors.osGrey700,
52+
letterSpacing: 0.5,
5353
textTransform: 'uppercase',
5454
},
5555
infoIcon: {
56-
fontSize: 16,
57-
color: Colors.textSecondary,
56+
fontSize: 18,
57+
color: AppColors.osGrey500,
5858
},
5959
card: {
6060
...AppTheme.card,

‎examples/demo/src/components/ToggleRow.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { View, Text, Switch, StyleSheet } from 'react-native';
3-
import { Colors } from '../theme';
3+
import { AppColors } from '../theme';
44

55
interface Props {
66
label: string;
@@ -29,8 +29,8 @@ export default function ToggleRow({
2929
value={value}
3030
onValueChange={onValueChange}
3131
disabled={disabled}
32-
trackColor={{ false: '#E0E0E0', true: Colors.oneSignalRed }}
33-
thumbColor={Colors.white}
32+
trackColor={{ false: '#E0E0E0', true: AppColors.osPrimary }}
33+
thumbColor={AppColors.white}
3434
testID={testID}
3535
/>
3636
</View>
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
5555
},
5656
description: {
5757
fontSize: 12,
58-
color: Colors.textSecondary,
58+
color: AppColors.osGrey600,
5959
marginTop: 2,
6060
},
6161
});

‎examples/demo/src/components/modals/CustomNotificationModal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
KeyboardAvoidingView,
1010
Platform,
1111
} from 'react-native';
12-
import { Colors } from '../../theme';
12+
import { AppColors } from '../../theme';
1313

1414
interface Props {
1515
visible: boolean;
@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
110110
},
111111
input: {
112112
borderWidth: 1,
113-
borderColor: Colors.dividerColor,
113+
borderColor: AppColors.osDivider,
114114
borderRadius: 8,
115115
padding: 12,
116116
fontSize: 14,
@@ -130,7 +130,7 @@ const styles = StyleSheet.create({
130130
cancelText: {
131131
fontSize: 13,
132132
fontWeight: '600',
133-
color: Colors.textSecondary,
133+
color: AppColors.osGrey600,
134134
},
135135
confirmBtn: {
136136
paddingVertical: 10,
@@ -139,7 +139,7 @@ const styles = StyleSheet.create({
139139
confirmText: {
140140
fontSize: 13,
141141
fontWeight: '600',
142-
color: Colors.oneSignalRed,
142+
color: AppColors.osPrimary,
143143
},
144144
disabled: {
145145
opacity: 0.5,

0 commit comments

Comments
 (0)