@motion-proto/live-tokens 0.94.2 → 0.95.0

package/src/editor/ui/sections/ColumnsSection.svelte

@@ -1,31 +1,52 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { editorState, mutate, beginSliderGesture } from '../../core/store/editorStore';
-  import type { ColumnsState } from '../../core/store/editorTypes';
+  import {
+    COLUMN_BREAKPOINTS,
+    COLUMN_DEFAULTS,
+    type ColumnProperty,
+    type ColumnViewport,
+  } from '../../core/themes/slices/columns';
+  import UISegmentedControl from '../UISegmentedControl.svelte';
 
-  const STANDARD_COLS = 12;
   const COLS_MIN = 1;
   const COLS_MAX = 24;
-  // Pointer-events needed to break free of 12 once the drag arrives there.
-  // The slider is bound to state, so returning early during these trips
-  // keeps the thumb visually pinned at 12 even as the pointer wanders.
+  // Pointer-events needed to break free of the default count once the drag
+  // arrives there. The slider is bound to state, so returning early during
+  // these trips keeps the thumb visually pinned even as the pointer wanders.
   const DETENT_RESISTANCE = 4;
 
+  const VIEWPORT_OPTIONS: { value: ColumnViewport; label: string; title: string }[] = [
+    { value: 'desktop', label: 'Desktop', title: `Wider than ${COLUMN_BREAKPOINTS.tablet}px` },
+    { value: 'tablet', label: 'Tablet', title: `${COLUMN_BREAKPOINTS.tablet}px and narrower` },
+    { value: 'phone', label: 'Phone', title: `${COLUMN_BREAKPOINTS.phone}px and narrower` },
+  ];
+
+  let viewport = $state<ColumnViewport>('desktop');
+  let count = $derived($editorState.columns.count);
+  let values = $derived($editorState.columns.viewports[viewport]);
+  let viewportLabel = $derived(VIEWPORT_OPTIONS.find((o) => o.value === viewport)!.label.toLowerCase());
+  // The preview scales the grid to the widest window it serves.
+  let previewWidth = $derived(viewport === 'desktop' ? $editorState.columns.maxWidth : COLUMN_BREAKPOINTS[viewport]);
+
   function clampNum(v: number, lo: number, hi: number): number {
     return Math.max(lo, Math.min(hi, Math.round(v)));
   }
 
+  function setViewportValue(property: ColumnProperty, value: number) {
+    const target = viewport;
+    mutate(`set ${target} columns ${property}`, (s) => { s.columns.viewports[target][property] = value; });
+  }
   function setColumnsCount(n: number) {
     mutate('set columns count', (s) => { s.columns.count = clampNum(n, COLS_MIN, COLS_MAX); });
   }
-  function setColumnsMaxWidth(px: number) {
-    mutate('set columns max-width', (s) => { s.columns.maxWidth = clampNum(px, 320, 2560); });
-  }
   function setColumnsGutter(px: number) {
-    mutate('set columns gutter', (s) => { s.columns.gutter = clampNum(px, 0, 200); });
+    setViewportValue('gutter', clampNum(px, 0, 200));
   }
   function setColumnsMargin(px: number) {
-    mutate('set columns margin', (s) => { s.columns.margin = clampNum(px, 0, 400); });
+    setViewportValue('margin', clampNum(px, 0, 400));
+  }
+  function setColumnsMaxWidth(px: number) {
+    mutate('set columns max-width', (s) => { s.columns.maxWidth = clampNum(px, 320, 2560); });
   }
 
   let colsDragging = false;
@@ -41,76 +62,70 @@
     colsDetentTrips = 0;
   }
   function handleColsInput(raw: number, target: HTMLInputElement) {
-    const current = $editorState.columns.count;
+    const detent = COLUMN_DEFAULTS.count;
     if (
       colsDragging &&
-      current === STANDARD_COLS &&
-      Math.abs(raw - STANDARD_COLS) === 1
+      count === detent &&
+      Math.abs(raw - detent) === 1
     ) {
       colsDetentTrips += 1;
       if (colsDetentTrips < DETENT_RESISTANCE) {
         // Force the thumb back. Svelte's controlled value may not re-sync
         // when the underlying number is unchanged, so set the DOM value here.
-        target.value = String(STANDARD_COLS);
+        target.value = String(detent);
         return;
       }
       colsDetentTrips = 0;
     }
-    if (raw === STANDARD_COLS) colsDetentTrips = 0;
+    if (raw === detent) colsDetentTrips = 0;
     setColumnsCount(raw);
   }
 
