feat: change css to use single brand color, only new browsers support

src/components/image/CropInline.svelte

@@ -21,7 +21,7 @@
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 5;
-    background: var(--bg-secondary);
+    background: var(--surface-subtle);
     border-radius: var(--radius);
     overflow: hidden;
     cursor: crosshair;
@@ -35,7 +35,7 @@
 
   .crop-box {
     position: absolute;
-    border: 2px solid var(--accent-primary);
+    border: 2px solid var(--action-primary);
     box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
     cursor: move;
     display: none;
@@ -50,7 +50,7 @@
     width: 10px;
     height: 10px;
     background: white;
-    border: 2px solid var(--accent-primary);
+    border: 2px solid var(--action-primary);
     border-radius: 50%;
   }
 

src/components/layout/AppHeader.svelte

@@ -20,11 +20,12 @@
 
 <style>
   .header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
+    background: linear-gradient(135deg, var(--action-primary) 0%, var(--action-secondary) 100%);
+    color: var(--text-action);
     padding: 16px 20px;
     border-radius: var(--radius);
     margin-bottom: 16px;
+    box-shadow: var(--shadow-md);
   }
 
   .header-content {

src/components/layout/Card.svelte

@@ -33,19 +33,20 @@
 
 <style>
   .card {
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-main);
     border-radius: var(--radius);
     padding: 16px;
     margin-bottom: 16px;
     transition: var(--transition);
     overflow: hidden;
+    box-shadow: var(--shadow);
   }
 
   .card-title {
     font-size: 15px;
     font-weight: 600;
-    color: var(--text-primary);
+    color: var(--text-main);
     margin-bottom: 12px;
     display: flex;
     align-items: center;

src/components/layout/PanelBar.svelte

@@ -7,6 +7,3 @@
   <ImageManager />
   <PreviewManager />
 </div>
-
-<style>
-</style>

src/components/layout/SettingsRow.svelte

@@ -25,7 +25,7 @@
   }
 
   .setting-label {
-    color: var(--text-secondary);
+    color: var(--text-muted);
     font-size: 13px;
     font-weight: 500;
   }

src/components/layout/TextBar.svelte

@@ -7,6 +7,3 @@
   <TextManager />
   <TextConfig />
 </div>
-
-<style>
-</style>

src/components/panel/PreviewControls.svelte

@@ -33,7 +33,6 @@
 <style>
   .panel-indicator {
     font-size: 13px;
-    color: var(--text-secondary);
     font-weight: 500;
     min-width: 50px;
     text-align: center;

src/components/panel/PreviewManager.svelte

@@ -78,7 +78,7 @@
 
     <div class="panel-actions">
       <Button label="Скачать всё" ariaLabel="Download all" icon={Download} onclick={downloadAll} />
-      <Button label="Скачать" ariaLabel="Download current" type="outline" icon={Download} onclick={downloadCurrent} />
+      <Button label="Скачать" ariaLabel="Download current" type="secondary" icon={Download} onclick={downloadCurrent} />
     </div>
   </div>
 </Card>
@@ -92,7 +92,7 @@
   }
 
   .panel-display {
-    background: var(--bg-secondary);
+    background: var(--surface-subtle);
     border-radius: var(--radius);
     padding: 20px;
     display: flex;
@@ -110,7 +110,6 @@
   .empty-state {
     text-align: center;
     padding: 32px 16px;
-    color: var(--text-tertiary);
   }
 
   .empty-state :global(svg) {

src/components/text/TextInlineEdit.svelte

@@ -24,30 +24,30 @@
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
+    background: var(--surface-subtle);
+    border: 1px solid var(--border-main);
     border-radius: var(--radius);
     transition: var(--transition);
   }
 
   .text-item:hover {
-    border-color: var(--border-hover);
+    border-color: var(--border-strong);
   }
 
   .text-item input {
     flex: 1;
     padding: 6px 10px;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--border-main);
     border-radius: 4px;
     font-size: 14px;
-    background: var(--bg-primary);
-    color: var(--text-primary);
+    background: var(--surface-main);
+    color: var(--text-main);
     transition: var(--transition);
     font-family: inherit;
   }
 
   .text-item input:focus {
     outline: none;
-    border-color: var(--accent-primary);
+    border-color: var(--border-strong);
   }
 </style>

src/components/text/TextInput.svelte

@@ -27,21 +27,21 @@
   .text-input {
     flex: 1;
     padding: 10px 12px;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--border-main);
     border-radius: var(--radius);
     font-size: 14px;
