@swisspost/design-system-styles 6.6.4 → 7.1.0

package/components/form-select.scss

@@ -6,20 +6,64 @@
 @use './../mixins/forms' as forms-mixins;
 @use './../mixins/utilities';
 
+@use './../variables/commons';
 @use './../variables/components/forms';
 @use './../variables/components/form-select' as form-select;
 
+.form-select-wrapper {
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+}
+
+:not(.form-select-wrapper) > {
+  .form-select {
+    @include utilities.focus-style() {
+      border-radius: commons.$border-radius;
+    }
+  }
+}
+
 .form-select {
+  --form-select-indicator: #{form-select.$form-select-indicator};
+  --form-select-indicator-success: #{b.escape-svg(form-select.$form-select-indicator-success)};
+  --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error)};
+
+  &:focus {
+    box-shadow: none; // Override bootstrap
+
+    @include utilities.high-contrast-mode {
+      border-color: FieldText !important;
+    }
+  }
+
   &:not(:disabled) {
+    &:hover,
+    &:focus {
+      @include utilities.high-contrast-mode {
+        border-color: FieldText;
+      }
+    }
+
     &:hover {
-      border-color: var(--post-contrast-color);
+      @include utilities.high-contrast-mode {
+        border-color: Highlight;
+      }
+    }
+  }
+
+  &:disabled {
+    @include utilities.high-contrast-mode {
+      border-color: GrayText !important;
+      background-color: Field !important;
+      color: GrayText;
     }
   }
 
   &: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);
+        var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
     }
 
     &.is-valid,
@@ -36,13 +80,13 @@
     }
 
     &.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);
+      background-image: var(--form-select-indicator-success), var(--form-select-indicator),
+        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);
+      background-image: var(--form-select-indicator-error), var(--form-select-indicator),
+        var(--bs-form-select-bg-icon, none);
     }
   }
 
@@ -53,20 +97,30 @@
     }
 
     &.is-valid {
-      background-image: b.escape-svg(form-select.$form-select-indicator-success),
-        var(--bs-form-select-bg-icon, none);
+      background-image: var(--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);
+      background-image: var(--form-select-indicator-error), var(--bs-form-select-bg-icon, none);
     }
   }
 
   @include utilities.high-contrast-mode() {
+    --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
+    --form-select-indicator-success: #{b.escape-svg(
+        form-select.$form-select-indicator-success-hcm-dark
+      )};
+    --form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error-hcm-dark)};
     background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);
 
     @media (prefers-color-scheme: light) {
+      --form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
+      --form-select-indicator-success: #{b.escape-svg(
+          form-select.$form-select-indicator-success-hcm-light
+        )};
+      --form-select-indicator-error: #{b.escape-svg(
+          form-select.$form-select-indicator-error-hcm-light
+        )};
       background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
     }
 
@@ -77,11 +131,6 @@
     &:focus-visible {
       color: FieldText;
     }
-
-    &:focus,
-    &:hover:not(:disabled) {
-      border-color: Highlight;
-    }
   }
 }
 

package/components/form-validation.scss

@@ -23,9 +23,7 @@
   font-size: form-validation.$form-feedback-font-size;
 
   @include utilities-mx.high-contrast-mode() {
-    color: HighlightText !important;
-    background-color: Highlight !important;
-    forced-color-adjust: none;
+    padding-inline: 0;
   }
 }
 
@@ -57,7 +55,6 @@
   .form-control {
     @include b.form-validation-state-selector($state) {
       padding-right: b.$input-height-inner;
-      background-image: b.escape-svg($icon);
       background-repeat: no-repeat;
       background-position: right b.$input-height-inner-quarter center;
       background-size: form-validation.$form-feedback-icon-size;
@@ -103,21 +100,17 @@
 .form-select {
   &.is-invalid {
     border-color: form-validation.$form-feedback-invalid-color;
-    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
 
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
     }
   }
 
   &.is-valid {
-    border-color: var(--post-success-green);
-    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+    border-color: var(--post-success);
 
     &:focus {
       border-color: form-validation.$form-feedback-valid-color;
-      box-shadow: form-validation.$form-feedback-valid-box-shadow;
     }
   }
 
@@ -142,14 +135,36 @@
   }
 }
 
+.form-control:not([type='file']) {
+  &.is-invalid {
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
+
+    @include utilities-mx.high-contrast-mode() {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);
+
+      @media (prefers-color-scheme: light) {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
+      }
+    }
+  }
+
+  &.is-valid {
+    background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+
+    @include utilities-mx.high-contrast-mode() {
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);
+
+      @media (prefers-color-scheme: light) {
+        background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
+      }
+    }
+  }
+}
+
 .form-check-input {
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
 
-    &:focus {
-      box-shadow: form-validation.$form-feedback-invalid-box-shadow;
-    }
-
     ~ .form-check-label {
       color: form-validation.$form-feedback-invalid-color;
     }
@@ -161,5 +176,9 @@
         color: color.$white;
       }
     }
