@swisspost/design-system-styles 6.6.1 → 6.6.3

package/components/floating-label.scss

@@ -64,6 +64,12 @@
       }
     }
 
+    &:disabled {
+      ~ label {
+        color: forms.$input-disabled-color;
+      }
+    }
+
     &[type='file'] {
       &:focus,
       &:not(:placeholder-shown) {

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: SelectedItem;
+      }
+
+      &::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

@@ -64,7 +64,12 @@
   }
 
   @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;

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/type.scss

@@ -91,6 +91,8 @@ fieldset {
   }
 
   &-footer {
+    color: var(--post-contrast-color);
+
     cite {
       @extend %font-curve-small;
       font-weight: type.$blockquote-cite-font-weight;

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';
   }