@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/styles/glass/glass-atom.css

@@ -1 +1 @@
-@layer components { .glass-atom { --atom-tint-floor: 12%; --accent-fill-strength: max( var(--accent-fill-strength-in, 0%), var(--atom-tint-floor) ); transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-normal) var(--ease-cartoon-punch), translate var(--duration-normal) var(--ease-cartoon-punch); } .dark .glass-atom { --atom-tint-floor: 15%; } .glass-atom:active:not([data-disabled]):not(:disabled) { scale: 1.04 0.94; } .glass-atom[data-cast] { --motion-weight: 1; } .glass-atom[data-cast] .cartoon-cast { box-shadow: var(--shadow-cartoon-sm); } @media (hover: hover) { .glass-atom[data-cast]:hover:not(:active) .cartoon-cast { box-shadow: var(--shadow-cartoon-md); } } .glass-atom[data-surface="glass"] { background-image: linear-gradient( var(--glass-fill-tinted), var(--glass-fill-tinted) ); } @media (prefers-reduced-motion: reduce) { .glass-atom { --motion-weight: 0; } .glass-atom:active:not([data-disabled]):not(:disabled) { scale: 1; } } @media (prefers-contrast: more) { .glass-atom { border-color: color-mix(in srgb, var(--foreground) 24%, transparent); } } .badge-atom { position: relative; scale: 1; translate: 0; box-shadow: var(--glass-material-rim); transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-normal) var(--ease-cartoon-punch), translate var(--duration-normal) var(--ease-cartoon-punch); } .badge-atom:active:not([data-disabled]):not([aria-disabled='true']) { scale: 1.04 0.94; } .badge-atom--outline { box-shadow: var(--glass-material-rim); border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); } .badge-atom[data-cast] { --motion-weight: 1; } .badge-atom[data-cast] .cartoon-cast { box-shadow: var(--shadow-cartoon-sm); } @media (hover: hover) { .badge-atom[data-cast]:hover:not(:active) .cartoon-cast { box-shadow: var(--shadow-cartoon-md); } } .badge-atom--glass { background-color: transparent !important; --glass-fill-strength: var(--badge-glass-strength, 16%); } .badge-atom--glass[data-variant='default'] { --glass-fill-tint: var(--primary); } .badge-atom--glass[data-variant='secondary'] { --glass-fill-tint: var(--glass-capsule-warm); } .badge-atom--glass[data-variant='outline'] { --glass-fill-tint: var(--glass-capsule-warm); } .badge-atom--glass[data-tone='destructive'] { --glass-fill-tint: var(--destructive); } .badge-atom--glass[data-tone='success'] { --glass-fill-tint: var(--success); } .badge-atom--glass[data-tone='warning'] { --glass-fill-tint: var(--warning); } .badge-atom--glass[data-tone='info'] { --glass-fill-tint: var(--info); } @media (prefers-reduced-motion: reduce) { .badge-atom { --motion-weight: 0; } .badge-atom:active:not([data-disabled]) { scale: 1; } } @media (prefers-contrast: more) { .badge-atom { border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent); } } }
+@layer components { .cartoon-cast { --cast-travel: calc(6px * var(--motion-weight) * var(--cartoon-press-t)); --cast-spread: calc(1 + 0.18 * var(--motion-weight) * var(--cartoon-press-t)); position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow-cartoon-md); translate: calc(-1 * var(--cast-travel) + var(--cartoon-cast-dx)) calc(var(--cast-travel) + var(--cartoon-cast-dy)); scale: var(--cast-spread); transition: translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch), scale calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch); } .glass-atom { transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .glass-atom[data-surface="glass"] { background-image: linear-gradient( var(--glass-fill-tinted), var(--glass-fill-tinted) ); } @media (prefers-reduced-motion: reduce) { .cartoon-cast { --motion-weight: 0; transition: none; } } @media (prefers-contrast: more) { .glass-atom { border-color: color-mix(in srgb, var(--foreground) 24%, transparent); } } .badge-atom { box-shadow: var(--glass-material-rim); } .badge-atom--outline { box-shadow: var(--glass-material-rim); border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); } .badge-atom--glass { background-color: transparent !important; --glass-fill-strength: var(--badge-glass-strength, 16%); } .badge-atom--glass[data-variant="default"] { --glass-fill-tint: var(--primary); } .badge-atom--glass[data-variant="secondary"] { --glass-fill-tint: var(--glass-capsule-warm); } .badge-atom--glass[data-variant="outline"] { --glass-fill-tint: var(--glass-capsule-warm); } .badge-atom--glass[data-tone="destructive"] { --glass-fill-tint: var(--destructive); } .badge-atom--glass[data-tone="success"] { --glass-fill-tint: var(--success); } .badge-atom--glass[data-tone="warning"] { --glass-fill-tint: var(--warning); } .badge-atom--glass[data-tone="info"] { --glass-fill-tint: var(--info); } @media (prefers-contrast: more) { .badge-atom { border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent); } } }

package/dist/styles/glass/glass-capsule.css

@@ -1 +1 @@
-@layer components { .glass-capsule { background: var( --glass-capsule-fill, color-mix( in oklab, var(--glass-bg-floating-tinted), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ) ); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--glass-shadow-floating); border-radius: var(--radius-pill); } .glass-capsule-track { background: var(--glass-bg-quiet); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); -webkit-backdrop-filter: var(--glass-blur-quiet); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), inset 0 1px 2px var(--tab-track-recess-ink); } .glass-capsule-hover { transition: scale var(--duration-fast) var(--ease-cartoon-punch), --specular-intensity var(--duration-fast) var(--ease-standard); } .glass-capsule-hover:hover, .glass-drag-lift { --specular-intensity: 0.14; } .glass-capsule-hover:hover { scale: 1.015; } .glass-capsule-hover:not([data-press-armed]):active { scale: var(--scale-press-sm, 0.97); } @media (prefers-reduced-motion: reduce) { .glass-capsule-hover:hover, .glass-capsule-hover:not([data-press-armed]):active { scale: 1; } } .glass-dock :is(.glass-capsule, .glass-capsule-hover) { background-clip: content-box; } .glass-dock .dock-icon-button { padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0)); } }
+@layer components { .glass-capsule { background: var( --glass-capsule-fill, color-mix( in oklab, var(--glass-bg-floating-tinted), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ) ); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-floating)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-floating)); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--glass-shadow-floating); border-radius: var(--radius-pill); } .glass-capsule-track { background: var(--glass-bg-quiet); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-quiet)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-quiet)); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), inset 0 1px 2px var(--tab-track-recess-ink); } .glass-capsule-hover { transition: scale var(--duration-fast) var(--ease-cartoon-punch), --specular-intensity var(--duration-fast) var(--ease-standard); } .glass-capsule-hover:hover, .glass-drag-lift { --specular-intensity: 0.14; } .glass-capsule-hover:hover { scale: 1.015; } .glass-capsule-hover:not([data-press-armed]):active { scale: var(--scale-press-sm, 0.97); } @media (prefers-reduced-motion: reduce) { .glass-capsule-hover:hover, .glass-capsule-hover:not([data-press-armed]):active { scale: 1; } } .glass-dock :is(.glass-capsule, .glass-capsule-hover) { background-clip: content-box; } .glass-dock .dock-icon-button { padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0)); } }

package/dist/styles/glass/glass-chip.css

@@ -1 +1 @@
-@property --chip-flood-t { syntax: "<number>"; inherits: true; initial-value: 0; } @layer components { .glass-chip { position: relative; isolation: isolate; --chip-tint-floor: 12%; --accent-fill-strength: max(8%, var(--chip-tint-floor)); --accent-band-strength: max(18%, calc(var(--chip-tint-floor) + 10%)); scale: calc(1 + 0.12 * var(--chip-flood-t, 0) * var(--motion-weight, 0.618)); transform-origin: center; transition: scale var(--duration-normal) var(--ease-cartoon-punch), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); background-image: linear-gradient( var(--glass-fill-tinted), var(--glass-fill-tinted) ); } .dark .glass-chip { --chip-tint-floor: 15%; } .glass-chip[data-state="on"] { background-color: var(--accent-band); border-color: var(--accent-edge); color: var(--accent-ink); --chip-flood-t: 1; } .glass-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in oklab, var(--accent-band) 60%, oklch(0.9 0.05 75 / 0)), oklch(0.9 0.05 75 / 0) 72% ); mix-blend-mode: plus-lighter; opacity: var(--chip-flood-t, 0); transition: opacity var(--duration-normal) var(--ease-out) 60ms; } .glass-chip--cell { border-radius: var(--radius-card); } .glass-chip--cell.glass-capsule { border-radius: var(--radius-card); } @media (prefers-reduced-motion: reduce) { .glass-chip { --motion-weight: 0; } } @media (prefers-contrast: more) { .glass-chip[data-state="on"] { border-color: color-mix(in srgb, var(--foreground) 28%, transparent); } } }
+@property --chip-flood-t { syntax: "<number>"; inherits: true; initial-value: 0; } @layer components { .glass-chip { --chip-tint-floor: 12%; --accent-band-strength: max(18%, calc(var(--chip-tint-floor) + 10%)); position: relative; isolation: isolate; background-image: linear-gradient( var(--glass-fill-tinted), var(--glass-fill-tinted) ); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dark .glass-chip { --chip-tint-floor: 15%; } .glass-chip--interactive { scale: calc(1 + 0.12 * var(--chip-flood-t) * var(--motion-weight, 0.618)); transition: scale var(--duration-normal) var(--ease-cartoon-punch), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .glass-chip[data-mode="selectable"][data-state="on"] { --chip-flood-t: 1; background-color: var(--accent-band); border-color: var(--accent-edge); color: var(--accent-ink); } .glass-chip[data-mode="selectable"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in oklab, var(--accent-band) 60%, oklch(0.9 0.05 75 / 0)), oklch(0.9 0.05 75 / 0) 72% ); mix-blend-mode: plus-lighter; opacity: var(--chip-flood-t); transition: opacity var(--duration-normal) var(--ease-out) 60ms; } .glass-chip--cell, .glass-chip--cell.glass-capsule { border-radius: var(--radius-card); } .glass-chip--icon, .glass-chip--icon.glass-capsule { border-radius: var(--radius-pill); } .glass-chip__content { min-inline-size: 0; } .glass-chip__remove { display: inline-grid; flex: none; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; padding: 0; border: 0; border-radius: var(--radius-pill); color: currentColor; background: color-mix(in srgb, currentColor 10%, oklch(0.9 0.05 75 / 0)); cursor: pointer; } .glass-chip[data-disabled] { opacity: var(--opacity-disabled); } @media (prefers-reduced-motion: reduce) { .glass-chip--interactive { --motion-weight: 0; } } @media (pointer: coarse) { .glass-chip--interactive { min-inline-size: var(--touch-target, 2.75rem); min-block-size: var(--touch-target, 2.75rem); } .glass-chip[data-mode="removable"] { min-block-size: var(--touch-target, 2.75rem); } .glass-chip[data-mode="removable"]::after { content: ""; flex: none; inline-size: var(--touch-target, 2.75rem); } .glass-chip__remove { position: absolute; inset-block-start: 50%; inset-inline-end: 0; inline-size: var(--touch-target, 2.75rem); block-size: var(--touch-target, 2.75rem); translate: 0 -50%; background: transparent; } .glass-chip__remove > span { display: inline-grid; inline-size: 1.25rem; block-size: 1.25rem; place-items: center; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 10%, oklch(0.9 0.05 75 / 0)); } } @media (prefers-contrast: more) { .glass-chip[data-mode="selectable"][data-state="on"] { border-color: color-mix( in srgb, var(--foreground) 28%, oklch(0.9 0.05 75 / 0) ); } } }

package/dist/styles/glass/ladder.css

@@ -1 +1 @@
-@layer components { .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay { --glass-plate-tinted: color-mix( in oklab, var(--glass-bg-rung), var(--glass-tint-source) var(--glass-tint-strength) ); } .glass-wash { position: relative; --glass-bg-rung: var(--glass-bg-wash); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-wash); backdrop-filter: var(--glass-blur-wash); --glass-border-rung: var(--glass-border-wash); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-shadow-wash); } .glass-quiet { position: relative; --glass-bg-rung: var(--glass-bg-quiet); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); --glass-border-rung: var(--glass-border-quiet); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-quiet), var(--glass-shadow-quiet); } .glass-resting { position: relative; --glass-bg-rung: var(--glass-bg-resting); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-resting); backdrop-filter: var(--glass-blur-resting); --glass-border-rung: var(--glass-border-resting); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-default), var(--glass-shadow-resting); } .glass-floating { --glass-backdrop: light; position: relative; --glass-bg-rung: var(--glass-bg-floating); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); --glass-border-rung: var(--glass-border-floating); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating); } .glass-overlay { --glass-backdrop: light; position: relative; --glass-bg-rung: var(--glass-bg-overlay); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-overlay); backdrop-filter: var(--glass-blur-overlay); --glass-border-rung: var(--glass-border-overlay); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay); } @container style(--glass-backdrop: light) { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --muted-foreground: var(--foreground); } } :where(.glass-floating, .glass-overlay) { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --muted-foreground: var(--on-glass-muted); --muted-foreground-strong: var(--on-glass-muted-strong); } :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --muted-foreground: var(--on-glass-muted); --muted-foreground-strong: var(--on-glass-muted-strong); } :where(.feedback-tone, .glass-capsule, .metric-badge) { --muted-foreground: var(--on-glass-muted-strong); --muted-foreground-strong: var(--on-glass-muted-strong); } @supports (color: contrast-color(white)) { @container style(--glass-backdrop: light) { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card { color: contrast-color(var(--card)); --foreground: contrast-color(var(--card)); --muted-foreground: contrast-color(var(--card)); } } } }
+@layer components { .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay { --glass-plate-tinted: color-mix( in oklab, var(--glass-bg-rung), var(--glass-tint-source) var(--glass-tint-strength) ); } .glass-wash { position: relative; --glass-bg-rung: var(--glass-bg-wash); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-wash)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-wash)); --glass-border-rung: var(--glass-border-wash); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-shadow-wash); } .glass-quiet { position: relative; --glass-bg-rung: var(--glass-bg-quiet); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-quiet)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-quiet)); --glass-border-rung: var(--glass-border-quiet); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-quiet), var(--glass-shadow-quiet); } .glass-resting { position: relative; --glass-bg-rung: var(--glass-bg-resting); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-resting)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-resting)); --glass-border-rung: var(--glass-border-resting); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-default), var(--glass-shadow-resting); } .glass-floating { --glass-backdrop: light; position: relative; --glass-bg-rung: var(--glass-bg-floating); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); --glass-border-rung: var(--glass-border-floating); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating); } .glass-overlay { --glass-backdrop: light; position: relative; --glass-bg-rung: var(--glass-bg-overlay); background: var(--glass-plate-tinted); -webkit-backdrop-filter: var(--glass-blur-overlay); backdrop-filter: var(--glass-blur-overlay); --glass-border-rung: var(--glass-border-overlay); border: 1px solid var(--glass-border-accent); box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay); } @container style(--glass-backdrop: light) { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: var(--glass-tint-strength-aa); --muted-foreground: var(--foreground); } } :where(.glass-floating, .glass-overlay) { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --muted-foreground: var(--on-glass-muted); --muted-foreground-strong: var(--on-glass-muted-strong); } :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) { --glass-tint-source: var(--glass-tint-ink); --glass-tint-strength: clamp( var(--glass-tint-strength-floor), calc( var(--glass-tint-strength-floor) + (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) * max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee))) ), var(--glass-tint-strength-aa) ); --muted-foreground: var(--on-glass-muted); --muted-foreground-strong: var(--on-glass-muted-strong); } :where(.feedback-tone, .glass-capsule) { --muted-foreground: var(--on-glass-muted-strong); --muted-foreground-strong: var(--on-glass-muted-strong); } @supports (color: contrast-color(white)) { @container style(--glass-backdrop: light) { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card { color: contrast-color(var(--card)); --foreground: contrast-color(var(--card)); --muted-foreground: contrast-color(var(--card)); } } } }

package/dist/styles/glass/liquid-fill.css

@@ -1 +1 @@
-@layer components { .glass-liquid-fill { border-radius: var(--radius-pill); background: color-mix( in oklab, var(--liquid-fill-tint, var(--glass-capsule-warm)) var(--liquid-fill-strength, 88%), oklch(0.9 0.05 75 / 0) ); -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet)); backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet)); -webkit-backdrop-filter: var(--liquid-fill-blur, var(--glass-blur-quiet)); box-shadow: var(--glass-material-rim), var(--liquid-fill-shadow, var(--glass-under-shadow-quiet)); transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } }
+@layer components { .glass-liquid-fill { border-radius: var(--radius-pill); background: color-mix( in oklab, var(--liquid-fill-tint, var(--glass-capsule-warm)) var(--liquid-fill-strength, 88%), oklch(0.9 0.05 75 / 0) ); -webkit-backdrop-filter: var( --glass-cell-backdrop-filter, var(--liquid-fill-blur, var(--glass-blur-quiet)) ); backdrop-filter: var( --glass-cell-backdrop-filter, var(--liquid-fill-blur, var(--glass-blur-quiet)) ); box-shadow: var(--glass-material-rim), var(--liquid-fill-shadow, var(--glass-under-shadow-quiet)); transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } }

package/dist/styles/glass/material-roles.css

