@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/system/components/RadioButton.svelte

@@ -1,15 +1,18 @@
-<!--
-  RadioButton.svelte. A form row that selects one option.
-  Use for: a choice the reader reviews as text before committing to a larger
-  form.
-  Not for: an inline switch between views (SegmentedControl); a setting that
-  takes effect at once (Toggle).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A form row that selects one option.',
+    useFor: 'a choice the reader reviews as text before committing to a larger form.',
+    notFor: 'an inline switch between views (SegmentedControl); a setting that takes effect at once (Toggle).',
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
   interface Props {
-    active?: boolean;
+    selected?: boolean;
     label: string;
     color?: string;
     class?: string;
@@ -18,7 +21,7 @@
   }
 
   let {
-    active = false,
+    selected = false,
     label,
     color = '',
     class: className = '',
@@ -36,7 +39,7 @@
 
 <button
   class="radio-button {className}"
-  class:active
+  class:selected
   style={color ? `--radiobutton-color: ${color};` : ''}
   onclick={fireClick}
 >
@@ -68,16 +71,16 @@
     --radiobutton-hover-label-font-weight: var(--font-weight-semibold);
     --radiobutton-hover-label-line-height: var(--line-height-none);
 
-    /* Active */
-    --radiobutton-active-dot-border-color: var(--border-neutral);
-    --radiobutton-active-dot-border-width: var(--border-width-2);
-    --radiobutton-active-dot-fill: var(--text-secondary);
-    --radiobutton-active-dot-size: var(--dot-size-50);
-    --radiobutton-active-label: var(--text-primary);
-    --radiobutton-active-label-font-family: var(--font-sans);
-    --radiobutton-active-label-font-size: var(--font-size-md);
-    --radiobutton-active-label-font-weight: var(--font-weight-semibold);
-    --radiobutton-active-label-line-height: var(--line-height-none);
+    /* Selected */
+    --radiobutton-selected-dot-border-color: var(--border-neutral);
+    --radiobutton-selected-dot-border-width: var(--border-width-2);
+    --radiobutton-selected-dot-fill: var(--text-secondary);
+    --radiobutton-selected-dot-size: var(--dot-size-50);
+    --radiobutton-selected-label: var(--text-primary);
+    --radiobutton-selected-label-font-family: var(--font-sans);
+    --radiobutton-selected-label-font-size: var(--font-size-md);
+    --radiobutton-selected-label-font-weight: var(--font-weight-semibold);
+    --radiobutton-selected-label-line-height: var(--line-height-none);
   }
 
   .radio-button {
@@ -119,7 +122,7 @@
       }
     }
 
