@swisspost/design-system-styles 6.6.4 → 7.1.0

package/components/chip.scss

@@ -0,0 +1,159 @@
+@forward './../variables/options';
+
+@use './../variables/components/chip';
+@use './../mixins/utilities';
+@use './../mixins/chip' as chip-mx;
+@use './../mixins/icons' as icons-mx;
+@use './../placeholders/badge' as badge-ph;
+
+.chip-dismissible {
+  @include chip-mx.chip-styles();
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    flex: 0 0 auto;
+    height: chip.$chip-close-button-height;
+    width: chip.$chip-close-button-height;
+    transition: chip.$chip-transition;
+  }
+
+  &::before {
+    border-radius: chip.$chip-close-button-border-radius;
+  }
+
+  &:hover::before {
+    background-color: chip.$chip-hover-bg;
+  }
+
+  &::after {
+    @include icons-mx.icon(chip.$chip-close-button-icon);
+    position: absolute;
+    top: 50%;
+    left: chip.$chip-padding-x;
+    transform: translateY(-50%);
+  }
+
+  // set the focus ring on the close button only
+  @include utilities.focus-style-none();
+  @include utilities.focus-style('::before') {
+    background-color: chip.$chip-hover-bg;
+  }
+
+  @include utilities.disabled-style();
+}
+
+.chip-filter {
+  display: inline-block;
+
+  &-label {
+    @include chip-mx.chip-styles();
+    cursor: pointer;
+
+    > .badge {
+      color: chip.$chip-hover-color;
+      background-color: chip.$chip-hover-bg;
+      border-color: transparent;
+      transition: chip.$chip-transition;
+    }
+  }
+
+  &-input {
+    @include utilities.visuallyhidden;
+
+    &:checked {
+      + .chip-filter-label {
+        color: chip.$chip-active-color;
+        background-color: chip.$chip-active-bg;
+        border-color: transparent;
+
+        > .badge {
+          background-color: chip.$chip-bg;
+        }
+
+        @include utilities.high-contrast-mode() {
+          border-color: Highlight;
+        }
+      }
+
+      &:disabled + .chip-filter-label {
+        background-color: chip.$chip-disabled-active-bg;
+
+        @include utilities.high-contrast-mode() {
+          > .chip-text {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &:not(:disabled) {
+        + .chip-filter-label > .chip-text {
+          text-decoration: underline;
+          transition: -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);
+          transition: text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);
+          transition: text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        + .chip-filter-label:hover > .chip-text {
+          text-decoration-color: transparent;
+
+          @include utilities.high-contrast-mode() {
+            text-decoration-color: initial;
+          }
+        }
+
+        @include utilities.focus-style('+ .chip-filter-label') {
+          > .chip-text {
+            text-decoration-color: transparent;
+          }
+        }
+      }
+    }
+
+    &:not(:checked) + .chip-filter-label:hover {
+      color: chip.$chip-hover-color;
+      background-color: chip.$chip-hover-bg;
+
+      > .badge {
+        background-color: chip.$chip-bg;
+      }
+    }
+
+    @include utilities.disabled-style('+ .chip-filter-label') {
+      background-color: chip.$chip-disabled-bg;
+
+      @include utilities.high-contrast-mode() {
+        > .badge {
+          color: GrayText;
+          border-color: GrayText;
+        }
+      }
+    }
+  }
+}
+
+.chip-sm {
+  &.chip-dismissible {
+    @include chip-mx.chip-styles-sm();
+
+    &::before,
+    &::after {
+      height: chip.$chip-close-button-height-sm;
+      width: chip.$chip-close-button-height-sm;
+    }
+
+    &::after {
+      left: chip.$chip-padding-x-sm;
+    }
+  }
+
+  &.chip-filter > .chip-filter-label {
+    @include chip-mx.chip-styles-sm();
+
+    > .badge {
+      @extend %badge-sm;
+    }
+  }
+}

package/components/datepicker.scss

@@ -5,7 +5,9 @@
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
+@use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
+@use './../mixins/utilities';
 
 @use './../themes/bootstrap/core' as b;
 
@@ -20,6 +22,10 @@ ngb-datepicker.dropdown-menu {
 
 ngb-datepicker-navigation {
   justify-content: space-between;
+
+  button.ngb-dp-arrow-btn {
+    @include utilities.focus-style();
+  }
 }
 
 ngb-datepicker-navigation-select.ngb-dp-navigation-select {
@@ -30,12 +36,6 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select {
     border: 0;
     background-position: right;
 
-    &:focus {
-      border-radius: commons.$border-radius;
-      background-color: transparent;
-      box-shadow: inset 0 0 0 commons.$border-thick color.$black;
-    }
-
     + select {
       margin-left: 0.5rem;
     }
@@ -94,12 +94,20 @@ span.ngb-dp-navigation-chevron {
   &.hidden {
     flex-grow: 1;
   }
-}
 
-.ngb-dp-day > .btn-light {
-  width: 40px !important;
-  height: 40px !important;
-  line-height: 40px;
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+
+  > [ngbDatepickerDayView] {
+    width: 40px !important;
+    height: 40px !important;
+    line-height: 40px;
+
+    &.active:not(.bg-primary) {
+      outline: none;
+    }
+  }
 }
 
 .ngb-dp-day > .text-white {
@@ -112,7 +120,7 @@ span.ngb-dp-navigation-chevron {
 }
 
 .ngb-dp-day > .btn-light:hover {
-  background-color: color.$gray-background-light;
+  background-color: color.$light;
 }
 
 .ngb-dp-day > .btn-light:not(:disabled):not(.disabled):active,
@@ -149,6 +157,10 @@ span.ngb-dp-navigation-chevron {
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
   }
+
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
 }
 
 .form-control-sm ~ .ngb-dp-open {

package/components/error-container.scss

@@ -0,0 +1,9 @@
+.error-container {
+  overflow-x: hidden;
+}
+
+.error-container--image {
+  max-width: 150%;
+  margin: 10vw 0 0 3rem;
+  object-fit: contain;
+}

package/components/floating-label.scss

@@ -209,7 +209,6 @@
           width: calc(
             100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x}
           );
-          height: forms.$form-floating-label-height;
         }
       }
     }

package/components/form-check.scss

@@ -1,10 +1,12 @@
 @forward './../variables/options';
 
 @use '../variables/color';
+@use '../variables/commons';
 @use '../variables/type';
 @use '../variables/spacing';
 @use '../variables/animation';
 @use '../variables/components/form-check';
+@use '../mixins/color' as color-mx;
 @use '../mixins/icons' as icons-mx;
 @use '../mixins/utilities' as utility-mx;
 
@@ -14,6 +16,10 @@
   row-gap: form-check.$form-check-row-gap;
   margin-bottom: form-check.$form-check-margin-bottom;
 
+  @include utility-mx.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+
   &-inline {
     display: inline-flex;
   }
@@ -27,31 +33,38 @@
     color: rgba(var(--post-contrast-color-rgb), 0.8);
     transition: color animation.$transition-base-timing;
 
-    &:not([disabled]) {
-      cursor: pointer;
+    @include utility-mx.high-contrast-mode {
+      transition: none;
     }
 
     &:hover:not([disabled]),
     &:hover:not([disabled]) ~ &-label {
       color: var(--post-contrast-color);
+
+      @include utility-mx.high-contrast-mode() {
+        border-color: Highlight;
+      }
     }
   }
 
   &-input {
+    &:not([disabled]),
+    &:not([disabled]) ~ .form-check-label {
+      cursor: pointer;
+    }
+
+    @include utility-mx.focus-style-none();
+
     display: inline-flex;
     flex: 0 auto;
-    -webkit-appearance: none;
-            appearance: none;
-    background: none;
+    appearance: none;
+    background: transparent;
     height: form-check.$form-check-input-size;
     width: form-check.$form-check-input-size;
-    border: form-check.$form-check-input-border-width solid
-      rgba(var(--post-contrast-color-rgb), 0.8);
+    border: form-check.$form-check-input-border-width solid currentColor;
 
-    &:focus {
-      outline: none;
-      border-color: currentColor;
-      box-shadow: form-check.$form-check-input-focus-box-shadow;
+    @include utility-mx.high-contrast-mode {
+      border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
     }
 
     &::after {
@@ -60,16 +73,6 @@
       flex: 1;
     }
 
-    &:checked,
-    &:indeterminate {
-      color: var(--post-contrast-color);
-      border-color: var(--post-contrast-color);
-
-      ~ .form-check-label {
-        color: var(--post-contrast-color);
-      }
-    }
-
     &[type='checkbox'] {
       &:checked::after {
         @include icons-mx.icon(3035);
@@ -78,6 +81,14 @@
       &:indeterminate::after {
         @include icons-mx.icon(2039);
       }
+
+      &:checked,
+      &:indeterminate {
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem !important;
+          color: SelectedItemText !important; // Important is needed for card-control
+        }
+      }
     }
 
     &[type='radio'] {
@@ -88,13 +99,85 @@
         background-color: currentColor;
         border-radius: inherit;
         background-clip: padding-box;
+
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem;
+          border-color: Canvas;
+        }
+      }
+
+      &[disabled] {
+        padding: spacing.$size-line; // Used to mimic border width because it is used in combination with background-clip: padding-box; to size the selected shape
+        background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-light}');
+
+        @include color-mx.on-dark-background {
+          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-dark}');
+        }
+
+        @include utility-mx.high-contrast-mode {
+          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-hcm}') !important;
+        }
+      }
+    }
+
+    &[disabled] {
+      &[type='checkbox'],
+      &[type='radio'] {
+        @include utility-mx.high-contrast-mode {
+          border-color: GrayText !important;
+        }
+      }
+
+      &[type='checkbox'] {
+        &:checked,
+        &:indeterminate {
+          @include utility-mx.high-contrast-mode {
+            background-color: Field !important;
+            color: GrayText !important;
+          }
+        }
+      }
+
+      &[type='radio'] {
+        &:checked::after {
+          @include utility-mx.high-contrast-mode {
+            background-color: GrayText;
+          }
+        }
+      }
+
+      border: 0;
+      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
+
+      @include color-mx.on-dark-background {
+        background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
+      }
+
+      @include utility-mx.high-contrast-mode {
+        background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important;
+      }
+
+      .form-check-sm &[type='checkbox'] {
+        background-image: url('#{form-check.$form-check-input-disabled-background-url-light-sm}');
+
+        @include color-mx.on-dark-background {
+          background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-sm}');
+        }
+
+        @include utility-mx.high-contrast-mode {
+          background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-sm}') !important;
+        }
       }
     }
 
     &[disabled],
     &[disabled] ~ .form-check-label {
-      border-color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
-      color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
+      text-decoration: line-through;
+      color: color.$black-alpha-60;
+
+      @include color-mx.on-dark-background() {
+        color: color.$white-alpha-80;
+      }
     }
 
     .form-check-sm & {
@@ -159,13 +242,13 @@
       border: form-check.$form-check-input-border-width solid CanvasText;
 
       &:checked {
-        background-color: SelectedItem;
+        background-color: SelectedItem !important;
       }
 
       &::after,
       &:checked::after {
         max-width: calc(
-          #{form-check.$form-switch-height} - #{2 * form-check.$form-check-input-border-width}
+          form-check.$form-switch-height - (form-check.$form-check-input-border-width * 2)
         );
         border-color: Canvas;
         background-color: CanvasText;
@@ -178,6 +261,16 @@
       &::after {
         border-color: form-check.$form-switch-disabled-border-color;
       }
+
+      @include utility-mx.high-contrast-mode {
+        &::after {
+          border-color: Field;
+        }
+
+        &:checked {
+          background-color: GrayText !important;
+        }
+      }
     }
   }
 
