style: add hover style for scrollbar (#2867)

packages/component/src/theme/global.css

@@ -191,20 +191,30 @@ input[type='number']::-webkit-outer-spin-button {
   height: 0;
 }
 .affine-default-viewport::-webkit-scrollbar {
-  width: 8px; /* Chrome Safari */
+  width: 20px; /* Chrome Safari */
+  height: 20px;
 }
 .affine-default-viewport::-webkit-scrollbar-thumb {
-  border-radius: 4px;
+  border-radius: 12px;
+  background-clip: padding-box;
+  border-style: solid;
+  border-width: 7px;
+  border-color: transparent;
+  transition: all 0.2s;
 }
 .affine-default-viewport:hover::-webkit-scrollbar-thumb {
-  background-color: var(--affine-black-30);
+  background-color: var(--affine-divider-color);
- }
+}
+.affine-default-viewport:hover::-webkit-scrollbar-thumb:hover {
+  background-color: var(--affine-icon-color);
+  border-width: 5px;
+}
 .editor-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   padding: 0 1rem;
-  padding-right: 8px;
+  padding-right: 0;
 }
 
 /* issue: https://github.com/toeverything/AFFiNE/issues/2004 */

packages/component/src/ui/scrollbar/index.css.ts

@@ -1,14 +1,11 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
-
-
 export const scrollableContainerRoot = style({
   width: '100%',
   vars: {
-    '--scrollbar-width': '10px',
+    '--scrollbar-width': '8px',
   },
   height: '100%',
-
 });
 
 export const scrollTopBorder = style({
@@ -32,7 +29,6 @@ export const scrollableViewport = style({
   width: '100%',
 });
 
-
 globalStyle(`${scrollableViewport} > div`, {
   maxWidth: '100%',
   display: 'block !important',
@@ -48,12 +44,16 @@ export const scrollbar = style({
   flexDirection: 'column',
   userSelect: 'none',
   touchAction: 'none',
-  padding: '0 2px',
   marginRight: '4px',
   width: 'var(--scrollbar-width)',
   height: '100%',
   opacity: 1,
-  transition: 'opacity .15s',
+  transition: 'width .15s',
+  ':hover': {
+    background: 'var(--affine-background-secondary-color)',
+    width: 'calc(var(--scrollbar-width) + 3px)',
+    borderLeft: '1px solid var(--affine-border-color)',
+  },
   selectors: {
     '&[data-state="hidden"]': {
       opacity: 0,
@@ -67,8 +67,12 @@ export const TableScrollbar = style({
 
 export const scrollbarThumb = style({
   position: 'relative',
-  background: 'var(--affine-black-30)',
+  background: 'var(--affine-divider-color)',
+  width: '50%',
   borderRadius: '4px',
+  ':hover': {
+    background: 'var(--affine-icon-color)',
+  },
   selectors: {
     '&::before': {
       content: '""',