correctly style most things

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" class="cl-side">
+        <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-secondary-container); }
-
 .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-background); }
 
 /* Nav-Body-Collapsing */
 .nav-body, .page-header, .page-content {

client/src/global-styles/colors.css

@@ -88,8 +88,8 @@
 
 /* --- 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 {
+/* 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);
@@ -100,14 +100,22 @@
   /* 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);
 }
 
 /* Secondary Color Context, in this case for the sidebar */
-.cl-side {
+.cl-secondary {
   /* 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);
+  
+  /* 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;
-  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-bg-hl);
-}
 
 form {
   display: grid;
@@ -31,25 +26,16 @@ form {
   padding: 0.5rem;
   gap: 0.5rem;
 
-  background-color: var(--cl-bg);
 }
 form > :is(button, .button, h1) {
   grid-column: 1 / 3;
 }
-form button, form .button, form input {
-  color: var(--cl-fg);
-  background-color: var(--cl-bg-el);
-}
 
 table {
   width: 100%;
   border-collapse: collapse;
 }
-thead {
-  background-color: var(--cl-bg-el);
-}
 th:hover {
-  background-color: var(--cl-bg-hl);
   cursor: pointer;
 }
 th, td {
@@ -63,14 +49,35 @@ th > *{
 th svg {
   height: 1rem;
 }
-tbody tr:nth-child(even) {
-  background-color: var(--cl-bg-el)
-}
 
 .search-bar {
   display: block;
   padding: 0.4rem;
-  background-color: var(--cl-bg-el);
-  color: var(--cl-fg);
   border: 1px solid var(--cl-fg);
 }
+
+/* Coloring */
+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);
+}