feat(theme): add overlayscrollbars CSS

Author: psychedelicious

lib/theme/overlayscrollbars.ts

@@ -0,0 +1,60 @@
+import type { SystemStyleObject } from '@chakra-ui/styled-system';
+
+export const overlayscrollbars: SystemStyleObject = {
+  '.os-scrollbar': {
+    /*      The size of the scrollbar */
+    '--os-size': '9px',
+    /*      The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x) */
+    /* --os-padding-perpendicular: 0; */
+    /*      The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y) */
+    /* --os-padding-axis: 0; */
+    /*      The border radius of the scrollbar track */
+    /* --os-track-border-radius: 0; */
+    /*      The background of the scrollbar track */
+    /* --os-track-bg: rgba(0, 0, 0, 0.3); */
+    /*      The :hover background of the scrollbar track */
+    /* --os-track-bg-hover: rgba(0, 0, 0, 0.3); */
+    /*      The :active background of the scrollbar track */
+    /* --os-track-bg-active: rgba(0, 0, 0, 0.3); */
+    /*      The border of the scrollbar track */
+    /* --os-track-border: none; */
+    /*      The :hover background of the scrollbar track */
+    /* --os-track-border-hover: none; */
+    /*      The :active background of the scrollbar track */
+    /* --os-track-border-active: none; */
+    /*      The border radius of the scrollbar handle */
+    /* --os-handle-border-radius: 2px; */
+    /*      The background of the scrollbar handle */
+    /* --os-handle-bg: var(--invokeai-colors-accentAlpha-500); */
+    /*      The :hover background of the scrollbar handle */
+    /* --os-handle-bg-hover: var(--invokeai-colors-accentAlpha-700); */
+    /*      The :active background of the scrollbar handle */
+    /* --os-handle-bg-active: var(--invokeai-colors-accentAlpha-800); */
+    /*      The border of the scrollbar handle */
+    /* --os-handle-border: none; */
+    /*      The :hover border of the scrollbar handle */
+    /* --os-handle-border-hover: none; */
+    /*      The :active border of the scrollbar handle */
+    /* --os-handle-border-active: none; */
+    /*      The min size of the scrollbar handle */
+    '--os-handle-min-size': '50px',
+    /*      The max size of the scrollbar handle */
+    /* --os-handle-max-size: none; */
+    /*      The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width) */
+    /* --os-handle-perpendicular-size: 100%; */
+    /*      The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width) */
+    /* --os-handle-perpendicular-size-hover: 100%; */
+    /*      The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width) */
+    /* --os-handle-perpendicular-size-active: 100%; */
+    /*      Increases the interactive area of the scrollbar handle. */
+    /* --os-handle-interactive-area-offset: 0; */
+  },
+
+  '.os-scrollbar-handle': {
+    cursor: 'grab',
+  },
+
+  '.os-scrollbar-handle:active': {
+    cursor: 'grabbing',
+  },
+};

lib/theme/theme.ts

@@ -3,6 +3,7 @@ import type { ThemeOverride } from '@chakra-ui/react';
 import { colors } from './colors';
 import { components } from './components';
 import { layerStyles } from './layers';
+import { overlayscrollbars } from './overlayscrollbars';
 import { space } from './space';
 
 export const theme: ThemeOverride = {
@@ -14,6 +15,7 @@ export const theme: ThemeOverride = {
   styles: {
     global: {
       body: { bg: 'base.900', color: 'base.50' },
+      ...overlayscrollbars,
     },
   },
   fonts: {