goon-foss/goon
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions 2

fix(theme): rozdziel role akcentu i dodaj ramke, ktora cokolwiek oddziela

Browse source 
Pomiar WCAG na realnych parach z apki (2026-08-13):

    accent #B23A48 jako tekst:  3,21 na bg | 2,96 na bgElevated | 2,75 na card
    border #3A3128 jako granica: 1,48 na bg | 1,27 na card

Czyli kolor MARKI byl ponizej nawet progu 3:1 dla elementow interfejsu,
a nie tylko ponizej 4,5 dla tekstu. Dotyczylo to aktywnych zakladek,
gwiazdek ulubionych, linkow i chipow. Ramki przy 1,27 nie byly granica,
tylko cieniem.

NIE zmieniam koloru marki. Podniesienie samego `accent` do progu tekstu
wymagaloby zejscia w roz (#CE6975), co likwiduje tozsamosc, ktorej broni
naglowek theme.ts. Zamiast tego rozdzielam ROLE tego samego koloru:

  accent      zostaje do WYPELNIEN — jasny tekst na nim ma 5,03, przechodzi
  accentText  #C75260 dla tekstu i obwodek — 4,30 / 3,96 / 3,68

62 podmiany w 24 plikach (34 color, 26 borderColor, 2 thumbColor).
38 wypelnien nietknietych. Sprawdzone skryptem, ze zaden zmieniony tekst
nie stoi na tle akcentu.

borderStrong #7B7065 dla granic NIOSACYCH ZNACZENIE (pola tekstowe, 12
miejsc); dekoracyjne wloski zostaja na `border`. Wartosc dobrana pod obie
powierzchnie, bo pola leza i na bg, i na card: #6B6157 dawal na karcie
2,66, a #73695E dokladnie 2,999, czyli wciaz ponizej progu.
This commit is contained in:
goon-foss 2026-08-14 09:50:08 +02:00
parent f3f16b5c67
commit 7deda639bf
30 changed files with 97 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
mobile/src/changelog.ts
View file

