refactor: improve elevation system

Author: mrholek

scss/_app.scss

@@ -7,5 +7,6 @@
     background-color: themes-get-value("body-bg");
 
     --color: #{themes-get-value("body-color")};
+    --elevation-base-color: #{themes-get-value("elevation-base-color")};
   }
 }

scss/mixins/_elevation.scss

@@ -1,5 +1,8 @@
 @mixin add-elevation($level, $direction: false) {
   border: 0;
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    box-shadow: str-replace(unquote(map-get($elevations, $level)), 'var(--elevation-base-color)', $elevation-base-color);
+  }
   box-shadow: unquote(map-get($elevations, $level));
 
   @if $direction == "bottom" {

scss/variables/_body.scss

@@ -4,14 +4,16 @@
 
 $body-bg:     $gray-100 !default;
 $body-color:  $gray-base !default;
+$elevation-base-color: 60, 75, 100 !default; //#3c4b64
 
 $body-theme-map: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $body-theme-map: map-merge(
   (
     default: (
       "body-bg":     $body-bg,
-      "body-color":  $body-color
+      "body-color":  $body-color,
+      "elevation-base-color": $elevation-base-color
     )
   ),
   $body-theme-map

scss/variables/_elevation.scss

@@ -4,14 +4,14 @@
 
 $elevations: (
   0:   "none",
-  1:   "0 1px 1px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .20)",
-  2:   "0 2px 2px 0 rgba(60, 75, 100, .14), 0 3px 1px -2px rgba(60, 75, 100, .12), 0 1px 5px 0 rgba(60, 75, 100, .20)",
-  3:   "0 3px 4px 0 rgba(60, 75, 100, .14), 0 3px 3px -2px rgba(60, 75, 100, .12), 0 1px 8px 0 rgba(60, 75, 100, .20)",
-  4:   "0 4px 5px 0 rgba(60, 75, 100, .14), 0 1px 10px 0 rgba(60, 75, 100, .12), 0 2px 4px -1px rgba(60, 75, 100, .20)",
-  6:   "0 6px 10px 0 rgba(60, 75, 100, .14), 0 1px 18px 0 rgba(60, 75, 100, .12), 0 3px 5px -1px rgba(60, 75, 100, .20)",
-  8:   "0 8px 10px 1px rgba(60, 75, 100, .14), 0 3px 14px 2px rgba(60, 75, 100, .12), 0 5px 5px -3px rgba(60, 75, 100, .20)",
-  9:   "0 9px 12px 1px rgba(60, 75, 100, .14), 0 3px 16px 2px rgba(60, 75, 100, .12), 0 5px 6px -3px rgba(60, 75, 100, .20)",
-  12:  "0 12px 17px 2px rgba(60, 75, 100, .14), 0 5px 22px 4px rgba(60, 75, 100, .12), 0 7px 8px -4px rgba(60, 75, 100, .20)",
-  16:  "0 16px 24px 2px rgba(60, 75, 100, .14), 0 6px 30px 5px rgba(60, 75, 100, .12), 0 8px 10px -5px rgba(60, 75, 100, .20)",
-  24:  "0 24px 38px 3px rgba(60, 75, 100, .14), 0 9px 46px 8px rgba(60, 75, 100, .12), 0 11px 15px -7px rgba(60, 75, 100, .20)"
+  1:   "0 1px 1px 0 rgba(var(--elevation-base-color), .14), 0 2px 1px -1px rgba(var(--elevation-base-color), .12), 0 1px 3px 0 rgba(var(--elevation-base-color), .20)",
+  2:   "0 2px 2px 0 rgba(var(--elevation-base-color), .14), 0 3px 1px -2px rgba(var(--elevation-base-color), .12), 0 1px 5px 0 rgba(var(--elevation-base-color), .20)",
+  3:   "0 3px 4px 0 rgba(var(--elevation-base-color), .14), 0 3px 3px -2px rgba(var(--elevation-base-color), .12), 0 1px 8px 0 rgba(var(--elevation-base-color), .20)",
+  4:   "0 4px 5px 0 rgba(var(--elevation-base-color), .14), 0 1px 10px 0 rgba(var(--elevation-base-color), .12), 0 2px 4px -1px rgba(var(--elevation-base-color), .20)",
+  6:   "0 6px 10px 0 rgba(var(--elevation-base-color), .14), 0 1px 18px 0 rgba(var(--elevation-base-color), .12), 0 3px 5px -1px rgba(var(--elevation-base-color), .20)",
+  8:   "0 8px 10px 1px rgba(var(--elevation-base-color), .14), 0 3px 14px 2px rgba(var(--elevation-base-color), .12), 0 5px 5px -3px rgba(var(--elevation-base-color), .20)",
+  9:   "0 9px 12px 1px rgba(var(--elevation-base-color), .14), 0 3px 16px 2px rgba(var(--elevation-base-color), .12), 0 5px 6px -3px rgba(var(--elevation-base-color), .20)",
+  12:  "0 12px 17px 2px rgba(var(--elevation-base-color), .14), 0 5px 22px 4px rgba(var(--elevation-base-color), .12), 0 7px 8px -4px rgba(var(--elevation-base-color), .20)",
+  16:  "0 16px 24px 2px rgba(var(--elevation-base-color), .14), 0 6px 30px 5px rgba(var(--elevation-base-color), .12), 0 8px 10px -5px rgba(var(--elevation-base-color), .20)",
+  24:  "0 24px 38px 3px rgba(var(--elevation-base-color), .14), 0 9px 46px 8px rgba(var(--elevation-base-color), .12), 0 11px 15px -7px rgba(var(--elevation-base-color), .20)"
 ) !default;