@motion-proto/live-tokens 0.48.0 → 0.48.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.48.1 — Demo typography follows the theme
+
+### Fixed
+
+- **The demo hero follows semantic typography.** The subtitle and supporting
+  tagline now take their font families from the heading and body text-style
+  tokens, so changing the theme's primary font pairing repaints the whole hero.
+
+- **Floating-tag connectors stay visible.** Connector strings choose the
+  black or white invariant with the stronger contrast against the current page
+  background, including backgrounds with multiple gradient stops.
+
 ## 0.48.0 — Themes are documents
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.48.0",
+  "version": "0.48.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/system/components/FloatingTokenTags.css

@@ -7,6 +7,7 @@
  */
 
 .ftt-stage {
+  --ftt-contrast-color: var(--color-white);
   position: relative;
   width: 100%;
   height: 100%;
@@ -73,7 +74,7 @@
 }
 
 .ftt-string {
-  stroke: #d4ccc6;
+  stroke: var(--ftt-contrast-color);
   stroke-width: 2;
   stroke-linecap: round;
   vector-effect: non-scaling-stroke;

package/src/system/components/FloatingTokenTags.svelte

@@ -35,6 +35,7 @@
 <script lang="ts">
   import MenuSelect from './MenuSelect.svelte';
   import { SvelteMap } from 'svelte/reactivity';
+  import { contrastTokenForBackground } from '../internal/backgroundContrast';
   // `.ftt-tag` is hand-rolled (not Badge) so editing badge-* tokens doesn't
   // repaint the playground. The dropdown uses MenuSelect on purpose.
   import './FloatingTokenTags.css';
@@ -189,10 +190,22 @@
     return name ? `var(${name})` : undefined;
   }
 
+  let lastPageBackground = '';
+  function syncConnectorContrast() {
+    if (!stageEl) return;
+    const styles = getComputedStyle(stageEl);
+    const pageBackground = styles.getPropertyValue('--page-bg').trim();
+    if (pageBackground === lastPageBackground) return;
+    lastPageBackground = pageBackground;
+    const token = contrastTokenForBackground(pageBackground);
+    stageEl.style.setProperty('--ftt-contrast-color', `var(${token})`);
+  }
+
   // Kite strings and energy balls are recomputed each frame from the box's
   // measured rect so intrinsic sizing drives anchor placement.
   function syncFrame() {
     if (!stageEl) return;
+    syncConnectorContrast();
     const stageRect = stageEl.getBoundingClientRect();
     if (stageRect.width === 0 || stageRect.height === 0) return;
 

package/src/system/internal/backgroundContrast.ts

@@ -0,0 +1,54 @@
+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 RGB_RE = /rgba?\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)(?:\s*[,/]\s*[\d.]+%?)?\s*\)/gi;
+
+function channel(value: string): number {
+  const parsed = Number.parseFloat(value);
+  return value.endsWith('%') ? parsed * 2.55 : parsed;
+}
+
+function parseHex(hex: string): Rgb {
+  const full = hex.length <= 4
+    ? hex.slice(1).split('').map(part => part + part).join('')
+    : hex.slice(1, 7);
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16),
+  };
+}
+
+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(RGB_RE)) {
+    colors.push({ r: channel(match[1]), g: channel(match[2]), b: channel(match[3]) });
+  }
+  return colors;
+}
+
+function linearChannel(value: number): number {
+  const srgb = Math.max(0, Math.min(255, value)) / 255;
+  return srgb <= 0.04045 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance({ r, g, b }: Rgb): number {
+  return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}
+
+/**
+ * Pick the invariant black/white token with the stronger minimum contrast
+ * against every explicit colour in a solid or gradient page background.
+ */
+export function contrastTokenForBackground(background: string): ContrastColorToken {
+  const colors = colorsIn(background);
+  if (colors.length === 0) return '--color-white';
+
+  const luminances = colors.map(luminance);
+  const blackMinimum = Math.min(...luminances.map(value => (value + 0.05) / 0.05));
+  const whiteMinimum = Math.min(...luminances.map(value => 1.05 / (value + 0.05)));
+  return blackMinimum >= whiteMinimum ? '--color-black' : '--color-white';
+}