fix(styles): Hide focus state when unnecessary and make design more c…

…oherent (#2810)

Currently, forms elements like checkbox, radio, switch show focus styles
on `:focus` state while others like buttons show only on
`:focus-visible` state. This is an improvement using `:has` to make the
design more coherent and simulate `:focus-visible` instead of using
`:focus-within` as there is no `:focus-visible:within` unfortunately.

We'll quickly discuss it on the pattern meeting.

.changeset/silver-items-press.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored the new focus style to only be visible when using keyboard for form elements.

packages/styles/src/mixins/_utilities.scss

@@ -87,11 +87,16 @@
   outline: none;
 }
 
-@mixin focus-style($border-radius: commons.$border-radius, $vendor-prefix: '') {
-  &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
-    outline-offset: spacing.$size-line;
-    outline: spacing.$size-line solid var(--post-focus-color);
-    border-radius: $border-radius;
+@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;
 
     @include high-contrast-mode() {
       outline-color: Highlight;
@@ -100,10 +105,33 @@
     // 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;
+      border-radius: commons.$border-radius !important;
+
+      @include high-contrast-mode() {
+        outline-color: Highlight;
+      }
+
+      // In case rules need to be slightly adjusted
+      @content;
+    }
+  }
 }
 
 @mixin focus-style-custom($vendor-prefix: '') {
-  &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
+  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
+  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$vendor-prefix} {
     @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} {
+      @content;
+    }
+  }
 }