refactor: update CSS & SCSS variables

Author: mrholek

scss/_root.scss

@@ -161,6 +161,10 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
+    --#{$prefix}high-emphasis: #{$body-color-dark};
+    --#{$prefix}medium-emphasis: #{$body-secondary-color-dark};
+    --#{$prefix}disabled: #{$body-tertiary-color-dark};
+
     --#{$prefix}elevation-base-color: 0, 0, 0;
 
     @each $color, $value in $theme-colors-dark {

scss/_variables-dark.scss

@@ -99,8 +99,8 @@ $body-secondary-bg-dark:            $gray-800-dark !default;
 $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
 $body-tertiary-bg-dark:             mix($gray-800-dark, #181924, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700-dark !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
+$border-color-dark:                 $gray-800-dark !default;
+$border-color-translucent-dark:     rgba($white, .1) !default;
 $headings-color-dark:               inherit !default;
 $link-color-dark:                   tint-color($primary, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;

scss/_variables.scss

@@ -1988,7 +1988,7 @@ $header-padding-y:              $spacer * .5 !default;
 $header-padding-x:              $spacer * .5 !default;
 $header-brand-font-size:        $font-size-lg !default;
 $header-color:                  rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
-$header-bg:                     $white !default;
+$header-bg:                     var(--#{$prefix}body-bg) !default;
 $header-border-color:           var(--#{$prefix}border-color) !default;
 $header-border-width:           var(--#{$prefix}border-width) !default;
 $header-hover-color:            rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
@@ -2127,7 +2127,7 @@ $sidebar-widths: (
 $sidebar-padding-y:                        0 !default;
 $sidebar-padding-x:                        0 !default;
 $sidebar-color:                            $high-emphasis-inverse !default;
-$sidebar-bg:                               $gray-base !default;
+$sidebar-bg:                               $gray-800 !default;
 $sidebar-border-width:                     0 !default;
 $sidebar-border-color:                     transparent !default;
 $sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
@@ -2214,10 +2214,10 @@ $sidebar-toggler-hover-bg:                 rgba(0, 0, 0, .3) !default;
 $sidebar-toggler-indicator-hover-color:    $sidebar-nav-link-hover-color !default;
 $sidebar-toggler-indicator-hover-icon:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
 
-$sidebar-light-color:    $body-color !default;
-$sidebar-light-bg:       $white !default;
-$sidebar-light-border-width:                     0 !default;
-$sidebar-light-border-color:                     transparent !default;
+$sidebar-light-color:                      var(--#{$prefix}body-color) !default;
+$sidebar-light-bg:                         var(--#{$prefix}body-bg) !default;
+$sidebar-light-border-width:               0 !default;
+$sidebar-light-border-color:               transparent !default;
 
 $sidebar-light-brand-color:  $white !default;
 $sidebar-light-brand-bg:     $primary !default;
@@ -2264,7 +2264,7 @@ $sidebar-light-toggler-indicator-hover-icon:     url("data:image/svg+xml;charset
 $footer-min-height:    3rem !default;
 $footer-padding-y:     $spacer * .5 !default;
 $footer-padding-x:     $spacer !default;
-$footer-bg:            $gray-100 !default;
+$footer-bg:            var(--#{$prefix}tertiary-bg) !default;
 $footer-color:         var(--#{$prefix}body-color) !default;
 $footer-border-width:  var(--#{$prefix}border-width) !default;
 $footer-border-color:  var(--#{$prefix}border-color) !default;