@onereach/styles 2.9.6 → 2.9.7-beta.686.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.9.6",
+  "version": "2.9.7-beta.686.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",
@@ -31,6 +31,7 @@
   ],
   "license": "UNLICENSED",
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.4",
     "autoprefixer": "^10.2.5",
     "clean-css-cli": "^5.2.2",
     "json-to-scss": "^1.6.2",
@@ -41,6 +42,5 @@
     "postcss-preset-env": "^7.7.1",
     "sass": "^1.35.1",
     "tailwindcss": "^3.1.3"
-  },
-  "gitHead": "9e7c3a53eb4f45940e6c9a78a66548fb95cd2498"
+  }
 }

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

@@ -359,6 +359,62 @@
     {
       "name" : "dark-primary-opacity-0-16",
       "value" : "rgba(164,200,255,0.16)"
+    },
+    {
+      "name" : "light-primary-hover",
+      "value" : "rgba(0,119,220,1)"
+    },
+    {
+      "name" : "light-error-hover",
+      "value" : "rgba(221,55,48,1)"
+    },
+    {
+      "name" : "light-success-hover",
+      "value" : "rgba(56,166,0,1)"
+    },
+    {
+      "name" : "light-warning-hover",
+      "value" : "rgba(153,112,0,1)"
+    },
+    {
+      "name" : "light-error-opacity-0-08",
+      "value" : "rgba(186,27,27,0.08)"
+    },
+    {
+      "name" : "light-error-opacity-0-12",
+      "value" : "rgba(186,27,27,0.12)"
+    },
+    {
+      "name" : "light-error-opacity-0-16",
+      "value" : "rgba(186,27,27,0.16)"
+    },
+    {
+      "name" : "dark-primary-hover",
+      "value" : "rgba(111,174,255,1)"
+    },
+    {
+      "name" : "dark-error-hover",
+      "value" : "rgba(255,137,122,1)"
+    },
+    {
+      "name" : "dark-success-hover",
+      "value" : "rgba(81,195,20,1)"
+    },
+    {
+      "name" : "dark-warning-hover",
+      "value" : "rgba(219,162,0,1)"
+    },
+    {
+      "name" : "dark-error-opacity-0-08",
+      "value" : "rgba(255,180,169,0.08)"
+    },
+    {
+      "name" : "dark-error-opacity-0-12",
+      "value" : "rgba(255,180,169,0.12)"
+    },
+    {
+      "name" : "dark-error-opacity-0-16",
+      "value" : "rgba(255,180,169,0.16)"
     }
   ],
   "Gradients" : [
@@ -430,106 +486,150 @@
     {
       "name" : "inter",
       "fontFamily" : "Inter"
+    },
+    {
+      "name" : "inter-700",
+      "fontFamily" : "Inter"
+    },
+    {
+      "name" : "inter-500",
+      "fontFamily" : "Inter"
+    },
+    {
+      "name" : "inter-600",
+      "fontFamily" : "Inter"
     }
   ],
   "typeStyles" : [
-    {
-      "name" : "headline-1",
-      "fontFamily" : "Inter",
-      "fontSize" : "24px",
-      "lineHeight" : "29px",
-      "letterSpacing" : "0px"
-    },
     {
       "name" : "headline-2",
       "fontFamily" : "Inter",
       "fontSize" : "20px",
       "lineHeight" : "24px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "700",
+      "fontSizeRem" : "1.25",
+      "lineHeightRem" : "1.5"
     },
     {
       "name" : "headline-3",
       "fontFamily" : "Inter",
       "fontSize" : "16px",
       "lineHeight" : "24px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "700",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
     },
     {
       "name" : "headline-4",
       "fontFamily" : "Inter",
       "fontSize" : "14px",
       "lineHeight" : "21px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "700",
+      "fontSizeRem" : "0.875",
+      "lineHeightRem" : "1.3125"
     },
     {
       "name" : "button",
       "fontFamily" : "Inter",
       "fontSize" : "14px",
       "lineHeight" : "20px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "600",
+      "fontSizeRem" : "0.875",
+      "lineHeightRem" : "1.25"
     },
     {
       "name" : "body-1-regular",
       "fontFamily" : "Inter",
       "fontSize" : "16px",
       "lineHeight" : "24px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "400",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
     },
     {
       "name" : "body-1-semibold",
       "fontFamily" : "Inter",
       "fontSize" : "16px",
       "lineHeight" : "24px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "600",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
     },
     {
       "name" : "body-1-bold",
       "fontFamily" : "Inter",
       "fontSize" : "16px",
       "lineHeight" : "24px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "700",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
     },
     {
       "name" : "body-2-regular",
       "fontFamily" : "Inter",
       "fontSize" : "14px",
       "lineHeight" : "21px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "400",
+      "fontSizeRem" : "0.875",
+      "lineHeightRem" : "1.3125"
     },
     {
       "name" : "body-2-semibold",
       "fontFamily" : "Inter",
       "fontSize" : "14px",
       "lineHeight" : "21px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "600",
+      "fontSizeRem" : "0.875",
+      "lineHeightRem" : "1.3125"
     },
     {
       "name" : "body-2-bold",
       "fontFamily" : "Inter",
       "fontSize" : "14px",
       "lineHeight" : "21px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "700",
+      "fontSizeRem" : "0.875",
+      "lineHeightRem" : "1.3125"
     },
     {
       "name" : "caption-regular",
       "fontFamily" : "Inter",
       "fontSize" : "12px",
       "lineHeight" : "18px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "400",
+      "fontSizeRem" : "0.75",
+      "lineHeightRem" : "1.125"
     },
     {
       "name" : "caption-semibold",
       "fontFamily" : "Inter",
       "fontSize" : "12px",
       "lineHeight" : "18px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "600",
+      "fontSizeRem" : "0.75",
+      "lineHeightRem" : "1.125"
     },
     {
       "name" : "caption-bold",
       "fontFamily" : "Inter",
       "fontSize" : "12px",
       "lineHeight" : "18px",
-      "letterSpacing" : "0px"
+      "letterSpacing" : "0px",
+      "fontWeight":  "700",
+      "fontSizeRem" : "0.75",
+      "lineHeightRem" : "1.125"
     }
   ],
   "SpacePatterns" : [

package/tailwind-utils.js

@@ -1,4 +1,17 @@
 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,
+      }), {});
+  },
+
   parseColorTokens(designTokens, colorGroups) {
     const isBackground = (name) => /\b(?:container|background|surface)\b/.test(name) && !isText(name);
     const isText = (name) => /\b(?:on)\b/.test(name);
@@ -40,35 +53,18 @@ module.exports = {
       }), {});
   },
 
