Jakub Zych
d980f4cf2f
- typed client and useMenu/useMenuApi (SSR, menu:<code>:<locale> key, server and public bases, x-forwarded-for forwarded also on cached renders) - MenuNav and recursive MenuNavItem: WAI disclosure navigation, URL allowlist with a text fallback, rel on _blank, active link and trail, mobile toggle, Esc / focus-out / outside pointer / route change closing - menu tokens and base CSS, README - node tests (link rules, client, server-rendered NavItem) and a playground SSR smoke against a fixture API
34 lines
1.1 KiB
CSS
34 lines
1.1 KiB
CSS
/* Menu design tokens. Every visual value of MenuNav comes from these. An app
|
|
overrides any of them in its own CSS, e.g. on :root:root. */
|
|
:root {
|
|
/* Colour */
|
|
--menu-color-text: #1f2328; /* links and text */
|
|
--menu-color-muted: #59636e; /* secondary text */
|
|
--menu-color-bg: #ffffff; /* submenu and mobile panels */
|
|
--menu-color-surface: #f6f8fa; /* link hover background */
|
|
--menu-color-border: #d1d9e0; /* panel borders, dividers */
|
|
--menu-color-accent: #0969da; /* active link, focus ring */
|
|
|
|
/* Type */
|
|
--menu-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--menu-font-size: 1rem;
|
|
--menu-line-height: 1.5;
|
|
|
|
/* Spacing scale */
|
|
--menu-space-1: 0.25rem;
|
|
--menu-space-2: 0.5rem;
|
|
--menu-space-3: 1rem;
|
|
--menu-space-4: 1.5rem;
|
|
|
|
/* Radii */
|
|
--menu-radius: 4px; /* links */
|
|
--menu-radius-panel: 8px; /* submenu panels */
|
|
|
|
/* Layout */
|
|
--menu-submenu-min-width: 14rem;
|
|
--menu-toggle-size: 2.75rem; /* 44px touch target */
|
|
|
|
/* Shadow */
|
|
--menu-shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
|
|
}
|