@@ -1 +1 @@
-@layer components { [data-material="content-field"] { background: var(--background); color: var(--foreground); } [data-material="elevated-content"][data-surface="glass"] { background: var(--card); border-color: var(--border-soft); box-shadow: var(--card-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } }
+@layer components { [data-material="content"] { --surface-role-shadow: var(--shadow-sm); } [data-material="elevated"] { --surface-role-shadow: var(--shadow-card); } [data-material="functional"] { --surface-role-shadow: var(--shadow-dock); } [data-material="overlay"] { --surface-role-shadow: var(--shadow-modal); } [data-material][data-shadow] { box-shadow: var(--surface-role-shadow); } }

package/dist/styles/glass/material.css

@@ -1 +1 @@
-@layer components { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger { position: relative; } .glass-wash, .glass-quiet, .glass-resting, .glass-card, .glass-btn { contain: paint; } .glass-material::before, .glass-wash::before, .glass-quiet::before, .glass-resting::before, .glass-floating::before, .glass-overlay::before, .glass-card::before, .glass-specular-track::before, .dock-icon-button::before, .dock-tab-button::before, .dock-select-trigger::before, .dock-dropdown-trigger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; --specular-x: var(--mouse-x, 50%); --specular-y: var(--mouse-y, 50%); --specular-intensity: max( var(--glass-specular-intensity-rest, 0), calc(var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0)) ); --glass-specular-core: color-mix( in oklab, color-mix( in oklab, hsl(40 35% 92%), var(--glass-accent) var(--glass-accent-strength) ), var(--glass-ambient-hue) var(--glass-ambient-strength) ); background: conic-gradient( from var(--specular-angle, 0deg) at 50% 50%, transparent 0deg, color-mix(in srgb, var(--glass-specular-core) 55%, transparent) 18deg, transparent 60deg, transparent 360deg ), radial-gradient( circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%), color-mix(in srgb, var(--glass-specular-core) 50%, transparent) 0%, transparent 70%, transparent 100% ); box-shadow: inset 0 0 0 var(--glass-specular-hairline-width, 0.75px) color-mix(in srgb, hsl(40 35% 92%) var(--glass-specular-hairline-ink, 70%), transparent); opacity: max( var(--specular-intensity, 0), var(--glass-specular-rest-hairline, 0.07) ); mask-image: radial-gradient( circle closest-side at 50% 50%, transparent calc(100% - var(--glass-edge-glint-band, 22%)), black calc(100% - calc(var(--glass-edge-glint-band, 22%) * 0.5)), black 100% ), radial-gradient( circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%), black 0%, black 60%, transparent 100% ); mix-blend-mode: plus-lighter; } .glass-specular-track::before, .glass-material:hover::before, .glass-material:active::before, .glass-wash:hover::before, .glass-wash:active::before, .glass-quiet:hover::before, .glass-quiet:active::before, .glass-resting:hover::before, .glass-resting:active::before, .glass-floating:hover::before, .glass-floating:active::before, .glass-overlay:hover::before, .glass-overlay:active::before, .glass-card:hover::before, .glass-card:active::before, .dock-icon-button::before, .dock-tab-button::before, .dock-select-trigger::before, .dock-dropdown-trigger::before { transition: --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out), --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out), opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out); } .dark .glass-material::before, .dark .glass-wash::before, .dark .glass-quiet::before, .dark .glass-resting::before, .dark .glass-floating::before, .dark .glass-overlay::before, .dark .glass-card::before, .dark .glass-specular-track::before, .dark .dock-icon-button::before, .dark .dock-tab-button::before, .dark .dock-select-trigger::before, .dark .dock-dropdown-trigger::before { --specular-intensity: max( var(--glass-specular-intensity-rest, 0), calc(var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0)) ); } .glass-material:hover::before, .glass-wash:hover::before, .glass-quiet:hover::before, .glass-resting:hover::before, .glass-floating:hover::before, .glass-overlay:hover::before, .glass-card:hover::before, .glass-specular-track:hover::before, .dock-icon-button:hover::before, .dock-tab-button:hover::before, .dock-select-trigger:hover::before, .dock-dropdown-trigger:hover::before { --specular-intensity: var(--glass-specular-intensity-hover, 0.1); } .glass-material:active::before, .glass-wash:active::before, .glass-quiet:active::before, .glass-resting:active::before, .glass-floating:active::before, .glass-overlay:active::before, .glass-card:active::before, .glass-specular-track:active::before, .dock-icon-button:active::before, .dock-tab-button:active::before, .dock-select-trigger:active::before, .dock-dropdown-trigger:active::before { --specular-intensity: var(--glass-specular-intensity-active, 0.16); } :is(.glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger):is(.is-active, .active, [data-active], [data-dragging], [data-state="checked"], [data-state="on"], [aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current="page"])::before { --specular-intensity: var(--glass-specular-intensity-active, 0.16); } :is(.glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger):is(:disabled, [data-disabled], [aria-disabled="true"])::before { --specular-intensity: var(--glass-specular-intensity-rest, 0); transition: none; } [data-surface="clear"], .glass-clear { --glass-clear-scrim-floor: 12%; --glass-clear-scrim-ramp: 28%; --glass-clear-scrim-strength: calc( var(--glass-clear-scrim-floor) + var(--glass-backdrop-luma) * var(--glass-clear-scrim-ramp) ); background: color-mix( in oklab, var(--glass-bg-clear), var(--glass-tint-source) var(--glass-tint-strength) ), color-mix( in srgb, var(--background) var(--glass-clear-scrim-strength), transparent ); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); position: relative; } }
+@layer components { .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger { position: relative; } :where( .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-card, .glass-dock ) > * { --glass-cell-backdrop-filter: none; } .glass-wash, .glass-quiet, .glass-resting, .glass-card { contain: paint; } .glass-material::before, .glass-wash::before, .glass-quiet::before, .glass-resting::before, .glass-floating::before, .glass-overlay::before, .glass-card::before, .glass-specular-track::before, .dock-icon-button::before, .dock-tab-button::before, .dock-select-trigger::before, .dock-dropdown-trigger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; --specular-x: var(--mouse-x, 50%); --specular-y: var(--mouse-y, 50%); --specular-intensity: max( var(--glass-specular-intensity-rest, 0), calc( var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0) ) ); --glass-specular-core: color-mix( in oklab, color-mix( in oklab, hsl(40 35% 92%), var(--glass-accent) var(--glass-accent-strength) ), var(--glass-ambient-hue) var(--glass-ambient-strength) ); background: conic-gradient( from var(--specular-angle, 0deg) at 50% 50%, transparent 0deg, color-mix(in srgb, var(--glass-specular-core) 55%, transparent) 18deg, transparent 60deg, transparent 360deg ), radial-gradient( circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%), color-mix(in srgb, var(--glass-specular-core) 50%, transparent) 0%, transparent 70%, transparent 100% ); box-shadow: inset 0 0 0 var(--glass-specular-hairline-width, 0.75px) color-mix( in srgb, hsl(40 35% 92%) var(--glass-specular-hairline-ink, 70%), transparent ); opacity: max( var(--specular-intensity, 0), var(--glass-specular-rest-hairline, 0.07) ); mask-image: radial-gradient( circle closest-side at 50% 50%, transparent calc(100% - var(--glass-edge-glint-band, 22%)), black calc(100% - calc(var(--glass-edge-glint-band, 22%) * 0.5)), black 100% ), radial-gradient( circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%), black 0%, black 60%, transparent 100% ); mix-blend-mode: plus-lighter; } .glass-specular-track::before, .glass-material:hover::before, .glass-material:active::before, .glass-wash:hover::before, .glass-wash:active::before, .glass-quiet:hover::before, .glass-quiet:active::before, .glass-resting:hover::before, .glass-resting:active::before, .glass-floating:hover::before, .glass-floating:active::before, .glass-overlay:hover::before, .glass-overlay:active::before, .glass-card:hover::before, .glass-card:active::before, .dock-icon-button::before, .dock-tab-button::before, .dock-select-trigger::before, .dock-dropdown-trigger::before { transition: --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out), --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out), opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out); } .dark .glass-material::before, .dark .glass-wash::before, .dark .glass-quiet::before, .dark .glass-resting::before, .dark .glass-floating::before, .dark .glass-overlay::before, .dark .glass-card::before, .dark .glass-specular-track::before, .dark .dock-icon-button::before, .dark .dock-tab-button::before, .dark .dock-select-trigger::before, .dark .dock-dropdown-trigger::before { --specular-intensity: max( var(--glass-specular-intensity-rest, 0), calc( var(--glass-specular-intensity-active, 0.16) * var(--glass-btn-press-t, 0) ) ); } .glass-material:hover::before, .glass-wash:hover::before, .glass-quiet:hover::before, .glass-resting:hover::before, .glass-floating:hover::before, .glass-overlay:hover::before, .glass-card:hover::before, .glass-specular-track:hover::before, .dock-icon-button:hover::before, .dock-tab-button:hover::before, .dock-select-trigger:hover::before, .dock-dropdown-trigger:hover::before { --specular-intensity: var(--glass-specular-intensity-hover, 0.1); } .glass-material:active::before, .glass-wash:active::before, .glass-quiet:active::before, .glass-resting:active::before, .glass-floating:active::before, .glass-overlay:active::before, .glass-card:active::before, .glass-specular-track:active::before, .dock-icon-button:active::before, .dock-tab-button:active::before, .dock-select-trigger:active::before, .dock-dropdown-trigger:active::before { --specular-intensity: var(--glass-specular-intensity-active, 0.16); } :is( .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ):is( .is-active, .active, [data-active], [data-dragging], [data-state="checked"], [data-state="on"], [aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current="page"] )::before { --specular-intensity: var(--glass-specular-intensity-active, 0.16); } :is( .glass-material, .glass-wash, .glass-quiet, .glass-resting, .glass-floating, .glass-overlay, .glass-specular-track, .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ):is(:disabled, [data-disabled], [aria-disabled="true"])::before { --specular-intensity: var(--glass-specular-intensity-rest, 0); transition: none; } }

package/dist/styles/glass/reveal.css

@@ -1 +1 @@
-@layer components { .glass-reveal { --reveal-spring: var(--enter-overlay-spring); --reveal-clock: var(--enter-overlay-clock); --reveal-exit-clock: var(--exit-overlay-duration); --reveal-exit-curve: var(--exit-curve); --glass-reveal-enter-scale: var(--enter-overlay-scale); --glass-reveal-blur: var(--enter-overlay-blur); --glass-reveal-slide: var(--enter-overlay-slide); --lq-stretch-x: 1.06; --lq-stretch-y: 0.945; transform-origin: var(--reka-popper-transform-origin, center); transition-property: scale, translate, opacity, filter, display, overlay; transition-duration: var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock); transition-timing-function: var(--reveal-spring), var(--reveal-spring), var(--ease-out), var(--ease-out), linear, linear; transition-behavior: allow-discrete; } .glass-reveal[data-reveal="overlay"] { --reveal-spring: var(--enter-overlay-spring); --reveal-clock: var(--enter-overlay-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-overlay-scale); --glass-reveal-blur: var(--enter-overlay-blur); --glass-reveal-slide: var(--enter-overlay-slide); } .glass-reveal[data-reveal="menu"] { --reveal-spring: var(--enter-menu-spring); --reveal-clock: var(--enter-menu-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-menu-scale); --glass-reveal-blur: var(--enter-menu-blur); --glass-reveal-slide: var(--enter-menu-slide); } .glass-reveal[data-reveal="tooltip"] { --reveal-spring: var(--enter-tooltip-spring); --reveal-clock: var(--enter-tooltip-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-tooltip-scale); --glass-reveal-blur: var(--enter-tooltip-blur); --glass-reveal-slide: var(--enter-tooltip-slide); } .glass-reveal[data-reveal="transient"] { --reveal-spring: var(--enter-transient-spring); --reveal-clock: var(--enter-transient-clock); --reveal-exit-clock: var(--exit-transient-duration); --glass-reveal-enter-scale: var(--enter-transient-scale); --glass-reveal-blur: var(--enter-transient-blur); --glass-reveal-slide: var(--enter-transient-slide); } .glass-reveal[data-state="open"] { scale: 1 1; opacity: 1; filter: blur(0); @starting-style { scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur)); } } .glass-reveal[data-state="closed"] { scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur)); animation: glass-reveal-out var(--reveal-exit-clock) var(--reveal-exit-curve) both; transition-property: translate, display, overlay; transition-timing-function: var(--reveal-exit-curve); transition-duration: var(--reveal-exit-clock); } .glass-reveal[data-side="top"][data-state="open"] { translate: 0 0; @starting-style { translate: 0 var(--glass-reveal-slide); } } .glass-reveal[data-side="bottom"][data-state="open"] { translate: 0 0; @starting-style { translate: 0 calc(-1 * var(--glass-reveal-slide)); } } .glass-reveal[data-side="left"][data-state="open"] { translate: 0 0; @starting-style { translate: var(--glass-reveal-slide) 0; } } .glass-reveal[data-side="right"][data-state="open"] { translate: 0 0; @starting-style { translate: calc(-1 * var(--glass-reveal-slide)) 0; } } .glass-reveal[data-state="closed"][data-side="top"] { translate: 0 var(--glass-reveal-slide); } .glass-reveal[data-state="closed"][data-side="bottom"] { translate: 0 calc(-1 * var(--glass-reveal-slide)); } .glass-reveal[data-state="closed"][data-side="left"] { translate: var(--glass-reveal-slide) 0; } .glass-reveal[data-state="closed"][data-side="right"] { translate: calc(-1 * var(--glass-reveal-slide)) 0; } .glass-reveal[data-motion="reduced"] { --glass-reveal-enter-scale: 0.97; --glass-reveal-blur: 0px; } .glass-reveal[data-motion="off"] { scale: none; translate: none; filter: blur(0); transition-property: opacity, display, overlay; transition-duration: var(--reveal-exit-clock); transition-timing-function: var(--reveal-exit-curve); } .glass-reveal[data-motion="off"][data-state="closed"] { scale: none; translate: none; filter: blur(0); animation-name: glass-reveal-out-reduced; } } @media (prefers-reduced-motion: reduce) { .glass-reveal { scale: none; translate: none; filter: blur(0); transition-property: opacity, display, overlay; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } .glass-reveal[data-state="closed"] { scale: none; translate: none; filter: blur(0); animation-name: glass-reveal-out-reduced; } }
+@layer components { .glass-reveal { --reveal-spring: var(--enter-overlay-spring); --reveal-clock: var(--enter-overlay-clock); --reveal-exit-clock: var(--exit-overlay-duration); --reveal-exit-curve: var(--exit-curve); --glass-reveal-enter-scale: var(--enter-overlay-scale); --glass-reveal-blur: var(--enter-overlay-blur); --glass-reveal-slide: var(--enter-overlay-slide); --lq-stretch-x: 1.06; --lq-stretch-y: 0.945; transform-origin: var(--reka-popper-transform-origin, center); transition-property: scale, translate, opacity, filter, display, overlay; transition-duration: var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock), var(--reveal-clock); transition-timing-function: var(--reveal-spring), var(--reveal-spring), var(--ease-out), var(--ease-out), linear, linear; transition-behavior: allow-discrete; } .glass-reveal[data-reveal="overlay"] { --reveal-spring: var(--enter-overlay-spring); --reveal-clock: var(--enter-overlay-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-overlay-scale); --glass-reveal-blur: var(--enter-overlay-blur); --glass-reveal-slide: var(--enter-overlay-slide); } .glass-reveal[data-reveal="menu"] { --reveal-spring: var(--enter-menu-spring); --reveal-clock: var(--enter-menu-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-menu-scale); --glass-reveal-blur: var(--enter-menu-blur); --glass-reveal-slide: var(--enter-menu-slide); } .glass-reveal[data-reveal="tooltip"] { --reveal-spring: var(--enter-tooltip-spring); --reveal-clock: var(--enter-tooltip-clock); --reveal-exit-clock: var(--exit-overlay-duration); --glass-reveal-enter-scale: var(--enter-tooltip-scale); --glass-reveal-blur: var(--enter-tooltip-blur); --glass-reveal-slide: var(--enter-tooltip-slide); } .glass-reveal[data-reveal="transient"] { --reveal-spring: var(--enter-transient-spring); --reveal-clock: var(--enter-transient-clock); --reveal-exit-clock: var(--exit-transient-duration); --glass-reveal-enter-scale: var(--enter-transient-scale); --glass-reveal-blur: var(--enter-transient-blur); --glass-reveal-slide: var(--enter-transient-slide); } .glass-reveal[data-state="open"] { scale: 1 1; opacity: 1; filter: blur(0); @starting-style { scale: calc(var(--glass-reveal-enter-scale, 0.94) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.94) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur)); } } .glass-reveal[data-state="closed"] { scale: calc(var(--glass-reveal-enter-scale, 0.94) * var(--lq-stretch-x, 1.06)) calc(var(--glass-reveal-enter-scale, 0.94) * var(--lq-stretch-y, 0.945)); opacity: 0; filter: blur(var(--glass-reveal-blur)); animation: glass-reveal-out var(--reveal-exit-clock) var(--reveal-exit-curve) both; transition-property: translate, display, overlay; transition-timing-function: var(--reveal-exit-curve); transition-duration: var(--reveal-exit-clock); } .glass-reveal[data-side="top"][data-state="open"] { translate: 0 0; @starting-style { translate: 0 var(--glass-reveal-slide); } } .glass-reveal[data-side="bottom"][data-state="open"] { translate: 0 0; @starting-style { translate: 0 calc(-1 * var(--glass-reveal-slide)); } } .glass-reveal[data-side="left"][data-state="open"] { translate: 0 0; @starting-style { translate: var(--glass-reveal-slide) 0; } } .glass-reveal[data-side="right"][data-state="open"] { translate: 0 0; @starting-style { translate: calc(-1 * var(--glass-reveal-slide)) 0; } } .glass-reveal[data-state="closed"][data-side="top"] { translate: 0 var(--glass-reveal-slide); } .glass-reveal[data-state="closed"][data-side="bottom"] { translate: 0 calc(-1 * var(--glass-reveal-slide)); } .glass-reveal[data-state="closed"][data-side="left"] { translate: var(--glass-reveal-slide) 0; } .glass-reveal[data-state="closed"][data-side="right"] { translate: calc(-1 * var(--glass-reveal-slide)) 0; } .glass-reveal[data-motion="reduced"] { --glass-reveal-enter-scale: 0.97; --glass-reveal-blur: 0px; } .glass-reveal[data-motion="off"] { scale: none; translate: none; filter: blur(0); transition-property: opacity, display, overlay; transition-duration: var(--reveal-exit-clock); transition-timing-function: var(--reveal-exit-curve); } .glass-reveal[data-motion="off"][data-state="closed"] { scale: none; translate: none; filter: blur(0); animation-name: glass-reveal-out-reduced; } } @media (prefers-reduced-motion: reduce) { .glass-reveal { scale: none; translate: none; filter: blur(0); transition-property: opacity, display, overlay; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } .glass-reveal[data-state="closed"] { scale: none; translate: none; filter: blur(0); animation-name: glass-reveal-out-reduced; } }

package/dist/styles/glass/squircle.css

@@ -1 +1 @@
-@layer components { @supports (corner-shape: superellipse(2)) { .glass-floating.rounded-dialog { corner-shape: var(--corner-shape-dialog); } .glass-floating.sheet-animate { corner-shape: var(--corner-shape-sheet); } .configurator { corner-shape: var(--corner-shape-panel); } } }
+@layer components { @supports (corner-shape: superellipse(2)) { .glass-floating.sheet-animate { corner-shape: var(--corner-shape-sheet); } .configurator { corner-shape: var(--corner-shape-panel); } } }

package/dist/styles/glass/surface-axis.css

