Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: fix lint css vars rules

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-08 07:02:54 +05:00
parent 5a4fbe7ac6
commit 2d24f51fd5
32 changed files with 270 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/CatalogGroup.svelte
+11 -11
View File
@@ -23,29 +23,29 @@
.catalog-group { .catalog-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--space-xl);
} }
.group-title { .group-title {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: var(--space-xl);
padding-bottom: 0.5rem; padding-bottom: var(--space-m);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
.group-title span { .group-title span {
font: 12px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.14em; letter-spacing: var(--space-text-xl);
color: var(--foreground); color: var(--color-text);
} }
.group-title i { .group-title i {
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
font-style: normal; font-style: normal;
letter-spacing: 0.08em; letter-spacing: var(--space-text-l);
color: var(--muted); color: var(--color-text-muted);
} }
.tool-cards { .tool-cards {
display: grid; display: grid;
gap: 10px; gap: var(--space-m);
} }
</style> </style>
web/src/lib/components/kit/CatalogHeader.svelte
+16 -16
View File
@@ -25,26 +25,26 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
gap: 1.5rem; gap: var(--space-xxl);
flex-wrap: wrap; flex-wrap: wrap;
} }
.eyebrow { .eyebrow {
font: 12px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.18em; letter-spacing: var(--space-text-xl);
color: var(--muted); color: var(--color-text-muted);
margin-bottom: 0.5rem; margin-bottom: var(--space-m);
} }
h1 { h1 {
margin: 0; margin: 0;
font-size: 2rem; font-size: var(--font-size-2xl);
font-weight: 700; font-weight: 700;
color: var(--foreground); color: var(--color-text);
} }
p { p {
margin: 0.5rem 0 0; margin: var(--space-m) 0 0;
max-width: 56ch; max-width: 56ch;
color: var(--muted); color: var(--color-text-muted);
font-size: 0.95rem; font-size: var(--font-size-m);
} }
.catalog-total { .catalog-total {
display: flex; display: flex;
@@ -53,14 +53,14 @@
line-height: 1; line-height: 1;
} }
.catalog-total b { .catalog-total b {
font: 700 2rem var(--font-mono); font: 700 var(--font-size-2xl) var(--font-mono);
color: var(--foreground); color: var(--color-text);
} }
.catalog-total span { .catalog-total span {
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.08em; letter-spacing: var(--space-text-l);
color: var(--muted); color: var(--color-text-muted);
text-align: right; text-align: right;
margin-top: 0.35rem; margin-top: var(--space-s);
} }
</style> </style>
web/src/lib/components/kit/CatalogToolbar.svelte
+23 -23
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Search, Filter } from "@lucide/svelte"; import { Filter, Search } from "@lucide/svelte";
interface Props { interface Props {
query: string; query: string;
@@ -46,50 +46,50 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: var(--space-xl);
flex-wrap: wrap; flex-wrap: wrap;
padding: 1.25rem 0; padding: var(--space-xl) 0;
} }
.catalog-search { .catalog-search {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-m);
padding: 0.5rem 0.75rem; padding: var(--space-m) var(--space-l);
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
background: var(--panel); background: var(--color-panel);
color: var(--muted); color: var(--color-text-muted);
} }
.catalog-search input { .catalog-search input {
border: none; border: none;
background: transparent; background: transparent;
outline: none; outline: none;
color: var(--foreground); color: var(--color-text);
font: 12px var(--font-mono); font: var(--font-size-s) var(--font-mono);
} }
.catalog-search input::placeholder { .catalog-search input::placeholder {
color: var(--muted); color: var(--color-text-muted);
} }
.catalog-filters { .catalog-filters {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: var(--space-s);
flex-wrap: wrap; flex-wrap: wrap;
color: var(--muted); color: var(--color-text-muted);
} }
.catalog-filters button { .catalog-filters button {
border: 1px solid var(--line); border: 1px solid var(--color-border);
background: transparent; background: transparent;
color: var(--muted); color: var(--color-text-muted);
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.06em; letter-spacing: var(--space-text-m);
padding: 0.4rem 0.6rem; padding: var(--space-s) var(--space-m);
border-radius: var(--radius); border-radius: var(--radius-m);
cursor: pointer; cursor: pointer;
} }
.catalog-filters button.active { .catalog-filters button.active {
background: var(--blue); background: var(--color-main);
color: #fff; color: var(--color-background);
border-color: var(--blue); border-color: var(--color-main);
} }
</style> </style>
web/src/lib/components/kit/CheckerCanvas.svelte
+4 -4
View File
@@ -20,13 +20,13 @@
display: grid; display: grid;
place-items: center; place-items: center;
overflow: hidden; overflow: hidden;
background-color: #0b0f14; background-color: var(--color-text);
background-image: background-image:
linear-gradient(45deg, #1a2129 25%, transparent 25%), linear-gradient(45deg, #1a2129 25%, transparent 25%),
linear-gradient(-45deg, #1a2129 25%, transparent 25%), linear-gradient(-45deg, #1a2129 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #1a2129 75%), linear-gradient(45deg, transparent 75%, #1a2129 75%),
linear-gradient(-45deg, transparent 75%, #1a2129 75%); linear-gradient(-45deg, transparent 75%, #1a2129 75%);
background-size: 20px 20px; background-size: var(--space-xl) var(--space-xl);
background-position: background-position:
0 0, 0 0,
0 10px, 0 10px,
@@ -35,10 +35,10 @@
} }
.checker-canvas--sm { .checker-canvas--sm {
min-height: 180px; min-height: var(--size-preview-canvas-min-height-s);
} }
.checker-canvas--large { .checker-canvas--large {
min-height: 360px; min-height: var(--size-preview-canvas-min-height-l);
} }
</style> </style>
web/src/lib/components/kit/CodeBlock.svelte
+10 -10
View File
@@ -24,27 +24,27 @@
<style> <style>
.code-block { .code-block {
position: relative; position: relative;
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
background: var(--background); background: var(--color-background);
padding: 0.6rem 0.8rem; padding: var(--space-m) var(--space-l);
} }
.code-lang { .code-lang {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: var(--font-size-s);
text-transform: uppercase; text-transform: uppercase;
color: var(--muted); color: var(--color-text-muted);
} }
.code-pre { .code-pre {
margin: 0; margin: 0;
overflow: auto; overflow: auto;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: var(--font-size-s);
color: var(--foreground); color: var(--color-text);
} }
.code-copy { .code-copy {
position: absolute; position: absolute;
top: 0.4rem; top: var(--space-s);
right: 0.4rem; right: var(--space-s);
} }
</style> </style>
web/src/lib/components/kit/Dropzone.svelte
+15 -15
View File
@@ -63,32 +63,32 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: var(--space-m);
min-height: 220px; min-height: var(--size-panel-min-height);
padding: 2rem; padding: var(--space-xxxl);
border: 1px dashed var(--line); border: 1px dashed var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
color: var(--muted); color: var(--color-text-muted);
background: var(--background); background: var(--color-background);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
transition: transition:
border-color 0.15s ease, border-color var(--duration-m) ease,
background 0.15s ease; background var(--duration-m) ease;
} }
.dropzone:hover, .dropzone:hover,
.dropzone:focus-visible, .dropzone:focus-visible,
.dropzone.dragging { .dropzone.dragging {
border-color: var(--blue); border-color: var(--color-main);
color: var(--foreground); color: var(--color-text);
outline: none; outline: none;
} }
.dz-title { .dz-title {
font: 600 0.9rem var(--font-mono); font: 600 var(--font-size-m) var(--font-mono);
color: var(--foreground); color: var(--color-text);
} }
.dz-sub { .dz-sub {
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.04em; letter-spacing: var(--space-text-m);
} }
</style> </style>
web/src/lib/components/kit/EmptyState.svelte
+7 -7
View File
@@ -23,20 +23,20 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-m);
padding: 2rem 1rem; padding: var(--space-xxxl) var(--space-xl);
text-align: center; text-align: center;
color: var(--muted); color: var(--color-text-muted);
} }
.empty-icon { .empty-icon {
color: var(--muted); color: var(--color-text-muted);
} }
.empty-title { .empty-title {
color: var(--foreground); color: var(--color-text);
font-size: 0.95rem; font-size: var(--font-size-m);
} }
.empty-desc { .empty-desc {
font-size: 0.8rem; font-size: var(--font-size-s);
max-width: 32ch; max-width: 32ch;
} }
</style> </style>
web/src/lib/components/kit/ImageCard.svelte
+6 -6
View File
@@ -18,15 +18,15 @@
.image-card { .image-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.4rem; gap: var(--space-s);
margin: 0; margin: 0;
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
padding: 0.6rem; padding: var(--space-m);
background: var(--panel); background: var(--color-panel);
} }
.image-canvas { .image-canvas {
border-radius: var(--radius); border-radius: var(--radius-m);
overflow: hidden; overflow: hidden;
} }
</style> </style>
web/src/lib/components/kit/MetaList.svelte
+3 -3
View File
@@ -15,10 +15,10 @@
<style> <style>
.meta-list { .meta-list {
border-top: 1px solid var(--line); border-top: 1px solid var(--color-border);
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 8px; gap: var(--space-m);
padding-top: 14px; padding-top: var(--space-l);
display: grid; display: grid;
} }
</style> </style>
web/src/lib/components/kit/MetaRow.svelte
+6 -6
View File
@@ -13,19 +13,19 @@
<style> <style>
.meta-row { .meta-row {
gap: 5px; gap: var(--space-s);
display: grid; display: grid;
} }
.meta-caption { .meta-caption {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 9px; font-size: var(--font-size-s);
color: var(--muted); color: var(--color-text-muted);
line-height: normal; line-height: normal;
} }
.meta-value { .meta-value {
margin-top: 5px; margin-top: var(--space-s);
line-height: normal; line-height: normal;
font: 11px var(--font-mono); font: var(--font-size-s) var(--font-mono);
color: var(--foreground); color: var(--color-text);
} }
</style> </style>
web/src/lib/components/kit/PanelHeading.svelte
+6 -6
View File
@@ -23,18 +23,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: var(--space-xl);
padding: 0.75rem 1rem; padding: var(--space-l) var(--space-xl);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
.heading-text { .heading-text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: var(--space-s);
} }
.heading-title { .heading-title {
font-size: 0.95rem; font-size: var(--font-size-m);
font-weight: 600; font-weight: 600;
color: var(--foreground); color: var(--color-text);
} }
</style> </style>
web/src/lib/components/kit/SchemaPreview.svelte
+1 -1
View File
@@ -139,7 +139,7 @@
.meta { .meta {
margin-top: var(--space-l); margin-top: var(--space-l);
} }
@media (max-width: var(--bp-tablet)) { @media (--bp-tablet) {
.pair { .pair {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
web/src/lib/components/kit/SchemaToolView.svelte
+1 -1
View File
@@ -293,7 +293,7 @@
.no-schema { .no-schema {
font: var(--font-size-s) var(--font-mono); font: var(--font-size-s) var(--font-mono);
} }
@media (max-width: var(--bp-tablet)) { @media (--bp-tablet) {
.workspace { .workspace {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
web/src/lib/components/kit/SettingGroup.svelte
+4 -4
View File
@@ -19,13 +19,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: var(--space-xl);
padding: 0.6rem 1rem; padding: var(--space-m) var(--space-xl);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--color-border);
} }
.setting-control { .setting-control {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-m);
} }
</style> </style>
web/src/lib/components/kit/SettingsFooter.svelte
+3 -3
View File
@@ -14,8 +14,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 0.5rem; gap: var(--space-m);
padding: 0.75rem 1rem; padding: var(--space-l) var(--space-xl);
border-top: 1px solid var(--line); border-top: 1px solid var(--color-border);
} }
</style> </style>
web/src/lib/components/kit/StatusDot.svelte
+3 -3
View File
@@ -2,9 +2,9 @@
<style> <style>
.status-dot { .status-dot {
width: 6px; width: var(--space-s);
height: 6px; height: var(--space-s);
border-radius: 50%; border-radius: 50%;
background-color: var(--success2); background-color: var(--color-success);
} }
</style> </style>
web/src/lib/components/kit/StatusLine.svelte
+1 -1
View File
@@ -18,6 +18,6 @@
.status-line { .status-line {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: var(--space-s);
} }
</style> </style>
web/src/lib/components/kit/StepCard.svelte
+21 -21
View File
@@ -46,44 +46,44 @@
.step-card { .step-card {
display: grid; display: grid;
grid-template-columns: 46px 20px 1fr; grid-template-columns: 46px 20px 1fr;
min-height: 138px; min-height: var(--size-step-min-height);
border: 1px solid var(--line); border: 1px solid var(--color-border);
background: var(--panel); background: var(--color-panel);
} }
.step-index { .step-index {
font: 11px var(--font-mono); font: var(--font-size-s) var(--font-mono);
color: var(--blue); color: var(--color-main);
padding: 17px 0 0px 15px; padding: var(--space-xl) 0 0px var(--space-xl);
} }
.step-body { .step-body {
padding: 15px 18px 18px; padding: var(--space-xl) var(--space-xl) var(--space-xl);
} }
.step-heading { .step-heading {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 15px; gap: var(--space-xl);
border-color: var(--line); border-color: var(--color-border);
} }
.step-type { .step-type {
color: var(--muted); color: var(--color-text-muted);
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.12em; letter-spacing: var(--space-text-xl);
} }
.step-title { .step-title {
margin: 5px 0 18px; margin: var(--space-s) 0 var(--space-xl);
font: 600 15px var(--font-mono); font: 600 var(--font-size-m) var(--font-mono);
color: var(--foreground); color: var(--color-text);
} }
.step-tools { .step-tools {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 13px; gap: var(--space-l);
} }
.step-remove { .step-remove {
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--muted); color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
line-height: inherit; line-height: inherit;
& :global(svg) { & :global(svg) {
@@ -92,13 +92,13 @@
} }
} }
.step-card :global(.drag) { .step-card :global(.drag) {
margin-top: 17px; margin-top: var(--space-xl);
color: var(--line); color: var(--color-border);
} }
.step-remove:hover { .step-remove:hover {
color: var(--danger); color: var(--color-danger);
} }
.step-body > :not(.step-heading) { .step-body > :not(.step-heading) {
padding: 0.75rem; padding: var(--space-l);
} }
</style> </style>
web/src/lib/components/kit/ToolCard.svelte
+20 -20
View File
@@ -29,46 +29,46 @@
<style> <style>
.tool-card { .tool-card {
display: grid; display: grid;
grid-template-columns: 42px minmax(0, 1fr) 24px 18px; grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) 24px 18px;
align-items: center; align-items: center;
gap: 14px; gap: var(--space-l);
min-height: 106px; min-height: var(--size-tool-min-height);
padding: 16px; padding: var(--space-xl);
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
background: var(--panel); background: var(--color-panel);
color: var(--foreground); color: var(--color-text);
text-decoration: none; text-decoration: none;
} }
.tool-card:hover { .tool-card:hover {
border-color: var(--blue); border-color: var(--color-main);
} }
.tool-icon { .tool-icon {
width: 42px; width: var(--size-tool-icon);
height: 42px; height: var(--size-tool-icon);
display: grid; display: grid;
place-items: center; place-items: center;
background: color-mix(in srgb, var(--blue) 12%, transparent); background: var(--color-main-soft);
color: var(--blue); color: var(--color-main);
border-radius: var(--radius); border-radius: var(--radius-m);
} }
.tool-copy { .tool-copy {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: var(--space-s);
min-width: 0; min-width: 0;
} }
.tool-copy strong { .tool-copy strong {
font: 600 13px var(--font-mono); font: 600 var(--font-size-s) var(--font-mono);
color: var(--foreground); color: var(--color-text);
} }
.tool-copy span { .tool-copy span {
font: 12px/1.5 var(--font-mono); font: 12px/1.5 var(--font-mono);
color: var(--muted); color: var(--color-text-muted);
} }
.tool-index { .tool-index {
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
color: var(--muted); color: var(--color-text-muted);
align-self: start; align-self: start;
} }
</style> </style>
web/src/lib/components/kit/fields/CheckboxField.svelte
+4 -4
View File
@@ -21,12 +21,12 @@
.checkbox-field { .checkbox-field {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: var(--space-m);
font-size: 0.85rem; font-size: var(--font-size-m);
color: var(--foreground); color: var(--color-text);
cursor: pointer; cursor: pointer;
} }
.checkbox-field input { .checkbox-field input {
accent-color: var(--blue); accent-color: var(--color-main);
} }
</style> </style>
web/src/lib/components/kit/fields/ColorField.svelte
+16 -16
View File
@@ -39,42 +39,42 @@
<style> <style>
.control-block :global(.icon) { .control-block :global(.icon) {
color: var(--foreground); color: var(--color-text);
} }
.control-title { .control-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.08em; letter-spacing: var(--space-text-l);
color: var(--muted); color: var(--color-text-muted);
margin-bottom: 8px; margin-bottom: var(--space-m);
} }
.color-field { .color-field {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: var(--space-m);
padding-left: 8px; padding-left: var(--space-m);
padding-right: 8px; padding-right: var(--space-m);
height: 32px; height: var(--space-xxxl);
border: 1px solid var(--line); border: 1px solid var(--color-border);
} }
.swatch { .swatch {
width: 14px; width: var(--space-l);
height: 14px; height: var(--space-l);
border: 1px solid var(--line); border: 1px solid var(--color-border);
flex: none; flex: none;
} }
.color-field input { .color-field input {
min-width: 0; min-width: 0;
color: var(--foreground); color: var(--color-text);
font: 11px var(--font-mono); font: var(--font-size-s) var(--font-mono);
background: 0 0; background: 0 0;
border: 0; border: 0;
outline: 0; outline: 0;
flex: 1; flex: 1;
} }
.color-field :global(svg) { .color-field :global(svg) {
color: var(--muted); color: var(--color-text-muted);
flex: none; flex: none;
} }
</style> </style>
web/src/lib/components/kit/fields/SelectField.svelte
+6 -6
View File
@@ -32,11 +32,11 @@
.select-field { .select-field {
width: 100%; width: 100%;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: var(--font-size-s);
color: var(--foreground); color: var(--color-text);
background: var(--background); background: var(--color-background);
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
padding: 0.35rem 0.5rem; padding: var(--space-s) var(--space-m);
} }
</style> </style>
web/src/lib/components/kit/fields/SliderField.svelte
+8 -8
View File
@@ -33,19 +33,19 @@
label { label {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
letter-spacing: 0.08em; letter-spacing: var(--space-text-l);
color: var(--muted); color: var(--color-text-muted);
margin-bottom: 8px; margin-bottom: var(--space-m);
} }
output { output {
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
color: var(--foreground); color: var(--color-text);
} }
input[type="range"] { input[type="range"] {
color: var(--foreground); color: var(--color-text);
line-height: inherit; line-height: inherit;
width: 100%; width: 100%;
accent-color: var(--blue); accent-color: var(--color-main);
} }
</style> </style>
web/src/lib/components/kit/fields/TextField.svelte
+7 -7
View File
@@ -36,15 +36,15 @@
.text-field { .text-field {
width: 100%; width: 100%;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: var(--font-size-s);
color: var(--foreground); color: var(--color-text);
background: var(--background); background: var(--color-background);
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius-m);
padding: 0.35rem 0.5rem; padding: var(--space-s) var(--space-m);
} }
.text-field:focus { .text-field:focus {
outline: none; outline: none;
border-color: var(--blue); border-color: var(--color-main);
} }
</style> </style>
web/src/lib/components/kit/ui/LangToggle.svelte
+7 -7
View File
@@ -23,22 +23,22 @@
.lang { .lang {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--line); border: 1px solid var(--color-border);
} }
.lang-btn { .lang-btn {
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--muted); color: var(--color-text-muted);
font: 10px var(--font-mono); font: var(--font-size-s) var(--font-mono);
padding: 6px 9px; padding: var(--space-s) var(--space-m);
cursor: pointer; cursor: pointer;
} }
.lang-div { .lang-div {
color: var(--foreground); color: var(--color-text);
font-family: var(--font-sans); font-family: var(--font-sans);
} }
.lang-btn.active { .lang-btn.active {
background: var(--foreground); background: var(--color-text);
color: var(--background); color: var(--color-background);
} }
</style> </style>
web/src/lib/components/kit/ui/Toggle.svelte
+7 -7
View File
@@ -27,19 +27,19 @@
<style> <style>
.toggle { .toggle {
position: relative; position: relative;
width: 32px; width: var(--space-xxxl);
height: 18px; height: var(--space-xl);
border: 1px solid var(--line); border: 1px solid var(--color-border);
border-radius: 0; border-radius: 0;
background: var(--background); background: var(--color-background);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
} }
.toggle.on { .toggle.on {
background: var(--blue); background: var(--color-main);
border-color: var(--blue); border-color: var(--color-main);
} }
.toggle-knob { .toggle-knob {
transition: transform 0.12s ease; transition: transform var(--duration-s) ease;
} }
</style> </style>
web/src/preview.css
+10
View File
@@ -138,10 +138,14 @@
--space-brand: 32px; --space-brand: 32px;
--space-page-top: 48px;
--space-page-bottom: 72px;
--space-text-s: 0; --space-text-s: 0;
--space-text-m: 0.04em; --space-text-m: 0.04em;
--space-text-l: 0.08em; --space-text-l: 0.08em;
--space-text-xl: 0.12em; --space-text-xl: 0.12em;
--space-text-2xl: 0.18em;
--size-border: 1px; --size-border: 1px;
--size-border-thick: 2px; --size-border-thick: 2px;
@@ -150,6 +154,12 @@
--size-preview-canvas-min-height-l: 360px; --size-preview-canvas-min-height-l: 360px;
--size-panel-min-height: 220px; --size-panel-min-height: 220px;
--size-tool-icon: 42px;
--size-tool-min-height: 106px;
--size-step-min-height: 138px;
--size-content-max: 880px;
--size-content-max-wide: 1680px;
--font-size-s: 12px; --font-size-s: 12px;
--font-size-m: 14px; --font-size-m: 14px;
--font-size-l: 16px; --font-size-l: 16px;
web/src/routes/preview/+layout.svelte
+3 -14
View File
@@ -32,7 +32,6 @@
}); });
let crumb = $derived(toCrumb(page.url.pathname)); let crumb = $derived(toCrumb(page.url.pathname));
let status = $derived(toStatus(page.url.pathname));
const CRUMB: Record<string, string> = { const CRUMB: Record<string, string> = {
"/preview/list-tools": "CATALOG", "/preview/list-tools": "CATALOG",
@@ -40,12 +39,6 @@
"/preview/tools/remove-background-png": "BACKGROUND REMOVER", "/preview/tools/remove-background-png": "BACKGROUND REMOVER",
}; };
const STATUS: Record<string, string> = {
"/preview/list-tools": "LOCAL MODE / READY",
"/preview/tools/linear-gradient-png": "LIVE PREVIEW",
"/preview/tools/remove-background-png": "AUTO PROCESSING",
};
function toCrumb(path: string): string { function toCrumb(path: string): string {
return ( return (
"/ " + "/ " +
@@ -54,10 +47,6 @@
"PREVIEW") "PREVIEW")
); );
} }
function toStatus(path: string): string {
return STATUS[path] ?? "AUTO PIPELINE";
}
</script> </script>
<main class="preview-root" data-theme={theme}> <main class="preview-root" data-theme={theme}>
@@ -70,9 +59,9 @@
main { main {
background-color: var(--color-background); background-color: var(--color-background);
background-image: background-image:
linear-gradient(var(--background-muted) 1px, #0000 1px), linear-gradient(var(--color-background-muted) 1px, #0000 1px),
linear-gradient(90deg, var(--background-muted) 1px, #0000 1px); linear-gradient(90deg, var(--color-background-muted) 1px, #0000 1px);
background-size: 32px 32px; background-size: var(--space-xxxl) var(--space-xxxl);
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
web/src/routes/preview/+page.svelte
+15 -15
View File
@@ -60,40 +60,40 @@
<style> <style>
.workspace { .workspace {
max-width: 880px; max-width: var(--size-content-max);
margin: 0 auto; margin: 0 auto;
padding: 2.5rem 1.25rem 4rem; padding: var(--space-page-top) var(--space-xl) var(--space-page-bottom);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: var(--space-xxl);
} }
.ws-head { .ws-head {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: var(--space-m);
} }
.ws-eyebrow { .ws-eyebrow {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: var(--font-size-s);
letter-spacing: 0.18em; letter-spacing: var(--space-text-2xl);
color: var(--muted); color: var(--color-text-muted);
} }
.ws-title { .ws-title {
margin: 0; margin: 0;
font-size: 2rem; font-size: var(--font-size-2xl);
font-weight: 700; font-weight: 700;
color: var(--foreground); color: var(--color-text);
} }
.ws-lede { .ws-lede {
margin: 0; margin: 0;
max-width: 56ch; max-width: 56ch;
color: var(--muted); color: var(--color-text-muted);
font-size: 0.95rem; font-size: var(--font-size-l);
} }
.ws-search { .ws-search {
display: flex; display: flex;
gap: 0.5rem; gap: var(--space-m);
padding: 0.75rem 1rem; padding: var(--space-l) var(--space-xl);
align-items: center; align-items: center;
} }
.ws-field { .ws-field {
@@ -102,7 +102,7 @@
.ws-results { .ws-results {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem; gap: var(--space-l);
padding: 0.5rem 1rem 1rem; padding: var(--space-m) var(--space-xl);
} }
</style> </style>
web/src/routes/preview/kit/+page.svelte
+11 -9
View File
@@ -192,10 +192,12 @@
.showcase { .showcase {
max-width: none; max-width: none;
margin: 0 auto; margin: 0 auto;
padding: 2.5rem clamp(24px, 4vw, 72px) 4rem; padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.25rem; gap: var(--space-xl);
} }
.showcase-head { .showcase-head {
display: flex; display: flex;
@@ -204,9 +206,9 @@
} }
.showcase-eyebrow { .showcase-eyebrow {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: var(--font-size-s);
letter-spacing: 0.18em; letter-spacing: var(--space-text-2xl);
color: var(--muted); color: var(--color-text-muted);
} }
.stack { .stack {
display: flex; display: flex;
@@ -215,13 +217,13 @@
.tool-grid { .tool-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem; gap: var(--space-l);
padding: 0.75rem 1rem; padding: var(--space-l) var(--space-xl);
} }
.preview-grid { .preview-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem; gap: var(--space-l);
padding: 0.75rem 1rem; padding: var(--space-l) var(--space-xl);
} }
</style> </style>
web/src/routes/preview/list-tools/+page.svelte
+11 -9
View File
@@ -49,25 +49,27 @@
<style> <style>
.catalog-page { .catalog-page {
padding: 60px clamp(24px, 4vw, 72px) 72px; padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
} }
.catalog-groups { .catalog-groups {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 56px 28px; gap: var(--space-page-top) var(--space-xxl);
} }
.catalog-footer { .catalog-footer {
display: flex; display: flex;
gap: 1.5rem; gap: var(--space-xxl);
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 56px; margin-top: var(--space-page-top);
padding-top: 24px; padding-top: var(--space-xxl);
border-top: 1px solid var(--line); border-top: 1px solid var(--color-border);
font: 10px var(--font-mono); font: 10px var(--font-mono);
letter-spacing: 0.08em; letter-spacing: var(--space-text-l);
color: var(--muted); color: var(--color-text-muted);
} }
@media (max-width: 800px) { @media (--bp-tablet) {
.catalog-groups { .catalog-groups {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
web/src/routes/preview/tools/[id]/+page.svelte
+4 -2
View File
@@ -31,8 +31,10 @@
<style> <style>
.notfound { .notfound {
max-width: 1680px; max-width: var(--size-content-max-wide);
margin: 0 auto; margin: 0 auto;
padding: 48px clamp(24px, 4vw, 72px) 72px; padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
} }
</style> </style>