feat: use CSS vars in focus-ring (fakeFocus) (#2109)

* style: use CSS custom properties for focus-ring * Update snapshots
dnbexperience · May 31, 2023 · b0649d5 · b0649d5
1 parent 20e0cf7
commit b0649d5
Show file tree

Hide file tree

Showing 42 changed files with 388 additions and 252 deletions.
diff --git a/...ages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/...ages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -186,19 +186,20 @@ exports[`Accordion scss have to match default theme snapshot 1`] = `
   color: var(--color-black-80);
   background-color: var(--color-white);
   --border-color: var(--color-black-8);
-  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   /* iOS fix - because "inset" works not fine with border-radius */
   /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
   border-color: transparent;
 }
 @supports (-webkit-touch-callout: none) {
   .dnb-accordion__variant--outlined > .dnb-accordion__header {
-    box-shadow: 0 0 0 0.0625rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   .dnb-accordion__variant--outlined > .dnb-accordion__header {
-    box-shadow: 0 0 0 0.0625rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] {
@@ -212,20 +213,21 @@ html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion
   background-color: var(--color-white);
 }
 html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-  --border-color: var(--color-emerald-green);
-  box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   /* iOS fix - because "inset" works not fine with border-radius */
   /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
   border-color: transparent;
 }
 @supports (-webkit-touch-callout: none) {
   html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-    box-shadow: 0 0 0 0.125rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   html[data-whatinput=keyboard] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
-    box-shadow: 0 0 0 0.125rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] {
@@ -235,7 +237,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accor
   color: var(--color-emerald-green);
   background-color: var(--color-white);
   --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] {
@@ -245,13 +248,15 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accor
   color: var(--color-emerald-green);
   background-color: var(--color-pistachio);
   --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
   background-color: var(--color-white);
   --border-color: var(--color-sea-green-30);
-  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * {
@@ -261,7 +266,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined > .dnb-accor
   color: var(--color-white);
   background-color: var(--color-sea-green);
   --border-color: transparent;
-  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] {
@@ -281,19 +287,20 @@ html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--e
 }
 html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
   --border-color: var(--color-emerald-green);
-  box-shadow: inset 0 0 0 0.125rem var(--border-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   /* iOS fix - because "inset" works not fine with border-radius */
   /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
   border-color: transparent;
 }
 @supports (-webkit-touch-callout: none) {
   html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-    box-shadow: 0 0 0 0.125rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
-    box-shadow: 0 0 0 0.125rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * {
@@ -306,7 +313,8 @@ html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordio
   color: var(--color-white);
   background-color: var(--color-sea-green);
   --border-color: var(--color-sea-green);
-  box-shadow: 0 0 0 0.0625rem var(--border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * {

diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -1493,7 +1493,8 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = `
  */
 .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
   --border-color: var(--color-sea-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button {
@@ -1510,7 +1511,8 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = `
 }
 .dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
   --border-color: var(--color-fire-red);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 
@@ -2055,8 +2057,9 @@ html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) {
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active {
-  --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active {
@@ -3365,8 +3368,9 @@ html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) {
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active {
-  --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active {
@@ -4091,19 +4095,20 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
 }
 .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
   --border-color: var(--color-black-55);
-  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   /* iOS fix - because "inset" works not fine with border-radius */
   /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
   border-color: transparent;
 }
 @supports (-webkit-touch-callout: none) {
   .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-    box-shadow: 0 0 0 0.0625rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-    box-shadow: 0 0 0 0.0625rem var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
   }
 }
 .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {

diff --git a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -109,7 +109,8 @@ exports[`Avatar scss have to match snapshot 1`] = `
 }
 .dnb-avatar__group .dnb-avatar {
   --border-color: var(--color-black-3);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-avatar__group .dnb-avatar--size-small {

diff --git a/...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -515,8 +515,9 @@ html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]) {
   outline: none;
 }
 html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active {
-  --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active {