fix: update button ui component to have variant and size independent

src/app.css

@@ -12,7 +12,7 @@
   --surface-subtle: oklch(from var(--brand-main) 0.95 0.1 h);
   --surface-elevated: oklch(from var(--brand-main) 0.99 0.05 h);
   --surface-control: oklch(from var(--brand-main) 0.85 0.04 h);
-  --surface-hover: oklch(from var(--brand-main) 0.9 0.1 h);
+  --surface-hover: oklch(from var(--brand-main) 0.8 0.1 h);
 
   --action-primary: oklch(from var(--brand-main) var(--action-lightness) var(--action-chroma) h);
   --action-primary-hover: oklch(from var(--action-primary) calc(l - var(--hover-step)) c h);
@@ -23,8 +23,8 @@
   --text-muted: oklch(from var(--brand-main) 0.45 0.02 h);
   --text-action: oklch(from var(--brand-main) 0.99 0.02 h);
 
-  --border-main: oklch(from var(--brand-main) 0.9 0.04 h);
+  --border-main: oklch(from var(--brand-main) 0.7 0.1 h);
-  --border-strong: oklch(from var(--brand-main) 0.8 0.06 h);
+  --border-strong: oklch(from var(--brand-main) 0.6 0.1 h);
 
   --shadow: 0 1px 3px oklch(from var(--brand-main) 0.2 0.05 h / 0.1);
   --shadow-md: 0 4px 12px oklch(from var(--brand-main) 0.2 0.05 h / 0.1);
@@ -41,7 +41,7 @@
   --surface-subtle: oklch(from var(--brand-main) 0.16 0.03 h);
   --surface-elevated: oklch(from var(--brand-main) 0.2 0.03 h);
   --surface-control: oklch(from var(--brand-main) 0.4 0.06 h);
-  --surface-hover: oklch(from var(--brand-main) 0.24 0.04 h);
+  --surface-hover: oklch(from var(--brand-main) 0.4 0.04 h);
 
   --action-primary-hover: oklch(from var(--action-primary) calc(l + var(--hover-step)) c h);
   --action-secondary-hover: oklch(from var(--action-secondary) calc(l + var(--hover-step)) c h);
@@ -49,8 +49,8 @@
   --text-main: oklch(from var(--brand-main) 0.94 0.01 h);
   --text-muted: oklch(from var(--brand-main) 0.75 0.02 h);
 
-  --border-main: oklch(from var(--brand-main) 0.26 0.04 h);
+  --border-main: oklch(from var(--brand-main) 0.3 0.1 h);
-  --border-strong: oklch(from var(--brand-main) 0.4 0.06 h);
+  --border-strong: oklch(from var(--brand-main) 0.4 0.1 h);
 
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);

src/components/image/ImageManager.svelte

@@ -26,9 +26,9 @@
     <CropInline />
 
     <div class="crop-controls">
-      <Button label="Загрузить" ariaLabel="Upload" icon={Upload} type="primary" />
+      <Button label="Загрузить" ariaLabel="Upload" icon={Upload} variant="primary" />
-      <Button label="Редактировать" ariaLabel="Edit" icon={Pencil} type="secondary" />
+      <Button label="Редактировать" ariaLabel="Edit" icon={Pencil} variant="secondary" />
-      <Button label="Сбросить" ariaLabel="Reset" icon={Reset} type="outline" />
+      <Button label="Сбросить" ariaLabel="Reset" icon={Reset} variant="outline" />
     </div>
 
     <SettingsGrid label="Настройки изображения" icon={Sliders}>

src/components/layout/SettingsGrid.svelte

@@ -16,7 +16,7 @@
 <div class="settings-grid">
   <label>
     {label}