-    background: var(--bg-primary);
-    color: var(--text-primary);
+    background: var(--surface-main);
+    color: var(--text-main);
     transition: var(--transition);
     font-family: inherit;
   }
 
   .text-input:focus {
     outline: none;
-    border-color: var(--accent-primary);
+    border-color: var(--border-strong);
   }
 
   .text-input::placeholder {
-    color: var(--text-tertiary);
+    color: var(--text-muted);
   }
 </style>

src/components/ui/Alignment.svelte

@@ -3,7 +3,7 @@
   import TextAlignCenter from "~icons/lucide/text-align-center";
   import TextAlignEnd from "~icons/lucide/text-align-end";
   import TextAlignStart from "~icons/lucide/text-align-start";
-  // import { TextAlignCenter, TextAlignEnd, TextAlignStart } from "@lucide/svelte";
+  import Button from "./Button.svelte";
 
   interface Props {
     align: TextAlignType;
@@ -22,46 +22,24 @@
   }
 </script>
 
-<button aria-label="Set left" class="align-btn" class:active={align === TextAlign.LEFT} onclick={onAlignLeft}>
-  <TextAlignStart />
-</button>
-<button aria-label="Set center" class="align-btn" class:active={align === TextAlign.CENTER} onclick={onAlignCenter}>
-  <TextAlignCenter />
-</button>
-<button aria-label="Set right" class="align-btn" class:active={align === TextAlign.RIGHT} onclick={onAlignRight}>
-  <TextAlignEnd />
-</button>
-
-<style>
-  .align-btn {
-    flex: 1;
-    padding: 8px;
-    border: 1px solid var(--border-color);
-    background: var(--bg-primary);
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition: var(--transition);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
-  }
-
-  .align-btn :global(svg) {
-    width: 16px;
-    height: 16px;
-    transition: var(--transition);
-  }
-
-  .align-btn:hover {
-    background: var(--bg-hover);
-    border-color: var(--accent-primary);
-    color: var(--accent-primary);
-  }
-
-  .align-btn.active {
-    background: var(--accent-primary);
-    border-color: var(--accent-primary);
-    color: white;
-  }
-</style>
+<Button
+  icon={TextAlignStart}
+  ariaLabel="Set left"
+  onclick={onAlignLeft}
+  type={align === TextAlign.LEFT ? "primary" : "outline"}
+  extra="grow"
+/>
+<Button
+  icon={TextAlignCenter}
+  ariaLabel="Set center"
+  onclick={onAlignCenter}
+  type={align === TextAlign.CENTER ? "primary" : "outline"}
+  extra="grow"
+/>
+<Button
+  icon={TextAlignEnd}
+  ariaLabel="Set right"
+  onclick={onAlignRight}
+  type={align === TextAlign.RIGHT ? "primary" : "outline"}
+  extra="grow"
+/>

src/components/ui/Badge.svelte

@@ -16,8 +16,8 @@
     min-width: 20px;
     height: 20px;
     padding: 0 6px;
-    background: var(--accent-light);
-    color: var(--accent-primary);
+    background: var(--action-primary);
+    color: var(--text-action);
     border-radius: 10px;
     font-size: 11px;
     font-weight: 600;

src/components/ui/Button.svelte

@@ -9,9 +9,18 @@
     disabled?: boolean;
     label?: string;
     type?: "primary" | "secondary" | "danger" | "outline" | "mini";
+    extra?: "grow";
   }
 
-  let { icon: Icon, ariaLabel, onclick = () => {}, disabled = false, label = "", type = "primary" }: Props = $props();
+  let {
+    icon: Icon,
+    ariaLabel,
+    onclick = () => {},
+    disabled = false,
+    label = "",
+    type = "primary",
+    extra,
+  }: Props = $props();
 </script>
 
 <button
@@ -21,6 +30,7 @@
   class:btn-outline={type === "outline"}
   class:btn-danger={type === "danger"}
   class:btn-mini={type === "mini"}
+  class:grow={extra === "grow"}
   {disabled}
   {onclick}
   aria-label={ariaLabel}
