v5.4.2 (#617)

* update scrollbar colors

* v5.4.2

---------

Co-authored-by: John Kapantzakis <kapantzak@gmail.com>

Author: christophidesp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/mixins/webkitVisibleScrollbar.js

@@ -3,26 +3,30 @@ import { getSizeBy, getRgbColor } from "@/theme/utils"
 
 export default css`
   scrollbar-width: ${getSizeBy(1)};
-  scrollbar-color: ${getRgbColor("border", 0.3)} ${getRgbColor("border", 0.1)};
+  scrollbar-color: ${getRgbColor("scrollBarThumb", 0.3)} ${getRgbColor("scrollBarThumb", 0.1)};
 
   &::-webkit-scrollbar {
     width: ${getSizeBy(1)};
   }
+
   &::-webkit-scrollbar-track {
-    border-radius: ${getSizeBy(0.5)};
-    background-color: ${getRgbColor("border", 0.1)};
+    background-color: ${getRgbColor("scrollBarTrack", 1)};
+    border:1px solid ${getRgbColor("scrollBarBorder", 0.4)};
+    border-radius: ${getSizeBy(1)};
   }
   &::-webkit-scrollbar-thumb {
+    width: ${getSizeBy(0.5)};
+    border:1px solid ${getRgbColor("scrollBarBorder", 1)};
     border-radius: ${getSizeBy(1)};
-    background-color: ${getRgbColor("border", 0.6)};
+    background-color:  ${getRgbColor("scrollBarThumb", 1)}
   }
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${getRgbColor("border", 0.9)};
+    background-color: ${getRgbColor("scrollBarThumbHover", 1)};
   }
   &::-webkit-scrollbar-track-piece {
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollBarThumb", 0.3)};
   }
   &::-webkit-scrollbar-corner {
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollBarThumb", 0.3)};
   }
 `

src/theme/dark/colors.js

@@ -20,6 +20,11 @@ const appColors = {
   modalInfoBackground: rawColors.neutral.grey50,
   menuItemSelected: rawColors.green.green30,
   menuItemHover: rawColors.green.green10,
+  scrollBarTrack: rawColors.neutral.grey25,
+  scrollBarThumb: rawColors.neutral.grey50,
+  scrollBarThumbHover: rawColors.neutral.grey100,
+  scrollBarBorder: rawColors.neutral.grey55,
+
   // Links
   link: rawColors.green.green110,
   linkHover: rawColors.green.green120,

src/theme/default/colors.js

@@ -20,6 +20,10 @@ const appColors = {
   modalInfoBackground: rawColors.neutral.blackhaze,
   menuItemSelected: rawColors.green.green196,
   menuItemHover: rawColors.green.green190,
+  scrollBarTrack: rawColors.neutral.grey190,
+  scrollBarThumb: rawColors.neutral.grey170,
+  scrollBarThumbHover: rawColors.neutral.grey150,
+  scrollBarBorder: rawColors.neutral.grey180,
   // Links
   link: rawColors.green.green100,
   linkHover: rawColors.green.green110,