@motion-proto/live-tokens 0.61.0 → 0.62.0

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

@@ -4,7 +4,7 @@
   import UISegmentedControl from '../UISegmentedControl.svelte';
   import SketchDial from './SketchDial.svelte';
   import SketchRange from './SketchRange.svelte';
-  import { buildMaskUri, MASK_TILE } from '../../core/sketch/maskField';
+  import { buildMaskUri } from '../../core/sketch/maskField';
   import SketchPreview from './SketchPreview.svelte';
   import { onMount } from 'svelte';
   import UIPillButton from '../UIPillButton.svelte';
@@ -191,7 +191,12 @@
       ceiling is a few blobs across a card, which is where it still reads as
       uneven ink. */
   const SIZE = { min: 20, max: 250 };
-  const BLUR_MAX = 8;
+  const BLUR_MAX = 64;
+  /** Squared response. A blur only reads as a different blur while it is small,
+      so a linear walk to 64px would spend a tenth of the dial on everything
+      legible and the rest sliding between shades of gone. */
+  const blurPos = (px: number) => Math.round(Math.sqrt(px / BLUR_MAX) * 100);
+  const blurVal = (t: number) => Math.round(BLUR_MAX * (t / 100) ** 2 * 4) / 4;
 
   /** Tones the field is flattened into, in the order the dial walks them:
       smooth, then coarsening all the way down to two. The stored value is the
@@ -213,18 +218,12 @@
   let outputMin = $derived(Math.round(s.maskOutputMin * 100));
   let outputMax = $derived(Math.round(s.maskOutputMax * 100));
   let stepPos = $derived(Math.max(0, STEP_TONES.indexOf(s.maskPosterize)));
+  let blurStep = $derived(blurPos(s.maskSoftness));
   const setOutput = (min: number, max: number) =>
     updateSketchSettings({ maskOutputMin: min / 100, maskOutputMax: max / 100 });
 
-  // The same stages the fill filter runs, painted at true pixel size over a
-  // sample card, so blob size here is blob size on the components and the
-  // card's shadow is always on show: coverage that ate it would be a bug you
-  // saw at once.
+  // The finished field, the last stage and the one the components get.
   let maskPreview = $derived(buildMaskUri(s));
-  // The field itself after each stage, white for ink.
-  let stageTiles = $derived(
-    (['noise', 'output', 'blur'] as const).map((stage) => ({ stage, uri: buildMaskUri(s, 9, stage) })),
-  );
 </script>
 
 <div class="sketch-tab">
@@ -538,21 +537,7 @@
           </div>
 
           <figure class="scope" class:muted={!s.maskOn}>
-            <div class="sample">
-              <div
-                class="ink"
-                style:mask-image={maskPreview}
-                style:mask-size="{MASK_TILE}px {MASK_TILE}px"
-              ></div>
-            </div>
-            <div class="stages">
-              {#each stageTiles as { stage, uri } (stage)}
-                <figure>
-                  <div class="tile" style:mask-image={uri} style:mask-size="{MASK_TILE}px {MASK_TILE}px"></div>
-                  <figcaption>{stage}</figcaption>
-                </figure>
-              {/each}
-            </div>
+            <div class="field" style:mask-image={maskPreview}></div>
           </figure>
 
           <h5>Noise</h5>
@@ -580,10 +565,13 @@
             onchange={(v) => updateSketchSettings({ maskOctaves: v })}
           />
 
-          <h5>Output</h5>
+          <h5>Levels</h5>
           <p class="group-note">
-            How much ink the field lays down. The low handle is the palest the fill
-            gets and the high handle the densest: 0 is bare, 100 is whole.
+            The field runs black to white before these apply. Output states the
+            range of ink the mask paints between, 0 bare to 100 whole, and the
+            whole field is squeezed into it: raise the low handle and the
+            darkest patch rises with it, drop the high handle and the densest
+            falls. Nothing is ever cut off at a handle.
           </p>
           <SketchRange
             label="Output" low={outputMin} high={outputMax} min={0} max={100} step={1}
@@ -602,10 +590,11 @@
 
           <h5>Blur</h5>
           <SketchDial
-            label="Blur" value={s.maskSoftness} min={0} max={BLUR_MAX} step={0.25}
+            label="Blur" value={blurStep} min={0} max={100} step={1}
             readout={px(s.maskSoftness)}
-            hint="Softens the blotch edges. Few tones with a little blur give a hard blotch with a soft rim."
-            onchange={(v) => updateSketchSettings({ maskSoftness: v })}
+            ends={['hard', 'clouded']}
+            hint="Softens the blotch edges. Few tones with a little blur give a hard blotch with a soft rim; wound right up the field goes to weather."
+            onchange={(v) => updateSketchSettings({ maskSoftness: blurVal(v) })}
           />
         </div>
         </div>
@@ -1196,69 +1185,32 @@
     pointer-events: none;
   }
 
+  /* The ground the field is cut out of, so a masked-away pixel reads as black
+     rather than as the panel. */
   .scope {
     margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-4);
