feat(theme,ui): apply pure white background in light mode and improve accessibility
- Update light mode theme tokens to pure white (#ffffff) background and soft gray borders - Add supports-[height:100dvh] fallback to ProfessorDetailsDialog max-height - Add aria-hidden to decorative arrows in Header mobile navigation
This commit is contained in:
@@ -41,10 +41,10 @@
|
||||
|
||||
--ink-rgb: 10 10 10;
|
||||
--ink-soft-rgb: 38 36 32;
|
||||
--ink-mute-rgb: 107 101 91;
|
||||
--ivory-rgb: 245 241 232;
|
||||
--paper-rgb: 236 230 214;
|
||||
--line-rgb: 216 209 192;
|
||||
--ink-mute-rgb: 107 114 128;
|
||||
--ivory-rgb: 255 255 255;
|
||||
--paper-rgb: 248 249 250;
|
||||
--line-rgb: 229 231 235;
|
||||
--vermillion-rgb: 217 52 43;
|
||||
--vermillion-dark-rgb: 168 35 28;
|
||||
--cobalt-rgb: 78 119 255;
|
||||
@@ -61,7 +61,7 @@
|
||||
--cobalt: rgb(var(--cobalt-rgb));
|
||||
--cobalt-dark: rgb(var(--cobalt-dark-rgb));
|
||||
|
||||
--grain-color: rgba(10, 10, 10, 0.022);
|
||||
--grain-color: rgba(10, 10, 10, 0.015);
|
||||
|
||||
/* CUSTOMIZATION HOOK — MOTION: global reveal timing */
|
||||
--reveal-duration: 600ms;
|
||||
|
||||
@@ -83,7 +83,7 @@ export function ProfessorDetailsDialog() {
|
||||
ref={dialogRef}
|
||||
aria-labelledby="prof-dialog-title"
|
||||
onClick={handleBackdropClick}
|
||||
className="bg-paper text-ink border border-line rounded-lg p-0 max-w-2xl w-[92vw] max-h-[85vh] max-h-[85dvh] backdrop:bg-ink/50 backdrop:backdrop-blur-sm open:flex open:flex-col shadow-2xl m-auto"
|
||||
className="bg-paper text-ink border border-line rounded-lg p-0 max-w-2xl w-[92vw] max-h-[85vh] supports-[height:100dvh]:max-h-[85dvh] backdrop:bg-ink/50 backdrop:backdrop-blur-sm open:flex open:flex-col shadow-2xl m-auto"
|
||||
>
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between border-b border-line p-6 bg-paper sticky top-0 z-10">
|
||||
|
||||
@@ -255,6 +255,7 @@ export default function Header() {
|
||||
<span className="font-sans text-base">{item.en}</span>
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`text-xs font-mono ${
|
||||
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
||||
}`}
|
||||
|
||||
Reference in New Issue
Block a user