-  // Tick position on the slider track. Slider runs from COLS_MIN to COLS_MAX,
-  // so 12 sits at (12 - min) / (max - min) along the track. Inset the edges by
-  // approximately one thumb-radius so the tick aligns with where the thumb
-  // sits when value === 12.
-  const colsTickPct = ((STANDARD_COLS - COLS_MIN) / (COLS_MAX - COLS_MIN)) * 100;
-
-  let initialColumns: ColumnsState | null = null;
+  // Inset by approximately one thumb-radius so the tick aligns with where the
+  // thumb sits at the default count.
+  const colsTickPct = ((COLUMN_DEFAULTS.count - COLS_MIN) / (COLS_MAX - COLS_MIN)) * 100;
 
-  onMount(() => {
-    initialColumns = { ...$editorState.columns };
-  });
-
-  function resetColumns() {
-    if (!initialColumns) return;
-    const snapshot = initialColumns;
-    mutate('reset columns', (s) => { s.columns = { ...snapshot }; });
+  function resetViewport() {
+    const target = viewport;
+    mutate(`reset ${target} columns`, (s) => { s.columns.viewports[target] = { ...COLUMN_DEFAULTS.viewports[target] }; });
   }
 </script>
 
 <section class="section" id="columns">
   <h2 class="section-title">Columns</h2>
   <p class="columns-intro">
-    Layout grid for page content. Toggle the live overlay from the editor bar's
+    Layout grid for page content. The count and the max width hold at every
+    width. Desktop, tablet and phone each hold a gutter and a margin, and the
+    grid switches them at {COLUMN_BREAKPOINTS.tablet}px and
+    {COLUMN_BREAKPOINTS.phone}px. Toggle the live overlay from the editor bar's
     <i class="fas fa-grip-lines-vertical"></i> button to visualize.
   </p>
 
   <div class="columns-controls">
     <div class="global-shadow-row cols-row">
-      <span class="shadow-slider-label" title="Number of columns">Cols</span>
+      <span class="shadow-slider-label" title="Number of columns, shared by every viewport">Cols</span>
       <div class="cols-slider-wrap">
-        <input type="range" min={COLS_MIN} max={COLS_MAX} value={$editorState.columns.count}
+        <input type="range" min={COLS_MIN} max={COLS_MAX} value={count}
           onpointerdown={onColsPointerDown}
           onpointerup={onColsPointerUp}
           onpointercancel={onColsPointerUp}
           oninput={(e) => handleColsInput(+e.currentTarget.value, e.currentTarget)} />
         <span class="cols-tick" style="left: {colsTickPct}%" aria-hidden="true"></span>
-        <span class="cols-tick-label" style="left: {colsTickPct}%" aria-hidden="true">12</span>
+        <span class="cols-tick-label" style="left: {colsTickPct}%" aria-hidden="true">{COLUMN_DEFAULTS.count}</span>
       </div>
       <input class="shadow-slider-input" type="number" min={COLS_MIN} max={COLS_MAX}
-        value={$editorState.columns.count}
+        value={count}
         onchange={(e) => setColumnsCount(+e.currentTarget.value)} />
       <span class="shadow-slider-unit"></span>
     </div>
-    {#if $editorState.columns.count !== STANDARD_COLS}
+    {#if count !== COLUMN_DEFAULTS.count}
       <p class="cols-consequence" role="note">
         <i class="fas fa-circle-exclamation"></i>
-        <span>Most components assume 12 cols. Reset to restore.</span>
+        <span>Most layouts assume {COLUMN_DEFAULTS.count} cols.</span>
       </p>
     {/if}
     <div class="global-shadow-row">
-      <span class="shadow-slider-label" title="Maximum content width">Max-Width</span>
+      <span class="shadow-slider-label" title="Maximum content width, shared by every viewport">Max-Width</span>
       <input type="range" min="480" max="2560" step="10" value={$editorState.columns.maxWidth}
         onpointerdown={() => beginSliderGesture('drag columns max-width')}
         oninput={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
@@ -119,41 +134,49 @@
         onchange={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
       <span class="shadow-slider-unit">px</span>
     </div>
+
+    <div class="columns-viewport">
+      <UISegmentedControl bind:value={viewport} options={VIEWPORT_OPTIONS} ariaLabel="Viewport" />
+    </div>
+
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Space between columns">Gutter</span>
-      <input type="range" min="0" max="80" value={$editorState.columns.gutter}
-        onpointerdown={() => beginSliderGesture('drag columns gutter')}
+      <input type="range" min="0" max="80" value={values.gutter}
+        onpointerdown={() => beginSliderGesture(`drag ${viewport} columns gutter`)}
         oninput={(e) => setColumnsGutter(+e.currentTarget.value)} />
       <input class="shadow-slider-input" type="number" min="0" max="200"
-        value={$editorState.columns.gutter}
+        value={values.gutter}
         onchange={(e) => setColumnsGutter(+e.currentTarget.value)} />
       <span class="shadow-slider-unit">px</span>
     </div>
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Outer page margin (side gutters)">Margin</span>
-      <input type="range" min="0" max="200" value={$editorState.columns.margin}
-        onpointerdown={() => beginSliderGesture('drag columns margin')}
+      <input type="range" min="0" max="200" value={values.margin}
+        onpointerdown={() => beginSliderGesture(`drag ${viewport} columns margin`)}
         oninput={(e) => setColumnsMargin(+e.currentTarget.value)} />
       <input class="shadow-slider-input columns-input-wide" type="number" min="0" max="400"
-        value={$editorState.columns.margin}
+        value={values.margin}
         onchange={(e) => setColumnsMargin(+e.currentTarget.value)} />
       <span class="shadow-slider-unit">px</span>
     </div>
 
     <div class="columns-controls-footer">
-      <button class="columns-reset" onclick={resetColumns} title="Restore values from when this editor session opened">
+      <button class="columns-reset" onclick={resetViewport} title="Restore the default {viewportLabel} gutter and margin">
         <i class="fas fa-rotate-left"></i>
-        Reset to initial
+        Reset {viewportLabel}
       </button>
     </div>
   </div>
 
+  <!-- A scaled picture of the grid at the widest window it serves: gutter and
+       margin are shares of that width, so the preview keeps its proportions in
+       any panel. -->
   <div class="columns-preview">
     <div
       class="columns-preview-inner"
-      style="gap: {$editorState.columns.gutter}px; padding-inline: {$editorState.columns.margin}px; grid-template-columns: repeat({$editorState.columns.count}, 1fr);"
+      style="gap: {(values.gutter / previewWidth) * 100}%; padding-inline: {(values.margin / previewWidth) * 100}%; grid-template-columns: repeat({count}, minmax(0, 1fr));"
     >
-      {#each Array($editorState.columns.count) as _, i}
+      {#each { length: count }, i (i)}
         <div class="columns-preview-col"><span>{i + 1}</span></div>
       {/each}
     </div>
@@ -203,6 +226,13 @@
     text-align: left;
   }
 
+  .columns-viewport {
+    display: flex;
+    padding-top: var(--ui-space-8);
+    margin-top: var(--ui-space-4);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
   .cols-row {
     /* Slightly more breathing room so the tick label below the slider
        does not collide with the next row. */

package/src/editor/ui/sections/ShadowsSection.svelte

@@ -853,6 +853,20 @@
     align-items: flex-start;
   }
 
+  /* No room for the sidebar: the editor stacks above the shadows and scrolls
+     with them, since pinned it would cover the screen. */
+  @media (max-width: 600px) {
+    .shadows-layout {
+      flex-direction: column-reverse;
+      align-items: stretch;
+    }
+
+    .global-shadow-editor {
+      position: static;
+      width: auto;
+    }
+  }
+
   .shadows-main {
     flex: 1;
     min-width: 0;

package/src/editor/ui/sections/WashesSection.svelte

@@ -205,6 +205,17 @@
 
   .wash-control { min-width: 0; }
 
+  /* Too narrow for three columns: the control drops under the swatch and name. */
+  @media (max-width: 600px) {
+    .wash-row {
+      grid-template-columns: 3.5rem minmax(0, 1fr);
+    }
+
+    .wash-control {
+      grid-column: 1 / -1;
+    }
+  }
+
   .wash-opacity {
     display: flex;
     align-items: center;

package/src/editor/ui/sketch/SketchTab.svelte

@@ -1159,7 +1159,7 @@
 
   .preview-col {
     position: sticky;
-    top: 0;
+    top: var(--editor-sticky-top, 0px);
   }
 
   @media (max-width: 1100px) {

package/src/live-tokens/data/colors-and-type/autumn.json

@@ -2219,10 +2219,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2407,7 +2404,7 @@
       "family": null
     }
   ],
-  "schemaVersion": 9,
+  "schemaVersion": 10,
   "gradients": [
     {
       "variable": "--gradient-1",

package/src/live-tokens/data/colors-and-type/default.json

@@ -2250,10 +2250,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-success-500) 0%, var(--color-info-500) 100%)",
     "--gradient-4": "linear-gradient(45deg, var(--color-danger-500) 0%, var(--color-warning-500) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2417,5 +2414,5 @@
       ]
     }
   ],
-  "schemaVersion": 9
+  "schemaVersion": 10
 }

package/src/live-tokens/data/colors-and-type/halloween.json

@@ -2266,10 +2266,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-accent-400) 0%, var(--color-accent-700) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2446,7 +2443,7 @@
       "family": null
     }
   ],
-  "schemaVersion": 9,
+  "schemaVersion": 10,
   "gradients": [
     {
       "variable": "--gradient-1",

package/src/live-tokens/data/colors-and-type/midnight-study.json

@@ -2262,10 +2262,7 @@
     }
   },
   "cssVariables": {
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2525,5 +2522,5 @@
       "family": null
     }
   ],
-  "schemaVersion": 9
+  "schemaVersion": 10
 }

package/src/live-tokens/data/colors-and-type/ocean.json

@@ -2219,10 +2219,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-400) 0%, var(--color-special-700) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2406,7 +2403,7 @@
       "family": null
     }
   ],
-  "schemaVersion": 9,
+  "schemaVersion": 10,
   "gradients": [
     {
       "variable": "--gradient-1",

package/src/live-tokens/data/colors-and-type/royal-velvet.json

@@ -2251,10 +2251,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-accent-400) 0%, var(--color-accent-700) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2437,7 +2434,7 @@
       "family": null
     }
   ],
-  "schemaVersion": 9,
+  "schemaVersion": 10,
   "gradients": [
     {
       "variable": "--gradient-1",

package/src/live-tokens/data/colors-and-type/sketchy.json

@@ -2205,10 +2205,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2482,5 +2479,5 @@
       "family": null
     }
   ],
-  "schemaVersion": 9
+  "schemaVersion": 10
 }

package/src/live-tokens/data/colors-and-type/spring-meadow.json

@@ -2205,10 +2205,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-400) 0%, var(--color-special-700) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2393,7 +2390,7 @@
       "family": null
     }
   ],
-  "schemaVersion": 9,
+  "schemaVersion": 10,
   "gradients": [
     {
       "variable": "--gradient-1",

package/src/live-tokens/data/colors-and-type/sunset.json

@@ -2266,10 +2266,7 @@
     "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
     "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
     "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-    "--columns-count": "12",
     "--columns-max-width": "1440px",
-    "--columns-gutter": "32px",
-    "--columns-margin": "0px",
     "--scrim-color": "var(--surface-neutral-lowest)",
     "--scrim-opacity-low": "0.7",
     "--scrim-opacity": "0.8",
@@ -2445,7 +2442,7 @@
       "family": null
     }
   ],
