/* ============================================================================ * Lily theme: light * * Standalone Lily Design System theme — declares the theme tokens and inlines * the component CSS for all 492 Lily components, so this single file is the * only stylesheet required to render a Lily-styled page. * * Credit for the theme source: DaisyUI (https://daisyui.com/) * ========================================================================= */ /* Theme tokens — the colour, radius, border, and depth variables consumed * by every Lily component rule below. The theme applies by default (`:root`) * and also when explicitly opted into via ``, * so multiple themes can coexist in one document and be switched at runtime * by updating the `data-theme` attribute. */ :where(:root, :root[data-theme="light"]) { color-scheme: light; /* Page-level surface (primary canvas). Sits behind body copy and primary content areas. Lightest base shade in light themes, deepest in dark themes. */ --color-base-100: oklch(100% 0 0); /* Secondary surface — section panels, card backgrounds, sidebars, table-header fills. One step away from the page surface. */ --color-base-200: oklch(98% 0 0); /* Tertiary surface — dividers, sunken wells, hover-row backgrounds. The most muted of the three base shades. */ --color-base-300: oklch(95% 0 0); /* Primary text colour. High-contrast against base-100 to meet WCAG contrast ratios for body copy. */ --color-base-content: oklch(21% 0.006 285.885); /* Primary brand / action colour. Used on primary buttons, active navigation items, selected states, and the focus ring. */ --color-primary: oklch(45% 0.24 277.023); /* Foreground colour used over `--color-primary` fills (so primary buttons retain a guaranteed contrast ratio). */ --color-primary-content: oklch(93% 0.034 272.788); /* Secondary brand colour. Pressed/hover state for primary buttons and visited links; also drives the secondary chrome family. */ --color-secondary: oklch(65% 0.241 354.308); /* Foreground colour used over `--color-secondary` fills. */ --color-secondary-content: oklch(94% 0.028 342.258); /* Accent colour — used sparingly for emphasis, the AI label, illustrations, and tertiary call-outs. */ --color-accent: oklch(77% 0.152 181.912); /* Foreground colour used over `--color-accent` fills. */ --color-accent-content: oklch(38% 0.063 188.416); /* Neutral chrome surface — footer bars, code blocks, tooltips, government-banner strips. Typically the theme's darkest neutral. */ --color-neutral: oklch(14% 0.005 285.823); /* Foreground colour used over `--color-neutral` fills. */ --color-neutral-content: oklch(92% 0.004 286.32); /* Informational status colour — informational banners, links, 'did-you-know' callouts. */ --color-info: oklch(74% 0.16 232.661); /* Foreground colour used over `--color-info` fills. */ --color-info-content: oklch(29% 0.066 243.157); /* Success / confirmation colour — used on success panels, completed step indicators, validation pass states, and the green RAG status. */ --color-success: oklch(76% 0.177 163.223); /* Foreground colour used over `--color-success` fills. */ --color-success-content: oklch(37% 0.077 168.94); /* Warning colour — yellow/amber band; used on phase banners, in-progress states, validation warnings, and the amber RAG status. */ --color-warning: oklch(82% 0.189 84.429); /* Foreground colour used over `--color-warning` fills. Often dark so text remains legible on a bright yellow background. */ --color-warning-content: oklch(41% 0.112 45.904); /* Error / destructive colour — used on alert dialogs, error messages, validation failures, urgent care cards, and the red RAG status. */ --color-error: oklch(71% 0.194 13.428); /* Foreground colour used over `--color-error` fills. */ --color-error-content: oklch(27% 0.105 12.094); /* Smallest corner radius. Applied to chips, badges, switches, and radio/checkbox containers (mapped to `--lily-radius-sm`). */ --radius-selector: 0.5rem; /* Medium corner radius. Applied to inputs, buttons, menu items, tooltips, and most everyday form controls (mapped to `--lily-radius-md`). */ --radius-field: 0.25rem; /* Largest corner radius. Applied to cards, dialogs, drawers, and hero blocks (mapped to `--lily-radius-lg`). */ --radius-box: 0.5rem; /* Base size for selector-style controls (checkbox/radio glyph size, switch thumb diameter). Currently unused by Lily's baseline component rules but available for theme extensions. */ --size-selector: 0.25rem; /* Base size for field-style controls (input height multiplier). Currently unused by Lily's baseline component rules but available for theme extensions. */ --size-field: 0.25rem; /* Default border width applied to inputs, buttons, dividers, table cells, etc. Single source of truth for the system's stroke weight. */ --border: 1px; /* Depth flag (0 or 1). Lily's baseline rules read it implicitly via the shadow tokens; a depth-0 theme effectively renders flat. */ --depth: 1; /* Noise flag (0 or 1). Reserved for theme extensions that want to layer a subtle texture; the baseline rules do not consume it. */ --noise: 0; } /* ---------------------------------------------------------------------------- * Lily component styling — applied automatically once this theme stylesheet * is loaded. Every Lily class hook (492 components) consumes the theme tokens * declared above, so no other stylesheet is required for the theme to render. * * Rules live in @layer lily with :where() selectors so the specificity stays * at 0 — application CSS always wins. To replace a Lily component's default * look, declare a higher-specificity rule (or a later @layer) in your own * stylesheet. * -------------------------------------------------------------------------- */ @layer lily { /* ========================================================================== * Tokens & primitives * -------------------------------------------------------------------------- * Lily exposes a small, stable set of derived tokens (the `--lily-*` * family) layered on top of the upstream theme primitives (the * `--color-*`, `--radius-*`, `--border`, `--depth`, `--noise` family). * * Component rules consume only the `--lily-*` tokens. That indirection * means a consumer can swap upstream themes (or invent a new one) without * touching component CSS — the component rules below remain stable * because their inputs do. * ====================================================================== */ :where(:root) { /* --- Surfaces ------------------------------------------------------ */ /* Default page surface — the canvas behind body copy. */ --lily-surface: var(--color-base-100); /* Secondary surface — section panels, sidebars, table headers, muted callouts. One step away from the page background. */ --lily-surface-alt: var(--color-base-200); /* Sunken surface — used behind progress tracks, skeletons, and inset wells. Suggests depth without requiring a shadow. */ --lily-surface-sunken: var(--color-base-300); /* --- Text ---------------------------------------------------------- */ /* Primary body-copy colour. Maps to the theme's high-contrast reading colour. */ --lily-text: var(--color-base-content); /* Muted / secondary text — mixed 70% with transparent to keep the hue but lower contrast for captions, helptext, placeholders. */ --lily-text-muted: color-mix( in oklch, var(--color-base-content) 70%, transparent ); /* --- Borders ------------------------------------------------------- */ /* Default border — 20% blend with body content colour, low-contrast, used for subtle dividers between content blocks. */ --lily-border: color-mix( in oklch, var(--color-base-content) 20%, transparent ); /* Higher-contrast border — 40% blend, used on inputs, buttons, and anywhere a clear edge is required (WCAG non-text contrast). */ --lily-border-strong: color-mix( in oklch, var(--color-base-content) 40%, transparent ); /* --- Focus ring ---------------------------------------------------- */ /* Outline colour for `:focus-visible`. Always the primary brand colour so focus is visually tied to interactive intent. */ --lily-focus-ring: var(--color-primary); /* --- Radii --------------------------------------------------------- */ /* Three tiers of corner rounding. `sm` for chips/badges, `md` for inputs/buttons/cards, `lg` for dialogs/heroes. */ --lily-radius-sm: var(--radius-selector); --lily-radius-md: var(--radius-field); --lily-radius-lg: var(--radius-box); /* --- Spacing scale ------------------------------------------------- */ /* Five-step spacing scale used by every gap, padding, and margin. Linear progression keeps rhythm consistent at any zoom level. */ --lily-space-xs: 0.25rem; --lily-space-sm: 0.5rem; --lily-space-md: 1rem; --lily-space-lg: 1.5rem; --lily-space-xl: 2rem; /* --- Typography ---------------------------------------------------- */ /* Body font stack — system fonts first so consumers get a native-feeling baseline without shipping a web font. */ --lily-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Monospaced font stack — used by code, kbd, identifiers, and anywhere alignment matters more than reading speed. */ --lily-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* --- Shadows ------------------------------------------------------- */ /* Three depth tiers. The shadow colour is derived from the body content token so it adapts to light/dark themes automatically. */ --lily-shadow-sm: 0 1px 2px color-mix(in oklch, var(--color-base-content) 8%, transparent); --lily-shadow-md: 0 4px 12px color-mix(in oklch, var(--color-base-content) 12%, transparent); --lily-shadow-lg: 0 12px 32px color-mix(in oklch, var(--color-base-content) 16%, transparent); } /* Focus ring — every interactive Lily class hook gets the same visible focus indicator. Centralising the selector means a consumer can restyle every focus state at once by overriding `--lily-focus-ring` (or this rule) rather than chasing 100+ component selectors. */ :where( [class$="-input"], [class$="-button"], [class$="-link"], [class$="-list-item"], [class$="-option"], [class$="-picker-button"], .button, .input, .select, .option, .link, .menu-item, .tab-bar-button, .switch-button, .toggle-button, .checkbox-input, .radio-input, .file-upload, .signature-pad, .editable ):focus-visible { outline: 2px solid var(--lily-focus-ring); outline-offset: 2px; } /* ========================================================================== * Inputs * -------------------------------------------------------------------------- * Every Lily class ending in `-input` (textual, date, picker, range, file, * national-identifier, etc.) shares the same baseline styling. The * `[class$="-input"]` attribute selector catches single-class usage * (`class="email-input"`); consumers needing multi-class composition can * override with higher-specificity rules in their own stylesheet. * * The `:not([class$="-with-mask-input"])` exclusion exists because the * masked-input variant carries its own typography (monospaced + letter * spacing) and we don't want the generic baseline overriding it. * Hidden inputs (`type="hidden"`) are also excluded — they must not be * laid out as visible inputs. * ====================================================================== */ /* Baseline visual treatment for every textual input. */ :where( [class$="-input"]:not([class$="-with-mask-input"]):not([type="hidden"]), .input ) { appearance: none; /* drop UA native chrome (Safari especially) */ display: inline-block; width: 100%; /* fill parent by default; consumer caps via container */ max-width: 100%; min-height: 2.5rem; /* WCAG 2.5.5 target-size guidance (~44px) */ padding: 0.5rem 0.75rem; font: inherit; font-family: var(--lily-font-body); color: var(--lily-text); background-color: var(--lily-surface); border: var(--border) solid var(--lily-border-strong); border-radius: var(--lily-radius-md); box-sizing: border-box; /* Smooth focus/hover edge transitions — short enough to feel responsive, long enough to read as intentional. */ transition: border-color 120ms ease, box-shadow 120ms ease; } /* Hover affordance — switches the border to the primary brand colour so users get a visual cue that the field is interactive. The `:not(:disabled)` guard prevents the cue from appearing on locked-out controls. */ :where([class$="-input"], .input):hover:not(:disabled) { border-color: var(--color-primary); } /* Disabled / aria-disabled — desaturate and shift to the muted surface so the control reads as inactive without losing its layout footprint. */ :where([class$="-input"], .input):disabled, :where([class$="-input"], .input)[aria-disabled="true"] { color: var(--lily-text-muted); background-color: var(--lily-surface-alt); cursor: not-allowed; } /* Invalid input — red border. The `aria-invalid="true"` attribute is the ARIA contract; pairing it with a colour change keeps WCAG 1.4.1 (no colour-only meaning) honest because the ARIA state is also there. */ :where([class$="-input"], .input)[aria-invalid="true"] { border-color: var(--color-error); } /* Placeholder — match the muted text token. `opacity: 1` overrides Firefox's legacy default placeholder opacity, which would otherwise compound on our already-muted colour. */ :where([class$="-input"], .input)::placeholder { color: var(--lily-text-muted); opacity: 1; } /* --- Input type-specific tweaks ----------------------------------------- */ /* Hidden inputs must never render. */ :where(.hidden-input) { display: none; } /* Submit / reset / image / generic button inputs render as buttons. */ :where(.button-input, .submit-input, .reset-input, .image-input) { width: auto; min-width: 2.5rem; background-color: var(--color-primary); color: var(--color-primary-content); border-color: transparent; cursor: pointer; font-weight: 600; } /* Reset input is the secondary-action variant — muted surface, not the primary brand colour, because "reset" is a destructive op. */ :where(.reset-input) { background-color: var(--lily-surface-alt); color: var(--lily-text); border-color: var(--lily-border-strong); } /* Color input — narrow swatch with internal padding so the colour chip reads cleanly inside the input frame. */ :where(.color-input) { min-height: 2.5rem; padding: 0.25rem; width: 3rem; cursor: pointer; } /* Range / angle slider — strip the input chrome so the consumer can restyle the track. `accent-color` provides a minimal styled fallback. */ :where(.range-input, .angle-slider-range-input) { appearance: none; background: transparent; border: 0; padding: 0; height: 1.5rem; accent-color: var(--color-primary); } /* File inputs — slightly tighter padding because the UA-rendered "Choose file" button consumes most of the visual space. */ :where(.file-input, .image-file-input) { padding: 0.375rem 0.5rem; cursor: pointer; } /* Checkbox / radio — small square/round controls with the brand accent. */ :where(.checkbox-input, .radio-input) { width: 1.125rem; height: 1.125rem; min-height: 0; /* override the 2.5rem input baseline */ padding: 0; accent-color: var(--color-primary); cursor: pointer; } :where(.radio-input) { border-radius: 50%; } :where(.checkbox-input) { border-radius: var(--lily-radius-sm); } /* Textarea variants — taller minimum, line-height tuned for reading, vertical-only resize so layout columns aren't disturbed. */ :where(.text-area-input, .text-area-input-with-character-counter) { min-height: 6rem; line-height: 1.5; resize: vertical; } /* Character-counter variant stacks the textarea and the counter span. */ :where(.text-area-input-with-character-counter) { display: flex; flex-direction: column; } /* --- Composite inputs with built-in DOM structure ----------------------- */ /* PIN input — N small slots side-by-side. The wrapper is invisible; the children carry the styling. */ :where(.pin-input-div) { display: inline-flex; gap: 0.5rem; padding: 0; background: transparent; border: 0; width: auto; min-height: 0; } :where(.pin-input-div > input) { width: 2.5rem; height: 3rem; padding: 0; text-align: center; font-size: 1.125rem; font-weight: 600; background-color: var(--lily-surface); border: var(--border) solid var(--lily-border-strong); border-radius: var(--lily-radius-md); color: var(--lily-text); } /* Password-toggle composite — text input + reveal button, sharing a single visual frame via flush radii. */ :where(.password-input-or-text-input-div) { display: inline-flex; align-items: stretch; width: 100%; background: transparent; border: 0; padding: 0; min-height: 0; } :where(.password-input-or-text-input-div > input) { flex: 1; min-height: 2.5rem; padding: 0.5rem 0.75rem; background-color: var(--lily-surface); color: var(--lily-text); border: var(--border) solid var(--lily-border-strong); border-right: 0; /* drop the seam where input meets button */ border-radius: var(--lily-radius-md) 0 0 var(--lily-radius-md); } :where(.password-input-or-text-input-div > button) { padding: 0 0.75rem; background-color: var(--lily-surface-alt); color: var(--lily-text); border: var(--border) solid var(--lily-border-strong); border-radius: 0 var(--lily-radius-md) var(--lily-radius-md) 0; cursor: pointer; } /* --- Input compositions ------------------------------------------------- */ /* Input group — flush-joined controls (input + button, etc.). The negative margin collapses overlapping borders into a single shared edge. */ :where(.input-group) { display: inline-flex; align-items: stretch; width: 100%; } :where(.input-group > *) { border-radius: 0; margin-left: calc(-1 * var(--border)); } :where(.input-group > *:first-child) { border-top-left-radius: var(--lily-radius-md); border-bottom-left-radius: var(--lily-radius-md); margin-left: 0; } :where(.input-group > *:last-child) { border-top-right-radius: var(--lily-radius-md); border-bottom-right-radius: var(--lily-radius-md); } /* Masked input — monospaced font + slight letter-spacing so the mask template (phone, SSN, etc.) aligns over the typed characters. */ :where(.input-with-mask) { font-family: var(--lily-font-mono); letter-spacing: 0.05em; } /* Search input — reserve space on the inline-start for the magnifier glyph. The `linear-gradient(transparent, transparent)` is a no-op background-image; it ensures the property exists so consumers can layer an SVG icon over it by overriding `background-image`. */ :where(.text-input-with-search, .search-input) { background-image: linear-gradient(transparent, transparent); padding-inline-start: 2.25rem; } /* ========================================================================== * Views * -------------------------------------------------------------------------- * Read-only display chips for identifiers, dates, ratings, and other * pre-formatted data. Every Lily class ending in `-view` is a span/div * that renders a value the user shouldn't edit. * * The exclusions (`theme-view`, `scroll-view`, `split-view`, `tree-view`) * are larger containers that don't fit the chip pattern — they're * styled separately further down. * ====================================================================== */ :where( [class$="-view"]:not(.theme-view):not(.scroll-view):not( .split-view ):not(.tree-view) ) { display: inline-block; padding: 0.125rem 0.5rem; font-family: var(--lily-font-mono); /* fixed-width for alignment */ color: var(--lily-text); background-color: var(--lily-surface-alt); border: var(--border) solid var(--lily-border); border-radius: var(--lily-radius-md); line-height: 1.4; } /* Dates / ranges are human-readable, not codes — switch back to body font. */ :where(.date-time-view, .date-range, .review-date) { font-family: var(--lily-font-body); } /* Theme-view — small label + colour swatch composition. */ :where(.theme-view) { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; color: var(--lily-text); } /* ========================================================================== * Buttons * -------------------------------------------------------------------------- * Every class ending in `-button` and the bare `.button` share one * baseline. Hamburger-menu is excluded because it's an icon-only square * with its own minimal frame styling (further down). * ====================================================================== */ /* Baseline button — primary-coloured pill. Variants override colour or shape below. */ :where(.button, [class$="-button"]:not(.hamburger-menu-button)) { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; /* leave room for an icon + label */ min-height: 2.5rem; /* WCAG target-size guidance */ padding: 0.5rem 1rem; font: inherit; font-family: var(--lily-font-body); font-weight: 600; line-height: 1.2; color: var(--color-primary-content); background-color: var(--color-primary); border: var(--border) solid transparent; border-radius: var(--lily-radius-md); cursor: pointer; user-select: none; /* prevent text drag-select on double-click */ text-decoration: none; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } /* Hover — shift to the secondary token for a subtle change of state. */ :where(.button, [class$="-button"]):hover:not(:disabled):not( [aria-disabled="true"] ) { background-color: var(--color-secondary); color: var(--color-secondary-content); } /* Disabled — half opacity, not-allowed cursor. */ :where(.button, [class$="-button"]):disabled, :where(.button, [class$="-button"])[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* Pressed (toggle/switch active state) — re-use the secondary colour. */ :where(.button, [class$="-button"])[aria-pressed="true"] { background-color: var(--color-secondary); color: var(--color-secondary-content); } /* --- Button variants ---------------------------------------------------- */ /* Icon button — square; aspect-ratio keeps it from squashing when the icon font changes size. */ :where(.icon-button) { padding: 0.5rem; min-width: 2.5rem; aspect-ratio: 1; } /* Floating action button — pinned to the bottom-right of the viewport. Uses logical inset properties so it flips correctly under RTL. */ :where(.float-button) { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; box-shadow: var(--lily-shadow-lg); border-radius: 999px; width: 3.5rem; height: 3.5rem; padding: 0; } /* Split button — extra padding-end for the dropdown caret. */ :where(.split-button) { padding-inline-end: 0.5rem; } /* Download button — stacks the action label over a hint (filesize, etc.). */ :where(.download-button) { flex-direction: column; align-items: flex-start; text-align: start; } /* Clipboard-copy — muted style because it's auxiliary, not primary. */ :where(.clipboard-copy-button) { background-color: var(--lily-surface-alt); color: var(--lily-text); border-color: var(--lily-border-strong); } /* Switch button — iOS-style toggle pill. The track is the sunken surface; the thumb is drawn by the consumer (or via ::before in higher-specificity overrides). */ :where(.switch-button) { position: relative; width: 2.75rem; min-width: 2.75rem; height: 1.5rem; min-height: 1.5rem; padding: 0; background-color: var(--lily-surface-sunken); border-radius: 999px; } :where( .switch-button[aria-pressed="true"], .switch-button[aria-checked="true"] ) { background-color: var(--color-primary); } /* Toggle button — when un-pressed, render as a muted secondary chip. */ :where(.toggle-button[aria-pressed="false"]) { background-color: var(--lily-surface-alt); color: var(--lily-text); border-color: var(--lily-border-strong); } /* Link-style "button" — for back/skip/go-to controls that look like text links but use the button machinery for keyboard semantics. */ :where( .back-link, .skip-link, .go-to-top, .go-to-next-section, .go-to-previous-section ) { background-color: transparent; color: var(--color-primary); border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; } /* Skip-link — visually hidden off-screen until focused, then snaps to the top-left of the page. Required pattern for keyboard accessibility (WCAG 2.4.1 bypass blocks). */ :where(.skip-link) { position: absolute; top: -3rem; left: 0.5rem; padding: 0.5rem 1rem; background-color: var(--color-primary); color: var(--color-primary-content); text-decoration: none; border-radius: var(--lily-radius-md); z-index: 9999; } :where(.skip-link:focus) { top: 0.5rem; } /* Button group — horizontal cluster of related actions. */ :where(.button-group) { display: inline-flex; gap: 0.25rem; } /* --- Bars of buttons (action / menu / tab / task / tool) ---------------- */ :where(.action-bar, .menu-bar, .tab-bar, .task-bar, .tool-bar) { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem; background-color: var(--lily-surface-alt); border: var(--border) solid var(--lily-border); border-radius: var(--lily-radius-md); } /* Children of bars render flush with the bar — transparent background, no border, so the bar's surface acts as the visual frame. */ :where( .action-bar-button, .menu-bar-button, .tab-bar-button, .task-bar-button, .tool-bar-button ) { background-color: transparent; color: var(--lily-text); border-color: transparent; } /* Selected tab — explicit primary colour. */ :where(.tab-bar-button[aria-selected="true"]) { background-color: var(--color-primary); color: var(--color-primary-content); } /* Panel revealed by the active tab. */ :where(.tab-panel) { padding: 1rem; background-color: var(--lily-surface); border: var(--border) solid var(--lily-border); border-radius: var(--lily-radius-md); } /* ========================================================================== * Links, anchors, link-like * -------------------------------------------------------------------------- * Generic `-link` styling — primary-coloured underlined text. The * exclusions (`skip-link`, `back-link`) are styled as buttons above. * ====================================================================== */ :where([class$="-link"]:not(.skip-link):not(.back-link)) { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.15em; } /* Hover — thicker underline for a subtle affordance cue. */ :where([class$="-link"]):hover { text-decoration-thickness: 2px; } /* Visited — secondary token. */ :where([class$="-link"]):visited { color: var(--color-secondary); } /* ========================================================================== * Lists & list items * -------------------------------------------------------------------------- * Lily wraps `
    ` / `