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-rgb: 10 10 10;
|
||||||
--ink-soft-rgb: 38 36 32;
|
--ink-soft-rgb: 38 36 32;
|
||||||
--ink-mute-rgb: 107 101 91;
|
--ink-mute-rgb: 107 114 128;
|
||||||
--ivory-rgb: 245 241 232;
|
--ivory-rgb: 255 255 255;
|
||||||
--paper-rgb: 236 230 214;
|
--paper-rgb: 248 249 250;
|
||||||
--line-rgb: 216 209 192;
|
--line-rgb: 229 231 235;
|
||||||
--vermillion-rgb: 217 52 43;
|
--vermillion-rgb: 217 52 43;
|
||||||
--vermillion-dark-rgb: 168 35 28;
|
--vermillion-dark-rgb: 168 35 28;
|
||||||
--cobalt-rgb: 78 119 255;
|
--cobalt-rgb: 78 119 255;
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
--cobalt: rgb(var(--cobalt-rgb));
|
--cobalt: rgb(var(--cobalt-rgb));
|
||||||
--cobalt-dark: rgb(var(--cobalt-dark-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 */
|
/* CUSTOMIZATION HOOK — MOTION: global reveal timing */
|
||||||
--reveal-duration: 600ms;
|
--reveal-duration: 600ms;
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export function ProfessorDetailsDialog() {
|
|||||||
ref={dialogRef}
|
ref={dialogRef}
|
||||||
aria-labelledby="prof-dialog-title"
|
aria-labelledby="prof-dialog-title"
|
||||||
onClick={handleBackdropClick}
|
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 */}
|
{/* Modal Header */}
|
||||||
<div className="flex items-center justify-between border-b border-line p-6 bg-paper sticky top-0 z-10">
|
<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 className="font-sans text-base">{item.en}</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
className={`text-xs font-mono ${
|
className={`text-xs font-mono ${
|
||||||
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
Reference in New Issue
Block a user