@swisspost/design-system-styles 6.6.0 → 6.6.2

package/components/card.scss

@@ -58,10 +58,13 @@
 
   .link-icon {
     text-decoration: none;
-  }
 
-  .link-icon .pi {
-    margin-right: 0.5rem;
+    .pi,
+    post-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.5rem;
+    }
   }
 
   > .list-group + .card-footer,

package/components/floating-label.scss

@@ -4,6 +4,7 @@
 @forward './../variables/options';
 
 @use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as b;
 @use './../themes/bootstrap/forms/floating-labels' as bffl;
 @use './../themes/bootstrap/forms/form-control' as bffc;
 @use './../mixins/forms' as forms-mx;
@@ -52,6 +53,7 @@
       padding-bottom: forms.$form-floating-input-padding-b;
 
       ~ 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 *
@@ -68,6 +70,39 @@
         padding-top: forms.$form-floating-input-padding-t * 1.33;
       }
     }
+
+    &[type='week'],
+    &[type='month'],
+    &[type='date'],
+    &[type='time'] {
+      background-position: right b.$input-height-inner-quarter bottom 0.5rem;
+    }
+
+    &.form-control-sm {
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-regular);
+      }
+      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;
+      padding-inline: forms.$form-floating-padding-x-sm;
+
+      ~ label {
+        font-size: forms.$form-floating-label-font-size-placeholder-sm;
+        padding-top: forms.$form-floating-label-padding-t-sm;
+        padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+      }
+
+      &:focus,
+      &:not(:placeholder-shown) {
+        padding-top: forms.$form-floating-padding-y-sm * 2;
+
+        ~ label {
+          padding-top: forms.$form-floating-padding-y-sm;
+          font-size: forms.$form-floating-label-font-size-sm;
+        }
+      }
+    }
   }
 
   > .form-select {
@@ -107,8 +142,31 @@
       }
     }
 
+    &.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: forms.$form-floating-padding-x-sm;
+      }
+
+      // 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;
+        }
+      }
+    }
+
     &[multiple] {
-      padding-top: forms.$form-floating-input-padding-t * 1.5;
+      padding-top: spacing.$size-big;
       padding-bottom: 0;
       height: auto;
 
@@ -121,7 +179,21 @@
             2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
         );
         height: auto;
-        background: forms.$input-bg;
+        left: forms.$input-border-width * 3;
+      }
+
+      &.form-select-sm {
+        padding-top: forms.$form-floating-input-padding-t;
+
+        ~ label {
+          left: forms.$input-border-width * 2;
+        }
+      }
+
+      &:not(:disabled) {
+        ~ label {
+          background: forms.$input-bg;
+        }
       }
 
       &:empty {
@@ -135,33 +207,10 @@
         }
       }
     }
-
-    &.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 {
-    padding-top: forms.$input-padding-y-lg * 1.5;
+    padding-top: forms.$input-padding-y-lg * 2;
     padding-bottom: forms.$input-padding-y-lg;
     height: auto;
 
@@ -174,7 +223,7 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: forms.$input-padding-y-lg * 1.5;
+      padding-top: forms.$input-padding-y-lg * 2;
       padding-bottom: forms.$input-padding-y-lg;
 
       ~ label {

package/components/form-check.scss

@@ -6,6 +6,7 @@
 @use '../variables/animation';
 @use '../variables/components/form-check';
 @use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
 
 .form-check {
   display: flex;
@@ -153,6 +154,24 @@
       }
     }
 
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+      border: form-check.$form-check-input-border-width solid CanvasText;
+
+      &:checked {
+        background-color: CanvasText;
+      }
+
+      &::after,
+      &:checked::after {
+        max-width: calc(
+          #{form-check.$form-switch-height} - #{2 * form-check.$form-check-input-border-width}
+        );
+        border-color: Canvas;
+        background-color: CanvasText;
+      }
+    }
+
     &[disabled] {
       background: form-check.$form-switch-disabled-bg;
 
@@ -164,6 +183,16 @@
 
   &:hover > .form-check-input:not([disabled]) {
     background-color: rgba(var(--post-contrast-color-rgb), 0.1);
+
+    @include utility-mx.high-contrast-mode {
+      border-color: Highlight;
+
+      &:checked,
+      &::after,
+      &:checked::after {
+        background-color: Highlight;
+      }
+    }
   }
 
   .form-check-label {

package/components/form-select.scss

@@ -9,18 +9,6 @@
 @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 {
@@ -28,36 +16,60 @@
     }
   }
 
-  &.is-valid,
-  &.is-invalid {
-    background-position:
-      right b.$form-select-padding-x * 2.5 center,
-      b.$form-select-bg-position;
+  &:not([multiple]) {
+    &: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);
+    }
 
-    &.form-select-lg {
+    &.is-valid,
+    &.is-invalid {
       background-position:
-        right b.$form-select-padding-x * 3 center,
+        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);
-  }
+    &.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);
+    }
 
