trying material design

client/src/App.vue

@@ -149,7 +149,7 @@ onMounted(async() => {
   left: 0px; right: 0px; top: 0px; bottom: 0px;
 
   display: grid;
-  background-color: var(--cl-bg);
+  background-color: var(--cl-background);
 }
 .layout {
   grid-template-rows: auto 1fr;
@@ -166,7 +166,7 @@ onMounted(async() => {
 .page-content { grid-area: PC; }
 
 /* Navigation */
-.nav-head, .nav-body { background: var(--cl-bg-low); }
+.nav-head, .nav-body { background: var(--cl-secondary-container); }
 
 .nav-head { font-weight: bold; }
 .nav-head > svg { display: none; }
@@ -181,7 +181,7 @@ onMounted(async() => {
   align-items: center;
 }
 .page-header button svg { margin: -0.25rem; }
-.page-content { background: var(--cl-bg); }
+.page-content { background: var(--cl-background); }
 
 /* Nav-Body-Collapsing */
 .nav-body, .page-header, .page-content {

client/src/global-styles/colors.css

@@ -1,34 +1,127 @@
 /* Coloring */
 :root {
   /* Color Definitions */
-  --cl-md-50: #FAFAFA;
+  --cl-md-p-10: #21005E;
-  --cl-md-100: #F5F5F5;
+  --cl-md-p-20: #371E73;
-  --cl-md-200: #EEEEEE;
+  --cl-md-p-30: #4F378B;
-  --cl-md-300: #E0E0E0;
+  --cl-md-p-40: #6750A4;
-  --cl-md-400: #BDBDBD;
+  --cl-md-p-80: #D0BCFF;
-  --cl-md-500: #9E9E9E;
+  --cl-md-p-90: #EADDFF;
-  --cl-md-600: #757575;
+  --cl-md-p-100: #FFFFFF;
-  --cl-md-700: #616161;
+
-  --cl-md-800: #424242;
+  --cl-md-s-10: #1E192B;
-  --cl-md-900: #212121;
+  --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;
+
+  --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;
+
+  --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;
+
+  --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-md-900);
+  --cl-bg: var(--cl-error);
-  --cl-bg-mid: var(--cl-md-800);
+  --cl-bg-mid: var(--cl-error);
-  --cl-bg-low: var(--cl-md-700);
+  --cl-bg-low: var(--cl-error);
-  --cl-fg: var(--cl-md-100);
+  --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-bg);
+  background-color: var(--cl-background);
-  color: var(--cl-fg);
+  color: var(--cl-on-background);
 }
 
 /* Changes for light mode */
 @media screen and (prefers-color-scheme: light) {
   :root {
-    --cl-bg: var(--cl-md-100);
+    /* Light Theme */
-    --cl-bg-mid: var(--cl-md-200);
+    --cl-primary: var(--cl-md-p-40);
-    --cl-bg-low: var(--cl-md-300);
+    --cl-on-primary: var(--cl-md-p-100);
-    --cl-fg: var(--cl-md-900);
+    --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);
   }
 }

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-bg-low);
+  background-color: var(--cl-primary);
 }
 .button > svg, button > svg {
   min-width: 1.5rem;
   min-height: 1.5rem;
 }
 .button:hover, button:hover {
-  background-color: var(--cl-bg-mid);
+  background-color: var(--cl-primary);
 }
 
 form {
@@ -31,13 +31,14 @@ form {
   padding: 0.5rem;
   gap: 0.5rem;
 
-  background-color: var(--cl-bg-low);
+  background-color: var(--cl-secondary-container);
 }
 form > :is(button, .button, h1) {
   grid-column: 1 / 3;
 }
-form button, form .button {
+form button, form .button, form input {
-  background-color: var(--cl-bg);
+  color: var(--cl-on-secondary);
+  background-color: var(--cl-secondary);
 }
 
 table {
@@ -45,15 +46,15 @@ table {
   border-collapse: collapse;
 }
 thead {
-  background-color: var(--cl-bg-low);
+  background-color: var(--cl-secondary-container);
 }
 th:hover {
-  background-color: var(--cl-bg-mid);
+  background-color: var(--cl-secondary);
   cursor: pointer;
 }
 th, td {
   padding: 0.5rem;
-  border: 0.125rem solid var(--cl-bg-mid);
+  border: 0.125rem solid var(--cl-outline);
 }
 th > *{
   justify-content: center;
@@ -63,17 +64,13 @@ th svg {
   height: 1rem;
 }
 tbody tr:nth-child(even) {
-  background-color: var(--cl-bg-mid)
+  background-color: var(--cl-surface-variant)
 }
 
 .search-bar {
   display: block;
   padding: 0.4rem;
-  background-color: var(--cl-bg-low);
+  background-color: var(--cl-secondary-container);
-  color: inherit;
+  color: var(--cl-on-secondary-container);
-  border: 1px solid var(--cl-fg);
+  border: 1px solid var(--cl-outline);
-}
-
-.multiselect, .multiselect * {
-  all: initial;
 }