-  parseSpacingTokens(designTokens) {
+  parseTypographyTokens(designTokens) {
     return Object.values(designTokens)
-      .map(({ value }) => value)
-      .map((value) => ({
-        name: value.slice(0, -2),
-        value,
-      }))
-      .reduce((preset, { name, value }) => ({
-        ...preset,
-        [name]: value,
-      }), {});
-  },
-
-  parseBoxShadowTokens(designTokens) {
-    return Object.values(designTokens)
-      .map(({ name, value }) => ({
-        ...name.match(/^(?:(?<theme>light|dark)-)?(?<name>.+)$/).groups,
-        value,
-      }))
-      .map(({ name, theme, value }) => ({
+      .map(({ name, fontFamily, fontWeight, fontSizeRem, lineHeightRem }) => ({
         name,
-        theme,
-        value: value
-          .replace(/\b0px\b/g, '0')
-          .replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
+        fontFamily,
+        fontWeight,
+        fontSize: `${fontSizeRem}rem`,
+        lineHeight: `${lineHeightRem}rem`,
       }))
-      .reduce((preset, { name, theme, value }) => ({
+      .reduce((preset, { name, ...css }) => ({
         ...preset,
-        [!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
+        [name]: { css },
       }), {});
   },
 
@@ -97,4 +93,23 @@ module.exports = {
         [name]: value,
       }), {});
   },
+
+  parseBoxShadowTokens(designTokens) {
+    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)'),
+      }))
+      .reduce((preset, { name, theme, value }) => ({
+        ...preset,
+        [!theme || theme === 'light' ? name : `${name}-${theme}`]: value,
+      }), {});
+  },
 };

