@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{ui → editor/ui}/palette/PaletteBase.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ColorEditPanel from '../ColorEditPanel.svelte';
   import Toggle from '../Toggle.svelte';
-  import { beginSliderGesture } from '../../lib/editorStore';
+  import { beginSliderGesture } from '../../core/store/editorStore';
 
   
 
@@ -137,42 +137,45 @@
     width: 4rem;
     height: 4rem;
     border-radius: var(--ui-radius-md);
-    border: 2px solid var(--ui-border-default);
+    border: 2px solid var(--ui-border);
     flex-shrink: 0;
     cursor: pointer;
   }
 
   .header-swatch:hover {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
   }
 
   .header-swatch.active {
-    border-color: var(--ui-border-strong);
-    outline: 2px solid var(--ui-border-medium);
+    border-color: var(--ui-border-higher);
+    outline: 2px solid var(--ui-border-high);
     outline-offset: 1px;
   }
 
   .editor-label {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
   }
 
   .base-hex {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-secondary);
     font-family: var(--ui-font-mono);
   }
 
   .clickable-hex {
+    align-self: flex-start;
     background: none;
     border: none;
     cursor: pointer;
     padding: var(--ui-space-2) var(--ui-space-4);
+    margin-left: calc(-1 * var(--ui-space-4));
     border-radius: var(--ui-radius-sm);
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-secondary);
     font-family: var(--ui-font-mono);
