style: move :root vars into their component itself (#2102)

BREAKING CHANGE:

Multiple CSS variables have been removed from :root, see #2102

packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss

@@ -79,7 +79,7 @@
       max-width: 40rem;
       height: auto;
       white-space: normal;
-      line-height: var(--input-height);
+      line-height: 2rem; // --input-height
     }
 
     .prism-code {

packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap

@@ -411,13 +411,10 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic
 /*
  * Utilities
  */
-:root {
+.dnb-accordion {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
-}
-
-.dnb-accordion {
   position: relative;
   display: flex;
   flex-direction: column;

packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss

@@ -5,14 +5,11 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
-  // Props
+.dnb-accordion {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
-}
 
-.dnb-accordion {
   position: relative;
 
   display: flex;

packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap

@@ -1776,11 +1776,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1861,26 +1858,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2357,11 +2354,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2441,7 +2435,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-input {
   --input-font-size: var(--font-size-basis);
   --input-font-size--small: var(--font-size-basis);
   --input-font-size--medium: var(--font-size-basis);
@@ -2456,9 +2450,6 @@ button .dnb-form-status__text {
   --input-height--large: 3rem;
   --input-border-width: 0.0625rem;
   --input-border-radius: 0.25rem;
-}
-
-.dnb-input {
   display: inline-flex;
   align-items: center;
   font-size: var(--input-font-small);
@@ -3095,11 +3086,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -3180,26 +3168,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -3469,11 +3457,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -3553,7 +3538,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-dropdown {
   --dropdown-width: 16rem;
   --dropdown-height: 2rem;
   --dropdown-height--small: 1.5rem;
@@ -3563,9 +3548,6 @@ button .dnb-form-status__text {
   --dropdown-focus-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
   --dropdown-border-radius: 0.25rem;
-}
-
-.dnb-dropdown {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -3816,14 +3798,11 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 /*
  * Utilities
  */
-:root {
+.dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
-}
-
-.dnb-progress-indicator {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -4031,7 +4010,7 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
 /*
  * Utilities
  */
-:root {
+.dnb-autocomplete {
   --autocomplete-width: 16rem;
   --autocomplete-height: 2rem;
   --autocomplete-height--small: 1.5rem;
@@ -4041,9 +4020,6 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --autocomplete-focus-border-width: 0.125rem;
   --autocomplete-text-padding: 0.5rem;
   --autocomplete-border-radius: 0.25rem;
-}
-
-.dnb-autocomplete {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -4115,19 +4091,19 @@ 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 var(--input-border-width) var(--border-color);
+  box-shadow: inset 0 0 0 0.0625rem 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 var(--input-border-width) var(--border-color);
+    box-shadow: 0 0 0 0.0625rem 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 var(--input-border-width) var(--border-color);
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
   }
 }
 .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {

packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss

@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-autocomplete {
   --autocomplete-width: 16rem;
   --autocomplete-height: 2rem;
   --autocomplete-height--small: 1.5rem;
@@ -15,9 +15,7 @@
   --autocomplete-focus-border-width: 0.125rem;
   --autocomplete-text-padding: 0.5rem;
   --autocomplete-border-radius: 0.25rem;
-}
 
-.dnb-autocomplete {
   display: inline-flex;
   align-items: center;
 
@@ -111,11 +109,7 @@
     transform-origin: 50% 50%;
   }
   .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-    @include fakeBorder(
-      var(--color-black-55),
-      var(--input-border-width),
-      inset
-    );
+    @include fakeBorder(var(--color-black-55), 0.0625rem, inset);
   }
   .dnb-input__submit-button__button .dnb-icon {
     transition: transform 400ms ease-out;

packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`Avatar scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-avatar {
   --avatar-font-size--small: var(--font-size-x-small);
   --avatar-font-size--medium: var(--font-size-basis);
   --avatar-font-size--large: var(--font-size-x-large);
@@ -55,9 +55,6 @@ exports[`Avatar scss have to match snapshot 1`] = `
   --avatar-height--large: 4rem;
   --avatar-width--x-large: 5rem;
   --avatar-height--x-large: 5rem;
-}
-
-.dnb-avatar {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -71,7 +68,7 @@ exports[`Avatar scss have to match snapshot 1`] = `
   line-height: 1;
 }
 .dnb-avatar, .dnb-core-style .dnb-avatar {
-  line-height: var(--button-height);
+  line-height: var(--line-height-large);
 }
 .dnb-avatar--size-small {
   width: var(--avatar-width--small);

packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss

@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-avatar {
   --avatar-font-size--small: var(--font-size-x-small);
   --avatar-font-size--medium: var(--font-size-basis);
   --avatar-font-size--large: var(--font-size-x-large);
@@ -22,9 +22,7 @@
   --avatar-height--large: 4rem;
   --avatar-width--x-large: 5rem;
   --avatar-height--x-large: 5rem;
-}
 
-.dnb-avatar {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -42,7 +40,7 @@
   // Safari needs a correct CSS specificity
   &,
   .dnb-core-style & {
-    line-height: var(--button-height);
+    line-height: var(--line-height-large);
   }
 
   &--size-small {

packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -34,16 +34,13 @@ exports[`Badge scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-badge {
   --badge-font-size: var(--font-size-x-small);
   --badge-width: 1.5rem;
   --badge-height: 1.5rem;
   --badge-border-radius-information: calc(var(--badge-height) / 4);
   --badge-border-radius-notification: calc(var(--badge-height) / 2);
   --badge-line-height: var(--line-height-x-small);
-}
-
-.dnb-badge {
   display: inline-flex;
   font-weight: var(--font-weight-medium);
   flex-flow: row wrap;

packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss

@@ -5,16 +5,14 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-badge {
   --badge-font-size: var(--font-size-x-small);
   --badge-width: 1.5rem;
   --badge-height: 1.5rem;
   --badge-border-radius-information: calc(var(--badge-height) / 4);
   --badge-border-radius-notification: calc(var(--badge-height) / 2);
   --badge-line-height: var(--line-height-x-small);
-}
 
-.dnb-badge {
   // Safari needs a correct CSS specificity
   &,
   .dnb-core-style & {