@@ -31,6 +41,8 @@
 
 <style>
   .btn {
+    --btn-main: var(--action-primary);
+    --btn-hover: var(--action-primary-hover);
     padding: 10px 16px;
     border: none;
     border-radius: var(--radius);
@@ -43,6 +55,8 @@
     gap: 6px;
     font-family: inherit;
     white-space: nowrap;
+    background-color: var(--btn-main);
+    color: oklch(from var(--btn-main) 99% 0.05 h);
   }
 
   .btn :global(svg) {
@@ -50,75 +64,52 @@
     height: 16px;
   }
 
-  .btn:hover:not(:disabled) {
-    background: var(--accent-hover);
-  }
-
   .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .btn-primary {
-    background: var(--accent-primary);
-    color: white;
+  .btn:hover:not(:disabled) {
+    background-color: var(--btn-hover);
+    box-shadow: var(--shadow-md);
   }
 
   .btn-secondary {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-  }
-
-  .btn-secondary:hover {
-    background: var(--bg-hover);
+    --btn-main: var(--action-secondary);
+    --btn-hover: var(--action-secondary-hover);
   }
 
   .btn-outline {
     background: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    border: 1px solid var(--border-strong);
   }
 
   .btn-outline:hover:not(:disabled) {
-    background: var(--bg-hover);
-    border-color: var(--accent-primary);
-    color: var(--accent-primary);
+    background: var(--surface-hover);
+    border-color: var(--border-strong);
+    color: var(--text-main);
   }
 
   .btn-danger {
-    background: var(--danger);
-    color: white;
-    padding: 6px 10px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    transition: var(--transition);
-    min-width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn-danger:hover {
-    background: #dc2626;
+    --btn-main: var(--danger-base);
   }
 
   .btn-mini {
     width: 32px;
     height: 32px;
     padding: 0;
-    border: 1px solid var(--border-color);
-    background: var(--bg-primary);
+    border: 1px solid var(--border-main);
     border-radius: var(--radius);
-    color: var(--text-secondary);
     justify-content: center;
   }
 
   .btn-mini:hover:not(:disabled) {
-    background: var(--bg-hover);
-    border-color: var(--accent-primary);
+    border-color: var(--border-main);
+  }
+
+  .grow {
+    flex-grow: 1;
+    justify-content: center;
   }
 </style>

src/components/ui/ColorPicker.svelte

@@ -15,26 +15,26 @@
   .color-input {
     width: 40px;
     height: 32px;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--border-main);
     border-radius: var(--radius);
     cursor: pointer;
     transition: var(--transition);
-    background: var(--bg-primary);
+    background: var(--surface-main);
     padding: 0px 8px;
     flex: 1;
   }
 
   .color-input:hover {
-    border-color: var(--accent-primary);
+    border-color: var(--action-primary);
   }
 
   .color-value {
     font-family: "Courier New", monospace;
     font-size: 12px;
     font-weight: 500;
-    color: var(--text-secondary);
+    color: var(--text-muted);
     padding: 4px 8px;
-    background: var(--bg-secondary);
+    background: var(--surface-main);
     border-radius: 4px;
   }
 </style>

src/components/ui/RangeSlider.svelte

@@ -20,7 +20,7 @@
     flex: 1;
     height: 4px;
     border-radius: 2px;
-    background: var(--bg-secondary);
+    background: var(--surface-control);
     outline: none;
     -webkit-appearance: none;
     appearance: none;
@@ -32,7 +32,7 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: var(--accent-primary);
+    background: var(--action-primary);
     cursor: pointer;
     transition: var(--transition);
   }
@@ -45,7 +45,7 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: var(--accent-primary);
+    background: var(--action-primary);
     cursor: pointer;
     border: none;
     transition: var(--transition);
@@ -56,13 +56,13 @@
   }
 
   .value-display {
-    color: var(--text-primary);
+    color: var(--text-main);
     font-weight: 500;
     min-width: 40px;
     text-align: right;
     font-size: 13px;
     padding: 4px 8px;
-    background: var(--bg-secondary);
+    background: var(--surface-main);
     border-radius: 4px;
   }
 </style>

src/components/ui/SelectFont.svelte

@@ -20,10 +20,10 @@
 <style>
   .select-input {
     padding: 8px 10px;
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--border-main);
     border-radius: var(--radius);
-    background: var(--bg-primary);
-    color: var(--text-primary);
+    background: var(--surface-main);
+    color: var(--text-main);
     font-size: 13px;
     cursor: pointer;
     transition: var(--transition);
@@ -33,6 +33,6 @@
 
   .select-input:focus {
     outline: none;
-    border-color: var(--accent-primary);
+    border-color: var(--border-strong);
   }
 </style>