-    &.active {
+    &.selected {
       background: linear-gradient(
         135deg,
         color-mix(in srgb, var(--radiobutton-color) 15%, var(--surface-neutral-lowest)),
@@ -127,20 +130,20 @@
       );
 
       .radio-label {
-        color: var(--radiobutton-active-label);
-        font-family: var(--radiobutton-active-label-font-family);
-        font-size: var(--radiobutton-active-label-font-size);
-        font-weight: var(--radiobutton-active-label-font-weight);
-        line-height: var(--radiobutton-active-label-line-height);
+        color: var(--radiobutton-selected-label);
+        font-family: var(--radiobutton-selected-label-font-family);
+        font-size: var(--radiobutton-selected-label-font-size);
+        font-weight: var(--radiobutton-selected-label-font-weight);
+        line-height: var(--radiobutton-selected-label-line-height);
       }
 
       .radio-dot {
-        border: var(--radiobutton-active-dot-border-width) solid var(--radiobutton-color, var(--radiobutton-active-dot-border-color));
+        border: var(--radiobutton-selected-dot-border-width) solid var(--radiobutton-color, var(--radiobutton-selected-dot-border-color));
 
         .radio-dot-fill {
-          width: var(--radiobutton-active-dot-size);
-          height: var(--radiobutton-active-dot-size);
-          background: var(--radiobutton-color, var(--radiobutton-active-dot-fill));
+          width: var(--radiobutton-selected-dot-size);
+          height: var(--radiobutton-selected-dot-size);
+          background: var(--radiobutton-color, var(--radiobutton-selected-dot-fill));
           opacity: 1;
         }
       }

package/src/system/components/SectionDivider.svelte

@@ -1,11 +1,18 @@
-<!--
-  SectionDivider.svelte. A titled break between the sections of a page.
-  Use for: naming the band that follows it.
-  Not for: moving between pages (SideNavigation); a title inside a container
-  (Card).
-  Level: `md` titles a page and `sm` titles a section; `eyebrow` is an opt-in
-  label above the title.
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A titled break between the sections of a page.',
+    useFor: 'naming the section that follows it.',
+    notFor: 'moving between pages (SideNavigation); a title inside a container (Card).',
+    props: {
+      variant: '`sm` titles a section, `md` titles a page, and `lg` is the largest size.',
+      eyebrow: 'an opt-in label above the title.',
+      description: 'an opt-in line under the title.',
+    },
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   /** Size variant. Each variant owns everything that defines its style:
    *  typography, geometry, colors AND the intrinsic display properties
@@ -129,8 +136,8 @@
     --sectiondivider-lg-radius: var(--radius-lg);
     --sectiondivider-lg-border-width: var(--border-width-1);
     --sectiondivider-lg-shadow: var(--shadow-none);
-    --sectiondivider-lg-hairline-thickness: var(--border-width-1);
-    --sectiondivider-lg-background: var(--color-transparent);
+    --sectiondivider-lg-hairline-width: var(--border-width-1);
+    --sectiondivider-lg-surface: var(--color-transparent);
     --sectiondivider-lg-title: var(--text-primary);
     --sectiondivider-lg-description: var(--text-alternate);
     --sectiondivider-lg-eyebrow: var(--text-brand);
@@ -158,8 +165,8 @@
     --sectiondivider-md-radius: var(--radius-lg);
     --sectiondivider-md-border-width: var(--border-width-1);
     --sectiondivider-md-shadow: var(--shadow-none);
-    --sectiondivider-md-hairline-thickness: var(--border-width-1);
-    --sectiondivider-md-background: var(--color-transparent);
+    --sectiondivider-md-hairline-width: var(--border-width-1);
+    --sectiondivider-md-surface: var(--color-transparent);
     --sectiondivider-md-title: var(--text-primary);
     --sectiondivider-md-description: var(--text-secondary);
     --sectiondivider-md-eyebrow: var(--text-tertiary);
@@ -187,8 +194,8 @@
     --sectiondivider-sm-radius: var(--radius-lg);
     --sectiondivider-sm-border-width: var(--border-width-1);
     --sectiondivider-sm-shadow: var(--shadow-none);
-    --sectiondivider-sm-hairline-thickness: var(--border-width-1);
-    --sectiondivider-sm-background: var(--color-transparent);
+    --sectiondivider-sm-hairline-width: var(--border-width-1);
+    --sectiondivider-sm-surface: var(--color-transparent);
     --sectiondivider-sm-title: var(--text-brand);
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
@@ -263,8 +270,8 @@
     --_divider-radius: var(--sectiondivider-lg-radius);
     --_divider-border-width: var(--sectiondivider-lg-border-width);
     --_divider-shadow: var(--sectiondivider-lg-shadow);
-    --_divider-hairline-thickness: var(--sectiondivider-lg-hairline-thickness);
-    --_divider-bg: var(--sectiondivider-lg-background);
+    --_divider-hairline-width: var(--sectiondivider-lg-hairline-width);
+    --_divider-bg: var(--sectiondivider-lg-surface);
     --_divider-title: var(--sectiondivider-lg-title);
     --_divider-description: var(--sectiondivider-lg-description);
     --_divider-eyebrow: var(--sectiondivider-lg-eyebrow);
@@ -298,8 +305,8 @@
     --_divider-radius: var(--sectiondivider-md-radius);
     --_divider-border-width: var(--sectiondivider-md-border-width);
     --_divider-shadow: var(--sectiondivider-md-shadow);
-    --_divider-hairline-thickness: var(--sectiondivider-md-hairline-thickness);
-    --_divider-bg: var(--sectiondivider-md-background);
+    --_divider-hairline-width: var(--sectiondivider-md-hairline-width);
+    --_divider-bg: var(--sectiondivider-md-surface);
     --_divider-title: var(--sectiondivider-md-title);
     --_divider-description: var(--sectiondivider-md-description);
     --_divider-eyebrow: var(--sectiondivider-md-eyebrow);
@@ -333,8 +340,8 @@
     --_divider-radius: var(--sectiondivider-sm-radius);
     --_divider-border-width: var(--sectiondivider-sm-border-width);
     --_divider-shadow: var(--sectiondivider-sm-shadow);
-    --_divider-hairline-thickness: var(--sectiondivider-sm-hairline-thickness);
-    --_divider-bg: var(--sectiondivider-sm-background);
+    --_divider-hairline-width: var(--sectiondivider-sm-hairline-width);
+    --_divider-bg: var(--sectiondivider-sm-surface);
     --_divider-title: var(--sectiondivider-sm-title);
     --_divider-description: var(--sectiondivider-sm-description);
     --_divider-eyebrow: var(--sectiondivider-sm-eyebrow);
@@ -476,7 +483,7 @@
   .sd-hairline {
     display: none;
     background: var(--_divider-hairline-color);
-    height: var(--_divider-hairline-thickness);
+    height: var(--_divider-hairline-width);
   }
   .sd-hairline--row {
     width: 100%;

package/src/system/components/SegmentedControl.svelte

@@ -1,9 +1,13 @@
-<!--
-  SegmentedControl.svelte. An inline switch between named alternatives.
-  Use for: two to four short labels that pick one view of the same data.
-  Not for: swapping the page's content area (TabBar); labels long enough to
-  wrap (RadioButton).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'An inline switch between named alternatives.',
+    useFor: 'two to four short labels that pick one view of the same data.',
+    notFor: "swapping the page's content area (TabBar); labels long enough to wrap (RadioButton).",
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
@@ -60,7 +64,7 @@
 >
   {#each segments as seg, i (seg.value)}
     {#if i > 0}
-      <span class="segment-divider" aria-hidden="true"></span>
+      <span class="segment-hairline" aria-hidden="true"></span>
     {/if}
     <button
       type="button"
@@ -95,11 +99,11 @@
     --segmentedcontrol-bar-padding: var(--space-4);
     --segmentedcontrol-bar-gap: var(--space-8);
 
-    /* Divider (line between non-selected options). Inset is the top + bottom
-       margin trimmed from the divider; 0 = bar-height divider. */
-    --segmentedcontrol-divider-color: var(--border-neutral);
-    --segmentedcontrol-divider-thickness: var(--border-width-1);
-    --segmentedcontrol-divider-inset: var(--space-6);
+    /* Hairline (line between non-selected options). Inset is the top + bottom
+       margin trimmed from the line; 0 = bar-height line. */
+    --segmentedcontrol-hairline-color: var(--border-neutral);
+    --segmentedcontrol-hairline-width: var(--border-width-1);
+    --segmentedcontrol-hairline-inset: var(--space-6);
 
     /* Option (inner button) — shape applies to every state */
     --segmentedcontrol-option-padding: var(--space-8);
@@ -150,8 +154,8 @@
        values so existing state-specific cascades flow through unchanged. */
     --segmentedcontrol-bar-small-padding: var(--space-2);
     --segmentedcontrol-bar-small-radius: var(--radius-md);
-    --segmentedcontrol-small-divider-inset: var(--space-4);
-    --segmentedcontrol-small-divider-thickness: var(--border-width-1);
+    --segmentedcontrol-small-hairline-inset: var(--space-4);
+    --segmentedcontrol-small-hairline-width: var(--border-width-1);
     --segmentedcontrol-option-small-padding: var(--space-6);
     --segmentedcontrol-option-small-gap: var(--space-6);
     --segmentedcontrol-option-small-icon-size: var(--icon-size-sm);
@@ -188,8 +192,8 @@
     --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left, var(--segmentedcontrol-bar-small-padding));
     --segmentedcontrol-bar-radius: var(--segmentedcontrol-bar-small-radius);
 
-    --segmentedcontrol-divider-inset: var(--segmentedcontrol-small-divider-inset);
-    --segmentedcontrol-divider-thickness: var(--segmentedcontrol-small-divider-thickness);
+    --segmentedcontrol-hairline-inset: var(--segmentedcontrol-small-hairline-inset);
+    --segmentedcontrol-hairline-width: var(--segmentedcontrol-small-hairline-width);
 
     --segmentedcontrol-option-padding: var(--segmentedcontrol-option-small-padding);
     --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top, var(--segmentedcontrol-option-small-padding));