package/tailwind.config.preset.js

@@ -1,60 +1,49 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
 
 const {
-  parseColorTokens,
   parseSpacingTokens,
-  parseBoxShadowTokens,
+  parseColorTokens,
+  parseTypographyTokens,
   parseBorderRadiusTokens,
   parseBorderWidthTokens,
+  parseBoxShadowTokens,
 } = require('./tailwind-utils');
 
 const {
-  colors: colorTokens,
   SpacePatterns: spacingTokens,
-  Shadows: boxShadowTokens,
+  colors: colorTokens,
+  typeStyles: typographyTokens,
   BorderRadiuses: borderRadiusTokens,
   Borders: borderWidthTokens,
+  Shadows: boxShadowTokens,
 } = require('./src/variables/tokens/design-tokens-next.json');
 
 module.exports = {
   darkMode: 'class',
 
   theme: {
+    spacing: parseSpacingTokens(spacingTokens),
+
     backgroundColor: parseColorTokens(colorTokens, ['generic', 'background']),
     textColor: parseColorTokens(colorTokens, ['generic', 'text']),
     borderColor: parseColorTokens(colorTokens, ['generic']),
-    spacing: parseSpacingTokens(spacingTokens),
-    boxShadow: parseBoxShadowTokens(boxShadowTokens),
+
+    typography: parseTypographyTokens(typographyTokens),
+
     borderRadius: parseBorderRadiusTokens(borderRadiusTokens),
     borderWidth: parseBorderWidthTokens(borderWidthTokens),
-
+    boxShadow: parseBoxShadowTokens(boxShadowTokens),
+    fontFamily: false,
+    fontSize: false,
+    fontWeight: false,
     letterSpacing: false,
     lineHeight: false,
     opacity: false,
-
-    extend: {
-      fontFamily: {
-        'sans': ['Inter', ...defaultTheme.fontFamily.sans],
-        'inter': ['Inter', ...defaultTheme.fontFamily.sans],
-      },
-
-      fontSize: {
-        'xs': ['.75rem', '1.125rem'],
-        'sm': ['.875rem', '1.3125rem'],
-      },
-
-      zIndex: { // TODO: css vars
-        selectDropdown: 10, // TODO: move to the project level
-        overlayZIndex: 25, // ?
-        modal: 50,
-        headerPopup: 45, // modal - 5 // TODO: move to the project level
-        headerLoader: 40, // headerPopup - 5 // TODO: project level
-      },
-    },
   },
 
   plugins: [
+    require('@tailwindcss/typography'),
+
     plugin(({ addBase, addVariant, addUtilities, theme }) => {
       addBase({
         '@font-face': [
@@ -65,6 +54,7 @@ module.exports = {
             'font-display': 'swap',
             'src': 'url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2")',
           },
+
           {
             'font-family': '"Inter"',
             'font-style': 'normal',
@@ -72,6 +62,7 @@ module.exports = {
             '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',
@@ -79,6 +70,7 @@ module.exports = {
             'font-display': 'swap',
             'src': 'url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19") format("woff2")',
           },
+
           {
             'font-family': '"Inter"',
             'font-style': 'normal',
@@ -88,31 +80,8 @@ module.exports = {
           },
         ],
 
-        'body': {
-          fontSize: '0.875rem',
-          lineHeight: '1.3125rem',
-          color: 'rgb(var(--tw-c-on-background))',
-        },
-
-        // default - https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings
-        'h1': { // TODO: add
-          fontSize: theme('fontSize.2xl'),
-          fontWeight: theme('fontWeight.bold'),
-          lineHeight: '1.8125rem',
-        },
-        'h2': {
-          fontSize: theme('fontSize.2xl'),
-          fontWeight: theme('fontWeight.bold'),
-          lineHeight: '1.8125rem',
-        },
-        'h3': {
-          fontSize: theme('fontSize.xl'),
-          fontWeight: theme('fontWeight.bold'),
-          lineHeight: '1.5rem',
-        },
-        'h4': {
-          fontSize: theme('fontSize.base'),
-          fontWeight: theme('fontWeight.bold'),
+        ':root': {
+          ...theme('typography.body-1-regular.css'),
         },
       });