mirror of
https://github.com/tiennm99/bsk.git
synced 2026-08-04 00:22:59 +00:00
- responsive app shell: persistent sidebar at md+, accessible off-canvas drawer (focus trap, Esc, dialog semantics) + hamburger below md - active-route highlight, localized role labels, greet by name - visible focus rings, AA-contrast muted text, 44px primary actions - sign-in: autofocus, show/hide password, always-enabled submit - Be Vietnam Pro via next/font; prefers-reduced-motion guard; skip-link
51 lines
1.3 KiB
CSS
51 lines
1.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-background: oklch(1 0 0);
|
|
--color-foreground: oklch(0.145 0 0);
|
|
--color-primary: oklch(0.205 0 0);
|
|
--color-primary-foreground: oklch(0.985 0 0);
|
|
--color-muted: oklch(0.97 0 0);
|
|
/* Darkened from 0.556 → 0.50 for WCAG AA at small (text-xs) sizes. */
|
|
--color-muted-foreground: oklch(0.5 0 0);
|
|
--color-border: oklch(0.922 0 0);
|
|
--font-sans: var(--font-be-vietnam-pro), ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: ui-monospace, "Courier New", monospace;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@theme {
|
|
--color-background: oklch(0.145 0 0);
|
|
--color-foreground: oklch(0.985 0 0);
|
|
--color-primary: oklch(0.985 0 0);
|
|
--color-primary-foreground: oklch(0.205 0 0);
|
|
--color-muted: oklch(0.269 0 0);
|
|
--color-muted-foreground: oklch(0.708 0 0);
|
|
--color-border: oklch(0.269 0 0);
|
|
}
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-background);
|
|
color: var(--color-foreground);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
/* Respect users who ask the OS to reduce motion (vestibular safety). */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|