@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{ui → editor/ui}/sections/OverlaysSection.svelte

@@ -6,8 +6,8 @@
    * rgba values out to :root, so this component only orchestrates mutations
    * and reads derived display state.
    */
-  import { editorState, mutate, beginSliderGesture } from '../../lib/editorStore';
-  import type { OverlayToken, OverlayChannelGlobals, EditorState } from '../../lib/editorTypes';
+  import { editorState, mutate, beginSliderGesture } from '../../core/store/editorStore';
+  import type { OverlayToken, OverlayChannelGlobals, EditorState } from '../../core/store/editorTypes';
 
   interface Props {
     copiedVar?: string | null;
@@ -337,20 +337,20 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     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);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
   .group-title {
-    font-size: var(--ui-font-size-md);
+    font-size: var(--ui-font-size-lg);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-secondary);
     margin: 0;
@@ -404,7 +404,7 @@
     border-radius: var(--ui-radius-md);
     position: relative;
     overflow: hidden;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     background-image:
       linear-gradient(45deg, #ccc 25%, transparent 25%),
       linear-gradient(-45deg, #ccc 25%, transparent 25%),
@@ -442,7 +442,7 @@
     gap: var(--ui-space-8);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     margin-top: var(--ui-space-8);
   }
@@ -517,7 +517,7 @@
     text-align: right;
     flex-shrink: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
@@ -532,7 +532,7 @@
 
   .shadow-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-slider-unit {
@@ -564,7 +564,7 @@
     gap: var(--ui-space-8);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     width: 100%;
     min-width: 14rem;
@@ -576,7 +576,7 @@
     gap: var(--ui-space-4);
     margin-top: var(--ui-space-4);
     padding-top: var(--ui-space-8);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .shadow-css-output code {
@@ -592,7 +592,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     text-align: center;
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -600,7 +600,7 @@
 
   .shadow-copy-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .slider-track {
@@ -609,7 +609,7 @@
     position: relative;
     height: 12px;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .slider-track input[type="range"] {
@@ -631,7 +631,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -641,7 +641,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -661,7 +661,7 @@
     width: 2rem;
     flex-shrink: 0;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .global-color-sliders {

package/src/{ui → editor/ui}/sections/ShadowsSection.svelte

@@ -18,8 +18,8 @@
     seedShadowsFromDom, shadowTokenCss, computeShadowXY,
     SCALE_SHADOW_VARIABLES, defaultShadowOverride,
     type Scope,
-  } from '../../lib/editorStore';
-  import type { ShadowToken, ShadowOverrideFlags, EditorState } from '../../lib/editorTypes';
+  } from '../../core/store/editorStore';
+  import type { ShadowToken, ShadowOverrideFlags, EditorState } from '../../core/store/editorTypes';
 
   interface Props {
     copiedVar?: string | null;
@@ -799,16 +799,16 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     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);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
   .token-info {
@@ -890,7 +890,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-4) var(--ui-space-8);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     text-align: center;
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -898,7 +898,7 @@
 
   .reset-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-box {
@@ -945,7 +945,7 @@
     text-align: right;
     flex-shrink: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
@@ -960,7 +960,7 @@
 
   .shadow-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-slider-unit {
@@ -980,7 +980,7 @@
 
   .dial-ring {
     fill: none;
-    stroke: var(--ui-border-subtle);
+    stroke: var(--ui-border-low);
     stroke-width: 1.5;
   }
 
@@ -996,7 +996,7 @@
   }
 
   .angle-dial:hover .dial-ring {
-    stroke: var(--ui-border-medium);
+    stroke: var(--ui-border-high);
   }
 
   .angle-dial:hover .dial-handle {
@@ -1009,7 +1009,7 @@
     gap: var(--ui-space-4);
     margin-top: var(--ui-space-4);
     padding-top: var(--ui-space-8);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .shadow-css-output code {
@@ -1025,7 +1025,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     text-align: center;
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -1033,7 +1033,7 @@
 
   .shadow-copy-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   /* Global shadow editor */
@@ -1046,7 +1046,7 @@
     gap: var(--ui-space-6);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     width: 18rem;
   }
@@ -1103,7 +1103,7 @@
     position: relative;
     height: 12px;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .slider-track input[type="range"] {
@@ -1125,7 +1125,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -1135,7 +1135,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -1155,7 +1155,7 @@
     width: 2rem;
     flex-shrink: 0;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .global-color-sliders {
@@ -1172,7 +1172,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-4) var(--ui-space-8);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-low);
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -1180,7 +1180,7 @@
 
   .bg-picker-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .bg-picker-menu {
@@ -1192,7 +1192,7 @@
     max-height: 24rem;
     overflow-y: auto;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     padding: var(--ui-space-4);
     display: flex;
@@ -1250,7 +1250,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }
 </style>

package/src/{ui → editor/ui}/sections/TokenScaleTable.svelte

@@ -12,7 +12,7 @@
    * Values are read live via getComputedStyle (passed in by the parent through
    * `tokens`), so tokens.css remains the single source of truth.
    */
-  import { editorState } from '../../lib/editorStore';
+  import { editorState } from '../../core/store/editorStore';
 
   interface TokenItem {
     variable: string;
@@ -263,7 +263,7 @@
     width: 3.5rem;
     height: 3.5rem;
     background: none;
-    border: 2px solid var(--ui-border-medium);
+    border: 2px solid var(--ui-border-high);
   }
 
   /* Font sizes / icon sizes */
@@ -339,7 +339,7 @@
     align-items: baseline;
     gap: var(--ui-space-12);
     padding: var(--ui-space-4) 0;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .token-row:last-child {

package/src/{components → system/components}/Badge.svelte

@@ -21,14 +21,6 @@
     variant?: BadgeVariant;
     size?: 'default' | 'small';
     icon?: string | undefined;
-    /** When true, badge is absolutely positioned. Requires the parent to be position: relative. */
-    floating?: boolean;
-    /** Corner of the positioned parent to attach to when floating. */
-    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /** CSS length to offset from the anchor edges. Defaults to --space-12 (or --space-8 when size='small'). */
-    offset?: string | undefined;
-    /** When true, badge sits flush in the anchor corner: zero offset and squared corners. */
-    flush?: boolean;
     /** Custom icon content. Falls back to `icon` prop's font-icon class. Renamed from `slot="icon"` in 0.5.0. */
     iconSlot?: Snippet;
     children?: Snippet;
@@ -38,10 +30,6 @@
     variant = 'info',
     size = 'default',
     icon = undefined,
-    floating = false,
-    anchor = 'bottom-right',
-    offset = undefined,
-    flush = false,
     iconSlot,
     children,
   }: Props = $props();
@@ -50,10 +38,6 @@
 <span
   class="badge badge-{variant}"
   class:badge-small={size === 'small'}
-  class:badge-floating={floating}
-  class:badge-flush={flush}
-  data-anchor={floating ? anchor : undefined}
-  style={floating && offset && !flush ? `--badge-offset: ${offset};` : undefined}
 >
   {#if icon}
     <span class="icon"><i class={icon}></i></span>
@@ -228,7 +212,6 @@
   }
 
   .badge {
-    --badge-offset: var(--space-12);
     display: inline-flex;
     align-items: center;
     gap: var(--space-6);
@@ -249,22 +232,9 @@
   }
 
   .badge-small {
-    --badge-offset: var(--space-8);
     gap: var(--space-4);
   }
 
-  .badge-floating {
-    position: absolute;
-    /* Floating badges are decorative overlays over other content — let clicks
-       pass through to whatever owns the underlying surface (links, buttons). */
-    pointer-events: none;
-  }
-
-  .badge-floating[data-anchor='top-left']     { top: var(--badge-offset); left: var(--badge-offset); }
-  .badge-floating[data-anchor='top-right']    { top: var(--badge-offset); right: var(--badge-offset); }
-  .badge-floating[data-anchor='bottom-left']  { bottom: var(--badge-offset); left: var(--badge-offset); }
-  .badge-floating[data-anchor='bottom-right'] { bottom: var(--badge-offset); right: var(--badge-offset); }
-
   @each $v in $variants {
     .badge-#{$v} {
       --badge-icon-size: var(--badge-#{$v}-icon-size);
@@ -281,10 +251,4 @@
       box-shadow: var(--badge-#{$v}-shadow);
     }
   }
-
-  /* Flush wins over per-variant radius via source order — declared after @each. */
-  .badge-flush {
-    --badge-offset: 0;
-    border-radius: 0;
-  }
 </style>

package/src/{components → system/components}/Button.svelte

@@ -140,6 +140,7 @@
       --button-outline-hover-border-width: var(--border-width-1);
       --button-outline-hover-radius: var(--radius-md);
       --button-outline-hover-padding: var(--space-8);
+      --button-outline-active-surface: var(--hover);
       --button-outline-disabled-surface: var(--color-transparent);
       --button-outline-disabled-text: var(--text-tertiary);
       --button-outline-disabled-border: var(--border-neutral-faint);
@@ -226,7 +227,6 @@
 
    .button {
       cursor: pointer;
-      letter-spacing: 0.0125rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -385,7 +385,7 @@
          }
 
          &:active:not(:disabled) {
-            background: rgba(255, 255, 255, 0.08);
+            background: var(--button-outline-active-surface);
          }
 
          &:disabled {

package/src/{components → system/components}/Card.svelte

@@ -39,9 +39,10 @@
   </div>
 </div>
 
-<style>
+<style lang="scss">
+  @use '../styles/padding' as *;
+
   :global(:root) {
-    /* Default */
     --card-default-surface: var(--surface-neutral-high);
     --card-default-border: var(--border-neutral);
     --card-default-border-width: var(--border-width-1);
@@ -66,30 +67,8 @@
     --card-default-body-font-weight: var(--font-weight-normal);
     --card-default-body-line-height: var(--line-height-md);
 
-    /* Hover */
-    --card-hover-surface: var(--surface-neutral-high);
     --card-hover-border: var(--border-neutral-strong);
-    --card-hover-border-width: var(--border-width-1);
-    --card-hover-radius: var(--radius-lg);
-    --card-hover-header-padding: var(--space-16);
-    --card-hover-body-padding: var(--space-16);
     --card-hover-shadow: var(--shadow-md);
-    --card-hover-blur: var(--blur-none);
-    --card-hover-header-surface: var(--color-transparent);
-
-    --card-hover-title: var(--text-primary);
-    --card-hover-title-font-family: var(--font-sans);
-    --card-hover-title-font-size: var(--font-size-lg);
-    --card-hover-title-font-weight: var(--font-weight-normal);
-    --card-hover-title-line-height: var(--line-height-sm);
-
-    --card-hover-icon-size: var(--icon-size-lg);
-
-    --card-hover-body: var(--text-secondary);
-    --card-hover-body-font-family: var(--font-sans);
-    --card-hover-body-font-size: var(--font-size-md);
-    --card-hover-body-font-weight: var(--font-weight-normal);
-    --card-hover-body-line-height: var(--line-height-md);
   }
 
   .card {
@@ -98,7 +77,7 @@
     border-radius: var(--card-default-radius);
     box-shadow: var(--card-default-shadow);
     backdrop-filter: blur(var(--card-default-blur));
-    transition: all var(--duration-150);
+    transition: border-color var(--duration-150), box-shadow var(--duration-150);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -106,27 +85,18 @@
 
   .card:not(.no-hover):hover,
   .card.force-hover {
-    background: var(--card-hover-surface);
-    border: var(--card-hover-border-width) solid var(--card-hover-border);
-    border-radius: var(--card-hover-radius);
+    border-color: var(--card-hover-border);
     box-shadow: var(--card-hover-shadow);
-    backdrop-filter: blur(var(--card-hover-blur));
   }
 
   .card-header {
     display: flex;
     align-items: center;
     gap: var(--space-8);
-    padding: var(--card-default-header-padding);
+    @include themed-padding(--card-default-header-padding);
     background: var(--card-default-header-surface);
   }
 
-  .card:not(.no-hover):hover .card-header,
-  .card.force-hover .card-header {
-    padding: var(--card-hover-header-padding);
-    background: var(--card-hover-header-surface);
-  }
-
   .card.compact .card-header,
   .card.compact .card-body {
     padding: var(--space-8) var(--space-12);
@@ -137,12 +107,6 @@
     color: var(--card-color, var(--card-default-title));
   }
 
-  .card:not(.no-hover):hover .card-icon,
-  .card.force-hover .card-icon {
-    font-size: var(--card-hover-icon-size);
-    color: var(--card-color, var(--card-hover-title));
-  }
-
   .card.compact .card-icon {
     font-size: var(--icon-size-md);
   }
@@ -155,15 +119,6 @@
     line-height: var(--card-default-title-line-height);
   }
 
-  .card:not(.no-hover):hover .card-title,
-  .card.force-hover .card-title {
-    color: var(--card-hover-title);
-    font-family: var(--card-hover-title-font-family);
-    font-size: var(--card-hover-title-font-size);
-    font-weight: var(--card-hover-title-font-weight);
-    line-height: var(--card-hover-title-line-height);
-  }
-
   .card.compact .card-title {
     font-size: var(--font-size-md);
   }
@@ -174,17 +129,36 @@
     font-size: var(--card-default-body-font-size);
     font-weight: var(--card-default-body-font-weight);
     line-height: var(--card-default-body-line-height);
-    padding: var(--card-default-body-padding);
+    @include themed-padding(--card-default-body-padding);
+  }
+
+  /* Slot content inherits the card's body typography so consumer-side global
+     element rules (e.g. site.css `p { font-family: serif }`) don't override
+     the card-body-font-family alias. */
+  .card-body :global(p),
+  .card-body :global(ul),
+  .card-body :global(ol),
+  .card-body :global(li) {
+    font: inherit;
+    color: inherit;
+  }
+
+  .card-body :global(p) {
+    margin: 0 0 var(--space-12);
+  }
+
+  .card-body :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .card-body :global(ul),
+  .card-body :global(ol) {
+    margin: var(--space-12) 0;
+    padding-left: var(--space-24);
   }
 
-  .card:not(.no-hover):hover .card-body,
-  .card.force-hover .card-body {
-    color: var(--card-hover-body);
-    font-family: var(--card-hover-body-font-family);
-    font-size: var(--card-hover-body-font-size);
-    font-weight: var(--card-hover-body-font-weight);
-    line-height: var(--card-hover-body-line-height);
-    padding: var(--card-hover-body-padding);
+  .card-body :global(li) {
+    margin-bottom: var(--space-4);
   }
 
   .card.compact .card-body {

package/src/{components → system/components}/CollapsibleSection.svelte

@@ -147,7 +147,6 @@
       --collapsiblesection-divider-expanded-padding: var(--space-4);
 
       /* Container — frame (always-on outer chrome) */
-      --collapsiblesection-container-frame-surface: var(--surface-canvas);
       --collapsiblesection-container-frame-border: var(--color-transparent);
       --collapsiblesection-container-frame-border-width: var(--border-width-3);
       --collapsiblesection-container-frame-radius: var(--radius-none);
@@ -270,7 +269,6 @@
    }
 
    .es-root.variant-container {
-      background: var(--collapsiblesection-container-frame-surface);
       border: var(--collapsiblesection-container-frame-border-width) solid var(--collapsiblesection-container-frame-border);
       border-radius: var(--collapsiblesection-container-frame-radius);
       overflow: hidden;
@@ -286,4 +284,29 @@
          @include themed-padding(--collapsiblesection-container-expanded-padding, $h: 2);
       }
    }
+
+   .section-content {
+      color: var(--text-secondary);
+      font-size: var(--font-size-md);
+      line-height: var(--line-height-md);
+   }
+
+   /* Slot content inherits the section's body typography so consumer-side
+      global element rules (e.g. site.css `p { font-family: serif }`) don't
+      override the collapsible's intended type styling. */
+   .section-content :global(p),
+   .section-content :global(ul),
+   .section-content :global(ol),
+   .section-content :global(li) {
+      font: inherit;
+      color: inherit;
+   }
+
+   .section-content :global(p) {
+      margin: 0 0 var(--space-12);
+   }
+
+   .section-content :global(p:last-child) {
+      margin-bottom: 0;
+   }
 </style>