@motion-proto/live-tokens 0.91.1 → 0.92.0

package/src/editor/ui/sections/textStyles.ts

@@ -1,110 +1,62 @@
-/**
- * Registry of the semantic text styles rendered by TextStylesSection.
- * Each style is a bundle of alias tokens declared in tokens.css; the prefix
- * joins with a kind suffix (`-font-family`, `-font-size`, …) to form each
- * axis variable the editor's pickers target.
- *
- * Family/size/weight/letter-spacing/line-height are editable on every style.
- * `hasTextTransform` marks the one style (eyebrow) that also exposes a
- * text-transform picker — the only axis that exists on just one style.
- */
+import {
+  DEFAULTS,
+  EYEBROW_PREFIX,
+  STEPS,
+  USAGES,
+  stepPrefix,
+  type StylePrefix,
+  type Usage,
+} from '../../core/typeScale/typeScale';
 
 export interface TextStyle {
   name: string;
   label: string;
   /** Variable prefix, e.g. `--heading-xl`; suffixes form each axis var. */
-  prefix: string;
-  /** Element (or class) this style is the default for. */
+  prefix: StylePrefix;
+  /** The elements `site.css` styles with it, or else its class. */
   defaultElement: string;
   preview: string;
   /** Whether this style exposes an editable `-text-transform` axis. */
   hasTextTransform?: boolean;
 }
 
+const USAGE_LABEL: Readonly<Record<Usage, string>> = {
+  display: 'Display',
+  heading: 'Heading',
+  body: 'Body',
+  editorial: 'Editorial',
+  code: 'Code',
+};
+
+const USAGE_PREVIEW: Readonly<Record<Usage, string>> = {
+  display: 'Tokens that move with every edit',
+  heading: 'Choosing a palette for the launch page',
+  body: 'Body copy for comfortable reading.',
+  editorial: 'A pull quote sets the tone for the essay.',
+  code: 'const total = sum(items.map(price));',
+};
+
+/** Every text style in `tokens.css` order: each usage's steps, largest first, then the eyebrow. */
 export const TEXT_STYLES: TextStyle[] = [
-  {
-    name: 'heading-xl',
-    label: 'Heading XL',
-    prefix: '--heading-xl',
-    defaultElement: 'h1',
-    preview: 'Page title',
-  },
-  {
-    name: 'heading-lg',
-    label: 'Heading LG',
-    prefix: '--heading-lg',
-    defaultElement: 'h2',
-    preview: 'Section heading',
-  },
-  {
-    name: 'heading-md',
-    label: 'Heading MD',
-    prefix: '--heading-md',
-    defaultElement: 'h3',
-    preview: 'Subsection heading',
-  },
-  {
-    name: 'heading-sm',
-    label: 'Heading SM',
-    prefix: '--heading-sm',
-    defaultElement: 'h4',
-    preview: 'Minor heading',
-  },
-  {
-    name: 'body-md',
-    label: 'Body MD',
-    prefix: '--body-md',
-    defaultElement: 'p',
-    preview: 'Body copy for comfortable reading.',
-  },
-  {
-    name: 'body-sm',
-    label: 'Body SM',
-    prefix: '--body-sm',
-    defaultElement: 'small',
-    preview: 'Captions and secondary text.',
-  },
-  {
-    name: 'editorial-xl',
-    label: 'Editorial XL',
-    prefix: '--editorial-xl',
-    defaultElement: 'editorial-xl',
-    preview: 'Pull quotes and opening statements.',
-  },
-  {
-    name: 'editorial-lg',
-    label: 'Editorial LG',
-    prefix: '--editorial-lg',
-    defaultElement: 'editorial-lg',
-    preview: 'Standfirsts and section ledes.',
-  },
-  {
-    name: 'editorial-md',
-    label: 'Editorial MD',
-    prefix: '--editorial-md',
-    defaultElement: 'editorial-md',
-    preview: 'Long-form reading, set in the editorial face.',
-  },
-  {
-    name: 'editorial-sm',
-    label: 'Editorial SM',
-    prefix: '--editorial-sm',
-    defaultElement: 'editorial-sm',
-    preview: 'Captions, credits, and asides.',
-  },
-  {
-    name: 'code',
-    label: 'Code',
-    prefix: '--code',
-    defaultElement: 'code',
-    preview: 'const total = sum(items);',
-  },
+  ...USAGES.flatMap((usage) =>
+    [...STEPS].reverse().map((step): TextStyle => {
+      const name = `${usage}-${step}`;
+      const elements = DEFAULTS.usages[usage].elements[step];
+      return {
+        name,
+        label: `${USAGE_LABEL[usage]} ${step.toUpperCase()}`,
+        prefix: stepPrefix(usage, step),
+        defaultElement: elements ? elements.join(', ') : `.${name}`,
+        preview: USAGE_PREVIEW[usage],
+      };
+    }),
+  ),
   {
     name: 'eyebrow',
     label: 'Eyebrow',
-    prefix: '--eyebrow',
-    defaultElement: 'eyebrow',
-    preview: 'Overline label',
+    prefix: EYEBROW_PREFIX,
+    defaultElement: '.eyebrow',
+    preview: 'Release notes',
     hasTextTransform: true,
   },
 ];

