Merge branch 'main' into 4173-remove-deprecated-size-variables-size-h…

…air-size-line-etc
swisspost · Dec 19, 2024 · f67d005 · f67d005
2 parents 99fc584 + 3ac91be
commit f67d005
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 72 deletions.
diff --git a/.changeset/four-jokes-tease.md b/.changeset/four-jokes-tease.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added hover styles in high contrast mode for the css components `Button`, `Chip`, `Form Search` and `Button Close`.
diff --git a/.changeset/metal-geese-swim.md b/.changeset/metal-geese-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed colors of validation icon in HCM on form elements.
diff --git a/.changeset/real-phones-scream.md b/.changeset/real-phones-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Modified header megadropdown to close when focus is moved outside.
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -80,6 +80,14 @@ export class PostMegadropdown {
     this.popoverRef.hide();
   }
 
+  private handleFocusout(event: FocusEvent) {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    const megadropdown= this.popoverRef.querySelector('.megadropdown');
+    if (!megadropdown.contains(relatedTarget)) {
+      this.hide();
+    }
+  }
+
   render() {
     return (
       <Host>
@@ -89,7 +97,7 @@ export class PostMegadropdown {
           edge-gap="0"
           ref={el => (this.popoverRef = el)}
         >
-          <div class="megadropdown">
+          <div class="megadropdown" onFocusout={e => this.handleFocusout(e)}>
             <div onClick={() => this.handleBackButtonClick()} class="back-button">
               <slot name="back-button"></slot>
             </div>

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
@@ -57,17 +57,19 @@ tokens.$default-map: components.$post-button;
 
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    border-color: ButtonBorder;
-    background-color: ButtonFace;
-
-    &:not(:disabled, .disabled) {
-      &:hover {
-        border-color: highlight;
+    &[class] {
+      border-color: ButtonBorder;
+      background-color: ButtonFace;
+
+      &:not(:disabled, .disabled) {
+        &:hover {
+          border-color: highlight;
+        }
       }
-    }
 
-    &:disabled {
-      border-color: GrayText !important;
+      &:disabled {
+        border-color: GrayText !important;
+      }
     }
   }
 }

diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss
@@ -118,6 +118,10 @@
       color: chip.$chip-hover-color;
       background-color: chip.$chip-hover-bg;
 
+      @include utilities.high-contrast-mode() {
+        border-color: highlight;
+      }
+
       > .badge {
         background-color: chip.$chip-bg;
       }

diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss
@@ -192,13 +192,7 @@ input.form-control {
     }
   }
 
-  &.is-valid:not(:disabled) {
-    background-image: forms.$valid-icon;
-  }
-
-  &.is-invalid:not(:disabled) {
-    background-image: forms.$invalid-icon;
-  }
+  @include forms-mx.validation-icons;
 }
 
 .form-label:has(+ input.form-control[disabled]) {

diff --git a/packages/styles/src/components/form-search-input.scss b/packages/styles/src/components/form-search-input.scss
@@ -42,6 +42,9 @@ tokens.$default-map: components.$post-search-input;
     .search-button {
       post-icon {
         color: tokens.get('input-color-hover-fg', components.$post-text-input);
+        @include utilities.high-contrast-mode() {
+          color: Highlight;
+        }
       }
     }
   }

diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -1,10 +1,12 @@
 @forward './../variables/options';
 
 @use './../mixins/utilities';
-@use './../mixins/forms';
+@use './../functions/forms' as forms-fx;
+@use './../mixins/forms' as forms-mx;
 @use './../functions/tokens';
 @use './../tokens/components';
 @use './../tokens/elements';
+@use './../variables/components/forms';
 
 tokens.$default-map: components.$post-select;
 
@@ -26,7 +28,7 @@ tokens.$default-map: components.$post-select;
   border-color: tokens.get('select-color-enabled-border');
   border-radius: tokens.get('select-border-radius');
   color: tokens.get('select-color-enabled-fg');
-  @include forms.select-bg-image('enabled');
+  background-image: forms-fx.select-arrow-icon('enabled');
 
   &:disabled {
     opacity: 1;
@@ -36,7 +38,7 @@ tokens.$default-map: components.$post-select;
     border-style: tokens.get('select-border-style-disabled');
 
     &:not([multiple]) {
-      @include forms.select-bg-image('disabled');
+      background-image: forms-fx.select-arrow-icon('disabled');
     }
   }
 
@@ -45,7 +47,7 @@ tokens.$default-map: components.$post-select;
       background-color: tokens.get('select-color-selected-bg');
       color: tokens.get('select-color-selected-fg');
       border-color: tokens.get('select-color-selected-border');
-      @include forms.select-bg-image('selected');
+      background-image: forms-fx.select-arrow-icon('selected');
 
       @include utilities.focus-style;
 
@@ -60,7 +62,7 @@ tokens.$default-map: components.$post-select;
       border-color: tokens.get('select-color-hover-border');
 
       &:not([multiple]) {
-        @include forms.select-bg-image('hover');
+        background-image: forms-fx.select-arrow-icon('hover');
       }
 
       @include utilities.high-contrast-mode {
@@ -90,29 +92,53 @@ tokens.$default-map: components.$post-select;
   }
 
   &.is-valid:not(:disabled) {
-    @include forms.select-bg-image('enabled', 'valid');
+    background-image: forms-fx.select-arrow-icon('enabled'), forms.$valid-icon;
 
     &:focus {
-      @include forms.select-bg-image('selected', 'valid');
+      background-image: forms-fx.select-arrow-icon('selected'), forms.$valid-icon;
     }
 
     &:hover {
       &:not([multiple]) {
-        @include forms.select-bg-image('hover', 'valid');
+        background-image: forms-fx.select-arrow-icon('hover'), forms.$valid-icon;
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0');
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333');
       }
     }
   }
 
   &.is-invalid:not(:disabled) {
-    @include forms.select-bg-image('enabled', 'invalid');
+    background-image: forms-fx.select-arrow-icon('enabled'), forms.$invalid-icon;
 
     &:focus {
-      @include forms.select-bg-image('selected', 'invalid');
+      background-image: forms-fx.select-arrow-icon('selected'), forms.$invalid-icon;
     }
 
     &:hover {
       &:not([multiple]) {
-        @include forms.select-bg-image('hover', 'invalid');
+        background-image: forms-fx.select-arrow-icon('hover'), forms.$invalid-icon;
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0');
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333');
       }
     }
   }
@@ -126,13 +152,7 @@ tokens.$default-map: components.$post-select;
       background-position: center right tokens.get('select-validation-icon-position-inline-end');
     }
 
