From fb36716665f877b0451d94ddfc1061e299a20285 Mon Sep 17 00:00:00 2001
From: "Z. Charles Dziura" <zachary@dziura.email>
Date: Thu, 24 Jul 2025 09:35:50 -0400
Subject: [PATCH] Create secondary color scheme

---
 webapp/src/app/routes/login/login.html |  2 +-
 webapp/src/styles/_theme.scss          | 30 ++++++++++++++++++--------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/webapp/src/app/routes/login/login.html b/webapp/src/app/routes/login/login.html
index 64a48e0..ae49562 100644
--- a/webapp/src/app/routes/login/login.html
+++ b/webapp/src/app/routes/login/login.html
@@ -9,7 +9,7 @@
             Password
             <input type="password" autocomplete="current-password" [attr.aria-invalid]="isPasswordInvalid()" formControlName="password">
         </label>
-        <input type="submit" value="Log in" [disabled]="!isFormValid()">
+        <input type="submit" value="Log in">
     </fieldset>
 </form>
 <hr>
diff --git a/webapp/src/styles/_theme.scss b/webapp/src/styles/_theme.scss
index d5bf090..eabe869 100644
--- a/webapp/src/styles/_theme.scss
+++ b/webapp/src/styles/_theme.scss
@@ -4,32 +4,44 @@
 	--pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
 		monospace;
 
-	--theme-light-color-primary: oklch(27.3% 0.076 236.7);
-	--theme-light-color-primary-background: oklch(from var(--theme-light-color-primary) 34.8% c h);
+	--theme-light-color-primary: oklch(57.3% 0.076 236.7);
+	--theme-light-color-primary-background: oklch(from var(--theme-light-color-primary) 49.8% c h);
 	--theme-light-color-primary-background-hover: oklch(from var(--theme-light-color-primary) 42.3% c h);
-	--theme-light-color-primary-focus: oklch(from var(--theme-light-color-primary) 72.3% c h);
-	--theme-light-color-primary-hover: oklch(from var(--theme-light-color-primary) 87.3% c h);
+	--theme-light-color-primary-focus: oklch(from var(--theme-light-color-primary) 87.3% c h);
+	--theme-light-color-primary-hover: oklch(from var(--theme-light-color-primary) 72.3% c h);
 
-	--theme-light-color-secondary: oklch(29.7% 0.116 324.2);
-	--theme-light-color-secondary-background: oklch(from var(--theme-light-color-secondary) 52.2% c h);
-	--theme-light-color-secondary-selection: oklch(74.7% 0.116 324.2 / 50%);
+	--theme-light-color-secondary: oklch(64.8% 0.076 146.7);
+	--theme-light-color-secondary-background: oklch(from var(--theme-light-color-secondary) 57.3% c h);
+	--theme-light-color-secondary-background-hover: oklch(from var(--theme-light-color-secondary) 49.8% c h);
+	--theme-light-color-secondary-focus: oklch(from var(--theme-light-color-secondary) 87.3% c h);
+	--theme-light-color-secondary-hover: oklch(from var(--theme-light-color-secondary) 72.3% c h);
+
+	--theme-light-color-accent: oklch(29.7% 0.116 324.2);
+	--theme-light-color-accent-background: oklch(from var(--theme-light-color-accent) 52.2% c h);
+	--theme-light-color-accent-selection: oklch(74.7% 0.116 324.2 / 50%);
 }
 
 // Light Theme
 [data-theme='light'],
 :root:not([data-theme='dark']),
 :host:not([data-theme='dark']) {
-	--pico-text-selection-color: var(--theme-light-color-secondary-selection);
+	--pico-text-selection-color: var(--theme-light-color-accent-selection);
+
 	--pico-primary: var(--theme-light-color-primary);
 	--pico-primary-background: var(--theme-light-color-primary-background);
 	--pico-primary-underline: var(--theme-light-color-primary-hover);
-	--pico-primary-hover: #942d0d;
+	--pico-primary-hover: var(--theme-light-color-primary-hover);
 	--pico-primary-hover-background: var(--theme-light-color-primary-background-hover);
 	--pico-primary-focus: var(--theme-light-color-primary-focus);
 	--pico-primary-inverse: #fff;
 
 	--pico-secondary: var(--theme-light-color-secondary);
 	--pico-secondary-background: var(--theme-light-color-secondary-background);
+	--pico-secondary-underline: var(--theme-light-color-secondary-background-hover);
+	--pico-secondary-hover: var(--theme-light-color-secondary-hover);
+	--pico-secondary-hover-background: var(--theme-light-color-secondary-background-hover);
+	--pico-secondary-focus: var(--theme-light-color-secondary-focus);
+	--pico-secondary-inverse: #fff;
 }
 
 // Dark Theme