package/src/editor/ui/text-styles/ControlBody.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    width: string;
+    /** Null draws no link bar. */
+    linked: boolean | null;
+    children: Snippet;
+    /** Content after the body, such as a lock or a unit. */
+    after?: Snippet;
+  }
+
+  let { width, linked, children, after }: Props = $props();
+</script>
+
+{#if linked === null}
+  <div class="ctl-body" style:--w={width}>{@render children()}</div>
+{:else}
+  <div class="linkwrap" class:is-unlinked={!linked}>
+    <div class="ctl-body" style:--w={width}>{@render children()}</div>
+    {@render after?.()}
+  </div>
+{/if}
+
+<style>
+  /* The link bar matches the editor's token selectors: a white bar flush
+     against a linked control, an amber tick beside an indented unlinked one. */
+  .linkwrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    min-width: 0;
+    padding-left: 4px;
+  }
+
+  .linkwrap::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 4px;
+    height: 1.75rem;
+    background: var(--ui-text-primary);
+    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition:
+      width 220ms cubic-bezier(0.4, 0, 0.2, 1),
+      height 220ms cubic-bezier(0.4, 0, 0.2, 1),
+      background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .linkwrap.is-unlinked {
+    padding-left: 10px;
+  }
+
+  .linkwrap.is-unlinked::before {
+    width: 2px;
+    height: 0.875rem;
+    background: var(--ui-link-broken);
+    border-radius: 1px;
+  }
+
+  /* Unlinking indents the body by 6px and narrows it by as much, so whatever
+     follows holds its position. */
+  .ctl-body {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: var(--w);
+    min-width: 0;
+  }
+
+  .is-unlinked > .ctl-body {
+    width: calc(var(--w) - 6px);
+  }
+
+  .ctl-body > :global(*) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ctl-body :global(.ui-token-selector) {
+    display: block;
+    width: 100%;
+  }
+
+  /* The trigger names the value; a resolved-value line under it would push
+     the lock off the trigger's centre line. */
+  .ctl-body :global(.ui-ts-meta-text) {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .linkwrap::before {
+      transition: none;
+    }
+  }
+</style>