+    text-align: left;
   }
 
   .clickable-hex:hover {

package/src/{ui → editor/ui}/palette/paletteEditorState.ts

@@ -30,7 +30,7 @@
  * edits don't open a panel.
  */
 
-import type { Scope } from '../../lib/editorStore';
+import type { Scope } from '../../core/store/editorStore';
 
 /** Sentinel key for the base swatch (used as `editingKey === BASE_KEY`). */
 export const BASE_KEY = '__base__';

package/src/editor/ui/palette/paletteMath.ts

@@ -0,0 +1,275 @@
+import { hexToOklch, oklchToHex, gamutClamp } from '../../core/palettes/oklch';
+import { type CurveAnchor, makeAnchor, sampleCurve } from '../curveEngine';
+
+export const GRAY_FALLBACK = '#808080';
+export const DEFAULT_TINT_CHROMA = 0.04;
+
+export interface Step {
+  name: string;
+  position: number;
+  lightness?: number;
+  saturation?: number;
+}
+
+export interface Scale {
+  title: string;
+  isText: boolean;
+  steps: Step[];
+}
+
+export interface GrayStep {
+  label: string;
+  hue: number;
+  saturation: number;
+  lightness: number;
+}
+
+export interface PaletteStepDef {
+  label: string;
+  lightness: number;
+}
+
+export type CurveOffset = Record<string, number>;
+export type ScaleCurves = Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
+
+export const DEFAULT_PALETTE_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
+export const DEFAULT_PALETTE_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
+export const DEFAULT_GRAY_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
+export const DEFAULT_GRAY_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 20, 30), makeAnchor(100, 20, 30)];
+
+export const defaultScaleCurves: Record<string, { lightness: () => CurveAnchor[]; saturation: () => CurveAnchor[] }> = {
+  Surfaces: {
+    lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
+    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
+  },
+  Borders: {
+    lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
+    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
+  },
+  Text: {
+    lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
+    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)],
+  },
+};
+
+export function defaultScaleCurvesObject(): ScaleCurves {
+  return {
+    Surfaces: { lightness: defaultScaleCurves.Surfaces.lightness(), saturation: defaultScaleCurves.Surfaces.saturation() },
+    Borders: { lightness: defaultScaleCurves.Borders.lightness(), saturation: defaultScaleCurves.Borders.saturation() },
+    Text: { lightness: defaultScaleCurves.Text.lightness(), saturation: defaultScaleCurves.Text.saturation() },
+  };
+}
+
+export const paletteStepLightness: PaletteStepDef[] = [
+  { label: '100', lightness: 95 },
+  { label: '200', lightness: 88 },
+  { label: '300', lightness: 78 },
+  { label: '400', lightness: 68 },
+  { label: '500', lightness: 57 },
+  { label: '600', lightness: 49 },
+  { label: '700', lightness: 41 },
+  { label: '800', lightness: 32 },
+  { label: '850', lightness: 25 },
+  { label: '900', lightness: 17 },
+  { label: '950', lightness: 8 },
+];
+
+export const graySteps: GrayStep[] = [
+  { label: '100', hue: 240, saturation: 5,  lightness: 92 },
+  { label: '200', hue: 220, saturation: 13, lightness: 84 },
+  { label: '300', hue: 216, saturation: 12, lightness: 72 },
+  { label: '400', hue: 240, saturation: 5,  lightness: 61 },
+  { label: '500', hue: 240, saturation: 5,  lightness: 50 },
+  { label: '600', hue: 240, saturation: 5,  lightness: 42 },
+  { label: '700', hue: 240, saturation: 5,  lightness: 34 },
+  { label: '800', hue: 240, saturation: 10, lightness: 25 },
+  { label: '850', hue: 229, saturation: 20, lightness: 18 },
+  { label: '900', hue: 240, saturation: 30, lightness: 10 },
+  { label: '950', hue: 229, saturation: 34, lightness: 3 },
+];
+
+export const scales: Scale[] = [
+  {
+    title: 'Surfaces',
+    isText: false,
+    steps: [
+      { name: 'lowest',  position: -1 },
+      { name: 'lower',   position: -2/3 },
+      { name: 'low',     position: -1/3 },
+      { name: 'default', position: 0 },
+      { name: 'high',    position: 1/3 },
+      { name: 'higher',  position: 2/3 },
+      { name: 'highest', position: 1 },
+    ]
+  },
+  {
+    title: 'Borders',
+    isText: false,
+    steps: [
+      { name: 'faint',   position: -1 },
+      { name: 'subtle',  position: -0.5 },
+      { name: 'default', position: 0 },
+      { name: 'medium',  position: 0.5 },
+      { name: 'strong',  position: 1 },
+    ]
+  },
+  {
+    title: 'Text',
+    isText: true,
+    steps: [
+      { name: 'primary',   position: 0 },
+      { name: 'secondary', position: 0 },
+      { name: 'tertiary',  position: 0 },
+      { name: 'muted',     position: 0 },
+      { name: 'disabled',  position: 0 },
+    ]
+  }
+];
+
+export const paletteStepKey = (label: string) => `Palette-${label}`;
+export const grayStepKey = (label: string) => `gray-${label}`;
+export const stepKey = (scaleTitle: string, stepName: string) => `${scaleTitle}-${stepName}`;
+export const scaleCurveKey = (scaleTitle: string, channel: 'lightness' | 'saturation') => `${scaleTitle}-${channel}`;
+
+export function stepIndexToX(index: number): number {
+  return (index / (paletteStepLightness.length - 1)) * 100;
+}
+
+export function grayStepToX(index: number): number {
+  return graySteps.length > 1 ? (index / (graySteps.length - 1)) * 100 : 50;
+}
+
+export function scaleStepToX(step: Step, scale: Scale): number {
+  const idx = scale.steps.indexOf(step);
+  return scale.steps.length > 1 ? (idx / (scale.steps.length - 1)) * 100 : 50;
+}
+
+export function injectLockedAnchor(curve: CurveAnchor[], x: number, y: number): { curve: CurveAnchor[]; idx: number; injected: boolean } {
+  const existing = curve.findIndex(a => Math.abs(a.x - x) < 0.5);
+  if (existing >= 0) {
+    if (curve[existing].x === x && Math.abs(curve[existing].y - y) < 0.01) return { curve, idx: existing, injected: false };
+    return { curve: curve.map((a, i) => i === existing ? { ...a, x, y } : a), idx: existing, injected: false };
+  }
+  let insertAt = curve.findIndex(a => a.x > x);
+  if (insertAt < 0) insertAt = curve.length;
+  return { curve: [...curve.slice(0, insertAt), makeAnchor(x, y, 15), ...curve.slice(insertAt)], idx: insertAt, injected: true };
+}
+
+export function removeLockedAnchor(curve: CurveAnchor[], idx: number | null): CurveAnchor[] {
+  if (idx === null || idx === 0 || idx === curve.length - 1) return curve;
+  return curve.filter((_, i) => i !== idx);
+}
+
+export function computeGrayColor(
+  index: number,
+  hue: number,
+  chroma: number,
+  lightnessCurve: CurveAnchor[],
+  saturationCurve: CurveAnchor[],
+  curveOffset: CurveOffset
+): string {
+  const xPos = grayStepToX(index);
+  const lOff = curveOffset['gray-lightness'] ?? 0;
+  const sOff = curveOffset['gray-saturation'] ?? 0;
+
+  const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + lOff)) / 100;
+  const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + sOff) / 100));
+  const targetC = chroma * satMul;
+
+  const clamped = gamutClamp(targetL, targetC, hue);
+  return oklchToHex(clamped.l, clamped.c, clamped.h);
+}
+
+export function computePaletteColor(
+  index: number,
+  base: string,
+  lightnessCurve: CurveAnchor[],
+  saturationCurve: CurveAnchor[],
+  curveOffset: CurveOffset
+): string {
+  const { c: baseC, h } = hexToOklch(base);
+  const xPos = stepIndexToX(index);
+
+  const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + (curveOffset['lightness'] ?? 0))) / 100;
+  const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + (curveOffset['saturation'] ?? 0)) / 100));
+  const targetC = baseC * satMul;
+
+  const clamped = gamutClamp(targetL, targetC, h);
+  return oklchToHex(clamped.l, clamped.c, clamped.h);
+}
+
+export function computeDerivedColor(
+  step: Step,
+  base: string,
+  scaleTitle: string,
+  scaleCurves: ScaleCurves,
+  curveOffset: CurveOffset
+): string {
+  const { l: baseL, c: baseC, h: baseH } = hexToOklch(base);
+  const scale = scales.find(s => s.title === scaleTitle)!;
+  const xPos = scaleStepToX(step, scale);
+
+  const lCurve = scaleCurves[scaleTitle]?.lightness ?? [];
+  const sCurve = scaleCurves[scaleTitle]?.saturation ?? [];
+  const lOff = curveOffset[scaleCurveKey(scaleTitle, 'lightness')] ?? 0;
+  const sOff = curveOffset[scaleCurveKey(scaleTitle, 'saturation')] ?? 0;
+
+  let targetL: number;
+  if (scale.isText) {
+    // Text: lightness curve is a multiplier (100 = 1x base lightness)
+    const lMul = Math.max(0, Math.min(2, (sampleCurve(lCurve, xPos) + lOff) / 100));
+    targetL = Math.max(0, Math.min(1, baseL * lMul));
+  } else {
+    targetL = Math.max(0, Math.min(100, sampleCurve(lCurve, xPos) + lOff)) / 100;
+  }
+
+  const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
+  const targetC = baseC * satMul;
+
+  const clamped = gamutClamp(targetL, targetC, baseH);
+  return oklchToHex(clamped.l, clamped.c, clamped.h);
+}
+
+interface PaletteComputed {
+  hex: string;
+}
+
+// Pick the contiguous window of palette steps (dark-first) whose lightness
+// curve best matches this scale's derived lightness curve.
+export function snapScaleToPalette(
+  scale: Scale,
+  baseColor: string,
+  scaleCurves: ScaleCurves,
+  curveOffset: CurveOffset,
+  paletteComputed: ReadonlyArray<PaletteComputed>
+): Record<string, string> {
+  const n = scale.steps.length;
+
+  const stepL = scale.steps.map(step => {
+    const derived = computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
+    return hexToOklch(derived).l;
+  });
+
+  const palDarkFirst = [...paletteComputed].reverse();
+  const palLDarkFirst = palDarkFirst.map(ps => hexToOklch(ps.hex).l);
+
+  let bestStart = 0;
+  let bestCost = Infinity;
+  for (let start = 0; start <= palDarkFirst.length - n; start++) {
+    let cost = 0;
+    for (let i = 0; i < n; i++) {
+      const d = stepL[i] - palLDarkFirst[start + i];
+      cost += d * d;
+    }
+    if (cost < bestCost) {
+      bestCost = cost;
+      bestStart = start;
+    }
+  }
+
+  const assigned: Record<string, string> = {};
+  for (let i = 0; i < n; i++) {
+    assigned[stepKey(scale.title, scale.steps[i].name)] = palDarkFirst[bestStart + i].hex;
+  }
+  return assigned;
+}

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