-    transition: opacity var(--ui-transition-base);
-  }
-
-  .scope.muted {
-    opacity: 0.4;
-  }
-
-  /* The shadow sits on the card and the mask on the fill inside it: the same
-     split the fill layer makes, so what this shows is what the page does. */
-  .sample {
-    height: 6rem;
-    padding: var(--ui-space-16) var(--ui-space-24);
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-surface-lowest);
     overflow: hidden;
+    transition: opacity var(--ui-transition-base);
   }
 
-  .ink {
-    box-shadow: var(--ui-shadow-md);
-  }
-
-  .stages {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--ui-space-8);
-  }
-
-  .stages figure {
-    margin: 0;
+  .scope.muted {
+    opacity: 0.4;
   }
 
-  .tile {
-    height: var(--ui-space-48);
-    border-radius: var(--ui-radius-sm);
+  /* One readout of the finished field: the whole tile, repeated across the
+     strip, white on that ground so 0 reads as black and 100 as white. Neither
+     was readable before. The field was painted at page-px size, which showed a
+     crop off the top of the tile that never reached the bright end, over an ink
+     colour that could not have painted it if it had. */
+  .field {
+    height: 7rem;
     background: var(--ui-text-primary);
     mask-mode: luminance;
     mask-repeat: repeat;
-  }
-
-  .stages figcaption {
-    margin-top: var(--ui-space-2);
-    font-size: var(--ui-font-size-xs);
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--ui-text-tertiary);
-  }
-
-  .ink {
-    height: 100%;
-    border-radius: var(--ui-radius-md);
-    /* An ink colour, not a surface one: the point of the swatch is the
-       blotches, and the surface rungs sit within a shade or two of the ground
-       under them, which showed the finished field as a flat dark rectangle. */
-    background: var(--ui-text-muted);
-    mask-mode: luminance;
-    mask-repeat: repeat;
+    mask-size: contain;
   }
 
 </style>

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

@@ -1,7 +1,7 @@
 {
   "name": "Midnight Study",
-  "createdAt": "2026-08-12T20:13:46.264Z",
-  "updatedAt": "2026-08-13T14:14:20.015Z",
+  "createdAt": "2026-08-27T17:01:37.984Z",
+  "updatedAt": "2026-08-27T17:01:37.984Z",
   "editorConfigs": {
     "Brand": {
       "baseColor": {
@@ -2262,10 +2262,6 @@
     }
   },
   "cssVariables": {
-    "--gradient-1": "linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%)",
-    "--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%)",
     "--badge-trait-surface": "var(--surface-brand)",
     "--badge-trait-text": "var(--text-brand)",
     "--badge-trait-text-font-family": "var(--font-sans)",
@@ -2316,7 +2312,15 @@
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
     "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)",
+    "--gradient-1": "linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%)",
+    "--gradient-1-stops": "var(--color-brand-400) 0%, var(--color-brand-700) 100%",
+    "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
+    "--gradient-2-stops": "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-3-stops": "var(--color-brand-500) 0%, var(--color-accent-500) 100%",
+    "--gradient-4": "linear-gradient(180deg, color-mix(in srgb, var(--color-canvas-600) 49%, transparent) 0%, var(--color-canvas-850) 14.2%, var(--color-canvas-900) 83.8%)",
+    "--gradient-4-stops": "color-mix(in srgb, var(--color-canvas-600) 49%, transparent) 0%, var(--color-canvas-850) 14.2%, var(--color-canvas-900) 83.8%"
   },
   "fontSources": [
     {
@@ -2469,25 +2473,6 @@
       ]
     }
   ],
-  "harmonyAxes": [
-    {
-      "hue": 300,
-      "family": "Brand"
-    },
-    {
-      "hue": 340,
-      "family": "Accent"
-    },
-    {
-      "hue": 268,
-      "family": "Canvas"
-    },
-    {
-      "hue": 210,
-      "family": null
-    }
-  ],
-  "schemaVersion": 3,
   "gradients": [
     {
       "variable": "--gradient-1",
@@ -2541,13 +2526,38 @@
       "stops": [
         {
           "position": 0,
-          "color": "--color-canvas-600"
+          "color": "--color-canvas-600",
+          "opacity": 49
         },
         {
-          "position": 100,
+          "position": 14.2,
+          "color": "--color-canvas-850",
+          "opacity": 100
+        },
+        {
+          "position": 83.8,
           "color": "--color-canvas-900"
         }
       ]
     }
-  ]
-}
+  ],
+  "harmonyAxes": [
+    {
+      "hue": 300,
+      "family": "Brand"
+    },
+    {
+      "hue": 340,
+      "family": "Accent"
+    },
+    {
+      "hue": 268,
+      "family": "Canvas"
+    },
+    {
+      "hue": 210,
+      "family": null
+    }
+  ],
+  "schemaVersion": 5
+}

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

