@onereach/styles 2.26.1-beta.1720.0 → 2.26.1-beta.1732.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.26.1-beta.1720.0",
+  "version": "2.26.1-beta.1732.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",

package/src/variables/tokens/design-tokens-next.json

@@ -599,30 +599,9 @@
       "name": "dark-overlay",
       "value": "rgba(27,27,29,0.8)",
       "groupName": "dark/overlay"
-    },
-    {
-      "name": "light-skeleton",
-      "value": "#F6F8FD",
-      "groupName": "light/skeleton"
-    },
-    {
-      "name": "dark-skeleton",
-      "value": "#202123",
-      "groupName": "dark/skeleton"
-    }
-  ],
-  "Gradients": [
-    {
-      "name": "light-skeleton-gradient",
-      "value": "linear-gradient(90deg, #F6F8FD 0%, #FFFFFF 50.01%, #F6F8FD 99.22%)",
-      "groupName": "light/skeleton/gradient"
-    },
-    {
-      "name": "dark-skeleton-gradient",
-      "value": "linear-gradient(90deg, #202123 0%, #1B1B1D 50.01%, #202123 99.22%)",
-      "groupName": "dark/skeleton/gradient"
     }
   ],
+  "Gradients": [],
   "Shadows": [
     {
       "name": "light-modal",

package/tailwind.config.preset.js

@@ -14,7 +14,6 @@ const {
 const {
   SpacePatterns: spacingTokens,
   colors: colorTokens,
-  Gradients: gradientTokens,
   BorderRadiuses: borderRadiusTokens,
   Borders: borderWidthTokens,
   Shadows: boxShadowTokens,
@@ -41,10 +40,6 @@ module.exports = {
       'transparent': 'transparent',
     },
 
-    backgroundImage: {
-      ...parseColorTokens(gradientTokens, ['generic', 'background']),
-    },
-
     textColor: {
       ...parseColorTokens(colorTokens, ['generic', 'text']),
       'transparent': 'transparent',
@@ -81,7 +76,6 @@ module.exports = {
     animation: {
       'circular-loader': 'circular-loader 1400ms linear infinite',
       'linear-loader': 'linear-loader 1400ms linear infinite',
-      'skeleton-loader': 'skeleton-loader 1.5s linear .5s infinite',
     },
 
     keyframes: {
@@ -116,16 +110,6 @@ module.exports = {
           strokeDashoffset: '-250%',
         },
       },
-
-      'skeleton-loader': {
-        '0%': {
-          transform: 'translateX(-100%)',
-        },
-
-        '100%': {
-          transform: 'translateX(100%)',
-        },
-      },
     },
 
     borderRadius: {
@@ -323,7 +307,7 @@ module.exports = {
     }),
 
     // Theme
-    plugin(({ matchUtilities, addUtilities, theme }) => {
+    plugin(({ matchUtilities, addUtilities, addBase, theme }) => {
       // Presets
       matchUtilities({
         'theme-preset-1': (value) => {
@@ -848,6 +832,43 @@ module.exports = {
           'current': 'current',
         },
       });
+
+      // Default Styles
+      addBase({
+        '*': {
+          scrollbarColor: `${theme('textColor.on-disabled')} ${theme('backgroundColor.surface-variant')}`,
+
+          '@media (prefers-color-scheme: dark)': {
+            scrollbarColor: `${theme('textColor.on-disabled-dark')} ${theme('backgroundColor.surface-variant-dark')}`,
+          },
+
+          scrollbarWidth: 'thin',
+        },
+
+        '::-webkit-scrollbar': {
+          width: theme('width.xs'),
+
+          '&-track': {
+            backgroundColor: theme('backgroundColor.surface-variant'),
+
+            '@media (prefers-color-scheme: dark)': {
+              backgroundColor: theme('backgroundColor.surface-variant-dark'),
+            },
+
+            borderRadius: theme('borderRadius.sm'),
+          },
+
+          '&-thumb': {
+            backgroundColor: theme('textColor.on-disabled'),
+
+            '@media (prefers-color-scheme: dark)': {
+              backgroundColor: theme('textColor.on-disabled-dark'),
+            },
+
+            borderRadius: theme('borderRadius.sm'),
+          },
+        },
+      });
     }),
   ],
 };

package/tokens.css

@@ -62,7 +62,6 @@
 	--or-c-warning-opacity-0-12: rgba(153,112,0,0.12);
 	--or-c-warning-opacity-0-16: rgba(153,112,0,0.16);
 	--or-c-overlay: rgba(27,27,29,0.8);
-	--or-c-skeleton: #F6F8FD;
 }
 [data-theme="dark-mode"], [data-theme="dark"] {
 	--or-c-primary: rgba(164,200,255,1);
@@ -124,5 +123,4 @@
 	--or-c-warning-opacity-0-12: rgba(251,188,12,0.12);
 	--or-c-warning-opacity-0-16: rgba(251,188,12,0.16);
 	--or-c-overlay: rgba(27,27,29,0.8);
-	--or-c-skeleton: #202123;
 }