refactor: update css vars lint rules and fix them

web/eslint-plugins/design-tokens/lists.js

@@ -6,14 +6,14 @@
 // Properties that accept a COLOR.
 // =====================================================================
 export const COLOR_PROPS =
-	/^(color|background|background-color|border|border-color|border-top|border-right|border-bottom|border-left|outline|outline-color|box-shadow|text-shadow|fill|stroke|fill-color|stroke-color|stop-color|flood-color|lighting-color|column-rule|column-rule-color|text-decoration|text-decoration-color|caret-color|accent-color|border-top-color|border-right-color|border-bottom-color|border-left-color)$/;
+	/^(color|background|background-color|background-image|border|border-color|border-top|border-right|border-bottom|border-left|outline|outline-color|box-shadow|text-shadow|fill|stroke|fill-color|stroke-color|stop-color|flood-color|lighting-color|column-rule|column-rule-color|text-decoration|text-decoration-color|caret-color|accent-color|border-top-color|border-right-color|border-bottom-color|border-left-color)$/;
 
 // =====================================================================
 // Properties that accept a SIZE (px/rem/em).
 // z-index is handled separately (it's an integer, not a length).
 // =====================================================================
 export const SIZE_PROPS =
-	/^(width|height|min-width|max-width|min-height|max-height|padding|padding-top|padding-right|padding-bottom|padding-left|margin|margin-top|margin-right|margin-bottom|margin-left|gap|column-gap|row-gap|top|right|bottom|left|inset|font-size|letter-spacing|word-spacing|line-height|border-radius|border-top-left-radius|border-top-right-radius|border-bottom-left-radius|border-bottom-right-radius|border-width|border-top-width|border-right-width|border-bottom-width|border-left-width|flex-basis|background-size|border-spacing)$/;
+	/^(width|height|min-width|max-width|min-height|max-height|padding|padding-top|padding-right|padding-bottom|padding-left|margin|margin-top|margin-right|margin-bottom|margin-left|gap|column-gap|row-gap|top|right|bottom|left|inset|font|font-size|letter-spacing|word-spacing|line-height|border-radius|border-top-left-radius|border-top-right-radius|border-bottom-left-radius|border-bottom-right-radius|border-width|border-top-width|border-right-width|border-bottom-width|border-left-width|flex-basis|background-size|background-position|border-spacing|grid-template-columns|grid-template-rows)$/;
 
 // =====================================================================
 // SHORTHAND properties that accept BOTH a color and a size. The browser

web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js

@@ -9,6 +9,7 @@ import {
 	DURATION_PROPS,
 	FORBIDDEN_DURATION_TOKEN,
 	FORBIDDEN_SIZE_TOKEN,
+	MIXED_PROPS,
 	SIZE_PROPS,
 } from "./lists.js";
 import { getStyleNodeLoc, getStyleRoot } from "./style-context.js";
