[ENG-1021] Explorer Scrollbar color (#1331)

* Now visible :D

* Update colors.scss

interface/app/style.scss

@@ -69,7 +69,7 @@ body {
 		@apply mt-[46px] rounded-[6px] bg-transparent;
 	}
 	&::-webkit-scrollbar-thumb {
-		@apply rounded-[6px] bg-app-box;
+		@apply rounded-[6px] bg-app-explorerScrollbar;
 	}
 }
 

packages/ui/style/colors.scss

@@ -42,6 +42,7 @@
 	--color-app-shade: var(--dark-hue), 15%, 0%;
 	--color-app-frame: var(--dark-hue), 15%, 25%;
 	--color-app-slider: var(--dark-hue), 15%, 20%;
+	--color-app-explorer-scrollbar: var(--dark-hue), 20%, 25%;
 	// menu
 	--color-menu: var(--dark-hue), 25%, 5%;
 	--color-menu-line: var(--dark-hue), 15%, 11%;
@@ -94,6 +95,7 @@
 	--color-app-shade: var(--light-hue), 15%, 50%;
 	--color-app-frame: 0, 0%, 100%;
 	--color-app-slider: var(--light-hue), 5%, 95%;
+	--color-app-explorer-scrollbar: var(--light-hue), 5%, 75%;
 	// menu
 	--color-menu: var(--light-hue), 5%, 100%;
 	--color-menu-line: var(--light-hue), 5%, 95%;

packages/ui/style/tailwind.js

@@ -59,7 +59,7 @@ module.exports = function (app, options) {
 						divider: alpha('--color-sidebar-divider'),
 						button: alpha('--color-sidebar-button'),
 						selected: alpha('--color-sidebar-selected'),
-						shade: alpha('--color-sidebar-shade')
+						shade: alpha('--color-sidebar-shade'),
 					},
 					app: {
 						DEFAULT: alpha('--color-app'),
@@ -78,7 +78,8 @@ module.exports = function (app, options) {
 						active: alpha('--color-app-active'),
 						shade: alpha('--color-app-shade'),
 						frame: alpha('--color-app-frame'),
-						slider: alpha('--color-app-slider')
+						slider: alpha('--color-app-slider'),
+						explorerScrollbar: alpha('--color-app-explorer-scrollbar'),
 					},
 					menu: {
 						DEFAULT: alpha('--color-menu'),