@dnb/eufemia 10.0.0-beta.1 → 10.0.0-beta.2

package/cjs/style/dnb-ui-body.css

@@ -5,93 +5,6 @@
 /*
  * Utilities
  */
-/*
- * CSS Properties
- *
- */
-:root {
-  --font-family-default: "DNB", sans-serif;
-  --font-family-monospace: "DNBMono", "Menlo", "Consolas", "Roboto Mono",
-    "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono",
-    monospace;
-  --font-weight-default: normal;
-  --font-weight-basis: normal;
-  --font-weight-regular: normal;
-  --font-weight-medium: 500;
-  --font-weight-bold: 600;
-  --font-size-x-small: 0.875rem;
-  --font-size-small: 1rem;
-  --font-size-basis: 1.125rem;
-  --font-size-basis--em: 1em;
-  --font-size-medium: 1.25rem;
-  --font-size-large: 1.625rem;
-  --font-size-x-large: 2.125rem;
-  --font-size-xx-large: 3rem;
-  --line-height-xx-small--em: 1em;
-  --line-height-x-small: 1.125rem;
-  --line-height-small: 1.25rem;
-  --line-height-basis: 1.5rem;
-  --line-height-basis--em: 1.333em;
-  --line-height-medium: 2rem;
-  --line-height-large: 2.5rem;
-  --line-height-x-large: 3.5rem;
-  --color-mint-green-50: #d2f0e9;
-  --color-mint-green-25: #e9f8f4;
-  --color-mint-green-12: #f4fbf9;
-  --color-sea-green-30: #b3dada;
-  --color-accent-yellow-30: #feebc1;
-  --color-signal-orange: #ff5400;
-  --color-fire-red: #dc2a2a;
-  --color-success-green: #007b5e;
-  --color-fire-red-8: #fdeeee;
-  --color-black: #000;
-  --color-black-80: #333;
-  --color-black-55: #737373;
-  --color-black-20: #ccc;
-  --color-black-8: #ebebeb;
-  --color-black-3: #f8f8f8;
-  --color-white: #fff;
-  --color-black-border: #cdcdcd;
-  --color-black-background: #fafafa;
-  --color-sea-green: #007272;
-  --color-mint-green: #a5e1d2;
-  --color-summer-green: #28b482;
-  --color-emerald-green: #14555a;
-  --color-ocean-green: #00343e;
-  --color-accent-yellow: #fdbb31;
-  --color-indigo: #23195a;
-  --color-violet: #6e2382;
-  --color-sky-blue: #4bbed2;
-  --color-lavender: #f2f2f5;
-  --color-sand-yellow: #fbf6ec;
-  --color-pistachio: #f2f4ec;
-  --color-mint-green-alt: #ebfffa;
-  --color-indigo-medium: #6e6491;
-  --color-indigo-light: #b9afc8;
-  --color-violet-medium: #a06eaf;
-  --color-violet-light: #cfb9d7;
-  --color-sky-blue-medium: #87d2e1;
-  --color-sky-blue-light: #c3ebf0;
-  --spacing-xx-small: 0.25rem;
-  --spacing-x-small: 0.5rem;
-  --spacing-small: 1rem;
-  --spacing-medium: 1.5rem;
-  --spacing-large: 2rem;
-  --spacing-x-large: 3rem;
-  --spacing-xx-large: 3.5rem;
-  --layout-small: 40em;
-  --layout-medium: 60em;
-  --layout-large: 72em;
-  --layout-x-large: 80em;
-  --layout-xx-large: 90em;
-  --shadow-default: 0 8px 16px rgb(51 51 51 / 8%);
-  --shadow-default-x: 0;
-  --shadow-default-y: 8px;
-  --shadow-default-blur-radius: 16px;
-  --shadow-default-color: rgb(51 51 51 / 8%);
-  --easing-default: cubic-bezier(0.42, 0, 0, 1);
-}
-
 /*
  * Scopes
  *
@@ -131,7 +44,7 @@ body {
 html {
   font-size: 100%;
 }
-html:not([data-visual-test]) html {
+html:not([data-visual-test]) {
   scroll-behavior: smooth;
 }
 @supports (-webkit-touch-callout: none) {

package/cjs/style/dnb-ui-body.min.css

@@ -1 +1 @@
-:root{--font-family-default:"DNB",sans-serif;--font-family-monospace:"DNBMono","Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace;--font-weight-default:normal;--font-weight-basis:normal;--font-weight-regular:normal;--font-weight-medium:500;--font-weight-bold:600;--font-size-x-small:0.875rem;--font-size-small:1rem;--font-size-basis:1.125rem;--font-size-basis--em:1em;--font-size-medium:1.25rem;--font-size-large:1.625rem;--font-size-x-large:2.125rem;--font-size-xx-large:3rem;--line-height-xx-small--em:1em;--line-height-x-small:1.125rem;--line-height-small:1.25rem;--line-height-basis:1.5rem;--line-height-basis--em:1.333em;--line-height-medium:2rem;--line-height-large:2.5rem;--line-height-x-large:3.5rem;--color-mint-green-50:#d2f0e9;--color-mint-green-25:#e9f8f4;--color-mint-green-12:#f4fbf9;--color-sea-green-30:#b3dada;--color-accent-yellow-30:#feebc1;--color-signal-orange:#ff5400;--color-fire-red:#dc2a2a;--color-success-green:#007b5e;--color-fire-red-8:#fdeeee;--color-black:#000;--color-black-80:#333;--color-black-55:#737373;--color-black-20:#ccc;--color-black-8:#ebebeb;--color-black-3:#f8f8f8;--color-white:#fff;--color-black-border:#cdcdcd;--color-black-background:#fafafa;--color-sea-green:#007272;--color-mint-green:#a5e1d2;--color-summer-green:#28b482;--color-emerald-green:#14555a;--color-ocean-green:#00343e;--color-accent-yellow:#fdbb31;--color-indigo:#23195a;--color-violet:#6e2382;--color-sky-blue:#4bbed2;--color-lavender:#f2f2f5;--color-sand-yellow:#fbf6ec;--color-pistachio:#f2f4ec;--color-mint-green-alt:#ebfffa;--color-indigo-medium:#6e6491;--color-indigo-light:#b9afc8;--color-violet-medium:#a06eaf;--color-violet-light:#cfb9d7;--color-sky-blue-medium:#87d2e1;--color-sky-blue-light:#c3ebf0;--spacing-xx-small:0.25rem;--spacing-x-small:0.5rem;--spacing-small:1rem;--spacing-medium:1.5rem;--spacing-large:2rem;--spacing-x-large:3rem;--spacing-xx-large:3.5rem;--layout-small:40em;--layout-medium:60em;--layout-large:72em;--layout-x-large:80em;--layout-xx-large:90em;--shadow-default:0 8px 16px rgb(51 51 51/8%);--shadow-default-x:0;--shadow-default-y:8px;--shadow-default-blur-radius:16px;--shadow-default-color:rgb(51 51 51/8%);--easing-default:cubic-bezier(0.42,0,0,1)}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]) html{scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:var(--color-black-80,#333);font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}
+html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:var(--line-height-basis);-moz-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:var(--color-black-80,#333);font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}body *,body :after,body :before{background-repeat:no-repeat;box-sizing:border-box}body :after,body :before{text-decoration:inherit;vertical-align:inherit}body hr{height:0;overflow:visible}body main{display:block}body nav ol,body nav ul{list-style:none}body abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}body b,body strong{font-weight:bolder}body code,body kbd,body pre,body samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}body ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}body audio,body canvas,body iframe,body img,body svg,body video{vertical-align:middle}body audio,body video{display:inline-block}body audio:not([controls]){display:none;height:0}body img{border-style:none}body svg:not([fill]){fill:currentcolor}body svg:not(:root){overflow:hidden}body table{border-collapse:collapse}body button,body input,body select,body textarea{font-family:inherit;font-size:inherit;line-height:inherit}body button,body figure,body input,body select{margin:0}body button{overflow:visible;text-transform:none}body fieldset{padding:.35rem .75rem .625rem}body input{overflow:visible;word-break:normal}body legend{color:inherit;display:table;max-width:100%;white-space:normal}body progress{display:inline-block;vertical-align:baseline}body select{text-transform:none}body textarea{overflow:auto;resize:vertical}body [type=checkbox],body [type=radio]{padding:0}body input[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}body ::-webkit-inner-spin-button,body ::-webkit-outer-spin-button{height:auto}body ::input-placeholder{color:inherit;opacity:.54}body ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}body ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}body ::-moz-focus-inner{border-style:none;padding:0}body details{display:block}body summary{display:list-item}body canvas{display:inline-block}body template{display:none}body [tabindex],body a,body area,body button,body input,body label,body select,body summary,body textarea{touch-action:manipulation}body [hidden]{display:none}body [aria-busy=true]{cursor:progress}body [aria-controls]:not(input){cursor:pointer}body [aria-disabled=true],body [disabled]{cursor:not-allowed}body [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{body{background-color:#fff;color:#000}}

package/cjs/style/dnb-ui-body.scss

@@ -4,7 +4,7 @@
  */
 
 @import './core/utilities.scss';
