@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/ui/VariablesTab.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import PaletteEditor from './PaletteEditor.svelte';
+  import FontStackEditor from './FontStackEditor.svelte';
+  import ProjectFontsSection from './ProjectFontsSection.svelte';
+  import ColumnsSection from './sections/ColumnsSection.svelte';
+  import TokenScaleTable from './sections/TokenScaleTable.svelte';
+  import OverlaysSection from './sections/OverlaysSection.svelte';
+  import GradientsSection from './sections/GradientsSection.svelte';
+  import ShadowsSection from './sections/ShadowsSection.svelte';
+  import {
+    SPACING_VARS, BORDER_WIDTH_VARS, RADIUS_VARS, FONT_SIZE_VARS,
+    ICON_SIZE_VARS, FONT_WEIGHT_VARS, LINE_HEIGHT_VARS,
+    DURATION_TOKENS, Z_INDEX_TOKENS, OPACITY_TOKENS,
+  } from './sections/tokenScales';
+
+  /** Visual flash for the copy-to-clipboard chip, kept short enough to
+   *  feel like immediate confirmation but long enough to register. */
+  const COPIED_FLASH_MS = 1000;
+
+  // Bumped on breakpoint flips; passed to TokenScaleTable so it re-resolves.
+  // tokens.css declares responsive overrides at 768px and 480px.
+  let liveVersion = 0;
+  const BREAKPOINTS = ['(max-width: 768px)', '(max-width: 480px)'] as const;
+
+  onMount(() => {
+    liveVersion++; // initial read once the DOM has tokens.css applied
+    if (typeof window === 'undefined') return;
+    const mqls = BREAKPOINTS.map((q) => window.matchMedia(q));
+    const bump = () => { liveVersion++; };
+    for (const m of mqls) m.addEventListener('change', bump);
+    return () => {
+      for (const m of mqls) m.removeEventListener('change', bump);
+    };
+  });
+
+  let copiedVar: string | null = null;
+  function copyVariable(v: string) {
+    navigator.clipboard.writeText(v);
+    copiedVar = v;
+    setTimeout(() => { copiedVar = null; }, COPIED_FLASH_MS);
+  }
+</script>
+
+<div class="variables-container">
+  <!-- Palette Editor -->
+  <section class="section" id="palette-editor">
+    <h2 class="section-title">Palette Editor</h2>
+    <p class="editor-intro">Derived palettes via <code>color-mix(in oklch)</code>. Change a base color to update all derived steps. Click any derived swatch to add a manual override.</p>
+    <div class="palette-editors">
+      <PaletteEditor label="Brand" initialColor="#c93636" cssNamespace="brand" />
+      <PaletteEditor label="Accent" initialColor="#f49e0b" cssNamespace="accent" />
+      <PaletteEditor label="Background" initialColor="#1a1a2e" cssNamespace="canvas" emptySelector />
+      <PaletteEditor mode="gray" label="Neutral" cssNamespace="neutral"/>
+      <PaletteEditor mode="gray" label="Alternate" displayLabel="Alternate (neutral)" cssNamespace="alternate" />
+      <PaletteEditor label="Special" initialColor="#8b5cf6" cssNamespace="special" />
+      <PaletteEditor label="Info" initialColor="#3077e8" cssNamespace="info" />
+      <PaletteEditor label="Success" initialColor="#21c45d" cssNamespace="success" />
+      <PaletteEditor label="Warning" initialColor="#e66e1a" cssNamespace="warning" />
+      <PaletteEditor label="Danger" initialColor="#e8304f" cssNamespace="danger" />
+    </div>
+  </section>
+
+  <!-- Spacing & Borders -->
+  <section class="section" id="spacing">
+    <h2 class="section-title">Spacing &amp; Borders</h2>
+    <h3 class="subsection-title">Spacing</h3>
+    <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+    <h3 class="subsection-title">Borders</h3>
+    <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+  </section>
+
+  <!-- Columns -->
+  <ColumnsSection />
+
+  <!-- Border Radius -->
+  <section class="section" id="border-radius">
+    <h2 class="section-title">Border Radius</h2>
+    <TokenScaleTable kind="radius" vars={RADIUS_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+  </section>
+
+  <!-- Typography -->
+  <section class="section" id="typography">
+    <h2 class="section-title">Typography</h2>
+
+    <div class="typography-columns">
+      <div class="typography-group font-families-group">
+        <ProjectFontsSection />
+        <h3 class="group-title">Font Families</h3>
+        <FontStackEditor />
+      </div>
+
+      <div class="typography-group">
+        <h3 class="group-title">Font Sizes</h3>
+        <TokenScaleTable kind="font-size" vars={FONT_SIZE_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+      </div>
+
+      <div class="typography-group">
+        <h3 class="group-title">Font Weights</h3>
+        <TokenScaleTable kind="font-weight" vars={FONT_WEIGHT_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+      </div>
+
+      <div class="typography-group">
+        <h3 class="group-title">Line Heights</h3>
+        <TokenScaleTable kind="line-height" vars={LINE_HEIGHT_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+      </div>
+    </div>
+  </section>
+
+  <!-- Icon Sizes -->
+  <section class="section" id="icon-sizes">
+    <h2 class="section-title">Icon Sizes</h2>
+    <TokenScaleTable kind="icon-size" vars={ICON_SIZE_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+  </section>
+
+
+  <!-- Shadows -->
+  <ShadowsSection {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+
+
+  <!-- Overlays -->
+  <OverlaysSection {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+
+  <!-- Gradients -->
+  <GradientsSection {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+
+  <!-- Utility Tokens -->
+  <section class="section" id="utility-tokens">
+    <h2 class="section-title">Utility Tokens</h2>
+    <div class="utility-columns">
+      <div class="utility-group">
+        <h3 class="group-title">Durations</h3>
+        <TokenScaleTable kind="line-height" tokens={DURATION_TOKENS} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+      </div>
+
+      <div class="utility-group">
+        <h3 class="group-title">Z-Index Layers</h3>
+        <TokenScaleTable kind="line-height" tokens={Z_INDEX_TOKENS} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+      </div>
+
+      <div class="utility-group">
+        <h3 class="group-title">Opacity</h3>
+        <TokenScaleTable kind="line-height" tokens={OPACITY_TOKENS} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+      </div>
+    </div>
+  </section>
+</div>
+
+<style>
+  .variables-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-32);
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-16);
+  }
+
+  .section-title {
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+    margin: 0;
+    padding-bottom: var(--ui-space-8);
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+
+  .group-title {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+    margin: 0;
+  }
+
+  /* Subsection title (used by Spacing & Borders) */
+  .subsection-title {
+    margin: var(--ui-space-16) 0 var(--ui-space-8);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .subsection-title:first-child,
+  .section-title + .subsection-title {
+    margin-top: 0;
+  }
+
+  /* Typography */
+  .typography-columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
+    gap: var(--ui-space-24);
+    align-items: start;
+  }
+
+  .typography-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    min-width: 0;
+  }
+
+  .font-families-group {
+    grid-column: 1 / -1;
+  }
+
+  /* Utility Tokens */
+  .utility-columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: var(--ui-space-24);
+    align-items: start;
+  }
+
+  .utility-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+  }
+
+  /* Palette Editor */
+  .editor-intro {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    margin: 0;
+  }
+
+  .editor-intro code {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-accent);
+    background: var(--ui-surface-lowest);
+    padding: var(--ui-space-2) var(--ui-space-4);
+    border-radius: var(--ui-radius-sm);
+    font-family: var(--ui-font-mono);
+  }
+
+  .palette-editors {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-16);
+  }
+
+  /* Utility fill tightens at narrow widths */
+  .utility-columns {
+    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+  }
+</style>

package/src/ui/index.ts

@@ -0,0 +1,31 @@
+// Generic primitives
+export { default as UIDialog } from './UIDialog.svelte';
+export { default as UILinkToggle } from './UILinkToggle.svelte';
+export { default as UITokenSelector } from './UITokenSelector.svelte';
+export { default as UIVariantSelector } from './UIVariantSelector.svelte';
+export { default as UIOptionList } from './UIOptionList.svelte';
+export { default as UIOptionItem } from './UIOptionItem.svelte';
+
+// Semantic-property selectors
+export { default as UIPaletteSelector } from './UIPaletteSelector.svelte';
+export { default as UIFontFamilySelector } from './UIFontFamilySelector.svelte';
+export { default as UIFontWeightSelector } from './UIFontWeightSelector.svelte';
+// Scale data spread into UIVariantSelector — replaces the per-scale wrappers.
+export * from './variantScales';
+
+// Editor tabs & panels
+export { default as VariablesTab } from './VariablesTab.svelte';
+export { default as TextTab } from './TextTab.svelte';
+export { default as SurfacesTab } from './SurfacesTab.svelte';
+
+// Palette editor stack
+export { default as PaletteEditor } from './PaletteEditor.svelte';
+export { default as ColorEditPanel } from './ColorEditPanel.svelte';
+export { default as BezierCurveEditor } from './BezierCurveEditor.svelte';
+
+// Font editors
+export { default as FontStackEditor } from './FontStackEditor.svelte';
+export { default as ProjectFontsSection } from './ProjectFontsSection.svelte';
+
+// Theme persistence UI
+export { default as ThemeFileManager } from './ThemeFileManager.svelte';

package/src/ui/keepInViewport.ts

@@ -0,0 +1,84 @@
+/**
+ * Svelte action: keep an absolutely-positioned element inside the viewport.
+ *
+ * Measures the element after layout, computes how far it overflows any
+ * viewport edge, and shifts it back via CSS `translate`. The original
+ * positioning (top/left/right/bottom) stays untouched so the *natural*
+ * placement is preserved when there's room — the action only nudges when
+ * the element would otherwise draw off-screen.
+ *
+ * Use on popovers and dropdowns whose trigger position is dynamic
+ * (cards in a wrapping flex grid, dropdowns near a panel edge, etc.).
+ *
+ * The CSS `translate` property is used instead of `transform` so it doesn't
+ * collide with `transform`-based entrance animations.
+ *
+ * Recomputes on:
+ *  - mount (after first paint)
+ *  - element resize (content reflow)
+ *  - window resize
+ *  - any scroll up the ancestor chain
+ *
+ * Usage:
+ *   <div class="popover" use:keepInViewport>...</div>
+ *   <div class="popover" use:keepInViewport={{ margin: 12 }}>...</div>
+ */
+
+export type KeepInViewportOptions = {
+  /** Minimum gap (px) between the element and the viewport edges. Default 8. */
+  margin?: number;
+};
+
+export function keepInViewport(
+  node: HTMLElement,
+  options: KeepInViewportOptions = {},
+) {
+  let margin = options.margin ?? 8;
+  let pendingFrame: number | null = null;
+
+  function measure(): void {
+    if (pendingFrame !== null) return;
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = null;
+      // Reset our own translate before measuring so the rect reflects the
+      // element's natural placement, not last frame's correction.
+      node.style.translate = '';
+      const rect = node.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      let dx = 0;
+      let dy = 0;
+      if (rect.left < margin) dx = margin - rect.left;
+      else if (rect.right > vw - margin) dx = vw - margin - rect.right;
+      if (rect.top < margin) dy = margin - rect.top;
+      else if (rect.bottom > vh - margin) dy = vh - margin - rect.bottom;
+      if (dx !== 0 || dy !== 0) {
+        node.style.translate = `${dx}px ${dy}px`;
+      }
+    });
+  }
+
+  measure();
+
+  const ro = new ResizeObserver(measure);
+  ro.observe(node);
+  window.addEventListener('resize', measure);
+  // Capture-phase scroll listener: catches scroll on any ancestor, not just
+  // window. The trigger's nearest scrolling parent (a panel, a modal body)
+  // shifts the popover's viewport position when scrolled.
+  window.addEventListener('scroll', measure, true);
+
+  return {
+    update(next: KeepInViewportOptions = {}) {
+      margin = next.margin ?? 8;
+      measure();
+    },
+    destroy() {
+      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('scroll', measure, true);
+      node.style.translate = '';
+    },
+  };
+}