refactor: remove elevations from components and update elevation util…

…ity classes
coreui · Jul 5, 2023 · 4bf4e35 · 4bf4e35
1 parent c119ba8
commit 4bf4e35
Show file tree

Hide file tree

Showing 13 changed files with 6 additions and 92 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -37,7 +37,6 @@
   border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
   @include border-radius(var(--#{$prefix}card-border-radius));
   @include box-shadow(var(--#{$prefix}card-box-shadow));
-  @include elevation(1);
 
   > hr {
     margin-right: 0;
@@ -238,11 +237,3 @@
     }
   }
 }
-
-@if $enable-dark-mode and $enable-elevations {
-  @include color-mode(dark) {
-    .card:not([class*="border"]):not([class*="elevation-0"]) {
-      background-color: color-mix(in srgb, var(--#{$prefix}card-bg) 98%, #fff);
-    }
-  }
-}
diff --git a/scss/_date-picker.scss b/scss/_date-picker.scss
@@ -170,7 +170,6 @@
   background-clip: padding-box;
   border: var(--#{$prefix}date-picker-dropdown-border-width) solid var(--#{$prefix}date-picker-dropdown-border-color);
   @include border-radius(var(--#{$prefix}date-picker-dropdown-border-radius));
-  @include elevation(4);
 
   .date-picker.show & {
     display: block;
@@ -278,11 +277,3 @@
     }
   }
 }
-
-@if $enable-dark-mode and $enable-elevations {
-  @include color-mode(dark) {
-    .date-picker-dropdown {
-      background-color: color-mix(in srgb, var(--#{$prefix}date-picker-dropdown-bg) 96%, #fff);
-    }
-  }
-}
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -61,7 +61,6 @@
   border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
   @include border-radius(var(--#{$prefix}dropdown-border-radius));
   @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
-  @include elevation(4);
 
   &[data-coreui-popper] {
     top: 100%;
@@ -249,11 +248,3 @@
   --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
   // scss-docs-end dropdown-dark-css-vars
 }
-
-@if $enable-dark-mode and $enable-elevations {
-  @include color-mode(dark) {
-    .dropdown-menu {
-      background-color: color-mix(in srgb, var(--#{$prefix}dropdown-bg) 96%, #fff);
-    }
-  }
-}
diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -24,5 +24,4 @@
   position: sticky;
   bottom: 0;
   z-index: $zindex-fixed;
-  @include elevation(2, "top");
 }
diff --git a/scss/_header.scss b/scss/_header.scss
@@ -73,7 +73,6 @@
     position: sticky;
     top: 0;
     z-index: $zindex-fixed - 1;
-    @include elevation(2);
   }
 }
 

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -39,7 +39,6 @@
 // Skins
 @import "mixins/border-radius";
 @import "mixins/box-shadow";
-@import "mixins/elevation";
 @import "mixins/gradients";
 @import "mixins/transition";
 

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -107,7 +107,6 @@
   @include box-shadow(var(--#{$prefix}modal-box-shadow));
   // Remove focus outline from opened modal
   outline: 0;
-  @include elevation(24);
 }
 
 // Modal background

diff --git a/scss/_subheader.scss b/scss/_subheader.scss
@@ -14,7 +14,6 @@
   position: sticky;
   top: 0;
   z-index: $zindex-fixed - 1;
-  @include elevation(2);
 }
 
 // Subheader nav

diff --git a/scss/_time-picker.scss b/scss/_time-picker.scss
@@ -164,7 +164,6 @@
   background-clip: padding-box;
   border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);
   @include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));
-  @include elevation(4);
 
   .time-picker.show & {
     display: block;
@@ -288,11 +287,3 @@
     }
   }
 }
-
-@if $enable-dark-mode and $enable-elevations {
-  @include color-mode(dark) {
-    .time-picker-dropdown {
-      background-color: color-mix(in srgb, var(--#{$prefix}time-picker-dropdown-bg) 96%, #fff);
-    }
-  }
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -447,7 +447,6 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
-$enable-elevations:           true !default;
 $enable-ltr:                  true !default;
 $enable-rtl:                  false !default;
 
@@ -510,14 +509,9 @@ $elevations: (
   0: unquote("none"),
   1: unquote("0 1px 1px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 2px 1px -1px rgba(var(--#{$prefix}elevation-base-color), .12), 0 1px 3px 0 rgba(var(--#{$prefix}elevation-base-color), .20)"),
   2: unquote("0 2px 2px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 1px -2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 1px 5px 0 rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  3: unquote("0 3px 4px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 3px -2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 1px 8px 0 rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  4: unquote("0 4px 5px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 1px 10px 0 rgba(var(--#{$prefix}elevation-base-color), .12), 0 2px 4px -1px rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  6: unquote("0 6px 10px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 1px 18px 0 rgba(var(--#{$prefix}elevation-base-color), .12), 0 3px 5px -1px rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  8: unquote("0 8px 10px 1px rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 14px 2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 5px 5px -3px rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  9: unquote("0 9px 12px 1px rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 16px 2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 5px 6px -3px rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  12: unquote("0 12px 17px 2px rgba(var(--#{$prefix}elevation-base-color), .14), 0 5px 22px 4px rgba(var(--#{$prefix}elevation-base-color), .12), 0 7px 8px -4px rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  16: unquote("0 16px 24px 2px rgba(var(--#{$prefix}elevation-base-color), .14), 0 6px 30px 5px rgba(var(--#{$prefix}elevation-base-color), .12), 0 8px 10px -5px rgba(var(--#{$prefix}elevation-base-color), .20)"),
-  24: unquote("0 24px 38px 3px rgba(var(--#{$prefix}elevation-base-color), .14), 0 9px 46px 8px rgba(var(--#{$prefix}elevation-base-color), .12), 0 11px 15px -7px rgba(var(--#{$prefix}elevation-base-color), .20)")
+  3: unquote("0 6px 10px 0 rgba(var(--#{$prefix}elevation-base-color), .14), 0 1px 18px 0 rgba(var(--#{$prefix}elevation-base-color), .12), 0 3px 5px -1px rgba(var(--#{$prefix}elevation-base-color), .20)"),
+  4: unquote("0 8px 10px 1px rgba(var(--#{$prefix}elevation-base-color), .14), 0 3px 14px 2px rgba(var(--#{$prefix}elevation-base-color), .12), 0 5px 5px -3px rgba(var(--#{$prefix}elevation-base-color), .20)"),
+  5: unquote("0 12px 17px 2px rgba(var(--#{$prefix}elevation-base-color), .14), 0 5px 22px 4px rgba(var(--#{$prefix}elevation-base-color), .12), 0 7px 8px -4px rgba(var(--#{$prefix}elevation-base-color), .20)"),
 ) !default;
 
 // Body
@@ -654,7 +648,7 @@ $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 // scss-docs-end box-shadow-variables
 
 $component-active-color:      $high-emphasis-inverse !default;
-$component-active-bg:         $primary !default;
+$component-active-bg:         var(--#{$prefix}primary) !default;
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
@@ -1028,7 +1022,7 @@ $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !defau
 $input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
 
 $input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
+$input-focus-border-color:              tint-color($primary, 50%) !default;
 $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
@@ -1334,7 +1328,7 @@ $form-range-thumb-border-radius:           1rem !default;
 $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-active-bg:               tint-color($primary, 70%) !default;
 $form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color) !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables

diff --git a/scss/forms/_form-multi-select.scss b/scss/forms/_form-multi-select.scss
@@ -297,7 +297,6 @@ select.form-multi-select {
   background-clip: padding-box;
   border: var(--#{$prefix}form-multi-select-dropdown-border-width) solid var(--#{$prefix}form-multi-select-dropdown-border-color);
   @include border-radius(var(--#{$prefix}form-multi-select-dropdown-border-radius));
-  @include elevation(4);
 
   .form-multi-select.show & {
     display: block;
@@ -447,15 +446,3 @@ select.form-multi-select {
     }
   }
 }
-
-@if $enable-dark-mode and $enable-elevations {
-  @include color-mode(dark) {
-    .form-multi-select-dropdown {
-      background-color: color-mix(in srgb, var(--#{$prefix}form-multi-select-dropdown-bg) 96%, #fff);
-    }
-
-    .form-multi-select-option-with-checkbox::before {
-      background-color: color-mix(in srgb, var(--#{$prefix}form-multi-select-option-indicator-bg) 96%, #fff);
-    }
-  }
-}
diff --git a/scss/mixins/_elevation.scss b/scss/mixins/_elevation.scss
diff --git a/scss/sidebar/_sidebar.scss b/scss/sidebar/_sidebar.scss
@@ -134,7 +134,6 @@
       top: 0;
       bottom: 0;
       z-index: $zindex-fixed;
-      @include elevation(2);
 
       &:not(.sidebar-end) {
         @include ltr-rtl("left", 0);
@@ -160,10 +159,6 @@
     bottom: 0;
     z-index: $zindex-fixed + 2;
 
-    &:not(.hide) {
-      @include elevation(3);
-    }
-
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);
       ~ * {