@motion-proto/live-tokens 0.71.0 → 0.72.0

package/src/system/components/SectionDivider.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
-  import { onMount, tick } from 'svelte';
-
   /** Size variant. Each variant owns everything that defines its style:
    *  typography, geometry, colors AND the intrinsic display properties
    *  (alignment, eyebrow visibility, description visibility, hairline
@@ -23,69 +19,6 @@
     eyebrow = undefined,
     variant = 'md',
   }: Props = $props();
-
-  let svgEl: SVGSVGElement | undefined = $state();
-  let svgTextEl: SVGTextElement | undefined = $state();
-  let svgW = $state(0);
-  let svgH = $state(0);
-  let svgX = $state(0);
-  let svgY = $state(0);
-
-  // feMorphology radius and feFlood flood-color are non-presentation attributes
-  // and can't read CSS vars. Read resolved values off the SVG element and push
-  // them onto the filter primitives, refreshing on doc-level inline-var changes.
-  let outlineRadius = $state('0');
-  let outlineColor = $state('#000');
-  const filterId = `sd-outline-${Math.random().toString(36).slice(2, 10)}`;
-
-  function syncFilter(): void {
-    if (!svgEl) return;
-    const cs = getComputedStyle(svgEl);
-    const wPx = parseFloat(cs.getPropertyValue('--_divider-title-outline-width'));
-    outlineRadius = String(Number.isFinite(wPx) ? wPx / 2 : 0);
-    const c = cs.getPropertyValue('--_divider-title-outline-color').trim();
-    outlineColor = c || '#000';
-  }
-
-  function measure(): void {
-    if (!svgTextEl) return;
-    const bb = svgTextEl.getBBox();
-    svgX = bb.x;
-    svgY = bb.y;
-    svgW = Math.ceil(bb.width);
-    svgH = Math.ceil(bb.height);
-  }
-
-  run(() => {
-    if (title) {
-      tick().then(() => { measure(); syncFilter(); });
-    }
-  });
-
-  onMount(() => {
-    let mounted = true;
-    const sync = () => { measure(); syncFilter(); };
-    measure();
-    syncFilter();
-    const obs = new MutationObserver(sync);
-    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
-    // 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>
 
 <!-- In dev, render every variant-controlled block so the editor can flip
@@ -101,31 +34,7 @@
     <div class="title-row">
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
       <span class="title-inline">
-        <svg
-          bind:this={svgEl}
-          class="divider-label"
-          width={svgW || undefined}
-          height={svgH || undefined}
-          viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
-          aria-label={title}
-          role="img"
-        >
-          <defs>
-            <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
-              <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
-              <feFlood flood-color={outlineColor} result="color" />
-              <feComposite in="color" in2="dilated" operator="in" result="outline" />
-              <feComposite in="SourceGraphic" in2="outline" operator="over" />
-            </filter>
-          </defs>
-          <text
-            bind:this={svgTextEl}
-            x="0"
-            y="0"
-            dominant-baseline="hanging"
-            filter="url(#{filterId})"
-          >{title}</text>
-        </svg>
+        <span class="divider-label">{title}</span>
       </span>
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
     </div>
@@ -153,31 +62,7 @@
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
       <!--END_PRUNE-->
       <span class="title-inline">
-        <svg
-          bind:this={svgEl}
-          class="divider-label"
-          width={svgW || undefined}
-          height={svgH || undefined}
-          viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
-          aria-label={title}
-          role="img"
-        >
-          <defs>
-            <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
-              <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
-              <feFlood flood-color={outlineColor} result="color" />
-              <feComposite in="color" in2="dilated" operator="in" result="outline" />
-              <feComposite in="SourceGraphic" in2="outline" operator="over" />
-            </filter>
-          </defs>
-          <text
-            bind:this={svgTextEl}
-            x="0"
-            y="0"
-            dominant-baseline="hanging"
-            filter="url(#{filterId})"
-          >{title}</text>
-        </svg>
+        <span class="divider-label">{title}</span>
       </span>
       <!--PRUNE_FOR sectiondivider hairline == through-label default=none-->
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
@@ -221,7 +106,6 @@
     --sectiondivider-lg-title-font-size: var(--font-size-5xl);
     --sectiondivider-lg-title-line-height: var(--line-height-normal);
     --sectiondivider-lg-title-letter-spacing: var(--letter-spacing-normal);
-    --sectiondivider-lg-title-outline-width: var(--border-width-4);
     --sectiondivider-lg-description-font-family: var(--font-sans);
     --sectiondivider-lg-description-font-weight: var(--font-weight-medium);
     --sectiondivider-lg-description-font-size: var(--font-size-lg);
@@ -243,7 +127,6 @@
     --sectiondivider-lg-description: var(--text-alternate);
     --sectiondivider-lg-eyebrow: var(--text-brand);
     --sectiondivider-lg-border: var(--color-transparent);
-    --sectiondivider-lg-title-outline-color: var(--color-transparent);
     --sectiondivider-lg-hairline-color: var(--border-brand-medium);
 
     /* Medium */
