@swisspost/design-system-styles 6.5.0 → 6.5.1

package/components/elevation.scss

@@ -1,7 +1,8 @@
 @use '../variables/elevation';
+@use '../mixins/elevation' as elevation-mx;
 
 @each $key, $value in elevation.$elevation-map {
   .#{$key} {
-    box-shadow: #{$value};
+    @include elevation-mx.elevation($key);
   }
 }

package/components/sizing.scss

@@ -55,6 +55,21 @@
   }
 }
 
+// Post breakpoints width - e.g. w-sm-100
+@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    @if $breakpoint != 'xs' {
+      @each $prop, $abbrev in (width: w) {
+        @each $size, $length in spacing.$sizes {
+          .#{$abbrev}-#{$breakpoint}-#{$size} {
+            #{$prop}: $length !important;
+          }
+        }
+      }
+    }
+  }
+}
+
 // Generate responsive spacing utility classes, a lot of them
 $cache: ();
 

package/components/tabs/_tabs-wrapper.scss

@@ -55,8 +55,7 @@
 }
 
 .tab-content {
-  padding-top: spacing.$spacer;
-  padding-bottom: spacing.$spacer;
+  margin-block: spacing.$spacer;
 }
 
 // Careful, this generates a lot of code

package/functions/_contrast.scss

@@ -48,6 +48,15 @@
 }
 
 @function light-or-dark($background, $light-color: #fff, $dark-color: #000) {
+  /*
+  exception for Success-color issue #2227
+  the color is statically defined because the reference to the variable from here
+  would create a loop
+  */
+  @if ($background == #2c911c) {
+    @return 'dark';
+  }
+
   // Contrast ratio with a light color
   $contrast-light: contrast-ratio($background, $light-color);