@@ -186,12 +279,6 @@
 
     @include utility-mx.high-contrast-mode {
       border-color: Highlight;
-
-      &:checked,
-      &::after,
-      &:checked::after {
-        background-color: Highlight;
-      }
     }
   }
 

package/components/form-range.scss

@@ -10,11 +10,28 @@
 @use './../variables/components/forms';
 @use './../mixins/utilities';
 
+$track-height: 4px;
+$webkit-progress-height-adjustment: 2px;
+$webkit-thumb-width: 32px;
+
+.form-range-wrapper {
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+}
+
+:not(.form-range-wrapper) > {
+  .form-range {
+    @include utilities.focus-style() {
+      border-radius: commons.$border-radius;
+    }
+  }
+}
+
 .form-range {
-  // https://codepen.io/thebabydino/pen/goYYrN
-  --post-range: calc(var(--post-max) - var(--post-min));
-  --post-ratio: calc((var(--post-val) - var(--post-min)) / var(--post-range));
-  --post-sx: calc(0.5 * 1.5em + var(--post-ratio) * (100% - 1.5em));
+  &::-webkit-slider-container {
+    overflow-x: clip;
+  }
 
   &::-moz-range-thumb {
     border-radius: 50%;
@@ -22,26 +39,78 @@
     cursor: pointer;
   }
 
+  &::-webkit-slider-runnable-track {
+    height: $track-height;
+  }
+
+  &::-webkit-slider-thumb {
+    // Source: https://antvil.github.io/css-sos/sos/progress/
+    clip-path: polygon(
+      0 calc(50% - $track-height * 0.5),
+      1px calc(50% - #{$track-height * 0.5 + 4px}),
+      1px 0,
+      $webkit-thumb-width 0,
+      $webkit-thumb-width $webkit-thumb-width,
+      1px $webkit-thumb-width,
+      1px calc(50% + #{$track-height * 0.5 + 4px}),
+      0 calc(50% + #{$track-height * 0.5}),
+      -100vw calc(50% + #{$track-height * 0.5}),
+      -100vw calc(50% - #{$track-height * 0.5})
+    );
+  }
+
+  &::-moz-range-track,
+  &::-moz-range-progress {
+    height: $track-height;
+  }
+
   &:not(:disabled, .disabled) {
     &::-webkit-slider-runnable-track {
-      background: linear-gradient(color.$black, color.$black) 0 / var(--post-sx) 100%;
-      background-repeat: no-repeat;
       background-color: color.$gray-20;
     }
 
     &::-moz-range-progress {
       background-color: color.$black;
     }
+
+    &::-webkit-slider-thumb {
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$black;
+    }
+
+    &:hover {
+      &::-webkit-slider-thumb {
+        border-width: 3px;
+      }
+
+      &::-moz-range-thumb {
+        border-width: 3px;
+      }
+    }
+
+    &:focus::-moz-range-thumb {
+      box-shadow: none; // Remove default style
+    }
+
+    @include utilities.focus-style-custom('::-moz-range-thumb') {
+      outline: none;
+    }
   }
 
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
       border-color: forms.$form-range-thumb-disabled-border-color;
+      border-style: dashed;
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$gray-40;
     }
 
     &::-moz-range-thumb {
       border-color: forms.$form-range-thumb-disabled-border-color;
+      border-style: dashed;
+    }
+
+    &::-moz-range-progress {
+      background-color: color.$gray-40;
     }
   }
 
@@ -57,10 +126,16 @@
     // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work
     forced-color-adjust: none;
 
+    &::-webkit-slider-thumb {
+      box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw SelectedItem !important;
+    }
+
+    &::-moz-range-progress {
+      background-color: SelectedItem !important;
+    }
+
     &:not(:disabled, .disabled) {
       &::-webkit-slider-runnable-track {
-        background: linear-gradient(Highlight, Highlight) 0 / var(--post-sx) 100%;
-        background-repeat: no-repeat;
         background-color: ButtonBorder;
       }
 
@@ -73,38 +148,38 @@
         background-color: ButtonText;
       }
 
-      &::-moz-range-progress {
-        background-color: Highlight;
-      }
-
       &::-moz-range-thumb {
         background-color: ButtonFace;
         border-color: ButtonText;
       }
 
-      &:focus-visible {
+      &:hover {
         &::-webkit-slider-thumb {
-          outline-offset: commons.$border-thick;
-          outline: commons.$border-thick solid Highlight;
+          border-color: Highlight;
         }
 
         &::-moz-range-thumb {
-          outline-offset: commons.$border-thick;
-          outline: commons.$border-thick solid Highlight;
+          border-color: Highlight;
         }
       }
     }
 
     &:disabled,
     &.disabled {
+      &::-moz-range-progress {
+        background-color: GrayText !important;
+      }
+
       &::-webkit-slider-thumb {
         background-color: ButtonFace;
-        border-color: ButtonBorder;
+        border-color: GrayText;
+
+        box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw GrayText !important;
       }
 
       &::-moz-range-thumb {
         background-color: ButtonFace;
-        border-color: ButtonBorder;
+        border-color: GrayText;
       }
     }
   }