@@ -125,13 +126,16 @@ export default {
 					// Sub-rule 2: sizes.
 					// Fire only on a real remaining px/rem/em token — percentages
 					// (width: 80%) and unitless values (line-height: 1.5) stay legal.
-					// Only legal absolute length is a single 1px border line.
-					if (SIZE_PROPS.test(prop)) {
+					// The only legal absolute length is a 0px reset line.
+					// MIXED_PROPS (border/outline shorthands) are checked for their
+					// SIZE half too — a border width must come from var(--size-*).
+					if (SIZE_PROPS.test(prop) || MIXED_PROPS.test(prop)) {
 						const withoutVars = stripVars(value);
-						const match = withoutVars.match(FORBIDDEN_SIZE_TOKEN);
-						if (match) {
+						const reported = new Set();
+						for (const match of withoutVars.matchAll(FORBIDDEN_SIZE_TOKEN)) {
 							const shown = match[0];
-							if (shown !== "1px" && shown !== "0px") {
+							if (shown !== "0px" && !reported.has(shown)) {
+								reported.add(shown);
 								report(decl, "hardcodedSize", { prop, value: shown });
 							}
 						}
@@ -150,12 +154,13 @@ export default {
 							)
 							.trim();
 						if (withoutKeywords !== "" && withoutKeywords !== "0") {
-							const match = value.match(COLOR_LITERAL);
-							if (match) {
-								report(decl, "hardcodedColor", {
-									prop,
-									value: match[0].trim(),
-								});
+							const reported = new Set();
+							for (const match of value.matchAll(COLOR_LITERAL)) {
+								const shown = match[0].trim();
+								if (!reported.has(shown)) {
+									reported.add(shown);
+									report(decl, "hardcodedColor", { prop, value: shown });
+								}
 							}
 						}
 					}

web/src/lib/components/kit/CatalogGroup.svelte

@@ -31,7 +31,7 @@
 		justify-content: space-between;
 		gap: var(--space-xl);
 		padding-bottom: var(--space-m);
-		border-bottom: 1px solid var(--color-border);
+		border-bottom: var(--size-border) solid var(--color-border);
 	}
 	.group-title span {
 		font: var(--font-size-s) var(--font-mono);

web/src/lib/components/kit/CatalogToolbar.svelte

@@ -55,7 +55,7 @@
 		align-items: center;
 		gap: var(--space-m);
 		padding: var(--space-m) var(--space-l);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-m);
 		background: var(--color-panel);
 		color: var(--color-text-muted);
@@ -78,7 +78,7 @@
 		color: var(--color-text-muted);
 	}
 	.catalog-filters button {
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		background: transparent;
 		color: var(--color-text-muted);
 		font: var(--font-size-s) var(--font-mono);

web/src/lib/components/kit/CheckerCanvas.svelte

@@ -22,16 +22,16 @@
 		overflow: hidden;
 		background-color: var(--color-text);
 		background-image:
-			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, var(--color-checker-main) 25%, transparent 25%),
+			linear-gradient(-45deg, var(--color-checker-main) 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, var(--color-checker-main) 75%),
+			linear-gradient(-45deg, transparent 75%, var(--color-checker-main) 75%);
 		background-size: var(--space-xl) var(--space-xl);
 		background-position:
 			0 0,
-			0 10px,
-			10px -10px,
-			-10px 0;
+			0 calc(var(--space-xl) / 2),
+			calc(var(--space-xl) / 2) calc(-1 * var(--space-xl) / 2),
+			calc(-1 * var(--space-xl) / 2) 0;
 	}
 
 	.checker-canvas--sm {

web/src/lib/components/kit/CodeBlock.svelte

@@ -24,7 +24,7 @@
 <style>
 	.code-block {
 		position: relative;
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-m);
 		background: var(--color-background);
 		padding: var(--space-m) var(--space-l);

web/src/lib/components/kit/Dropzone.svelte

@@ -66,7 +66,7 @@
 		gap: var(--space-m);
 		min-height: var(--size-panel-min-height);
 		padding: var(--space-xxxl);
-		border: 1px dashed var(--color-border);
+		border: var(--size-border) dashed var(--color-border);
 		border-radius: var(--radius-m);
 		color: var(--color-text-muted);
 		background: var(--color-background);

web/src/lib/components/kit/ImageCard.svelte

@@ -20,7 +20,7 @@
 		flex-direction: column;
 		gap: var(--space-s);
 		margin: 0;
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-m);
 		padding: var(--space-m);
 		background: var(--color-panel);

web/src/lib/components/kit/MetaList.svelte

@@ -15,7 +15,7 @@
 
 <style>
 	.meta-list {
-		border-top: 1px solid var(--color-border);
+		border-top: var(--size-border) solid var(--color-border);
 		grid-template-columns: repeat(3, 1fr);
 		gap: var(--space-m);
 		padding-top: var(--space-l);

web/src/lib/components/kit/PanelHeading.svelte

@@ -25,7 +25,7 @@
 		justify-content: space-between;
 		gap: var(--space-xl);
 		padding: var(--space-l) var(--space-xl);
-		border-bottom: 1px solid var(--color-border);
+		border-bottom: var(--size-border) solid var(--color-border);
 	}
 	.heading-text {
 		display: flex;

web/src/lib/components/kit/SchemaToolView.svelte

@@ -267,7 +267,10 @@
 	}
 	.workspace {
 		display: grid;
-		grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
+		grid-template-columns: minmax(var(--size-workspace-min), 1fr) minmax(
+				0,
+				2fr
+			);
 		gap: var(--space-xxl);
 		align-items: start;
 	}

web/src/lib/components/kit/SettingGroup.svelte

@@ -21,7 +21,7 @@
 		justify-content: space-between;
 		gap: var(--space-xl);
 		padding: var(--space-m) var(--space-xl);
-		border-bottom: 1px solid var(--color-border);
+		border-bottom: var(--size-border) solid var(--color-border);
 	}
 	.setting-control {
 		display: flex;

web/src/lib/components/kit/SettingsFooter.svelte

@@ -16,6 +16,6 @@
 		justify-content: flex-end;
 		gap: var(--space-m);
 		padding: var(--space-l) var(--space-xl);
-		border-top: 1px solid var(--color-border);
+		border-top: var(--size-border) solid var(--color-border);
 	}
 </style>

web/src/lib/components/kit/StepCard.svelte

@@ -45,9 +45,9 @@
 <style>
 	.step-card {
 		display: grid;
-		grid-template-columns: 46px 20px 1fr;
+		grid-template-columns: var(--size-step-index) var(--size-step-grip) 1fr;
 		min-height: var(--size-step-min-height);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		background: var(--color-panel);
 	}
 	.step-index {

web/src/lib/components/kit/ToolCard.svelte

@@ -29,12 +29,14 @@
 <style>
 	.tool-card {
 		display: grid;
-		grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) 24px 18px;
+		grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) var(
+				--space-xxl
+			) var(--size-tool-arrow);
 		align-items: center;
 		gap: var(--space-l);
 		min-height: var(--size-tool-min-height);
 		padding: var(--space-xl);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-m);
 		background: var(--color-panel);
 		color: var(--color-text);
