@motion-proto/live-tokens 0.61.0 → 0.63.0

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

@@ -4,26 +4,29 @@
   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';
   import UIReveal, { REVEAL_MS } from '../UIReveal.svelte';
   import { scrollSectionIntoView } from '../scrollSection';
-  import { SKETCH_PRESETS } from '../../core/sketch/sketchPresets';
+  import { SKETCH_STYLES } from '../../core/sketch/sketchStyles';
+  import { openThemeSlug } from '../../core/store/editorConfigStore';
   import {
     sketchEnabled,
-    sketchPreset,
+    setSketchEnabled,
+    sketchOffLook,
+    sketchStyleName,
     sketchDirty,
     sketchSettings,
-    selectSketchPreset,
+    selectSketchStyle,
     updateSketchSettings,
-    userSketchPresets,
-    refreshUserPresets,
-    selectUserSketchPreset,
-    saveCurrentAsSketchPreset,
-    deleteUserSketchPreset,
-    USER_PRESET_PREFIX,
+    savedSketchStyles,
+    refreshSavedSketchStyles,
+    selectSavedSketchStyle,
+    saveCurrentSketchStyle,
+    deleteSavedSketchStyle,
+    USER_STYLE_PREFIX,
   } from '../../core/sketch/sketchStore';
 
   interface Props {
@@ -37,6 +40,11 @@
 
   let s = $derived($sketchSettings);
 
+  // Save is disabled for the protected Default theme (ThemePanel.svelte);
+  // Save As is the gesture actually on offer there, so the off-look copy has
+  // to name it instead.
+  let activeIsProtected = $derived($openThemeSlug === 'default');
+
   type SectionKey = 'border' | 'fill' | 'shape' | 'icons' | 'noise';
 
   const SECTION_KEYS: SectionKey[] = ['border', 'fill', 'shape', 'icons', 'noise'];
@@ -81,8 +89,8 @@
   const ROUGHNESS = ['smooth', 'grainy', 'rough'] as const;
 
   /** A layer's own wavelength: the multiple, and the length it resolves to
-      against the shared wave. The ratio is what a preset carries; the pixels
-      are what you can picture. */
+      against the shared wave. The ratio is what a sketchstyle carries; the
+      pixels are what you can picture. */
   const against = (multiple: number) => `${Math.round(s.wobble * multiple)}px`;
 
   /** The wave's shape, named rather than numbered: 1 is the field as the filter
@@ -110,52 +118,52 @@
       + (s.waveform > 1 ? ` · ${waveformLabel(s.waveform)}` : ''),
   });
 
-  /** Shipped and saved presets are one choice, so they share one radio group:
-      picking a saved one clears the shipped selection natively. */
-  const PRESET_RADIO_GROUP = 'sketch-preset';
+  /** Shipped and saved sketchstyles are one choice, so they share one radio
+      group: picking a saved one clears the shipped selection natively. */
+  const STYLE_RADIO_GROUP = 'sketchstyle';
 
   /** What the readout under the grid says. The selection survives a dial move,
       so the base keeps its name here and the blurb reports the drift instead. */
   let active = $derived(
     $sketchDirty
       ? { name: s.label, blurb: `Modified from ${s.label}. Save it to keep it.` }
-      : { name: s.label, blurb: s.blurb || 'Your saved preset.' },
+      : { name: s.label, blurb: s.blurb || 'Your saved sketchstyle.' },
   );
 
   let naming = $state(false);
   let draftName = $state('');
-  let presetError = $state('');
+  let styleError = $state('');
 
   onMount(() => {
-    // No dev plugin (a built preview, say) means no saved presets. That is a
-    // missing door, not a fault worth reporting in the tab.
-    refreshUserPresets().catch(() => {});
+    // No dev plugin (a built preview, say) means no saved sketchstyles. That
+    // is a missing door, not a fault worth reporting in the tab.
+    refreshSavedSketchStyles().catch(() => {});
   });
 
   function startNaming() {
-    draftName = s.label && $sketchPreset.startsWith(USER_PRESET_PREFIX) ? s.label : '';
-    presetError = '';
+    draftName = s.label && $sketchStyleName.startsWith(USER_STYLE_PREFIX) ? s.label : '';
+    styleError = '';
     naming = true;
   }
 
   async function commitSave(e: SubmitEvent) {
     e.preventDefault();
     try {
-      await saveCurrentAsSketchPreset(draftName);
+      await saveCurrentSketchStyle(draftName);
       naming = false;
       draftName = '';
-      presetError = '';
+      styleError = '';
     } catch (err) {
-      presetError = err instanceof Error ? err.message : 'Save failed';
+      styleError = err instanceof Error ? err.message : 'Save failed';
     }
   }
 
-  async function runPresetAction(action: Promise<unknown>) {
+  async function runStyleAction(action: Promise<unknown>) {
     try {
       await action;
-      presetError = '';
+      styleError = '';
     } catch (err) {
-      presetError = err instanceof Error ? err.message : 'That did not work';
+      styleError = err instanceof Error ? err.message : 'That did not work';
     }
   }
 
@@ -191,7 +199,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,36 +226,31 @@
   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">
   <header class="head">
     <div class="head-row">
-      <h2 class="section-title">Sketch</h2>
+      <h2 class="section-title">Sketchstyle</h2>
       <div class="switch">
         <Toggle
           label="Sketch mode"
           labelFirst
           checked={$sketchEnabled}
-          onchange={(v) => sketchEnabled.set(v)}
+          onchange={setSketchEnabled}
         />
         <UIInfoPopover title="Sketch mode">
           <p>
-            An effect layer over the active theme. It reads no theme values and writes none:
-            each component's fill and outline are redrawn from the tokens that component
-            already owns, then pushed around a shared noise field.
+            An effect layer over the active theme. It repaints each component's fill and
+            outline from the tokens that component already owns, then pushes them around a
+            shared noise field. Save in the Theme panel folds the dials into the open theme,
+            or Save As when the open theme is Motion Proto, the read-only built-in one.
           </p>
           <p>
             While it is on, the effect applies to the page behind this editor as well as to the
@@ -256,28 +264,46 @@
       <div class="readout" aria-live="polite">
         <span class="readout-name">{active.name}</span>
         <p class="readout-blurb">{active.blurb}</p>
+        {#if $sketchOffLook}
+          {#if $sketchEnabled}
+            <p class="readout-off-look">
+              {#if activeIsProtected}
+                Motion Proto is read-only, and these dials are ahead of it. Use Save As in the
+                Theme panel to keep them in a new theme.
+              {:else}
+                These dials are ahead of the saved theme. Save it in the Theme panel to fold them
+                in.
+              {/if}
+            </p>
+          {:else}
+            <p class="readout-off-look">
+              The theme carries a sketchstyle this page is not painting. Saving now would drop
+              it.
+            </p>
+          {/if}
+        {/if}
       </div>
 
       <div class="presets">
-        {#each Object.entries(SKETCH_PRESETS) as [name, preset] (name)}
+        {#each Object.entries(SKETCH_STYLES) as [name, style] (name)}
           <label class="preset">
             <input
               type="radio"
-              name={PRESET_RADIO_GROUP}
+              name={STYLE_RADIO_GROUP}
               value={name}
-              checked={$sketchPreset === name}
-              onchange={() => selectSketchPreset(name)}
+              checked={$sketchStyleName === name}
+              onchange={() => selectSketchStyle(name)}
             />
-            <span class="preset-name">{preset.label}</span>
+            <span class="preset-name">{style.label}</span>
           </label>
         {/each}
       </div>
 
       <div class="saved">
         <div class="saved-head">
-          <span class="band-label">Saved</span>
+          <span class="band-label">Saved sketchstyles</span>
           <UIPillButton size="compact" icon="fa-floppy-disk" onclick={startNaming}>
-            Save current
+            Save as sketchstyle…
           </UIPillButton>
         </div>
 
@@ -287,8 +313,8 @@
             <input
               class="save-name"
               bind:value={draftName}
-              placeholder="Preset name"
-              aria-label="Preset name"
+              placeholder="Sketchstyle name"
+              aria-label="Sketchstyle name"
               autofocus
             />
             <UIPillButton size="compact" variant="primary" type="submit">Save</UIPillButton>
@@ -296,17 +322,17 @@
           </form>
         {/if}
 
-        {#if $userSketchPresets.length > 0}
+        {#if $savedSketchStyles.length > 0}
           <div class="presets">
-            {#each $userSketchPresets as saved (saved.fileName)}
+            {#each $savedSketchStyles as saved (saved.fileName)}
               <div class="saved-item">
                 <label class="preset">
                   <input
                     type="radio"
-                    name={PRESET_RADIO_GROUP}
-                    value={USER_PRESET_PREFIX + saved.fileName}
-                    checked={$sketchPreset === USER_PRESET_PREFIX + saved.fileName}
-                    onchange={() => runPresetAction(selectUserSketchPreset(saved.fileName))}
+                    name={STYLE_RADIO_GROUP}
+                    value={USER_STYLE_PREFIX + saved.fileName}
+                    checked={$sketchStyleName === USER_STYLE_PREFIX + saved.fileName}
+                    onchange={() => runStyleAction(selectSavedSketchStyle(saved.fileName))}
                   />
                   <span class="preset-name">{saved.name}</span>
                 </label>
@@ -315,15 +341,15 @@
                   class="saved-delete"
                   title="Delete {saved.name}"
                   aria-label="Delete {saved.name}"
-                  onclick={() => runPresetAction(deleteUserSketchPreset(saved.fileName))}
+                  onclick={() => runStyleAction(deleteSavedSketchStyle(saved.fileName))}
                 ><i class="fas fa-xmark"></i></button>
               </div>
             {/each}
           </div>
         {/if}
 
-        {#if presetError}
-          <p class="saved-error">{presetError}</p>
+        {#if styleError}
+          <p class="saved-error">{styleError}</p>
         {/if}
       </div>
     </div>
@@ -538,21 +564,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 +592,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 +617,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>
@@ -804,9 +820,9 @@
   }
 
 
-  /* Grid, saved band and readout are one control: which preset is on, and what
-     that preset is. Splitting them left the description reading as a stray
-     caption under the tab. */
+  /* Grid, saved band and readout are one control: which sketchstyle is on, and
+     what that sketchstyle is. Splitting them left the description reading as a
+     stray caption under the tab. */
   .picker {
     display: flex;
     flex-direction: column;
@@ -999,6 +1015,13 @@
     color: var(--ui-text-secondary);
   }
 
+  .readout-off-look {
+    margin: var(--ui-space-2) 0 0;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-medium);
+    color: var(--ui-text-primary);
+  }
+
   .dormant {
     margin: 0;
     font-size: var(--ui-font-size-sm);
@@ -1196,69 +1219,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)"
       }
     },