From d253dacfa64529ca7682d69b9af5d96900640afd Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Mon, 19 Jan 2026 19:46:54 +0100
Subject: [PATCH] Add border width var

---
 app/components/elements/Button.module.css         |  3 +--
 app/components/elements/DatePicker.module.css     |  6 ++++--
 app/components/elements/Switch.module.css         | 15 +++++++++------
 .../components-showcase/routes/components.tsx     |  6 +++++-
 app/styles/common.css                             |  2 +-
 app/styles/vars.css                               |  9 +++++----
 6 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 21990bd92..9dccff3e5 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -21,8 +21,7 @@
 
 .button[data-focus-visible],
 .button:focus-visible {
-	outline-style: solid;
-	outline-width: 2px;
+	outline: var(--field-focus-ring);
 	outline-offset: 1px;
 }
 
diff --git a/app/components/elements/DatePicker.module.css b/app/components/elements/DatePicker.module.css
index 5518b7d01..3c5cb3ecc 100644
--- a/app/components/elements/DatePicker.module.css
+++ b/app/components/elements/DatePicker.module.css
@@ -34,6 +34,7 @@
 }
 
 .button {
+	padding: 0;
 	margin-inline-start: auto;
 	background-color: transparent;
 	border: none;
@@ -41,6 +42,7 @@
 }
 
 .icon {
-	fill: var(--color-text-high);
-	width: 17.5px;
+	color: var(--color-text-high);
+	width: var(--field-icon-width);
+	height: var(--field-icon-width);
 }
diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css
index c37b4302d..542a312f9 100644
--- a/app/components/elements/Switch.module.css
+++ b/app/components/elements/Switch.module.css
@@ -19,26 +19,29 @@
 	background: var(--color-bg);
 	border: var(--border-style);
 	border-radius: calc(var(--radius-selector) * 2);
+	padding: 2px;
+	display: inline-grid;
+	justify-items: center;
+	grid-template-columns: 0fr 1fr 1fr;
+	transition: grid-template-columns 200ms;
 
 	&:before {
 		content: "";
-		display: block;
-		margin: 2px;
-		width: calc(var(--height) - 8px);
-		height: calc(var(--height) - 8px);
+		height: 100%;
 		aspect-ratio: 1 / 1;
 		background: var(--color-border);
 		border-radius: var(--radius-selector);
-		transition: transform 200ms;
+		grid-row-start: 1;
+		grid-column-start: 2;
 	}
 }
 
 .root[data-selected] .indicator {
 	background: var(--color-text-accent);
 	border-color: var(--color-text-accent);
+	grid-template-columns: 1fr 1fr 0fr;
 
 	&:before {
-		transform: translateX(calc(var(--height) * 0.75));
 		background: var(--color-text-inverse);
 	}
 }
diff --git a/app/features/components-showcase/routes/components.tsx b/app/features/components-showcase/routes/components.tsx
index 0ebdc0130..7ee8c491f 100644
--- a/app/features/components-showcase/routes/components.tsx
+++ b/app/features/components-showcase/routes/components.tsx
@@ -2058,7 +2058,11 @@ function FormFieldsSection({ id }: { id: string }) {
 				with Zod schemas that generate both UI and validation.
 			</p>
 
-			<SendouForm schema={formFieldsShowcaseSchema} autoSubmit>
+			<SendouForm
+				schema={formFieldsShowcaseSchema}
+				autoSubmit
+				className="w-full"
+			>
 				{({ FormField }) => (
 					<div className="stack lg">
 						<Divider smallText>Text Fields</Divider>
diff --git a/app/styles/common.css b/app/styles/common.css
index 7d721d05f..89b42b1b6 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -77,7 +77,7 @@ a {
 /* :not([name="text"]) workaround not to select textarea on map planner  */
 textarea:not([name="text"]) {
 	width: 100%;
-	min-height: 5rem;
+	min-height: 8rem;
 	padding: var(--field-padding-block) var(--field-padding-inline);
 	line-height: var(--field-line-height);
 	border: var(--border-style);
diff --git a/app/styles/vars.css b/app/styles/vars.css
index ce701b0f8..95b997f59 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -129,9 +129,10 @@ html {
 
 	--color-border: var(--color-base-5);
 	--color-border-high: var(--color-base-4);
-	--border-style: 2px solid var(--color-border);
-	--border-style-high: 2px solid var(--color-border-high);
-	--border-style-accent: 2px solid var(--color-text-accent);
+	--border-width: 2px;
+	--border-style: var(--border-width) solid var(--color-border);
+	--border-style-high: var(--border-width) solid var(--color-border-high);
+	--border-style-accent: var(--border-width) solid var(--color-text-accent);
 
 	--field-height-smaller: 1.25rem;
 	--field-height-small: 2rem;
@@ -140,7 +141,7 @@ html {
 	--field-padding-block: 0.5rem;
 	--field-padding-inline: 1rem;
 	--field-line-height: 1.2rem;
-	--field-focus-ring: var(--border-style-accent);
+	--field-focus-ring: 2px solid var(--color-text-accent);
 	--field-focus-ring-error: 2px solid var(--color-error);
 	--field-icon-width: 18px;