@@ -3530,7 +3530,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3559,7 +3559,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3588,7 +3588,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

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

@@ -3569,7 +3569,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3598,7 +3598,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3627,7 +3627,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

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

@@ -1,12 +1,12 @@
 {
   "name": "Midnight Study",
   "createdAt": "2026-08-13T10:21:46.867Z",
-  "updatedAt": "2026-08-19T22:39:32.785Z",
+  "updatedAt": "2026-08-27T17:03:51.623Z",
   "schemaVersion": 4,
   "colorsAndType": {
     "name": "Midnight Study",
-    "createdAt": "2026-08-12T20:13:46.264Z",
-    "updatedAt": "2026-08-13T14:14:20.015Z",
+    "createdAt": "2026-08-27T17:01:37.984Z",
+    "updatedAt": "2026-08-27T17:01:37.984Z",
     "editorConfigs": {
       "Brand": {
         "baseColor": {
@@ -2267,10 +2267,6 @@
       }
     },
     "cssVariables": {
-      "--gradient-1": "linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%)",
-      "--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%)",
       "--badge-trait-surface": "var(--surface-brand)",
       "--badge-trait-text": "var(--text-brand)",
       "--badge-trait-text-font-family": "var(--font-sans)",
@@ -2321,7 +2317,15 @@
       "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
       "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
       "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)",
+      "--gradient-1": "linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%)",
+      "--gradient-1-stops": "var(--color-brand-400) 0%, var(--color-brand-700) 100%",
+      "--gradient-2": "linear-gradient(135deg, var(--color-special-500) 0%, var(--color-brand-500) 100%)",
+      "--gradient-2-stops": "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-3-stops": "var(--color-brand-500) 0%, var(--color-accent-500) 100%",
+      "--gradient-4": "linear-gradient(180deg, color-mix(in srgb, var(--color-canvas-600) 49%, transparent) 0%, var(--color-canvas-850) 14.2%, var(--color-canvas-900) 83.8%)",
+      "--gradient-4-stops": "color-mix(in srgb, var(--color-canvas-600) 49%, transparent) 0%, var(--color-canvas-850) 14.2%, var(--color-canvas-900) 83.8%"
     },
     "fontSources": [
       {
@@ -2474,25 +2478,6 @@
         ]
       }
     ],
-    "harmonyAxes": [
-      {
-        "hue": 300,
-        "family": "Brand"
-      },
-      {
-        "hue": 340,
-        "family": "Accent"
-      },
-      {
-        "hue": 268,
-        "family": "Canvas"
-      },
-      {
-        "hue": 210,
-        "family": null
-      }
-    ],
-    "schemaVersion": 3,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -2546,15 +2531,40 @@
         "stops": [
           {
             "position": 0,
-            "color": "--color-canvas-600"
+            "color": "--color-canvas-600",
+            "opacity": 49
           },
           {
-            "position": 100,
+            "position": 14.2,
+            "color": "--color-canvas-850",
+            "opacity": 100
+          },
+          {
+            "position": 83.8,
             "color": "--color-canvas-900"
           }
         ]
       }
-    ]
+    ],
+    "harmonyAxes": [
+      {
+        "hue": 300,
+        "family": "Brand"
+      },
+      {
+        "hue": 340,
+        "family": "Accent"
+      },
+      {
+        "hue": 268,
+        "family": "Canvas"
+      },
+      {
+        "hue": 210,
+        "family": null
+      }
+    ],
+    "schemaVersion": 5
   },
   "componentConfigs": {
     "badge": {
@@ -2886,10 +2896,10 @@
     "card": {
       "name": "midnight-study",
       "component": "card",
-      "createdAt": "2026-05-10T19:26:31.704Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "createdAt": "2026-08-27T17:02:30.403Z",
+      "updatedAt": "2026-08-27T17:02:30.403Z",
       "aliases": {
-        "--card-default-surface": "color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent)",
+        "--card-default-surface": "--gradient-4",
         "--card-default-border": "--border-neutral",
         "--card-default-border-width": "--border-width-1",
         "--card-default-radius": "--radius-sm",
@@ -2899,14 +2909,14 @@
         "--card-default-header-padding-bottom": "--space-8",
         "--card-default-header-padding-left": "--space-12",
         "--card-default-header-gap": "--space-6",
-        "--card-default-body-padding": "--space-10",
-        "--card-default-body-padding-top": "--space-10",
-        "--card-default-body-padding-right": "--space-12",
-        "--card-default-body-padding-bottom": "--space-10",
-        "--card-default-body-padding-left": "--space-12",
+        "--card-default-body-padding": "--space-16",
+        "--card-default-body-padding-top": "--space-16",
+        "--card-default-body-padding-right": "--space-20",
+        "--card-default-body-padding-bottom": "--space-48",
+        "--card-default-body-padding-left": "--space-20",
         "--card-default-shadow": "--shadow-sm",
         "--card-default-blur": "--blur-none",
-        "--card-default-header-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent)",
+        "--card-default-header-surface": "color-mix(in srgb, var(--color-brand-700) 60%, transparent)",
         "--card-default-title": "--text-primary",
         "--card-default-title-font-family": "--font-sans",
         "--card-default-title-font-size": "--font-size-2xl",
@@ -2922,7 +2932,8 @@
         "--card-hover-shadow": "--shadow-md",
         "--card-hover-border-active": "--card-default-border",
         "--card-hover-shadow-active": "--card-default-shadow"
-      }
+      },
+      "config": {}
     },
     "codesnippet": {
       "name": "midnight-study",
@@ -3453,8 +3464,8 @@
     "panel": {
       "name": "midnight-study",
       "component": "panel",
-      "createdAt": "2026-06-01T09:34:52.417Z",
-      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "createdAt": "2026-08-27T17:03:50.744Z",
+      "updatedAt": "2026-08-27T17:03:50.744Z",
       "aliases": {
         "--panel-frame-border": "--border-neutral",
         "--panel-frame-border-width": "--border-width-1",
@@ -3478,10 +3489,11 @@
             ]
           }
         },
-        "--panel-stage-padding": "--space-10",
-        "--panel-stage-inline-padding": "--space-10",
-        "--panel-stage-gap": "--space-12"
-      }
+        "--panel-stage-padding": "--space-16",
+        "--panel-stage-inline-padding": "--space-24",
+        "--panel-stage-gap": "--space-16"
+      },
+      "config": {}
     },
     "progressbar": {
       "name": "midnight-study",
@@ -3576,7 +3588,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3605,7 +3617,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3634,7 +3646,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

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

@@ -3529,7 +3529,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3558,7 +3558,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3587,7 +3587,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

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

@@ -3560,7 +3560,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3589,7 +3589,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3618,7 +3618,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

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

@@ -3543,7 +3543,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3572,7 +3572,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3601,7 +3601,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },