@onereach/styles 2.26.0 → 2.26.1-beta.1695.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.26.0",
+  "version": "2.26.1-beta.1695.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",
@@ -49,6 +49,5 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.4",
     "tailwindcss": "^3.1.3"
-  },
-  "gitHead": "13188671567c5c8ae206d3fb39dd94e97c1ec218"
+  }
 }

package/tailwind.config.preset.js

@@ -155,7 +155,7 @@ module.exports = {
 
   plugins: [
     // Core
-    plugin(({ addVariant, addUtilities }) => {
+    plugin(({ addVariant }) => {
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -197,15 +197,6 @@ module.exports = {
       addVariant('last-child', ['& > *:last-child']);
 
       addVariant('links', ['& :any-link']);
-
-      // TODO: Remove when migration complete
-      addUtilities({
-        '.visually-hidden': {
-          width: 0,
-          height: 0,
-          visibility: 'hidden',
-        },
-      });
     }),
 
     // Interactivity
@@ -307,7 +298,7 @@ module.exports = {
     }),
 
     // Theme
-    plugin(({ matchUtilities, addUtilities, theme }) => {
+    plugin(({ matchUtilities, addUtilities, addBase, theme }) => {
       // Presets
       matchUtilities({
         'theme-preset-1': (value) => {
@@ -832,6 +823,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'),
+          },
+        },
+      });
     }),
   ],
 };