From afc9862dbff7a06e536f3e35e3069e16c788268e Mon Sep 17 00:00:00 2001
From: "Z. Charles Dziura" <zachary@dziura.email>
Date: Wed, 16 Jul 2025 16:36:57 -0400
Subject: [PATCH] Finally get a custom theme in place

---
 api/Cargo.toml                        |  53 ++++++++
 api/aisle17.config.example.toml       |  23 ++++
 api/aisle17.config.toml               |  23 ++++
 api/src/main.rs                       |   3 +
 webapp/src/styles.scss                |   7 +-
 webapp/src/styles/_theme.scss         |  45 +++++++
 webapp/src/styles/theme/_dark.scss    | 144 --------------------
 webapp/src/styles/theme/_light.scss   | 144 --------------------
 webapp/src/styles/theme/_schemes.scss |  37 -----
 webapp/src/styles/theme/_styles.scss  | 187 --------------------------
 10 files changed, 148 insertions(+), 518 deletions(-)
 create mode 100644 api/Cargo.toml
 create mode 100644 api/aisle17.config.example.toml
 create mode 100644 api/aisle17.config.toml
 create mode 100644 api/src/main.rs
 create mode 100644 webapp/src/styles/_theme.scss
 delete mode 100644 webapp/src/styles/theme/_dark.scss
 delete mode 100644 webapp/src/styles/theme/_light.scss
 delete mode 100644 webapp/src/styles/theme/_schemes.scss
 delete mode 100644 webapp/src/styles/theme/_styles.scss

diff --git a/api/Cargo.toml b/api/Cargo.toml
new file mode 100644
index 0000000..f4310a9
--- /dev/null
+++ b/api/Cargo.toml
@@ -0,0 +1,53 @@
+[package]
+name = "aisle17"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+argon2 = "0.5"
+axum = { version = "0.8", features = [
+	"macros",
+	"multipart",
+	"ws",
+] }
+base64 = "0.22"
+blake3 = { version = "1.5", features = ["serde"] }
+deadpool-redis = { version = "0.21", features = ["serde"] }
+futures = "0.3"
+http = "1.0"
+humantime = "2.1"
+humantime-serde = "1.1"
+hyper = { version = "1.1", features = ["full"] }
+lettre = { version = "0.11", default-features = false, features = [
+	"builder",
+	"hostname",
+	"pool",
+	"smtp-transport",
+	"tokio1",
+	"tokio1-rustls-tls",
+] }
+num_cpus = "1.16"
+pasetors = "0.7"
+rust_decimal = "1.36"
+serde = { version = "1.0", features = ["derive", "rc", "std"] }
+serde_json = "1.0"
+serde_with = "3.9"
+sqlx = { version = "0.8", features = [
+	"default",
+	"time",
+	"postgres",
+	"runtime-tokio",
+	"rust_decimal",
+	"uuid"
+] }
+syslog-tracing = "0.3.1"
+time = { version = "0.3", features = ["formatting", "macros"] }
+tokio = { version = "1.35", features = ["full"] }
+toml = "0.8"
+tower = "0.5"
+tower-http = { version = "0.6", features = ["full"] }
+tracing = "0.1.40"
+tracing-subscriber = { version = "0.3", features = ["env-filter", "time"] }
+url = { version = "2.5.2", features = ["expose_internals"] }
+uuid = { version = "1.10", features = ["serde", "v7"] }
\ No newline at end of file
diff --git a/api/aisle17.config.example.toml b/api/aisle17.config.example.toml
new file mode 100644
index 0000000..57adb11
--- /dev/null
+++ b/api/aisle17.config.example.toml
@@ -0,0 +1,23 @@
+hostname = "127.0.0.1"
+port = "42069"
+assets_dir = ''
+log = "info"
+
+[secrets]
+token_key = ''
+
+[database]
+host = ""
+port = "5432"
+user = "aisle17"
+password = ""
+schema = "aisle17"
+
+[cache]
+host = "192.168.122.76"
+port = "6379"
+user = "aisle17"
+password = ""
+
+[mail]
+send_verification_email = true
diff --git a/api/aisle17.config.toml b/api/aisle17.config.toml
new file mode 100644
index 0000000..57adb11
--- /dev/null
+++ b/api/aisle17.config.toml
@@ -0,0 +1,23 @@
+hostname = "127.0.0.1"
+port = "42069"
+assets_dir = ''
+log = "info"
+
+[secrets]
+token_key = ''
+
+[database]
+host = ""
+port = "5432"
+user = "aisle17"
+password = ""
+schema = "aisle17"
+
+[cache]
+host = "192.168.122.76"
+port = "6379"
+user = "aisle17"
+password = ""
+
+[mail]
+send_verification_email = true
diff --git a/api/src/main.rs b/api/src/main.rs
new file mode 100644
index 0000000..e7a11a9
--- /dev/null
+++ b/api/src/main.rs
@@ -0,0 +1,3 @@
+fn main() {
+    println!("Hello, world!");
+}
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index 519d5fc..4d873e9 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -2,9 +2,6 @@
 	$enable-semantic-container: true,
 	$enable-classes: false,
 	$modules: (
-		// Theme
-		'themes/default': false,
-
 		// Layout
 		'layout/grid': false,
 
@@ -17,9 +14,7 @@
 	)
 );
 