@@ -1 +1 @@
-@layer components { [data-surface="veil"] { --veil-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --veil-blur: var(--glass-blur-quiet); --veil-border: none; --veil-shadow: none; --veil-feather: none; background: var(--veil-bg); -webkit-backdrop-filter: var(--veil-blur); backdrop-filter: var(--veil-blur); -webkit-backdrop-filter: var(--veil-blur); border: var(--veil-border); box-shadow: var(--veil-shadow); mask-image: var(--veil-feather); } [data-surface="opaque"] { --glass-level: 0; --glass-tint-strength: 0%; background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .paper-ink-mark { --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .glass-well { --glass-well-tone: 8%; background: color-mix( in oklab, var(--card), var(--foreground) var(--glass-well-tone) ); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent); border-radius: var(--radius-md); } }
+@layer components { [data-grain="false"]::after { display: none; } [data-surface="veil"] { --veil-alpha: 44.3%; --veil-brightness: 1.02; --veil-color: color-mix( in oklab, var(--card), var(--glass-tint-source) var(--glass-tint-strength) ); --veil-bg: color-mix( in srgb, var(--veil-color) var(--veil-alpha), transparent ); --veil-clarity: blur( calc(var(--glass-blur-quiet-radius) * var(--glass-level)) ) saturate(var(--glass-saturate-quiet)) brightness(var(--veil-brightness)); --veil-border: none; --veil-shadow: none; --veil-feather: none; background: var(--veil-bg); -webkit-backdrop-filter: var(--veil-clarity); backdrop-filter: var(--veil-clarity); border: var(--veil-border); box-shadow: var(--veil-shadow); mask-image: var(--veil-feather); } :where(.dark) [data-surface="veil"] { --veil-alpha: 56%; --veil-brightness: 1.16; } [data-surface="opaque"] { --glass-level: 0; --glass-tint-strength: 0%; background: color-mix(in srgb, var(--card), transparent 0%); -webkit-backdrop-filter: none; backdrop-filter: none; } .paper-ink-mark { --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .glass-well { --glass-well-tone: 8%; background: color-mix( in oklab, var(--card), var(--foreground) var(--glass-well-tone) ); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent); border-radius: var(--radius-md); } }

package/dist/styles/glass/surfaces-pager.css

@@ -1 +1 @@
-@layer components { .glass-pager-ring { display: inline-flex; align-items: center; gap: 0.375rem; padding-inline: 0.625rem; padding-block: 0.3125rem; border-radius: var(--radius-pill); background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .dark .glass-pager-ring { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } @media (prefers-reduced-transparency: no-preference) { .glass-chromatic { box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim); } } }
+@layer components { .glass-pager-ring { display: inline-flex; align-items: center; gap: 0.375rem; padding-inline: 0.625rem; padding-block: 0.3125rem; border-radius: var(--radius-pill); background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-floating)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-floating)); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .dark .glass-pager-ring { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } @media (prefers-reduced-transparency: no-preference) { .glass-chromatic { box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim); } } }

package/dist/styles/glass/surfaces.css

@@ -1 +1 @@
-@utility glass-fill { --glass-fill: color-mix( in oklab, var(--glass-fill-rung, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); background: var(--glass-fill); } @property --glass-blur-engage-t { syntax: "<number>"; inherits: false; initial-value: 0; } :root { --glass-blur-engage-knee: 0.35; } @layer components { .glass-card { --card-focus-shadow: var(--shadow-card); --card-focus-border: var(--glass-border-quiet); position: relative; --glass-fill-rung: var(--glass-bg-quiet); @apply glass-fill; -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); --glass-border-rung: var(--card-focus-border); border: 1px solid var(--glass-border-accent); border-radius: var(--radius-card); box-shadow: var(--glass-material-rim), var(--card-focus-shadow); transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .glass-card:has(:focus-visible) { --card-focus-shadow: var(--shadow-md); --card-focus-border: var(--glass-border-floating); } .glass-btn { @apply flex items-center justify-center cursor-pointer; scale: 1; width: var(--size-icon-btn); height: var(--size-icon-btn); border-radius: var(--radius-pill); border: 1.5px solid var(--glass-border-wash); background: var(--glass-bg-wash); -webkit-backdrop-filter: var(--glass-blur-wash); backdrop-filter: var(--glass-blur-wash); color: var(--muted-foreground); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--spring-smooth); } .glass-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--background) 85%, transparent); border-color: var(--surface-tint-22); color: var(--foreground); scale: var(--scale-hover); } .glass-btn:active:not(:disabled) { scale: var(--scale-press); } .glass-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .glass-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .glass-btn.is-active, .glass-btn[aria-pressed="true"] { background: var(--surface-tint-10); border-color: var(--surface-tint-25); color: var(--foreground); } .btn-pill { @apply inline-flex items-center justify-center cursor-pointer font-medium border-none; scale: 1; gap: calc(0.375rem * var(--ui-scale)); border-radius: var(--radius-pill); padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale)); font-size: var(--control-text); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--spring-smooth); } .btn-pill > * { @apply flex-shrink-0; } .btn-pill:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; } .btn-glass { -webkit-backdrop-filter: var(--glass-blur-btn); backdrop-filter: var(--glass-blur-btn); --glass-btn-rim: var(--glass-edge-light); --glass-btn-under-shadow: var(--glass-under-shadow-quiet); --glass-btn-under-shadow-hover: var(--glass-under-shadow-default); box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow); --glass-specular-intensity-hover: var(--glass-specular-btn-hover); } .btn-glass.glass-deep { --glass-blur-btn: var(--glass-blur-deep); } .btn-glass:hover:not(:disabled, [data-disabled]) { box-shadow: var(--glass-btn-rim), var(--glass-btn-under-shadow-hover); } .btn-glass:active::before { --specular-intensity: calc( var(--glass-specular-intensity-hover) + (var(--glass-specular-intensity-active) - var(--glass-specular-intensity-hover)) * var(--glass-btn-press-t) ); } :where(.btn-glass, .segmented-indicator, .glass-capsule) { --glass-bg-floating-tinted: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); } .btn-glass { --glass-bg-quiet-tinted: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); } .btn-glass.glass-lens { --glass-btn-press-t: 0; } }
+@utility glass-fill { --glass-fill: color-mix( in oklab, var(--glass-fill-rung, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); background: var(--glass-fill); } @layer components { .glass-card { --card-focus-shadow: var(--shadow-card); --card-focus-border: var(--glass-border-quiet); position: relative; --glass-fill-rung: var(--glass-bg-quiet); @apply glass-fill; -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-quiet)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--glass-blur-quiet)); --glass-border-rung: var(--card-focus-border); border: 1px solid var(--glass-border-accent); border-radius: var(--radius-card); box-shadow: var(--glass-material-rim), var(--card-focus-shadow); transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .glass-card:has(:focus-visible) { --card-focus-shadow: var(--shadow-md); --card-focus-border: var(--glass-border-floating); } :where(.segmented-indicator, .glass-capsule) { --glass-bg-floating-tinted: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); } }

package/dist/styles/glass-refract.css

