@onereach/styles 22.2.0-beta.5458.0 → 22.2.0-beta.5496.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "22.2.0-beta.5458.0",
+  "version": "22.2.0-beta.5496.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.2.0-beta.5458.0",
+    "@onereach/font-icons": "^22.1.6",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {

package/tailwind/plugins/core.js

@@ -1,6 +1,4 @@
 const plugin = require('tailwindcss/plugin');
-const screens = require('../../screens.json');
-
 
 const variants = {
   'mobile': '@media (hover: none)',
@@ -66,18 +64,9 @@ 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/responsive.js

@@ -0,0 +1,24 @@
+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"]',
+    ]);
+  }),
+};

package/tailwind/plugins/typography.js

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

package/tailwind.config.json

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

package/tailwind.config.preset.js

@@ -12,6 +12,7 @@ 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,
@@ -219,5 +220,6 @@ module.exports = {
     themeBorder,
     themeDivider,
     themeOutline,
+    themeResponsive,
   ],
 };