From 607dea9725e56650656a3674cae162fa02b0c8c4 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Tue, 14 Mar 2023 23:52:54 +0100
Subject: [PATCH] get new color system working

---
 client/src/App.vue                      |   4 +-
 client/src/global-styles/colors.css     | 220 +++++++++++-------------
 client/src/global-styles/components.css |  26 +--
 3 files changed, 118 insertions(+), 132 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 09efc63..a578d47 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -128,7 +128,7 @@ onMounted(async() => {
   <Transition name="fade">
     <div class="login" v-if="authState === AuthState.Unauthenticated">
       <FocusTrap>
-        <form @submit="$event => $event.preventDefault()" :disabled="loginDisabled">
+        <form @submit="$event => $event.preventDefault()" :disabled="loginDisabled" class="cl-side">
           <h1>nfSense Login</h1>
           <h2 :hidden="!loginDisabled">Logging in...</h2>
           <label for="username" v-text="'Username'" :hidden="loginDisabled" />
@@ -149,7 +149,7 @@ onMounted(async() => {
   left: 0px; right: 0px; top: 0px; bottom: 0px;
 
   display: grid;
-  background-color: var(--cl-background);
+  background-color: var(--cl-bg);
 }
 .layout {
   grid-template-rows: auto 1fr;
diff --git a/client/src/global-styles/colors.css b/client/src/global-styles/colors.css
index a99a1f9..a46bcd1 100644
--- a/client/src/global-styles/colors.css
+++ b/client/src/global-styles/colors.css
@@ -1,127 +1,113 @@
-/* Coloring */
+/* --- YACS --- */
 :root {
-  /* Color Definitions */
-  --cl-md-p-10: #21005E;
-  --cl-md-p-20: #371E73;
-  --cl-md-p-30: #4F378B;
-  --cl-md-p-40: #6750A4;
-  --cl-md-p-80: #D0BCFF;
-  --cl-md-p-90: #EADDFF;
-  --cl-md-p-100: #FFFFFF;
+  /* Light/Dark-Agnostic Base Tints, defined as HSL */
+  --cl-base-0-h: 260;
+  /* Color 0 Base Hue */
+  --cl-base-0-s: 20%;
+  /* Color 0 Base Saturation */
+  --cl-base-0-l: 100%;
+  /* Color 0 Base Lightness (Only usefull for darkening really) */
+  --cl-base-1-h: 260;
+  /* Same definitions for another tint */
+  --cl-base-1-s: 50%;
+  --cl-base-1-l: 100%;
 
-  --cl-md-s-10: #1E192B;
-  --cl-md-s-20: #332D41;
-  --cl-md-s-30: #4A4458;
-  --cl-md-s-40: #625B71;
-  --cl-md-s-80: #CCC2DC;
-  --cl-md-s-90: #E8DEF8;
-  --cl-md-s-100: #FFFFFF;
+  /* --- Linear Scaling with buffer --- */
+  --lin-0-buf: 5%;
+  /* Edge-Buffer for lightness spectrum, reduces contrast */
+  --lin-0-flux: calc(var(--cl-base-0-l) - var(--lin-0-buf) * 2);
+  /* Variable Lightness Space */
+  --lin-0-step: calc(var(--lin-0-flux) / 7);
+  /* Increment per Step, 8 steps - 1 = 7 increments */
+  /* Actual color steps */
+  --cl-base-0-1: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 0));
+  --cl-base-0-2: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 1));
+  --cl-base-0-3: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 2));
+  --cl-base-0-4: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 3));
+  --cl-base-0-5: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 4));
+  --cl-base-0-6: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 5));
+  --cl-base-0-7: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 6));
+  --cl-base-0-8: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 7));
 
-  --cl-md-t-10: #370B1E;
-  --cl-md-t-20: #492532;
-  --cl-md-t-30: #633B48;
-  --cl-md-t-40: #7D5260;
-  --cl-md-t-80: #EFB8C8;
-  --cl-md-t-90: #FFD8E4;
-  --cl-md-t-100: #FFFFFF;
+  /* Repeated for another Tint */
+  --lin-1-buf: 5%;
+  --lin-1-flux: calc(var(--cl-base-1-l) - var(--lin-1-buf) * 2);
+  --lin-1-step: calc(var(--lin-1-flux) / 7);
+  --cl-base-1-1: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 0));
+  --cl-base-1-2: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 1));
+  --cl-base-1-3: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 2));
+  --cl-base-1-4: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 3));
+  --cl-base-1-5: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 4));
+  --cl-base-1-6: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 5));
+  --cl-base-1-7: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 6));
+  --cl-base-1-8: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 7));
 
