51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T19df,'use client'; import './styles/liquid.css'; import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore, type ReactNode, } from 'react'; import { applyPreferences, computeAutomaticSafeguards, GLASS_THICKNESS, loadPreferences, persistPreferences, type GlassyUiPreferences, type GlassyUiTheme, } from './lib/preferences'; type PreferenceState = Required; type SystemPreferenceState = Pick< PreferenceState, 'theme' | 'quality' | 'reduceMotion' | 'reduceTransparency' >; type PreferenceSources = { explicit: GlassyUiPreferences; system: SystemPreferenceState; }; type PreferenceContextValue = { preferences: PreferenceState; setPreferences: (prefs: Partial) => void; }; const DEFAULT_STATE: PreferenceState = { theme: 'dark', mode: 'clear', reduceTransparency: false, reduceMotion: false, quality: 'high', thickness: GLASS_THICKNESS.regular, }; const SERVER_SOURCES: PreferenceSources = { explicit: {}, system: { theme: DEFAULT_STATE.theme, quality: DEFAULT_STATE.quality, reduceMotion: DEFAULT_STATE.reduceMotion, reduceTransparency: DEFAULT_STATE.reduceTransparency, }, }; const subscribeToHydration = () => () => {}; const transparencyQuery = '(prefers-reduced-transparency: reduce)'; function subscribeToSystemTransparency(onChange: () => void) { const query = window.matchMedia(transparencyQuery); query.addEventListener('change', onChange); return () => query.removeEventListener('change', onChange); } const readSystemTransparency = () => window.matchMedia(transparencyQuery).matches; const readServerTransparency = () => DEFAULT_STATE.reduceTransparency; const PreferencesContext = createContext(null); function warnPreferenceFailure(message: string, cause: unknown) { console.warn(message, cause); } function mergePreferences( base: PreferenceState, next: Partial, ): PreferenceState { return { ...base, ...next, }; } function readSystemPreferences(): SystemPreferenceState { if (typeof window === 'undefined') { return { theme: DEFAULT_STATE.theme, quality: DEFAULT_STATE.quality, reduceMotion: DEFAULT_STATE.reduceMotion, reduceTransparency: DEFAULT_STATE.reduceTransparency, }; } const automatic = computeAutomaticSafeguards(); const systemPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches; return { theme: systemPrefersLight ? 'light' : DEFAULT_STATE.theme, quality: automatic.quality, reduceMotion: automatic.reduceMotion, reduceTransparency: automatic.reduceTransparency, }; } function readInitialPreferenceSources(): PreferenceSources { if (typeof window === 'undefined') { return { explicit: {}, system: readSystemPreferences() }; } let explicit: GlassyUiPreferences = {}; try { explicit = loadPreferences(); } catch (error) { warnPreferenceFailure('Failed to load Glassy UI preferences', error); } return { explicit, system: readSystemPreferences() }; } /** * Holds the glass preferences and applies them to the document. `defaultTheme` is the theme a * visitor sees until they choose one, whatever their system prefers; leave it out to follow the * system setting. */ export function GlassProvider({ children, defaultTheme, }: { children: ReactNode; defaultTheme?: GlassyUiTheme; }) { const [sources, setSources] = useState(readInitialPreferenceSources); const hydrated = useSyncExternalStore( subscribeToHydration, () => true, () => false, ); const activeSources = hydrated ? sources : SERVER_SOURCES; const preferences = useMemo( () => mergePreferences( mergePreferences( DEFAULT_STATE, defaultTheme ? { ...activeSources.system, theme: defaultTheme } : activeSources.system, ), activeSources.explicit, ), [activeSources, defaultTheme], ); useEffect(() => { if (!hydrated || typeof document === 'undefined') { return; } applyPreferences(document, preferences); }, [hydrated, preferences]); const update = useCallback((next: Partial) => { // The document changes before React renders whatever asked for the change, so a // control's own flip runs under the setting it lands in. Turning Reduce Motion off // from its own switch then animates instead of snapping under the old setting. if (typeof document !== 'undefined') { applyPreferences(document, next); } setSources((previous) => { const explicit = { ...previous.explicit, ...next }; if (typeof window !== 'undefined') { try { persistPreferences(explicit); } catch (error) { warnPreferenceFailure('Failed to persist Glassy UI preferences', error); } } return { ...previous, explicit }; }); }, []); useEffect(() => { if (typeof window === 'undefined') { return; } const queries = [ '(prefers-color-scheme: light)', '(prefers-reduced-motion: reduce)', '(prefers-reduced-transparency: reduce)', '(pointer: coarse)', ].map((query) => window.matchMedia(query)); const handler = () => { setSources((previous) => ({ ...previous, system: readSystemPreferences() })); }; queries.forEach((query) => query.addEventListener('change', handler)); return () => queries.forEach((query) => query.removeEventListener('change', handler)); }, []); const value = useMemo( () => ({ preferences, setPreferences: update, }), [preferences, update], ); return {children}; } export const PreferencesProvider = GlassProvider; export function useOptionalPreferences() { const context = useContext(PreferencesContext); const reduceTransparency = useSyncExternalStore( context ? subscribeToHydration : subscribeToSystemTransparency, context ? () => context.preferences.reduceTransparency : readSystemTransparency, readServerTransparency, ); return ( context ?? { preferences: { ...DEFAULT_STATE, reduceTransparency }, setPreferences: () => {}, } ); } export function usePreferences() { const context = useContext(PreferencesContext); if (!context) { throw new Error('usePreferences must be used within PreferencesProvider'); } return context; } 54:T6fc1,export function LiquidFilters() { return ( ); } const DISPLACEMENT_MAP = 'data:image/png;base64,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'; const SWITCHER_MAP = 'data:image/webp;base64,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'; 55:T1759,export type GlassyUiMode = 'clear' | 'tinted'; export type GlassyUiQuality = 'low' | 'medium' | 'high'; export type GlassyUiTheme = 'light' | 'dark'; export interface GlassyUiPreferences { theme?: GlassyUiTheme; mode?: GlassyUiMode; reduceTransparency?: boolean; reduceMotion?: boolean; quality?: GlassyUiQuality; /** * How thick the glass is, as a multiple of regular: its rim widens, bends the * backdrop further and splits more colour. Kept between 0.25 and 2. */ thickness?: number; } /** The range of the thickness preference. 1 is regular glass. */ export const GLASS_THICKNESS = { min: 0.25, max: 2, regular: 1 } as const; const THICKNESS_PROPERTY = '--lg-glass-thickness'; function clampThickness(value: number) { return Math.min(Math.max(value, GLASS_THICKNESS.min), GLASS_THICKNESS.max); } type NavigatorWithMemory = Navigator & { deviceMemory?: number }; const DATA_KEYS = { theme: 'data-lg-theme', mode: 'data-lg-mode', reduceTransparency: 'data-lg-reduce-transparency', reduceMotion: 'data-lg-reduce-motion', quality: 'data-lg-quality', } as const; const STORAGE_KEY = 'glassy-ui-preferences'; const THEMES = ['light', 'dark'] as const satisfies readonly GlassyUiTheme[]; const MODES = ['clear', 'tinted'] as const satisfies readonly GlassyUiMode[]; const QUALITIES = ['low', 'medium', 'high'] as const satisfies readonly GlassyUiQuality[]; const FLAGS = [true, false] as const; export function applyPreferences(target: Document, prefs: GlassyUiPreferences) { const root = target.documentElement; if (prefs.theme) { root.setAttribute(DATA_KEYS.theme, prefs.theme); } if (prefs.mode) { root.setAttribute(DATA_KEYS.mode, prefs.mode); } if (prefs.reduceTransparency !== undefined) { root.setAttribute(DATA_KEYS.reduceTransparency, prefs.reduceTransparency ? '1' : '0'); } if (prefs.reduceMotion !== undefined) { root.setAttribute(DATA_KEYS.reduceMotion, prefs.reduceMotion ? '1' : '0'); } if (prefs.quality) { root.setAttribute(DATA_KEYS.quality, prefs.quality); } if (prefs.thickness !== undefined) { root.style.setProperty(THICKNESS_PROPERTY, String(clampThickness(prefs.thickness))); } } export function readPreferences(source: Document): Required { const root = source.documentElement; const readOption = (name: string, options: readonly T[], fallback: T) => { const value = root.getAttribute(name); return options.find((option) => option === value) ?? fallback; }; return { theme: readOption(DATA_KEYS.theme, THEMES, 'dark'), mode: readOption(DATA_KEYS.mode, MODES, 'clear'), reduceTransparency: root.getAttribute(DATA_KEYS.reduceTransparency) === '1', reduceMotion: root.getAttribute(DATA_KEYS.reduceMotion) === '1', quality: readOption(DATA_KEYS.quality, QUALITIES, 'high'), thickness: clampThickness( Number.parseFloat(root.style.getPropertyValue(THICKNESS_PROPERTY)) || GLASS_THICKNESS.regular, ), }; } export function persistPreferences( prefs: GlassyUiPreferences, storage: Storage = window.localStorage, ) { const current = loadPreferences(storage); const merged = { ...current, ...prefs } satisfies GlassyUiPreferences; storage.setItem(STORAGE_KEY, JSON.stringify(merged)); } export function loadPreferences( storage: Pick = window.localStorage, ): GlassyUiPreferences { const raw = storage.getItem(STORAGE_KEY); if (!raw) { return {}; } try { return decodePreferences(raw); } catch (error) { console.warn('Failed to parse Glassy UI preferences', error); return {}; } } /** Keep the stored fields that hold a known value; drop stale or malformed entries. */ function decodePreferences(raw: string): GlassyUiPreferences { const stored: ReadonlyMap = new Map(Object.entries(JSON.parse(raw))); const prefs: GlassyUiPreferences = {}; const keep = ( key: K, options: readonly NonNullable[], ) => { const value = options.find((option) => option === stored.get(key)); if (value !== undefined) { prefs[key] = value; } }; keep('theme', THEMES); keep('mode', MODES); keep('reduceTransparency', FLAGS); keep('reduceMotion', FLAGS); keep('quality', QUALITIES); const thickness = Number(stored.get('thickness')); if (Number.isFinite(thickness) && stored.has('thickness')) { prefs.thickness = clampThickness(thickness); } return prefs; } export { STORAGE_KEY as PREFERENCE_STORAGE_KEY }; export function computeAutomaticSafeguards(): Required< Pick > { if (typeof window === 'undefined') { return { quality: 'high', reduceMotion: false, reduceTransparency: false }; } const supportsMatchMedia = 'matchMedia' in window; const coarsePointer = supportsMatchMedia && window.matchMedia('(pointer: coarse)').matches; const prefersReducedMotion = supportsMatchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const prefersReducedTransparency = supportsMatchMedia && window.matchMedia('(prefers-reduced-transparency: reduce)').matches; // SAFETY: deviceMemory is a number where the Device Memory API exists and absent elsewhere. const deviceMemory = (navigator as NavigatorWithMemory).deviceMemory; const lowMemory = deviceMemory !== undefined && deviceMemory <= 4; // Device heuristics only lower rendering quality. Opaque surfaces and stopped // motion stay reserved for the user's own accessibility settings. const quality: GlassyUiQuality = prefersReducedTransparency || lowMemory ? 'low' : coarsePointer || prefersReducedMotion ? 'medium' : 'high'; return { quality, reduceMotion: Boolean(prefersReducedMotion), reduceTransparency: Boolean(prefersReducedTransparency), }; } 56:T24c56,/* Glassy UI styles live in the components layer, below Tailwind utilities, so a className such as rounded-xl or p-8 overrides the library default. These statements repeat Tailwind 4's own layer order, so it holds even when this file loads before Tailwind. */ @layer properties; @layer theme, base, components, utilities; @property --lg-fresnel { syntax: ''; initial-value: 0; inherits: true; } @property --lg-specular { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-scale { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-blur { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-scale-a { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-scale-b { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-blur-a { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-blur-b { syntax: ''; initial-value: 0; inherits: true; } @property --lg-refraction-dispersion { syntax: ''; initial-value: 0; inherits: true; } @property --lg-rim-width-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-highlight-strength { syntax: ''; initial-value: 0; inherits: true; } @property --lg-rim-micro-mask { syntax: ''; initial-value: 1; inherits: true; } @property --lg-rim-corner-mask { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-micro-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-corner-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-ca-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-ca-offset-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-rim-thickness { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-rim-alpha-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-tangent-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-debug-highlight-scale { syntax: ''; initial-value: 1; inherits: true; } @property --lg-filter-scale { syntax: ''; initial-value: 0.98; inherits: true; } @property --lg-bg { syntax: ''; initial-value: #1c1c1e; inherits: true; } @property --lg-panel { syntax: ''; initial-value: rgba(255, 255, 255, 0.04); inherits: true; } @property --lg-press { syntax: ''; initial-value: 0; inherits: true; } /* How high a button's glass rests above the page: 1 at rest, lower under a pointer, nearly down while pressed. Its shadow and the light it lets through follow the height; the glass itself stays put. Registered so the height eases instead of jumping. */ @property --lg-button-rise { syntax: ''; initial-value: 1; inherits: true; } /* Where the light on a prominent button comes from: 0deg straight overhead. A pointer swings it over to the top left. Registered so the light eases across instead of jumping. */ @property --lg-button-light-angle { syntax: ''; initial-value: 0deg; inherits: true; } /* Glass scene material. Registered so the renderer reads resolved values and tints can transition; engines without @property resolve them by probe. */ @property --lg-scene-tint { syntax: ''; initial-value: transparent; inherits: false; } @property --lg-scene-frost { syntax: ''; initial-value: 0px; inherits: false; } @property --lg-scene-merge { syntax: ''; initial-value: 0px; inherits: true; } @property --lg-scene-flow { syntax: ''; initial-value: 0; inherits: false; } @property --lg-scene-ink { syntax: ''; initial-value: transparent; inherits: false; } @layer base { :where(.lg-glass-surface > *) { position: relative; z-index: 2; } } @layer components { :root { /* Core Physics: the frost every glass layer reads. Controls, alerts, badges and dock labels cap the blur at their own size and follow the rest. */ --lg-glass-blur: 20px; --lg-glass-sat: 1.8; --lg-glass-contrast: 0.9; --lg-glass-brightness: 1; --lg-glass-alpha: 0.02; --lg-bg: #1c1c1e; --lg-panel: rgba(255, 255, 255, 0.04); --lg-foreground: #f5f5f7; --lg-muted-foreground: #e5e5ea; --lg-border: rgba(245, 245, 247, 0.22); --lg-control-surface: rgba(245, 245, 247, 0.08); --lg-control-surface-hover: rgba(245, 245, 247, 0.14); --lg-opaque-surface: #2c2c2e; /* Floating layers keep 4.5:1 text contrast over a pure white or black backdrop. */ --lg-overlay-surface: rgb(44 44 46 / 0.78); --lg-scrim: rgb(0 0 0 / 0.45); /* Slabs are clear glass. The page shows through, dimmed by brightness so muted text keeps 4.5:1 over pure white. The lens rim is dimmed less, but never above what holds that bar at the very edge. */ --lg-slab-tint: rgb(28 28 30 / 0.3); --lg-slab-brightness: 0.38; --lg-slab-rim-brightness: 0.46; --lg-slab-blur: 3; /* The header is a clearer slab. Its links sit clear of the rim, so the rim lets the page through undimmed, bent and split into colour, while the top keeps muted links at 4.5:1 over pure white. */ --lg-header-tint: rgb(28 28 30 / 0.35); --lg-header-brightness: 0.55; --lg-header-rim-brightness: 1; /* Familiar blue for actions; Vermilion belongs to the brand and artwork. */ --lg-accent: #0067d9; --lg-accent-foreground: #ffffff; /* Prominent buttons are blue glass. The tint recolours whatever lies behind them and caps how bright it can get, so white text keeps 4.5:1 over any backdrop. The fill stands in where there is no glass: reduced transparency, forced colours and a GlassScene. */ --lg-prominent-fill: #0067d9; --lg-prominent-tint: grayscale(1) contrast(0.4) brightness(0.55) sepia(1) hue-rotate(174deg) saturate(6) brightness(1.12); --lg-prominent-glow: 178 214 255; --lg-prominent-shade: 4 33 65; /* Focus stays neutral so it does not read as a blue selected state. */ --lg-focus-ring: #b8b8be; --lg-invalid: #ff7a8e; --lg-disabled-opacity: 0.45; --lg-motion-duration: 200ms; /* Springy settle for presses, toggles and moving indicators */ --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lg-ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* System controls: the resting track, the switch's on state and the white knob that turns to clear glass under a finger */ --lg-track: rgb(118 118 128 / 0.36); --lg-switch-on: #0067d9; --lg-knob: #ffffff; --lg-knob-shadow: 0 2px 6px rgb(28 28 30 / 0.16), 0 1px 2px rgb(28 28 30 / 0.1), 0 0 0 0.5px rgb(28 28 30 / 0.05); /* The fixed light the CSS glass is lit by: where its highlight sits (0 to 1 across the glass), the direction it strikes the rims from, and its strength. The glass never follows the pointer. */ --lg-light-x: 0.5; --lg-light-y: 0.5; --lg-light-dir-x: 0; --lg-light-dir-y: 0; --lg-light-level: 0; /* Theme Colors */ --lg-ink-dark: #ffffff; --lg-ink-light: #000000; --lg-fresnel: 0; --lg-specular: 0; --lg-refraction-scale: 24; --lg-refraction-blur: 16; /* Edge reflex: strength of the lit bevel and of the shaded inner edge */ --lg-reflex-light: 0.42; --lg-reflex-dark: 1.4; --lg-button-reflex-light: 0.7; --lg-sheen-alpha: 0.05; /* Specular edge: a hairline ring brightest where the light enters (top left), with a softer counter highlight on the far edge. The glow is the light caught inside the glass thickness. */ --lg-rim-width: 1px; --lg-specular-peak: 0.45; --lg-specular-counter: 0.22; --lg-specular-floor: 0.07; --lg-glow-alpha: 0.06; /* Lighting & Depth: outer shadows only, the glass edge lives in --lg-glass-rim */ --lg-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 8px 24px -4px rgb(0 0 0 / 0.28); --lg-shadow-raised: 0 2px 6px rgb(0 0 0 / 0.2), 0 30px 60px -18px rgb(0 0 0 / 0.55); --lg-input-shadow: inset 0 1px 2px rgb(0 0 0 / 0.24), inset 0 -1px 0 rgb(255 255 255 / 0.06); /* Chromium edge lens, read as plain numbers by useLensFilter: depth scales the edge bend, blur is the frost radius in px. */ --lg-lens-depth: 1; --lg-lens-blur: 6; --lg-lens-saturation: 1.5; --lg-lens-bevel: 0; --lg-lens-thickness: 0; --lg-lens-ior: 1.5; --lg-lens-dispersion: 0.16; --lg-lens-body-brightness: 1; --lg-lens-rim-brightness: 1; --lg-glass-thickness: 1; --lg-noise-alpha: 0.03; --lg-radius-md: 16px; --lg-radius-lg: 24px; /* Glass scene: shadow and highlight strength, and extra white in the tint. */ --lg-scene-shadow: 0.34; --lg-scene-highlight: 1; --lg-scene-tint-boost: 0; --lg-noise-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Cfilter id="grain"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Crect width="120" height="120" filter="url(%23grain)" opacity="0.5"/%3E%3C/svg%3E'); } [data-lg-theme='dark'] { color-scheme: dark; } /* Light theme */ [data-lg-theme='light'] { color-scheme: light; --lg-bg: #faf9f7; --lg-panel: rgba(255, 255, 255, 0.5); --lg-glass-alpha: 0.15; --lg-glass-blur: 16px; --lg-glass-contrast: 1; --lg-glass-sat: 1.6; --lg-glass-brightness: 1.06; --lg-ink-dark: #222224; --lg-ink-light: #222224; --lg-ink: var(--lg-ink-dark); --lg-foreground: #222224; --lg-muted-foreground: #505055; --lg-border: rgba(0, 0, 0, 0.14); --lg-control-surface: rgba(255, 255, 255, 0.72); --lg-control-surface-hover: rgba(255, 255, 255, 0.95); --lg-opaque-surface: #ffffff; --lg-overlay-surface: rgb(255 255 255 / 0.82); --lg-scrim: rgb(0 0 0 / 0.16); --lg-slab-tint: rgb(255 255 255 / 0.8); --lg-slab-brightness: 1; --lg-slab-rim-brightness: 1; --lg-slab-blur: 3; /* The tint alone keeps muted header links at 4.5:1 over pure black. */ --lg-header-tint: rgb(255 255 255 / 0.77); --lg-header-brightness: 1; --lg-header-rim-brightness: 1; --lg-accent: #0067d9; --lg-prominent-tint: grayscale(1) contrast(0.5) brightness(0.35) sepia(1) hue-rotate(172deg) saturate(6) brightness(1.4); --lg-focus-ring: #66666a; --lg-invalid: #c4153f; --lg-track: rgb(118 118 128 / 0.2); --lg-switch-on: #0067d9; --lg-noise-alpha: 0.02; --lg-reflex-light: 1; --lg-reflex-dark: 0.8; --lg-button-reflex-light: 1; --lg-sheen-alpha: 0.08; --lg-specular-peak: 0.7; --lg-specular-counter: 0.55; --lg-specular-floor: 0.35; --lg-glow-alpha: 0.14; --lg-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -6px rgb(0 0 0 / 0.14); --lg-shadow-raised: 0 2px 6px rgb(0 0 0 / 0.06), 0 28px 56px -18px rgb(0 0 0 / 0.26); --lg-input-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08), inset 0 -1px 0 rgb(255 255 255 / 0.8); --lg-refraction-scale: 24; --lg-refraction-blur: 20; --lg-fresnel: 0.1; --lg-specular: 0.05; --lg-highlight-strength: 0.1; /* The light sits a little above centre and catches the top rims. */ --lg-light-y: 0.3; --lg-light-dir-y: -0.35; --lg-light-level: 0.15; --lg-scene-shadow: 0.16; --lg-scene-tint-boost: 0.06; } [data-lg-theme='dark'][data-lg-mode='clear'] { --lg-glass-alpha: 0.02; --lg-glass-sat: 1.8; --lg-glass-contrast: 0.9; } [data-lg-theme='dark'][data-lg-mode='tinted'] { --lg-glass-alpha: 0.12; --lg-glass-sat: 1.5; --lg-glass-contrast: 0.9; } [data-lg-theme='light'][data-lg-mode='clear'] { --lg-glass-alpha: 0.08; --lg-glass-sat: 1.8; --lg-glass-contrast: 1.02; --lg-glass-blur: 20px; } [data-lg-theme='light'][data-lg-mode='tinted'] { --lg-glass-alpha: 0.25; --lg-glass-sat: 1.4; --lg-glass-contrast: 1; --lg-glass-blur: 14px; } /* Tinted slabs frost harder and hold a denser tint; the rim still lets more light through. The header matches the other slabs. */ [data-lg-theme='dark'][data-lg-mode='tinted'] { --lg-slab-tint: rgb(28 28 30 / 0.55); --lg-slab-brightness: 0.55; --lg-slab-rim-brightness: 0.65; --lg-slab-blur: 14; --lg-header-tint: rgb(28 28 30 / 0.55); --lg-header-brightness: 0.55; --lg-header-rim-brightness: 0.65; } [data-lg-theme='light'][data-lg-mode='tinted'] { --lg-slab-tint: rgb(255 255 255 / 0.9); --lg-slab-blur: 14; --lg-header-tint: rgb(255 255 255 / 0.9); } [data-lg-mode='tinted'] { --lg-glass-alpha: 0.72; --lg-glass-blur: 32px; --lg-glass-sat: 1.4; --lg-glass-contrast: 0.9; --lg-lens-blur: 10; } :root[data-lg-quality='low'] { --lg-scene-highlight: 0.6; --lg-glass-blur: 6px; --lg-glass-sat: 1.05; --lg-glass-contrast: 1; --lg-glass-brightness: 1; --lg-refraction-scale: 0; --lg-refraction-blur: 0; --lg-highlight-strength: 0; --lg-lens-depth: 0; } /* Touch devices and reduced-motion settings land here. The colour split costs six more filter passes a frame on every lens in view, so it is left out. */ :root[data-lg-quality='medium'] { --lg-lens-dispersion: 0; --lg-glass-blur: 12px; --lg-glass-sat: 1.4; --lg-glass-contrast: 0.96; --lg-refraction-scale: 10; --lg-refraction-blur: 8; } :root[data-lg-quality='high'] { --lg-refraction-scale: 16; --lg-refraction-blur: 10; } :root[data-lg-reduce-transparency='1'] { --lg-glass-blur: 0px; --lg-glass-alpha: 0.95; --lg-noise-alpha: 0.01; --lg-glass-contrast: 1; --lg-glass-sat: 1; --lg-glass-brightness: 1; --lg-refraction-scale: 0; --lg-lens-depth: 0; } [data-lg-theme='dark'][data-lg-reduce-transparency='1'] { --lg-opaque-surface: #2c2c2e; --lg-control-surface: #3a3a3c; --lg-control-surface-hover: #48484a; --lg-track: #48484a; } [data-lg-theme='light'][data-lg-reduce-transparency='1'] { --lg-opaque-surface: #ffffff; --lg-control-surface: #f0f0f2; --lg-control-surface-hover: #e3e3e7; --lg-track: #e6e6e9; } [data-lg-reduce-motion='1'] { --lg-motion-duration: 0ms; } [data-lg-reduce-motion='1'] *, [data-lg-reduce-motion='1'] *::before, [data-lg-reduce-motion='1'] *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } /* A switch still shows its own change, in a short plain slide and a colour fade: no spring, swell or glass. Everything else holds still. */ [data-lg-reduce-motion='1'] .lg-switch { transition-duration: 160ms !important; } [data-lg-reduce-motion='1'] :is(.lg-switch-thumb, .lg-switch-lens-scene, .lg-switch-lens-track) { transition-duration: 160ms !important; transition-property: translate !important; transition-timing-function: ease-out !important; } [data-lg-reduce-motion='1'] .lg-glass-surface::after { transform: none !important; transition: none !important; } [data-lg-reduce-motion='1'] .lg-button { transform: none !important; transition: none !important; } [data-lg-reduce-motion='1'] .lg-button__bloom { display: none; } @media (prefers-reduced-motion: reduce) { :root { --lg-motion-duration: 0ms; } .lg-glass-surface, .lg-glass-surface::after, .lg-button, .lg-button__distortion, .lg-button__shine, .lg-input, .lg-dialog-overlay, .lg-dialog-content, .lg-popover-content, .lg-tabs-trigger, .lg-accordion-trigger, .lg-accordion-chevron, .lg-refraction-background, .lg-noise, .lg-switch, .lg-switch-thumb, .lg-slider-thumb, .lg-checkbox, .lg-radio, .lg-check-tick, .lg-check-dash, .lg-radio-dot, .lg-select-chevron, .lg-progress-fill, .lg-spinner-ring, .lg-toast, .lg-toast-root, .lg-toast-close, .lg-toast-action, .lg-tooltip-content, .lg-accordion-content, .lg-avatar-image, .lg-alert, .lg-alert-fold, .lg-skeleton::after, .lg-command-list, .lg-command-search, .lg-page, .lg-alert-close, .lg-segmented-item, .lg-segmented-indicator, .lg-tabs-indicator, .lg-dock-item, .lg-dock-label, .lg-sheet-content, .lg-menu-content, .lg-select-content, .lg-lens, .lg-scene-drop { animation-duration: 0ms !important; transition-duration: 0ms !important; } .lg-switch { transition-duration: 160ms !important; } .lg-switch-thumb, .lg-switch-lens-scene, .lg-switch-lens-track { transition-duration: 160ms !important; transition-property: translate !important; transition-timing-function: ease-out !important; } .lg-glass-surface::after, .lg-button__distortion, .lg-refraction-background, .lg-button { transform: none !important; } .lg-button__bloom { display: none; } } @keyframes lg-grain { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-2%, 2%, 0); } 40% { transform: translate3d(-2%, -2%, 0); } 60% { transform: translate3d(2%, -2%, 0); } 80% { transform: translate3d(2%, 2%, 0); } 100% { transform: translate3d(0, 0, 0); } } /* ============================================ Glass edge Two layers make every glass edge. The bevel is an inset shadow stack: the light caught in the glass thickness, a bright bevel on the lit top-left, a softer counter-bevel, a shaded inner reflex, a faint chromatic fringe and a highlight cast by the fixed light. The specular ring is a masked hairline lit from the top left, with a glint where that light sits. Custom properties resolve on the declaring element, so surfaces and buttons feed both their own tokens. ============================================ */ .lg-glass-surface, .lg-button { --lg-rim-gain: calc( var(--lg-rim-tangent-alpha, 1) * var(--lg-debug-tangent-scale, 1) * var(--lg-rim-micro-mask, 1) * var(--lg-debug-micro-scale, 1) * var(--lg-rim-corner-mask, 1) * var(--lg-debug-corner-scale, 1) * var(--lg-debug-rim-alpha-scale, 1) ); --lg-glass-rim: inset 0 0 calc(12px * var(--lg-rim-scale)) calc(-4px * var(--lg-rim-scale)) rgb(255 255 255 / calc(var(--lg-glow-alpha) * var(--lg-rim-gain))), inset calc(1.5px * var(--lg-rim-scale)) calc(2.5px * var(--lg-rim-scale)) calc(1px * var(--lg-rim-scale)) -2px rgb(255 255 255 / calc(var(--lg-rim-light) * 0.7)), inset calc(-1.5px * var(--lg-rim-scale)) calc(-2px * var(--lg-rim-scale)) calc(1px * var(--lg-rim-scale)) -2px rgb(255 255 255 / calc(var(--lg-rim-light) * 0.55)), inset -0.3px -1px 4px 0 rgb(0 0 0 / calc(var(--lg-rim-dark) * 0.1)), inset -1.5px 2.5px 0 -2px rgb(0 0 0 / calc(var(--lg-rim-dark) * 0.14)), inset 0 3px 4px -2px rgb(0 0 0 / calc(var(--lg-rim-dark) * 0.14)), inset var(--lg-rim-ca-offset) 0 3px -1px rgb(80 160 255 / var(--lg-rim-ca-alpha)), inset calc(-1 * var(--lg-rim-ca-offset)) 0 3px -1px rgb(255 90 150 / var(--lg-rim-ca-alpha)), inset var(--lg-rim-offset-x) var(--lg-rim-offset-y) 3px rgb(255 255 255 / var(--lg-rim-alpha)); /* to bottom right keeps both highlights on the corners at any aspect ratio; a fixed angle would smear them along a wide pill. */ --lg-specular-ring: radial-gradient( circle at calc(var(--lg-light-x) * 100%) calc(var(--lg-light-y) * 100%), rgb(255 255 255 / calc(var(--lg-light-level) * 0.85)), transparent 42% ), linear-gradient( to bottom right, rgb(255 255 255 / calc(var(--lg-specular-peak) * var(--lg-rim-gain))) 0%, rgb(255 255 255 / calc(var(--lg-specular-floor) * var(--lg-rim-gain))) 32%, rgb(255 255 255 / calc(var(--lg-specular-floor) * var(--lg-rim-gain))) 68%, rgb(255 255 255 / calc(var(--lg-specular-counter) * var(--lg-rim-gain))) 100% ); } /* Glass Surface - Global Refraction */ .lg-glass-surface { --lg-thickness: calc(1 + var(--lg-light-strength) * 0.35); --lg-surface-blur-base: calc(var(--lg-glass-blur) * var(--lg-thickness)); --lg-surface-blur: var(--lg-surface-blur-base); --lg-surface-alpha: var(--lg-glass-alpha); --lg-surface-lift: 0; --lg-light-strength: calc(var(--lg-light-level) * 0.45); /* Bevel thickness (scaled by distance-aware factor) */ --lg-rim-scale: calc(var(--lg-rim-width-scale, 1) * var(--lg-debug-rim-thickness, 1)); --lg-rim-offset-max: 4.5px; --lg-rim-offset-max-scaled: calc(var(--lg-rim-offset-max) * var(--lg-rim-scale)); --lg-rim-tangent-alpha: 1; --lg-rim-micro-mask: 1; --lg-rim-corner-mask: 1; --lg-rim-ca-offset: calc(2px * var(--lg-debug-ca-offset-scale, 1)); --lg-rim-ca-alpha: calc(0.06 * var(--lg-debug-ca-scale, 1)); --lg-rim-offset-x: clamp( calc(-1 * var(--lg-rim-offset-max-scaled)), calc( var(--lg-light-dir-x) * -1 * var(--lg-rim-offset-max-scaled) * (0.6 + var(--lg-light-strength)) ), var(--lg-rim-offset-max-scaled) ); --lg-rim-offset-y: clamp( calc(-1 * var(--lg-rim-offset-max-scaled)), calc( var(--lg-light-dir-y) * -1 * var(--lg-rim-offset-max-scaled) * (0.6 + var(--lg-light-strength)) ), var(--lg-rim-offset-max-scaled) ); --lg-rim-light: calc(var(--lg-reflex-light) * var(--lg-rim-gain)); --lg-rim-dark: var(--lg-reflex-dark); --lg-rim-alpha: calc( (0.05 + var(--lg-light-strength) * 0.12 + var(--lg-fresnel, 0) * 0.35 + var(--lg-specular) * 0.32) * var(--lg-rim-gain) ); position: relative; border-radius: var(--lg-panel-radius, var(--lg-radius-lg)); isolation: isolate; background: transparent; color: var(--lg-foreground); transition: box-shadow var(--lg-motion-duration) ease, transform var(--lg-motion-duration) ease; box-shadow: var(--lg-panel-elevation-shadow, var(--lg-shadow)); overflow: hidden; contain: layout paint style; } .lg-glass-surface[data-lg-preset='subtle'] { --lg-surface-blur: min(var(--lg-surface-blur-base), 8px); --lg-surface-alpha: max(var(--lg-glass-alpha), 0.06); --lg-rim-offset-max: 1.5px; } .lg-glass-surface[data-lg-preset='standard'] { --lg-surface-blur: min(var(--lg-surface-blur-base), 14px); --lg-surface-alpha: max(var(--lg-glass-alpha), 0.08); } .lg-glass-surface[data-lg-preset='prominent'] { --lg-surface-blur: min(var(--lg-surface-blur-base), 18px); --lg-surface-alpha: max(var(--lg-glass-alpha), 0.12); } .lg-glass-surface[data-lg-preset='control'] { --lg-surface-blur: min(var(--lg-surface-blur-base), 10px); --lg-surface-alpha: max(var(--lg-glass-alpha), 0.08); --lg-rim-offset-max: 1.25px; } .lg-glass-surface[data-lg-preset='showcase'] { --lg-surface-blur: min(var(--lg-surface-blur-base), 24px); } /* An interactive surface brightens a touch on hover, wherever the pointer rests on it. */ .lg-glass-surface[data-lg-interactive='true']:hover { --lg-surface-lift: 0.04; } /* The lift eases in and out. Other frost has no transition, so it changes with a theme or preference switch at once. */ .lg-glass-surface[data-lg-interactive='true']::before { transition: background-color var(--lg-motion-duration) ease; } /* Panel shapes and spacing. Component defaults live here rather than in className utilities, so a consumer's p-4 or rounded-none always wins. */ .lg-panel--panel { --lg-panel-radius: var(--lg-radius-lg); padding: 1.5rem; } .lg-panel--card { --lg-panel-radius: var(--lg-radius-md); padding: 1.25rem; } .lg-panel--pill { --lg-panel-radius: 9999px; padding: 0.75rem 1.25rem; } .lg-panel--raised { --lg-panel-elevation-shadow: var(--lg-shadow-raised); } .lg-refraction-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* The generated scene sits under the frost layer, which then drops its backdrop blur and lays only its tint, bevel and sheen over the scene. WebKit draws a filtered layer from its overflow origin, so a viewport scene hanging off the top or left edge would land shifted. Clipping keeps both origins at the surface corner. */ .lg-glass-surface > .lg-refraction-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; transform: translateZ(0); } .lg-refraction-background > .lg-refraction-scene { position: absolute; inset: 0; } .lg-refraction-scene > * { min-width: 100%; min-height: 100%; } /* Position the scene without a transform: WebKit shifts transformed input when the SVG filter combines refracted colour channels. Chromium filters composited layers, so a scroll-driven animation on translate still carries the scene through the scroll, and left/top hold what scrolling leaves unchanged. */ .lg-glass-surface[data-lg-refraction-background-space='viewport'] > .lg-refraction-background > .lg-refraction-scene { inset: 0 auto auto 0; top: var(--lg-refraction-scene-y, 0px); left: var(--lg-refraction-scene-x, 0px); width: var(--lg-refraction-scene-width, 100vw); height: var(--lg-refraction-scene-height, 100dvh); } .lg-glass-surface[data-lg-refraction='soft'] { --lg-surface-blur: calc(var(--lg-surface-blur-base) * 0.9); } .lg-glass-surface[data-lg-refraction='strong'] { --lg-surface-blur: calc(var(--lg-surface-blur-base) * 1.12); } /* Frost, bevel and sheen. Keep blend modes, masks, filters and opacity off every ancestor of this layer: in Chromium each of them isolates the backdrop and silently turns the blur into a no-op. The layer carries its own rounded shape: Chromium drops the host's rounded clip from a backdrop blur that sits inside another rounded overflow clip, such as a card. The tint is background-color alone, so a consumer's before:bg-* utility recolors the glass and keeps the sheen. */ .lg-glass-surface::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background-color: rgb(255 255 255 / calc(var(--lg-surface-alpha) + var(--lg-surface-lift))); background-image: radial-gradient( circle at calc(var(--lg-light-x) * 100%) calc(var(--lg-light-y) * 100%), rgb( 255 255 255 / calc( (var(--lg-light-strength) * 0.1 + var(--lg-highlight-strength) * 0.12) * var(--lg-debug-highlight-scale, 1) ) ), transparent 65% ), linear-gradient(180deg, rgb(255 255 255 / var(--lg-sheen-alpha)), transparent 45%); box-shadow: var(--lg-glass-rim); -webkit-backdrop-filter: blur(var(--lg-surface-blur)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(var(--lg-surface-blur)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); } .lg-glass-surface[data-lg-generated-refraction='true']::before { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Specular ring. The mask lives on this sibling of the frost layer, never on an ancestor, so it cannot flatten the blur. */ .lg-glass-surface::after { content: ''; position: absolute; inset: 0; z-index: 1; padding: var(--lg-rim-width); border-radius: inherit; pointer-events: none; background: var(--lg-specular-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, linear-gradient(#000 0 0); mask-composite: exclude; } /* Chromium edge lens: one SVG filter frosts, bends and saturates the backdrop. Its displacement map is measured from the padding box the frost layer fills. */ .lg-glass-surface[data-lg-lens='active']::before { backdrop-filter: var(--lg-lens-filter); } /* Glass inside glass samples a backdrop the outer layer already saturated, so it adds no saturation of its own. */ .lg-glass-surface .lg-glass-surface { --lg-glass-sat: 1; --lg-lens-saturation: 1; } .lg-noise { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background-image: var(--lg-noise-image); background-size: 128px 128px; opacity: var(--lg-noise-alpha); /* Static by default to avoid per-frame repaints; opt-in with data-lg-animate-noise="1" on . */ animation: none; will-change: auto; } [data-lg-animate-noise='1'] .lg-noise { animation: lg-grain 4s steps(10) infinite; } [data-lg-reduce-motion='1'] .lg-noise { animation: none !important; } /* Light mode glass surface - emphasize refraction, minimize dynamic lighting */ [data-lg-theme='light'] .lg-glass-surface { --lg-rim-offset-max: 2px; --lg-rim-ca-alpha: calc(0.05 * var(--lg-debug-ca-scale, 1)); } /* ============================================ Floating layers Dialogs, popovers, toasts and tooltips frost on the element itself, so the material survives their scrolling and their opacity animations. Their denser tint keeps text readable over any backdrop. ============================================ */ .lg-dialog-content, .lg-popover-content, .lg-toast-root, .lg-tooltip-content, .lg-sheet-content, .lg-menu-content, .lg-select-content { background: var(--lg-overlay-surface); -webkit-backdrop-filter: blur(var(--lg-surface-blur)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(var(--lg-surface-blur)) saturate(var(--lg-glass-sat)); } .lg-dialog-content::before, .lg-popover-content::before, .lg-toast-root::before, .lg-tooltip-content::before, .lg-sheet-content::before, .lg-menu-content::before, .lg-select-content::before { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Dialogs, popovers, sheets and menus are slabs of glass: the page shows through, dimmed or lifted just enough to keep their text legible, and where Chromium can run the lens their rim bends it. */ .lg-dialog-content, .lg-popover-content, .lg-sheet-content, .lg-menu-content, .lg-select-content { --lg-lens-blur: var(--lg-slab-blur); --lg-lens-body-brightness: var(--lg-slab-brightness); --lg-lens-rim-brightness: var(--lg-slab-rim-brightness); background: var(--lg-slab-tint); -webkit-backdrop-filter: blur(calc(var(--lg-slab-blur) * 1px)) saturate(var(--lg-glass-sat)) brightness(var(--lg-slab-brightness)); backdrop-filter: blur(calc(var(--lg-slab-blur) * 1px)) saturate(var(--lg-glass-sat)) brightness(var(--lg-slab-brightness)); } .lg-dialog-content[data-lg-lens='active'], .lg-popover-content[data-lg-lens='active'], .lg-sheet-content[data-lg-lens='active'], .lg-menu-content[data-lg-lens='active'], .lg-select-content[data-lg-lens='active'] { -webkit-backdrop-filter: var(--lg-lens-filter); backdrop-filter: var(--lg-lens-filter); } .lg-dialog-content[data-lg-lens='active']::before, .lg-popover-content[data-lg-lens='active']::before, .lg-sheet-content[data-lg-lens='active']::before, .lg-menu-content[data-lg-lens='active']::before, .lg-select-content[data-lg-lens='active']::before { -webkit-backdrop-filter: none; backdrop-filter: none; } .lg-dialog-content { position: fixed; top: 50%; left: 50%; z-index: 50; width: calc(100vw - 2rem); max-width: 520px; max-height: calc(100dvh - 2rem); translate: -50% -50%; overflow-x: hidden; overflow-y: auto; } @media (width >= 40rem) { .lg-dialog-content { padding: 2rem; } } .lg-popover-content { z-index: 50; width: min(22rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-x: hidden; overflow-y: auto; font-size: 0.875rem; line-height: calc(1.25 / 0.875); } .lg-dialog-content:focus, .lg-popover-content:focus { outline: none; } .lg-tooltip-content { z-index: 50; max-width: calc(100vw - 2rem); padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: calc(1 / 0.75); font-weight: 500; } .lg-dialog-overlay { position: fixed; inset: 0; z-index: 40; background: var(--lg-scrim); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); } /* Toasts stack in the top-right corner; each glass card keeps its own frost. */ .lg-toast-viewport { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.75rem; width: min(22rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); margin: 0; padding: 0; list-style: none; pointer-events: none; } /* Radix turns selection off inline for the swipe, without the -webkit- prefix Safari needs. */ .lg-toast { position: relative; width: 100%; list-style: none; outline: none; pointer-events: auto; user-select: none; } .lg-toast-root { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; font-size: 0.875rem; line-height: calc(1.25 / 0.875); } .lg-toast-root > * { grid-column: 1; } /* The dismiss button stands beside the words, not over them. */ .lg-toast-root > .lg-toast-close { grid-column: 2; grid-row: 1 / span 2; align-self: start; } .lg-toast-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-block: -0.25rem 0; margin-inline: 0.75rem -0.375rem; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--lg-muted-foreground); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; } .lg-toast-close:hover { background: rgb(255 255 255 / 0.14); color: var(--lg-foreground); } [data-lg-theme='light'] .lg-toast-close:hover { background: rgb(0 0 0 / 0.07); } .lg-toast-close:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 1px; color: var(--lg-foreground); } .lg-toast-close > svg { width: 1rem; height: 1rem; } .lg-toast-action { grid-column: 1; justify-self: start; height: 1.875rem; margin-top: 0.625rem; padding: 0 0.875rem; border: 0; border-radius: 9999px; background: var(--lg-control-surface-hover); box-shadow: inset 0 0 0 1px var(--lg-border); color: var(--lg-foreground); cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 600; transition: background-color 180ms ease, scale 320ms var(--lg-spring); } .lg-toast-action:active { scale: 0.94; } .lg-toast-action:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-toast-title { color: var(--lg-foreground); font-size: 1rem; line-height: 1.5; font-weight: 600; } .lg-toast-description { margin-top: 0.25rem; color: var(--lg-muted-foreground); font-size: 0.875rem; line-height: calc(1.25 / 0.875); } /* ============================================ Reduced transparency ============================================ */ /* Preference guards are !important because consumer utilities outrank every other library default. Restyle them through --lg-opaque-surface and --lg-control-surface, never by undoing the guard. */ [data-lg-reduce-transparency='1'] .lg-glass-surface::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--lg-opaque-surface) !important; box-shadow: none !important; transform: none; } /* The ring keeps its mask and turns into a plain hairline border. */ [data-lg-reduce-transparency='1'] .lg-glass-surface::after, [data-lg-reduce-transparency='1'] .lg-tabs-trigger[data-state='active']::after { background: var(--lg-border); } /* The button draws the same hairline as an inset ring. A masked fill would read to contrast checkers as a veil over the label. */ [data-lg-reduce-transparency='1'] .lg-button__rim { background: none; box-shadow: inset 0 0 0 var(--lg-rim-width) var(--lg-border); } [data-lg-reduce-transparency='1'] :is( .lg-dialog-content, .lg-popover-content, .lg-toast-root, .lg-tooltip-content, .lg-sheet-content, .lg-menu-content, .lg-select-content, .lg-dock-label ) { background: var(--lg-opaque-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-lg-reduce-transparency='1'] :is( .lg-button__distortion, .lg-input, .lg-accordion-trigger, .lg-dialog-overlay, .lg-badge, .lg-alert ) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Prominent glass has no fill of its own, so without the glass it is the plain fill. */ [data-lg-reduce-transparency='1'] .lg-button--prominent > .lg-button__layers > .lg-button__distortion { background: var(--lg-prominent-fill) !important; } [data-lg-reduce-transparency='1'] .lg-button__layers > .lg-button__light { display: none !important; } /* Knobs stay solid white instead of turning to clear glass. */ [data-lg-reduce-transparency='1'] :is(.lg-switch-thumb, .lg-slider-thumb) { background: var(--lg-knob) !important; } [data-lg-reduce-transparency='1'] .lg-switch-lens, [data-lg-reduce-transparency='1'] .lg-switch-thumb::after { display: none; } [data-lg-reduce-transparency='1'] .lg-button__shine, [data-lg-reduce-transparency='1'] .lg-button__tint { opacity: 0; } [data-lg-reduce-transparency='1'] .lg-button__bloom { display: none; } [data-lg-reduce-transparency='1'] .lg-refraction-background { display: none; } /* ============================================ Increased contrast and forced colors: solid surfaces, real outlines ============================================ */ @media (prefers-contrast: more), (forced-colors: active) { .lg-glass-surface { outline: 1px solid CanvasText !important; outline-offset: -1px !important; } .lg-glass-surface::before, .lg-dialog-content, .lg-popover-content, .lg-toast-root, .lg-tooltip-content, .lg-sheet-content, .lg-menu-content, .lg-select-content, .lg-dock-label, .lg-badge, .lg-alert { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--lg-opaque-surface) !important; } .lg-badge, .lg-alert, .lg-kbd, .lg-progress-track, .lg-dock-label, .lg-switch, .lg-slider-track, .lg-segmented-indicator, .lg-tabs-indicator { outline: 1px solid CanvasText; outline-offset: -1px; } .lg-segmented-indicator::after, .lg-tabs-indicator::after, .lg-lens::after, .lg-button__bloom, .lg-switch-lens, .lg-switch-thumb::after { display: none; } /* The switch's knob stays solid instead of turning to clear glass; forced colours paint it with system colours below. */ .lg-switch-thumb { background: var(--lg-knob) !important; } .lg-lens { outline: 2px solid CanvasText; } .lg-glass-surface::before { box-shadow: none !important; } /* The 1px outline replaces the specular ring. */ .lg-glass-surface::after, .lg-tabs-trigger[data-state='active']::after { display: none; } .lg-button:not(.lg-button--ghost, .lg-button--prominent) { --lg-button-fill: var(--lg-opaque-surface) !important; --lg-button-fill-hover: var(--lg-opaque-surface) !important; } .lg-button--prominent > .lg-button__layers > .lg-button__distortion { background: var(--lg-prominent-fill) !important; } .lg-button__layers > .lg-button__light { display: none !important; } .lg-button__distortion, .lg-input, .lg-accordion-trigger, .lg-dialog-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .lg-refraction-background { display: none; } .lg-button .lg-button__rim { padding: 0; border: 1px solid CanvasText; background: none; -webkit-mask: none; mask: none; } .lg-input, .lg-checkbox, .lg-radio, .lg-accordion-trigger { border-color: CanvasText !important; } /* Focusable surfaces such as tab panels need a ring distinct from the 1px surface outline. */ .lg-button:focus-visible, .lg-input:focus, .lg-checkbox:focus-visible, .lg-radio:focus-visible, .lg-glass-surface:focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px !important; } } /* Forced colors repaint every author color, so the controls whose state is their color opt out and use system colors directly. */ @media (forced-colors: active) { .lg-switch, .lg-switch-thumb, .lg-slider-range, .lg-slider-thumb, .lg-segmented-indicator, .lg-tabs-indicator, .lg-checkbox, .lg-radio, .lg-progress-fill, .lg-menu-item, .lg-command-item { forced-color-adjust: none; } .lg-progress-fill { background: Highlight; box-shadow: none; } .lg-page[data-current] { background: Highlight; color: HighlightText; forced-color-adjust: none; } .lg-switch { background: Canvas; } .lg-checkbox, .lg-radio { border-color: CanvasText; background: Canvas; box-shadow: none; color: HighlightText; } .lg-checkbox[data-state='checked'], .lg-checkbox[data-state='indeterminate'], .lg-radio[data-state='checked'] { border-color: Highlight; background: Highlight; } .lg-radio-dot { background: HighlightText; box-shadow: none; } /* Forced colours strip the fill that gives an avatar its shape. */ .lg-avatar-face { border: 1px solid CanvasText; box-sizing: border-box; } .lg-switch[data-state='checked'], .lg-slider-range, .lg-menu-item[data-highlighted], .lg-command-item[data-selected='true'] { background: Highlight; color: HighlightText; } /* A guard, like the transparency ones: the bubbles' glass rules are more specific. */ .lg-segmented-indicator, .lg-tabs-indicator { background: Highlight !important; } /* The list prefix outranks the controls' own later state colors. */ .lg-tabs-list .lg-tabs-trigger[data-state='active'] { color: HighlightText; forced-color-adjust: none; } .lg-tabs-list:not([data-lg-indicator='ready']) .lg-tabs-trigger[data-state='active'] { background: Highlight; } .lg-switch-thumb, .lg-slider-thumb { background: CanvasText !important; box-shadow: none; } .lg-switch[data-state='checked'] .lg-switch-thumb { background: HighlightText !important; } .lg-segmented .lg-segmented-item[data-state='checked'] { color: HighlightText; forced-color-adjust: none; } .lg-menu-item, .lg-command-item, .lg-toast-close { color: CanvasText; } } /* --- Buttons --- */ .lg-button { --lg-radius: 999px; --lg-surface-blur: min(var(--lg-glass-blur), 16px); --lg-ink: var(--lg-foreground); --lg-button-fill: rgb(255 255 255 / 0.07); --lg-button-fill-hover: rgb(255 255 255 / 0.11); --lg-button-sheen: 0.1; --lg-button-glow: 0.14; --lg-button-glow-pressed: 0.26; --lg-button-shine: var(--lg-button-glow); /* The fill highlight sits between the light and the centre. */ --lg-fill-x: calc(0.5 + (var(--lg-light-x) - 0.5) * 0.35); --lg-fill-y: calc(0.5 + (var(--lg-light-y) - 0.5) * 0.35); --lg-rim-scale: var(--lg-debug-rim-thickness, 1); --lg-rim-offset-max: 1.1px; --lg-rim-tangent-alpha: 1; --lg-rim-micro-mask: 1; --lg-rim-corner-mask: 1; --lg-rim-offset-x: clamp( calc(-1 * var(--lg-rim-offset-max)), calc(var(--lg-light-dir-x) * -1 * var(--lg-rim-offset-max) * (0.7 + var(--lg-light-level))), var(--lg-rim-offset-max) ); --lg-rim-offset-y: clamp( calc(-1 * var(--lg-rim-offset-max)), calc(var(--lg-light-dir-y) * -1 * var(--lg-rim-offset-max) * (0.7 + var(--lg-light-level))), var(--lg-rim-offset-max) ); --lg-rim-light: calc(var(--lg-button-reflex-light) * var(--lg-rim-gain)); --lg-rim-dark: var(--lg-reflex-dark); --lg-rim-alpha: calc((0.08 + var(--lg-light-level) * 0.12) * var(--lg-rim-gain)); --lg-rim-ca-offset: calc(1.5px * var(--lg-debug-ca-offset-scale, 1)); --lg-rim-ca-alpha: calc(0.06 * var(--lg-debug-ca-scale, 1)); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--lg-radius); border: none; background: transparent; color: var(--lg-ink); text-decoration: none; font-weight: 500; letter-spacing: -0.01em; isolation: isolate; cursor: pointer; contain: layout paint style; /* Each button is a slab of glass resting just above the page, lit from above. A pointer lowers it halfway and a press sets it down, so its shadow draws in under it; the glass itself stays put. */ --lg-button-rise: 1; --lg-button-rise-time: calc(var(--lg-motion-duration) * 1.6); --lg-button-shade: 0 0 0; --lg-button-shade-near: 0.32; --lg-button-shade-far: 0.36; transition: --lg-button-rise var(--lg-button-rise-time) var(--lg-ease-out); } @media (hover: hover) { .lg-button:not(:disabled, [aria-disabled='true']):hover { --lg-button-rise: 0.5; } } .lg-button[data-pressed='true']:not(:disabled, [aria-disabled='true']) { --lg-button-rise: 0.2; --lg-button-rise-time: calc(var(--lg-motion-duration) * 0.6); } .lg-button[data-lg-preset='control'] { --lg-surface-blur: min(var(--lg-glass-blur), 10px); } .lg-button[data-lg-preset='showcase'] { --lg-surface-blur: min(var(--lg-glass-blur), 16px); } .lg-button:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } /* Disabled buttons dim their content, never the host: opacity on an ancestor of the frost layer isolates its backdrop and flattens the glass. */ .lg-button:disabled, .lg-button[aria-disabled='true'] { cursor: not-allowed; transform: none; } .lg-button:disabled :is(.lg-button__label, .lg-button__tint, .lg-button__rim), .lg-button[aria-disabled='true'] :is(.lg-button__label, .lg-button__tint, .lg-button__rim) { opacity: var(--lg-disabled-opacity); } .lg-button__layers { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; overflow: hidden; } /* Icons and text sit in one row, spaced by the button's own gap. */ .lg-button__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: inherit; } .lg-button__layers > span { position: absolute; inset: 0; border-radius: inherit; } /* 0. The light the glass lets through, under it. Tinted glass shows it. */ .lg-button__layers > .lg-button__light { display: none; } /* 1. Frost: the only backdrop layer */ .lg-button__distortion { background: var(--lg-button-fill); -webkit-backdrop-filter: blur(var(--lg-surface-blur)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(var(--lg-surface-blur)) saturate(var(--lg-glass-sat)); transition: background-color var(--lg-motion-duration) ease; } .lg-button[data-lg-lens='active'] > .lg-button__layers > .lg-button__distortion { backdrop-filter: var(--lg-lens-filter); } .lg-button:not(:disabled, [aria-disabled='true']):hover .lg-button__distortion { background: var(--lg-button-fill-hover); } /* 2. Sheen and bevel: top-lit gradient, a gentle fixed highlight and the shared glass bevel */ .lg-button__tint { background: radial-gradient( circle at calc(var(--lg-fill-x) * 100%) calc(var(--lg-fill-y) * 100%), rgb(255 255 255 / calc(var(--lg-light-level) * 0.08)), transparent 70% ), linear-gradient(180deg, rgb(255 255 255 / var(--lg-button-sheen)), transparent 60%); box-shadow: var(--lg-glass-rim); } /* 3. Shine: hover glow that lights up from within while pressed */ .lg-button__shine { background: radial-gradient( circle at calc(var(--lg-fill-x) * 100%) calc(var(--lg-fill-y) * 100%), rgb(255 255 255 / var(--lg-button-shine)), transparent 60% ); opacity: 0; transition: opacity var(--lg-motion-duration) ease; } .lg-button:not(:disabled, [aria-disabled='true']):hover .lg-button__shine, .lg-button[data-pressed='true']:not(:disabled, [aria-disabled='true']) .lg-button__shine { opacity: 1; } .lg-button[data-pressed='true'] { --lg-button-shine: var(--lg-button-glow-pressed); } /* 4. Bloom: a press lights the glass from the fingertip outward. Script places it at the press point and plays it once per press. It stays faint: the slab setting down carries the press, and the light only marks where it landed. */ .lg-button__layers > .lg-button__bloom { inset: auto; top: var(--lg-bloom-y, 50%); left: var(--lg-bloom-x, 50%); width: var(--lg-bloom-size, 0px); height: var(--lg-bloom-size, 0px); border-radius: 50%; background: radial-gradient( closest-side, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.05) 60%, transparent ); opacity: 0; translate: -50% -50%; } /* 5. Rim: the shared specular ring */ .lg-button__rim { padding: var(--lg-rim-width); background: var(--lg-specular-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, linear-gradient(#000 0 0); mask-composite: exclude; } /* Button Variants. A slab's shadow falls straight down from it and draws in as it lowers: a near, sharp contact shadow and a soft one further out. */ .lg-button--primary, .lg-button--soft { box-shadow: 0 calc(var(--lg-button-rise) * 1.8px) calc(var(--lg-button-rise) * 2px) calc(var(--lg-button-rise) * -1px) rgb(var(--lg-button-shade) / var(--lg-button-shade-near)), 0 calc(var(--lg-button-rise) * 6.7px) calc(var(--lg-button-rise) * 10px) calc(var(--lg-button-rise) * -5px) rgb(var(--lg-button-shade) / var(--lg-button-shade-far)); } .lg-button--soft { --lg-button-fill: rgb(255 255 255 / 0.04); --lg-button-fill-hover: rgb(255 255 255 / 0.08); --lg-button-shade-near: 0.2; --lg-button-shade-far: 0.18; } .lg-button--ghost { --lg-button-fill: transparent; --lg-button-fill-hover: rgb(255 255 255 / 0.06); box-shadow: none; } .lg-button--ghost .lg-button__distortion { -webkit-backdrop-filter: none; backdrop-filter: none; } .lg-button--ghost :is(.lg-button__rim, .lg-button__tint) { display: none; } /* Sizes */ .lg-button--sm { font-size: 0.8rem; padding: 0.4rem 0.8rem; } .lg-button--md { font-size: 0.95rem; padding: 0.7rem 1.4rem; } .lg-button--lg { font-size: 1.1rem; padding: 1rem 2rem; } /* ============================================ LIGHT THEME - Button Overrides ============================================ */ [data-lg-theme='light'] .lg-button { --lg-button-fill: rgb(255 255 255 / 0.45); --lg-button-fill-hover: rgb(255 255 255 / 0.6); --lg-button-sheen: 0.35; --lg-button-glow: 0.45; --lg-button-glow-pressed: 0.75; --lg-button-shade: 52 62 84; --lg-button-shade-near: 0.18; --lg-button-shade-far: 0.2; } [data-lg-theme='light'] .lg-button--soft { --lg-button-shade-near: 0.12; --lg-button-shade-far: 0.12; } [data-lg-theme='light'] .lg-button--soft { --lg-button-fill: rgb(255 255 255 / 0.3); --lg-button-fill-hover: rgb(255 255 255 / 0.45); } [data-lg-theme='light'] .lg-button--ghost { --lg-button-fill: transparent; --lg-button-fill-hover: rgb(0 0 0 / 0.04); } /* Prominent: a slab of blue glass. It passes on the light of whatever lies behind it, tinted blue, so the page, the light it lets through and the shadow under it all show in it. The tint caps how bright that light can get, which keeps white text legible over any backdrop. Two classes outrank the light-theme overrides above. */ .lg-button.lg-button--prominent { --lg-ink: var(--lg-accent-foreground); --lg-button-fill: var(--lg-prominent-fill); --lg-button-fill-hover: var(--lg-prominent-fill); --lg-button-sheen: 0; --lg-button-glow: 0; --lg-button-glow-pressed: 0; /* The rays of the light cross the glass along x and y. */ --lg-button-ray-x: calc(sin(var(--lg-button-light-angle)) * -1); --lg-button-ray-y: cos(var(--lg-button-light-angle)); /* The light eases over, gently at both ends, and returns briskly. */ --lg-button-rise-time: calc(var(--lg-motion-duration) * 1.5); --lg-button-light-time: calc(var(--lg-motion-duration) * 1.75); --lg-button-light-ease: cubic-bezier(0.25, 0.8, 0.3, 1); /* The shadow stays under the slab and draws in as it lowers; only the light along the rim follows the light. */ box-shadow: 0 calc(var(--lg-button-rise) * 1.8px) calc(var(--lg-button-rise) * 2px) calc(var(--lg-button-rise) * -1px) rgb(var(--lg-prominent-shade) / 0.4), 0 calc(var(--lg-button-rise) * 6.7px) calc(var(--lg-button-rise) * 10px) calc(var(--lg-button-rise) * -5px) rgb(var(--lg-prominent-shade) / 0.4); transition: --lg-button-rise var(--lg-button-rise-time) cubic-bezier(0.25, 0.8, 0.3, 1), --lg-button-light-angle var(--lg-button-light-time) var(--lg-button-light-ease); } /* A pointer lowers the slab like any button and swings its light 50deg over to the top left. */ @media (hover: hover) { .lg-button.lg-button--prominent:not(:disabled, [aria-disabled='true']):hover { --lg-button-light-angle: -50deg; --lg-button-light-time: calc(var(--lg-motion-duration) * 2.75); --lg-button-light-ease: cubic-bezier(0.45, 0, 0.55, 1); } } /* Under the glass lies the light it lets through: a dim pool, a dark line where the rounded edge turns the light aside and a bright one just inside it where the edge gathers it. It sits a little below the glass, further the higher the glass rests, so a press all but hides it. The pool is dense enough that, should an ancestor cut the glass off from the page (opacity, a filter or a mask), it alone keeps the white label at 4.5:1 over white. */ .lg-button--prominent > .lg-button__layers > .lg-button__light { --lg-rise-cubed: calc(var(--lg-button-rise) * var(--lg-button-rise) * var(--lg-button-rise)); display: block; /* Light coming in at a slant crosses the glass at a slant, so the pool moves away from it. */ translate: calc(var(--lg-button-ray-x) * 1.2px) calc(var(--lg-rise-cubed) * 2px); background: rgb(var(--lg-prominent-shade) / 0.6); box-shadow: inset 0 0 0 calc(1px + var(--lg-rise-cubed) * 1.6px) rgb(var(--lg-prominent-shade) / 0.5), inset 0 0 0 calc(2px + var(--lg-rise-cubed) * 2.2px) rgb(var(--lg-prominent-glow) / 0.75); filter: blur(calc(0.2px + var(--lg-button-rise) * 0.4px)); } /* The face is that light, tinted. Its faint sheen turns with the light. */ .lg-button--prominent > .lg-button__layers > .lg-button__distortion { -webkit-backdrop-filter: blur(0.6px) var(--lg-prominent-tint); backdrop-filter: blur(0.6px) var(--lg-prominent-tint); /* The solid fill replaces the tint and light together. Fading only the fill exposes the untinted backdrop while those layers switch. */ transition: none; } .lg-button--prominent > .lg-button__layers > .lg-button__distortion, .lg-button--prominent:not(:disabled, [aria-disabled='true']):hover > .lg-button__layers > .lg-button__distortion { background: linear-gradient( calc(180deg + var(--lg-button-light-angle)), rgb(255 255 255 / 0.07), transparent 45% ); } /* In Chromium the edge lens bends the light at the rim, then it is tinted. */ .lg-button--prominent[data-lg-lens='active'] > .lg-button__layers > .lg-button__distortion { backdrop-filter: var(--lg-lens-filter) var(--lg-prominent-tint); } /* The rim: a dark line at the very edge, where it turns the light aside, a soft sheen under the top, where it faces the light, and a glow along the bottom, where the light the slab carried across leaves it. Set down, the glass gathers more of that light and glows all round. All of it turns with the light: the sheen moves round to the edge facing it and the glow round to the far edge. */ .lg-button--prominent > .lg-button__layers > .lg-button__tint { --lg-button-sunk: calc(1 - var(--lg-button-rise)); background: none; box-shadow: inset 0 0 0 1px rgb(var(--lg-prominent-shade) / 0.32), inset calc(var(--lg-button-ray-x) * -5px) calc(var(--lg-button-ray-y) * -5px) 7px -4px rgb(var(--lg-prominent-glow) / calc(0.5 + var(--lg-button-sunk) * 0.35)), inset 0 0 calc(4px + var(--lg-button-sunk) * 10px) 0 rgb(var(--lg-prominent-glow) / calc(var(--lg-button-sunk) * 0.32)), inset calc(var(--lg-button-ray-x) * 7px) calc(var(--lg-button-ray-y) * 7px) 8px -7px rgb(255 255 255 / 0.22), inset calc(var(--lg-button-ray-x) * 3px) calc(var(--lg-button-ray-y) * 3px) 4px -2px rgb(0 0 0 / 0.08); } /* Just inside the dark line, a bright one where the edge gathers the light: strongest along the top, faint at the sides, blue below. It turns with the light, so the bright line moves round to the end facing it and the blue one to the far end. */ .lg-button--prominent > .lg-button__layers > .lg-button__rim { inset: 1px; padding: 1px; background: linear-gradient( calc(180deg + var(--lg-button-light-angle)), rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.12) 36% 64%, rgb(var(--lg-prominent-glow) / 0.62) ); } /* Over a pale page the bright line brightens as the light swings over, so it reads as clearly as it does against a dark one. */ [data-lg-theme='light'] .lg-button--prominent > .lg-button__layers > .lg-button__rim { background: linear-gradient( calc(180deg + var(--lg-button-light-angle)), rgb(255 255 255 / calc(0.78 + max(0, var(--lg-button-ray-x)) * 0.2)), rgb(255 255 255 / 0.12) 36% 64%, rgb(var(--lg-prominent-glow) / 0.62) ); } /* Without a backdrop filter the face is the plain fill. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .lg-button--prominent > .lg-button__layers > .lg-button__distortion { background: var(--lg-prominent-fill); } } [data-lg-reduce-transparency='1'] .lg-button:not(.lg-button--ghost, .lg-button--prominent) { --lg-button-fill: var(--lg-control-surface) !important; --lg-button-fill-hover: var(--lg-control-surface-hover) !important; } /* Input Fields: a recessed glass well */ .lg-input { width: 100%; padding: 0.875rem 1.25rem; border-radius: 16px; border: 1px solid var(--lg-border); background: var(--lg-control-surface); color: var(--lg-foreground); font-size: 1rem; outline: none; transition: background var(--lg-motion-duration) ease, border-color var(--lg-motion-duration) ease, box-shadow var(--lg-motion-duration) ease; -webkit-backdrop-filter: blur(min(var(--lg-glass-blur), 16px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(min(var(--lg-glass-blur), 16px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); box-shadow: var(--lg-input-shadow); } .lg-input:focus { background: var(--lg-control-surface-hover); border-color: var(--lg-focus-ring); box-shadow: 0 0 0 1px var(--lg-focus-ring); } .lg-input:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-input::placeholder { color: var(--lg-muted-foreground); opacity: 0.72; } .lg-input[aria-invalid='true'] { border-color: var(--lg-invalid); box-shadow: 0 0 0 1px var(--lg-invalid); } .lg-input:disabled { cursor: not-allowed; opacity: var(--lg-disabled-opacity); } /* ============================================ Checkbox and radio: a small glass well that fills with the accent, with a mark that draws itself in and back out, so clearing a choice moves as smoothly as making it. Every transition sits on the base rule, never on the checked one, so both directions animate. ============================================ */ .lg-check-field { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--lg-foreground); font-size: 0.9375rem; line-height: 1.4; } .lg-check-text { display: flex; min-width: 0; flex-direction: column; padding-top: 0.0625rem; } /* Clicking the label toggles the box, so a quick second click must not select its text. The description below it stays selectable. */ .lg-check-text > label { cursor: pointer; user-select: none; } .lg-check-text > span { color: var(--lg-muted-foreground); font-size: 0.8125rem; line-height: 1.35; } .lg-check-field[data-size='sm'] { gap: 0.625rem; font-size: 0.875rem; } .lg-check-field[data-disabled] { opacity: var(--lg-disabled-opacity); } .lg-check-field[data-disabled] .lg-check-text > label { cursor: not-allowed; } .lg-radio-group { display: grid; gap: 0.75rem; } .lg-checkbox, .lg-radio { --lg-check-size: 1.25rem; /* The edge of an empty box is what says it can be ticked, so it holds 3:1 over the glass it sits on, which the hairline border of a text field does not. */ --lg-check-edge: rgb(244 245 249 / 0.78); position: relative; display: inline-grid; flex: none; place-items: center; box-sizing: border-box; width: var(--lg-check-size); height: var(--lg-check-size); margin: 0; padding: 0; border: 1.5px solid var(--lg-check-edge); background: var(--lg-control-surface); box-shadow: var(--lg-input-shadow); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, scale 320ms var(--lg-spring); } [data-lg-theme='light'] .lg-checkbox, [data-lg-theme='light'] .lg-radio { --lg-check-edge: rgb(27 29 36 / 0.6); } .lg-checkbox { border-radius: 0.4375rem; } .lg-radio { border-radius: 9999px; } .lg-checkbox[data-size='sm'], .lg-check-field[data-size='sm'] .lg-checkbox { --lg-check-size: 1rem; border-radius: 0.3125rem; } .lg-checkbox[data-state='unchecked']:hover:not([data-disabled]), .lg-radio[data-state='unchecked']:hover:not([data-disabled]) { background: var(--lg-control-surface-hover); } .lg-checkbox:active:not([data-disabled]), .lg-radio:active:not([data-disabled]) { scale: 0.9; } .lg-checkbox:focus-visible, .lg-radio:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-checkbox[aria-invalid='true'], .lg-radio[aria-invalid='true'] { border-color: var(--lg-invalid); } .lg-checkbox[data-disabled], .lg-radio[data-disabled] { cursor: not-allowed; opacity: var(--lg-disabled-opacity); } .lg-checkbox[data-state='checked'], .lg-checkbox[data-state='indeterminate'], .lg-radio[data-state='checked'] { border-color: transparent; background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 62%), var(--lg-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(0 0 0 / 0.14), 0 1px 3px rgb(0 0 0 / 0.28); } .lg-check-indicator { display: grid; width: 100%; height: 100%; place-items: center; pointer-events: none; } .lg-check-mark { width: 84%; height: 84%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .lg-check-tick, .lg-check-dash { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 300ms var(--lg-ease-out); } .lg-checkbox[data-state='checked'] .lg-check-tick, .lg-checkbox[data-state='indeterminate'] .lg-check-dash { stroke-dashoffset: 0; } .lg-radio-dot { width: 42%; height: 42%; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); scale: 0; transition: scale 160ms cubic-bezier(0.4, 0, 1, 1); } /* The dot springs in and shrinks straight out: the spring would swing it through zero on the way back. */ .lg-radio[data-state='checked'] .lg-radio-dot { scale: 1; transition: scale 340ms var(--lg-spring); } /* ============================================ Textarea and select: the Input's recessed glass field ============================================ */ .lg-textarea { display: block; min-height: 5.5rem; line-height: 1.5; resize: vertical; } .lg-textarea[data-resize='auto'] { resize: none; overflow-y: hidden; } .lg-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: start; cursor: pointer; user-select: none; } .lg-select-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-select-trigger[data-placeholder] { color: var(--lg-muted-foreground); } .lg-select-chevron { display: inline-flex; flex: none; color: var(--lg-muted-foreground); transition: rotate 260ms var(--lg-spring); } .lg-select-chevron > svg { width: 1rem; height: 1rem; } .lg-select-trigger[data-state='open'] .lg-select-chevron { rotate: 180deg; } .lg-select-content { --lg-panel-radius: 1.25rem; z-index: 60; box-sizing: border-box; min-width: var(--radix-select-trigger-width); max-width: calc(100vw - 1rem); max-height: var(--radix-select-content-available-height, 24rem); padding: 0.375rem; font-size: 0.9375rem; line-height: 1.4; transform-origin: var(--radix-select-content-transform-origin); } .lg-select-content:focus { outline: none; } .lg-select-viewport { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .lg-select-viewport::-webkit-scrollbar { display: none; } .lg-select-scroll { display: flex; align-items: center; justify-content: center; height: 1.5rem; color: var(--lg-muted-foreground); cursor: default; } .lg-select-scroll > svg { width: 1rem; height: 1rem; } /* ============================================ Progress, spinner and skeleton: waiting, told quietly ============================================ */ .lg-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; } .lg-progress { --lg-progress-height: 0.5rem; display: grid; gap: 0.5rem; width: 100%; color: var(--lg-foreground); font-size: 0.875rem; line-height: 1.25rem; } .lg-progress[data-size='sm'] { --lg-progress-height: 0.25rem; } .lg-progress[data-size='lg'] { --lg-progress-height: 0.75rem; } .lg-progress-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .lg-progress-value { color: var(--lg-muted-foreground); font-variant-numeric: tabular-nums; } .lg-progress-track { position: relative; height: var(--lg-progress-height); overflow: hidden; border-radius: 9999px; background: var(--lg-track); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18); } /* The whole pill slides in from the left, so its leading end stays round. */ .lg-progress-fill { width: 100%; height: 100%; border-radius: inherit; background-color: var(--lg-accent); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4); translate: calc((var(--lg-progress, 0) - 100) * 1%) 0; transition: translate 640ms var(--lg-ease-out); } .lg-progress[data-state='indeterminate'] .lg-progress-fill { width: 40%; translate: 75% 0; transition: none; /* Stepped at 30 frames a second: a loader that runs for a while does not need a frame every 8 ms, and the GPU is spared most of them. */ animation: lg-progress-sweep 1.6s steps(48) infinite; } @keyframes lg-progress-sweep { from { translate: -100% 0; } to { translate: 250% 0; } } .lg-spinner { --lg-spinner-size: 1.5rem; --lg-spinner-width: 2px; display: inline-flex; flex: none; width: var(--lg-spinner-size); height: var(--lg-spinner-size); border-radius: 9999px; box-shadow: inset 0 0 0 var(--lg-spinner-width) color-mix(in srgb, currentColor 20%, transparent); color: var(--lg-foreground); vertical-align: middle; } .lg-spinner[data-size='sm'] { --lg-spinner-size: 1rem; --lg-spinner-width: 1.5px; } .lg-spinner[data-size='lg'] { --lg-spinner-size: 2.25rem; --lg-spinner-width: 3px; } .lg-spinner-ring { width: 100%; height: 100%; border-radius: inherit; background: conic-gradient(from 0deg, transparent, currentColor); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - var(--lg-spinner-width) - 0.5px), #000 calc(100% - var(--lg-spinner-width)) ); mask: radial-gradient( farthest-side, transparent calc(100% - var(--lg-spinner-width) - 0.5px), #000 calc(100% - var(--lg-spinner-width)) ); animation: lg-spinner-turn 0.9s linear infinite; } @keyframes lg-spinner-turn { to { rotate: 360deg; } } .lg-skeleton { position: relative; display: block; min-height: 1rem; overflow: hidden; border-radius: 0.625rem; background: var(--lg-control-surface); } .lg-skeleton[data-variant='circle'] { width: 2.5rem; min-height: 0; aspect-ratio: 1; border-radius: 9999px; } .lg-skeleton[data-variant='line'] { min-height: 0; height: 0.875rem; border-radius: 9999px; } .lg-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 20%, rgb(255 255 255 / 0.14) 50%, transparent 80% ); translate: -100% 0; /* Stepped at 30 frames a second, like the progress sweep. */ animation: lg-skeleton-sheen 1.8s steps(54) infinite; } [data-lg-theme='light'] .lg-skeleton::after { background: linear-gradient( 100deg, transparent 20%, rgb(255 255 255 / 0.75) 50%, transparent 80% ); } @keyframes lg-skeleton-sheen { to { translate: 100% 0; } } .lg-skeleton-text { display: grid; gap: 0.625rem; width: 100%; } .lg-skeleton-text > .lg-skeleton:last-child:not(:only-child) { width: 62%; } /* ============================================ Alert: tinted glass with the badge's tones. Every tone keeps 4.5:1 text contrast over a pure black or pure white backdrop in both themes. ============================================ */ .lg-alert { --lg-alert-fill: 13 44 82; --lg-alert-ink: #b2d6ff; --lg-alert-tint: 0 103 217; --lg-alert-highlight: rgb(255 255 255 / 0.12); display: flex; align-items: flex-start; gap: 0.75rem; box-sizing: border-box; width: 100%; padding: 0.875rem 1rem; border-radius: 1.125rem; background: rgb(var(--lg-alert-fill) / 0.88); box-shadow: inset 0 1px 0 var(--lg-alert-highlight), inset 0 0 0 0.5px rgb(var(--lg-alert-tint) / 0.45); color: var(--lg-foreground); font-size: 0.9375rem; line-height: 1.4; -webkit-backdrop-filter: blur(min(var(--lg-glass-blur), 16px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(min(var(--lg-glass-blur), 16px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); } .lg-alert[data-tone='success'] { --lg-alert-fill: 22 60 48; --lg-alert-ink: #7cebc0; --lg-alert-tint: 51 214 159; } .lg-alert[data-tone='warning'] { --lg-alert-fill: 70 54 22; --lg-alert-ink: #ffd27a; --lg-alert-tint: 255 189 56; } .lg-alert[data-tone='danger'] { --lg-alert-fill: 76 30 44; --lg-alert-ink: #ffa6b7; --lg-alert-tint: 255 92 122; } [data-lg-theme='light'] .lg-alert { --lg-alert-fill: 229 241 255; --lg-alert-ink: #0054b3; --lg-alert-tint: 0 103 217; --lg-alert-highlight: rgb(255 255 255 / 0.9); } [data-lg-theme='light'] .lg-alert[data-tone='success'] { --lg-alert-fill: 224 247 238; --lg-alert-ink: #08603f; --lg-alert-tint: 20 168 116; } [data-lg-theme='light'] .lg-alert[data-tone='warning'] { --lg-alert-fill: 255 243 219; --lg-alert-ink: #824c00; --lg-alert-tint: 232 150 12; } [data-lg-theme='light'] .lg-alert[data-tone='danger'] { --lg-alert-fill: 255 229 236; --lg-alert-ink: #a8113a; --lg-alert-tint: 232 52 90; } /* Dismissing folds the alert to nothing. The alert sits in a one-row grid, and the row shrinks from its content to zero, so its padding and margin go with it and nothing is measured. */ .lg-alert-fold { display: grid; grid-template-rows: 1fr; } .lg-alert-fold-inner { min-height: 0; } .lg-alert-fold[data-state='folding'] { grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--lg-ease-out); } .lg-alert-fold[data-state='folding'] > .lg-alert-fold-inner { overflow: hidden; } .lg-alert-fold[data-state='folding'] .lg-alert { opacity: 0; pointer-events: none; transition: opacity 160ms ease-in; } .lg-alert-icon { display: inline-flex; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; color: var(--lg-alert-ink); } .lg-alert-icon > svg { display: block; width: 100%; height: 100%; } .lg-alert-body { display: grid; flex: 1; gap: 0.125rem; min-width: 0; } .lg-alert-title { margin: 0; font-weight: 600; } .lg-alert-description { opacity: 0.82; } .lg-alert-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: -0.25rem -0.375rem -0.25rem 0; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--lg-foreground); cursor: pointer; opacity: 0.7; transition: background-color 180ms ease, opacity 180ms ease; } .lg-alert-close:hover { background: rgb(255 255 255 / 0.14); opacity: 1; } [data-lg-theme='light'] .lg-alert-close:hover { background: rgb(0 0 0 / 0.07); } .lg-alert-close:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 1px; opacity: 1; } .lg-alert-close > svg { width: 1rem; height: 1rem; } /* ============================================ Avatar: a round photo or coloured initials. A dot or a neighbour cuts the circle away instead of ringing it, so it works on any backdrop. ============================================ */ .lg-avatar { --lg-avatar-size: 2.5rem; --lg-avatar-dot: 0.625rem; position: relative; display: inline-flex; flex: none; width: var(--lg-avatar-size); height: var(--lg-avatar-size); font-size: calc(var(--lg-avatar-size) * 0.38); vertical-align: middle; } .lg-avatar[data-size='xs'] { --lg-avatar-size: 1.5rem; --lg-avatar-dot: 0.4375rem; } .lg-avatar[data-size='sm'] { --lg-avatar-size: 2rem; --lg-avatar-dot: 0.5rem; } .lg-avatar[data-size='lg'] { --lg-avatar-size: 3.5rem; --lg-avatar-dot: 0.875rem; } .lg-avatar[data-size='xl'] { --lg-avatar-size: 5rem; --lg-avatar-dot: 1.125rem; } .lg-avatar-face { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; border-radius: 9999px; background: var(--lg-control-surface); color: #fff; font-weight: 600; line-height: 1; user-select: none; } .lg-avatar-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.22); pointer-events: none; } [data-lg-theme='light'] .lg-avatar-face::after { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.3); } .lg-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; } .lg-avatar-fallback { --lg-avatar-from: #747479; --lg-avatar-to: #535359; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(145deg, var(--lg-avatar-from), var(--lg-avatar-to)); text-shadow: 0 1px 1px rgb(0 0 0 / 0.22); } .lg-avatar-fallback[data-tone='0'] { --lg-avatar-from: #2d6de9; --lg-avatar-to: #1a4fc7; } .lg-avatar-fallback[data-tone='1'] { --lg-avatar-from: #b93f24; --lg-avatar-to: #882c1a; } .lg-avatar-fallback[data-tone='2'] { --lg-avatar-from: #707075; --lg-avatar-to: #56565b; } .lg-avatar-fallback[data-tone='3'] { --lg-avatar-from: #d0386f; --lg-avatar-to: #a82458; } .lg-avatar-fallback[data-tone='4'] { --lg-avatar-from: #b9540f; --lg-avatar-to: #9c4308; } .lg-avatar-fallback[data-tone='5'] { --lg-avatar-from: #1f8150; --lg-avatar-to: #146c3c; } .lg-avatar-fallback[data-tone='6'] { --lg-avatar-from: #0e7d8b; --lg-avatar-to: #0a6674; } .lg-avatar-fallback[data-tone='7'] { --lg-avatar-from: #747479; --lg-avatar-to: #535359; } .lg-avatar-status { --lg-status: #8e8e93; position: absolute; top: calc(var(--lg-avatar-size) * 0.8536 - var(--lg-avatar-dot) / 2); left: calc(var(--lg-avatar-size) * 0.8536 - var(--lg-avatar-dot) / 2); width: var(--lg-avatar-dot); height: var(--lg-avatar-dot); border-radius: 9999px; background: var(--lg-status); } .lg-avatar[data-status='online'] > .lg-avatar-status { --lg-status: #33d69f; } .lg-avatar[data-status='away'] > .lg-avatar-status { --lg-status: #ffbd38; } .lg-avatar[data-status='busy'] > .lg-avatar-status { --lg-status: #ff5c7a; } [data-lg-theme='light'] .lg-avatar[data-status='online'] > .lg-avatar-status { --lg-status: #14a874; } [data-lg-theme='light'] .lg-avatar[data-status='away'] > .lg-avatar-status { --lg-status: #e8960c; } [data-lg-theme='light'] .lg-avatar[data-status='busy'] > .lg-avatar-status { --lg-status: #e8345a; } .lg-avatar[data-status] > .lg-avatar-face { --lg-cut-status: radial-gradient( circle at calc(var(--lg-avatar-size) * 0.8536) calc(var(--lg-avatar-size) * 0.8536), transparent calc(var(--lg-avatar-dot) / 2 + 2px), #000 calc(var(--lg-avatar-dot) / 2 + 2.5px) ); -webkit-mask-image: var(--lg-cut-status), var(--lg-cut-next, linear-gradient(#000, #000)); mask-image: var(--lg-cut-status), var(--lg-cut-next, linear-gradient(#000, #000)); -webkit-mask-composite: source-in; mask-composite: intersect; } .lg-avatar-group { display: inline-flex; align-items: center; isolation: isolate; } .lg-avatar-group[data-size='xs'] .lg-avatar { --lg-avatar-size: 1.5rem; --lg-avatar-dot: 0.4375rem; } .lg-avatar-group[data-size='sm'] .lg-avatar { --lg-avatar-size: 2rem; --lg-avatar-dot: 0.5rem; } .lg-avatar-group[data-size='md'] .lg-avatar { --lg-avatar-size: 2.5rem; --lg-avatar-dot: 0.625rem; } .lg-avatar-group[data-size='lg'] .lg-avatar { --lg-avatar-size: 3.5rem; --lg-avatar-dot: 0.875rem; } .lg-avatar-group[data-size='xl'] .lg-avatar { --lg-avatar-size: 5rem; --lg-avatar-dot: 1.125rem; } .lg-avatar-group > .lg-avatar + .lg-avatar { margin-inline-start: calc(var(--lg-avatar-size) * -0.2); } .lg-avatar-group > .lg-avatar:not(:last-child) > .lg-avatar-face { --lg-cut-next: radial-gradient( circle at calc(var(--lg-avatar-size) * 1.3) 50%, transparent calc(var(--lg-avatar-size) / 2 + 2px), #000 calc(var(--lg-avatar-size) / 2 + 2.5px) ); -webkit-mask-image: var(--lg-cut-status, linear-gradient(#000, #000)), var(--lg-cut-next); mask-image: var(--lg-cut-status, linear-gradient(#000, #000)), var(--lg-cut-next); -webkit-mask-composite: source-in; mask-composite: intersect; } [dir='rtl'] .lg-avatar-group > .lg-avatar:not(:last-child) > .lg-avatar-face { --lg-cut-next: radial-gradient( circle at calc(var(--lg-avatar-size) * -0.3) 50%, transparent calc(var(--lg-avatar-size) / 2 + 2px), #000 calc(var(--lg-avatar-size) / 2 + 2.5px) ); } .lg-avatar-more { background: var(--lg-control-surface-hover); color: var(--lg-foreground); font-size: calc(var(--lg-avatar-size) * 0.32); } /* ============================================ Kbd: a keycap with a lit top edge and a dark lip ============================================ */ .lg-kbd { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4375rem; border-radius: 0.4375rem; background: var(--lg-control-surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px var(--lg-border), 0 1px 0 rgb(0 0 0 / 0.35); color: var(--lg-foreground); font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; } [data-lg-theme='light'] .lg-kbd { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px var(--lg-border), 0 1px 0 rgb(0 0 0 / 0.16); } .lg-kbd-group { display: inline-flex; align-items: center; gap: 0.25rem; } /* ============================================ Scroll area: native scrolling with a thin glass scrollbar over its edge. The bar shows while the pointer is over the area or it scrolls, rests narrow, and widens under the pointer. ============================================ */ .lg-scroll-area { position: relative; overflow: hidden; } /* A max-height on the area bounds the viewport as well as a height does. */ .lg-scroll-area-viewport { width: 100%; height: 100%; max-height: inherit; border-radius: inherit; } .lg-scroll-area-viewport:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: -2px; } .lg-scrollbar { z-index: 1; display: flex; box-sizing: border-box; padding: 3px; touch-action: none; user-select: none; transition: padding 160ms var(--lg-ease-out); } .lg-scrollbar[data-orientation='vertical'] { width: 10px; } .lg-scrollbar[data-orientation='horizontal'] { flex-direction: column; height: 10px; } .lg-scrollbar:hover { padding: 2px; } .lg-scrollbar[data-state='visible'] { animation: lg-scrollbar-in 160ms var(--lg-ease-out); } .lg-scrollbar[data-state='hidden'] { animation: lg-scrollbar-out 240ms ease-in forwards; } /* A sliver of clear glass: a faint tint of the text colour, a lit rim and a blur of what scrolls beneath it. */ .lg-scrollbar-thumb { position: relative; flex: 1; border-radius: 999px; background: color-mix(in srgb, var(--lg-foreground) 24%, transparent); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.24); -webkit-backdrop-filter: blur(6px) saturate(1.6); backdrop-filter: blur(6px) saturate(1.6); transition: background-color 160ms var(--lg-ease-out); } [data-lg-theme='light'] .lg-scrollbar-thumb { box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.7), 0 0 0 0.5px rgb(0 0 0 / 0.06); } /* The pointer can catch more than the sliver it sees. */ .lg-scrollbar-thumb::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 24px; min-height: 24px; transform: translate(-50%, -50%); } .lg-scrollbar:hover .lg-scrollbar-thumb { background: color-mix(in srgb, var(--lg-foreground) 40%, transparent); } @keyframes lg-scrollbar-in { from { opacity: 0; } } @keyframes lg-scrollbar-out { to { opacity: 0; } } [data-lg-reduce-transparency='1'] .lg-scrollbar-thumb { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--lg-foreground) 55%, var(--lg-bg)); } @media (prefers-contrast: more) { .lg-scrollbar-thumb { background: color-mix(in srgb, var(--lg-foreground) 70%, transparent); } } @media (forced-colors: active) { .lg-scrollbar-thumb { forced-color-adjust: none; background: CanvasText; box-shadow: none; } } /* ============================================ Command: a search field over a list that filters as you type. The highlighted row is the menu's, and the list resizes with its results. ============================================ */ .lg-command { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: inherit; color: var(--lg-foreground); font-size: 0.9375rem; line-height: 1.4; } .lg-command-dialog { --lg-panel-radius: 1.5rem; top: min(18vh, 9rem); max-width: 40rem; padding: 0; translate: -50% 0; overflow: hidden; } .lg-command-search { display: flex; flex: none; align-items: center; gap: 0.75rem; height: 3.25rem; padding: 0 1.125rem; border-bottom: 1px solid var(--lg-border); color: var(--lg-muted-foreground); transition: box-shadow 200ms ease; } .lg-command-search:focus-within { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--lg-focus-ring) 60%, transparent); } .lg-command-search > svg { flex: none; width: 1.125rem; height: 1.125rem; } .lg-command-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--lg-foreground); font: inherit; font-size: 1rem; outline: none; } .lg-command-input::placeholder { color: var(--lg-muted-foreground); opacity: 0.72; } .lg-command-list { box-sizing: border-box; height: min(calc(var(--cmdk-list-height, 22rem) + 0.75rem), 22rem); max-height: min(22rem, 60dvh); padding: 0.375rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 0.375rem; transition: height 160ms var(--lg-ease-out); } .lg-command-group [cmdk-group-heading] { padding: 0.5rem 0.75rem 0.25rem; color: var(--lg-muted-foreground); font-size: 0.75rem; font-weight: 600; line-height: 1rem; user-select: none; } .lg-command-item { display: flex; align-items: center; gap: 0.625rem; box-sizing: border-box; min-height: 2.5rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; color: var(--lg-foreground); cursor: default; outline: none; user-select: none; } .lg-command-item > svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--lg-muted-foreground); } .lg-command-item[data-selected='true'] { background: rgb(255 255 255 / 0.14); } [data-lg-theme='light'] .lg-command-item[data-selected='true'] { background: rgb(0 0 0 / 0.06); } .lg-command-item[data-disabled='true'] { opacity: var(--lg-disabled-opacity); pointer-events: none; } .lg-command-empty { padding: 2rem 1rem; color: var(--lg-muted-foreground); text-align: center; } .lg-command-separator { height: 1px; margin: 0.375rem 0.625rem; background: var(--lg-border); } .lg-command-shortcut { display: inline-flex; align-items: center; margin-inline-start: auto; padding-inline-start: 1.5rem; color: var(--lg-muted-foreground); font-size: 0.75rem; letter-spacing: 0.06em; } /* ============================================ Breadcrumb and pagination: where you are, and the way on ============================================ */ .lg-breadcrumb { color: var(--lg-muted-foreground); font-size: 0.9375rem; line-height: 1.4; } .lg-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; margin: 0; padding: 0; list-style: none; } .lg-breadcrumb-item { display: inline-flex; align-items: center; gap: 0.125rem; min-width: 0; } .lg-breadcrumb-link, .lg-breadcrumb-ellipsis, .lg-breadcrumb-page { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 1.875rem; padding: 0 0.625rem; border-radius: 9999px; } .lg-breadcrumb-link, .lg-breadcrumb-ellipsis { border: 0; background: transparent; color: var(--lg-muted-foreground); cursor: pointer; font: inherit; text-decoration: none; transition: background-color 180ms ease, color 180ms ease; } .lg-breadcrumb-link:hover, .lg-breadcrumb-ellipsis:hover, .lg-breadcrumb-ellipsis[data-state='open'] { background: rgb(255 255 255 / 0.1); color: var(--lg-foreground); } [data-lg-theme='light'] .lg-breadcrumb-link:hover, [data-lg-theme='light'] .lg-breadcrumb-ellipsis:hover, [data-lg-theme='light'] .lg-breadcrumb-ellipsis[data-state='open'] { background: rgb(0 0 0 / 0.06); } .lg-breadcrumb-link:focus-visible, .lg-breadcrumb-ellipsis:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 1px; } .lg-breadcrumb-ellipsis { padding: 0 0.375rem; } .lg-breadcrumb-ellipsis > svg { width: 1.25rem; height: 1.25rem; } .lg-breadcrumb-page { color: var(--lg-foreground); font-weight: 600; } .lg-breadcrumb-separator { display: inline-flex; color: var(--lg-muted-foreground); opacity: 0.65; } .lg-breadcrumb-separator > svg { width: 1rem; height: 1rem; } [dir='rtl'] .lg-breadcrumb-separator { scale: -1 1; } .lg-breadcrumb-item:last-child > .lg-breadcrumb-separator { display: none; } .lg-pagination-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .lg-page { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem; border: 0; border-radius: 9999px; background: transparent; box-shadow: inset 0 0 0 1px transparent; color: var(--lg-foreground); cursor: pointer; font: inherit; font-size: 0.9375rem; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; transition: background-color 200ms ease, box-shadow 200ms ease, scale 320ms var(--lg-spring); } .lg-page > svg { width: 1.125rem; height: 1.125rem; } .lg-page:hover:not(:disabled, [data-current]) { background: var(--lg-control-surface-hover); } .lg-page:active:not(:disabled) { scale: 0.92; } .lg-page:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-page:disabled { cursor: not-allowed; opacity: var(--lg-disabled-opacity); } .lg-page[data-current] { background: rgb(255 255 255 / 0.16); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 0 0 1px rgb(255 255 255 / 0.12); font-weight: 600; } [data-lg-theme='light'] .lg-page[data-current] { background: rgb(0 0 0 / 0.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(0 0 0 / 0.06); } .lg-page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; color: var(--lg-muted-foreground); user-select: none; } /* Tabs */ .lg-tabs-list { display: flex; width: 100%; max-width: 100%; gap: 0.25rem; padding: 0.25rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); } .lg-tabs-trigger { position: relative; display: flex; flex: 1 1 0%; min-width: 0; align-items: center; justify-content: center; border-radius: 9999px; padding: 0.5rem 0.75rem; color: var(--lg-muted-foreground); transition: color var(--lg-motion-duration) ease, background-color var(--lg-motion-duration) ease, box-shadow var(--lg-motion-duration) ease; } .lg-tabs-trigger:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-tabs-trigger:disabled { pointer-events: none; opacity: var(--lg-disabled-opacity); } .lg-tabs-content { margin-top: 0.75rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); } /* The active trigger is a small raised glass bubble */ .lg-tabs-trigger[data-state='active'] { color: var(--lg-foreground); background: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.24), 0 4px 12px -4px rgb(0 0 0 / 0.4); } [data-lg-theme='light'] .lg-tabs-trigger[data-state='active'] { background: rgb(255 255 255 / 0.82); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 3px rgb(0 0 0 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.16); } /* The bubble catches the same specular light as the glass around it. */ .lg-tabs-trigger[data-state='active']::after, .lg-tabs-indicator::after { content: ''; position: absolute; inset: 0; padding: var(--lg-rim-width); border-radius: inherit; pointer-events: none; background: linear-gradient( to bottom right, rgb(255 255 255 / var(--lg-specular-peak)), rgb(255 255 255 / var(--lg-specular-floor)) 38% 62%, rgb(255 255 255 / var(--lg-specular-counter)) ); -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, linear-gradient(#000 0 0); mask-composite: exclude; } /* Once scripts run, one bubble for the whole list moves between triggers and the active trigger stops drawing its own. */ .lg-tabs-indicator { display: none; } .lg-tabs-list[data-lg-indicator='ready'] > .lg-tabs-indicator { --lg-bubble-alpha: 0.12; position: absolute; z-index: 1; display: block; border-radius: 9999px; pointer-events: none; } [data-lg-theme='light'] .lg-tabs-list[data-lg-indicator='ready'] > .lg-tabs-indicator { --lg-bubble-alpha: 0.82; } .lg-tabs-list[data-lg-indicator='ready'] .lg-tabs-trigger[data-state='active'] { background: transparent; box-shadow: none; transition: color var(--lg-motion-duration) ease; } .lg-tabs-list[data-lg-indicator='ready'] .lg-tabs-trigger[data-state='active']::after { display: none; } /* Accordion: the trigger shares the content card's corner radius */ .lg-accordion-trigger { display: flex; width: 100%; justify-content: space-between; border: 1px solid var(--lg-border); border-radius: var(--lg-radius-md); padding: 0.75rem 1rem; background: var(--lg-control-surface); box-shadow: none; color: var(--lg-foreground); font-size: 1rem; line-height: 1.5; font-weight: 500; text-align: left; -webkit-backdrop-filter: blur(min(var(--lg-glass-blur), 12px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(min(var(--lg-glass-blur), 12px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); transition: transform var(--lg-motion-duration) cubic-bezier(0.2, 0, 0, 1), background-color var(--lg-motion-duration) ease; } .lg-accordion-trigger:hover { background: var(--lg-control-surface-hover); } .lg-accordion-trigger:disabled { pointer-events: none; opacity: var(--lg-disabled-opacity); } .lg-accordion-content { margin-top: 0.5rem; overflow: hidden; font-size: 0.875rem; line-height: calc(1.25 / 0.875); } .lg-accordion-chevron { flex: none; transition: transform var(--lg-motion-duration) ease; } .lg-accordion-trigger[data-state='open'] .lg-accordion-chevron { transform: rotate(180deg); } /* ============================================ Enter and exit motion. Radix keeps a closing layer mounted until its exit animation ends; the reduced motion guards above cut both to zero. The keyframes move scale and translate, never transform, so they compose with positioning and with a sheet's drag offset. ============================================ */ @keyframes lg-fade-in { from { opacity: 0; } } @keyframes lg-fade-out { to { opacity: 0; } } /* A layer grows out of whatever opened it. --lg-pop-x and --lg-pop-y hold the last few pixels of its travel, away from its trigger; a dialog keeps its own centring in them and rises. */ @keyframes lg-pop-in { from { opacity: 0; scale: 0.96; translate: var(--lg-pop-x, 0) var(--lg-pop-y, 0); } } @keyframes lg-pop-out { to { opacity: 0; scale: 0.96; translate: var(--lg-pop-x, 0) var(--lg-pop-y, 0); } } .lg-dialog-content { --lg-pop-x: -50%; --lg-pop-y: calc(-50% + 0.5rem); } .lg-popover-content[data-side='bottom'], .lg-menu-content[data-side='bottom'], .lg-select-content[data-side='bottom'], .lg-tooltip-content[data-side='bottom'] { --lg-pop-y: -0.25rem; } .lg-popover-content[data-side='top'], .lg-menu-content[data-side='top'], .lg-select-content[data-side='top'], .lg-tooltip-content[data-side='top'] { --lg-pop-y: 0.25rem; } .lg-popover-content[data-side='right'], .lg-menu-content[data-side='right'], .lg-select-content[data-side='right'], .lg-tooltip-content[data-side='right'] { --lg-pop-x: -0.25rem; } .lg-popover-content[data-side='left'], .lg-menu-content[data-side='left'], .lg-select-content[data-side='left'], .lg-tooltip-content[data-side='left'] { --lg-pop-x: 0.25rem; } .lg-dialog-overlay[data-state='open'] { animation: lg-fade-in 320ms var(--lg-ease-out); } .lg-dialog-overlay[data-state='closed'] { animation: lg-fade-out 220ms ease-in forwards; } .lg-dialog-content[data-state='open'], .lg-popover-content[data-state='open'], .lg-menu-content[data-state='open'], .lg-select-content[data-state='open'] { animation: lg-pop-in 240ms var(--lg-ease-out); } .lg-dialog-content[data-state='closed'], .lg-popover-content[data-state='closed'], .lg-menu-content[data-state='closed'], .lg-select-content[data-state='closed'] { animation: lg-pop-out 160ms ease-in forwards; } .lg-popover-content { transform-origin: var(--radix-popover-content-transform-origin); } .lg-menu-content { transform-origin: var(--radix-dropdown-menu-content-transform-origin); } .lg-select-content { transform-origin: var(--radix-select-content-transform-origin); } /* A tip settles in from the side it opens toward and fades on the way out. Moving from one trigger to the next skips the entrance, so the tip follows the pointer instead of restarting. */ .lg-tooltip-content { transform-origin: var(--radix-tooltip-content-transform-origin); } .lg-tooltip-content[data-state='delayed-open'] { animation: lg-pop-in 140ms var(--lg-ease-out); } .lg-tooltip-content[data-state='instant-open'] { animation: lg-fade-in 90ms ease-out; } .lg-tooltip-content[data-state='closed'] { animation: lg-pop-out 100ms ease-in forwards; } /* A toast slides in from the side it will leave toward and back out when it goes: the side of its swipe direction, the right unless the provider says otherwise. The slide is on the list item and the fade on the glass itself: opacity on an ancestor of the frost would turn its blur off until the animation ended. A swipe drags it and a fling sends it on its way. */ .lg-toast { --lg-toast-shift-x: 2rem; --lg-toast-shift-y: 0px; --lg-toast-fly-x: calc(100% + 2rem); --lg-toast-fly-y: 0px; } .lg-toast[data-swipe-direction='left'] { --lg-toast-shift-x: -2rem; --lg-toast-fly-x: calc(-100% - 2rem); } .lg-toast[data-swipe-direction='up'] { --lg-toast-shift-x: 0px; --lg-toast-shift-y: -2rem; --lg-toast-fly-x: 0px; --lg-toast-fly-y: calc(-100% - 2rem); } .lg-toast[data-swipe-direction='down'] { --lg-toast-shift-x: 0px; --lg-toast-shift-y: 2rem; --lg-toast-fly-x: 0px; --lg-toast-fly-y: calc(100% + 2rem); } @keyframes lg-toast-slide-in { from { translate: var(--lg-toast-shift-x) var(--lg-toast-shift-y); } } @keyframes lg-toast-slide-out { to { translate: var(--lg-toast-shift-x) var(--lg-toast-shift-y); } } @keyframes lg-toast-swipe-out { from { translate: var(--radix-toast-swipe-end-x, 0px) var(--radix-toast-swipe-end-y, 0px); } to { translate: var(--lg-toast-fly-x) var(--lg-toast-fly-y); } } .lg-toast[data-state='open'] { animation: lg-toast-slide-in 420ms var(--lg-ease-out); } .lg-toast[data-state='open'] > .lg-toast-root { animation: lg-fade-in 300ms ease-out; } .lg-toast[data-state='closed'] { animation: lg-toast-slide-out 220ms ease-in forwards; } .lg-toast[data-state='closed'] > .lg-toast-root { animation: lg-fade-out 200ms ease-in forwards; } .lg-toast[data-swipe='move'] { translate: var(--radix-toast-swipe-move-x, 0px) var(--radix-toast-swipe-move-y, 0px); } .lg-toast[data-swipe='cancel'] { translate: 0 0; transition: translate 260ms var(--lg-spring); } .lg-toast[data-swipe='end'] { animation: lg-toast-swipe-out 160ms ease-out forwards; } /* The card opens and closes like a curtain. Height and padding move, opacity does not, for the same reason as the toast: the card's frost sits in a child layer. */ @keyframes lg-accordion-down { from { height: 0; margin-top: 0; padding-block: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes lg-accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; margin-top: 0; padding-block: 0; } } .lg-accordion-content[data-state='open'] { animation: lg-accordion-down 300ms var(--lg-ease-out); } .lg-accordion-content[data-state='closed'] { animation: lg-accordion-up 220ms ease-in forwards; } @keyframes lg-avatar-in { from { opacity: 0; scale: 1.06; } } .lg-avatar-image { animation: lg-avatar-in 260ms var(--lg-ease-out); } /* ============================================ Switch: a pill track and a white knob that turns to clear glass while it is held, the way the system toggle does ============================================ */ .lg-switch { --lg-switch-width: 3.75rem; --lg-switch-height: 1.75rem; --lg-switch-thumb-width: 2.25rem; --lg-switch-thumb-height: 1.5rem; --lg-switch-inset: 0.125rem; --lg-switch-direction: 1; /* Held, the knob swells past the track, and the lens shows what lies under it at this share of its size. */ --lg-switch-swell: 1.57; --lg-switch-minify: 0.85; /* The colour of the track under the knob, which its rim and glow pick up. */ --lg-switch-lens-tint: var(--lg-track); position: relative; display: inline-flex; flex: none; align-items: center; box-sizing: border-box; width: var(--lg-switch-width); height: var(--lg-switch-height); margin: 0; padding: 0 var(--lg-switch-inset); border: none; border-radius: 9999px; background: var(--lg-track); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 250ms ease; } .lg-switch[data-size='sm'] { --lg-switch-width: 2.875rem; --lg-switch-height: 1.5rem; --lg-switch-thumb-width: 1.75rem; --lg-switch-thumb-height: 1.25rem; } [dir='rtl'] .lg-switch, .lg-switch[dir='rtl'] { --lg-switch-direction: -1; } .lg-switch[data-state='checked'] { --lg-switch-lens-tint: var(--lg-switch-on); background: var(--lg-switch-on); } .lg-switch:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-switch[data-disabled] { cursor: not-allowed; opacity: var(--lg-disabled-opacity); } .lg-switch-thumb { position: relative; display: block; flex: none; width: var(--lg-switch-thumb-width); height: var(--lg-switch-thumb-height); border-radius: 9999px; background: var(--lg-knob); box-shadow: var(--lg-knob-shadow); pointer-events: none; translate: 0 0; transition: translate 420ms var(--lg-spring), scale 320ms var(--lg-spring), background-color 180ms ease, box-shadow 180ms ease; } .lg-switch[data-state='checked'] .lg-switch-thumb { translate: calc( (var(--lg-switch-width) - var(--lg-switch-thumb-width) - var(--lg-switch-inset) * 2) * var(--lg-switch-direction) ) 0; } /* Held, the knob swells past the track into a lens of clear glass. Through it the track and what lies around it show a little smaller, and they bend at the rim. Lit from the top left, the rim takes the track's colour, heavier along the bottom and right where the light leaves the glass, and glints on the left. A soft glow in the same colour lies around it. After a flip it stays this size and glass while it slides, and only then shrinks back. */ .lg-switch:is(:active, [data-lg-moving]):not([data-disabled]) .lg-switch-thumb { background: rgb(255 255 255 / 0); box-shadow: 0.4px 0.8px 0.8px rgb(0 0 0 / 0.14), 0 2px 5px rgb(0 0 0 / 0.06), 0 0 12px 3px color-mix(in srgb, var(--lg-switch-lens-tint) 18%, transparent); scale: var(--lg-switch-swell); } .lg-switch-thumb::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; /* Gradients and unblurred shadows only: WebKit draws a blurred inset shadow at low resolution, which the swell would show as blocks. */ background: radial-gradient(19% 7% at 15% 20%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0)), radial-gradient(19% 7% at 15% 80%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0)), linear-gradient( to top, color-mix(in srgb, var(--lg-switch-lens-tint) 18%, transparent), transparent 32% ), linear-gradient(rgb(0 0 0 / 0.05), transparent 14%), linear-gradient(rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02)); box-shadow: inset 0.35px 0.6px color-mix(in srgb, var(--lg-switch-lens-tint) 80%, black), inset 0 0 0 0.4px var(--lg-switch-lens-tint), inset -0.6px -1.4px oklch(from var(--lg-switch-lens-tint) calc(l + 0.1) c h), inset -0.9px -2.2px color-mix( in srgb, oklch(from var(--lg-switch-lens-tint) calc(l + 0.18) c h) 45%, transparent ); transition: opacity 180ms ease, box-shadow 250ms ease; } .lg-switch:is(:active, [data-lg-moving]):not([data-disabled]) .lg-switch-thumb::after { opacity: 1; } /* The lens reaches a margin past the knob so its rim has track to bend in, and cuts the filtered view back to the knob, half a pixel inside so the rim's highlight covers the copy's edge. A clip on the filtered element itself would let Chromium draw the filter's margin outside it. It is hidden at rest, so the filter only runs while the knob is glass. */ .lg-switch-lens { position: absolute; top: calc(var(--lg-switch-lens-margin, 0px) * -1); left: calc(var(--lg-switch-lens-margin, 0px) * -1); width: calc(var(--lg-switch-thumb-width) + var(--lg-switch-lens-margin, 0px) * 2); height: calc(var(--lg-switch-thumb-height) + var(--lg-switch-lens-margin, 0px) * 2); clip-path: inset(calc(var(--lg-switch-lens-margin, 0px) + 0.5px) round 9999px); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; } /* The view is laid out at --lg-switch-lens-scale times the lens and scaled back down on its own layer, so engines that filter at layout resolution bend it smoothly too. WebKit draws a filtered layer from its overflow origin, so the view clips its own overflow on a composited layer. It is filled with the colour behind the switch, which the component reads when the knob is pressed, so the real track under the knob stays hidden. */ .lg-switch-lens-view { position: absolute; top: 0; left: 0; width: calc(100% * var(--lg-switch-lens-scale, 1)); height: calc(100% * var(--lg-switch-lens-scale, 1)); overflow: hidden; background: var(--lg-switch-lens-backdrop, var(--lg-bg)); transform-origin: 0 0; transform: translateZ(0) scale(calc(1 / var(--lg-switch-lens-scale, 1))); } .lg-switch:is(:active, [data-lg-moving]):not([data-disabled]) .lg-switch-lens { opacity: 1; visibility: visible; transition-delay: 0s; } /* The scene under the lens, around the knob's centre. It undoes the knob's swell with the same timing, and shows what lies under the knob at --lg-switch-minify of its size. */ .lg-switch-lens-scene { position: absolute; inset: 0; scale: var(--lg-switch-minify); transition: scale 320ms var(--lg-spring); } .lg-switch:is(:active, [data-lg-moving]):not([data-disabled]) .lg-switch-lens-scene { scale: calc(var(--lg-switch-minify) / var(--lg-switch-swell)); } /* The track as it lies under the knob, at the lens's scale: the knob's slide is undone with the same timing, so the copy stays put while the knob passes over it. */ .lg-switch-lens-track { position: absolute; inset-inline-start: calc( (var(--lg-switch-lens-margin, 0px) - var(--lg-switch-inset)) * var(--lg-switch-lens-scale, 1) ); top: calc( (var(--lg-switch-lens-margin, 0px) - (var(--lg-switch-height) - var(--lg-switch-thumb-height)) / 2) * var(--lg-switch-lens-scale, 1) ); width: calc(var(--lg-switch-width) * var(--lg-switch-lens-scale, 1)); height: calc(var(--lg-switch-height) * var(--lg-switch-lens-scale, 1)); border-radius: 9999px; background: var(--lg-track); box-shadow: inset 0 calc(var(--lg-switch-lens-scale, 1) * 1px) calc(var(--lg-switch-lens-scale, 1) * 2px) rgb(0 0 0 / 0.1); translate: 0 0; transition: translate 420ms var(--lg-spring), background-color 250ms ease; } .lg-switch[data-state='checked'] .lg-switch-lens-track { background: var(--lg-switch-on); translate: calc( (var(--lg-switch-width) - var(--lg-switch-thumb-width) - var(--lg-switch-inset) * 2) * var(--lg-switch-direction) * var(--lg-switch-lens-scale, 1) * -1 ) 0; } /* ============================================ Slider: a thin track, an accent fill and the same capsule knob ============================================ */ .lg-slider { --lg-slider-thumb-width: 2.375rem; --lg-slider-thumb-height: 1.5rem; --lg-slider-track-size: 0.375rem; position: relative; display: flex; align-items: center; width: 100%; height: var(--lg-slider-thumb-height); touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; } .lg-slider[data-orientation='vertical'] { flex-direction: column; width: var(--lg-slider-thumb-height); height: 100%; min-height: 8rem; } .lg-slider[data-disabled] { opacity: var(--lg-disabled-opacity); } .lg-slider-track { position: relative; flex-grow: 1; overflow: hidden; border-radius: 9999px; background: var(--lg-track); } .lg-slider-track[data-orientation='horizontal'] { height: var(--lg-slider-track-size); } .lg-slider-track[data-orientation='vertical'] { width: var(--lg-slider-track-size); } .lg-slider-range { position: absolute; border-radius: inherit; background: var(--lg-accent); } .lg-slider-range[data-orientation='horizontal'] { height: 100%; } .lg-slider-range[data-orientation='vertical'] { width: 100%; } .lg-slider-thumb { display: block; width: var(--lg-slider-thumb-width); height: var(--lg-slider-thumb-height); border-radius: 9999px; background: var(--lg-knob); box-shadow: var(--lg-knob-shadow); cursor: grab; /* Script stretches a dragged knob along the track with its speed. */ transform: scale(var(--lg-stretch-x, 1), var(--lg-stretch-y, 1)); transition: scale 320ms var(--lg-spring), background-color 180ms ease, box-shadow 180ms ease; } .lg-slider[data-orientation='vertical'] .lg-slider-thumb { width: var(--lg-slider-thumb-height); height: var(--lg-slider-thumb-width); } .lg-slider-thumb:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-slider[data-disabled] .lg-slider-thumb { cursor: not-allowed; } /* Radix focuses the thumb it drags, so only that one turns to glass. */ .lg-slider:not([data-disabled]):active .lg-slider-thumb:focus { background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.55), inset 1.5px 2px 1px -1px rgb(255 255 255 / 0.9), inset -1.5px -2px 1px -1px rgb(255 255 255 / 0.55), inset 0 0 8px rgb(255 255 255 / 0.28), 0 4px 14px rgb(0 0 0 / 0.2); cursor: grabbing; scale: 1.3 1.4; } /* ============================================ Segmented control: one raised bubble slides between equal segments. :has() counts the segments and finds the checked one, so the bubble is placed before any script runs. Up to six segments. ============================================ */ .lg-segmented { --lg-segmented-pad: 0.1875rem; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; padding: var(--lg-segmented-pad); font-size: 0.875rem; line-height: calc(1.25 / 0.875); } .lg-segmented:has(> button:nth-of-type(2):last-of-type) { --lg-segmented-count: 2; } .lg-segmented:has(> button:nth-of-type(3):last-of-type) { --lg-segmented-count: 3; } .lg-segmented:has(> button:nth-of-type(4):last-of-type) { --lg-segmented-count: 4; } .lg-segmented:has(> button:nth-of-type(5):last-of-type) { --lg-segmented-count: 5; } .lg-segmented:has(> button:nth-of-type(6):last-of-type) { --lg-segmented-count: 6; } .lg-segmented:has(> button:nth-of-type(2)[data-state='checked']) { --lg-segmented-index: 1; } .lg-segmented:has(> button:nth-of-type(3)[data-state='checked']) { --lg-segmented-index: 2; } .lg-segmented:has(> button:nth-of-type(4)[data-state='checked']) { --lg-segmented-index: 3; } .lg-segmented:has(> button:nth-of-type(5)[data-state='checked']) { --lg-segmented-index: 4; } .lg-segmented:has(> button:nth-of-type(6)[data-state='checked']) { --lg-segmented-index: 5; } .lg-segmented > .lg-segmented-indicator { position: absolute; top: var(--lg-segmented-pad); bottom: var(--lg-segmented-pad); left: var(--lg-segmented-pad); z-index: 1; width: calc((100% - var(--lg-segmented-pad) * 2) / var(--lg-segmented-count, 1)); border-radius: 9999px; background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.24), 0 4px 12px -4px rgb(0 0 0 / 0.4); pointer-events: none; translate: calc(var(--lg-segmented-index, 0) * 100%) 0; transition: translate 460ms var(--lg-spring), opacity 200ms ease; } [dir='rtl'] .lg-segmented > .lg-segmented-indicator { right: var(--lg-segmented-pad); left: auto; translate: calc(var(--lg-segmented-index, 0) * -100%) 0; } .lg-segmented:not(:has(> button[data-state='checked'])) > .lg-segmented-indicator { opacity: 0; } /* Light glass on a white page would hide the white bubble, so the track sinks into a faint slate well. */ [data-lg-theme='light']:not([data-lg-reduce-transparency='1']) .lg-segmented::before { background-color: rgb(100 108 140 / 0.12); } [data-lg-theme='light'] .lg-segmented > .lg-segmented-indicator { background: rgb(255 255 255 / 0.9); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 3px rgb(0 0 0 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.16); } /* Once measured, script owns the bubble. It springs each edge toward the selected item and writes --lg-lift while the bubble travels or is held, which turns it into clearer glass that floats higher. */ .lg-segmented[data-lg-indicator='ready'] { touch-action: pan-y; } .lg-segmented[data-lg-indicator='ready'] > .lg-segmented-indicator { --lg-bubble-alpha: 0.14; } [data-lg-theme='light'] .lg-segmented[data-lg-indicator='ready'] > .lg-segmented-indicator { --lg-bubble-alpha: 0.9; } .lg-segmented[data-lg-indicator='ready'] > .lg-segmented-indicator, .lg-tabs-list[data-lg-indicator='ready'] > .lg-tabs-indicator { --lg-bubble-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.24), 0 4px 12px -4px rgb(0 0 0 / 0.4); top: 0; right: auto; bottom: auto; left: 0; /* A bead of glass: lit from above, clearer while it is lifted, and it brightens and sharpens what lies under it. */ background: linear-gradient( 180deg, rgb(255 255 255 / calc((var(--lg-bubble-alpha) + 0.08) * (1 - var(--lg-lift, 0) * 0.55))), rgb(255 255 255 / calc(var(--lg-bubble-alpha) * (1 - var(--lg-lift, 0) * 0.55))) ); -webkit-backdrop-filter: blur(2px) saturate(1.5) brightness(calc(1.08 + var(--lg-lift, 0) * 0.14)); backdrop-filter: blur(2px) saturate(1.5) brightness(calc(1.08 + var(--lg-lift, 0) * 0.14)); box-shadow: inset 0 0 0 calc(var(--lg-lift, 0) * 0.75px) rgb(255 255 255 / calc(var(--lg-lift, 0) * 0.5)), inset 0 0 calc(var(--lg-lift, 0) * 12px) rgb(255 255 255 / calc(var(--lg-lift, 0) * 0.2)), 0 calc(var(--lg-lift, 0) * 8px) calc(var(--lg-lift, 0) * 22px) rgb(0 0 0 / calc(var(--lg-lift, 0) * 0.25)), var(--lg-bubble-shadow); transition: opacity 200ms ease; } [data-lg-theme='light'] .lg-segmented[data-lg-indicator='ready'] > .lg-segmented-indicator, [data-lg-theme='light'] .lg-tabs-list[data-lg-indicator='ready'] > .lg-tabs-indicator { --lg-bubble-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 3px rgb(0 0 0 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.16); } :is(.lg-segmented-indicator, .lg-tabs-indicator)[data-lg-empty] { opacity: 0; } .lg-segmented[data-lg-dragging] { cursor: grabbing; -webkit-user-select: none; user-select: none; } .lg-segmented-indicator::after { content: ''; position: absolute; inset: 0; padding: var(--lg-rim-width); border-radius: inherit; pointer-events: none; background: linear-gradient( to bottom right, rgb(255 255 255 / var(--lg-specular-peak)), rgb(255 255 255 / var(--lg-specular-floor)) 38% 62%, rgb(255 255 255 / var(--lg-specular-counter)) ); -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, linear-gradient(#000 0 0); mask-composite: exclude; } [data-lg-reduce-transparency='1'] :is(.lg-segmented-indicator, .lg-tabs-indicator)::after { background: var(--lg-border); } [data-lg-reduce-transparency='1'] .lg-segmented > .lg-segmented-indicator, [data-lg-reduce-transparency='1'] :is(.lg-segmented, .lg-tabs-list)[data-lg-indicator='ready'] > :is(.lg-segmented-indicator, .lg-tabs-indicator) { background: var(--lg-control-surface-hover); } .lg-segmented-item { position: relative; z-index: 2; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 0.375rem; margin: 0; padding: 0.4375rem 0.875rem; border: none; border-radius: 9999px; background: transparent; color: var(--lg-muted-foreground); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--lg-motion-duration) ease; } .lg-segmented-item:hover:not([data-disabled]), .lg-segmented-item[data-state='checked'] { color: var(--lg-foreground); } .lg-segmented-item:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: -2px; } .lg-segmented-item[data-disabled] { cursor: not-allowed; opacity: var(--lg-disabled-opacity); } /* ============================================ Badge: a small frosted capsule. Every tone keeps 4.5:1 text contrast over a pure black or pure white backdrop in both themes. ============================================ */ .lg-badge { --lg-badge-fill: 44 44 46; --lg-badge-ink: #f5f5f7; --lg-badge-tint: 142 142 147; --lg-badge-highlight: rgb(255 255 255 / 0.12); display: inline-flex; align-items: center; gap: 0.375rem; box-sizing: border-box; padding: 0.1875rem 0.625rem; border-radius: 9999px; background: rgb(var(--lg-badge-fill) / 0.88); box-shadow: inset 0 1px 0 var(--lg-badge-highlight), inset 0 0 0 0.5px rgb(var(--lg-badge-tint) / 0.4); color: var(--lg-badge-ink); font-size: 0.75rem; line-height: 1rem; font-weight: 600; white-space: nowrap; -webkit-backdrop-filter: blur(min(var(--lg-glass-blur), 12px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(min(var(--lg-glass-blur), 12px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); } .lg-badge[data-tone='blue'] { --lg-badge-fill: 13 44 82; --lg-badge-ink: #b2d6ff; --lg-badge-tint: 0 103 217; } .lg-badge[data-tone='green'] { --lg-badge-fill: 22 60 48; --lg-badge-ink: #7cebc0; --lg-badge-tint: 51 214 159; } .lg-badge[data-tone='orange'] { --lg-badge-fill: 70 54 22; --lg-badge-ink: #ffd27a; --lg-badge-tint: 255 189 56; } .lg-badge[data-tone='red'] { --lg-badge-fill: 76 30 44; --lg-badge-ink: #ffa6b7; --lg-badge-tint: 255 92 122; } .lg-badge[data-tone='purple'] { --lg-badge-fill: 44 36 92; --lg-badge-ink: #c7b8ff; --lg-badge-tint: 155 128 255; } [data-lg-theme='light'] .lg-badge { --lg-badge-fill: 242 242 244; --lg-badge-ink: #222224; --lg-badge-highlight: rgb(255 255 255 / 0.9); } [data-lg-theme='light'] .lg-badge[data-tone='blue'] { --lg-badge-fill: 229 241 255; --lg-badge-ink: #0054b3; --lg-badge-tint: 0 103 217; } [data-lg-theme='light'] .lg-badge[data-tone='green'] { --lg-badge-fill: 224 247 238; --lg-badge-ink: #08603f; --lg-badge-tint: 20 168 116; } [data-lg-theme='light'] .lg-badge[data-tone='orange'] { --lg-badge-fill: 255 243 219; --lg-badge-ink: #824c00; --lg-badge-tint: 232 150 12; } [data-lg-theme='light'] .lg-badge[data-tone='red'] { --lg-badge-fill: 255 229 236; --lg-badge-ink: #a8113a; --lg-badge-tint: 232 52 90; } [data-lg-theme='light'] .lg-badge[data-tone='purple'] { --lg-badge-fill: 237 232 255; --lg-badge-ink: #5532d0; --lg-badge-tint: 106 76 240; } .lg-badge-dot { flex: none; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: rgb(var(--lg-badge-tint)); } /* ============================================ Dock: a glass shelf under a row of icons that name themselves on hover ============================================ */ .lg-dock { --lg-dock-size: 3rem; --lg-dock-gap: 0.5rem; --lg-dock-pad: 0.625rem; position: relative; display: inline-flex; align-items: center; gap: var(--lg-dock-gap); box-sizing: border-box; height: calc(var(--lg-dock-size) + var(--lg-dock-pad) * 2); padding: var(--lg-dock-pad) calc(var(--lg-dock-pad) + 0.125rem); isolation: isolate; } .lg-dock > .lg-dock-shelf { --lg-panel-radius: calc(var(--lg-dock-size) * 0.24 + var(--lg-dock-pad)); position: absolute; inset: 0; z-index: 0; pointer-events: none; } .lg-dock-item { position: relative; z-index: 1; display: flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: calc(var(--lg-dock-size) * var(--lg-dock-scale, 1)); height: calc(var(--lg-dock-size) * var(--lg-dock-scale, 1)); margin: 0; padding: 0; border: none; border-radius: 22.5%; /* Nothing is painted behind the artwork, so an icon that bounces or has clear edges shows the shelf. */ background: none; color: inherit; cursor: pointer; /* The hover label sits outside the button, where a double click would otherwise select it even while it is hidden. */ user-select: none; -webkit-tap-highlight-color: transparent; } /* A consumer's icon dimensions take precedence over the full-size app artwork. */ .lg-dock-item > :where(:not(.lg-dock-label, .lg-dock-dot)) { width: 100%; height: 100%; } .lg-dock-item:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; } .lg-dock-label { position: absolute; bottom: calc(100% + 0.625rem); left: 50%; z-index: 2; padding: 0.375rem 0.625rem; border-radius: 0.625rem; background: var(--lg-overlay-surface); box-shadow: inset 0 0 0 0.5px var(--lg-border), var(--lg-shadow); color: var(--lg-foreground); font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; translate: -50% 0.25rem; transition: opacity 150ms ease, translate 220ms var(--lg-ease-out); -webkit-backdrop-filter: blur(min(var(--lg-glass-blur), 16px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(min(var(--lg-glass-blur), 16px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); } .lg-dock-item:hover > .lg-dock-label, .lg-dock-item:focus-visible > .lg-dock-label { opacity: 1; translate: -50% 0; } .lg-dock-dot { position: absolute; bottom: calc(var(--lg-dock-pad) * -1 + 0.1875rem); left: 50%; width: 0.25rem; height: 0.25rem; border-radius: 9999px; background: var(--lg-foreground); opacity: 0; translate: -50% 0; transition: opacity 200ms ease; } .lg-dock-item[data-active='true'] > .lg-dock-dot { opacity: 0.75; } .lg-dock-separator { position: relative; z-index: 1; flex: none; align-self: stretch; width: 1px; margin: 0.375rem 0.25rem; background: var(--lg-border); } /* ============================================ Sheet: a glass card that slides in from an edge. A bottom sheet can be dragged down by its grabber to dismiss it. ============================================ */ @keyframes lg-sheet-in-bottom { from { translate: 0 calc(100% + 1rem); } } @keyframes lg-sheet-out-bottom { to { translate: 0 calc(100% + 1rem); } } @keyframes lg-sheet-in-top { from { translate: 0 calc(-100% - 1rem); } } @keyframes lg-sheet-out-top { to { translate: 0 calc(-100% - 1rem); } } @keyframes lg-sheet-in-left { from { translate: calc(-100% - 1rem) 0; } } @keyframes lg-sheet-out-left { to { translate: calc(-100% - 1rem) 0; } } @keyframes lg-sheet-in-right { from { translate: calc(100% + 1rem) 0; } } @keyframes lg-sheet-out-right { to { translate: calc(100% + 1rem) 0; } } .lg-sheet-content { --lg-panel-radius: 2.5rem; position: fixed; z-index: 50; display: flex; flex-direction: column; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } .lg-sheet-content:focus { outline: none; } .lg-sheet-content[data-side='bottom'], .lg-sheet-content[data-side='top'] { right: 0.5rem; left: 0.5rem; max-width: 40rem; max-height: calc(100dvh - 3rem); margin-inline: auto; } .lg-sheet-content[data-side='bottom'] { bottom: 0.5rem; } .lg-sheet-content[data-side='top'] { top: 0.5rem; } .lg-sheet-content[data-side='left'], .lg-sheet-content[data-side='right'] { top: 0.5rem; bottom: 0.5rem; width: min(24rem, calc(100vw - 1rem)); } .lg-sheet-content[data-side='left'] { left: 0.5rem; } .lg-sheet-content[data-side='right'] { right: 0.5rem; } .lg-sheet-content[data-side='bottom'][data-state='open'] { animation: lg-sheet-in-bottom 500ms var(--lg-ease-out); } .lg-sheet-content[data-side='bottom'][data-state='closed'] { animation: lg-sheet-out-bottom 300ms var(--lg-ease-out) forwards; } .lg-sheet-content[data-side='top'][data-state='open'] { animation: lg-sheet-in-top 500ms var(--lg-ease-out); } .lg-sheet-content[data-side='top'][data-state='closed'] { animation: lg-sheet-out-top 300ms var(--lg-ease-out) forwards; } .lg-sheet-content[data-side='left'][data-state='open'] { animation: lg-sheet-in-left 500ms var(--lg-ease-out); } .lg-sheet-content[data-side='left'][data-state='closed'] { animation: lg-sheet-out-left 300ms var(--lg-ease-out) forwards; } .lg-sheet-content[data-side='right'][data-state='open'] { animation: lg-sheet-in-right 500ms var(--lg-ease-out); } .lg-sheet-content[data-side='right'][data-state='closed'] { animation: lg-sheet-out-right 300ms var(--lg-ease-out) forwards; } .lg-sheet-handle { display: flex; flex: none; justify-content: center; margin: -1rem -1.5rem 0.25rem; padding: 0.625rem 0 0.75rem; cursor: grab; touch-action: none; } .lg-sheet-handle:active { cursor: grabbing; } .lg-sheet-handle::before { content: ''; width: 2.25rem; height: 0.3125rem; border-radius: 9999px; background: var(--lg-muted-foreground); opacity: 0.5; } /* ============================================ Menu: a frosted list with a soft lozenge under the highlighted row ============================================ */ .lg-menu-content { --lg-panel-radius: 1.125rem; z-index: 50; box-sizing: border-box; min-width: 14rem; max-width: calc(100vw - 1rem); max-height: var(--radix-dropdown-menu-content-available-height, 100dvh); overflow-x: hidden; overflow-y: auto; padding: 0.375rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); transform-origin: var(--radix-dropdown-menu-content-transform-origin); } .lg-menu-content:focus { outline: none; } .lg-menu-item { position: relative; display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; box-sizing: border-box; padding: 0.4375rem 0.75rem; border-radius: 0.75rem; color: var(--lg-foreground); cursor: default; outline: none; user-select: none; } .lg-menu-item > svg { flex: none; width: 1rem; height: 1rem; } .lg-menu-item[data-highlighted], .lg-menu-item[data-state='open'] { background: rgb(255 255 255 / 0.14); } [data-lg-theme='light'] .lg-menu-item[data-highlighted], [data-lg-theme='light'] .lg-menu-item[data-state='open'] { background: rgb(0 0 0 / 0.06); } .lg-menu-item[data-disabled] { opacity: var(--lg-disabled-opacity); pointer-events: none; } .lg-menu-item[data-tone='destructive'] { color: var(--lg-invalid); } .lg-menu-item--inset { padding-inline-start: 2rem; } .lg-menu-indicator { position: absolute; inset-inline-start: 0.5rem; display: inline-flex; width: 1rem; align-items: center; justify-content: center; } .lg-menu-indicator > svg { width: 1rem; height: 1rem; } .lg-menu-label { padding: 0.375rem 0.75rem 0.25rem; color: var(--lg-muted-foreground); font-size: 0.75rem; line-height: 1rem; font-weight: 600; user-select: none; } .lg-menu-separator { height: 1px; margin: 0.375rem 0.625rem; background: var(--lg-border); } .lg-menu-shortcut { margin-inline-start: auto; padding-inline-start: 1.5rem; color: var(--lg-muted-foreground); font-size: 0.75rem; letter-spacing: 0.06em; } .lg-menu-chevron { margin-inline-start: auto; color: var(--lg-muted-foreground); } [dir='rtl'] .lg-menu-chevron { scale: -1 1; } /* ============================================ Lens: a draggable magnifier. Its view repeats the stage content, zoomed around the lens center and bent at the rim by the generated refraction filter where the engine supports it. ============================================ */ .lg-lens-stage { position: relative; /* Focus must not scroll the padded lens view and shift the content beneath it. */ overflow: clip; isolation: isolate; } .lg-lens { --lg-lens-size: 10rem; --lg-lens-zoom: 1.6; --lg-lens-fill: var(--lg-bg); --lg-lens-margin: 0px; position: absolute; top: 0; left: 0; z-index: 2; width: var(--lg-lens-size); height: var(--lg-lens-size); border-radius: 50%; box-shadow: 0 14px 34px -10px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.22); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; translate: calc(var(--lg-lens-x, 0px) - var(--lg-lens-size) / 2) calc(var(--lg-lens-y, 0px) - var(--lg-lens-size) / 2); transition: scale 320ms var(--lg-spring), box-shadow 200ms ease; } .lg-lens:active { box-shadow: 0 22px 44px -12px rgb(0 0 0 / 0.55), 0 4px 12px rgb(0 0 0 / 0.24); cursor: grabbing; scale: 1.04; } .lg-lens:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; } /* The view reaches a margin past the lens so the rim filter has content to bend in. WebKit draws a filtered layer from its overflow origin, so the view clips its own overflow on a composited layer and is cut back to the lens by clip-path. */ .lg-lens-view { position: absolute; inset: calc(var(--lg-lens-margin) * -1); overflow: hidden; background: var(--lg-lens-fill); clip-path: circle(calc(var(--lg-lens-size) / 2)); pointer-events: none; transform: translateZ(0); } .lg-lens-scene { position: absolute; top: var(--lg-lens-margin); left: var(--lg-lens-margin); width: var(--lg-lens-stage-width, 100%); height: var(--lg-lens-stage-height, 100%); transform-origin: 0 0; translate: calc(var(--lg-lens-size) / 2 - var(--lg-lens-x, 0px) * var(--lg-lens-zoom)) calc(var(--lg-lens-size) / 2 - var(--lg-lens-y, 0px) * var(--lg-lens-zoom)); scale: var(--lg-lens-zoom); } /* Bevel and sheen over the view, then the specular ring on top. */ .lg-lens::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 32% 24%, rgb(255 255 255 / 0.22), transparent 42%), linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 50%); box-shadow: inset 0 0 22px -6px rgb(255 255 255 / 0.5), inset 2px 3px 1px -2px rgb(255 255 255 / 0.9), inset -2px -3px 1px -2px rgb(255 255 255 / 0.55), inset 0 -10px 18px -10px rgb(0 0 0 / 0.3); } .lg-lens::after { content: ''; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient( to bottom right, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.16) 36% 64%, rgb(255 255 255 / 0.5) ); -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, linear-gradient(#000 0 0); mask-composite: exclude; } /* ============================================ GLASS SCENE One WebGL canvas draws every registered glass element in the scene as a single refracting body. The canvas shows only once it has drawn; before that, and whenever WebGL2 is missing, lost or switched off, every element keeps its CSS glass. data-lg-scene="active" marks an element whose material the canvas has taken over. ============================================ */ .lg-scene { position: relative; isolation: isolate; } .lg-scene-backdrop, .lg-scene-canvas { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; } .lg-scene-backdrop { display: block; background: var(--lg-scene-backdrop, var(--lg-scene-image, none)) center / cover no-repeat; } /* A viewport backdrop holds still while the page scrolls the glass across it, as background-attachment: fixed does. clip-path keeps it inside the scene without becoming its containing block, and the canvas reads where the layer sits, so the glass bends the backdrop that shows beside it. */ .lg-scene[data-lg-backdrop-space='viewport'] { clip-path: inset(0); } .lg-scene[data-lg-backdrop-space='viewport'] > .lg-scene-backdrop { position: fixed; border-radius: 0; } .lg-scene-canvas { display: none; width: 100%; height: 100%; } .lg-scene[data-lg-scene-renderer='webgl'] > .lg-scene-canvas { display: block; } /* Each element hands the canvas the same material its CSS glass shows, and the faintest colour of its text, which the face keeps legible. The canvas frosts over a disk, which spreads light as far as a blur of half its radius. A tenth of the surface blur keeps the shapes behind the glass sharp, so its rim has something to bend. Milk-white frost hides them and the glass reads as acrylic. */ .lg-scene .lg-glass-surface { --lg-scene-tint: rgb( 255 255 255 / calc(var(--lg-surface-alpha) + var(--lg-scene-tint-boost) + var(--lg-surface-lift)) ); --lg-scene-frost: calc(var(--lg-surface-blur) * 0.1); --lg-scene-ink: var(--lg-muted-foreground); transition: box-shadow var(--lg-motion-duration) ease, transform var(--lg-motion-duration) ease, --lg-scene-tint var(--lg-motion-duration) ease; } /* The dock shelf carries no text, so it keeps its full colour. */ .lg-scene .lg-glass-surface.lg-dock-shelf { --lg-scene-ink: transparent; } .lg-scene .lg-button { --lg-scene-tint: var(--lg-button-fill); --lg-scene-frost: calc(var(--lg-surface-blur) * 0.4); --lg-scene-ink: var(--lg-ink); transition: transform calc(var(--lg-motion-duration) * 1.9) var(--lg-spring), box-shadow var(--lg-motion-duration) ease, --lg-scene-tint var(--lg-motion-duration) ease; } .lg-scene .lg-button:not(:disabled, [aria-disabled='true']):hover { --lg-scene-tint: var(--lg-button-fill-hover); } .lg-scene .lg-glass-surface[data-lg-scene='active'], .lg-scene .lg-button[data-lg-scene='active'] { box-shadow: none !important; } .lg-scene .lg-glass-surface[data-lg-scene='active']::before, .lg-scene .lg-glass-surface[data-lg-scene='active']::after, .lg-scene .lg-glass-surface[data-lg-scene='active'] > .lg-noise, .lg-scene .lg-button[data-lg-scene='active'] > .lg-button__layers > :is( .lg-button__light, .lg-button__distortion, .lg-button__tint, .lg-button__shine, .lg-button__rim ) { display: none; } /* A button on a pane the canvas draws sits on glass already. It keeps its frost but neither bends nor saturates that face again, which would undo the face's legible range. */ .lg-scene [data-lg-scene='active'] .lg-button:not(.lg-button--ghost) > .lg-button__layers > .lg-button__distortion { -webkit-backdrop-filter: blur(var(--lg-surface-blur)); backdrop-filter: blur(var(--lg-surface-blur)); } /* Glass nested in a scene's glass, like a segmented track, keeps its frost and edges but casts no shadow, and its tint moves away from the pane's text: darker under light text, lighter under dark text. On the canvas, text on it keeps at least the contrast the face promised; the CSS glass looks the same, so nothing changes when the canvas takes over. */ .lg-scene :is(.lg-glass-surface, [data-lg-scene='active']) .lg-glass-surface { box-shadow: none; } .lg-scene :is(.lg-glass-surface, [data-lg-scene='active']) .lg-glass-surface::before { background: rgb(0 0 0 / 0.14); -webkit-backdrop-filter: blur(var(--lg-surface-blur)); backdrop-filter: blur(var(--lg-surface-blur)); } [data-lg-theme='light'] .lg-scene :is(.lg-glass-surface, [data-lg-scene='active']) .lg-glass-surface::before { background: rgb(255 255 255 / 0.22); } /* A plain piece of glass for scenes: a droplet, lens or pebble. Outside a scene, or before the canvas draws, it shows as frosted CSS glass. */ .lg-scene-drop { --lg-scene-tint: rgb(255 255 255 / calc(0.1 + var(--lg-scene-tint-boost))); --lg-scene-frost: 3px; --lg-scene-flow: 1; border-radius: var(--lg-radius-lg); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 8px 24px rgb(0 0 0 / 0.18); -webkit-backdrop-filter: blur(min(var(--lg-glass-blur), 8px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); backdrop-filter: blur(min(var(--lg-glass-blur), 8px)) brightness(var(--lg-glass-brightness)) contrast(var(--lg-glass-contrast)) saturate(var(--lg-glass-sat)); } .lg-scene-drop[data-lg-scene='active'] { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root[data-lg-reduce-transparency='1'] .lg-scene-drop { background: var(--lg-opaque-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } /* The system setting also protects components installed without a provider, including their first paint. An explicit provider choice takes precedence. */ @media (prefers-reduced-transparency: reduce) { :root:not([data-lg-reduce-transparency='0']) { --lg-glass-blur: 0px; --lg-glass-alpha: 0.95; --lg-noise-alpha: 0.01; --lg-glass-contrast: 1; --lg-glass-sat: 1; --lg-glass-brightness: 1; --lg-refraction-scale: 0; --lg-lens-depth: 0; --lg-opaque-surface: #2c2c2e; --lg-control-surface: #3a3a3c; --lg-control-surface-hover: #48484a; --lg-track: #48484a; } :root[data-lg-theme='light']:not([data-lg-reduce-transparency='0']) { --lg-opaque-surface: #ffffff; --lg-control-surface: #f0f0f2; --lg-control-surface-hover: #e3e3e7; --lg-track: #e6e6e9; } :root:not([data-lg-reduce-transparency='0']) .lg-glass-surface::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--lg-opaque-surface) !important; box-shadow: none !important; transform: none; } :root:not([data-lg-reduce-transparency='0']) :is(.lg-glass-surface, .lg-tabs-trigger[data-state='active'])::after, :root:not([data-lg-reduce-transparency='0']) :is(.lg-segmented-indicator, .lg-tabs-indicator)::after { background: var(--lg-border); } :root:not([data-lg-reduce-transparency='0']) .lg-button__rim { background: none; box-shadow: inset 0 0 0 var(--lg-rim-width) var(--lg-border); } :root:not([data-lg-reduce-transparency='0']) :is( .lg-dialog-content, .lg-popover-content, .lg-toast-root, .lg-tooltip-content, .lg-sheet-content, .lg-menu-content, .lg-select-content, .lg-dock-label ) { background: var(--lg-opaque-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root:not([data-lg-reduce-transparency='0']) :is( .lg-button__distortion, .lg-input, .lg-accordion-trigger, .lg-dialog-overlay, .lg-badge, .lg-alert ) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root:not([data-lg-reduce-transparency='0']) .lg-button--prominent > .lg-button__layers > .lg-button__distortion { background: var(--lg-prominent-fill) !important; } :root:not([data-lg-reduce-transparency='0']) .lg-button:not(.lg-button--ghost, .lg-button--prominent) { --lg-button-fill: var(--lg-control-surface) !important; --lg-button-fill-hover: var(--lg-control-surface-hover) !important; } :root:not([data-lg-reduce-transparency='0']) .lg-button__layers > .lg-button__light { display: none !important; } :root:not([data-lg-reduce-transparency='0']) :is(.lg-switch-thumb, .lg-slider-thumb) { background: var(--lg-knob) !important; } :root:not([data-lg-reduce-transparency='0']) :is(.lg-button__shine, .lg-button__tint) { opacity: 0; } :root:not([data-lg-reduce-transparency='0']) :is(.lg-button__bloom, .lg-refraction-background) { display: none; } :root:not([data-lg-reduce-transparency='0']) .lg-segmented > .lg-segmented-indicator, :root:not([data-lg-reduce-transparency='0']) :is(.lg-segmented, .lg-tabs-list)[data-lg-indicator='ready'] > :is(.lg-segmented-indicator, .lg-tabs-indicator) { background: var(--lg-control-surface-hover); } :root:not([data-lg-reduce-transparency='0']) .lg-scene-drop { background: var(--lg-opaque-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } } } 57:T175c,'use client'; import './styles/liquid.css'; import clsx from 'clsx'; import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; import type { CSSProperties, HTMLAttributes } from 'react'; import { mergeRefs } from './lib/merge-refs'; import { GlassSceneContext, createGlassSceneRegistry, useGlassScenePane, } from './lib/scene-context'; import { createSceneRenderer } from './lib/scene-renderer'; import { useOptionalPreferences } from './glass-provider'; import type { SceneOptics, SceneRenderer, SceneSettings } from './lib/scene-renderer'; export type GlassSceneOptics = SceneOptics & { /** Distance in CSS pixels within which neighbouring glass melts together. */ merge: number; }; export type GlassSceneProps = HTMLAttributes & { /** * The image the glass refracts, painted as the scene's background: a URL, * or a CSS url() or var() value. Serve it from this origin or with CORS. */ backdrop?: string; /** * Where the backdrop sits. 'viewport' pins it to the viewport, as * background-attachment: fixed does, so scrolling carries the glass across * a still image; the scene clips it to its own box. Defaults to 'local'. */ backdropSpace?: 'local' | 'viewport'; /** Lets glass that sets --lg-scene-flow ripple like liquid. Reduced motion holds it still. */ flow?: boolean; optics?: Partial; }; const DEFAULT_OPTICS: GlassSceneOptics = { ior: 1.5, thickness: 40, bevel: 28, dispersion: 0.15, frost: 1, merge: 12, specular: 1, }; const toCssUrl = (value: string) => /^\s*(url|var)\(/i.test(value) ? value : `url("${value.replace(/["\\\n]/g, (character) => (character === '\n' ? '\\a ' : `\\${character}`))}")`; /** * Draws its glass children as one body of thick glass over a backdrop image: * rims bend the image and split its colours, nearby pieces melt together and * a fixed light catches the rims. Needs WebGL2; without it, and under reduced * transparency or increased contrast, every child keeps its CSS glass. */ export const GlassScene = forwardRef( ( { backdrop, backdropSpace = 'local', flow = false, optics, className, style, children, ...rest }, forwardedRef, ) => { const [registry] = useState(createGlassSceneRegistry); const rootRef = useRef(null); const canvasRef = useRef(null); const backdropRef = useRef(null); const rendererRef = useRef(null); const ref = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]); const { preferences } = useOptionalPreferences(); const scale = preferences.thickness; // The site's thickness preference scales the default slab. Optics a scene sets itself stay as set. const { ior, thickness, bevel, dispersion, frost, specular, merge } = { ...DEFAULT_OPTICS, thickness: DEFAULT_OPTICS.thickness * scale, bevel: DEFAULT_OPTICS.bevel * (0.6 + 0.4 * scale), dispersion: DEFAULT_OPTICS.dispersion * scale, ...optics, }; const settings = useMemo( () => ({ flow, optics: { ior, thickness, bevel, dispersion, frost, specular } }), [flow, ior, thickness, bevel, dispersion, frost, specular], ); const settingsRef = useRef(settings); useEffect(() => { settingsRef.current = settings; rendererRef.current?.update(settings); }, [settings]); useEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; const layer = backdropRef.current; if (!root || !canvas || !layer) return; const renderer = createSceneRenderer({ root, canvas, backdrop: layer, registry, settings: settingsRef.current, }); rendererRef.current = renderer; return () => { rendererRef.current = null; renderer.destroy(); }; }, [registry]); return (

); }, ); GlassScene.displayName = 'GlassScene'; export type GlassDropProps = HTMLAttributes & { /** Merge distance for this drop in CSS pixels. Defaults to the scene's. */ merge?: number; }; /** * A drop of glass inside a GlassScene. Size, round and place it with * CSS; drops closer than their merge distance melt into one. */ export const GlassDrop = forwardRef( ({ merge, className, style, ...rest }, forwardedRef) => { const dropRef = useRef(null); const ref = useMemo(() => mergeRefs(dropRef, forwardedRef), [forwardedRef]); // SAFETY: CSSProperties has no custom-property index; this adds one string-valued property. const mergeStyle = { '--lg-scene-merge': `${merge}px`, ...style } as CSSProperties; useGlassScenePane(dropRef); return (

); }, ); GlassDrop.displayName = 'GlassDrop'; 58:T647,'use client'; import { createContext, useContext, useLayoutEffect } from 'react'; import type { RefObject } from 'react'; export type GlassSceneRegistry = { elements: ReadonlySet; register: (element: HTMLElement) => () => void; subscribe: (listener: () => void) => () => void; }; // The registry exists before any effect runs, because children register in // their effects and those run before the scene's own effect. export function createGlassSceneRegistry(): GlassSceneRegistry { const elements = new Set(); const listeners = new Set<() => void>(); const notify = () => listeners.forEach((listener) => listener()); return { elements, register(element) { elements.add(element); notify(); return () => { elements.delete(element); notify(); }; }, subscribe(listener) { listeners.add(listener); return () => { listeners.delete(listener); }; }, }; } export const GlassSceneContext = createContext(null); /** * Lets a glass element hand its material to the nearest GlassScene. Outside a * scene it does nothing. It registers before paint, so glass that mounts into * a live scene never shows its CSS material first. */ export function useGlassScenePane(ref: RefObject, enabled = true) { const registry = useContext(GlassSceneContext); useLayoutEffect(() => { const element = ref.current; if (!registry || !enabled || !element) return; return registry.register(element); }, [enabled, ref, registry]); } 59:T10a28,import { createSpring, localRect, stepSpring } from './liquid-motion'; import { SLAB_AIR_GAP, SLAB_MAX_SLOPE, SLAB_MIN_RISE, SLAB_RISE_SPAN } from './slab-optics'; import type { Spring } from './liquid-motion'; import type { GlassSceneRegistry } from './scene-context'; /* * The WebGL2 renderer behind GlassScene. * * Every registered glass element becomes a rounded box in one signed distance * field. Boxes fold together with a smooth minimum, so neighbours melt into a * single body when they come close. Each pixel inside the field is treated as * a thick slab of glass whose top curves down into a rounded bevel at the edge * and that floats a little above the scene's backdrop image. Light follows * Snell's law through the curved top, the slab, the flat underside and the air * gap, split into a spectrum of wavelengths, so the rim bends and fringes the * backdrop with colour where real glass would, and reflects all of it back * past the critical angle. The top reflects its surroundings with the exact * Fresnel term, tinted glass darkens and colours light with the length of its * path, and the shadow under tinted glass takes on its colour. Highlights come * from a fixed light above the top left, so the glass answers to what lies * behind it and never to where the pointer is. Glass that carries text keeps * it legible: where the backdrop would bring the face too close to the text * colour, the face dims or lifts just enough. * * Only the cells of the canvas that some glass can reach are drawn, and each * cell folds only the panes that reach it, so large scenes stay cheap. * * The canvas replaces the CSS material only while it really draws. Before the * first frame, and whenever WebGL2 is missing, lost or turned off by an * accessibility setting, elements keep their CSS glass. The root always says * which one shows in data-lg-scene-renderer: css, webgl or off. */ export type SceneOptics = { /** Refractive index. Window glass is about 1.5. */ ior: number; /** Height of the glass slab in CSS pixels. Thicker glass bends further. */ thickness: number; /** Width of the curved rim in CSS pixels. */ bevel: number; /** * Spreads the refractive index by 0.4 times this value from red to violet * light. Flint glass spreads it by about 0.05. 0 turns it off. */ dispersion: number; /** Multiplier on every element's frost radius. */ frost: number; /** Strength of reflections and highlights. */ specular: number; }; export type SceneSettings = { /** Lets elements that set --lg-scene-flow ripple and wobble like liquid. */ flow: boolean; optics: SceneOptics; }; export type SceneRenderer = { update: (settings: SceneSettings) => void; destroy: () => void; }; type SceneRendererOptions = { root: HTMLElement; canvas: HTMLCanvasElement; backdrop: HTMLElement; registry: GlassSceneRegistry; settings: SceneSettings; }; const MAX_PANES = 24; // The loop keeps drawing this long after the last sign of change, so a // transition that starts a frame late still gets every frame. const TAIL_MS = 400; // Canvas and texture sizes stay bounded so a huge scene cannot exhaust a // phone's GPU memory. const MAX_PIXELS = 4_200_000; const MAX_TEXTURE = 4096; // The light sits above the top left, where interfaces conventionally light their surfaces. const LIGHT = (() => { const [x, y, z] = [-0.5, -0.7, 0.5]; const length = Math.hypot(x, y, z); return [x / length, y / length, z / length]; })(); // Shadows fade out within this distance, which bounds the drawn area. const SHADOW_REACH = 70; // The share of a tinted pane's shadow made of light that crossed the glass // and took on its colour. const SHADOW_TINT = 0.3; // A flowing edge sways by up to this much per unit of flow. const WOBBLE = 8; // A leaving pane below this presence is invisible and is dropped. const CULL = 0.004; // Text on glass keeps this contrast with the face behind it. The margin over // WCAG's 4.5:1 absorbs rounding to 8-bit colour. const INK_CONTRAST = 4.6; const RASTER_THROTTLE_MS = 150; // Resolution steps the loop falls back to while frames run slow. An idle // scene always finishes with a full-resolution frame. const SCALES = [1, 0.75, 0.5]; const WARNING = 'Glassy UI GlassScene: '; const RENDERER = 'data-lg-scene-renderer'; const STATE = 'data-lg-scene-state'; const BACKDROP = 'data-lg-scene-backdrop'; const SCALE = 'data-lg-scene-scale'; const ACTIVE = 'data-lg-scene'; const warned = new Set(); const warnOnce = (key: string, message: string) => { if (warned.has(key)) return; warned.add(key); console.warn(WARNING + message); }; // A golden-angle spiral spreads the frost taps evenly over a unit disk. const DISK = Array.from({ length: 9 }, (_, index) => { const radius = Math.sqrt((index + 0.5) / 9); const angle = index * 2.39996; return `vec2(${(radius * Math.cos(angle)).toFixed(5)}, ${(radius * Math.sin(angle)).toFixed(5)})`; }).join(', '); // Cauchy's law makes the index linear in 1 / λ². Measured from the index at // the helium d line, 587.6 nm, where glass indices are quoted, violet light // (400 nm) and red light (700 nm) sit at these shares of the full spread. const VIOLET = (1 / 400 ** 2 - 1 / 587.6 ** 2) / (1 / 400 ** 2 - 1 / 700 ** 2); const RED = VIOLET - 1; // Seven bands of the visible spectrum, each at its place from violet (0) to // red (1) in 1 / λ², with what it adds to red, green and blue: the CIE colour // matching functions taken to linear sRGB, negative lobes dropped. Every // channel's weights sum to 1, so light that does not split stays white. const BANDS = [ [0.1472, 0.0346, 0, 0.3599], [0.3827, 0, 0, 0.5828], [0.5611, 0, 0.3283, 0.0573], [0.6995, 0, 0.5228, 0], [0.8089, 0.5476, 0.1489, 0], [0.897, 0.3774, 0, 0], [0.9689, 0.0405, 0, 0], ]; // Where each channel's light lands on average along the same line. const CENTROID = [1, 2, 3].map( (channel) => BANDS.reduce((sum, band) => sum + band[0] * band[channel], 0) / BANDS.reduce((sum, band) => sum + band[channel], 0), ); // Each vertex carries a cell corner and the mask of panes that can reach the // cell. The mask is an integer, so it goes to the fragment shader flat. const VERTEX_SHADER = `#version 300 es layout(location = 0) in vec2 a_corner; layout(location = 1) in uint a_mask; flat out uint v_mask; void main() { v_mask = a_mask; gl_Position = vec4(a_corner, 0.0, 1.0); }`; /* * Glass model, per pixel p in CSS pixels from the scene's top left: * * - Distance: each pane is a rounded box. The fold is Inigo Quilez's * quadratic smooth minimum, h = max(k - |a - b|, 0) / k and * d = min(a, b) - h² k / 4, which bridges panes closer than k. Material * (tint, frost, bevel, alpha) blends with the same weight, so a bridge * takes on the look of both sides. A pane can change the fold only within * about k of the others, so a cell folds just the panes whose shadow and * bridges can reach it. * - Height: with s the depth inside the edge and u = s / W across a bevel of * width W, the surface rises as f(u) = (1 - (1 - u)^4)^(1/4): vertical at * the edge, flat from u = 1. The slab is z = T (0.3 + 0.7 f) thick and its * slope is 0.7 T / W · f'(u). * - Refraction: the view ray (0, 0, -1) bends through the surface normal into * the glass (GLSL refract, eta = 1 / n), crosses the slab, bends again at * the flat underside, where n sin θ = sin θ', and crosses an air gap to the * backdrop. The rim bends rays toward the middle, so it magnifies the * backdrop beneath it; past the steepest point the shift turns back, which * gives the mirrored strip real glass shows at its edge. The flat face * shows the backdrop in place. * - Total internal reflection: the underside's exact Fresnel term rises to 1 * at the critical angle, sin θ = 1 / n, and the backdrop fades into the * surroundings the glass reflects back up. * - Dispersion: violet and red light each take their own path, with indices * from Cauchy's law. Seven bands of the spectrum between the two add up to * red, green and blue, so white light fans out into a rainbow where the * glass tilts and stays white where it does not. Narrow fans use the three * channel centroids, wide ones a blur that matches the band spacing. * - Frost: nine disk taps plus a matching mip level blur the refracted image, * in proportion to the slab's thickness. * - Absorption: tinted glass passes (1 - a) of the light across its full * thickness and, by Beer-Lambert, an exponential share of that along the * path the ray really takes. * - Reflection: the top's exact Fresnel term, less its value head on so the * face stays clear, mirrors the surroundings: the backdrop beside the glass * where the mirrored ray points down, a bright blurred sky where it points * up. The edge catches a fixed light above the top left in a hairline. * Nothing brighter runs parallel to it inside the glass: a band there reads * as a cushion, and what shows at the rim should be the bending. * - Shadow: a soft drop shadow. Part of it is light that crossed the glass, so * tinted glass casts a shadow of its colour whose brightest channel darkens * as much as under clear glass. * - Legibility: a pane with ink passes the luminance range its face may take * while that ink keeps its contrast. In linear light the face scales down * to the cap or mixes toward white up to the floor, leaving the outermost * pixel of the rim at full light. */ const FRAGMENT_SHADER = `#version 300 es precision highp float; precision highp int; #define MAX_PANES ${MAX_PANES} const float SHADOW_REACH = ${SHADOW_REACH.toFixed(1)}; const float AIR_GAP = ${SLAB_AIR_GAP.toFixed(1)}; const float SHADOW_TINT = ${SHADOW_TINT.toFixed(2)}; const float VIOLET = ${VIOLET.toFixed(5)}; const float RED = ${RED.toFixed(5)}; const vec3 LIGHT = vec3(${LIGHT.map((value) => value.toFixed(5)).join(', ')}); const vec3 LUMA = vec3(0.2126, 0.7152, 0.0722); const vec2 DISK[9] = vec2[9](${DISK}); const float BAND_AT[7] = float[7](${BANDS.map(([at]) => at.toFixed(4)).join(', ')}); const vec3 BAND_RGB[7] = vec3[7](${BANDS.map(([, red, green, blue]) => `vec3(${red.toFixed(4)}, ${green.toFixed(4)}, ${blue.toFixed(4)})`).join(', ')}); const vec3 CENTROID = vec3(${CENTROID.map((value) => value.toFixed(4)).join(', ')}); uniform sampler2D u_backdrop; uniform vec2 u_size; uniform vec2 u_backing; uniform vec4 u_texMap; uniform float u_baseLod; uniform float u_density; uniform vec4 u_rect[MAX_PANES]; // centre x, centre y, half width, half height uniform vec4 u_radii[MAX_PANES]; // corner radius, merge radius, frost radius, seed uniform vec4 u_tint[MAX_PANES]; // premultiplied uniform vec4 u_extra[MAX_PANES]; // flow, press, bevel width, alpha uniform vec2 u_face[MAX_PANES]; // luminance cap and floor for legible ink uniform vec4 u_optics; // ior, thickness, dispersion, specular uniform vec4 u_look; // shadow, highlight, flow amplitude, pixel ratio uniform float u_time; flat in highp uint v_mask; out vec4 fragColor; vec3 sampleAt(vec2 q, float lod) { return textureLod(u_backdrop, q * u_texMap.xy + u_texMap.zw, lod).rgb; } // Signed distance to a rounded box and its outward gradient. vec3 roundedBox(vec2 p, vec2 b, float r) { vec2 s = vec2(p.x < 0.0 ? -1.0 : 1.0, p.y < 0.0 ? -1.0 : 1.0); vec2 q = abs(p) - b + r; if (q.x > 0.0 && q.y > 0.0) { float l = length(q); return vec3(l - r, s * q / l); } if (q.x > q.y) return vec3(q.x - r, s.x, 0.0); return vec3(q.y - r, 0.0, s.y); } vec3 toLinear(vec3 c) { return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c)); } vec3 toSrgb(vec3 c) { return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c)); } // Dims a face brighter than cap and lifts one darker than lift, so the text // on it keeps its contrast whatever lies behind. vec3 legible(vec3 c, float cap, float lift) { vec3 l = toLinear(c); float y = dot(l, LUMA); if (y > cap) l *= cap / y; else if (y < lift) l = mix(l, vec3(1.0), (lift - y) / max(1.0 - y, 1e-4)); return toSrgb(l); } // A logistic step, 1 / (1 + e^(1.7 x / sigma)), in base 2. float softStep(float x, float sigma) { return 1.0 / (1.0 + exp2(clamp(2.4526 * x / sigma, -40.0, 40.0))); } // Slow travelling waves bend a flowing pane's outline, by up to 7.95 pixels // along each axis per unit of flow. vec2 warp(vec2 p, float t, float seed) { return vec2( sin(p.y / 90.0 + t * 0.9 + seed) + 0.5 * sin(p.x / 47.0 - t * 1.3 + seed * 1.7), sin(p.x / 90.0 - t * 0.8 + seed * 2.3) + 0.5 * sin(p.y / 47.0 + t * 1.1 + seed * 0.6) ) * 5.3; } // Surface ripples tilt a flowing pane's normals. vec2 ripple(vec2 p, float t) { vec2 a = p / 38.0; float c = cos(a.x * 0.7 + a.y * 0.9 - t * 1.1) * 0.4; return vec2(cos(a.x + t * 1.7) * 0.6 + c * 0.7, cos(a.y - t * 1.3) * 0.6 + c * 0.9); } // Unpolarised Fresnel reflectance where light passes from index a into index // b, arriving at cos i and leaving at cos t. Past the critical angle cos t is // 0 and it reflects everything. float fresnel(float a, float b, float cosI, float cosT) { float s = (a * cosI - b * cosT) / (a * cosI + b * cosT); float q = (a * cosT - b * cosI) / (a * cosT + b * cosI); return 0.5 * (s * s + q * q); } // Follows the view ray down through glass of index n that is z thick here. // Returns where it lands on the backdrop, as a shift from where it entered; // 1 / cos of its angle inside, which stretches the path through the glass; // and the share of light the underside lets out, relative to head on. vec4 through(vec3 N, float n, float z) { vec3 inside = refract(vec3(0.0, 0.0, -1.0), N, 1.0 / n); float cosB = max(-inside.z, 0.05); float sinOut = n * length(inside.xy); float cosOut = sqrt(max(1.0 - sinOut * sinOut, 0.0)); // Past the critical angle the ray lands as if it had left at grazing // angle, so the backdrop stays continuous as it fades out. vec2 leaving = n * inside.xy / max(sinOut, 1.0); vec2 shift = inside.xy * (z / cosB) + leaving * (AIR_GAP / max(cosOut, 0.1)); float head = (n - 1.0) / (n + 1.0); return vec4(shift, 1.0 / cosB, clamp((1.0 - fresnel(n, 1.0, cosB, cosOut)) / (1.0 - head * head), 0.0, 1.0)); } // The shadow under glass of this tint, premultiplied. vec4 castShadow(vec2 p, float shadow, vec4 tint) { vec3 filtered = 1.0 - tint.a + tint.rgb; filtered /= max(max(filtered.r, filtered.g), max(filtered.b, 1e-4)); if (shadow < 0.002 || min(min(filtered.r, filtered.g), filtered.b) > 0.996) return vec4(0.0, 0.0, 0.0, shadow); float strength = min(shadow / (1.0 - SHADOW_TINT), 1.0); return vec4(sampleAt(p, u_baseLod) * filtered * (strength * SHADOW_TINT), strength); } void main() { vec2 p = vec2(gl_FragCoord.x, u_backing.y - gl_FragCoord.y) * (u_size / u_backing); float t = u_time; float amp = u_look.z; float d = 1e5; vec2 g = vec2(0.0, -1.0); vec4 tint = vec4(0.0); float frost = 0.0; float bevel = 1.0; float flow = 0.0; float press = 0.0; float alpha = 0.0; float cap = 1.0; float lift = 0.0; uint panes = v_mask; for (int i = 0; i < MAX_PANES; i++) { if ((panes >> uint(i)) == 0u) break; if ((panes & (1u << uint(i))) == 0u) continue; vec4 rect = u_rect[i]; vec4 radii = u_radii[i]; vec4 extra = u_extra[i]; vec2 q = p - rect.xy; if (extra.x * amp > 0.0) q += extra.x * amp * warp(p, t, radii.w); vec3 sd = roundedBox(q, rect.zw, radii.x); float k = radii.y; float h = max(k - abs(d - sd.x), 0.0) / k; float w = d < sd.x ? h * 0.5 : 1.0 - h * 0.5; d = min(d, sd.x) - h * h * k * 0.25; g = mix(g, sd.yz, w); tint = mix(tint, u_tint[i], w); frost = mix(frost, radii.z, w); bevel = mix(bevel, extra.z, w); flow = mix(flow, extra.x, w); press = mix(press, extra.y, w); alpha = mix(alpha, extra.w, w); cap = mix(cap, u_face[i].x, w); lift = mix(lift, u_face[i].y, w); } if (d > SHADOW_REACH) { fragColor = vec4(0.0); return; } float shadow = u_look.x * alpha * (0.6 * softStep(d - 8.0 * g.y, 14.0) + 0.4 * softStep(d, 3.0)); float cover = clamp(0.5 - d * u_look.w, 0.0, 1.0); if (cover <= 0.0) { fragColor = castShadow(p, shadow, tint); return; } float s = -d; float W = max(bevel, 1.0); float u = s / W; float v = 1.0 - max(u, 0.002); float v4 = v * v * v * v; bool inBevel = u < 1.0; float f = inBevel ? pow(1.0 - v4, 0.25) : 1.0; float fp = inBevel ? v * v * v * pow(max(1.0 - v4, 1e-6), -0.75) : 0.0; float T = u_optics.y; float rise = ${SLAB_MIN_RISE.toFixed(1)} + ${SLAB_RISE_SPAN.toFixed(1)} * f; float z = T * rise; float slope = min(${SLAB_RISE_SPAN.toFixed(1)} * T / W * fp, ${SLAB_MAX_SLOPE.toFixed(1)}); float gradLength = length(g); vec2 n2 = gradLength > 1e-4 ? g / gradLength : vec2(0.0, -1.0); vec2 tilt = slope * n2; if (flow * amp > 0.0) tilt += flow * amp * 0.18 * ripple(p, t); vec3 N = normalize(vec3(tilt, 1.0)); float ior = max(u_optics.x, 1.0); vec4 ray = through(N, ior, z); vec2 base = p + ray.xy; float R = frost * rise; float lod = max(log2(max(R * u_density * 0.5, 1.0)), u_baseLod); // Violet and red land at the ends of a short line; the spectrum between // them only shows once that line spans half a device pixel. float spread = 0.4 * u_optics.z; vec2 violet = base; vec2 span = vec2(0.0); if (spread > 0.0 && dot(tilt, tilt) > 1e-8) { violet = p + through(N, ior + spread * VIOLET, z).xy; span = p + through(N, max(ior + spread * RED, 1.0), z).xy - violet; } float spanLength = length(span); bool split = spanLength * u_look.w >= 0.5; float texels = spanLength * u_density; float lodSplit = max(lod, log2(max(texels * 0.14, 1.0))); bool sharp = R < 0.5 && lodSplit <= u_baseLod; vec3 col = vec3(0.0); if (R >= 0.5) { for (int i = 0; i < 9; i++) col += sampleAt(base + DISK[i] * R, lod); col /= 9.0; } else if (!split || !sharp) { col = sampleAt(base, u_baseLod); } if (split) { vec3 bands = vec3(0.0); if (texels > 3.0) { for (int k = 0; k < 7; k++) bands += BAND_RGB[k] * sampleAt(violet + span * BAND_AT[k], lodSplit); } else { bands = vec3( sampleAt(violet + span * CENTROID.r, lodSplit).r, sampleAt(violet + span * CENTROID.g, lodSplit).g, sampleAt(violet + span * CENTROID.b, lodSplit).b ); } // Sharp glass shows the spectrum as it is; frosted or widely split glass // keeps its own detail and takes on the colour the spectrum adds. col = sharp ? bands : col + bands - sampleAt(base, lodSplit); } float luma = dot(col, LUMA); col = mix(vec3(luma), col, 1.25); float cosIn = sqrt(max(1.0 - (1.0 - N.z * N.z) / (ior * ior), 0.0)); float head = (ior - 1.0) / (ior + 1.0); head *= head; float reflectance = clamp((fresnel(1.0, ior, N.z, cosIn) - head) / (1.0 - head) * u_optics.w, 0.0, 1.0); vec3 sky = vec3(1.0); if (ray.w < 0.996 || reflectance > 0.004) { sky = mix(sampleAt(p + n2 * 18.0, log2(max(u_density, 1.0)) + 3.5), vec3(1.0), 0.3); } if (ray.w < 0.996) col = mix(sky, col, ray.w); float depth = rise * ray.z; float passed = exp2(log2(max(1.0 - tint.a, 1e-4)) * depth); col = col * passed + tint.rgb / max(tint.a, 1e-4) * (1.0 - passed); if (reflectance > 0.004) { vec3 mirrored = vec3(2.0 * N.z * N.xy, 2.0 * N.z * N.z - 1.0); float up = smoothstep(-0.3, 0.1, mirrored.z); vec3 env = sky; if (up < 1.0) { float reach = min((z + AIR_GAP) / max(-mirrored.z, 1e-3), 200.0); env = mix(sampleAt(p + mirrored.xy * reach, log2(max(u_density, 1.0)) + 1.5), sky, up); } col = mix(col, env, reflectance); } float facing = pow(abs(dot(n2, normalize(LIGHT.xy))), 1.5); col += exp(-max(s, 0.0) / 0.9) * 0.34 * (0.3 + 0.7 * facing) * u_look.y; // A pressed pane brightens as a whole, wherever it was touched. col = mix(col, vec3(1.0), 0.08 * press); col = clamp(col, 0.0, 1.0); if (cap < 1.0 || lift > 0.0) col = mix(col, legible(col, cap, lift), smoothstep(0.5, 2.0, s)); float a = cover * alpha; vec4 under = a < 0.999 ? castShadow(p, shadow, tint) : vec4(0.0); fragColor = vec4(col * a + (1.0 - a) * under.rgb, a + (1.0 - a) * under.a); }`; const UNIFORMS = [ 'u_backdrop', 'u_size', 'u_backing', 'u_texMap', 'u_baseLod', 'u_density', 'u_rect', 'u_radii', 'u_tint', 'u_extra', 'u_face', 'u_optics', 'u_look', 'u_time', ] as const; type Uniforms = Record<(typeof UNIFORMS)[number], WebGLUniformLocation | null>; type Gpu = { program: WebGLProgram; vao: WebGLVertexArrayObject; cells: WebGLBuffer; texture: WebGLTexture; uniforms: Uniforms; maxTexture: number; }; // Offsets into the packed frame. Every value a draw depends on lives here, so // comparing two frames tells whether anything on screen would change. const RECT = 0; const RADII = 96; const TINT = 192; const EXTRA = 288; const OPTICS = 384; const LOOK = 388; const TEX_MAP = 392; const BASE_LOD = 396; const DENSITY = 397; const TIME = 398; const COUNT = 399; const SIZE = 400; const BACKING = 402; const FACE = 404; const FRAME_LENGTH = 452; type Rgba = [number, number, number, number]; type Pane = { element: HTMLElement; seed: number; cx: number; cy: number; hx: number; hy: number; radius: number; /** Premultiplied. */ tint: Rgba; frost: number; merge: number; flow: number; /** Brightest and darkest the face may get while its ink stays legible. */ cap: number; lift: number; opacity: number; presence: Spring; press: Spring; /** Still fading out after its element was hidden or removed. */ ghost: boolean; }; const TRANSPARENT: Rgba = [0, 0, 0, 0]; const NUMBER = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i; const clamp01 = (value: number) => Math.min(Math.max(value, 0), 1); const channel = (token: string, scale: number) => token === 'none' ? 0 : token.endsWith('%') ? (Number(token.slice(0, -1)) / 100) * scale : Number(token); const hexColour = (hex: string): Rgba | null => { const digits = hex.length <= 4 ? [...hex].map((digit) => digit + digit).join('') : hex; if (!/^[\da-f]{6}([\da-f]{2})?$/i.test(digits)) return null; const value = (index: number) => parseInt(digits.slice(index, index + 2), 16) / 255; return [value(0), value(2), value(4), digits.length === 8 ? value(6) : 1]; }; // Reads the sRGB colours browsers serialise for registered properties // without touching a canvas. const quickColour = (text: string): Rgba | null => { if (text.startsWith('#')) return hexColour(text.slice(1)); const match = /^(rgba?|color)$(.*)$$/i.exec(text); if (!match) return null; const tokens = match[2].split(/[\s,/]+/).filter(Boolean); const isColourFunction = match[1].toLowerCase() === 'color'; if (isColourFunction && tokens.shift()?.toLowerCase() !== 'srgb') return null; if (tokens.length < 3 || tokens.length > 4) return null; if (!tokens.every((token) => token === 'none' || NUMBER.test(token.replace(/%$/, '')))) return null; const scale = isColourFunction ? 1 : 255; return [ channel(tokens[0], scale) / scale, channel(tokens[1], scale) / scale, channel(tokens[2], scale) / scale, tokens[3] === undefined ? 1 : channel(tokens[3], 1), ]; }; const colourCache = new Map(); let colourProbe: CanvasRenderingContext2D | null = null; // Any other colour syntax is painted into one pixel and read back. const probeColour = (text: string): Rgba | null => { if (!CSS.supports('color', text)) return null; colourProbe ??= (() => { const probe = document.createElement('canvas'); probe.width = 1; probe.height = 1; return probe.getContext('2d', { willReadFrequently: true }); })(); if (!colourProbe) return null; colourProbe.clearRect(0, 0, 1, 1); colourProbe.fillStyle = text; colourProbe.fillRect(0, 0, 1, 1); const [red, green, blue, alpha] = colourProbe.getImageData(0, 0, 1, 1).data; return [red / 255, green / 255, blue / 255, alpha / 255]; }; const premultiply = ([red, green, blue, alpha]: Rgba): Rgba => { const a = clamp01(alpha); return [clamp01(red) * a, clamp01(green) * a, clamp01(blue) * a, a]; }; const parseColour = (value: string): Rgba => { const text = value.trim(); if (!text || text === 'transparent') return TRANSPARENT; const quick = quickColour(text); if (quick && quick.every(Number.isFinite)) return premultiply(quick); const cached = colourCache.get(text); if (cached) return cached; const probed = probeColour(text); if (!probed) { warnOnce(`colour:${text}`, `"${text}" is not a colour, so the glass ignores it.`); return TRANSPARENT; } if (colourCache.size > 256) colourCache.clear(); const colour = premultiply(probed); colourCache.set(text, colour); return colour; }; const toLinear = (channel: number) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4; // The face luminance range that keeps text in this premultiplied colour // legible. Ink brighter than 0.18, where the two bounds meet, caps how bright // the face may get; darker ink sets how bright it must stay. Transparent ink // leaves the glass as it is. const faceRange = ([red, green, blue, alpha]: Rgba): [number, number] => { if (alpha <= 0) return [1, 0]; const ink = 0.2126 * toLinear(red / alpha) + 0.7152 * toLinear(green / alpha) + 0.0722 * toLinear(blue / alpha); return ink >= 0.18 ? [clamp01((ink + 0.05) / INK_CONTRAST - 0.05), 0] : [1, clamp01(INK_CONTRAST * (ink + 0.05) - 0.05)]; }; // Finds the first url() in a computed background-image and undoes CSS escapes. const firstUrl = (value: string) => { const match = /url$\s*(?:"((?:[^"\\]|\\[\s\S])*)"|'((?:[^'\\]|\\[\s\S])*)'|([^)\s]*))\s*$/i.exec(value); if (!match) return null; const raw = match[1] ?? match[2] ?? match[3] ?? ''; const url = raw.replace(/\\([\da-f]{1,6}\s?|[\s\S])/gi, (_, escape: string) => /^[\da-f]/i.test(escape) ? String.fromCodePoint(parseInt(escape, 16)) : escape, ); return url || null; }; const describeUrl = (url: string) => (url.length > 80 ? `${url.slice(0, 77)}...` : url); // WebGL reads same-origin, data: and blob: images without CORS. const needsCors = (url: string) => { const target = new URL(url, document.baseURI); return /^https?:$/.test(target.protocol) && target.origin !== window.origin; }; export function createSceneRenderer({ root, canvas, backdrop, registry, settings: initialSettings, }: SceneRendererOptions): SceneRenderer { const setAttribute = (name: string, value: string) => { if (root.getAttribute(name) !== value) root.setAttribute(name, value); }; const context = canvas.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: false, depth: false, stencil: false, preserveDrawingBuffer: false, }); if (!context) { warnOnce('webgl2', 'WebGL2 is unavailable, so the scene keeps its CSS glass.'); setAttribute(RENDERER, 'css'); return { update: () => {}, destroy: () => {} }; } const gl = context; let settings = initialSettings; let gpu: Gpu | null = null; let lost = gl.isContextLost(); let failed = false; let destroyed = false; // True once the canvas has drawn the scene and until it hands back to CSS. let live = false; let mode: 'on' | 'off' = 'on'; let reducedMotion = false; let lowQuality = false; let hidden = document.hidden; let onscreen = false; let frameId = 0; let lastTick = 0; let tailUntil = 0; let flowTime = 0; let flowing = false; let snapPresence = true; let dirty = true; let seedCounter = 0; let scaleIndex = 0; let shadowStrength = 0; let highlightStrength = 0; const deltas: number[] = []; const box = { left: 0, top: 0, width: 0, height: 0 }; // Where the backdrop layer sits, relative to the box. It fills the box, // unless the scene pins it to the viewport and scrolling carries the box. const backdropBox = { left: 0, top: 0, width: 0, height: 0 }; const records = new Map(); let drawn: Pane[] = []; const frame = new Float32Array(FRAME_LENGTH); const previous = new Float32Array(FRAME_LENGTH); // Cell vertices, reused between frames: a corner as two floats, then a mask. let cellFloats = new Float32Array(0); let cellMasks = new Uint32Array(0); let cellVertices = 0; let cellsReady = false; let uniformsReady = false; // Backdrop image, from the CSS value to the texture on the GPU. let requestedUrl: string | null | undefined; let loadGeneration = 0; let image: HTMLImageElement | null = null; let imageUrl: string | null = null; let fill = 'rgb(255, 255, 255)'; // The backdrop image lands at left/top in the raster, stepX/stepY raster // pixels per image pixel. let raster: { canvas: HTMLCanvasElement; key: string; url: string; width: number; height: number; left: number; top: number; stepX: number; stepY: number; } | null = null; let rasterAt = 0; let uploaded = false; const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); const transparencyQuery = window.matchMedia('(prefers-reduced-transparency: reduce)'); const contrastQuery = window.matchMedia('(prefers-contrast: more)'); const forcedQuery = window.matchMedia('(forced-colors: active)'); let resolutionQuery: MediaQueryList | null = null; // Values that fall outside the quick paths (calc() in engines without // @property) are resolved by a hidden element inside the backdrop layer. let probe: HTMLSpanElement | null = null; const probeCache = new Map(); const resolve = (raw: string, property: 'width' | 'flexGrow') => { const key = `${property}:${raw}`; const cached = probeCache.get(key); if (cached !== undefined) return cached; if (!probe) { probe = document.createElement('span'); probe.style.cssText = 'position:absolute;visibility:hidden;height:0;'; backdrop.append(probe); } probe.style[property] = raw; const value = parseFloat(getComputedStyle(probe)[property]); probe.style[property] = ''; const result = Number.isFinite(value) ? value : 0; if (probeCache.size > 256) probeCache.clear(); probeCache.set(key, result); return result; }; const readLength = (style: CSSStyleDeclaration, name: string) => { const raw = style.getPropertyValue(name).trim(); if (!raw) return 0; if (raw.endsWith('px') && NUMBER.test(raw.slice(0, -2))) return Number(raw.slice(0, -2)); if (NUMBER.test(raw)) return Number(raw); return resolve(raw, 'width'); }; const readNumber = (style: CSSStyleDeclaration, name: string) => { const raw = style.getPropertyValue(name).trim(); if (!raw) return 0; return NUMBER.test(raw) ? Number(raw) : resolve(raw, 'flexGrow'); }; const measureBox = () => { if (root.getAttribute('data-lg-backdrop-space') !== 'viewport') { box.left = 0; box.top = 0; box.width = root.clientWidth; box.height = root.clientHeight; const layer = localRect(backdrop, root); backdropBox.left = layer.left; backdropBox.top = layer.top; backdropBox.width = layer.width; backdropBox.height = layer.height; return; } const rect = root.getBoundingClientRect(); const scaleX = root.offsetWidth ? rect.width / root.offsetWidth : 1; const scaleY = root.offsetHeight ? rect.height / root.offsetHeight : 1; box.left = rect.left + root.clientLeft * scaleX; box.top = rect.top + root.clientTop * scaleY; box.width = Math.max(rect.width - (root.offsetWidth - root.clientWidth) * scaleX, 0); box.height = Math.max(rect.height - (root.offsetHeight - root.clientHeight) * scaleY, 0); const layer = backdrop.getBoundingClientRect(); backdropBox.left = layer.left - box.left; backdropBox.top = layer.top - box.top; backdropBox.width = layer.width; backdropBox.height = layer.height; }; // Glass nested inside other registered glass keeps its CSS material: one // field cannot show glass on top of glass. const eligible = (element: HTMLElement) => { if (element === root || !element.isConnected || !root.contains(element)) return false; for (let node = element.parentElement; node && node !== root; node = node.parentElement) { if (registry.elements.has(node)) return false; } return true; }; const opacityOf = (element: HTMLElement, style: CSSStyleDeclaration) => { let opacity = Number(style.opacity); for (let node = element.parentElement; node && node !== root; node = node.parentElement) { opacity *= Number(getComputedStyle(node).opacity); } return Number.isFinite(opacity) ? clamp01(opacity) : 1; }; const radiusOf = (style: CSSStyleDeclaration, width: number, height: number) => { const token = style.borderTopLeftRadius.split(' ')[0] ?? '0'; const value = parseFloat(token); if (!Number.isFinite(value)) return 0; return token.endsWith('%') ? (value / 100) * Math.min(width, height) : value; }; const measure = (pane: Pane, style: CSSStyleDeclaration) => { const { element } = pane; const local = root.getAttribute('data-lg-backdrop-space') !== 'viewport'; const rect = local ? localRect(element, root) : element.getBoundingClientRect(); const scale = element.offsetWidth ? rect.width / element.offsetWidth : 1; pane.cx = rect.left + rect.width / 2 - box.left; pane.cy = rect.top + rect.height / 2 - box.top; pane.hx = rect.width / 2; pane.hy = rect.height / 2; pane.radius = Math.min( radiusOf(style, element.offsetWidth, element.offsetHeight) * scale, pane.hx, pane.hy, ); pane.tint = parseColour(style.getPropertyValue('--lg-scene-tint')); pane.frost = readLength(style, '--lg-scene-frost'); pane.merge = readLength(style, '--lg-scene-merge'); pane.flow = readNumber(style, '--lg-scene-flow'); [pane.cap, pane.lift] = faceRange(parseColour(style.getPropertyValue('--lg-scene-ink'))); pane.press.target = clamp01(readNumber(style, '--lg-press')); pane.opacity = opacityOf(element, style); }; const release = (pane: Pane) => { pane.element.removeAttribute(ACTIVE); records.delete(pane.element); resizeObserver.unobserve(pane.element); }; // Hands every element back to its CSS glass. const deactivate = () => { for (const pane of records.values()) release(pane); live = false; drawn = []; snapPresence = true; dirty = true; }; const stop = () => { if (frameId) cancelAnimationFrame(frameId); frameId = 0; lastTick = 0; }; const canDraw = () => !destroyed && !lost && !failed && mode === 'on' && gpu !== null; const fail = (key: string, message: string) => { deactivate(); image = null; imageUrl = null; raster = null; uploaded = false; setAttribute(RENDERER, 'css'); setAttribute(BACKDROP, 'error'); warnOnce(key, message); }; /* * The renderer loads the backdrop as the layer does, so the browser * downloads a same-origin image once. Only another origin needs a CORS copy * for WebGL; asking for it after the shared load lets the browser answer * from cache when the response allows any origin. */ const load = (url: string) => { loadGeneration += 1; const generation = loadGeneration; const request = (cors: boolean, onLoad: (next: HTMLImageElement) => void) => { const next = new Image(); let delivered = false; const loaded = () => { if (delivered || generation !== loadGeneration || destroyed) return; delivered = true; onLoad(next); }; if (cors) next.crossOrigin = 'anonymous'; next.decoding = 'async'; next.addEventListener('load', loaded, { once: true }); next.addEventListener('error', () => { if (generation !== loadGeneration || destroyed) return; fail( 'backdrop', cors ? `the backdrop image ${describeUrl(url)} failed to load with CORS, so WebGL cannot read it and the scene keeps its CSS glass. Serve it from this origin or with CORS headers.` : `the backdrop image ${describeUrl(url)} failed to load, so the scene keeps its CSS glass.`, ); }); next.src = url; // A preloaded theme image is already drawable. Waiting for its load event would leave // the old wallpaper in the canvas for a paint after the page has changed appearance. if (next.complete && next.naturalWidth > 0) loaded(); }; const accept = (next: HTMLImageElement) => { if (!next.naturalWidth || !next.naturalHeight) { fail( 'backdrop', `the backdrop image ${describeUrl(url)} has no size, so the scene keeps its CSS glass.`, ); return; } image = next; imageUrl = url; dirty = true; wake(); }; setAttribute(BACKDROP, 'loading'); request(false, (shared) => { if (needsCors(url)) request(true, accept); else accept(shared); }); }; const checkBackdrop = () => { // After React removes a scene and before it destroys the renderer, a // navigation's head update still wakes the observers. The detached layer // has no computed style, which is not a missing backdrop. if (!backdrop.isConnected) return; const url = firstUrl(getComputedStyle(backdrop).backgroundImage); if (url === requestedUrl) return; requestedUrl = url; if (url) load(url); else { loadGeneration += 1; fail('backdrop', 'the scene has no backdrop image, so it keeps its CSS glass.'); } }; // The raster fills transparent parts of the backdrop with the colour behind // the scene, as the page would. const readFill = () => { for (let node: HTMLElement | null = root; node; node = node.parentElement) { const colour = getComputedStyle(node).backgroundColor; const rgba = parseColour(colour); if (rgba[3] > 0) return colour; } return 'rgb(255, 255, 255)'; }; const readLook = () => { const style = getComputedStyle(root); const shadow = Number(style.getPropertyValue('--lg-scene-shadow')); const highlight = Number(style.getPropertyValue('--lg-scene-highlight')); shadowStrength = Number.isFinite(shadow) ? shadow : 0; highlightStrength = Number.isFinite(highlight) ? highlight : 0; }; const coverFit = (width: number, height: number, source: HTMLImageElement) => { const scale = Math.max(width / source.naturalWidth, height / source.naturalHeight); return { scale, offsetX: (width - source.naturalWidth * scale) / 2, offsetY: (height - source.naturalHeight * scale) / 2, }; }; const upload = () => { if (!gpu || !raster) return false; gl.bindTexture(gl.TEXTURE_2D, gpu.texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, raster.canvas); } catch (error) { fail( 'backdrop', `the backdrop image ${describeUrl(raster.url)} cannot be read by WebGL (${ error instanceof Error ? error.message : String(error) }). Serve it from this origin or with CORS headers.`, ); return false; } gl.generateMipmap(gl.TEXTURE_2D); uploaded = true; dirty = true; return true; }; // Draws the backdrop exactly as CSS paints it (cover, centred) into a // canvas at up to 2x resolution, then uploads it with mipmaps for frost. const ensureRaster = (force: boolean) => { if (!gpu || !image || !imageUrl) return false; const width = Math.max(backdropBox.width, 1); const height = Math.max(backdropBox.height, 1); const density = Math.min( window.devicePixelRatio || 1, lowQuality ? 1 : 2, MAX_TEXTURE / width, MAX_TEXTURE / height, gpu.maxTexture / width, gpu.maxTexture / height, ); const textureWidth = Math.max(1, Math.ceil(width * density)); const textureHeight = Math.max(1, Math.ceil(height * density)); const key = `${textureWidth}x${textureHeight}@${density}|${fill}|${imageUrl}`; if (raster?.key === key) return uploaded || upload(); const now = performance.now(); if ( raster && raster.url === imageUrl && uploaded && !force && now - rasterAt < RASTER_THROTTLE_MS ) return true; const target = raster?.canvas ?? document.createElement('canvas'); const context2d = target.getContext('2d'); if (!context2d) { fail('raster', 'a 2D canvas is unavailable, so the scene keeps its CSS glass.'); return false; } // The image's edges snap to whole raster pixels, as CSS snaps a // background. Firefox resamples an SVG drawn at a fractional size, which // would blur the glass by half a pixel. const fit = coverFit(width, height, image); const left = Math.round(fit.offsetX * density); const top = Math.round(fit.offsetY * density); const drawnWidth = Math.round((fit.offsetX + image.naturalWidth * fit.scale) * density) - left; const drawnHeight = Math.round((fit.offsetY + image.naturalHeight * fit.scale) * density) - top; target.width = textureWidth; target.height = textureHeight; context2d.setTransform(1, 0, 0, 1, 0, 0); context2d.fillStyle = fill; context2d.fillRect(0, 0, textureWidth, textureHeight); context2d.drawImage(image, left, top, drawnWidth, drawnHeight); raster = { canvas: target, key, url: imageUrl, width: textureWidth, height: textureHeight, left, top, stepX: drawnWidth / image.naturalWidth, stepY: drawnHeight / image.naturalHeight, }; rasterAt = now; uploaded = false; return upload(); }; const createPane = (element: HTMLElement): Pane => { seedCounter += 1; return { element, seed: seedCounter * 1.618, cx: 0, cy: 0, hx: 0, hy: 0, radius: 0, tint: TRANSPARENT, frost: 0, merge: 0, flow: 0, cap: 1, lift: 0, opacity: 1, presence: createSpring(0.35, 0.3, snapPresence ? 1 : 0), press: createSpring(0.2, 0.3, 0), ghost: false, }; }; // Reads the DOM into pane records and advances every spring. Returns // whether anything is still moving. const sync = (dt: number) => { measureBox(); checkBackdrop(); readLook(); const seen = new Set(); for (const element of registry.elements) { if (seen.size >= MAX_PANES) break; if (!eligible(element)) continue; const style = getComputedStyle(element); if (style.visibility !== 'visible' || element.getClientRects().length === 0) continue; let pane = records.get(element); if (!pane) { pane = createPane(element); records.set(element, pane); resizeObserver.observe(element); } measure(pane, style); if (pane.hx <= 0 || pane.hy <= 0) continue; pane.ghost = false; pane.presence.target = 1; seen.add(pane); } for (const pane of records.values()) { if (seen.has(pane)) continue; const { element } = pane; // An element that unmounted or hid itself dissolves; one that left the // scene or the registry returns to CSS at once. const dissolves = !reducedMotion && pane.hx > 0 && (!element.isConnected || (registry.elements.has(element) && eligible(element))); if (!dissolves) { release(pane); continue; } pane.ghost = true; pane.presence.target = 0; } let moving = false; for (const pane of records.values()) { moving = stepSpring(pane.presence, dt, reducedMotion) || moving; moving = stepSpring(pane.press, dt, reducedMotion) || moving; if (pane.ghost && pane.presence.value < CULL) release(pane); } flowing = settings.flow && !reducedMotion && !lowQuality && [...records.values()].some((pane) => pane.flow > 0 && pane.presence.value >= CULL); return moving; }; // Panes fold in order of decreasing merge radius, so a wide merge never // swallows a narrower one folded before it. Live panes claim slots first. const pack = (ratio: number, backingWidth: number, backingHeight: number) => { const live = [...records.values()].filter((pane) => !pane.ghost); const ghosts = [...records.values()] .filter((pane) => pane.ghost) .sort((a, b) => b.presence.value - a.presence.value); drawn = [...live, ...ghosts] .slice(0, MAX_PANES) .filter((pane) => pane.presence.value >= CULL) .sort((a, b) => b.merge - a.merge); frame.fill(0); const { optics } = settings; drawn.forEach((pane, index) => { const presence = pane.presence.value; const scale = 0.6 + 0.4 * presence; const halfX = pane.hx * scale; const halfY = pane.hy * scale; const bevel = Math.max(Math.min(optics.bevel, pane.radius, pane.hx, pane.hy), 1) * scale; frame.set([pane.cx, pane.cy, halfX, halfY], RECT + index * 4); frame.set( [pane.radius * scale, Math.max(pane.merge, 1e-4), pane.frost * optics.frost, pane.seed], RADII + index * 4, ); frame.set(pane.tint, TINT + index * 4); frame.set( [pane.flow, pane.press.value, bevel, clamp01(presence) * pane.opacity], EXTRA + index * 4, ); frame.set([pane.cap, pane.lift], FACE + index * 2); }); frame.set([optics.ior, optics.thickness, optics.dispersion, optics.specular], OPTICS); frame[TIME] = flowing ? flowTime : 0; frame.set([shadowStrength, highlightStrength, flowing ? 1 : 0, ratio], LOOK); if (raster && image) { /* * The raster may lag a resize by a few frames. Mapping through the * backdrop's image pixels keeps it aligned meanwhile: box point q shows * image pixel (q - b - o) / s now, b being where the backdrop layer * sits in the box, which is raster pixel left + (q - b - o) step / s. */ const fit = coverFit(Math.max(backdropBox.width, 1), Math.max(backdropBox.height, 1), image); const densityX = raster.stepX / fit.scale; const densityY = raster.stepY / fit.scale; frame.set( [ densityX / raster.width, densityY / raster.height, (raster.left - (fit.offsetX + backdropBox.left) * densityX) / raster.width, (raster.top - (fit.offsetY + backdropBox.top) * densityY) / raster.height, ], TEX_MAP, ); frame[BASE_LOD] = Math.max(Math.log2(densityX / ratio), 0); frame[DENSITY] = densityX; } frame[COUNT] = drawn.length; frame.set([box.width, box.height], SIZE); frame.set([backingWidth, backingHeight], BACKING); }; /* * Splits the canvas into the cells that some glass can reach and writes two * triangles per cell, each vertex carrying the mask of panes that reach the * cell. A pane reaches its shadow's extent, twice the widest merge radius it * can fold with (past which the smooth minimum leaves visible pixels * unchanged) and the sway of a flowing edge. Every edge of those areas cuts * the canvas into columns and rows; a cell's mask is its column's mask and * its row's, and equal neighbours along a row join into one quad. Returns * the number of vertices. */ const buildCells = (backingWidth: number, backingHeight: number) => { const ratioX = backingWidth / frame[SIZE]; const ratioY = backingHeight / frame[SIZE + 1]; const areas: number[] = []; const reach = (bit: number, cx: number, cy: number, halfX: number, halfY: number) => { const x0 = Math.max(Math.floor((cx - halfX) * ratioX), 0); const x1 = Math.min(Math.ceil((cx + halfX) * ratioX), backingWidth); const y0 = Math.max(Math.floor((cy - halfY) * ratioY), 0); const y1 = Math.min(Math.ceil((cy + halfY) * ratioY), backingHeight); if (x1 > x0 && y1 > y0) areas.push(x0, x1, y0, y1, 2 ** bit); }; for (let index = 0; index < drawn.length; index += 1) { const rect = RECT + index * 4; const sway = frame[LOOK + 2] > 0 ? WOBBLE * frame[EXTRA + index * 4] : 0; const grow = SHADOW_REACH + 1 + 2 * frame[RADII + index * 4 + 1] + sway; reach(index, frame[rect], frame[rect + 1], frame[rect + 2] + grow, frame[rect + 3] + grow); } const edges = (offset: number) => { const values = new Set(); for (let index = offset; index < areas.length; index += 5) values.add(areas[index]).add(areas[index + 1]); return [...values].sort((a, b) => a - b); }; const columns = edges(0); const rows = edges(2); const masks = (lines: number[], offset: number) => lines.slice(0, -1).map((start, index) => { let mask = 0; for (let area = 0; area < areas.length; area += 5) { if (areas[area + offset] <= start && areas[area + offset + 1] >= lines[index + 1]) mask |= areas[area + 4]; } return mask; }); const columnMasks = masks(columns, 0); const rowMasks = masks(rows, 2); const needed = columnMasks.length * rowMasks.length * 6 * 3; if (cellFloats.length < needed) { const data = new ArrayBuffer(Math.max(needed, cellFloats.length * 2) * 4); cellFloats = new Float32Array(data); cellMasks = new Uint32Array(data); } let vertices = 0; const corner = (x: number, y: number, mask: number) => { cellFloats[vertices * 3] = (x / backingWidth) * 2 - 1; cellFloats[vertices * 3 + 1] = 1 - (y / backingHeight) * 2; cellMasks[vertices * 3 + 2] = mask; vertices += 1; }; const quad = (x0: number, x1: number, y0: number, y1: number, mask: number) => { corner(x0, y0, mask); corner(x1, y0, mask); corner(x0, y1, mask); corner(x0, y1, mask); corner(x1, y0, mask); corner(x1, y1, mask); }; rowMasks.forEach((rowMask, row) => { let start = 0; let open = 0; columnMasks.forEach((columnMask, column) => { const mask = columnMask & rowMask; if (mask === open) return; if (open) quad(columns[start], columns[column], rows[row], rows[row + 1], open); start = column; open = mask; }); if (open) quad(columns[start], columns.at(-1) ?? 0, rows[row], rows[row + 1], open); }); return vertices; }; const sameValues = (offset: number, length: number) => { for (let index = offset; index < offset + length; index += 1) { if (frame[index] !== previous[index]) return false; } return true; }; const changed = (offset: number, length = 1) => !uniformsReady || !sameValues(offset, length); // Time, tint, frost and press change the material without changing a cell. // Compare every input buildCells reads before reusing its partition and buffer. const sameCells = () => { if ( !cellsReady || frame[COUNT] !== previous[COUNT] || !sameValues(SIZE, 4) || frame[LOOK + 2] !== previous[LOOK + 2] ) return false; for (let index = 0; index < drawn.length; index += 1) { if ( !sameValues(RECT + index * 4, 4) || frame[RADII + index * 4 + 1] !== previous[RADII + index * 4 + 1] || frame[EXTRA + index * 4] !== previous[EXTRA + index * 4] ) return false; } return true; }; const render = (final: boolean) => { if (!canDraw() || !gpu || !image || box.width < 1 || box.height < 1) return; const scale = final ? 1 : SCALES[scaleIndex]; let ratio = Math.min(window.devicePixelRatio || 1, lowQuality ? 1 : 2) * scale; if (box.width * box.height * ratio * ratio > MAX_PIXELS) ratio = Math.sqrt(MAX_PIXELS / (box.width * box.height)); const backingWidth = Math.max(1, Math.round(box.width * ratio)); const backingHeight = Math.max(1, Math.round(box.height * ratio)); if (canvas.width !== backingWidth || canvas.height !== backingHeight) { canvas.width = backingWidth; canvas.height = backingHeight; dirty = true; } fill = readFill(); if (!ensureRaster(final) || !raster) return; pack(backingWidth / box.width, backingWidth, backingHeight); if (!dirty && sameValues(0, FRAME_LENGTH)) return; const { uniforms } = gpu; const updateCells = !sameCells(); if (updateCells) { cellVertices = buildCells(backingWidth, backingHeight); cellsReady = true; } gl.viewport(0, 0, backingWidth, backingHeight); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); if (cellVertices > 0) { gl.useProgram(gpu.program); gl.bindVertexArray(gpu.vao); if (updateCells) { gl.bindBuffer(gl.ARRAY_BUFFER, gpu.cells); gl.bufferData(gl.ARRAY_BUFFER, cellFloats.subarray(0, cellVertices * 3), gl.DYNAMIC_DRAW); } gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, gpu.texture); if (!uniformsReady) gl.uniform1i(uniforms.u_backdrop, 0); if (changed(SIZE, 2)) gl.uniform2f(uniforms.u_size, frame[SIZE], frame[SIZE + 1]); if (changed(BACKING, 2)) gl.uniform2f(uniforms.u_backing, frame[BACKING], frame[BACKING + 1]); if (changed(TEX_MAP, 4)) gl.uniform4fv(uniforms.u_texMap, frame, TEX_MAP, 4); if (changed(BASE_LOD)) gl.uniform1f(uniforms.u_baseLod, frame[BASE_LOD]); if (changed(DENSITY)) gl.uniform1f(uniforms.u_density, frame[DENSITY]); if (changed(RECT, MAX_PANES * 4)) gl.uniform4fv(uniforms.u_rect, frame, RECT, MAX_PANES * 4); if (changed(RADII, MAX_PANES * 4)) gl.uniform4fv(uniforms.u_radii, frame, RADII, MAX_PANES * 4); if (changed(TINT, MAX_PANES * 4)) gl.uniform4fv(uniforms.u_tint, frame, TINT, MAX_PANES * 4); if (changed(EXTRA, MAX_PANES * 4)) gl.uniform4fv(uniforms.u_extra, frame, EXTRA, MAX_PANES * 4); if (changed(FACE, MAX_PANES * 2)) gl.uniform2fv(uniforms.u_face, frame, FACE, MAX_PANES * 2); if (changed(OPTICS, 4)) gl.uniform4fv(uniforms.u_optics, frame, OPTICS, 4); if (changed(LOOK, 4)) gl.uniform4fv(uniforms.u_look, frame, LOOK, 4); if (changed(TIME)) gl.uniform1f(uniforms.u_time, frame[TIME]); gl.drawArrays(gl.TRIANGLES, 0, cellVertices); uniformsReady = true; } else uniformsReady = false; previous.set(frame); dirty = false; snapPresence = false; // The CSS material steps aside in the same frame the canvas takes over. for (const pane of drawn) { if (!pane.ghost && pane.element.getAttribute(ACTIVE) !== 'active') pane.element.setAttribute(ACTIVE, 'active'); } live = true; setAttribute(RENDERER, 'webgl'); if (raster.url === requestedUrl) setAttribute(BACKDROP, 'ready'); }; /* * Glass that appears in a live scene hands over its material at once and * grows in on the canvas, instead of flashing its CSS glass for a frame. * Registration and mutation callbacks both run before the next paint. */ const claim = () => { if (!live || !canDraw()) return; let count = records.size; for (const element of registry.elements) { if (count >= MAX_PANES) break; if (records.has(element) || !eligible(element)) continue; if ( getComputedStyle(element).visibility !== 'visible' || element.getClientRects().length === 0 ) continue; records.set(element, createPane(element)); resizeObserver.observe(element); element.setAttribute(ACTIVE, 'active'); count += 1; } }; const animationsRunning = () => { const checked = new Set(); for (const pane of records.values()) { for ( let node: Element | null = pane.element; node && !checked.has(node); node = node.parentElement ) { checked.add(node); if (node.getAnimations().some((animation) => animation.playState === 'running')) return true; if (node === root) break; } } return false; }; // Frame times steer the resolution: a slow median steps down, a fast one // steps back up. const adaptScale = (delta: number) => { deltas.push(delta); if (deltas.length > 24) deltas.shift(); if (deltas.length < 24) return; const median = [...deltas].sort((a, b) => a - b)[12]; const next = median > 24 ? Math.min(scaleIndex + 1, SCALES.length - 1) : median < 10 ? Math.max(scaleIndex - 1, 0) : scaleIndex; if (next === scaleIndex) return; scaleIndex = next; deltas.length = 0; setAttribute(SCALE, String(SCALES[scaleIndex])); }; const tick = (now: number) => { frameId = 0; if (!canDraw()) return; const dt = lastTick ? Math.min((now - lastTick) / 1000, 0.1) : 1 / 60; if (lastTick) adaptScale(now - lastTick); lastTick = now; const moving = sync(dt); if (flowing) flowTime += dt; const busy = moving || flowing || now < tailUntil || animationsRunning(); if (busy) { render(false); frameId = requestAnimationFrame(tick); return; } lastTick = 0; render(true); setAttribute(STATE, 'idle'); }; function wake() { // A newly mounted offscreen scene needs no shaders. Visibility starts the same renderer // when it can actually paint, including after context restoration or transparency changes. if (!gpu && onscreen && !hidden && mode === 'on' && !destroyed && !lost && !failed) start(); if (!canDraw()) return; tailUntil = performance.now() + TAIL_MS; if (hidden || !onscreen) { setAttribute(STATE, 'paused'); return; } if (frameId) return; setAttribute(STATE, 'running'); frameId = requestAnimationFrame(tick); } const evaluateMode = () => { const html = document.documentElement; const transparency = html.getAttribute('data-lg-reduce-transparency'); const off = transparency === '1' || (transparency !== '0' && transparencyQuery.matches) || contrastQuery.matches || forcedQuery.matches; reducedMotion = html.getAttribute('data-lg-reduce-motion') === '1' || motionQuery.matches; lowQuality = html.getAttribute('data-lg-quality') === 'low'; if (off && mode === 'on') { mode = 'off'; stop(); deactivate(); setAttribute(RENDERER, 'off'); setAttribute(STATE, 'idle'); } else if (!off && mode === 'off') { mode = 'on'; setAttribute(RENDERER, 'css'); snapPresence = true; } dirty = true; wake(); }; const compile = (type: number, source: string) => { const shader = gl.createShader(type); if (!shader) return null; gl.shaderSource(shader, source); gl.compileShader(shader); return shader; }; const build = (): Gpu | null => { const vertex = compile(gl.VERTEX_SHADER, VERTEX_SHADER); const fragment = compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER); const program = gl.createProgram(); const vao = gl.createVertexArray(); const cells = gl.createBuffer(); const texture = gl.createTexture(); const discard = () => { if (vertex) gl.deleteShader(vertex); if (fragment) gl.deleteShader(fragment); if (program) gl.deleteProgram(program); if (vao) gl.deleteVertexArray(vao); if (cells) gl.deleteBuffer(cells); if (texture) gl.deleteTexture(texture); }; if (!vertex || !fragment || !program || !vao || !cells || !texture) { if (!gl.isContextLost()) { const failedShader = [vertex, fragment].find( (shader) => shader !== null && !gl.getShaderParameter(shader, gl.COMPILE_STATUS), ); if (failedShader && !gl.isContextLost()) { warnOnce( 'shader', `the glass shader failed to compile, so the scene keeps its CSS glass. ${gl.getShaderInfoLog(failedShader) ?? ''}`, ); } } discard(); return null; } gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); // Link after submitting both compiles; successful linking establishes both shaders compiled. // Checking each compile first would wait for the GPU twice before submitting the link. if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { if (!gl.isContextLost()) { const failedShader = [vertex, fragment].find( (shader) => !gl.getShaderParameter(shader, gl.COMPILE_STATUS), ); if (!gl.isContextLost()) { warnOnce( 'shader', failedShader ? `the glass shader failed to compile, so the scene keeps its CSS glass. ${gl.getShaderInfoLog(failedShader) ?? ''}` : `the glass shader failed to link, so the scene keeps its CSS glass. ${gl.getProgramInfoLog(program) ?? ''}`, ); } } discard(); return null; } gl.deleteShader(vertex); gl.deleteShader(fragment); // Corners come from attribute 0, since Firefox emulates a missing // attribute 0 on every draw. gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, cells); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 12, 0); gl.enableVertexAttribArray(1); gl.vertexAttribIPointer(1, 1, gl.UNSIGNED_INT, 12, 8); gl.bindVertexArray(null); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.disable(gl.BLEND); gl.disable(gl.DEPTH_TEST); // SAFETY: the entries come from UNIFORMS, so every Uniforms key is present. const uniforms = Object.fromEntries( UNIFORMS.map((name) => [name, gl.getUniformLocation(program, name)]), ) as Uniforms; // SAFETY: MAX_TEXTURE_SIZE is a GLint parameter, which WebGL returns as a number. return { program, vao, cells, texture, uniforms, maxTexture: gl.getParameter(gl.MAX_TEXTURE_SIZE) as number, }; }; const start = () => { gpu = build(); cellsReady = false; uniformsReady = false; if (!gpu) { if (!gl.isContextLost()) { failed = true; setAttribute(RENDERER, 'css'); } return; } uploaded = false; dirty = true; }; const onContextLost = (event: Event) => { event.preventDefault(); lost = true; gpu = null; uploaded = false; stop(); deactivate(); setAttribute(RENDERER, 'css'); setAttribute(STATE, 'idle'); warnOnce( 'context-lost', 'the WebGL context was lost, so the scene shows its CSS glass until the browser restores it.', ); }; const onContextRestored = () => { lost = false; wake(); }; const onVisibility = () => { hidden = document.hidden; if (hidden) stop(); wake(); }; const watchResolution = () => { resolutionQuery?.removeEventListener('change', onResolution); resolutionQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`); resolutionQuery.addEventListener('change', onResolution); }; function onResolution() { watchResolution(); dirty = true; wake(); } const onChange = () => { dirty = true; wake(); }; // Mutations the renderer causes itself never wake it. const rootObserver = new MutationObserver((mutations) => { const relevant = mutations.some( (mutation) => mutation.target !== canvas && mutation.target !== probe && mutation.target !== backdrop && !(mutation.type === 'attributes' && mutation.attributeName?.startsWith(ACTIVE)), ); if (!relevant) return; checkBackdrop(); claim(); wake(); }); const documentObserver = new MutationObserver(() => { checkBackdrop(); evaluateMode(); }); const headObserver = new MutationObserver(() => { checkBackdrop(); wake(); }); const resizeObserver = new ResizeObserver(onChange); const intersectionObserver = new IntersectionObserver((entries) => { onscreen = entries[entries.length - 1]?.isIntersecting ?? true; if (!onscreen) stop(); wake(); }); const unsubscribe = registry.subscribe(() => { claim(); onChange(); }); const wakeEvents = ['focusin', 'focusout', 'transitionrun', 'animationstart'] as const; rootObserver.observe(root, { attributes: true, childList: true, subtree: true, characterData: true, }); documentObserver.observe(document.documentElement, { attributes: true }); headObserver.observe(document.head, { childList: true, subtree: true, characterData: true }); resizeObserver.observe(root); intersectionObserver.observe(root); wakeEvents.forEach((type) => root.addEventListener(type, onChange)); window.addEventListener('resize', onChange); // Scrolling can change pane or viewport-backdrop coordinates, which pack detects. It does // not invalidate an unchanged local raster: the compositor can reuse it while it turns. window.addEventListener('scroll', wake, { capture: true, passive: true }); document.addEventListener('visibilitychange', onVisibility); document.fonts?.addEventListener('loadingdone', onChange); [motionQuery, transparencyQuery, contrastQuery, forcedQuery].forEach((query) => query.addEventListener('change', evaluateMode), ); canvas.addEventListener('webglcontextlost', onContextLost); canvas.addEventListener('webglcontextrestored', onContextRestored); watchResolution(); setAttribute(RENDERER, 'css'); setAttribute(SCALE, String(SCALES[scaleIndex])); measureBox(); checkBackdrop(); evaluateMode(); return { update(next) { settings = next; dirty = true; wake(); }, destroy() { destroyed = true; stop(); rootObserver.disconnect(); documentObserver.disconnect(); headObserver.disconnect(); resizeObserver.disconnect(); intersectionObserver.disconnect(); unsubscribe(); wakeEvents.forEach((type) => root.removeEventListener(type, onChange)); window.removeEventListener('resize', onChange); window.removeEventListener('scroll', wake, { capture: true }); document.removeEventListener('visibilitychange', onVisibility); document.fonts?.removeEventListener('loadingdone', onChange); [motionQuery, transparencyQuery, contrastQuery, forcedQuery].forEach((query) => query.removeEventListener('change', evaluateMode), ); resolutionQuery?.removeEventListener('change', onResolution); canvas.removeEventListener('webglcontextlost', onContextLost); canvas.removeEventListener('webglcontextrestored', onContextRestored); loadGeneration += 1; deactivate(); probe?.remove(); if (gpu && !gl.isContextLost()) { gl.deleteProgram(gpu.program); gl.deleteVertexArray(gpu.vao); gl.deleteBuffer(gpu.cells); gl.deleteTexture(gpu.texture); } gpu = null; // A remount in StrictMode reuses this canvas and its context, so the // context is released by shrinking it, never by losing it. canvas.width = 1; canvas.height = 1; setAttribute(RENDERER, 'css'); [STATE, BACKDROP, SCALE].forEach((name) => root.removeAttribute(name)); }, }; } 5a:T506d,'use client'; import { useLayoutEffect } from 'react'; import type { RefObject } from 'react'; export type Spring = { value: number; velocity: number; target: number; stiffness: number; damping: number; precision: number; }; /* * Springs take a response and a bounce: response is the period of the * undamped oscillation in seconds, and bounce 0 is critically damped. For * unit mass that is stiffness (2π / response)² and damping * 4π (1 - bounce) / response. */ export const createSpring = ( response: number, bounce: number, value: number, precision = 0.001, ): Spring => ({ value, velocity: 0, target: value, stiffness: ((2 * Math.PI) / response) ** 2, damping: (4 * Math.PI * (1 - bounce)) / response, precision, }); // Changes how a spring moves without stopping it, so it carries its velocity // into the new motion. export const retuneSpring = (spring: Spring, response: number, bounce: number) => { spring.stiffness = ((2 * Math.PI) / response) ** 2; spring.damping = (4 * Math.PI * (1 - bounce)) / response; }; // Semi-implicit Euler in steps of at most 1/120 s is stable for every spring // here. Returns whether the spring is still moving. export const stepSpring = (spring: Spring, dt: number, snap: boolean) => { if (snap || (spring.value === spring.target && spring.velocity === 0)) { spring.value = spring.target; spring.velocity = 0; return false; } const steps = Math.max(1, Math.ceil(dt * 120)); const step = dt / steps; for (let index = 0; index < steps; index += 1) { spring.velocity += (-spring.stiffness * (spring.value - spring.target) - spring.damping * spring.velocity) * step; spring.value += spring.velocity * step; } if ( Math.abs(spring.value - spring.target) < spring.precision && Math.abs(spring.velocity) < spring.precision * 10 ) { spring.value = spring.target; spring.velocity = 0; return false; } return true; }; let motionQuery: MediaQueryList | undefined; // The provider mirrors its preference onto ; the system setting always // counts, as it does in liquid.css. export function motionReduced() { motionQuery ??= window.matchMedia('(prefers-reduced-motion: reduce)'); return ( document.documentElement.getAttribute('data-lg-reduce-motion') === '1' || motionQuery.matches ); } export type FrameLoop = { start: () => void; stop: () => void; }; // Calls step once a frame with the seconds since the last one until it // returns false. A long pause counts as one short frame. export function createFrameLoop(step: (dt: number) => boolean): FrameLoop { let frame = 0; let last = 0; const tick = (now: number) => { const dt = last ? Math.min((now - last) / 1000, 1 / 20) : 1 / 60; last = now; frame = 0; if (step(dt)) { frame = requestAnimationFrame(tick); return; } last = 0; }; return { start() { if (!frame) frame = requestAnimationFrame(tick); }, stop() { cancelAnimationFrame(frame); frame = 0; last = 0; }, }; } type Edge = 'left' | 'top' | 'right' | 'bottom'; type Box = Record; type Feel = readonly [response: number, bounce: number]; const EDGES: readonly Edge[] = ['left', 'top', 'right', 'bottom']; // The edge heading for the new item leads and the far edge follows, so the // bubble stretches into a drop on the way and rounds off when it lands. The // leading edge overshoots a little and rings back, which is what makes the // landing feel like a drop settling rather than a slide stopping. const LEAD: Feel = [0.2, 0.32]; const TRAIL: Feel = [0.3, 0.12]; const EVEN: Feel = [0.26, 0.22]; // Under a finger the bubble keeps up closely but still leans into the drag. const DRAG_LEAD: Feel = [0.1, 0.12]; const DRAG_TRAIL: Feel = [0.18, 0.04]; // How far a lifted bubble grows past its item, in CSS pixels. It never grows // past the control's own edge. Kept to a hair: more reads as the bubble // zooming out of its track. const SWELL = 1; const DRAG_THRESHOLD = 4; // The bubble counts as travelling, and stays lifted, while an edge moves faster // than this in CSS pixels a second, so it settles the moment it slows down. const TRAVEL_SPEED = 90; // How far a press on another item wakes the bubble before it moves. const ANTICIPATION = 0.5; // Measure before the containing plane is projected. Client rectangles describe the projected // bounding box, which cannot be scaled back into a rectangle once an ancestor turns in 3D. export function localRect(element: HTMLElement, root: HTMLElement) { const size = (node: HTMLElement, style: CSSStyleDeclaration) => { const borderBox = style.boxSizing === 'border-box'; const width = parseFloat(style.width); const height = parseFloat(style.height); return { width: Number.isFinite(width) ? width + (borderBox ? 0 : parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth)) : node.offsetWidth, height: Number.isFinite(height) ? height + (borderBox ? 0 : parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)) : node.offsetHeight, }; }; const elementStyle = getComputedStyle(element); const dimensions = size(element, elementStyle); let matrix = new DOMMatrix(); for (let node: HTMLElement | null = element; node && node !== root;) { const style = node === element ? elementStyle : getComputedStyle(node); const parent: Element | null = node.offsetParent; const { width, height } = size(node, style); const length = (value: string, extent: number) => value.endsWith('%') ? (parseFloat(value) * extent) / 100 : parseFloat(value) || 0; const origin = style.transformOrigin.split(' '); const translate = style.translate.split(' '); const scale = style.scale === 'none' ? [1, 1] : style.scale.split(' ').map(Number); const left = style.position === 'absolute' && style.left !== 'auto' ? parseFloat(style.left) : node.offsetLeft; const top = style.position === 'absolute' && style.top !== 'auto' ? parseFloat(style.top) : node.offsetTop; const borderX = parent instanceof HTMLElement && parent !== root ? parent.clientLeft - parent.scrollLeft : 0; const borderY = parent instanceof HTMLElement && parent !== root ? parent.clientTop - parent.scrollTop : 0; const x = length(origin[0], width); const y = length(origin[1], height); const transform = new DOMMatrix() .translate(left + borderX, top + borderY) .translate(x, y) .translate(length(translate[0], width), length(translate[1] ?? '0', height)) .scale(scale[0], scale[1] ?? scale[0]) .multiply(new DOMMatrix(style.transform === 'none' ? undefined : style.transform)) .translate(-x, -y); matrix = transform.multiply(matrix); node = parent instanceof HTMLElement ? parent : null; } const points = [ [0, 0], [dimensions.width, 0], [dimensions.width, dimensions.height], [0, dimensions.height], ].map(([x, y]) => new DOMPoint(x, y).matrixTransform(matrix)); const left = Math.min(...points.map((point) => point.x)); const top = Math.min(...points.map((point) => point.y)); return { left, top, width: Math.max(...points.map((point) => point.x)) - left, height: Math.max(...points.map((point) => point.y)) - top, }; } function boxWithin(element: HTMLElement, frame: HTMLElement): Box { const { left, top, width, height } = localRect(element, frame); return { left, top, right: left + width, bottom: top + height }; } // Four zero-size points give the browser's actual projection, including perspective. Only a // drag needs these; the static bubble and glass never need to read projected geometry. function pointerPlane(element: HTMLElement) { const probes = [ [0, 0], [100, 0], [100, 100], [0, 100], ].map(([x, y]) => { const probe = document.createElement('span'); probe.ariaHidden = 'true'; probe.style.cssText = `position:absolute;left:${x}%;top:${y}%;width:0;height:0;visibility:hidden;pointer-events:none;`; element.append(probe); return probe; }); return { x(clientX: number, clientY: number) { const [p0, p1, p2, p3] = probes.map((probe) => probe.getBoundingClientRect()); const dx1 = p1.x - p2.x, dx2 = p3.x - p2.x, dx3 = p0.x - p1.x + p2.x - p3.x; const dy1 = p1.y - p2.y, dy2 = p3.y - p2.y, dy3 = p0.y - p1.y + p2.y - p3.y; const determinant = dx1 * dy2 - dx2 * dy1; const g = (dx3 * dy2 - dx2 * dy3) / determinant; const h = (dx1 * dy3 - dx3 * dy1) / determinant; const a = p1.x - p0.x + g * p1.x - clientX * g; const b = p3.x - p0.x + h * p3.x - clientX * h; const d = p1.y - p0.y + g * p1.y - clientY * g; const e = p3.y - p0.y + h * p3.y - clientY * h; const x = ((clientX - p0.x) * e - b * (clientY - p0.y)) / (a * e - b * d); return x * element.clientWidth + element.scrollLeft; }, destroy: () => probes.forEach((probe) => probe.remove()), }; } const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); export type LiquidIndicatorOptions = { /** Matches the item the bubble sits under. */ selected: string; /** Matches every item the bubble can move to. */ item: string; /** Lets a pointer pick the bubble up and drop it on another item. */ draggable?: boolean; /** Strength of the bubble's stretch and lift. */ deformation?: number; }; /** * Moves a selection bubble between items like a glass droplet: it * lifts, stretches toward the new item and lands with a little bounce. * Labels stay fixed while the bubble moves. CSS places the bubble until this * runs. Reduced motion jumps instead. */ export function useLiquidIndicator( rootRef: RefObject, indicatorRef: RefObject, { selected, item, draggable = false, deformation = 1 }: LiquidIndicatorOptions, ) { useLayoutEffect(() => { const root = rootRef.current; const indicator = indicatorRef.current; if (!root || !indicator) return; const edges: Record = { left: createSpring(...EVEN, 0, 0.05), top: createSpring(...EVEN, 0, 0.05), right: createSpring(...EVEN, 0, 0.05), bottom: createSpring(...EVEN, 0, 0.05), }; const lift = createSpring(0.22, 0.2, 0); let items: HTMLElement[] = []; let centres: number[] = []; let room = 0; let placed = false; let held: Element | null = null; let drag: { pointer: number; startX: number; offset: number; active: boolean } | null = null; let plane: ReturnType | null = null; const frameOf = () => indicator.offsetParent instanceof HTMLElement ? indicator.offsetParent : root; const paint = () => { const width = edges.right.value - edges.left.value; const height = edges.bottom.value - edges.top.value; const restWidth = Math.max(edges.right.target - edges.left.target, 1); const restHeight = Math.max(edges.bottom.target - edges.top.target, 1); // A stretched drop keeps its volume, so it thins across its travel. const thinY = clamp(1 / Math.sqrt(Math.max(width / restWidth, 1)), 0.8, 1); const thinX = clamp(1 / Math.sqrt(Math.max(height / restHeight, 1)), 0.8, 1); // A spring that rings past rest must not lift the bubble below its resting size. const raised = Math.max(lift.value, 0) * deformation; const swell = raised * Math.min(room, SWELL); const drawnWidth = restWidth + (width * thinX - restWidth) * deformation + swell * 2; const drawnHeight = restHeight + (height * thinY - restHeight) * deformation + swell * 2; const centreX = (edges.left.value + edges.right.value) / 2; const centreY = (edges.top.value + edges.bottom.value) / 2; indicator.style.translate = `${centreX - drawnWidth / 2}px ${centreY - drawnHeight / 2}px`; indicator.style.width = `${drawnWidth}px`; indicator.style.height = `${drawnHeight}px`; indicator.style.setProperty('--lg-lift', raised.toFixed(3)); }; const step = (dt: number) => { const reduced = motionReduced(); const travelling = EDGES.some((edge) => Math.abs(edges[edge].velocity) > TRAVEL_SPEED); const pressed = held?.matches(selected) ?? false; const woken = held !== null ? ANTICIPATION : 0; lift.target = reduced ? 0 : pressed || drag?.active || travelling ? 1 : woken; let moving = false; for (const edge of EDGES) { moving = stepSpring(edges[edge], dt, reduced) || moving; } moving = stepSpring(lift, dt, reduced) || moving; paint(); return moving; }; const loop = createFrameLoop(step); const current = (): Box => ({ left: edges.left.value, top: edges.top.value, right: edges.right.value, bottom: edges.bottom.value, }); // Tunes each axis so the edge in front leads and the one behind trails. const lean = (from: Box, to: Box, lead: Feel, trail: Feel) => { const axes: [Edge, Edge, number][] = [ ['left', 'right', (to.left + to.right - from.left - from.right) / 2], ['top', 'bottom', (to.top + to.bottom - from.top - from.bottom) / 2], ]; for (const [start, end, distance] of axes) { if (Math.abs(distance) < 1) { retuneSpring(edges[start], ...EVEN); retuneSpring(edges[end], ...EVEN); } else { retuneSpring(edges[distance > 0 ? end : start], ...lead); retuneSpring(edges[distance > 0 ? start : end], ...trail); } } }; const aim = (to: Box, jump: boolean) => { for (const edge of EDGES) { edges[edge].target = to[edge]; if (jump) { edges[edge].value = to[edge]; edges[edge].velocity = 0; } } }; const sync = (snap: boolean) => { const frame = frameOf(); const target = root.querySelector(selected); // Only a drag needs every item's centre; ordinary tabs measure their selected item. items = draggable ? Array.from(root.querySelectorAll(item)) : target ? [target] : []; const boxes = items.map((element) => boxWithin(element, frame)); centres = boxes.map((box) => (box.left + box.right) / 2); // A pointer owns the bubble until it lets go. if (drag?.active) return; if (!target) { indicator.setAttribute('data-lg-empty', ''); placed = false; return; } const targetIndex = items.indexOf(target); const box = targetIndex < 0 ? boxWithin(target, frame) : boxes[targetIndex]; const jump = snap || !placed || motionReduced(); indicator.removeAttribute('data-lg-empty'); room = Math.max(0, Math.min(box.top, frame.clientHeight - box.bottom)); if (!jump) lean(current(), box, LEAD, TRAIL); aim(box, jump); placed = true; if (jump) paint(); loop.start(); }; const follow = (event: PointerEvent) => { if (!drag || !plane || centres.length === 0) return; const width = edges.right.target - edges.left.target; const centre = clamp( plane.x(event.clientX, event.clientY) - drag.offset, Math.min(...centres), Math.max(...centres), ); const from = current(); const to = { ...from, left: centre - width / 2, right: centre + width / 2 }; lean(from, to, DRAG_LEAD, DRAG_TRAIL); aim({ ...to, top: edges.top.target, bottom: edges.bottom.target }, motionReduced()); loop.start(); }; // Drops a dragged bubble on the nearest enabled item, or puts it back. const release = (commit: boolean) => { if (!drag) return; const { active, pointer } = drag; drag = null; plane?.destroy(); plane = null; held = null; root.removeAttribute('data-lg-dragging'); if (root.hasPointerCapture(pointer)) root.releasePointerCapture(pointer); if (active && commit) { const centre = (edges.left.target + edges.right.target) / 2; let nearest = -1; centres.forEach((value, index) => { if (items[index].matches('[data-disabled]')) return; if (nearest < 0 || Math.abs(value - centre) < Math.abs(centres[nearest] - centre)) nearest = index; }); if (nearest >= 0) { if (root.contains(document.activeElement)) items[nearest].focus({ preventScroll: true }); items[nearest].click(); } } sync(false); }; const onPointerDown = (event: PointerEvent) => { if (!event.isPrimary || event.button !== 0 || !(event.target instanceof Element)) return; const pressed = event.target.closest(item); if ( !(pressed instanceof HTMLElement) || !root.contains(pressed) || pressed.matches('[data-disabled]') ) return; held = pressed; loop.start(); if (!draggable || !pressed.matches(selected)) return; const centre = (edges.left.target + edges.right.target) / 2; plane = pointerPlane(frameOf()); drag = { pointer: event.pointerId, startX: event.clientX, offset: plane.x(event.clientX, event.clientY) - centre, active: false, }; }; const onPointerMove = (event: PointerEvent) => { if (!drag || event.pointerId !== drag.pointer) return; if (!drag.active) { if (Math.abs(event.clientX - drag.startX) < DRAG_THRESHOLD) return; drag.active = true; root.setAttribute('data-lg-dragging', ''); root.setPointerCapture(event.pointerId); } follow(event); }; // Listens on the window, so a press that ends outside the control still ends. const onPointerUp = (event: PointerEvent) => { if (drag && event.pointerId === drag.pointer) { release(event.type === 'pointerup'); return; } if (!held) return; held = null; loop.start(); }; // Taking the pointer from a touched item fires this on the item; only the // root losing it ends a drag. const onLostCapture = (event: PointerEvent) => { if (event.target === root && drag?.active && event.pointerId === drag.pointer) release(false); }; const resizes = new ResizeObserver(() => sync(true)); const observeSizes = () => { resizes.disconnect(); resizes.observe(root); root.querySelectorAll(item).forEach((element) => resizes.observe(element)); }; const mutations = new MutationObserver((records) => { if (records.some((record) => record.type === 'childList')) observeSizes(); sync(false); }); root.setAttribute('data-lg-indicator', 'ready'); sync(true); observeSizes(); mutations.observe(root, { attributes: true, attributeFilter: ['data-state', 'data-disabled'], childList: true, subtree: true, }); root.addEventListener('pointerdown', onPointerDown); root.addEventListener('pointermove', onPointerMove); root.addEventListener('lostpointercapture', onLostCapture); window.addEventListener('pointerup', onPointerUp); window.addEventListener('pointercancel', onPointerUp); return () => { loop.stop(); plane?.destroy(); mutations.disconnect(); resizes.disconnect(); root.removeEventListener('pointerdown', onPointerDown); root.removeEventListener('pointermove', onPointerMove); root.removeEventListener('lostpointercapture', onLostCapture); window.removeEventListener('pointerup', onPointerUp); window.removeEventListener('pointercancel', onPointerUp); root.removeAttribute('data-lg-indicator'); root.removeAttribute('data-lg-dragging'); indicator.removeAttribute('data-lg-empty'); ['translate', 'width', 'height', '--lg-lift'].forEach((property) => indicator.style.removeProperty(property), ); }; }, [deformation, draggable, indicatorRef, item, rootRef, selected]); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L51",null,{"namespace":"@glassyui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/glassyui/glass-provider.tsx","content":"$53","type":"registry:ui","target":"components/glassyui/glass-provider.tsx"},{"path":"registry/glassyui/liquid-filters.tsx","content":"$54","type":"registry:ui","target":"components/glassyui/liquid-filters.tsx"},{"path":"registry/glassyui/lib/preferences.ts","content":"$55","type":"registry:lib","target":"components/glassyui/lib/preferences.ts"},{"path":"registry/glassyui/styles/liquid.css","content":"$56","type":"registry:file","target":"components/glassyui/styles/liquid.css"},{"path":"registry/glassyui/glass-scene.tsx","content":"$57","type":"registry:ui","target":"components/glassyui/glass-scene.tsx"},{"path":"registry/glassyui/lib/merge-refs.ts","content":"import type { Ref } from 'react';\n\nexport function mergeRefs(...refs: Array | undefined>) {\n return (node: T) => {\n for (const ref of refs) {\n if (!ref) continue;\n\n if ('current' in ref) {\n try {\n ref.current = node;\n } catch {\n // Read-only refs cannot be assigned.\n }\n } else {\n ref(node);\n }\n }\n };\n}\n","type":"registry:lib","target":"components/glassyui/lib/merge-refs.ts"},{"path":"registry/glassyui/lib/scene-context.ts","content":"$58","type":"registry:lib","target":"components/glassyui/lib/scene-context.ts"},{"path":"registry/glassyui/lib/scene-renderer.ts","content":"$59","type":"registry:lib","target":"components/glassyui/lib/scene-renderer.ts"},{"path":"registry/glassyui/lib/slab-optics.ts","content":"// The glass floats this far above its backdrop, in CSS pixels.\nexport const SLAB_AIR_GAP = 8;\n\n// Fractions of full slab thickness at the rim and added across its curved top.\nexport const SLAB_MIN_RISE = 0.3;\n\nexport const SLAB_RISE_SPAN = 0.7;\n\nexport const SLAB_MAX_SLOPE = 12;\n","type":"registry:lib","target":"components/glassyui/lib/slab-optics.ts"},{"path":"registry/glassyui/lib/liquid-motion.ts","content":"$5a","type":"registry:lib","target":"components/glassyui/lib/liquid-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]