@onereach/styles 22.2.0-beta.5496.0 → 22.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "22.2.0-beta.5496.0",
+  "version": "22.2.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
   "main": "./main.css",
@@ -44,7 +44,7 @@
     "json-to-scss": "json-to-scss mock/design-tokens.json src/variables/tokens"
   },
   "dependencies": {
-    "@onereach/font-icons": "^22.1.6",
+    "@onereach/font-icons": "^22.2.0",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
@@ -60,5 +60,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "e570eb1e849731410d2c920e077ba2371c85e1ff"
 }

package/tailwind/plugins/core.js

@@ -1,4 +1,6 @@
 const plugin = require('tailwindcss/plugin');
+const screens = require('../../screens.json');
+
 
 const variants = {
   'mobile': '@media (hover: none)',
@@ -64,9 +66,18 @@ const variants = {
 };
 
 module.exports = {
+  screens,
   variants,
 
   plugin: plugin(({ addVariant, addUtilities }) => {
+    Object.entries(screens).forEach(([breakpoint, width]) => {
+      addVariant(breakpoint, [
+        `@media (min-width: ${width})`,
+        `[force-screen~="${breakpoint}"] &`,
+        `&[force-screen~="${breakpoint}"]`,
+      ]);
+    });
+
     Object.entries(variants).forEach(([modifier, selectors]) => {
       addVariant(modifier, selectors);
     });

package/tailwind/plugins/typography.js

@@ -1,5 +1,5 @@
 const plugin = require('tailwindcss/plugin');
-const screens = require('../../screens.json');
+const { screens } = require('./core');
 
 const values = {
   'display-large': 'display-large',

package/tailwind.config.json

@@ -3799,7 +3799,6 @@
     {},
     {},
     {},
-    {},
     {}
   ],
   "darkMode": [

package/tailwind.config.preset.js

@@ -12,7 +12,6 @@ const { plugin: themeBackground } = require('./tailwind/plugins/theme-background
 const { plugin: themeBorder } = require('./tailwind/plugins/theme-border');
 const { plugin: themeDivider } = require('./tailwind/plugins/theme-divider');
 const { plugin: themeOutline } = require('./tailwind/plugins/theme-outline');
-const { plugin: themeResponsive } = require('./tailwind/plugins/responsive');
 
 const {
   parseSpacingTokens,
@@ -220,6 +219,5 @@ module.exports = {
     themeBorder,
     themeDivider,
     themeOutline,
-    themeResponsive,
   ],
 };

package/tailwind/plugins/responsive.js

@@ -1,24 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-const screens = require('../../screens.json');
-
-
-module.exports = {
-  plugin: plugin(({ addVariant }) => {
-    const minScreenValue = Math.min(...Object.values(screens).map(width => parseInt(width)));
-
-    Object.entries(screens).forEach(([breakpoint, width]) => {
-      addVariant(breakpoint, [
-        `@media (min-width: ${width})`,
-        `[force-screen~="${breakpoint}"] &`,
-        `&[force-screen~="${breakpoint}"]`,
-      ]);
-    });
-
-    // Custom variant for extra small screens
-    addVariant('xs', [
-      `@media (max-width: ${minScreenValue - 1}px)`,
-      '[force-screen~="xs"] &',
-      '&[force-screen~="xs"]',
-    ]);
-  }),
-};