-  --cl-md-e-10: #410E0B;
-  --cl-md-e-20: #601410;
-  --cl-md-e-30: #8C1D18;
-  --cl-md-e-40: #B3261E;
-  --cl-md-e-80: #F2B8B5;
-  --cl-md-e-90: #F9DEDC;
-  --cl-md-e-100: #FFFFFF;
+  /* Dark Mode Colors*/
+  --cl-0-1: var(--cl-base-0-1);
+  --cl-0-2: var(--cl-base-0-2);
+  --cl-0-3: var(--cl-base-0-3);
+  --cl-0-4: var(--cl-base-0-4);
+  --cl-0-5: var(--cl-base-0-5);
+  --cl-0-6: var(--cl-base-0-6);
+  --cl-0-7: var(--cl-base-0-7);
+  --cl-0-8: var(--cl-base-0-8);
 
-  --cl-md-n-10: #1C1B1F;
-  --cl-md-n-90: #E6E1E5;
-  --cl-md-n-99: #FFFBFE;
-
-  --cl-md-nv-30: #49454F;
-  --cl-md-nv-50: #79747E;
-  --cl-md-nv-60: #938F99;
-  --cl-md-nv-80: #CAC4D0;
-  --cl-md-nv-90: #E7E0EC;
-
-  /* Color Uses */
-  --cl-bg: var(--cl-error);
-  --cl-bg-mid: var(--cl-error);
-  --cl-bg-low: var(--cl-error);
-  --cl-fg: var(--cl-error);
-
-  /* Dark Theme */
-  --cl-primary: var(--cl-md-p-80);
-  --cl-on-primary: var(--cl-md-p-20);
-  --cl-primary-container: var(--cl-md-p-30);
-  --cl-on-primary-container: var(--cl-md-p-90);
-  
-  --cl-secondary: var(--cl-md-s-80);
-  --cl-on-secondary: var(--cl-md-s-20);
-  --cl-secondary-container: var(--cl-md-s-30);
-  --cl-on-secondary-container: var(--cl-md-s-90);
-
-  --cl-tertiary: var(--cl-md-t-80);
-  --cl-on-tertiary: var(--cl-md-t-20);
-  --cl-tertiary-container: var(--cl-md-t-30);
-  --cl-on-tertiary-container: var(--cl-md-t-90);
-
-  --cl-error: var(--cl-md-e-80);
-  --cl-on-error: var(--cl-md-e-20);
-  --cl-error-container: var(--cl-md-e-30);
-  --cl-on-error-container: var(--cl-md-e-90);
-
-  --cl-background: var(--cl-md-n-10);
-  --cl-on-background: var(--cl-md-n-90);
-
-  --cl-surface: var(--cl-md-n-10);
-  --cl-on-surface: var(--cl-md-n-90);
-
-  --cl-surface-variant: var(--cl-md-nv-30);
-  --cl-on-surface-variant: var(--cl-md-nv-80);
-
-  --cl-outline: var(--cl-md-nv-60);
-  --cl-outline-variant: var(--cl-md-nv-30);
-
-
-  /* Apply as default */
-  background-color: var(--cl-background);
-  color: var(--cl-on-background);
+  --cl-1-1: var(--cl-base-1-1);
+  --cl-1-2: var(--cl-base-1-2);
+  --cl-1-3: var(--cl-base-1-3);
+  --cl-1-4: var(--cl-base-1-4);
+  --cl-1-5: var(--cl-base-1-5);
+  --cl-1-6: var(--cl-base-1-6);
+  --cl-1-7: var(--cl-base-1-7);
+  --cl-1-8: var(--cl-base-1-8);
 }
 