+
+    @include utilities-mx.high-contrast-mode {
+      border-color: FieldText; // For blink-browser as otherwise the invalid color will be converted to Highlight
+    }
   }
 }

package/components/forms.scss

@@ -2,6 +2,7 @@
 
 @use './../lic/bootstrap-license';
 
+@use './../variables/commons';
 @use './../variables/components/forms';
 
 @use './../mixins/utilities';
@@ -28,11 +29,54 @@ select.form-control-rg:not([size]):not([multiple]) {
   height: forms.$input-height-rg;
 }
 
+.form-control-wrapper {
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+  }
+}
+
+:not(.form-control-wrapper) > {
+  .form-control {
+    @include utilities.focus-style() {
+      border-radius: commons.$border-radius;
+    }
+  }
+}
+
 .form-control {
   position: relative;
 
+  &:focus {
+    box-shadow: none; // Override bootstrap
+
+    @include utilities.high-contrast-mode {
+      border-color: FieldText !important; // On blink browser valid and invalid border colors are converted to Highlight color
+    }
+  }
+
+  &:not(:disabled) {
+    &:hover,
+    &:focus {
+      @include utilities.high-contrast-mode {
+        border-color: FieldText;
+      }
+    }
+
+    &:hover {
+      @include utilities.high-contrast-mode {
+        border-color: Highlight;
+      }
+    }
+  }
+
   &:disabled {
     color: forms.$input-disabled-color;
+
+    @include utilities.high-contrast-mode {
+      border-color: GrayText !important;
+      background-color: Field !important;
+      color: GrayText;
+    }
   }
 
   &[readonly]:not(:disabled) {
@@ -43,6 +87,13 @@ select.form-control-rg:not([size]):not([multiple]) {
   &[type='file'] {
     position: relative;
 
+    &:disabled {
+      @include utilities.high-contrast-mode {
+        color: GrayText; // Needed for the button on blink browser, even if we define it on .form-control:disabled
+        border-color: GrayText;
+      }
+    }
+
     &::file-selector-button {
       display: block;
       position: absolute;
@@ -133,17 +184,4 @@ select.form-control-rg:not([size]):not([multiple]) {
       }
     }
   }
-
-  @include utilities.high-contrast-mode() {
-    &:hover,
-    &:focus {
-      &:not(:disabled) {
-        border-color: Highlight;
-
-        &::file-selector-button {
-          border-left-color: Highlight;
-        }
-      }
-    }
-  }
 }

package/components/intranet-header/_sidebar.scss

@@ -1,6 +1,7 @@
+@use './../../mixins/utilities';
 @use './../../variables/color';
-@use './../../variables/spacing';
 @use './../../variables/commons';
+@use './../../variables/spacing';
 @use './../../variables/components/intranet-header';
 
 @use './../../themes/bootstrap/core' as *;
@@ -17,6 +18,21 @@
   flex: 1 0 auto;
   flex-direction: column;
 
+  > div > ul > li:first-child {
+    button {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      background: none;
+      border: 0;
+
+      @include utilities.focus-style() {
+        border-radius: commons.$border-radius;
+      }
+    }
+  }
+
   @include media-breakpoint-down(md) {
     flex: 0 0 auto;
   }
@@ -33,15 +49,18 @@
 
       margin: spacing.$spacer * -1;
       margin-bottom: 0;
-      padding: spacing.$spacer;
-      padding-top: spacing.$spacer;
+      padding: spacing.$size-mini;
+      padding-left: spacing.$size-regular;
       border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
       background-color: color.$white;
 
+      button {
+        padding: spacing.$size-mini;
+      }
+
       &:hover,
       &:focus {
-        background-color: get-solid-color(rgba(var(--post-contrast-color-rgb), 0.1), color.$white);
-        cursor: pointer;
+        background-color: color.$light;
       }
 
       i.pi {

package/components/sizing.scss

@@ -7,7 +7,7 @@
 @use './../mixins/utilities';
 
 // Post margins, paddings and sizes
-@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
 
@@ -56,7 +56,7 @@
 }
 
 // Post breakpoints width - e.g. w-sm-100
-@each $breakpoint in map-keys(breakpoints.$grid-breakpoints) {
+@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     @if $breakpoint != 'xs' {
       @each $prop, $abbrev in (width: w) {

package/components/spinner.scss

@@ -142,35 +142,29 @@ $progress-step-3-inner:
 
 @keyframes progressLoader {
   0% {
-    -webkit-clip-path: polygon($progress-step-1-inner);
-            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);
+    clip-path: polygon($progress-step-2-inner);
   }
 
   100% {
-    -webkit-clip-path: polygon($progress-step-3-inner);
-            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);
+    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);
+    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);
+    clip-path: polygon(0 0, 0 100%, 100% 100%, $progress-step-3-inner, 50% 50%, 100% 100%, 100% 0);
   }
 }