💄 Store colors in a nested map to make them reachable using criteria

src/_base.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $font-size: 100vh * 0.01;
 $icon-size: $font-size * 2;
 
@@ -51,11 +53,124 @@ $color-ternary-70: #8B0046;
 $color-ternary-60: #720033;
 $color-ternary-50: #5A0022;
 
-$color-critical: #C91B13;
+$color-critical-130: #F29088;
-$color-warning: #FFA316;
+$color-critical-120: #E86F62;
-$color-success: #4AAB79;
+$color-critical-110: #DA4B3C;
+$color-critical-100: #C91B13;
+$color-critical-90: #A9191A;
+$color-critical-80: #88181C;
+$color-critical-70: #68171B;
 
-$border-default-color: $greyscale-90;
+$color-success-130: #A6D3B1;
+$color-success-120: #8AC59D;
+$color-success-110: #6CB88A;
+$color-success-100: #4AAB79;
+$color-success-90: #418E63;
+$color-success-80: #38724E;
+$color-success-70: #2E573A;
+
+$color-warning-130: #FFCCC0;
+$color-warning-120: #FFBC9E;
+$color-warning-110: #FFAC6A;
+$color-warning-100: #FFA114;
+$color-warning-90: #D18915;
+$color-warning-80: #A67016;
+$color-warning-70: #7D5816;
+
+$colors: (
+    "greyscale": (
+        90: $greyscale-90,
+        80: $greyscale-80,
+        70: $greyscale-70,
+        60: $greyscale-60,
+        50: $greyscale-50,
+        40: $greyscale-40,
+        30: $greyscale-30,
+        20: $greyscale-20,
+        10: $greyscale-10,
+        0: $greyscale-0,
+    ),
+
+    "primary": (
+        150: $color-primary-150,
+        140: $color-primary-140,
+        130: $color-primary-130,
+        120: $color-primary-120,
+        110: $color-primary-110,
+        100: $color-primary-100,
+        90: $color-primary-90,
+        80: $color-primary-80,
+        70: $color-primary-70,
+        60: $color-primary-60,
+        50: $color-primary-50,
+    ),
+
+    "secondary": (
+        150: $color-secondary-150,
+        140: $color-secondary-140,
+        130: $color-secondary-130,
+        120: $color-secondary-120,
+        110: $color-secondary-110,
+        100: $color-secondary-100,
+        90: $color-secondary-90,
+        80: $color-secondary-80,
+        70: $color-secondary-70,
+        60: $color-secondary-60,
+        50: $color-secondary-50,
+    ),
+
+    "ternary": (
+        150: $color-ternary-150,
+        140: $color-ternary-140,
+        130: $color-ternary-130,
+        120: $color-ternary-120,
+        110: $color-ternary-110,
+        100: $color-ternary-100,
+        90: $color-ternary-90,
+        80: $color-ternary-80,
+        70: $color-ternary-70,
+        60: $color-ternary-60,
+        50: $color-ternary-50,
+    ),
+
+    "critical": (
+        130: $color-critical-130,
+        120: $color-critical-120,
+        110: $color-critical-110,
+        100: $color-critical-100,
+        90: $color-critical-90,
+        80: $color-critical-80,
+        70: $color-critical-70,
+    ),
+
+    "success": (
+        130: $color-success-130,
+        120: $color-success-120,
+        110: $color-success-110,
+        100: $color-success-100,
+        90: $color-success-90,
+        80: $color-success-80,
+        70: $color-success-70,
+    ),
+
+    "warning": (
+        130: $color-warning-130,
+        120: $color-warning-120,
+        110: $color-warning-110,
+        100: $color-warning-100,
+        90: $color-warning-90,
+        80: $color-warning-80,
+        70: $color-warning-70,
+    ),
+);
+
+@function get-color($color-name, $color-level) {
+    $color: map.get($colors, $color-name);
+    @return map.get($color, $color-level);
+
+}
+
+$border-default-color: get-color(greyscale, 90);
 $border-big-width: 4px;
 $border-big: solid $border-big-width $border-default-color;
 $border-normal-width: 2px;

src/components/button.scss

@@ -7,7 +7,7 @@
     border: $border-big;
     border-radius: $border-radius;
 
-    color: $greyscale-0;
+    color: get-color(greyscale, 0);
 
     font-family: "Geist";
     font-weight: bold;
@@ -18,31 +18,36 @@
     }
 }
 
-.register-button {
+@mixin button($color-name, $color-level) {
     @extend %button;
 
-    background-color: $color-ternary-90;
+    background-color: get_color($color-name, $color-level);
 
     &:hover {
-        background-color: $color-ternary-80;
+        background-color: get_color($color-name, calc($color-level - 10));
     }
 
     &:active {
-        background-color: $color-ternary-70;
+        background-color: get_color($color-name, calc($color-level - 20));
     }
 }
 
+.register-button {
+    @include button(ternary, 90);
+}
 
 .login-button {
-    @extend %button;
+    @include button(secondary, 90);
-
-    background-color: $color-secondary-90;
-
-    &:hover {
-        background-color: $color-secondary-80;
 }
 
-    &:active {
+.success-button {
-        background-color: $color-secondary-70;
+    @include button(success, 100);
 }
+
+.warning-button {
+    @include button(warning, 100);
+}
+
+.error-button {
+    @include button(critical, 100);
 }

src/components/loading.scss

@@ -75,6 +75,6 @@
             top: calc($logo-center-pos + ($background-height * 18));
         }
 
-        background-color: $greyscale-0;
+        background-color: get-color(greyscale, 0);
     }
 }

src/components/login.scss

@@ -22,10 +22,10 @@
         aspect-ratio: $form-aspect-ratio;
 
         border: $border-big;
-        border-color: $color-primary-90;
+        border-color: get-color(primary, 90);
         border-radius: $border-radius;
 
-        background-color: $greyscale-0;
+        background-color: get-color(greyscale, 0);
 
         display: grid;
 

src/components/spinner.scss

@@ -18,21 +18,21 @@ $logo-aspect-ratio: calc($logo-width / $logo-height);
         height: 100%;
         width: 100%;
 
-        fill: $color-primary-100;
+        fill: get-color(primary, 100);
-        stroke: $greyscale-90;
+        stroke: get-color(greyscale, 90);
 
         animation: 3s multicolor linear infinite;
         animation-timing-function: steps($steps, end);
 
         @keyframes multicolor {
             0% {
-                fill: $color-primary-100;
+                fill: get-color(primary, 100);
             }
             33% {
-                fill: $color-secondary-100;
+                fill: get-color(secondary, 100);
             }
             66% {
-                fill: $color-ternary-100;
+                fill: get-color(ternary, 100);
             }
         }
 

src/components/text_input.scss

@@ -7,7 +7,7 @@
     width: calc(100% - (2 * $horizontal-padding));
 
     border: $border-normal;
-    border-color: $color-primary-90;
+    border-color: get-color(primary, 90);
     border-radius: $border-radius;
 
     padding-left: $horizontal-padding;
@@ -33,7 +33,7 @@
     }
 
     &.invalid {
-        border-color: $color-critical;
+        border-color: get-color(critical, 100);
     }
 }
 
@@ -43,13 +43,13 @@
 
     font-size: 1.2vh;
 
-    color: $color-primary-90;
+    color: get-color(primary, 90);
 
     p {
         margin: 0;
 
         &.invalid {
-            color: $color-critical;
+            color: get-color(critical, 100);
         }
     }
 }
@@ -118,7 +118,7 @@
             height: 100%;
             width: 100%;
 
-            color: $color-secondary-100;
+            color: get-color(secondary, 100),
         }
     }