Styling and file refactor

index.css

@@ -8,5 +8,7 @@
 @import url('src/system-dimensions.css');
 @import url('src/system-radi.css');
 @import url('src/system-custom-colors.css');
+@import url('src/system-layout.css');
+@import url('src/system-forms.css');
 
 @import url('src/system-selectors.css');

src/system-forms.css

@@ -0,0 +1,92 @@
+@layer --system {
+	:root {
+		fieldset {
+			display: flex;
+			flex-direction: column;
+			position: relative;
+			border: 0;
+			padding: 0;
+			margin: 0;
+
+			&:has(legend) {
+				margin-block-start: calc(1ex - 0.5lh);
+				margin-block-end: 1ex;
+				padding-block-start: 0.5lh;
+			}
+		}
+
+		form > div:has(button) {
+			margin-block-start: var(--system-spacing-main);
+		}
+
+		legend {
+			position: relative;
+			inset: 0.5lh 0;
+		}
+
+		fieldset:has(:user-invalid),
+		form:has(:user-invalid),
+		form :user-invalid:not(:focus-visible) {
+			position: relative;
+			outline: var(--system-stroke-thin) solid var(--system-invalid-color);
+			&::before {
+				position: absolute;
+				margin-inline-start: max(
+					calc(var(--system-spacing-page-inline) * -1),
+					calc(var(--system-spacing-double) * -1)
+				);
+				content: '';
+				width: 0px;
+				height: 100%;
+				display: block;
+				border-inline-end-width: 0;
+				border-inline-end-style: solid;
+				border-inline-end-color: var(--system-invalid-color);
+			}
+			&:is(input) {
+				border-color: var(--system-invalid-color);
+			}
+			&:is(fieldset) {
+				outline: 0;
+				&::before {
+					border-inline-end-width: var(--system-stroke-thick);
+				}
+			}
+			&:is(form) {
+				outline: 0;
+				&::before {
+					border-inline-end-width: var(--system-stroke-thin);
+				}
+			}
+		}
+
+		fieldset > :is(p, div, fieldset) {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+			justify-items: start;
+			margin-block: calc((1lh - 1em) / 2);
+			gap: calc((1lh - 1em) / 2);
+			border: 0;
+			padding: 0;
+
+			&:has([type='checkbox'], [type='radio']) {
+				display: grid;
+				grid-template-columns: min-content 1fr;
+				row-gap: calc(1em - 1ex);
+				column-gap: 1ch;
+				padding-block: calc(1em - 1ex);
+				font-family: var(--system-font-family-data);
+				font-size: var(--system-font-size-m);
+				line-height: var(--system-line-height-compact);
+			}
+
+			&:is(fieldset):has(:user-valid) {
+				& input {
+					accent-color: initial;
+					outline: 0;
+				}
+			}
+		}
+	}
+}

src/system-layout.css

@@ -0,0 +1,60 @@
+@layer --system {
+	:root {
+		body {
+			--viewport-padding: minmax(var(--system-spacing-page-inline), 1fr);
+			--content-width: minmax(
+				calc(var(--system-dimension-min-width) - (var(--system-spacing-page-inline) * 2)),
+				var(--system-dimension-content-width)
+			);
+
+			display: grid;
+			grid-template-columns:
+				[--viewport-start] var(--viewport-padding) [--content-start] var(--content-width) [--content-end] var(
+					--viewport-padding
+				)
+				[--viewport-end];
+		}
+		body > :is(header, footer) {
+			display: grid;
+			grid-template-columns: subgrid;
+			grid-column: --viewport-start / --viewport-end;
+			padding-block: var(--system-spacing-main);
+
+			& > * {
+				grid-column: --content-start / --content-end;
+				margin: 0;
+				padding: 0;
+			}
+		}
+
+		main {
+			/* Center main in page */
+			grid-column: --content-start / --content-end;
+			container: --content / inline-size;
+			padding-block: clamp(
+				var(--system-spacing-main) * 2,
+				var(--system-spacing-page-inline),
+				var(--system-spacing-main) * 4
+			);
+			/* Waiting on margin-trim */
+
+			& > *:first-child {
+				margin-block-start: unset;
+			}
+
+			& > *:last-child {
+				margin-block-end: unset;
+			}
+		}
+
+		body > header > nav {
+			display: flex;
+			column-gap: var(--system-spacing-column-gap);
+			margin-block-start: var(--system-spacing-single);
+		}
+
+		body > :is(header, main, footer):not(:has(*)) {
+			display: none;
+		}
+	}
+}