@onereach/styles 2.9.9 → 2.9.10-beta.774.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.9.9",
+  "version": "2.9.10-beta.774.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",
@@ -44,6 +44,5 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.4",
     "tailwindcss": "^3.1.3"
-  },
-  "gitHead": "f8a686f695442e8a89f1d051e57d763dba924065"
+  }
 }

package/src/variables/tokens/design-tokens-next.json

@@ -470,15 +470,15 @@
   ],
   "BorderRadiuses" : [
     {
-      "name" : "radius-2",
+      "name" : "sm",
       "value" : "2px"
     },
     {
-      "name" : "radius-4",
+      "name" : "md",
       "value" : "4px"
     },
     {
-      "name" : "radius-8",
+      "name" : "lg",
       "value" : "8px"
     }
   ],
@@ -638,7 +638,7 @@
       "value" : "0px"
     },
     {
-      "name" : "2-xs",
+      "name" : "2xs",
       "value" : "2px"
     },
     {
@@ -658,11 +658,11 @@
       "value" : "32px"
     },
     {
-      "name" : "3-xl",
+      "name" : "3xl",
       "value" : "64px"
     },
     {
-      "name" : "4-xl",
+      "name" : "4xl",
       "value" : "128px"
     },
     {
@@ -670,7 +670,7 @@
       "value" : "24px"
     },
     {
-      "name" : "2-xl",
+      "name" : "2xl",
       "value" : "48px"
     }
   ]

package/tailwind-utils.js

