@swisspost/design-system-styles 6.5.0 → 6.6.0

package/components/accordion.scss

@@ -1,36 +1,21 @@
 @forward './../variables/options';
 
+@use './../mixins/accordion' as accordion-mx;
 @use './../mixins/button' as button-mx;
-@use './../mixins/color' as color-mx;
 @use './../mixins/focus' as focus-mx;
 @use './../mixins/icons' as icon-mx;
 @use './../mixins/type' as type-mx;
 @use './../mixins/utilities' as utility-mx;
 
-@use './../functions/contrast';
-@use './../variables/color';
 @use './../variables/components/accordion';
 
 .accordion-item {
+  @include accordion-mx.background-color;
   border-block: accordion.$accordion-border-width solid accordion.$accordion-border-color;
 
   & + & {
     border-block-start: 0;
   }
-
-  // make the accordion gray
-  @include color-mx.colored-background(color.$gray-background);
-
-  // make the accordion white on background colors close to the gray above (making sure it remains gray on a white background)
-  $accordion-contrast-on-white: contrast.contrast-ratio(color.$white, color.$gray-background);
-  @each $name, $color in color.$background-colors {
-    $accordion-contrast-on-color: contrast.contrast-ratio($color, color.$gray-background);
-    @if ($accordion-contrast-on-color < $accordion-contrast-on-white) {
-      .bg-#{$name} & {
-        @include color-mx.colored-background(color.$white);
-      }
-    }
-  }
 }
 
 .accordion-header {

package/components/datatable.scss

@@ -94,6 +94,8 @@
   }
 
   .datatable-button {
+    display: flex;
+    align-items: center;
     @include button-mixins.reset-button;
     width: datatable.$datatable-button-width;
     height: datatable.$datatable-button-height;

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/floating-label.scss

@@ -10,6 +10,7 @@
 @use './../mixins/utilities' as utilities-mx;
 
 @use './../variables/type';
+@use './../variables/spacing';
 @use './../variables/components/forms';
 @use './../variables/components/form-validation';
 

package/components/form-select.scss

@@ -28,7 +28,7 @@
     }
   }
 
-  &.success,
+  &.is-valid,
   &.is-invalid {
     background-position:
       right b.$form-select-padding-x * 2.5 center,
@@ -46,8 +46,7 @@
       var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
   }
 
-  &.success {
-    border-color: var(--post-success-green);
+  &.is-valid {
     background-image: b.escape-svg(form-select.$form-select-indicator-success),
       var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
   }

package/components/form-validation.scss

@@ -3,7 +3,7 @@
 @use 'sass:map';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
+@use './../themes/bootstrap/core' as b;
 @use './../themes/bootstrap/forms/validation' as bfv;
 
 @use './../mixins/color' as color-mx;
@@ -12,6 +12,7 @@
 @use './../variables/color';
 @use './../variables/components/form-validation';
 @use './../variables/components/forms';
+@use './../variables/spacing';
 
 .invalid-feedback,
 .valid-feedback {
@@ -43,10 +44,10 @@
   color: form-validation.$form-feedback-custom-text;
 }
 
-@each $state, $data in $form-validation-states {
+@each $state, $data in b.$form-validation-states {
   $icon: map.get($data, 'icon');
 
-  @include form-validation-state-selector($state) {
+  @include b.form-validation-state-selector($state) {
     ~ .#{$state}-feedback,
     ~ .#{$state}-tooltip {
       display: block;
@@ -54,19 +55,19 @@
   }
 
   .form-control {
-    @include form-validation-state-selector($state) {
-      padding-right: $input-height-inner;
-      background-image: escape-svg($icon);
+    @include b.form-validation-state-selector($state) {
+      padding-right: b.$input-height-inner;
+      background-image: b.escape-svg($icon);
       background-repeat: no-repeat;
-      background-position: right $input-height-inner-quarter center;
+      background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
     }
   }
 
   textarea.form-control {
-    @include form-validation-state-selector($state) {
-      padding-right: $input-height-inner;
-      background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+    @include b.form-validation-state-selector($state) {
+      padding-right: b.$input-height-inner;
+      background-position: top b.$input-height-inner-quarter right b.$input-height-inner-quarter;
     }
   }
 
@@ -74,7 +75,7 @@
     > .form-control:not(:focus),
     > .form-select:not(:focus),
     > .form-floating:not(:focus-within) {
-      @include form-validation-state-selector($state) {
+      @include b.form-validation-state-selector($state) {
         @if $state == 'valid' {
           z-index: 3;
         } @else if $state == 'invalid' {
@@ -95,6 +96,24 @@
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
 
+    &.is-valid {
+      padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
+      border-color: var(--post-success-green);
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+      background-repeat: no-repeat;
+      background-position: right b.$input-height-inner-quarter center;
+
+      &.form-control-sm {
+        padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+        background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap)
+      }
+
+      &.form-control-lg {
+        padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+        background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap)
+      }
+    }
+
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
       box-shadow: form-validation.$form-feedback-invalid-box-shadow;

package/components/grid.scss

@@ -88,8 +88,9 @@ $gutter-x-cache: 0;
   }
 }
 
-// legacy code
+//the following classes are all deprecated and wil be removed in next major version
 
+//deprecated
 .vertical-gutters {
   margin-bottom: grid.$grid-gutter-width * -1;
 
@@ -99,6 +100,7 @@ $gutter-x-cache: 0;
   }
 }
 
+//deprecated
 // border-gutters class is used to manipulate border collapse
 .row.border-gutters {
   margin-right: -(commons.$border-width);
@@ -113,8 +115,10 @@ $gutter-x-cache: 0;
   }
 }
 
+//deprecated
 $container-cache: 0;
 
+//deprecated
 @each $breakpoint in grid.$grid-breakpoints-list {
   $container-padding: map.get(grid.$grid-container-padding, $breakpoint);
 
@@ -153,6 +157,7 @@ $container-cache: 0;
     }
   }
 
+  //deprecated
   // Container fluid responsive needs to be written every time
   .container-fluid-#{$breakpoint} {
     @include media-breakpoint-only($breakpoint) {
@@ -161,5 +166,6 @@ $container-cache: 0;
     }
   }
 
+  //deprecated
   $container-cache: $container-padding;
 }

package/components/intranet-header/_layout.scss

@@ -0,0 +1,8 @@
+// Fix a regression after new version of grid
+sp-intranet-header ~ .container-fluid {
+  padding-left: 0;
+
+  > .row {
+    margin-left: 0;
+  }
+}

package/components/intranet-header/index.scss

@@ -7,6 +7,7 @@
 
 @use 'scaffolding';
 
+@use 'layout';
 @use 'top-navigation';
 @use 'sidebar';
 @use 'nav-overflow';

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/_tab-title.scss

@@ -6,7 +6,7 @@
 @use './../../variables/spacing';
 @use './../../variables/components/nav';
 
-.tab-title[role=tab]{
+.tab-title[role='tab'] {
   display: inline-block;
   position: relative;
   box-sizing: border-box;

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);