fix: enhance scrollbar appearance (#2046)

dnbexperience · May 31, 2023 · 237331a · 237331a
1 parent adc0e47
commit 237331a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 38 deletions.
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -1396,10 +1396,9 @@ exports[`Tabs scss have to match snapshot 1`] = `
   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 */
@@ -1418,20 +1417,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 {

diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -159,10 +159,9 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
   background-color: var(--color-white);
   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;
 }
 .dnb-textarea__textarea ::selection {
   background-color: var(--color-mint-green);
@@ -174,20 +173,21 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
 }
 @supports not (scrollbar-color: auto) {
   .dnb-textarea__textarea::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-textarea__textarea::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-textarea__textarea::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-textarea__textarea::-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-textarea__textarea::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 .dnb-textarea__placeholder {

diff --git a/...ges/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/...ges/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
@@ -1099,30 +1099,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 {

diff --git a/packages/dnb-eufemia/src/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss b/packages/dnb-eufemia/src/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss
@@ -5,8 +5,10 @@
 
 @import '../../../../style/core/utilities.scss';
 
-// :root {
-// }
-
-// .dnb-scroll-view {
-// }
+:root {
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
+}
diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss
@@ -147,36 +147,42 @@ $focusRingColor: var(--color-emerald-green);
 }
 
 @mixin scrollbarAppearance() {
-  scrollbar-width: thin;
-
   // older iOS safari
   -webkit-overflow-scrolling: touch;
 
   // show scrollbar in IE & Edge
   -ms-overflow-style: auto;
 
-  scrollbar-color: var(--color-sea-green) transparent;
+  // NB: We have used "scrollbar-track-width: auto;" before,
+  // first, it only effects Firefox.
+  // But "thin" changes the behavior in Windows,
+  // so it has no arrow buttons, and a weird "pressed" color.
+  // Also, on macOS, it changes the scrollbar to be so small,
+  // that e.g. the textarea resize grabber gets way smaller.
+
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 
   @supports not (scrollbar-color: auto) {
     // stylelint-disable
     &::-webkit-scrollbar {
       &:vertical {
-        width: 0.5rem;
+        width: var(--scrollbar-track-width, 0.5rem);
       }
       &:horizontal {
-        height: 0.5rem;
+        height: var(--scrollbar-track-width, 0.5rem);
       }
 
-      background-color: var(--color-black-8);
+      border-radius: var(--scrollbar-thumb-width, 0.5rem);
+      background-color: var(--scrollbar-track-color, #eee);
     }
     &::-webkit-scrollbar-thumb {
-      background-color: var(--color-sea-green);
+      background-color: var(--scrollbar-thumb-color, #888);
 
       &:hover {
-        background-color: var(--color-emerald-green);
+        background-color: var(--scrollbar-thumb-hover-color, #666);
       }
 
-      border-radius: 0.5rem;
+      border-radius: var(--scrollbar-thumb-width, 0.5rem);
     }
     // stylelint-enable
   }