@@ -252,7 +135,6 @@
     --sectiondivider-md-title-font-size: var(--font-size-4xl);
     --sectiondivider-md-title-line-height: var(--line-height-normal);
     --sectiondivider-md-title-letter-spacing: var(--letter-spacing-normal);
-    --sectiondivider-md-title-outline-width: var(--border-width-4);
     --sectiondivider-md-description-font-family: var(--font-sans);
     --sectiondivider-md-description-font-weight: var(--font-weight-medium);
     --sectiondivider-md-description-font-size: var(--font-size-lg);
@@ -274,7 +156,6 @@
     --sectiondivider-md-description: var(--text-secondary);
     --sectiondivider-md-eyebrow: var(--text-tertiary);
     --sectiondivider-md-border: var(--color-transparent);
-    --sectiondivider-md-title-outline-color: var(--color-transparent);
     --sectiondivider-md-hairline-color: var(--border-brand-medium);
 
     /* Small */
@@ -283,7 +164,6 @@
     --sectiondivider-sm-title-font-size: var(--font-size-3xl);
     --sectiondivider-sm-title-line-height: var(--line-height-normal);
     --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
-    --sectiondivider-sm-title-outline-width: var(--border-width-4);
     --sectiondivider-sm-description-font-family: var(--font-sans);
     --sectiondivider-sm-description-font-weight: var(--font-weight-medium);
     --sectiondivider-sm-description-font-size: var(--font-size-5xl);
@@ -305,7 +185,6 @@
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
     --sectiondivider-sm-border: var(--color-transparent);
