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,
|
height: 38,
|
||||||
paddingHorizontal: 14,
|
paddingHorizontal: 14,
|
||||||
borderRadius: 999,
|
borderRadius: 999,
|
||||||
backgroundColor: on ? colors.accent : colors.surface2,
|
backgroundColor: on ? colors['accent-fill'] : colors.surface2,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: on ? colors.accent : colors.line,
|
borderColor: on ? colors.accent : colors.line,
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export function Button({
|
|||||||
}) {
|
}) {
|
||||||
const s = useStyles();
|
const s = useStyles();
|
||||||
const colors = useColors();
|
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];
|
const fg = { primary: '#fff', secondary: colors.text, ghost: colors.text2, danger: colors.danger }[variant];
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
@@ -282,7 +282,7 @@ export function Segmented<T extends string>({
|
|||||||
onPress={() => onChange(o.value)}
|
onPress={() => onChange(o.value)}
|
||||||
accessibilityRole="tab"
|
accessibilityRole="tab"
|
||||||
accessibilityState={{ selected: value === o.value }}
|
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>
|
<Text style={{ color: value === o.value ? '#fff' : colors.text2, fontWeight: '600', fontSize: 13 }}>{o.label}</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
|
|||||||
Reference in new issue
Block a user