-  &.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);
+    &.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);
+    }
   }
 
-  &.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);
+  &[multiple] {
+    &.is-valid,
+    &.is-invalid {
+      background-position: right b.$form-select-padding-x * 1.5 center;
+    }
+
+    &.is-valid {
+      background-image: b.escape-svg(form-select.$form-select-indicator-success),
+        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-icon, none);
+    }
   }
 
   @include utilities.high-contrast-mode() {
-    background-image: b.escape-svg(form-select.$form-select-indicator-hcm);
+    background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
+
+    @media (prefers-color-scheme: light) {
+      background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
+    }
+
     background-color: Field;
     border-color: FieldText;
     color: FieldText;
@@ -72,3 +84,18 @@
     }
   }
 }
+
+.form-select-rg {
+  @include forms-mixins.form-rg;
+  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-sm {
+  @include forms-mixins.form-sm;
+  background-size: forms.$form-bg-size-sm; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-lg {
+  @include forms-mixins.form-lg;
+  background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}

package/components/form-validation.scss

@@ -61,6 +61,14 @@
       background-repeat: no-repeat;
       background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
+
+      &.form-control-sm {
+        background-size: forms.$form-bg-size-sm;
+      }
+
+      &.form-control-lg {
+        background-size: forms.$form-bg-size;
+      }
     }
   }
 
@@ -93,30 +101,43 @@
 
 .form-control,
 .form-select {
-  @include form-validation-mx.form-validation-state-selector(invalid) {
+  &.is-invalid {
     border-color: form-validation.$form-feedback-invalid-color;
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
-    &.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;
+    &:focus {
+      border-color: form-validation.$form-feedback-invalid-color;
+      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+    }
+  }
 
-      &.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)
-      }
+  &.is-valid {
+    border-color: var(--post-success-green);
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
 
-      &.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-valid-color;
+      box-shadow: form-validation.$form-feedback-valid-box-shadow;
     }
+  }
 
-    &:focus {
-      border-color: form-validation.$form-feedback-invalid-color;
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+  &.is-invalid,
+  &.is-valid {
+    padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
+    background-repeat: no-repeat;
+    background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size.
+    background-position: right b.$input-height-inner-quarter center;
+
+    &.form-select-sm,
+    &.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). Duplicated rule in form-select for arrow size.
+    }
+
+    &.form-select-lg,
+    &.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). Duplicated rule in form-select for arrow size.
     }
   }
 }

package/components/forms.scss