package/src/editor/ui/text-styles/ResetIcon.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  interface Props {
+    /** Names the value in the button's accessible label. */
+    label: string;
+    visible: boolean;
+    onreset: () => void;
+  }
+
+  let { label, visible, onreset }: Props = $props();
+
+  // The icon leaves the DOM once its value resets, so focus moves to the
+  // control it restored.
+  async function reset(e: MouseEvent) {
+    const scope = (e.currentTarget as HTMLElement).closest<HTMLElement>('[data-reset-scope]');
+    onreset();
+    await tick();
+    scope?.querySelector<HTMLElement>('input, select, button:not(.reset)')?.focus();
+  }
+</script>
+
+{#if visible}
+  <button
+    type="button"
+    class="reset"
+    aria-label="Reset {label} to default"
+    title="Reset to default"
+    onclick={reset}
+  >
+    <i class="fas fa-rotate-left" aria-hidden="true"></i>
+  </button>
+{/if}
+
+<style>
+  .reset {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-tertiary);
+    font-size: 0.6875rem;
+    cursor: pointer;
+  }
+
+  .reset:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-higher);
+  }
+
+  .reset:focus-visible {
+    outline: 2px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+</style>

package/src/editor/ui/text-styles/StepRow.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+  import UIFontFamilySelector from '../UIFontFamilySelector.svelte';
+  import UIFontWeightSelector from '../UIFontWeightSelector.svelte';
+  import UILetterSpacingSelector from '../UILetterSpacingSelector.svelte';
+  import UILineHeightSelector from '../UILineHeightSelector.svelte';
+  import UITextTransformSelector from '../UITextTransformSelector.svelte';
+  import type { TextStyle } from '../sections/textStyles';
+  import {
+    DEFAULTS,
+    VIEWPORTS,
+    axisName,
+    sizeName,
+    usageName,
+    type StyleAxis,
+    type Viewport,
+  } from '../../core/typeScale/typeScale';
+  import ControlBody from './ControlBody.svelte';
+  import ResetIcon from './ResetIcon.svelte';
+  import StyleControl from './StyleControl.svelte';
+  import {
+    SIZE_RANGE_PX,
+    SMALL_SIZE_PX,
+    faceLabel,
+    formatPx,
+    isLinked,
+    isStored,
+    linkExpression,
+    sizesOf,
+    valueOf,
+    weightLabel,
+    type LinkAxis,
+    type StyleTarget,
+    type TextStyleEdits,
+    type TokenView,
+  } from './textStyleEdits';
+
+  interface Props {
+    target: StyleTarget;
+    style: TextStyle;
+    view: TokenView;
+    /** The viewport the sample renders at and the sizes highlight. */
+    viewport: Viewport;
+    edits: TextStyleEdits;
+  }
+
+  let { target, style, view, viewport, edits }: Props = $props();
+
+  const VIEWPORT_LABEL: Record<Viewport, string> = { desktop: 'Desktop', tablet: 'Tablet', phone: 'Phone' };
+
+  let sizes = $derived(sizesOf(view, target));
+  let prefix = $derived(target.prefix);
+  const axis = (a: StyleAxis) => axisName(prefix, a);
+  let chip = $derived(
+    target.step === null
+      ? style.defaultElement
+      : DEFAULTS.usages[target.usage].elements[target.step]?.join(', '),
+  );
+
+  let sampleStyle = $derived(
+    [
+      `font-family: var(${axis('font-family')})`,
+      `font-size: var(${sizeName(prefix, viewport)})`,
+      `font-weight: var(${axis('font-weight')})`,
+      `line-height: var(${axis('line-height')})`,
+      `letter-spacing: var(${axis('letter-spacing')})`,
+      ...(style.hasTextTransform ? [`text-transform: var(${axis('text-transform')})`] : []),
+    ].join('; '),
+  );
+
+  // A typed value that the store leaves unchanged would otherwise stay in the
+  // input, so the input re-reads the size the store now resolves.
+  function editSize(vp: Viewport, input: HTMLInputElement) {
+    edits.setSize(target, vp, input.valueAsNumber);
+    input.value = formatPx(sizesOf(edits.view(), target)[vp].px);
+  }
+
+  function link(a: LinkAxis, label: (value: string) => string) {
+    return {
+      linked: isLinked(view, target, a),
+      text: label(valueOf(view, usageName(target.usage, a))),
+      title: `Linked to ${linkExpression(target, a)}`,
+      ontoggle: () => edits.toggleLink(target, a),
+    };
+  }
+
+  const write = (a: StyleAxis) => (value: string | null) => edits.writeToken(axis(a), value);
+  const reset = (a: StyleAxis) => () => edits.resetKey(axis(a));
+</script>
+
+<div class="step">
+  <div class="step-id">
+    <code class="step-name">{style.name}</code>
+    {#if chip}
+      <span class="chip">{chip}</span>
+    {/if}
+    {#if sizes[viewport].px < SMALL_SIZE_PX}
+      <span class="flag">Below {SMALL_SIZE_PX}px</span>
+    {/if}
+  </div>
+
+  <div class="sizes">
+    {#each VIEWPORTS as vp (vp)}
+      {@const size = sizes[vp]}
+      <div class="size-row" class:is-current={vp === viewport} data-reset-scope>
+        <span class="size-label">{VIEWPORT_LABEL[vp]}</span>
+        <ControlBody width="4.75rem" linked={!size.edited}>
+          <input
+            class="size-input"
+            type="number"
+            min={SIZE_RANGE_PX.min}
+            max={SIZE_RANGE_PX.max}
+            step="any"
+            value={formatPx(size.px)}
+            aria-label="{style.name} {vp} size in px"
+            title={size.edited ? `Recommended ${formatPx(size.recommendedPx)}px` : 'Recommended size'}
+            onchange={(e) => editSize(vp, e.currentTarget)}
+          />
+          {#snippet after()}
+            <span class="unit">px</span>
+            <ResetIcon
+              label="{style.name} {vp} size"
+              visible={size.edited}
+              onreset={() => edits.resetSize(target, vp)}
+            />
+          {/snippet}
+        </ControlBody>
+      </div>
+    {/each}
+  </div>
+
+  <div class="step-sample" style={sampleStyle}>{style.preview}</div>
+
+  <div class="step-controls">
+    <StyleControl
+      label="Face"
+      name="{style.name} face"
+      width="10rem"
+      resetVisible={isStored(view, axis('font-family'))}
+      onreset={reset('font-family')}
+      link={link('font-family', faceLabel)}
+    >
+      <UIFontFamilySelector variable={axis('font-family')} onwrite={write('font-family')} />
+    </StyleControl>
+    <StyleControl
+      label="Weight"
+      name="{style.name} weight"
+      width="8rem"
+      resetVisible={isStored(view, axis('font-weight'))}
+      onreset={reset('font-weight')}
+      link={link('font-weight', weightLabel)}
+    >
+      <UIFontWeightSelector variable={axis('font-weight')} onwrite={write('font-weight')} />
+    </StyleControl>
+    <StyleControl
+      label="Line height"
+      name="{style.name} line height"
+      width="8rem"
+      resetVisible={isStored(view, axis('line-height'))}
+      onreset={reset('line-height')}
+    >
+      <UILineHeightSelector variable={axis('line-height')} onwrite={write('line-height')} />
+    </StyleControl>
+    <StyleControl
+      label="Letter spacing"
+      name="{style.name} letter spacing"
+      width="9.5rem"
+      resetVisible={isStored(view, axis('letter-spacing'))}
+      onreset={reset('letter-spacing')}
+    >
+      <UILetterSpacingSelector variable={axis('letter-spacing')} onwrite={write('letter-spacing')} />
+    </StyleControl>
+    {#if style.hasTextTransform}
+      <StyleControl
+        label="Transform"
+        name="{style.name} transform"
+        width="8rem"
+        resetVisible={isStored(view, axis('text-transform'))}
+        onreset={reset('text-transform')}
+      >
+        <UITextTransformSelector variable={axis('text-transform')} onwrite={write('text-transform')} />
+      </StyleControl>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .step {
+    display: grid;
+    grid-template-columns: 7.5rem 11.5rem minmax(0, 1fr);
+    column-gap: var(--ui-space-16);
+    row-gap: var(--ui-space-10);
+    padding: var(--ui-space-12) var(--ui-space-10);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  .step:last-child {
+    border-bottom: none;
+  }
+
+  .step-id {
+    grid-row: 1 / span 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ui-space-6);
+    min-width: 0;
+  }
+
+  .step-name {
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-primary);
+  }
+
+  .chip {
+    padding: 1px var(--ui-space-8);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-full);
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-xs);
+  }
+
+  .flag {
+    padding: 1px var(--ui-space-8);
+    border: 1px dashed var(--ui-border-high);
+    border-radius: var(--ui-radius-full);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-xs);
+    white-space: nowrap;
+  }
+
+  .sizes {
+    grid-row: 1 / span 2;
+    display: grid;
+    align-content: start;
+    gap: var(--ui-space-6);
+  }
+
+  .size-row {
+    display: grid;
+    grid-template-columns: 3.5rem auto;
+    align-items: center;
+    gap: var(--ui-space-4);
+  }
+
+  .size-label {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+  }
+
+  .size-row.is-current .size-label {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .size-input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 1.75rem;
+    padding: 0 var(--ui-space-8);
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-primary);
+    font: inherit;
+    font-size: var(--ui-font-size-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .size-input:hover {
+    border-color: var(--ui-border-high);
+  }
+
+  .size-input:focus-visible {
+    outline: 2px solid var(--ui-text-primary);
+    outline-offset: 2px;
+  }
+
+  .unit {
+    flex: none;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+  }
+
+  /* Samples take the editor's ink; colour sits outside a text style. */
+  .step-sample {
+    grid-column: 3;
+    min-width: 0;
+    max-width: min(100%, 22ch);
+    color: var(--ui-text-primary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    text-wrap: balance;
+  }
+
+  .step-controls {
+    grid-column: 3;
+    align-self: end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-12);
+  }
+
+  @media (max-width: 720px) {
+    .step {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .step-id {
+      grid-row: auto;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .sizes {
+      grid-row: auto;
+    }
+
+    .step-sample,
+    .step-controls {
+      grid-column: auto;
+    }
+  }
+</style>