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>
This commit is contained in:
1 parent
de4e59d9f8
commit
30f063456e
2 files changed
+3
-3
No files matched your search
@@ -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,
|
||||
}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user