@@ -13,7 +13,15 @@
 @use './../themes/bootstrap/forms/input-group' as bfig;
 
 .form-control-rg {
-  @include form-mixins.form-control-rg;
+  @include form-mixins.form-rg;
+}
+
+.form-control-sm {
+  @include form-mixins.form-sm;
+}
+
+.form-control-lg {
+  @include form-mixins.form-lg;
 }
 
 select.form-control-rg:not([size]):not([multiple]) {
@@ -35,11 +43,6 @@ select.form-control-rg:not([size]):not([multiple]) {
   &[type='file'] {
     position: relative;
 
-    min-height: calc(
-      (1rem * forms.$input-line-height) + (forms.$input-padding-y * 2) +
-        (forms.$input-border-width * 2)
-    );
-
     &::file-selector-button {
       display: block;
       position: absolute;
@@ -108,11 +111,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-sm {
-      min-height: calc(
-        (1rem * forms.$input-line-height-sm) + (forms.$input-padding-y-sm * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-sm;
       }
@@ -130,11 +128,6 @@ select.form-control-rg:not([size]):not([multiple]) {
     }
 
     &.form-control-lg {
-      min-height: calc(
-        (1rem * forms.$input-line-height-lg) + (forms.$input-padding-y-lg * 2) +
-          (forms.$input-border-width * 2)
-      );
-
       &::after {
         padding-inline: forms.$input-padding-y-lg;
       }

package/components/spinner.scss

@@ -1,4 +1,6 @@
+@use 'sass:math';
 @forward './../variables/options';
+@use './../variables/type';
 
 @use './../lic/bootstrap-license';
 @use './../themes/bootstrap/core' as *;
@@ -8,16 +10,6 @@
 @use './../variables/commons';
 @use './../variables/components/spinners';
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .spinner-bg {
   position: absolute;
   z-index: commons.$zindex-spinner;
@@ -38,34 +30,147 @@
 }
 
 .loader {
-  width: spinners.$spinner-size;
-  height: spinners.$spinner-size;
-  animation: spin 2s linear infinite;
-  border: spinners.$spinner-border-width solid spinners.$spinner-color-primary;
-  border-radius: 50%;
-  border-right-color: transparent;
-  border-bottom-color: spinners.$spinner-color-secondary;
+  width: 1em;
+  height: 1em;
+  animation: spin spinners.$spinner-duration linear infinite;
+  position: relative;
+  font-size: spinners.$spinner-size;
 
+  // Sizes
+  @each $key, $font-size in spinners.$spinner-size-map {
+    &.loader-#{$key} {
+      font-size: $font-size;
+    }
+  }
+
+  // Deprecated sizes
   &.loader-sm {
-    width: spinners.$spinner-size-sm;
-    height: spinners.$spinner-size-sm;
-    border-width: spinners.$spinner-border-width-sm;
+    font-size: spinners.$spinner-size-sm;
   }
 
   &.loader-xs {
-    width: spinners.$spinner-size-xs;
-    height: spinners.$spinner-size-xs;
-    border-width: spinners.$spinner-border-width-xs;
+    font-size: spinners.$spinner-size-xs;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: max(2px, 0.12em) solid spinners.$spinner-color-secondary; // Size is proportional, but 1px is too thin on browser compared to design
+    transform: rotate(130deg);
+    animation-timing-function: linear;
+    animation-direction: alternate;
+    animation-duration: math.div(spinners.$spinner-duration, 2);
+    animation-iteration-count: infinite;
+  }
+
+  // Background bar
+  &::before {
+    animation-name: progressLoaderInverted; // Mask part of the bar where the progress bar is active against antialiasing issue
+  }
+
+  // Progress bar
+  &::after {
+    border-color: spinners.$spinner-color-primary;
+    animation-name: progressLoader;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: math.div(
+      spinners.$spinner-duration,
+      spinners.$spinner-speed-reduced-motion
+    );
+
+    &::before,
+    &::after {
+      animation-duration: math.div(
+        spinners.$spinner-duration,
+        2 * spinners.$spinner-speed-reduced-motion
+      );
+    }
   }
 
   @include utilities.high-contrast-mode() {
-    border-color: Highlight;
-    border-bottom-color: CanvasText;
-    border-right-color: Canvas;
+    &::before {
+      border-color: CanvasText;
+    }
 
-    @supports (forced-color-adjust: none) {
-      forced-color-adjust: none;
-      border-right-color: transparent;
+    &::after {
+      border-color: Highlight;
     }
   }
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(720deg);
+  }
+}
+
+$progress-step-1-inner:
+  50% 50%,
+  0 0,
+  42% 0,
+  42% 0,
+  42% 0,
+  42% 0;
+$progress-step-2-inner:
+  50% 50%,
+  0 0,
+  100% 0,
+  100% 0,
+  100% 0,
+  100% 0;
+$progress-step-3-inner:
+  50% 50%,
+  0 0,
+  100% 0,
+  100% 100%,
+  100% 100%,
+  100% 100%;
+
+@keyframes progressLoader {
+  0% {
+    -webkit-clip-path: polygon($progress-step-1-inner);
+            clip-path: polygon($progress-step-1-inner);
+  }
+
+  50% {
+    -webkit-clip-path: polygon($progress-step-2-inner);
+            clip-path: polygon($progress-step-2-inner);
+  }
+
+  100% {
+    -webkit-clip-path: polygon($progress-step-3-inner);
+            clip-path: polygon($progress-step-3-inner);
+  }
+}
+
+/* This animation works as kind of inverted mask based on the progressLoader animation */
+@keyframes progressLoaderInverted {
+  0% {
+    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-1-inner, 50% 50%, 100% 100%, 100% 0);
+            clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-1-inner, 50% 50%, 100% 100%, 100% 0);
+  }
+
+  50% {
+    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-2-inner, 50% 50%, 100% 100%, 100% 0);
+            clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-2-inner, 50% 50%, 100% 100%, 100% 0);
+  }
+
+  100% {
+    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-3-inner, 50% 50%, 100% 100%, 100% 0);
+            clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-3-inner, 50% 50%, 100% 100%, 100% 0);
+  }
+}

package/components/timepicker.scss

@@ -76,7 +76,7 @@
   }
 
   .form-control {
-    @include form-mixins.form-control-rg;
+    @include form-mixins.form-rg;
   }
 }
 

package/functions/_contrast.scss

@@ -53,7 +53,7 @@
   the color is statically defined because the reference to the variable from here
   would create a loop
   */
-  @if ($background == #2c911c) {
+  @if ($background == #2c871d) {
     @return 'dark';
   }