refactor: update elevations

mrholek · mrholek · commit 436eef9e058e · 2023-05-01T10:25:24.000+02:00
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -121,6 +121,8 @@
   --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
   --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
+  --#{$prefix}elevation-base-color: #{$elevation-base-color};
+
   // Focus styles
   // scss-docs-start root-focus-variables
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
@@ -159,6 +161,8 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
+    --#{$prefix}elevation-base-color: 0, 0, 0;
+
     @each $color, $value in $theme-colors-dark {
       --#{$prefix}#{$color}: #{$value};
     }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -85,6 +85,11 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-shadow
+    "elevation": (
+      property: box-shadow,
+      class: elevation,
+      values: $elevations
+    ),
     // scss-docs-start utils-focus-ring
     "focus-ring": (
       css-var: true,
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -546,20 +546,20 @@ $position-values: (
 // Elevation
 //
 // Define common box shadows
-$elevation-base-color: 60, 75, 100 !default; //#3c4b64
+$elevation-base-color: 60, 75, 100 !default;
 
 $elevations: (
   0: unquote("none"),
-  1: unquote("0 1px 1px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 2px 1px -1px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 1px 3px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  2: unquote("0 2px 2px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 1px -2px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 1px 5px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  3: unquote("0 3px 4px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 3px -2px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 1px 8px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  4: unquote("0 4px 5px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 1px 10px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 2px 4px -1px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  6: unquote("0 6px 10px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 1px 18px 0 rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 3px 5px -1px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  8: unquote("0 8px 10px 1px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 14px 2px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 5px 5px -3px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  9: unquote("0 9px 12px 1px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 16px 2px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 5px 6px -3px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  12: unquote("0 12px 17px 2px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 5px 22px 4px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 7px 8px -4px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  16: unquote("0 16px 24px 2px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 6px 30px 5px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 8px 10px -5px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
-  24: unquote("0 24px 38px 3px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 9px 46px 8px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 11px 15px -7px rgba(var(--#{$prefix}elevation-base-color, #{$elevation-base-color}), .20)")
+  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)")
 ) !default;
 
 // Body
diff --git a/scss/mixins/_elevation.scss b/scss/mixins/_elevation.scss
@@ -1,7 +1,7 @@
 @mixin elevation($value, $exclude: null) {
   @if $enable-elevations {
     @if $exclude == null {
-      &:not([class*="border"]) {
+      &:not([class*="border"]):not([class*="elevation-0"]) {
         border: 0;
       }
       box-shadow: map-get($elevations, $value);
@@ -11,11 +11,10 @@
       @each $element in $exclude {
         $selector: selector-append($selector, ":not(#{$element})");
       }
-      @if ($selector != ":not(.aaa") {
-        &#{$selector} {
-          border-color: transparent;
-          box-shadow: map-get($elevations, $value);
-        }
+
+      &#{$selector} {
+        border-color: transparent;
+        box-shadow: map-get($elevations, $value);
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@mixin elevation($value, $exclude: null) {`
`2`	`2`	`@if $enable-elevations {`
`3`	`3`	`@if $exclude == null {`
`4`		`- &:not([class*="border"]) {`
	`4`	`+ &:not([class="border"]):not([class="elevation-0"]) {`
`5`	`5`	`border: 0;`
`6`	`6`	`}`
`7`	`7`	`box-shadow: map-get($elevations, $value);`
`@@ -11,11 +11,10 @@`
`11`	`11`	`@each $element in $exclude {`
`12`	`12`	`$selector: selector-append($selector, ":not(#{$element})");`
`13`	`13`	`}`
`14`		`- @if ($selector != ":not(.aaa") {`
`15`		`- &#{$selector} {`
`16`		`- border-color: transparent;`
`17`		`- box-shadow: map-get($elevations, $value);`
`18`		`- }`
	`14`	`+`
	`15`	`+ &#{$selector} {`
	`16`	`+ border-color: transparent;`
	`17`	`+ box-shadow: map-get($elevations, $value);`
`19`	`18`	`}`
`20`	`19`	`}`
`21`	`20`	`}`