refactor: improve dark theme colors

mrholek · mrholek · commit 095284ba2e43 · 2020-11-07T22:12:07.000+01:00
diff --git a/scss/themes/dark/_variables.scss b/scss/themes/dark/_variables.scss
@@ -34,6 +34,7 @@
 @import "variables/components/list-group";
 @import "variables/components/breadcrumb";
 @import "variables/components/toasts";
+@import "variables/components/typography";
 @import "variables/components/close";
 
 // Apps
diff --git a/scss/themes/dark/variables/_body.scss b/scss/themes/dark/variables/_body.scss
@@ -2,16 +2,18 @@
 //
 // Settings for the `<body>` element.
 
-$body-bg__dt:     $gray-base__dt !default;
-$body-color__dt:  #e1e1e1 !default;
+$body-bg__dt:     $bg-elevation-0 !default;
+$body-color__dt:  $text-high-emphasis__dt !default;
+$elevation-base-color__dt: 0, 0, 0 !default; //#3c4b64
 
 // stylelint-disable-next-line scss/dollar-variable-default
 $body-theme-map: map-merge(
   $body-theme-map,
   (
     dark: (
       "body-bg":     $body-bg__dt,
-      "body-color":  $body-color__dt
+      "body-color":  $body-color__dt,
+      "elevation-base-color": $elevation-base-color__dt
     )
   )
 );
diff --git a/scss/themes/dark/variables/_colors.scss b/scss/themes/dark/variables/_colors.scss
@@ -1,5 +1,5 @@
 //
