/* * Site styles. There is no build step: this file is served exactly as written, * so everything the site needs is here or in the site's own additions below. * * COLOUR, TYPE AND SPACE ARE DIALS (#426). The first section is Dials * (github.com/joops/dials), copied verbatim between its begin and end * markers. It works out every colour, text size, space size and * corner from a few values called dials. This site sets its own dials in ONE * short block straight after the section, "This site's dials", and that block * is the only place in the file where a colour or a scale value is typed. * * - Change the look by changing a dial: --brand for the brand colour, * --size-min/--size-max and --ratio-min/--ratio-max for the type scale, * --leading-body for line height, --space-min/--space-max and * --space-density for spacing, --radius-base for corners, * --font-body/--font-heading for faces. * - Everything else reads a token: --surface*, --text*, --border*, --link, * --focus, --solid/--on-solid/--soft/--on-soft/--line (and the named * groups --brand-*, --secondary-*, --tertiary-*, --success-* ...), --size-*, * --leading, --space-*, --radius-*, --border-width-*. Never a hex, rgb(), * hsl() or named colour, never a px/rem length, and never a typed line * height, anywhere else. Weights and letter spacing are the site's own: * a weight is a unitless number, letter spacing is in em. * - The rules are in refs/design/DESIGN.md ("Dials"). Every dial, token * and class is listed in the reference for the version in the section's * first line: github.com/joops/dials/blob/v0.4.1/docs/tokens.md. A * gradient, a wash or a quiet coloured border is a pattern built from * tokens (that reference, "Patterns"), never a token of its own. * check-system.sh holds the section to _template's copy word for word, * and fails a raw colour outside the dials block. */ /* ═══ Dials ═══ dials:begin ═════════════════════════════════════════════ * Dials v0.4.2, VERBATIM. Never edit anything between this marker and the * end marker: check-system.sh fails the site if its copy differs from * _template's by a word. Each marker appears once; never write either in * prose. Set dials in "This site's dials" below; an upgrade * of Dials is a template change plus a migration of every site. * ═══════════════════════════════════════════════════════════════════════ */ /*! Dials v0.4.2 | MIT | https://github.com/joops/dials */ /* Dials: an AI-first CSS framework. This file is dials-colour.css, then dials-scale.css, then the fallback for older browsers; dials-base.css is optional. Its defaults are the Default theme: the device's own faces, nothing to load. The Dials house theme is themes/dials.css. */ /* ============================================================ Dials: colour (dials-colour.css) Dials: seven colours and a few numbers, the only typed values. Derived: surfaces, text, lines and groups, worked out live with color-mix() and relative colour, in light and dark. Groups: .is-{group} points the ungrouped tokens at a group. Dials live on :root (and :host); the derived chain is declared on :root, [data-dials] and :host, so setting a dial on any [data-dials] element re-derives every token inside it. Needs color-mix(), light-dark() and relative colour. Don't register these with @property: they must resolve where they're used, which is what makes .is-dark bands work. ============================================================ */ :root, :host { /* ---- Colour dials: any CSS colour, preferably HSL ---- */ --brand: hsl(221 83% 53%); /* the main colour: links, focus, primary buttons */ --secondary: hsl(262 52% 55%); /* a second colour: highlights and secondary actions (was --accent) */ --success: hsl(142 64% 38%); /* status: done, saved, live */ --warning: hsl(38 92% 50%); /* status: check this */ --danger: hsl(0 72% 51%); /* status: errors and destructive actions */ --info: hsl(199 89% 42%); /* status: neutral news */ --grey: hsl(220 9% 50%); /* the hue and strength of the tint in paper and ink */ /* ---- Number dials ---- */ --balance: 0; /* 1: every fill at --fill-lightness, so they carry equal weight. 0: exactly as set */ --fill-lightness: 0.52; /* the shared OKLCH lightness used when --balance is 1 */ --dark-lift: 0.06; /* how much lighter the fills are in dark */ --tint-strength: 10%; /* how much colour goes into a soft tint */ --tint-vividness: 1; /* 1-3: how saturated soft tints are, for crisper pastels */ --text-contrast: 0; /* 0-30: strengthens body, muted and quiet text and strong borders, for paper and ink that sit close together */ --white-text-until: 0.179; /* fills below this luminance get white text, above it black. 0.179 gives each fill whichever contrasts more; held between 0.175 and 0.18333, where both still give 4.5:1: black needs (L + 0.05) / 0.05 >= 4.5, so L >= 0.175; white needs 1.05 / (L + 0.05) >= 4.5, so L <= 1.05 / 4.5 - 0.05 = 0.18333 */ /* ---- Paper and ink: near-white and near-black, tinted by --grey at these OKLCH lightnesses. To use exact colours instead, set --paper-light, --paper-dark, --ink-light and/or --ink-dark (unset by default) to any colour. ---- */ --paper-lightness: 0.985; /* page background in light */ --paper-dark-lightness: 0.17; /* page background in dark */ --ink-lightness: 0.2; /* strongest text in light */ --ink-dark-lightness: 0.95; /* strongest text in dark */ } /* Follow the visitor's light or dark setting. To force one, set :root { color-scheme: light; } (or dark) after dials.css. */ :root { color-scheme: light dark; } :root, [data-dials], :host { /* ---- Internal: paper, ink and the six fills, worked out from the dials ---- */ --dl-paper-light: var(--paper-light, oklab(from var(--grey) var(--paper-lightness) calc(a * 0.12) calc(b * 0.12))); --dl-paper-dark: var(--paper-dark, oklab(from var(--grey) var(--paper-dark-lightness) calc(a * 0.15) calc(b * 0.15))); --dl-ink-light: var(--ink-light, oklab(from var(--grey) var(--ink-lightness) calc(a * 0.25) calc(b * 0.25))); --dl-ink-dark: var(--ink-dark, oklab(from var(--grey) var(--ink-dark-lightness) calc(a * 0.12) calc(b * 0.12))); --dl-paper: light-dark(var(--dl-paper-light), var(--dl-paper-dark)); --dl-ink: light-dark(var(--dl-ink-light), var(--dl-ink-dark)); --dl-paper-grey: oklab(from var(--dl-paper) l 0 0); /* paper without its tint: soft tints mix into this, so they keep their own hue */ --dl-secondary-dial: var(--accent, var(--secondary)); /* --accent is --secondary's old name: while a site still sets it, it wins */ --dl-brand-base: oklab(from var(--brand) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --dl-secondary-base: oklab(from var(--dl-secondary-dial) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --dl-success-base: oklab(from var(--success) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --dl-warning-base: oklab(from var(--warning) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --dl-danger-base: oklab(from var(--danger) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --dl-info-base: oklab(from var(--info) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --dl-brand: light-dark(var(--dl-brand-base), oklab(from var(--dl-brand-base) calc(l + var(--dark-lift)) a b)); --dl-secondary: light-dark(var(--dl-secondary-base), oklab(from var(--dl-secondary-base) calc(l + var(--dark-lift)) a b)); --dl-success: light-dark(var(--dl-success-base), oklab(from var(--dl-success-base) calc(l + var(--dark-lift)) a b)); --dl-warning: light-dark(var(--dl-warning-base), oklab(from var(--dl-warning-base) calc(l + var(--dark-lift)) a b)); --dl-danger: light-dark(var(--dl-danger-base), oklab(from var(--dl-danger-base) calc(l + var(--dark-lift)) a b)); --dl-info: light-dark(var(--dl-info-base), oklab(from var(--dl-info-base) calc(l + var(--dark-lift)) a b)); /* ---- Surfaces ---- */ --surface: var(--dl-paper); /* the page background */ --surface-raised: oklab(from var(--dl-paper) calc(l + 0.03) calc(a * 0.5) calc(b * 0.5)); /* cards, fields, popovers */ --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper)); /* wells, table headers, quiet panels */ --surface-sunken: color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper)); /* code, inset areas, disabled fills */ --surface-overlay: color-mix(in oklab, black 45%, transparent); /* the scrim behind a dialog */ /* ---- Text ---- */ --text-strong: var(--dl-ink); /* headings, labels, emphasis */ --text: color-mix(in oklab, var(--dl-ink) calc(86% + var(--text-contrast) * 0.4%), var(--dl-paper)); /* body text */ --text-muted: color-mix(in oklab, var(--dl-ink) calc(70% + var(--text-contrast) * 1%), var(--dl-paper)); /* secondary text */ --text-quiet: color-mix(in oklab, var(--dl-ink) calc(64% + var(--text-contrast) * 1.2%), var(--dl-paper)); /* captions, dates, placeholders */ --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper)); /* disabled controls: exempt from contrast rules */ --link: var(--brand-on-soft); /* links: 4.5:1 on every surface */ --link-hover: light-dark(color(from var(--dl-brand-hover) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-hover) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); /* links on hover: a step stronger (the link 0.08 darker in OKLCH lightness in light, lighter in dark), and on to 7:1 if that's short */ /* ---- Lines and effects ---- */ --border-quiet: color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper)); /* dividers that should barely show */ --border: color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper)); /* card and table borders: decorative */ --border-strong: color-mix(in oklab, var(--dl-ink) calc(46% + var(--text-contrast) * 1%), var(--dl-paper)); /* field and control borders: 3:1 on surfaces */ --focus: var(--brand-on-soft); /* the focus ring: opaque, 4.5:1 on surfaces */ --selection: color-mix(in oklab, var(--dl-brand) 22%, var(--dl-paper)); /* selected text background */ --shadow-color: light-dark(color-mix(in oklab, black 10%, transparent), color-mix(in oklab, black 45%, transparent)); /* the colour of shadows */ --shadow-s: 0 1px 3px var(--shadow-color); /* a slight lift: buttons, chips */ --shadow-m: 0 4px 14px var(--shadow-color); /* cards */ --shadow-l: 0 12px 32px var(--shadow-color); /* popovers, menus, dialogs */ /* ---- Hover and pressed: the second half of a color-mix(), from Web Awesome. Use as color-mix(in oklch, var(--solid), var(--mix-hover)). The text colour's lightness is flipped in OKLab, keeping its a and b: grey text has no hue a browser will read back (Chrome 157 reads it as none, which paints pink), so this reads none. ---- */ --mix-hover: oklab(from currentColor calc(1 - l) a b) 12%; /* hover: away from the text colour */ --mix-active: oklab(from currentColor calc(1 - l) a b) 22%; /* pressed: further still */ /* ---- Groups: brand, secondary, neutral, success, warning, danger, info. Five roles each: solid a solid fill on-solid text on it: white or black, whichever contrasts more (its sRGB luminance, as painted, vs --white-text-until) soft a tinted background: the colour, held at L 0.7 or lighter in light (0.6 or darker in dark), mixed in OKLab into paper with its own tint taken out, so a blue soft stays blue on cream paper. Its vividness scales the mix's a and b, never its chroma and hue: a tint is too pale to carry a hue a browser will read back (Chrome 157 reads it as none, which paints pink), so no colour here reads a hue from a mix or from paper on-soft text on soft, and coloured text on the page: the fill, moved only as far as 4.5:1 needs line borders, icons and large text (24px, or 18.66px bold, and up): the dial, moved only as far as 3:1 needs Coloured text and lines follow one rule: keep the colour, and move it only as far as its contrast target needs, on the least contrasting background it sits on: its own soft tint, --surface-lowered or --surface-raised (--surface always lies between them). Only its linear-light RGB is scaled, which keeps the channels' ratios, so hue and saturation stay (in dark, until a channel reaches 1). --link-hover is the same rule at 7:1, starting from the link a step stronger. Y the colour's luminance, 0.2126 r + 0.7152 g + 0.0722 b in linear sRGB (clipped to sRGB first) Yb that background's luminance, as painted (clipped to sRGB) T the target, plus 0.1 headroom so painting in 8 bits can't round it under the line light: Yt = (Yb + 0.05) / (T + 0.1) - 0.05; scale r, g and b by min(1, Yt / Y) dark: Yt = (T + 0.1) * (Yb + 0.05) - 0.05; scale r, g and b by max(1, Yt / Y), each capped at 1; if a capped channel leaves it short, mix towards white only as far as Yt needs: by (Yt - Y1) / (1 - Y1), where Y1 is the luminance after scaling A colour that already passes keeps its exact value. CSS works out a relative colour from one colour's channels only, so the steps carry their numbers in colours: --dl-surfaces-y the luminance of --surface-lowered in green, of --surface-raised in blue --dl-{group}-under plus the soft tint's in red, mixed 50/50: Yb is min(2r, 4g, 4b) in light, max in dark --dl-{group}-text, the colour, mixed 50/50 with a black whose alpha is s Yt, where s is 3 in --dl-{group}-line, light (Yt is at most 0.29 there) and 1 in dark: scaling it up means Firefox --dl-brand-hover rounding a mix's alpha to three decimals costs a third as much. Mixing premultiplies, so the mix has alpha a = (1 + s Yt) / 2 and channels c / 2a: the colour's channels are r * 2a, and Yt is (2a - 1) / s on-soft, line, hover unpack both and scale, as above ---- */ --dl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)))); --dl-brand-under: color-mix(in srgb-linear, color(from var(--brand-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-brand-text: color-mix(in srgb-linear, color(from var(--dl-brand-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-brand-line: color-mix(in srgb-linear, color(from var(--brand) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --brand-solid: var(--dl-brand); --brand-on-solid: color(from var(--dl-brand) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --brand-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-brand) max(l, 0.7) a b), oklab(from var(--dl-brand) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --brand-on-soft: light-dark(color(from var(--dl-brand-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --brand-line: light-dark(color(from var(--dl-brand-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-secondary-under: color-mix(in srgb-linear, color(from var(--secondary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-secondary-text: color-mix(in srgb-linear, color(from var(--dl-secondary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-secondary-line: color-mix(in srgb-linear, color(from var(--dl-secondary-dial) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --secondary-solid: var(--dl-secondary); --secondary-on-solid: color(from var(--dl-secondary) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --secondary-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-secondary) max(l, 0.7) a b), oklab(from var(--dl-secondary) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --secondary-on-soft: light-dark(color(from var(--dl-secondary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --secondary-line: light-dark(color(from var(--dl-secondary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --neutral-solid: var(--dl-ink); --neutral-on-solid: var(--dl-paper); --neutral-soft: var(--surface-lowered); --neutral-on-soft: var(--text); --neutral-line: var(--border); --dl-success-under: color-mix(in srgb-linear, color(from var(--success-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-success-text: color-mix(in srgb-linear, color(from var(--dl-success-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-success-line: color-mix(in srgb-linear, color(from var(--success) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --success-solid: var(--dl-success); --success-on-solid: color(from var(--dl-success) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --success-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-success) max(l, 0.7) a b), oklab(from var(--dl-success) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --success-on-soft: light-dark(color(from var(--dl-success-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --success-line: light-dark(color(from var(--dl-success-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-warning-under: color-mix(in srgb-linear, color(from var(--warning-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-warning-text: color-mix(in srgb-linear, color(from var(--dl-warning-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-warning-line: color-mix(in srgb-linear, color(from var(--warning) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --warning-solid: var(--dl-warning); --warning-on-solid: color(from var(--dl-warning) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --warning-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-warning) max(l, 0.7) a b), oklab(from var(--dl-warning) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --warning-on-soft: light-dark(color(from var(--dl-warning-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --warning-line: light-dark(color(from var(--dl-warning-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-danger-under: color-mix(in srgb-linear, color(from var(--danger-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-danger-text: color-mix(in srgb-linear, color(from var(--dl-danger-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-danger-line: color-mix(in srgb-linear, color(from var(--danger) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --danger-solid: var(--dl-danger); --danger-on-solid: color(from var(--dl-danger) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --danger-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-danger) max(l, 0.7) a b), oklab(from var(--dl-danger) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --danger-on-soft: light-dark(color(from var(--dl-danger-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --danger-line: light-dark(color(from var(--dl-danger-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-info-under: color-mix(in srgb-linear, color(from var(--info-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y)); --dl-info-text: color-mix(in srgb-linear, color(from var(--dl-info-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --dl-info-line: color-mix(in srgb-linear, color(from var(--info) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --info-solid: var(--dl-info); --info-on-solid: color(from var(--dl-info) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --info-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-info) max(l, 0.7) a b), oklab(from var(--dl-info) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --info-on-soft: light-dark(color(from var(--dl-info-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --info-line: light-dark(color(from var(--dl-info-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --dl-brand-hover: color-mix(in srgb-linear, color(from light-dark(oklab(from var(--brand-on-soft) calc(l - 0.08) a b), oklab(from var(--brand-on-soft) calc(l + 0.08) a b)) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (7 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (7 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); /* ---- Ungrouped: components use these; .is-{group} points them at a group ---- */ --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); /* ---- Deprecated: --accent's tokens, renamed --secondary-*. They still work; rename them ---- */ --accent-solid: var(--secondary-solid); /* deprecated: use --secondary-solid */ --accent-on-solid: var(--secondary-on-solid); /* deprecated: use --secondary-on-solid */ --accent-soft: var(--secondary-soft); /* deprecated: use --secondary-soft */ --accent-on-soft: var(--secondary-on-soft); /* deprecated: use --secondary-on-soft */ --accent-line: var(--secondary-line); /* deprecated: use --secondary-line */ } .is-brand { --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); } .is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } .is-neutral { --solid: var(--neutral-solid); --on-solid: var(--neutral-on-solid); --soft: var(--neutral-soft); --on-soft: var(--neutral-on-soft); --line: var(--neutral-line); } .is-success { --solid: var(--success-solid); --on-solid: var(--success-on-solid); --soft: var(--success-soft); --on-soft: var(--success-on-soft); --line: var(--success-line); } .is-warning { --solid: var(--warning-solid); --on-solid: var(--warning-on-solid); --soft: var(--warning-soft); --on-soft: var(--warning-on-soft); --line: var(--warning-line); } .is-danger { --solid: var(--danger-solid); --on-solid: var(--danger-on-solid); --soft: var(--danger-soft); --on-soft: var(--danger-on-soft); --line: var(--danger-line); } .is-info { --solid: var(--info-solid); --on-solid: var(--info-on-solid); --soft: var(--info-soft); --on-soft: var(--info-on-soft); --line: var(--info-line); } .is-accent { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } /* deprecated: use .is-secondary */ /* A light or dark band: its own scheme, and its own background and text worked out in it */ .is-light { color-scheme: light; background-color: var(--surface); color: var(--text); } .is-dark { color-scheme: dark; background-color: var(--surface); color: var(--text); } /* ============================================================ Dials: type and space (dials-scale.css) A few dials set every text size and every space size, the way Utopia (utopia.fyi) works them out, but the maths runs in the browser: change a dial and the whole scale follows. Leading is worked out the same way, for whatever size it's used at. This file sets no type on any element: only dials-base.css does that. Dials live on :root (and :host); the derived scale is declared on :root, [data-dials] and :host, so a dial set on a [data-dials] element re-derives the sizes inside it. ============================================================ */ :root, :host { /* ---- Dials ---- */ --screen-min: 360; /* the screen widths the scale runs between, in px */ --screen-max: 1240; --size-min: 16; /* body text at the narrowest and widest screens, in px */ --size-max: 18; --ratio-min: 1.2; /* each step is this much bigger than the last: 1.2 minor third, */ --ratio-max: 1.25; /* 1.25 major third, 1.333 perfect fourth, 1.5 fifth, 1.618 golden */ --space-min: var(--size-min); /* --space-s at each end, in px: follows body text */ --space-max: var(--size-max); /* size unless you set a number */ --space-density: 1; /* scales every space size: 0.8 compact, 1.25 roomy */ --radius-base: 10; /* corner radius of cards and fields, in px (a number, not a length) */ /* Faces: set per site, and load them yourself (each theme file names its Google Fonts link) */ --font-body: ui-sans-serif, system-ui, sans-serif; /* body text and controls */ --font-heading: ui-sans-serif, system-ui, sans-serif; /* headings */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code, kbd, samp, pre */ /* Border widths: every border and outline uses one of these */ --border-width-s: 1px; /* hairlines: cards, fields, tables */ --border-width-m: 2px; /* emphasis; outline offsets */ --border-width-l: 3px; /* focus rings, quote bars, active tabs */ /* ---- Leading: one dial for the rhythm of the type ---- */ /* --leading-body: 1.5; line height at body size (--size-0), unitless. Every larger size keeps the same gap between lines, so it gets proportionally tighter; the space after paragraphs is one body line */ /* --font-accent: var(--font-body); a third face, for ledes, pull quotes or buttons; read it as var(--font-accent, var(--font-body)) */ } :root, [data-dials], :host { /* ---- Internal: worked out from the dials, never edited by hand ---- */ --dl-screen-range: calc(var(--screen-max) - var(--screen-min)); --dl-fluid: calc((100vw - var(--screen-min) * 1px) / var(--dl-screen-range) * 16); /* 0 at the narrowest, 16px at the widest */ --dl-min-0: calc(var(--size-min) / 16); --dl-max-0: calc(var(--size-max) / 16); --dl-min--1: calc(var(--dl-min-0) / var(--ratio-min)); --dl-max--1: calc(var(--dl-max-0) / var(--ratio-max)); --dl-min--2: calc(var(--dl-min--1) / var(--ratio-min)); --dl-max--2: calc(var(--dl-max--1) / var(--ratio-max)); --dl-min-1: calc(var(--dl-min-0) * var(--ratio-min)); --dl-max-1: calc(var(--dl-max-0) * var(--ratio-max)); --dl-min-2: calc(var(--dl-min-1) * var(--ratio-min)); --dl-max-2: calc(var(--dl-max-1) * var(--ratio-max)); --dl-min-3: calc(var(--dl-min-2) * var(--ratio-min)); --dl-max-3: calc(var(--dl-max-2) * var(--ratio-max)); --dl-min-4: calc(var(--dl-min-3) * var(--ratio-min)); --dl-max-4: calc(var(--dl-max-3) * var(--ratio-max)); --dl-min-5: calc(var(--dl-min-4) * var(--ratio-min)); --dl-max-5: calc(var(--dl-max-4) * var(--ratio-max)); --dl-min-6: calc(var(--dl-min-5) * var(--ratio-min)); --dl-max-6: calc(var(--dl-max-5) * var(--ratio-max)); --dl-min-7: calc(var(--dl-min-6) * var(--ratio-min)); --dl-max-7: calc(var(--dl-max-6) * var(--ratio-max)); --dl-min-8: calc(var(--dl-min-7) * var(--ratio-min)); --dl-max-8: calc(var(--dl-max-7) * var(--ratio-max)); /* ---- Font sizes: --size-0 is body text; each number up or down is one step of the ratio, running in a straight line between its two ends ---- */ --size--2: clamp(min(var(--dl-min--2), var(--dl-max--2)) * 1rem, var(--dl-min--2) * 1rem + (var(--dl-max--2) - var(--dl-min--2)) * var(--dl-fluid), max(var(--dl-min--2), var(--dl-max--2)) * 1rem); --size--1: clamp(min(var(--dl-min--1), var(--dl-max--1)) * 1rem, var(--dl-min--1) * 1rem + (var(--dl-max--1) - var(--dl-min--1)) * var(--dl-fluid), max(var(--dl-min--1), var(--dl-max--1)) * 1rem); --size-0: clamp(min(var(--dl-min-0), var(--dl-max-0)) * 1rem, var(--dl-min-0) * 1rem + (var(--dl-max-0) - var(--dl-min-0)) * var(--dl-fluid), max(var(--dl-min-0), var(--dl-max-0)) * 1rem); --size-1: clamp(min(var(--dl-min-1), var(--dl-max-1)) * 1rem, var(--dl-min-1) * 1rem + (var(--dl-max-1) - var(--dl-min-1)) * var(--dl-fluid), max(var(--dl-min-1), var(--dl-max-1)) * 1rem); --size-2: clamp(min(var(--dl-min-2), var(--dl-max-2)) * 1rem, var(--dl-min-2) * 1rem + (var(--dl-max-2) - var(--dl-min-2)) * var(--dl-fluid), max(var(--dl-min-2), var(--dl-max-2)) * 1rem); --size-3: clamp(min(var(--dl-min-3), var(--dl-max-3)) * 1rem, var(--dl-min-3) * 1rem + (var(--dl-max-3) - var(--dl-min-3)) * var(--dl-fluid), max(var(--dl-min-3), var(--dl-max-3)) * 1rem); --size-4: clamp(min(var(--dl-min-4), var(--dl-max-4)) * 1rem, var(--dl-min-4) * 1rem + (var(--dl-max-4) - var(--dl-min-4)) * var(--dl-fluid), max(var(--dl-min-4), var(--dl-max-4)) * 1rem); --size-5: clamp(min(var(--dl-min-5), var(--dl-max-5)) * 1rem, var(--dl-min-5) * 1rem + (var(--dl-max-5) - var(--dl-min-5)) * var(--dl-fluid), max(var(--dl-min-5), var(--dl-max-5)) * 1rem); --size-6: clamp(min(var(--dl-min-6), var(--dl-max-6)) * 1rem, var(--dl-min-6) * 1rem + (var(--dl-max-6) - var(--dl-min-6)) * var(--dl-fluid), max(var(--dl-min-6), var(--dl-max-6)) * 1rem); --size-7: clamp(min(var(--dl-min-7), var(--dl-max-7)) * 1rem, var(--dl-min-7) * 1rem + (var(--dl-max-7) - var(--dl-min-7)) * var(--dl-fluid), max(var(--dl-min-7), var(--dl-max-7)) * 1rem); /* display type */ --size-8: clamp(min(var(--dl-min-8), var(--dl-max-8)) * 1rem, var(--dl-min-8) * 1rem + (var(--dl-max-8) - var(--dl-min-8)) * var(--dl-fluid), max(var(--dl-min-8), var(--dl-max-8)) * 1rem); /* display type: the top of the scale */ /* ---- Leading: worked out for the size of the element it's used on ---- */ /* --leading is a length: apply it on each element that sets a font size (dials-base.css applies it to every element), never on a wrapper for its children to inherit, where it would pass on one fixed length. */ --dl-leading-body: var(--leading-body, 1.5); /* the body's gap between lines at every larger size (1em + the body gap), so bigger text gets proportionally tighter lines; smaller text keeps the body ratio; no size goes below 1.05 */ --leading: max(1.05em, min(var(--dl-leading-body) * 1em, 1em + (var(--dl-leading-body) - 1) * var(--size-0))); /* line height for the size it's on: the same gap between lines as body text at every larger size */ --space-paragraph: calc(var(--dl-leading-body) * var(--size-0)); /* one body line: the space after paragraphs and other blocks; headings take two above and half below */ /* ---- Space: multiples of the space base (Utopia's t-shirt sizes), times the density ---- */ --dl-space-min: calc(var(--space-min) / 16 * var(--space-density)); --dl-space-max: calc(var(--space-max) / 16 * var(--space-density)); --space-3xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.25 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.25rem)); --space-2xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem)); --space-xs: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem)); --space-s: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem)); --space-m: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem)); --space-l: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem)); --space-xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem)); --space-2xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem)); --space-3xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem)); --space-4xl: clamp(calc(var(--dl-space-min) * 8rem), calc(var(--dl-space-min) * 8rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 8) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem)); /* One-up pairs: small on phones, the next size up on desktops */ --space-3xs-2xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem)); --space-2xs-xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem)); --space-xs-s: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem)); --space-s-m: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem)); --space-m-l: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem)); --space-l-xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem)); --space-xl-2xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem)); --space-2xl-3xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem)); --space-3xl-4xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem)); /* Skip pairs, for gutters and section padding that need a bigger swing */ --space-s-l: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem)); --space-m-xl: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem)); --space-l-2xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem)); /* ---- Corners ---- */ --radius-s: calc(var(--radius-base) * 0.5px); --radius-m: calc(var(--radius-base) * 1px); --radius-l: calc(var(--radius-base) * 1.6px); --radius-pill: 999px; } /* ============================================================ Dials: the fallback (src/fallback.css, built into the end of dials.css) For browsers with color-mix() but without relative colour or light-dark(): Chrome and Edge 111-122, Safari 16.2-17, Firefox 113-127. They can't work out the derived chain above, so this block works every public colour token out again from the same dials, with color-mix() alone. It comes after the chain and uses the same selectors, so it wins there; a site's own file, loaded after dials.css, still wins over it. It never sets a dial. Approximations, held to the same contrast as the chain (the contrast check's --fallback mode): - The page is light. .is-dark bands are dark, .is-light bands light. - Paper and ink come from --grey at fixed mixes, so the four lightness dials, --balance, --dark-lift, --tint-vividness and --text-contrast have no effect. --paper-light and friends do. - on-solid text can't follow the fill's luminance: each group has a fixed choice, and its fill is pulled a fixed amount towards the other end so the text keeps 4.5:1 in every Dials theme. White on brand, secondary, danger and info, whose fills are darkened; black on success, whose fill is lightened, and warning, as set. - Coloured text and lines can't move only as far as their target needs: on-soft is the dial mixed a fixed amount into ink (so --link and --focus too), line a smaller amount, and --link-hover further still. The amounts hold 4.5:1 and 3:1 on every surface and soft tint, for every theme and for extreme dials, so they over-shoot for most colours. Ink is near-black on a light page and near-white in an .is-dark band, so the same mix works in both. - No calc() and no percentages computed inside color-mix(): only literal percentages and dials that are one (--tint-strength). ============================================================ */ @supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) { /* ---- Internal: the scheme switches, literal percentages a band can flip ---- */ :root, :host, .is-light { color-scheme: light; --dl-fb-dark: 0%; /* how much of the dark paper and ink to use */ --dl-fb-raise: 38%; /* how much white lifts --surface-raised */ --dl-fb-shadow: 10%; /* the strength of shadows */ } .is-dark { color-scheme: dark; --dl-fb-dark: 100%; --dl-fb-raise: 4%; --dl-fb-shadow: 45%; } /* Bands are declared here too, so every token is worked out again in a band's own scheme */ :root, [data-dials], :host, .is-light, .is-dark { /* ---- Internal: paper, ink and the six fills ---- */ --dl-paper-light: var(--paper-light, color-mix(in oklab, var(--grey) 20%, white)); --dl-paper-dark: var(--paper-dark, color-mix(in oklab, var(--grey) 30%, black)); --dl-ink-light: var(--ink-light, color-mix(in oklab, var(--grey) 34%, black)); --dl-ink-dark: var(--ink-dark, color-mix(in oklab, var(--grey) 17%, white)); --dl-paper: color-mix(in oklab, var(--dl-paper-dark) var(--dl-fb-dark), var(--dl-paper-light)); --dl-ink: color-mix(in oklab, var(--dl-ink-dark) var(--dl-fb-dark), var(--dl-ink-light)); --dl-brand: color-mix(in oklab, var(--brand) 72%, black); --dl-secondary: color-mix(in oklab, var(--accent, var(--secondary)) 67%, black); --dl-success: color-mix(in oklab, var(--success) 85%, white); --dl-warning: var(--warning); --dl-danger: color-mix(in oklab, var(--danger) 78%, black); --dl-info: color-mix(in oklab, var(--info) 61%, black); /* ---- Surfaces ---- */ --surface: var(--dl-paper); --surface-raised: color-mix(in oklab, white var(--dl-fb-raise), var(--dl-paper)); --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper)); --surface-sunken: color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper)); --surface-overlay: color-mix(in oklab, black 45%, transparent); /* ---- Text: a step stronger than the chain's defaults, to cover --text-contrast ---- */ --text-strong: var(--dl-ink); --text: color-mix(in oklab, var(--dl-ink) 94%, var(--dl-paper)); --text-muted: color-mix(in oklab, var(--dl-ink) 89%, var(--dl-paper)); --text-quiet: color-mix(in oklab, var(--dl-ink) 86%, var(--dl-paper)); --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper)); --link: var(--brand-on-soft); --link-hover: color-mix(in oklab, var(--brand) 20%, var(--dl-ink)); /* ---- Lines and effects ---- */ --border-quiet: color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper)); --border: color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper)); --border-strong: color-mix(in oklab, var(--dl-ink) 64%, var(--dl-paper)); --focus: var(--brand-on-soft); --selection: color-mix(in oklab, var(--brand) 22%, var(--dl-paper)); --shadow-color: color-mix(in oklab, black var(--dl-fb-shadow), transparent); --shadow-s: 0 1px 3px var(--shadow-color); --shadow-m: 0 4px 14px var(--shadow-color); --shadow-l: 0 12px 32px var(--shadow-color); --mix-hover: black 12%; --mix-active: black 22%; /* ---- Groups: soft mixed into paper, on-soft and line mixed towards ink ---- */ --brand-solid: var(--dl-brand); --brand-on-solid: white; --brand-soft: color-mix(in oklab, var(--brand) var(--tint-strength), var(--dl-paper)); --brand-on-soft: color-mix(in oklab, var(--brand) 26%, var(--dl-ink)); --brand-line: color-mix(in oklab, var(--brand) 40%, var(--dl-ink)); --secondary-solid: var(--dl-secondary); --secondary-on-solid: white; --secondary-soft: color-mix(in oklab, var(--accent, var(--secondary)) var(--tint-strength), var(--dl-paper)); --secondary-on-soft: color-mix(in oklab, var(--accent, var(--secondary)) 26%, var(--dl-ink)); --secondary-line: color-mix(in oklab, var(--accent, var(--secondary)) 40%, var(--dl-ink)); --neutral-solid: var(--dl-ink); --neutral-on-solid: var(--dl-paper); --neutral-soft: var(--surface-lowered); --neutral-on-soft: var(--text); --neutral-line: var(--border); --success-solid: var(--dl-success); --success-on-solid: black; --success-soft: color-mix(in oklab, var(--success) var(--tint-strength), var(--dl-paper)); --success-on-soft: color-mix(in oklab, var(--success) 26%, var(--dl-ink)); --success-line: color-mix(in oklab, var(--success) 40%, var(--dl-ink)); --warning-solid: var(--dl-warning); --warning-on-solid: black; --warning-soft: color-mix(in oklab, var(--warning) var(--tint-strength), var(--dl-paper)); --warning-on-soft: color-mix(in oklab, var(--warning) 26%, var(--dl-ink)); --warning-line: color-mix(in oklab, var(--warning) 40%, var(--dl-ink)); --danger-solid: var(--dl-danger); --danger-on-solid: white; --danger-soft: color-mix(in oklab, var(--danger) var(--tint-strength), var(--dl-paper)); --danger-on-soft: color-mix(in oklab, var(--danger) 26%, var(--dl-ink)); --danger-line: color-mix(in oklab, var(--danger) 40%, var(--dl-ink)); --info-solid: var(--dl-info); --info-on-solid: white; --info-soft: color-mix(in oklab, var(--info) var(--tint-strength), var(--dl-paper)); --info-on-soft: color-mix(in oklab, var(--info) 26%, var(--dl-ink)); --info-line: color-mix(in oklab, var(--info) 40%, var(--dl-ink)); /* ---- Ungrouped ---- */ --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); /* ---- Deprecated: the old names for the secondary group ---- */ --accent-solid: var(--secondary-solid); --accent-on-solid: var(--secondary-on-solid); --accent-soft: var(--secondary-soft); --accent-on-soft: var(--secondary-on-soft); --accent-line: var(--secondary-line); } /* the group classes again, so they still win on a [data-dials] element or a band */ .is-brand { --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); } .is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } .is-neutral { --solid: var(--neutral-solid); --on-solid: var(--neutral-on-solid); --soft: var(--neutral-soft); --on-soft: var(--neutral-on-soft); --line: var(--neutral-line); } .is-success { --solid: var(--success-solid); --on-solid: var(--success-on-solid); --soft: var(--success-soft); --on-soft: var(--success-on-soft); --line: var(--success-line); } .is-warning { --solid: var(--warning-solid); --on-solid: var(--warning-on-solid); --soft: var(--warning-soft); --on-soft: var(--warning-on-soft); --line: var(--warning-line); } .is-danger { --solid: var(--danger-solid); --on-solid: var(--danger-on-solid); --soft: var(--danger-soft); --on-soft: var(--danger-on-soft); --line: var(--danger-line); } .is-info { --solid: var(--info-solid); --on-solid: var(--info-on-solid); --soft: var(--info-soft); --on-soft: var(--info-on-soft); --line: var(--info-line); } .is-accent { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } } /* Generated by tools/fallback.mjs from dials.css (src/colour.css 192f968f0b78d4df): the defaults in the light scheme. Don't edit. The last resort, for browsers without color-mix() (Chrome and Edge before 111, Safari before 16.2, Firefox before 113, all 2022 or older): they can't work anything out, so every colour token is flat and they get the house colours, light only. Colour dials have no effect there; type and space work as normal. */ @supports not (color: color-mix(in srgb, red, blue)) { :root, [data-dials], :host, .is-light, .is-dark { color-scheme: light; --surface: #f9fafc; --surface-raised: #feffff; --surface-lowered: #eef0f2; --surface-sunken: #e4e5e7; --surface-overlay: rgb(0 0 0 / 45%); --text-strong: #151619; --text: #2f3033; --text-muted: #505154; --text-quiet: #5d5e61; --text-disabled: #999a9d; --link: #2362e9; --link-hover: #0743c2; --border-quiet: #e7e8ea; --border: #d7d8db; --border-strong: #86878a; --focus: #2362e9; --selection: #c9dbfc; --shadow-color: rgb(0 0 0 / 10%); --shadow-s: 0 1px 3px rgb(0 0 0 / 10%); --shadow-m: 0 4px 14px rgb(0 0 0 / 10%); --shadow-l: 0 12px 32px rgb(0 0 0 / 10%); --mix-hover: black 12%; --mix-active: black 22%; --brand-solid: #2463eb; --brand-on-solid: #ffffff; --brand-soft: #e9f1ff; --brand-on-soft: #2362e9; --brand-line: #2463eb; --secondary-solid: #7c51c8; --secondary-on-solid: #ffffff; --secondary-soft: #f1eefc; --secondary-on-soft: #7c51c8; --secondary-line: #7c51c8; --neutral-solid: #151619; --neutral-on-solid: #f9fafc; --neutral-soft: #eef0f2; --neutral-on-soft: #2f3033; --neutral-line: #d7d8db; --success-solid: #239f50; --success-on-solid: #000000; --success-soft: #eaf4eb; --success-on-soft: #197c3d; --success-line: #229c4f; --warning-solid: #f59f0a; --warning-on-solid: #000000; --warning-soft: #faf1e7; --warning-on-soft: #976003; --warning-line: #bd7906; --danger-solid: #dc2828; --danger-on-solid: #ffffff; --danger-soft: #ffece9; --danger-on-soft: #d02525; --danger-line: #dc2828; --info-solid: #0c8eca; --info-on-solid: #000000; --info-soft: #e9f2f9; --info-on-soft: #0773a4; --info-line: #0c8eca; --accent-solid: #7c51c8; --accent-on-solid: #ffffff; --accent-soft: #f1eefc; --accent-on-soft: #7c51c8; --accent-line: #7c51c8; } } /* ═══ dials:end (Dials) ═════════════════════════════════════════════════ */ /* ═══ This site's dials ═════════════════════════════════════════════════ * The ONLY place a colour or a scale value is typed. A site differs from * another in these values and nowhere else. The values below reproduce the * template's look before Dials (its --palette-*, --hue-* and --l-* dials); * change them to match the practice. * * Colours are HSL, which is the easiest to reason about ("the same teal, a * bit darker"); any CSS colour works, so a brand's own hex can go straight * into --brand. Dials works the rest out in OKLCH, and keeps every text * colour at 4.5:1 and every control border and focus ring at 3:1, in light * and dark. * ═══════════════════════════════════════════════════════════════════════ */ :root { /* Churinga, from the Claude Design import (Nov 2026): a warm cream * paper, espresso ink, copper for links and icons, a deep olive for the * feature bands, honey for highlights on dark grounds, and terracotta * for the emergency call. Each colour dial is a group with five roles: * --brand-solid, --brand-on-solid, --brand-soft, --brand-on-soft and * --brand-line. */ --brand: hsl(27 47% 37%); /* copper #8A5A32: links, icons, the call tab */ --secondary: hsl(81 22% 29%); /* olive #4F5A3A: feature bands and the CTA panel */ --tertiary: hsl(46 77% 76%); /* honey #F1DB94: eyebrows and highlights on dark grounds */ /* Older browsers only: honey is light, so black text on it as set. */ --tertiary-is-light: 100%; --success: hsl(96 25% 39%); --warning: hsl(37 74% 54%); --danger: hsl(18 51% 41%); /* terracotta #9F5434: the emergency (000) call */ --info: hsl(202 64% 41%); --grey: hsl(30 25% 45%); /* the warm brown tint in paper and ink */ /* Paper and ink, exact: cream page and espresso text in light; in dark, * a deep espresso page with cream text. */ --paper-light: hsl(38 47% 92%); /* #F4EDE1 */ --paper-dark: hsl(24 27% 10%); --ink-light: hsl(24 31% 13%); /* #2A1E16 */ --ink-dark: hsl(38 52% 94%); /* #F7F0E4 */ /* Paper and ink sit close in tone on a cream page: strengthen muted * text and strong borders a little. */ --text-contrast: 8; --dark-lift: 0.1; --tint-strength: 14%; /* Type and space, measured off the design at 360px and 1440px: body 16px * to 17px, each step 1.17x (phone) to 1.26x (desktop). The steps land * on the design's sizes: * -1 13.7 / 13.5 labels, buttons, nav, small print (design 13-14.5) * 0 16 / 17 body text (16.5-18) * 1 18.7 / 21.4 hero standfirst, table names, highlights (19-22) * 2 21.9 / 27 card and list headings (24-28) * 3 25.6 / 34 gallery cards, names, milestones (30-36) * 4 30 / 42.9 sub-section headings, the welcome lead (40-46) * 5 35.1 / 54 the CTA heading, the 30+ badge (52) * 6 41 / 68 section headings (40 / 66) * 7 48 / 85.7 inner page heroes (52 / 95) * 8 56.2 / 108 the home hero (60 / 124) * --space-s 16px to 20px. */ --screen-min: 360; --screen-max: 1440; --size-min: 16; --size-max: 17; --ratio-min: 1.17; --ratio-max: 1.26; --space-min: 16; --space-max: 20; --space-density: 1; /* Line height: the design's body copy runs at 1.6. */ --leading-body: 1.6; /* Young Serif headings sit tighter than Dials' --leading gives at their * size: about 1.0 to 1.1 in the design. Display is the hero headline. */ --leading-heading: 1.06; --leading-hero: 0.94; /* Corners: --radius-s 9px, --radius-m 18px, --radius-l 28.8px (the * design's cards and panels) */ --radius-base: 18; --border-width-l: 4px; /* Faces: Young Serif for headings, Instrument Sans for everything else */ --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-heading: 'Young Serif', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* A re-themed band: the deep olive feature bands, drawn as Dials' dark band * (class="is-dark") with the olive as its dark paper, so every token inside * (text, borders, links, buttons, fields, the focus ring) is worked out for * that ground. Markup:
. */ [data-dials][data-dials="olive"] { --paper-dark: hsl(81 22% 29%); /* #4F5A3A */ --ink-dark: hsl(38 52% 94%); } /* The espresso panels and the textured marquee strip: the same, on a deep * brown.
. */ [data-dials][data-dials="espresso"] { --paper-dark: hsl(24 31% 13%); /* #2A1E16 */ --ink-dark: hsl(38 52% 94%); } /* The marquee strip and the "30+" badge: the design's warmer bark brown. */ [data-dials][data-dials="bark"] { --paper-dark: hsl(25 45% 20%); /* #4A2F1C */ --ink-dark: hsl(38 52% 94%); } /* ── The colour scheme ──────────────────────────────────────────────────── * The page follows the device's light or dark setting: Dials' own * color-scheme: light dark (mf-websites#431). The visitor can override it * with the switcher in partials/header.html, which sets (none = match the device); partials/ * scheme-head.html applies a stored choice before first paint. * * Only where Dials can draw a dark page, under Dials' own condition: * elsewhere (Dials' fallback) the page is always light, the switcher stays * hidden, and a forced dark scheme would only darken the browser's own * controls on a light page. * * A site that should only ever be light (or dark) sets color-scheme on :root * in its dials block instead, and deletes the switcher and the scheme-head * include: a visitor must not be offered a choice the site does not honour. */ @supports (color: oklch(from red l c h)) and (color: light-dark(red, red)) { :root[data-scheme="light"] { color-scheme: light; } :root[data-scheme="dark"] { color-scheme: dark; } } /* ── The tertiary group ─────────────────────────────────────────────────── * A third brand colour, typically doing button and CTA work, that is neither * a tint of the brand nor a status colour (practices routinely have one: * "Button Brown", "Morning Orange"). Dials has no third brand group, so the * template adds one with the same five roles, worked out the way Dials v0.2.0 * works out its own groups (each formula is Dials' brand formula with the * tertiary colour in it), from public tokens only. Set --tertiary above; * never set these. class="is-tertiary" points --solid and friends at it, * like .is-secondary. Declared on bands too, so a band's group follows the * band's own scheme. * * --tertiary-on-soft the fill, moved only as far as 4.5:1 needs on the * least contrasting of its soft tint, --surface-lowered * and --surface-raised; a colour that passes is kept * --tertiary-line the dial, moved only as far as 3:1 needs, the same way * * Dials carries the numbers those two need in its internal --dl-* plumbing, * which nothing outside Dials may read, so the template works the same * numbers out again from public tokens in its own --tpl-* properties: the * luminance of --surface-lowered and --surface-raised (Dials' --dl-surfaces-y) * and of the soft tint, and the colour carrying its target. They are the * template's plumbing: never use or set a --tpl-* property anywhere else. */ :root, [data-dials], .is-light, .is-dark { --tpl-tertiary-base: oklab(from var(--tertiary) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b); --tertiary-solid: light-dark(var(--tpl-tertiary-base), oklab(from var(--tpl-tertiary-base) calc(l + var(--dark-lift)) a b)); --tertiary-on-solid: color(from var(--tertiary-solid) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1); --tertiary-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--tertiary-solid) max(l, 0.7) a b), oklab(from var(--tertiary-solid) min(l, 0.6) a b)) var(--tint-strength), oklab(from var(--surface) l 0 0)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness))); --tpl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)))); --tpl-tertiary-under: color-mix(in srgb-linear, color(from var(--tertiary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--tpl-surfaces-y)); --tpl-tertiary-text: color-mix(in srgb-linear, color(from var(--tpl-tertiary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --tpl-tertiary-line: color-mix(in srgb-linear, color(from var(--tertiary) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1))))); --tertiary-on-soft: light-dark(color(from var(--tpl-tertiary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); --tertiary-line: light-dark(color(from var(--tpl-tertiary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); } .is-tertiary { --solid: var(--tertiary-solid); --on-solid: var(--tertiary-on-solid); --soft: var(--tertiary-soft); --on-soft: var(--tertiary-on-soft); --line: var(--tertiary-line); } /* The tertiary group in older browsers: without relative colour or * light-dark() (iOS 16 and 17, Safari before 18, Chrome and Edge before 123, * Firefox before 128) the derivation above cannot be worked out, and Dials' * own fallback covers only Dials' groups. So, the way Dials' fallback does * its groups, under the same condition and with the same selectors as the * derivation: the five roles again with color-mix(in oklab, ...) alone, from * --tertiary and the paper (--surface) and ink (--text-strong) Dials' * fallback has already worked out. As in Dials v0.2.0's fallback, on-soft is * the colour mixed 26% into ink and the line 40% into ink; neither can move * only as far as it needs there, so both over-shoot for most colours. * * Text on the fill can't follow the fill's luminance there, so, as in Dials' * fallback, it is a fixed choice with the fill moved to suit it. Dials fixes * the choice per group (white on --brand pulled 72% towards black, black on * --warning as set); the tertiary is whatever colour the site gives it, so * the site fixes it with --tertiary-is-light in its dials block, a literal * percentage like Dials' own fallback switches: 0% (the default) is white on * the fill pulled 72% towards black, as Dials does --brand; 100% is black on * --tertiary as set, as Dials does --warning. A light --tertiary at 0% gets * white on a mid fill below 4.5:1, a dark one at 100% black on a dark fill: * check-contrast.mjs --fallback says which a site needs. */ @supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) { :root, [data-dials], .is-light, .is-dark { --tertiary-solid: color-mix(in oklab, var(--tertiary) var(--tertiary-is-light, 0%), color-mix(in oklab, var(--tertiary) 72%, black)); --tertiary-on-solid: color-mix(in oklab, black var(--tertiary-is-light, 0%), white); --tertiary-soft: color-mix(in oklab, var(--tertiary) var(--tint-strength), var(--surface)); --tertiary-on-soft: color-mix(in oklab, var(--tertiary) 26%, var(--text-strong)); --tertiary-line: color-mix(in oklab, var(--tertiary) 40%, var(--text-strong)); } } /* ── The template's own tokens ──────────────────────────────────────────── * What Dials does not cover: the measure, the grid, the shared control * corner, the tap target, layers and motion. None of them is a colour, a text * size or a space size. Line height is Dials' --leading; weights and letter * spacing are written on the elements that use them, as plain numbers and em * (the template's old --leading-*, --tracking-* and --weight-* are in "Old * names" below). */ :root { /* --- Weight -------------------------------------------------------- */ /* THREE WEIGHTS, DELIBERATELY: 400 body, 600 emphasis (nav, labels, * buttons, eyebrows, strong) and 700 headline. A fourth needs a reason: * the face has a visibly distinct cut AND the three are not creating * enough contrast. A flat hierarchy is almost always a spacing or size * problem, not a weight problem. */ /* --- Measure ------------------------------------------------------- */ --measure: 65ch; /* body copy, where a container asks for it (.measure) */ --measure-tight: 45ch; /* card and caption copy */ /* --- Grid ---------------------------------------------------------- */ /* Deliberately minimal: the container and gutter are fluid, placement is * left to each layout. Use .u-container and .u-grid below. */ --grid-max-width: 77.5rem; --grid-gutter: var(--space-s-l); --grid-columns: 12; /* --- Corners beyond Dials' three ----------------------------------- */ --radius-xs: calc(var(--radius-base) * 0.333px); /* tags, inline chips, the focus ring: a third of --radius-m, so it follows --radius-base */ --radius-round: 50%; /* avatars */ --control-radius: var(--radius-s); /* buttons AND fields: a site sets this once, both follow */ /* --- Touch targets ------------------------------------------------- */ /* The smallest box a finger hits reliably: 44px (WCAG 2.5.5, Apple's * HIG). A fixed dimension rather than spacing, so it does not scale. */ --target-min: 2.75rem; /* --- Inset shadows, from Dials' --shadow-color ------------------------ */ --shadow-inner-s: inset 0 1px 2px 0 var(--shadow-color); --shadow-inner-m: inset 0 2px 6px 0 var(--shadow-color); /* --- Layers -------------------------------------------------------- */ /* Six values, so z-index is never invented at the call site. */ --layer-behind: -1; /* decorative washes sitting behind content */ --layer-base: 1; --layer-raised: 2; /* hover cards, sticky rows */ --layer-nav: 3; /* sticky header */ --layer-overlay: 4; /* dropdowns, popovers */ --layer-modal: 5; /* dialogs and their backdrop */ --layer-top: 2147483647;/* skip links, live-region alerts */ /* --- Motion -------------------------------------------------------- */ --duration-fast: 120ms; /* hover, focus */ --duration-base: 220ms; /* most transitions */ --duration-slow: 400ms; /* entrances */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-distance: 1.5rem; } /* ═══ Old names ═══ aliases:begin ═══════════════════════════════════════ * The template's token names before Dials (#426), each pointing at the Dials * token that replaces it, so markup, the Form controls section and any site * layer written against them keep working until #427 migrates the live * sites. NEVER use one in new work: use the name on the right. Delete this * whole block (down to aliases:end) once nothing reads any of them. * * Declared on [data-dials] and the .is-light/.is-dark bands as well as * :root, so a re-themed scope's or a band's aliases follow its own dials and * scheme, as Dials' own tokens do (its fallback works them out again there). Names Dials took over with a new meaning are NOT * here: --surface is now the PAGE (the old raised --surface is * --surface-raised), --secondary is the second brand colour's dial (it used * to be its fill: that is --secondary-solid), --accent is that dial's old * Dials name (deprecated in Dials v0.2.0: never set it), --success/--warning/ * --danger/--info/--tertiary are dials (the fill is --success-solid ...), and --border, --border-strong, --space-*, * --radius-s/m/l, --shadow-* and --font-* are Dials' own. The --u-*, * --palette-*, --hue-*, --chroma-*, --l-* and --scheme dials are gone: set * the Dials dials instead. */ :root, [data-dials], .is-light, .is-dark { --primary: var(--brand-solid); --primary-hover: light-dark(oklab(from var(--brand-solid) calc(l - 0.07) a b), oklab(from var(--brand-solid) calc(l + 0.07) a b)); --primary-light: oklab(from var(--brand-solid) calc(l + 0.11) a b); --primary-muted: color-mix(in oklab, var(--brand-solid) 15%, var(--surface)); --primary-pale: var(--brand-soft); --on-primary: var(--brand-on-solid); --secondary-hover: light-dark(oklab(from var(--secondary-solid) calc(l - 0.07) a b), oklab(from var(--secondary-solid) calc(l + 0.07) a b)); --secondary-light: oklab(from var(--secondary-solid) calc(l + 0.11) a b); --secondary-pale: var(--secondary-soft); --on-secondary: var(--secondary-on-solid); --tertiary-hover: light-dark(oklab(from var(--tertiary-solid) calc(l - 0.07) a b), oklab(from var(--tertiary-solid) calc(l + 0.07) a b)); --tertiary-pale: var(--tertiary-soft); --on-tertiary: var(--tertiary-on-solid); --accent-dark: var(--primary-hover); --accent-pale: var(--brand-soft); --success-pale: var(--success-soft); --warning-pale: var(--warning-soft); --danger-pale: var(--danger-soft); --info-pale: var(--info-soft); --ink-strong: var(--text-strong); --ink: var(--text); --ink-mid: var(--text-muted); --ink-soft: var(--text-quiet); --bg: var(--surface); --on-bg: var(--text); --on-surface: var(--text); --step--2: var(--size--2); --step--1: var(--size--1); --step-0: var(--size-0); --step-1: var(--size-1); --step-2: var(--size-2); --step-3: var(--size-3); --step-4: var(--size-4); --step-5: var(--size-5); --step-6: var(--size-6); --step-7: var(--size-7); --step-8: var(--size-8); --border-thin: var(--border-width-s); --border-medium: var(--border-width-m); --border-thick: var(--border-width-l); /* The template's type ladder before Dials v0.3 (#436), FROZEN at its old * values, so a site layer written against it renders exactly as it did. * They do not follow Dials, and the template reads none of them: line * height is var(--leading), and weights and letter spacing are plain * values on each element. check-system.sh accepts these values only * exactly as written here. */ --weight-400: 400; --weight-600: 600; --weight-700: 700; --leading-xs: 1.05; --leading-s: 1.18; --leading-m: 1.3; --leading-l: 1.5; --leading-xl: 1.6; --tracking-xs: -0.02em; --tracking-s: -0.01em; --tracking-m: 0; --tracking-l: 0.04em; --tracking-xl: 0.08em; } /* ═══ aliases:end (Old names) ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * RESET * * Josh Comeau's Custom CSS Reset (joshwcomeau.com/css/custom-css-reset/), * lightly adapted. Normalises browser defaults so the base layer below is * building on the same ground in every browser. Leave this alone; make * design decisions in the base layer and the tokens above it. * ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Skip link. craft.md requires one as the first element in ; without a * rule here it renders as a visible link above the header on every site. It is * off-screen until focused, then a real control with a visible focus ring. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--layer-top, 2147483647); padding: var(--space-xs) var(--space-s); background: var(--solid); color: var(--on-solid); text-decoration: none; border-radius: 0 0 var(--radius-xs) 0; } .skip-link:focus, .skip-link:focus-visible { left: 0; /* the ring is the global one, in Form controls & focus */ } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; /* line height: the base layer's body rule, from --leading-body */ } /* Media is block-level and never overflows its container. */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* Form controls inherit typography rather than using browser chrome. */ :where(input, button, textarea, select) { font: inherit; } /* zero specificity: "Form controls" below must win */ /* Long words and URLs wrap instead of forcing a horizontal scrollbar. */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* A new stacking context on the root, so app-level layers cannot escape. */ #root, #__next { isolation: isolate; } @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; } } /* ═══════════════════════════════════════════════════════════════════════ * ELEMENT BASE LAYER * * Bare elements are styled here so a page is correct with no classes at * all. Without this, an unclassed

falls back to the browser default * and whoever writes the page patches it with an inline style — which is * how a site ends up with a different heading treatment per page. * * Every heading has a matching .h1-.h6 class. Use the ELEMENT for document * structure (SEO, screen readers, outline) and the CLASS for appearance, * so an

can look like an eyebrow without lying about the hierarchy: * *

Still the page's real heading, just smaller

* * Sites override these; they are a floor, not a straitjacket. * ═══════════════════════════════════════════════════════════════════════ */ body { font-family: var(--font-body); font-size: var(--size-0); font-weight: 400; line-height: var(--leading-body); /* a number, so it inherits as one; --leading is a length */ color: var(--text); background: var(--surface); } /* Headings ───────────────────────────────────────────────────────────── * Margins are top-heavy on purpose: a heading belongs to what follows it, * so the space above is larger than the space below. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: var(--space-l) 0 var(--space-s); font-family: var(--font-heading); font-weight: 700; line-height: var(--leading); /* for each heading's own size: on the heading, never inherited */ color: var(--text-strong); text-wrap: balance; } :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) + * { margin-top: 0; } /* A heading opening its container needs no space above it. */ :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child { margin-top: 0; } /* Display headings tighten a little, more the larger they are; tune to the * face (one with optical sizes may need none). */ h1, .h1 { font-size: var(--size-5); letter-spacing: -0.025em; } h2, .h2 { font-size: var(--size-4); letter-spacing: -0.02em; } h3, .h3 { font-size: var(--size-3); letter-spacing: -0.015em; } h4, .h4 { font-size: var(--size-2); letter-spacing: -0.01em; } h5, .h5 { font-size: var(--size-1); } h6, .h6 { font-size: var(--size-0); letter-spacing: 0.04em; /* capitals */ text-transform: uppercase; } /* A highlighted phrase inside a heading. One mechanism, not three. */ :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) em { font-style: italic; color: var(--on-soft); /* coloured text on the page */ } /* Text ─────────────────────────────────────────────────────────────── */ p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 var(--space-m); } /* * Line length is a container's job, not every paragraph's — capping each

* leaves text hugging the left of any column already sized for reading. * Use .measure (or set a width on the container) where prose needs it. */ .measure { max-width: var(--measure); } .measure-tight { max-width: var(--measure-tight); } /* Opening paragraph: larger and looser than body copy. */ .lede { font-size: var(--size-1); line-height: var(--leading); color: var(--text-muted); } /* Small label above a heading. */ .eyebrow { display: block; margin-bottom: var(--space-2xs); font-size: var(--size--1); font-weight: 600; line-height: var(--leading); letter-spacing: 0.04em; /* capitals */ text-transform: uppercase; color: var(--on-soft); } small, .text-small { font-size: var(--size--1); line-height: var(--leading); } strong, b { font-weight: 600; } a { color: var(--link); text-decoration-thickness: var(--border-width-s); text-underline-offset: 0.15em; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--link-hover); } /* The focus ring lives in "Form controls & focus" below. */ ul, ol { padding-left: var(--space-m); } /* * List spacing applies to PROSE lists only. Navigation, button groups and * card grids are lists too, and flow margins on those knock flex/grid items * out of alignment (the site header) or balloon the spacing (the footer). * * Presence of a class is not the test — a footer nav is a nav whether or not * anyone put a class on it — so navigation context opts out explicitly. */ :where(ul, ol) > li { margin-bottom: var(--space-2xs); } :where(ul, ol) > li:last-child { margin-bottom: 0; } nav ul, nav ol, header ul, header ol, footer ul, footer ol, menu { margin: 0; padding-left: 0; list-style: none; } nav li, header li, footer li, menu li { margin-bottom: 0; } /* A list explicitly used for layout carries no bullets, indent or margin. */ :where(ul, ol)[class] { margin: 0; padding-left: 0; list-style: none; } :where(ul, ol)[class] > li { margin-bottom: 0; } blockquote { /* The quote bar is a quiet border in the group's colour: Dials' subtle * border pattern (tokens.md, "A subtle border in a group's colour"), * declared here rather than at :root so it follows an .is-* class on the * quote. --line itself is a strong 3:1 line since Dials v0.2.0; 30% of * it keeps the bar about as light as it was before (the pattern's * example is 40%: a step darker). Decoration: no contrast promised. */ --quote-bar: color-mix(in oklab, var(--line) 30%, var(--border)); padding-left: var(--space-m); border-left: var(--border-width-l) solid var(--quote-bar); color: var(--text-muted); font-style: italic; } hr { height: 0; margin: var(--space-l) 0; border: 0; border-top: var(--border-width-s) solid var(--border); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } /* Media ──────────────────────────────────────────────────────────────── * Images carry NO radius and NO background plate by default. * * They used to. `img { border-radius: var(--radius-m); background: var(--surface-raised) }` * was added to fix one square photo on Wellbrook, and it cost far more than it * saved: every migration since has had to undo it, because a faithful clone of a * customer's live site decides its own corners, and the background plate fills * the transparent areas of every PNG and SVG — a logo on a dark footer renders * as a solid block. Ten of the thirteen sites on this box carried an override * for it before it was removed. * * A radius is a design decision belonging to the site's own stylesheet, next to * the cards it should match. Use .is-rounded (below) or a site-layer rule; do * not put it back here. */ img, picture, video, canvas, svg { height: auto; } /* Opt in where a photo should match the radius of the cards around it. */ img.is-rounded, .is-rounded img { border-radius: var(--radius-m); } figure { margin-inline: 0; } figcaption { margin-top: var(--space-2xs); font-size: var(--size--1); line-height: var(--leading); color: var(--text-quiet); } /* Tables ───────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; text-align: left; } th, td { padding: var(--space-2xs) var(--space-xs); border-bottom: var(--border-width-s) solid var(--border); vertical-align: top; } th { font-weight: 600; color: var(--text-strong); } tbody tr:last-child :where(th, td) { border-bottom: 0; } /* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════ * A text field's look, and every focus ring on the site, are set ONCE, * here: by the --field-* and --focus-ring* tokens and a few base rules. * Every text-like control on the site (contact, search, careers, booking, * anything mediflare.js or Connect writes) inherits it, so they match by * construction. * * - This section is copied VERBATIM from _template and never edited in a * site: check-system.sh fails the site if its copy differs by a character. * A site differs only in TOKEN VALUES, set in the site layer's own :root, * below this section (a later :root wins over the defaults here). * - Never restyle a control inside a component. A component rule may place * a field (grid, margin, width) but never sets its border, radius, * background or height -- check-system.sh fails the site if one does. * - Fields and buttons share ONE corner, --control-radius: set it in the * site layer's :root and both follow. Never set --field-radius * (check-system.sh fails it), except to 0px in underline mode below; * pill buttons mean pill fields. * - The base rules are at zero specificity (:where), so any token change * reaches every field and nothing here outranks a deliberate override. * - ONE focus ring per site, on links, buttons and fields alike: an outline * in --focus-ring at --focus-ring-w. No other rule sets a focus outline, * colour or box-shadow (check-system.sh fails one); outline-offset may be * adjusted where a ring would be clipped. * - Underline-only fields: set --field-border-w: 0, * --field-border-bottom: var(--border-width-s) solid and * --field-radius: 0px (an underline has no corners to share; a rounded * one curves at its ends, and buttons keep --control-radius); optionally * --field-focus-border-bottom: var(--focus-ring-w) solid var(--focus-ring) * so the underline thickens with the ring. No extra rules. Underline * mode is the only time a site sets --field-radius, and check-system.sh * then requires the 0px. * - Colours follow the band. The colour tokens are declared on the page * AND on every .is-light/.is-dark band and [data-dials] scope, as Dials * declares its own: a browser on Dials' fallback (no relative colour) * works a token out once per scope, so declared on :root alone a field * in a dark band kept the light page's border and ring. A site that * changes a field COLOUR sets it on the same four selectors, after this * section (:root, [data-dials], .is-light, .is-dark { --field-...: ... }), * or a band keeps the default. Sizes are set on :root only. * - A panel on a ground that is not a Dials surface (a brand fill) re-sets * the leaf colour tokens on the container, never the rules: * .brand-panel { * --focus-ring: var(--brand-on-solid); * --field-border: var(--brand-on-solid); * } * --focus-ring must reach >= 3:1 against every ground it is drawn on. * The guard finds this section by the begin/end markers; keep both. * ═══════════════════════════════════════════════════════════════════════ */ :root { --field-h: var(--target-min); /* the single-line height: exact, never below the 44px target */ --field-textarea-h: calc(var(--field-h) * 3); /* the textarea's minimum height */ --field-pad-block: var(--space-2xs); /* textarea only; a one-line field centres its text in --field-h */ --field-pad-inline: var(--space-xs); --field-font-size: max(var(--size-0), 1rem); /* never below 16px, or iOS zooms the page on focus */ --field-leading: var(--leading); /* Dials' leading, worked out at the field's own size */ --field-weight: 400; /* one weight wherever the field sits */ --field-label-weight: 600; /* the label's weight: the site's emphasis weight */ --field-radius: var(--control-radius); /* = the .btn radius, by construction; never set it */ --field-textarea-radius: min(var(--field-radius), var(--radius-l)); /* a pill textarea is a capsule; cap it */ --field-border-w: var(--border-width-s); /* Unset by default, so they follow --field-border-w/--field-border: * --field-border-bottom the resting bottom edge (underline mode) * --field-focus-border-bottom the bottom edge while focused * --field-focus-outline the field's ring; leave it to the default */ --focus-ring-w: var(--border-width-m); /* >= --field-border-w, so the ring covers the border */ } /* The colours, on the bands too (see above). */ :root, [data-dials], .is-light, .is-dark { --field-bg: var(--surface-raised); /* fields sit on the raised surface, as cards do */ --field-ink: var(--text); --field-border: var(--border-strong); /* Dials' control border: 3:1 on every surface */ --field-border-hover: var(--text-quiet); --field-placeholder: var(--text-quiet); --focus-ring: var(--focus); /* Dials' focus ring: >= 3:1 on every surface, light and dark */ } /* THE focus ring: every interactive element, always. Fields refine the * offset and radius below; nothing else sets a focus outline. */ :focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } label { display: block; margin-bottom: var(--space-3xs); font-size: var(--size--1); font-weight: var(--field-label-weight); line-height: var(--leading); color: var(--text-strong); } /* THE base rule. Every text-like control: text, email, tel, search, number, * date, url, password, select and textarea -- not checkboxes, radios, * ranges, files or button-type inputs. */ :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea) { --_field-radius: var(--field-radius); appearance: none; box-sizing: border-box; width: 100%; height: var(--field-h); min-height: var(--field-h); padding: 0 var(--field-pad-inline); font: inherit; font-size: var(--field-font-size); font-weight: var(--field-weight); line-height: var(--field-leading); color: var(--field-ink); background-color: var(--field-bg); border: var(--field-border-w) solid var(--field-border); border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border)); border-radius: var(--_field-radius); box-shadow: none; transition: border-color var(--duration-fast) var(--ease-out); } :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):hover { border-color: var(--field-border-hover); } /* One edge on focus. The offset pulls the ring in by the border's width, so * it is drawn ON the border (covering it) rather than outside it; the border * and shadow are held at rest so nothing draws a second edge. Specificity * 0,1,0 and later than the global :focus-visible, so it wins over that one * (whose offset and radius suit links, not fields). In underline mode the * bottom edge may take --field-focus-border-bottom as well. */ :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus { border-color: var(--field-border); border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border)); box-shadow: none; outline: none; } :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus-visible { outline: var(--field-focus-outline, var(--focus-ring-w) solid var(--focus-ring)); outline-offset: calc(var(--field-border-w) * -1); border-bottom: var(--field-focus-border-bottom, var(--field-border-bottom, var(--field-border-w) solid var(--field-border))); border-radius: var(--_field-radius); } :where(textarea) { --_field-radius: var(--field-textarea-radius); height: auto; min-height: var(--field-textarea-h); padding-block: var(--field-pad-block); resize: vertical; } /* The chevron is one conic-gradient wedge in --field-ink: tokens only, no * image, so it recolours with the palette and the scheme. (Two half-square * linear gradients leave a seam where they meet.) */ :where(select) { padding-inline-end: calc(var(--field-pad-inline) * 2 + var(--space-xs)); background-image: conic-gradient(from -45deg at 50% 100%, var(--field-ink) 90deg, transparent 0); background-position: calc(100% - var(--field-pad-inline)) 50%; background-size: calc(var(--space-3xs) * 2.5) calc(var(--space-3xs) * 1.25); background-repeat: no-repeat; cursor: pointer; } :where(select[multiple], select[size]) { height: auto; padding-block: var(--field-pad-block); padding-inline-end: var(--field-pad-inline); background-image: none; } :where(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; } /* The browser's own clear (x) in a search box, redrawn as a mask so it takes * --field-ink instead of the browser's grey. */ :where(input[type=search])::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; inline-size: 1em; block-size: 1em; cursor: pointer; background-color: var(--field-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-solid); } fieldset { margin: 0 0 var(--space-m); padding: 0; border: 0; } /* ═══ form-controls:end (Form controls & focus) ═════════════════════════ */ /* * A bare