Skip to content

Commit 09db5d5

Browse files
jsitjsit
authored
chore: normalize colors (#138)
1 parent 0adcb19 commit 09db5d5

16 files changed

Lines changed: 220 additions & 129 deletions

‎AGENTS.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ React Native app for WMBR radio streaming (live + archives), schedules, and play
5050
- `5–8` one specific week in a 4‑week cycle (Week 1–4)
5151
- Weekday shows use `day=7` and are expanded across Monday–Friday.
5252

53+
## Best Practices
54+
55+
- Don't use any "bare" colors, either hex or `rgb()`. Instead, use values from
56+
the `COLORS` object in `src/utils/Colors.ts`, or `CORE_COLORS` if there
57+
doesn't seem to be a matching semantic color.
58+
5359
## Data Flow (High Level)
5460

5561
```

‎src/app/About/index.tsx‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
} from 'react-native';
99
import { SafeAreaView } from 'react-native-safe-area-context';
1010
import LinearGradient from 'react-native-linear-gradient';
11-
import { ABOUT_PAGE_GRADIENT } from '@utils/GradientColors';
1211
import Icon from 'react-native-vector-icons/Ionicons';
1312
import { getWMBRLogoSVG } from '@utils/WMBRLogo';
1413
import { COLORS } from '@utils/Colors';
@@ -26,11 +25,18 @@ const openProgramGuide = () =>
2625

2726
export default function AboutPage() {
2827
return (
29-
<LinearGradient colors={ABOUT_PAGE_GRADIENT} style={styles.gradient}>
28+
<LinearGradient
29+
colors={[COLORS.BACKGROUND.SECONDARY, COLORS.BACKGROUND.PRIMARY]}
30+
style={styles.gradient}
31+
>
3032
<SafeAreaView style={styles.safeArea}>
3133
<View style={styles.container}>
3234
<View style={styles.logoRow}>
33-
<SvgXml xml={getWMBRLogoSVG('#FFFFFF')} width={60} height={16} />
35+
<SvgXml
36+
xml={getWMBRLogoSVG(COLORS.TEXT.PRIMARY)}
37+
width={60}
38+
height={16}
39+
/>
3440
</View>
3541

3642
<Text style={styles.body}>
@@ -51,7 +57,7 @@ export default function AboutPage() {
5157
onPress={() => openLink('tel:+16172538810')}
5258
activeOpacity={0.8}
5359
>
54-
<Icon name="call-outline" size={20} color="#FFFFFF" />
60+
<Icon name="call-outline" size={20} color={COLORS.TEXT.PRIMARY} />
5561
<View style={styles.textBlock}>
5662
<Text style={styles.linkText}>(617) 253-8810</Text>
5763
<Text style={styles.smallText}>Requests Line</Text>
@@ -64,7 +70,7 @@ export default function AboutPage() {
6470
onPress={() => openLink('mailto:music@wmbr.org')}
6571
activeOpacity={0.8}
6672
>
67-
<Icon name="mail-outline" size={20} color="#FFFFFF" />
73+
<Icon name="mail-outline" size={20} color={COLORS.TEXT.PRIMARY} />
6874
<View style={styles.textBlock}>
6975
<Text style={styles.linkText}>music@wmbr.org</Text>
7076
<Text style={styles.smallText}>Music Department</Text>
@@ -76,7 +82,7 @@ export default function AboutPage() {
7682
onPress={() => openLink('mailto:press@wmbr.org')}
7783
activeOpacity={0.8}
7884
>
79-
<Icon name="mail-outline" size={20} color="#FFFFFF" />
85+
<Icon name="mail-outline" size={20} color={COLORS.TEXT.PRIMARY} />
8086
<View style={styles.textBlock}>
8187
<Text style={styles.linkText}>press@wmbr.org</Text>
8288
<Text style={styles.smallText}>News Department</Text>
@@ -99,7 +105,11 @@ export default function AboutPage() {
99105
onPress={openProgramGuide}
100106
activeOpacity={0.8}
101107
>
102-
<Icon name="musical-notes-outline" size={18} color="#000" />
108+
<Icon
109+
name="musical-notes-outline"
110+
size={18}
111+
color={COLORS.BUTTON.ACCENT.TEXT}
112+
/>
103113
<Text style={styles.buttonText}>Program Guide</Text>
104114
</TouchableOpacity>
105115

@@ -108,7 +118,11 @@ export default function AboutPage() {
108118
onPress={openWebsite}
109119
activeOpacity={0.8}
110120
>
111-
<Icon name="globe-outline" size={18} color="#FFFFFF" />
121+
<Icon
122+
name="globe-outline"
123+
size={18}
124+
color={COLORS.TEXT.PRIMARY}
125+
/>
112126
<Text style={styles.buttonOutlineText}>Visit Our Website</Text>
113127
</TouchableOpacity>
114128
</View>
@@ -119,28 +133,40 @@ export default function AboutPage() {
119133
activeOpacity={0.8}
120134
style={styles.socialButton}
121135
>
122-
<Icon name="logo-instagram" size={20} color="#FFFFFF" />
136+
<Icon
137+
name="logo-instagram"
138+
size={20}
139+
color={COLORS.TEXT.PRIMARY}
140+
/>
123141
</TouchableOpacity>
124142
<TouchableOpacity
125143
onPress={openTwitter}
126144
activeOpacity={0.8}
127145
style={styles.socialButton}
128146
>
129-
<Icon name="logo-twitter" size={20} color="#FFFFFF" />
147+
<Icon name="logo-twitter" size={20} color={COLORS.TEXT.PRIMARY} />
130148
</TouchableOpacity>
131149
<TouchableOpacity
132150
onPress={openFacebook}
133151
activeOpacity={0.8}
134152
style={styles.socialButton}
135153
>
136-
<Icon name="logo-facebook" size={20} color="#FFFFFF" />
154+
<Icon
155+
name="logo-facebook"
156+
size={20}
157+
color={COLORS.TEXT.PRIMARY}
158+
/>
137159
</TouchableOpacity>
138160
<TouchableOpacity
139161
onPress={openMastodon}
140162
activeOpacity={0.8}
141163
style={styles.socialButton}
142164
>
143-
<Icon name="logo-mastodon" size={20} color="#FFFFFF" />
165+
<Icon
166+
name="logo-mastodon"
167+
size={20}
168+
color={COLORS.TEXT.PRIMARY}
169+
/>
144170
</TouchableOpacity>
145171
</View>
146172
</View>
@@ -169,13 +195,17 @@ const styles = StyleSheet.create({
169195
button: {
170196
flexDirection: 'row',
171197
alignItems: 'center',
172-
backgroundColor: '#00D17A',
198+
backgroundColor: COLORS.BUTTON.ACCENT.BACKGROUND,
173199
paddingHorizontal: 12,
174200
paddingVertical: 10,
175201
borderRadius: 8,
176202
marginRight: 8,
177203
},
178-
buttonText: { marginLeft: 8, color: '#000', fontWeight: '700' },
204+
buttonText: {
205+
marginLeft: 8,
206+
color: COLORS.BUTTON.ACCENT.TEXT,
207+
fontWeight: '700',
208+
},
179209
buttonOutline: {
180210
flexDirection: 'row',
181211
alignItems: 'center',
@@ -190,7 +220,7 @@ const styles = StyleSheet.create({
190220
socialRow: { flexDirection: 'row', marginTop: 18 },
191221
socialButton: { marginRight: 12 },
192222
linkText: { color: COLORS.TEXT.LINK, textDecorationLine: 'underline' },
193-
smallText: { color: '#AAAAAA', fontSize: 12, marginTop: 2 },
223+
smallText: { color: COLORS.TEXT.TERTIARY, fontSize: 12, marginTop: 2 },
194224
section: { marginTop: 12, marginBottom: 8 },
195225
sectionTitle: {
196226
color: COLORS.TEXT.PRIMARY,

‎src/app/Home/HomeNowPlaying.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,20 +147,20 @@ export default function HomeNowPlaying({ showInfo }: { showInfo?: ShowInfo }) {
147147
const styles = StyleSheet.create({
148148
liveText: {
149149
fontSize: 14,
150-
color: '#FF4444',
150+
color: COLORS.TEXT.ALERT,
151151
fontWeight: '500',
152152
marginBottom: 8,
153153
},
154154
nowPlayingContainer: { alignItems: 'center', marginTop: 4 },
155155
nowPlayingLabel: {
156156
fontSize: 10,
157-
color: COLORS.TEXT.META,
157+
color: COLORS.TEXT.TERTIARY,
158158
fontWeight: '500',
159159
marginBottom: 2,
160160
textTransform: 'uppercase',
161161
letterSpacing: 0.5,
162162
},
163-
nowPlayingLabelActive: { color: '#BBBBBB' },
163+
nowPlayingLabelActive: { color: COLORS.TEXT.SECONDARY },
164164
currentSongText: {
165165
fontSize: 12,
166166
color: COLORS.TEXT.SECONDARY,

‎src/app/Home/PlayButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default function PlayButton({
8989
return <Icon name="stop" size={64} color={CORE_COLORS.WMBR_GREEN} />;
9090
}
9191
} else {
92-
return <Icon name="play" size={64} color="#FFFFFF" />;
92+
return <Icon name="play" size={64} color={CORE_COLORS.WHITE} />;
9393
}
9494
}, [isPlaying, isPlayingArchive]);
9595

@@ -172,8 +172,8 @@ const styles = StyleSheet.create({
172172
elevation: 12,
173173
},
174174
playButtonActive: {
175-
backgroundColor: '#FFFFFF',
176-
shadowColor: '#FFFFFF',
175+
backgroundColor: CORE_COLORS.WHITE,
176+
shadowColor: CORE_COLORS.WHITE,
177177
},
178178
buttonContent: {
179179
width: '100%',

‎src/app/Home/SplashScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Animated, {
1212
import LinearGradient from 'react-native-linear-gradient';
1313
import { SvgXml } from 'react-native-svg';
1414
import { getWMBRLogoSVG } from '@utils/WMBRLogo';
15-
import { CORE_COLORS } from '@utils/Colors';
15+
import { COLORS, CORE_COLORS } from '@utils/Colors';
1616

1717
interface SplashScreenProps {
1818
onAnimationEnd: () => void;
@@ -102,7 +102,7 @@ export default function SplashScreen({ onAnimationEnd }: SplashScreenProps) {
102102
/>
103103

104104
<LinearGradient
105-
colors={['#000000', '#1a1a1a', '#000000']}
105+
colors={[COLORS.BACKGROUND.SECONDARY, COLORS.BACKGROUND.PRIMARY]}
106106
style={styles.gradient}
107107
>
108108
<View style={styles.content}>

‎src/app/Home/index.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ export default function HomeScreen() {
286286
colors={
287287
isPlaying
288288
? [CORE_COLORS.WMBR_GREEN, '#006B31', CORE_COLORS.WMBR_GREEN]
289-
: ['#000000', '#1a1a1a', '#000000']
289+
: [COLORS.BACKGROUND.SECONDARY, COLORS.BACKGROUND.PRIMARY]
290290
}
291291
style={styles.fullScreenGradient}
292292
>
@@ -391,15 +391,15 @@ export default function HomeScreen() {
391391
<TouchableOpacity
392392
style={[
393393
styles.liveButton,
394-
isPlaying && styles.liveButtonActive,
394+
isPlaying && styles.liveButtonPlaying,
395395
]}
396396
onPress={handleSwitchToLive}
397397
activeOpacity={0.7}
398398
>
399399
<Text
400400
style={[
401401
styles.liveButtonText,
402-
isPlaying && styles.liveButtonTextActive,
402+
isPlaying && styles.liveButtonTextPlaying,
403403
]}
404404
>
405405
← Switch to LIVE
@@ -459,27 +459,27 @@ const styles = StyleSheet.create({
459459
marginBottom: 12,
460460
lineHeight: 16,
461461
},
462-
showDescriptionActive: { color: '#D0D0D0' },
462+
showDescriptionActive: { color: COLORS.TEXT.ACTIVE },
463463
liveButton: {
464464
marginTop: 16,
465465
paddingHorizontal: 20,
466466
paddingVertical: 12,
467-
backgroundColor: 'rgba(255, 68, 68, 0.2)',
467+
backgroundColor: COLORS.BUTTON.SWITCH.BACKGROUND,
468468
borderRadius: 20,
469469
borderWidth: 1,
470-
borderColor: '#FF4444',
471-
},
472-
liveButtonActive: {
473-
backgroundColor: 'rgba(255, 255, 255, 0.2)',
474-
borderColor: '#FFFFFF',
470+
borderColor: COLORS.BUTTON.SWITCH.BORDER,
475471
},
476472
liveButtonText: {
477-
color: '#FF4444',
473+
color: COLORS.BUTTON.SWITCH.TEXT,
478474
fontSize: 14,
479475
fontWeight: '600',
480476
textAlign: 'center',
481477
},
482-
liveButtonTextActive: { color: '#FFFFFF' },
478+
liveButtonPlaying: {
479+
backgroundColor: COLORS.BUTTON.SWITCH_ACTIVE.BACKGROUND,
480+
borderColor: COLORS.BUTTON.SWITCH_ACTIVE.BORDER,
481+
},
482+
liveButtonTextPlaying: { color: COLORS.BUTTON.SWITCH_ACTIVE.TEXT },
483483
playbackControls: {
484484
flexDirection: 'row',
485485
alignItems: 'center',

0 commit comments

Comments
 (0)