fix: update button component styles

This commit is contained in:
2026-09-02 17:22:47 +05:00
parent 4794523084
commit c590bdf91a
8 changed files with 90 additions and 82 deletions
+2 -2
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { TOOLS } 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 TextField from "$lib/components/kit/TextField.svelte";
import ToolCard from "$lib/components/kit/ToolCard.svelte";
import Button from "$lib/components/kit/Button.svelte";
import Button from "$lib/components/kit/ui/Button.svelte";
import { TOOLS } from "$lib/registry";
import { Search } from "@lucide/svelte";
let query = $state("");
+8 -6
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import Button from "$lib/components/kit/Button.svelte";
import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
@@ -23,6 +22,7 @@
import Toggle from "$lib/components/kit/Toggle.svelte";
import ToolCard from "$lib/components/kit/ToolCard.svelte";
import Badge from "$lib/components/kit/ui/Badge.svelte";
import Button from "$lib/components/kit/ui/Button.svelte";
import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
let mode = $state("preview");
@@ -63,7 +63,7 @@
<div class="stack">
<SettingGroup label="variants">
<Button onclick={() => {}}>Primary</Button>
<Button variant="ghost" onclick={() => {}}>Ghost</Button>
<Button variant="outline" onclick={() => {}}>Outline</Button>
<Button variant="accent" onclick={() => {}}>Accent</Button>
<Button variant="danger" onclick={() => {}}>Danger</Button>
</SettingGroup>
@@ -133,10 +133,12 @@
]}
/>
<SettingGroup label="tones">
<Badge>default</Badge>
<Badge tone="accent">accent</Badge>
<Badge tone="success">success</Badge>
<Badge tone="amber">amber</Badge>
<Badge label="default" />
<Badge tone="accent" label="accent" />
<Badge tone="success" label="success" />
<Badge tone="danger" label="default" />
<Badge tone="warning" label="warning" />
<Badge tone="info" label="info" />
</SettingGroup>
</div>
</Panel>
@@ -1,5 +1,4 @@
<script lang="ts">
import Button from "$lib/components/kit/Button.svelte";
import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
import Dropzone from "$lib/components/kit/Dropzone.svelte";
@@ -10,6 +9,7 @@
import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
import StatusLine from "$lib/components/kit/StatusLine.svelte";
import Button from "$lib/components/kit/ui/Button.svelte";
import type { PixelImage } from "$lib/core/types";
interface PreviewItem {
@@ -1,5 +1,4 @@
<script lang="ts">
import Button from "$lib/components/kit/Button.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";
@@ -7,6 +6,7 @@
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 Button from "$lib/components/kit/ui/Button.svelte";
import { getTool } from "$lib/registry";
import ParamControl from "./ParamControl.svelte";