styles: [frontend] Add various form and btn components

frontend/src/app.css

@@ -56,13 +56,39 @@
 	--colour-grey-950: #030712;
 	--colour-grey-1000: #000000;
 
+	/** Colour: Red palette, based on Material You's red palette */
+	--colour-red-50: #ffebee;
+	--colour-red-100: #ffcdd2;
+	--colour-red-200: #ef9a9a;
+	--colour-red-300: #e57373;
+	--colour-red-400: #ef5350;
+	--colour-red-500: #f44336;
+	--colour-red-600: #e53935;
+	--colour-red-700: #d32f2f;
+	--colour-red-800: #c62828;
+	--colour-red-900: #b71c1c;
+	--colour-red-950: #7f0000;
+
+	/** Colour: Green palette, based on Material You's green palette */
+	--colour-green-50: #e8f5e9;
+	--colour-green-100: #c8e6c9;
+	--colour-green-200: #a5d6a7;
+	--colour-green-300: #81c784;
+	--colour-green-400: #66bb6a;
+	--colour-green-500: #4caf50;
+	--colour-green-600: #43a047;
+	--colour-green-700: #388e3c;
+	--colour-green-800: #2e7d32;	
+	--colour-green-900: #1b5e20;
+	--colour-green-950: #0b2f10;
+
 	/* --- Color: On-Surface --- */
 	--color-on-surface: #2f342e; /* replaces pure black */
 	--color-on-surface-variant: #5c605b;
 
 	/* --- Color: Outline --- */
-	--color-outline: #8c908b;
+	--colour-outline: #8c908b;
-	--color-outline-variant: #afb3ac; /* use at 20% opacity as "ghost border" */
+	--colour-outline-variant: #afb3ac; /* use at 20% opacity as "ghost border" */
 
 	/* --- Typography: Font Families --- */
 	--font-display: 'archivo', sans-serif;
@@ -218,6 +244,12 @@ body {
 	gap: var(--space-4);
 }
 
+.form.outline {
+	padding: var(--space-4);
+	border: 1px solid var(--colour-outline);
+	border-radius: var(--radius-md);
+}
+
 .form-header {
 	margin-bottom: var(--space-6);
 }
@@ -293,6 +325,23 @@ body {
 	padding-inline: var(--space-2);
 }
 
+.btn-submit {
+	background-color: var(--color-primary);
+	color: var(--color-on-primary);
+	padding: var(--space-1) var(--space-6);
+	font-weight: var(--weight-semi-bold);
+	font-size: var(--text-body-md);
+	border: 1px solid var(--color-primary);
+}
+
+.btn-submit:hover {
+	opacity: 0.88;
+}
+
+.btn-submit:active {
+	opacity: 0.75;
+}
+
 /* --------------------------------------------------------------------------
    Component: Input
    -------------------------------------------------------------------------- */
@@ -322,7 +371,7 @@ body {
 	background-color: var(--color-surface-container-high);
 	color: var(--color-on-surface);
 	border: none;
-	border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
+	border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
 	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 	padding: var(--space-2) var(--space-3);
 	font-family: var(--font-body);
@@ -340,11 +389,11 @@ body {
 	padding: var(--space-2) var(--space-3);
 	background-color: var(--color-surface-container);
 	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-	border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
+	border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
 }
 
 .field-input::placeholder {
-	color: var(--color-outline-variant);
+	color: var(--colour-outline-variant);
 }
 
 .field-input:focus {
@@ -355,7 +404,7 @@ body {
 	background-color: var(--color-surface-container-high);
 	color: var(--color-on-surface);
 	border: none;
-	border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
+	border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
 	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 	padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
 	font-family: var(--font-body);
@@ -375,11 +424,16 @@ body {
 	border-bottom: 2px solid var(--color-primary);
 }
 
+.field-select:disabled {
+	cursor: not-allowed;
+	opacity: 0.75;
+}
+
 .field-textarea {
 	background-color: var(--color-surface-container-high);
 	color: var(--color-on-surface);
 	border: none;
-	border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
+	border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
 	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 	padding: var(--space-2) var(--space-3);
 	font-family: var(--font-body);
@@ -393,7 +447,7 @@ body {
 }
 
 .field-textarea::placeholder {
-	color: var(--color-outline-variant);
+	color: var(--colour-outline-variant);
 }
 
 .field-textarea:focus {
@@ -407,6 +461,29 @@ body {
 	margin-top: var(--space-1);
 }
 
+/* --------------------------------------------------------------------------
+   Component: Form divider
+   -------------------------------------------------------------------------- */
+
+.form-divider {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	margin: var(--space-3) 0;
+}
+
+.form-divider-text {
+	font-family: var(--font-label);
+	color: var(--color-on-surface);
+	white-space: nowrap;
+}
+
+.form-divider-line {
+	flex: 1;
+	height: 1px;
+	background-color: color-mix(in srgb, var(--colour-outline-variant) 40%, transparent);
+}
+
 /* --------------------------------------------------------------------------
    Component: Button (modifiers)
    -------------------------------------------------------------------------- */
@@ -518,9 +595,15 @@ body {
 }
 
 .alert-error {
-	background-color: color-mix(in srgb, #b3261e 10%, var(--color-surface));
+	background-color: color-mix(in srgb, var(--colour-red-700) 10%, var(--color-surface));
-	color: #b3261e;
+	color: var(--colour-red-700);
-	border-left: 3px solid #b3261e;
+	border-left: 3px solid var(--colour-red-700);
+}
+
+.alert.success {
+	background-color: color-mix(in srgb, var(--colour-green-700) 10%, var(--color-surface));
+	color: var(--colour-green-700);
+	border-left: 3px solid var(--colour-green-700);
 }
 
 /*