@@ -1,14 +1,22 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { editorState, mutate, beginSliderGesture } from '../../lib/editorStore';
-  import type { ColumnsState } from '../../lib/editorTypes';
+  import { editorState, mutate, beginSliderGesture } from '../../core/store/editorStore';
+  import type { ColumnsState } from '../../core/store/editorTypes';
+
+  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.
+  const DETENT_RESISTANCE = 4;
 
   function clampNum(v: number, lo: number, hi: number): number {
     return Math.max(lo, Math.min(hi, Math.round(v)));
   }
 
   function setColumnsCount(n: number) {
-    mutate('set columns count', (s) => { s.columns.count = clampNum(n, 1, 24); });
+    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); });
@@ -20,6 +28,44 @@
     mutate('set columns margin', (s) => { s.columns.margin = clampNum(px, 0, 400); });
   }
 
+  let colsDragging = false;
+  let colsDetentTrips = 0;
+
+  function onColsPointerDown() {
+    beginSliderGesture('drag columns count');
+    colsDragging = true;
+    colsDetentTrips = 0;
+  }
+  function onColsPointerUp() {
+    colsDragging = false;
+    colsDetentTrips = 0;
+  }
+  function handleColsInput(raw: number, target: HTMLInputElement) {
+    const current = $editorState.columns.count;
+    if (
+      colsDragging &&
+      current === STANDARD_COLS &&
+      Math.abs(raw - STANDARD_COLS) === 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);
+        return;
+      }
+      colsDetentTrips = 0;
+    }
+    if (raw === STANDARD_COLS) 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;
 
   onMount(() => {
@@ -41,16 +87,28 @@
   </p>
 
   <div class="columns-controls">
-    <div class="global-shadow-row">
+    <div class="global-shadow-row cols-row">
       <span class="shadow-slider-label" title="Number of columns">Cols</span>
-      <input type="range" min="1" max="24" value={$editorState.columns.count}
-        onpointerdown={() => beginSliderGesture('drag columns count')}
-        oninput={(e) => setColumnsCount(+e.currentTarget.value)} />
-      <input class="shadow-slider-input" type="number" min="1" max="24"
+      <div class="cols-slider-wrap">
+        <input type="range" min={COLS_MIN} max={COLS_MAX} value={$editorState.columns.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>
+      </div>
+      <input class="shadow-slider-input" type="number" min={COLS_MIN} max={COLS_MAX}
         value={$editorState.columns.count}
         onchange={(e) => setColumnsCount(+e.currentTarget.value)} />
       <span class="shadow-slider-unit"></span>
     </div>
+    {#if $editorState.columns.count !== STANDARD_COLS}
+      <p class="cols-consequence" role="note">
+        <i class="fas fa-circle-exclamation"></i>
+        <span>Most components assume 12 cols. Reset to restore.</span>
+      </p>
+    {/if}
     <div class="global-shadow-row">
       <span class="shadow-slider-label" title="Maximum content width">Max-Width</span>
       <input type="range" min="480" max="2560" step="10" value={$editorState.columns.maxWidth}
@@ -106,16 +164,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);
   }
 
   .columns-intro {
@@ -136,7 +194,7 @@
     gap: var(--ui-space-8);
     padding: var(--ui-space-12) var(--ui-space-16);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
   }
 
@@ -145,6 +203,67 @@
     text-align: left;
   }
 
+  .cols-row {
+    /* Slightly more breathing room so the tick label below the slider
+       does not collide with the next row. */
+    padding-bottom: var(--ui-space-6);
+  }
+
+  .cols-slider-wrap {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 4rem;
+  }
+
+  .cols-slider-wrap input[type="range"] {
+    flex: 1;
+    min-width: 4rem;
+    accent-color: var(--ui-text-accent);
+    height: 4px;
+    cursor: pointer;
+  }
+
+  .cols-tick {
+    position: absolute;
+    top: 50%;
+    width: 2px;
+    height: 10px;
+    background: var(--ui-text-muted);
+    opacity: 0.55;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    border-radius: 1px;
+  }
+
+  .cols-tick-label {
+    position: absolute;
+    top: calc(50% + 9px);
+    transform: translateX(-50%);
+    font-size: 9px;
+    font-family: var(--ui-font-mono);
+    color: var(--ui-text-muted);
+    pointer-events: none;
+    line-height: 1;
+  }
+
+  .cols-consequence {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    margin: calc(var(--ui-space-4) * -1) 0 0;
+    padding: var(--ui-space-4) 0 var(--ui-space-4) calc(5rem + var(--ui-space-8));
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-link-broken);
+    line-height: 1.3;
+  }
+
+  .cols-consequence i {
+    font-size: 10px;
+    opacity: 0.85;
+  }
+
   .columns-input-wide {
     width: 3.5rem;
   }
