@swisspost/design-system-styles 6.2.6 → 6.3.0

package/components/_index.scss

@@ -14,6 +14,7 @@
 @use 'elevation';
 @use 'form-range';
 @use 'form-select';
+@use 'form-textarea';
 @use 'datatable';
 @use 'form-check';
 @use 'forms';

package/components/accordion.scss

@@ -1,94 +1,107 @@
 @forward './../variables/options';
 
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/accordion' as ba;
+@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/type';
-@use './../mixins/utilities';
-@use './../variables/spacing';
 @use './../variables/components/accordion';
-@use './../variables/components/button';
 
 .accordion-item {
-  border-right: 0;
-  border-left: 0;
-  background-color: transparent;
+  border-block-start: accordion.$accordion-border-width solid accordion.$accordion-border-color;
+}
 
-  &:last-of-type {
-    border-bottom: 0;
-  }
+.accordion-header {
+  @include type-mixins.font-curve(accordion.$accordion-header-font-curve);
+  font-weight: accordion.$accordion-header-font-weight;
+  line-height: accordion.$accordion-header-line-height;
+  margin: 0;
 }
 
 .accordion-button {
-  @include type.font-curve(accordion.$accordion-font-curve);
+  @include button-mixins.reset-button;
 
-  background-color: transparent;
-  font-weight: accordion.$accordion-button-font-weight;
-  line-height: accordion.$accordion-button-line-height;
+  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;
+  text-align: start;
 
-  &:hover,
-  &:focus {
-    &:not(:disabled) {
-      color: accordion.$accordion-button-hover-color;
-    }
+  &:not(:disabled) {
+    cursor: accordion.$accordion-button-cursor;
   }
 
   &:disabled {
-    opacity: button.$btn-disabled-opacity !important;
+    opacity: accordion.$accordion-button-disabled-opacity;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: accordion.$accordion-button-focus-box-shadow;
+  }
+
+  &::after {
+    @include icon-mixins.icon(accordion.$accordion-icon-name);
+    content: '';
+    display: block;
+    height: accordion.$accordion-icon-size;
+    width: accordion.$accordion-icon-size;
+    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 {
+    transform: translateY(-50%) accordion.$accordion-icon-transform;
   }
 
-  .accordion-item[open] &::after {
-    transform: accordion.$accordion-icon-transform;
+  > .text-truncate {
+    display: block;
   }
 
-  // style to improve hcm mode
-  @include utilities.high-contrast-mode() {
+  // TODO: find a way to style WHCM within web component
+  @include utility-mixins.high-contrast-mode() {
     &:hover,
     &:focus-visible {
       &:not(:disabled) {
-        outline: spacing.$size-line solid Highlight;
+        outline: accordion.$accordion-border-width solid Highlight;
       }
     }
 
     &:disabled {
       opacity: 1 !important;
     }
+  }
+}
 
-    &::after {
-      background-image: $accordion-hcm-icon;
-    }
-
-    &:not(.collapsed)::after {
-      background-image: $accordion-hcm-icon;
+.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;
     }
   }
 }
 
+.accordion-button,
 .accordion-body {
-  padding-top: accordion.$accordion-body-padding-top;
-  padding-bottom: accordion.$accordion-body-padding-bottom;
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include type.font-curve(accordion.$accordion-font-curve);
-
-    margin-top: accordion.$accordion-body-heading-margin-top;
-    margin-bottom: 0;
-    font-weight: accordion.$accordion-body-heading-font-weight;
-
-    &,
-    p {
-      &:first-child {
-        margin-top: 0;
-      }
+  > :first-child {
+    margin-block-start: 0 !important;
+  }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+  > :last-child {
+    margin-block-end: 0 !important;
   }
 }

package/components/alert.scss

@@ -5,206 +5,132 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
 
-@use './../variables/color';
+@use './../mixins/notification' as notification-mx;
+@use './../placeholders/notification' as notification-ph;
+
+@use './../variables/breakpoints';
 @use './../variables/commons';
-@use './../variables/type';
-@use './../variables/spacing';
 @use './../variables/grid';
-@use './../variables/breakpoints';
-@use './../variables/components/alert';
-@use './../variables/options';
-@use './../functions/color' as color-fn;
-@use './../functions/contrast' as contrast-fn;
-@use './../placeholders/color' as color-ph;
-@use './../placeholders/notifications';
-
-.alert-container {
-  @extend %notification-container;
-}
+@use './../variables/components/close';
+@use './../variables/components/notification';
 
 .alert {
-  @extend %notification;
+  @include notification-mx.notification-size(alert);
 
-  min-height: 2 * alert.$alert-padding-y + alert.$alert-icon-size;
+  &:not(.alert-action) {
+    @extend %notification-body;
+  }
+}
 
-  padding: alert.$alert-padding-y alert.$alert-padding-x;
-  padding-left: (alert.$alert-padding-x * 2 + alert.$alert-icon-size);
+.alert-heading {
+  @include notification-mx.notification-heading(alert);
+}
 
-  background-position: alert.$alert-padding-x center;
-  background-size: alert.$alert-icon-size;
+.alert-dismissible {
+  @include notification-mx.notification-dismissible(alert);
+}
 
-  font-size: alert.$alert-font-size;
+.alert-action {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: notification.$notification-gap;
 
-  > *:only-child {
-    font-weight: type.$font-weight-bold;
+  > .alert-content {
+    flex: 1 1 auto;
+    @extend %notification-body;
   }
 
-  &:not(.alert-fixed-bottom) {
-    max-width: map.get(breakpoints.$grid-breakpoints, 'xxl');
-  }
+  > .alert-buttons {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
 
-  &.no-icon {
-    padding-left: alert.$alert-padding-x;
+    > .btn {
+      margin-inline-start: notification.$notification-buttons-margin-start;
+    }
   }
 
-  &.alert-dismissible {
-    padding-right: alert.$alert-close-icon-size + alert.$alert-padding-x * 2;
+  @include media-breakpoint-up(md) {
+    &.alert-dismissible > .btn-close {
+      inset-block-start: calc(50% - #{0.5 * close.$close-size});
+    }
   }
 
-  // Adjust close link position
-  .btn-close {
-    @extend %notification-close;
-
-    padding: alert.$alert-padding-y alert.$alert-padding-x;
-  }
-}
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    align-items: stretch;
+    padding-inline: map.get(notification.$notification-padding-x-map, alert);
 
-.alert-heading {
-  @extend %notification-title;
+    > .alert-content {
+      $icon-size: map.get(notification.$notification-icon-size-map, alert);
 
-  font-size: alert.$alert-font-size;
-}
+      padding-inline-start: notification.$notification-gap + $icon-size;
+      padding-inline-end: notification.$notification-gap + close.$close-size;
+    }
 
-@each $name, $color, $icon in alert.$alert-list {
-  .alert-#{$name} {
-    --post-bg-rgb: #{color-fn.rgb-values($color)};
-    @extend %notification-#{$name};
+    > .alert-buttons {
+      display: flex;
 
-    @if (contrast-fn.light-or-dark($color) == 'dark') {
-      @extend %color-background-dark-variables;
-    } @else {
-      @extend %color-background-light-variables;
-    }
+      > .btn {
+        flex: 1 0 0;
+        width: 100%;
 
-    .btn-close {
-      @extend %notification-#{$name}-close;
+        &:first-child {
+          margin-inline-start: 0;
+        }
+      }
     }
   }
 }
 
 .alert-fixed-bottom {
   position: fixed;
-  z-index: commons.$zindex-alert;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  max-height: 100%;
-  overflow: auto;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   margin-bottom: 0;
   border-radius: 0;
-
-  // Let the icon scroll with the content
-  background-attachment: local;
+  z-index: commons.$zindex-fixed;
 
   @include media-breakpoint-up(xxl) {
-    $container-padding: map.get(grid.$grid-container-padding, 'xxl');
-    padding: alert.$alert-padding-y
-      calc(
-        (100vw - #{map.get(breakpoints.$grid-breakpoints, 'xxl')}) / 2 + #{alert.$alert-padding-x *
-          2 + alert.$alert-icon-size} + #{$container-padding} - 0.5rem
-      );
-
-    background-position: calc(
-        (100vw - #{map.get(breakpoints.$grid-breakpoints, 'xxl')}) / 2 + #{alert.$alert-padding-x} +
-          #{$container-padding} - 0.5rem
-      )
-      center;
-
-    &.alert-dismissible {
-      padding-right: calc(
-        (100vw - #{map.get(breakpoints.$grid-breakpoints, 'xxl')}) / 2 + #{alert.$alert-close-icon-size +
-          alert.$alert-padding-x * 2} + #{$container-padding} - 0.5rem
-      );
-
-      .btn-close {
-        right: calc(
-          (100vw - #{map.get(breakpoints.$grid-breakpoints, 'xxl')}) / 2 + #{$container-padding} - 0.5rem
-        );
-      }
-    }
-  }
-}
-
-.alert-action {
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: spacing.$size-regular;
-
-  @include media-breakpoint-down(lg) {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-
-    .alert-buttons {
-      align-self: flex-end;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    align-items: center;
-  }
-
-  @include media-breakpoint-up(xxl) {
-    $container-padding: map.get(grid.$grid-container-padding, 'xxl');
-    padding-right: calc(
-      (100vw - #{map.get(breakpoints.$grid-breakpoints, 'xxl')}) / 2 + #{alert.$alert-padding-x} + #{$container-padding} -
-        0.5rem
+    $container-max-width: map.get(breakpoints.$grid-breakpoints, 'xxl') - 1;
+    $container-padding-x: map.get(grid.$grid-container-padding, 'xxl');
+    $alert-padding-x: map.get(notification.$notification-padding-x-map, alert);
+    $alert-icon-size: map.get(notification.$notification-icon-size-map, alert);
+    $fixed-alert-padding-x: '(100% - #{$container-max-width}) / 2 + #{$container-padding-x} + #{$alert-padding-x}';
+
+    padding-inline-end: calc(#{$fixed-alert-padding-x});
+    padding-inline-start: calc(
+      #{$fixed-alert-padding-x} + #{$alert-icon-size} + #{notification.$notification-gap}
     );
-  }
 
-  .alert-content {
-    display: flex;
-    flex: 2 1 auto;
-    flex-flow: column nowrap;
+    // for alerts with .pi-* icons (deprecated)
+    background-position-x: calc(#{$fixed-alert-padding-x} + #{0.5 * $alert-icon-size});
 
-    > *:last-child {
-      margin-bottom: 0;
+    // for alerts with mask-image icons
+    &::before {
+      left: calc(#{$fixed-alert-padding-x});
     }
-  }
 
-  .alert-buttons {
-    display: flex;
-    gap: spacing.$size-regular;
-    justify-self: flex-end;
-    flex: 1 1 auto;
-    flex-direction: row-reverse;
+    &.no-icon {
+      padding-inline-start: calc(#{$fixed-alert-padding-x});
+    }
 
-    @include media-breakpoint-down(rg) {
-      flex-direction: column;
-      align-self: stretch;
+    &.alert-dismissible {
+      padding-inline-end: calc(
+        #{$fixed-alert-padding-x} + #{notification.$notification-gap} + #{close.$close-size}
+      );
 
-      .btn {
-        flex: 1 0 auto;
+      > .btn-close {
+        inset-inline-end: calc(#{$fixed-alert-padding-x});
       }
     }
   }
 }
 
-@include media-breakpoint-down(sm) {
-  .alert {
-    padding-top: alert.$alert-padding-y * 2 + alert.$alert-icon-size;
-    padding-left: alert.$alert-padding-x;
-    background-position: center alert.$alert-padding-y;
-    font-size: alert.$alert-font-size-small;
-    text-align: center;
-
-    &.alert-dismissible {
-      padding-right: alert.$alert-padding-x;
-    }
-
-    &.no-icon {
-      padding-top: alert.$alert-padding-y;
-    }
-
-    .btn-close {
-      bottom: auto;
-      padding: spacing.$spacer * 0.5;
-    }
-
-    .alert-heading {
-      font-size: alert.$alert-font-size-small;
-    }
+@each $name, $color, $icon in notification.$notification-variants {
+  .alert-#{$name} {
+    @include notification-mx.notification-variant($color, $icon);
   }
 }

package/components/badge.scss

@@ -3,7 +3,6 @@
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/badge' as bb;
-@use './../themes/bootstrap/close' as bc; // Styles for the close icon
 
 @use './../variables/components/badge';
 @use './../variables/components/forms';

package/components/close.scss

@@ -1,33 +1,22 @@
 @forward './../variables/options';
 
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/close' as bc;
-
-@use './../variables/components/close';
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
+@use './../placeholders/close' as close-ph;
+@use './../variables/color';
 
 .btn-close {
-  height: unset;
-  min-height: close.$btn-close-height;
-
-  @include utilities.high-contrast-mode() {
-    opacity: 1;
-    background: transparent escape-svg($btn-close-hcm-bg) center/1.5rem auto no-repeat;
-  }
+  @extend %btn-close;
+}
 
-  &:focus {
-    outline: 2px solid var(--post-contrast-color);
-    box-shadow: none;
+// DEPRECATED
+.btn-close-white {
+  color: color.$gray-10;
 
-    &:not(:focus-visible) {
-      outline: 0;
-    }
+  @include utilities-mx.not-disabled-focus-hover() {
+    color: color.$white;
   }
-}
 
-.btn-close-white {
-  @include utilities.high-contrast-mode() {
-    filter: none;
+  &:disabled {
+    color: color.$gray-40;
   }
 }

package/components/form-textarea.scss

@@ -0,0 +1,12 @@
+@use './../variables/spacing';
+@use './../variables/components/forms';
+
+textarea {
+  &.form-control {
+    &::-webkit-resizer {
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{forms.$input-border-color}' d='M0 12H3V15H0V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 12H9V15H6V12Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M6 6H9V9H6V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 6H15V9H12V6Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 0H15V3H12V0Z'/%3E%3Cpath fill='#{forms.$input-border-color}' d='M12 12H15V15H12V12Z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-size: 75%;
+    }
+  }
+}

package/components/modal.scss

@@ -2,16 +2,16 @@
 
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/modal' as bm;
-@use './../themes/bootstrap/close' as bc;
 @use './../themes/bootstrap/core' as *;
 
-@use './../mixins/icons' as icon-mixin;
 @use './../mixins/scroll-shadows' as scroll-shadows-mixin;
-@use './../variables';
+
+@use './../variables/commons';
+@use './../variables/components/modal';
 
 .modal-content {
   border: 0;
-  box-shadow: variables.$box-shadow;
+  box-shadow: commons.$box-shadow;
 }
 
 post-ngb-modal-content {
@@ -20,8 +20,8 @@ post-ngb-modal-content {
 }
 
 .modal-body {
-  @include scroll-shadows-mixin.scroll-shadows-y(variables.$modal-content-bg);
-  padding: variables.$modal-body-padding;
+  @include scroll-shadows-mixin.scroll-shadows-y(modal.$modal-content-bg);
+  padding: modal.$modal-body-padding;
   overflow-y: auto;
 }
 
@@ -30,6 +30,14 @@ post-ngb-modal-content {
   border: 0;
 }
 
+.modal-header .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0;
+  margin: modal.$modal-btn-close-margin;
+}
+
 .modal-title:focus {
   outline: none; // Removes focus styles when you manually set focus to title with ngbAutofocus https://ng-github.io/#/components/modal/examples#focus
 }
@@ -37,26 +45,26 @@ post-ngb-modal-content {
 @include media-breakpoint-up(sm) {
   post-ngb-modal-content {
     // prevents the modal from exceeding the height of the screen
-    max-height: calc(100vh - #{2 * variables.$modal-dialog-margin-y-sm-up});
+    max-height: calc(100vh - #{2 * modal.$modal-dialog-margin-y-sm-up});
   }
 
   // Right and left margins are set to "auto" from the sm breakpoint
   // Paddings below ensure minimal margins on medium screens
   .modal-dialog {
-    padding-right: variables.$modal-dialog-margin;
-    padding-left: variables.$modal-dialog-margin;
+    padding-right: modal.$modal-dialog-margin;
+    padding-left: modal.$modal-dialog-margin;
   }
 }
 
 @include media-breakpoint-down(sm) {
   post-ngb-modal-content {
     // make the modal cover the full height available on small screens
-    height: calc(100vh - #{2 * variables.$modal-dialog-margin});
+    height: calc(100vh - #{2 * modal.$modal-dialog-margin});
   }
 
   .modal-body,
   .modal-header {
-    padding-right: variables.$modal-header-padding-y;
-    padding-left: variables.$modal-header-padding-y;
+    padding-right: modal.$modal-header-padding-y;
+    padding-left: modal.$modal-header-padding-y;
   }
 }

package/components/stepper.scss

@@ -109,6 +109,7 @@
   text-decoration: none;
   color: stepper.$stepper-link-color;
   transition: color 250ms;
+  text-align: center;
 
   .stepper-item[aria-current] > & {
     color: stepper.$stepper-link-current-color;
@@ -116,7 +117,8 @@
     font-weight: stepper.$stepper-link-current-font-weight;
   }
 
-  &:hover {
+  @at-root a:hover#{&},
+    :focus-visible#{&} {
     color: stepper.$stepper-link-hover-color;
   }
 
@@ -127,12 +129,6 @@
 
 @include media-breakpoint-down(rg) {
   .stepper-item {
-    &[aria-current] .stepper-link {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
     &:not([aria-current]) .stepper-link {
       overflow: hidden;
       white-space: nowrap;