@@ -1 +1 @@
-@layer components { .glass-lens { --glass-refract-bevel: 14%; --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27glass-refract%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253ClinearGradient id=%2522hx%2522 x1=%25220%2522 y1=%25220%2522 x2=%2522100%2525%2522 y2=%25220%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(255,0,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253ClinearGradient id=%2522vy%2522 x1=%25220%2522 y1=%25220%2522 x2=%25220%2522 y2=%2522100%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(0,255,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522black%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523hx)%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523vy)%2522 style=%2522mix-blend-mode:screen%2522/%253E%253C/svg%253E%27 result=%27map%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27map%27 scale=%2728%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27disp%27/%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E%27 result=%27spec%27/%3E%3CfeBlend in=%27disp%27 in2=%27spec%27 mode=%27screen%27/%3E%3C/filter%3E%3C/svg%3E%23glass-refract"); } @supports (backdrop-filter: url("#glass-refract")) { .glass-material.glass-lens, .glass-lens { -webkit-backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter); backdrop-filter: var(--glass-blur-resting) var(--glass-refract-filter); } } }
+@layer components { .glass-lens { --glass-refract-filter: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27glass-refract%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253ClinearGradient id=%2522hx%2522 x1=%25220%2522 y1=%25220%2522 x2=%2522100%2525%2522 y2=%25220%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(255,0,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(128,0,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253ClinearGradient id=%2522vy%2522 x1=%25220%2522 y1=%25220%2522 x2=%25220%2522 y2=%2522100%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgb(0,255,0)%2522/%253E%253Cstop offset=%252214%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%252286%2525%2522 stop-color=%2522rgb(0,128,0)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgb(0,0,0)%2522/%253E%253C/linearGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522black%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523hx)%2522/%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523vy)%2522 style=%2522mix-blend-mode:screen%2522/%253E%253C/svg%253E%27 result=%27map%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27map%27 scale=%2728%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27disp%27/%3E%3CfeImage href=%27data:image/svg+xml,%253Csvg xmlns=%2522http://www.w3.org/2000/svg%2522 width=%2522100%2522 height=%2522100%2522%253E%253CradialGradient id=%2522s%2522 cx=%252230%2525%2522 cy=%252225%2525%2522 r=%252260%2525%2522%253E%253Cstop offset=%25220%2525%2522 stop-color=%2522rgba(255,255,255,0.5)%2522/%253E%253Cstop offset=%2522100%2525%2522 stop-color=%2522rgba(255,255,255,0)%2522/%253E%253C/radialGradient%253E%253Crect width=%2522100%2522 height=%2522100%2522 fill=%2522url(%2523s)%2522/%253E%253C/svg%253E%27 result=%27spec%27/%3E%3CfeBlend in=%27disp%27 in2=%27spec%27 mode=%27screen%27/%3E%3C/filter%3E%3C/svg%3E%23glass-refract"); } @supports (backdrop-filter: url("#glass-refract")) { .glass-material.glass-lens, .glass-lens { -webkit-backdrop-filter: var( --glass-cell-backdrop-filter, var(--glass-blur-resting) var(--glass-refract-filter) ); backdrop-filter: var( --glass-cell-backdrop-filter, var(--glass-blur-resting) var(--glass-refract-filter) ); } } }

package/dist/styles/glass.css

@@ -1 +1 @@
-@import "./glass/material.css"; @import "./glass/ladder.css"; @import "./glass/ladder-undershadow.css"; @import "./glass/grain-overlay.css"; @import "./glass/accent-tone.css"; @import "./glass/rim.css"; @import "./glass/surfaces.css"; @import "./glass/surfaces-pager.css"; @import "./glass/control-surfaces.css"; @import "./glass/glass-capsule.css"; @import "./glass/liquid-fill.css"; @import "./glass/surface-axis.css"; @import "./glass/material-roles.css"; @import "./glass/reveal.css"; @import "./glass/liquid-enter.css"; @import "./glass/deep.css"; @import "./glass/defined.css"; @import "./glass/progress-rail.css"; @import "./glass/squircle.css";
+@import "./glass/material.css"; @import "./glass/ladder.css"; @import "./glass/ladder-undershadow.css"; @import "./glass/grain-overlay.css"; @import "./glass/accent-tone.css"; @import "./glass/rim.css"; @import "./glass/surfaces.css"; @import "./glass/surfaces-pager.css"; @import "./glass/control-surfaces.css"; @import "./glass/glass-capsule.css"; @import "./glass/liquid-fill.css"; @import "./glass/surface-axis.css"; @import "./glass/material-roles.css"; @import "./glass/reveal.css"; @import "./glass/liquid-enter.css"; @import "./glass/deep.css"; @import "./glass/defined.css"; @import "./glass/squircle.css";

package/dist/styles/index.css

@@ -1 +1 @@
-@import "./tokens.css"; @import "./typography.css"; @import "./theme.css"; @import "./glass.css"; @import "./glass-specular-track.css"; @import "./glass-refract.css"; @import "./paper.css"; @import "../components/dock/styles/index.css"; @import "../components/dock/styles/controls.css"; @import "../components/card/styles.css"; @import "../components/_shared/feedback-tone.css"; @import "./transitions.css"; @import "./animations.css"; @import "./viz-reveal.css"; @import "./scroll-driven.css"; @import "./scroll-choreography.css"; @import "../components/card/card-scroll.css"; @import "./scroll-chrome.css"; @import "./view-transition.css"; @import "./utilities.css"; @import "../components/_shared/menu.css"; @import "../components/configurator/styles.css"; @import "../components/instrument-chassis/styles.css"; @import "../components/drawer/styles.css"; @import "../components/tabs/styles/segmented.css"; @import "../components/tabs/styles/drag.css"; @import "../components/_shared/field-surfaces.css"; @import "../components/dialog/placement.css"; @import "../components/icon-chip/styles.css"; @import "../components/scroll-progress-rim/styles.css"; @import "../components/completion-seal/styles.css"; @import "./draw-in.css"; @import "../glass-ui.css"; @import "./components.css" layer(components); @import "./accessibility.css"; @source "../*.js";
+@layer theme, base, components, utilities; @import "./tokens.css"; @import "./typography.css"; @import "./theme.css"; @import "./glass.css"; @import "./glass-specular-track.css"; @import "./glass-refract.css"; @import "./paper.css"; @import "../components/dark-mode-toggle/dark-mode-toggle.css"; @import "../components/header-ribbon/styles.css"; @import "../components/dock/styles/index.css"; @import "../components/dock/styles/controls.css"; @import "../components/card/styles.css"; @import "../components/_shared/feedback-tone.css"; @import "./transitions.css"; @import "./animations.css"; @import "./viz-reveal.css"; @import "./scroll-driven.css"; @import "./scroll-choreography.css"; @import "../components/card/card-scroll.css"; @import "./scroll-chrome.css"; @import "./view-transition.css"; @import "./utilities.css"; @import "../components/_shared/menu.css"; @import "../components/button/styles.css"; @import "../components/configurator/styles.css"; @import "../components/instrument-chassis/styles.css"; @import "../components/drawer/styles.css"; @import "../components/tabs/styles/segmented.css"; @import "../components/tabs/styles/drag.css"; @import "../components/_shared/field-surfaces.css"; @import "../components/dialog/placement.css"; @import "../components/metric/styles.css"; @import "../components/scroll-progress-rim/styles.css"; @import "../components/completion-seal/styles.css"; @import "./draw-in.css"; @import "../glass-ui.css"; @import "./components.css" layer(components); @import "./accessibility.css"; @source "../*.js";

package/dist/styles/paper.css

@@ -1 +1 @@
-:root { --paper-grain-tooth: repeating-linear-gradient( 28deg, oklch(0.9 0.045 84 / 0.5) 0, oklch(0.62 0.052 60 / 0.5) 1.4px, oklch(0.9 0.045 84 / 0.5) 2.8px ), repeating-linear-gradient( -64deg, oklch(0.88 0.04 82 / 0.38) 0, oklch(0.6 0.05 58 / 0.38) 1.75px, oklch(0.88 0.04 82 / 0.38) 3.5px ), repeating-linear-gradient( 10deg, oklch(0.85 0.05 78 / 0.28) 0, oklch(0.7 0.055 66 / 0.28) 3.5px, oklch(0.85 0.05 78 / 0.28) 7px ); --paper-grain-tile: 140px; --paper-grain-relief: none; } @supports (backdrop-filter: blur(1px)) { :root { --paper-grain-relief: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.31 0.96'/%3E%3CfeFuncG type='table' tableValues='0.25 0.9'/%3E%3CfeFuncB type='table' tableValues='0.15 0.78'/%3E%3CfeFuncA type='linear' slope='0.42' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } } @utility paper-underpaint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } :where(.dark) .paper-underpaint, .dark .paper-underpaint { mix-blend-mode: screen; } @utility paper-grain-overlay { position: relative; isolation: isolate; &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } } :where(.dark) .paper-grain-overlay::after, .dark .paper-grain-overlay::after { mix-blend-mode: screen; } @media (prefers-reduced-transparency: reduce) { .paper-underpaint, .paper-grain-overlay::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .paper-underpaint { animation: none !important; } }
+:root { --paper-grain-tooth: repeating-linear-gradient( 28deg, oklch(0.9 0.045 84 / 0.5) 0, oklch(0.62 0.052 60 / 0.5) 1.4px, oklch(0.9 0.045 84 / 0.5) 2.8px ), repeating-linear-gradient( -64deg, oklch(0.88 0.04 82 / 0.38) 0, oklch(0.6 0.05 58 / 0.38) 1.75px, oklch(0.88 0.04 82 / 0.38) 3.5px ), repeating-linear-gradient( 10deg, oklch(0.85 0.05 78 / 0.28) 0, oklch(0.7 0.055 66 / 0.28) 3.5px, oklch(0.85 0.05 78 / 0.28) 7px ); --paper-grain-tile: 140px; --paper-grain-relief: none; } @supports (backdrop-filter: blur(1px)) { :root { --paper-grain-relief: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.31 0.96'/%3E%3CfeFuncG type='table' tableValues='0.25 0.9'/%3E%3CfeFuncB type='table' tableValues='0.15 0.78'/%3E%3CfeFuncA type='linear' slope='0.42' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } } @utility paper-underpaint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } :where(.dark) .paper-underpaint, .dark .paper-underpaint { mix-blend-mode: screen; } @utility paper-grain-overlay { position: relative; isolation: isolate; &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } } :where(.dark) .paper-grain-overlay::after, .dark .paper-grain-overlay::after { mix-blend-mode: screen; } @media (prefers-reduced-transparency: reduce) { .paper-underpaint, .paper-grain-overlay::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .paper-underpaint { animation: none !important; } } @media print { .paper-underpaint, .paper-grain-overlay::after { display: none; } }

package/dist/styles/scroll-driven.css

@@ -1 +1 @@
-.scroll-progress { transform-origin: 0 50%; transform: scaleX(0); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { @keyframes gl-scroll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .scroll-progress { animation: gl-scroll-grow auto linear; animation-timeline: var(--scroll-progress-timeline, scroll(nearest block)); } } } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes gl-reveal-in { from { opacity: 0; transform: translateY(var(--scroll-reveal-rise, 6px)); } } [data-scroll-reveal] > * { animation: gl-reveal-in auto linear both; animation-timeline: view(block); animation-range: entry 0% entry var(--scroll-reveal-range-end, 60%); } [data-scroll-reveal].scroll-reveal--inline > * { animation-timeline: view(inline); } } } @media (prefers-reduced-motion: no-preference) { @keyframes gl-reveal-once { from { opacity: 0; transform: translateY(var(--scroll-reveal-rise, 6px)); } to { opacity: 1; transform: none; } } [data-scroll-reveal-once] > * { opacity: 0; } [data-scroll-reveal-once] > *[data-revealed] { animation: gl-reveal-once var(--spring-gentle-duration) linear both; } }
+.scroll-progress { transform-origin: 0 50%; transform: scaleX(0); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { @keyframes gl-scroll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .scroll-progress { animation: gl-scroll-grow auto linear; animation-timeline: var(--scroll-progress-timeline, scroll(nearest block)); } } } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes gl-reveal-in { from { opacity: 0; transform: translateY(var(--scroll-reveal-rise, 6px)); } } [data-scroll-reveal] > * { animation: gl-reveal-in auto linear both; animation-timeline: view(block); animation-range: entry 0% entry var(--scroll-reveal-range-end, 60%); } [data-scroll-reveal].scroll-reveal--inline > * { animation-timeline: view(inline); } } }

package/dist/styles/theme/bridges.css

@@ -1 +1 @@
-@theme inline { --text-admin-label: var(--type-admin-label); --text-micro: var(--type-micro); --text-caption: var(--type-caption); --text-small: var(--type-small); --text-body: var(--type-body); --text-prose: var(--type-prose); --text-subheading: var(--type-subheading); --text-heading: var(--type-heading); --text-title: var(--type-title); --text-dropdown: var(--dropdown-text); --text-dropdown-secondary: var(--dropdown-text-secondary); --text-display: var(--type-display-1); --text-display-1: var(--type-display-1); --text-display-2: var(--type-display-2); --text-display-3: var(--type-display-3); --text-display-4: var(--type-display-4); --text-display-5: var(--type-display-5); --leading-micro: var(--type-leading-micro); --leading-caption: var(--type-leading-caption); --leading-small: var(--type-leading-small); --leading-body: var(--type-leading-body); --leading-prose: var(--type-leading-prose); --leading-heading: var(--type-leading-heading); --leading-display: var(--type-leading-display); --tracking-tight: var(--type-tracking-tight); --tracking-display: var(--type-tracking-display); --tracking-snug: var(--type-tracking-snug); --tracking-normal: var(--type-tracking-normal); --tracking-wide: var(--type-tracking-wide); --tracking-wider: var(--type-tracking-wider); --tracking-caps: var(--type-tracking-caps); --font-text: var(--font-stack-text); --font-display: var(--font-stack-display); --font-serif: var(--font-stack-text); --font-sans: var(--font-stack-sans); --font-mono: var(--font-stack-mono); --color-border: var(--border); --color-border-soft: var(--border-soft); --color-input: var(--input); --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-muted-foreground-strong: var(--muted-foreground-strong); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-surface-public-data-panel: var(--surface-public-data-panel); --color-shadow: var(--shadow); --color-success-foreground: var(--success-foreground); --color-warning-foreground: var(--warning-foreground); --color-info-foreground: var(--info-foreground); --color-muted-soft: var(--muted-soft); --color-muted-medium: var(--muted-medium); --color-glass-quiet: var(--glass-bg-quiet); --color-glass-border-quiet: var(--glass-border-quiet); --color-surface-tint-4: var(--surface-tint-4); --color-surface-tint-6: var(--surface-tint-6); --color-surface-tint-8: var(--surface-tint-8); --color-surface-tint-10: var(--surface-tint-10); --color-surface-tint-12: var(--surface-tint-12); --color-surface-tint-15: var(--surface-tint-15); --color-surface-tint-18: var(--surface-tint-18); --color-surface-tint-22: var(--surface-tint-22); --color-surface-tint-25: var(--surface-tint-25); --color-surface-tint-35: var(--surface-tint-35); --color-surface-tint-40: var(--surface-tint-40); --color-surface-tint-70: var(--surface-tint-70); --color-surface-tint-quiet: var(--surface-tint-6); --color-surface-tint-floating: var(--surface-tint-12); --color-surface-tint-modal: var(--surface-tint-18); --color-overlay-scrim: var(--overlay-scrim); --color-overlay-scrim-strong: var(--overlay-scrim-strong); --color-overlay-scrim-subtle: var(--overlay-scrim-subtle); --color-section-0: var(--section-color-0); --color-section-1: var(--section-color-1); --color-section-2: var(--section-color-2); --color-section-3: var(--section-color-3); --color-section-4: var(--section-color-4); --color-section-5: var(--section-color-5); --color-section-6: var(--section-color-6); --color-section-7: var(--section-color-7); --color-section-8: var(--section-color-8); --color-section-9: var(--section-color-9); --color-section-10: var(--section-color-10); --color-section-11: var(--section-color-11); --color-section-12: var(--section-color-12); --color-section-heading: var(--section-heading); --color-accent-pink: var(--accent-pink); --color-accent-red: var(--accent-red); --color-viz-fourier: var(--viz-fourier); --color-viz-chebyshev: var(--viz-chebyshev); --color-viz-legendre: var(--viz-legendre); --color-viz-amber: var(--viz-amber); --color-viz-green: var(--viz-green); --color-tier-featured: var(--tier-featured); --color-tier-saved: var(--tier-saved); --color-like: var(--like); --color-success: var(--success); --color-warning: var(--warning); --color-info: var(--info); --color-delete: var(--delete); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --color-rainbow-red: var(--rainbow-red); --color-rainbow-orange: var(--rainbow-orange); --color-rainbow-yellow: var(--rainbow-yellow); --color-rainbow-green: var(--rainbow-green); --color-rainbow-blue: var(--rainbow-blue); --color-rainbow-indigo: var(--rainbow-indigo); --color-rainbow-violet: var(--rainbow-violet); --z-index-behind: var(--z-behind); --z-index-background: var(--z-background); --z-index-content: var(--z-content); --z-index-controls: var(--z-controls); --z-index-bar: var(--z-bar); --z-index-header: var(--z-header); --z-index-dock: var(--z-dock); --z-index-panel: var(--z-panel); --z-index-overlay: var(--z-overlay); --z-index-hovercard: var(--z-hovercard); --z-index-tooltip: var(--z-tooltip); --z-index-popover: var(--z-popover); --z-index-modal: var(--z-modal); --z-index-fullscreen: var(--z-fullscreen); --z-index-toast: var(--z-toast); --z-index-toggle: var(--z-toggle); --z-index-max: var(--z-max); --height-chart-compact: var(--chart-height-compact); --height-chart-default: var(--chart-height-default); --height-chart-large: var(--chart-height-large); --min-width-input-sm: var(--input-min-width-sm); --spacing-chart-margin: var(--chart-margin); --width-popover: var(--popover-width); --spacing-phi-5: var(--space-phi-5); --spacing-phi-6: var(--space-phi-6); --spacing-icon-xs: var(--icon-xs); --spacing-icon-sm: var(--icon-sm); --spacing-icon-md: var(--icon-md); --spacing-icon-lg: var(--icon-lg); --spacing-icon-xl: var(--icon-xl); --spacing-icon-2xl: var(--icon-2xl); --spacing-icon-3xl: var(--icon-3xl); --spacing-icon-hero: var(--icon-hero); --shadow-cartoon: var(--cartoon-shadow); --shadow-cartoon-hover: var(--cartoon-shadow-hover); --shadow-soft: var(--soft-shadow); --shadow-elevated: var(--elevated-shadow); --shadow-modal: var(--modal-shadow); --shadow-card: var(--card-shadow); --shadow-dock: var(--dock-shadow); --shadow-dock-collapsed: var(--dock-shadow-collapsed); --shadow-glass-wash: var(--glass-shadow-wash); --shadow-glass-quiet: var(--glass-shadow-quiet); --shadow-glass-resting: var(--glass-shadow-resting); --shadow-glass-floating: var(--glass-shadow-floating); --shadow-glass-overlay: var(--glass-shadow-overlay); --shadow-cartoon-sm: var(--cartoon-shadow-sm); --shadow-cartoon-md: var(--cartoon-shadow-md); --shadow-cartoon-lg: var(--cartoon-shadow-lg); --shadow-focus-ring: var(--focus-ring-shadow); --blur-glass-wash: var(--glass-blur-wash-radius); --blur-glass-quiet: var(--glass-blur-quiet-radius); --blur-glass-resting: var(--glass-blur-resting-radius); --blur-glass-floating: var(--glass-blur-floating-radius); --blur-glass-overlay: var(--glass-blur-overlay-radius); --ease-spring-smooth: var(--spring-smooth); --ease-spring-snappy: var(--spring-snappy); --ease-spring-bouncy: var(--spring-bouncy); --ease-spring-gentle: var(--spring-gentle); --ease-spring-press: var(--spring-press); --ease-standard: var(--motion-ease-standard); --ease-out: var(--motion-ease-out); --ease-in: var(--motion-ease-in); --ease-out-expo: var(--motion-ease-out-expo); --ease-apple: var(--motion-ease-apple); --ease-spring: var(--spring-snappy); --ease-decelerate: var(--motion-ease-out); --ease-accelerate: var(--motion-ease-in); --transition-duration-instant: var(--duration-instant); --transition-duration-fast: var(--duration-fast); --transition-duration-normal: var(--duration-normal); --transition-duration-slow: var(--duration-slow); --transition-duration-panel: var(--duration-panel); --transition-duration-xl: var(--duration-xl); --transition-duration-xxl: var(--duration-xxl); --transition-duration-control: var(--duration-control); }
+@theme inline { --text-admin-label: var(--type-admin-label); --text-micro: var(--type-micro); --text-caption: var(--type-caption); --text-small: var(--type-small); --text-body: var(--type-body); --text-prose: var(--type-prose); --text-subheading: var(--type-subheading); --text-heading: var(--type-heading); --text-title: var(--type-title); --text-dropdown: var(--dropdown-text); --text-dropdown-secondary: var(--dropdown-text-secondary); --text-display: var(--type-display-1); --text-display-1: var(--type-display-1); --text-display-2: var(--type-display-2); --text-display-3: var(--type-display-3); --text-display-4: var(--type-display-4); --text-display-5: var(--type-display-5); --leading-micro: var(--type-leading-micro); --leading-caption: var(--type-leading-caption); --leading-small: var(--type-leading-small); --leading-body: var(--type-leading-body); --leading-prose: var(--type-leading-prose); --leading-heading: var(--type-leading-heading); --leading-display: var(--type-leading-display); --tracking-tight: var(--type-tracking-tight); --tracking-display: var(--type-tracking-display); --tracking-snug: var(--type-tracking-snug); --tracking-normal: var(--type-tracking-normal); --tracking-wide: var(--type-tracking-wide); --tracking-wider: var(--type-tracking-wider); --tracking-caps: var(--type-tracking-caps); --font-text: var(--font-stack-text); --font-display: var(--font-stack-display); --font-serif: var(--font-stack-text); --font-sans: var(--font-stack-sans); --font-mono: var(--font-stack-mono); --color-border: var(--border); --color-border-soft: var(--border-soft); --color-input: var(--input); --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-muted-foreground-strong: var(--muted-foreground-strong); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-surface-public-data-panel: var(--surface-public-data-panel); --color-shadow: var(--shadow); --color-success-foreground: var(--success-foreground); --color-warning-foreground: var(--warning-foreground); --color-info-foreground: var(--info-foreground); --color-muted-soft: var(--muted-soft); --color-muted-medium: var(--muted-medium); --color-glass-quiet: var(--glass-bg-quiet); --color-glass-border-quiet: var(--glass-border-quiet); --color-surface-tint-4: var(--surface-tint-4); --color-surface-tint-6: var(--surface-tint-6); --color-surface-tint-8: var(--surface-tint-8); --color-surface-tint-10: var(--surface-tint-10); --color-surface-tint-12: var(--surface-tint-12); --color-surface-tint-15: var(--surface-tint-15); --color-surface-tint-18: var(--surface-tint-18); --color-surface-tint-22: var(--surface-tint-22); --color-surface-tint-25: var(--surface-tint-25); --color-surface-tint-35: var(--surface-tint-35); --color-surface-tint-40: var(--surface-tint-40); --color-surface-tint-70: var(--surface-tint-70); --color-surface-tint-quiet: var(--surface-tint-6); --color-surface-tint-floating: var(--surface-tint-12); --color-surface-tint-modal: var(--surface-tint-18); --color-overlay-scrim: var(--overlay-scrim); --color-overlay-scrim-strong: var(--overlay-scrim-strong); --color-overlay-scrim-subtle: var(--overlay-scrim-subtle); --color-section-0: var(--section-color-0); --color-section-1: var(--section-color-1); --color-section-2: var(--section-color-2); --color-section-3: var(--section-color-3); --color-section-4: var(--section-color-4); --color-section-5: var(--section-color-5); --color-section-6: var(--section-color-6); --color-section-7: var(--section-color-7); --color-section-8: var(--section-color-8); --color-section-9: var(--section-color-9); --color-section-10: var(--section-color-10); --color-section-11: var(--section-color-11); --color-section-12: var(--section-color-12); --color-section-heading: var(--section-heading); --color-accent-pink: var(--accent-pink); --color-accent-red: var(--accent-red); --color-viz-fourier: var(--viz-fourier); --color-viz-chebyshev: var(--viz-chebyshev); --color-viz-legendre: var(--viz-legendre); --color-viz-amber: var(--viz-amber); --color-viz-green: var(--viz-green); --color-tier-featured: var(--tier-featured); --color-tier-saved: var(--tier-saved); --color-like: var(--like); --color-success: var(--success); --color-warning: var(--warning); --color-info: var(--info); --color-delete: var(--delete); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --color-rainbow-red: var(--rainbow-red); --color-rainbow-orange: var(--rainbow-orange); --color-rainbow-yellow: var(--rainbow-yellow); --color-rainbow-green: var(--rainbow-green); --color-rainbow-blue: var(--rainbow-blue); --color-rainbow-indigo: var(--rainbow-indigo); --color-rainbow-violet: var(--rainbow-violet); --z-index-behind: var(--z-behind); --z-index-background: var(--z-background); --z-index-content: var(--z-content); --z-index-controls: var(--z-controls); --z-index-bar: var(--z-bar); --z-index-header: var(--z-header); --z-index-dock: var(--z-dock); --z-index-panel: var(--z-panel); --z-index-overlay: var(--z-overlay); --z-index-hovercard: var(--z-hovercard); --z-index-tooltip: var(--z-tooltip); --z-index-popover: var(--z-popover); --z-index-modal: var(--z-modal); --z-index-fullscreen: var(--z-fullscreen); --z-index-toast: var(--z-toast); --z-index-toggle: var(--z-toggle); --z-index-max: var(--z-max); --height-chart-compact: var(--chart-height-compact); --height-chart-default: var(--chart-height-default); --height-chart-large: var(--chart-height-large); --min-width-input-sm: var(--input-min-width-sm); --spacing-chart-margin: var(--chart-margin); --width-popover: var(--popover-width); --spacing-phi-5: var(--space-phi-5); --spacing-phi-6: var(--space-phi-6); --spacing-icon-xs: var(--icon-xs); --spacing-icon-sm: var(--icon-sm); --spacing-icon-md: var(--icon-md); --spacing-icon-lg: var(--icon-lg); --spacing-icon-xl: var(--icon-xl); --spacing-icon-2xl: var(--icon-2xl); --spacing-icon-3xl: var(--icon-3xl); --spacing-icon-hero: var(--icon-hero); --shadow-glass-wash: var(--glass-shadow-wash); --shadow-glass-quiet: var(--glass-shadow-quiet); --shadow-glass-resting: var(--glass-shadow-resting); --shadow-glass-floating: var(--glass-shadow-floating); --shadow-glass-overlay: var(--glass-shadow-overlay); --shadow-focus-ring: var(--focus-ring-shadow); --blur-glass-wash: var(--glass-blur-wash-radius); --blur-glass-quiet: var(--glass-blur-quiet-radius); --blur-glass-resting: var(--glass-blur-resting-radius); --blur-glass-floating: var(--glass-blur-floating-radius); --blur-glass-overlay: var(--glass-blur-overlay-radius); --ease-spring-smooth: var(--spring-smooth); --ease-spring-snappy: var(--spring-snappy); --ease-spring-bouncy: var(--spring-bouncy); --ease-spring-gentle: var(--spring-gentle); --ease-spring-press: var(--spring-press); --ease-standard: var(--motion-ease-standard); --ease-out: var(--motion-ease-out); --ease-in: var(--motion-ease-in); --ease-out-expo: var(--motion-ease-out-expo); --ease-apple: var(--motion-ease-apple); --ease-spring: var(--spring-snappy); --ease-decelerate: var(--motion-ease-out); --ease-accelerate: var(--motion-ease-in); --transition-duration-instant: var(--duration-instant); --transition-duration-fast: var(--duration-fast); --transition-duration-normal: var(--duration-normal); --transition-duration-slow: var(--duration-slow); --transition-duration-panel: var(--duration-panel); --transition-duration-xl: var(--duration-xl); --transition-duration-xxl: var(--duration-xxl); --transition-duration-control: var(--duration-control); }

package/dist/styles/theme/radius.css

@@ -1 +1 @@
-@theme { --radius: 0.625rem; --radius-xs: 4px; --radius-sm: 4px; --radius-md: 6px; --radius-xl: 12px; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-pill: 9999px; --radius-lg: var(--radius); --radius-card: var(--radius-2xl); --radius-panel: var(--radius-xl); --radius-dialog: var(--radius-2xl); --radius-input: var(--radius); --radius-button: var(--radius); --radius-field: var(--radius-2xl); --radius-strip: 0.75rem; --radius-control: var(--radius-pill); --radius-badge: var(--radius-pill); --radius-dock: var(--radius-pill); --radius-tab: var(--radius-pill); --radius-dock-card: var(--radius-3xl); --radius-tooltip: var(--radius-lg); --radius-floor: var(--radius-xs); --radius-ctx: var(--radius-card); --radius-inset: 0px; --corner-k-squircle: 2; --corner-k-soft: 1.7; --corner-k-sharp: 2.4; --corner-shape-bigdock: superellipse(var(--corner-k-squircle)); --corner-shape-dialog: superellipse(var(--corner-k-squircle)); --corner-shape-sheet: superellipse(var(--corner-k-squircle)); --corner-shape-panel: superellipse(var(--corner-k-squircle)); --corner-shape-thumb: superellipse(var(--corner-k-squircle)); }
+@theme { --radius: 0.625rem; --radius-xs: 4px; --radius-sm: 4px; --radius-md: 6px; --radius-xl: 12px; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-pill: 9999px; --radius-lg: var(--radius); --radius-card: var(--radius-2xl); --radius-panel: var(--radius-xl); --radius-dialog: var(--radius-card); --radius-input: var(--radius); --radius-button: var(--radius); --radius-field: var(--radius-2xl); --radius-strip: 0.75rem; --radius-control: var(--radius-pill); --radius-badge: var(--radius-pill); --radius-dock: var(--radius-pill); --radius-tab: var(--radius-pill); --radius-dock-card: var(--radius-3xl); --radius-tooltip: var(--radius-lg); --radius-floor: var(--radius-xs); --radius-ctx: var(--radius-card); --radius-inset: 0px; --corner-k-squircle: 2; --corner-k-soft: 1.7; --corner-k-sharp: 2.4; --corner-shape-bigdock: superellipse(var(--corner-k-squircle)); --corner-shape-sheet: superellipse(var(--corner-k-squircle)); --corner-shape-panel: superellipse(var(--corner-k-squircle)); --corner-shape-thumb: superellipse(var(--corner-k-squircle)); }

package/dist/styles/tokens/color-radius.css

@@ -1 +1 @@
-:root { --neutral-0: hsl(40 30% 98%); --neutral-1: hsl(38 26% 95%); --neutral-2: hsl(34 28% 90%); --neutral-3: hsl(33 30% 82%); --neutral-4: hsl(32 26% 70%); --neutral-5: hsl(30 22% 40%); --neutral-6: hsl(28 24% 30%); --background: var(--neutral-0); --foreground: hsl(24 10% 10%); --card: hsl(30 85% 96%); --card-foreground: var(--foreground); --popover: var(--card); --popover-foreground: var(--foreground); --surface-public-data-panel: hsl(44 16% 96%); --muted: var(--neutral-1); --muted-foreground: var(--neutral-5); --muted-foreground-strong: var(--neutral-6); --secondary: var(--neutral-2); --secondary-foreground: var(--foreground); --accent: var(--neutral-3); --accent-foreground: var(--foreground); --border: var(--neutral-4); --input: var(--neutral-4); --primary: hsl(24 10% 10%); --primary-foreground: var(--neutral-0); --destructive: hsl(0 72% 50%); --destructive-foreground: var(--neutral-0); --focus-ring-color: hsl(24 10% 10%); --shadow: hsl(24 10% 10%); --shadow-color: var(--foreground); --accent-ai-ink: oklch(0.55 0.13 75); --accent-color: var(--primary); --border-soft: color-mix(in srgb, var(--border) 45%, transparent); --separator-ink: color-mix(in srgb, var(--foreground) 22%, transparent); --scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 25%, transparent); --scrollbar-track: transparent; --surface-tint-4: color-mix(in srgb, var(--foreground) 4%, transparent); --surface-tint-6: color-mix(in srgb, var(--foreground) 6%, transparent); --surface-tint-8: color-mix(in srgb, var(--foreground) 8%, transparent); --surface-tint-10: color-mix(in srgb, var(--foreground) 10%, transparent); --surface-tint-12: color-mix(in srgb, var(--foreground) 12%, transparent); --surface-tint-15: color-mix(in srgb, var(--foreground) 15%, transparent); --surface-tint-18: color-mix(in srgb, var(--foreground) 18%, transparent); --surface-tint-22: color-mix(in srgb, var(--foreground) 22%, transparent); --surface-tint-25: color-mix(in srgb, var(--foreground) 25%, transparent); --surface-tint-35: color-mix(in srgb, var(--foreground) 35%, transparent); --surface-tint-40: color-mix(in srgb, var(--foreground) 40%, transparent); --surface-tint-70: color-mix(in srgb, var(--foreground) 70%, transparent); --muted-soft: color-mix(in srgb, var(--muted) 30%, transparent); --muted-medium: color-mix(in srgb, var(--muted) 50%, transparent); --constellation-node: hsl(36 8% 46%); --constellation-node-dim: hsl(36 8% 60%); --constellation-line: hsl(24 14% 14%); --constellation-accent: hsl(18 58% 46%); --constellation-edge-alpha: 0.22; --constellation-edge-focus-alpha: 0.34; --constellation-alpha: 0.80; --constellation-edge-floor: 0; --constellation-edge-accent-alpha: 0.30; --constellation-warp-response: 0.55; --constellation-warp-zeta: 1.0; --constellation-well-gain: 19000; --constellation-well-reach: 340; --constellation-well-ramp: 8.0; --constellation-well-max-speed: 4.0; --constellation-well-hold-ms: 140; --constellation-wander-idle: 8000; --constellation-wander-jitter: 8000; --section-color-0: oklch(0.552 0.192 359.8); --section-color-1: oklch(0.502 0.165 305.9); --section-color-2: oklch(0.484 0.163 265.5); --section-color-3: oklch(0.542 0.089 222.8); --section-color-4: oklch(0.551 0.088 171.1); --section-color-5: oklch(0.530 0.124 69.6); --section-color-6: oklch(0.579 0.201 30.4); --section-color-7: oklch(0.532 0.180 317.5); --section-color-8: oklch(0.520 0.176 8.4); --section-color-9: oklch(0.492 0.038 239.6); --section-color-10: oklch(0.556 0.103 128.8); --section-color-11: oklch(0.601 0.092 208.0); --section-color-12: oklch(0.513 0.163 291.9); --accent-pink: oklch(0.613 0.197 353.8); --section-heading: oklch(0.545 0.189 352.8); --accent-red: oklch(0.574 0.216 27.5); --viz-fourier: oklch(0.579 0.201 30.4); --viz-chebyshev: oklch(0.484 0.163 265.5); --viz-legendre: oklch(0.532 0.180 317.5); --viz-amber: var(--section-color-5); --viz-green: var(--section-color-4); --tier-featured: oklch(0.841 0.173 84.2); --tier-saved: oklch(0.676 0.176 252.3); --like: oklch(0.633 0.200 24.9); --success: oklch(0.720 0.192 149.5); --warning: oklch(0.770 0.165 70.6); --info: oklch(0.626 0.186 259.6); --delete: oklch(0.597 0.198 25.5); --success-foreground: var(--neutral-0); --warning-foreground: hsl(24 10% 10%); --info-foreground: var(--neutral-0); }
+:root { --neutral-0: hsl(40 30% 98%); --neutral-1: hsl(38 26% 95%); --neutral-2: hsl(34 28% 90%); --neutral-3: hsl(33 30% 82%); --neutral-4: hsl(32 26% 70%); --neutral-5: hsl(30 22% 40%); --neutral-6: hsl(28 24% 30%); --background: var(--neutral-0); --foreground: hsl(24 10% 10%); --card: hsl(30 85% 96%); --card-foreground: var(--foreground); --popover: var(--card); --popover-foreground: var(--foreground); --surface-public-data-panel: hsl(44 16% 96%); --muted: var(--neutral-1); --muted-foreground: var(--neutral-5); --muted-foreground-strong: var(--neutral-6); --secondary: var(--neutral-2); --secondary-foreground: var(--foreground); --accent: var(--neutral-3); --accent-foreground: var(--foreground); --border: var(--neutral-4); --input: var(--neutral-4); --primary: hsl(24 10% 10%); --primary-foreground: var(--neutral-0); --destructive: hsl(0 72% 50%); --destructive-foreground: var(--neutral-0); --focus-ring-color: hsl(24 10% 10%); --shadow: hsl(24 10% 10%); --shadow-color: var(--foreground); --accent-color: var(--primary); --border-soft: color-mix(in srgb, var(--border) 45%, transparent); --separator-ink: color-mix(in srgb, var(--foreground) 22%, transparent); --scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 25%, transparent); --scrollbar-track: transparent; --surface-tint-4: color-mix(in srgb, var(--foreground) 4%, transparent); --surface-tint-6: color-mix(in srgb, var(--foreground) 6%, transparent); --surface-tint-8: color-mix(in srgb, var(--foreground) 8%, transparent); --surface-tint-10: color-mix(in srgb, var(--foreground) 10%, transparent); --surface-tint-12: color-mix(in srgb, var(--foreground) 12%, transparent); --surface-tint-15: color-mix(in srgb, var(--foreground) 15%, transparent); --surface-tint-18: color-mix(in srgb, var(--foreground) 18%, transparent); --surface-tint-22: color-mix(in srgb, var(--foreground) 22%, transparent); --surface-tint-25: color-mix(in srgb, var(--foreground) 25%, transparent); --surface-tint-35: color-mix(in srgb, var(--foreground) 35%, transparent); --surface-tint-40: color-mix(in srgb, var(--foreground) 40%, transparent); --surface-tint-70: color-mix(in srgb, var(--foreground) 70%, transparent); --muted-soft: color-mix(in srgb, var(--muted) 30%, transparent); --muted-medium: color-mix(in srgb, var(--muted) 50%, transparent); --constellation-node: hsl(36 8% 46%); --constellation-node-dim: hsl(36 8% 60%); --constellation-line: hsl(24 14% 14%); --constellation-accent: hsl(18 58% 46%); --constellation-edge-alpha: 0.22; --constellation-edge-focus-alpha: 0.34; --constellation-alpha: 0.80; --constellation-edge-floor: 0; --constellation-edge-accent-alpha: 0.30; --constellation-warp-response: 0.55; --constellation-warp-zeta: 1.0; --constellation-well-gain: 19000; --constellation-well-reach: 340; --constellation-well-ramp: 8.0; --constellation-well-max-speed: 4.0; --constellation-well-hold-ms: 140; --constellation-wander-idle: 8000; --constellation-wander-jitter: 8000; --section-color-0: oklch(0.552 0.192 359.8); --section-color-1: oklch(0.502 0.165 305.9); --section-color-2: oklch(0.484 0.163 265.5); --section-color-3: oklch(0.542 0.089 222.8); --section-color-4: oklch(0.551 0.088 171.1); --section-color-5: oklch(0.530 0.124 69.6); --section-color-6: oklch(0.579 0.201 30.4); --section-color-7: oklch(0.532 0.180 317.5); --section-color-8: oklch(0.520 0.176 8.4); --section-color-9: oklch(0.492 0.038 239.6); --section-color-10: oklch(0.556 0.103 128.8); --section-color-11: oklch(0.601 0.092 208.0); --section-color-12: oklch(0.513 0.163 291.9); --accent-pink: oklch(0.613 0.197 353.8); --section-heading: oklch(0.545 0.189 352.8); --accent-red: oklch(0.574 0.216 27.5); --viz-fourier: oklch(0.579 0.201 30.4); --viz-chebyshev: oklch(0.484 0.163 265.5); --viz-legendre: oklch(0.532 0.180 317.5); --viz-amber: var(--section-color-5); --viz-green: var(--section-color-4); --tier-featured: oklch(0.841 0.173 84.2); --tier-saved: oklch(0.676 0.176 252.3); --like: oklch(0.633 0.200 24.9); --success: oklch(0.720 0.192 149.5); --warning: oklch(0.770 0.165 70.6); --info: oklch(0.626 0.186 259.6); --delete: oklch(0.597 0.198 25.5); --success-foreground: var(--neutral-0); --warning-foreground: hsl(24 10% 10%); --info-foreground: var(--neutral-0); }

package/dist/styles/tokens/dark-arm.css

@@ -1 +1 @@
-.dark { color-scheme: dark; accent-color: var(--accent-color); --neutral-0: hsl(24 9% 4%); --neutral-1: hsl(28 12% 11%); --neutral-2: hsl(28 14% 16%); --neutral-3: hsl(30 18% 22%); --neutral-4: hsl(30 16% 34%); --neutral-5: hsl(34 14% 62%); --neutral-6: hsl(36 14% 72%); --foreground: hsl(30 14% 90%); --card: hsl(26 22% 17%); --popover: hsl(26 22% 17%); --surface-public-data-panel: hsl(36 9% 18%); --primary: oklch(0.739 0.134 318.1); --primary-foreground: hsl(24 10% 10%); --destructive: hsl(0 80% 60%); --destructive-foreground: hsl(48 10% 90%); --focus-ring-color: hsl(48 10% 70%); --shadow: hsl(0 0% 5%); --accent-ai-ink: oklch(0.80 0.13 75); --section-color-0: oklch(0.721 0.145 354.0); --section-color-1: oklch(0.733 0.113 308.2); --section-color-2: oklch(0.718 0.107 268.4); --section-color-3: oklch(0.767 0.091 219.9); --section-color-4: oklch(0.776 0.105 172.6); --section-color-5: oklch(0.813 0.109 78.2); --section-color-6: oklch(0.693 0.151 28.1); --section-color-7: oklch(0.739 0.134 318.1); --section-color-8: oklch(0.709 0.142 2.3); --section-color-9: oklch(0.763 0.032 239.0); --section-color-10: oklch(0.794 0.116 127.9); --section-color-11: oklch(0.805 0.095 206.7); --section-color-12: oklch(0.719 0.115 295.6); --accent-pink: oklch(0.683 0.131 354.7); --section-heading: oklch(0.711 0.123 349.3); --accent-red: oklch(0.644 0.165 22.9); --viz-fourier: oklch(0.693 0.151 28.1); --viz-chebyshev: oklch(0.718 0.107 268.4); --viz-legendre: oklch(0.739 0.134 318.1); --configurator-divider: color-mix(in srgb, var(--foreground) 22%, transparent); --configurator-divider-section: color-mix(in srgb, var(--foreground) 30%, transparent); --configurator-section-tint: color-mix(in srgb, var(--foreground) 3%, transparent); --chart-ping-label: oklch(0.85 0.12 230); --chart-download-label: oklch(0.85 0.14 22); --chart-upload-label: oklch(0.85 0.12 55); --chart-jitter-label: oklch(0.85 0.14 305); --tier-featured: oklch(0.867 0.165 88.7); --tier-saved: oklch(0.748 0.135 250.1); --like: oklch(0.690 0.162 22.2); --success: oklch(0.805 0.186 151.6); --warning: oklch(0.809 0.150 76.6); --info: oklch(0.713 0.138 259.5); --delete: oklch(0.644 0.170 23.1); --success-foreground: hsl(48 10% 96%); --warning-foreground: hsl(24 10% 10%); --info-foreground: hsl(48 10% 96%); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 46%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 38%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-fallback: #413626; --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 18%, transparent); --shadow-cartoon-color: rgb(255 255 255 / 0.07); --shadow-cartoon-color-soft: rgb(255 255 255 / 0.03); --constellation-node: hsl(42 9% 72%); --constellation-node-dim: hsl(42 8% 56%); --constellation-line: hsl(45 12% 86%); --constellation-accent: hsl(20 70% 60%); --constellation-edge-alpha: 0.20; --constellation-edge-focus-alpha: 0.32; --constellation-alpha: 0.88; --constellation-edge-floor: 0; --constellation-edge-accent-alpha: 0.34; --glass-opacity-wash: 0.38; --glass-opacity-quiet: 0.58; --glass-opacity-resting: 0.72; --glass-opacity-floating: 0.88; --glass-opacity-overlay: 0.96; --glass-opacity-chassis: 0.36; --glass-opacity-dialog: 0.76; --glass-grain-opacity: 0.045; --paper-grain-opacity: 0.16; --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08); --glass-tint-strength-aa: 12%; --glass-tint-ink-dock: oklch(from var(--foreground) 0.90 0.045 h); --glass-tint-strength-floor: 12%; --on-glass-muted: hsl(34 16% 72%); --on-glass-muted-strong: hsl(36 13% 81%); --input-on-glass: hsl(26 12% 22%); --progress-track-on-glass: hsl(28 14% 26%); --card-field-floor-image: radial-gradient( 120% 110% at 78% 22%, oklch(0.34 0.055 66 / 0.35), oklch(0.34 0.055 66 / 0) 72% ); --card-field-floor-blend: normal; --surface-tint-4: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 4%, transparent); --surface-tint-6: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 6%, transparent); --surface-tint-8: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 8%, transparent); --surface-tint-10: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 10%, transparent); --surface-tint-12: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 12%, transparent); --surface-tint-15: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 15%, transparent); --surface-tint-18: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 18%, transparent); --surface-tint-22: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 22%, transparent); --surface-tint-25: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 25%, transparent); --surface-tint-35: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 35%, transparent); --surface-tint-40: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 40%, transparent); --surface-tint-70: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 70%, transparent); --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.05); --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06); --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30); --glass-edge-light: var(--glass-edge-light-dark); --glass-rim-top: inset 0 var(--glass-key-lit-y) 0 hsl(0 0% 100% / 0.40), inset var(--glass-key-lit-x) 0 0 hsl(0 0% 100% / 0.24); --glass-rim-bottom: inset 0 var(--glass-key-shade-y) 0 color-mix(in srgb, var(--foreground) 6%, transparent), inset var(--glass-key-shade-x) 0 0 color-mix(in srgb, var(--foreground) 4%, transparent); --tab-track-recess-ink: color-mix(in srgb, var(--foreground) 11%, transparent); --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18); --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14); --glass-curvature-intensity: 0.012; --gold: oklch(0.784 0.143 86.0); --gold-light: oklch(0.898 0.182 97.4); --gold-dark: oklch(0.678 0.150 63.8); --silver: oklch(0.792 0.012 255); --silver-light: oklch(0.912 0.010 255); --silver-dark: oklch(0.648 0.014 255); --bronze: oklch(0.650 0.090 54.0); --bronze-light: oklch(0.790 0.110 60.0); --bronze-dark: oklch(0.560 0.085 50.0); }
+.dark { color-scheme: dark; accent-color: var(--accent-color); --neutral-0: hsl(24 9% 4%); --neutral-1: hsl(28 12% 11%); --neutral-2: hsl(28 14% 16%); --neutral-3: hsl(30 18% 22%); --neutral-4: hsl(30 16% 34%); --neutral-5: hsl(34 14% 62%); --neutral-6: hsl(36 14% 72%); --foreground: hsl(30 14% 90%); --card: hsl(26 22% 17%); --popover: hsl(26 22% 17%); --surface-public-data-panel: hsl(36 9% 18%); --primary: oklch(0.739 0.134 318.1); --primary-foreground: hsl(24 10% 10%); --destructive: hsl(0 80% 60%); --destructive-foreground: hsl(48 10% 90%); --focus-ring-color: hsl(48 10% 70%); --shadow: hsl(0 0% 5%); --section-color-0: oklch(0.721 0.145 354.0); --section-color-1: oklch(0.733 0.113 308.2); --section-color-2: oklch(0.718 0.107 268.4); --section-color-3: oklch(0.767 0.091 219.9); --section-color-4: oklch(0.776 0.105 172.6); --section-color-5: oklch(0.813 0.109 78.2); --section-color-6: oklch(0.693 0.151 28.1); --section-color-7: oklch(0.739 0.134 318.1); --section-color-8: oklch(0.709 0.142 2.3); --section-color-9: oklch(0.763 0.032 239.0); --section-color-10: oklch(0.794 0.116 127.9); --section-color-11: oklch(0.805 0.095 206.7); --section-color-12: oklch(0.719 0.115 295.6); --accent-pink: oklch(0.683 0.131 354.7); --section-heading: oklch(0.711 0.123 349.3); --accent-red: oklch(0.644 0.165 22.9); --viz-fourier: oklch(0.693 0.151 28.1); --viz-chebyshev: oklch(0.718 0.107 268.4); --viz-legendre: oklch(0.739 0.134 318.1); --configurator-divider: color-mix(in srgb, var(--foreground) 22%, transparent); --configurator-divider-section: color-mix(in srgb, var(--foreground) 30%, transparent); --configurator-section-tint: color-mix(in srgb, var(--foreground) 3%, transparent); --tier-featured: oklch(0.867 0.165 88.7); --tier-saved: oklch(0.748 0.135 250.1); --like: oklch(0.690 0.162 22.2); --success: oklch(0.805 0.186 151.6); --warning: oklch(0.809 0.150 76.6); --info: oklch(0.713 0.138 259.5); --delete: oklch(0.644 0.170 23.1); --success-foreground: hsl(48 10% 96%); --warning-foreground: hsl(24 10% 10%); --info-foreground: hsl(48 10% 96%); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 46%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 38%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-fallback: #413626; --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 18%, transparent); --constellation-node: hsl(42 9% 72%); --constellation-node-dim: hsl(42 8% 56%); --constellation-line: hsl(45 12% 86%); --constellation-accent: hsl(20 70% 60%); --constellation-edge-alpha: 0.20; --constellation-edge-focus-alpha: 0.32; --constellation-alpha: 0.88; --constellation-edge-floor: 0; --constellation-edge-accent-alpha: 0.34; --glass-opacity-wash: 0.38; --glass-opacity-quiet: 0.58; --glass-opacity-resting: 0.72; --glass-opacity-floating: 0.88; --glass-opacity-overlay: 0.96; --glass-opacity-chassis: 0.36; --glass-opacity-dialog: 0.76; --glass-grain-opacity: 0.045; --paper-grain-opacity: 0.16; --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08); --glass-tint-strength-aa: 12%; --glass-tint-ink-dock: oklch(from var(--foreground) 0.90 0.045 h); --glass-tint-strength-floor: 12%; --on-glass-muted: hsl(34 16% 72%); --on-glass-muted-strong: hsl(36 13% 81%); --input-on-glass: hsl(26 12% 22%); --progress-track-on-glass: hsl(28 14% 26%); --surface-tint-4: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 4%, transparent); --surface-tint-6: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 6%, transparent); --surface-tint-8: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 8%, transparent); --surface-tint-10: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 10%, transparent); --surface-tint-12: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 12%, transparent); --surface-tint-15: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 15%, transparent); --surface-tint-18: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 18%, transparent); --surface-tint-22: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 22%, transparent); --surface-tint-25: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 25%, transparent); --surface-tint-35: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 35%, transparent); --surface-tint-40: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 40%, transparent); --surface-tint-70: color-mix(in srgb, oklch(from var(--foreground) 0.975 c h) 70%, transparent); --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.05); --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06); --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30); --glass-edge-light: var(--glass-edge-light-dark); --glass-rim-top: inset 0 var(--glass-key-lit-y) 0 hsl(0 0% 100% / 0.40), inset var(--glass-key-lit-x) 0 0 hsl(0 0% 100% / 0.24); --glass-rim-bottom: inset 0 var(--glass-key-shade-y) 0 color-mix(in srgb, var(--foreground) 6%, transparent), inset var(--glass-key-shade-x) 0 0 color-mix(in srgb, var(--foreground) 4%, transparent); --tab-track-recess-ink: color-mix(in srgb, var(--foreground) 11%, transparent); --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18); --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14); --glass-curvature-intensity: 0.012; --gold: oklch(0.784 0.143 86.0); --gold-light: oklch(0.898 0.182 97.4); --gold-dark: oklch(0.678 0.150 63.8); --silver: oklch(0.792 0.012 255); --silver-light: oklch(0.912 0.010 255); --silver-dark: oklch(0.648 0.014 255); --bronze: oklch(0.650 0.090 54.0); --bronze-light: oklch(0.790 0.110 60.0); --bronze-dark: oklch(0.560 0.085 50.0); }

package/dist/styles/tokens/glass-deep.css

@@ -1 +1 @@
-:root { --glass-blur-deep-radius: 16px; --glass-saturate-deep: 1.8; --glass-saturate-deep-ceiling: 1.8; --glass-depth-content: 0.35; --glass-depth-popover: 0.7; --glass-depth-menu: 1; }
+:root { --glass-blur-deep-radius: 16px; --glass-saturate-deep: 1.8; --glass-depth-content: 0.35; --glass-depth-popover: 0.7; --glass-depth-menu: 1; }

package/dist/styles/tokens/glass-fx.css

@@ -1 +1 @@
-:root { --glass-grain-opacity: 0.025; --paper-grain-opacity: 0.21; --glass-grain-engage-duration: 120ms; --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25); --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06); --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04); --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow); --metal-glow-blur-default: 0.5em; --metal-glow-opacity-default: 0.35; --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45); --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30); --glass-edge-light: inset 0 0 0 0.75px hsl(0 0% 100% / 0.18); --glass-key-lit-x: -1px; --glass-key-lit-y: 1px; --glass-key-shade-x: 1px; --glass-key-shade-y: -1px; --glass-key-direction: 0; --glass-rim-top: inset 0 var(--glass-key-lit-y) 0 hsl(0 0% 100% / 0.30), inset var(--glass-key-lit-x) 0 0 hsl(0 0% 100% / 0.18); --glass-rim-bottom: inset 0 var(--glass-key-shade-y) 0 color-mix(in srgb, var(--foreground) 6%, transparent), inset var(--glass-key-shade-x) 0 0 color-mix(in srgb, var(--foreground) 4%, transparent); --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.22); --glass-tint-source: var(--card); --glass-tint-strength: 0%; --glass-capsule-warm: oklch(0.88 0.1 75); --glass-capsule-warm-floor: 16%; --tab-track-recess-ink: color-mix(in srgb, var(--foreground) 7%, transparent); --glass-backdrop: dark; --glass-tint-ink: var(--foreground); --glass-tint-ink-dock: oklch(from var(--foreground) 0.42 0.05 h); --glass-backdrop-luma-knee: 0.6; --glass-tint-strength-aa: 20%; --glass-tint-strength-floor: 4%; --veil-feather-radial: radial-gradient( ellipse 100% 100% at 50% 50%, black 0%, black 70%, transparent 100% ); --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22); --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16); --glass-edge-dispersion: inset 0.75px 0 0 0 var(--glass-fringe-warm), inset -0.75px 0 0 0 var(--glass-fringe-cool); --glass-specular-size: 36%; --glass-curvature-intensity: 0.02; --glass-curvature-overlay: radial-gradient( ellipse at 50% -20%, hsl(40 30% 96% / var(--glass-curvature-intensity)), transparent 38% ); --glass-curvature-overlay-dark: var(--glass-curvature-overlay); --chart-ping: var(--viz-chebyshev); --chart-download: var(--viz-fourier); --chart-upload: var(--viz-amber); --chart-jitter: var(--viz-legendre); --chart-ping-label: oklch(0.40 0.18 230); --chart-download-label: oklch(0.40 0.20 22); --chart-upload-label: oklch(0.40 0.16 55); --chart-jitter-label: oklch(0.40 0.20 305); --meter-track-stroke: var(--foreground); --glass-shadow-wash: var(--shadow-sm), var(--glass-highlight); --glass-shadow-quiet: var(--shadow-md), var(--glass-highlight); --glass-shadow-resting: var(--shadow-lg), var(--glass-highlight); --glass-shadow-floating: var(--shadow-xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent), var(--glass-highlight); --glass-shadow-overlay: var(--shadow-2xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight); --glass-spine-border: var(--surface-tint-8); --glass-spine-vignette: radial-gradient( ellipse at 50% 0%, color-mix(in oklab, var(--phase-color, var(--surface-tint-8)) 8%, transparent), transparent 60% ); --glass-under-shadow-quiet: calc(2px * var(--glass-key-direction)) 2px 8px -1px oklch(0 0 0 / 0.04); --glass-under-shadow-default: calc(4px * var(--glass-key-direction)) 4px 16px -2px oklch(0 0 0 / 0.08); --glass-under-shadow-vivid: calc(8px * var(--glass-key-direction)) 8px 32px -4px oklch(0 0 0 / 0.12); --glass-under-shadow-spine: 0 1px 0 0 oklch(0 0 0 / 0.06); --overlay-scrim-ink: hsl(24 10% 10%); --overlay-scrim: color-mix(in srgb, var(--overlay-scrim-ink) 50%, transparent); --overlay-scrim-strong: color-mix(in srgb, var(--overlay-scrim-ink) 80%, transparent); --overlay-scrim-subtle: color-mix(in srgb, var(--overlay-scrim-ink) 40%, transparent); }
+:root { --glass-grain-opacity: 0.025; --paper-grain-opacity: 0.21; --glass-grain-engage-duration: 120ms; --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25); --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06); --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04); --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow); --metal-glow-blur-default: 0.5em; --metal-glow-opacity-default: 0.35; --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45); --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30); --glass-edge-light: inset 0 0 0 0.75px hsl(0 0% 100% / 0.18); --glass-key-lit-x: -1px; --glass-key-lit-y: 1px; --glass-key-shade-x: 1px; --glass-key-shade-y: -1px; --glass-key-direction: 0; --glass-rim-top: inset 0 var(--glass-key-lit-y) 0 hsl(0 0% 100% / 0.30), inset var(--glass-key-lit-x) 0 0 hsl(0 0% 100% / 0.18); --glass-rim-bottom: inset 0 var(--glass-key-shade-y) 0 color-mix(in srgb, var(--foreground) 6%, transparent), inset var(--glass-key-shade-x) 0 0 color-mix(in srgb, var(--foreground) 4%, transparent); --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.22); --glass-tint-source: var(--card); --glass-tint-strength: 0%; --glass-capsule-warm: oklch(0.88 0.1 75); --glass-capsule-warm-floor: 16%; --tab-track-recess-ink: color-mix(in srgb, var(--foreground) 7%, transparent); --glass-backdrop: dark; --glass-tint-ink: var(--foreground); --glass-tint-ink-dock: oklch(from var(--foreground) 0.42 0.05 h); --glass-backdrop-luma-knee: 0.6; --glass-tint-strength-aa: 20%; --glass-tint-strength-floor: 4%; --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22); --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16); --glass-edge-dispersion: inset 0.75px 0 0 0 var(--glass-fringe-warm), inset -0.75px 0 0 0 var(--glass-fringe-cool); --glass-specular-size: 36%; --glass-curvature-intensity: 0.02; --glass-curvature-overlay: radial-gradient( ellipse at 50% -20%, hsl(40 30% 96% / var(--glass-curvature-intensity)), transparent 38% ); --chart-ping: var(--viz-chebyshev); --chart-download: var(--viz-fourier); --chart-upload: var(--viz-amber); --chart-jitter: var(--viz-legendre); --glass-shadow-wash: var(--shadow-sm), var(--glass-highlight); --glass-shadow-quiet: var(--shadow-md), var(--glass-highlight); --glass-shadow-resting: var(--shadow-lg), var(--glass-highlight); --glass-shadow-floating: var(--shadow-xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent), var(--glass-highlight); --glass-shadow-overlay: var(--shadow-2xl), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight); --glass-under-shadow-quiet: calc(2px * var(--glass-key-direction)) 2px 8px -1px oklch(0 0 0 / 0.04); --glass-under-shadow-default: calc(4px * var(--glass-key-direction)) 4px 16px -2px oklch(0 0 0 / 0.08); --glass-under-shadow-vivid: calc(8px * var(--glass-key-direction)) 8px 32px -4px oklch(0 0 0 / 0.12); --overlay-scrim-ink: hsl(24 10% 10%); --overlay-scrim: color-mix(in srgb, var(--overlay-scrim-ink) 50%, transparent); --overlay-scrim-strong: color-mix(in srgb, var(--overlay-scrim-ink) 80%, transparent); --overlay-scrim-subtle: color-mix(in srgb, var(--overlay-scrim-ink) 40%, transparent); }

