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:T13d1,'use client'; import clsx from 'clsx'; import { Children, forwardRef, useMemo, useRef } from 'react'; import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'; import { mergeRefs } from './lib/merge-refs'; import { useGlassScenePane } from './lib/scene-context'; import { useLensFilter, useRefractionFilter } from './lib/use-refraction-filter'; import { useOptionalPreferences } from './glass-provider'; export type SurfaceRefraction = 'none' | 'soft' | 'strong'; export type RefractionBackgroundSpace = 'local' | 'viewport'; export type SurfacePreset = 'subtle' | 'standard' | 'prominent' | 'control' | 'showcase'; export type GlassSurfaceProps = HTMLAttributes & { /** Brightens the surface a touch on hover. */ interactive?: boolean; /** Chromium edge lens over the frost. On by default for control and showcase presets. */ lens?: boolean; preset?: SurfacePreset; refraction?: SurfaceRefraction; refractionBackground?: ReactNode; refractionBackgroundSpace?: RefractionBackgroundSpace; refractionDisplacement?: number; /** * How thick this glass is, as a multiple of regular. A thicker slab has a * wider rim that bends the backdrop further and splits more colour. Defaults * to the site's thickness preference. Works with a supplied backdrop in every * browser, or with the Chromium lens over live content. */ thickness?: number; }; export const GlassSurface = forwardRef( ( { className, children, interactive = false, preset = 'standard', lens = preset === 'control' || preset === 'showcase', refraction = preset === 'showcase' ? 'strong' : 'none', refractionBackground, refractionBackgroundSpace = 'local', refractionDisplacement, style, thickness, ...rest }, forwardedRef, ) => { const { preferences } = useOptionalPreferences(); const reduceMotion = Boolean(preferences?.reduceMotion); const reduceTransparency = Boolean(preferences?.reduceTransparency); const surfaceRef = useRef(null); const ref = useMemo(() => mergeRefs(surfaceRef, forwardedRef), [forwardedRef]); const generatedRefractionEnabled = refraction !== 'none' && Boolean(refractionBackground) && !reduceMotion && !reduceTransparency; const { active, filterElement, filterStyle, sceneRef } = useRefractionFilter(surfaceRef, { displacement: refractionDisplacement, enabled: generatedRefractionEnabled, reduceTransparency, strength: refraction === 'none' ? 'soft' : refraction, thickness: thickness ?? preferences?.thickness, viewportAligned: refractionBackgroundSpace === 'viewport', }); // One refraction technique at a time: a generated background scene covers the frost. const lensFilter = useLensFilter(surfaceRef, { enabled: lens && !generatedRefractionEnabled && !reduceTransparency, signature: `${preferences?.theme}:${preferences?.mode}:${preferences?.quality}:${thickness ?? preferences?.thickness}`, }); // Inside a GlassScene the canvas draws this glass; a generated refraction // scene is its own backdrop and keeps its CSS material. useGlassScenePane(surfaceRef, !generatedRefractionEnabled); return (

{filterElement} {lensFilter.filterElement} {active ? ( ) : null} {Children.map(children, (child) => // Children.map yields null, elements, portals or text; wrap only the text. child === null || child instanceof Object ? ( child ) : ( {child} ), )}

); }, ); GlassSurface.displayName = 'GlassSurface'; 58:T6810,import { SLAB_AIR_GAP, SLAB_MAX_SLOPE, SLAB_MIN_RISE, SLAB_RISE_SPAN } from './slab-optics'; export type GeneratedRefractionStrength = 'soft' | 'strong'; type RefractionPreset = { centerNeutralRatio: number; defaultDisplacement: number; edgeBandRatio: number; edgeWidth: number; /** Rim pull at the default displacement, as a share of the edge band. */ rimPull: number; }; export type RefractionMapOptions = { devicePixelRatio?: number; displacement?: number; height: number; radius: number; strength: GeneratedRefractionStrength; thickness?: number; width: number; }; export type RefractionMapMetrics = { cacheKey: string; dispersion: number; edgeBand: number; /** Corner radius of the bend field, never tighter than the edge band. */ fieldRadius: number; filterBlur: number; filterPadding: number; filterScale: number; height: number; mapHeight: number; mapPixels: number; mapWidth: number; paddedHeight: number; paddedWidth: number; /** Inward offset at the rim, in CSS pixels. */ pull: number; radius: number; width: number; }; export type RefractionMapBuildResult = { href: string; metrics: RefractionMapMetrics; }; export const MAX_REFRACTION_MAP_PIXELS = 160000; const REFRACTION_PRESETS: Record = { soft: { centerNeutralRatio: 0.68, defaultDisplacement: 72, edgeBandRatio: 0.18, edgeWidth: 1.08, rimPull: 0.22, }, strong: { centerNeutralRatio: 0.58, defaultDisplacement: 112, edgeBandRatio: 0.2, edgeWidth: 1.22, rimPull: 0.34, }, }; /** * Scene blur under the rim, in CSS pixels. Chromium and Firefox sample the bend * nearest-neighbour, so the magnified rim would stair-step at 1x pixel density. The * map's blue channel keeps the blur off the flat centre. */ const RIM_BLUR = 0.8; /** * The bend falls off as (1 - t)^2 across the edge band, steepest at the rim. Any pull * under half the band keeps each sample further in than its outer neighbour, so the rim * compresses the view like thick glass and never mirrors it. The base pull is 0.34; * even the furthest colour stays below 0.4 to leave room for the map's 8-bit rounding. */ const MAX_RIM_PULL = 0.34; const MAX_CHROMATIC_RIM_PULL = 0.4; const refractionMapCache = new Map(); const maxCachedRefractionMaps = 48; export function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function smoothstep(edge0: number, edge1: number, value: number) { const t = clamp((value - edge0) / Math.max(edge1 - edge0, 0.0001), 0, 1); return t * t * (3 - 2 * t); } type Edge = { distance: number; normalX: number; normalY: number }; // Distance to a rounded rectangle plus its outward unit normal. function roundedRectEdge( x: number, y: number, width: number, height: number, radius: number, edge: Edge, ) { const px = x - width / 2; const py = y - height / 2; const qx = Math.abs(px) - (width / 2 - radius); const qy = Math.abs(py) - (height / 2 - radius); const signX = px < 0 ? -1 : 1; const signY = py < 0 ? -1 : 1; if (qx > 0 && qy > 0) { const length = Math.hypot(qx, qy); edge.distance = length - radius; edge.normalX = (signX * qx) / length; edge.normalY = (signY * qy) / length; } else if (qx > qy) { edge.distance = qx - radius; edge.normalX = signX; edge.normalY = 0; } else { edge.distance = qy - radius; edge.normalX = 0; edge.normalY = signY; } return edge; } function fitMapSize(width: number, height: number, pixelRatio: number) { let mapWidth = clamp(Math.round(width * pixelRatio), 32, 1800); let mapHeight = clamp(Math.round(height * pixelRatio), 32, 1200); const pixels = mapWidth * mapHeight; if (pixels <= MAX_REFRACTION_MAP_PIXELS) { return { mapWidth, mapHeight }; } const ratio = Math.sqrt(MAX_REFRACTION_MAP_PIXELS / pixels); mapWidth = Math.max(32, Math.floor(mapWidth * ratio)); mapHeight = Math.max(32, Math.floor(mapHeight * ratio)); while (mapWidth * mapHeight > MAX_REFRACTION_MAP_PIXELS) { if (mapWidth >= mapHeight) { mapWidth -= 1; } else { mapHeight -= 1; } } return { mapWidth, mapHeight }; } export function computeRefractionMapMetrics(options: RefractionMapOptions): RefractionMapMetrics { const preset = REFRACTION_PRESETS[options.strength]; const width = Math.max(0, options.width); const height = Math.max(0, options.height); const minDimension = Math.min(width, height); const radius = clamp(options.radius, 0, minDimension / 2); const displacement = clamp(options.displacement ?? preset.defaultDisplacement, 0, 196); const thickness = clamp(options.thickness ?? 1, 0.1, 4); const rimWidth = 0.6 + 0.4 * thickness; const dispersion = clamp((thickness - 1) * 0.2, 0, 0.6); const blueFactor = 1 + dispersion / 2; const neutralInset = (minDimension * (1 - preset.centerNeutralRatio)) / 2; const edgeBand = clamp( Math.min(minDimension * preset.edgeBandRatio, neutralInset) * preset.edgeWidth * rimWidth, 6, Math.min(72 * rimWidth, (radius || 56) * 1.15 * rimWidth, minDimension * 0.48), ); // Inside a tighter corner the inset contours would turn sharp and pinch the bend. const fieldRadius = clamp(Math.max(radius, edgeBand), 0, minDimension / 2); const pull = edgeBand * Math.min( MAX_RIM_PULL, MAX_CHROMATIC_RIM_PULL / blueFactor, (preset.rimPull * displacement) / preset.defaultDisplacement, ); // WebKit shifts a clipped, filtered scene unless the filter region reaches past the // box as far as the primitives read: the blue pull plus three blur deviations. const filterPadding = Math.ceil(pull * blueFactor + RIM_BLUR * 3) + 2; const paddedWidth = width + filterPadding * 2; const paddedHeight = height + filterPadding * 2; const targetRatio = clamp((options.devicePixelRatio ?? 1) * 1.12, 1.15, 2.1); const targetPixels = paddedWidth * paddedHeight * targetRatio * targetRatio; const pixelRatio = targetPixels > MAX_REFRACTION_MAP_PIXELS ? Math.max(1, targetRatio * Math.sqrt(MAX_REFRACTION_MAP_PIXELS / targetPixels)) : targetRatio; const { mapWidth, mapHeight } = fitMapSize(paddedWidth, paddedHeight, pixelRatio); const cacheKey = [ mapWidth, mapHeight, Math.round(width), Math.round(height), Math.round(fieldRadius * 10), Math.round(edgeBand * 10), filterPadding, ].join(':'); return { cacheKey, dispersion, edgeBand, fieldRadius, filterBlur: RIM_BLUR, filterPadding, // Map channels hold a unit offset; the scale turns it into CSS pixels. filterScale: Math.round(pull * 2 * 100) / 100, height, mapHeight, mapPixels: mapWidth * mapHeight, mapWidth, paddedHeight, paddedWidth, pull, radius, width, }; } /** * Encodes a unit rim field: R/G = 0.5 + 0.5 * inward offset. Past the field's edge the * rim offset carries on unchanged, so the map stays smooth across the clipped border. * B is the share of softened scene: full through the outer half of the band, which * holds every point the steep rim samples, and gone by the flat centre. */ export async function buildRefractionMapDataUrl( options: RefractionMapOptions, ): Promise { const metrics = computeRefractionMapMetrics(options); const cached = refractionMapCache.get(metrics.cacheKey); if (cached) return { href: cached, metrics }; if (typeof document === 'undefined') { throw new Error('Refraction maps require a browser document'); } const canvas = document.createElement('canvas'); canvas.width = metrics.mapWidth; canvas.height = metrics.mapHeight; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Canvas 2D context unavailable'); } const { edgeBand, fieldRadius, filterPadding, height, mapHeight, mapWidth, paddedHeight, paddedWidth, width, } = metrics; const data = new Uint8ClampedArray(mapWidth * mapHeight * 4); const edge: Edge = { distance: 0, normalX: 0, normalY: 0 }; for (let yIndex = 0; yIndex < mapHeight; yIndex += 1) { const y = ((yIndex + 0.5) / mapHeight) * paddedHeight - filterPadding; for (let xIndex = 0; xIndex < mapWidth; xIndex += 1) { const x = ((xIndex + 0.5) / mapWidth) * paddedWidth - filterPadding; const index = (yIndex * mapWidth + xIndex) * 4; roundedRectEdge(x, y, width, height, fieldRadius, edge); const depth = clamp(-edge.distance / edgeBand, 0, 1); const falloff = (1 - depth) ** 2; const offsetX = -edge.normalX * falloff; const offsetY = -edge.normalY * falloff; data[index] = Math.round((0.5 + offsetX / 2) * 255); data[index + 1] = Math.round((0.5 + offsetY / 2) * 255); data[index + 2] = Math.round((1 - smoothstep(0.5, 1, depth)) * 255); data[index + 3] = 255; } } ctx.putImageData(new ImageData(data, mapWidth, mapHeight), 0, 0); const href = canvas.toDataURL('image/png'); refractionMapCache.set(metrics.cacheKey, href); if (refractionMapCache.size > maxCachedRefractionMaps) { const oldestKey = refractionMapCache.keys().next().value; if (oldestKey) refractionMapCache.delete(oldestKey); } return { href, metrics }; } /** Corner radii in CSS pixels, clockwise from the top left. */ export type LensRadii = readonly [number, number, number, number]; export type LensMapOptions = { /** Width of the curved rim in CSS pixels. */ bevel: number; /** Multiplies how far the rim bends the backdrop. 0 leaves it flat. */ depth: number; devicePixelRatio?: number; height: number; /** Refractive index of the glass. */ ior: number; radii: LensRadii; /** Height of the slab in CSS pixels. Thicker glass bends further. */ thickness: number; width: number; }; export type LensMapMetrics = { bevel: number; cacheKey: string; height: number; mapHeight: number; mapWidth: number; /** The furthest the rim reads the backdrop from, in CSS pixels. */ reach: number; width: number; }; export type LensMapBuildResult = { href: string; metrics: LensMapMetrics; }; const MAX_LENS_MAP_PIXELS = 420000; export const MAX_LENS_SURFACE_AREA = 720000; // The rim reads the backdrop from no further than this share of its width, and // the point it reads from advances by at least a quarter of every pixel across // the rim, so the view compresses toward the edge and never folds back on itself. const LENS_REACH = 0.7; const LENS_FOLD = 0.75; const LENS_PROFILE_STEPS = 512; // The rim and the flat top are the same frosted glass, but smoked glass lets more // light through its rim. Blue holds the share of the rim's light: all of it near // the edge, none past four fifths of the rim or a sixth of the surface, whichever // comes first, so small pieces keep the top's shade in the middle. const LENS_RIM_LIGHT = 0.8; const LENS_RIM_LIGHT_SURFACE = 0.16; const LENS_RIM_LIGHT_FALLOFF = 0.45; const lensMapCache = new Map(); const maxCachedLensMaps = 32; // Native byte order keeps the neutral RGBA pixel identical on every platform. const FLAT_LENS_PIXEL = new Uint32Array(new Uint8Array([128, 128, 0, 255]).buffer)[0]; /** * How far inward a view ray lands on the backdrop after it crosses a slab of glass * whose top curves down into a rim, s pixels in from the edge. The top follows * (1 - (1 - u)^4)^(1/4) across the rim, Snell's law bends the ray into the glass and * again out of its flat underside, and it crosses an air gap to the backdrop. This is * the WebGL scene's `through()`, for a ray straight down. */ function slabOffset(s: number, bevel: number, thickness: number, ior: number) { const u = s / bevel; const v = 1 - Math.max(u, 0.002); let rise = 1; let steepness = 0; if (u < 1) { const v4 = v ** 4; rise = (1 - v4) ** 0.25; steepness = v ** 3 * Math.max(1 - v4, 1e-6) ** -0.75; } const slope = Math.min(((SLAB_RISE_SPAN * thickness) / bevel) * steepness, SLAB_MAX_SLOPE); const height = thickness * (SLAB_MIN_RISE + SLAB_RISE_SPAN * rise); const tilt = Math.hypot(slope, 1); const sinTilt = slope / tilt; const cosTilt = 1 / tilt; const eta = 1 / ior; const root = Math.sqrt(Math.max(1 - eta * eta * sinTilt * sinTilt, 0)); const bend = eta * cosTilt - root; const along = bend * sinTilt; const down = Math.max(eta - bend * cosTilt, 0.05); const sinOut = ior * Math.abs(along); const cosOut = Math.sqrt(Math.max(1 - sinOut * sinOut, 0)); const leaving = (ior * along) / Math.max(sinOut, 1); return -(along * (height / down) + leaving * (SLAB_AIR_GAP / Math.max(cosOut, 0.1))); } /** * The inward offset across the rim, from the edge to its inner boundary. The physical * offset is softly capped, then limited so it never falls faster than the pixels it * crosses, which would fold the view back on itself. */ function lensProfile(bevel: number, thickness: number, ior: number, depth: number) { const cap = LENS_REACH * bevel; const step = bevel / LENS_PROFILE_STEPS; const offsets = new Float32Array(LENS_PROFILE_STEPS + 1); for (let index = 0; index < LENS_PROFILE_STEPS; index += 1) { offsets[index] = cap * Math.tanh((depth * slabOffset(index * step, bevel, thickness, ior)) / cap); } for (let index = LENS_PROFILE_STEPS - 1; index >= 0; index -= 1) { offsets[index] = Math.min(offsets[index], offsets[index + 1] + LENS_FOLD * step); } return { offsets, reach: Math.max(...offsets, 0.01) }; } // Distance to a rounded rectangle with its own radius in every corner, plus its outward unit normal. function roundedBoxEdge( x: number, y: number, width: number, height: number, radii: LensRadii, edge: Edge, ) { const px = x - width / 2; const py = y - height / 2; const radius = px < 0 ? (py < 0 ? radii[0] : radii[3]) : py < 0 ? radii[1] : radii[2]; const qx = Math.abs(px) - (width / 2 - radius); const qy = Math.abs(py) - (height / 2 - radius); const signX = px < 0 ? -1 : 1; const signY = py < 0 ? -1 : 1; if (qx > 0 && qy > 0) { const length = Math.hypot(qx, qy); edge.distance = length - radius; edge.normalX = (signX * qx) / length; edge.normalY = (signY * qy) / length; } else if (qx > qy) { edge.distance = qx - radius; edge.normalX = signX; edge.normalY = 0; } else { edge.distance = qy - radius; edge.normalX = 0; edge.normalY = signY; } return edge; } function computeLensMapMetrics(options: LensMapOptions) { const width = Math.max(1, options.width); const height = Math.max(1, options.height); const bevel = clamp(options.bevel, 1, Math.min(width, height) / 2); const pixelRatio = clamp(options.devicePixelRatio ?? 1, 1, 2); let mapWidth = clamp(Math.round(width * pixelRatio), 32, 1800); let mapHeight = clamp(Math.round(height * pixelRatio), 32, 1200); if (mapWidth * mapHeight > MAX_LENS_MAP_PIXELS) { const ratio = Math.sqrt(MAX_LENS_MAP_PIXELS / (mapWidth * mapHeight)); mapWidth = Math.max(32, Math.floor(mapWidth * ratio)); mapHeight = Math.max(32, Math.floor(mapHeight * ratio)); } const cacheKey = [ mapWidth, mapHeight, Math.round(width), Math.round(height), ...options.radii.map((radius) => Math.round(radius * 10)), Math.round(bevel * 10), Math.round(options.thickness * 10), Math.round(options.ior * 100), Math.round(options.depth * 100), ].join(':'); return { bevel, cacheKey, height, mapHeight, mapWidth, width }; } /** * Encodes the rim of a slab of glass as a displacement field: R/G = 0.5 + 0.5 * the * offset the backdrop is read from, as a share of `reach`. The SVG feDisplacementMap * scale of twice `reach` turns it back into CSS pixels. B is the share of the rim's * light, which smoked glass dims less than its top. The field is flat past the rim. */ export function buildLensMapDataUrl(options: LensMapOptions): LensMapBuildResult { const base = computeLensMapMetrics(options); const cached = lensMapCache.get(base.cacheKey); if (cached) { lensMapCache.delete(base.cacheKey); lensMapCache.set(base.cacheKey, cached); return cached; } if (typeof document === 'undefined') { throw new Error('Lens maps require a browser document'); } const canvas = document.createElement('canvas'); canvas.width = base.mapWidth; canvas.height = base.mapHeight; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Canvas 2D context unavailable'); } const { bevel, height, mapHeight, mapWidth, width } = base; const { offsets, reach } = lensProfile(bevel, options.thickness, options.ior, options.depth); const litTo = Math.min( LENS_RIM_LIGHT, (LENS_RIM_LIGHT_SURFACE * Math.min(width, height)) / bevel, ); const litFrom = litTo * LENS_RIM_LIGHT_FALLOFF; const data = new Uint8ClampedArray(mapWidth * mapHeight * 4); const pixels = new Uint32Array(data.buffer); const edge: Edge = { distance: 0, normalX: 0, normalY: 0 }; // Beyond every corner and the bevel, the map is exactly neutral. Keep a full // texel inside that rectangle so fractional dimensions cannot round a rim in. const flatInset = Math.max(bevel, ...options.radii); const flatLeft = Math.min(mapWidth, Math.ceil((flatInset / width) * mapWidth + 0.5)); const flatRight = Math.max(flatLeft, Math.floor(((width - flatInset) / width) * mapWidth - 0.5)); const flatTop = Math.ceil((bevel / height) * mapHeight + 0.5); const flatBottom = Math.floor(((height - bevel) / height) * mapHeight - 0.5); for (let yIndex = 0; yIndex < mapHeight; yIndex += 1) { const y = ((yIndex + 0.5) / mapHeight) * height; const flatRow = yIndex >= flatTop && yIndex < flatBottom; for (let xIndex = 0; xIndex < mapWidth; xIndex += 1) { if (flatRow && xIndex === flatLeft && flatRight > flatLeft) { pixels.fill(FLAT_LENS_PIXEL, yIndex * mapWidth + flatLeft, yIndex * mapWidth + flatRight); xIndex = flatRight - 1; continue; } const x = ((xIndex + 0.5) / mapWidth) * width; const index = (yIndex * mapWidth + xIndex) * 4; roundedBoxEdge(x, y, width, height, options.radii, edge); const inset = Math.max(-edge.distance, 0); let offset = 0; if (inset < bevel) { const position = (inset / bevel) * LENS_PROFILE_STEPS; const lower = Math.floor(position); const fraction = position - lower; offset = offsets[lower] * (1 - fraction) + offsets[lower + 1] * fraction; } data[index] = Math.round(clamp(0.5 - (offset * edge.normalX) / (2 * reach), 0, 1) * 255); data[index + 1] = Math.round(clamp(0.5 - (offset * edge.normalY) / (2 * reach), 0, 1) * 255); data[index + 2] = Math.round((1 - smoothstep(litFrom, litTo, inset / bevel)) * 255); data[index + 3] = 255; } } ctx.putImageData(new ImageData(data, mapWidth, mapHeight), 0, 0); const result = { href: canvas.toDataURL('image/png'), metrics: { ...base, reach }, }; lensMapCache.set(base.cacheKey, result); if (lensMapCache.size > maxCachedLensMaps) { const oldestKey = lensMapCache.keys().next().value; if (oldestKey) lensMapCache.delete(oldestKey); } return result; } export type MagnifierMapOptions = { devicePixelRatio?: number; size: number; }; export type MagnifierMapMetrics = { /** Width of the ring that bends, in CSS pixels. */ band: number; cacheKey: string; /** Outward offset at the rim, in CSS pixels. */ depth: number; mapSize: number; size: number; }; export type MagnifierMapBuildResult = { href: string; metrics: MagnifierMapMetrics; }; const magnifierMapCache = new Map(); const maxCachedMagnifierMaps = 8; export function computeMagnifierMapMetrics(options: MagnifierMapOptions): MagnifierMapMetrics { const size = Math.max(1, options.size); const radius = size / 2; const mapSize = clamp(Math.round(size * clamp(options.devicePixelRatio ?? 1, 1, 2)), 32, 400); return { band: radius * 0.46, cacheKey: [mapSize, Math.round(size * 10)].join(':'), depth: radius * 0.5, mapSize, size, }; } /** * Encodes an outward offset that grows toward the rim of a circle: * R/G = 0.5 + 0.5 * offset / depth. Each pixel samples a little further out than its * inner neighbour, so the view compresses into the rim like thick glass and never folds * back on itself, even over sharp text. */ export function buildMagnifierMapDataUrl(options: MagnifierMapOptions): MagnifierMapBuildResult { const metrics = computeMagnifierMapMetrics(options); const cached = magnifierMapCache.get(metrics.cacheKey); if (cached) return { href: cached, metrics }; if (typeof document === 'undefined') { throw new Error('Magnifier maps require a browser document'); } const canvas = document.createElement('canvas'); canvas.width = metrics.mapSize; canvas.height = metrics.mapSize; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Canvas 2D context unavailable'); } const { band, mapSize, size } = metrics; const radius = size / 2; const data = new Uint8ClampedArray(mapSize * mapSize * 4); for (let yIndex = 0; yIndex < mapSize; yIndex += 1) { const dy = ((yIndex + 0.5) / mapSize) * size - radius; for (let xIndex = 0; xIndex < mapSize; xIndex += 1) { const dx = ((xIndex + 0.5) / mapSize) * size - radius; const index = (yIndex * mapSize + xIndex) * 4; const distance = Math.hypot(dx, dy) || 1; // Flat in the centre, cubic through the ring so the bend starts without a crease. const rim = clamp((distance - (radius - band)) / band, 0, 1) ** 3; data[index] = Math.round((0.5 + (0.5 * rim * dx) / distance) * 255); data[index + 1] = Math.round((0.5 + (0.5 * rim * dy) / distance) * 255); data[index + 2] = 128; data[index + 3] = 255; } } ctx.putImageData(new ImageData(data, mapSize, mapSize), 0, 0); const href = canvas.toDataURL('image/png'); magnifierMapCache.set(metrics.cacheKey, href); if (magnifierMapCache.size > maxCachedMagnifierMaps) { const oldestKey = magnifierMapCache.keys().next().value; if (oldestKey) magnifierMapCache.delete(oldestKey); } return { href, metrics }; } export type CapsuleLensMapOptions = { devicePixelRatio?: number; height: number; /** Multiple of regular glass: a thicker capsule bends further at its rim. */ thickness?: number; width: number; }; type CapsuleLensMapMetrics = { /** Width of the band inside the rim that bends, in CSS pixels. */ band: number; cacheKey: string; /** Outward offset at the rim, in CSS pixels. */ depth: number; height: number; mapHeight: number; mapWidth: number; width: number; }; export type CapsuleLensMapBuildResult = { href: string; metrics: CapsuleLensMapMetrics; }; // The lens itself shows its scene evenly, a little smaller; only a thin band at the rim bends. const CAPSULE_BAND = 0.3; const CAPSULE_DEPTH = 0.25; const capsuleLensMapCache = new Map(); const maxCachedCapsuleLensMaps = 8; function computeCapsuleLensMapMetrics(options: CapsuleLensMapOptions): CapsuleLensMapMetrics { const width = Math.max(1, options.width); const height = Math.max(1, options.height); const radius = Math.min(width, height) / 2; const thickness = clamp(options.thickness ?? 1, 0.1, 4); // The map is drawn at twice the device scale, so the bend stays smooth on a small knob. const scale = clamp(options.devicePixelRatio ?? 1, 1, 2) * 2; const mapWidth = clamp(Math.round(width * scale), 32, 400); const mapHeight = clamp(Math.round(height * scale), 32, 400); const band = radius * CAPSULE_BAND; const depth = radius * CAPSULE_DEPTH * thickness; return { band, cacheKey: [mapWidth, mapHeight, Math.round(width * 10), Math.round(height * 10)].join(':'), depth, height, mapHeight, mapWidth, width, }; } /** * The rim's field for a capsule lens, such as a switch knob: R/G = 0.5 + 0.5 * the outward * offset as a share of `depth`, along the outward normal of the nearest rim. It is flat in * the middle and grows cubically through a thin band, so each pixel there samples a little * further out than its inner neighbour: the view compresses into the rim like thick glass * and never folds back on itself. The ends and the straight sides meet without a crease. * B rises through the band, so the filter softens only the scene the rim bends and the * middle stays sharp. */ export function buildCapsuleLensMapDataUrl( options: CapsuleLensMapOptions, ): CapsuleLensMapBuildResult { const metrics = computeCapsuleLensMapMetrics(options); const cached = capsuleLensMapCache.get(metrics.cacheKey); if (cached) return { href: cached, metrics }; if (typeof document === 'undefined') { throw new Error('Lens maps require a browser document'); } const canvas = document.createElement('canvas'); canvas.width = metrics.mapWidth; canvas.height = metrics.mapHeight; const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('Canvas 2D context unavailable'); } const { band, height, mapHeight, mapWidth, width } = metrics; const radius = Math.min(width, height) / 2; const radii: LensRadii = [radius, radius, radius, radius]; const data = new Uint8ClampedArray(mapWidth * mapHeight * 4); const edge: Edge = { distance: 0, normalX: 0, normalY: 0 }; for (let yIndex = 0; yIndex < mapHeight; yIndex += 1) { const y = ((yIndex + 0.5) / mapHeight) * height; for (let xIndex = 0; xIndex < mapWidth; xIndex += 1) { const x = ((xIndex + 0.5) / mapWidth) * width; const index = (yIndex * mapWidth + xIndex) * 4; roundedBoxEdge(x, y, width, height, radii, edge); const inBand = clamp((band + edge.distance) / band, 0, 1); const rim = inBand ** 3; data[index] = Math.round((0.5 + 0.5 * rim * edge.normalX) * 255); data[index + 1] = Math.round((0.5 + 0.5 * rim * edge.normalY) * 255); data[index + 2] = Math.round(inBand * 255); data[index + 3] = 255; } } ctx.putImageData(new ImageData(data, mapWidth, mapHeight), 0, 0); const href = canvas.toDataURL('image/png'); capsuleLensMapCache.set(metrics.cacheKey, href); if (capsuleLensMapCache.size > maxCachedCapsuleLensMaps) { const oldestKey = capsuleLensMapCache.keys().next().value; if (oldestKey) capsuleLensMapCache.delete(oldestKey); } return { href, metrics }; } 59:T8f19,'use client'; import { useCallback, useEffect, useId, useMemo, useRef, useState, type RefObject } from 'react'; import { buildCapsuleLensMapDataUrl, buildLensMapDataUrl, buildMagnifierMapDataUrl, buildRefractionMapDataUrl, clamp, computeMagnifierMapMetrics, MAX_LENS_SURFACE_AREA, type CapsuleLensMapBuildResult, type GeneratedRefractionStrength, type LensMapMetrics, type LensRadii, type MagnifierMapBuildResult, type RefractionMapMetrics, } from './refraction-map'; type RefractionFilterOptions = { displacement?: number; enabled: boolean; reduceTransparency?: boolean; strength: GeneratedRefractionStrength; thickness?: number; viewportAligned?: boolean; }; type RefractionFilterState = { href: string | null; metrics: RefractionMapMetrics | null; }; function isProductionRuntime() { // SAFETY: only Node and bundler shims define `process`, so every step of the probe stays optional. const runtime = globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } }; }; return runtime.process?.env?.NODE_ENV === 'production'; } function parseRadiusValue(value: string, width: number, height: number) { const [first] = value.trim().split(/\s+/); const maxRadius = Math.min(width, height) / 2; const parsed = Number.parseFloat(first); if (first.endsWith('%')) { return clamp((parsed / 100) * Math.min(width, height), 0, maxRadius); } return clamp(Number.isFinite(parsed) ? parsed : maxRadius, 0, maxRadius); } function readUniformRadius(el: HTMLElement, width: number, height: number) { const style = window.getComputedStyle(el); const rawRadii = [ style.borderTopLeftRadius, style.borderTopRightRadius, style.borderBottomRightRadius, style.borderBottomLeftRadius, ]; const radii = rawRadii.map((value) => parseRadiusValue(value, width, height)); const first = radii[0]; const mixed = radii.some((radius) => Math.abs(radius - first) > 0.5); return mixed ? null : first; } function readCornerRadii(style: CSSStyleDeclaration, width: number, height: number): LensRadii { return [ parseRadiusValue(style.borderTopLeftRadius, width, height), parseRadiusValue(style.borderTopRightRadius, width, height), parseRadiusValue(style.borderBottomRightRadius, width, height), parseRadiusValue(style.borderBottomLeftRadius, width, height), ]; } /** * A scroll event reaches script a frame after the compositor has scrolled, so a scene moved from * script trails the page. Chromium filters a composited layer on its compositor, which lets a * scroll-driven animation carry the scene in step with the scroll and still bend it. WebKit leaves * a scene on its own compositing layer out of the SVG filter and Gecko has no scroll timelines, so * both keep moving the scene from script. Only Chromium has userAgentData. */ function supportsCompositedSceneScroll() { return ( typeof ViewTimeline !== 'undefined' && typeof navigator !== 'undefined' && 'userAgentData' in navigator ); } // Across the timeline the scene moves down exactly as far as the scroll carries the surface up. const sceneScrollKeyframes = (span: number): Keyframe[] => [ { translate: '0px 0px' }, { translate: `0px ${span}px` }, ]; /** * A view timeline places its subject where it would sit if nothing were fixed or stuck, so it runs * on while such a surface stands still. Those surfaces keep following the scroll from script. */ function standsStillWhileScrolling(el: Element, source: Element) { for (let node: Element | null = el; node && node !== source; node = node.parentElement) { const { position } = window.getComputedStyle(node); if (position === 'fixed' || position === 'sticky') { return true; } } return false; } export function useRefractionFilter( surfaceRef: RefObject, { displacement, enabled, reduceTransparency = false, strength, thickness, viewportAligned = false, }: RefractionFilterOptions, ) { const rawId = useId().replaceAll(':', ''); const filterId = `lg-refraction-${rawId}`; const generationRef = useRef(0); const warnedMixedRadiusRef = useRef(false); const [state, setState] = useState({ href: null, metrics: null }); const sceneRef = useRef(null); // Set while the scene is kept aligned, so a scene that mounts is aligned before it first paints. const alignSceneNowRef = useRef<(() => void) | null>(null); const setScene = useCallback((node: HTMLDivElement | null) => { sceneRef.current = node; alignSceneNowRef.current?.(); }, []); useEffect(() => { if (!enabled || reduceTransparency || !viewportAligned) { return; } const el = surfaceRef.current; if (!el) { return; } let alignmentFrame = 0; let disposed = false; // Aligning a scene that no one can see only costs a layout, a style pass and a repaint on // every scroll frame, so it waits until the surface is within a quarter screen of the viewport. let nearViewport = true; const timeline = supportsCompositedSceneScroll() ? new ViewTimeline({ axis: 'block', subject: el }) : null; let sceneScroll: Animation | null = null; let sceneScrollSpan = Number.NaN; // Keeps the scene's scroll-driven animation spanning the timeline and returns how far along // the block axis it has carried the scene, which the offset below then leaves out. Past // either end of the timeline the animation holds still, but the unclamped distance keeps the // offset constant, so plain scrolling rewrites nothing and the scene never waits on script. const followScroll = () => { const scene = sceneRef.current; const source = timeline?.source ?? null; if ( !timeline || !scene || !source || timeline.currentTime === null || standsStillWhileScrolling(el, source) ) { sceneScroll?.cancel(); sceneScroll = null; return 0; } const start = timeline.startOffset.to('px').value; const span = timeline.endOffset.to('px').value - start; if (sceneScroll?.effect instanceof KeyframeEffect && sceneScroll.effect.target === scene) { if (span !== sceneScrollSpan) { sceneScroll.effect.setKeyframes(sceneScrollKeyframes(span)); } } else { sceneScroll?.cancel(); sceneScroll = scene.animate(sceneScrollKeyframes(span), { fill: 'both', timeline }); } sceneScrollSpan = span; return source.scrollTop - start; }; const writeProperty = (property: string, value: string) => { if (el.style.getPropertyValue(property) !== value) { el.style.setProperty(property, value); } }; const alignScene = () => { alignmentFrame = 0; if (disposed) { return; } const followed = followScroll(); const rect = el.getBoundingClientRect(); writeProperty('--lg-refraction-scene-x', `${-(rect.left + el.clientLeft)}px`); writeProperty('--lg-refraction-scene-y', `${-(rect.top + el.clientTop) - followed}px`); writeProperty('--lg-refraction-scene-width', `${document.documentElement.clientWidth}px`); writeProperty('--lg-refraction-scene-height', `${document.documentElement.clientHeight}px`); }; const scheduleAlignment = () => { if (nearViewport && !alignmentFrame) { alignmentFrame = requestAnimationFrame(alignScene); } }; alignSceneNowRef.current = () => { cancelAnimationFrame(alignmentFrame); alignScene(); }; const visibilityObserver = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver( (entries) => { const wasNear = nearViewport; nearViewport = entries[entries.length - 1]?.isIntersecting ?? true; // Coming into range aligns at once, in this task. A frame asked for from here would run // after whatever the page queued for the next frame, and that could read the scene // where it still was. if (nearViewport && !wasNear) { cancelAnimationFrame(alignmentFrame); alignScene(); } }, { rootMargin: '25% 0px' }, ); visibilityObserver?.observe(el); const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleAlignment); for (let ancestor: HTMLElement | null = el; ancestor; ancestor = ancestor.parentElement) { resizeObserver?.observe(ancestor); } const readExternalStyleSignature = () => { const declarations: string[] = []; for (let index = 0; index < el.style.length; index += 1) { const property = el.style.item(index); if (property.startsWith('--lg-refraction-scene-')) { continue; } declarations.push( `${property}:${el.style.getPropertyValue(property)}:${el.style.getPropertyPriority(property)}`, ); } return declarations.sort().join(';'); }; let externalStyleSignature = readExternalStyleSignature(); const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver((records) => { const hasExternalMutation = records.some((record) => { if ( record.type === 'attributes' && record.target === el && record.attributeName === 'style' ) { const nextExternalStyleSignature = readExternalStyleSignature(); if (nextExternalStyleSignature === externalStyleSignature) { return false; } externalStyleSignature = nextExternalStyleSignature; } return true; }); if (hasExternalMutation) { scheduleAlignment(); } }); mutationObserver?.observe(document.body, { attributeFilter: ['class', 'hidden', 'open', 'style'], attributes: true, characterData: true, childList: true, subtree: true, }); document.addEventListener('scroll', scheduleAlignment, { capture: true, passive: true, }); document.addEventListener('load', scheduleAlignment, { capture: true, passive: true, }); document.fonts?.addEventListener('loadingdone', scheduleAlignment); window.addEventListener('resize', scheduleAlignment, { passive: true }); window.visualViewport?.addEventListener('resize', scheduleAlignment, { passive: true }); window.visualViewport?.addEventListener('scroll', scheduleAlignment, { passive: true }); scheduleAlignment(); return () => { disposed = true; alignSceneNowRef.current = null; cancelAnimationFrame(alignmentFrame); sceneScroll?.cancel(); resizeObserver?.disconnect(); mutationObserver?.disconnect(); visibilityObserver?.disconnect(); document.removeEventListener('scroll', scheduleAlignment, { capture: true }); document.removeEventListener('load', scheduleAlignment, { capture: true }); document.fonts?.removeEventListener('loadingdone', scheduleAlignment); window.removeEventListener('resize', scheduleAlignment); window.visualViewport?.removeEventListener('resize', scheduleAlignment); window.visualViewport?.removeEventListener('scroll', scheduleAlignment); el.style.removeProperty('--lg-refraction-scene-height'); el.style.removeProperty('--lg-refraction-scene-width'); el.style.removeProperty('--lg-refraction-scene-x'); el.style.removeProperty('--lg-refraction-scene-y'); }; }, [enabled, reduceTransparency, surfaceRef, viewportAligned]); useEffect(() => { generationRef.current += 1; const generation = generationRef.current; if (!enabled || reduceTransparency || typeof ResizeObserver === 'undefined') { queueMicrotask(() => { if (generationRef.current === generation) { setState({ href: null, metrics: null }); } }); return; } const el = surfaceRef.current; if (!el) { queueMicrotask(() => { if (generationRef.current === generation) { setState({ href: null, metrics: null }); } }); return; } let raf = 0; let disposed = false; const clear = () => { if (generationRef.current === generation) { setState({ href: null, metrics: null }); } }; const schedule = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const rect = el.getBoundingClientRect(); const width = Math.max(0, rect.width); const height = Math.max(0, rect.height); if (!width || !height) { clear(); return; } const radius = readUniformRadius(el, width, height); if (radius === null) { if (!isProductionRuntime() && !warnedMixedRadiusRef.current) { console.warn( 'Glassy UI supplied-background refraction currently supports uniform rounded rectangles only.', ); warnedMixedRadiusRef.current = true; } clear(); return; } void buildRefractionMapDataUrl({ devicePixelRatio: window.devicePixelRatio || 1, displacement, height, radius, strength, thickness, width, }) .then((result) => { if (!disposed && generationRef.current === generation) { setState({ href: result.href, metrics: result.metrics }); } }) .catch(() => { if (!disposed) { clear(); } }); }); }; const observer = new ResizeObserver(schedule); observer.observe(el); schedule(); return () => { disposed = true; cancelAnimationFrame(raf); observer.disconnect(); }; }, [displacement, enabled, reduceTransparency, strength, surfaceRef, thickness]); const filterElement = useMemo(() => { if (!state.href || !state.metrics) return null; const { dispersion, filterBlur, filterPadding, filterScale, height, paddedHeight, paddedWidth, width, } = state.metrics; // Every colour follows the same two-axis rim normal, so the sides split as much as the ends. const channel = (name: string, matrix: string, factor: number) => ( <> ); return ( ); }, [filterId, state.href, state.metrics]); return { active: Boolean(state.href && state.metrics), filterElement, filterStyle: state.href ? `url(#${filterId})` : undefined, sceneRef: setScene, }; } type LensFilterOptions = { enabled: boolean; /** Changes whenever theme, mode, quality or variant tokens may have changed. */ signature?: string; }; type LensFilterState = { blur: number; bodyBrightness: number; dispersion: number; href: string; metrics: LensMapMetrics; rimBrightness: number; saturation: number; }; /** * Only Chromium renders SVG references inside backdrop-filter. WebKit and * Gecko drop the whole declaration when url() is present, and CSS.supports() * reports true everywhere, so the engine is detected explicitly. */ function supportsBackdropLens() { return ( typeof navigator !== 'undefined' && 'userAgentData' in navigator && typeof ResizeObserver !== 'undefined' ); } function readNumberToken(style: CSSStyleDeclaration, name: string) { const value = Number.parseFloat(style.getPropertyValue(name)); return Number.isFinite(value) ? value : 0; } function readTokenOr(style: CSSStyleDeclaration, name: string, fallback: number) { const value = Number.parseFloat(style.getPropertyValue(name)); return Number.isFinite(value) ? value : fallback; } function sameLens(previous: LensFilterState | null, next: LensFilterState) { return ( previous !== null && previous.href === next.href && previous.blur === next.blur && previous.bodyBrightness === next.bodyBrightness && previous.dispersion === next.dispersion && previous.rimBrightness === next.rimBrightness && previous.saturation === next.saturation ); } // A rim as wide as the corners are round, up to a little wider than the WebGL scene's default. const LENS_BEVEL = 36; // Slab height per pixel of rim, as in the scene (40 px of glass under a 28 px rim). const LENS_THICKNESS_RATIO = 1.4; // The least frost the lens reads through, so bent edges never stair-step. const MIN_FROST = 0.5; // Each colour follows the same rim normal: red bends least and blue most. // Both live-backdrop glass and the magnifier use this material pass. function refractColours(source: string, map: string, scale: number, dispersion: number) { if (dispersion <= 0.005) { return ( ); } const channel = (name: string, matrix: string, factor: number) => ( <> ); return ( <> {channel('red', '1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1', 1 - dispersion / 2)} {channel('green', '0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1', 1)} {channel('blue', '0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1', 1 + dispersion / 2)} {/* Combine opaque colour, then restore the reference channel's coverage once. */} ); } /** * Chromium-only lens for glass over live content. The backdrop is frosted, then read * through a slab of glass whose top curves down into a rounded rim, so content bends * and splits into colour along the edge and lies flat everywhere else. The * --lg-lens-* tokens shape it: depth, bevel, thickness, ior, dispersion, blur and * saturation, and --lg-glass-thickness scales the whole slab at once. Other engines, * zero depth and oversized surfaces keep the CSS glass. */ export function useLensFilter( surfaceRef: RefObject, { enabled, signature }: LensFilterOptions, ) { const rawId = useId().replaceAll(':', ''); const filterId = `lg-lens-${rawId}`; const generationRef = useRef(0); const [state, setState] = useState(null); useEffect(() => { generationRef.current += 1; const generation = generationRef.current; const el = surfaceRef.current; if (!enabled || !el || !supportsBackdropLens()) { queueMicrotask(() => { if (generationRef.current === generation) { setState(null); } }); return; } let frame = 0; let disposed = false; const measure = () => { frame = 0; if (disposed || generationRef.current !== generation) { return; } // The lens layer fills the padding box, so borders and scrollbars stay out of the map. const width = el.clientWidth; const height = el.clientHeight; const style = window.getComputedStyle(el); const depth = readNumberToken(style, '--lg-lens-depth'); if (depth <= 0 || !width || !height || width * height > MAX_LENS_SURFACE_AREA) { setState(null); return; } const radii = readCornerRadii(style, width, height); const roundest = Math.max(...radii); const multiplier = clamp(readTokenOr(style, '--lg-glass-thickness', 1), 0.1, 4); const bevelToken = readNumberToken(style, '--lg-lens-bevel'); const thicknessToken = readNumberToken(style, '--lg-lens-thickness'); const baseBevel = bevelToken > 0 ? bevelToken : clamp(roundest, 6, LENS_BEVEL); // A thicker slab also has a wider rim, though not in proportion. const bevel = clamp(baseBevel * (0.6 + 0.4 * multiplier), 4, Math.min(width, height) / 2); const thickness = (thicknessToken > 0 ? thicknessToken : baseBevel * LENS_THICKNESS_RATIO) * multiplier; const { href, metrics } = buildLensMapDataUrl({ bevel, depth, devicePixelRatio: window.devicePixelRatio || 1, height, ior: Math.max(1, readTokenOr(style, '--lg-lens-ior', 1.5)), radii, thickness, width, }); const next = { blur: Math.max(0, readNumberToken(style, '--lg-lens-blur')), bodyBrightness: clamp(readTokenOr(style, '--lg-lens-body-brightness', 1), 0, 1), dispersion: clamp(readNumberToken(style, '--lg-lens-dispersion') * multiplier, 0, 1), href, metrics, rimBrightness: clamp(readTokenOr(style, '--lg-lens-rim-brightness', 1), 0, 1), saturation: readNumberToken(style, '--lg-lens-saturation') || 1, }; setState((previous) => (sameLens(previous, next) ? previous : next)); }; const schedule = () => { if (!frame) { frame = requestAnimationFrame(measure); } }; const observer = new ResizeObserver(schedule); observer.observe(el); schedule(); return () => { disposed = true; cancelAnimationFrame(frame); observer.disconnect(); }; }, [enabled, signature, surfaceRef]); const filterElement = useMemo(() => { if (!state) return null; const { blur, bodyBrightness, dispersion, href, metrics, rimBrightness, saturation } = state; // The rim is the same frosted glass as the flat top: it bends and splits what the frost // leaves and is never clearer, so content does not show through a sharp band at the edge. const frost = Math.max(blur, MIN_FROST); const padding = Math.ceil(frost * 3) + 2; // Map channels hold a unit offset; the scale turns it into CSS pixels. const scale = Math.round(2 * metrics.reach * 100) / 100; // Smoked glass darkens the flat top more than its rim, which lets the light through. A // primitive is added only where it changes something: each one is another pass on the GPU. const dim = (input: string, brightness: number, result: string) => brightness < 1 ? ( ) : null; // The map's blue channel weights the rim's light over the top's. Where both let the same // light through, the bent frost alone is the glass. const shaded = rimBrightness !== bodyBrightness; const rimSource = rimBrightness < 1 ? 'rim-lit' : 'bent'; const topSource = bodyBrightness < 1 ? 'top-lit' : 'bent'; const glass = shaded ? 'mixed' : topSource; return ( ); }, [filterId, state]); return { active: state !== null, filterElement, filterStyle: state ? `url(#${filterId})` : undefined, }; } type MagnifierFilterOptions = LensFilterOptions & { /** Diameter of the round lens in CSS pixels. */ size: number; }; // Softens the compressed rim just enough to keep sharp edges from stair-stepping. const MAGNIFIER_BLUR = 0.35; /** * Rim refraction for the round magnifier, applied with `filter` to its zoomed view, which * every engine with SVG filters on HTML supports. Near the rim each pixel samples content * from further out, so the view bends into the edge like a glass bead. * * The view extends `margin` past the lens on every side so the rim has content to sample. * WebKit only lines the filtered view up with the map when the view clips its own overflow * and the filter region reaches past it by as far as the primitives can read, so the * region is the view plus another margin and the map sits one margin in. */ export function useMagnifierFilter( surfaceRef: RefObject, { enabled, signature, size }: MagnifierFilterOptions, ) { const rawId = useId().replaceAll(':', ''); const filterId = `lg-magnifier-${rawId}`; const [map, setMap] = useState<(MagnifierMapBuildResult & { dispersion: number }) | null>(null); // Blue reaches furthest; leave enough scene beyond the rim for it and the blur. const margin = Math.ceil( computeMagnifierMapMetrics({ size }).depth * (1 + (map?.dispersion ?? 0) / 2) + MAGNIFIER_BLUR * 3, ) + 2; useEffect(() => { let disposed = false; // The map is drawn on a canvas, so it can only be built in the browser. queueMicrotask(() => { if (disposed) return; const surface = surfaceRef.current; if (!enabled || !surface) { setMap(null); return; } const style = window.getComputedStyle(surface); const thickness = clamp(readTokenOr(style, '--lg-glass-thickness', 1), 0.1, 4); setMap({ ...buildMagnifierMapDataUrl({ devicePixelRatio: window.devicePixelRatio || 1, size }), dispersion: clamp(readNumberToken(style, '--lg-lens-dispersion') * thickness, 0, 1), }); }); return () => { disposed = true; }; }, [enabled, signature, size, surfaceRef]); const filterElement = useMemo(() => { if (!map) return null; const { dispersion, metrics: { depth, size: mapCssSize }, } = map; return ( ); }, [filterId, map, margin]); return { active: map !== null, filterElement, filterStyle: map ? `url(#${filterId})` : undefined, margin, }; } type CapsuleLensFilterOptions = LensFilterOptions & { /** Colour split at the rim for regular glass; --lg-glass-thickness scales it. */ dispersion: number; /** * How many times the capsule's size the filtered copy is laid out at before it is scaled * back down. WebKit filters at layout resolution, so a small lens bends in steps without it. */ supersample?: number; }; type CapsuleLensState = CapsuleLensMapBuildResult & { dispersion: number }; /** * Rim refraction for a capsule lens, such as a switch knob, applied with `filter` to a copy * of what lies under it. Every engine with SVG filters on HTML runs it. Near the rim each * pixel samples the copy from further out, so it bends into the edge like a bead of glass * and splits into colour there; --lg-glass-thickness deepens both. The copy must reach * `margin` past the capsule on every side so the rim has content to sample, and the filter * region reaches one margin further, as the round magnifier's does. */ export function useCapsuleLensFilter( surfaceRef: RefObject, { dispersion, enabled, signature, supersample = 1 }: CapsuleLensFilterOptions, ) { const rawId = useId().replaceAll(':', ''); const filterId = `lg-capsule-${rawId}`; const [map, setMap] = useState(null); useEffect(() => { const el = surfaceRef.current; if (!enabled || !el) { queueMicrotask(() => setMap(null)); return; } let frame = 0; let disposed = false; const measure = () => { frame = 0; if (disposed) return; const width = el.clientWidth; const height = el.clientHeight; if (!width || !height) { setMap(null); return; } const thickness = clamp( readTokenOr(window.getComputedStyle(el), '--lg-glass-thickness', 1), 0.1, 4, ); const next = { // A supersampled copy already has the resolution the map needs. ...buildCapsuleLensMapDataUrl({ devicePixelRatio: supersample > 1 ? 1 : window.devicePixelRatio || 1, height: height * supersample, thickness, width: width * supersample, }), dispersion: clamp(dispersion * thickness, 0, 1), }; setMap((previous) => previous && previous.href === next.href && previous.metrics.depth === next.metrics.depth && previous.dispersion === next.dispersion ? previous : next, ); }; const schedule = () => { if (!frame) frame = requestAnimationFrame(measure); }; const observer = new ResizeObserver(schedule); observer.observe(el); schedule(); return () => { disposed = true; cancelAnimationFrame(frame); observer.disconnect(); }; }, [dispersion, enabled, signature, supersample, surfaceRef]); // Blue reaches furthest; leave enough content beyond the rim for it and the blur. The // filter works in the copy's supersampled pixels; the margin is returned in CSS pixels, // rounded up to a whole one so the scaled copy lands on the knob without a sliver. const blur = MAGNIFIER_BLUR * supersample; const scaledMargin = map ? Math.ceil( (map.metrics.depth * (1 + map.dispersion / 2) + blur * 3 + 2 * supersample) / supersample, ) * supersample : 0; const filterElement = useMemo(() => { if (!map) return null; const { depth, height, width } = map.metrics; const margin = scaledMargin; return ( ); }, [blur, filterId, map, scaledMargin]); return { active: map !== null, filterElement, filterStyle: map ? `url(#${filterId})` : undefined, margin: scaledMargin / supersample, supersample, }; } 5a: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]); } 5b:T1e3f,'use client'; import clsx from 'clsx'; import { forwardRef, useLayoutEffect, useMemo, useRef, useState } from 'react'; import type { HTMLAttributes, ReactNode, RefObject } from 'react'; import { createFrameLoop, createSpring, motionReduced, retuneSpring, stepSpring, } from './lib/liquid-motion'; import { mergeRefs } from './lib/merge-refs'; import { GlassSurface } from './glass-surface'; import './styles/header.css'; export type GlassHeaderProps = HTMLAttributes & { /** A wordmark or logo, usually linked to the home page. */ brand: ReactNode; /** Buttons or links at the end of the capsule. */ actions?: ReactNode; /** * Opens out across the top of the page without glass, and condenses into the capsule once * the page scrolls. Fixed headers only. */ condenseOnScroll?: boolean; /** Accessible name for the desktop and mobile navigation. */ navigationLabel?: string; /** Fixed above the page by default; static keeps it in the surrounding layout. */ position?: 'fixed' | 'static'; }; // The header condenses once the page has scrolled past this many CSS pixels, and opens again // only when it is back at the top, so it never flickers on the threshold. const CONDENSE_AFTER = 8; const OPEN_WITHIN = 1; type Feel = readonly [response: number, bounce: number]; // Condensing, the glass forms at once, before a fast scroll can carry the page under bare // links, and the capsule gathers in behind it, settling with a slight squeeze. Opening, the bar // spreads out without overshoot while its glass thins a little more slowly, so the material is // seen to stretch before it goes. const GATHER: Feel = [0.56, 0.22]; const FORM: Feel = [0.24, 0]; const SPREAD: Feel = [0.44, 0]; const THIN: Feel = [0.5, 0]; /** * Springs the header between the open bar at the top of the page and the capsule. It writes * --lg-header-spread (1 open, 0 capsule) and --lg-header-material (0 no glass, 1 glass) while * it moves; at rest the data-condensed state sets both. Reduced motion jumps. Until this runs, * the state is unknown and CSS follows the scroll position on its own. */ function useCondensing(headerRef: RefObject, enabled: boolean) { const [condensed, setCondensed] = useState(null); const [moving, setMoving] = useState(false); useLayoutEffect(() => { const header = headerRef.current; if (!enabled || !header) return; const spread = createSpring(...SPREAD, 1); const material = createSpring(...THIN, 0); let target: boolean | null = null; const paint = () => { header.style.setProperty('--lg-header-spread', spread.value.toFixed(4)); header.style.setProperty( '--lg-header-material', Math.min(Math.max(material.value, 0), 1).toFixed(4), ); }; const clear = () => { header.style.removeProperty('--lg-header-spread'); header.style.removeProperty('--lg-header-material'); }; const loop = createFrameLoop((dt) => { const reduced = motionReduced(); const spreading = stepSpring(spread, dt, reduced); const forming = stepSpring(material, dt, reduced); if (spreading || forming) { paint(); return true; } clear(); setMoving(false); return false; }); const update = (animate: boolean) => { const scrolled = window.scrollY; const next = target ? scrolled > OPEN_WITHIN : scrolled > CONDENSE_AFTER; if (next === target) return; target = next; spread.target = next ? 0 : 1; material.target = next ? 1 : 0; retuneSpring(spread, ...(next ? GATHER : SPREAD)); retuneSpring(material, ...(next ? FORM : THIN)); setCondensed(next); if (animate && !motionReduced()) { // A jump or a fling can carry the page further than the header reaches before it // condenses. The glass is then there at once, so the links never sit bare on content; // only the shape gathers in. if (next && scrolled > header.getBoundingClientRect().bottom) { material.value = 1; material.velocity = 0; } // Pins the current shape inline before the new state's values apply. paint(); setMoving(true); loop.start(); return; } loop.stop(); for (const spring of [spread, material]) { spring.value = spring.target; spring.velocity = 0; } clear(); setMoving(false); }; // A page that opens partway down, or returns there, starts condensed without moving. update(false); const onScroll = () => update(true); window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); loop.stop(); clear(); setMoving(false); }; }, [enabled, headerRef]); return { condensed, moving }; } export const GlassHeader = forwardRef( ( { brand, actions, children, className, condenseOnScroll = false, navigationLabel = 'Primary', position = 'fixed', ...rest }, forwardedRef, ) => { const headerRef = useRef(null); const ref = useMemo(() => mergeRefs(headerRef, forwardedRef), [forwardedRef]); const condensing = condenseOnScroll && position === 'fixed'; const { condensed, moving } = useCondensing(headerRef, condensing); return (

{/* The lens map is drawn for one size, so a condensing header bends light only once its capsule has settled; it frosts while the shape moves. */}

{brand}

{children ? ( <>

{ if (event.key === 'Escape' && event.currentTarget.open) { event.preventDefault(); event.currentTarget.open = false; event.currentTarget.querySelector('summary')?.focus(); } }} >

) : null} {actions ?

{actions}

: null}

); }, ); GlassHeader.displayName = 'GlassHeader'; 5c: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]); } 5d:T1eec,@layer components { /* A slab of glass floating clear of the page, with its menu outside the material's paint clip. Container queries also fit embedded headers. */ .lg-header { position: fixed; inset: 14px 0 auto; z-index: 40; box-sizing: border-box; width: min(920px, calc(100vw - 32px)); height: 56px; margin-inline: auto; border-radius: 999px; color: var(--lg-foreground); container-type: inline-size; } .lg-header[data-position='static'] { position: relative; inset: auto; z-index: auto; width: 100%; max-width: 920px; } /* Frosted as lightly as the other slabs, so the page shows through and bends at the rim. The --lg-header-* tint and dimming keep the links legible. */ .lg-header > .lg-header-glass { --lg-panel-radius: 999px; --lg-glass-blur: calc(var(--lg-slab-blur) * 1px); --lg-lens-blur: var(--lg-slab-blur); --lg-lens-body-brightness: var(--lg-header-brightness); --lg-lens-rim-brightness: var(--lg-header-rim-brightness); --lg-glass-contrast: 1; --lg-glass-sat: 1.5; --lg-glass-brightness: var(--lg-header-brightness); --lg-panel-elevation-shadow: 0 2px 4px -2px rgb(52 62 84 / 0.18), 0 4px 14px -3px rgb(52 62 84 / 0.2); position: absolute; inset: 0; height: 100%; pointer-events: none; } .lg-header > .lg-header-glass::before { background-color: var(--lg-header-tint); } /* A condensing header opens out across the top of the page with no glass and gathers into the capsule once the page scrolls. GlassHeader springs --lg-header-spread (1 open, 0 the capsule) and --lg-header-material (the glass, 0 to 1) while it moves; at rest its data-condensed state sets them. The open bar is never narrower than the capsule, so the links stay on one side of the menu breakpoint throughout. */ .lg-header[data-condense-on-scroll] { --lg-header-spread: 1; --lg-header-material: 0; --lg-header-capsule-width: min(920px, calc(100vw - 32px)); --lg-header-bar-width: max(var(--lg-header-capsule-width), min(1200px, calc(100% - 48px))); } .lg-header[data-condensed='true'] { --lg-header-spread: 0; --lg-header-material: 1; } .lg-header[data-position='fixed'][data-condense-on-scroll] { width: calc( var(--lg-header-capsule-width) + (var(--lg-header-bar-width) - var(--lg-header-capsule-width)) * var(--lg-header-spread) ); } /* Before the script runs, as on a page opened at an anchor, the scroll position alone picks the shape: a custom property animates discretely, so it switches halfway, 8px down. */ @supports (animation-timeline: scroll()) { .lg-header[data-condense-on-scroll]:not([data-condensed]) { animation: lg-header-condensed linear both; animation-timeline: scroll(root); animation-range: 0px 16px; } } @keyframes lg-header-condensed { to { --lg-header-spread: 0; --lg-header-material: 1; } } /* The glass fades on its own layers, never on an ancestor: an ancestor's opacity would cut the frost off from the page it bends. The spring sets the shadow every frame, so the surface's own shadow transition stays out of its way. */ .lg-header[data-condense-on-scroll] > .lg-header-glass { --lg-panel-elevation-shadow: 0 2px 4px -2px rgb(52 62 84 / calc(0.18 * var(--lg-header-material))), 0 4px 14px -3px rgb(52 62 84 / calc(0.2 * var(--lg-header-material))); transition: none; } .lg-header[data-condense-on-scroll] > .lg-header-glass::before, .lg-header[data-condense-on-scroll] > .lg-header-glass::after { opacity: var(--lg-header-material); } .lg-header[data-condense-on-scroll] > .lg-header-glass > .lg-noise { opacity: calc(var(--lg-noise-alpha) * var(--lg-header-material)); } /* The contrast outline edges the glass, so it goes with it: the open bar has none. */ @media (prefers-contrast: more), (forced-colors: active) { .lg-header[data-condense-on-scroll] > .lg-header-glass { outline-width: calc(1px * var(--lg-header-material)) !important; } } /* A small button at the end sits as far from the rim as from the top and bottom, so it nests in the capsule's curve, and the brand starts as far in as that button's label. */ .lg-header-bar { position: relative; display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 12px 0 24px; } .lg-header-brand { flex: none; min-width: 0; margin-inline-end: auto; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; } .lg-header-brand a { color: inherit; text-decoration: none; } .lg-header-links { display: flex; align-items: center; justify-content: center; gap: 2px; } .lg-header-desktop { margin-inline: auto; } .lg-header-links a { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 12px; border-radius: 999px; color: var(--lg-muted-foreground); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: color var(--lg-motion-duration) ease, background-color var(--lg-motion-duration) ease; } /* Colour alone marks hover and the current page in the bar: a fill would lay a pale patch over the glass and whatever the page shows through it. The opaque menu keeps its fill. */ .lg-header-links a:hover, .lg-header-links a[aria-current='page'] { color: var(--lg-foreground); } .lg-header :is(a, summary):focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 2px; } .lg-header-actions { display: flex; flex: none; align-items: center; gap: 4px; } .lg-header-menu { display: none; } .lg-header-menu summary { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; user-select: none; } .lg-header-menu summary::-webkit-details-marker { display: none; } .lg-header-menu-links { position: absolute; top: calc(100% + 8px); right: 10px; z-index: 1; flex-direction: column; align-items: stretch; box-sizing: border-box; width: min(240px, calc(100cqw - 20px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 8px; border: 1px solid var(--lg-border); border-radius: 20px; background: var(--lg-opaque-surface); box-shadow: var(--lg-shadow-raised); } .lg-header-menu-links a { justify-content: flex-start; height: 44px; padding: 0 16px; border-radius: 12px; } .lg-header-menu-links a:hover, .lg-header-menu-links a[aria-current='page'] { background: var(--lg-control-surface); } .lg-header-menu:not([open]) > nav { display: none; } @container (max-width: 780px) { .lg-header-bar { gap: 8px; } .lg-header-desktop { display: none; } .lg-header-menu { display: block; } } /* The narrowest phones close up the items and the margins, so the bar still fits and an icon button at the end still nests in the curve. */ @container (max-width: 320px) { .lg-header-bar { gap: 4px; padding: 0 10px 0 20px; } } @media (max-width: 700px) { .lg-header[data-position='fixed'] { top: 8px; width: calc(100vw - 20px); } /* On a phone the open bar reaches the screen's edges and the capsule draws in from them. */ .lg-header[data-condense-on-scroll] { --lg-header-capsule-width: calc(100vw - 20px); --lg-header-bar-width: 100%; } } } 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-surface.tsx","content":"$57","type":"registry:ui","target":"components/glassyui/glass-surface.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/refraction-map.ts","content":"$58","type":"registry:lib","target":"components/glassyui/lib/refraction-map.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/use-refraction-filter.tsx","content":"$59","type":"registry:hook","target":"components/glassyui/lib/use-refraction-filter.tsx"},{"path":"registry/glassyui/lib/scene-context.ts","content":"$5a","type":"registry:lib","target":"components/glassyui/lib/scene-context.ts"},{"path":"registry/glassyui/glass-header.tsx","content":"$5b","type":"registry:ui","target":"components/glassyui/glass-header.tsx"},{"path":"registry/glassyui/lib/liquid-motion.ts","content":"$5c","type":"registry:lib","target":"components/glassyui/lib/liquid-motion.ts"},{"path":"registry/glassyui/styles/header.css","content":"$5d","type":"registry:file","target":"components/glassyui/styles/header.css"}],"className":"h-[70svh] min-h-80"}]]}]