-// CoreUI 3.x Color system
+// CoreUI 3.x Color system for dark theme
 //
 
 $gray-base__dt:  desaturate(#08091a, 10%) !default;
@@ -13,6 +13,21 @@ $gray-700__dt:   desaturate(#1c1d2e, 10%) !default;
 $gray-800__dt:   desaturate(#1a1b2c, 10%) !default;
 $gray-900__dt:   desaturate(#151627, 10%) !default;
 
+$bg-elevation-0: #181924 !default;
+$bg-elevation-1: rgba(mix(rgba(255, 255, 255, .1), $bg-elevation-0), 1) !default;
+$bg-elevation-2: rgba(mix(rgba(255, 255, 255, .14), $bg-elevation-0), 1) !default;
+$bg-elevation-3: rgba(mix(rgba(255, 255, 255, .16), $bg-elevation-0), 1) !default;
+$bg-elevation-4: rgba(mix(rgba(255, 255, 255, .18), $bg-elevation-0), 1) !default;
+$bg-elevation-6: rgba(mix(rgba(255, 255, 255, .22), $bg-elevation-0), 1) !default;
+$bg-elevation-8: rgba(mix(rgba(255, 255, 255, .24), $bg-elevation-0), 1) !default;
+$bg-elevation-12: rgba(mix(rgba(255, 255, 255, .28), $bg-elevation-0), 1) !default;
+$bg-elevation-16: rgba(mix(rgba(255, 255, 255, .3), $bg-elevation-0), 1) !default;
+$bg-elevation-24: rgba(mix(rgba(255, 255, 255, .32), $bg-elevation-0), 1) !default;
+
+$text-high-emphasis__dt: rgba(255, 255, 255, .87) !default;
+$text-medium-emphasis__dt: rgba(255, 255, 255, .6) !default;
+$text-disabled__dt: rgba(255, 255, 255, .38) !default;
+
 $grays__dt: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $grays__dt: map-merge(
@@ -57,7 +72,7 @@ $theme-colors__dt: map-merge(
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
 $yiq-text-dark__dt:   $gray-base__dt !default;
-$yiq-text-light__dt:  $white !default;
+$yiq-text-light__dt:  rgba(255, 255, 255, .87) !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
 $yiq-theme-map: map-merge(
diff --git a/scss/themes/dark/variables/_options.scss b/scss/themes/dark/variables/_options.scss
@@ -1,6 +1,6 @@
 
 // Options
-$enable-elevations__dt:  false !default;
+$enable-elevations__dt:  true !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
 $options: map-merge(
diff --git a/scss/themes/dark/variables/components/_breadcrumb.scss b/scss/themes/dark/variables/components/_breadcrumb.scss
@@ -3,9 +3,9 @@
 // Dark theme
 // scss-docs-start breadcrumb-dark-theme
 $breadcrumb-bg__dt:             transparent !default;
-$breadcrumb-border-color__dt:   $component-bg__dt !default;
+$breadcrumb-border-color__dt:   $body-color__dt !default;
 $breadcrumb-divider-color__dt:  $body-color__dt !default;
-$breadcrumb-active-color__dt:   $gray-600__dt !default;
+$breadcrumb-active-color__dt:   $text-medium-emphasis__dt !default;
 // scss-docs-end breadcrumb-dark-theme
 
 // stylelint-disable-next-line scss/dollar-variable-default
diff --git a/scss/themes/dark/variables/components/_buttons-forms.scss b/scss/themes/dark/variables/components/_buttons-forms.scss
@@ -3,18 +3,18 @@
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 // Dark theme
-$input-bg__dt:                        rgba($white, .1) !default;
-$input-disabled-bg__dt:               rgba($white, .05) !default;
+$input-bg__dt:                        rgba($white, .05) !default;
+$input-disabled-bg__dt:               rgba($white, .1) !default;
 $input-color__dt:                     $body-color__dt !default;
-$input-border-color__dt:              rgba($white, .15) !default;
-$input-focus-bg__dt:                  $gray-200__dt !default;
-$input-focus-border-color__dt:        $gray-100__dt !default;
+$input-border-color__dt:              rgba($white, .09) !default;
+$input-focus-bg__dt:                  rgba($white, .05) !default;
+$input-focus-border-color__dt:        rgba($white, .2) !default;
 $input-focus-color__dt:               $body-color__dt !default;
-$input-placeholder-color__dt:         rgba($body-color__dt, .25) !default;
+$input-placeholder-color__dt:         $text-medium-emphasis__dt !default;
 $input-plaintext-color__dt:           $body-color__dt !default;
-$input-group-addon-color__dt:         rgba($body-color__dt, .5) !default;
-$input-group-addon-bg__dt:            $gray-900__dt !default;
-$input-group-addon-border-color__dt:  $gray-900__dt !default;
+$input-group-addon-color__dt:         $body-color__dt !default;
+$input-group-addon-bg__dt:            rgba($white, .09) !default;
+$input-group-addon-border-color__dt:  rgba($white, .09) !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
 $form-theme-map: map-merge(
diff --git a/scss/themes/dark/variables/components/_cards.scss b/scss/themes/dark/variables/components/_cards.scss
@@ -5,10 +5,10 @@
 // Dark theme
 // scss-docs-start cards-dark-theme
 $card-dark-border-color:  $border-color__dt !default;
-$card-dark-cap-bg:        $gray-700__dt !default;
+$card-dark-cap-bg:        $bg-elevation-2 !default;
 $card-dark-cap-color:     null !default;
 $card-dark-color:         null !default;
-$card-dark-bg:            $gray-600__dt !default;
+$card-dark-bg:            $bg-elevation-1 !default;
 // scss-docs-end cards-dark-theme
 
 // stylelint-disable-next-line scss/dollar-variable-default
diff --git a/scss/themes/dark/variables/components/_custom-forms.scss b/scss/themes/dark/variables/components/_custom-forms.scss
@@ -4,7 +4,7 @@ $custom-control-indicator-bg__dt:            $input-bg__dt !default;
 $custom-control-indicator-border-color__dt:  rgba($black, .3) !default;
 $custom-control-indicator-disabled-bg__dt:   $input-disabled-bg__dt !default;
 
-$custom-control-label-disabled-color__dt:  $gray-600 !default;
+$custom-control-label-disabled-color__dt:  $text-disabled__dt !default;
 
 $custom-control-indicator-checked-color__dt:         $component-active-color__dt !default;
 $custom-control-indicator-checked-bg__dt:            $component-active-bg__dt !default;
@@ -26,7 +26,7 @@ $custom-checkbox-indicator-icon-indeterminate__dt:          url("data:image/svg+
 $custom-radio-indicator-icon-checked__dt:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color__dt}'/></svg>") !default;
 
 $custom-select-color__dt:               $input-color__dt !default;
-$custom-select-disabled-color__dt:      $gray-600 !default;
+$custom-select-disabled-color__dt:      $text-disabled__dt !default;
 $custom-select-bg__dt:                  $input-bg__dt !default;
 $custom-select-disabled-bg__dt:         $input-disabled-bg__dt !default;
 $custom-select-indicator-color__dt:     $gray-800 !default;
diff --git a/scss/themes/dark/variables/components/_dropdowns.scss b/scss/themes/dark/variables/components/_dropdowns.scss
@@ -6,12 +6,12 @@
 // Dark theme
 // scss-docs-start dropdowns-dark-theme
 $dropdown-color__dt:                $body-color__dt !default;
-$dropdown-bg__dt:                   $gray-200__dt !default;
+$dropdown-bg__dt:                   $bg-elevation-8 !default;
 $dropdown-border-color__dt:         $border-color__dt !default;
 $dropdown-divider-bg__dt:           $border-color__dt !default;
 $dropdown-link-color__dt:           $body-color__dt !default;
 $dropdown-link-hover-color__dt:     $body-color__dt !default;
-$dropdown-link-hover-bg__dt:        rgba($white, .1) !default;
+$dropdown-link-hover-bg__dt:        $bg-elevation-16 !default;
 $dropdown-link-active-color__dt:    $component-active-color__dt !default;
 $dropdown-link-active-bg__dt:       $component-active-bg__dt !default;
 $dropdown-link-disabled-color__dt:  rgba($body-color__dt, .6) !default;
diff --git a/scss/themes/dark/variables/components/_footer.scss b/scss/themes/dark/variables/components/_footer.scss
@@ -2,9 +2,9 @@
 
 // Dark Theme
 // scss-docs-start footer-dark-theme
-$footer-dark-bg__dt:       $gray-800__dt !default;
+$footer-dark-bg__dt:       $bg-elevation-3 !default;
 $footer-dark-color__dt:    $body-color__dt !default;
-$footer-dark-borders__dt:  ( top: 1px solid $gray-900__dt ) !default;
+$footer-dark-borders__dt:  ( top: 0 ) !default;
 // scss-docs-end footer-dark-theme
 
 $footer-variants-map__dt: () !default;
diff --git a/scss/themes/dark/variables/components/_header.scss b/scss/themes/dark/variables/components/_header.scss
@@ -3,7 +3,7 @@
 // Dark theme
 
 // scss-docs-start header-dark-theme
-$header-bg__dt:                     $gray-400__dt !default;
+$header-bg__dt:                     $bg-elevation-3 !default;
 $header-color__dt:                  rgba($white, .75) !default;
 $header-border__dt:                 ( bottom: 0 ) !default;
 $header-hover-color__dt:            rgba($white, .9) !default;
diff --git a/scss/themes/dark/variables/components/_modals.scss b/scss/themes/dark/variables/components/_modals.scss
@@ -3,10 +3,10 @@
 // Dark theme
 // scss-docs-start modal-dark-theme
 $modal-content-color__dt:         null !default;
-$modal-content-bg__dt:            $gray-400__dt !default;
-$modal-content-border-color__dt:  $gray-400__dt !default;
-$modal-header-border-color__dt:   $gray-400__dt !default;
-$modal-footer-border-color__dt:   $gray-400__dt !default;
+$modal-content-bg__dt:            $bg-elevation-24 !default;
+$modal-content-border-color__dt:  rgba(0, 0, 0, .2) !default;
+$modal-header-border-color__dt:   rgba(0, 0, 0, .2) !default;
+$modal-footer-border-color__dt:   rgba(0, 0, 0, .2) !default;
 // scss-docs-end modal-dark-theme
 
 // stylelint-disable-next-line scss/dollar-variable-default
diff --git a/scss/themes/dark/variables/components/_navs.scss b/scss/themes/dark/variables/components/_navs.scss
@@ -2,20 +2,20 @@
 
 // Dark Theme
 // scss-docs-start nav-dark-theme
-$nav-link-disabled-color__dt:            rgba($white, .5) !default;
-$nav-tabs-border-color__dt:              $gray-600__dt !default;
-$nav-tabs-link-hover-border-color__dt:   $gray-600__dt $gray-600__dt $gray-600__dt !default;
+$nav-link-disabled-color__dt:            $text-disabled__dt !default;
+$nav-tabs-border-color__dt:              $border-color__dt !default;
+$nav-tabs-link-hover-border-color__dt:   $border-color__dt $border-color__dt $border-color__dt !default;
 $nav-tabs-link-active-color__dt:         $body-color__dt !default;
-$nav-tabs-link-active-bg__dt:            $gray-600__dt !default;
-$nav-tabs-link-active-border-color__dt:  $gray-600__dt $gray-600__dt $gray-600__dt !default;
+$nav-tabs-link-active-bg__dt:            $border-color__dt !default;
+$nav-tabs-link-active-border-color__dt:  transparent !default;
 
-$nav-tabs-boxed-link-active-bg__dt:         $gray-600__dt !default;
-$nav-tabs-boxed-content-bg__dt:             $gray-600__dt !default;
-$nav-tabs-boxed-content-border-color__dt:   $gray-600__dt !default;
+$nav-tabs-boxed-link-active-bg__dt:         $bg-elevation-2 !default;
+$nav-tabs-boxed-content-bg__dt:             $bg-elevation-2 !default;
+$nav-tabs-boxed-content-border-color__dt:   $bg-elevation-2 !default;
 $nav-tabs-boxed-content-border-radius__dt:  $border-radius !default;
 
-$nav-tabs-boxed-left-active-border-color__dt:   $gray-600__dt !default;
-$nav-tabs-boxed-right-active-border-color__dt:  $gray-600__dt $gray-600__dt $gray-600__dt $gray-600__dt !default;
+$nav-tabs-boxed-left-active-border-color__dt:   $border-color__dt !default;
+$nav-tabs-boxed-right-active-border-color__dt:  $bg-elevation-2 $bg-elevation-2 $bg-elevation-2 $bg-elevation-2 !default;
 
 $nav-pills-link-active-color__dt:  $component-active-color__dt !default;
 $nav-pills-link-active-bg__dt:     $component-active-bg__dt !default;
diff --git a/scss/themes/dark/variables/components/_pagination.scss b/scss/themes/dark/variables/components/_pagination.scss
@@ -4,7 +4,7 @@
 // Dark theme
 // scss-docs-start pagination-dark-theme
 $pagination-color__dt:                  $body-color__dt !default;
-$pagination-bg__dt:                     rgba($white, .075) !default;
+$pagination-bg__dt:                     transparent !default;
 $pagination-border-color__dt:           $border-color__dt !default;
 $pagination-focus-box-shadow__dt:       $input-btn-focus-box-shadow !default;
 $pagination-focus-outline__dt:          0 !default;
@@ -14,8 +14,8 @@ $pagination-hover-border-color__dt:     $border-color__dt !default;
 $pagination-active-color__dt:           $component-active-color__dt !default;
 $pagination-active-bg__dt:              $component-active-bg__dt !default;
 $pagination-active-border-color__dt:    $pagination-active-bg !default;
-$pagination-disabled-color__dt:         rgba($white, .5) !default;
-$pagination-disabled-bg__dt:            rgba($white, .025) !default;
+$pagination-disabled-color__dt:         $text-disabled__dt !default;
+$pagination-disabled-bg__dt:            transparent !default;
 $pagination-disabled-border-color__dt:  $border-color__dt !default;
 // scss-docs-end pagination-dark-theme
 
diff --git a/scss/themes/dark/variables/components/_popovers.scss b/scss/themes/dark/variables/components/_popovers.scss
@@ -2,9 +2,9 @@
 
 // Dark Theme
 // scss-docs-start popover-dark-theme
-$popover-bg__dt:                 $gray-800__dt !default;
-$popover-border-color__dt:       $gray-900__dt !default;
-$popover-header-bg__dt:          $gray-900__dt !default;
+$popover-bg__dt:                 $bg-elevation-16 !default;
+$popover-border-color__dt:       $border-color__dt !default;
+$popover-header-bg__dt:          $bg-elevation-16 !default;
 $popover-header-color__dt:       $body-color__dt !default;
 $popover-body-color__dt:         $body-color__dt !default;
 $popover-arrow-color__dt:        $popover-bg__dt !default;
diff --git a/scss/themes/dark/variables/components/_shared.scss b/scss/themes/dark/variables/components/_shared.scss
@@ -4,7 +4,7 @@
 //
 // Define common padding and border radius sizes and more.
 
-$border-color__dt: $gray-900__dt !default;
+$border-color__dt: rgba(255, 255, 255, .075) !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
 $border-theme-map: map-merge(
diff --git a/scss/themes/dark/variables/components/_sidebar.scss b/scss/themes/dark/variables/components/_sidebar.scss
@@ -1,7 +1,7 @@
 // Dark theme
 // scss-docs-start sidebar-dark-theme
 $sidebar-color__dt:                               $body-color__dt !default;
-$sidebar-bg__dt:                                  $gray-400__dt !default;
+$sidebar-bg__dt:                                  $bg-elevation-3 !default;
 $sidebar-borders__dt:                             (all: 0) !default;
 $sidebar-brand-bg__dt:                            rgba($black, .2) !default;
 $sidebar-header-bg__dt:                           rgba($black, .2) !default;
diff --git a/scss/themes/dark/variables/components/_subheader.scss b/scss/themes/dark/variables/components/_subheader.scss
@@ -2,7 +2,7 @@
 
 // Dark theme
 // scss-docs-start subheader-dark-themes
-$subheader-bg__dt:                     $gray-400__dt !default;
+$subheader-bg__dt:                     $bg-elevation-3 !default;
 $subheader-color__dt:                  rgba($white, .75) !default;
 $subheader-border__dt:                 ( bottom: 0 ) !default;
 $subheader-hover-color__dt:            rgba($white, .9) !default;
diff --git a/scss/themes/dark/variables/components/_typography.scss b/scss/themes/dark/variables/components/_typography.scss
@@ -0,0 +1,16 @@
+$hr-border-color__dt: $border-color__dt !default;
+$vr-bg__dt:           $border-color__dt !default;
+$text-muted__dt:      $text-medium-emphasis__dt !default;
+
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$typography-theme-map: map-merge(
+  $typography-theme-map,
+  (
+    dark: (
+      "hr-border-color":  $hr-border-color__dt,
+      "vr-bg":            $vr-bg__dt,
+      "text-muted":       $text-muted__dt
+    )
+  )
+);
