@onereach/styles 6.6.0 → 6.6.1-beta.3787.0

package/font.css

@@ -1,5 +1,13 @@
 /* Typography */
-@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;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";
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24..48,400..700,0..1,0';
+
+@font-face {
+  font-family: 'OneReach Icons';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(@onereach/font-icons/dist/fonts/font-icons.ttf) format('truetype');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "6.6.0",
+  "version": "6.6.1-beta.3787.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",
@@ -41,6 +41,7 @@
     "json-to-scss": "json-to-scss mock/design-tokens.json src/variables/tokens"
   },
   "dependencies": {
+    "@onereach/font-icons": "*",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
@@ -56,6 +57,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "3e1145e0603cef516dbe83442131c68cb121146a"
+  }
 }

package/tailwind/plugins/core.js

@@ -34,35 +34,35 @@ const variants = {
 
   get 'hover'() {
     return this['enabled'].flatMap((selector) => [
-      `${selector}:not(.interactivity-none):hover`,
+      `${selector}:not(.interactivity-none):not([force-state]):hover`,
       `${selector}:not(.interactivity-none)[force-state="hover"]`,
     ]);
   },
 
   get 'focus'() {
     return this['enabled'].flatMap((selector) => [
-      `${selector}:not(.interactivity-none):focus`,
+      `${selector}:not(.interactivity-none):not([force-state]):focus`,
       `${selector}:not(.interactivity-none)[force-state="focus"]`,
     ]);
   },
 
   get 'focus-within'() {
     return this['enabled'].flatMap((selector) => [
-      `${selector}:not(.interactivity-none):focus-within`,
+      `${selector}:not(.interactivity-none):not([force-state]):focus-within`,
       `${selector}:not(.interactivity-none)[force-state="focus-within"]`,
     ]);
   },
 
   get 'focus-visible'() {
     return this['enabled'].flatMap((selector) => [
-      `${selector}:not(.interactivity-none):focus-visible`,
+      `${selector}:not(.interactivity-none):not([force-state]):focus-visible`,
       `${selector}:not(.interactivity-none)[force-state="focus-visible"]`,
     ]);
   },
 
   get 'active'() {
     return this['enabled'].flatMap((selector) => [
-      `${selector}:not(.interactivity-none):active`,
+      `${selector}:not(.interactivity-none):not([force-state]):active`,
       `${selector}:not(.interactivity-none)[force-state="active"]`,
     ]);
   },

package/tailwind/plugins/iconography.js

@@ -11,12 +11,18 @@ const values = {
 };
 
 module.exports = {
-  plugin: plugin(({ matchComponents }) => {
+  plugin: plugin(({ matchComponents, addComponents }) => {
     matchComponents({
       'iconography': (value) => ({
         fontFamily: '"Material Symbols Outlined"',
         fontVariationSettings: value,
       }),
     }, { values });
+
+    addComponents({
+      '.iconography-onereach': {
+        fontFamily: '"OneReach Icons" !important',
+      },
+    });
   }),
 };

package/tailwind/utils.js

@@ -3,8 +3,12 @@ module.exports = {
     return Object.values(designTokens)
       .reduce((preset, { name, value }) => ({
         ...preset,
-        [name]: value,
-        ...name !== 'none' && { [`${name}*`]: `${Number(value.match(/^(\d+)px$/)[1]) - 1}px` },
+        ...name === 'none'
+          ? { '0': value }
+          : {
+            [name]: value,
+            [`${name}*`]: `${Number(value.match(/^(\d+)px$/)[1]) - 1}px`,
+          },
       }), {});
   },
 

package/tailwind.config.json

@@ -2,7 +2,7 @@
   "theme": {
     "screens": {},
     "spacing": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -1722,7 +1722,6 @@
     },
     "borderRadius": {
       "0": "0px",
-      "none": "0px",
       "sm": "2px",
       "md": "4px",
       "lg": "8px",
@@ -2202,7 +2201,7 @@
       "100": "1"
     },
     "borderSpacing": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -2598,8 +2597,8 @@
       "none": "none"
     },
     "flexBasis": {
+      "0": "0px",
       "auto": "auto",
-      "none": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -2659,7 +2658,7 @@
       "DEFAULT": "1"
     },
     "gap": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -2826,8 +2825,8 @@
       "none": "none"
     },
     "height": {
+      "0": "0px",
       "auto": "auto",
-      "none": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -2880,8 +2879,8 @@
       "180": "180deg"
     },
     "inset": {
+      "0": "0px",
       "auto": "auto",
-      "none": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -2949,8 +2948,8 @@
       "none": "none"
     },
     "margin": {
+      "0": "0px",
       "auto": "auto",
-      "none": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -2983,7 +2982,7 @@
       "6": "6"
     },
     "maxHeight": {
-      "none": "none",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3006,6 +3005,7 @@
       "md+*": "19px",
       "lg+": "28px",
       "lg+*": "27px",
+      "none": "none",
       "full": "100%",
       "screen": "100vh",
       "min": "min-content",
@@ -3100,7 +3100,7 @@
       "8": "8px"
     },
     "padding": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3210,7 +3210,7 @@
       "150": "1.5"
     },
     "scrollMargin": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3235,7 +3235,7 @@
       "lg+*": "27px"
     },
     "scrollPadding": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3272,7 +3272,7 @@
       "12": "12deg"
     },
     "space": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3314,7 +3314,7 @@
       "from-font": "from-font"
     },
     "textIndent": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3395,7 +3395,7 @@
       "transform": "transform"
     },
     "translate": {
-      "none": "0px",
+      "0": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",
@@ -3427,8 +3427,8 @@
       "full": "100%"
     },
     "width": {
+      "0": "0px",
       "auto": "auto",
-      "none": "0px",
       "xs": "4px",
       "xs*": "3px",
       "sm": "8px",

package/tailwind.config.preset.js

@@ -143,8 +143,7 @@ module.exports = {
     },
 
     borderRadius: {
-      '0': '0px', // Deprecated
-      'none': '0px',
+      '0': '0px',
       ...parseBorderRadiusTokens(borderRadiusTokens),
       'full': '9999px',
     },