package/dist/styles/tokens/glass.css

@@ -1 +1 @@
-:root { --glass-opacity-wash: 0.30; --glass-opacity-quiet: 0.50; --glass-opacity-resting: 0.65; --glass-opacity-floating: 0.80; --glass-opacity-overlay: 0.95; --glass-blur-wash-radius: 1px; --glass-blur-quiet-radius: 8px; --glass-blur-resting-radius: 8px; --glass-blur-floating-radius: 13px; --glass-blur-overlay-radius: 13px; --glass-saturate-wash: 1.4; --glass-saturate-quiet: 1.4; --glass-saturate-resting: 1.4; --glass-saturate-floating: 1.6; --glass-saturate-overlay: 1.6; --glass-blur-wash: blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(var(--glass-saturate-wash)); --glass-blur-quiet: blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(var(--glass-saturate-quiet)) brightness(1.02); --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(var(--glass-saturate-floating)); --glass-blur-overlay: blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(var(--glass-saturate-overlay)); --glass-blur-btn-radius: 6px; --glass-blur-btn: blur(calc(var(--glass-blur-btn-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-opacity-dock: 0.50; --glass-opacity-dialog: 0.68; --glass-opacity-sheet: 0.74; --dock-fg-on-aurora: var(--foreground); --glass-opacity-chassis: 0.28; --glass-bg-wash: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-wash)) * var(--glass-level)) * 100%), transparent); --glass-bg-quiet: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-quiet)) * var(--glass-level)) * 100%), transparent); --glass-bg-resting: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-resting)) * var(--glass-level)) * 100%), transparent); --glass-bg-floating: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-floating)) * var(--glass-level)) * 100%), transparent); --glass-bg-overlay: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-overlay)) * var(--glass-level)) * 100%), transparent); --glass-bg-dock: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dock)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-chassis: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-chassis)) * var(--glass-level)) * 100%), transparent); --glass-bg-dialog: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dialog)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-sheet: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-sheet)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-well-tone: 8%; --glass-fill-tinted: color-mix( in oklab, var(--glass-fill-tint, oklch(0.9 0.05 75 / 0)) var(--glass-fill-strength, 0%), oklch(0.9 0.05 75 / 0) ); --glass-border-wash: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-quiet: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-resting: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-floating: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-overlay: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-dock: color-mix(in srgb, var(--foreground) 8%, transparent); --glass-border: var(--glass-border-quiet); --glass-floor-fill-max: 15%; --glass-floor-fill: color-mix(in srgb, var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)), transparent); --glass-border-defined: color-mix(in srgb, var(--foreground) calc(var(--glass-definition) * 14%), transparent); --control-surface-bg: var(--glass-bg-quiet); --control-surface-border: var(--glass-border-floating); --control-surface-blur: var(--glass-blur-quiet); --control-surface-bg-hover: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-bg-resting) 35%); } @property --glass-ambient-hue { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-ambient-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --glass-fill-tint { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-fill-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
+:root { --glass-opacity-wash: 0.30; --glass-opacity-quiet: 0.50; --glass-opacity-resting: 0.65; --glass-opacity-floating: 0.80; --glass-opacity-overlay: 0.95; --glass-blur-wash-radius: 1px; --glass-blur-quiet-radius: 7px; --glass-blur-resting-radius: 7px; --glass-blur-floating-radius: 11px; --glass-blur-overlay-radius: 11px; --glass-saturate-wash: 1.4; --glass-saturate-quiet: 1.4; --glass-saturate-resting: 1.4; --glass-saturate-floating: 1.6; --glass-saturate-overlay: 1.6; --glass-blur-wash: blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(var(--glass-saturate-wash)); --glass-blur-quiet: blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(var(--glass-saturate-quiet)) brightness(1.02); --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(var(--glass-saturate-resting)); --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(var(--glass-saturate-floating)); --glass-blur-overlay: blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(var(--glass-saturate-overlay)); --glass-halo-blur: 20px; --glass-halo-core: 13rem; --glass-halo-bloom: 7rem; --glass-opacity-dock: 0.50; --glass-opacity-dialog: 0.68; --glass-opacity-sheet: 0.74; --dock-fg-on-aurora: var(--foreground); --glass-opacity-chassis: 0.28; --glass-bg-wash: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-wash)) * var(--glass-level)) * 100%), transparent); --glass-bg-quiet: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-quiet)) * var(--glass-level)) * 100%), transparent); --glass-bg-resting: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-resting)) * var(--glass-level)) * 100%), transparent); --glass-bg-floating: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-floating)) * var(--glass-level)) * 100%), transparent); --glass-bg-overlay: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-overlay)) * var(--glass-level)) * 100%), transparent); --glass-bg-dock: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dock)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-chassis: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-chassis)) * var(--glass-level)) * 100%), transparent); --glass-bg-dialog: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dialog)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-bg-sheet: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-sheet)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength)); --glass-well-tone: 8%; --glass-fill-tinted: color-mix( in oklab, var(--glass-fill-tint, oklch(0.9 0.05 75 / 0)) var(--glass-fill-strength, 0%), oklch(0.9 0.05 75 / 0) ); --glass-border-wash: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-quiet: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-resting: color-mix(in srgb, var(--foreground) 4%, transparent); --glass-border-floating: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-overlay: color-mix(in srgb, var(--foreground) 5%, transparent); --glass-border-dock: color-mix(in srgb, var(--foreground) 8%, transparent); --glass-border: var(--glass-border-quiet); --glass-floor-fill-max: 15%; --glass-floor-fill: color-mix(in srgb, var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)), transparent); --glass-border-defined: color-mix(in srgb, var(--foreground) calc(var(--glass-definition) * 14%), transparent); --control-surface-bg: var(--glass-bg-quiet); --control-surface-border: var(--glass-border-floating); --control-surface-blur: var(--glass-blur-quiet); --control-surface-bg-hover: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-bg-resting) 35%); } @property --glass-ambient-hue { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-ambient-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --glass-fill-tint { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-fill-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

package/dist/styles/tokens/light-dark.css

@@ -1 +1 @@
-@media (pointer: coarse) { :root { --ui-scale: var(--ui-coarse-scale, 1.5); --control-floor: var(--touch-target, 2.75rem); } } @media (min-resolution: 2dppx) { :root { --glass-blur-overlay-radius: 20px; } } @supports (color: light-dark(white, black)) { :root { --neutral-0: light-dark(hsl(40 30% 98%), hsl(24 9% 4%)); --neutral-1: light-dark(hsl(38 26% 95%), hsl(28 12% 11%)); --neutral-2: light-dark(hsl(34 28% 90%), hsl(28 14% 16%)); --neutral-3: light-dark(hsl(33 30% 82%), hsl(30 18% 22%)); --neutral-4: light-dark(hsl(32 26% 70%), hsl(30 16% 34%)); --neutral-5: light-dark(hsl(30 22% 40%), hsl(34 14% 62%)); --neutral-6: light-dark(hsl(28 24% 30%), hsl(36 14% 72%)); --foreground: light-dark(hsl(24 10% 10%), hsl(30 14% 90%)); --card: light-dark(hsl(30 85% 96%), hsl(26 22% 17%)); --popover: light-dark(hsl(30 85% 96%), hsl(26 22% 17%)); --surface-public-data-panel: light-dark(hsl(44 16% 96%), hsl(36 9% 18%)); --primary: light-dark(hsl(24 10% 10%), oklch(0.739 0.134 318.1)); --primary-foreground: light-dark(var(--neutral-0), hsl(24 10% 10%)); --destructive: light-dark(hsl(0 72% 50%), hsl(0 80% 60%)); --destructive-foreground: light-dark(var(--neutral-0), hsl(48 10% 90%)); --focus-ring-color: light-dark(hsl(24 10% 10%), hsl(48 10% 70%)); --shadow: light-dark(hsl(24 10% 10%), hsl(0 0% 5%)); --accent-color: light-dark(var(--primary), var(--focus-ring-color)); --section-color-0: light-dark(oklch(0.552 0.192 359.8), oklch(0.721 0.145 354.0)); --section-color-1: light-dark(oklch(0.502 0.165 305.9), oklch(0.733 0.113 308.2)); --section-color-2: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4)); --section-color-3: light-dark(oklch(0.542 0.089 222.8), oklch(0.767 0.091 219.9)); --section-color-4: light-dark(oklch(0.551 0.088 171.1), oklch(0.776 0.105 172.6)); --section-color-5: light-dark(oklch(0.530 0.124 69.6), oklch(0.813 0.109 78.2)); --section-color-6: light-dark(oklch(0.579 0.201 30.4), oklch(0.693 0.151 28.1)); --section-color-7: light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1)); --section-color-8: light-dark(oklch(0.520 0.176 8.4), oklch(0.709 0.142 2.3)); --section-color-9: light-dark(oklch(0.492 0.038 239.6), oklch(0.763 0.032 239.0)); --section-color-10: light-dark(oklch(0.556 0.103 128.8), oklch(0.794 0.116 127.9)); --section-color-11: light-dark(oklch(0.601 0.092 208.0), oklch(0.805 0.095 206.7)); --section-color-12: light-dark(oklch(0.513 0.163 291.9), oklch(0.719 0.115 295.6)); --accent-pink: light-dark(oklch(0.613 0.197 353.8), oklch(0.683 0.131 354.7)); --section-heading: light-dark(oklch(0.545 0.189 352.8), oklch(0.711 0.123 349.3)); --accent-red: light-dark(oklch(0.574 0.216 27.5), oklch(0.644 0.165 22.9)); --viz-fourier: light-dark(oklch(0.579 0.201 30.4), oklch(0.693 0.151 28.1)); --viz-chebyshev: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4)); --viz-legendre: light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1)); --chart-ping-label: light-dark(oklch(0.40 0.18 230), oklch(0.85 0.12 230)); --chart-download-label: light-dark(oklch(0.40 0.20 22), oklch(0.85 0.14 22)); --chart-upload-label: light-dark(oklch(0.40 0.16 55), oklch(0.85 0.12 55)); --chart-jitter-label: light-dark(oklch(0.40 0.20 305), oklch(0.85 0.14 305)); --tier-featured: light-dark(oklch(0.841 0.173 84.2), oklch(0.867 0.165 88.7)); --tier-saved: light-dark(oklch(0.676 0.176 252.3), oklch(0.748 0.135 250.1)); --like: light-dark(oklch(0.633 0.200 24.9), oklch(0.690 0.162 22.2)); --success: light-dark(oklch(0.720 0.192 149.5), oklch(0.805 0.186 151.6)); --warning: light-dark(oklch(0.770 0.165 70.6), oklch(0.809 0.150 76.6)); --info: light-dark(oklch(0.626 0.186 259.6), oklch(0.713 0.138 259.5)); --delete: light-dark(oklch(0.597 0.198 25.5), oklch(0.644 0.170 23.1)); --success-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%)); --info-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%)); --shadow-cartoon-color: light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.07)); --shadow-cartoon-color-soft: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.03)); --gold: light-dark(oklch(0.751 0.147 84.2), oklch(0.784 0.143 86.0)); --gold-light: light-dark(oklch(0.890 0.183 96.1), oklch(0.898 0.182 97.4)); --gold-dark: light-dark(oklch(0.599 0.132 64.2), oklch(0.678 0.150 63.8)); --silver: light-dark(oklch(0.760 0.012 255), oklch(0.792 0.012 255)); --silver-light: light-dark(oklch(0.902 0.010 255), oklch(0.912 0.010 255)); --silver-dark: light-dark(oklch(0.582 0.014 255), oklch(0.648 0.014 255)); --bronze: light-dark(oklch(0.620 0.092 54.0), oklch(0.650 0.090 54.0)); --bronze-light: light-dark(oklch(0.760 0.112 60.0), oklch(0.790 0.110 60.0)); --bronze-dark: light-dark(oklch(0.500 0.082 50.0), oklch(0.560 0.085 50.0)); } }
+@media (pointer: coarse) { :root { --ui-scale: var(--ui-coarse-scale, 1.5); --control-floor: var(--touch-target, 2.75rem); } } @media (min-resolution: 2dppx) { :root { --glass-blur-overlay-radius: 17px; } } @supports (color: light-dark(white, black)) { :root { --neutral-0: light-dark(hsl(40 30% 98%), hsl(24 9% 4%)); --neutral-1: light-dark(hsl(38 26% 95%), hsl(28 12% 11%)); --neutral-2: light-dark(hsl(34 28% 90%), hsl(28 14% 16%)); --neutral-3: light-dark(hsl(33 30% 82%), hsl(30 18% 22%)); --neutral-4: light-dark(hsl(32 26% 70%), hsl(30 16% 34%)); --neutral-5: light-dark(hsl(30 22% 40%), hsl(34 14% 62%)); --neutral-6: light-dark(hsl(28 24% 30%), hsl(36 14% 72%)); --foreground: light-dark(hsl(24 10% 10%), hsl(30 14% 90%)); --card: light-dark(hsl(30 85% 96%), hsl(26 22% 17%)); --popover: light-dark(hsl(30 85% 96%), hsl(26 22% 17%)); --surface-public-data-panel: light-dark(hsl(44 16% 96%), hsl(36 9% 18%)); --primary: light-dark(hsl(24 10% 10%), oklch(0.739 0.134 318.1)); --primary-foreground: light-dark(var(--neutral-0), hsl(24 10% 10%)); --destructive: light-dark(hsl(0 72% 50%), hsl(0 80% 60%)); --destructive-foreground: light-dark(var(--neutral-0), hsl(48 10% 90%)); --focus-ring-color: light-dark(hsl(24 10% 10%), hsl(48 10% 70%)); --shadow: light-dark(hsl(24 10% 10%), hsl(0 0% 5%)); --accent-color: light-dark(var(--primary), var(--focus-ring-color)); --section-color-0: light-dark(oklch(0.552 0.192 359.8), oklch(0.721 0.145 354.0)); --section-color-1: light-dark(oklch(0.502 0.165 305.9), oklch(0.733 0.113 308.2)); --section-color-2: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4)); --section-color-3: light-dark(oklch(0.542 0.089 222.8), oklch(0.767 0.091 219.9)); --section-color-4: light-dark(oklch(0.551 0.088 171.1), oklch(0.776 0.105 172.6)); --section-color-5: light-dark(oklch(0.530 0.124 69.6), oklch(0.813 0.109 78.2)); --section-color-6: light-dark(oklch(0.579 0.201 30.4), oklch(0.693 0.151 28.1)); --section-color-7: light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1)); --section-color-8: light-dark(oklch(0.520 0.176 8.4), oklch(0.709 0.142 2.3)); --section-color-9: light-dark(oklch(0.492 0.038 239.6), oklch(0.763 0.032 239.0)); --section-color-10: light-dark(oklch(0.556 0.103 128.8), oklch(0.794 0.116 127.9)); --section-color-11: light-dark(oklch(0.601 0.092 208.0), oklch(0.805 0.095 206.7)); --section-color-12: light-dark(oklch(0.513 0.163 291.9), oklch(0.719 0.115 295.6)); --accent-pink: light-dark(oklch(0.613 0.197 353.8), oklch(0.683 0.131 354.7)); --section-heading: light-dark(oklch(0.545 0.189 352.8), oklch(0.711 0.123 349.3)); --accent-red: light-dark(oklch(0.574 0.216 27.5), oklch(0.644 0.165 22.9)); --viz-fourier: light-dark(oklch(0.579 0.201 30.4), oklch(0.693 0.151 28.1)); --viz-chebyshev: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4)); --viz-legendre: light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1)); --tier-featured: light-dark(oklch(0.841 0.173 84.2), oklch(0.867 0.165 88.7)); --tier-saved: light-dark(oklch(0.676 0.176 252.3), oklch(0.748 0.135 250.1)); --like: light-dark(oklch(0.633 0.200 24.9), oklch(0.690 0.162 22.2)); --success: light-dark(oklch(0.720 0.192 149.5), oklch(0.805 0.186 151.6)); --warning: light-dark(oklch(0.770 0.165 70.6), oklch(0.809 0.150 76.6)); --info: light-dark(oklch(0.626 0.186 259.6), oklch(0.713 0.138 259.5)); --delete: light-dark(oklch(0.597 0.198 25.5), oklch(0.644 0.170 23.1)); --success-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%)); --info-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%)); --gold: light-dark(oklch(0.751 0.147 84.2), oklch(0.784 0.143 86.0)); --gold-light: light-dark(oklch(0.890 0.183 96.1), oklch(0.898 0.182 97.4)); --gold-dark: light-dark(oklch(0.599 0.132 64.2), oklch(0.678 0.150 63.8)); --silver: light-dark(oklch(0.760 0.012 255), oklch(0.792 0.012 255)); --silver-light: light-dark(oklch(0.902 0.010 255), oklch(0.912 0.010 255)); --silver-dark: light-dark(oklch(0.582 0.014 255), oklch(0.648 0.014 255)); --bronze: light-dark(oklch(0.620 0.092 54.0), oklch(0.650 0.090 54.0)); --bronze-light: light-dark(oklch(0.760 0.112 60.0), oklch(0.790 0.110 60.0)); --bronze-dark: light-dark(oklch(0.500 0.082 50.0), oklch(0.560 0.085 50.0)); } }