@ -16,6 +16,13 @@ export type ChangelogEntry = {
};
export const CHANGELOG: ChangelogEntry[] = [
{
id: '2026-08-13d',
date: 'August 2026',
items: [
'Readability pass: links, active tabs and the favourite star are a shade lighter, so they stand out against cards instead of sinking into them. Search and input fields now have a visible outline.',
],
},
{
id: '2026-08-13c',
date: 'August 2026',

8
mobile/src/components/BugReportFAB.tsx
View file

@ -289,7 +289,7 @@ export function BugReportFAB({ client, appVersion, navRef }: Props) {
<Switch
value={includeScreenshot}
onValueChange={setIncludeScreenshot}
thumbColor={includeScreenshot ? theme.accent : theme.muted}
thumbColor={includeScreenshot ? theme.accentText : theme.muted}
trackColor={{ true: theme.accentDeep, false: theme.border }}
/>
</View>
@ -441,7 +441,7 @@ const styles = StyleSheet.create({
},
input: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 8,
color: theme.fg,
@ -502,7 +502,7 @@ const styles = StyleSheet.create({
borderColor: theme.border,
borderWidth: 1,
},
tabActive: { borderColor: theme.accent, backgroundColor: theme.bg },
tabActive: { borderColor: theme.accentText, backgroundColor: theme.bg },
tabText: { color: theme.muted, fontWeight: '600', fontSize: 14 },
tabTextActive: { color: theme.fg },
tabDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: theme.accent },
@ -524,7 +524,7 @@ const styles = StyleSheet.create({
paddingVertical: 4,
},
replyLabel: {
color: theme.accent,
color: theme.accentText,
fontSize: 11,
fontWeight: '800',
textTransform: 'uppercase',

10
mobile/src/components/MigrationBanner.tsx
View file

@ -153,12 +153,12 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
borderRadius: 12,
borderWidth: 1,
borderColor: theme.accent,
borderColor: theme.accentText,
backgroundColor: theme.bgElevated,
},
barTitle: { color: theme.fg, fontSize: 14, fontWeight: '700' },
barHint: { color: theme.muted, fontSize: 12, marginTop: 2, lineHeight: 16 },
barChevron: { color: theme.accent, fontSize: 22, fontWeight: '700' },
barChevron: { color: theme.accentText, fontSize: 22, fontWeight: '700' },
backdrop: {
flex: 1,
@ -180,7 +180,7 @@ const styles = StyleSheet.create({
scroll: { flexGrow: 0 },
lead: { color: theme.fg, fontSize: 14, lineHeight: 20, marginBottom: 16 },
step: {
color: theme.accent,
color: theme.accentText,
fontSize: 12,
fontWeight: '800',
textTransform: 'uppercase',
@ -200,13 +200,13 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
},
code: { color: theme.fg, fontSize: 13, flex: 1 },
copyBtn: { color: theme.accent, fontSize: 13, fontWeight: '800' },
copyBtn: { color: theme.accentText, fontSize: 13, fontWeight: '800' },
note: { color: theme.muted, fontSize: 13, lineHeight: 19, marginTop: 8 },
dlBtn: {
backgroundColor: theme.card,
borderRadius: 10,
borderWidth: 1,
borderColor: theme.accent,
borderColor: theme.accentText,
paddingVertical: 12,
alignItems: 'center',
},

8
mobile/src/components/MovieFiltersSheet.tsx
View file

@ -350,7 +350,7 @@ export function MovieFiltersSheet({ visible, value, onChange, onClose }: Props)
<Switch
value={draft.has_playback}
onValueChange={(v) => setDraft({ ...draft, has_playback: v })}
thumbColor={draft.has_playback ? theme.accent : theme.muted}
thumbColor={draft.has_playback ? theme.accentText : theme.muted}
trackColor={{ true: theme.accentDeep, false: theme.border }}
/>
</View>
@ -411,7 +411,7 @@ const styles = StyleSheet.create({
marginBottom: 12,
},
title: { color: theme.fg, fontSize: 18, fontWeight: '600' },
reset: { color: theme.accent, fontSize: 14 },
reset: { color: theme.accentText, fontSize: 14 },
label: {
color: theme.muted,
fontSize: 12,
@ -433,7 +433,7 @@ const styles = StyleSheet.create({
},
chipActive: {
backgroundColor: theme.accentDeep,
borderColor: theme.accent,
borderColor: theme.accentText,
},
chipText: { color: theme.muted, fontSize: 12 },
chipTextActive: { color: theme.fg, fontWeight: '600' },
@ -446,7 +446,7 @@ const styles = StyleSheet.create({
dash: { color: theme.muted, fontSize: 16 },
input: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 8,
color: theme.fg,

4
mobile/src/components/OnboardingModal.tsx
View file

@ -234,7 +234,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
marginBottom: 6,
},
brand: { color: theme.accent, fontWeight: '900', letterSpacing: 2, fontSize: 13 },
brand: { color: theme.accentText, fontWeight: '900', letterSpacing: 2, fontSize: 13 },
skip: { color: theme.muted, fontSize: 14, fontWeight: '600', minWidth: 36, textAlign: 'right' },
pager: { flexGrow: 0 },
@ -243,7 +243,7 @@ const styles = StyleSheet.create({
title: { color: theme.fg, fontSize: 22, fontWeight: '800', marginBottom: 16 },
lines: { gap: 12 },
lineRow: { flexDirection: 'row', gap: 10 },
bullet: { color: theme.accent, fontSize: 16, lineHeight: 22 },
bullet: { color: theme.accentText, fontSize: 16, lineHeight: 22 },
lineText: { color: theme.fg, fontSize: 15, lineHeight: 22, flex: 1 },
dots: { flexDirection: 'row', justifyContent: 'center', gap: 6, marginVertical: 16 },

4
mobile/src/components/SceneTile.tsx
View file

@ -186,7 +186,7 @@ const styles = StyleSheet.create({
},
thumb: { width: '100%', height: '100%' },
thumbDim: { opacity: 0.45 },
thumbSelectable: { borderWidth: 2, borderColor: theme.accent, opacity: 0.85 },
thumbSelectable: { borderWidth: 2, borderColor: theme.accentText, opacity: 0.85 },
thumbPending: { borderWidth: 2, borderColor: theme.fg, opacity: 0.55 },
dupBadge: {
position: 'absolute',
@ -207,7 +207,7 @@ const styles = StyleSheet.create({
paddingVertical: 1,
borderRadius: 6,
},
favBadgeText: { color: theme.accent, fontSize: 11, fontWeight: '700' },
favBadgeText: { color: theme.accentText, fontSize: 11, fontWeight: '700' },
newBadge: {
position: 'absolute',
top: 6,

4
mobile/src/components/WhatsNewModal.tsx
View file

@ -103,7 +103,7 @@ const styles = StyleSheet.create({
scroll: { flexGrow: 0 },
entry: { marginBottom: 14 },
entryDate: {
color: theme.accent,
color: theme.accentText,
fontSize: 12,
fontWeight: '800',
textTransform: 'uppercase',
@ -111,7 +111,7 @@ const styles = StyleSheet.create({
marginBottom: 8,
},
itemRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
bullet: { color: theme.accent, fontSize: 15, lineHeight: 21 },
bullet: { color: theme.accentText, fontSize: 15, lineHeight: 21 },
itemText: { color: theme.fg, fontSize: 15, lineHeight: 21, flex: 1 },
btn: {
marginTop: 8,

2
mobile/src/navigation.tsx
View file

@ -202,7 +202,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
headerRight: () => (
<View style={{ flexDirection: 'row', gap: 14, alignItems: 'center' }}>
<Pressable onPress={() => navigation.navigate('Donate')} hitSlop={12}>
<Text style={{ color: theme.accent, fontSize: 18 }}>♥</Text>
<Text style={{ color: theme.accentText, fontSize: 18 }}>♥</Text>
</Pressable>
<Pressable
onPress={() => navigation.navigate('AppLockSettings')}

2
mobile/src/screens/AgeGateScreen.tsx
View file

@ -240,7 +240,7 @@ const styles = StyleSheet.create({
marginTop: 1,
},
checkboxOn: {
borderColor: theme.accent,
borderColor: theme.accentText,
backgroundColor: theme.accent,
},
checkboxMark: {

2
mobile/src/screens/AppLockScreen.tsx
View file

@ -188,7 +188,7 @@ const styles = StyleSheet.create({
borderWidth: 1.5,
borderColor: theme.border,
},
dotFilled: { backgroundColor: theme.accent, borderColor: theme.accent },
dotFilled: { backgroundColor: theme.accent, borderColor: theme.accentText },
dotError: { borderColor: theme.bad, backgroundColor: theme.bad },
pad: {
marginTop: 20,

8
mobile/src/screens/AppLockSettingsScreen.tsx
View file

@ -509,7 +509,7 @@ const styles = StyleSheet.create({
borderColor: theme.border,
alignItems: 'center',
},
actionText: { color: theme.accent, fontSize: 14, fontWeight: '600' },
actionText: { color: theme.accentText, fontSize: 14, fontWeight: '600' },
chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
chip: {
paddingVertical: 8,
@ -519,12 +519,12 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: theme.border,
},
chipActive: { backgroundColor: theme.accent, borderColor: theme.accent },
chipActive: { backgroundColor: theme.accent, borderColor: theme.accentText },
versionValue: { color: theme.fg, fontSize: 15, fontWeight: '700', fontVariant: ['tabular-nums'] },
linkValue: { color: theme.accent, fontSize: 15, fontWeight: '700' },
linkValue: { color: theme.accentText, fontSize: 15, fontWeight: '700' },
codeInput: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 8,
color: theme.fg,

8
mobile/src/screens/BlacklistScreen.tsx
View file

@ -183,7 +183,7 @@ const styles = StyleSheet.create({
},
search: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 8,
color: theme.fg,
@ -193,14 +193,14 @@ const styles = StyleSheet.create({
chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, padding: 16 },
chip: {
backgroundColor: theme.card,
borderColor: theme.accent,
borderColor: theme.accentText,
borderWidth: 1,
borderRadius: 14,
paddingHorizontal: 10,
paddingVertical: 5,
},
chipDisabled: { borderColor: theme.border, opacity: 0.6 },
chipText: { color: theme.accent, fontSize: 13 },
chipText: { color: theme.accentText, fontSize: 13 },
chipTextDisabled: { color: theme.muted },
row: {
flexDirection: 'row',
@ -217,6 +217,6 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
paddingVertical: 6,
},
removeText: { color: theme.accent, fontSize: 13, fontWeight: '600' },
removeText: { color: theme.accentText, fontSize: 13, fontWeight: '600' },
empty: { color: theme.muted, fontSize: 13, paddingHorizontal: 16 },
});

2
mobile/src/screens/DonateScreen.tsx
View file

@ -248,7 +248,7 @@ const styles = StyleSheet.create({
gap: 10,
},
footerLink: {
color: theme.accent,
color: theme.accentText,
fontSize: 13,
fontWeight: '600',
},

2
mobile/src/screens/FavoritesScreen.tsx
View file

@ -565,7 +565,7 @@ const styles = StyleSheet.create({
borderColor: theme.border,
borderWidth: 1,
},
tabBtnActive: { borderColor: theme.accent, backgroundColor: theme.bgElevated },
tabBtnActive: { borderColor: theme.accentText, backgroundColor: theme.bgElevated },
tabBtnText: { color: theme.muted, fontWeight: '600', fontSize: 14 },
tabBtnTextActive: { color: theme.fg },
tabBadge: {

2
mobile/src/screens/LoginScreen.tsx
View file

@ -201,7 +201,7 @@ const styles = StyleSheet.create({
},
input: {
backgroundColor: theme.bgElevated,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1.5,
borderRadius: 12,
color: theme.fg,

4
mobile/src/screens/MovieDetailScreen.tsx
View file

@ -391,8 +391,8 @@ const styles = StyleSheet.create({
heroMeta: { flex: 1, gap: 4 },
title: { color: theme.fg, fontSize: 18, fontWeight: '700' },
subtitle: { color: theme.muted, fontSize: 13 },
studioLink: { color: theme.accent, fontWeight: '600' },
rating: { color: theme.accent, fontSize: 14, fontWeight: '700', marginTop: 4 },
studioLink: { color: theme.accentText, fontWeight: '600' },
rating: { color: theme.accentText, fontSize: 14, fontWeight: '700', marginTop: 4 },
section: { paddingHorizontal: 14, paddingVertical: 10 },
sectionTitle: { color: theme.fg, fontSize: 14, fontWeight: '700', marginBottom: 8 },

4
mobile/src/screens/MoviesScreen.tsx
View file

@ -188,12 +188,12 @@ const styles = StyleSheet.create({
},
filterBtnActive: {
backgroundColor: theme.accentDeep,
borderColor: theme.accent,
borderColor: theme.accentText,
},
filterBtnText: { color: theme.fg, fontSize: 13, fontWeight: '600' },
search: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 10,
color: theme.fg,

6
mobile/src/screens/PerformerScenesScreen.tsx
View file

@ -422,7 +422,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
actionBtnText: { color: theme.muted, fontWeight: '600', fontSize: 12 },
actionBtnTextPrimary: { color: theme.accent, fontWeight: '700', fontSize: 12 },
actionBtnTextPrimary: { color: theme.accentText, fontWeight: '700', fontSize: 12 },
tagRow: {
flexDirection: 'row',
gap: 6,
@ -439,7 +439,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
maxWidth: 200,
},
tagChipActive: { backgroundColor: theme.accent, borderColor: theme.accent },
tagChipActive: { backgroundColor: theme.accent, borderColor: theme.accentText },
tagChipText: { color: theme.muted, fontSize: 12, fontWeight: '600' },
tagChipTextActive: { color: theme.fg, fontWeight: '700' },
tabRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
@ -455,7 +455,7 @@ const styles = StyleSheet.create({
borderColor: theme.border,
borderWidth: 1,
},
tabBtnActive: { borderColor: theme.accent, backgroundColor: theme.bgElevated },
tabBtnActive: { borderColor: theme.accentText, backgroundColor: theme.bgElevated },
tabBtnText: { color: theme.muted, fontWeight: '600', fontSize: 14 },
tabBtnTextActive: { color: theme.fg },
tabCount: {

2
mobile/src/screens/PerformersScreen.tsx
View file

@ -191,7 +191,7 @@ const styles = StyleSheet.create({
search: {
flex: 1,
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1.5,
borderRadius: 12,
color: theme.fg,

2
mobile/src/screens/PinEntry.tsx
View file

@ -85,7 +85,7 @@ const styles = StyleSheet.create({
borderWidth: 1.5,
borderColor: theme.border,
},
dotFilled: { backgroundColor: theme.accent, borderColor: theme.accent },
dotFilled: { backgroundColor: theme.accent, borderColor: theme.accentText },
pad: {
marginTop: 24,
flexDirection: 'row',

2
mobile/src/screens/PlayerScreen.tsx
View file

@ -2065,7 +2065,7 @@ const styles = StyleSheet.create({
overflow: 'hidden',
},
panSeekDelta: {
color: theme.accent,
color: theme.accentText,
fontSize: 14,
fontWeight: '700',
marginTop: 6,

8
mobile/src/screens/SceneDetailScreen.tsx
View file

@ -990,7 +990,7 @@ const styles = StyleSheet.create({
pillRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
pillPrimary: {
borderColor: theme.accent,
borderColor: theme.accentText,
borderWidth: 1,
backgroundColor: `${theme.accent}1A`,
borderRadius: 16,
@ -1048,14 +1048,14 @@ const styles = StyleSheet.create({
refreshThumbText: { color: theme.muted, fontSize: 13, fontWeight: '600' },
pillSource: {
borderColor: theme.accent,
borderColor: theme.accentText,
borderWidth: 1,
borderRadius: 14,
paddingHorizontal: 10,
paddingVertical: 4,
},
pillSourceText: {
color: theme.accent,
color: theme.accentText,
fontSize: 11,
fontWeight: '700',
textTransform: 'uppercase',
@ -1067,7 +1067,7 @@ const styles = StyleSheet.create({
watchButton: {
backgroundColor: theme.bgElevated,
borderColor: theme.accent,
borderColor: theme.accentText,
borderWidth: 1.5,
borderRadius: 12,
padding: 14,

12
mobile/src/screens/ScenesFilterModal.tsx
View file

@ -395,7 +395,7 @@ const styles = StyleSheet.create({
},
headerCancel: { color: theme.muted, fontSize: 15 },
headerTitle: { color: theme.fg, fontSize: 16, fontWeight: '600' },
headerApply: { color: theme.accent, fontSize: 15, fontWeight: '600' },
headerApply: { color: theme.accentText, fontSize: 15, fontWeight: '600' },
section: {
paddingHorizontal: 16,
paddingVertical: 14,
@ -418,9 +418,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
paddingVertical: 6,
},
sortPillActive: { borderColor: theme.accent, backgroundColor: theme.bg },
sortPillActive: { borderColor: theme.accentText, backgroundColor: theme.bg },
sortPillText: { color: theme.fg, fontSize: 13 },
sortPillTextActive: { color: theme.accent, fontWeight: '600' },
sortPillTextActive: { color: theme.accentText, fontWeight: '600' },
switchRow: {
flexDirection: 'row',
alignItems: 'center',
@ -429,7 +429,7 @@ const styles = StyleSheet.create({
switchLabel: { color: theme.fg, fontSize: 14, flex: 1 },
search: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 8,
color: theme.fg,
@ -445,9 +445,9 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
paddingVertical: 5,
},
chipActive: { borderColor: theme.accent, backgroundColor: theme.bg },
chipActive: { borderColor: theme.accentText, backgroundColor: theme.bg },
chipText: { color: theme.fg, fontSize: 13 },
chipTextActive: { color: theme.accent, fontWeight: '600' },
chipTextActive: { color: theme.accentText, fontWeight: '600' },
chipCount: { color: theme.muted, fontSize: 11 },
resetRow: { padding: 16 },
resetButton: {

22
mobile/src/screens/ScenesScreen.tsx
View file

@ -157,7 +157,7 @@ export function ScenesScreen() {
style={[styles.toolbarButton, alreadySaved && styles.toolbarButtonActive]}
>
<Text
style={[styles.toolbarButtonText, alreadySaved && { color: theme.accent }]}
style={[styles.toolbarButtonText, alreadySaved && { color: theme.accentText }]}
>
{alreadySaved ? '★ Saved' : '☆ Save'}
</Text>
@ -167,7 +167,7 @@ export function ScenesScreen() {
onPress={() => setFilterOpen(true)}
style={[styles.toolbarButton, activeCount > 0 && styles.toolbarButtonActive]}
>
<Text style={[styles.toolbarButtonText, activeCount > 0 && { color: theme.accent }]}>
<Text style={[styles.toolbarButtonText, activeCount > 0 && { color: theme.accentText }]}>
Filter{activeCount > 0 ? ` ${activeCount}` : ''}
</Text>
</Pressable>
@ -417,7 +417,7 @@ const styles = StyleSheet.create({
search: {
flex: 1,
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1.5,
borderRadius: 12,
color: theme.fg,
@ -432,7 +432,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 16,
justifyContent: 'center',
},
toolbarButtonActive: { borderColor: theme.accent, backgroundColor: `${theme.accent}1A` },
toolbarButtonActive: { borderColor: theme.accentText, backgroundColor: `${theme.accent}1A` },
toolbarButtonText: { color: theme.fg, fontWeight: '700' },
savedRow: { flexGrow: 0, marginBottom: 12 },
savedRowContent: { gap: 8, paddingRight: 12 },
@ -445,9 +445,9 @@ const styles = StyleSheet.create({
paddingVertical: 6,
maxWidth: 200,
},
savedChipActive: { borderColor: theme.accent, backgroundColor: `${theme.accent}1A` },
savedChipActive: { borderColor: theme.accentText, backgroundColor: `${theme.accent}1A` },
savedChipText: { color: theme.fg, fontSize: 13 },
savedChipTextActive: { color: theme.accent, fontWeight: '600' },
savedChipTextActive: { color: theme.accentText, fontWeight: '600' },
subToolbar: { flexDirection: 'row', gap: 8, marginBottom: 16 },
subButton: {
backgroundColor: theme.card,
@ -459,7 +459,7 @@ const styles = StyleSheet.create({
},
subButtonActive: {
backgroundColor: theme.accent,
borderColor: theme.accent,
borderColor: theme.accentText,
shadowColor: theme.accent,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.5,
@ -494,7 +494,7 @@ const styles = StyleSheet.create({
paddingVertical: 1,
borderRadius: 8,
},
favBadgeText: { color: theme.accent, fontSize: 12, fontWeight: '700' },
favBadgeText: { color: theme.accentText, fontSize: 12, fontWeight: '700' },
thumbnail: {
width: 100,
height: 56,
@ -506,7 +506,7 @@ const styles = StyleSheet.create({
},
rowTitle: { color: theme.fg, fontWeight: '700', fontSize: 16, marginBottom: 4 },
rowMuted: { color: theme.muted, fontSize: 14, marginTop: 2 },
rowSources: { color: theme.accent, fontSize: 12, marginTop: 8, textTransform: 'uppercase', fontWeight: '600' },
rowSources: { color: theme.accentText, fontSize: 12, marginTop: 8, textTransform: 'uppercase', fontWeight: '600' },
muted: { color: theme.muted, textAlign: 'center', marginTop: 32, fontSize: 16 },
error: { color: theme.bad, padding: 16 },
@ -519,7 +519,7 @@ const styles = StyleSheet.create({
backgroundColor: theme.card,
},
chipActive: {
borderColor: theme.accent,
borderColor: theme.accentText,
backgroundColor: `${theme.accent}26`,
shadowColor: theme.accent,
shadowOffset: { width: 0, height: 0 },
@ -528,7 +528,7 @@ const styles = StyleSheet.create({
elevation: 2,
},
chipText: { color: theme.muted, fontSize: 13, fontWeight: '700' },
chipTextActive: { color: theme.accent },
chipTextActive: { color: theme.accentText },
// Continue watching rail
rail: { marginBottom: 16 },

10
mobile/src/screens/SiteScenesScreen.tsx
View file

@ -348,12 +348,12 @@ const styles = StyleSheet.create({
paddingVertical: 1,
borderRadius: 8,
},
favBadgeText: { color: theme.accent, fontSize: 12, fontWeight: '700' },
favBadgeText: { color: theme.accentText, fontSize: 12, fontWeight: '700' },
rowContent: { flex: 1 },
rowTitle: { color: theme.fg, fontWeight: '700', fontSize: 16, marginBottom: 4 },
rowMuted: { color: theme.muted, fontSize: 14, marginTop: 2 },
rowSources: {
color: theme.accent,
color: theme.accentText,
fontSize: 12,
marginTop: 8,
textTransform: 'uppercase',
@ -371,7 +371,7 @@ const styles = StyleSheet.create({
borderColor: theme.border,
borderWidth: 1,
},
filterBtnActive: { backgroundColor: theme.accentDeep, borderColor: theme.accent },
filterBtnActive: { backgroundColor: theme.accentDeep, borderColor: theme.accentText },
filterBtnText: { color: theme.fg, fontSize: 13, fontWeight: '600' },
clearBtn: { paddingHorizontal: 10, paddingVertical: 8 },
clearBtnText: { color: theme.muted, fontSize: 13 },
@ -391,7 +391,7 @@ const modalStyles = StyleSheet.create({
close: { color: theme.muted, fontSize: 20, padding: 4 },
search: {
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1,
borderRadius: 10,
color: theme.fg,
@ -410,7 +410,7 @@ const modalStyles = StyleSheet.create({
borderColor: theme.border,
borderWidth: 1,
},
chipOn: { backgroundColor: theme.accentDeep, borderColor: theme.accent },
chipOn: { backgroundColor: theme.accentDeep, borderColor: theme.accentText },
chipText: { color: theme.fg, fontSize: 13 },
chipTextOn: { color: theme.fg, fontWeight: '700' },
muted: { color: theme.muted, fontSize: 13, paddingVertical: 8 },

2
mobile/src/screens/SitesScreen.tsx
View file

@ -325,7 +325,7 @@ const styles = StyleSheet.create({
search: {
flex: 1,
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1.5,
borderRadius: 12,
color: theme.fg,

4
mobile/src/screens/StudioScenesScreen.tsx
View file

@ -292,9 +292,9 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: theme.border,
},
tabBtnActive: { borderColor: theme.accent },
tabBtnActive: { borderColor: theme.accentText },
tabBtnText: { color: theme.muted, fontSize: 13 },
tabBtnTextActive: { color: theme.accent, fontWeight: '700' },
tabBtnTextActive: { color: theme.accentText, fontWeight: '700' },
tabCount: {
backgroundColor: theme.border,
borderRadius: 999,

2
mobile/src/screens/TagScenesScreen.tsx
View file

@ -119,7 +119,7 @@ const styles = StyleSheet.create({
},
rowTitle: { color: theme.fg, fontWeight: '600', marginBottom: 2 },
rowMuted: { color: theme.muted, fontSize: 13, marginTop: 2 },
rowSources: { color: theme.accent, fontSize: 11, marginTop: 4, textTransform: 'uppercase' },
rowSources: { color: theme.accentText, fontSize: 11, marginTop: 4, textTransform: 'uppercase' },
muted: { color: theme.muted, textAlign: 'center', marginTop: 24 },
error: { color: theme.bad, padding: 12 },
});

2
mobile/src/screens/TagsScreen.tsx
View file

@ -161,7 +161,7 @@ const styles = StyleSheet.create({
search: {
flex: 1,
backgroundColor: theme.card,
borderColor: theme.border,
borderColor: theme.borderStrong,
borderWidth: 1.5,
borderRadius: 12,
color: theme.fg,

16
mobile/src/theme.ts
View file

@ -19,6 +19,13 @@ export const theme = {
bgElevated: '#1E1A14',
card: '#26201A',
border: '#3A3128',
// Granica, która faktycznie oddziela. `border` ma 1,48:1 na `bg` i **1,27:1 na `card`**,
// czyli przy wymogu 3:1 nie jest granicą, tylko cieniem — zostaje do dekoracyjnych
// włosków. Wszystko, co niesie znaczenie (pola, fokus, podział sekcji), bierze to.
//
// Wartość dobrana pod OBIE powierzchnie: pola tekstowe leżą i na `bg` (ekrany), i na
// `card` (arkusze filtrów), a #6B6157 dawał na karcie 2,66, zaś #73695E dokładnie 2,999, czyli wciąż poniżej.
borderStrong: '#7B7065', // 3,89 na bg · 3,33 na card (obie powierzchnie ≥3:1)
borderFocus: '#B23A48',
// Foreground, warm off-white (nie pure white żeby nie biło na warm dark).
@ -29,6 +36,15 @@ export const theme = {
// Accent, oxblood/rust. Distinctive, niekonwencjonalne dla "media app".
// Brak glow/neon. Deep wariant dla pressed states.
accent: '#B23A48',
// WYPEŁNIENIE ma zostać oxbloodem: jasny tekst na nim daje 5,03:1, czyli przechodzi.
// Ale TEN SAM kolor jako tekst albo cienka obwódka jest nieczytelny — pomiar WCAG
// 2026-08-13: 3,21 na `bg`, 2,96 na `bgElevated`, **2,75 na `card`**, czyli poniżej
// nawet progu 3:1 dla elementów interfejsu, nie mówiąc o 4,5 dla tekstu.
//
// Podniesienie samego `accent` do progu tekstu wymagałoby zejścia w róż (#CE6975),
// co likwiduje tożsamość, której broni nagłówek tego pliku. Zamiast tego rozdzielamy
// ROLE: `accent` wypełnia, `accentText` pisze i obrysowuje.
accentText: '#C75260', // 4,30 na bg · 3,96 na bgElevated · 3,68 na card
accentGlow: '#B23A48', // alias, back-compat, ale bez prawdziwego glow
accentDeep: '#7A1F2A',
accentSecondary: '#D89B4A', // muted amber dla secondary CTAs