/*
* liquid-kit · glass.css — the Liquid Glass material for the web.
*
* What: .glass surfaces for the NAVIGATION / CONTROL layer only (nav pill, island, toolbar,
* segmented control, floating CTA, checkout sheet, popover). Never on content cards.
* Tiers: Floor (opaque) -> Frost (blur + saturate + bounded contrast/brightness; every
* engine; the no-JS default) -> Lens (edge-only SVG refraction; Blink only). Blur and tint
* are identical across tiers, so an upgrade never flashes.
* Anatomy (bottom to top, all inside the element's own stacking context):
* backdrop-filter body + veil (background-color = the tone's tint)
* ::after bevel glow: ~6 px inner band, top > bottom > sides (thickness cue)
* .glass__light leaf layer (the runtime adds it; LiquidGlass.tsx renders it): one disc
* that lights the rim nearest a NEARBY pointer (proximity, never
* page-wide) and, faintly, the glass under it
* content
* ::before 1 px specular rim, static key light (top for bars and panels,
* 10-12 + 4-6 o'clock arcs for round shapes; placed ON the curved rim
* by the per-shape --glass-rim-g / -p / -f the runtime writes)
* box-shadow 0.5 px dark outer edge (iOS 27) + soft drop shadow (size = thickness)
* Deps: tokens.css first. html/liquid-glass.js (vanilla) or react/LiquidGlass.tsx +
* react/useLightSource.ts + react/GlassLensFilter.tsx write the light variables (--lk-*), the
* rim geometry (--glass-key-angle, --glass-rim-g/-p/-f), the spot radius, the tier
* (), prefs (data-motion / data-transparency / data-contrast), the
* adaptive tone (data-glass-on) and strength (--glass-adapt), and --glass-lens-filter.
* Markup:
*
* data-glass="regular|clear", data-glass-surface="control|bar|sheet|island",
* data-glass-shape="capsule|rounded", data-glass-on="light|dark|auto",
* data-glass-tint="primary", data-glass-interactive, data-glass-materialize,
* data-glass-state="hidden", data-glass-grain, data-glass-lens.
* Adapt: retune numbers in tokens.css (source tokens, see liquid-glass.md "Markup and tokens"); override one
* surface with --glass-* on its own selector. Everything sits in @layer components with
* :where() (zero specificity): unlayered page CSS and Tailwind utilities win without
* !important.
* Pitfalls:
* - Never make a surface legible by making it opaque or near-black: that is not glass any more
* (a black island was rejected by the user in the lab). Legibility = tone + bound + adaptive
* strength + label weight/halo.
* - Never animate opacity / filter / mask / clip-path / mix-blend-mode on an ANCESTOR of .glass:
* the ancestor becomes a Backdrop Root and the blur only sees it (flat or blank glass).
* - backdrop-filter makes the glass a containing block for position:fixed descendants.
* - Never write per-frame variables on the .glass element itself: that restyles its whole
* subtree and repaints the backdrop filter (measured: ~18 ms/frame at 4x CPU throttle).
* Per-frame light values go on the .glass__spot leaf; --glass-adapt changes only on scroll.
* - Do not remove `isolation: isolate`: the glow and light sit at z-index -1 and would drop
* behind the page on the Floor tier (no backdrop-filter, so no stacking context otherwise).
*/
@property --glass-blur { syntax: ""; inherits: true; initial-value: 0px; }
@property --glass-tint { syntax: ""; inherits: true; initial-value: transparent; }
@property --glass-saturate { syntax: ""; inherits: true; initial-value: 1; }
@property --glass-contrast { syntax: ""; inherits: true; initial-value: 1; }
@property --glass-brightness { syntax: ""; inherits: true; initial-value: 1; }
/* The proximity light lives on a leaf layer (.glass__light) that the runtime adds as the first
* child of every surface. Its variables are written on that layer's single disc, never on the
* glass: a pointer frame restyles one childless element and moves it by translate / scale /
* opacity only (compositor work, no repaint of the glass, its text or its backdrop filter).
* --lk-w proximity 0..1 (0 = far: exact rest) --lk-o pointer over 0..1
* --lk-p pressed 0..1 --lk-x / --lk-y hot spot centre, px in the
* surface's box (rest: 30% / -40%, above top-left) */
@layer components {
/* ---------- Frost tier: the default surface (bar, light tone) ---------- */
:where(.glass) {
--_b-light: var(--glass-b-light-bar);
--_b-dark: var(--glass-b-dark-bar);
--_a-light: var(--glass-a-light-bar);
--_a-dark: var(--glass-a-dark-bar);
--_k-light: var(--glass-k-bar);
--_k-dark: var(--glass-k-dark-bar);
/* Adaptive strength (0 / 0.5 / 1, written by the runtime on auto-tone surfaces). */
--_adapt: calc(var(--glass-adapt, 0) * var(--glass-adapt-a, 0.14));
--_ink-tone: var(--glass-ink-light);
--glass-blur: var(--glass-blur-bar);
--glass-saturate: var(--glass-saturate-bar);
--glass-contrast: var(--_k-light);
--glass-shadow: var(--shadow-glass-bar);
--glass-radius: var(--radius-pill);
--glass-brightness: var(--_b-light);
--glass-tint: rgb(var(--glass-tint-rgb-light) / calc(var(--_a-light) + var(--_adapt)));
--glass-ink: var(--glass-ink-light);
--glass-label-2: color-mix(in srgb, var(--glass-ink) calc(var(--glass-label-2-alpha, 0.8) * 100%), transparent);
--glass-halo: var(--glass-halo-light);
--glass-spec-rgb: 255 255 255;
--glass-spec-a: var(--glass-spec-a-light);
--glass-spec-b: var(--glass-spec-b-light);
--glass-edge: var(--glass-edge-light);
--glass-glow-top: var(--glass-glow-top-light);
--glass-glow-bottom: var(--glass-glow-bottom-light);
--glass-glow-side: var(--glass-glow-side-light);
--glass-floor: var(--glass-floor-light);
--glass-floor-hc: var(--glass-floor-hc-light);
--glass-fill: var(--glass-fill-light);
position: relative;
isolation: isolate;
border-radius: var(--glass-radius);
color: var(--glass-ink);
background-color: var(--glass-tint);
/* Order matters: saturate first, then the contrast/brightness bound, so the bound holds. */
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))
contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate))
contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
box-shadow: 0 0 0 0.5px var(--glass-edge), var(--glass-shadow);
transition:
--glass-blur var(--dur-enter) var(--ease-out-quint),
--glass-tint var(--dur-enter) var(--ease-out-quint),
--glass-contrast var(--dur-enter) var(--ease-out-quint),
--glass-brightness var(--dur-enter) var(--ease-out-quint),
box-shadow var(--dur-enter) var(--ease-out-quint),
scale var(--dur-spring-20) var(--ease-spring-20);
}
/* ---------- Surfaces: size = thickness ---------- */
:where(.glass[data-glass-surface="control"]) {
--_b-light: var(--glass-b-light-control);
--_b-dark: var(--glass-b-dark-control);
--_a-light: var(--glass-a-light-control);
--_a-dark: var(--glass-a-dark-control);
--_k-light: var(--glass-k-control);
--_k-dark: var(--glass-k-dark-control);
--glass-blur: var(--glass-blur-control);
--glass-saturate: var(--glass-saturate-control);
--glass-contrast: var(--_k-light);
--glass-shadow: var(--shadow-glass-control);
--glass-near-glow: var(--glass-near-glow-control);
}
:where(.glass[data-glass-surface="sheet"]) {
--_b-light: var(--glass-b-light-sheet);
--_b-dark: var(--glass-b-dark-sheet);
--_a-light: var(--glass-a-light-sheet);
--_a-dark: var(--glass-a-dark-sheet);
--_k-light: var(--glass-k-sheet);
--_k-dark: var(--glass-k-dark-sheet);
--glass-blur: var(--glass-blur-sheet);
--glass-saturate: var(--glass-saturate-sheet);
--glass-contrast: var(--_k-light);
--glass-shadow: var(--shadow-glass-sheet);
--glass-radius: var(--radius-xl);
--glass-glow-w: 8px;
}
/* WebKit (Safari, iOS WKWebView) misplaces the backdrop-filter region of a rounded surface by its
* drop shadow's reach: with the 72 px sheet shadow only an inner rectangle, offset right and down,
* is frosted and the page shows through crisp beside it (box-shadow: none or border-radius: 0
* fixes it; a smaller shadow only shrinks the seam). Outside Blink (the Lens tier) a sheet keeps
* just its 0.5 px edge and the lift moves to a plain wrapper with the same box: .glass-lift below. */
:where(html:not([data-glass-tier="lens"])) :where(.glass[data-glass-surface="sheet"]) {
--glass-shadow: 0 0 0 transparent;
}
/* Island: the SAME translucent material as the nav, tuned for small text. The tone follows the
* content under it like any auto surface (data-glass-on="auto"), so over bright yellow it is a
* light, clearly see-through pill with dark labels, over a dark page a smoked one with light
* labels. Never a black or near-black fill (see the header pitfall). */
:where(.glass[data-glass-surface="island"]) {
--_b-light: var(--glass-b-light-island);
--_b-dark: var(--glass-b-dark-island);
--_a-light: var(--glass-a-light-island);
--_a-dark: var(--glass-a-dark-island);
--_k-light: var(--glass-k-island);
--_k-dark: var(--glass-k-dark-island);
--glass-blur: var(--glass-blur-island);
--glass-saturate: var(--glass-saturate-island);
--glass-contrast: var(--_k-light);
--glass-shadow: var(--shadow-glass-island);
--glass-near-glow: var(--glass-near-glow-island);
--glass-glow-w: 5px;
text-shadow: var(--glass-halo);
}
:where(.glass[data-glass-shape="capsule"]) { --glass-radius: var(--radius-pill); }
:where(.glass[data-glass-shape="rounded"]) { --glass-radius: var(--radius-xl); }
/* ---------- Tone: glass flips with the content under it (adaptive legibility) ----------
* data-glass-on="auto" is resolved by the runtime (liquid-glass.js initAdaptiveTone, or
* useAdaptiveTone in LiquidGlass.tsx) into light|dark from the luminance under the surface. */
:where(.glass[data-glass-on="light"]) { color-scheme: light; }
:where(.glass[data-glass-on="dark"]),
:where(:root[data-theme="dark"] .glass:not([data-glass-on="light"])) {
color-scheme: dark;
--_ink-tone: var(--glass-ink-dark);
--glass-contrast: var(--_k-dark);
--glass-brightness: var(--_b-dark);
--glass-tint: rgb(var(--glass-tint-rgb-dark) / calc(var(--_a-dark) + var(--_adapt)));
--glass-ink: var(--glass-ink-dark);
--glass-halo: var(--glass-halo-dark);
--glass-spec-a: var(--glass-spec-a-dark);
--glass-spec-b: var(--glass-spec-b-dark);
--glass-edge: var(--glass-edge-dark);
--glass-glow-top: var(--glass-glow-top-dark);
--glass-glow-bottom: var(--glass-glow-bottom-dark);
--glass-glow-side: var(--glass-glow-side-dark);
--glass-floor: var(--glass-floor-dark);
--glass-floor-hc: var(--glass-floor-hc-dark);
--glass-fill: var(--glass-fill-dark);
}
@media (prefers-color-scheme: dark) {
:where(:root:not([data-theme="light"]) .glass:not([data-glass-on="light"])) {
color-scheme: dark;
--_ink-tone: var(--glass-ink-dark);
--glass-contrast: var(--_k-dark);
--glass-brightness: var(--_b-dark);
--glass-tint: rgb(var(--glass-tint-rgb-dark) / calc(var(--_a-dark) + var(--_adapt)));
--glass-ink: var(--glass-ink-dark);
--glass-halo: var(--glass-halo-dark);
--glass-spec-a: var(--glass-spec-a-dark);
--glass-spec-b: var(--glass-spec-b-dark);
--glass-edge: var(--glass-edge-dark);
--glass-glow-top: var(--glass-glow-top-dark);
--glass-glow-bottom: var(--glass-glow-bottom-dark);
--glass-glow-side: var(--glass-glow-side-dark);
--glass-floor: var(--glass-floor-dark);
--glass-floor-hc: var(--glass-floor-hc-dark);
--glass-fill: var(--glass-fill-dark);
}
}
/* ---------- Clear variant: only over media (35% dim under bright media), bold bright
* content on top. No dynamic-range bound: never for text-heavy UI. */
:where(.glass[data-glass="clear"]) {
--glass-blur: var(--glass-blur-clear);
--glass-saturate: var(--glass-saturate-clear);
--glass-contrast: 1;
--glass-brightness: 1;
--glass-tint: rgb(255 255 255 / 0.04);
--glass-ink: #fff;
--glass-spec-a: 0.85;
--glass-spec-b: 0.5;
--glass-edge: rgb(0 0 0 / 0.28);
text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
/* ---------- Tint: the single primary action per view. The backdrop is bounded DARK under
* the accent so a white label keeps its contrast whatever sits behind. */
:where(.glass[data-glass-tint="primary"]) {
--glass-tint: color-mix(in oklab, var(--color-accent) var(--glass-tint-primary-mix), transparent);
--glass-ink: var(--color-accent-ink);
--glass-contrast: 0.6;
--glass-brightness: 0.62;
--glass-spec-a: 0.7;
--glass-spec-b: 0.4;
--glass-edge: color-mix(in oklab, var(--color-accent) 60%, black 40%);
--glass-glow-top: 0.22;
--glass-glow-bottom: 0.1;
--glass-near-glow: var(--glass-near-glow-control);
text-shadow: none;
}
/* ---------- Rim: 1 px specular just inside the 0.5 px dark edge ----------
* Static key light along --glass-key-angle (set per shape by the runtime: 180deg for bars and
* panels = top rim primary, bottom secondary, dark sides; 150deg for round controls =
* 10-12 o'clock primary, 4-6 o'clock secondary). A linear-gradient starts at the bounding-box
* corner, which a curved rim never touches, so the peak is pushed in by --glass-rim-g (the
* tangent gap) and held for --glass-rim-p before fading out by --glass-rim-f (all px along the
* light axis, written on resize only). The no-JS fallback is the bar rule. Nothing here moves
* with the pointer. */
:where(.glass) {
--_rim-a: rgb(var(--glass-spec-rgb) / var(--glass-spec-a));
--_rim-b: rgb(var(--glass-spec-rgb) / var(--glass-spec-b));
--_rim-0: rgb(var(--glass-spec-rgb) / 0);
--_rim-g: var(--glass-rim-g, 0px);
--_rim-ring: linear-gradient(
var(--glass-key-angle, 180deg),
var(--_rim-a) 0,
var(--_rim-a) calc(var(--_rim-g) + var(--glass-rim-p, 3px)),
var(--_rim-0) calc(var(--_rim-g) + var(--glass-rim-f, 12px)),
var(--_rim-0) calc(100% - var(--_rim-g) - var(--glass-rim-f, 12px)),
var(--_rim-b) calc(100% - var(--_rim-g) - var(--glass-rim-p, 3px)),
var(--_rim-b) 100%
);
}
:where(.glass)::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
padding: 1px;
border-radius: inherit;
pointer-events: none;
background: var(--_rim-ring);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* ---------- Bevel glow: the thick edge catching light (inner band, no mask needed) ---------- */
:where(.glass)::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgb(255 255 255 / var(--glass-glow-top)) 0,
rgb(255 255 255 / 0) var(--glass-glow-w),
rgb(255 255 255 / 0) calc(100% - var(--glass-glow-w)),
rgb(255 255 255 / var(--glass-glow-bottom)) 100%
),
linear-gradient(150deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 42%);
box-shadow: inset 0 0 var(--glass-glow-w) 0 rgb(255 255 255 / var(--glass-glow-side));
}
/* ---------- Proximity light layer ----------
* .glass__light one masked box: full alpha on a --glass-spot-ring wide rim, --glass-near-glow
* alpha inside (a two-level mask: ring = content-box XOR border-box, plus a faint
* interior layer). ONE disc inside it therefore lights the rim nearest a pointer
* (the specular that travels along the edge) and, faintly, the glass under it
* ("illuminates from within"). A press swells the disc.
* .glass__spot the disc: centred on (--lk-x, --lk-y), opacity = proximity, moved by
* translate / scale / opacity only (its own compositor layer, no repaint). */
:where(.glass) > .glass__light {
position: absolute;
inset: 0;
z-index: -1;
padding: var(--glass-spot-ring);
border-radius: inherit;
pointer-events: none;
overflow: hidden;
contain: strict; /* per-frame restyles of the disc stay inside this box */
-webkit-mask:
linear-gradient(rgb(0 0 0 / var(--glass-near-glow)) 0 0) content-box,
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: source-over, xor;
mask:
linear-gradient(rgb(0 0 0 / var(--glass-near-glow)) 0 0) content-box add,
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
}
:where(.glass) > .glass__light > .glass__spot {
--lk-w: 0;
--lk-o: 0;
--lk-p: 0;
--lk-x: 0px;
--lk-y: 0px;
position: absolute;
left: 0;
top: 0;
width: calc(var(--glass-spot-size) * 2);
height: calc(var(--glass-spot-size) * 2);
border-radius: 50%;
translate: calc(var(--lk-x) - var(--glass-spot-size)) calc(var(--lk-y) - var(--glass-spot-size));
/* A press spreads the contact light a little (1.25x) and brightens it (+0.1). */
scale: calc(1 + var(--lk-p) * 0.25);
background: radial-gradient(closest-side, rgb(255 255 255 / var(--glass-spot-a)), rgb(255 255 255 / calc(var(--glass-spot-a) * 0.7)) 38%, rgb(255 255 255 / calc(var(--glass-spot-a) * 0.22)) 72%, rgb(255 255 255 / 0));
opacity: min(1, calc(var(--lk-w) + var(--lk-p) * 0.1));
will-change: translate, scale, opacity;
}
/* ---------- Gel: interactive glass swells a little under a pressing pointer. :focus-visible is
* excluded so keyboard activation never animates. */
:where(.glass[data-glass-interactive]:active:not(:focus-visible)) {
scale: calc(1 + var(--glass-press-scale));
transition-duration: 120ms;
}
:where(.glass:focus-visible) {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
/* ---------- Vibrancy-style labels ON glass: primary = --glass-ink, secondary = .glass-label-2
* (the ink at reduced alpha, so the backdrop's hue reads through the glyphs a little). */
:where(.glass .glass-label-2) { color: var(--glass-label-2); }
/* ---------- Materialize instead of fade: light bending and tint ramp in, content follows ---------- */
@starting-style {
:where(.glass[data-glass-materialize]) {
--glass-blur: 0px;
--glass-tint: transparent;
--glass-contrast: 1;
--glass-brightness: 1;
box-shadow: none;
}
:where(.glass[data-glass-materialize]) > * { opacity: 0; }
}
:where(.glass[data-glass-materialize]) > * {
transition: opacity var(--dur-enter) var(--ease-out-quint) 40ms;
}
:where(.glass[data-glass-state="hidden"]) {
--glass-blur: 0px;
--glass-tint: transparent;
--glass-contrast: 1;
--glass-brightness: 1;
box-shadow: none;
visibility: hidden;
pointer-events: none;
transition:
--glass-blur var(--dur-exit) var(--ease-in-quart),
--glass-tint var(--dur-exit) var(--ease-in-quart),
--glass-contrast var(--dur-exit) var(--ease-in-quart),
--glass-brightness var(--dur-exit) var(--ease-in-quart),
box-shadow var(--dur-exit) var(--ease-in-quart),
visibility 0s linear var(--dur-exit);
}
:where(.glass[data-glass-state="hidden"]) > * {
opacity: 0;
transition: opacity var(--dur-exit) var(--ease-in-quart);
}
/* ---------- Reduced motion: rigid gel (the light runtime also parks the light at rest) ---------- */
:where([data-motion="reduce"] .glass) { scale: none; }
@media (prefers-reduced-motion: reduce) {
:where(:root:not([data-motion]) .glass) { scale: none; }
}
/* ---------- Optional grain (kills blur banding on large sheets) ---------- */
:where(.glass[data-glass-grain]) { background-image: var(--glass-grain); }
/* ---------- Helpers ---------- */
:where(.glass-inner) {
border-radius: max(var(--glass-radius, var(--radius-xl)) - var(--glass-pad), var(--radius-min));
}
/* Selected segment / pressed chip / field ON glass: a fill, never another glass. */
:where(.glass-fill) {
background-color: var(--glass-fill);
border-radius: max(var(--glass-radius, var(--radius-xl)) - var(--glass-pad), var(--radius-min));
}
/* HIG: a 35% dimming layer on bright media under Clear glass. Put it on the media ITSELF. */
:where(.media-dim) { filter: brightness(0.65); }
/* ---------- Scroll edge effect (soft): only where floating chrome sits over scrolling content.
* Its own element (never an ancestor of the glass); shown by liquid-glass.js once content has
* scrolled under it (data-scrolled). */
:where(.lk-scroll-edge) {
position: fixed;
inset: 0 0 auto;
height: calc(env(safe-area-inset-top, 0px) + var(--lk-scroll-edge-h, 96px));
z-index: var(--z-scroll-edge);
pointer-events: none;
/* Blur only, no tint: a page-colour tint turns into a grey haze over a dark section. */
-webkit-backdrop-filter: blur(6px) saturate(1.4);
backdrop-filter: blur(6px) saturate(1.4);
-webkit-mask-image: linear-gradient(#000 45%, transparent);
mask-image: linear-gradient(#000 45%, transparent);
opacity: 0;
transition: opacity var(--dur-hover) var(--ease-out-quint);
}
:where(:root[data-scrolled] .lk-scroll-edge) { opacity: 1; }
/* ---------- Lens tier (Blink only; set by the runtime) ----------
* The lens writes --glass-lens-filter: url(#id) on the surface; that filter carries the blur
* itself (frost body + crisp lensed rim band). Until it does, the fallback is the exact Frost
* chain, so the upgrade cannot flash or leave a hole. */
:where([data-glass-tier="lens"] .glass[data-glass-lens]) {
-webkit-backdrop-filter: var(--glass-lens-filter, blur(var(--glass-blur))) saturate(var(--glass-saturate))
contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
backdrop-filter: var(--glass-lens-filter, blur(var(--glass-blur))) saturate(var(--glass-saturate))
contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
}
/* ---------- Frost-only prism: big panels get a faint dispersion at the corners (the Lens
* tier produces the real thing per channel, so this is skipped there). */
:where(:root:not([data-glass-tier="lens"]) .glass[data-glass-surface="sheet"])::before {
background:
var(--_rim-ring),
conic-gradient(from 0deg,
rgb(255 80 200 / 0.35) 40deg, rgb(80 170 255 / 0.35) 55deg, transparent 70deg 200deg,
rgb(255 170 60 / 0.3) 220deg, rgb(120 90 255 / 0.3) 235deg, transparent 250deg);
}
/* ---------- Glass on glass is never right: a nested surface degrades to a fill ----------
* (After the Lens rule so a nested lens surface cannot re-enable its backdrop.) */
:where(.glass .glass) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--glass-fill);
box-shadow: none;
}
:where(.glass .glass)::before,
:where(.glass .glass)::after,
:where(.glass .glass) > .glass__light { display: none; }
/* ---------- Controls: liquid indicator, segmented, switch, slider (html/liquid-controls.js,
* react/LiquidIndicator.tsx + GlassSegmented / GlassTabsNav / GlassToggle / GlassSlider) ----------
* .lk-indicator the selection platter of a nav / segmented control / tabs: a FILL on glass, never
* glass. The React hook moves its two edges on springs (translate + width); the
* vanilla twin glides the box on one spring and stretches its ::before. Items sit
* above it (z-index 1).
* .lk-knob the thumb of a switch or slider: a solid knob at rest that turns into a glass drop
* only while it is in use (data-active), as HIG transient controls do. So it costs no
* backdrop surface at rest, and the stronger lens only shows while dragging. */
:where(.lk-indicator) {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 0;
height: 0;
border-radius: var(--radius-pill);
pointer-events: none;
}
:where(.lk-indicator)::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--lk-indicator-fill, var(--glass-fill));
}
/* Bars and items of the React twins (GlassSegmented, GlassTabsNav). Items paint above the
* indicator; the checked / current one has no fill of its own (the indicator is it). */
:where(.lk-segmented, .lk-tabs) {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
--glass-pad: 4px;
}
:where(.lk-segmented__label) { padding: 0 10px 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
:where(.lk-segmented__item, .lk-tabs__item) {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 16px;
border: 0;
border-radius: var(--radius-pill);
background: none;
color: inherit;
font: inherit;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
:where(.lk-segmented__item:not([aria-checked="true"]):hover, .lk-tabs__item:not([aria-selected="true"], [aria-current="page"]):hover) {
background: color-mix(in srgb, var(--glass-fill) 55%, transparent);
}
}
:where(.lk-segmented__item:focus-visible, .lk-tabs__item:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
:where(.lk-segmented__item:disabled) { opacity: 0.45; cursor: default; }
@media (pointer: coarse) {
:where(.lk-segmented__item, .lk-tabs__item) { height: 44px; }
}
/* ---------- Segmented (GlassSegmented.tsx): native radios, the liquid pill behind the checked
* option and a clipped copy of the labels in the "on" colour that travels with the pill, so a
* label never changes colour before the pill arrives under it. Real specificity, like the switch
* below: the bar tone's track is itself a .glass and these rules must win over glass.css's
* zero-specificity ones in any stylesheet order.
* data-tone paper: on content (sunken track, accent pill, accent-ink label)
* glass: on an existing glass surface (no track, a .glass-fill pill, glass inks)
* bar: its own floating glass bar (LiquidGlass track, .glass-fill pill)
* data-size md: 44 px track, sm: 36 px data-fit equal (default) | content */
.lk-seg {
--_h: 44px;
--_pad: 4px;
margin: 0;
min-inline-size: 0;
border: 0;
padding: 0;
}
.lk-seg[data-size="sm"] { --_h: 36px; --_pad: 3px; }
.lk-seg__legend {
margin-block-end: 8px;
padding: 0;
font-size: 13px;
color: var(--color-ink-muted);
}
.lk-seg__track {
position: relative;
display: flex;
align-items: stretch;
block-size: var(--_h);
padding: var(--_pad);
border-radius: var(--radius-pill);
}
.lk-seg[data-tone="paper"] > .lk-seg__track {
background: var(--color-bg-sunken);
box-shadow: inset 0 0 0 1px var(--color-line);
}
.lk-seg__thumb {
position: absolute;
left: 0;
top: 0;
border-radius: var(--radius-pill);
background: var(--color-accent);
box-shadow: var(--shadow-1);
pointer-events: none;
}
.lk-seg__option {
position: relative;
z-index: 1;
display: flex;
flex: 1 1 0;
min-inline-size: 0;
align-items: center;
justify-content: center;
padding-inline: 12px;
border-radius: var(--radius-pill);
font-size: 15px;
font-weight: 560;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
color: var(--color-ink-muted);
transition: color var(--dur-hover) linear;
-webkit-tap-highlight-color: transparent;
}
.lk-seg[data-size="sm"] .lk-seg__option { font-size: 14px; }
/* Content-fit labels never shrink under their text (they would overlap); a control wider than its
* column scrolls sideways instead. The block padding keeps the enlarged tap targets inside the scroller. */
.lk-seg[data-fit="content"] {
max-inline-size: 100%;
overflow-x: auto;
padding-block: var(--_hit, 0px);
margin-block: calc(-1 * var(--_hit, 0px));
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.lk-seg[data-fit="content"]::-webkit-scrollbar { display: none; }
.lk-seg[data-fit="content"] > .lk-seg__track { box-sizing: border-box; inline-size: max-content; min-inline-size: 100%; }
.lk-seg[data-fit="content"] .lk-seg__option { flex: 1 0 auto; }
.lk-seg__on {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
padding: var(--_pad);
pointer-events: none;
}
.lk-seg__on .lk-seg__option { color: var(--color-accent-ink); }
/* At rest the checked label carries the "on" colour itself and the overlay is gone: it exists only
* while the pill travels (data-moving). Until the pill has a size (before hydration) the checked
* paper label stays ink, never accent-ink on the sunken track. */
.lk-seg:not([data-moving]) .lk-seg__on { visibility: hidden; }
.lk-seg:not([data-moving]) label.lk-seg__option[data-checked="true"] { color: var(--color-accent-ink); transition: none; }
.lk-seg[data-tone="paper"]:not([data-placed]) label.lk-seg__option[data-checked="true"] { color: var(--color-ink); }
/* The radio covers its label and the track's padding (the tap target is the full track height),
* and at <= 768 px it reaches 44 px even on the 36 px size. Clicks land on it; focus shows on the
* label. */
.lk-seg__input {
position: absolute;
inset: calc(-1 * (var(--_pad) + var(--_hit, 0px))) 0;
z-index: 3;
inline-size: 100%;
block-size: auto;
margin: 0;
opacity: 0;
cursor: inherit;
}
@media (pointer: coarse), (max-width: 768px) {
.lk-seg { --_hit: max(0px, (44px - var(--_h)) / 2); }
.lk-seg[data-fit="content"] .lk-seg__option { padding-inline: 8px; font-size: 13px; }
}
.lk-seg__option[data-disabled] { color: var(--color-ink-faint); cursor: not-allowed; }
@media (hover: hover) {
label.lk-seg__option:not([data-checked="true"]):not([data-disabled]):hover { color: var(--color-ink); }
}
.lk-seg__option:has(.lk-seg__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }
/* On glass (glass, bar): the pill is a fill on the glass, never a second glass; labels use the
* glass inks, which the surface's contrast bound covers. */
.lk-seg:is([data-tone="glass"], [data-tone="bar"]) .lk-seg__thumb {
background: var(--glass-fill, rgb(0 0 0 / 0.07));
box-shadow: none;
}
.lk-seg:is([data-tone="glass"], [data-tone="bar"]) label.lk-seg__option { color: var(--glass-label-2, inherit); }
.lk-seg:is([data-tone="glass"], [data-tone="bar"]) .lk-seg__on .lk-seg__option,
.lk-seg:is([data-tone="glass"], [data-tone="bar"]):not([data-moving]) label.lk-seg__option[data-checked="true"] {
color: var(--glass-ink, inherit);
}
@media (hover: hover) {
.lk-seg:is([data-tone="glass"], [data-tone="bar"]) label.lk-seg__option:not([data-checked="true"]):not([data-disabled]):hover {
color: var(--glass-ink, inherit);
}
}
[data-contrast="more"] .lk-seg[data-tone="paper"] > .lk-seg__track { box-shadow: inset 0 0 0 1.5px currentColor; }
@media (prefers-contrast: more) {
:root:not([data-contrast]) .lk-seg[data-tone="paper"] > .lk-seg__track { box-shadow: inset 0 0 0 1.5px currentColor; }
}
@media (forced-colors: active) {
.lk-seg__thumb { forced-color-adjust: none; background: Highlight; }
.lk-seg__on .lk-seg__option,
.lk-seg:not([data-moving]) label.lk-seg__option[data-checked="true"] { color: HighlightText; forced-color-adjust: none; }
}
:where([data-input="key"], [data-motion="reduce"]) .lk-seg .lk-seg__option { transition: none; }
/* ---------- Switch (GlassToggle.tsx, initSwitch): iOS proportions, 64 x 30 track, 38 px capsule
* knob, 3 px inset. Unlike the rest of this file these rules carry real specificity: they must
* beat the zero-specificity .glass, nested-glass, Lens-tier and preference rules whatever order the
* stylesheets arrive in (a component chunk may load before or after glass.css). */
.lk-switch {
--lk-switch-w: 64px;
--lk-switch-h: 30px;
--lk-knob-inset: 3px;
--lk-knob-w: 38px;
position: relative;
display: inline-grid;
grid-auto-flow: column;
align-items: center;
gap: 12px;
min-block-size: 36px;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.lk-switch > .lk-switch__label { font-weight: 600; }
.lk-switch__track {
position: relative;
flex: none;
inline-size: var(--lk-switch-w);
block-size: var(--lk-switch-h);
border-radius: var(--radius-pill);
background: var(--lk-switch-off, rgb(120 120 128 / 0.28));
transition: background-color var(--dur-move) var(--ease-out-quint);
}
.lk-switch[aria-checked="true"] > .lk-switch__track { background: var(--lk-switch-on, #34c759); }
.lk-switch:focus-visible { outline: none; }
.lk-switch:focus-visible > .lk-switch__track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* 44 px touch target (HIG; the audit checks it at <= 768 px) without moving the track. */
@media (pointer: coarse), (max-width: 768px) {
.lk-switch { min-block-size: 44px; }
}
/* The knob: placed by CSS, on = a translate (the WAAPI slide only shows the path between). */
.lk-switch .lk-knob {
--glass-radius: var(--radius-pill);
position: absolute;
left: var(--lk-knob-inset);
top: var(--lk-knob-inset);
inline-size: var(--lk-knob-w);
block-size: calc(var(--lk-switch-h) - var(--lk-knob-inset) * 2);
transition:
background-color var(--dur-enter) var(--ease-out-quint),
box-shadow var(--dur-enter) var(--ease-out-quint);
}
.lk-switch[aria-checked="true"] .lk-knob {
translate: calc(var(--lk-switch-w) - var(--lk-knob-w) - var(--lk-knob-inset) * 2) 0;
}
/* In motion: a glass drop with the strong lens. Inside a glass sheet this is nested glass, which
* the rule above flattens to a fill; the drop is the one deliberate exception: it lives for a
* single slide (~0.5 s) and refracts the track right under it, which sits inside the sheet anyway.
* Outside Blink only the 0.5 px edge stays: WebKit shifts a rounded backdrop region by its shadow's
* reach. */
.lk-switch .lk-knob[data-active] {
/* A clear drop, not a jelly button: the control surface's saturate 1.5 / brightness 1.16 turn
* the green under it neon, so the drop keeps the colour almost as is and the rim does the work. */
--glass-saturate: 1.12;
--glass-brightness: 1.07;
--glass-contrast: 0.92;
--glass-tint: rgb(255 255 255 / 0.16);
background-color: var(--glass-tint);
-webkit-backdrop-filter: var(--glass-lens-filter, blur(var(--glass-blur))) saturate(var(--glass-saturate))
contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
backdrop-filter: var(--glass-lens-filter, blur(var(--glass-blur))) saturate(var(--glass-saturate))
contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
box-shadow: 0 0 0 0.5px var(--glass-edge);
}
[data-glass-tier="lens"] .lk-switch .lk-knob[data-active] {
box-shadow: 0 0 0 0.5px var(--glass-edge), 0 4px 14px rgb(0 0 0 / 0.16);
}
.lk-switch .lk-knob[data-active]::before,
.lk-switch .lk-knob[data-active]::after { display: block; }
/* At rest, and whenever the person asked for less transparency or more contrast (or the engine has
* no backdrop-filter): a solid white capsule, no backdrop surface, so a page of switches costs
* nothing from the glass budget. */
.lk-switch .lk-knob:not([data-active]),
[data-glass-tier="floor"] .lk-switch .lk-knob[data-active],
[data-transparency="reduce"] .lk-switch .lk-knob[data-active],
[data-contrast="more"] .lk-switch .lk-knob[data-active] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--lk-knob-rest, #fff);
box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 2px 6px rgb(0 0 0 / 0.18);
}
.lk-switch .lk-knob:not([data-active])::before,
.lk-switch .lk-knob:not([data-active])::after,
[data-glass-tier="floor"] .lk-switch .lk-knob::before,
[data-glass-tier="floor"] .lk-switch .lk-knob::after,
[data-transparency="reduce"] .lk-switch .lk-knob::before,
[data-transparency="reduce"] .lk-switch .lk-knob::after,
[data-contrast="more"] .lk-switch .lk-knob::before,
[data-contrast="more"] .lk-switch .lk-knob::after { display: none; }
@media (prefers-reduced-transparency: reduce) {
:root:not([data-transparency]) .lk-switch .lk-knob[data-active] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--lk-knob-rest, #fff);
}
:root:not([data-transparency]) .lk-switch .lk-knob::before,
:root:not([data-transparency]) .lk-switch .lk-knob::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.lk-switch .lk-knob[data-active] { background-color: var(--lk-knob-rest, #fff); }
}
/* Increase Contrast: the knob stays solid with a hard edge and the off track gets a border. */
[data-contrast="more"] .lk-switch .lk-knob { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.18); }
[data-contrast="more"] .lk-switch:not([aria-checked="true"]) > .lk-switch__track { box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.5); }
@media (prefers-contrast: more) {
:root:not([data-contrast]) .lk-switch .lk-knob,
:root:not([data-contrast]) .lk-switch .lk-knob[data-active] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--lk-knob-rest, #fff);
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.18);
}
:root:not([data-contrast]) .lk-switch .lk-knob::before,
:root:not([data-contrast]) .lk-switch .lk-knob::after { display: none; }
:root:not([data-contrast]) .lk-switch:not([aria-checked="true"]) > .lk-switch__track { box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.5); }
}
/* Forced colors: system colours only; the state reads from the knob's side and the Highlight fill. */
@media (forced-colors: active) {
.lk-switch__track {
forced-color-adjust: none;
background: Canvas;
border: 1px solid CanvasText;
}
.lk-switch[aria-checked="true"] > .lk-switch__track { background: Highlight; border-color: Highlight; }
/* :root:root lifts these above every preference rule above (up to 0,5,0) without !important. */
:root:root .lk-switch .lk-knob:is([data-active], :not([data-active])) {
forced-color-adjust: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: CanvasText;
box-shadow: none;
outline: none;
}
:root:root .lk-switch[aria-checked="true"] .lk-knob:is([data-active], :not([data-active])) { background: HighlightText; }
:root:root .lk-switch .lk-knob::before,
:root:root .lk-switch .lk-knob::after { display: none; }
.lk-switch:focus-visible > .lk-switch__track { outline-color: CanvasText; }
}
:where(.lk-slider) {
--lk-slider-v: 0.5;
--lk-knob-w: 38px;
position: relative;
display: block;
min-width: 120px;
height: 36px;
cursor: pointer;
touch-action: none;
/* The script never preventDefaults pointerdown (a scripted focus would ring on every drag), so
* a drag must not start a text selection. */
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
:where(.lk-slider > .lk-slider__track) {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
margin-top: -3px;
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--lk-slider-track, rgb(120 120 128 / 0.28));
}
:where(.lk-slider > .lk-slider__track > .lk-slider__fill) {
display: block;
width: calc(var(--lk-knob-w) / 2 + var(--lk-slider-v) * (100% - var(--lk-knob-w)));
height: 100%;
border-radius: inherit;
background: var(--lk-slider-fill, currentColor);
}
:where(.lk-slider .lk-knob) {
position: absolute;
top: 50%;
left: calc(var(--lk-slider-v) * (100% - var(--lk-knob-w)));
width: var(--lk-knob-w);
height: 24px;
margin-top: -12px;
}
/* Dragging grows the drop ~1.15x (on the knob's spring transition); reduced motion keeps its size. */
:where(:root:not([data-motion="reduce"]) .lk-slider[data-dragging] .lk-knob[data-active]) { scale: 1.15; }
:where(.lk-slider:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-pill); }
/* The knob at rest: solid, no backdrop (after the Lens and nesting rules so it wins over both). */
:where(.lk-knob) {
--glass-radius: var(--radius-pill);
transition:
background-color var(--dur-enter) var(--ease-out-quint),
box-shadow var(--dur-enter) var(--ease-out-quint),
scale var(--dur-spring-20) var(--ease-spring-20);
}
:where(.lk-knob:not([data-active])) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--lk-knob-rest, #fff);
box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 2px 6px rgb(0 0 0 / 0.18);
}
:where(.lk-knob:not([data-active]))::before,
:where(.lk-knob:not([data-active]))::after,
:where(.lk-knob:not([data-active])) > .glass__light { display: none; }
/* ---------- Floor tier: opaque. No backdrop-filter support, forced by tier, or less
* transparency requested (Apple: "frostier, obscures more"). The rim stays: it is structure.
* This is the ONE place where glass becomes opaque, and only because the person asked for it. */
:where([data-glass-tier="floor"] .glass),
:where([data-transparency="reduce"] .glass) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--glass-floor);
background-image: none;
color: var(--_ink-tone);
text-shadow: none;
}
:where([data-glass-tier="floor"] .glass) > .glass__light,
:where([data-transparency="reduce"] .glass) > .glass__light { display: none; }
:where([data-glass-tier="floor"] .glass[data-glass-tint="primary"]),
:where([data-transparency="reduce"] .glass[data-glass-tint="primary"]) {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
@media (prefers-reduced-transparency: reduce) {
:where(:root:not([data-transparency]) .glass) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--glass-floor);
background-image: none;
color: var(--_ink-tone);
text-shadow: none;
}
:where(:root:not([data-transparency]) .glass) > .glass__light { display: none; }
:where(:root:not([data-transparency]) .glass[data-glass-tint="primary"]) {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:where(.glass) {
background-color: var(--glass-floor);
color: var(--_ink-tone);
text-shadow: none;
}
:where(.glass) > .glass__light { display: none; }
:where(.glass[data-glass-tint="primary"]) {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
}
/* ---------- Increase Contrast: predominantly black or white with a contrasting border ---------- */
:where([data-contrast="more"] .glass) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--glass-floor-hc);
background-image: none;
color: var(--_ink-tone);
--glass-label-2: var(--_ink-tone);
text-shadow: none;
box-shadow: inset 0 0 0 1.5px currentColor, var(--glass-shadow);
}
:where([data-contrast="more"] .glass)::before,
:where([data-contrast="more"] .glass)::after,
:where([data-contrast="more"] .glass) > .glass__light { display: none; }
:where([data-contrast="more"] .glass[data-glass-tint="primary"]) {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
@media (prefers-contrast: more) {
:where(:root:not([data-contrast]) .glass) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: var(--glass-floor-hc);
background-image: none;
color: var(--_ink-tone);
--glass-label-2: var(--_ink-tone);
text-shadow: none;
box-shadow: inset 0 0 0 1.5px currentColor, var(--glass-shadow);
}
:where(:root:not([data-contrast]) .glass)::before,
:where(:root:not([data-contrast]) .glass)::after,
:where(:root:not([data-contrast]) .glass) > .glass__light { display: none; }
:where(:root:not([data-contrast]) .glass[data-glass-tint="primary"]) {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
}
/* ---------- Forced colors: system colours only ---------- */
@media (forced-colors: active) {
:where(.glass) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: Canvas;
color: CanvasText;
outline: 1px solid CanvasText;
outline-offset: -1px;
text-shadow: none;
}
:where(.glass)::before,
:where(.glass)::after,
:where(.glass) > .glass__light { display: none; }
:where(.glass[data-glass-tint="primary"]) {
background: ButtonFace;
color: ButtonText;
outline: 2px solid ButtonText;
}
:where(.glass:focus-visible) {
outline: 2px solid Highlight;
outline-offset: 3px;
}
}
/* ---------- Lift on a wrapper: the sheet's drop shadow outside Blink (see the sheet note above).
* The wrapper has the glass's exact box and must stay free of opacity / filter / mask (a Backdrop
* Root). A