-@import './core/properties.scss';
+
 @import './core/scopes.scss';
 @include globalReset();
 

package/cjs/style/dnb-ui-components.css

@@ -102,30 +102,30 @@ html[data-visual-test] .dnb-drawer-list__portal__style {
   transition: max-height 300ms var(--easing-default);
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 }
 html:not([data-visual-test]) .dnb-drawer-list--scroll .dnb-drawer-list__options {
   scroll-behavior: smooth;
 }
 @supports not (scrollbar-color: auto) {
   .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, .dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options {
@@ -407,10 +407,9 @@ html[data-visual-test] .dnb-drawer-list:not(.dnb-drawer-list--opened) .dnb-drawe
   overflow-x: auto;
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
   overscroll-behavior: auto;
 }
 html:not([data-visual-test]) .dnb-scroll-view {
@@ -418,20 +417,21 @@ html:not([data-visual-test]) .dnb-scroll-view {
 }
 @supports not (scrollbar-color: auto) {
   .dnb-scroll-view::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-scroll-view::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-scroll-view::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-scroll-view::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-scroll-view::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 .dnb-scroll-view[tabindex="0"]:focus {
@@ -4674,28 +4674,28 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
 
 @font-face {
   font-family: DNBSkeleton;
-  src: url("../assets/fonts/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../assets/fonts/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../assets/fonts/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");
+  src: url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: fallback;
 }
 @font-face {
   font-family: DNBSkeleton;
-  src: url("../assets/fonts/skeleton/DNB-Skeleton-Medium.woff2") format("woff2"), url("../assets/fonts/skeleton/DNB-Skeleton-Medium.woff") format("woff"), url("../assets/fonts/skeleton/DNB-Skeleton-Medium.ttf") format("truetype");
+  src: url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2") format("woff2"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff") format("woff"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
   font-display: fallback;
 }
 @font-face {
   font-family: DNBSkeleton;
-  src: url("../assets/fonts/skeleton/DNB-Skeleton-Bold.woff2") format("woff2"), url("../assets/fonts/skeleton/DNB-Skeleton-Bold.woff") format("woff"), url("../assets/fonts/skeleton/DNB-Skeleton-Bold.ttf") format("truetype");
+  src: url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2") format("woff2"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff") format("woff"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf") format("truetype");
   font-weight: 600;
   font-style: normal;
   font-display: fallback;
 }
 @font-face {
   font-family: DNBMonoSkeleton;
-  src: url("../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff2") format("woff2"), url("../assets/fonts/skeleton/DNBMono-Skeleton-Regular.woff") format("woff"), url("../assets/fonts/skeleton/DNBMono-Skeleton-Regular.ttf") format("truetype");
+  src: url("../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2") format("woff2"), url("../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff") format("woff"), url("../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: fallback;
@@ -6522,10 +6522,9 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
   flex: 0 1 auto;
   overflow-x: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
   /* Hide scrollbar for Chrome, Safari */
   /* stylelint-disable-next-line */
   -ms-overflow-style: none; /* IE and Edge */
@@ -6544,20 +6543,21 @@ html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
 }
 @supports not (scrollbar-color: auto) {
   .dnb-tabs__tabs__tablist::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-tabs__tabs__tablist::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 .dnb-tabs__tabs__tablist::-webkit-scrollbar {