@onereach/styles 2.37.3-beta.2436.0 → 2.37.3-beta.2442.0

package/font.css

@@ -3,3 +3,11 @@
 
 /* Iconography */
 @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24..48,400..700,0..1,0";
+
+@layer base {
+
+  body {
+    @apply text-on-background dark:text-on-background-dark;
+  }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.37.3-beta.2436.0",
+  "version": "2.37.3-beta.2442.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",

package/tailwind.config.preset.js

@@ -83,7 +83,7 @@ module.exports = {
     animation: {
       'circular-loader': 'circular-loader 1400ms linear infinite',
       'linear-loader': 'linear-loader 1400ms linear infinite',
-      'skeleton-loader': 'skeleton-loader 1400ms linear infinite',
+      'skeleton-loader': 'skeleton-loader 1.5s linear 0s infinite normal forwards',
     },
 
     keyframes: {
@@ -115,7 +115,8 @@ module.exports = {
 
         '100%': {
           strokeDasharray: '25%, 100%',
-          strokeDashoffset: 'calc((100% - 0px) * -2.5)', // Workaround for Safari
+          // calc added here only for safari support
+          strokeDashoffset: 'calc((100% - 0px) * -2.5)',
         },
       },
 
@@ -142,7 +143,7 @@ module.exports = {
     },
 
     boxShadow: {
-      'none': '0 0 #00000000',
+      'none': '0 0 #0000',
       ...parseBoxShadowTokens(boxShadowTokens),
       DEFAULT: '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
     },
@@ -150,11 +151,12 @@ module.exports = {
     fontFamily: {
       ...parseFontFamilyTokens(typographyTokens),
       'inherit': 'inherit',
+      'sans': ['Inter', '-system-ui', 'sans-serif'], // https://tailwindcss.com/docs/font-family#customizing-the-default-font
     },
 
     fontSize: {
       ...parseFontSizeTokens(typographyTokens),
-      'inherit': ['inherit', { lineHeight: 'inherit' }],
+      'inherit': ['inherit', {lineHeight: 'inherit'}],
     },
 
     fontWeight: {
@@ -180,7 +182,7 @@ module.exports = {
 
   plugins: [
     // Core
-    plugin(({ addVariant, addUtilities }) => {
+    plugin(({addVariant, addUtilities}) => {
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -235,14 +237,14 @@ module.exports = {
     }),
 
     // Layout
-    plugin(({ matchUtilities }) => {
+    plugin(({matchUtilities}) => {
       matchUtilities({
         'layout': (value) => {
-          const { prefix = '', direction } = /^(?:(?<prefix>inline-)\.\.)?(?<direction>.+)$/.exec(value).groups;
+          const {prefix = '', direction} = /^(?:(?<prefix>inline-)\.\.)?(?<direction>.+)$/.exec(value).groups;
 
           return {
             display: prefix + 'flex',
-            flexFlow: `${direction} nowrap`,
+            flexDirection: direction,
             flex: prefix === 'inline-' ? '0 0 auto' : undefined,
             alignItems: direction === 'row' ? 'center' : undefined,
           };
@@ -265,7 +267,7 @@ module.exports = {
     }),
 
     // Interactivity
-    plugin(({ addUtilities }) => {
+    plugin(({addUtilities}) => {
       addUtilities({
         '.interactivity-auto': {
           pointerEvents: 'auto',
@@ -289,7 +291,7 @@ module.exports = {
     }),
 
     // Typography
-    plugin(({ matchUtilities, addBase, theme }) => {
+    plugin(({matchUtilities, addBase, theme}) => {
       matchUtilities({
         'typography': (value) => {
           const fontSizeConfig = theme('fontSize');
@@ -298,13 +300,11 @@ module.exports = {
           const [fontSizeMobile, optionsMobile] = fontSizeConfig[`mobile-${value}`] ?? [];
 
           return {
-            fontFamily: theme(`fontFamily.mobile-${value}`) ?? theme(`fontFamily.${value}`),
             fontWeight: theme(`fontWeight.mobile-${value}`) ?? theme(`fontWeight.${value}`),
             fontSize: fontSizeMobile ?? fontSizeDesktop,
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
             [`@media (min-width: ${theme('screens.md')})`]: {
-              fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
               fontSize: fontSizeDesktop,
               lineHeight: optionsDesktop?.lineHeight,
@@ -338,7 +338,6 @@ module.exports = {
       // Default Styles
       addBase({
         ':root': {
-          fontFamily: theme('fontFamily.body-1-regular'),
           fontSize: theme('fontSize.body-1-regular'),
           fontWeight: theme('fontWeight.body-1-regular'),
         },
@@ -346,7 +345,7 @@ module.exports = {
     }),
 
     // Iconography
-    plugin(({ matchUtilities }) => {
+    plugin(({matchUtilities}) => {
       matchUtilities({
         'iconography': (value) => ({
           fontFamily: '"Material Symbols Outlined"',
@@ -366,7 +365,7 @@ module.exports = {
     }),
 
     // Theme
-    plugin(({ matchUtilities, addUtilities, theme }) => {
+    plugin(({matchUtilities, addUtilities, theme}) => {
       // Presets
       matchUtilities({
         'theme-preset-1': (value) => {