Merge pull request #8 from speatzle/main

Merge Colors

client/src/App.vue

@@ -97,14 +97,14 @@ onMounted(async() => {
     'nav-state-collapsed': navState === NavState.Collapsed,
     'nav-state-reduced': navState === NavState.Reduced,
   }">
-    <button class="nav-head" @click="toggleNavState">
+    <button class="nav-head cl-secondary" @click="toggleNavState">
       <i-mdi-hamburger-menu/>
       <h1>nfSense</h1>
     </button>
 
     <Portal from="page-header" class="page-header pad gap"/>
 
-    <div class="nav-body">
+    <div class="nav-body cl-secondary">
       <template v-for="(options, route) in navRoutes" :key="route">
         <router-link :to="route" class="button" @click="collapseNavIfMobile">
           <component :is="options.icon"/>
@@ -118,6 +118,7 @@ onMounted(async() => {
         <button @click="tryLogout"><i-material-symbols-logout/></button>
       </div>
     </div>
+
     <router-view v-slot="{ Component, route }" v-if="authState === AuthState.Authenticated">
       <Transition name="fade">
         <component :is="Component" :key="{route}" class="page-content pad gap"/>
@@ -128,7 +129,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-secondary">
           <h1>nfSense Login</h1>
           <h2 :hidden="!loginDisabled">Logging in...</h2>
           <label for="username" v-text="'Username'" :hidden="loginDisabled" />
@@ -149,7 +150,6 @@ onMounted(async() => {
   left: 0px; right: 0px; top: 0px; bottom: 0px;
 
   display: grid;
-  background-color: var(--cl-bg);
 }
 .layout {
   grid-template-rows: auto 1fr;
@@ -165,9 +165,6 @@ onMounted(async() => {
 .page-header { grid-area: PH; }
 .page-content { grid-area: PC; }
 
-/* Navigation */
-.nav-head, .nav-body { background: var(--cl-bg-low); }
-
 .nav-head { font-weight: bold; }
 .nav-head > svg { display: none; }
 .nav-head > h1 { flex-grow: 1; }
@@ -181,7 +178,6 @@ onMounted(async() => {
   align-items: center;
 }
 .page-header button svg { margin: -0.25rem; }
-.page-content { background: var(--cl-bg); }
 
 /* Nav-Body-Collapsing */
 .nav-body, .page-header, .page-content {

client/src/global-styles/colors.css

@@ -1,34 +1,121 @@
-/* Coloring */
+/* --- YACS --- */
 :root {
-  /* Color Definitions */
+  /* Light/Dark-Agnostic Base Tints, defined as HSL */
-  --cl-md-50: #FAFAFA;
+  --cl-base-0-h: 260;
-  --cl-md-100: #F5F5F5;
+  /* Color 0 Base Hue */
-  --cl-md-200: #EEEEEE;
+  --cl-base-0-s: 20%;
-  --cl-md-300: #E0E0E0;
+  /* Color 0 Base Saturation */
-  --cl-md-400: #BDBDBD;
+  --cl-base-0-l: 100%;
-  --cl-md-500: #9E9E9E;
+  /* Color 0 Base Lightness (Only usefull for darkening really) */
-  --cl-md-600: #757575;
+  --cl-base-1-h: 260;
-  --cl-md-700: #616161;
+  /* Same definitions for another tint */
-  --cl-md-800: #424242;
+  --cl-base-1-s: 50%;
-  --cl-md-900: #212121;
+  --cl-base-1-l: 100%;
 
-  /* Color Uses */
+  /* --- Linear Scaling with buffer --- */
-  --cl-bg: var(--cl-md-900);
+  --lin-0-buf: 5%;
-  --cl-bg-mid: var(--cl-md-800);
+  /* Edge-Buffer for lightness spectrum, reduces contrast */
-  --cl-bg-low: var(--cl-md-700);
+  --lin-0-flux: calc(var(--cl-base-0-l) - var(--lin-0-buf) * 2);
-  --cl-fg: var(--cl-md-100);
+  /* 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));
 
-  /* Apply as default */
+  /* 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));
+
+  /* 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-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);
+}
+
+@media only screen and (prefers-color-scheme: light) {
+
+  /* Light Mode Colors, simply inverts the spectrum */
+  :root {
+    --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 */
+/* Primary Color Context */
+:root, .cl-primary {
+  /* 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) */
+
+  /* Set Default Colors */
   background-color: var(--cl-bg);
   color: var(--cl-fg);
 }
 
-/* Changes for light mode */
+/* Secondary Color Context, in this case for the sidebar */
-@media screen and (prefers-color-scheme: light) {
+.cl-secondary {
-  :root {
+  /* You can replace the base-tint on a per-assignment basis, though one tint per context is usual */
-    --cl-bg: var(--cl-md-100);
+  --cl-fg: var(--cl-1-8);
-    --cl-bg-mid: var(--cl-md-200);
+  --cl-bg: var(--cl-1-2);
-    --cl-bg-low: var(--cl-md-300);
+  /* Just shift up all non-fg colors to create a lower-contrast/importance context */
-    --cl-fg: var(--cl-md-900);
+  --cl-bg-hl: var(--cl-1-3);
-  }
+  --cl-bg-el: var(--cl-1-4);
+  
+  /* Set Default Colors */
+  background-color: var(--cl-bg);
+  color: var(--cl-fg);
 }

client/src/global-styles/components.css

@@ -14,16 +14,11 @@ button, .button {
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  
-  background-color: var(--cl-bg-low);
 }
 .button > svg, button > svg {
   min-width: 1.5rem;
   min-height: 1.5rem;
 }
-.button:hover, button:hover {
-  background-color: var(--cl-bg-mid);
-}
 
 form {
   display: grid;
@@ -31,29 +26,21 @@ form {
   padding: 0.5rem;
   gap: 0.5rem;
 
-  background-color: var(--cl-bg-low);
 }
 form > :is(button, .button, h1) {
   grid-column: 1 / 3;
 }
-form button, form .button {
-  background-color: var(--cl-bg);
-}
 
 table {
   width: 100%;
   border-collapse: collapse;
 }
-thead {
-  background-color: var(--cl-bg-low);
-}
 th:hover {
-  background-color: var(--cl-bg-mid);
   cursor: pointer;
 }
 th, td {
   padding: 0.5rem;
-  border: 0.125rem solid var(--cl-bg-mid);
+  border: 0.125rem solid var(--cl-fg);
 }
 th > *{
   justify-content: center;
@@ -62,18 +49,35 @@ th > *{
 th svg {
   height: 1rem;
 }
-tbody tr:nth-child(even) {
-  background-color: var(--cl-bg-mid)
-}
 
 .search-bar {
   display: block;
   padding: 0.4rem;
-  background-color: var(--cl-bg-low);
-  color: inherit;
   border: 1px solid var(--cl-fg);
 }
 
-.multiselect, .multiselect * {
+/* Coloring */
-  all: initial;
+button, .button {
+  background-color: var(--cl-bg-el);
+}
+.button:hover, button:hover {
+  background-color: var(--cl-bg-hl);
+}
+
+input {
+  background-color: var(--cl-bg-el);
+  border: 1px solid var(--cl-fg);
+}
+
+th {
+  background-color: var(--cl-bg-el);
+}
+
+tbody tr:hover, th:hover {
+  background-color: var(--cl-bg-hl);
+}
+
+/* Button Background Exception for Nav Menu */
+.nav-body > button, .button {
+  background-color: var(--cl-bg);
 }