@motion-proto/live-tokens 0.49.1 → 0.52.1

package/src/system/components/Image.svelte

@@ -17,6 +17,8 @@
     /** Content images default to lazy; pass `'eager'` for above-the-fold heroes. */
     loading?: 'lazy' | 'eager';
     decoding?: 'async' | 'sync' | 'auto';
+    /** Editor preview hook: paint the hover transform without pointer input. */
+    forceHover?: boolean;
   }
 
   let {
@@ -29,7 +31,8 @@
     srcset = undefined,
     sizes = undefined,
     loading = 'lazy',
-    decoding = 'async'
+    decoding = 'async',
+    forceHover = false,
   }: Props = $props();
 
   const variantHeights: Record<string, string | undefined> = {
@@ -60,6 +63,7 @@
 
 <div
   class="image"
+  class:force-hover={forceHover}
   style:height={resolvedHeight}
   style:--image-zoom-hover={contentHover}
   style:--image-grow-hover={frameHover}
@@ -100,11 +104,13 @@
     transition: transform var(--duration-300) var(--ease-out-cubic);
   }
 
-  .image:hover {
+  .image:hover,
+  .image.force-hover {
     transform: var(--image-grow-hover);
   }
 
-  .image:hover img {
+  .image:hover img,
+  .image.force-hover img {
     transform: var(--image-zoom-hover);
   }
 </style>

package/src/system/components/ImageLightbox.svelte

@@ -585,6 +585,8 @@
     style:--imagelightbox-tile-object-fit={fit}
     type="button"
     aria-label={cover?.alt ? `Expand image: ${cover.alt}` : 'Expand image'}
+    aria-haspopup="dialog"
+    aria-expanded={open}
     onclick={openLightbox}
   >
     <img src={cover?.src} alt={cover?.alt} draggable="false" onload={onCoverLoad} />

package/src/system/components/SectionDivider.svelte

@@ -63,11 +63,28 @@
   });
 
   onMount(() => {
+    let mounted = true;
+    const sync = () => { measure(); syncFilter(); };
     measure();
     syncFilter();
-    const obs = new MutationObserver(() => { measure(); syncFilter(); });
+    const obs = new MutationObserver(sync);
     obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-    return () => obs.disconnect();
+
+    // A font-family variable changes before its webfont necessarily finishes
+    // loading. Re-run getBBox when the real face becomes available so the SVG
+    // viewBox and outline do not stay sized for the fallback font.
+    const fonts = document.fonts;
+    const onFontsLoaded = () => {
+      if (mounted) sync();
+    };
+    fonts?.addEventListener('loadingdone', onFontsLoaded);
+    void fonts?.ready.then(onFontsLoaded);
+
+    return () => {
+      mounted = false;
+      obs.disconnect();
+      fonts?.removeEventListener('loadingdone', onFontsLoaded);
+    };
   });
 </script>
 
@@ -531,6 +548,7 @@
     font-family: var(--_divider-title-font-family);
     font-weight: var(--_divider-title-font-weight);
     font-size: var(--_divider-title-font-size);
+    line-height: var(--_divider-title-line-height);
     letter-spacing: var(--_divider-title-letter-spacing);
     fill: currentColor;
   }

package/src/system/components/SideNavigation.svelte

@@ -124,7 +124,7 @@
     if (forceHoverPart !== 'item') return null;
     const s = sections[0];
     if (!s || s.items.length === 0) return null;
-    return (s.items[1] ?? s.items[0]).path;
+    return s.items.find((item) => item.path !== currentPath)?.path ?? s.items[0].path;
   });
 
   let titleActive = $derived(forceActivePart === 'title' || currentPath === '');
@@ -471,6 +471,8 @@
     --_surface: var(--sidenavigation-title-default-surface);
     --_border: var(--sidenavigation-title-default-border);
     --_border-width: var(--sidenavigation-title-default-border-width);
+    --_indicator: var(--sidenavigation-title-default-accent);
+    --_indicator-width: var(--sidenavigation-title-default-accent-width);
     --_padding: var(--sidenavigation-title-default-padding);
     --_label: var(--sidenavigation-title-default-label);
     --_label-family: var(--sidenavigation-title-default-label-font-family);
@@ -490,6 +492,8 @@
     justify-content: center;
     gap: var(--sidenavigation-title-gap);
     background: var(--_surface);
+    border: var(--_border-width) solid var(--_border);
+    border-left: var(--_indicator-width) solid var(--_indicator);
     border-radius: var(--sidenavigation-title-radius);
     @include themed-padding(--_padding);
     transition: background var(--duration-150);
@@ -500,6 +504,8 @@
     --_surface: var(--sidenavigation-title-hover-surface);
     --_border: var(--sidenavigation-title-hover-border);
     --_border-width: var(--sidenavigation-title-hover-border-width);