-    &.is-valid:not(:disabled) {
-      @include forms.select-bg-image($validation: 'valid');
-    }
-
-    &.is-invalid:not(:disabled) {
-      @include forms.select-bg-image($validation: 'invalid');
-    }
+    @include forms-mx.validation-icons();
   }
 }
 
@@ -224,43 +244,43 @@ tokens.$default-map: components.$post-select;
 
 [data-color-scheme='dark'] {
   .form-select:not([multiple]) {
-    @include forms.select-bg-image('enabled', null, 'dark');
+    background-image: forms-fx.select-arrow-icon('enabled', 'dark');
 
     &:disabled {
-      @include forms.select-bg-image('disabled', null, 'dark');
+      background-image: forms-fx.select-arrow-icon('disabled', 'dark');
     }
 
     &:not(:disabled) {
       &:focus {
-        @include forms.select-bg-image('selected', null, 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark');
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', null, 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark');
       }
     }
 
     &.is-valid:not(:disabled) {
-      @include forms.select-bg-image('enabled', 'valid', 'dark');
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$valid-icon;
 
       &:focus {
-        @include forms.select-bg-image('selected', 'valid', 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$valid-icon;
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', 'valid', 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$valid-icon;
       }
     }
 
     &.is-invalid:not(:disabled) {
-      @include forms.select-bg-image('enabled', 'invalid', 'dark');
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$invalid-icon;
 
       &:focus {
-        @include forms.select-bg-image('selected', 'invalid', 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$invalid-icon;
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', 'invalid', 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$invalid-icon;
       }
     }
   }

diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
@@ -86,13 +86,7 @@ textarea.form-control {
     }
   }
 
-  &.is-valid:not(:disabled) {
-    background-image: forms.$valid-icon;
-  }
-
-  &.is-invalid:not(:disabled) {
-    background-image: forms.$invalid-icon;
-  }
+  @include forms-mx.validation-icons;
 }
 
 .form-label:has(+ textarea.form-control[disabled]) {

diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss
@@ -15,6 +15,14 @@ tokens.$default-map: components.$post-close;
   background-color: tokens.get('close-enabled-bg');
   color: tokens.get('close-enabled-fg');
 
+  &:hover {
+    > post-icon {
+      @include utilities.high-contrast-mode() {
+        color: Highlight;
+      }
+    }
+  }
+
   > post-icon {
     min-width: tokens.get('close-icon-size');
     width: tokens.get('close-icon-size');

diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss
@@ -1,7 +1,12 @@
-// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
+@use 'sass:map';
+
 @use './color';
 @use '../functions/tokens';
+@use '../functions/icons';
+@use '../functions/utilities';
+@use '../variables/components/forms';
 
+// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
 @function get-background-svg-stroke(
   $type,
   $color,
@@ -25,3 +30,39 @@
     $svg-additional-attributes + " fill='none' stroke='" + #{color.encode-uri-color($color)} + "' stroke-width='" +
     $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute + ' /%3e%3c/svg%3e';
 }
+
+@function select-arrow-icon($state: null, $mode: 'light') {
+  // Hardcoded colors because CSS variables cannot be used as fill color of background-image
+  $arrow-color-map: (
+    'enabled-light': #050400,
+    'enabled-dark': #fff,
+    'hover-light': #504f4b,
+    'hover-dark': #fff,
+    'selected-light': #050400,
+    'selected-dark': #fff,
+    'disabled-light': #696864,
+    'disabled-dark': #fff,
+  );
+
+  @if ($state) {
+    $state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
+  }
+
+  @return $state;
+}
+
+@function encode-color($color) {
+  @return utilities.replace($color, '#', '%23');
+}
+
+@function valid-icon($color) {
+  $encoded-color: encode-color($color);
+  $icon: utilities.replace(forms.$valid-icon, '%23107800', $encoded-color);
+  @return $icon;
+}
+
+@function invalid-icon($color) {
+  $encoded-color: encode-color($color);
+  $icon: utilities.replace(forms.$invalid-icon, '%23B20000', $encoded-color);
+  @return $icon;
+}