shadows unify (#1246)

src/scss/_core.scss

@@ -3,6 +3,7 @@
 
 @import "fonts/webfonts";
 
+@import "layout/root";
 @import "layout/core";
 @import "layout/navbar";
 @import "layout/page";

src/scss/_variables.scss

@@ -315,7 +315,21 @@ $aspect-ratios: (
 ) !default;
 
 // Shadows
-$shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+$shadow: rgba(var(--#{$prefix}body-color-rgb), .04) 0 2px 4px 0 !default;
+$shadow-transparent: 0 0 0 0 transparent !default;
+$shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), .04) !default;
+$shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), .2) !default;
+$shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), .04) !default;
+$shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), .16) 0 2px 16px 0 !default;
+
+$shadows: (
+  shadow: $shadow,
+  shadow-transparent: $shadow-transparent,
+  shadow-button: $shadow-button,
+  shadow-button-inset: $shadow-button-inset,
+  shadow-card: $shadow-card,
+  shadow-card-hover: $shadow-card-hover,
+) !default;
 
 // Transitions
 $transition-time: .3s !default;
@@ -392,6 +406,8 @@ $btn-border-radius: var(--#{$prefix}border-radius) !default;
 
 //cards
 $card-title-spacer-y: 1.25rem !default;
+$card-box-shadow: var(--#{$prefix}shadow-card) !default;
+$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
 
 $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color) !default;
@@ -408,9 +424,6 @@ $card-cap-padding-y: $card-spacer-y !default;
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
 
-$card-shadow: $shadow !default;
-$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
-
 $card-stamp-opacity: .2 !default;
 
 $cards-grid-gap: 1rem !default;

src/scss/layout/_core.scss

@@ -1,24 +1,4 @@
 // stylelint-disable property-no-vendor-prefix
-:root {
-  font-size: 16px;
-  height: 100%;
-
-  @each $name, $color in map-merge($theme-colors, $gray-colors) {
-    --#{$prefix}#{$name}: #{$color};
-    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
-    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
-  }
-
-  --#{$prefix}card-bg: #{$card-bg};
-
-  --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-light: #{$border-color-light};
-
-  --#{$prefix}icon-color: #{$icon-color};
-  --#{$prefix}disabled-bg: #{$disabled-bg};
-}
-
 body {
   overflow-y: scroll;
   letter-spacing: $body-letter-spacing;

src/scss/layout/_root.scss

@@ -0,0 +1,23 @@
+:root {
+  font-size: 16px;
+  height: 100%;
+
+  @each $name, $color in map-merge($theme-colors, $gray-colors) {
+    --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+  }
+
+  --#{$prefix}card-bg: #{$card-bg};
+
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-light: #{$border-color-light};
+
+  --#{$prefix}icon-color: #{$icon-color};
+  --#{$prefix}disabled-bg: #{$disabled-bg};
+
+  @each $name, $value in $shadows {
+    --#{$prefix}#{$name}: #{$value};
+  }
+}

src/scss/mixins/_mixins.scss

@@ -99,4 +99,5 @@
   --#{$prefix}btn-disabled-bg: transparent;
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}gradient: none;
+  --#{$prefix}btn-box-shadow: none;
 }

src/scss/ui/_buttons.scss

@@ -5,13 +5,13 @@
   --#{$prefix}btn-icon-size: #{$icon-size};
   --#{$prefix}btn-color: var(--#{$prefix}color-text);
   --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
-  //background-color: var(--#{$prefix}btn-color, var(--#{$prefix}card-bg));
-  //color: var(--#{$prefix}btn-color-text);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
+  box-shadow: var(--#{$prefix}btn-box-shadow);
 
   .icon {
     width: var(--#{$prefix}btn-icon-size);
@@ -73,6 +73,7 @@
     --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
     --#{$prefix}btn-disabled-bg: rgba(var(--#{$prefix}#{$color}-rgb), .5);
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button), var(--#{$prefix}shadow-button-inset);
   }
 
   .btn-outline-#{$color} {

src/scss/ui/_cards.scss

@@ -1,10 +1,10 @@
 .card {
   --#{$prefix}card-border-radius: var(--#{$prefix}border-radius);
 
-  box-shadow: $card-shadow;
   border: $card-border-width solid $card-border-color;
   background: var(--#{$prefix}card-bg, #{$card-bg});
   border-radius: var(--#{$prefix}card-border-radius);
+  box-shadow: var(--#{$prefix}card-box-shadow);
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
   @media print {
@@ -17,7 +17,7 @@
 
     &:hover {
       text-decoration: none;
-      box-shadow: $card-shadow-hover;
+      box-shadow: $shadow-card-hover;
     }
   }
 

src/scss/vendor/_jsvectormap.scss

@@ -4,7 +4,7 @@
   background: $dark;
   font-family: inherit;
   font-size: $h5-font-size;
-  box-shadow: $card-shadow;
+  box-shadow: $card-box-shadow;
 }
 
 .jvm-series-container .jvm-legend  .jvm-legend-title {
@@ -40,7 +40,7 @@
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1rem;
-  box-shadow: $card-shadow;
+  box-shadow: $card-box-shadow;
 
   &.jvm-zoomout {
     top: 2.5rem;