feat: ds-focus use both outline and box-shadow (#2548)

comment about why has been added in code.
We should also consider moving the focus style outside of its layer, to
make sure it is less likely to be overridden

packages/css/button.css

@@ -9,8 +9,8 @@
   --dsc-button-padding-inline: var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
-  @composes ds-focus from './utilities.css';
   @composes ds-body-text--short-md from './utilities.css';
+  @composes ds-focus from './utilities.css';
 
   align-items: center;
   background: var(--dsc-button-background);

packages/css/chip.css

@@ -27,7 +27,7 @@
 
   /* Make focus ring also when input inside is focused */
   &:has(:focus-visible) {
-    box-shadow: var(--dsc-focus-boxShadow);
+    @composes ds-focus--visible from './utilities.css';
   }
 
   &:disabled,

packages/css/postcss.config.js

@@ -22,6 +22,7 @@ function postcssComposes() {
         const cache = {};
         const sanitizedParams = rule.params.replace(/["']/g, '').trim();
         const [selector, from] = sanitizedParams.split(/\s+from\s+/);
+
         const resolvedFrom = path.resolve(
           path.dirname(rule.source.input.file),
           from,

packages/css/utilities.css

@@ -14,16 +14,28 @@
 
 :root {
   --dsc-focus-border-width: 3px; /* Default focus border width */
-  --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner),
-    0 0 0 calc(var(--dsc-focus-border-width) * 2) var(--ds-color-focus-outer);
+  --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
+  --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
 }
 
 /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
 .ds-focus:focus-visible {
-  outline: none;
+  @composes ds-focus--visible from './utilities.css';
+}
+
+/**
+* Focus outline that can be composed if it needs a specific selector
+*/
+.ds-focus--visible {
+  /**
+  * We use both box-shadow and outline to ensure that the focus style is visible,
+  * in case box-shadow is overridden.
+  */
   box-shadow: var(--dsc-focus-boxShadow);
+  outline: var(--dsc-focus-outline);
+  outline-offset: var(--dsc-focus-border-width);
 }
 
 /** Body typography */