Add border width var

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

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

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

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>

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

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;