@onereach/styles 2.33.0-beta.1987.0 → 2.33.0

package/font.css

@@ -1,2 +1,5 @@
+/* Typography */
 @import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";
+
+/* Iconography */
 @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24..48,400..700,0..1,0";

package/main.css

@@ -2,7 +2,7 @@
 @import "tailwindcss/components.css";
 @import "tailwindcss/utilities.css";
 
-@import "./font.css";
-@import "./scrollbar.css";
+@import "font.css";
+@import "scrollbar.css";
 
-@import "./dist/index.css";
+@import "dist/index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.33.0-beta.1987.0",
+  "version": "2.33.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",
@@ -53,5 +53,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "299060820141c34359b8a439b36a4a737b2f6f51"
 }

package/scrollbar.css

@@ -1,17 +1,9 @@
-* {
-  scrollbar-color: theme('textColor.on-disabled') theme('backgroundColor.surface-variant');
-
-  /* @media (prefers-color-scheme: dark) {
-    scrollbar-color: theme('textColor.on-disabled-dark') theme('backgroundColor.surface-variant-dark');
-  } */
-
-  scrollbar-width: thin;
-}
-
+/* Webkit */
 ::-webkit-scrollbar {
   width: theme('width.xs');
 }
 
+/* Webkit (light) */
 ::-webkit-scrollbar-track {
   background-color: theme('backgroundColor.surface-variant');
 
@@ -32,14 +24,27 @@
   border-radius: theme('borderRadius.sm');
 }
 
-
-:is(.dark, [data-theme="dark"]) * {
-  scrollbar-color: theme('textColor.on-disabled-dark') theme('backgroundColor.surface-variant-dark');
-}
-
+/* Webkit (dark) */
 :is(.dark, [data-theme="dark"]) ::-webkit-scrollbar-track {
   background-color: theme('backgroundColor.surface-variant-dark');
 }
+
 :is(.dark, [data-theme="dark"]) ::-webkit-scrollbar-thumb {
   background-color: theme('textColor.on-disabled-dark');
 }
+
+/* Gecko (light) */
+* {
+  scrollbar-color: theme('textColor.on-disabled') theme('backgroundColor.surface-variant');
+
+  /* @media (prefers-color-scheme: dark) {
+    scrollbar-color: theme('textColor.on-disabled-dark') theme('backgroundColor.surface-variant-dark');
+  } */
+
+  scrollbar-width: thin;
+}
+
+/* Gecko (dark) */
+:is(.dark, [data-theme="dark"]) * {
+  scrollbar-color: theme('textColor.on-disabled-dark') theme('backgroundColor.surface-variant-dark');
+}

package/tailwind-utils.js

@@ -4,6 +4,7 @@ module.exports = {
       .reduce((preset, { name, value }) => ({
         ...preset,
         [name]: value,
+        ...name !== 'none' && { [`${name}*`]: `${Number(value.match(/^(\d+)px$/)[1]) - 1}px` },
       }), {});
   },
 

package/tailwind.config.js

@@ -1,9 +1,13 @@
 module.exports = {
+  // this file used as default config file and can be overridden on app side by creating tailwind.config.js file in
+  // the app root, this file is a problem as we need to modify in to allow tailwind usage in ui libraries
+  // TODO: Refactor this to allow to add new libs without modifying and performance loose
   content: [
     './src/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/@onereach/service-navigation/dist/auto/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/@onereach/auth-ui-module/dist/auto/**/*.{vue,js,ts,jsx,tsx}',
     './node_modules/@onereach/ui-components/dist/auto/**/*.{vue,js,ts,jsx,tsx}',
   ],
-
   presets: [
     require('@onereach/styles/tailwind.config.preset.js'),
   ],

package/tailwind.config.preset.js

@@ -161,6 +161,11 @@ module.exports = {
       'inherit': 'inherit',
     },
 
+    outlineWidth: {
+      '0': '0px',
+      ...parseBorderWidthTokens(borderWidthTokens),
+    },
+
     transitionDuration: {
       'short': '100ms',
       'medium': '250ms',
@@ -227,6 +232,29 @@ module.exports = {
       });
     }),
 
+    // Layout
+    plugin(({ matchUtilities }) => {
+      matchUtilities({
+        'layout': (value) => {
+          const { prefix = '', direction } = /^(?:(?<prefix>inline-)\.\.)?(?<direction>.+)$/.exec(value).groups;
+
+          return {
+            display: prefix + 'flex',
+            flexDirection: direction,
+            alignItems: direction === 'row' ? 'center' : 'normal',
+          };
+        },
+      }, {
+        values: {
+          'row': 'row',
+          'column': 'column',
+
+          'inline-row': 'inline-..row',
+          'inline-column': 'inline-..column',
+        },
+      });
+    }),
+
     // Interactivity
     plugin(({ addUtilities }) => {
       addUtilities({
@@ -354,7 +382,7 @@ module.exports = {
               },
             },
 
-            transitionProperty: 'color, background-color',
+            transitionProperty: 'color, background-color, border-color, outline-color',
             transitionDuration: theme('transitionDuration.short'),
             transitionTimingFunction: theme('transitionTimingFunction.standard'),
           };
@@ -385,7 +413,7 @@ module.exports = {
               },
             },
 
-            transitionProperty: 'color, background-color',
+            transitionProperty: 'color, background-color, border-color, outline-color',
             transitionDuration: theme('transitionDuration.short'),
             transitionTimingFunction: theme('transitionTimingFunction.standard'),
           };
@@ -416,7 +444,7 @@ module.exports = {
               },
             },
 
-            transitionProperty: 'color, background-color',
+            transitionProperty: 'color, background-color, border-color, outline-color',
             transitionDuration: theme('transitionDuration.short'),
             transitionTimingFunction: theme('transitionTimingFunction.standard'),
           };
@@ -447,7 +475,7 @@ module.exports = {
               },
             },
 
-            transitionProperty: 'color, background-color',
+            transitionProperty: 'color, background-color, border-color, outline-color',
             transitionDuration: theme('transitionDuration.short'),
             transitionTimingFunction: theme('transitionTimingFunction.standard'),
           };
@@ -732,9 +760,9 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            borderColor: theme(`borderColor.${token}` + suffix, token),
+            borderWidth: theme('borderWidth.1'),
             borderStyle: 'solid',
-            borderWidth: 1,
+            borderColor: theme(`borderColor.${token}` + suffix, token),
 
             '&[disabled]': {
               borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
@@ -777,9 +805,9 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            borderColor: theme(`borderColor.${token}` + suffix, token),
+            borderWidth: theme('borderWidth.2'),
             borderStyle: 'solid',
-            borderWidth: 2,
+            borderColor: theme(`borderColor.${token}` + suffix, token),
 
             '&[disabled]': {
               borderColor: `${theme('borderColor.disabled' + suffix)} !important`,
@@ -830,10 +858,14 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-            outlineOffset: 0,
+            // In Safari outline doesn't follow current border-radius
+            // It seems like this is already fixed in Safari Technology Preview (Release 157)
+            // Stay tuned for Safari updates
+            boxShadow: `0 0 0 2px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
+            // outlineOffset: '0',
+            // outlineWidth: theme('outlineWidth.2'),
+            // outlineStyle: 'solid',
+            // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
           };
         },
       }, {