-  "schemaVersion": 9,
+  "schemaVersion": 10,
   "gradients": [
     {
       "variable": "--gradient-1",

package/src/live-tokens/data/themes/autumn.json

@@ -2224,10 +2224,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2412,7 +2409,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9,
+    "schemaVersion": 10,
     "gradients": [
       {
         "variable": "--gradient-1",

package/src/live-tokens/data/themes/halloween.json

@@ -2271,10 +2271,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-accent-400) 0%, var(--color-accent-700) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2451,7 +2448,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9,
+    "schemaVersion": 10,
     "gradients": [
       {
         "variable": "--gradient-1",

package/src/live-tokens/data/themes/midnight-study.json

@@ -2267,10 +2267,7 @@
       }
     },
     "cssVariables": {
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2530,7 +2527,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9
+    "schemaVersion": 10
   },
   "componentConfigs": {
     "badge": {

package/src/live-tokens/data/themes/ocean.json

@@ -2224,10 +2224,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-400) 0%, var(--color-special-700) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2411,7 +2408,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9,
+    "schemaVersion": 10,
     "gradients": [
       {
         "variable": "--gradient-1",

package/src/live-tokens/data/themes/royal-velvet.json

@@ -2256,10 +2256,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-accent-400) 0%, var(--color-accent-700) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2442,7 +2439,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9,
+    "schemaVersion": 10,
     "gradients": [
       {
         "variable": "--gradient-1",

package/src/live-tokens/data/themes/sketchy.json

@@ -2210,10 +2210,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2487,7 +2484,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9
+    "schemaVersion": 10
   },
   "componentConfigs": {
     "badge": {

package/src/live-tokens/data/themes/spring-meadow.json

@@ -2210,10 +2210,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-400) 0%, var(--color-special-700) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-200) 0%, var(--color-canvas-500) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2398,7 +2395,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9,
+    "schemaVersion": 10,
     "gradients": [
       {
         "variable": "--gradient-1",

package/src/live-tokens/data/themes/sunset.json

@@ -2271,10 +2271,7 @@
       "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
       "--gradient-3": "linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%)",
       "--gradient-4": "linear-gradient(180deg, var(--color-canvas-600) 0%, var(--color-canvas-900) 100%)",
-      "--columns-count": "12",
       "--columns-max-width": "1440px",
-      "--columns-gutter": "32px",
-      "--columns-margin": "0px",
       "--scrim-color": "var(--surface-neutral-lowest)",
       "--scrim-opacity-low": "0.7",
       "--scrim-opacity": "0.8",
@@ -2450,7 +2447,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 9,
+    "schemaVersion": 10,
     "gradients": [
       {
         "variable": "--gradient-1",