-    <Button {icon} ariaLabel="Expand" type="mini" onclick={() => (expanded = !expanded)} />
+    <Button {icon} ariaLabel="Expand" size="mini" onclick={() => (expanded = !expanded)} />
   </label>
   {#if expanded}
     {@render children()}

src/components/panel/PreviewControls.svelte

@@ -29,12 +29,12 @@
 <Button
   icon={ChevronLeft}
   ariaLabel="Previous slide"
-  type="mini"
+  size="mini"
   onclick={prev}
   disabled={isFirst}
 />
 <span class="panel-indicator">{current + 1} / {max}</span>
-<Button icon={ChevronRight} ariaLabel="Next slide" type="mini" onclick={next} disabled={isLast} />
+<Button icon={ChevronRight} ariaLabel="Next slide" size="mini" onclick={next} disabled={isLast} />
 
 <style>
   .panel-indicator {

src/components/panel/PreviewManager.svelte

@@ -88,7 +88,7 @@
       <Button
         label="Скачать"
         ariaLabel="Download current"
-        type="secondary"
+        variant="secondary"
         icon={Download}
         onclick={downloadCurrent}
       />

src/components/text/TextInlineEdit.svelte

@@ -23,7 +23,13 @@
     out:fly={{ x: 600, duration: TRANSITION_DURATION }}
   >
     <input type="text" bind:value={text} />
-    <Button icon={Cross} ariaLabel="Delete" type="danger" onclick={() => ondelete(id)} />
+    <Button
+      icon={Cross}
+      ariaLabel="Delete"
+      variant="danger"
+      size="mini"
+      onclick={() => ondelete(id)}
+    />
   </div>
 </li>
 

src/components/ui/Button.svelte

@@ -8,8 +8,8 @@
     onclick?: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     label?: string;
-    type?: "primary" | "secondary" | "danger" | "outline" | "mini";
+    variant?: "primary" | "secondary" | "danger" | "outline";
-    extra?: "grow";
+    size?: "default" | "mini";
   }
 
   let {
@@ -18,19 +18,18 @@
     onclick = () => {},
     disabled = false,
     label = "",
-    type = "primary",
+    variant = "primary",
-    extra,
+    size = "default",
   }: Props = $props();
 </script>
 
 <button
   class="btn"
-  class:btn-primary={type === "primary"}
+  class:btn-primary={variant === "primary"}
-  class:btn-secondary={type === "secondary"}
+  class:btn-secondary={variant === "secondary"}
-  class:btn-outline={type === "outline" || type === "mini"}
+  class:btn-outline={variant === "outline"}
-  class:btn-danger={type === "danger"}
+  class:btn-danger={variant === "danger"}
-  class:btn-mini={type === "mini"}
+  class:btn-mini={size === "mini"}
-  class:grow={extra === "grow"}
   {disabled}
   {onclick}
   aria-label={ariaLabel}
@@ -79,17 +78,8 @@
     --btn-hover: var(--action-secondary-hover);
   }
 
-  .btn-mini {
+  .btn-danger {
-    width: 32px;
+    --btn-main: var(--danger-base);
-    height: 32px;
-    padding: 0;
-    border: 1px solid var(--border-main);
-    border-radius: var(--radius);
-    justify-content: center;
-  }
-
-  .btn-mini:hover:not(:disabled) {
-    border-color: var(--border-main);
   }
 
   .btn-outline {
@@ -104,12 +94,11 @@
     color: var(--text-main);
   }
 
-  .btn-danger {
+  .btn-mini {
-    --btn-main: var(--danger-base);
+    width: 32px;
-  }
+    height: 32px;
-
+    padding: 0;
-  .grow {
+    border-radius: var(--radius);
-    flex-grow: 1;
     justify-content: center;
   }
 </style>

src/components/ui/Outline.svelte

@@ -13,5 +13,5 @@
   icon={TypeOutline}
   ariaLabel="toggle outline"
   onclick={() => (outlined = !outlined)}
-  type={outlined ? "outline" : "primary"}
+  variant={outlined ? "outline" : "primary"}
 />

src/components/ui/RangeSlider.svelte

@@ -27,7 +27,13 @@
 <input type="range" {min} {max} {step} bind:value class="slider" {onchange} />
 <span class="value-display">{value}</span>
 {#if showReset}
-  <Button ariaLabel="Reset" icon={Reset} type="mini" onclick={() => (value = defaultValue)} />
+  <Button
+    ariaLabel="Reset"
+    icon={Reset}
+    size="mini"
+    variant="outline"
+    onclick={() => (value = defaultValue)}
+  />
 {/if}
 
 <style>