@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/ui/UIFontSizeSelector.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
+  import UIVariantSelector from './UIVariantSelector.svelte';
+
+  export let variable: string;
+  export let component: string | undefined = undefined;
+  export let canBeLinked: boolean = false;
+  export let disabled: boolean = false;
+  export let selectionsLocked: boolean = false;
+
+  // Icon-size variables (e.g. --tabbar-default-icon-size) pick from the
+  // --icon-size-* scale; everything else from --font-size-*.
+  $: scalePrefix = variable.endsWith('-icon-size') ? '--icon-size-' : '--font-size-';
+
+  const options = [
+    { key: 'xs', label: 'XS' },
+    { key: 'sm', label: 'SM' },
+    { key: 'md', label: 'MD' },
+    { key: 'lg', label: 'LG' },
+    { key: 'xl', label: 'XL' },
+    { key: '2xl', label: '2XL' },
+    { key: '3xl', label: '3XL' },
+    { key: '4xl', label: '4XL' },
+    { key: '5xl', label: '5XL' },
+    { key: '6xl', label: '6XL' },
+  ] as const;
+
+  let pxByKey: Record<string, string> = {};
+  let remByKey: Record<string, string> = {};
+
+  function formatRem(value: number): string {
+    const rounded = Math.round(value * 1000) / 1000;
+    return `${rounded}rem`;
+  }
+
+  function readPxValues() {
+    const probe = document.createElement('div');
+    probe.style.position = 'absolute';
+    probe.style.visibility = 'hidden';
+    probe.style.pointerEvents = 'none';
+    document.body.appendChild(probe);
+    const rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const nextPx: Record<string, string> = {};
+    const nextRem: Record<string, string> = {};
+    for (const opt of options) {
+      probe.style.fontSize = `var(${scalePrefix}${opt.key})`;
+      const px = parseFloat(getComputedStyle(probe).fontSize);
+      if (Number.isFinite(px)) {
+        nextPx[opt.key] = `${Math.round(px * 10) / 10}px`;
+        nextRem[opt.key] = formatRem(px / rootPx);
+      } else {
+        nextPx[opt.key] = '';
+        nextRem[opt.key] = '';
+      }
+    }
+    document.body.removeChild(probe);
+    pxByKey = nextPx;
+    remByKey = nextRem;
+  }
+
+  function handleVarChange(e: Event) {
+    const detail = (e as CustomEvent<{ name: string }>).detail;
+    if (detail?.name?.startsWith('--font-size-') || detail?.name?.startsWith('--icon-size-')) readPxValues();
+  }
+
+  // Re-read sizes when the target variable's scale changes
+  // (mounting one selector, then opening another whose variable resolves to a different scale).
+  $: if (typeof document !== 'undefined' && scalePrefix) readPxValues();
+
+  onMount(() => {
+    readPxValues();
+    document.addEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+  });
+  onDestroy(() => {
+    document.removeEventListener(CSS_VAR_CHANGE_EVENT, handleVarChange);
+  });
+</script>
+
+<UIVariantSelector
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  varPrefix={scalePrefix}
+  {options}
+  dropdownGridColumns="auto auto auto auto"
+  on:change
+>
+  <svelte:fragment slot="option" let:opt let:active let:select>
+    <button class="font-size-row" class:active on:click={select}>
+      <span class="size-sample-cell">
+        <span class="size-sample" style="font-size: calc(var({scalePrefix}{opt.key}) * 1.5);">A</span>
+      </span>
+      <span class="size-label">{opt.label}</span>
+      <code class="size-measure">{pxByKey[opt.key] ?? ''}</code>
+      <code class="size-measure">{remByKey[opt.key] ?? ''}</code>
+    </button>
+  </svelte:fragment>
+</UIVariantSelector>
+
+<style>
+  .font-size-row {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: baseline;
+    padding: var(--ui-space-6) var(--ui-space-8);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    text-align: left;
+    transition: all var(--ui-transition-fast);
+  }
+
+  .font-size-row:hover {
+    background: var(--ui-hover);
+  }
+
+  .font-size-row.active {
+    background: var(--ui-hover-high);
+    border-color: var(--ui-text-accent);
+    box-shadow: inset 3px 0 0 var(--ui-text-accent);
+  }
+
+  .size-sample-cell {
+    display: inline-flex;
+    align-items: baseline;
+    justify-content: center;
+    padding-right: var(--ui-space-12);
+    line-height: 1;
+  }
+
+  .size-sample {
+    color: var(--ui-text-primary);
+    line-height: 1;
+  }
+
+  .size-label {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-primary);
+  }
+
+  .font-size-row.active .size-label {
+    color: var(--ui-text-accent);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .size-measure {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    white-space: nowrap;
+  }
+
+  .size-measure:first-of-type {
+    padding-left: var(--ui-space-12);
+  }
+
+  .font-size-row.active .size-measure {
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/ui/UIFontWeightSelector.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import UIVariantSelector from './UIVariantSelector.svelte';
+  import UIOptionItem from './UIOptionItem.svelte';
+
+  export let variable: string;
+  export let component: string | undefined = undefined;
+  export let canBeLinked: boolean = false;
+  export let disabled: boolean = false;
+  export let selectionsLocked: boolean = false;
+
+  const options = [
+    { key: 'thin', label: 'Thin', value: '100' },
+    { key: 'extralight', label: 'Extra Light', value: '200' },
+    { key: 'light', label: 'Light', value: '300' },
+    { key: 'normal', label: 'Normal', value: '400' },
+    { key: 'medium', label: 'Medium', value: '500' },
+    { key: 'semibold', label: 'Semibold', value: '600' },
+    { key: 'bold', label: 'Bold', value: '700' },
+    { key: 'extrabold', label: 'Extra Bold', value: '800' },
+    { key: 'black', label: 'Black', value: '900' },
+  ] as const;
+</script>
+
+<UIVariantSelector
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  varPrefix="--font-weight-"
+  {options}
+  on:change
+>
+  <svelte:fragment slot="option" let:opt let:active let:select>
+    <UIOptionItem {active} on:click={select}>
+      <span slot="preview" class="weight-sample" style="font-weight: var(--font-weight-{opt.key});">A</span>
+      <svelte:fragment slot="label">{opt.label}</svelte:fragment>
+      <svelte:fragment slot="meta">{opt.value}</svelte:fragment>
+    </UIOptionItem>
+  </svelte:fragment>
+</UIVariantSelector>
+
+<style>
+  .weight-sample {
+    display: inline-block;
+    width: 1.5rem;
+    text-align: center;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-primary);
+    line-height: 1;
+  }
+</style>

package/src/ui/UILineHeightSelector.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import UIVariantSelector from './UIVariantSelector.svelte';
+  import UIOptionItem from './UIOptionItem.svelte';
+
+  export let variable: string;
+  export let component: string | undefined = undefined;
+  export let canBeLinked: boolean = false;
+  export let disabled: boolean = false;
+  export let selectionsLocked: boolean = false;
+
+  const options = [
+    { key: 'tight', label: 'Tight', value: '1' },
+    { key: 'snug', label: 'Snug', value: '1.2' },
+    { key: 'normal', label: 'Normal', value: '1.4' },
+    { key: 'relaxed', label: 'Relaxed', value: '1.5' },
+    { key: 'loose', label: 'Loose', value: '2' },
+  ] as const;
+</script>
+
+<UIVariantSelector
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  varPrefix="--line-height-"
+  {options}
+  on:change
+>
+  <svelte:fragment slot="option" let:opt let:active let:select>
+    <UIOptionItem {active} on:click={select}>
+      <span slot="preview" class="lh-sample" style="line-height: var(--line-height-{opt.key});">≡</span>
+      <svelte:fragment slot="label">{opt.label}</svelte:fragment>
+      <svelte:fragment slot="meta">{opt.value}</svelte:fragment>
+    </UIOptionItem>
+  </svelte:fragment>
+</UIVariantSelector>
+
+<style>
+  .lh-sample {
+    display: inline-block;
+    width: 1.5rem;
+    text-align: center;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/ui/UILinkToggle.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let linked: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e: Event) {
+    e.stopPropagation();
+    dispatch('toggle');
+  }
+</script>
+
+<button
+  type="button"
+  class="ui-link-toggle"
+  class:linked
+  title={linked ? 'Locked across variants — click to unlink' : 'Click to link across all variants'}
+  on:click={handleClick}
+>
+  <i class="fas" class:fa-lock={linked} class:fa-lock-open={!linked} aria-hidden="true"></i>
+  <span>{linked ? 'Unlink' : 'Link'}</span>
+</button>
+
+<style>
+  .ui-link-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-2) var(--ui-space-8);
+    height: 1.5rem;
+    background: none;
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-family: inherit;
+    font-size: var(--ui-font-size-sm);
+    cursor: pointer;
+    transition: all var(--ui-transition-fast);
+  }
+
+  .ui-link-toggle i {
+    font-size: 0.75rem;
+  }
+
+  .ui-link-toggle:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-hover);
+    border-color: var(--ui-border-strong);
+  }
+
+  .ui-link-toggle.linked {
+    color: var(--ui-text-accent);
+    border-color: var(--ui-text-accent);
+  }
+
+  .ui-link-toggle.linked:hover {
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/ui/UIOptionItem.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  export let active: boolean = false;
+</script>
+
+<button class="ui-option-item" class:active on:click>
+  {#if $$slots.preview}
+    <span class="ui-option-preview">
+      <slot name="preview" />
+    </span>
+  {/if}
+  <span class="ui-option-label">
+    <slot name="label" />
+  </span>
+  {#if $$slots.meta}
+    <code class="ui-option-meta">
+      <slot name="meta" />
+    </code>
+  {/if}
+</button>
+
+<style>
+  .ui-option-item {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-6) var(--ui-space-8);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    transition: all var(--ui-transition-fast);
+  }
+
+  .ui-option-item:hover {
+    background: var(--ui-hover);
+  }
+
+  .ui-option-item.active {
+    background: var(--ui-hover-high);
+    border-color: var(--ui-text-accent);
+    box-shadow: inset 3px 0 0 var(--ui-text-accent);
+  }
+
+  .ui-option-item.active .ui-option-label {
+    color: var(--ui-text-accent);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .ui-option-item.active .ui-option-meta {
+    color: var(--ui-text-primary);
+  }
+
+  .ui-option-preview {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-option-label {
+    flex: 1;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-primary);
+    text-align: left;
+  }
+
+  .ui-option-meta {
+    flex-shrink: 0;
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    white-space: nowrap;
+  }
+</style>

package/src/ui/UIOptionList.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  /** When set, the list becomes a CSS grid using these columns; rows are
+   *  expected to use `display: grid; grid-template-columns: subgrid` so cells
+   *  align across rows. */
+  export let gridColumns: string = '';
+</script>
+
+<div
+  class="ui-option-list"
+  class:grid={!!gridColumns}
+  style:grid-template-columns={gridColumns || null}
+>
+  <slot />
+</div>
+
+<style>
+  .ui-option-list {
+    display: flex;
+    flex-direction: column;
+    padding: var(--ui-space-4);
+  }
+
+  .ui-option-list.grid {
+    display: grid;
+    column-gap: var(--ui-space-12);
+  }
+</style>