refactor: reduce scss global variables and use tokens

sass/components/_badges.scss

@@ -1,4 +1,5 @@
-.badge {
+// TODO: Make better structure
+:root {
   --bagde-height: 22px;
 }
 
@@ -17,8 +18,8 @@ span.badge {
   &.new {
     font-weight: 300;
     font-size: 0.8rem;
-    color: $font-on-primary-color-main;
-    background-color: $primary-color;
+    color:  var(--font-on-primary-color-main);
+    background-color: var(--md-sys-color-primary);
     border-radius: 2px;
   }
   &.new:after {
@@ -47,7 +48,7 @@ nav ul a span.badge {
 
 // Line height centering
 .collection-item span.badge {
-  margin-top: calc(#{1.5rem * 0.5} - #{var(--bagde-height) * 0.5});
+  margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
 }
 
 .collapsible span.badge {

sass/components/_cards.scss

@@ -173,7 +173,7 @@
       transition: color .3s ease;
 
       &:hover {
-        background-color: $primary-color-hover-opaque;
+        background-color: var(--primary-color-hover-opaque);
       }
     }
   }

sass/components/_carousel.scss

@@ -1,4 +1,6 @@
 .carousel {
+  --carousel-height: 400px;
+
   &.carousel-slider {
     top: 0;
     left: 0;
@@ -18,7 +20,7 @@
     .carousel-item {
       width: 100%;
       height: 100%;
-      min-height: $carousel-height;
+      min-height: var(--carousel-height);
       position: absolute;
       top: 0;
       left: 0;
@@ -38,15 +40,15 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: $carousel-height;
+  height: var(--carousel-height);
   perspective: 500px;
   transform-style: preserve-3d;
   transform-origin: 0% 50%;
 
   .carousel-item {
     visibility: hidden;
-    width: $carousel-item-width;
-    height: $carousel-item-height;
+    width: calc(var(--carousel-height) * 0.5);
+    height: calc(var(--carousel-height) * 0.5);
     position: absolute;
     top: 0;
     left: 0;
@@ -69,7 +71,7 @@
 
     .indicator-item {
       &.active {
-        background-color: $carousel-indicator-color-active;
+        background-color: var(--carousel-indicator-active-color);
       }
 
       display: inline-block;
@@ -78,7 +80,7 @@
       height: 8px;
       width: 8px;
       margin: 24px 4px;
-      background-color: $carousel-indicator-color;
+      background-color: var(--carousel-indicator-color);
 
       transition: background-color .3s;
       border-radius: 50%;

sass/components/_chips.scss

@@ -3,7 +3,7 @@
   --font-size-icon: 18px;
   --padding: 8px;
 
-  color: $font-color-medium;
+  color: var(--font-color-medium);
   background-color: var(--background-color-level-4dp);
 
   display: inline-flex;
@@ -27,8 +27,8 @@
 
   &:focus {
     outline: none;
-    background-color: $primary-color;
-    color: $font-on-primary-color-main;
+    background-color: var(--md-sys-color-primary);
+    color:  var(--font-on-primary-color-main);
   }
 }
 
@@ -75,9 +75,9 @@
   flex-wrap: wrap;
 
   border: none;
-  border-bottom: 1px solid $input-border-color;
+  border-bottom: 1px solid var(--font-color-medium);
   box-shadow: none;
-  margin: $input-margin;
+  margin: 0 0 8px 0;
 
   padding: 4px;
   // min-height: 45px;
@@ -86,8 +86,8 @@
   transition: all .3s;
 
   &.focus {
-    border-bottom: 1px solid $primary-color;
-    box-shadow: 0 1px 0 0 $primary-color;
+    border-bottom: 1px solid var(--md-sys-color-primary);
+    box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
   }
 
   &:hover {
@@ -97,12 +97,11 @@
   input:not([type]):not(.browser-default).input {
     background: none;
     border: 0;
-    color: $input-color;
+    color: var(--md-sys-color-on-background);
     display: inline-block;
-    font-size: $input-font-size;
+    font-size: 16px;
 
     // height: 32px;
-    // height: $input-height;
     // line-height: 32px;
     height: 32px;
 

sass/components/_collapsible.scss

@@ -42,7 +42,7 @@
 
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: $surface-focus-color-opaque;
+  background-color: var(--focus-color);
 }
 
 .collapsible-body {

sass/components/_collection.scss

@@ -64,23 +64,23 @@
     }
 
     &.active {
-      background-color: $primary-color;
-      color: $font-on-primary-color-main;
+      background-color: var(--md-sys-color-primary);
+      color:  var(--font-on-primary-color-main);
 
       .secondary-content {
-        color: $font-on-primary-color-main;
+        color:  var(--font-on-primary-color-main);
       }
     }
   }
 
   a.collection-item {
     display: block;
     transition: .25s;
-    color: $primary-color;
+    color: var(--md-sys-color-primary);
 
     &:not(.active) {
       &:hover {
-        background-color: $surface-hover-color-opaque;
+        background-color: var(--hover-color);
       }
     }
   }

sass/components/_datepicker.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   padding: 0;
-  background-color: $surface-color;
+  background-color: var(--surface-color);
 }
 
 .datepicker-controls {
@@ -54,7 +54,7 @@
 
   .month-prev > svg,
   .month-next > svg {
-    fill: $button-flat-color;
+    fill: var(--font-color-medium);
   }
 }
 
@@ -70,15 +70,15 @@
 .datepicker-date-display {
   flex: 1 auto;
   background-color: var(--primary-color);
-  color: $font-on-primary-color-main;
+  color:  var(--font-on-primary-color-main);
   padding: 20px 22px;
   font-weight: 500;
 
   .year-text {
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color: $datepicker-year;
+    color:  var(--font-on-primary-color-main);
   }
 
   .date-text {
@@ -115,24 +115,24 @@
 
   abbr {
     text-decoration: none;
-    color: $datepicker-calendar-header-color;
+    color: var(--font-color-medium);
   }
 
   td {
-    color: $datepicker-day-font-color;
+    color: var(--md-sys-color-on-background);
 
     &.is-today {
       color: var(--primary-color);
     }
 
     &.is-selected {
       background-color: var(--primary-color);
-      color: $font-on-primary-color-main;
+      color:  var(--font-on-primary-color-main);
     }
 
     &.is-outside-current-month,
     &.is-disabled {
-      color: $datepicker-day-font-color-disabled;
+      color: var(--font-color-disabled);
       pointer-events: none;
     }
 
@@ -153,11 +153,11 @@
   color: inherit;
 
   &:hover {
-    background-color: $datepicker-day-hover;
+    background-color: var(--primary-color-hover-opaque);
   }
 
   &:focus {
-    background-color: $datepicker-day-focus;
+    background-color: var(--primary-color-focus-opaque);
   }
 }
 

sass/components/_dropdown.scss

@@ -47,7 +47,7 @@
     }
 
     clear: both;
-    color: var(--md-sys-color-on-background); //$text-color;
+    color: var(--md-sys-color-on-background);
     cursor: pointer;
     min-height: $dropdown-item-height;
     line-height: 1.5rem;
@@ -58,7 +58,7 @@
 
 body.keyboard-focused {
   .dropdown-content li:focus {
-    background-color: $dropdown-focus-bg-color;
+    background-color: var(--focus-color);
   }
 }
 

sass/components/_global.scss

@@ -135,19 +135,19 @@ video.responsive-video {
     height: 30px;
 
     a {
-      color: $font-color-medium;
+      color: var(--font-color-medium);
       display: inline-block;
       font-size: 1.2rem;
       padding: 0 10px;
       line-height: 30px;
     }
 
     &:hover:not(.disabled) {
-      background-color: $primary-color-hover-opaque;
+      background-color: var(--primary-color-hover-opaque);
     }
 
     &.active a {
-      color: $font-on-primary-color-main;
+      color:  var(--font-on-primary-color-main);
     }
 
     &.active,
@@ -157,7 +157,7 @@ video.responsive-video {
 
     &.disabled a {
       cursor: default;
-      color: $font-color-disabled;
+      color: var(--font-color-disabled);
     }
 
     i {
@@ -193,7 +193,7 @@ video.responsive-video {
 .breadcrumb {
   display: inline-block;
   font-size: 18px;
-  color: $font-on-primary-color-medium;
+  color: var(--font-on-primary-color-medium);
 
   i,
   [class^="mdi-"], [class*="mdi-"],
@@ -206,7 +206,7 @@ video.responsive-video {
 
   &:before {
     content: '\E5CC';
-    color: $font-on-primary-color-medium;
+    color: var(--font-on-primary-color-medium);
     vertical-align: top;
     display: inline-block;
     font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
@@ -223,7 +223,7 @@ video.responsive-video {
   }
 
   &:last-child {
-    color: $font-on-primary-color-main;
+    color:  var(--font-on-primary-color-main);
   }
 }
 
@@ -334,11 +334,11 @@ ul.staggered-list li { opacity: 0; }
 // Footer
 .page-footer {
   padding-top: 20px;
-  color: $footer-font-color;
-  background-color: $footer-bg-color;
+  color:  var(--font-on-primary-color-main);
+  background-color: var(--md-sys-color-primary);
 
   a {
-    color: $footer-font-color;
+    color:  var(--font-on-primary-color-main);
   }
 
   .footer-copyright,
@@ -349,8 +349,8 @@ ul.staggered-list li { opacity: 0; }
     align-items: center;
     justify-content: space-between;
     padding: 10px 0px;
-    color: $footer-copyright-font-color;
-    background-color: $footer-copyright-bg-color;
+    color: var(--font-on-primary-color-dark-medium);
+    background-color: var(--primary-color-dark);
   }
 }
 
@@ -383,12 +383,12 @@ table {
     transition: background-color .25s ease;
 
     &:hover {
-      background-color: $surface-hover-color-opaque;
+      background-color: var(--hover-color);
     }
   }
 
   thead {
-    color: $font-color-medium;
+    color: var(--font-color-medium);
   }
 
   &.centered {