@@ -154,7 +273,7 @@
     justify-content: flex-end;
     padding-top: var(--ui-space-8);
     margin-top: var(--ui-space-4);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .columns-reset {
@@ -163,7 +282,7 @@
     gap: var(--ui-space-6);
     padding: var(--ui-space-4) var(--ui-space-10);
     background: transparent;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-tertiary);
     font-family: inherit;
@@ -174,7 +293,7 @@
 
   .columns-reset:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .columns-reset i {
@@ -183,7 +302,7 @@
 
   .columns-preview {
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     padding: var(--ui-space-12) 0;
     overflow: hidden;
@@ -245,7 +364,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;
@@ -260,7 +379,7 @@
 
   .shadow-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-slider-unit {

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

@@ -7,7 +7,7 @@
    * direction, kind switch) lives in <GradientEditor>; this section is a
    * thin grid that toggles which gradient is being edited.
    */
-  import { editorState } from '../../lib/editorStore';
+  import { editorState } from '../../core/store/editorStore';
   import GradientEditor from '../GradientEditor.svelte';
 
   interface Props {
@@ -56,16 +56,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);
   }
 
   .editor-intro {
@@ -103,7 +103,7 @@
     flex-direction: column;
     gap: var(--ui-space-8);
     padding: var(--ui-space-12);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-lg);
     background: var(--ui-surface-lowest);
     min-width: 0;
@@ -124,7 +124,7 @@
   .gradient-edit-btn {
     padding: var(--ui-space-2) var(--ui-space-10);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-xs);
@@ -134,13 +134,13 @@
 
   .gradient-edit-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .gradient-editor-host {
     margin-top: var(--ui-space-8);
     padding-top: var(--ui-space-12);
-    border-top: 1px dashed var(--ui-border-faint);
+    border-top: 1px dashed var(--ui-border-low);
   }
 
   .gradient-box {