-// Custom Theme
-@use 'styles/theme/styles';
-@use 'styles/theme/schemes';
+@use './styles/theme';
 
 body {
 	margin: 0;
diff --git a/webapp/src/styles/_theme.scss b/webapp/src/styles/_theme.scss
new file mode 100644
index 0000000..376278c
--- /dev/null
+++ b/webapp/src/styles/_theme.scss
@@ -0,0 +1,45 @@
+:root, :host {
+    --pico-font-family-sans-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
+    --pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+}
+
+// Light Theme
+[data-theme=light],
+:root:not([data-theme=dark]),
+:host:not([data-theme=dark]) {
+  --pico-text-selection-color: rgba(244, 93, 44, 0.25);
+  --pico-primary: #bd3c13;
+  --pico-primary-background: #d24317;
+  --pico-primary-underline: rgba(189, 60, 19, 0.5);
+  --pico-primary-hover: #942d0d;
+  --pico-primary-hover-background: #bd3c13;
+  --pico-primary-focus: rgba(244, 93, 44, 0.5);
+  --pico-primary-inverse: #fff;
+}
+
+// Dark Theme
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host:not([data-theme]) {
+    --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
+    --pico-primary: #f56b3d;
+    --pico-primary-background: #d24317;
+    --pico-primary-underline: rgba(245, 107, 61, 0.5);
+    --pico-primary-hover: #f8a283;
+    --pico-primary-hover-background: #e74b1a;
+    --pico-primary-focus: rgba(245, 107, 61, 0.375);
+    --pico-primary-inverse: #fff;
+  }
+}
+/* Orange color for dark color scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme=dark] {
+  --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
+  --pico-primary: #f56b3d;
+  --pico-primary-background: #d24317;
+  --pico-primary-underline: rgba(245, 107, 61, 0.5);
+  --pico-primary-hover: #f8a283;
+  --pico-primary-hover-background: #e74b1a;
+  --pico-primary-focus: rgba(245, 107, 61, 0.375);
+  --pico-primary-inverse: #fff;
+}
diff --git a/webapp/src/styles/theme/_dark.scss b/webapp/src/styles/theme/_dark.scss
deleted file mode 100644
index e72089d..0000000
--- a/webapp/src/styles/theme/_dark.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use '@picocss/pico/scss/settings' as *;
-@use '@picocss/pico/scss/colors' as *;
-@use '@picocss/pico/scss/helpers/functions';
-
-$theme-color: #0074d9;
-
-// Default: Dark theme
-@mixin theme {
-	#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
-
-	// Text color
-	#{$css-var-prefix}color: #{$zinc-100};
-
-	// Text selection color
-	#{$css-var-prefix}text-selection-color: #{rgba($theme-color, 0.1875)};
-
-	// Muted colors
-	#{$css-var-prefix}muted-color: #{$zinc-450};
-	#{$css-var-prefix}muted-border-color: #{$slate-850};
-
-	// Primary colors
-	#{$css-var-prefix}primary: #{$theme-color};
-	#{$css-var-prefix}primary-background: var(#{$css-var-prefix}primary);
-	#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
-	#{$css-var-prefix}primary-underline: #{rgba($theme-color, 0.5)};
-	#{$css-var-prefix}primary-hover: #{color.scale($theme-color, $lightness: 21%)};
-	#{$css-var-prefix}primary-hover-background: var(#{$css-var-prefix}primary-hover);
-	#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
-	#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
-	#{$css-var-prefix}primary-focus: #{rgba($theme-color, 0.375)};
-	#{$css-var-prefix}primary-inverse: #{$black};
-
-	// Secondary colors
-	#{$css-var-prefix}secondary: #{$zinc-350};
-	#{$css-var-prefix}secondary-background: #{$slate-600};
-	#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
-	#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
-	#{$css-var-prefix}secondary-hover: #{$zinc-250};
-	#{$css-var-prefix}secondary-hover-background: #{$slate-550};
-	#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
-	#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
-	#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
-	#{$css-var-prefix}secondary-inverse: #{$white};
-
-	// Contrast colors
-	#{$css-var-prefix}contrast: #{$slate-100};
-	#{$css-var-prefix}contrast-background: #{$slate-50};
-	#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
-	#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
-	#{$css-var-prefix}contrast-hover: #{$white};
-	#{$css-var-prefix}contrast-hover-background: #{$white};
-	#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
-	#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
-	#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
-	#{$css-var-prefix}contrast-inverse: #{$black};
-
-	// Box shadow
-	#{$css-var-prefix}box-shadow: functions.shadow($black);
-
-	// Typography
-	@if map.get($modules, 'content/typography') {
-		// Headings colors
-		#{$css-var-prefix}h1-color: #{$zinc-50};
-		#{$css-var-prefix}h2-color: #{$zinc-100};
-		#{$css-var-prefix}h3-color: #{$zinc-200};
-		#{$css-var-prefix}h4-color: #{$zinc-250};
-		#{$css-var-prefix}h5-color: #{$zinc-300};
-		#{$css-var-prefix}h6-color: #{$zinc-400};
-
-		// Highlighted text (<mark>)
-		#{$css-var-prefix}mark-background-color: #{$azure-750};
-		#{$css-var-prefix}mark-color: #{$white};
-
-		// Inserted (<ins>) & Deleted (<del>)
-		#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
-		#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
-
-		// Blockquote
-		#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
-		#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
-	}
-
-	// Button
-	@if map.get($modules, 'content/button') {
-		// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
-		// Don't use, 'none, 'false, 'null', '0', etc.
-		#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-		#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-	}
-
-	// Table
-	@if map.get($modules, 'content/table') {
-		#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
-		#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
-	}
-
-	// Form elements
-	@if map.get($modules, 'forms/basics') {
-		#{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
-		#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
-		#{$css-var-prefix}form-element-border-color: #{$slate-800};
-		#{$css-var-prefix}form-element-color: #{$zinc-100};
-		#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
-		#{$css-var-prefix}form-element-active-background-color: #{color.mix($slate-900, $slate-850, 75%)};
-		#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
-		#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
-		#{$css-var-prefix}form-element-disabled-background-color: var(#{$css-var-prefix}form-element-background-color);
-		#{$css-var-prefix}form-element-disabled-border-color: var(#{$css-var-prefix}form-element-border-color);
-		#{$css-var-prefix}form-element-disabled-opacity: 0.5;
-		#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
-		#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix($red-500, $slate-600, 75%)};
-		#{$css-var-prefix}form-element-invalid-focus-color: var(
-			#{$css-var-prefix}form-element-invalid-active-border-color
-		);
-		#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
-		#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix($jade-450, $slate-600, 75%)};
-		#{$css-var-prefix}form-element-valid-focus-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
-
-		// Focus for buttons, radio and select
-		input:is([type='submit'], [type='button'], [type='reset'], [type='checkbox'], [type='radio'], [type='file']) {
-			#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
-		}
-	}
-
-	// Range (input[type="range"])
-	@if map.get($modules, 'forms/input-range') {
-		#{$css-var-prefix}range-border-color: #{$slate-850};
-		#{$css-var-prefix}range-active-border-color: #{$slate-800};
-		#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
-		#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}primary-background);
-		#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-hover-background);
-	}
-
-	// Form validation icons
-	@if map.get($modules, 'forms/basics') {
-		#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-		#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-	}
-
-	// Document
-	color-scheme: dark;
-}
diff --git a/webapp/src/styles/theme/_light.scss b/webapp/src/styles/theme/_light.scss
deleted file mode 100644
index 6135305..0000000
--- a/webapp/src/styles/theme/_light.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use '@picocss/pico/scss/settings' as *;
-@use '@picocss/pico/scss/colors' as *;
-@use '@picocss/pico/scss/helpers/functions';
-
-$theme-color: #001f3f;
-
-// Default: Light theme
-@mixin theme {
-	#{$css-var-prefix}background-color: #{$white};
-
-	// Text color
-	#{$css-var-prefix}color: #{$zinc-900};
-
-	// Text selection color
-	#{$css-var-prefix}text-selection-color: #{rgba($theme-color, 0.25)};
-
-	// Muted colors
-	#{$css-var-prefix}muted-color: #{$zinc-550};
-	#{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
-
-	// Primary colors
-	#{$css-var-prefix}primary: #{$theme-color};
-	#{$css-var-prefix}primary-background: var(#{$css-var-prefix}primary);
-	#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
-	#{$css-var-prefix}primary-underline: #{rgba($theme-color, 0.5)};
-	#{$css-var-prefix}primary-hover: #{color.scale($theme-color, $lightness: -21%)};
-	#{$css-var-prefix}primary-hover-background: #{color.scale($theme-color, $lightness: 21%)};
-	#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
-	#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
-	#{$css-var-prefix}primary-focus: #{rgba($theme-color, 0.375)};
-	#{$css-var-prefix}primary-inverse: #{$black};
-
-	// Secondary colors
-	#{$css-var-prefix}secondary: #{$slate-550};
-	#{$css-var-prefix}secondary-background: #{$slate-600};
-	#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
-	#{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
-	#{$css-var-prefix}secondary-hover: #{$slate-650};
-	#{$css-var-prefix}secondary-hover-background: #{$slate-650};
-	#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
-	#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
-	#{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
-	#{$css-var-prefix}secondary-inverse: #{$white};
-
-	// Contrast colors
-	#{$css-var-prefix}contrast: #{$slate-900};
-	#{$css-var-prefix}contrast-background: #{$slate-900};
-	#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
-	#{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
-	#{$css-var-prefix}contrast-hover: #{$black};
-	#{$css-var-prefix}contrast-hover-background: #{$black};
-	#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
-	#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
-	#{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
-	#{$css-var-prefix}contrast-inverse: #{$white};
-
-	// Box shadow
-	#{$css-var-prefix}box-shadow: functions.shadow($slate-400);
-
-	// Typography
-	@if map.get($modules, 'content/typography') {
-		// Headings colors
-		#{$css-var-prefix}h1-color: #{$zinc-800};
-		#{$css-var-prefix}h2-color: #{$zinc-750};
-		#{$css-var-prefix}h3-color: #{$zinc-700};
-		#{$css-var-prefix}h4-color: #{$zinc-650};
-		#{$css-var-prefix}h5-color: #{$zinc-600};
-		#{$css-var-prefix}h6-color: #{$zinc-550};
-
-		// Highlighted text (<mark>)
-		#{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)};
-		#{$css-var-prefix}mark-color: #{$zinc-950};
-
-		// Inserted (<ins>) & Deleted (<del>)
-		#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
-		#{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)};
-
-		// Blockquote
-		#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
-		#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
-	}
-
-	// Button
-	@if map.get($modules, 'content/button') {
-		// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
-		// Don't use, 'none, 'false, 'null', '0', etc.
-		#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-		#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-	}
-
-	// Table
-	@if map.get($modules, 'content/table') {
-		#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
-		#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
-	}
-
-	// Form elements
-	@if map.get($modules, 'forms/basics') {
-		#{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)};
-		#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
-		#{$css-var-prefix}form-element-border-color: #{$slate-150};
-		#{$css-var-prefix}form-element-color: #{$zinc-850};
-		#{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
-		#{$css-var-prefix}form-element-active-background-color: #{$white};
-		#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
-		#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
-		#{$css-var-prefix}form-element-disabled-background-color: var(#{$css-var-prefix}form-element-background-color);
-		#{$css-var-prefix}form-element-disabled-border-color: var(#{$css-var-prefix}form-element-border-color);
-		#{$css-var-prefix}form-element-disabled-opacity: 0.5;
-		#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
-		#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix($red-500, $zinc-350, 75%)};
-		#{$css-var-prefix}form-element-invalid-focus-color: var(
-			#{$css-var-prefix}form-element-invalid-active-border-color
-		);
-		#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)};
-		#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix($jade-450, $zinc-350, 75%)};
-		#{$css-var-prefix}form-element-valid-focus-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
-
-		// Focus for buttons, radio and select
-		input:is([type='submit'], [type='button'], [type='reset'], [type='checkbox'], [type='radio'], [type='file']) {
-			#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
-		}
-	}
-
-	// Range (input[type="range"])
-	@if map.get($modules, 'forms/input-range') {
-		#{$css-var-prefix}range-border-color: #{$slate-100};
-		#{$css-var-prefix}range-active-border-color: #{$slate-200};
-		#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
-		#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}primary-background);
-		#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-hover-background);
-	}
-
-	// Form validation icons
-	@if map.get($modules, 'forms/basics') {
-		#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-		#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-	}
-
-	// Document
-	color-scheme: light;
-}
diff --git a/webapp/src/styles/theme/_schemes.scss b/webapp/src/styles/theme/_schemes.scss
deleted file mode 100644
index 1ce5f5d..0000000
--- a/webapp/src/styles/theme/_schemes.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use 'sass:map';
-@use '@picocss/pico/scss/settings' as *;
-
-@use './light';
-@use './dark';
-
-/**
-  * Color schemes
-  */
-
-// Light color scheme (Default)
-// Can be forced with data-theme="light"
-[data-theme='light'],
-:root:not([data-theme='dark']) {
-	@include light.theme;
-}
-
-// Dark color scheme (Auto)
-// Automatically enabled if user has Dark mode enabled
-@media only screen and (prefers-color-scheme: dark) {
-	:root:not([data-theme]) {
-		@include dark.theme;
-	}
-}
-
-// Dark color scheme (Forced)
-// Enabled if forced with data-theme="dark"
-[data-theme='dark'] {
-	@include dark.theme;
-}
-
-progress,
-[type='checkbox'],
-[type='radio'],
-[type='range'] {
-	accent-color: var(#{$css-var-prefix}primary);
-}
diff --git a/webapp/src/styles/theme/_styles.scss b/webapp/src/styles/theme/_styles.scss
deleted file mode 100644
index aaf9c99..0000000
--- a/webapp/src/styles/theme/_styles.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-@use 'sass:map';
-@use '@picocss/pico/scss/settings' as *;
-@use '@picocss/pico/scss/colors' as *;
-@use '@picocss/pico/scss/helpers/functions';
-
-/**
- * Styles
- */
-
-:root {
-	// Typography
-	#{$css-var-prefix}font-family-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	#{$css-var-prefix}font-family-sans-serif: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-		var(#{$css-var-prefix}font-family-emoji);
-	#{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
-		monospace, var(#{$css-var-prefix}font-family-emoji);
-	#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
-	#{$css-var-prefix}line-height: 1.5;
-	#{$css-var-prefix}font-weight: 400;
-	#{$css-var-prefix}font-size: 100%;
-	#{$css-var-prefix}text-underline-offset: 0.1rem;
-
-	// Borders
-	#{$css-var-prefix}border-radius: 0.375rem;
-	#{$css-var-prefix}border-width: 0.0625rem;
-	#{$css-var-prefix}outline-width: 0.125rem;
-
-	// Transitions
-	#{$css-var-prefix}transition: 0.2s ease-in-out;
-
-	// Spacings
-	#{$css-var-prefix}spacing: 1rem;
-
-	// Spacings for typography elements
-	@if map.get($modules, 'content/typography') {
-		& {
-			#{$css-var-prefix}typography-spacing-vertical: 1rem;
-		}
-	}
-
-	// Spacings for body > header, body > main, body > footer, section, article
-	@if map.get($modules, 'layout/landmarks') or
-		map.get($modules, 'layout/section') or
-		map.get($modules, 'components/card') or
-		map.get($modules, 'components/modal')
-	{
-		& {
-			#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * 1.5);
-			#{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 1.5);
-		}
-	}
-
-	// Spacings for form elements and button
-	@if map.get($modules, 'content/button') or map.get($modules, 'forms/basic') {
-		& {
-			#{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
-			#{$css-var-prefix}form-element-spacing-horizontal: 1rem;
-		}
-	}
-
-	// Font weight for form labels & fieldsets legend
-	@if map.get($modules, 'forms/basic') {
-		& {
-			#{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
-		}
-	}
-
-	// Checkboxes icons
-	@if map.get($modules, 'forms/checkbox-radio-switch') {
-		& {
-			#{$css-var-prefix}icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-			#{$css-var-prefix}icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
-		}
-	}
-
-	// Chevron icons
-	@if map.get($modules, 'forms/basics') or
-		map.get($modules, 'components/accordion') or
-		map.get($modules, 'components/dropdown')
-	{
-		& {
-			#{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-		}
-	}
-
-	// Responsive root font size
-	@if $enable-responsive-typography {
-		@each $key, $values in $breakpoints {
-			@if $values {
-				@media (min-width: map.get($values, 'breakpoint')) {
-					#{$css-var-prefix}font-size: map.get($values, 'root-font-size');
-				}
-			}
-		}
-	}
-}
-
-// Link
-@if map.get($modules, 'content/link') {
-	a {
-		#{$css-var-prefix}text-decoration: underline;
-
-		// Secondary & Contrast
-		@if enable-classes {
-			&.secondary,
-			&.contrast {
-				#{$css-var-prefix}text-decoration: underline;
-			}
-		}
-	}
-}
-
-// Typography
-@if map.get($modules, 'content/typography') {
-	// Small
-	small {
-		#{$css-var-prefix}font-size: 0.875em;
-	}
-
-	// Headings
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		#{$css-var-prefix}font-weight: 700;
-	}
-
-	h1 {
-		#{$css-var-prefix}font-size: 2rem;
-		#{$css-var-prefix}line-height: 1.125;
-		#{$css-var-prefix}typography-spacing-top: 3rem;
-	}
-
-	h2 {
-		#{$css-var-prefix}font-size: 1.75rem;
-		#{$css-var-prefix}line-height: 1.15;
-		#{$css-var-prefix}typography-spacing-top: 2.625rem;
-	}
-
-	h3 {
-		#{$css-var-prefix}font-size: 1.5rem;
-		#{$css-var-prefix}line-height: 1.175;
-		#{$css-var-prefix}typography-spacing-top: 2.25rem;
-	}
-
-	h4 {
-		#{$css-var-prefix}font-size: 1.25rem;
-		#{$css-var-prefix}line-height: 1.2;
-		#{$css-var-prefix}typography-spacing-top: 1.874rem;
-	}
-
-	h5 {
-		#{$css-var-prefix}font-size: 1.125rem;
-		#{$css-var-prefix}line-height: 1.225;
-		#{$css-var-prefix}typography-spacing-top: 1.6875rem;
-	}
-
-	h6 {
-		#{$css-var-prefix}font-size: 1rem;
-		#{$css-var-prefix}line-height: 1.25;
-		#{$css-var-prefix}typography-spacing-top: 1.5rem;
-	}
-}
-
-// Buttons
-button,
-[type='submit'],
-[type='reset'],
-[type='button'],
-[type='file']::file-selector-button,
-[role='button'] {
-	#{$css-var-prefix}font-weight: 700;
-}
-
-// Table
-@if map.get($modules, 'content/table') {
-	thead,
-	tfoot {
-		th,
-		td {
-			#{$css-var-prefix}font-weight: 600;
-			#{$css-var-prefix}border-width: 0.1875rem;
-		}
-	}
-}