package/dist/styles/tokens/manifest.d.ts

@@ -0,0 +1,14 @@
+/** Public semantic override points, grouped by design responsibility. */
+export declare const tokenDomains: readonly ["color", "material", "type", "space", "radius", "shadow", "motion", "interaction"];
+export type TokenDomain = (typeof tokenDomains)[number];
+export declare const semanticTokens: {
+    readonly color: readonly ["--background", "--foreground", "--primary", "--secondary", "--muted", "--accent", "--destructive", "--border"];
+    readonly material: readonly ["--glass-level", "--glass-depth", "--glass-accent", "--glass-accent-strength", "--glass-opacity-quiet", "--glass-opacity-resting", "--glass-opacity-floating", "--glass-opacity-overlay"];
+    readonly type: readonly ["--font-stack-text", "--font-stack-display", "--font-stack-mono", "--type-body", "--type-subheading", "--type-heading", "--type-title", "--type-display-1"];
+    readonly space: readonly ["--ui-scale", "--control-h-sm", "--control-h-md", "--control-h-lg", "--overlay-pad-inline", "--overlay-pad-block", "--card-pad-inline", "--card-pad-block"];
+    readonly radius: readonly ["--radius", "--radius-sm", "--radius-xl", "--radius-2xl", "--radius-pill", "--radius-card", "--radius-input", "--radius-button"];
+    readonly shadow: readonly ["--shadow-sm", "--shadow-md", "--shadow-lg", "--shadow-xl", "--shadow-card", "--shadow-dock", "--shadow-modal", "--focus-ring-shadow"];
+    readonly motion: readonly ["--duration-fast", "--duration-normal", "--duration-slow", "--spring-smooth", "--spring-snappy", "--spring-bouncy", "--ease-standard", "--ease-out"];
+    readonly interaction: readonly ["--touch-target", "--focus-ring-width", "--focus-ring-color", "--opacity-disabled", "--scale-hover", "--scale-press", "--glass-specular-intensity-rest", "--glass-specular-intensity-hover", "--glass-specular-intensity-active"];
+};
+export type SemanticToken = (typeof semanticTokens)[TokenDomain][number];

