@motion-proto/live-tokens 0.16.2 → 0.17.1

package/src/editor/component-editor/SegmentedControlEditor.svelte

@@ -19,17 +19,9 @@
       { label: 'corner radius', groupKey: 'radius', variable: '--segmentedcontrol-bar-radius' },
       { label: 'option gap', groupKey: 'gap', variable: '--segmentedcontrol-bar-gap' },
       { label: 'padding', variable: '--segmentedcontrol-bar-padding', groupKey: 'bar-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-bar-padding-top', groupKey: 'bar-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-bar-padding-right', groupKey: 'bar-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-bar-padding-bottom', groupKey: 'bar-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-bar-padding-left', groupKey: 'bar-padding-left', hidden: true },
     ],
     'option base': [
       { label: 'padding', variable: '--segmentedcontrol-option-padding', groupKey: 'option-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-option-padding-top', groupKey: 'option-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-option-padding-right', groupKey: 'option-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-option-padding-bottom', groupKey: 'option-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-option-padding-left', groupKey: 'option-padding-left', hidden: true },
       { label: 'icon gap', groupKey: 'option-gap', variable: '--segmentedcontrol-option-gap' },
       { label: 'icon size', groupKey: 'icon-size', variable: '--segmentedcontrol-option-icon-size' },
     ],
@@ -64,20 +56,12 @@
       { label: 'divider width', groupKey: 'small-thickness', variable: '--segmentedcontrol-divider-small-thickness' },
       { label: 'corner radius', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
       { label: 'padding', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-bar-small-padding-top', groupKey: 'bar-small-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-bar-small-padding-right', groupKey: 'bar-small-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-bar-small-padding-bottom', groupKey: 'bar-small-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-bar-small-padding-left', groupKey: 'bar-small-padding-left', hidden: true },
     ],
     'option base': [
       { label: 'icon size', groupKey: 'small-icon-size', variable: '--segmentedcontrol-option-small-icon-size' },
       { label: 'font size', groupKey: 'small-text-font-size', variable: '--segmentedcontrol-option-small-text-font-size' },
       { label: 'line height', groupKey: 'small-text-line-height', variable: '--segmentedcontrol-option-small-text-line-height' },
       { label: 'padding', variable: '--segmentedcontrol-option-small-padding', groupKey: 'option-small-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-option-small-padding-top', groupKey: 'option-small-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-option-small-padding-right', groupKey: 'option-small-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-option-small-padding-bottom', groupKey: 'option-small-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-option-small-padding-left', groupKey: 'option-small-padding-left', hidden: true },
       { label: 'icon gap', groupKey: 'option-small-gap', variable: '--segmentedcontrol-option-small-gap' },
     ],
     'selected option': [

package/src/live-tokens/data/tokens.generated.css

@@ -359,6 +359,30 @@
 
 /* Component aliases (production configs differing from defaults) */
 :root:root {
+  /* button (my-button) */
+  --button-primary-text-font-size: var(--font-size-md);
+  --button-primary-text-font-weight: var(--font-weight-semibold);
+  --button-primary-radius: var(--radius-xl);
+  --button-secondary-text-font-size: var(--font-size-md);
+  --button-secondary-text-font-weight: var(--font-weight-semibold);
+  --button-secondary-radius: var(--radius-xl);
+  --button-outline-text-font-size: var(--font-size-md);
+  --button-outline-text-font-weight: var(--font-weight-semibold);
+  --button-outline-radius: var(--radius-xl);
+  --button-success-text-font-size: var(--font-size-md);
+  --button-success-text-font-weight: var(--font-weight-semibold);
+  --button-success-border-width: var(--border-width-1);
+  --button-success-radius: var(--radius-xl);
+  --button-danger-text-font-size: var(--font-size-md);
+  --button-danger-text-font-weight: var(--font-weight-semibold);
+  --button-danger-border-width: var(--border-width-1);
+  --button-danger-radius: var(--radius-xl);
+  --button-warning-text-font-size: var(--font-size-md);
+  --button-warning-text-font-weight: var(--font-weight-semibold);
+  --button-warning-border-width: var(--border-width-1);
+  --button-warning-radius: var(--radius-xl);
+  --button-small-text-font-size: var(--font-size-sm);
+
   /* card (my-card) */
   --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
   --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);

package/src/system/components/SideNavigation.svelte

@@ -76,6 +76,19 @@
     expandedSections[path] = !expandedSections[path];
   }
 
+  // Clicking a section label whose route is already current would otherwise be
+  // a no-op navigation. Make it a toggle in that case so the user can collapse
+  // the section they just opened without having to chase the chevron. The
+  // chevron's own onclick is unaffected — its event target isn't inside an <a>.
+  function maybeInterceptLabel(e: MouseEvent, section: SideNavSection) {
+    if (!section.hasIndexPage || currentPath !== section.path) return;
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const target = e.target as Element | null;
+    if (!target?.closest('a')) return;
+    e.preventDefault();
+    toggleSection(section.path);
+  }
+
   function fireToggle() {
     ontoggle?.();
     dispatch('toggle');
@@ -164,10 +177,12 @@
     <div class="sn-menu">
       {#each sections as section (section.path)}
         <div class="sn-section">
+          <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
           <div
             class="sn-section-header"
             class:active={isSectionActive(section)}
             class:force-hover={isSectionHover(section)}
+            onclick={(e) => maybeInterceptLabel(e, section)}
           >
             <CollapsibleSection
               variant="chromeless"