From 7deda639bf1eaeb20a98fdeb5875a26c10d517ac Mon Sep 17 00:00:00 2001 From: goon-foss Date: Fri, 14 Aug 2026 09:50:08 +0200 Subject: [PATCH] fix(theme): rozdziel role akcentu i dodaj ramke, ktora cokolwiek oddziela MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- mobile/src/changelog.ts | 7 +++++++ mobile/src/components/BugReportFAB.tsx | 8 +++---- mobile/src/components/MigrationBanner.tsx | 10 ++++----- mobile/src/components/MovieFiltersSheet.tsx | 8 +++---- mobile/src/components/OnboardingModal.tsx | 4 ++-- mobile/src/components/SceneTile.tsx | 4 ++-- mobile/src/components/WhatsNewModal.tsx | 4 ++-- mobile/src/navigation.tsx | 2 +- mobile/src/screens/AgeGateScreen.tsx | 2 +- mobile/src/screens/AppLockScreen.tsx | 2 +- mobile/src/screens/AppLockSettingsScreen.tsx | 8 +++---- mobile/src/screens/BlacklistScreen.tsx | 8 +++---- mobile/src/screens/DonateScreen.tsx | 2 +- mobile/src/screens/FavoritesScreen.tsx | 2 +- mobile/src/screens/LoginScreen.tsx | 2 +- mobile/src/screens/MovieDetailScreen.tsx | 4 ++-- mobile/src/screens/MoviesScreen.tsx | 4 ++-- mobile/src/screens/PerformerScenesScreen.tsx | 6 +++--- mobile/src/screens/PerformersScreen.tsx | 2 +- mobile/src/screens/PinEntry.tsx | 2 +- mobile/src/screens/PlayerScreen.tsx | 2 +- mobile/src/screens/SceneDetailScreen.tsx | 8 +++---- mobile/src/screens/ScenesFilterModal.tsx | 12 +++++------ mobile/src/screens/ScenesScreen.tsx | 22 ++++++++++---------- mobile/src/screens/SiteScenesScreen.tsx | 10 ++++----- mobile/src/screens/SitesScreen.tsx | 2 +- mobile/src/screens/StudioScenesScreen.tsx | 4 ++-- mobile/src/screens/TagScenesScreen.tsx | 2 +- mobile/src/screens/TagsScreen.tsx | 2 +- mobile/src/theme.ts | 16 ++++++++++++++ 30 files changed, 97 insertions(+), 74 deletions(-) diff --git a/mobile/src/changelog.ts b/mobile/src/changelog.ts index 42b1619..76f36a9 100644 --- a/mobile/src/changelog.ts +++ b/mobile/src/changelog.ts @@ -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', diff --git a/mobile/src/components/BugReportFAB.tsx b/mobile/src/components/BugReportFAB.tsx index c79da0e..5d885e0 100644 --- a/mobile/src/components/BugReportFAB.tsx +++ b/mobile/src/components/BugReportFAB.tsx @@ -289,7 +289,7 @@ export function BugReportFAB({ client, appVersion, navRef }: Props) { @@ -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', diff --git a/mobile/src/components/MigrationBanner.tsx b/mobile/src/components/MigrationBanner.tsx index f96ff7c..1f6061a 100644 --- a/mobile/src/components/MigrationBanner.tsx +++ b/mobile/src/components/MigrationBanner.tsx @@ -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', }, diff --git a/mobile/src/components/MovieFiltersSheet.tsx b/mobile/src/components/MovieFiltersSheet.tsx index 72bd056..7a95ac1 100644 --- a/mobile/src/components/MovieFiltersSheet.tsx +++ b/mobile/src/components/MovieFiltersSheet.tsx @@ -350,7 +350,7 @@ export function MovieFiltersSheet({ visible, value, onChange, onClose }: Props) 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 }} /> @@ -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, diff --git a/mobile/src/components/OnboardingModal.tsx b/mobile/src/components/OnboardingModal.tsx index 6bda7f0..906a014 100644 --- a/mobile/src/components/OnboardingModal.tsx +++ b/mobile/src/components/OnboardingModal.tsx @@ -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 }, diff --git a/mobile/src/components/SceneTile.tsx b/mobile/src/components/SceneTile.tsx index b3474e5..46845eb 100644 --- a/mobile/src/components/SceneTile.tsx +++ b/mobile/src/components/SceneTile.tsx @@ -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, diff --git a/mobile/src/components/WhatsNewModal.tsx b/mobile/src/components/WhatsNewModal.tsx index ccf269a..40cb814 100644 --- a/mobile/src/components/WhatsNewModal.tsx +++ b/mobile/src/components/WhatsNewModal.tsx @@ -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, diff --git a/mobile/src/navigation.tsx b/mobile/src/navigation.tsx index 3353d57..1df1a53 100644 --- a/mobile/src/navigation.tsx +++ b/mobile/src/navigation.tsx @@ -202,7 +202,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps headerRight: () => ( navigation.navigate('Donate')} hitSlop={12}> - ♥ + ♥ navigation.navigate('AppLockSettings')} diff --git a/mobile/src/screens/AgeGateScreen.tsx b/mobile/src/screens/AgeGateScreen.tsx index 717b658..cda1073 100644 --- a/mobile/src/screens/AgeGateScreen.tsx +++ b/mobile/src/screens/AgeGateScreen.tsx @@ -240,7 +240,7 @@ const styles = StyleSheet.create({ marginTop: 1, }, checkboxOn: { - borderColor: theme.accent, + borderColor: theme.accentText, backgroundColor: theme.accent, }, checkboxMark: { diff --git a/mobile/src/screens/AppLockScreen.tsx b/mobile/src/screens/AppLockScreen.tsx index df022c1..3966d19 100644 --- a/mobile/src/screens/AppLockScreen.tsx +++ b/mobile/src/screens/AppLockScreen.tsx @@ -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, diff --git a/mobile/src/screens/AppLockSettingsScreen.tsx b/mobile/src/screens/AppLockSettingsScreen.tsx index 1e75e54..dc99707 100644 --- a/mobile/src/screens/AppLockSettingsScreen.tsx +++ b/mobile/src/screens/AppLockSettingsScreen.tsx @@ -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, diff --git a/mobile/src/screens/BlacklistScreen.tsx b/mobile/src/screens/BlacklistScreen.tsx index 3766aac..f941a99 100644 --- a/mobile/src/screens/BlacklistScreen.tsx +++ b/mobile/src/screens/BlacklistScreen.tsx @@ -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 }, }); diff --git a/mobile/src/screens/DonateScreen.tsx b/mobile/src/screens/DonateScreen.tsx index 034f1e7..c950ac6 100644 --- a/mobile/src/screens/DonateScreen.tsx +++ b/mobile/src/screens/DonateScreen.tsx @@ -248,7 +248,7 @@ const styles = StyleSheet.create({ gap: 10, }, footerLink: { - color: theme.accent, + color: theme.accentText, fontSize: 13, fontWeight: '600', }, diff --git a/mobile/src/screens/FavoritesScreen.tsx b/mobile/src/screens/FavoritesScreen.tsx index 410af7c..4d70d69 100644 --- a/mobile/src/screens/FavoritesScreen.tsx +++ b/mobile/src/screens/FavoritesScreen.tsx @@ -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: { diff --git a/mobile/src/screens/LoginScreen.tsx b/mobile/src/screens/LoginScreen.tsx index bb3a6ba..08a93fd 100644 --- a/mobile/src/screens/LoginScreen.tsx +++ b/mobile/src/screens/LoginScreen.tsx @@ -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, diff --git a/mobile/src/screens/MovieDetailScreen.tsx b/mobile/src/screens/MovieDetailScreen.tsx index a0bd6ef..68c0a44 100644 --- a/mobile/src/screens/MovieDetailScreen.tsx +++ b/mobile/src/screens/MovieDetailScreen.tsx @@ -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 }, diff --git a/mobile/src/screens/MoviesScreen.tsx b/mobile/src/screens/MoviesScreen.tsx index 5e596ad..ead9430 100644 --- a/mobile/src/screens/MoviesScreen.tsx +++ b/mobile/src/screens/MoviesScreen.tsx @@ -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, diff --git a/mobile/src/screens/PerformerScenesScreen.tsx b/mobile/src/screens/PerformerScenesScreen.tsx index bed3779..b21b22d 100644 --- a/mobile/src/screens/PerformerScenesScreen.tsx +++ b/mobile/src/screens/PerformerScenesScreen.tsx @@ -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: { diff --git a/mobile/src/screens/PerformersScreen.tsx b/mobile/src/screens/PerformersScreen.tsx index afa53b1..24bbee5 100644 --- a/mobile/src/screens/PerformersScreen.tsx +++ b/mobile/src/screens/PerformersScreen.tsx @@ -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, diff --git a/mobile/src/screens/PinEntry.tsx b/mobile/src/screens/PinEntry.tsx index 0dc93cd..2322e6b 100644 --- a/mobile/src/screens/PinEntry.tsx +++ b/mobile/src/screens/PinEntry.tsx @@ -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', diff --git a/mobile/src/screens/PlayerScreen.tsx b/mobile/src/screens/PlayerScreen.tsx index aa75c76..8f2c518 100644 --- a/mobile/src/screens/PlayerScreen.tsx +++ b/mobile/src/screens/PlayerScreen.tsx @@ -2065,7 +2065,7 @@ const styles = StyleSheet.create({ overflow: 'hidden', }, panSeekDelta: { - color: theme.accent, + color: theme.accentText, fontSize: 14, fontWeight: '700', marginTop: 6, diff --git a/mobile/src/screens/SceneDetailScreen.tsx b/mobile/src/screens/SceneDetailScreen.tsx index 33c29f8..3975298 100644 --- a/mobile/src/screens/SceneDetailScreen.tsx +++ b/mobile/src/screens/SceneDetailScreen.tsx @@ -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, diff --git a/mobile/src/screens/ScenesFilterModal.tsx b/mobile/src/screens/ScenesFilterModal.tsx index a77d30b..f3dc1d0 100644 --- a/mobile/src/screens/ScenesFilterModal.tsx +++ b/mobile/src/screens/ScenesFilterModal.tsx @@ -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: { diff --git a/mobile/src/screens/ScenesScreen.tsx b/mobile/src/screens/ScenesScreen.tsx index 6fee47d..e533efe 100644 --- a/mobile/src/screens/ScenesScreen.tsx +++ b/mobile/src/screens/ScenesScreen.tsx @@ -157,7 +157,7 @@ export function ScenesScreen() { style={[styles.toolbarButton, alreadySaved && styles.toolbarButtonActive]} > {alreadySaved ? '★ Saved' : '☆ Save'} @@ -167,7 +167,7 @@ export function ScenesScreen() { onPress={() => setFilterOpen(true)} style={[styles.toolbarButton, activeCount > 0 && styles.toolbarButtonActive]} > - 0 && { color: theme.accent }]}> + 0 && { color: theme.accentText }]}> Filter{activeCount > 0 ? ` ${activeCount}` : ''} @@ -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 }, diff --git a/mobile/src/screens/SiteScenesScreen.tsx b/mobile/src/screens/SiteScenesScreen.tsx index bc304ea..5dac05d 100644 --- a/mobile/src/screens/SiteScenesScreen.tsx +++ b/mobile/src/screens/SiteScenesScreen.tsx @@ -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 }, diff --git a/mobile/src/screens/SitesScreen.tsx b/mobile/src/screens/SitesScreen.tsx index 4a60bc9..17dc05b 100644 --- a/mobile/src/screens/SitesScreen.tsx +++ b/mobile/src/screens/SitesScreen.tsx @@ -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, diff --git a/mobile/src/screens/StudioScenesScreen.tsx b/mobile/src/screens/StudioScenesScreen.tsx index d4aef09..e14e0db 100644 --- a/mobile/src/screens/StudioScenesScreen.tsx +++ b/mobile/src/screens/StudioScenesScreen.tsx @@ -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, diff --git a/mobile/src/screens/TagScenesScreen.tsx b/mobile/src/screens/TagScenesScreen.tsx index 408771b..21caf96 100644 --- a/mobile/src/screens/TagScenesScreen.tsx +++ b/mobile/src/screens/TagScenesScreen.tsx @@ -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 }, }); diff --git a/mobile/src/screens/TagsScreen.tsx b/mobile/src/screens/TagsScreen.tsx index 03abf51..92a54b6 100644 --- a/mobile/src/screens/TagsScreen.tsx +++ b/mobile/src/screens/TagsScreen.tsx @@ -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, diff --git a/mobile/src/theme.ts b/mobile/src/theme.ts index 87541e5..7174972 100644 --- a/mobile/src/theme.ts +++ b/mobile/src/theme.ts @@ -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