@motion-proto/live-tokens 0.80.0 → 0.82.0

package/src/demo/sections/SectionKit.svelte

@@ -0,0 +1,410 @@
+<script lang="ts">
+  import Button from '../../system/components/Button.svelte';
+  import SectionDivider from '../../system/components/SectionDivider.svelte';
+  import SegmentedControl from '../../system/components/SegmentedControl.svelte';
+  import Panel from '../../system/components/Panel.svelte';
+  import Section from '../Section.svelte';
+
+  let { prose = true }: { prose?: boolean } = $props();
+
+  type Override = 'shape' | 'color';
+
+  let shape = $state(false);
+  let color = $state(false);
+  // Tracks the most-recently-applied override so the SegmentedControl can
+  // single-highlight it while the underlying applied set stays additive.
+  let lastApplied = $state<Override | null>(null);
+
+  const segments = [
+    { value: 'default', label: 'Default', icon: 'fas fa-circle' },
+    { value: 'shape',   label: 'Shape',   icon: 'fas fa-shapes' },
+    { value: 'color',   label: 'Color',   icon: 'fas fa-droplet' },
+  ];
+
+  const variants = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'] as const;
+
+  const shapeOverride: Record<string, string> = (() => {
+    const out: Record<string, string> = {};
+    for (const v of variants) {
+      out[`--button-${v}-radius`] = 'var(--radius-sm)';
+      out[`--button-${v}-border-width`] = 'var(--border-width-2)';
+      out[`--button-${v}-text-font-family`] = 'var(--font-serif)';
+      out[`--button-${v}-text-font-size`] = 'var(--font-size-2xl)';
+      out[`--button-${v}-padding`] = 'var(--space-6)';
+    }
+    return out;
+  })();
+
+  const colorOverride: Record<string, string> = {
+    '--button-primary-surface': 'var(--surface-special-high)',
+    '--button-primary-border': 'var(--border-special)',
+    '--button-primary-hover-surface': 'var(--surface-special-higher)',
+    '--button-primary-hover-border': 'var(--border-special-strong)',
+
+    '--button-outline-border': 'var(--border-special)',
+    '--button-outline-text': 'var(--text-special)',
+    '--button-outline-hover-border': 'var(--border-special-strong)',
+
+    '--button-success-surface': 'var(--surface-accent-low)',
+    '--button-success-border': 'var(--border-accent)',
+    '--button-success-text': 'var(--text-accent)',
+    '--button-success-hover-surface': 'var(--surface-accent-higher)',
+    '--button-success-hover-border': 'var(--border-accent-strong)',
+
+    '--button-warning-surface': 'var(--surface-info-low)',
+    '--button-warning-border': 'var(--border-info)',
+    '--button-warning-text': 'var(--text-info)',
+    '--button-warning-hover-surface': 'var(--surface-info-high)',
+    '--button-warning-hover-border': 'var(--border-info-medium)',
+
+    '--button-danger-surface': 'var(--surface-brand-low)',
+    '--button-danger-border': 'var(--border-brand)',
+    '--button-danger-text': 'var(--text-brand)',
+    '--button-danger-hover-surface': 'var(--surface-brand-high)',
+    '--button-danger-hover-border': 'var(--border-brand-medium)',
+  };
+
+  let stageStyle = $derived.by(() => {
+    const merged: Record<string, string> = {};
+    if (shape) Object.assign(merged, shapeOverride);
+    if (color) Object.assign(merged, colorOverride);
+    return Object.entries(merged)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join('; ');
+  });
+
+  // The highlighted segment tracks the most-recently-applied override that
+  // is still on. When the last-applied override gets toggled off, the
+  // highlight falls back to whatever else is still on, or Default.
+  let activeSegment = $derived.by(() => {
+    if (lastApplied === 'shape' && shape) return 'shape';
+    if (lastApplied === 'color' && color) return 'color';
+    if (shape) return 'shape';
+    if (color) return 'color';
+    return 'default';
+  });
+
+  function handleSelect(v: string) {
+    if (v === 'default') {
+      shape = false;
+      color = false;
+      lastApplied = null;
+      return;
+    }
+    if (v === 'shape') {
+      shape = !shape;
+      lastApplied = shape ? 'shape' : color ? 'color' : null;
+      return;
+    }
+    if (v === 'color') {
+      color = !color;
+      lastApplied = color ? 'color' : shape ? 'shape' : null;
+    }
+  }
+</script>
+
+<Section
+  class="kit-section"
+  title="The Kit"
+  eyebrow="What's inside"
+  description="A basic set of design system components connected to a token library."
+  gap="var(--space-8)"
+>
+  <div class="kit-grid">
+    <div class="kit-item kit-lead sketch-container">
+      <div class="kit-head sketch-surface">
+        <i class="fas fa-pen-ruler kit-icon"></i>
+        <span class="kit-title">Live editor</span>
+      </div>
+      <span class="kit-rule sketch-rule" aria-hidden="true"></span>
+      <div class="kit-body" class:prose>
+        <p>
+          Edit tokens and components on top of the page and watch every change cascade immediately.
+        </p>
+      </div>
+    </div>
+
+    <div class="kit-item">
+      <div class="kit-head">
+        <i class="fas fa-palette kit-icon"></i>
+        <span class="kit-title">Design tokens</span>
+      </div>
+      <span class="kit-rule sketch-rule" aria-hidden="true"></span>
+      <div class="kit-body" class:prose><p>A complete set of atomic CSS variables for styling.</p></div>
+    </div>
+
+    <div class="kit-item">
+      <div class="kit-head">
+        <i class="fas fa-puzzle-piece kit-icon"></i>
+        <span class="kit-title">Component library</span>
+      </div>
+      <span class="kit-rule sketch-rule" aria-hidden="true"></span>
+      <div class="kit-body" class:prose><p>A customizable set of components linked to the tokens.</p></div>
+    </div>
+
+    <div class="kit-item">
+      <div class="kit-head">
+        <i class="fas fa-cube kit-icon"></i>
+        <span class="kit-title">Ships as CSS</span>
+      </div>
+      <span class="kit-rule sketch-rule" aria-hidden="true"></span>
+      <div class="kit-body" class:prose><p>Standard output. The editor stays in development.</p></div>
+    </div>
+  </div>
+
+  <div class="kit-preview">
+    <div class="swap-block">
+      <div class="swap-control">
+        <SectionDivider title="Swap tokens with a click" variant="sm" />
+        <SegmentedControl {segments} value={activeSegment} onchange={handleSelect} />
+      </div>
+
+      <Panel style={stageStyle}>
+        <div class="stage">
+          <span class="stage-eyebrow">Token demo</span>
+          <div class="swap-row">
+            <div class="stage-cell"><Button>Primary</Button></div>
+            <div class="stage-cell"><Button variant="secondary">Secondary</Button></div>
+            <div class="stage-cell"><Button variant="outline">Outline</Button></div>
+            <div class="stage-cell"><Button variant="success" icon="fas fa-check">Success</Button></div>
+            <div class="stage-cell"><Button variant="warning" icon="fas fa-bolt">Warning</Button></div>
+            <div class="stage-cell"><Button variant="danger" icon="fas fa-xmark">Danger</Button></div>
+          </div>
+        </div>
+      </Panel>
+    </div>
+  </div>
+</Section>
+
+<style lang="scss">
+  @use '../../system/styles/slot-prose' as *;
+
+  /* The section spans page columns 2–11, so its tracks are the page grid
+     minus one column on each side; each item then lands on exactly three page
+     columns and the row stops at column 9, leaving column 10 open on the right. */
+  .kit-grid {
+    display: grid;
+    grid-template-columns: repeat(calc(var(--columns-count) - 2), 1fr);
+    column-gap: var(--columns-gutter);
+    row-gap: var(--space-32);
+  }
+
+  .kit-item {
+    grid-column: span 3;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .kit-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-12);
+    padding: 0 0 var(--space-12);
+  }
+
+  /* Title, body and icon mirror the Card typography used in the Layers section. */
+  .kit-icon {
+    font-size: var(--icon-size-2xl);
+    color: var(--text-primary);
+  }
+
+  .kit-title {
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-normal);
+  }
+
+  .kit-body {
+    padding: var(--space-12) 0 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--text-secondary);
+
+    @include slot-prose;
+  }
+
+  /* The pink hairline is the section's whole structural device: a horizontal
+     rule under each item's title, and a vertical rule splitting the lead.
+     It is an element rather than a border on .kit-head so that Sketch mode can
+     redraw it — the effect displaces boxes, and a border is not one. */
+  .kit-rule {
+    height: var(--border-width-2);
+    background: var(--border-brand);
+    --sketch-fill: var(--border-brand);
+  }
+
+  .kit-lead .kit-rule {
+    display: none;
+  }
+
+  /* Lead spans the full row; icon + title sit in the first column track, copy
+     fills the rest, mirroring the three columns below. */
+  /* Subgrid inherits the parent's 10 tracks so the head and copy align to real
+     columns: head centered on tracks 1–3 (page cols 2–4), copy on tracks 4–9
+     (page cols 5–10), with the last track left open like the items below. */
+  .kit-lead {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    align-items: center;
+    border-radius: var(--radius-lg);
+    /* Light brand wash strongest behind the "Live editor" head, dissolving
+       across the full block to nothing at the right edge — head and copy both
+       sit inside the fade. Declared once and handed to the sketch layer too:
+       the effect blanks the real background, so a wash named only here would
+       vanish when Sketch mode is on. */
+    --kit-lead-wash: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-brand-500) 21%, transparent),
+      transparent
+    );
+    background: var(--kit-lead-wash);
+    --sketch-fill: var(--kit-lead-wash);
+    --sketch-stroke: transparent;
+    /* The block draws no outline, and hatching takes its ink from the outline
+       unless a part names its own. */
+    --sketch-hatch-color: var(--color-brand-500);
+  }
+
+  /* The head only carries a surface of its own when stacked (see the 960
+     breakpoint). Here it has none, and --sketch-fill inherits, so without this
+     the layer would draw the lead's wash a second time behind the head. */
+  .kit-lead .kit-head {
+    grid-column: 1 / span 3;
+    justify-content: center;
+    gap: var(--space-16);
+    padding: var(--space-32) 0;
+    --sketch-fill: transparent;
+    --sketch-stroke: transparent;
+    --sketch-radius: 0px;
+  }
+
+  .kit-lead .kit-icon {
+    font-size: var(--icon-size-4xl, 3rem);
+  }
+
+  .kit-lead .kit-title {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .kit-lead .kit-body {
+    grid-column: 4 / span 6;
+    padding: var(--space-32) 0;
+    font-size: var(--font-size-2xl);
+    color: var(--text-primary);
+  }
+
+  /* Controls sit above; the panel below is just the demo surface. */
+  /* Same 10-track grid as the cards so the block lands on real columns. */
+  .kit-preview {
+    margin-top: var(--space-32);
+    display: grid;
+    grid-template-columns: repeat(calc(var(--columns-count) - 2), 1fr);
+    column-gap: var(--columns-gutter);
+  }
+
+  /* Tracks 1–9 (page cols 2–10), leaving the last column open like the items
+     above. Label pins to the left column, control to the right. */
+  .swap-block {
+    grid-column: 1 / 10;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-12);
+  }
+
+  .swap-control {
+    margin-top: var(--space-32);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-24);
+  }
+
+  /* Use the sm divider purely as a styled label beside the control: drop its
+     built-in margin, and hide its hairline (gated by --_divider-hairline, which
+     no longer matches any @container query when set to none). */
+  .swap-control :global(.section-divider) {
+    margin: 0;
+    --_divider-hairline: none;
+  }
+
+  /* Two cells of one width, shrink-wrapped to the left. `width: max-content`
+     leaves the fr tracks an indefinite parent to resolve against, so both take
+     the wider select's size instead of splitting the block. */
+  .stage {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-12);
+  }
+
+  .stage-eyebrow {
+    align-self: center;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+
+  .swap-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-12);
+    justify-content: center;
+    align-items: center;
+    /* Reserved so toggling Shape (taller buttons) doesn't reflow the panel. */
+    min-height: 4rem;
+  }
+
+  .stage-cell {
+    width: 8.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (max-width: 960px) {
+    .kit-grid {
+      grid-template-columns: 1fr;
+    }
+    .kit-item {
+      grid-column: auto;
+    }
+    .swap-block {
+      grid-column: 1 / -1;
+    }
+
+    .kit-lead {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      background: none;
+      --sketch-fill: none;
+    }
+    /* Stacked: the head gets its own tinted bar instead of the fade. It draws
+       no outline, so the hatching takes the lead block's ink. */
+    .kit-lead .kit-head {
+      justify-content: flex-start;
+      gap: var(--space-12);
+      padding: var(--space-16) var(--space-20);
+      --kit-head-tint: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
+      background: var(--kit-head-tint);
+      --sketch-fill: var(--kit-head-tint);
+      --sketch-hatch-color: var(--color-brand-500);
+    }
+    .kit-lead .kit-body {
+      padding: var(--space-16) var(--space-20);
+      font-size: var(--font-size-xl);
+    }
+  }
+</style>

package/src/demo/sections/SectionLayers.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import Card from '../../system/components/Card.svelte';
+  import Section from '../Section.svelte';
+</script>
+
+<Section
+  class="layers"
+  title="Two composable layers."
+  eyebrow="Under the hood"
+  description="The same two layers you just saw move — now with the wiring that connects them."
+  gap="var(--space-8)"
+>
+  <div class="arch">
+    <Card class="arch-card arch-base" hover={false} icon="fas fa-layer-group" title="Tokens make the foundation">
+      <p>
+        Raw CSS variables for every primitive, grouped by family and function. Edit one value and every consumer updates at once.
+      </p>
+    </Card>
+
+    <Card class="arch-card arch-component" hover={false} icon="fas fa-shapes" title="Components build upon it">
+      <p>
+        Each component property is assigned a token. Property names describe purpose. Assign a new token and the component changes.
+      </p>
+    </Card>
+  </div>
+</Section>
+
+<style>
+  .arch {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: var(--columns-gutter);
+    row-gap: var(--space-32);
+  }
+
+  .arch :global(.arch-card) {
+    height: 100%;
+  }
+
+  .arch :global(code) {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    color: var(--text-primary);
+    background: var(--tint-low);
+    padding: var(--space-2) var(--space-6);
+    border-radius: var(--radius-sm);
+  }
+
+  @media (max-width: 960px) {
+    .arch {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

package/src/demo/sections/SectionOffering.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import offeringUrl from '../../system/assets/offering.webp';
+</script>
+
+<section class="offering">
+  <img class="offering-image" src={offeringUrl} alt="" />
+
+  <figure class="offering-quote">
+    <blockquote>
+      <p>
+        <span class="open-quote" aria-hidden="true">&ldquo;</span>I built live
+        tokens to help me quickly set up and style single-page apps and microsites.
+        I found it useful. I hope you do too.<span class="close-quote" aria-hidden="true">&rdquo;</span>
+      </p>
+    </blockquote>
+    <figcaption>-Mark</figcaption>
+  </figure>
+</section>
+
+<style>
+  .offering {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count), 1fr);
+    column-gap: var(--columns-gutter);
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Roughly a third of the content width, parked on the left edge so it
+     overlaps the left-hand card above without dominating the section. */
+  .offering-image {
+    grid-column: 2 / 7;
+    grid-row: 1;
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius-lg);
+    z-index: 1;
+  }
+
+  /* Sits in the open space to the right of the image. No glass background.
+     align-self centers it on the image, then translateY drops it by half the
+     image's upward overlap (the extra -space-64 in Demo.svelte) so it lands in
+     the middle of the actual gap between the cards above and Get Started below. */
+  .offering-quote {
+    grid-column: 7 / -2;
+    grid-row: 1;
+    align-self: center;
+    transform: translateY(calc(var(--space-64) / 2));
+    margin: 0;
+    /* Align body text to the card text above. The cards split this same span
+       in half, so the right card's left edge sits half a gutter right of line 7;
+       its body text is then inset by the card's --space-20 padding. Match both,
+       and the open quote dangles left into this padding (text-indent on p). */
+    padding-left: calc(var(--columns-gutter) / 2 + var(--space-20));
+  }
+
+  .offering-quote blockquote {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    border-radius: 0;
+    color: inherit;
+    font-style: normal;
+  }
+
+  .offering-quote p {
+    font-family: var(--font-serif);
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-normal);
+    color: var(--text-primary);
+    line-height: 1.2;
+    margin: 0;
+    hyphens: none;
+    text-indent: -0.55em;
+  }
+
+  .open-quote,
+  .close-quote {
+    font-family: var(--font-serif);
+    color: var(--color-brand-300);
+  }
+
+  .open-quote {
+    margin-right: 0.2em;
+  }
+
+  .close-quote {
+    margin-left: 0.05em;
+  }
+
+  .offering-quote figcaption {
+    margin-top: 0;
+    font-family: var(--font-serif);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-3xl);
+    font-variation-settings: 'opsz' 144, 'SOFT' 100;
+    letter-spacing: 0.01em;
+    color: var(--text-primary);
+    text-align: right;
+    padding-right: 0.4em;
+  }
+
+  @media (max-width: 960px) {
+    .offering-image {
+      grid-column: 2 / 7;
+    }
+    .offering-quote {
+      grid-column: 7 / -2;
+    }
+    .offering-quote p {
+      font-size: var(--font-size-xl);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .offering-image {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
+    .offering-quote {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      align-self: auto;
+      width: auto;
+      margin: var(--space-16) 0 0;
+      padding-left: 0;
+    }
+    .offering-quote p {
+      font-size: var(--font-size-4xl);
+    }
+  }
+</style>

package/src/demo/sketchCarry.ts

@@ -0,0 +1,91 @@
+// The theme and the sketchstyle are two separate picks in the demo, but the
+// package holds the sketch layer inside the theme: applying one runs
+// `openThemeSketchSettings`, which overwrites the live dials with whatever the new
+// theme carries, or turns the effect off for a theme carrying none. A visitor
+// who picked Pencil and then tried three themes lost Pencil three times.
+//
+// So the theme select records the look it is leaving, and each document
+// restores it once the apply lands. Each, not just this one: the editor overlay
+// is a second instance of the sketch store in an iframe, it hydrates the
+// applied theme on its own (over BroadcastChannel, so after `applyTheme`
+// resolves here), and it paints the host page as well as its own preview.
+// Restoring only in this document would be overwritten by that copy a tick
+// later — the record in localStorage is what both of them read.
+import { get } from 'svelte/store';
+import { hasPersistedSketchState } from '../editor/core/sketch';
+import {
+  sketchBaseline,
+  sketchEnabled,
+  sketchSettings,
+  selectedSketchStyleId,
+} from '../editor/core/sketch/sketchStore';
+import { THEME_SKETCH_ID, type SketchStyleSettings } from '../editor/core/sketch/sketchStyles';
+import { THEME_APPLIED_EVENT } from '../editor/core/themes/themeDocumentSync';
+
+const CARRY_KEY = 'lt-demo.sketchCarry';
+
+// Long enough for the broadcast to reach the editor frame, short enough that a
+// theme opened later from the editor's own Theme panel — where the sketchstyle
+// IS the theme's, and loading one means taking it — never reads a record left
+// over from the demo.
+const CARRY_WINDOW_MS = 4000;
+
+interface Carry {
+  token: string;
+  at: number;
+  enabled: boolean;
+  name: string;
+  settings: SketchStyleSettings;
+  baseline: SketchStyleSettings | null;
+}
+
+/** Hold the live sketchstyle across the theme apply that follows. */
+export function carrySketch(): void {
+  // A browser that has decided nothing has no pick to keep, and letting the
+  // theme seed it is the only way a theme's own sketchstyle ever shows.
+  if (!hasPersistedSketchState()) return;
+  // "Theme" is a pick that means follow the theme, so it follows this one too.
+  if (get(selectedSketchStyleId) === THEME_SKETCH_ID) return;
+  const record: Carry = {
+    token: Math.random().toString(36).slice(2),
+    at: Date.now(),
+    enabled: get(sketchEnabled),
+    name: get(selectedSketchStyleId),
+    settings: get(sketchSettings),
+    baseline: get(sketchBaseline),
+  };
+  try {
+    localStorage.setItem(CARRY_KEY, JSON.stringify(record));
+  } catch {
+    // Storage blocked (private mode); the theme's sketchstyle wins, as before.
+  }
+}
+
+function readCarry(): Carry | null {
+  try {
+    const raw = localStorage.getItem(CARRY_KEY);
+    if (!raw) return null;
+    const record = JSON.parse(raw) as Carry;
+    return Date.now() - record.at < CARRY_WINDOW_MS ? record : null;
+  } catch {
+    return null;
+  }
+}
+
+export function installSketchCarry(): void {
+  let handled = '';
+  document.addEventListener(THEME_APPLIED_EVENT, () => {
+    const record = readCarry();
+    if (!record || record.token === handled) return;
+    handled = record.token;
+    // `themeSketchSettings` stays as the apply left it: what the open theme
+    // holds is what makes the restored style read as off the theme, and what
+    // fills the picker's Unsaved row.
+    selectedSketchStyleId.set(record.name);
+    sketchBaseline.set(record.baseline);
+    sketchSettings.set(record.settings);
+    // Last: every write above repaints, and this is the one that decides
+    // whether anything is painted at all.
+    sketchEnabled.set(record.enabled);
+  });
+}