:root { /* The native UI -- scrollbars, form controls, the focus ring, the canvas -- follows the theme as well; without this a dark page keeps light chrome around it. */ color-scheme: light; --chocola-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --chocola-font-size-sm: 0.8125rem; --chocola-font-size-md: 0.9375rem; --chocola-font-size-lg: 1.125rem; --chocola-font-size-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem); --chocola-line-height: 1.45; --chocola-space-1: 0.25rem; --chocola-space-2: 0.5rem; --chocola-space-3: 0.75rem; --chocola-space-4: 1rem; --chocola-space-5: 1.5rem; --chocola-space-6: 2rem; --chocola-radius-sm: 6px; --chocola-radius-md: 12px; --chocola-radius-lg: 18px; --chocola-radius-pill: 999px; /* ===== Motion ===== */ /* Spring easing lifted from the Aqua button reference; used for transforms. */ --chocola-ease-spring: linear(0, 0.21 3.6%, 0.402 7.4%, 0.568 11.3%, 0.711 15.3%, 0.772 17.3%, 0.83 19.4%, 0.882 21.5%, 0.929 23.7%, 0.97 25.9%, 1.008 28.2%, 1.04 30.6%, 1.067 33%, 1.084 34.9%, 1.099 36.9%, 1.111 38.9%, 1.12 41%, 1.127 43.2%, 1.13 45.4%, 1.132 47.7%, 1.13 50.1%, 1.124 54%, 1.111 58.5%, 1.095 62.9%, 1.044 75.5%, 1.03 79.5%, 1.019 83.2%, 1.01 87.3%, 1.004 91.3%, 1.001 95.4%, 1); --chocola-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --chocola-transition-fast: 120ms var(--chocola-ease-out); --chocola-transition: 180ms var(--chocola-ease-out); --chocola-transition-press: 300ms var(--chocola-ease-out); --chocola-transition-spring: 520ms var(--chocola-ease-spring); /* ===== Material: frosted glass ===== */ --chocola-glass-bg: rgba(255, 255, 255, 0.5); --chocola-glass-bg-strong: rgba(255, 255, 255, 0.68); --chocola-glass-bg-subtle: rgba(255, 255, 255, 0.34); --chocola-glass-border: rgba(255, 255, 255, 0.65); --chocola-glass-border-soft: rgba(255, 255, 255, 0.4); --chocola-glass-highlight: rgba(255, 255, 255, 0.9); --chocola-glass-inner-shadow: rgba(0, 0, 0, 0.06); --chocola-glass-shadow: rgba(31, 38, 135, 0.16); --chocola-glass-specular: rgba(255, 255, 255, 0.85); --chocola-glass-tint: rgba(255, 255, 255, 0.14); --chocola-glass-blur: 18px; --chocola-glass-blur-sm: 10px; --chocola-glass-saturate: 175%; --chocola-glass-brightness: 1.05; /* Near-opaque base for surfaces/fills: keeps text legible regardless of what is behind the glass, while the small remaining alpha preserves the frost. */ --chocola-glass-solid: rgba(255, 255, 255, 0.88); --chocola-glass-solid-strong: rgba(255, 255, 255, 0.94); --chocola-glass-fallback-bg: #eef1f8; /* Composite material recipes (kept as tokens so elements never inline values) */ --chocola-glass-fill: linear-gradient(180deg, var(--chocola-glass-solid-strong), var(--chocola-glass-solid)); /* The standard flat surface — identical color + transparency to the form fields. Neutral raised surfaces use this directly (no gloss layer). */ --chocola-glass-surface: var(--chocola-glass-bg-subtle); --chocola-glass-edge: inset 0 1px 0 var(--chocola-aqua-rim), inset 0 -1px 0 var(--chocola-glass-inner-shadow), 0 1px 2px var(--chocola-glass-shadow), 0 10px 30px -12px var(--chocola-glass-shadow); /* Shared gloss (specular + top light) — the same highlight as the buttons. */ --chocola-glass-gloss: radial-gradient(120% 60% at 50% -10%, var(--chocola-aqua-gloss), transparent 62%), linear-gradient(180deg, var(--chocola-aqua-top), var(--chocola-aqua-bottom) 56%, transparent); /* Accent surface recipe. Every accent-colored raised surface (primary buttons, checked controls, avatar, logo, active sidebar item) reuses these so they all match the buttons. */ --chocola-accent-fill: linear-gradient( 180deg, color-mix(in srgb, var(--chocola-color-accent) 30%, var(--chocola-glass-solid-strong)), color-mix(in srgb, var(--chocola-color-accent) 18%, var(--chocola-glass-solid))); --chocola-accent-border: color-mix(in srgb, var(--chocola-color-accent) 42%, var(--chocola-glass-border)); /* Rim + contact shadow with no emitted light, so the shadow never tints the surface behind it. Primary buttons use exactly this. */ --chocola-accent-edge-flat: inset 0 1px 0 var(--chocola-aqua-rim), 0 1px 2px rgba(0, 0, 0, 0.1); /* The flat edge plus the colored glow the rest of the accent family keeps (checked controls, avatar, header logo, active sidebar item). */ --chocola-accent-edge: var(--chocola-accent-edge-flat), 0 8px 20px -10px var(--chocola-aqua-glow); --chocola-glass-filter: blur(var(--chocola-glass-blur)) saturate(var(--chocola-glass-saturate)) brightness(var(--chocola-glass-brightness)); --chocola-glass-filter-sm: blur(var(--chocola-glass-blur-sm)) saturate(var(--chocola-glass-saturate)) brightness(var(--chocola-glass-brightness)); /* Shared interaction recipes — one definition per repeated pattern. */ --chocola-focus-ring: 0 0 0 3px var(--chocola-color-accent-soft); --chocola-field-inset: inset 0 1px 2px var(--chocola-glass-inner-shadow), inset 0 1px 0 var(--chocola-glass-highlight); --chocola-field-focus: inset 0 1px 0 var(--chocola-glass-highlight), 0 0 0 3px var(--chocola-color-accent-soft), 0 6px 18px -8px var(--chocola-aqua-glow); /* Switch knob (the one raised surface that is deliberately not accent-tinted) */ --chocola-switch-thumb: linear-gradient(180deg, #ffffff, #eef1f6); /* ===== Reveal highlight ===== Pointer-proximity light (Windows Fluent "reveal"). Tuned to read like emitted light rather than a colored line: a hot core that desaturates to white, a smooth falloff, a bloom band one pixel wider than the core hugging the lit border, and a faint wash across the surface. The accent color is read live, so it follows theme + accent changes automatically. The core band is deliberately ONE device pixel: two read as a border, not as light. A band that thin cannot own a pixel at every tangent angle -- wherever the edge runs diagonally across the pixel grid its energy splits between two pixels, so on its own the core's brightness beads around a curve. What hides that is the bloom band: it is one pixel wider, so its coverage IS constant, and it sits under the core at a comparable alpha. The lit edge is therefore a 1px core riding a 2px constant halo, and the pair is tuned together -- raising --bloom-opacity smooths the ring further but thickens it, lowering it gives the original thin, faintly beaded line back. --radius: pointer distance (px) at which the light begins --thickness: core ring width (one device pixel on purpose -- the bloom band is what carries the even light; two pixels here read as a 2px border) --spot / -min / -max: glow radius; the helper drives --spot between min (cursor close, tighter/brighter) and max (cursor far) each frame --color: the accent-tinted light; --core: the bright center --wash: faint light spread over the element face (0-1) --strength: caps peak opacity --bloom-*: the wider, dimmer band under the core (--bloom-opacity is the knob that keeps the thin core's coverage even), plus that layer's blur/blend; --blend: how the light composites White surfaces cannot be brightened, so the light theme carries the light in chroma and depth instead of brightness: both stops are the accent itself and nothing is mixed toward white. The core takes the deepest accent, so the ring is strongest nearest the pointer and fades outward -- the mirror of the dark theme, where the core is the whitest stop and the blend is additive. Mixing the light toward white is the specific mistake this guards against: it lands within a couple of dE of the pale accent fill it is drawn over, and of the accent rim that fill already carries, so the light reads as nothing. Measured on an avatar (blue accent): its own 1px ring is dE 23 / 1.42:1 against the fill, the whitened rim was ~dE 45 / ~2.0:1, and the deep rim is ~dE 53 / ~3.2:1 -- inside the band the dark theme's own light measures (dE 61-76). The probe samples an antialiased edge, so it moves a few dE between runs; the ordering does not. Anything that re-pales these stops undoes the light. Intensity is what --chocola-reveal-strength is for (0.72 here): turning it down dims the whole light -- rim and face wash together -- while the stops keep their chroma. Prefer that dial over re-introducing white. */ --chocola-reveal-radius: 240px; --chocola-reveal-thickness: 1px; --chocola-reveal-spot: 120px; --chocola-reveal-spot-min: 90px; --chocola-reveal-spot-max: 170px; --chocola-reveal-color: var(--chocola-color-accent); --chocola-reveal-core: var(--chocola-color-accent-deep); --chocola-reveal-wash: 0.10; --chocola-reveal-strength: 0.72; --chocola-reveal-bloom-thickness: calc(var(--chocola-reveal-thickness) + 1px); --chocola-reveal-bloom-blur: 5px; --chocola-reveal-bloom-opacity: 0.6; --chocola-reveal-blend: normal; /* Quantised copy of the pointer-proximity intensity (8 steps, written by elements/chocola-reveal). Only this one may feed a *transitioned* property (the toggle border cross-fade): the continuous --chocola-reveal-intensity changes every pointer frame and would retarget that transition forever. */ --chocola-reveal-step: 0; /* ===== Aqua gel ===== */ --chocola-aqua-top: rgba(255, 255, 255, 0.72); --chocola-aqua-bottom: rgba(255, 255, 255, 0.06); --chocola-aqua-gloss: rgba(255, 255, 255, 0.55); --chocola-aqua-rim: rgba(255, 255, 255, 0.82); --chocola-aqua-glow: color-mix(in srgb, var(--chocola-color-accent) 45%, transparent); --chocola-aqua-rim-dark: rgba(0, 0, 0, 0.14); /* Accent-derived tokens (resolve against the active --chocola-color-accent) */ --chocola-color-accent-2: color-mix(in srgb, var(--chocola-color-accent) 58%, #7ad0ff); --chocola-color-accent-deep: color-mix(in srgb, var(--chocola-color-accent) 74%, black); --chocola-color-accent-glow: color-mix(in srgb, var(--chocola-color-accent) 50%, transparent); /* Ink tokens: legible on the tinted-glass accent surfaces in every theme/accent. Light mixes the accent toward near-black; dark overrides mix toward white. */ --chocola-color-accent-ink: color-mix(in srgb, var(--chocola-color-accent) 62%, #1c1c1e); --chocola-color-danger-ink: color-mix(in srgb, var(--chocola-color-danger) 62%, #1c1c1e); --chocola-color-success-ink: color-mix(in srgb, var(--chocola-color-success) 55%, #1c1c1e); --chocola-color-warning-ink: color-mix(in srgb, var(--chocola-color-warning) 55%, #1c1c1e); --chocola-color-info-ink: color-mix(in srgb, var(--chocola-color-info) 55%, #1c1c1e); --chocola-color-placeholder: #4b4b52; /* The search bar's hint is a shade lighter than a form field's, and still under --chocola-color-label, so it reads as a hint and never as content. */ --chocola-color-placeholder-search: #8b8b91; /* The pill a search bar is drawn in. It is a surface of its own on purpose: the bar wears no stroke and no carved inside -- those belong to the focus state -- so the fill is the one thing delimiting it, and the panel it sits on is --chocola-glass-surface, which a second translucent layer only nudges. The light theme takes a wash of grey, and a faint one: the panel there is a white veil over the wallpaper, so a step the dark theme swallows whole (see below) is what turns into a grey slab here. Half of what the dark theme needs, and no more. */ --chocola-color-surface-search: rgba(118, 118, 128, 0.08); /* The stroke the pill wears at rest -- the same grey as its fill, one step further, so the outline reads as the bar's own edge instead of as a form field's border. */ --chocola-color-border-search: rgba(118, 118, 128, 0.22); /* The stroke a form field wears at rest. Its own token for the same reason the pill above has one, and the opposite sign: the pill takes the *weaker* step, so its outline reads as the bar's own edge, while a form field takes the strongest neutral step the theme can carry -- on a form field the stroke is not a detail of the material, it is the cue that says "this is a field". Measured in the browser (headless Chromium, one card over the flat background): a field on the light theme rendered a #f5f6f8 stroke against a #f9f9fc interior and a #f6f6fa card -- 1.03:1 both ways, i.e. the fill and the shared hairline (rgba(255,255,255,.65), a white veil) are white on white and the field reads as empty space. The dark theme's fill is just as flat (1.01:1) and still works, because its hairline is white-on-dark: #444546 over that card, 1.77:1. This grey step renders #c4c5ca -- 1.64:1 against the interior, 1.60:1 against the card: the dark theme's own edge, read the other way round. The fill is deliberately NOT part of this token: it stays --chocola-glass-bg-subtle, so the field keeps the material of the card it sits on and only the edge answers. Neutral grey, not an accent tint: a rim carrying the accent would sit a few dE from the accent border that answers focus, and would have to be re-tuned for each of the eight accents. Greys do not. */ --chocola-color-border-field: rgba(118, 118, 128, 0.42); --chocola-color-label: #5b5b61; --chocola-divider-color: rgba(0, 0, 0, 0.16); /* Elevation, re-expressed as glass-friendly layered shadows */ --chocola-shadow-sm: 0 1px 2px var(--chocola-glass-shadow); --chocola-shadow-md: 0 2px 10px -2px var(--chocola-glass-shadow), 0 1px 2px rgba(0, 0, 0, 0.05); --chocola-shadow-lg: 0 18px 45px -18px var(--chocola-glass-shadow), 0 4px 14px -6px rgba(0, 0, 0, 0.12); --chocola-shadow-glow: 0 0 0 1px var(--chocola-glass-border-soft), 0 8px 26px -6px var(--chocola-aqua-glow); --chocola-shadow-inset: inset 0 1px 0 var(--chocola-glass-highlight), inset 0 -1px 0 var(--chocola-glass-inner-shadow); /* ===== Aqua scrollbars ===== */ --chocola-scrollbar-size: 14px; --chocola-scrollbar-track: linear-gradient(to right, #eef2f8, #ffffff); --chocola-scrollbar-track-border: #cfd6e2; --chocola-scrollbar-thumb: linear-gradient(to right, var(--chocola-color-accent) 10%, rgba(255, 255, 255, 0.28) 20%, var(--chocola-color-accent) 30%, var(--chocola-color-accent-2)); --chocola-scrollbar-thumb-border: color-mix(in srgb, var(--chocola-color-accent) 55%, #ffffff); --chocola-scrollbar-thumb-inactive: linear-gradient(to right, #dbe1ec 10%, #ffffff 20%, #e4e9f2 30%, #f4f6fa); /* ===== Wallpaper ===== */ --chocola-wallpaper-base: linear-gradient(160deg, #f4f6fb 0%, #f6f4fb 45%, #f2f8fb 100%); --chocola-wallpaper-blob-1: color-mix(in srgb, var(--chocola-color-accent) 24%, #eef2f8); --chocola-wallpaper-blob-2: color-mix(in srgb, var(--chocola-color-accent) 20%, #eef6fa); --chocola-wallpaper-blob-3: color-mix(in srgb, var(--chocola-color-accent) 22%, #f1eef8); --chocola-wallpaper-opacity: 0.55; --chocola-wallpaper-wash: rgba(255, 255, 255, 0.32); --chocola-wallpaper-vignette: radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(255, 255, 255, 0.35)); /* ===== Wallpaper: the "waves" variant ===== The layered backdrop behind the login screen (variant="waves" on the element). It is a mostly-white wall: the crests are the reference's layers lifted and desaturated into steel and pale greys, over a near-white base, with a bright diagonal band instead of a lit one. The accent still enters through color-mix in every layer, so switching accent re-tints the backdrop with no JavaScript -- just at a much lower dose than the default blob gradient, which is what keeps the wall white. These tokens are the only colors this variant carries; the rules in styles/chocola-elements.css only layer them. */ --chocola-wallpaper-waves-base: linear-gradient(205deg, #fdfeff 0%, #f4f7fb 32%, #eaeff5 64%, #ffffff 100%); --chocola-wallpaper-waves-1: color-mix(in srgb, var(--chocola-color-accent) 10%, #b9c9dc); --chocola-wallpaper-waves-2: color-mix(in srgb, var(--chocola-color-accent) 8%, #cfdae7); --chocola-wallpaper-waves-3: color-mix(in srgb, var(--chocola-color-accent) 5%, #eaf0f6); --chocola-wallpaper-waves-glow: rgba(255, 255, 255, 0.65); --chocola-wallpaper-waves-opacity: 1; --chocola-wallpaper-waves-wash: rgba(255, 255, 255, 0.22); --chocola-wallpaper-waves-vignette: radial-gradient(120% 120% at 50% 0%, transparent 62%, rgba(96, 112, 138, 0.12)); /* Layout: the width breakpoints are 48rem and 64rem. Mobile mode is the 48rem breakpoint OR a no-hover coarse pointer (chocola.js MOBILE_QUERY); media queries cannot read custom properties, so the literal is repeated in styles/chocola-elements.css, while chocola-reveal/chocola-sidebar consume Chocola.mobile. */ --chocola-header-height: 56px; --chocola-header-offset: calc(var(--chocola-header-height) + env(safe-area-inset-top, 0px)); --chocola-touch-target: 44px; --chocola-color-bg: #f2f2f7; --chocola-color-surface: #ffffff; --chocola-color-surface-raised: #fbfbfd; --chocola-color-text: #1c1c1e; --chocola-color-text-muted: #55555b; --chocola-color-border: #d1d1d6; --chocola-color-accent: #007aff; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(0, 122, 255, 0.12); --chocola-color-danger: #ff3b30; --chocola-color-danger-soft: rgba(255, 59, 48, 0.12); --chocola-color-success: #34c759; --chocola-color-success-soft: rgba(52, 199, 89, 0.12); --chocola-color-warning: #ff9500; --chocola-color-warning-soft: rgba(255, 149, 0, 0.14); --chocola-color-info: #5ac8fa; --chocola-color-info-soft: rgba(90, 200, 250, 0.14); --chocola-color-neutral-soft: rgba(0, 0, 0, 0.05); /* ===== Overlay scrim ===== */ /* Theme-aware wash painted behind the mobile drawer (and any other modal overlay). Light themes frost the page white, dark themes dim it; the scrim itself is never theme-agnostic. */ --chocola-overlay-scrim: rgba(255, 255, 255, 0.55); } /* ===== Glass cost switch ===== Backdrop blur is the most expensive thing this system draws: every blurred element is its own backdrop capture + blur pass, re-executed on every repaint, and the fixed header/sidebar re-blur a backdrop that changes on every scroll frame. Measured in Firefox on a kitchen-sink page with the previous default (~32 blurred elements): 209-557 draw calls per frame, constant 210% overdraw, ~50 pooled render surfaces, ~300ms/s of renderer-thread CPU — scroll payloads reached the screen 2-4 frames late. See elements/README.md for the numbers and the profiling recipe. Set on (the switch is engine-agnostic on purpose — there is no clean CSS way to detect "this engine composites backdrop blur slowly", and UA sniffing is deliberately not used): (unset) "fixed" — blur only the surfaces over content that actually moves beneath them (fixed header, sidebar rail/drawer, user-menu popover, drawer backdrop); in-flow surfaces keep their tinted recipe. "full" the previous material: every surface blurs (~30 extra render tasks per frame on a kitchen-sink page). "lean" blur-only chain at a smaller radius, no saturate/brightness. "off" no backdrop-filter at all; tinted surfaces only. A second, independent switch: data-chocola-refraction="on" opts into the SVG edge refraction (see styles/chocola-elements.css). It is OFF by default because WebKit parses a backdrop-filter chain containing url() and then silently drops the whole filter at paint time (bugs.webkit.org 245510, still open), which wiped out the blur on Safari for as long as the refraction was on by default. Wrapped in the no-preference query so an explicit switch can never re-enable blur for a user whose platform asks for reduced transparency. */ @media (prefers-reduced-transparency: no-preference) { html[data-chocola-glass="off"] { --chocola-glass-filter: none; --chocola-glass-filter-sm: none; } html[data-chocola-glass="lean"] { --chocola-glass-blur: 10px; --chocola-glass-blur-sm: 8px; --chocola-glass-filter: blur(var(--chocola-glass-blur)); --chocola-glass-filter-sm: blur(var(--chocola-glass-blur-sm)); } } html[data-theme="dark"] { color-scheme: dark; --chocola-color-bg: #15171f; --chocola-color-surface: #1c1c1e; --chocola-color-surface-raised: #2c2c2e; --chocola-color-text: #f2f2f7; --chocola-color-text-muted: #b2b2b8; --chocola-color-placeholder: #b8b8be; --chocola-color-placeholder-search: #c4c4ca; /* The same pill read the other way: a dark panel swallows a faint wash, so the step that reads on it is the one that would be a slab on the light theme's white veil. */ --chocola-color-surface-search: rgba(255, 255, 255, 0.1); --chocola-color-border-search: rgba(255, 255, 255, 0.16); /* Re-declared, not inherited: this is the shared hairline's dark value (see below) and the field already reads by it -- 1.77:1 against its own card. The light theme's grey step has no business here, where a grey stroke would disappear into the surface. */ --chocola-color-border-field: rgba(255, 255, 255, 0.18); --chocola-color-label: #c9c9cf; --chocola-divider-color: rgba(255, 255, 255, 0.2); --chocola-color-border: #3a3a3c; --chocola-color-accent-soft: rgba(10, 132, 255, 0.22); --chocola-color-danger-soft: rgba(255, 69, 58, 0.2); --chocola-color-success-soft: rgba(48, 209, 88, 0.2); --chocola-color-warning-soft: rgba(255, 159, 10, 0.22); --chocola-color-info-soft: rgba(100, 210, 255, 0.22); --chocola-color-neutral-soft: rgba(255, 255, 255, 0.08); /* Accent fills keep their exact gradient/hue; only their alpha matches the form-field surface so every raised surface shares one transparency. */ --chocola-glass-solid: rgba(28, 28, 30, 0.7); --chocola-glass-solid-strong: rgba(44, 44, 46, 0.7); --chocola-glass-bg: rgba(28, 28, 30, 0.72); --chocola-glass-bg-strong: rgba(44, 44, 46, 0.82); --chocola-glass-bg-subtle: rgba(28, 28, 30, 0.7); --chocola-glass-border: rgba(255, 255, 255, 0.18); --chocola-glass-border-soft: rgba(255, 255, 255, 0.1); --chocola-glass-highlight: rgba(255, 255, 255, 0.14); --chocola-glass-inner-shadow: rgba(0, 0, 0, 0.5); --chocola-glass-shadow: rgba(0, 0, 0, 0.55); --chocola-glass-specular: rgba(255, 255, 255, 0.3); --chocola-glass-tint: rgba(255, 255, 255, 0.06); --chocola-glass-brightness: 1.12; --chocola-glass-fallback-bg: #16171c; /* Dark ink: lighten the accent well past the tinted fill for legibility. */ --chocola-color-accent-ink: color-mix(in srgb, var(--chocola-color-accent) 42%, #ffffff); --chocola-color-danger-ink: color-mix(in srgb, var(--chocola-color-danger) 45%, #ffffff); --chocola-color-success-ink: color-mix(in srgb, var(--chocola-color-success) 48%, #ffffff); --chocola-color-warning-ink: color-mix(in srgb, var(--chocola-color-warning) 52%, #ffffff); --chocola-color-info-ink: color-mix(in srgb, var(--chocola-color-info) 48%, #ffffff); --chocola-aqua-top: rgba(255, 255, 255, 0.18); --chocola-aqua-bottom: rgba(255, 255, 255, 0.02); --chocola-aqua-gloss: rgba(255, 255, 255, 0.15); --chocola-aqua-rim: rgba(255, 255, 255, 0.28); --chocola-aqua-rim-dark: rgba(0, 0, 0, 0.5); /* Dark theme keeps the pure accent (already luminous on dark surfaces) and switches the light to additive blending + a whiter core, since emitted light adds to the dark surface rather than replacing it. */ --chocola-reveal-color: var(--chocola-color-accent); --chocola-reveal-core: color-mix(in srgb, var(--chocola-reveal-color) 45%, #ffffff); --chocola-reveal-wash: 0.10; --chocola-reveal-strength: 0.75; --chocola-reveal-bloom-opacity: 0.65; --chocola-reveal-blend: plus-lighter; --chocola-switch-thumb: linear-gradient(180deg, #f7f7fa, #d6d8de); --chocola-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --chocola-shadow-md: 0 2px 10px -2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3); --chocola-shadow-lg: 0 18px 45px -18px rgba(0, 0, 0, 0.75), 0 4px 14px -6px rgba(0, 0, 0, 0.4); --chocola-scrollbar-track: linear-gradient(to right, #1b1d23, #26282f); --chocola-scrollbar-track-border: #3a3d45; --chocola-scrollbar-thumb-inactive: linear-gradient(to right, #3a3d45 10%, #4a4d55 20%, #33363d 30%, #43464e); --chocola-wallpaper-base: linear-gradient(160deg, #161a2b 0%, #1a1630 45%, #131c26 100%); --chocola-wallpaper-blob-1: color-mix(in srgb, var(--chocola-color-accent) 20%, #1c2130); --chocola-wallpaper-blob-2: color-mix(in srgb, var(--chocola-color-accent) 18%, #1a2230); --chocola-wallpaper-blob-3: color-mix(in srgb, var(--chocola-color-accent) 18%, #211b33); --chocola-wallpaper-opacity: 1; --chocola-wallpaper-wash: rgba(0, 0, 0, 0.2); --chocola-wallpaper-vignette: radial-gradient(120% 120% at 50% 0%, transparent 45%, rgba(0, 0, 0, 0.4)); /* The waves variant is declared WHOLE here too: editing only the light block (the temptation, because the reference is light) would leak the light palette into the dark theme, which carries the same tokens at deeper tones. */ --chocola-wallpaper-waves-base: linear-gradient(205deg, #14161b 0%, #1c2128 34%, #272e39 66%, #363d49 100%); --chocola-wallpaper-waves-1: color-mix(in srgb, var(--chocola-color-accent) 8%, #2e3542); --chocola-wallpaper-waves-2: color-mix(in srgb, var(--chocola-color-accent) 7%, #3c4452); --chocola-wallpaper-waves-3: color-mix(in srgb, var(--chocola-color-accent) 5%, #4d5665); --chocola-wallpaper-waves-glow: rgba(255, 255, 255, 0.16); --chocola-wallpaper-waves-opacity: 1; --chocola-wallpaper-waves-wash: rgba(0, 0, 0, 0.22); --chocola-wallpaper-waves-vignette: radial-gradient(120% 120% at 50% 0%, transparent 52%, rgba(0, 0, 0, 0.45)); --chocola-overlay-scrim: rgba(0, 0, 0, 0.35); } html[data-accent="blue"] { --chocola-color-accent: #007aff; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(0, 122, 255, 0.12); } html[data-accent="red"] { --chocola-color-accent: #ff3b30; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(255, 59, 48, 0.12); } html[data-accent="orange"] { --chocola-color-accent: #ff9500; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(255, 149, 0, 0.14); } html[data-accent="yellow"] { --chocola-color-accent: #ffcc00; --chocola-color-accent-text: #1c1c1e; --chocola-color-accent-soft: rgba(255, 204, 0, 0.18); } html[data-accent="green"] { --chocola-color-accent: #34c759; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(52, 199, 89, 0.12); } html[data-accent="purple"] { --chocola-color-accent: #af52de; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(175, 82, 222, 0.14); } html[data-accent="pink"] { --chocola-color-accent: #ff2d92; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(255, 45, 146, 0.14); } html[data-accent="graphite"] { --chocola-color-accent: #4a4a4f; --chocola-color-accent-text: #ffffff; --chocola-color-accent-soft: rgba(74, 74, 79, 0.16); } html[data-theme="dark"][data-accent="blue"] { --chocola-color-accent: #0a84ff; --chocola-color-accent-soft: rgba(10, 132, 255, 0.22); } html[data-theme="dark"][data-accent="red"] { --chocola-color-accent: #ff453a; --chocola-color-accent-soft: rgba(255, 69, 58, 0.2); } html[data-theme="dark"][data-accent="orange"] { --chocola-color-accent: #ff9f0a; --chocola-color-accent-soft: rgba(255, 159, 10, 0.22); } html[data-theme="dark"][data-accent="yellow"] { --chocola-color-accent: #ffd60a; --chocola-color-accent-text: #1c1c1e; --chocola-color-accent-soft: rgba(255, 214, 10, 0.22); } html[data-theme="dark"][data-accent="green"] { --chocola-color-accent: #30d158; --chocola-color-accent-soft: rgba(48, 209, 88, 0.2); } html[data-theme="dark"][data-accent="purple"] { --chocola-color-accent: #bf5af2; --chocola-color-accent-soft: rgba(191, 90, 242, 0.22); } html[data-theme="dark"][data-accent="pink"] { --chocola-color-accent: #ff375f; --chocola-color-accent-soft: rgba(255, 55, 95, 0.22); } html[data-theme="dark"][data-accent="graphite"] { --chocola-color-accent: #8e8e93; --chocola-color-accent-text: #1c1c1e; --chocola-color-accent-soft: rgba(142, 142, 147, 0.22); } html, body { margin: 0; padding: 0; font-family: var(--chocola-font-sans); font-size: var(--chocola-font-size-md); line-height: var(--chocola-line-height); background: var(--chocola-color-bg); color: var(--chocola-color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--chocola-transition), color var(--chocola-transition); } /* When a is present, let it show through the body. keeps the opaque base color so the wallpaper always composites over a dark canvas (never the browser's default), which is what makes the dark background actually read as dark. */ html.chocola-has-wallpaper body { background: transparent; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--chocola-color-accent); text-decoration: none; } /* Hover affordances must not fire from a touch: on a touch device a tap leaves the hover state stuck until the next tap lands somewhere else. */ @media (hover: hover) { a:hover { text-decoration: underline; } } input, button, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* ===== Tap feedback ===== The platform tap highlight is a translucent box painted over whatever is tapped -- the blue box the mobile report called out, and unusually visible through these translucent glass surfaces. The library answers a tap with its own press states instead (Chocola.press, [data-chocola-pressed]); a host element opts in with data-chocola-pressable. The property is inherited, so reaches every element including host markup; a host that wants the platform flash back can re-declare it on its own elements. */ html { -webkit-tap-highlight-color: transparent; } /* Aqua scrollbars (WebKit) + token-driven fallback (Firefox via scrollbar-color). */ html { scrollbar-color: var(--chocola-color-accent) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: var(--chocola-scrollbar-size); height: var(--chocola-scrollbar-size); background: transparent; } ::-webkit-scrollbar-track { background: var(--chocola-scrollbar-track); border-radius: var(--chocola-radius-pill); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.18); } ::-webkit-scrollbar-thumb { background: var(--chocola-scrollbar-thumb); border: 1px solid var(--chocola-scrollbar-thumb-border); border-radius: var(--chocola-radius-pill); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.28); min-height: 32px; } ::-webkit-scrollbar-thumb:active { box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-corner { background: transparent; } /* Opaque fallback when the platform asks for less transparency. */ @media (prefers-reduced-transparency: reduce) { :root { --chocola-glass-solid: var(--chocola-glass-fallback-bg); --chocola-glass-solid-strong: var(--chocola-glass-fallback-bg); --chocola-glass-bg: var(--chocola-glass-fallback-bg); --chocola-glass-bg-strong: var(--chocola-glass-fallback-bg); --chocola-glass-bg-subtle: var(--chocola-glass-fallback-bg); --chocola-glass-blur: 0px; --chocola-glass-blur-sm: 0px; --chocola-glass-filter: none; --chocola-glass-filter-sm: none; --chocola-glass-fill: var(--chocola-glass-fallback-bg); --chocola-wallpaper-opacity: 0.4; /* Each variant owns its opacity, so flattening the backdrop for a user who asked for less transparency has to reach both. */ --chocola-wallpaper-waves-opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { :root { --chocola-transition: 0ms; --chocola-transition-fast: 0ms; --chocola-transition-press: 0ms; --chocola-transition-spring: 0ms; } }