@onereach/styles 7.1.1 → 7.1.2-beta.4530.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "7.1.1",
+  "version": "7.1.2-beta.4530.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",
@@ -58,6 +58,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "bbe6c85a0c79f51774f344a805aeead1f1572223"
+  }
 }

package/tailwind/utils.js

@@ -121,4 +121,44 @@ module.exports = {
         [name]: fontWeight,
       }), {});
   },
+
+  parseColorTokensToVars(designTokens, colorGroups) {
+    const prefix = 'or-c';
+    const isBackground = (name) => /\b(?:container|background|surface)\b/.test(name) && !isText(name);
+    const isText = (name) => /\b(?:on)\b/.test(name);
+    const isShadow = (name) => /\b(?:shadow)\b/.test(name);
+
+    const defineColorGroup = (name) => {
+      switch (true) {
+        case isBackground(name):
+          return 'background';
+
+        case isText(name):
+          return 'text';
+
+        case isShadow(name):
+          return null;
+
+        default:
+          return 'generic';
+      }
+    };
+
+    return Object.values(designTokens)
+      .map((token) => {
+        const { name, theme } = token.name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups;
+
+        return {
+          name,
+          theme,
+          group: defineColorGroup(name),
+          color: `var(--${prefix}-${!theme || theme === 'light' ? name : `${name}-${theme}`})`,
+        };
+      })
+      .filter(({ group }) => colorGroups.includes(group))
+      .reduce((preset, { name, theme, color }) => ({
+        ...preset,
+        [!theme || theme === 'light' ? name : `${name}-${theme}`]: color,
+      }), {});
+  },
 };