@onereach/styles 2.9.5 → 2.9.6-beta.665.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.9.5",
+  "version": "2.9.6-beta.665.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",
@@ -41,6 +41,5 @@
     "postcss-preset-env": "^7.7.1",
     "sass": "^1.35.1",
     "tailwindcss": "^3.1.3"
-  },
-  "gitHead": "d76cbbb22ebe358ef877cbc18c5a34566ae6a574"
+  }
 }

package/tailwind-utils.js

@@ -1,44 +1,68 @@
-const parseTokens = (tokens) => {
-  return Object.values(tokens)
+const parseColorTokens = (designTokens, colorGroups) => {
+  const isBackgroundColor = (name) => /\b(?:container|background|surface)\b/.test(name) && !isTextColor(name);
+  const isTextColor = (name) => /\b(?:on)\b/.test(name);
+
+  return Object.values(designTokens)
+    .map(({ name, value }) => ({
+      ...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
+      value,
+    }))
+    .map(({ name, theme, value }) => ({
+      name,
+      theme,
+      value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
+      group: isBackgroundColor(name) ? 'background' : isTextColor(name) ? 'text' : 'generic',
+    }))
+    .filter(({ group }) => colorGroups.includes(group))
+    .reduce((preset, { name, theme, value }) => ({
+      ...preset,
+      [name]: !theme ? value : {
+        ...preset[name],
+        ...theme === 'light' ? { DEFAULT: value } : { [theme]: value },
+      },
+    }), {});
+};
+
+const parseSpacingTokens = (designTokens) => {
+  return Object.values(designTokens)
+    .map(({ value }) => value)
+    .map((value) => ({
+      name: value.slice(0, -2),
+      value,
+    }))
     .reduce((preset, { name, value }) => ({
       ...preset,
       [name]: value,
     }), {});
 };
 
-const parseColorTokens = (colorTokens, colorGroup) => {
-  return Object.values(colorTokens)
-    .map(({ name, value }) => {
-      const { groups } = name.match(/^(?:(?<mode>light|dark)-)?(?<name>.+)$/);
-
-      const isText = /\b(?:on)\b/.test(groups.name);
-      const isBackground = !isText && /\b(?:container|background|surface)\b/.test(groups.name);
-
-      return {
-        name: groups.name,
-        group: isBackground ? 'background' : isText ? 'text' : 'generic',
-        mode: groups.mode,
-        value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
-      };
-    })
-    .filter(({ group }) => group === colorGroup)
-    .reduce((preset, { name, mode, value }) => {
-      if (mode) {
-        return {
-          ...preset,
-          [name]: {
-            ...preset[name],
-            ...mode === 'light' ? { DEFAULT: value } : { [mode]: value },
-          },
-        };
-      }
+const parseBorderRadiusTokens = (designTokens) => {
+  return Object.values(designTokens)
+    .map(({ value }) => value)
+    .map((value) => ({
+      name: value.slice(0, -2),
+      value: value,
+    }))
+    .reduce((preset, { name, value }) => ({
+      ...preset,
+      [name]: value,
+    }), {});
+};
 
-      return {
-        ...preset,
-        [name]: value,
-      };
-    }, {});
+const parseBorderWidthTokens = (designTokens) => {
+  return Object.values(designTokens)
+    .map(({ value }) => value.split(' ')[0])
+    .map((value) => ({
+      name: value.slice(0, -2),
+      value: value,
+    }))
+    .reduce((preset, { name, value }) => ({
+      ...preset,
+      [name]: value,
+    }), {});
 };
 
-module.exports.parseTokens = parseTokens;
 module.exports.parseColorTokens = parseColorTokens;
+module.exports.parseSpacingTokens = parseSpacingTokens;
+module.exports.parseBorderRadiusTokens = parseBorderRadiusTokens;
+module.exports.parseBorderWidthTokens = parseBorderWidthTokens;

package/tailwind.config.preset.js

@@ -2,39 +2,33 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
 
 const {
-  parseTokens,
   parseColorTokens,
+  parseSpacingTokens,
+  parseBorderRadiusTokens,
+  parseBorderWidthTokens,
 } = require('./tailwind-utils');
 
 const {
   colors: colorTokens,
   SpacePatterns: spacingTokens,
   BorderRadiuses: borderRadiusTokens,
+  Borders: borderWidthTokens,
 } = require('./src/variables/tokens/design-tokens-next.json');
 
 module.exports = {
   darkMode: 'class',
 
   theme: {
-    backgroundColor: {
-      ...parseColorTokens(colorTokens, 'generic'),
-      ...parseColorTokens(colorTokens, 'background'),
-    },
-
-    textColor: {
-      ...parseColorTokens(colorTokens, 'generic'),
-      ...parseColorTokens(colorTokens, 'text'),
-    },
-
-    borderColor: {
-      ...parseColorTokens(colorTokens, 'generic'),
-    },
-
-    spacing: parseTokens(spacingTokens),
-    borderRadius: parseTokens(borderRadiusTokens),
+    backgroundColor: parseColorTokens(colorTokens, ['generic', 'background']),
+    textColor: parseColorTokens(colorTokens, ['generic', 'text']),
+    borderColor: parseColorTokens(colorTokens, ['generic']),
+    spacing: parseSpacingTokens(spacingTokens),
+    borderRadius: parseBorderRadiusTokens(borderRadiusTokens),
+    borderWidth: parseBorderWidthTokens(borderWidthTokens),
 
     letterSpacing: false,
     lineHeight: false,
+    opacity: false,
 
     extend: {
       fontFamily: {
@@ -91,7 +85,7 @@ module.exports = {
           },
         ],
 
-        body: {
+        'body': {
           fontSize: '0.875rem',
           lineHeight: '1.3125rem',
           color: 'rgb(var(--tw-c-on-background))',