Merge pull request #925 from tabler/dev-colors

src/scss/_variables.scss

@@ -84,8 +84,19 @@ $text-muted-dark-opacity: .8 !default;
 $border-opacity: .16 !default;
 $border-dark-opacity: .24 !default;
 
-$light: #f4f6fa !default;
-$dark: #232e3c !default;
+$gray-50: #f8fafc !default;
+$gray-100: #f1f5f9 !default;
+$gray-200: #e2e8f0 !default;
+$gray-300: #cbd5e1 !default;
+$gray-400: #94a3b8 !default;
+$gray-500: #64748b !default;
+$gray-600: #475569 !default;
+$gray-700: #334155 !default;
+$gray-800: #1e293b !default;
+$gray-900: #0f172a !default;
+
+$light: $gray-50 !default;
+$dark: $gray-800 !default;
 
 $body-bg: $light !default;
 $body-color: $dark !default;
@@ -93,24 +104,6 @@ $body-color: $dark !default;
 $color-contrast-dark: $dark !default;
 $color-contrast-light: $light !default;
 
-$light-black: rgba($dark, .24) !default;
-$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
-$light-white: rgba($light, .24) !default;
-
-$min-black: rgba($dark, .024) !default;
-$min-white: rgba(mix($light, $dark, 48%), .1) !default;
-
-$gray-50: #fbfbfb !default;
-$gray-100: $light !default;
-$gray-200: mix($light, $dark, 98%) !default;
-$gray-300: mix($light, $dark, 94%) !default;
-$gray-400: mix($light, $dark, 88%) !default;
-$gray-500: mix($light, $dark, 78%) !default;
-$gray-600: mix($light, $dark, 60%) !default;
-$gray-700: mix($light, $dark, 36%) !default;
-$gray-800: mix($light, $dark, 16%) !default;
-$gray-900: $dark !default;
-
 $blue: #206bc4 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
@@ -579,7 +572,7 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
 $form-switch-bg-size: auto !default;
 
 $form-range-track-height: .25rem !default;
-$form-range-track-bg: $light-mix !default;
+$form-range-track-bg: $gray-200 !default;
 $form-range-thumb-border: 2px solid $white !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;

src/scss/ui/_cards.scss

@@ -187,7 +187,7 @@ Card footer
 
 .card-footer-gray {
   border-top: 0;
-  background: $min-black;
+  background: $gray-50;
 }
 
 .card-progress {

src/scss/ui/_forms.scss

@@ -130,7 +130,7 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: $min-black;
+  background: $gray-50;
   border: 1px solid $border-color;
   border-radius: $border-radius;
 }
@@ -151,7 +151,7 @@ Form help
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: $min-white;
+  background: $gray-100;
   border-radius: $border-radius-pill;
   @include transition(background-color $transition-time, color $transition-time);
 

src/scss/utils/_background.scss

 .bg-white-overlay {
   color: $white;
-  background-color: $light-white;
+  background-color: rgba($light, .24);
 }
 
 .bg-dark-overlay {
   color: $white;
-  background-color: $light-black;
+  background-color: rgba($dark, .24);
 }
 
 .bg-cover {

src/scss/utils/_colors.scss

@@ -16,7 +16,7 @@ SOCIAL COLORS
 
 
 @if $enable-extra-colors {
-  @each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
+  @each $color, $value in map-merge($colors, ( muted: $text-muted )) {
     .bg-#{"" + $color} {
       background: $value;
     }