package/dist/styles/tokens/manifest.ts

@@ -0,0 +1,56 @@
+/** Public semantic override points, grouped by design responsibility. */
+export const tokenDomains = [
+    "color",
+    "material",
+    "type",
+    "space",
+    "radius",
+    "shadow",
+    "motion",
+    "interaction",
+] as const;
+
+export type TokenDomain = (typeof tokenDomains)[number];
+
+export const semanticTokens = {
+    color: [
+        "--background", "--foreground", "--primary", "--secondary",
+        "--muted", "--accent", "--destructive", "--border",
+    ],
+    material: [
+        "--glass-level", "--glass-depth", "--glass-accent", "--glass-accent-strength",
+        "--glass-opacity-quiet", "--glass-opacity-resting",
+        "--glass-opacity-floating", "--glass-opacity-overlay",
+    ],
+    type: [
+        "--font-stack-text", "--font-stack-display", "--font-stack-mono",
+        "--type-body", "--type-subheading", "--type-heading", "--type-title",
+        "--type-display-1",
+    ],
+    space: [
+        "--ui-scale", "--control-h-sm", "--control-h-md", "--control-h-lg",
+        "--overlay-pad-inline", "--overlay-pad-block", "--card-pad-inline",
+        "--card-pad-block",
+    ],
+    radius: [
+        "--radius", "--radius-sm", "--radius-xl", "--radius-2xl",
+        "--radius-pill", "--radius-card", "--radius-input", "--radius-button",
+    ],
+    shadow: [
+        "--shadow-sm", "--shadow-md", "--shadow-lg", "--shadow-xl",
+        "--shadow-card", "--shadow-dock", "--shadow-modal", "--focus-ring-shadow",
+    ],
+    motion: [
+        "--duration-fast", "--duration-normal", "--duration-slow",
+        "--spring-smooth", "--spring-snappy", "--spring-bouncy",
+        "--ease-standard", "--ease-out",
+    ],
+    interaction: [
+        "--touch-target", "--focus-ring-width", "--focus-ring-color",
+        "--opacity-disabled", "--scale-hover", "--scale-press",
+        "--glass-specular-intensity-rest", "--glass-specular-intensity-hover",
+        "--glass-specular-intensity-active",
+    ],
+} as const satisfies Record<TokenDomain, readonly `--${string}`[]>;
+
+export type SemanticToken = (typeof semanticTokens)[TokenDomain][number];

package/dist/styles/tokens/motion-registers.css

@@ -1 +1 @@
-:root { --enter-overlay-spring: var(--spring-snappy); --enter-overlay-clock: var(--spring-snappy-duration); --enter-overlay-scale: 0.88; --enter-overlay-blur: 6px; --enter-overlay-slide: 0.5rem; --enter-menu-spring: var(--spring-smooth); --enter-menu-clock: var(--spring-smooth-duration); --enter-menu-scale: 0.96; --enter-menu-blur: 2px; --enter-menu-slide: 0.5rem; --enter-tooltip-spring: var(--ease-out-expo); --enter-tooltip-clock: var(--duration-fast); --enter-tooltip-scale: 0.97; --enter-tooltip-blur: 0px; --enter-tooltip-slide: 0px; --enter-transient-spring: var(--spring-transient); --enter-transient-clock: var(--spring-transient-duration); --enter-transient-scale: 0.5; --enter-transient-blur: 8px; --enter-transient-slide: 0px; --exit-overlay-duration: 0.15s; --exit-transient-duration: 0.1s; --exit-curve: var(--ease-out); }
+:root { --enter-overlay-spring: var(--spring-snappy); --enter-overlay-clock: var(--spring-snappy-duration); --enter-overlay-scale: 0.94; --enter-overlay-blur: 6px; --enter-overlay-slide: 0.5rem; --enter-menu-spring: var(--spring-smooth); --enter-menu-clock: var(--spring-smooth-duration); --enter-menu-scale: 0.96; --enter-menu-blur: 2px; --enter-menu-slide: 0.5rem; --enter-tooltip-spring: var(--ease-out-expo); --enter-tooltip-clock: var(--duration-fast); --enter-tooltip-scale: 0.97; --enter-tooltip-blur: 0px; --enter-tooltip-slide: 0px; --enter-transient-spring: var(--spring-transient); --enter-transient-clock: var(--spring-transient-duration); --enter-transient-scale: 0.5; --enter-transient-blur: 8px; --enter-transient-slide: 0px; --exit-overlay-duration: 0.15s; --exit-transient-duration: 0.1s; --exit-curve: var(--ease-out); }

package/dist/styles/tokens/offsets.css

@@ -1 +1 @@
-:root { --lift-sm: -1px; --lift-md: -2px; --lift-lg: -4px; --fade-scroll-width: 1rem; --dock-max-inline-size: min(80vw, 64rem); --dock-max-block-size: min(80vh, 48rem); --chassis-max-block-size: calc( 100dvh - var(--dock-footer-space, 5.75rem) - var(--page-padding-top, 0rem) - 1rem ); --instrument-dial-min-height-mobile: 24rem; --instrument-dial-meter-reserve-mobile: minmax(0, 1fr); --instrument-dial-min-block-size-desktop: var(--chassis-max-block-size); --max-width-input: 24rem; --input-min-width-sm: 5rem; --popover-width: 200px; --panel-padding: 0.375rem; --overlay-min-width: 8rem; --overlay-max-block: 60vh; --tooltip-text: var(--type-caption); --select-chevron-opacity: 0.5; --chart-height-compact: 15rem; --chart-height-default: 22.5rem; --chart-height-large: 25rem; --chart-margin: 1.25rem; --paper-texture-size: 200px 200px; }
+:root { --lift-sm: -1px; --lift-md: -2px; --lift-lg: -4px; --fade-scroll-width: 1rem; --dock-max-inline-size: min(80vw, 64rem); --dock-max-block-size: min(80vh, 48rem); --max-width-input: 24rem; --input-min-width-sm: 5rem; --popover-width: 200px; --panel-padding: 0.375rem; --overlay-min-width: 8rem; --overlay-max-block: 60vh; --tooltip-text: var(--type-caption); --select-chevron-opacity: 0.5; --chart-height-compact: 15rem; --chart-height-default: 22.5rem; --chart-height-large: 25rem; --chart-margin: 1.25rem; --paper-texture-size: 200px 200px; }

package/dist/styles/tokens/property-regs-specular.css