@@ -255,21 +259,21 @@
     transition: color var(--duration-150);
   }
 
-  /* Divider between adjacent segments. Stretches to the bar's cross-axis size
+  /* Hairline between adjacent segments. Stretches to the bar's cross-axis size
      by inheriting the parent's `align-items: stretch`; an explicit margin-block
      trims top + bottom so "Full" (0 inset) gives a bar-height line and larger
      insets give shorter ones. Avoids the percentage-height collapse that bit us
-     when the divider was `align-self: center; height: 100%`.
+     when the line was `align-self: center; height: 100%`.
      Negative inline margins absorb the surrounding flex gap so seg-to-seg
      distance stays var(--bar-gap). */
-  .segment-divider {
+  .segment-hairline {
     flex-shrink: 0;
-    width: var(--segmentedcontrol-divider-thickness);
-    margin-block: var(--segmentedcontrol-divider-inset);
+    width: var(--segmentedcontrol-hairline-width);
+    margin-block: var(--segmentedcontrol-hairline-inset);
     margin-inline: calc(
-      var(--segmentedcontrol-bar-gap) * -0.5 - var(--segmentedcontrol-divider-thickness) * 0.5
+      var(--segmentedcontrol-bar-gap) * -0.5 - var(--segmentedcontrol-hairline-width) * 0.5
     );
-    background: var(--segmentedcontrol-divider-color);
+    background: var(--segmentedcontrol-hairline-color);
     pointer-events: none;
   }