fix: update some styles

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,

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%;

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;

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();
 

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;
 	}

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";