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

package/package.json

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

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

@@ -599,9 +599,30 @@
       "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,6 +14,7 @@ const {
 const {
   SpacePatterns: spacingTokens,
   colors: colorTokens,
+  Gradients: gradientTokens,
   BorderRadiuses: borderRadiusTokens,
   Borders: borderWidthTokens,
   Shadows: boxShadowTokens,
@@ -40,6 +41,10 @@ module.exports = {
       'transparent': 'transparent',
     },
 
+    backgroundImage: {
+      ...parseColorTokens(gradientTokens, ['generic', 'background']),
+    },
+
     textColor: {
       ...parseColorTokens(colorTokens, ['generic', 'text']),
       'transparent': 'transparent',
@@ -76,6 +81,7 @@ 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: {
@@ -110,6 +116,16 @@ module.exports = {
           strokeDashoffset: '-250%',
         },
       },
+
+      'skeleton-loader': {
+        '0%': {
+          transform: 'translateX(-100%)',
+        },
+
+        '100%': {
+          transform: 'translateX(100%)',
+        },
+      },
     },
 
     borderRadius: {
@@ -155,7 +171,7 @@ module.exports = {
 
   plugins: [
     // Core
-    plugin(({ addVariant }) => {
+    plugin(({ addVariant, addUtilities }) => {
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -197,6 +213,15 @@ 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
@@ -298,7 +323,7 @@ module.exports = {
     }),
 
     // Theme
-    plugin(({ matchUtilities, addUtilities, addBase, theme }) => {
+    plugin(({ matchUtilities, addUtilities, theme }) => {
       // Presets
       matchUtilities({
         'theme-preset-1': (value) => {
@@ -823,43 +848,6 @@ 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,6 +62,7 @@
 	--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);
@@ -123,4 +124,5 @@
 	--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;
 }