@onereach/styles 2.9.3-beta.649.0 → 2.9.3-beta.652.0

package/main.css

@@ -2,6 +2,4 @@
 @import "tailwindcss/components.css";
 @import "tailwindcss/utilities.css";
 
-@import "./theme.css";
-
 @import "./dist/index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.9.3-beta.649.0",
+  "version": "2.9.3-beta.652.0",
   "description": "Styles for or-ui-next",
   "main": "./main.css",
   "unpkg": "./main.css",

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

@@ -0,0 +1,577 @@
+{
+  "colors" : [
+    {
+      "name" : "white",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "black",
+      "value" : "rgba(0,0,0,1)"
+    },
+    {
+      "name" : "light-primary",
+      "value" : "rgba(0,95,177,1)"
+    },
+    {
+      "name" : "light-on-primary",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-primary-container",
+      "value" : "rgba(211,227,255,1)"
+    },
+    {
+      "name" : "light-on-primary-container",
+      "value" : "rgba(0,28,59,1)"
+    },
+    {
+      "name" : "light-secondary",
+      "value" : "rgba(84,95,113,1)"
+    },
+    {
+      "name" : "light-on-secondary",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-secondary-container",
+      "value" : "rgba(216,227,248,1)"
+    },
+    {
+      "name" : "light-on-secondary-container",
+      "value" : "rgba(18,28,43,1)"
+    },
+    {
+      "name" : "light-tertiary",
+      "value" : "rgba(109,86,118,1)"
+    },
+    {
+      "name" : "light-on-tertiary",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-tertiary-container",
+      "value" : "rgba(247,217,255,1)"
+    },
+    {
+      "name" : "light-on-tertiary-container",
+      "value" : "rgba(39,19,48,1)"
+    },
+    {
+      "name" : "light-error",
+      "value" : "rgba(186,27,27,1)"
+    },
+    {
+      "name" : "light-on-error",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-error-container",
+      "value" : "rgba(255,237,233,1)"
+    },
+    {
+      "name" : "light-on-error-container",
+      "value" : "rgba(147,0,6,1)"
+    },
+    {
+      "name" : "light-success",
+      "value" : "rgba(44,137,0,1)"
+    },
+    {
+      "name" : "light-on-success",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-success-container",
+      "value" : "rgba(204,255,170,1)"
+    },
+    {
+      "name" : "light-on-success-container",
+      "value" : "rgba(22,82,0,1)"
+    },
+    {
+      "name" : "light-warning",
+      "value" : "rgba(153,112,0,1)"
+    },
+    {
+      "name" : "light-on-warning",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-warning-container",
+      "value" : "rgba(255,239,209,1)"
+    },
+    {
+      "name" : "light-on-warning-container",
+      "value" : "rgba(92,66,0,1)"
+    },
+    {
+      "name" : "light-background",
+      "value" : "rgba(255,255,255,1)"
+    },
+    {
+      "name" : "light-on-background",
+      "value" : "rgba(27,27,29,1)"
+    },
+    {
+      "name" : "light-surface",
+      "value" : "rgba(253,251,255,1)"
+    },
+    {
+      "name" : "light-surface-1",
+      "value" : "rgba(240,243,251,1)"
+    },
+    {
+      "name" : "light-surface-2",
+      "value" : "rgba(240,243,251,1)"
+    },
+    {
+      "name" : "light-surface-3",
+      "value" : "rgba(225,234,246,1)"
+    },
+    {
+      "name" : "light-surface-4",
+      "value" : "rgba(223,232,246,1)"
+    },
+    {
+      "name" : "light-surface-5",
+      "value" : "rgba(218,229,244,1)"
+    },
+    {
+      "name" : "light-on-surface",
+      "value" : "rgba(27,27,29,1)"
+    },
+    {
+      "name" : "light-surface-variant",
+      "value" : "rgba(223,226,235,1)"
+    },
+    {
+      "name" : "light-on-surface-variant",
+      "value" : "rgba(67,71,78,1)"
+    },
+    {
+      "name" : "light-inverse-surface",
+      "value" : "rgba(47,48,51,1)"
+    },
+    {
+      "name" : "light-inverse-on-surface",
+      "value" : "rgba(241,240,244,1)"
+    },
+    {
+      "name" : "light-inverse-primary",
+      "value" : "rgba(164,200,255,1)"
+    },
+    {
+      "name" : "light-outline",
+      "value" : "rgba(116,119,127,1)"
+    },
+    {
+      "name" : "light-shadow",
+      "value" : "rgba(0,0,0,1)"
+    },
+    {
+      "name" : "light-disabled",
+      "value" : "rgba(27,27,29,0.3)"
+    },
+    {
+      "name" : "light-primary-opacity-0-08",
+      "value" : "rgba(0,95,177,0.08)"
+    },
+    {
+      "name" : "light-primary-opacity-0-12",
+      "value" : "rgba(0,95,177,0.12)"
+    },
+    {
+      "name" : "light-primary-opacity-0-16",
+      "value" : "rgba(0,95,177,0.16)"
+    },
+    {
+      "name" : "dark-primary",
+      "value" : "rgba(164,200,255,1)"
+    },
+    {
+      "name" : "dark-on-primary",
+      "value" : "rgba(0,48,95,1)"
+    },
+    {
+      "name" : "dark-primary-container",
+      "value" : "rgba(0,71,136,1)"
+    },
+    {
+      "name" : "dark-on-primary-container",
+      "value" : "rgba(211,227,255,1)"
+    },
+    {
+      "name" : "dark-secondary",
+      "value" : "rgba(188,199,220,1)"
+    },
+    {
+      "name" : "dark-on-secondary",
+      "value" : "rgba(38,49,65,1)"
+    },
+    {
+      "name" : "dark-secondary-container",
+      "value" : "rgba(61,71,88,1)"
+    },
+    {
+      "name" : "dark-on-secondary-container",
+      "value" : "rgba(216,227,248,1)"
+    },
+    {
+      "name" : "dark-tertiary",
+      "value" : "rgba(218,189,226,1)"
+    },
+    {
+      "name" : "dark-on-tertiary",
+      "value" : "rgba(61,40,70,1)"
+    },
+    {
+      "name" : "dark-tertiary-container",
+      "value" : "rgba(85,63,94,1)"
+    },
+    {
+      "name" : "dark-on-tertiary-container",
+      "value" : "rgba(247,217,255,1)"
+    },
+    {
+      "name" : "dark-error",
+      "value" : "rgba(255,180,169,1)"
+    },
+    {
+      "name" : "dark-on-error",
+      "value" : "rgba(104,0,3,1)"
+    },
+    {
+      "name" : "dark-error-container",
+      "value" : "rgba(147,0,6,1)"
+    },
+    {
+      "name" : "dark-on-error-container",
+      "value" : "rgba(255,218,212,1)"
+    },
+    {
+      "name" : "dark-success",
+      "value" : "rgba(108,224,54,1)"
+    },
+    {
+      "name" : "dark-on-success",
+      "value" : "rgba(12,57,0,1)"
+    },
+    {
+      "name" : "dark-success-container",
+      "value" : "rgba(22,82,0,1)"
+    },
+    {
+      "name" : "dark-on-success-container",
+      "value" : "rgba(136,253,82,1)"
+    },
+    {
+      "name" : "dark-warning",
+      "value" : "rgba(251,188,12,1)"
+    },
+    {
+      "name" : "dark-on-warning",
+      "value" : "rgba(64,45,0,1)"
+    },
+    {
+      "name" : "dark-warning-container",
+      "value" : "rgba(92,66,0,1)"
+    },
+    {
+      "name" : "dark-on-warning-container",
+      "value" : "rgba(255,223,156,1)"
+    },
+    {
+      "name" : "dark-background",
+      "value" : "rgba(27,27,29,1)"
+    },
+    {
+      "name" : "dark-on-background",
+      "value" : "rgba(227,226,230,1)"
+    },
+    {
+      "name" : "dark-surface",
+      "value" : "rgba(27,27,29,1)"
+    },
+    {
+      "name" : "dark-surface-1",
+      "value" : "rgba(34,36,40,1)"
+    },
+    {
+      "name" : "dark-surface-2",
+      "value" : "rgba(38,41,47,1)"
+    },
+    {
+      "name" : "dark-surface-3",
+      "value" : "rgba(42,46,54,1)"
+    },
+    {
+      "name" : "dark-surface-4",
+      "value" : "rgba(43,48,56,1)"
+    },
+    {
+      "name" : "dark-surface-5",
+      "value" : "rgba(46,51,61,1)"
+    },
+    {
+      "name" : "dark-on-surface",
+      "value" : "rgba(227,226,230,1)"
+    },
+    {
+      "name" : "dark-surface-variant",
+      "value" : "rgba(67,71,78,1)"
+    },
+    {
+      "name" : "dark-on-surface-variant",
+      "value" : "rgba(195,198,207,1)"
+    },
+    {
+      "name" : "dark-inverse-surface",
+      "value" : "rgba(227,226,230,1)"
+    },
+    {
+      "name" : "dark-inverse-on-surface",
+      "value" : "rgba(27,27,29,1)"
+    },
+    {
+      "name" : "dark-inverse-primary",
+      "value" : "rgba(0,95,177,1)"
+    },
+    {
+      "name" : "dark-outline",
+      "value" : "rgba(142,145,153,1)"
+    },
+    {
+      "name" : "dark-shadow",
+      "value" : "rgba(0,0,0,1)"
+    },
+    {
+      "name" : "dark-disabled",
+      "value" : "rgba(227,226,230,0.3)"
+    },
+    {
+      "name" : "dark-primary-opacity-0-08",
+      "value" : "rgba(164,200,255,0.08)"
+    },
+    {
+      "name" : "dark-primary-opacity-0-12",
+      "value" : "rgba(164,200,255,0.12)"
+    },
+    {
+      "name" : "dark-primary-opacity-0-16",
+      "value" : "rgba(164,200,255,0.16)"
+    }
+  ],
+  "Gradients" : [
+
+  ],
+  "Shadows" : [
+    {
+      "name" : "light-modal-shadow",
+      "value" : "0px 0px 1px 0px rgba(0,0,0,0.2), 0px 26px 80px 0px rgba(0,0,0,0.2)"
+    },
+    {
+      "name" : "light-contextual-menu",
+      "value" : "-1px 0px 20px 0px rgba(24,28,34,0.05), 0px 1px 5px 0px rgba(0,0,0,0.15)"
+    },
+    {
+      "name" : "light-card",
+      "value" : "0px 0px 5px 0px rgba(0,0,0,0.05), 0px 1px 2px 0px rgba(24,28,34,0.15)"
+    },
+    {
+      "name" : "light-button",
+      "value" : "inset 0px -1px 0px 0px rgba(0,0,0,0.1), 0px 0px 5px 0px rgba(0,0,0,0.05), 0px 1px 2px 0px rgba(24,28,34,0.15)"
+    },
+    {
+      "name" : "dark-contextual",
+      "value" : "0px 4px 4px 0px rgba(0,0,0,0.25), -1px 0px 20px 0px rgba(24,28,34,0.05), inset 0px 0px 1px 0px rgba(255,255,255,0.4)"
+    },
+    {
+      "name" : "dark-modal-shadow",
+      "value" : "0px 4px 4px 0px rgba(0,0,0,0.15), 0px 26px 80px 0px rgba(0,0,0,0.6), inset 0px 0px 1px 0px rgba(255,255,255,0.2)"
+    },
+    {
+      "name" : "dark-button",
+      "value" : "inset 0px -1px 0px 0px rgba(255,255,255,0.2), 0px 0px 5px 0px rgba(0,0,0,0.05), 0px 1px 2px 0px rgba(24,28,34,0.15)"
+    },
+    {
+      "name" : "dark-card",
+      "value" : "0px 0px 5px 0px rgba(0,0,0,0.3), 0px 1px 2px 0px rgba(24,28,34,0.6)"
+    }
+  ],
+  "Borders" : [
+    {
+      "name" : "solid-1",
+      "value" : "1px solid"
+    },
+    {
+      "name" : "solid-2",
+      "value" : "2px solid"
+    },
+    {
+      "name" : "dashed-1",
+      "value" : "1px dashed"
+    }
+  ],
+  "BorderRadiuses" : [
+    {
+      "name" : "radius-2",
+      "value" : "2px"
+    },
+    {
+      "name" : "radius-4",
+      "value" : "4px"
+    },
+    {
+      "name" : "radius-8",
+      "value" : "8px"
+    }
+  ],
+  "fonts" : [
+    {
+      "name" : "inter",
+      "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"
+    },
+    {
+      "name" : "headline-3",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "headline-4",
+      "fontFamily" : "Inter",
+      "fontSize" : "14px",
+      "lineHeight" : "21px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "button",
+      "fontFamily" : "Inter",
+      "fontSize" : "14px",
+      "lineHeight" : "20px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "body-1-regular",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "body-1-semibold",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "body-1-bold",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "body-2-regular",
+      "fontFamily" : "Inter",
+      "fontSize" : "14px",
+      "lineHeight" : "21px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "body-2-semibold",
+      "fontFamily" : "Inter",
+      "fontSize" : "14px",
+      "lineHeight" : "21px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "body-2-bold",
+      "fontFamily" : "Inter",
+      "fontSize" : "14px",
+      "lineHeight" : "21px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "caption-regular",
+      "fontFamily" : "Inter",
+      "fontSize" : "12px",
+      "lineHeight" : "18px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "caption-semibold",
+      "fontFamily" : "Inter",
+      "fontSize" : "12px",
+      "lineHeight" : "18px",
+      "letterSpacing" : "0px"
+    },
+    {
+      "name" : "caption-bold",
+      "fontFamily" : "Inter",
+      "fontSize" : "12px",
+      "lineHeight" : "18px",
+      "letterSpacing" : "0px"
+    }
+  ],
+  "SpacePatterns" : [
+    {
+      "name" : "none",
+      "value" : "0px"
+    },
+    {
+      "name" : "xx-small",
+      "value" : "2px"
+    },
+    {
+      "name" : "x-small",
+      "value" : "4px"
+    },
+    {
+      "name" : "small",
+      "value" : "8px"
+    },
+    {
+      "name" : "regular",
+      "value" : "16px"
+    },
+    {
+      "name" : "x-large",
+      "value" : "32px"
+    },
+    {
+      "name" : "xxx-large",
+      "value" : "64px"
+    },
+    {
+      "name" : "8-x",
+      "value" : "128px"
+    },
+    {
+      "name" : "large",
+      "value" : "24px"
+    },
+    {
+      "name" : "xx-large",
+      "value" : "48px"
+    }
+  ]
+}

