@onereach/styles 2.37.4-beta.2590.0 → 2.37.5-beta.2594.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "2.37.4-beta.2590.0",
+  "version": "2.37.5-beta.2594.0",
   "description": "Styles for or-ui-next",
   "license": "UNLICENSED",
   "main": "./main.css",

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

@@ -551,6 +551,102 @@
     {
       "name" : "dark-primary-hover-opacity-0-96",
       "value" : "rgba(111,174,255,0.96)"
+    },
+    {
+      "name" : "light-custom-colors-custom-1",
+      "value" : "rgba(157,59,97,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-2",
+      "value" : "rgba(105,76,173,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-3",
+      "value" : "rgba(0,105,108,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-4",
+      "value" : "rgba(0,110,44,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-5",
+      "value" : "rgba(94,97,53,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-6",
+      "value" : "rgba(153,71,0,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-1-container",
+      "value" : "rgba(255,217,226,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-2-container",
+      "value" : "rgba(233,221,255,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-3-container",
+      "value" : "rgba(111,246,251,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-4-container",
+      "value" : "rgba(154,247,164,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-5-container",
+      "value" : "rgba(227,231,175,1)"
+    },
+    {
+      "name" : "light-custom-colors-custom-6-container",
+      "value" : "rgba(255,219,200,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-1",
+      "value" : "rgba(255,176,200,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-2",
+      "value" : "rgba(208,188,255,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-3",
+      "value" : "rgba(76,217,222,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-4",
+      "value" : "rgba(126,218,139,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-5",
+      "value" : "rgba(199,202,149,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-6",
+      "value" : "rgba(255,182,139,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-1-container",
+      "value" : "rgba(127,35,74,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-2-container",
+      "value" : "rgba(81,51,148,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-3-container",
+      "value" : "rgba(0,79,82,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-4-container",
+      "value" : "rgba(0,83,31,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-5-container",
+      "value" : "rgba(70,74,32,1)"
+    },
+    {
+      "name" : "dark-custom-colors-custom-6-container",
+      "value" : "rgba(117,52,0,1)"
     }
   ],
   "Gradients" : [
@@ -644,66 +740,6 @@
     }
   ],
   "typeStyles" : [
-    {
-      "name" : "display-large",
-      "fontFamily" : "Inter",
-      "fontSize" : "57px",
-      "lineHeight" : "64px",
-      "letterSpacing" : "-0.25px",
-      "fontWeight" : "400",
-      "fontSizeRem" : "3.5625",
-      "lineHeightRem" : "4"
-    },
-    {
-      "name" : "display-medium",
-      "fontFamily" : "Inter",
-      "fontSize" : "45px",
-      "lineHeight" : "52px",
-      "letterSpacing" : "0em",
-      "fontWeight" : "400",
-      "fontSizeRem" : "2.8125",
-      "lineHeightRem" : "3.25"
-    },
-    {
-      "name" : "display-small",
-      "fontFamily" : "Inter",
-      "fontSize" : "36px",
-      "lineHeight" : "44px",
-      "letterSpacing" : "0em",
-      "fontWeight" : "500",
-      "fontSizeRem" : "2.25",
-      "lineHeightRem" : "2.75"
-    },
-    {
-      "name" : "mobile-display-large",
-      "fontFamily" : "Inter",
-      "fontSize" : "36px",
-      "lineHeight" : "40px",
-      "letterSpacing" : "-0.25px",
-      "fontWeight" : "400",
-      "fontSizeRem" : "2.25",
-      "lineHeightRem" : "2.5"
-    },
-    {
-      "name" : "mobile-display-medium",
-      "fontFamily" : "Inter",
-      "fontSize" : "32px",
-      "lineHeight" : "36px",
-      "letterSpacing" : "0em",
-      "fontWeight" : "400",
-      "fontSizeRem" : "2",
-      "lineHeightRem" : "2.25"
-    },
-    {
-      "name" : "mobile-display-small",
-      "fontFamily" : "Inter",
-      "fontSize" : "28px",
-      "lineHeight" : "32px",
-      "letterSpacing" : "0em",
-      "fontWeight" : "500",
-      "fontSizeRem" : "1.75",
-      "lineHeightRem" : "2"
-    },
     {
       "name" : "headline-1",
       "fontFamily" : "Inter",
@@ -883,6 +919,166 @@
       "fontWeight" : "700",
       "fontSizeRem" : "1",
       "lineHeightRem" : "1.5"
+    },
+    {
+      "name" : "display-large",
+      "fontFamily" : "Inter",
+      "fontSize" : "57px",
+      "lineHeight" : "64px",
+      "letterSpacing" : "-0.25px",
+      "fontWeight" : "400",
+      "fontSizeRem" : "3.5625",
+      "lineHeightRem" : "4"
+    },
+    {
+      "name" : "display-medium",
+      "fontFamily" : "Inter",
+      "fontSize" : "45px",
+      "lineHeight" : "52px",
+      "letterSpacing" : "0em",
+      "fontWeight" : "400",
+      "fontSizeRem" : "2.8125",
+      "lineHeightRem" : "3.25"
+    },
+    {
+      "name" : "display-small",
+      "fontFamily" : "Inter",
+      "fontSize" : "36px",
+      "lineHeight" : "44px",
+      "letterSpacing" : "0em",
+      "fontWeight" : "500",
+      "fontSizeRem" : "2.25",
+      "lineHeightRem" : "2.75"
+    },
+    {
+      "name" : "mobile-display-large",
+      "fontFamily" : "Inter",
+      "fontSize" : "36px",
+      "lineHeight" : "40px",
+      "letterSpacing" : "-0.25px",
+      "fontWeight" : "400",
+      "fontSizeRem" : "2.25",
+      "lineHeightRem" : "2.5"
+    },
+    {
+      "name" : "mobile-display-medium",
+      "fontFamily" : "Inter",
+      "fontSize" : "32px",
+      "lineHeight" : "36px",
+      "letterSpacing" : "0em",
+      "fontWeight" : "400",
+      "fontSizeRem" : "2",
+      "lineHeightRem" : "2.25"
+    },
+    {
+      "name" : "mobile-display-small",
+      "fontFamily" : "Inter",
+      "fontSize" : "28px",
+      "lineHeight" : "32px",
+      "letterSpacing" : "0em",
+      "fontWeight" : "500",
+      "fontSizeRem" : "1.75",
+      "lineHeightRem" : "2"
+    },
+    {
+      "name" : "mobile-headline-1",
+      "fontFamily" : "Inter",
+      "fontSize" : "24px",
+      "lineHeight" : "29px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "700",
+      "fontSizeRem" : "1.5",
+      "lineHeightRem" : "1.8125"
+    },
+    {
+      "name" : "mobile-headline-2",
+      "fontFamily" : "Inter",
+      "fontSize" : "20px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "700",
+      "fontSizeRem" : "1.25",
+      "lineHeightRem" : "1.5"
+    },
+    {
+      "name" : "mobile-headline-3",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "700",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
+    },
+    {
+      "name" : "mobile-headline-4",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "700",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
+    },
+    {
+      "name" : "mobile-body-1-bold",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "700",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
+    },
+    {
+      "name" : "mobile-body-1-semibold",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "600",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
+    },
+    {
+      "name" : "mobile-caption-regular",
+      "fontFamily" : "Inter",
+      "fontSize" : "12px",
+      "lineHeight" : "18px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "400",
+      "fontSizeRem" : "0.75",
+      "lineHeightRem" : "1.125"
+    },
+    {
+      "name" : "mobile-caption-semibold",
+      "fontFamily" : "Inter",
+      "fontSize" : "12px",
+      "lineHeight" : "18px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "600",
+      "fontSizeRem" : "0.75",
+      "lineHeightRem" : "1.125"
+    },
+    {
+      "name" : "mobile-caption-bold",
+      "fontFamily" : "Inter",
+      "fontSize" : "12px",
+      "lineHeight" : "18px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "700",
+      "fontSizeRem" : "0.75",
+      "lineHeightRem" : "1.125"
+    },
+    {
+      "name" : "mobile-body-1-regular",
+      "fontFamily" : "Inter",
+      "fontSize" : "16px",
+      "lineHeight" : "24px",
+      "letterSpacing" : "0px",
+      "fontWeight" : "400",
+      "fontSizeRem" : "1",
+      "lineHeightRem" : "1.5"
     }
   ],
   "SpacePatterns" : [

package/tailwind.config.preset.js

@@ -37,37 +37,32 @@ module.exports = {
       ...parseSpacingTokens(spacingTokens),
     },
 
-    textColor: {
-      ...parseColorTokens(colorTokens, ['generic', 'text']),
-      'transparent': 'transparent',
-      'current': 'currentColor',
-      'inherit': 'inherit',
-    },
-
     backgroundColor: {
       // Avoid using `text` colors as a background (only for corner cases)
       ...parseColorTokens(colorTokens, ['generic', 'background', 'text']),
       'transparent': 'transparent',
-      'current': 'currentColor',
-      'inherit': 'inherit',
     },
 
     backgroundImage: {
-      ...parseColorTokens(gradientTokens, ['generic']),
+      ...parseColorTokens(gradientTokens, ['generic', 'background']),
+    },
+
+    textColor: {
+      ...parseColorTokens(colorTokens, ['generic', 'text']),
+      'transparent': 'transparent',
+      'inherit': 'inherit',
     },
 
     borderColor: {
       ...parseColorTokens(colorTokens, ['generic']),
       'transparent': 'transparent',
       'current': 'currentColor',
-      'inherit': 'inherit',
     },
 
     outlineColor: {
       ...parseColorTokens(colorTokens, ['generic']),
       'transparent': 'transparent',
       'current': 'currentColor',
-      'inherit': 'inherit',
     },
 
     fill: {
@@ -88,7 +83,7 @@ module.exports = {
     animation: {
       'circular-loader': 'circular-loader 1400ms linear infinite',
       'linear-loader': 'linear-loader 1400ms linear infinite',
-      'skeleton-loader': 'skeleton-loader 1400ms linear infinite',
+      'skeleton-loader': 'skeleton-loader 1.5s linear 0s infinite normal forwards',
     },
 
     keyframes: {
@@ -120,7 +115,8 @@ module.exports = {
 
         '100%': {
           strokeDasharray: '25%, 100%',
-          strokeDashoffset: 'calc((100% - 0px) * -2.5)', // Workaround for Safari
+          // calc added here only for safari support
+          strokeDashoffset: 'calc((100% - 0px) * -2.5)',
         },
       },
 
@@ -147,7 +143,7 @@ module.exports = {
     },
 
     boxShadow: {
-      'none': '0 0 #00000000',
+      'none': '0 0 #0000',
       ...parseBoxShadowTokens(boxShadowTokens),
       DEFAULT: '0 1px 1px rgba(0 0 0 / 0.24), 0 0 1px rgba(0 0 0 / 0.16)',
     },
@@ -247,7 +243,7 @@ module.exports = {
 
           return {
             display: prefix + 'flex',
-            flexFlow: `${direction} nowrap`,
+            flexDirection: direction,
             flex: prefix === 'inline-' ? '0 0 auto' : undefined,
             alignItems: direction === 'row' ? 'center' : undefined,
           };
@@ -350,10 +346,10 @@ module.exports = {
         }),
       }, {
         values: {
-          'outlined': '"opsz" 48, "wght" 400, "FILL" 0, "GRAD" 0',
+          'outlined': '"opsz" 24, "wght" 400, "FILL" 0, "GRAD" 0',
           'outlined-bold': '"opsz" 24, "wght" 700, "FILL" 0, "GRAD" 0',
 
-          'filled': '"opsz" 48, "wght" 400, "FILL" 1, "GRAD" 0',
+          'filled': '"opsz" 24, "wght" 400, "FILL" 1, "GRAD" 0',
           'filled-bold': '"opsz" 24, "wght" 700, "FILL" 1, "GRAD" 0',
 
           'inherit': 'inherit',
@@ -369,15 +365,15 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            color: theme(`textColor.on-${token}` + suffix),
             backgroundColor: theme(`backgroundColor.${token}` + suffix),
+            color: theme(`textColor.on-${token}` + suffix),
 
             borderStyle: 'none',
             outlineStyle: 'none',
 
             '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
               backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+              color: `${theme('textColor.on-disabled' + suffix)} !important`,
             },
 
             '&:not(.interactivity-none)': {
@@ -400,15 +396,15 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            color: theme(`textColor.${token}` + suffix),
             backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
+            color: theme(`textColor.${token}` + suffix),
 
             borderStyle: 'none',
             outlineStyle: 'none',
 
             '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
               backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+              color: `${theme('textColor.on-disabled' + suffix)} !important`,
             },
 
             '&:not(.interactivity-none)': {
@@ -431,15 +427,15 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            color: theme(`textColor.${token}` + suffix),
             backgroundColor: 'transparent',
+            color: theme(`textColor.${token}` + suffix),
 
             borderStyle: 'none',
             outlineStyle: 'none',
 
             '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
               backgroundColor: 'transparent !important',
+              color: `${theme('textColor.on-disabled' + suffix)} !important`,
             },
 
             '&:not(.interactivity-none)': {
@@ -462,15 +458,15 @@ module.exports = {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            color: theme(`textColor.${token}` + suffix),
             backgroundColor: 'transparent',
+            color: theme(`textColor.${token}` + suffix),
 
             borderStyle: 'none',
             outlineStyle: 'none',
 
             '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
               backgroundColor: 'transparent !important',
+              color: `${theme('textColor.on-disabled' + suffix)} !important`,
             },
 
             '&:not(.interactivity-none)': {
@@ -510,32 +506,26 @@ module.exports = {
         },
       });
 
-      // Foregrounds
+      // Backgrounds
       matchUtilities({
-        'theme-foreground': (value) => {
+        'theme-background': (value) => {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            color: theme(`textColor.${token}` + suffix, token),
+            backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
 
             '&[disabled]': {
-              color: `${theme('textColor.on-disabled' + suffix)} !important`,
+              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
             },
           };
         },
       }, {
         values: {
-          'default': 'on-background',
-          'default-dark': 'on-background..-dark',
-
-          'disabled': 'on-disabled',
-          'disabled-dark': 'on-disabled..-dark',
-
-          'outline': 'outline',
-          'outline-dark': 'outline..-dark',
+          'default': 'background',
+          'default-dark': 'background..-dark',
 
-          'outline-variant': 'outline-variant',
-          'outline-variant-dark': 'outline-variant..-dark',
+          'disabled': 'disabled',
+          'disabled-dark': 'disabled..-dark',
 
           'primary': 'primary',
           'primary-dark': 'primary..-dark',
@@ -573,100 +563,97 @@ module.exports = {
           'error-hover': 'error-hover',
           'error-hover-dark': 'error-hover..-dark',
 
-          'primary-inverse': 'primary-inverse',
-          'primary-inverse-dark': 'primary-inverse..-dark',
+          'primary-opacity': 'primary-opacity-0-08',
+          'primary-opacity-dark': 'primary-opacity-0-08..-dark',
 
-          // 'secondary-inverse': 'secondary-inverse',
-          // 'secondary-inverse-dark': 'secondary-inverse..-dark',
+          // 'secondary-opacity': 'secondary-opacity-0-08',
+          // 'secondary-opacity-dark': 'secondary-opacity-0-08..-dark',
 
-          // 'tertiary-inverse': 'tertiary-inverse',
-          // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
+          // 'tertiary-opacity': 'tertiary-opacity-0-08',
+          // 'tertiary-opacity-dark': 'tertiary-opacity-0-08..-dark',
 
-          // 'success-inverse': 'success-inverse',
-          // 'success-inverse-dark': 'success-inverse..-dark',
-
-          // 'warning-inverse': 'warning-inverse',
-          // 'warning-inverse-dark': 'warning-inverse..-dark',
+          'success-opacity': 'success-opacity-0-08',
+          'success-opacity-dark': 'success-opacity-0-08..-dark',
 
-          // 'error-inverse': 'error-inverse',
-          // 'error-inverse-dark': 'error-inverse..-dark',
+          'warning-opacity': 'warning-opacity-0-08',
+          'warning-opacity-dark': 'warning-opacity-0-08..-dark',
 
-          'on-primary': 'on-primary',
-          'on-primary-dark': 'on-primary..-dark',
+          'error-opacity': 'error-opacity-0-08',
+          'error-opacity-dark': 'error-opacity-0-08..-dark',
 
-          'on-secondary': 'on-secondary',
-          'on-secondary-dark': 'on-secondary..-dark',
+          'primary-container': 'primary-container',
+          'primary-container-dark': 'primary-container..-dark',
 
-          'on-tertiary': 'on-tertiary',
-          'on-tertiary-dark': 'on-tertiary..-dark',
+          'secondary-container': 'secondary-container',
+          'secondary-container-dark': 'secondary-container..-dark',
 
-          'on-success': 'on-success',
-          'on-success-dark': 'on-success..-dark',
+          'tertiary-container': 'tertiary-container',
+          'tertiary-container-dark': 'tertiary-container..-dark',
 
-          'on-warning': 'on-warning',
-          'on-warning-dark': 'on-warning..-dark',
+          'success-container': 'success-container',
+          'success-container-dark': 'success-container..-dark',
 
-          'on-error': 'on-error',
-          'on-error-dark': 'on-error..-dark',
+          'warning-container': 'warning-container',
+          'warning-container-dark': 'warning-container..-dark',
 
-          'on-primary-container': 'on-primary-container',
-          'on-primary-container-dark': 'on-primary-container..-dark',
+          'error-container': 'error-container',
+          'error-container-dark': 'error-container..-dark',
 
-          'on-secondary-container': 'on-secondary-container',
-          'on-secondary-container-dark': 'on-secondary-container..-dark',
+          'surface': 'surface',
+          'surface-dark': 'surface..-dark',
 
-          'on-tertiary-container': 'on-tertiary-container',
-          'on-tertiary-container-dark': 'on-tertiary-container..-dark',
+          'surface-1': 'surface-1',
+          'surface-1-dark': 'surface-1..-dark',
 
-          'on-success-container': 'on-success-container',
-          'on-success-container-dark': 'on-success-container..-dark',
+          'surface-2': 'surface-2',
+          'surface-2-dark': 'surface-2..-dark',
 
-          'on-warning-container': 'on-warning-container',
-          'on-warning-container-dark': 'on-warning-container..-dark',
+          'surface-3': 'surface-3',
+          'surface-3-dark': 'surface-3..-dark',
 
-          'on-error-container': 'on-error-container',
-          'on-error-container-dark': 'on-error-container..-dark',
+          'surface-4': 'surface-4',
+          'surface-4-dark': 'surface-4..-dark',
 
-          'on-surface': 'on-surface',
-          'on-surface-dark': 'on-surface..-dark',
+          'surface-5': 'surface-5',
+          'surface-5-dark': 'surface-5..-dark',
 
-          'on-surface-variant': 'on-surface-variant',
-          'on-surface-variant-dark': 'on-surface-variant..-dark',
+          'surface-variant': 'surface-variant',
+          'surface-variant-dark': 'surface-variant..-dark',
 
-          'on-surface-inverse': 'inverse-on-surface',
-          'on-surface-inverse-dark': 'inverse-on-surface..-dark',
+          'surface-inverse': 'inverse-surface',
+          'surface-inverse-dark': 'inverse-surface..-dark',
 
           'transparent': 'transparent',
           'transparent-dark': 'transparent..-dark',
-
-          'current': 'current',
-          'current-dark': 'current..-dark',
-
-          'inherit': 'inherit',
-          'inherit-dark': 'inherit..-dark',
         },
       });
 
-      // Backgrounds
+      // Foregrounds
       matchUtilities({
-        'theme-background': (value) => {
+        'theme-foreground': (value) => {
           const [token, suffix = ''] = value.split('..');
 
           return {
-            backgroundColor: theme(`backgroundColor.${token}` + suffix, token),
+            color: theme(`textColor.${token}` + suffix, token),
 
             '&[disabled]': {
-              backgroundColor: `${theme('backgroundColor.disabled' + suffix)} !important`,
+              color: `${theme('textColor.on-disabled' + suffix)} !important`,
             },
           };
         },
       }, {
         values: {
-          'default': 'background',
-          'default-dark': 'background..-dark',
+          'default': 'on-background',
+          'default-dark': 'on-background..-dark',
 
-          'disabled': 'disabled',
-          'disabled-dark': 'disabled..-dark',
+          'disabled': 'on-disabled',
+          'disabled-dark': 'on-disabled..-dark',
+
+          'outline': 'outline',
+          'outline-dark': 'outline..-dark',
+
+          'outline-variant': 'outline-variant',
+          'outline-variant-dark': 'outline-variant..-dark',
 
           'primary': 'primary',
           'primary-dark': 'primary..-dark',
@@ -704,72 +691,72 @@ module.exports = {
           'error-hover': 'error-hover',
           'error-hover-dark': 'error-hover..-dark',
 
-          'primary-translucent': 'primary-opacity-0-08',
-          'primary-translucent-dark': 'primary-opacity-0-08..-dark',
+          'primary-inverse': 'primary-inverse',
+          'primary-inverse-dark': 'primary-inverse..-dark',
 
-          // 'secondary-translucent': 'secondary-opacity-0-08',
-          // 'secondary-translucent-dark': 'secondary-opacity-0-08..-dark',
+          // 'secondary-inverse': 'secondary-inverse',
+          // 'secondary-inverse-dark': 'secondary-inverse..-dark',
 
-          // 'tertiary-translucent': 'tertiary-opacity-0-08',
-          // 'tertiary-translucent-dark': 'tertiary-opacity-0-08..-dark',
+          // 'tertiary-inverse': 'tertiary-inverse',
+          // 'tertiary-inverse-dark': 'tertiary-inverse..-dark',
 
-          'success-translucent': 'success-opacity-0-08',
-          'success-translucent-dark': 'success-opacity-0-08..-dark',
+          // 'success-inverse': 'success-inverse',
+          // 'success-inverse-dark': 'success-inverse..-dark',
 
-          'warning-translucent': 'warning-opacity-0-08',
-          'warning-translucent-dark': 'warning-opacity-0-08..-dark',
+          // 'warning-inverse': 'warning-inverse',
+          // 'warning-inverse-dark': 'warning-inverse..-dark',
 
-          'error-translucent': 'error-opacity-0-08',
-          'error-translucent-dark': 'error-opacity-0-08..-dark',
+          // 'error-inverse': 'error-inverse',
+          // 'error-inverse-dark': 'error-inverse..-dark',
 
-          'primary-container': 'primary-container',
-          'primary-container-dark': 'primary-container..-dark',
+          'on-primary': 'on-primary',
+          'on-primary-dark': 'on-primary..-dark',
 
-          'secondary-container': 'secondary-container',
-          'secondary-container-dark': 'secondary-container..-dark',
+          'on-secondary': 'on-secondary',
+          'on-secondary-dark': 'on-secondary..-dark',
 
-          'tertiary-container': 'tertiary-container',
-          'tertiary-container-dark': 'tertiary-container..-dark',
+          'on-tertiary': 'on-tertiary',
+          'on-tertiary-dark': 'on-tertiary..-dark',
 
-          'success-container': 'success-container',
-          'success-container-dark': 'success-container..-dark',
+          'on-success': 'on-success',
+          'on-success-dark': 'on-success..-dark',
 
-          'warning-container': 'warning-container',
-          'warning-container-dark': 'warning-container..-dark',
+          'on-warning': 'on-warning',
+          'on-warning-dark': 'on-warning..-dark',
 
-          'error-container': 'error-container',
-          'error-container-dark': 'error-container..-dark',
+          'on-error': 'on-error',
+          'on-error-dark': 'on-error..-dark',
 
-          'surface': 'surface',
-          'surface-dark': 'surface..-dark',
+          'on-primary-container': 'on-primary-container',
+          'on-primary-container-dark': 'on-primary-container..-dark',
 
-          'surface-1': 'surface-1',
-          'surface-1-dark': 'surface-1..-dark',
+          'on-secondary-container': 'on-secondary-container',
+          'on-secondary-container-dark': 'on-secondary-container..-dark',
 
-          'surface-2': 'surface-2',
-          'surface-2-dark': 'surface-2..-dark',
+          'on-tertiary-container': 'on-tertiary-container',
+          'on-tertiary-container-dark': 'on-tertiary-container..-dark',
 
-          'surface-3': 'surface-3',
-          'surface-3-dark': 'surface-3..-dark',
+          'on-success-container': 'on-success-container',
+          'on-success-container-dark': 'on-success-container..-dark',
 
-          'surface-4': 'surface-4',
-          'surface-4-dark': 'surface-4..-dark',
+          'on-warning-container': 'on-warning-container',
+          'on-warning-container-dark': 'on-warning-container..-dark',
 
-          'surface-5': 'surface-5',
-          'surface-5-dark': 'surface-5..-dark',
+          'on-error-container': 'on-error-container',
+          'on-error-container-dark': 'on-error-container..-dark',
 
-          'surface-variant': 'surface-variant',
-          'surface-variant-dark': 'surface-variant..-dark',
+          'on-surface': 'on-surface',
+          'on-surface-dark': 'on-surface..-dark',
 
-          'surface-inverse': 'inverse-surface',
-          'surface-inverse-dark': 'inverse-surface..-dark',
+          'on-surface-variant': 'on-surface-variant',
+          'on-surface-variant-dark': 'on-surface-variant..-dark',
+
+          'on-surface-inverse': 'inverse-on-surface',
+          'on-surface-inverse-dark': 'inverse-on-surface..-dark',
 
           'transparent': 'transparent',
           'transparent-dark': 'transparent..-dark',
 
-          'current': 'current',
-          'current-dark': 'current..-dark',
-
           'inherit': 'inherit',
           'inherit-dark': 'inherit..-dark',
         },
@@ -816,32 +803,11 @@ module.exports = {
           'error': 'error',
           'error-dark': 'error..-dark',
 
-          'primary-translucent': 'primary-opacity-0-16',
-          'primary-translucent-dark': 'primary-opacity-0-16..-dark',
-
-          // 'secondary-translucent': 'secondary-opacity-0-16',
-          // 'secondary-translucent-dark': 'secondary-opacity-0-16..-dark',
-
-          // 'tertiary-translucent': 'tertiary-opacity-0-16',
-          // 'tertiary-translucent-dark': 'tertiary-opacity-0-16..-dark',
-
-          'success-translucent': 'success-opacity-0-16',
-          'success-translucent-dark': 'success-opacity-0-16..-dark',
-
-          'warning-translucent': 'warning-opacity-0-16',
-          'warning-translucent-dark': 'warning-opacity-0-16..-dark',
-
-          'error-translucent': 'error-opacity-0-16',
-          'error-translucent-dark': 'error-opacity-0-16..-dark',
-
           'transparent': 'transparent',
           'transparent-dark': 'transparent..-dark',
 
           'current': 'current',
           'current-dark': 'current..-dark',
-
-          'inherit': 'inherit',
-          'inherit-dark': 'inherit..-dark',
         },
       });
 
@@ -885,96 +851,24 @@ module.exports = {
           'error': 'error',
           'error-dark': 'error..-dark',
 
-          'primary-translucent': 'primary-opacity-0-16',
-          'primary-translucent-dark': 'primary-opacity-0-16..-dark',
-
-          // 'secondary-translucent': 'secondary-opacity-0-16',
-          // 'secondary-translucent-dark': 'secondary-opacity-0-16..-dark',
-
-          // 'tertiary-translucent': 'tertiary-opacity-0-16',
-          // 'tertiary-translucent-dark': 'tertiary-opacity-0-16..-dark',
-
-          'success-translucent': 'success-opacity-0-16',
-          'success-translucent-dark': 'success-opacity-0-16..-dark',
-
-          'warning-translucent': 'warning-opacity-0-16',
-          'warning-translucent-dark': 'warning-opacity-0-16..-dark',
-
-          'error-translucent': 'error-opacity-0-16',
-          'error-translucent-dark': 'error-opacity-0-16..-dark',
-
           'transparent': 'transparent',
           'transparent-dark': 'transparent..-dark',
 
           'current': 'current',
           'current-dark': 'current..-dark',
-
-          'inherit': 'inherit',
-          'inherit-dark': 'inherit..-dark',
         },
       });
 
       addUtilities({
-        '.theme-border-overline': {
-          borderStyle: 'none !important',
-          borderTopStyle: 'solid !important',
-        },
-
         '.theme-border-underline': {
-          borderStyle: 'none !important',
-          borderBottomStyle: 'solid !important',
+          borderStyle: 'none',
+          borderBottomStyle: 'solid',
         },
       });
 
       // Outlines
       matchUtilities({
-        'theme-outline-1': (value) => {
-          const [token, suffix = ''] = value.split('..');
-
-          return {
-            // In Safari outline doesn't follow current border-radius
-            // It seems like this is already fixed in Safari Technology Preview (Release 157)
-            // Stay tuned for Safari updates
-            boxShadow: `0 0 0 1px ${theme(`outlineColor.${token}-opacity-0-16` + suffix, token)}`,
-            // outlineOffset: '0',
-            // outlineWidth: theme('outlineWidth.2'),
-            // outlineStyle: 'solid',
-            // outlineColor: theme(`outlineColor.${token}-opacity-0-16` + suffix, token),
-          };
-        },
-      }, {
-        values: {
-          'primary': 'primary',
-          'primary-dark': 'primary..-dark',
-
-          'secondary': 'secondary',
-          'secondary-dark': 'secondary..-dark',
-
-          'tertiary': 'tertiary',
-          'tertiary-dark': 'tertiary..-dark',
-
-          'success': 'success',
-          'success-dark': 'success..-dark',
-
-          'warning': 'warning',
-          'warning-dark': 'warning..-dark',
-
-          'error': 'error',
-          'error-dark': 'error..-dark',
-
-          'transparent': 'transparent',
-          'transparent-dark': 'transparent..-dark',
-
-          'current': 'current',
-          'current-dark': 'current..-dark',
-
-          'inherit': 'inherit',
-          'inherit-dark': 'inherit..-dark',
-        },
-      });
-
-      matchUtilities({
-        'theme-outline-2': (value) => {
+        'theme-outline': (value) => {
           const [token, suffix = ''] = value.split('..');
 
           return {
@@ -1013,9 +907,6 @@ module.exports = {
 
           'current': 'current',
           'current-dark': 'current..-dark',
-
-          'inherit': 'inherit',
-          'inherit-dark': 'inherit..-dark',
         },
       });
     }),

package/tokens.css

@@ -71,6 +71,18 @@
 	--or-c-primary-hover-opacity-0-64: rgba(0,119,220,0.64);
 	--or-c-primary-hover-opacity-0-80: rgba(0,119,220,0.8);
 	--or-c-primary-hover-opacity-0-96: rgba(0,119,220,0.96);
+	--or-c-custom-colors-custom-1: rgba(157,59,97,1);
+	--or-c-custom-colors-custom-2: rgba(105,76,173,1);
+	--or-c-custom-colors-custom-3: rgba(0,105,108,1);
+	--or-c-custom-colors-custom-4: rgba(0,110,44,1);
+	--or-c-custom-colors-custom-5: rgba(94,97,53,1);
+	--or-c-custom-colors-custom-6: rgba(153,71,0,1);
+	--or-c-custom-colors-custom-1-container: rgba(255,217,226,1);
+	--or-c-custom-colors-custom-2-container: rgba(233,221,255,1);
+	--or-c-custom-colors-custom-3-container: rgba(111,246,251,1);
+	--or-c-custom-colors-custom-4-container: rgba(154,247,164,1);
+	--or-c-custom-colors-custom-5-container: rgba(227,231,175,1);
+	--or-c-custom-colors-custom-6-container: rgba(255,219,200,1);
 }
 [data-theme="dark-mode"], [data-theme="dark"] {
 	--or-c-primary: rgba(164,200,255,1);
@@ -141,4 +153,16 @@
 	--or-c-primary-hover-opacity-0-64: rgba(111,174,255,0.64);
 	--or-c-primary-hover-opacity-0-80: rgba(111,174,255,0.8);
 	--or-c-primary-hover-opacity-0-96: rgba(111,174,255,0.96);
+	--or-c-custom-colors-custom-1: rgba(255,176,200,1);
+	--or-c-custom-colors-custom-2: rgba(208,188,255,1);
+	--or-c-custom-colors-custom-3: rgba(76,217,222,1);
+	--or-c-custom-colors-custom-4: rgba(126,218,139,1);
+	--or-c-custom-colors-custom-5: rgba(199,202,149,1);
+	--or-c-custom-colors-custom-6: rgba(255,182,139,1);
+	--or-c-custom-colors-custom-1-container: rgba(127,35,74,1);
+	--or-c-custom-colors-custom-2-container: rgba(81,51,148,1);
+	--or-c-custom-colors-custom-3-container: rgba(0,79,82,1);
+	--or-c-custom-colors-custom-4-container: rgba(0,83,31,1);
+	--or-c-custom-colors-custom-5-container: rgba(70,74,32,1);
+	--or-c-custom-colors-custom-6-container: rgba(117,52,0,1);
 }