-    --sectiondivider-sm-title-outline-color: var(--color-transparent);
     --sectiondivider-sm-hairline-color: color-mix(in srgb, var(--border-brand-medium) 50%, transparent);
 
     /* Intrinsic defaults. These keys cascade to `:root` via the editor's
@@ -361,7 +240,6 @@
     --_divider-title-font-size: var(--sectiondivider-lg-title-font-size);
     --_divider-title-line-height: var(--sectiondivider-lg-title-line-height);
     --_divider-title-letter-spacing: var(--sectiondivider-lg-title-letter-spacing);
-    --_divider-title-outline-width: var(--sectiondivider-lg-title-outline-width);
     --_divider-description-font-family: var(--sectiondivider-lg-description-font-family);
     --_divider-description-font-weight: var(--sectiondivider-lg-description-font-weight);
     --_divider-description-font-size: var(--sectiondivider-lg-description-font-size);
@@ -383,7 +261,6 @@
     --_divider-description: var(--sectiondivider-lg-description);
     --_divider-eyebrow: var(--sectiondivider-lg-eyebrow);
     --_divider-border: var(--sectiondivider-lg-border);
-    --_divider-title-outline-color: var(--sectiondivider-lg-title-outline-color);
     --_divider-hairline-color: var(--sectiondivider-lg-hairline-color);
     --_divider-align: var(--sectiondivider-lg-align);
     --_divider-eyebrow-display: var(--sectiondivider-lg-eyebrow-display);
@@ -398,7 +275,6 @@
     --_divider-title-font-size: var(--sectiondivider-md-title-font-size);
     --_divider-title-line-height: var(--sectiondivider-md-title-line-height);
     --_divider-title-letter-spacing: var(--sectiondivider-md-title-letter-spacing);
-    --_divider-title-outline-width: var(--sectiondivider-md-title-outline-width);
     --_divider-description-font-family: var(--sectiondivider-md-description-font-family);
     --_divider-description-font-weight: var(--sectiondivider-md-description-font-weight);
     --_divider-description-font-size: var(--sectiondivider-md-description-font-size);
@@ -420,7 +296,6 @@
     --_divider-description: var(--sectiondivider-md-description);
     --_divider-eyebrow: var(--sectiondivider-md-eyebrow);
     --_divider-border: var(--sectiondivider-md-border);
-    --_divider-title-outline-color: var(--sectiondivider-md-title-outline-color);
     --_divider-hairline-color: var(--sectiondivider-md-hairline-color);
     --_divider-align: var(--sectiondivider-md-align);
     --_divider-eyebrow-display: var(--sectiondivider-md-eyebrow-display);
@@ -435,7 +310,6 @@
     --_divider-title-font-size: var(--sectiondivider-sm-title-font-size);
     --_divider-title-line-height: var(--sectiondivider-sm-title-line-height);
     --_divider-title-letter-spacing: var(--sectiondivider-sm-title-letter-spacing);
-    --_divider-title-outline-width: var(--sectiondivider-sm-title-outline-width);
     --_divider-description-font-family: var(--sectiondivider-sm-description-font-family);
     --_divider-description-font-weight: var(--sectiondivider-sm-description-font-weight);
     --_divider-description-font-size: var(--sectiondivider-sm-description-font-size);
@@ -457,7 +331,6 @@
     --_divider-description: var(--sectiondivider-sm-description);
     --_divider-eyebrow: var(--sectiondivider-sm-eyebrow);
     --_divider-border: var(--sectiondivider-sm-border);
-    --_divider-title-outline-color: var(--sectiondivider-sm-title-outline-color);
     --_divider-hairline-color: var(--sectiondivider-sm-hairline-color);
     --_divider-align: var(--sectiondivider-sm-align);
     --_divider-eyebrow-display: var(--sectiondivider-sm-eyebrow-display);
@@ -535,27 +408,14 @@
       var(--sectiondivider-sm-eyebrow-padding-left, var(--sectiondivider-sm-eyebrow-padding, 0));
   }
 
-  /* Title rendered as a single <text> through a feMorphology dilate + flood +
-     composite filter. Dilating the alpha treats all glyphs as one combined
-     shape, so neighbor-glyph overlaps (CQ, AC etc.) merge into a single
-     outline instead of double-stacking. */
-  svg.divider-label {
+  .divider-label {
     display: block;
-    overflow: visible;
     color: var(--_divider-title);
-    /* The title is type that happens to be drawn as an SVG, so Sketch mode
-       reads it as one glyph and pushes it as far as it pushes a 16px icon.
-       At heading size any travel pulls the letters apart, so it stays crisp.
-       `none` drops the ink mask along with the displacement. */
-    --sketch-icon-off: none;
-  }
-  svg.divider-label text {
     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;
   }
 
   .title-row {

package/src/system/components/FloatingTokenTags.css

@@ -1,284 +0,0 @@
-/*
- * Decoupled from the design system: pills, knots, strings, balls, and
- * animations are hardcoded so token edits don't repaint our chrome. The
- * exceptions are intentional and ARE the demo: the central box's
- * surface/radius/border (set inline), the dropdown (rendered through
- * <MenuSelect>), elevation, which reads from the --shadow-* scale, and the
- * zap colour, which tracks --text-accent so the beam stays on-theme.
- * File is global; keep selectors `ftt-` prefixed.
- */
-
-.ftt-stage {
-  --ftt-contrast-color: var(--color-white);
-  --ftt-zap-color: var(--text-accent);
-  --ftt-string-opacity: 0.5;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  /* No overflow clipping: the bottom tag's dropdown must extend past the
-     stage edge. */
-}
-
-/* --- Central box ---------------------------------------------------------- */
-.ftt-box {
-  --ftt-box-contrast-color: var(--color-white);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% -50%;
-  box-sizing: border-box;
-  padding: 0.75rem 1.5rem;
-  display: inline-flex;
-  width: 12rem;
-  align-items: center;
-  justify-content: center;
-  /* Defaults; overridden inline from the active token bindings. */
-  background: color-mix(in srgb, #264542 50%, transparent);
-  border-style: solid;
-  border-color: #52726e;
-  border-width: 2px;
-  border-radius: 0.25rem;
-  box-shadow: var(--shadow-md);
-  transition:
-    background    300ms ease,
-    border-color  300ms ease,
-    border-width  300ms ease,
-    border-radius 300ms ease;
-  z-index: 1;
-}
-
-.ftt-box-label {
-  font-family: Manrope, system-ui, -apple-system, sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--ftt-box-contrast-color);
-  white-space: nowrap;
-  user-select: none;
-  pointer-events: none;
-}
-
-.ftt-box.ftt-bloop {
-  animation: ftt-bloop 480ms ease-out;
-}
-
-@keyframes ftt-bloop {
-  0%   { scale: 1;    filter: brightness(1); }
-  30%  { scale: 1.08; filter: brightness(1.8) saturate(1.4); }
-  100% { scale: 1;    filter: brightness(1); }
-}
-
-/* --- Kite strings --------------------------------------------------------- */
-.ftt-strings {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.ftt-string {
-  stroke: var(--ftt-contrast-color);
-  stroke-width: 2;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-  opacity: var(--ftt-string-opacity);
-  transition: opacity 150ms ease, stroke 150ms ease;
-}
-
-.ftt-string.ftt-live {
-  stroke: var(--ftt-zap-color);
-  opacity: 1;
-}
-
-/* --- Anchor knots --------------------------------------------------------- */
-.ftt-knot {
-  position: absolute;
-  width: 0.625rem;
-  height: 0.625rem;
-  translate: -50% -50%;
-  border-radius: 9999px;
-  background: #c4bcb6;
-  border: 1px solid #f0eae4;
-  pointer-events: none;
-  z-index: 3;
-}
-
-/* --- Energy ball ---------------------------------------------------------- */
-/* Shares --ftt-zap-color with `.ftt-string.ftt-live` so the beam reads as a
-   continuous trail, not a colour-shifting projectile. */
-.ftt-energy-ball {
-  position: absolute;
-  width: 0.875rem;
-  height: 0.875rem;
-  translate: -50% -50%;
-  border-radius: 9999px;
-  background: var(--ftt-zap-color);
-  box-shadow:
-    0 0 8px  2px var(--ftt-zap-color),
-    0 0 18px 4px var(--ftt-zap-color);
-  pointer-events: none;
-  opacity: 0;
-  z-index: 6;
-}
-
-/* --- Floating tag wrapper ------------------------------------------------- */
-.ftt-float {
-  position: absolute;
-  translate: -50% -50%;
-  rotate: var(--ftt-rot, 0deg);
-  animation: ftt-bob var(--ftt-bob-duration, 7s) ease-in-out infinite;
-  z-index: 4;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  width: 14rem;
-}
-
-/* Lift open tag so its dropdown paints over sibling tags. */
-.ftt-float.ftt-open {
-  z-index: 20;
-}
-
-/* Bottom-placement chips mirror the top arc: chip first, eyebrow on the
-   outer (lower) side. Dropdown opens upward toward the box so the menu
-   doesn't fall off the stage. */
-.ftt-float[data-placement="bottom"] {
-  flex-direction: column-reverse;
-}
-
-/* Pivot the tilt around the chip's right semicircular cap. The chip is
-   ~1.84rem tall so the cap center sits ~0.9rem from the chip's right edge
-   and ~0.9rem above its bottom — which (since the chip is the widest, last
-   in-flow element of the wrapper) coincides with `calc(100% - 0.9rem)` on
-   both axes of the wrapper. */
-.ftt-float[data-pivot="right-cap"] {
-  transform-origin: calc(100% - 0.9rem) calc(100% - 0.9rem);
-}
-
-@keyframes ftt-bob {
-  0%, 100% { translate: -50% -50%; }
-  50%      { translate: -50% calc(-50% + var(--ftt-bob-distance, -8px)); }
-}
-
-/* --- Property label paired with each tag ---------------------------------- */
-/* Sits on the outer side of the chip: above for top-placement chips, below
-   for bottom-placement chips (see `.ftt-float[data-placement="bottom"]`). */
-.ftt-float-property {
-  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-/* --- Tag pill ------------------------------------------------------------- */
-/* Hardcoded (not the Badge component) so badge-* token edits don't repaint. */
-.ftt-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.375rem 0.75rem;
-  /* Polished chrome, not brushed steel: the bands keep their spacing but sit
-     high in the scale, so the pill stays bright against a cream page. Keep
-     the darkest stop ≥ #8f9090 or the black label loses AA. */
-  background: linear-gradient(
-    135deg,
-    #fbfbfb 0%,
-    #c9cbcb 38%,
-    #eff0f0 62%,
-    #b6b8b8 100%
-  );
-  color: #000;
-  border: 1px solid rgba(86, 96, 104, 0.45);
-  border-radius: 9999px;
-  box-shadow: var(--shadow-md);
-  font-family: Manrope, system-ui, -apple-system, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.1;
-  white-space: nowrap;
-}
-
-.ftt-tag-icon {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.875em;
-}
-
-.ftt-tag-label {
-  display: inline-block;
-}
-
-/* --- Tag trigger (draggable button wrapping the pill) --------------------- */
-.ftt-tag-trigger {
-  pointer-events: auto;
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: grab;
-  touch-action: none;
-  transition: filter 150ms ease, scale 150ms ease;
-}
-.ftt-tag-trigger:hover {
-  filter: brightness(1.2);
-  scale: 1.04;
-}
-.ftt-float.ftt-dragging .ftt-tag-trigger {
-  cursor: grabbing;
-}
-.ftt-float.ftt-dragging {
-  animation: none; /* pause bob while dragging */
-  z-index: 30;
-}
-.ftt-tag-trigger:focus-visible {
-  outline: 2px solid var(--ftt-zap-color);
-  outline-offset: 3px;
-  border-radius: 9999px;
-}
-
-.ftt-float.ftt-flash .ftt-tag-trigger {
-  animation: ftt-tag-flash 500ms ease-out;
-}
-
-@keyframes ftt-tag-flash {
-  0%   { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
-  25%  { scale: 1.14; filter: brightness(1.8) drop-shadow(0 0 14px #fff5f0); }
-  100% { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
-}
-
-/* --- Chip host ------------------------------------------------------------ */
-/* Wraps the chip-trigger and (when open) the dropdown so the dropdown can
-   anchor directly to the chip's edges, not the float wrapper's. Without
-   this, `top: 100%` lands at the wrapper bottom — which is the eyebrow for
-   `data-placement="bottom"` — and the menu drifts off the chip. */
-.ftt-chip-host {
-  position: relative;
-  display: inline-flex;
-}
-
-/* --- Dropdown menu -------------------------------------------------------- */
-/* The wrap handles position/stacking only; the surface lives on
-   <MenuSelect> so menuselect-* token edits reshape the in-flight UI. */
-.ftt-dropdown-wrap {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 50%;
-  translate: -50% 0;
-  pointer-events: auto;
-  z-index: 10;
-}
-
-/* --- Reduced motion ------------------------------------------------------- */
-@media (prefers-reduced-motion: reduce) {
-  .ftt-float {
-    animation: none;
-  }
-  .ftt-box.ftt-bloop,
-  .ftt-float.ftt-flash .ftt-tag-trigger {
-    animation: none;
-  }
-}