-/* Changes for light mode */
-@media screen and (prefers-color-scheme: light) {
+@media only screen and (prefers-color-scheme: light) {
+
+  /* Light Mode Colors, simply inverts the spectrum */
   :root {
-    /* Light Theme */
-    --cl-primary: var(--cl-md-p-40);
-    --cl-on-primary: var(--cl-md-p-100);
-    --cl-primary-container: var(--cl-md-p-90);
-    --cl-on-primary-container: var(--cl-md-p-10);
-    
-    --cl-secondary: var(--cl-md-s-40);
-    --cl-on-secondary: var(--cl-md-s-100);
-    --cl-secondary-container: var(--cl-md-s-90);
-    --cl-on-secondary-container: var(--cl-md-s-10);
-  
-    --cl-tertiary: var(--cl-md-t-40);
-    --cl-on-tertiary: var(--cl-md-t-100);
-    --cl-tertiary-container: var(--cl-md-t-90);
-    --cl-on-tertiary-container: var(--cl-md-t-10);
-  
-    --cl-error: var(--cl-md-e-40);
-    --cl-on-error: var(--cl-md-e-100);
-    --cl-error-container: var(--cl-md-e-90);
-    --cl-on-error-container: var(--cl-md-e-10);
-  
-    --cl-background: var(--cl-md-n-99);
-    --cl-on-background: var(--cl-md-n-10);
-  
-    --cl-surface: var(--cl-md-n-99);
-    --cl-on-surface: var(--cl-md-n-10);
-  
-    --cl-surface-variant: var(--cl-md-nv-90);
-    --cl-on-surface-variant: var(--cl-md-nv-30);
-  
-    --cl-outline: var(--cl-md-nv-50);
-    --cl-outline-variant: var(--cl-md-nv-80);
+    --cl-0-1: var(--cl-base-0-8);
+    --cl-0-2: var(--cl-base-0-7);
+    --cl-0-3: var(--cl-base-0-6);
+    --cl-0-4: var(--cl-base-0-5);
+    --cl-0-5: var(--cl-base-0-4);
+    --cl-0-6: var(--cl-base-0-3);
+    --cl-0-7: var(--cl-base-0-2);
+    --cl-0-8: var(--cl-base-0-1);
+
+    --cl-1-1: var(--cl-base-1-8);
+    --cl-1-2: var(--cl-base-1-7);
+    --cl-1-3: var(--cl-base-1-6);
+    --cl-1-4: var(--cl-base-1-5);
+    --cl-1-5: var(--cl-base-1-4);
+    --cl-1-6: var(--cl-base-1-3);
+    --cl-1-7: var(--cl-base-1-2);
+    --cl-1-8: var(--cl-base-1-1);
   }
 }
+
+/* --- Color Contexts --- */
+/* These Contexts are meant to make it easy to shift all color assignments for differentiated areas, like navigation bars or context menus */
+/* Main Color Context */
+:root, .cl-main {
+  /* Color assignments, these finally have semantic value and will be used to style components. */
+  /* More can be added as needed. */
+  --cl-fg: var(--cl-0-8);
+  /* Foreground (Text, outlines) */
+  --cl-bg: var(--cl-0-1);
+  /* Background */
+  --cl-bg-hl: var(--cl-1-2);
+  /* Highlight Background (Component on Hover, select, ...) */
+  --cl-bg-el: var(--cl-1-3);
+  /* Element Background (Component) */
+}
+
+/* Secondary Color Context, in this case for the sidebar */
+.cl-side {
+  /* You can replace the base-tint on a per-assignment basis, though one tint per context is usual */
+  --cl-fg: var(--cl-1-8);
+  --cl-bg: var(--cl-1-2);
+  /* Just shift up all non-fg colors to create a lower-contrast/importance context */
+  --cl-bg-hl: var(--cl-1-3);
+  --cl-bg-el: var(--cl-1-4);
+}
\ No newline at end of file
diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index 09376b8..3f02994 100644
--- a/client/src/global-styles/components.css
+++ b/client/src/global-styles/components.css
@@ -14,15 +14,15 @@ button, .button {
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  color: var(--cl-on-primary);
-  background-color: var(--cl-primary);
+  color: var(--cl-fg);
+  background-color: var(--cl-bg-el);
 }
 .button > svg, button > svg {
   min-width: 1.5rem;
   min-height: 1.5rem;
 }
 .button:hover, button:hover {
-  background-color: var(--cl-primary);
+  background-color: var(--cl-bg-hl);
 }
 
 form {
@@ -31,14 +31,14 @@ form {
   padding: 0.5rem;
   gap: 0.5rem;
 
-  background-color: var(--cl-secondary-container);
+  background-color: var(--cl-bg);
 }
 form > :is(button, .button, h1) {
   grid-column: 1 / 3;
 }
 form button, form .button, form input {
-  color: var(--cl-on-secondary);
-  background-color: var(--cl-secondary);
+  color: var(--cl-fg);
+  background-color: var(--cl-bg-el);
 }
 
 table {
@@ -46,15 +46,15 @@ table {
   border-collapse: collapse;
 }
 thead {
-  background-color: var(--cl-secondary-container);
+  background-color: var(--cl-bg-el);
 }
 th:hover {
-  background-color: var(--cl-secondary);
+  background-color: var(--cl-bg-hl);
   cursor: pointer;
 }
 th, td {
   padding: 0.5rem;
-  border: 0.125rem solid var(--cl-outline);
+  border: 0.125rem solid var(--cl-fg);
 }
 th > *{
   justify-content: center;
@@ -64,13 +64,13 @@ th svg {
   height: 1rem;
 }
 tbody tr:nth-child(even) {
-  background-color: var(--cl-surface-variant)
+  background-color: var(--cl-bg-el)
 }
 
 .search-bar {
   display: block;
   padding: 0.4rem;
-  background-color: var(--cl-secondary-container);
-  color: var(--cl-on-secondary-container);
-  border: 1px solid var(--cl-outline);
+  background-color: var(--cl-bg-el);
+  color: var(--cl-fg);
+  border: 1px solid var(--cl-fg);
 }