package/tailwind.config.preset.js

@@ -1,87 +1,57 @@
-/** @type {import('tailwindcss').Config} */
-
 const defaultTheme = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
 
-module.exports = {
-  darkMode: ['class', '[data-theme="dark-mode"]'],
-  theme: {
-    colors: {
-      // Base Colors
-      'white': 'var(--or-color--white)',
-      'black': 'var(--or-color--black)',
-
-      // General Colors
-      'primary': 'var(--or-color--primary)',
-      'on-primary': 'var(--or-color--on-primary)',
-
-      'primary-container': 'var(--or-color--primary-container)',
-      'on-primary-container': 'var(--or-color--on-primary-container)',
-
-      'secondary': 'var(--or-color--secondary)',
-      'on-secondary': 'var(--or-color--on-secondary)',
-
-      'secondary-container': 'var(--or-color--secondary-container)',
-      'on-secondary-container': 'var(--or-color--on-secondary-container)',
-
-      'tertiary': 'var(--or-color--tertiary)',
-      'on-tertiary': 'var(--or-color--on-tertiary)',
-
-      'tertiary-container': 'var(--or-color--tertiary-container)',
-      'on-tertiary-container': 'var(--or-color--on-tertiary-container)',
-
-      'success': 'var(--or-color--success)',
-      'on-success': 'var(--or-color--on-success)',
-
-      'success-container': 'var(--or-color--success-container)',
-      'on-success-container': 'var(--or-color--on-success-container)',
-
-      'warning': 'var(--or-color--warning)',
-      'on-warning': 'var(--or-color--on-warning)',
-
-      'warning-container': 'var(--or-color--warning-container)',
-      'on-warning-container': 'var(--or-color--on-warning-container)',
-
-      'error': 'var(--or-color--error)',
-      'on-error': 'var(--or-color--on-error)',
-
-      'error-container': 'var(--or-color--error-container)',
-      'on-error-container': 'var(--or-color--on-error-container)',
-
-      'background': 'var(--or-color--background)',
-      'on-background': 'var(--or-color--on-background)',
-
-      'surface': 'var(--or-color--surface)',
-      'on-surface': 'var(--or-color--on-surface)',
-
-      'surface-variant': 'var(--or-color--surface-variant)',
-      'on-surface-variant': 'var(--or-color--on-surface-variant)',
-
-      'outline': 'var(--or-color--outline)',
-
-      'disabled': 'var(--or-color--disabled)',
+const {
+  colors: colorTokens,
+} = require('./src/variables/tokens/design-tokens-next.json');
+
+const parseColorTokens = (colorTokens) => {
+  return Object.values(colorTokens)
+    .map(({ name, value }) => {
+      const { groups } = name.match(/^(?:(?<mode>light|dark)-)?(?<name>.+)$/);
+
+      return {
+        name: groups.name,
+        mode: groups.mode,
+        value: value.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/g, 'rgba($1 $2 $3 / $4)'),
+      };
+    })
+    .reduce((preset, { name, mode, value }) => {
+      if (mode) {
+        return {
+          ...preset,
+          [name]: {
+            ...preset[name],
+            ...mode === 'light' && { DEFAULT: value },
+            [mode]: value,
+          },
+        };
+      }
+
+      return {
+        ...preset,
+        [name]: value,
+      };
+    }, {});
+};
 
-      // Extra Colors
-      'surface-1': 'var(--or-color--surface-1)',
-      'surface-2': 'var(--or-color--surface-2)',
-      'surface-3': 'var(--or-color--surface-3)',
-      'surface-4': 'var(--or-color--surface-4)',
-      'surface-5': 'var(--or-color--surface-5)',
+module.exports = {
+  darkMode: 'class',
 
-      'opacity-8': 'var(--or-color--opacity-8)',
-      'opacity-12': 'var(--or-color--opacity-12)',
-      'opacity-16': 'var(--or-color--opacity-16)',
-    },
+  theme: {
+    colors: parseColorTokens(colorTokens),
 
     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, // ?
@@ -91,8 +61,9 @@ module.exports = {
       },
     },
   },
+
   plugins: [
-    plugin(function ({ addBase, addVariant, addUtilities, theme }) {
+    plugin(({ addBase, addVariant, addUtilities, theme }) => {
       addBase({
         '@font-face': [
           {