@pixerate/editor-svelte 0.108.0 → 0.109.0

package/dist/image-editor/ImageEffectControls.svelte

@@ -10,20 +10,24 @@
     values: Readonly<Record<string, unknown>>;
     onchange: (control: string, value: unknown, gesture: string | null) => void;
     onpreset: (values: Readonly<Record<string, unknown>>) => void;
+    /** Extra classes on the root element. */
+    class?: string;
   }
 
-  let { provider, effect, name, values, onchange, onpreset }: Props = $props();
+  let { provider, effect, name, values, onchange, onpreset, class: className = '' }: Props = $props();
   const loaded = effectDescriptionOf(() => provider, () => effect);
 </script>
 
 <!-- One effect's controls, loaded from the provider; a note when it does not have the effect. -->
-{#if !provider}
-  <p class="text-[11px] text-slate-400">No effects provider: "{name ?? effect}" is kept but not drawn.</p>
-{:else if loaded.error}
-  <p class="text-[11px] text-amber-400">{loaded.error}</p>
-{:else if !loaded.description}
-  <p class="text-[11px] text-slate-400">Loading…</p>
-{:else}
-  {@const description = loaded.description}
-  <EffectParameters {description} {values} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} />
-{/if}
+<div class={className || undefined} data-testid="image-effect-controls">
+  {#if !provider}
+    <p class="text-[11px] text-muted-foreground">No effects provider: "{name ?? effect}" is kept but not drawn.</p>
+  {:else if loaded.error}
+    <p class="text-[11px] text-amber-600">{loaded.error}</p>
+  {:else if !loaded.description}
+    <p class="text-[11px] text-muted-foreground">Loading…</p>
+  {:else}
+    {@const description = loaded.description}
+    <EffectParameters {description} {values} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} />
+  {/if}
+</div>

package/dist/image-editor/ImageEffectControls.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props {
     values: Readonly<Record<string, unknown>>;
     onchange: (control: string, value: unknown, gesture: string | null) => void;
     onpreset: (values: Readonly<Record<string, unknown>>) => void;
+    /** Extra classes on the root element. */
+    class?: string;
 }
 declare const ImageEffectControls: import("svelte").Component<Props, {}, "">;
 type ImageEffectControls = ReturnType<typeof ImageEffectControls>;

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageOutlineButtonClass } from './styles.js';
   import { findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
@@ -29,7 +30,6 @@
   const all = $derived(layer?.type === 'smart' ? ((layer as SmartObjectLayer).smartFilters?.filters ?? []) : []);
   const generator = $derived(layer?.type === 'pixel' ? layer.generator : undefined);
   const canFilter = $derived(!!layer && layer.type !== 'adjustment' && layer.type !== 'annotation');
-  const btn = 'rounded border border-slate-700 px-1.5 py-0.5 text-[11px] text-slate-300 hover:text-white disabled:opacity-40';
   const drags = new Set<string>();
   /** Changes during a drag skip the undo stack after the first, so the drag is one step. */
   function commit(gesture: string | null) {
@@ -54,11 +54,11 @@
 -->
 <section class="flex flex-col gap-2 text-xs {className}" aria-label="Provider effects" data-image-provider-effects="">
   <div class="flex items-center gap-1">
-    <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-slate-200">Effects</span>
-    <button type="button" class={btn} disabled={!provider || !canFilter} aria-pressed={browse === 'filter'} onclick={() => (browse = browse === 'filter' ? null : 'filter')}>Apply effect…</button>
-    <button type="button" class={btn} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => (browse = browse === 'layer' ? null : 'layer')}>Effect layer…</button>
+    <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-foreground">Effects</span>
+    <button type="button" class={imageOutlineButtonClass} disabled={!provider || !canFilter} aria-pressed={browse === 'filter'} onclick={() => (browse = browse === 'filter' ? null : 'filter')}>Apply effect…</button>
+    <button type="button" class={imageOutlineButtonClass} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => (browse = browse === 'layer' ? null : 'layer')}>Effect layer…</button>
   </div>
-  {#if !provider}<p class="text-[11px] text-slate-400">No effects provider is registered. Effects in the document are kept.</p>{/if}
+  {#if !provider}<p class="text-[11px] text-muted-foreground">No effects provider is registered. Effects in the document are kept.</p>{/if}
   {#if browse === 'filter' && layer}
     {@const id = layer.id}
     <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
@@ -70,8 +70,8 @@
     {@const id = layer.id}
     <div class="space-y-1" data-effect-part="generator">
       <div class="flex items-center gap-1">
-        <span class="flex-1 font-medium text-slate-200">{generator.name ?? generator.effect}</span>
-        <button type="button" class={btn} title="Keep the pixels as a plain layer" onclick={() => run(() => controller.rasterizeEffectLayer(id))}>Rasterize</button>
+        <span class="flex-1 font-medium text-foreground">{generator.name ?? generator.effect}</span>
+        <button type="button" class={imageOutlineButtonClass} title="Keep the pixels as a plain layer" onclick={() => run(() => controller.rasterizeEffectLayer(id))}>Rasterize</button>
       </div>
       <ImageEffectControls
         {provider}
@@ -89,21 +89,21 @@
       {#each all as f, index (f.id)}
         {#if f.kind === 'effect'}
           {@const label = f.name ?? f.effect}
-          <li class="rounded border border-slate-700 p-1" data-smart-effect={f.id}>
+          <li class="rounded border border-border p-1" data-smart-effect={f.id}>
             <div class="flex items-center gap-1">
               <input type="checkbox" checked={f.enabled} aria-label="{label} on" onchange={(e) => {
                 const enabled = e.currentTarget.checked;
                 run(() => controller.updateEffectFilter(id, f.id, { enabled }));
               }} />
-              <button type="button" class="min-w-0 flex-1 truncate text-left text-slate-200" aria-expanded={open === f.id} onclick={() => (open = open === f.id ? null : f.id)}>{label}</button>
-              <button type="button" class={btn} disabled={index === all.length - 1} aria-label="Move up" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index + 1 }))}>↑</button>
-              <button type="button" class={btn} disabled={index === 0} aria-label="Move down" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index - 1 }))}>↓</button>
-              <button type="button" class={btn} aria-label="Remove {label}" onclick={() => run(() => controller.removeSmartFilter(id, f.id))}>✕</button>
+              <button type="button" class="min-w-0 flex-1 truncate text-left text-foreground" aria-expanded={open === f.id} onclick={() => (open = open === f.id ? null : f.id)}>{label}</button>
+              <button type="button" class={imageOutlineButtonClass} disabled={index === all.length - 1} aria-label="Move up" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index + 1 }))}>↑</button>
+              <button type="button" class={imageOutlineButtonClass} disabled={index === 0} aria-label="Move down" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index - 1 }))}>↓</button>
+              <button type="button" class={imageOutlineButtonClass} aria-label="Remove {label}" onclick={() => run(() => controller.removeSmartFilter(id, f.id))}>✕</button>
             </div>
             {#if open === f.id}
               <div class="mt-1 space-y-2">
                 <label class="flex items-center gap-1">
-                  <span class="w-14 text-[11px] text-slate-300">Opacity</span>
+                  <span class="w-14 text-[11px] text-foreground">Opacity</span>
                   <input type="range" min="0" max="1" step="0.01" class="flex-1" value={f.opacity} aria-label="{label} opacity" oninput={(e) => {
                     const opacity = Number(e.currentTarget.value);
                     run(() => controller.updateEffectFilter(id, f.id, { opacity }));
@@ -124,6 +124,6 @@
       {/each}
     </ol>
   {/if}
-  {#if !layer}<p class="text-[11px] text-slate-400">Select a layer to apply effects to it.</p>{/if}
-  {#if message}<p role="alert" class="text-[11px] text-rose-400">{message}</p>{/if}
+  {#if !layer}<p class="text-[11px] text-muted-foreground">Select a layer to apply effects to it.</p>{/if}
+  {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
 </section>

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageIconButtonClass, imageSelectClass } from './styles.js';
   import type { EffectControl, ImageEditorController, LayerEffectKind } from '@pixerate/editor/image-editor';
   import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
@@ -37,8 +38,6 @@
   /** Whether the next slider change records an undo step (the first of a drag does, the rest replace it). */
   let commitNext = true;
 
-  const button = 'px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40';
-
   function attempt(fn: () => unknown) {
     try {
       error = null;
@@ -78,24 +77,24 @@
 </script>
 
 {#if !view.model.available || !view.id}
-  <div class="text-xs text-slate-500 {className}" data-testid="layer-effects">{view.model.reason}</div>
+  <div class="text-xs text-muted-foreground {className}" data-testid="layer-effects">{view.model.reason}</div>
 {:else}
   {@const id = view.id}
-  <div class="flex flex-col gap-1.5 text-xs text-slate-200 {className}" data-testid="layer-effects" aria-label="Layer effects" role="group">
+  <div class="flex flex-col gap-1.5 text-xs text-foreground {className}" data-testid="layer-effects" aria-label="Layer effects" role="group">
     <div class="flex flex-wrap items-center gap-2">
-      <span class="font-semibold text-slate-300">fx Effects</span>
-      <label class="flex items-center gap-1 text-slate-300">
+      <span class="font-semibold text-foreground">fx Effects</span>
+      <label class="flex items-center gap-1 text-foreground">
         <input
           type="checkbox"
           aria-label="Effects on"
           checked={view.model.enabled}
           disabled={view.model.readOnly}
           onchange={(e) => attempt(() => controller.setLayerEffectsEnabled(id, (e.currentTarget as HTMLInputElement).checked))}
-          class="accent-indigo-500"
+          class="accent-primary"
         />
         On
       </label>
-      <label class="flex items-center gap-1 text-slate-400">
+      <label class="flex items-center gap-1 text-muted-foreground">
         Scale
         <input
           type="number"
@@ -106,23 +105,23 @@
           value={Math.round(view.model.scale * 100)}
           disabled={view.model.readOnly}
           oninput={setScale}
-          class="w-14 bg-slate-800 border border-slate-700 rounded px-1"
+          class="w-14 bg-muted border border-border rounded px-1"
         />
         %
       </label>
-      <select aria-label="Add effect" value="" disabled={view.model.readOnly} onchange={add} class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1">
+      <select aria-label="Add effect" value="" disabled={view.model.readOnly} onchange={add} class={imageSelectClass}>
         <option value="">Add effect…</option>
         {#each LAYER_EFFECT_MENU as m (m.kind)}
           <option value={m.kind}>{m.label}</option>
         {/each}
       </select>
     </div>
-    {#if view.model.readOnly && view.model.reason}<p class="text-slate-500">{view.model.reason}</p>{/if}
+    {#if view.model.readOnly && view.model.reason}<p class="text-muted-foreground">{view.model.reason}</p>{/if}
     <ul class="flex flex-col gap-1" aria-label="Effects">
       {#each view.model.rows as row (row.id)}
         {@const effect = view.items.find((e) => e.id === row.id)}
         {@const expanded = open === row.id}
-        <li data-effect-id={row.id} class="rounded bg-slate-900/60 ring-1 ring-slate-800">
+        <li data-effect-id={row.id} class="rounded bg-background/60 ring-1 ring-border">
           <div class="flex items-center gap-1.5 px-1.5 py-1">
             <input
               type="checkbox"
@@ -130,19 +129,19 @@
               checked={row.enabled}
               disabled={view.model.readOnly}
               onchange={(e) => attempt(() => controller.updateLayerEffect(id, row.id, { enabled: (e.currentTarget as HTMLInputElement).checked }))}
-              class="accent-indigo-500"
+              class="accent-primary"
             />
-            <button type="button" aria-expanded={expanded} class="flex-1 text-left {row.enabled && view.model.enabled ? '' : 'text-slate-500'}" onclick={() => (open = expanded ? null : row.id)}>
+            <button type="button" aria-expanded={expanded} class="flex-1 text-left {row.enabled && view.model.enabled ? '' : 'text-muted-foreground'}" onclick={() => (open = expanded ? null : row.id)}>
               {row.label}
             </button>
-            <button type="button" class={button} aria-label="Remove {row.label}" disabled={view.model.readOnly} onclick={() => attempt(() => controller.removeLayerEffect(id, row.id))}>✕</button>
+            <button type="button" class={imageIconButtonClass} aria-label="Remove {row.label}" disabled={view.model.readOnly} onclick={() => attempt(() => controller.removeLayerEffect(id, row.id))}>✕</button>
           </div>
           {#if expanded && effect}
             <div class="grid grid-cols-2 gap-x-2 gap-y-1 px-1.5 pb-1.5" data-testid="effect-settings">
               {#each layerEffectControls(effect, view.patterns) as c (c.key)}
                 {#if c.type === 'range'}
                   <label class="flex flex-col gap-0.5">
-                    <span class="text-slate-400">{c.label} {shown(c)}{c.unit ?? ''}</span>
+                    <span class="text-muted-foreground">{c.label} {shown(c)}{c.unit ?? ''}</span>
                     <input
                       type="range"
                       aria-label={c.label}
@@ -155,23 +154,23 @@
                       onpointerup={() => (commitNext = true)}
                       onkeydown={() => (commitNext = true)}
                       oninput={(e) => change(row.id, c, Number((e.currentTarget as HTMLInputElement).value) / k(c), true)}
-                      class="accent-indigo-500"
+                      class="accent-primary"
                     />
                   </label>
                 {:else if c.type === 'color'}
-                  <label class="flex items-center gap-1.5 text-slate-300">
+                  <label class="flex items-center gap-1.5 text-foreground">
                     <input type="color" aria-label={c.label} value={c.value} disabled={view.model.readOnly} oninput={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).value)} />
                     {c.label}
                   </label>
                 {:else if c.type === 'checkbox'}
-                  <label class="flex items-center gap-1.5 text-slate-300">
-                    <input type="checkbox" aria-label={c.label} checked={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).checked)} class="accent-indigo-500" />
+                  <label class="flex items-center gap-1.5 text-foreground">
+                    <input type="checkbox" aria-label={c.label} checked={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).checked)} class="accent-primary" />
                     {c.label}
                   </label>
                 {:else}
                   <label class="flex flex-col gap-0.5">
-                    <span class="text-slate-400">{c.label}</span>
-                    <select aria-label={c.label} value={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLSelectElement).value)} class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1">
+                    <span class="text-muted-foreground">{c.label}</span>
+                    <select aria-label={c.label} value={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLSelectElement).value)} class={imageSelectClass}>
                       {#each c.options as o (o.value)}
                         <option value={o.value}>{o.label}</option>
                       {/each}
@@ -184,6 +183,6 @@
         </li>
       {/each}
     </ul>
-    {#if error}<p role="alert" class="text-rose-400">{error}</p>{/if}
+    {#if error}<p role="alert" class="text-destructive">{error}</p>{/if}
   </div>
 {/if}

package/dist/image-editor/LayersPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageIconButtonClass, imageSelectClass } from './styles.js';
   import type { ImageEditorController, ImageLayer, LayerMenuAction, LayerPanelRow, PixelBuffer } from '@pixerate/editor/image-editor';
   import {
     BIT_DEPTH_OPTIONS,
@@ -82,9 +83,8 @@
   let commitNext = true;
 
   const LOCKS = ['pixels', 'transparency', 'position', 'all'] as const;
-  const iconButton = 'px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40';
   const rowClass = (active: boolean) =>
-    `flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none ${active ? 'bg-indigo-600/30 ring-1 ring-indigo-500' : 'hover:bg-slate-800'}`;
+    `flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none ${active ? 'bg-primary/30 ring-1 ring-primary' : 'hover:bg-muted'}`;
 
   function attempt(fn: () => unknown) {
     try {
@@ -147,21 +147,21 @@
     return layer.mask && !layer.mask.source ? controller.getLayerThumbnail(layer.id, { maxSide: 64, mask: true }) : null;
   }
   const thumbClass = (selected: boolean) =>
-    `shrink-0 rounded bg-slate-800 ${selected ? 'ring-2 ring-white' : 'ring-1 ring-slate-700'}`;
+    `shrink-0 rounded bg-muted ${selected ? 'ring-2 ring-foreground' : 'ring-1 ring-border'}`;
 </script>
 
 <svelte:window onclick={() => menu && (menu = null)} />
 
-<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="layers-panel">
+<div class="flex flex-col gap-2 text-xs text-foreground {className}" data-testid="layers-panel">
   <div class="flex flex-wrap items-center gap-1" role="toolbar" aria-label="Layer actions">
-    <button type="button" class={iconButton} onclick={() => run('new-layer')}>New Layer</button>
-    <button type="button" class={iconButton} onclick={() => run('new-group')}>New Group</button>
-    <button type="button" class={iconButton} disabled={!snapshot.active} onclick={() => run('duplicate')}>Duplicate</button>
-    <button type="button" class={iconButton} disabled={!snapshot.active} onclick={() => run('add-mask')}>Add Mask</button>
-    <button type="button" class={iconButton} disabled={!snapshot.active} onclick={() => run('delete')}>Delete</button>
+    <button type="button" class={imageIconButtonClass} onclick={() => run('new-layer')}>New Layer</button>
+    <button type="button" class={imageIconButtonClass} onclick={() => run('new-group')}>New Group</button>
+    <button type="button" class={imageIconButtonClass} disabled={!snapshot.active} onclick={() => run('duplicate')}>Duplicate</button>
+    <button type="button" class={imageIconButtonClass} disabled={!snapshot.active} onclick={() => run('add-mask')}>Add Mask</button>
+    <button type="button" class={imageIconButtonClass} disabled={!snapshot.active} onclick={() => run('delete')}>Delete</button>
     <button
       type="button"
-      class={iconButton}
+      class={imageIconButtonClass}
       aria-label="Layer menu"
       aria-haspopup="menu"
       onclick={(e) => {
@@ -172,7 +172,7 @@
     <select
       aria-label="Bits per channel"
       title="Image › Mode: bits per channel"
-      class="rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200"
+      class="rounded bg-muted px-1 py-0.5 text-[11px] text-foreground"
       value={snapshot.bitDepth}
       onchange={(e) => attempt(() => controller.setBitDepth(Number((e.target as HTMLSelectElement).value) as 8 | 16 | 32))}>
       {#each BIT_DEPTH_OPTIONS as o (o.depth)}
@@ -180,8 +180,8 @@
       {/each}
     </select>
     {#if psd}
-      <button type="button" class={iconButton} onclick={() => fileInput?.click()}>Open PSD…</button>
-      <button type="button" class={iconButton} onclick={() => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings)}>Export PSD</button>
+      <button type="button" class={imageIconButtonClass} onclick={() => fileInput?.click()}>Open PSD…</button>
+      <button type="button" class={imageIconButtonClass} onclick={() => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings)}>Export PSD</button>
       <input
         bind:this={fileInput}
         type="file"
@@ -193,7 +193,7 @@
     {/if}
   </div>
   {#if psdNotes.length > 0}
-    <ul class="rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5" data-testid="psd-warnings" aria-label="PSD warnings">
+    <ul class="rounded bg-amber-500/10 text-amber-600 px-2 py-1 space-y-0.5" data-testid="psd-warnings" aria-label="PSD warnings">
       {#each psdNotes as n (n)}
         <li>{n}</li>
       {/each}
@@ -205,7 +205,7 @@
     {@const active = snapshot.active}
     <div class="grid grid-cols-2 gap-x-2 gap-y-1 items-center" data-testid="layer-properties">
       <label class="flex flex-col gap-0.5">
-        <span class="text-slate-400">Opacity {Math.round(active.opacity * 100)}%</span>
+        <span class="text-muted-foreground">Opacity {Math.round(active.opacity * 100)}%</span>
         <input
           type="range"
           min="0"
@@ -216,11 +216,11 @@
           onpointerup={() => (commitNext = true)}
           onkeydown={() => (commitNext = true)}
           oninput={(e) => prop('opacity', Number((e.target as HTMLInputElement).value) / 100)}
-          class="accent-indigo-500"
+          class="accent-primary"
         />
       </label>
       <label class="flex flex-col gap-0.5">
-        <span class="text-slate-400">Fill {Math.round(fillOf(active) * 100)}%</span>
+        <span class="text-muted-foreground">Fill {Math.round(fillOf(active) * 100)}%</span>
         <input
           type="range"
           min="0"
@@ -232,12 +232,12 @@
           onpointerup={() => (commitNext = true)}
           onkeydown={() => (commitNext = true)}
           oninput={(e) => prop('fillOpacity', Number((e.target as HTMLInputElement).value) / 100)}
-          class="accent-indigo-500 disabled:opacity-40"
+          class="accent-primary disabled:opacity-40"
         />
       </label>
       <select
         aria-label="Layer blend mode"
-        class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1"
+        class={imageSelectClass}
         value={active.blend}
         onchange={(e) => attempt(() => controller.setLayerProperties(active.id, { blend: (e.target as HTMLSelectElement).value as never }))}
       >
@@ -246,17 +246,17 @@
           <option value={m.id}>{m.label}</option>
         {/each}
       </select>
-      <label class="flex items-center gap-1.5 text-slate-300">
+      <label class="flex items-center gap-1.5 text-foreground">
         <input
           type="checkbox"
           aria-label="Clip to layer below"
           checked={Boolean(active.clipped)}
           onchange={(e) => attempt(() => controller.setLayerProperties(active.id, { clipped: (e.target as HTMLInputElement).checked }))}
-          class="accent-indigo-500"
+          class="accent-primary"
         />
         Clip to below
       </label>
-      <div class="col-span-2 flex flex-wrap gap-2 text-slate-400" role="group" aria-label="Layer locks">
+      <div class="col-span-2 flex flex-wrap gap-2 text-muted-foreground" role="group" aria-label="Layer locks">
         {#each LOCKS as k (k)}
           <label class="flex items-center gap-1">
             <input
@@ -264,7 +264,7 @@
               aria-label={`Lock ${k}`}
               checked={Boolean(active.locks?.[k])}
               onchange={(e) => attempt(() => controller.setLayerProperties(active.id, { locks: { ...active.locks, [k]: (e.target as HTMLInputElement).checked } }))}
-              class="accent-indigo-500"
+              class="accent-primary"
             />
             {k}
           </label>
@@ -274,7 +274,7 @@
   {/if}
 
   {#if effects && snapshot.active && snapshot.active.type !== 'adjustment'}
-    <LayerEffectsPanel {controller} class="border-t border-slate-800 pt-1.5" />
+    <LayerEffectsPanel {controller} class="border-t border-border pt-1.5" />
   {/if}
 
   <ul class="flex flex-col gap-0.5" role="tree" aria-label="Layers">
@@ -312,7 +312,7 @@
           type="button"
           aria-label={layer.visible ? `Hide ${row.label}` : `Show ${row.label}`}
           aria-pressed={layer.visible}
-          class="w-4 text-center text-slate-300"
+          class="w-4 text-center text-foreground"
           onclick={(e) => {
             e.stopPropagation();
             attempt(() => controller.setLayerProperties(layer.id, { visible: !layer.visible }));
@@ -321,13 +321,13 @@
           <button
             type="button"
             aria-label={layer.collapsed ? `Expand ${row.label}` : `Collapse ${row.label}`}
-            class="w-3 text-slate-400"
+            class="w-3 text-muted-foreground"
             onclick={(e) => {
               e.stopPropagation();
               attempt(() => controller.setLayerProperties(layer.id, { collapsed: !(layer.type === 'group' && layer.collapsed) }));
             }}>{layer.collapsed ? '▸' : '▾'}</button>
         {/if}
-        {#if row.clipped}<span class="text-slate-500" aria-label="Clipped">↳</span>{/if}
+        {#if row.clipped}<span class="text-muted-foreground" aria-label="Clipped">↳</span>{/if}
         {#if layerHasThumbnail(layer)}
           <span class="relative shrink-0">
             <canvas
@@ -339,12 +339,12 @@
             {#if layer.type !== 'pixel'}
               <span
                 data-testid="layer-kind-badge"
-                class="absolute -bottom-1 -right-1 rounded bg-slate-700 px-0.5 text-[8px] font-bold leading-tight text-slate-100 ring-1 ring-slate-900">{layerBadge(layer)}</span>
+                class="absolute -bottom-1 -right-1 rounded bg-accent px-0.5 text-[8px] font-bold leading-tight text-foreground ring-1 ring-background">{layerBadge(layer)}</span>
             {/if}
           </span>
         {:else}
           <span
-            class="shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700"
+            class="shrink-0 grid place-items-center rounded bg-muted text-[9px] text-muted-foreground ring-1 ring-border"
             style="width: {thumbnailSize}px; height: {thumbnailSize}px">{layerBadge(layer)}</span>
         {/if}
         {#if layer.mask && !layer.mask.source && layer.type === 'pixel'}
@@ -354,7 +354,7 @@
             aria-pressed={layer.mask.linked !== false}
             title={layer.mask.linked === false ? 'Mask unlinked: it stays put when the layer moves or transforms. Click to link.' : 'Mask linked: it moves with the layer. Click to unlink.'}
             data-testid="layer-mask-link"
-            class="shrink-0 text-[10px] leading-none {layer.mask.linked === false ? 'text-slate-600' : 'text-slate-300'}"
+            class="shrink-0 text-[10px] leading-none {layer.mask.linked === false ? 'text-muted-foreground/70' : 'text-foreground'}"
             onclick={(e) => {
               e.stopPropagation();
               attempt(() => controller.setLayerMaskProps(layer.id, { linked: layer.mask!.linked === false }));
@@ -382,7 +382,7 @@
             autofocus
             aria-label="Layer name"
             value={layer.name || row.label}
-            class="flex-1 min-w-0 bg-slate-900 border border-slate-600 rounded px-1"
+            class="flex-1 min-w-0 bg-background border border-border rounded px-1"
             onclick={(e) => e.stopPropagation()}
             onblur={(e) => {
               const v = (e.target as HTMLInputElement).value;
@@ -397,14 +397,14 @@
         {:else}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <span
-            class="flex-1 min-w-0 truncate {layer.visible ? '' : 'text-slate-500'}"
+            class="flex-1 min-w-0 truncate {layer.visible ? '' : 'text-muted-foreground'}"
             ondblclick={(e) => {
               e.stopPropagation();
               renaming = layer.id;
             }}>{row.label}</span>
         {/if}
         {#if layerWarning(layer)}
-          <span role="img" data-testid="layer-warning" aria-label={layerWarning(layer)} title={layerWarning(layer)} class="text-[10px] text-amber-400">⚠</span>
+          <span role="img" data-testid="layer-warning" aria-label={layerWarning(layer)} title={layerWarning(layer)} class="text-[10px] text-amber-600">⚠</span>
         {/if}
         {#if layerEffectsBadge(layer)}
           {@const fxOn = layerEffectsBadge(layer) === 'on'}
@@ -413,21 +413,21 @@
             data-testid="layer-fx-badge"
             aria-label={fxOn ? `Turn effects off for ${row.label}` : `Turn effects on for ${row.label}`}
             aria-pressed={fxOn}
-            class="text-[9px] italic font-semibold {fxOn ? 'text-indigo-300' : 'text-slate-600 line-through'}"
+            class="text-[9px] italic font-semibold {fxOn ? 'text-primary' : 'text-muted-foreground/70 line-through'}"
             onclick={(e) => {
               e.stopPropagation();
               attempt(() => controller.setLayerEffectsEnabled(layer.id, !fxOn));
             }}>fx</button
           >
         {/if}
-        {#if locked(layer)}<span aria-label="Locked" class="text-slate-400">🔒</span>{/if}
-        {#if layer.blend !== 'normal' && layer.blend !== 'pass-through'}<span class="text-[9px] text-slate-500">{layer.blend}</span>{/if}
+        {#if locked(layer)}<span aria-label="Locked" class="text-muted-foreground">🔒</span>{/if}
+        {#if layer.blend !== 'normal' && layer.blend !== 'pass-through'}<span class="text-[9px] text-muted-foreground">{layer.blend}</span>{/if}
       </li>
     {/each}
   </ul>
 
   {#if error}
-    <p role="alert" class="text-rose-400">{error}</p>
+    <p role="alert" class="text-destructive">{error}</p>
   {/if}
 
   {#if menu}
@@ -435,7 +435,7 @@
       role="menu"
       tabindex="-1"
       aria-label="Layer menu"
-      class="fixed z-50 min-w-44 rounded border border-slate-700 bg-slate-900 py-1 shadow-xl"
+      class="fixed z-50 min-w-44 rounded border border-border bg-background py-1 shadow-xl"
       style="left: {menu.x}px; top: {menu.y}px"
       onclick={(e) => e.stopPropagation()}
       onkeydown={(e) => e.key === 'Escape' && (menu = null)}
@@ -445,7 +445,7 @@
           type="button"
           role="menuitem"
           disabled={!item.enabled}
-          class="block w-full px-3 py-1 text-left hover:bg-slate-800 disabled:opacity-40"
+          class="block w-full px-3 py-1 text-left hover:bg-muted disabled:opacity-40"
           onclick={() => run(item.action)}>{item.label}</button>
       {/each}
     </div>

package/dist/image-editor/RefineEdgePanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageRangeClass, imageSectionTitleClass } from './styles.js';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -65,14 +66,14 @@
   }
 
   const button =
-    'px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40';
+    'px-2 py-1 rounded-md border border-border bg-background text-[11px] text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40';
 </script>
 
 <div data-testid="refine-edge-panel" class="flex flex-col gap-3 text-xs {className}">
-  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Refine Edge</span>
+  <span class={imageSectionTitleClass}>Refine Edge</span>
   {#each REFINE_EDGE_CONTROLS as c (c.id)}
     <label class="flex flex-col gap-1">
-      <span class="flex justify-between text-slate-400">
+      <span class="flex justify-between text-muted-foreground">
         <span>{c.label}</span>
         <span class="font-mono">{params[c.id]}{c.unit}</span>
       </span>
@@ -84,11 +85,11 @@
         aria-label={c.label}
         value={params[c.id]}
         oninput={(e) => (params = { ...params, [c.id]: Number((e.currentTarget as HTMLInputElement).value) })}
-        class="w-full accent-indigo-500"
+        class={imageRangeClass}
       />
     </label>
   {/each}
-  <label class="flex items-center gap-2 text-slate-300">
+  <label class="flex items-center gap-2 text-foreground">
     <input
       type="checkbox"
       checked={params.smartRadius}
@@ -101,16 +102,16 @@
     <button type="button" class={button} onclick={() => (params = { ...DEFAULT_PARAMS })}>Reset</button>
   </div>
   {#if error}
-    <p role="alert" class="text-rose-400">{error}</p>
+    <p role="alert" class="text-destructive">{error}</p>
   {/if}
 
-  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
+  <span class="font-semibold text-foreground uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
   <div class="flex gap-1 items-center">
     <select
       aria-label="New masked layer kind"
       value={newKind}
       onchange={(e) => (newKind = (e.currentTarget as HTMLSelectElement).value as AdjustmentKind)}
-      class="flex-1 bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+      class="flex-1 bg-background border border-border rounded px-1 py-1 text-foreground"
     >
       {#each ADJUSTMENT_KINDS as k (k.kind)}
         <option value={k.kind}>{k.label}</option>
@@ -124,7 +125,7 @@
         aria-label="Mask layer"
         value={target.id}
         onchange={(e) => (layerId = (e.currentTarget as HTMLSelectElement).value)}
-        class="bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+        class="bg-background border border-border rounded px-1 py-1 text-foreground"
       >
         {#each list as l (l.id)}
           <option value={l.id}>{l.name || adjustmentKindLabel(l.kind)}{l.mask ? ' (masked)' : ''}</option>
@@ -143,7 +144,7 @@
       </div>
       {#if target.mask}
         <label class="flex flex-col gap-1">
-          <span class="flex justify-between text-slate-400">
+          <span class="flex justify-between text-muted-foreground">
             <span>Density</span>
             <span class="font-mono">{Math.round((target.mask.density ?? 1) * 100)}%</span>
           </span>
@@ -155,11 +156,11 @@
             aria-label="Mask density"
             value={Math.round((target.mask.density ?? 1) * 100)}
             oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { density: Number((e.currentTarget as HTMLInputElement).value) / 100 })}
-            class="w-full accent-indigo-500"
+            class={imageRangeClass}
           />
         </label>
         <label class="flex flex-col gap-1">
-          <span class="flex justify-between text-slate-400">
+          <span class="flex justify-between text-muted-foreground">
             <span>Mask Feather</span>
             <span class="font-mono">{target.mask.feather ?? 0}px</span>
           </span>
@@ -171,7 +172,7 @@
             aria-label="Mask feather"
             value={target.mask.feather ?? 0}
             oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { feather: Number((e.currentTarget as HTMLInputElement).value) })}
-            class="w-full accent-indigo-500"
+            class={imageRangeClass}
           />
         </label>
       {/if}