@@ -63,7 +65,7 @@
 		color: var(--color-text);
 	}
 	.tool-copy span {
-		font: 12px/1.5 var(--font-mono);
+		font: var(--font-size-s)/1.5 var(--font-mono);
 		color: var(--color-text-muted);
 	}
 	.tool-index {

web/src/lib/components/kit/fields/ColorField.svelte

@@ -56,12 +56,12 @@
 		padding-left: var(--space-m);
 		padding-right: var(--space-m);
 		height: var(--space-xxxl);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 	}
 	.swatch {
 		width: var(--space-l);
 		height: var(--space-l);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		flex: none;
 	}
 	.color-field input {

web/src/lib/components/kit/fields/SelectField.svelte

@@ -35,7 +35,7 @@
 		font-size: var(--font-size-s);
 		color: var(--color-text);
 		background: var(--color-background);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-m);
 		padding: var(--space-s) var(--space-m);
 	}

web/src/lib/components/kit/fields/TextField.svelte

@@ -39,7 +39,7 @@
 		font-size: var(--font-size-s);
 		color: var(--color-text);
 		background: var(--color-background);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: var(--radius-m);
 		padding: var(--space-s) var(--space-m);
 	}

web/src/lib/components/kit/ui/LangToggle.svelte

@@ -23,7 +23,7 @@
 	.lang {
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 	}
 	.lang-btn {
 		border: 0;

web/src/lib/components/kit/ui/Toggle.svelte

@@ -29,7 +29,7 @@
 		position: relative;
 		width: var(--space-xxxl);
 		height: var(--space-xl);
-		border: 1px solid var(--color-border);
+		border: var(--size-border) solid var(--color-border);
 		border-radius: 0;
 		background: var(--color-background);
 		cursor: pointer;

web/src/preview.css

@@ -156,7 +156,13 @@
 
 		--size-tool-icon: 42px;
 		--size-tool-min-height: 106px;
+		--size-tool-arrow: 18px;
 		--size-step-min-height: 138px;
+		--size-step-index: 46px;
+		--size-step-grip: 20px;
+		--size-card-min: 240px;
+		--size-card-min-narrow: 200px;
+		--size-workspace-min: 260px;
 		--size-content-max: 880px;
 		--size-content-max-wide: 1680px;
 
@@ -165,6 +171,7 @@
 		--font-size-l: 16px;
 		--font-size-xl: 24px;
 		--font-size-2xl: 32px;
+		--font-size-xs: 10px;
 
 		--radius-s: 0px;
 		--radius-m: 4px;

web/src/routes/preview/+layout.svelte

@@ -59,8 +59,8 @@
 	main {
 		background-color: var(--color-background);
 		background-image:
-			linear-gradient(var(--color-background-muted) 1px, #0000 1px),
-			linear-gradient(90deg, var(--color-background-muted) 1px, #0000 1px);
+			linear-gradient(var(--color-background-muted) 1px, transparent 1px),
+			linear-gradient(90deg, var(--color-background-muted) 1px, transparent 1px);
 		background-size: var(--space-xxxl) var(--space-xxxl);
 		min-height: 100vh;
 	}

web/src/routes/preview/+page.svelte

@@ -101,7 +101,7 @@
 	}
 	.ws-results {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
 		gap: var(--space-l);
 		padding: var(--space-m) var(--space-xl);
 	}

web/src/routes/preview/kit/+page.svelte

@@ -216,13 +216,16 @@
 	}
 	.tool-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
 		gap: var(--space-l);
 		padding: var(--space-l) var(--space-xl);
 	}
 	.preview-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		grid-template-columns: repeat(
+			auto-fill,
+			minmax(var(--size-card-min-narrow), 1fr)
+		);
 		gap: var(--space-l);
 		padding: var(--space-l) var(--space-xl);
 	}

web/src/routes/preview/list-tools/+page.svelte

@@ -64,8 +64,8 @@
 		flex-wrap: wrap;
 		margin-top: var(--space-page-top);
 		padding-top: var(--space-xxl);
-		border-top: 1px solid var(--color-border);
-		font: 10px var(--font-mono);
+		border-top: var(--size-border) solid var(--color-border);
+		font: var(--font-size-xs) var(--font-mono);
 		letter-spacing: var(--space-text-l);
 		color: var(--color-text-muted);
 	}