feat(styles): New focus mixin (#2780)

### What

- New focus mixin and replace old focus-outline mixin on some
components.
- Added focus mixin on elements of the documentation 

### Test

Components tested:

- Alert
- Button
- Checkbox
- Radio
- Switch
- Rating

---------

Co-authored-by: Alizé Debray <[email protected]>

.changeset/beige-pans-kiss.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Adjusted focus styles with new color for button, checkbox, radio, switch, rating elements.

packages/documentation/.storybook/styles/preview.scss

@@ -2,6 +2,7 @@
 // TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed
 @use '@swisspost/design-system-styles/intranet.scss';
 @use '@swisspost/design-system-styles/core.scss' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 #storybook-root,
 #storybook-docs {
@@ -66,6 +67,11 @@
         display: inline-block;
       }
     }
+
+    // General styles for content
+    a {
+      @include utilities.focus-style();
+    }
   }
 
   pre {

packages/documentation/src/shared/tile/tile.component.scss

@@ -6,6 +6,10 @@ $tile-size: var(--post-docs-tile-size, 120px);
 $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
 
 :host{
+  a {
+    @include utilities.focus-style();
+  }
+
   .tile {
     display: flex;
     flex-direction: column;

packages/styles/src/components/button.scss

@@ -18,7 +18,7 @@
 
 .btn {
   @include button-mx.button-size();
-  @include forms.focus-outline();
+  @include utilities.focus-style();
 
   // Resets
   display: inline-flex;

packages/styles/src/components/form-check.scss

@@ -14,6 +14,8 @@
   row-gap: form-check.$form-check-row-gap;
   margin-bottom: form-check.$form-check-margin-bottom;
 
+  @include utility-mx.focus-style();
+
   &-inline {
     display: inline-flex;
   }
@@ -38,6 +40,7 @@
   }
 
   &-input {
+    @include utility-mx.focus-style-none();
     display: inline-flex;
     flex: 0 auto;
     appearance: none;
@@ -47,12 +50,6 @@
     border: form-check.$form-check-input-border-width solid
       rgba(var(--post-contrast-color-rgb), 0.8);
 
-    &:focus {
-      outline: none;
-      border-color: currentColor;
-      box-shadow: form-check.$form-check-input-focus-box-shadow;
-    }
-
     &::after {
       content: '';
       display: block;

packages/styles/src/mixins/_forms.scss

@@ -47,6 +47,7 @@
   min-height: forms.$input-height-lg;
 }
 
+/* Deprecated use the one in utilities.scss */
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;

packages/styles/src/mixins/_utilities.scss

@@ -1,3 +1,6 @@
+@use '../variables/spacing';
+@use '../variables/commons';
+
 @mixin reset-list() {
   margin: 0;
   padding: 0;
@@ -79,3 +82,28 @@
     @content;
   }
 }
+
+@mixin focus-style-none {
+  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;
+
+    @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} {
+    @content;
+  }
+}

packages/styles/src/placeholders/_close.scss

@@ -10,7 +10,7 @@
 
 %btn-close {
   @include button-mx.reset-button;
-  @include forms-mx.focus-outline;
+  @include utilities-mx.focus-style();
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;

packages/styles/src/placeholders/_color.scss

@@ -19,6 +19,7 @@
 // light background variables
 %color-background-light-variables {
   --post-contrast-color: #{color.$black};
+  --post-focus-color: #{color.$focus-light};
   --post-contrast-color-inverted: #{color.$white};
 
   @each $name, $color in color.$post-grays {
@@ -45,6 +46,7 @@
 // dark background variables
 %color-background-dark-variables {
   --post-contrast-color: #{color.$white};
+  --post-focus-color: #{color.$white};
   --post-contrast-color-inverted: #{color.$black};
   --post-dark: #{color.$light};
   --post-light: #{color.$dark};

packages/styles/src/variables/_color.scss

@@ -24,6 +24,8 @@ $black: #000;
 $dark: $gray-80;
 $light: $gray-background-light;
 
+$focus-light: #1976c8;
+
 // Accent colors
 $nightblue-dark: #004976;
 $nightblue-bright: #0076a8;