Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update css variables, update badge component

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-02 10:07:31 +05:00
parent 98a4bacd23
commit 4794523084
6 changed files with 188 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/Badge.svelte
-43
View File
@@ -1,43 +0,0 @@
<script lang="ts">
import { Check } from "@lucide/svelte";
import type { Snippet } from "svelte";
type Tone = "default" | "accent" | "success" | "amber";
interface Props {
tone?: Tone;
check?: boolean;
children: Snippet;
}
let { tone = "default", check = false, children }: Props = $props();
</script>
<span class="badge badge--{tone}">
{#if check}<Check size={12} />{/if}
{#if children}{@render children()}{/if}
</span>
<style>
.badge {
display: flex;
align-items: center;
gap: 4px;
line-height: normal;
font-family: var(--font-mono);
font-size: 10px;
border: 0px solid var(--line);
color: var(--muted);
}
.badge--accent {
color: var(--blue);
border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
}
.badge--success {
color: var(--success);
border-color: color-mix(in srgb, var(--success) 40%, var(--line));
}
.badge--amber {
color: var(--amber);
border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
}
</style>
web/src/lib/components/kit/ui/Badge.svelte
+97
View File
@@ -0,0 +1,97 @@
<script lang="ts">
import { Check } from "@lucide/svelte";
const ToneVariantDefine = {
DEFAULT: "default",
ACCENT: "accent",
SUCCESS: "success",
WARNING: "warning",
DANGER: "danger",
INFO: "info",
} as const;
type ToneVariant = (typeof ToneVariantDefine)[keyof typeof ToneVariantDefine];
const BadgeVariantDefine = {
DEFAULT: "default",
OUTLINE: "outline",
CLEAR: "clear",
} as const;
type BadgeVariant =
(typeof BadgeVariantDefine)[keyof typeof BadgeVariantDefine];
interface Props {
tone?: ToneVariant;
variant?: BadgeVariant;
check?: boolean;
label?: string;
}
let {
tone = ToneVariantDefine.DEFAULT,
variant = BadgeVariantDefine.DEFAULT,
check = false,
label = "",
}: Props = $props();
</script>
<span class="badge badge-tone--{tone} badge-variant--{variant}">
{#if check}<Check size={12} />{/if}
{label}
</span>
<style>
.badge {
display: flex;
align-items: center;
gap: var(--space-s);
line-height: normal;
font-family: var(--font-mono);
font-size: var(--font-text);
font-weight: bold;
border-width: var(--size-border-thick);
padding: var(--space-s) var(--space-m);
}
.badge-tone--default {
--color-badge-main: var(--color-main);
--color-badge-tint: var(--color-main-tint);
}
.badge-tone--accent {
--color-badge-main: var(--color-accent);
--color-badge-tint: var(--color-accent-tint);
}
.badge-tone--success {
--color-badge-main: var(--color-success);
--color-badge-tint: var(--color-success-tint);
}
.badge-tone--danger {
--color-badge-main: var(--color-danger);
--color-badge-tint: var(--color-danger-tint);
}
.badge-tone--warning {
--color-badge-main: var(--color-warning);
--color-badge-tint: var(--color-warning-tint);
}
.badge-tone--info {
--color-badge-main: var(--color-info);
--color-badge-tint: var(--color-info-tint);
}
.badge-variant--default {
background-color: var(--color-badge-main);
border-color: var(--color-badge-main);
color: var(--color-background);
}
.badge-variant--outline {
background-color: transparent;
border-color: var(--color-badge-tint);
color: var(--color-badge-tint);
}
.badge-variant--clear {
background-color: transparent;
border-color: transparent;
color: var(--color-badge-tint);
}
</style>
web/src/preview.css
+82 -55
View File
@@ -1,19 +1,13 @@
@import "@fontsource/ibm-plex-sans/400.css"; @import url("@fontsource/ibm-plex-sans/400.css");
@import "@fontsource/ibm-plex-sans/500.css"; @import url("@fontsource/ibm-plex-sans/500.css");
@import "@fontsource/ibm-plex-sans/600.css"; @import url("@fontsource/ibm-plex-sans/600.css");
@import "@fontsource/ibm-plex-sans/700.css"; @import url("@fontsource/ibm-plex-sans/700.css");
@import "@fontsource/ibm-plex-mono/400.css"; @import url("@fontsource/ibm-plex-mono/400.css");
@import "@fontsource/ibm-plex-mono/500.css"; @import url("@fontsource/ibm-plex-mono/500.css");
/* Порядок cascade-слоёв (дубль из корневого +layout.svelte — идемпотентен и
страхует случай, когда design2.css грузится раньше корневого layout): */
@layer app, design; @layer app, design;
/* Новый дизайн — слой design. В слое design правила выигрывают у того же
правила из слоя app (старый app.css) по слою, а не по порядку <link>,
поэтому утечка app.css на /preview при SPA-переходе не перебивает design2. */
@layer design { @layer design {
/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
*, *,
*::before, *::before,
*::after, *::after,
@@ -25,7 +19,7 @@
} }
* { * {
border-color: var(--line); border-color: var(--color-border);
} }
html, html,
@@ -34,21 +28,19 @@
padding: 0; padding: 0;
} }
/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
(Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
html { html {
color-scheme: light dark; color-scheme: light dark;
font-family: var(--font-sans); font-family: var(--font-sans);
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
line-height: 1.5; line-height: 1.5;
} }
body { body {
font-family: var(--font-sans); font-family: var(--font-sans);
color: var(--foreground); color: var(--color-text);
background: var(--background); background: var(--color-background);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizelegibility;
} }
button, button,
@@ -68,77 +60,112 @@
button, button,
input:where([type="button"], [type="reset"], [type="submit"]) { input:where([type="button"], [type="reset"], [type="submit"]) {
appearance: button; appearance: auto;
} }
/* Перебивки глобальных правил старого app.css (слой app ниже), чтобы при
утечке app.css на /preview новый дизайн не получал старую типографику.
Пустые — заполни при необходимости. */
a, a,
a:hover { a:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
h1, h1,
h2 { h2 {
font-size: revert; font-size: revert;
line-height: revert; line-height: revert;
letter-spacing: revert; letter-spacing: revert;
} }
p, p,
label { label {
font-size: revert; font-size: revert;
} }
:focus-visible { :focus-visible {
outline: revert; outline: revert;
} }
svg { svg {
vertical-align: middle; vertical-align: middle;
} }
/* Новый дизайн: токены (§2 плана redesign).
Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
глобально не конфликтует со старым app.css. */
:root { :root {
--font-sans: "IBM Plex Sans", sans-serif; --font-sans: "IBM Plex Sans", sans-serif;
--font-mono: "IBM Plex Mono", monospace; --font-mono: "IBM Plex Mono", monospace;
--background: #eef1f4; --brand-main: #86efac;
--background-muted: #dce2e7; --brand-alt: hct(from var(--brand-main) calc(h + 90) c t);
--checker-background: #e4e8eb;
--checker-background-cross: #d2d8dc;
--panel: #f8fafb; --color-background: hct(from var(--brand-main) h 8 95);
--foreground: #17212b; --color-background-muted: hct(from var(--brand-main) h 12 85);
--muted: #6d7883; --color-panel: hct(from var(--brand-main) h 6.5 98);
--line: #cbd3da; --color-checker-main: hct(from var(--brand-main) h 10.7 85.7);
--color-checker-alt: hct(from var(--brand-main) h 13.2 76);
--blue: #1769d2; --color-border: hct(from var(--brand-main) h 13.1 69.4);
--cyan: #00a8c7;
--amber: #bd7411;
--success: rgb(35, 131, 84);
--success2: rgb(37, 169, 106);
--danger: #e5484d;
--radius: 4px; --color-text: hct(from var(--brand-main) h 5.9 1.7);
--color-text-muted: hct(from var(--brand-main) h 13.4 19.2);
--color-text-accent: hct(from var(--brand-alt) h 5.9 1.7);
--color-text-accent-muted: hct(from var(--brand-alt) h 13.4 19.2);
--color-main: hct(from var(--brand-main) h 80 48);
--color-accent: hct(from var(--brand-alt) h 80 48);
--color-success: hct(160 80 48);
--color-warning: hct(80 80 48);
--color-danger: hct(30 80 48);
--color-info: hct(340 80 48);
--color-main-tint: hct(from var(--brand-main) h 65 55);
--color-accent-tint: hct(from var(--brand-alt) h 65 55);
--color-success-tint: hct(160 65 55);
--color-warning-tint: hct(80 65 55);
--color-danger-tint: hct(30 65 55);
--color-info-tint: hct(340 65 55);
--space-s: 4px;
--space-m: 8px;
--space-l: 12px;
--space-xl: 12px;
--size-border: 1px;
--size-border-thick: 2px;
--font-text: 10px;
--radius-s: 0px;
--radius-m: 4px;
} }
[data-theme="dark"] { [data-theme="dark"] {
--background: #11171d; --brand-main: #86efac;
--background-muted: #1e2a3447; --brand-alt: hct(from var(--brand-main) calc(h + 90) c t);
--checker-background: #202a31;
--checker-background-cross: #29343c;
--panel: #182129; --color-background: hct(from var(--brand-main) h 15 6);
--foreground: #e8eef2; --color-background-muted: hct(from var(--brand-main) h 15 10);
--muted: #91a0ac; --color-panel: hct(from var(--brand-main) h 12 8);
--line: #33414c; --color-checker-main: hct(from var(--brand-main) h 12 10);
--color-checker-alt: hct(from var(--brand-main) h 14 14);
--blue: #54a2ff; --color-border: hct(from var(--brand-main) h 15 25);
--cyan: #00a8c7;
--amber: #bd7411; --color-text: hct(from var(--brand-main) h 25 90);
--success: #25a96a; --color-text-muted: hct(from var(--brand-main) h 22 70);
--danger: #ff7479; --color-text-accent: hct(from var(--brand-alt) h 25 90);
--color-text-accent-muted: hct(from var(--brand-alt) h 22 70);
--color-main: hct(from var(--brand-main) h 60 50);
--color-accent: hct(from var(--brand-alt) h 60 50);
--color-success: hct(160 65 55);
--color-warning: hct(80 65 55);
--color-danger: hct(30 70 55);
--color-info: hct(340 65 55);
--color-main-tint: hct(from var(--brand-main) h 45 57);
--color-accent-tint: hct(from var(--brand-alt) h 45 57);
--color-success-tint: hct(160 50 60);
--color-warning-tint: hct(80 50 60);
--color-danger-tint: hct(30 50 60);
--color-info-tint: hct(340 50 60);
} }
} }
web/src/routes/preview/demo/+page.svelte
+1 -1
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import Badge from "$lib/components/kit/Badge.svelte";
import ColorField from "$lib/components/kit/ColorField.svelte"; import ColorField from "$lib/components/kit/ColorField.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte"; import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import FieldGrid from "$lib/components/kit/FieldGrid.svelte"; import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
@@ -14,6 +13,7 @@
import SliderField from "$lib/components/kit/SliderField.svelte"; import SliderField from "$lib/components/kit/SliderField.svelte";
import StepCard from "$lib/components/kit/StepCard.svelte"; import StepCard from "$lib/components/kit/StepCard.svelte";
import ToggleRow from "$lib/components/kit/ToggleRow.svelte"; import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
import Badge from "$lib/components/kit/ui/Badge.svelte";
import { import {
ChevronDown, ChevronDown,
Plus, Plus,
web/src/routes/preview/kit/+page.svelte
+1 -1
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import Badge from "$lib/components/kit/Badge.svelte";
import Button from "$lib/components/kit/Button.svelte"; import Button from "$lib/components/kit/Button.svelte";
import CheckboxField from "$lib/components/kit/CheckboxField.svelte"; import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte"; import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
@@ -23,6 +22,7 @@
import TextField from "$lib/components/kit/TextField.svelte"; import TextField from "$lib/components/kit/TextField.svelte";
import Toggle from "$lib/components/kit/Toggle.svelte"; import Toggle from "$lib/components/kit/Toggle.svelte";
import ToolCard from "$lib/components/kit/ToolCard.svelte"; import ToolCard from "$lib/components/kit/ToolCard.svelte";
import Badge from "$lib/components/kit/ui/Badge.svelte";
import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte"; import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
let mode = $state("preview"); let mode = $state("preview");
web/src/routes/preview/tools/[id]/SettingsPanel.svelte
+7 -7
View File
@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { getTool } from "$lib/registry";
import Panel from "$lib/components/kit/Panel.svelte";
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
import StepCard from "$lib/components/kit/StepCard.svelte";
import Badge from "$lib/components/kit/Badge.svelte";
import SelectField from "$lib/components/kit/SelectField.svelte";
import Button from "$lib/components/kit/Button.svelte"; import Button from "$lib/components/kit/Button.svelte";
import EmptyState from "$lib/components/kit/EmptyState.svelte"; import EmptyState from "$lib/components/kit/EmptyState.svelte";
import Panel from "$lib/components/kit/Panel.svelte";
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
import SelectField from "$lib/components/kit/SelectField.svelte";
import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
import StepCard from "$lib/components/kit/StepCard.svelte";
import Badge from "$lib/components/kit/ui/Badge.svelte";
import { getTool } from "$lib/registry";
import ParamControl from "./ParamControl.svelte"; import ParamControl from "./ParamControl.svelte";
type ParamValue = string | number | boolean; type ParamValue = string | number | boolean;