/* menuda-ui design tokens and reset. All component CSS must reference these custom properties — never hardcode colors, spacing, or font values. Consumers retheme by overriding tokens. Palette values are governed by design.md §1.1 (cobalt / terracotta default, re-anchored to contemporary chroma in Rev 0.4 — same hue families, same anchor contrasts, electric-cobalt / clean-rust expressions). */ @import "avatar.css"; @import "alert.css"; @import "alertdialog.css"; @import "badge.css"; @import "button.css"; @import "calendar.css"; @import "calendarinput.css"; @import "card.css"; @import "checkbox.css"; @import "collapsible.css"; @import "combobox.css"; @import "contextmenu.css"; @import "dropzone.css"; @import "field.css"; @import "icon.css"; @import "input.css"; @import "inputotp.css"; @import "pagination.css"; @import "popover.css"; @import "progress.css"; @import "separator.css"; @import "sheet.css"; @import "sidebar.css"; @import "skeleton.css"; @import "spinner.css"; @import "switch.css"; @import "table.css"; @import "toast.css"; @import "togglegroup.css"; @import "tooltip.css"; :root { /* Ground */ --cl-color-bg: #ffffff; --cl-color-surface: #f4f4f6; /* Ground for panels that float above the page (dialogs, popovers). design.md §2.5 wants the panel "surface-free" — on the light ground that means the page ground itself. Dark mode raises it, because a panel painted the same colour as the page reads as 1.1:1 against its own backdrop. */ --cl-color-elevated: #ffffff; --cl-color-text: #1d1f20; --cl-color-divider: rgba(29, 31, 32, 0.16); --cl-color-text-muted: rgba(29, 31, 32, 0.7); /* Modal/scrim overlay — design.md §2.5 ("neutral-900 at 50%"). Rev 0.4 adds --cl-overlay-filter: the scrim blurs and saturates what is behind it, which is what makes a 50% veil read as depth rather than as a grey sheet. Panels themselves stay opaque — the blur is the backdrop's job, never the panel's. */ --cl-color-overlay: rgba(43, 43, 45, 0.5); --cl-overlay-filter: blur(6px) saturate(1.15); /* Accent (cobalt) — primary action, focus, emphasis. 500 = base, 600 = hover, 700 = active. Rev 0.4 re-anchors the 500 to the electric-cobalt class (#2563eb) at the same audited contrast the system has always required (~5.17:1); the ramp was rebuilt outward in OKLCH. */ --cl-color-accent: #2563eb; --cl-color-accent-600: #104acc; --cl-color-accent-700: #0136b0; --cl-color-accent-tint-10: rgba(37, 99, 235, 0.1); --cl-color-accent-tint-30: rgba(37, 99, 235, 0.3); /* Label on a filled accent surface. design.md §1.1.1 audits the pair "bg on 500" at 4.5:1 — so this tracks the ground, not white. On the light ground the two coincide (#2563eb vs white = 5.17:1). */ --cl-color-on-accent: #ffffff; /* Label on a *tinted* accent fill (badge, avatar fallback). A separate role from the 700 pressed step: design.md §1.1.1 audits "700 on 100" light and "300 on 900" dark, i.e. the ramp end flips with the ground while the pressed state does not. Collapsing the two into one token is what put dark navy text on a dark tint. Here: #0136b0 on the 10% tint = 8.46:1. */ --cl-color-accent-on-tint: #0136b0; /* Focus ring — Rev 0.4. The ring keeps the geometry design.md §3 has always specified (2px, offset 2; inputs offset 0) but takes a tinted ink: the solid accent ring at full saturation read as a hard, dated rectangle. Half-alpha over the page is soft without losing the 3:1-non-text signal next to the control's own border. accent-2's ring mirrors its accent for the terracotta button and the error state on inputs. */ --cl-color-focus-ring: rgba(37, 99, 235, 0.55); --cl-color-focus-ring-2: rgba(194, 65, 12, 0.55); /* Accent-2 (terracotta) — secondary action, second tag family. Anchored to the same contrast as accent per design.md §1.1.1. Rev 0.4 re-anchors the 500 to the clean-rust class (#c2410c, 5.18:1): the brown-grey edge is gone, the hue is untouched. */ --cl-color-accent-2: #c2410c; --cl-color-accent-2-600: #a32600; --cl-color-accent-2-700: #891000; --cl-color-accent-2-tint-10: rgba(194, 65, 12, 0.1); --cl-color-on-accent-2: #ffffff; --cl-color-accent-2-on-tint: #891000; /* Tinted hovers used by line-drawing buttons (secondary / ghost). */ --cl-color-ink-tint-7: rgba(29, 31, 32, 0.07); /* Table — design.md §2.4 distinguishes two divider strengths: the outer frame and header rule carry --cl-color-divider (16% ink), the between-row hairline and the row hover background are weaker (8% and 4% respectively). A single divider token cannot do both without changing the meaning of the token, and the design system already pairs heavier rules with lighter fills elsewhere — sidebar chrome is --cl-color-surface against the page ground, for example, not the divider token against itself. */ --cl-color-divider-subtle: rgba(29, 31, 32, 0.08); --cl-color-row-hover: rgba(29, 31, 32, 0.04); /* Spacing (design.md §1.3 — 3.4 / 6.8 / 10.2 / 13.6 / 20.4 / 27.2 px). */ --cl-space-1: 3.4px; --cl-space-2: 6.8px; --cl-space-3: 10.2px; --cl-space-4: 13.6px; --cl-space-5: 20.4px; --cl-space-6: 27.2px; /* Radius (design.md §1.3 — Rev 0.4 modernises the ladder: 6 / 8 / 10 / 14). Component radius is 8px. Floating panels (card, dialog, sheet, popover, menus, calendar) take lg so the surface a user reads as "a card" is a step rounder than the controls inside it; sm is for the small bits — menu items, tooltips, list options. The pill is for badges, whose shape is their whole personality. */ --cl-radius-sm: 6px; --cl-radius-md: 8px; --cl-radius-lg: 14px; --cl-radius-component: 8px; --cl-radius-pill: 999px; /* Typography (design.md §1.2 — Inter throughout). */ --cl-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cl-font-weight: 400; --cl-font-weight-heading: 600; /* Type scale. design.md §1.2 tabulates an editorial scale — h1 42px down to meta 11px — for page content. Components need a tighter run: a 36px control cannot carry a 15px body label without crowding. The two are anchored where they meet (xl is h4, lg is body, sm is the dense-column body, 2xs is meta); md and xs sit between the editorial steps because controls need sizes the page scale doesn't have. */ --cl-font-size-3xs: 10px; --cl-font-size-2xs: 11px; --cl-font-size-xs: 12px; --cl-font-size-sm: 13px; --cl-font-size-md: 14px; --cl-font-size-lg: 15px; --cl-font-size-xl: 20px; /* Line heights. `tight` is only for single-line controls whose own box sets the height. Anything that wraps — or that clips its overflow for an ellipsis — needs one of the others: a line box exactly font-size tall is shorter than the glyphs, and the descenders get shaved off. */ --cl-line-height-tight: 1; --cl-line-height-heading: 1.3; --cl-line-height-ui: 1.4; --cl-line-height-body: 1.5; /* Control sizing. --cl-control-height is design.md §2.1's 36px minimum target; -sm is for controls nested inside another component's frame, which don't own their row and shouldn't claim the full target. */ --cl-control-height: 36px; --cl-control-height-sm: 28px; /* Icons (design.md §1.5 — Lucide, stroke-width 1.5), sized to the control they sit in. */ --cl-icon-size: 16px; --cl-icon-size-sm: 14px; --cl-icon-size-xs: 12px; /* Per-component frame sizes. These are here, not in the component stylesheets, so a consumer can retheme density from one place — the same reason the colours live here. */ --cl-avatar-size-sm: 24px; --cl-avatar-size-md: 32px; --cl-avatar-size-lg: 40px; --cl-badge-height: 20px; --cl-checkbox-size: 16px; --cl-calendar-width: 280px; --cl-calendar-row-height: 24px; --cl-calendar-input-min-width: 180px; --cl-combobox-trigger-min-width: 180px; --cl-combobox-list-max-height: 240px; --cl-input-min-width: 180px; --cl-inputotp-slot-size: 40px; --cl-inputotp-slot-gap: 6.8px; --cl-popover-min-width: 200px; --cl-popover-max-width: 320px; --cl-sheet-width: 400px; --cl-sheet-max-height: 80vh; /* Spinner — three fixed sizes for the loading indicator. sm matches the standard icon size (16px) so a spinner replaces an icon in a button or a row without resizing its slot; md is 24px, what most centred and inline loading slots want; lg is 32px, for page-level waiting states. Anything tighter than 16px drops the loader's eight strokes to a blur, so xs is deliberately not exposed. Tokens carry fallbacks so a stylesheet served without base.css still renders at its designed size. */ --cl-spinner-size-sm: 16px; --cl-spinner-size-md: 24px; --cl-spinner-size-lg: 32px; /* Progress — track heights. sm (4px) sits inside a row of metadata without competing for vertical space; md (6px) is the default and what an upload/import card calls for. Heights are the bar's *border-box* size: a 6px bar with a 1px top sheen renders 6px tall. Tokens carry fallbacks so a stylesheet served without base.css still renders at its designed height. Colour hooks are deliberately not declared here — component CSS reads them with role fallbacks, so a consumer can re-tint at any level without overriding :root and freezing the palette. */ --cl-progress-height-sm: 4px; --cl-progress-height-md: 6px; /* How much of the track the indicator fills. The component always sets it inline; this is the empty-bar default for hand-written indicator markup. */ --cl-progress-value: 0%; /* ToggleGroup — the track's inset around its items, and the gap between them. The item height is derived from it, so the group stays exactly one control height tall whatever the inset. */ --cl-togglegroup-padding: 2px; /* Dropzone — frame sizes from the design viewer's mockups: the dashed border, the icon's elevated circle and the glyph inside it, and the hint's line length. */ --cl-dropzone-border-width: 1.5px; --cl-dropzone-icon-size: 48px; --cl-dropzone-glyph-size: 24px; --cl-dropzone-hint-max-width: 360px; /* Switch — track and knob frame sizes, per design.md §2.3 (34×18 track, 12px knob). The knob sits inside the track with a 3px gap on either side (34 - 12 - 2*3 = 16px of horizontal travel), and the track is 18px tall so the knob's 12px leaves a 3px gap top and bottom too — a uniform 3px gap reads as the same chrome at rest and on motion. Tokens carry fallbacks so a stylesheet served without base.css still renders at the designed size. */ --cl-switch-width: 34px; --cl-switch-height: 18px; --cl-switch-knob: 12px; /* Sidebar — frame sizes and chrome. The widths carry their values as fallbacks so a stylesheet served without base.css still renders at the designed size. Sidebar chrome (background, foreground, border, ring) is a set of its own tokens so consumers can retheme the sidebar independently of the page tokens — the sidebar is a different surface than the page it sits next to. The accent pair mirrors the page --cl-color-accent / --cl-color-on-accent by default, so an unthemed sidebar looks like a tinted card on the page. */ --cl-sidebar-width: 16rem; /* The icon rail has to seat a full-height menu button inside the collapsed panel's own padding: 36px control + 2 × 10.2px = 56.4px is the floor, so 3.5rem (56px) clipped the button's trailing edge. 4rem leaves ~4px either side. */ --cl-sidebar-width-icon: 4rem; --cl-sidebar-width-mobile: 18rem; /* The Rail's strip, and the width an offcanvas panel collapses to when it carries one. Those two have to be the same number: the panel clips its own overflow, so a rail inside a panel narrower than the rail has no hit area and the sidebar cannot be reopened. One token keeps them from drifting apart. */ --cl-sidebar-rail-width: 4px; --cl-sidebar-bg: var(--cl-color-surface); --cl-sidebar-fg: var(--cl-color-text); --cl-sidebar-accent: var(--cl-color-accent); --cl-sidebar-accent-fg: var(--cl-color-on-accent); --cl-sidebar-border: var(--cl-color-divider); --cl-sidebar-ring: var(--cl-color-focus-ring); /* Sidebar sits below every modal band on desktop. The sidebar is page chrome, not a modal — a sheet or alertdialog opening must draw over it, and the sidebar JS marks itself inert while any modal is open so it cannot receive focus or clicks. The mobile drawer is a different surface (it covers the page) and shares the panel band instead; see --cl-z-sidebar-mobile. */ --cl-z-sidebar: 40; --cl-z-sidebar-mobile: 51; /* Tooltip — small, transient label on hover/focus. The pair inverts the page text and ground, so a tooltip is always legible regardless of the surface underneath (light tooltip on a dark page, dark tooltip on a light page). Consumers retheme by overriding either token; the defaults are the existing --cl-color-text / --cl-color-bg roles, which already flip with the theme. */ --cl-tooltip-bg: var(--cl-color-text); --cl-tooltip-fg: var(--cl-color-bg); --cl-tooltip-max-width: 240px; /* Toast — fixed-positioned notifications anchored to the viewport. Width is a single bound per design.md §2.6's one-line-of-text spec: long enough to carry a sentence, narrow enough that two stack side by side would clip — width is the lever, not a separate "compact" variant. The inset bar at the left edge reads as a 3px accent strip and is the variant's only signal — info uses the page accent, success uses a green that's distinct from both accent-1 and accent-2, error uses accent-2. Tokens carry fallbacks so a stylesheet served without base.css still renders at its designed size and uses the default accent ramp. Error uses accent-2's 600, not its base. design.md §2.6 asks for "accent-800 for the bar and the message" — a step *past* the base, which the first pass missed by wiring both tokens to the 500. At the 500 the error read as the same washed rust as a terracotta button; the 600 is deeper and a few degrees redder (#a32600 at 7.41:1 light, 6.32:1 dark), which is as far as the ramp goes before the 700 turns almost black-red at 9.82:1 and stops reading as terracotta at all. Both tokens still resolve through --cl-color-accent-2-600, so a retheme carries through. Success is the one colour outside the two accent ramps, because "this worked" is a meaning neither cobalt nor terracotta can carry. It is anchored to the accents rather than to a stock green ramp: the Rev 0.4 solve landed at #007f3d — hue 152°, chroma solved to sit in the same band as the retuned cobalt — and lands at 5.12:1 against white, alongside the cobalt accent's 5.17:1, so the green bar and the blue bar read at one weight in a stack. One value serves both the bar and the label, matching how error uses one accent-2 step for both. */ --cl-toast-width: 360px; --cl-toast-bar-width: 3px; /* The "max 3 visible" cap is not a token: it is enforced by a :nth-last-child(n + 4) rule in toast.css, and :nth-last-child() takes an integer, not a var(). A token here would have been a value nothing could read. */ --cl-toast-error-bar: var(--cl-color-accent-2-600); --cl-toast-error-fg: var(--cl-color-accent-2-600); --cl-color-toast-success-bar: #007f3d; --cl-color-toast-success-fg: #007f3d; --cl-toast-shadow: var(--cl-shadow-md); /* --cl-z-toast is not here: it belongs to the stacking block below, with the rest of the bands. Declaring it twice in the same :root meant last-one-wins, so a retheme that edited the copy up here silently did nothing. */ /* Elevation (design.md §1.3 — only --shadow-sm/md/lg). Rev 0.4: each step is a two-layer stack — a 1-2px contact shadow that seats the surface on its ground, plus a large, low-opacity ambient spread that reads as height. The single-offset rectangles they replace were the flattest thing about the old look. No ad-hoc shadows. */ --cl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --cl-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.1); --cl-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 40px -12px rgba(0, 0, 0, 0.18); /* Filled buttons (primary, accent-2) carry a 1px top sheen — a hairline of light along the top edge that gives the solid fill a machined face without gradient fills anywhere. Tokenised so a consumer can flatten it to `none`. */ --cl-shadow-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.18); /* Press feedback — filled and line-drawn buttons compress to 98% while the pointer is down. Tokenised so a consumer can turn the micro-interaction off (`--cl-press-transform: none`). */ --cl-press-transform: scale(0.98); /* Stacking. Seven bands, ordered low to high: raised (1, a local lift inside one component — e.g. a table's stretched row link over positioned cell content; never a page band) < sidebar (40, page chrome) < overlay (50, modal scrim) < panel (51, sheet panel / mobile drawer) < dialog-overlay (52, alertdialog scrim — above a sheet panel so a confirm over a sheet reads correctly) < dialog (53, alertdialog panel) < toast (55, non-modal) < popover (60, anchored floats). Keep new overlay components inside these bands; TestStackingBandsAreOrdered enforces the order. */ --cl-z-raised: 1; --cl-z-overlay: 50; --cl-z-panel: 51; --cl-z-dialog-overlay: 52; --cl-z-dialog: 53; --cl-z-toast: 55; --cl-z-popover: 60; /* Motion */ --cl-transition-fast: 120ms ease; --cl-transition-base: 180ms ease-out; } @media (prefers-color-scheme: dark) { :root { --cl-color-bg: #17171a; --cl-color-surface: #202024; /* Raised, not recessed: a shade above surface, so a dialog reads as a panel against the 70%-black backdrop (1.4:1) rather than melting into it (1.1:1 at the page ground). Text on it still clears 12.7:1. */ --cl-color-elevated: #2a2a30; --cl-color-text: #f2f2f3; --cl-color-divider: rgba(242, 242, 243, 0.16); --cl-color-text-muted: rgba(242, 242, 243, 0.7); /* Dark accents. Two things flip with the ground, and both were previously missed (design.md §1.1.1): 1. The ramp runs the other way. On the light ground hover/active step *down* in lightness; on a dark ground stepping down sinks the button into the page, so 600/700 step up instead (4.94 → 6.31 → 7.95:1 against the ground for cobalt; 4.90 → 6.32 → 8.00:1 for terracotta). 2. The label goes to the ground, not to white. The audited pair is "bg on 500", and these 500s are solved for a dark label — the dark ground on #4a82f5 is 4.94:1 and on #d36642 is 4.90:1, both clearing AA, and the whole ladder stays legible as the fill lightens. */ --cl-color-accent: #4a82f5; --cl-color-accent-600: #5e98ff; --cl-color-accent-700: #75afff; --cl-color-accent-tint-10: rgba(74, 130, 245, 0.18); --cl-color-accent-tint-30: rgba(74, 130, 245, 0.3); --cl-color-on-accent: #17171a; /* The 300 step, per the "300 on 900" dark audit pair — 7.43:1 on the 18% tint. A light-mode 700 here would be 1.6:1: effectively invisible. */ --cl-color-accent-on-tint: #90bdff; --cl-color-accent-2: #d36642; --cl-color-accent-2-600: #ea7a56; --cl-color-accent-2-700: #ff8f6b; --cl-color-accent-2-tint-10: rgba(211, 102, 66, 0.18); --cl-color-on-accent-2: #17171a; /* 7.46:1 on the tint; a light-mode 700 here would be 1.4:1. */ --cl-color-accent-2-on-tint: #faa68b; /* Dark rings run a step hotter in alpha than the light ones: a tint at 55% over a #17171a page sinks below the non-text 3:1 the ring is there to provide, so the dark pair carries 60%. */ --cl-color-focus-ring: rgba(74, 130, 245, 0.6); --cl-color-focus-ring-2: rgba(211, 102, 66, 0.6); --cl-color-ink-tint-7: rgba(242, 242, 243, 0.07); /* Dark mode lifts to the same percentages — 8% and 4% — not to anything stronger. On a #17171a ground 8% white reads as roughly the same luma step as 8% black on white, and 4% is below the visible threshold for some users either way. The tokens are tuned to be perceived, not to match the light-mode alpha literally; the design system documents the intent as "subtle divider, near-invisible hover" and that is what the dark counterparts deliver. */ --cl-color-divider-subtle: rgba(242, 242, 243, 0.08); --cl-color-row-hover: rgba(242, 242, 243, 0.04); /* Toast success — lightened the way the accents are, and to the same place. The light-mode #007f3d drops under 4.5:1 here, under the 4.5:1 a label needs; #0ba052 is the same hue eight-ish points up in lightness, at 5.25:1 — alongside the dark accent's 4.94:1, so the green and blue bars keep reading at one weight the way they do on the light ground. Error needs no override here: it resolves through accent-2's 600, which the dark ramp already steps upward (6.32:1). */ --cl-color-toast-success-bar: #0ba052; --cl-color-toast-success-fg: #0ba052; /* Dark overlay deepens so the panel still reads as elevated on dark backgrounds (design.md §2.5). The blur filter is shared with the light ground and needs no override. */ --cl-color-overlay: rgba(0, 0, 0, 0.7); /* Same two-layer recipe as the light ground, heavier: dark mode gets almost all of its elevation from shadow, since tone can only lift so far above a #17171a page. */ --cl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --cl-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5); --cl-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.6); /* Filled buttons are light surfaces on the dark ground, so the sheen carries a touch more alpha to stay visible against #4a82f5 / #d36642. */ --cl-shadow-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.22); } } ::selection { background-color: var(--cl-color-accent-tint-30); } /* Box model. Every fixed dimension in this library is a border-box measurement: `.cl-btn` is `height: 36px` with `padding: 7px 12px` and a 1px border, which is 36px tall only when the padding and border are counted inside it. Under the browser default (`content-box`) that same button renders 52px tall, the 16px checkbox renders 18px, and the 280px calendar renders 282px. So the rule keys off the namespace itself rather than sitting behind an opt-in class: a consumer who drops in a Button and never reads this file still gets a 36px button. Both attribute forms are required — `^=` catches `class="cl-btn"`, `*=" cl-"` catches `class="mine cl-btn"`. Consumer markup inside a slot is deliberately left alone. That's their box model to choose, not ours. */ [class^="cl-"], [class*=" cl-"] { box-sizing: border-box; } /* Opt-in reset for the consumer's own content. Not required for the library to render correctly — the rule above covers that — but kept because it is part of the cl- namespace, and the namespace is a public contract. */ .cl-reset, .cl-reset * { box-sizing: border-box; } /* Alpine's cloak attribute. Any component that renders hidden-until-open markup sets x-cloak on it, and this rule is what keeps that markup hidden in the window between HTML parse and Alpine boot — without it a dialog, popover or listbox flashes open on every page load. It lives here rather than in a component stylesheet because three components already depend on it (alertdialog, calendarinput, combobox) and any future overlay will too. Defined in one of them, it works only by the accident of base.css importing that file — a consumer serving individual stylesheets would get the flash. */ [x-cloak] { display: none !important; } /* Scroll lock for modal overlays. Applied to by the component that opens the overlay and removed when the last one closes, so the page behind a dialog doesn't scroll under the scrim. It lives here rather than in a component stylesheet because it is a global concern — every overlay we add will want the same rule, and a consumer serving individual stylesheets should not have to know which component happens to define it. The scrollbar-width compensation is applied inline by the script, since only JS can measure it. */ .cl-scroll-locked { overflow: hidden; } /* Screen-reader-only text. Used by components that ship a visual element whose only job is to communicate something a sighted user gets from the chrome (a separator, an icon, a disabled reason) — the text is read in full and the visual is hidden. 1px clip rather than display:none so the text still reaches the accessibility tree; the absolute positioning takes it out of layout without collapsing the line box. */ .cl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }