@pixerate/editor-svelte 0.108.0 → 0.109.0

package/dist/image-editor/FreeTransformOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { imageChipClass, imageFieldClass } from './styles.js';
   import type { FreeTransformField, FreeTransformTool, Interpolation, WarpBar } from '@pixerate/editor/image-editor';
   import { FREE_TRANSFORM_FIELDS, FREE_TRANSFORM_MODE_OPTIONS, INTERPOLATIONS, TRANSFORM_ANCHORS, WARP_GRID_OPTIONS, WARP_STYLE_OPTIONS } from '@pixerate/editor/image-editor';
 
@@ -21,7 +22,7 @@
     return { bar: tool.active ? tool.bar() : null, mode: tool.mode, proportional: tool.proportional, interpolation: tool.interpolation, error: tool.error, warp: tool.warpBar() };
   });
   const bar = $derived(view.bar);
-  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+  
   const round = (v: number, unit: string) => (unit === 'px' ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100);
 
   const WARP_NUMBERS = [
@@ -43,22 +44,22 @@
 </script>
 
 {#if bar}
-  <div class="flex flex-wrap items-center gap-2 text-xs text-slate-200 {className}" data-testid="free-transform-options" role="toolbar" aria-label="Free Transform options">
+  <div class="flex flex-wrap items-center gap-2 text-xs text-foreground {className}" data-testid="free-transform-options" role="toolbar" aria-label="Free Transform options">
     <div class="flex gap-1" role="group" aria-label="Transform mode">
       {#each FREE_TRANSFORM_MODE_OPTIONS as m (m.id)}
-        <button type="button" title={m.title} aria-pressed={view.mode === m.id} class={chip(view.mode === m.id)} onclick={() => tool.setMode(m.id)}>{m.label}</button>
+        <button type="button" title={m.title} aria-pressed={view.mode === m.id} class={imageChipClass(view.mode === m.id)} onclick={() => tool.setMode(m.id)}>{m.label}</button>
       {/each}
     </div>
     <div class="grid grid-cols-3 gap-px" role="group" aria-label="Reference point">
       {#each TRANSFORM_ANCHORS as a (a)}
-        <button type="button" aria-label={`Reference point ${a}`} title={`Reference point: ${a}`} class="h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500" onclick={() => tool.setReference(a)}></button>
+        <button type="button" aria-label={`Reference point ${a}`} title={`Reference point: ${a}`} class="h-2.5 w-2.5 rounded-sm bg-accent hover:bg-primary/90" onclick={() => tool.setReference(a)}></button>
       {/each}
     </div>
     {#if view.mode === 'warp'}
       <div class="flex flex-wrap items-center gap-2" role="group" aria-label="Warp options">
         <label class="flex items-center gap-1">
-          <span class="text-slate-400">Warp</span>
-          <select aria-label="Warp style" value={view.warp.style} onchange={(e) => tool.setWarp({ style: e.currentTarget.value as WarpBar['style'] })} class="rounded border border-slate-700 bg-slate-900 px-1 py-0.5">
+          <span class="text-muted-foreground">Warp</span>
+          <select aria-label="Warp style" value={view.warp.style} onchange={(e) => tool.setWarp({ style: e.currentTarget.value as WarpBar['style'] })} class={imageFieldClass}>
             {#each WARP_STYLE_OPTIONS as o (o.id)}
               <option value={o.id}>{o.label}</option>
             {/each}
@@ -66,7 +67,7 @@
         </label>
         {#each WARP_NUMBERS as n (n.key)}
           <label class="flex items-center gap-1">
-            <span class="text-slate-400">{n.label}</span>
+            <span class="text-muted-foreground">{n.label}</span>
             {#key view.warp[n.key]}
               <input
                 type="number"
@@ -75,7 +76,7 @@
                 min={-100}
                 max={100}
                 disabled={view.warp.style === 'custom'}
-                class="w-14 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40"
+                class="w-14 rounded border border-border bg-background px-1 py-0.5 text-right disabled:opacity-40"
                 onblur={(e) => warpNumber(n.key, e.currentTarget.value)}
                 onkeydown={(e) => {
                   if (e.key === 'Enter') {
@@ -86,7 +87,7 @@
                 }}
               />
             {/key}
-            <span class="text-slate-500">%</span>
+            <span class="text-muted-foreground">%</span>
           </label>
         {/each}
         <button
@@ -94,10 +95,10 @@
           title="Bend along the vertical axis"
           aria-pressed={view.warp.orientation === 'vertical'}
           disabled={view.warp.style === 'custom'}
-          class={chip(view.warp.orientation === 'vertical')}
+          class={imageChipClass(view.warp.orientation === 'vertical')}
           onclick={() => tool.setWarp({ orientation: view.warp.orientation === 'vertical' ? 'horizontal' : 'vertical' })}>Vertical</button>
         <label class="flex items-center gap-1">
-          <span class="text-slate-400">Grid</span>
+          <span class="text-muted-foreground">Grid</span>
           <select
             aria-label="Warp grid"
             value={gridId(view.warp)}
@@ -105,7 +106,7 @@
               const g = WARP_GRID_OPTIONS.find((o) => o.id === e.currentTarget.value)!;
               tool.setWarp({ columns: g.columns, rows: g.rows });
             }}
-            class="rounded border border-slate-700 bg-slate-900 px-1 py-0.5"
+            class={imageFieldClass}
           >
             {#each WARP_GRID_OPTIONS as g (g.id)}
               <option value={g.id}>{g.label}</option>
@@ -116,7 +117,7 @@
     {/if}
     {#each view.mode === 'warp' ? [] : FREE_TRANSFORM_FIELDS as f (f.id)}
       <label class="flex items-center gap-1" title={f.title}>
-        <span class="text-slate-400">{f.label}</span>
+        <span class="text-muted-foreground">{f.label}</span>
         {#key round(bar[f.id], f.unit)}
           <input
             type="number"
@@ -124,7 +125,7 @@
             value={round(bar[f.id], f.unit)}
             disabled={!bar.affine}
             step={f.unit === 'px' ? 1 : 0.1}
-            class="w-16 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40"
+            class="w-16 rounded border border-border bg-background px-1 py-0.5 text-right disabled:opacity-40"
             onblur={(e) => apply(f.id, e.currentTarget.value)}
             onkeydown={(e) => {
               if (e.key === 'Enter') {
@@ -135,13 +136,13 @@
             }}
           />
         {/key}
-        <span class="text-slate-500">{f.unit}</span>
+        <span class="text-muted-foreground">{f.unit}</span>
         {#if f.id === 'scaleX'}
           <button
             type="button"
             aria-label="Keep width and height proportional"
             aria-pressed={view.proportional}
-            class={chip(view.proportional)}
+            class={imageChipClass(view.proportional)}
             onclick={() => {
               tool.proportional = !tool.proportional;
               tick++;
@@ -150,22 +151,22 @@
       </label>
     {/each}
     <label class="flex items-center gap-1">
-      <span class="text-slate-400">Interpolation</span>
+      <span class="text-muted-foreground">Interpolation</span>
       <select
         aria-label="Interpolation"
         value={view.interpolation}
         onchange={(e) => tool.setInterpolation(e.currentTarget.value as Interpolation)}
-        class="rounded border border-slate-700 bg-slate-900 px-1 py-0.5"
+        class={imageFieldClass}
       >
         {#each INTERPOLATIONS as i (i)}
           <option value={i}>{i[0].toUpperCase() + i.slice(1)}</option>
         {/each}
       </select>
     </label>
-    <button type="button" title="Commit (Enter)" class="px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500" onclick={() => tool.commit()}>Commit</button>
-    <button type="button" title="Cancel (Esc)" class={chip(false)} onclick={() => tool.cancel()}>Cancel</button>
+    <button type="button" title="Commit (Enter)" class="px-2 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90" onclick={() => tool.commit()}>Commit</button>
+    <button type="button" title="Cancel (Esc)" class={imageChipClass(false)} onclick={() => tool.cancel()}>Cancel</button>
     {#if view.error}
-      <span role="alert" class="text-rose-400">{view.error}</span>
+      <span role="alert" class="text-destructive">{view.error}</span>
     {/if}
   </div>
 {/if}

package/dist/image-editor/Histogram.svelte

@@ -34,7 +34,7 @@
   role="img"
   aria-label={histogram ? `Histogram of ${histogram.samples} pixels` : 'Histogram (no data)'}
   data-testid="image-editor-histogram"
-  class="w-full rounded bg-slate-950/60 {className}"
+  class="w-full rounded bg-muted/40 {className}"
   style="height: {height}px"
 >
   {#each paths as p (p.c)}