@@ -1,11 +1,6 @@
 module.exports = {
   parseSpacingTokens(designTokens) {
     return Object.values(designTokens)
-      .map(({ value }) => value)
-      .map((value) => ({
-        name: value.slice(0, -2),
-        value,
-      }))
       .reduce((preset, { name, value }) => ({
         ...preset,
         [name]: value,
@@ -38,13 +33,12 @@ module.exports = {
     return Object.values(designTokens)
       .map(({ name, value }) => ({
         ...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
-        value,
+        value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
       }))
-      .map(({ name, theme, value }) => ({
+      .map(({ name, ...props }) => ({
         name,
-        theme,
-        value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, 'rgba($1 $2 $3 / $4)'),
         group: defineColorGroup(name),
+        ...props,
       }))
       .filter(({ group }) => colorGroups.includes(group))
       .reduce((preset, { name, theme, value }) => ({
@@ -53,28 +47,8 @@ module.exports = {
       }), {});
   },
 
-  parseTypographyTokens(designTokens) {
-    return Object.values(designTokens)
-      .map(({ name, fontFamily, fontWeight, fontSizeRem, lineHeightRem }) => ({
-        name,
-        fontFamily,
-        fontWeight,
-        fontSize: `${fontSizeRem}rem`,
-        lineHeight: `${lineHeightRem}rem`,
-      }))
-      .reduce((preset, { name, ...css }) => ({
-        ...preset,
-        [name]: { css },
-      }), {});
-  },
-
   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,
@@ -86,7 +60,7 @@ module.exports = {
       .map(({ value }) => value.split(' ')[0])
       .map((value) => ({
         name: value.slice(0, -2),
-        value: value,
+        value,
       }))
       .reduce((preset, { name, value }) => ({
         ...preset,
@@ -98,11 +72,6 @@ module.exports = {
     return Object.values(designTokens)
       .map(({ name, value }) => ({
         ...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
-        value,
-      }))
-      .map(({ name, theme, value }) => ({
-        name,
-        theme,
         value: value
           .replace(/\b0px\b/g, '0')
           .replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
@@ -112,4 +81,28 @@ module.exports = {
         [!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
       }), {});
   },
+
+  parseFontFamilyTokens(designTokens) {
+    return Object.values(designTokens)
+      .reduce((preset, { name, fontFamily }) => ({
+        ...preset,
+        [name]: fontFamily,
+      }), {});
+  },
+
+  parseFontSizeTokens(designTokens) {
+    return Object.values(designTokens)
+      .reduce((preset, { name, fontSize, lineHeight }) => ({
+        ...preset,
+        [name]: [fontSize, { lineHeight }],
+      }), {});
+  },
+
+  parseFontWeightTokens(designTokens) {
+    return Object.values(designTokens)
+      .reduce((preset, { name, fontWeight }) => ({
+        ...preset,
+        [name]: fontWeight,
+      }), {});
+  },
 };

package/tailwind.config.preset.js

@@ -3,19 +3,21 @@ const plugin = require('tailwindcss/plugin');
 const {
   parseSpacingTokens,
   parseColorTokens,
-  parseTypographyTokens,
   parseBorderRadiusTokens,
   parseBorderWidthTokens,
   parseBoxShadowTokens,
+  parseFontFamilyTokens,
+  parseFontSizeTokens,
+  parseFontWeightTokens,
 } = require('./tailwind-utils');
 
 const {
   SpacePatterns: spacingTokens,
   colors: colorTokens,
-  typeStyles: typographyTokens,
   BorderRadiuses: borderRadiusTokens,
   Borders: borderWidthTokens,
   Shadows: boxShadowTokens,
+  typeStyles: typographyTokens,
 } = require('./src/variables/tokens/design-tokens-next.json');
 
 module.exports = {
@@ -27,23 +29,76 @@ module.exports = {
     backgroundColor: parseColorTokens(colorTokens, ['generic', 'background']),
     textColor: parseColorTokens(colorTokens, ['generic', 'text']),
     borderColor: parseColorTokens(colorTokens, ['generic']),
+    outlineColor: parseColorTokens(colorTokens, ['generic']),
+
+    // SVG Palette
+    fill: parseColorTokens(colorTokens, ['generic', 'background', 'text']),
+    stroke: parseColorTokens(colorTokens, ['generic', 'background', 'text']),
+
+    animation: {
+      'circular-loader': 'circular-loader 1400ms linear infinite',
+      'linear-loader': 'linear-loader 1400ms linear infinite',
+    },
+
+    keyframes: {
+      'circular-loader': {
+        '0%': {
+          transform: 'rotate(0deg)',
+          strokeDasharray: '0, 200',
+          strokeDashoffset: '0',
+        },
+
+        '50%': {
+          transform: 'rotate(180deg)',
+          strokeDasharray: '100, 200',
+          strokeDashoffset: 'calc((50% - 2px) * -3.14)',
+        },
+
+        '100%': {
+          transform: 'rotate(360deg)',
+          strokeDasharray: '100, 200',
+          strokeDashoffset: 'calc((100% - 2px) * -3.14)',
+        },
+      },
+
+      'linear-loader': {
+        '0%': {
+          strokeDasharray: '25%, 100%',
+          strokeDashoffset: '0',
+        },
 
-    typography: parseTypographyTokens(typographyTokens),
+        '100%': {
+          strokeDasharray: '25%, 100%',
+          strokeDashoffset: '-250%',
+        },
+      },
+    },
 
     borderRadius: parseBorderRadiusTokens(borderRadiusTokens),
     borderWidth: parseBorderWidthTokens(borderWidthTokens),
     boxShadow: parseBoxShadowTokens(boxShadowTokens),
-    fontFamily: false,
-    fontSize: false,
-    fontWeight: false,
+
+    fontFamily: {
+      ...parseFontFamilyTokens(typographyTokens),
+      'inherit': 'inherit',
+    },
+
+    fontSize: {
+      ...parseFontSizeTokens(typographyTokens),
+      'inherit': 'inherit',
+    },
+
+    fontWeight: {
+      ...parseFontWeightTokens(typographyTokens),
+      'inherit': 'inherit',
+    },
+
     letterSpacing: false,
     lineHeight: false,
     opacity: false,
   },
 
   plugins: [
-    require('@tailwindcss/typography'),
-
     plugin(({ addBase, addVariant, addUtilities, theme }) => {
       addBase({
         '@font-face': [
@@ -55,14 +110,6 @@ module.exports = {
             'src': 'url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2")',
           },
 
-          {
-            'font-family': '"Inter"',
-            'font-style': 'normal',
-            'font-weight': '500',
-            'font-display': 'swap',
-            'src': 'url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19") format("woff2")',
-          },
-
           {
             'font-family': '"Inter"',
             'font-style': 'normal',
@@ -81,7 +128,9 @@ module.exports = {
         ],
 
         ':root': {
-          ...theme('typography.body-1-regular.css'),
+          fontFamily: theme('fontFamily.body-1-regular'),
+          fontSize: theme('fontSize.body-1-regular'),
+          fontWeight: theme('fontWeight.body-1-regular'),
         },
       });