refactor: Add scrollbar semantic tokens

gorzelinski · Jan 4, 2025 · d9eed5e · d9eed5e
1 parent 027e69d
commit d9eed5e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/design-system/sections/section/section.styles.tsx b/design-system/sections/section/section.styles.tsx
@@ -31,7 +31,7 @@ export const section = cva({
       bleed: {
         marginX: {
           base: 'calc(-50vw + 100% / 2)',
-          xl: 'calc((-50vw + 100% / 2) + token(spacing.s))'
+          xl: 'calc((-50vw + 100% / 2) + token(sizes.scrollbar.width) / 2)'
         },
         paddingX: 'm',
         ...verticalRhythm.paddingY.m,

diff --git a/theme/global-styles.tsx b/theme/global-styles.tsx
@@ -9,12 +9,12 @@ export const globalCss = defineGlobalStyles({
       color: 'primary.300'
     },
     '::-webkit-scrollbar': {
-      width: 'token(spacing.m)',
+      width: 'scrollbar.width',
       backgroundColor: 'gray.700',
       cursor: 'pointer',
       '&:horizontal': {
         borderRadius: 'xs',
-        height: 'token(spacing.s)'
+        height: 'scrollbar.height'
       }
     },
     '::-webkit-scrollbar-thumb': {

diff --git a/theme/semantic-tokens.tsx b/theme/semantic-tokens.tsx
@@ -327,6 +327,14 @@ export const semanticTokens = defineSemanticTokens({
   sizes: {
     lineLength: {
       value: '800px'
+    },
+    scrollbar: {
+      width: {
+        value: '{spacing.m}'
+      },
+      height: {
+        value: '{spacing.s}'
+      }
     }
   },
   spacing: {