feat(core): GlobalStyle revisited

themes need to be global since global theme make use of CSS variables from normal themes

packages/core/components/GlobalStyle/GlobalStyle.css.ts

@@ -1,10 +1,11 @@
-import { globalStyle, globalFontFace } from '@vanilla-extract/css';
-import { contract } from '../ThemeProvider/themes/contract.css';
+import { globalFontFace, globalStyle } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
 
-import { scrollbars } from './Scrollbar';
+import { contract } from '../ThemeProvider/themes/contract.css';
 
-import ttf from './font/MS-Sans-Serif-8pt.ttf';
+import { createBorder, createTriangleSVG } from './utils';
 import ttfBold from './font/MS-Sans-Serif-8pt-bold.ttf';
+import ttf from './font/MS-Sans-Serif-8pt.ttf';
 import videoeot from './font/React95Video-Numbers.eot';
 import videottf from './font/React95Video-Numbers.ttf';
 import videowoff from './font/React95Video-Numbers.woff';
@@ -62,9 +63,99 @@ globalStyle('a:visited', {
   color: contract.colors.anchorVisited,
 });
 
-/*
-`
-  // scrollbar
-  ${scrollbars}
-`;
-*/
+/* Scrollbar */
+
+const triangles = {
+  horizontal: {
+    decrement: createTriangleSVG(contract.colors.materialText, 90),
+    increment: createTriangleSVG(contract.colors.materialText, 270),
+  },
+  vertical: {
+    decrement: createTriangleSVG(contract.colors.materialText, 180),
+    increment: createTriangleSVG(contract.colors.materialText, 0),
+  },
+};
+
+globalStyle('::-webkit-scrollbar', {
+  width: contract.space[17],
+  height: contract.space[17],
+});
+
+globalStyle('::-webkit-scrollbar-track', {
+  backgroundImage: [
+    `linear-gradient(45deg, ${contract.colors.material} 25%, transparent 25%, transparent 75%, ${contract.colors.material} 75%)`,
+    `linear-gradient(45deg, ${contract.colors.material} 25%, transparent 25%, transparent 75%, ${contract.colors.material} 75%)`,
+  ].join(','),
+  backgroundColor: contract.colors.borderLightest,
+  backgroundSize: `${contract.space[4]} ${contract.space[4]}`,
+  backgroundPosition: `0 0, ${contract.space[2]} ${contract.space[2]}`,
+});
+
+globalStyle('::-webkit-scrollbar-corner', {
+  backgroundColor: contract.colors.material,
+});
+
+globalStyle(
+  `::-webkit-scrollbar-button:horizontal:increment:start,
+  ::-webkit-scrollbar-button:horizontal:decrement:end,
+  ::-webkit-scrollbar-button:vertical:increment:start,
+  ::-webkit-scrollbar-button:vertical:decrement:end`,
+  {
+    display: 'none',
+  },
+);
+
+globalStyle('::-webkit-scrollbar-button:horizontal:decrement', {
+  backgroundImage: triangles.horizontal.decrement,
+});
+
+globalStyle('::-webkit-scrollbar-button:horizontal:increment', {
+  backgroundImage: triangles.horizontal.increment,
+});
+
+globalStyle('::-webkit-scrollbar-button:vertical:decrement', {
+  backgroundImage: triangles.vertical.decrement,
+});
+
+globalStyle('::-webkit-scrollbar-button:vertical:increment', {
+  backgroundImage: triangles.vertical.increment,
+});
+
+const scrollbarBorderBase = createBorder({
+  direction: 'extrude',
+  outerBottomRight: contract.colors.borderDarkest,
+  innerBottomRight: contract.colors.borderDark,
+  outerTopLeft: contract.colors.borderLight,
+  innerTopLeft: contract.colors.borderLightest,
+});
+
+globalStyle('::-webkit-scrollbar-thumb', {
+  boxSizing: 'border-box',
+  display: 'inline-block',
+  background: contract.colors.material,
+  color: contract.colors.materialText,
+  ...scrollbarBorderBase,
+});
+
+globalStyle('::-webkit-scrollbar-button', {
+  boxSizing: 'border-box',
+  background: contract.colors.material,
+  color: contract.colors.materialText,
+  display: 'block',
+  outlineOffset: calc.negate(contract.space[2]),
+  height: contract.space[17],
+  width: contract.space[17],
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '80%',
+  backgroundPosition: '0 0',
+  ...scrollbarBorderBase,
+});
+
+globalStyle(
+  `::-webkit-scrollbar-button:active,
+  ::-webkit-scrollbar-button:active`,
+  {
+    backgroundPosition: '0 1',
+    ...scrollbarBorderBase,
+  },
+);