@@ -1 +1 @@
-:root { --glass-specular-intensity-rest: 0; --glass-specular-intensity-hover: 0.1; --glass-specular-intensity-active: 0.16; --glass-specular-btn-hover: 0.14; } .dark { --glass-specular-intensity-hover: 0.08; --glass-specular-intensity-active: 0.12; --glass-specular-btn-hover: 0.11; } @property --glass-btn-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --seal-draw { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --seal-scale { syntax: "<number>"; inherits: false; initial-value: 1; } @property --seal-glint { syntax: "<number>"; inherits: false; initial-value: 0; } @property --seal-ink { syntax: "<color>"; inherits: true; initial-value: oklch(0.751 0.147 84.2); } @property --scroll-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --chrome-collapse-t { syntax: "<number>"; inherits: true; initial-value: 0; }
+:root { --glass-specular-intensity-rest: 0; --glass-specular-intensity-hover: 0.1; --glass-specular-intensity-active: 0.16; --glass-specular-btn-hover: 0.14; } .dark { --glass-specular-intensity-hover: 0.08; --glass-specular-intensity-active: 0.12; --glass-specular-btn-hover: 0.11; } @property --glass-btn-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --seal-draw { syntax: "<percentage>"; inherits: false; initial-value: 100%; } @property --seal-scale { syntax: "<number>"; inherits: false; initial-value: 1; } @property --seal-glint { syntax: "<number>"; inherits: false; initial-value: 0; } @property --seal-ink { syntax: "<color>"; inherits: true; initial-value: oklch(0.751 0.147 84.2); } @property --chrome-collapse-t { syntax: "<number>"; inherits: true; initial-value: 0; }

package/dist/styles/tokens/property-regs.css

@@ -1 +1 @@
-@property --progress-crescendo { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --scroll-progress-rim-fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --goo-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --tab-blob { syntax: "<number>"; inherits: false; initial-value: 1; } @property --tab-flood-t { syntax: "<number>"; inherits: false; initial-value: 0; } @property --eyeglass-live-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --phase-tint-amount { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --specular-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; } @property --specular-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; } @property --specular-intensity { syntax: "<number>"; inherits: false; initial-value: 0; } @property --specular-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @property --flex-vel { syntax: "<number>"; inherits: false; initial-value: 0; } @property --cartoon-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --cast-travel { syntax: "<length>"; inherits: false; initial-value: 0px; } @property --cast-spread { syntax: "<number>"; inherits: false; initial-value: 1; } @property --cartoon-cast-dx { syntax: "<length>"; inherits: true; initial-value: 0px; } @property --cartoon-cast-dy { syntax: "<length>"; inherits: true; initial-value: 0px; } @property --glass-accent { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-accent-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --pulse-aura-breath-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --glass-level { syntax: "<number>"; inherits: true; initial-value: 1; } @property --glass-backdrop-luma { syntax: "<number>"; inherits: true; initial-value: 0; } @property --glass-depth { syntax: "<number>"; inherits: true; initial-value: 1; } @property --glass-definition { syntax: "<number>"; inherits: true; initial-value: 0; } @property --ui-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --motion-weight { syntax: "<number>"; inherits: true; initial-value: 0.618; } @property --motion-tempo { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --progress-crescendo { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --scroll-progress-rim-fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --tab-blob { syntax: "<number>"; inherits: false; initial-value: 1; } @property --specular-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; } @property --specular-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; } @property --specular-intensity { syntax: "<number>"; inherits: false; initial-value: 0; } @property --specular-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @property --flex-vel { syntax: "<number>"; inherits: false; initial-value: 0; } @property --cartoon-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --cast-travel { syntax: "<length>"; inherits: false; initial-value: 0px; } @property --cast-spread { syntax: "<number>"; inherits: false; initial-value: 1; } @property --cartoon-cast-dx { syntax: "<length>"; inherits: true; initial-value: 0px; } @property --cartoon-cast-dy { syntax: "<length>"; inherits: true; initial-value: 0px; } @property --glass-accent { syntax: "<color>"; inherits: true; initial-value: transparent; } @property --glass-accent-strength { syntax: "<percentage>"; inherits: true; initial-value: 0%; } @property --glass-level { syntax: "<number>"; inherits: true; initial-value: 1; } @property --glass-backdrop-luma { syntax: "<number>"; inherits: true; initial-value: 0; } @property --glass-depth { syntax: "<number>"; inherits: true; initial-value: 1; } @property --glass-definition { syntax: "<number>"; inherits: true; initial-value: 0; } @property --ui-scale { syntax: "<number>"; inherits: true; initial-value: 1; } @property --motion-weight { syntax: "<number>"; inherits: true; initial-value: 0.618; } @property --motion-tempo { syntax: "<number>"; inherits: true; initial-value: 1; }

package/dist/styles/tokens/scale-paper.css

@@ -1 +1 @@
-:root { --scale-hover: 1.08; --scale-hover-btn: 1.05; --scale-hover-dock: 1.1; --scale-press: 0.96; --scale-press-dock: var(--scale-press); --scale-press-sm: 0.97; --scale-press-btn: var(--scale-press-sm); --tab-indicator-max-stretch: 1.11; --tab-indicator-blob-max: 1.045; --tab-indicator-duration: var(--spring-snappy-duration); --opacity-disabled: 0.5; --opacity-icon-muted: 0.8; --focus-ring-width: 2px; --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent), 0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent); --invalid-ring-tint: 35%; --invalid-ring: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent); --control-ring: color-mix(in srgb, var(--foreground) 12%, transparent); --control-checked-bg: color-mix(in srgb, var(--primary) 88%, var(--glass-bg-floating)); --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); --grid-pitch: 1rem; --grid-major: 5rem; --grid-line: color-mix(in srgb, var(--foreground) 3%, transparent); --grid-line-major: color-mix(in srgb, var(--foreground) 11%, transparent); --paper-grid-opacity: 0.08; --paper-grid-texture-size: var(--grid-pitch); --paper-grid-line: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 100%), transparent ); --paper-grid-line-major: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 160%), transparent ); --paper-grid-texture: linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px); --gold: oklch(0.751 0.147 84.2); --gold-light: oklch(0.890 0.183 96.1); --gold-dark: oklch(0.599 0.132 64.2); --gold-deep: oklch(0.487 0.103 63.0); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --silver: oklch(0.760 0.012 255); --silver-light: oklch(0.902 0.010 255); --silver-dark: oklch(0.582 0.014 255); --silver-deep: oklch(0.462 0.016 258); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --bronze: oklch(0.620 0.092 54.0); --bronze-light: oklch(0.760 0.112 60.0); --bronze-dark: oklch(0.500 0.082 50.0); --bronze-deep: oklch(0.430 0.072 50.0); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --rainbow-red: oklch(0.636 0.210 25.5); --rainbow-orange: oklch(0.737 0.163 58.9); --rainbow-yellow: oklch(0.900 0.183 103.7); --rainbow-green: oklch(0.772 0.233 144.8); --rainbow-blue: oklch(0.633 0.162 252.1); --rainbow-indigo: oklch(0.566 0.206 294.1); --rainbow-violet: oklch(0.684 0.250 327.9); --rainbow-pastel-red: oklch(0.793 0.066 18.7); --rainbow-pastel-orange: oklch(0.823 0.059 57.3); --rainbow-pastel-yellow: oklch(0.889 0.068 98.1); --rainbow-pastel-green: oklch(0.826 0.072 149.5); --rainbow-pastel-blue: oklch(0.783 0.056 264.2); --rainbow-pastel-indigo: oklch(0.772 0.062 300.2); --rainbow-pastel-violet: oklch(0.799 0.070 314.4); --timeline-scrubber-height: 0.5rem; --timeline-continuous-height: 0.75rem; --timeline-dot-size: 0.875rem; --timeline-dot-size-touch: 1.25rem; --timeline-touch-target: 44px; --timeline-segment-flex: 1 1 0; --timeline-dot-fill: var(--surface-tint-12); --timeline-dot-blur: var(--glass-blur-quiet); --timeline-dot-ring: var(--glass-border-floating); --timeline-dot-tint-current: var(--accent, var(--foreground)); --timeline-dot-tint-completed: var(--success, var(--foreground)); --timeline-dot-check-color: var(--timeline-dot-tint-completed); --timeline-continuous-seam-opacity: 0.25; --timeline-continuous-seam-color: color-mix( in srgb, var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%), transparent ); --timeline-segment-default-gradient: linear-gradient( 90deg, var(--surface-tint-15), var(--surface-tint-25) ); --timeline-segment-gradient-ping: linear-gradient( 90deg, var(--chart-ping), color-mix(in srgb, var(--chart-ping) 60%, transparent) ); --timeline-segment-gradient-download: linear-gradient( 90deg, var(--chart-download), color-mix(in srgb, var(--chart-download) 60%, transparent) ); --timeline-segment-gradient-upload: linear-gradient( 90deg, var(--chart-upload), color-mix(in srgb, var(--chart-upload) 60%, transparent) ); --timeline-segment-gradient-jitter: linear-gradient( 90deg, var(--chart-jitter), color-mix(in srgb, var(--chart-jitter) 60%, transparent) ); --metric-row-value-clamp-min: 4.5rem; --metric-row-value-clamp-cqi: 34cqi; --metric-row-value-clamp-max: var(--type-display-hero); --metric-row-unit-clamp-min: 1.5rem; --metric-row-unit-clamp-max: 3.25rem; --metric-row-label-clamp-min: 1.125rem; --metric-row-label-clamp-cqi: 5cqi; --metric-row-label-clamp-max: 2.75rem; --metric-row-label-align: left; --metric-row-icon-color: inherit; --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04); --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem); --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem); --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem); --complete-headline-size: clamp(2.25rem, 11cqi, 4rem); --table-density: 1; --table-cell-px: calc(1rem * var(--table-density)); --table-cell-py: calc(1rem * var(--table-density)); --table-head-h: calc(3rem * var(--table-density)); --table-head-px: calc(1rem * var(--table-density)); }
+:root { --scale-hover: 1.08; --scale-hover-dock: 1.1; --scale-press: 0.96; --scale-press-dock: var(--scale-press); --scale-press-sm: 0.97; --scale-press-btn: var(--scale-press-sm); --tab-indicator-max-stretch: 1.11; --tab-indicator-blob-max: 1.045; --tab-indicator-duration: var(--spring-snappy-duration); --opacity-disabled: 0.5; --opacity-icon-muted: 0.8; --focus-ring-width: 2px; --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent), 0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent); --invalid-ring-tint: 35%; --invalid-ring: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent); --control-ring: color-mix(in srgb, var(--foreground) 12%, transparent); --control-checked-bg: color-mix(in srgb, var(--primary) 88%, var(--glass-bg-floating)); --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); --grid-pitch: 1rem; --grid-major: 5rem; --grid-line: color-mix(in srgb, var(--foreground) 3%, transparent); --grid-line-major: color-mix(in srgb, var(--foreground) 11%, transparent); --paper-grid-opacity: 0.08; --paper-grid-texture-size: var(--grid-pitch); --paper-grid-line: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 100%), transparent ); --paper-grid-line-major: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 160%), transparent ); --paper-grid-texture: linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px); --gold: oklch(0.751 0.147 84.2); --gold-light: oklch(0.890 0.183 96.1); --gold-dark: oklch(0.599 0.132 64.2); --gold-deep: oklch(0.487 0.103 63.0); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --silver: oklch(0.760 0.012 255); --silver-light: oklch(0.902 0.010 255); --silver-dark: oklch(0.582 0.014 255); --silver-deep: oklch(0.462 0.016 258); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --bronze: oklch(0.620 0.092 54.0); --bronze-light: oklch(0.760 0.112 60.0); --bronze-dark: oklch(0.500 0.082 50.0); --bronze-deep: oklch(0.430 0.072 50.0); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --rainbow-red: oklch(0.636 0.210 25.5); --rainbow-orange: oklch(0.737 0.163 58.9); --rainbow-yellow: oklch(0.900 0.183 103.7); --rainbow-green: oklch(0.772 0.233 144.8); --rainbow-blue: oklch(0.633 0.162 252.1); --rainbow-indigo: oklch(0.566 0.206 294.1); --rainbow-violet: oklch(0.684 0.250 327.9); --rainbow-pastel-red: oklch(0.793 0.066 18.7); --rainbow-pastel-orange: oklch(0.823 0.059 57.3); --rainbow-pastel-yellow: oklch(0.889 0.068 98.1); --rainbow-pastel-green: oklch(0.826 0.072 149.5); --rainbow-pastel-blue: oklch(0.783 0.056 264.2); --rainbow-pastel-indigo: oklch(0.772 0.062 300.2); --rainbow-pastel-violet: oklch(0.799 0.070 314.4); --timeline-continuous-height: 0.75rem; --timeline-dot-size: 0.875rem; --timeline-dot-size-touch: 1.25rem; --timeline-touch-target: 44px; --timeline-segment-flex: 1 1 0; --timeline-dot-fill: var(--surface-tint-12); --timeline-dot-blur: var(--glass-blur-quiet); --timeline-dot-ring: var(--glass-border-floating); --timeline-dot-tint-current: var(--accent, var(--foreground)); --timeline-dot-tint-completed: var(--success, var(--foreground)); --timeline-dot-check-color: var(--timeline-dot-tint-completed); --timeline-continuous-seam-opacity: 0.25; --timeline-continuous-seam-color: color-mix( in srgb, var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%), transparent ); --timeline-segment-default-gradient: linear-gradient( 90deg, var(--surface-tint-15), var(--surface-tint-25) ); --table-density: 1; --table-cell-px: calc(1rem * var(--table-density)); --table-cell-py: calc(1rem * var(--table-density)); --table-head-h: calc(3rem * var(--table-density)); --table-head-px: calc(1rem * var(--table-density)); }

package/dist/styles/tokens/scheme-motion.css

@@ -1 +1 @@
-:root { color-scheme: light dark; accent-color: var(--accent-color); --font-stack-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif; --font-stack-display: var(--font-stack-text); --font-stack-sans: var(--font-stack-text); --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace; --type-leading-micro: 1.2; --type-leading-caption: 1.3; --type-leading-small: 1.4; --type-leading-body: 1.5; --type-leading-prose: 1.618; --type-leading-heading: 1.2; --type-leading-display: 1.05; --type-tracking-tight: -0.025em; --type-tracking-display: -0.015em; --type-tracking-snug: -0.01em; --type-tracking-normal: 0; --type-tracking-wide: 0.025em; --type-tracking-wider: 0.05em; --type-tracking-caps: 0.1em; --duration-instant: 0.1s; --duration-control: 0.12s; --duration-fast: 0.2s; --duration-normal: 0.3s; --duration-slow: 0.45s; --duration-panel: 0.55s; --duration-xl: 1s; --duration-xxl: 1.5s; --duration-shimmer-fast: 3s; --duration-shimmer: 5s; --duration-metal: 6s; --motion-duration-staged: 320ms; --motion-duration-complete-shimmer: 2.4s; --motion-delay-complete-shimmer: 220ms; --motion-stagger-tight: 40ms; --motion-stagger-default: 80ms; --motion-stagger-relaxed: 120ms; --char-stagger-step: 30ms; --motion-weight: 0.618; --ease-cartoon-punch: linear( 0, -0.012, -0.038 12%, -0.018 18%, 0.18 34%, 0.62 46%, 0.98 56%, 1.14 64%, 1.22 70%, 1.16 78%, 1.06 86%, 1.012 92%, 1 ); --substrate-reveal-duration: 1100ms; --animate-ambient-pulse-duration: 6s; --animate-ambient-pulse-scale-min: 1.0; --animate-ambient-pulse-scale-max: 1.15; --animate-ambient-pulse-easing: var(--ease-apple); --pulse-aura-strength: 0.22; --pulse-aura-breath-min: 0.28; --pulse-aura-breath-max: 0.42; --pulse-aura-opacity-min: 0.55; --pulse-aura-opacity-max: 0.95; --progress-sectioned-height: 0.875rem; --progress-sectioned-track: var(--secondary); --motion-duration-progress-intake: 220ms; --motion-duration-progress-crescendo: 240ms; --motion-duration-progress-indeterminate: 4s; --phase-tint-peak: 6%; --skeleton-breath-duration: 6s; --z-behind: -10; --z-background: 0; --z-content: 10; --z-controls: 20; --z-bar: 30; --z-header: 35; --z-dock: 40; --z-panel: 45; --z-overlay: 50; --z-hovercard: 120; --z-tooltip: 120; --z-popover: 130; --z-modal: 140; --z-fullscreen: 150; --z-toast: 160; --z-toggle: 999; --z-max: 9999; --z-debug: 99999; } .liquid-stage { --motion-weight: 1; } :where([data-reorder], [data-autoplay]) { --motion-weight: 0; } :where(.glass-dock, .glass-drawer, .liquid-stage) { --motion-tempo: 1; } .motion-calm { --transition-liquid-spatial: var(--ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --motion-weight: 0; --ease-cartoon-punch: var(--ease-standard); } }
+:root { color-scheme: light dark; accent-color: var(--accent-color); --font-stack-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif; --font-stack-display: var(--font-stack-text); --font-stack-sans: var(--font-stack-text); --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace; --type-leading-micro: 1.2; --type-leading-caption: 1.3; --type-leading-small: 1.4; --type-leading-body: 1.5; --type-leading-prose: 1.618; --type-leading-heading: 1.2; --type-leading-display: 1.05; --type-tracking-tight: -0.025em; --type-tracking-display: -0.015em; --type-tracking-snug: -0.01em; --type-tracking-normal: 0; --type-tracking-wide: 0.025em; --type-tracking-wider: 0.05em; --type-tracking-caps: 0.1em; --duration-instant: 0.1s; --duration-control: 0.12s; --duration-fast: 0.2s; --duration-normal: 0.3s; --duration-slow: 0.45s; --duration-panel: 0.55s; --duration-xl: 1s; --duration-xxl: 1.5s; --duration-shimmer-fast: 3s; --duration-shimmer: 5s; --duration-metal: 6s; --motion-stagger-default: 80ms; --motion-weight: 0.618; --ease-cartoon-punch: linear( 0, -0.012, -0.038 12%, -0.018 18%, 0.18 34%, 0.62 46%, 0.98 56%, 1.14 64%, 1.22 70%, 1.16 78%, 1.06 86%, 1.012 92%, 1 ); --substrate-reveal-duration: 1100ms; --motion-duration-progress-intake: 220ms; --motion-duration-progress-crescendo: 240ms; --motion-duration-progress-indeterminate: 4s; --z-behind: -10; --z-background: 0; --z-content: 10; --z-controls: 20; --z-bar: 30; --z-header: 35; --z-dock: 40; --z-panel: 45; --z-overlay: 50; --z-hovercard: 120; --z-tooltip: 120; --z-popover: 130; --z-modal: 140; --z-fullscreen: 150; --z-toast: 160; --z-toggle: 999; --z-max: 9999; } .liquid-stage { --motion-weight: 1; } :where([data-reorder], [data-autoplay]) { --motion-weight: 0; } :where(.glass-drawer, .liquid-stage) { --motion-tempo: 1; } .motion-calm { --transition-liquid-spatial: var(--ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --motion-weight: 0; --ease-cartoon-punch: var(--ease-standard); } }