@swisspost/design-system-styles 6.4.4 → 6.5.1

package/components/accordion.scss

@@ -1,61 +1,82 @@
 @forward './../variables/options';
 
-@use './../mixins/button' as button-mixins;
-@use './../mixins/color' as color-mixins;
-@use './../mixins/icons' as icon-mixins;
-@use './../mixins/type' as type-mixins;
-@use './../mixins/utilities' as utility-mixins;
-
+@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 {
-  border-block-start: accordion.$accordion-border-width solid accordion.$accordion-border-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 {
-  @include type-mixins.font-curve(accordion.$accordion-header-font-curve);
+  color: accordion.$accordion-header-color;
+  font-size: accordion.$accordion-header-font-size;
   font-weight: accordion.$accordion-header-font-weight;
   line-height: accordion.$accordion-header-line-height;
   margin: 0;
 }
 
 .accordion-button {
-  @include button-mixins.reset-button;
+  @include button-mx.reset-button;
+  @include focus-mx.focus-ring;
 
   width: 100%;
   position: relative;
   padding-block: accordion.$accordion-button-padding;
   padding-inline-start: accordion.$accordion-button-padding;
-  padding-inline-end: accordion.$accordion-button-padding + accordion.$accordion-icon-size;
+  padding-inline-end: accordion.$accordion-button-padding + accordion.$accordion-icon-size +
+    accordion.$accordion-gap;
   text-align: start;
+  transition: accordion.$accordion-button-transition;
 
-  &:not(:disabled) {
-    cursor: accordion.$accordion-button-cursor;
+  &:hover {
+    color: accordion.$accordion-button-hover-color;
+    background-color: accordion.$accordion-button-hover-bg;
   }
 
   &:disabled {
     opacity: accordion.$accordion-button-disabled-opacity;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: accordion.$accordion-button-focus-box-shadow;
+    pointer-events: none;
   }
 
   &::after {
-    @include icon-mixins.icon(accordion.$accordion-icon-name);
+    @include icon-mx.icon(accordion.$accordion-icon-name);
     content: '';
     display: block;
     height: accordion.$accordion-icon-size;
     width: accordion.$accordion-icon-size;
+
+    // use absolute positioning instead of flex to allow easy title truncation
     position: absolute;
     inset-inline-end: accordion.$accordion-button-padding;
     inset-block-start: 50%;
     transform: translateY(-50%);
     transition: accordion.$accordion-icon-transition;
-
-    // add border to fix visual issue during rotation
-    border: 1px solid rgb(var(--post-bg-rgb, 255, 255, 255));
   }
 
   &.collapsed::after {
@@ -66,8 +87,7 @@
     display: block;
   }
 
-  // TODO: find a way to style WHCM within web component
-  @include utility-mixins.high-contrast-mode() {
+  @include utility-mx.high-contrast-mode() {
     &:hover,
     &:focus-visible {
       &:not(:disabled) {
@@ -83,25 +103,15 @@
 
 .accordion-body {
   padding: accordion.$accordion-body-padding;
-  border-block-start: accordion.$accordion-border-width solid accordion.$accordion-border-color;
-
-  @each $heading-size in (1 2 3 4 5 6) {
-    h#{$heading-size},
-    .h#{$heading-size} {
-      @include type-mixins.font-curve(accordion.$accordion-heading-font-curve);
-      margin: accordion.$accordion-heading-margin;
-      font-weight: accordion.$accordion-heading-font-weight;
-    }
-  }
+  font-weight: accordion.$accordion-body-font-weight;
 }
 
-.accordion-button,
-.accordion-body {
-  > :first-child {
-    margin-block-start: 0 !important;
-  }
+.accordion-button > *,
+.accordion-body > :first-child {
+  margin-block-start: 0 !important;
+}
 
-  > :last-child {
-    margin-block-end: 0 !important;
-  }
+.accordion-button > *,
+.accordion-body > :last-child {
+  margin-block-end: 0 !important;
 }

package/components/button-group.scss

@@ -7,6 +7,7 @@
 @use './../mixins/utilities';
 @use './../variables/color';
 @use './../variables/components/button';
+@use './../variables/components/forms';
 
 .btn-group {
   max-width: 100%;
@@ -50,4 +51,8 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
+
+  &:is(:focus-visible, :focus-within, .pretend-focus) + .btn {
+    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+  }
 }

package/components/datepicker.scss

@@ -7,6 +7,8 @@
 @use './../variables/commons';
 @use './../mixins/icons' as icons-mx;
 
+@use './../themes/bootstrap/core' as b;
+
 ngb-datepicker {
   // Conversion for compatibility
   --bs-light: var(--post-light);
@@ -24,7 +26,7 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select {
   flex: 0 1 auto;
 
   select {
-    padding-right: 1rem;
+    padding-right: b.$form-select-padding-x * 2;
     border: 0;
     background-position: right;
 

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

@@ -75,9 +75,9 @@
 
     padding-top: forms.$form-floating-input-padding-t;
     padding-bottom: forms.$form-floating-input-padding-b;
-    background-size: forms.$form-floating-select-bg-size;
 
     ~ label {
+      color: forms.$form-floating-label-color;
       padding-top: 0.7rem;
       max-width: calc(
         (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x *
@@ -87,6 +87,12 @@
       transition: forms.$form-floating-transition-in;
     }
 
+    &:disabled {
+      ~ label {
+        color: forms.$input-disabled-color;
+      }
+    }
+
     // TODO: replace with :has
     &:empty,
     &.form-select-empty {
@@ -94,7 +100,6 @@
       padding-bottom: forms.$form-floating-input-padding-b;
 
       ~ label {
-        color: forms.$form-floating-label-color;
         padding-top: forms.$form-floating-label-padding-t;
         max-width: calc(100% - (#{forms.$input-border-width * 2}));
         transform: none;
@@ -129,6 +134,29 @@
         }
       }
     }
+
+    &.form-select-sm {
+      padding-inline: forms.$form-floating-padding-x-sm;
+      padding-top: forms.$form-floating-padding-y-sm * 2;
+      font-size: forms.$form-floating-label-font-size-placeholder-sm;
+      height: forms.$form-floating-label-height-sm;
+      min-height: forms.$form-floating-label-height-sm;
+
+      ~ label {
+        padding-top: forms.$form-floating-padding-y-sm;
+        font-size: forms.$form-floating-label-font-size-sm;
+        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+      }
+
+      // TODO: replace with :has
+      &:empty,
+      &.form-select-empty {
+        ~ label {
+          padding-top: forms.$form-floating-label-padding-t-sm;
+          font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        }
+      }
+    }
   }
 
   > textarea.form-control {

package/components/form-check.scss

@@ -11,7 +11,6 @@
   display: flex;
   flex-wrap: wrap;
   row-gap: form-check.$form-check-row-gap;
-  column-gap: form-check.$form-check-column-gap;
   margin-bottom: form-check.$form-check-margin-bottom;
 
   &-inline {
@@ -112,6 +111,10 @@
   &-label {
     flex: 1;
 
+    :not(.form-switch, .radio-button-card, .checkbox-button-card) > & {
+      padding-inline-start: form-check.$form-check-column-gap;
+    }
+
     .form-check-sm & {
       font-size: type.$font-size-12;
     }
@@ -119,8 +122,6 @@
 }
 
 .form-switch {
-  column-gap: form-check.$form-switch-column-gap;
-
   .form-check-input {
     height: form-check.$form-switch-height;
     width: form-check.$form-switch-width;
@@ -170,6 +171,11 @@
 
     &.order-first {
       flex: 0 auto;
+      padding-inline-end: form-check.$form-switch-column-gap;
+    }
+
+    &:not(.order-first) {
+      padding-inline-start: form-check.$form-switch-column-gap;
     }
   }
 }

package/components/form-select.scss

@@ -1,20 +1,64 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
+@use './../themes/bootstrap/core' as b;
 @use './../themes/bootstrap/forms/form-select' as bffs;
 @use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';
 
 @use './../variables/components/forms';
+@use './../variables/components/form-select' as form-select;
 
 .form-select-rg {
   @include forms-mixins.form-control-rg;
 }
 
+.form-select-lg {
+  background-size: form-select.$form-select-bg-size;
+}
+
+.form-select-sm {
+  background-size: form-select.$form-select-bg-size-sm;
+}
+
 .form-select {
+  &:not(:disabled) {
+    &:hover {
+      border-color: var(--post-contrast-color);
+    }
+  }
+
+  &.success,
+  &.is-invalid {
+    background-position:
+      right b.$form-select-padding-x * 2.5 center,
+      b.$form-select-bg-position;
+
+    &.form-select-lg {
+      background-position:
+        right b.$form-select-padding-x * 3 center,
+        b.$form-select-bg-position;
+    }
+  }
+
+  &:disabled {
+    background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
+      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  }
+
+  &.success {
+    border-color: var(--post-success-green);
+    background-image: b.escape-svg(form-select.$form-select-indicator-success),
+      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  }
+
+  &.is-invalid {
+    background-image: b.escape-svg(form-select.$form-select-indicator-error),
+      var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+  }
+
   @include utilities.high-contrast-mode() {
-    background-image: escape-svg($form-select-indicator-hcm);
+    background-image: b.escape-svg(form-select.$form-select-indicator-hcm);
     background-color: Field;
     border-color: FieldText;
     color: FieldText;

package/components/intranet-header/_sidebar.scss

@@ -80,7 +80,7 @@
     overflow-x: hidden;
     overflow-y: auto; // Scrollable contents if viewport is shorter than content.
 
-    @include media-breakpoint-down(rg) {
+    @include media-breakpoint-down(md) {
       bottom: auto;
     }
 

package/components/intranet-header/_top-navigation.scss

@@ -102,7 +102,6 @@
 
     i.pi {
       height: 100%;
-      //width: 1.5rem;
       color: rgba(var(--post-contrast-color-rgb), 0.2);
 
       &::before {

package/components/pagination.scss

@@ -78,5 +78,20 @@
     &.active {
       color: pagination.$pagination-active-color;
     }
+
+    @include utilities.high-contrast-mode() {
+      &.active > .page-link {
+        background-color: Highlight;
+      }
+
+      &:first-child,
+      &:last-child {
+        .page-link > span {
+          background-color: LinkText;
+          color: transparent;
+          forced-color-adjust: none;
+        }
+      }
+    }
   }
 }

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