WIP

Author: EranNL

src/style/base/_variables.scss

@@ -196,7 +196,6 @@ $success-color-active: color('green', 'active');
     --primary-color-hover: #{$primary-color-hover};
     --primary-color-active: #{$primary-color-active};
     --primary-color-light-background: #{$primary-color-light-background};
-    --primary-color-shadow-lighter: #{$primary-color-shadow-lighter};
 
     --danger-color: #{$danger-color};
     --danger-color-hover: #{$danger-color-hover};
@@ -223,8 +222,8 @@ $panel-gutter: 2rem;
  * 4. Page
  */
 $page-gutter: 2rem;
-$page-side-background-color: mixins.color('gray', 100);
-$page-side-border-color: mixins.color('gray', 300);
+$page-side-background-color: hsl(0, 0%, 96%);
+$page-side-border-color: hsl(0, 0%, 88%);
 $page-side-gutter: 1rem;
 $page-header-height: 120px;
 
@@ -581,7 +580,7 @@ $form-field-font-size: 1rem;
 /**
  * 9. Navigation
  */
-$vertical-navigation-border-color: mixins.color('gray', 300);
+$vertical-navigation-border-color: hsl(0, 0%, 88%);
 $vertical-navigation-active-item-background-color: rgba(0, 0, 0, .05);
 
 :root {

src/style/components/_navigation.scss

@@ -1,4 +1,4 @@
-@use "../base/mixins";
+@use "../base/variables";
 
 .vertical-navigation-container {
     width: 100%;
@@ -51,13 +51,13 @@
 }
 
 .navigation-primary {
-    color: mixins.color('deepPurple', 50);
+    color: variables.color('deep-purple', 'background');
 
     .vertical-navigation-list-item {
         color: currentColor;
     }
 
     .vertical-navigation-divider {
-        background: var(--primary-color-shadow-lighter);
+        background: var(--primary-color-light-background);
     }
 }