+    --_indicator: var(--sidenavigation-title-hover-accent);
+    --_indicator-width: var(--sidenavigation-title-hover-accent-width);
     --_padding: var(--sidenavigation-title-hover-padding);
     --_label: var(--sidenavigation-title-hover-label);
     --_label-family: var(--sidenavigation-title-hover-label-font-family);
@@ -512,6 +518,8 @@
     --_surface: var(--sidenavigation-title-active-surface);
     --_border: var(--sidenavigation-title-active-border);
     --_border-width: var(--sidenavigation-title-active-border-width);
+    --_indicator: var(--sidenavigation-title-active-accent);
+    --_indicator-width: var(--sidenavigation-title-active-accent-width);
     --_padding: var(--sidenavigation-title-active-padding);
     --_label: var(--sidenavigation-title-active-label);
     --_label-family: var(--sidenavigation-title-active-label-font-family);
@@ -530,6 +538,7 @@
 
   .sn-title-label {
     background: var(--sidenavigation-title-label-surface);
+    border: var(--sidenavigation-title-label-border-width) solid var(--sidenavigation-title-label-border);
     border-radius: var(--sidenavigation-title-label-radius);
     @include themed-padding(--sidenavigation-title-label-padding);
     color: var(--_label);
@@ -652,6 +661,11 @@
     --_surface: var(--sidenavigation-section-hover-surface);
     --_indicator: var(--sidenavigation-section-hover-accent);
     --_indicator-width: var(--sidenavigation-section-hover-accent-width);
+    --collapsiblesection-chromeless-default-label: var(--sidenavigation-section-hover-text);
+    --collapsiblesection-chromeless-default-label-font-family: var(--sidenavigation-section-hover-text-font-family);
+    --collapsiblesection-chromeless-default-label-font-size: var(--sidenavigation-section-hover-text-font-size);
+    --collapsiblesection-chromeless-default-label-font-weight: var(--sidenavigation-section-hover-text-font-weight);
+    --collapsiblesection-chromeless-default-label-line-height: var(--sidenavigation-section-hover-text-line-height);
   }
   .sn-section-header.active {
     --_surface: var(--sidenavigation-section-active-surface);

package/src/system/internal/backgroundContrast.ts

@@ -1,8 +1,11 @@
+import { parseOklchCss, oklchToRgb255 } from './oklch';
+
 export type ContrastColorToken = '--color-black' | '--color-white';
 
 type Rgb = { r: number; g: number; b: number };
 
 const HEX_RE = /#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/gi;
+const OKLCH_RE = /oklch\(\s*[\d.]+%?\s+[\d.]+%?\s+[\d.]+(?:deg)?\s*\)/gi;
 const RGB_RE = /rgba?\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)(?:\s*[,/]\s*[\d.]+%?)?\s*\)/gi;
 
 function channel(value: string): number {
@@ -24,6 +27,10 @@ function parseHex(hex: string): Rgb {
 function colorsIn(background: string): Rgb[] {
   const colors: Rgb[] = [];
   for (const match of background.matchAll(HEX_RE)) colors.push(parseHex(match[0]));
+  for (const match of background.matchAll(OKLCH_RE)) {
+    const parsed = parseOklchCss(match[0]);
+    if (parsed) colors.push(oklchToRgb255(parsed.l, parsed.c, parsed.h));
+  }
   for (const match of background.matchAll(RGB_RE)) {
     colors.push({ r: channel(match[1]), g: channel(match[2]), b: channel(match[3]) });
   }

package/src/system/internal/oklch.ts

@@ -0,0 +1,189 @@
+// OKLCH color space conversions — hand-rolled, no dependencies
+// Pipeline: sRGB hex → linear RGB → OKLab (via M1×M2 + cube root) → OKLCH (polar)
+
+export interface Oklch {
+  l: number; // 0..1
+  c: number; // 0..~0.4
+  h: number; // 0..360
+}
+
+// --- sRGB gamma ---
+
+function srgbToLinear(c: number): number {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function linearToSrgb(c: number): number {
+  return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+// --- Hex ↔ linear RGB ---
+
+function hexToLinearRgb(hex: string): [number, number, number] {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  return [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
+}
+
+function linearRgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number) => {
+    const v = Math.round(Math.max(0, Math.min(1, linearToSrgb(c))) * 255);
+    return v.toString(16).padStart(2, '0');
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// --- Linear RGB ↔ OKLab ---
+// Uses the two-matrix approach from Björn Ottosson's blog
+
+function linearRgbToOklab(r: number, g: number, b: number): [number, number, number] {
+  const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+
+  const l = Math.cbrt(l_);
+  const m = Math.cbrt(m_);
+  const s = Math.cbrt(s_);
+
+  return [
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+  ];
+}
+
+function oklabToLinearRgb(L: number, a: number, b: number): [number, number, number] {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  return [
+    +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
+  ];
+}
+
+// --- OKLab ↔ OKLCH ---
+
+function oklabToOklch(L: number, a: number, b: number): Oklch {
+  const c = Math.sqrt(a * a + b * b);
+  let h = (Math.atan2(b, a) * 180) / Math.PI;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+
+function oklchToOklab(l: number, c: number, h: number): [number, number, number] {
+  const hRad = (h * Math.PI) / 180;
+  return [l, c * Math.cos(hRad), c * Math.sin(hRad)];
+}
+
+// --- Public API ---
+
+export function hexToOklch(hex: string): Oklch {
+  const [r, g, b] = hexToLinearRgb(hex);
+  const [L, a, bVal] = linearRgbToOklab(r, g, b);
+  return oklabToOklch(L, a, bVal);
+}
+
+export function oklchToHex(l: number, c: number, h: number): string {
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+  return linearRgbToHex(r, g, bVal);
+}
+
+function isInGamut(r: number, g: number, b: number): boolean {
+  const eps = 0.0001;
+  return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
+}
+
+/** The clamped sRGB projection: reduce chroma into gamut, then serialize to hex.
+ *  This is the correct projection for unclamped stored intent — naive
+ *  `oklchToHex` per-channel clips (shifting hue), this preserves hue and L. */
+export function oklchToHexClamped(l: number, c: number, h: number): string {
+  const g = gamutClamp(l, c, h);
+  return oklchToHex(g.l, g.c, g.h);
+}
+
+export function gamutClamp(l: number, c: number, h: number): Oklch {
+  // Clamp lightness
+  if (l <= 0) return { l: 0, c: 0, h };
+  if (l >= 1) return { l: 1, c: 0, h };
+
+  // Binary search: reduce chroma until in sRGB gamut
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+
+  if (isInGamut(r, g, bVal)) return { l, c, h };
+
+  let lo = 0;
+  let hi = c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    const [La, aa, ba] = oklchToOklab(l, mid, h);
+    const [rr, gg, bb] = oklabToLinearRgb(La, aa, ba);
+    if (isInGamut(rr, gg, bb)) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+  return { l, c: lo, h };
+}
+
+// --- CSS serialization + parsing ---
+
+function trim(value: number, decimals: number): string {
+  return Number(value.toFixed(decimals)).toString();
+}
+
+export function oklchToCss(l: number, c: number, h: number): string {
+  const cs = trim(c, 4);
+  // Hue is meaningless without chroma, and the OKLab round trip leaves noise
+  // there (#ffffff lands on h≈89.88). Pin it so achromatic values read as
+  // achromatic instead of arbitrary.
+  return `oklch(${trim(l, 4)} ${cs} ${cs === '0' ? '0' : trim(h, 2)})`;
+}
+
+/** The clamped sRGB projection as an `oklch()` string — the CSS counterpart of
+ *  `oklchToHexClamped`. Clamping keeps flip-day output visually identical to
+ *  the hex it replaces; emitting unclamped (wide-gamut) values is a separate
+ *  decision. */
+export function oklchToCssClamped(l: number, c: number, h: number): string {
+  const g = gamutClamp(l, c, h);
+  return oklchToCss(g.l, g.c, g.h);
+}
+
+const OKLCH_RE = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*\)$/i;
+const HEX6_RE = /^#[0-9a-f]{6}$/i;
+
+export function parseOklchCss(value: string): Oklch | null {
+  const m = OKLCH_RE.exec(value.trim());
+  if (!m) return null;
+  const l = Number.parseFloat(m[1]) / (m[2] === '%' ? 100 : 1);
+  // Percentage chroma is relative to 0.4 per the CSS Color 4 definition.
+  const c = Number.parseFloat(m[3]) * (m[4] === '%' ? 0.004 : 1);
+  return { l, c, h: Number.parseFloat(m[5]) };
+}
+
+/** Input boundary for color strings arriving from CSS: accepts the `oklch()`
+ *  this system now emits and the 6-digit hex it emitted before the flip, so
+ *  themes promoted either side of it still reconcile. */
+export function cssColorToOklch(value: string): Oklch | null {
+  const raw = value.trim();
+  if (HEX6_RE.test(raw)) return hexToOklch(raw);
+  return parseOklchCss(raw);
+}
+
+export function oklchToRgb255(l: number, c: number, h: number): { r: number; g: number; b: number } {
+  const clamped = gamutClamp(l, c, h);
+  const [L, a, bVal] = oklchToOklab(clamped.l, clamped.c, clamped.h);
+  const [r, g, b] = oklabToLinearRgb(L, a, bVal);
+  const to255 = (channel: number) => Math.round(Math.max(0, Math.min(1, linearToSrgb(channel))) * 255);
+  return { r: to255(r), g: to255(g), b: to255(b) };
+}

package/src/system/styles/fonts.css

@@ -4,11 +4,11 @@
 /* Adobe Typekit — fira-code */
 @import url('https://use.typekit.net/jes8oow.css');
 
-/* Google Fonts — Manrope */
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
-
-/* Google Fonts — Arvo */
-@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
 /* Google Fonts — GFS Didot */
 @import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
+
+/* Google Fonts — Comfortaa */
+@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
+
+/* Google Fonts — Figtree */
+@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap');