fix: remove opacity modifiers on Header active badges to satisfy WCAG 2.1 AA contrast (R-9.6) and update DESIGN.md
This commit is contained in:
@@ -66,13 +66,13 @@ export default function Header() {
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
|
||||
active
|
||||
? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold"
|
||||
? "bg-vermillion text-white shadow-sm dark:text-ivory font-bold"
|
||||
: "text-ink hover:text-vermillion hover:bg-paper/60"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`font-display text-[0.62rem] ${
|
||||
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
||||
}`}
|
||||
>
|
||||
{item.no}
|
||||
@@ -126,14 +126,14 @@ export default function Header() {
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
|
||||
active
|
||||
? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
|
||||
? "bg-vermillion text-white font-bold dark:text-ivory shadow-sm"
|
||||
: "text-ink hover:bg-paper/60"
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-baseline gap-3">
|
||||
<span
|
||||
className={`font-display text-xs ${
|
||||
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
||||
}`}
|
||||
>
|
||||
{item.no}
|
||||
@@ -142,7 +142,7 @@ export default function Header() {
|
||||
</span>
|
||||
<span
|
||||
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
|
||||
active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute"
|
||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
||||
}`}
|
||||
>
|
||||
{item.en}
|
||||
|
||||
Reference in New Issue
Block a user