Merge branch 'fix/improve-forms-input-in-hcm' into feat/2525-update-f…

…orm-check-styles
swisspost · Apr 8, 2024 · 91f82aa · 91f82aa
2 parents 4edc2db + e15eeb7
commit 91f82aa
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 70 deletions.
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
@@ -53,12 +53,22 @@
     border: form-check.$form-check-input-border-width solid
       rgba(var(--post-contrast-color-rgb), 0.8);
 
+    @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 {
       content: '';
       display: block;
       flex: 1;
     }
 
+    &:checked {
+      @include utility-mx.high-contrast-mode {
+        border-color: SelectedItem !important;
+      }
+    }
+
     &:checked,
     &:indeterminate {
       color: var(--post-contrast-color);
@@ -82,6 +92,7 @@
       &:indeterminate {
         @include utility-mx.high-contrast-mode {
           background-color: SelectedItem !important;
+          border-color: SelectedItem !important;
           color: SelectedItemText !important; // Important is needed for card-control
         }
       }
@@ -176,16 +187,6 @@
         }
       }
     }
-
-    &[type='checkbox'],
-    &[type='radio'] {
-      @include utility-mx.high-contrast-mode {
-        &:hover,
-        &:focus {
-          border-color: Highlight;
-        }
-      }
-    }
   }
 
   &-label {
@@ -239,6 +240,7 @@
 
       &:checked {
         background-color: SelectedItem !important;
+        border-color: SelectedItem !important;
       }
 
       &::after,
@@ -262,10 +264,6 @@
 
   &: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;
-    }
   }
 
   .form-check-label {

diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss
@@ -147,16 +147,6 @@ $webkit-thumb-width: 32px;
       }
     }
 
-    &:hover {
-      &::-webkit-slider-thumb {
-        border-color: Highlight;
-      }
-
-      &::-moz-range-thumb {
-        border-color: Highlight;
-      }
-    }
-
     &:disabled,
     &.disabled {
       &::-webkit-slider-thumb {

diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
@@ -14,6 +14,8 @@
   --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)};
 
+  @include utilities.focus-style('', 'true');
+
   &:not(:disabled) {
     &:hover {
       border-color: var(--post-contrast-color);
@@ -91,11 +93,6 @@
     &:focus-visible {
       color: FieldText;
     }
-
-    &:focus,
-    &:hover:not(:disabled) {
-      border-color: Highlight;
-    }
   }
 }
 

diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
@@ -23,9 +23,7 @@
   font-size: form-validation.$form-feedback-font-size;
 
   @include utilities-mx.high-contrast-mode() {
-    color: MarkText !important;
-    background-color: Mark !important;
-    forced-color-adjust: none;
+    padding-inline:0;
   }
 }
 
@@ -176,5 +174,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
+    }
   }
 }
diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss
@@ -31,6 +31,8 @@ select.form-control-rg:not([size]):not([multiple]) {
 .form-control {
   position: relative;
 
+  @include utilities.focus-style('', 'true');
+
   &:disabled {
     color: forms.$input-disabled-color;
   }
@@ -133,17 +135,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;
-        }
-      }
-    }
-  }
 }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
@@ -87,38 +87,40 @@
   outline: none;
 }
 
-@mixin focus-style($vendor-prefix: '') {
-  outline-style: none;
-  outline-offset: spacing.$size-line;
-  outline-width: spacing.$size-line;
-  outline-color: var(--post-focus-color);
-
-  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
-  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$vendor-prefix} {
-    outline-style: solid;
-    border-radius: commons.$border-radius !important;
+@mixin focus-style($vendor-prefix: '', $on-focus: '') {
+  outline-style: none !important; // !important is needed to override bootstrap .form-control:focus
+  outline-offset: spacing.$size-line !important;
+  outline-width: spacing.$size-line !important;
+  outline-color: var(--post-focus-color) !important;
+
+  @if ($on-focus == 'true') {
+    &:is(:focus, .pretend-focus)#{$vendor-prefix} {
+      outline-style: solid !important; // !important is needed to override bootstrap .form-control:focus
+      border-radius: commons.$border-radius !important;
 
-    @include high-contrast-mode() {
-      outline-color: Highlight;
+      // In case rules need to be slightly adjusted
+      @content;
     }
-
-    // In case rules need to be slightly adjusted
-    @content;
-  }
-
-  // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
-  @supports not selector(:has(:focus-visible)) {
-    &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
-      outline-style: solid;
+  } @else {
+    // :has(:focus-visible) mimic a focus-visible-within pseudo-class
+    &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$vendor-prefix} {
+      outline-style: solid !important;
       border-radius: commons.$border-radius !important;
 
-      @include high-contrast-mode() {
-        outline-color: Highlight;
-      }
-
       // In case rules need to be slightly adjusted
       @content;
     }
+
+    // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
+    @supports not selector(:has(:focus-visible)) {
+      &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
+        outline-style: solid !important;
+        border-radius: commons.$border-radius !important;
+
+        // In case rules need to be slightly adjusted
+        @content;
+      }
+    }
   }
 }