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

package/base.layer.css

@@ -0,0 +1,8 @@
+@layer base {
+
+  body {
+    @apply text-on-background dark:text-on-background-dark;
+    @apply typography-body-1-regular
+  }
+
+}

package/font.css

@@ -3,11 +3,3 @@
 
 /* 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/main-v3.css

@@ -4,3 +4,5 @@
 
 @import "font.css";
 @import "scrollbar.css";
+
+@import "base.layer.css";

package/main.css

@@ -5,4 +5,6 @@
 @import "font.css";
 @import "scrollbar.css";
 
+@import "base.layer.css";
+
 @import "dist/index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.37.3-beta.2442.0",
+  "version": "2.37.3-beta.2446.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",
@@ -22,7 +22,8 @@
     "main-v3.css",
     "font.css",
     "scrollbar.css",
-    "temporary-dark-v2.css"
+    "temporary-dark-v2.css",
+    "base.layer.css"
   ],
   "scripts": {
     "dev": "pnpm build:scss -- --watch",

package/tailwind.config.preset.js

@@ -151,12 +151,11 @@ 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: {
@@ -182,7 +181,7 @@ module.exports = {
 
   plugins: [
     // Core
-    plugin(({addVariant, addUtilities}) => {
+    plugin(({ addVariant, addUtilities }) => {
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -237,10 +236,10 @@ 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',
@@ -267,7 +266,7 @@ module.exports = {
     }),
 
     // Interactivity
-    plugin(({addUtilities}) => {
+    plugin(({ addUtilities }) => {
       addUtilities({
         '.interactivity-auto': {
           pointerEvents: 'auto',
@@ -291,7 +290,7 @@ module.exports = {
     }),
 
     // Typography
-    plugin(({matchUtilities, addBase, theme}) => {
+    plugin(({ matchUtilities, addBase, theme }) => {
       matchUtilities({
         'typography': (value) => {
           const fontSizeConfig = theme('fontSize');
@@ -300,11 +299,13 @@ 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,
@@ -334,18 +335,10 @@ module.exports = {
           'inherit': 'inherit',
         },
       });
-
-      // Default Styles
-      addBase({
-        ':root': {
-          fontSize: theme('fontSize.body-1-regular'),
-          fontWeight: theme('fontWeight.body-1-regular'),
-        },
-      });
     }),
 
     // Iconography
-    plugin(({matchUtilities}) => {
+    plugin(({ matchUtilities }) => {
       matchUtilities({
         'iconography': (value) => ({
           fontFamily: '"Material Symbols Outlined"',
@@ -365,7 +358,7 @@ module.exports = {
     }),
 
     // Theme
-    plugin(({matchUtilities, addUtilities, theme}) => {
+    plugin(({ matchUtilities, addUtilities, theme }) => {
       // Presets
       matchUtilities({
         'theme-preset-1': (value) => {