From 191ca71553187b45efb6bc26fb278a1e10b93aeb Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 1 Sep 2026 20:45:20 +0500
Subject: [PATCH] fix: update some styles

---
 web/src/lib/components/kit/PreviewTile.svelte        | 10 +++++-----
 .../lib/components/kit/{ => layout}/PageGrid.svelte  |  2 +-
 web/src/{app.css => old.css}                         |  0
 web/src/{lib/styles/design2.css => preview.css}      |  8 ++++++++
 web/src/routes/(old)/+layout.svelte                  | 12 ++++++------
 web/src/routes/preview/+layout.svelte                |  6 +++---
 web/src/routes/preview/demo/+page.svelte             |  2 +-
 7 files changed, 24 insertions(+), 16 deletions(-)
 rename web/src/lib/components/kit/{ => layout}/PageGrid.svelte (89%)
 rename web/src/{app.css => old.css} (100%)
 rename web/src/{lib/styles/design2.css => preview.css} (94%)

diff --git a/web/src/lib/components/kit/PreviewTile.svelte b/web/src/lib/components/kit/PreviewTile.svelte
index d78170b..04570b7 100644
--- a/web/src/lib/components/kit/PreviewTile.svelte
+++ b/web/src/lib/components/kit/PreviewTile.svelte
@@ -37,12 +37,12 @@
 		min-height: clamp(300px, 22vw, 430px);
 		overflow: hidden;
 		aspect-ratio: 1.35;
-		background-color: #e4e8eb;
+		background-color: var(--checker-background);
 		background-image:
-			linear-gradient(45deg, #d2d8dc 25%, #0000 25%),
-			linear-gradient(-45deg, #d2d8dc 25%, #0000 25%),
-			linear-gradient(45deg, #0000 75%, #d2d8dc 75%),
-			linear-gradient(-45deg, #0000 75%, #d2d8dc 75%);
+			linear-gradient(45deg, var(--checker-background-cross) 25%, #0000 25%),
+			linear-gradient(-45deg, var(--checker-background-cross) 25%, #0000 25%),
+			linear-gradient(45deg, #0000 75%, var(--checker-background-cross) 75%),
+			linear-gradient(-45deg, #0000 75%, var(--checker-background-cross) 75%);
 		background-position:
 			0 0,
 			0 7px,
diff --git a/web/src/lib/components/kit/PageGrid.svelte b/web/src/lib/components/kit/layout/PageGrid.svelte
similarity index 89%
rename from web/src/lib/components/kit/PageGrid.svelte
rename to web/src/lib/components/kit/layout/PageGrid.svelte
index 13d4831..a258e30 100644
--- a/web/src/lib/components/kit/PageGrid.svelte
+++ b/web/src/lib/components/kit/layout/PageGrid.svelte
@@ -17,7 +17,7 @@
 <style>
 	.page-grid {
 		display: grid;
-		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
+		grid-template-columns: repeat(auto-fit, minmax(calc(50% - 28px), 1fr));
 		align-items: start;
 		gap: 56px;
 		width: 100%;
diff --git a/web/src/app.css b/web/src/old.css
similarity index 100%
rename from web/src/app.css
rename to web/src/old.css
diff --git a/web/src/lib/styles/design2.css b/web/src/preview.css
similarity index 94%
rename from web/src/lib/styles/design2.css
rename to web/src/preview.css
index 9945977..dd34ce6 100644
--- a/web/src/lib/styles/design2.css
+++ b/web/src/preview.css
@@ -105,6 +105,10 @@
 		--font-mono: "IBM Plex Mono", monospace;
 
 		--background: #eef1f4;
+		--background-muted: #dce2e7;
+		--checker-background: #e4e8eb;
+		--checker-background-cross: #d2d8dc;
+
 		--panel: #f8fafb;
 		--foreground: #17212b;
 		--muted: #6d7883;
@@ -122,6 +126,10 @@
 
 	[data-theme="dark"] {
 		--background: #11171d;
+		--background-muted: #1e2a3447;
+		--checker-background: #202a31;
+		--checker-background-cross: #29343c;
+
 		--panel: #182129;
 		--foreground: #e8eef2;
 		--muted: #91a0ac;
diff --git a/web/src/routes/(old)/+layout.svelte b/web/src/routes/(old)/+layout.svelte
index 989c3a9..3694e1b 100644
--- a/web/src/routes/(old)/+layout.svelte
+++ b/web/src/routes/(old)/+layout.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import "../../app.css";
-	import favicon from "$lib/assets/favicon.svg";
-	import { onMount } from "svelte";
 	import { resolve } from "$app/paths";
-	import { getLocale, initLocale, setLocale } from "$lib/i18n/locale.svelte";
-	import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
-	import { t } from "$lib/i18n/t";
+	import favicon from "$lib/assets/favicon.svg";
 	import { LOCALES, type Locale } from "$lib/i18n/dict";
+	import { getLocale, initLocale, setLocale } from "$lib/i18n/locale.svelte";
+	import { t } from "$lib/i18n/t";
+	import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
+	import { onMount } from "svelte";
+	import "../../old.css";
 
 	let { children } = $props();
 
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index fd5b7fc..645c3d7 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/web/src/routes/preview/+layout.svelte
@@ -2,8 +2,8 @@
 	import { page } from "$app/state";
 	import Footer from "$lib/components/kit/Footer.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
-	import "$lib/styles/design2.css";
 	import type { Snippet } from "svelte";
+	import "../../preview.css";
 
 	interface Props {
 		children: Snippet;
@@ -72,8 +72,8 @@
 	main {
 		background-color: var(--background);
 		background-image:
-			linear-gradient(#dce2e7 1px, #0000 1px),
-			linear-gradient(90deg, #dce2e7 1px, #0000 1px);
+			linear-gradient(var(--background-muted) 1px, #0000 1px),
+			linear-gradient(90deg, var(--background-muted) 1px, #0000 1px);
 		background-size: 32px 32px;
 		min-height: 100vh;
 	}
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index 70a3bc2..bc17d52 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -4,8 +4,8 @@
 	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
 	import IconButton from "$lib/components/kit/IconButton.svelte";
+	import PageGrid from "$lib/components/kit/layout/PageGrid.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import PageGrid from "$lib/components/kit/PageGrid.svelte";
 	import PipelineFooter from "$lib/components/kit/PipelineFooter.svelte";
 	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";