From 30f063456e5351f58b1a349a411b6a9d44b75af3 Mon Sep 17 00:00:00 2001
From: mrleo1nid <43583385+mrleo1nid@users.noreply.github.com>
Date: Tue, 20 Oct 2026 23:15:38 +0300
Subject: [PATCH] fix(mobile): white text sits on the contrast-safe accent fill
 (M7)

Primary buttons, selected segments and context chips use accent-fill, as on
the web, so their labels meet WCAG AA contrast.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/mobile/src/app/(tabs)/index.tsx | 2 +-
 apps/mobile/src/ui/kit.tsx           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/src/app/(tabs)/index.tsx b/apps/mobile/src/app/(tabs)/index.tsx
index fa5f425..d4cdaff 100644
--- a/apps/mobile/src/app/(tabs)/index.tsx
+++ b/apps/mobile/src/app/(tabs)/index.tsx
@@ -117,7 +117,7 @@ function Chips({
                 height: 38,
                 paddingHorizontal: 14,
                 borderRadius: 999,
-                backgroundColor: on ? colors.accent : colors.surface2,
+                backgroundColor: on ? colors['accent-fill'] : colors.surface2,
                 borderWidth: 1,
                 borderColor: on ? colors.accent : colors.line,
               }}
diff --git a/apps/mobile/src/ui/kit.tsx b/apps/mobile/src/ui/kit.tsx
index 1ad1400..9617ed4 100644
--- a/apps/mobile/src/ui/kit.tsx
+++ b/apps/mobile/src/ui/kit.tsx
@@ -107,7 +107,7 @@ export function Button({
 }) {
   const s = useStyles();
   const colors = useColors();
-  const bg = { primary: colors.accent, secondary: colors.surface3, ghost: 'transparent', danger: colors['danger-soft'] }[variant];
+  const bg = { primary: colors['accent-fill'], secondary: colors.surface3, ghost: 'transparent', danger: colors['danger-soft'] }[variant];
   const fg = { primary: '#fff', secondary: colors.text, ghost: colors.text2, danger: colors.danger }[variant];
   return (
     <Pressable
@@ -282,7 +282,7 @@ export function Segmented<T extends string>({
           onPress={() => onChange(o.value)}
           accessibilityRole="tab"
           accessibilityState={{ selected: value === o.value }}
-          style={[s.segment, value === o.value && { backgroundColor: colors.accent }]}
+          style={[s.segment, value === o.value && { backgroundColor: colors['accent-fill'] }]}
         >
           <Text style={{ color: value === o.value ? '#fff' : colors.text2, fontWeight: '600', fontSize: 13 }}>{o.label}</Text>
         </Pressable>