card-bg fix, create bg-surface

src/pages/_includes/ui/map-vector.html

@@ -42,7 +42,7 @@
 					{% if data.values %}
 					// -------- Series --------
 					visualizeData: {
-						scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
+						scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
 						values: {{ data.values }},
 					},
 					{% endif %}

src/scss/_variables.scss

@@ -96,9 +96,15 @@ $gray-700: #313c52 !default;
 $gray-800: #1d273b !default;
 $gray-900: #0f172a !default;
 
+$black: #000000 !default;
+$white: #ffffff !default;
+
 $light: $gray-50 !default;
 $dark: $gray-800 !default;
 
+$bg-surface: $white !default;
+$bg-surface-dark: $dark !default;
+
 $body-bg: $gray-100 !default;
 $body-color: $dark !default;
 
@@ -117,8 +123,6 @@ $lime: #74b816 !default;
 $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
-$black: #000000 !default;
-$white: #ffffff !default;
 
 $text-muted: mix($body-color, #ffffff, percentage($text-muted-opacity)) !default;
 $text-muted-light: mix($body-color, #ffffff, percentage($text-muted-light-opacity)) !default;
@@ -409,9 +413,9 @@ $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-bg: #f8fafc !default;
+$card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;
-$card-color: $dark !default;
+$card-color: var(--#{$prefix}bg-surface) !default;
 
 $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color) !default;

src/scss/layout/_page.scss

@@ -33,7 +33,7 @@
 }
 
 .page-body-card {
-  background: $card-bg;
+  background: var(--#{$prefix}bg-surface);
   border-top: 1px solid $card-border-color;
   padding: $content-padding-y 0;
   margin-bottom: 0;

src/scss/layout/_root.scss

@@ -9,7 +9,8 @@
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
   }
 
-  --#{$prefix}card-bg: #{$card-bg};
+  --#{$prefix}bg-surface: #{$bg-surface};
+  --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
 
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-light: #{$border-color-light};

src/scss/ui/_avatars.scss

@@ -75,7 +75,7 @@
 .avatar-list-stacked {
   .avatar {
     margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg);
+    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   }
 }
 

src/scss/ui/_buttons.scss

@@ -56,8 +56,8 @@
 // Button color variations
 //
 .btn-white {
-  --#{$prefix}btn-bg: var(--#{$prefix}card-bg);
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg-hover);
+  --#{$prefix}btn-bg: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg-hover, var(--#{$prefix}bg-surface));
 }
 
 @each $color, $value in $theme-colors {

src/scss/ui/_cards.scss

@@ -1,10 +1,10 @@
 .card {
   --#{$prefix}card-border-radius: var(--#{$prefix}border-radius);
-  --#{$prefix}card-bg: var(--#{$prefix}card-bg);
-  --#{$prefix}card-color: var(--#{$prefix}card-color);
+  --#{$prefix}card-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}card-color: var(--#{$prefix}body-color);
 
   border: $card-border-width solid $card-border-color;
-  background: var(--#{$prefix}card-bg, #{$card-bg});
+  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   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);
@@ -58,7 +58,7 @@
 
 .card-stamp-icon {
   background: var(--#{$prefix}muted);
-  color: var(--#{$prefix}card-bg);
+  color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -157,8 +157,8 @@
     left: 5px;
     height: 5px;
     content: "";
-    background: $card-bg;
-    border: 1px solid $card-border-color;
+    background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    border: 1px solid var(--#{$prefix}card-border-color);
     border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
   }
 }
@@ -484,7 +484,7 @@ Card avatar
 .card-avatar {
   margin-left: auto;
   margin-right: auto;
-  box-shadow: 0 0 0 .25rem $card-bg;
+  box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * .5));
 }
 
@@ -534,7 +534,7 @@ Card list group
 
       &.active {
         color: $headings-color;
-        background: $card-bg;
+        background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
         border-bottom-color: transparent;
       }
     }

src/scss/ui/_progress.scss

@@ -68,7 +68,7 @@ Progress bar
 
 .progress-separated {
   .progress-bar {
-    border-right: 2px solid var(--#{$prefix}card-bg, #{$card-bg});
+    border-right: 2px solid var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   }
 }
 

src/scss/vendor/_jsvectormap.scss

@@ -13,7 +13,7 @@
 }
 
 .jvm-series-container .jvm-legend {
-  background-color: var(--#{$prefix}card-bg);
+  background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   border: 1px solid var(--#{$prefix}border-color);
   min-width: 8rem;
 
@@ -30,7 +30,7 @@
 
 .jvm-zoom-btn {
   border: 1px solid var(--#{$prefix}border-color);
-  background: var(--#{$prefix}card-bg);
+  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   color: var(--#{$prefix}body-color);
   padding: 0;
   display: flex;