@pingux/astro 2.173.0 → 2.174.0-alpha.0

package/lib/cjs/styles/themes/next-gen/variants/avatar.js

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.avatar = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _sizes = _interopRequireDefault(require("../sizes"));
 var avatar = exports.avatar = {
   cursor: 'pointer',
@@ -96,7 +97,7 @@ var avatar = exports.avatar = {
   '&.is-logo': {
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: 'gray-200',
+    borderColor: _onyxTokens.astroTokens.color.gray[200],
     backgroundColor: 'transparent',
     '&.size-sm': {
       img: {

package/lib/cjs/styles/themes/next-gen/variants/badges.js

@@ -14,12 +14,14 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.badges = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _button = _interopRequireDefault(require("./button"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var badgeFont = {
-  fontSize: 'tiny',
-  fontWeight: '2'
+  fontSize: _onyxTokens.astroTokens.size.badge,
+  // @ts-expect-error - font-weight is in default tokens but not in the type definition
+  fontWeight: _onyxTokens.astroTokens["default"]['font-weight'].badge
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -45,8 +47,8 @@ var badgeIconStyle = {
 var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
-  py: '.25em',
-  px: '.34em',
+  py: _onyxTokens.astroTokens.spacing.badge['padding-y'],
+  px: _onyxTokens.astroTokens.spacing.badge['padding-x'],
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
@@ -58,11 +60,11 @@ var baseBadge = _objectSpread({
 }, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
-  color: 'blue-600'
+  color: _onyxTokens.astroTokens.color.blue[600]
 });
 var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#f6f8fa !important',
-  color: 'gray-900'
+  color: _onyxTokens.astroTokens.color.gray[900]
 });
 var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#D3EDDF !important',
@@ -70,11 +72,11 @@ var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
 });
 var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#F8D8D5 !important',
-  color: 'red-700'
+  color: _onyxTokens.astroTokens.color.red[700]
 });
 var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#FFF1DA !important',
-  color: 'yellow-800'
+  color: _onyxTokens.astroTokens.color.yellow[800]
 });
 var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'black !important',

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -14,18 +14,13 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.defaultFocus = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _codeView = require("../codeView/codeView");
-var _colors = _interopRequireDefault(require("../colors/colors"));
 var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
 var _box = require("./box");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var primaryBlue = _colors["default"].primary,
-  primaryBlueHover = _colors["default"].active_hover,
-  primaryBluePress = _colors["default"].active_pressed,
-  criticalRedHover = _colors["default"].critical_hover,
-  criticalRedPress = _colors["default"].critical_pressed;
 var transitions = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out'
 };
@@ -66,8 +61,8 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   borderRadius: '1.75rem',
   border: '1px solid',
   borderColor: 'border.base',
-  px: '20px',
-  py: '12px',
+  px: _onyxTokens.astroTokens.spacing.button['padding-x'],
+  py: _onyxTokens.astroTokens.spacing.button['padding-y'],
   maxHeight: '48.5px',
   height: '48.5px',
   '&.is-disabled': {
@@ -91,34 +86,34 @@ var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'primary',
   borderColor: 'primary',
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlueHover,
-    borderColor: primaryBlueHover
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.hover.bg,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.hover.border
   }, boxShadowNone),
   '&.is-focused': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press,
     outline: '2px solid'
   }
 });
 var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
-  borderColor: 'primary',
-  color: 'primary',
+  borderColor: _onyxTokens.astroTokens.color.primary,
+  color: _onyxTokens.astroTokens.color.primary,
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press,
     color: 'white',
     path: {
       fill: 'white'
     }
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlue,
-    borderColor: primaryBlue,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.hover.bg,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.hover.border,
     color: 'white',
     path: {
       fill: 'white'
@@ -128,18 +123,18 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
   borderColor: 'border.base',
-  color: 'font.base',
+  color: _onyxTokens.astroTokens.color.font.base,
   '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     outlineColor: 'gray-700',
     backgroundColor: 'backgroundSecondary'
   }),
   '&.is-pressed': {
     backgroundColor: 'backgroundSecondary',
-    color: 'font.base'
+    color: _onyxTokens.astroTokens.color.font.base
   },
   '&.is-hovered': _objectSpread({
     backgroundColor: 'backgroundSecondary',
-    color: 'font.base'
+    color: _onyxTokens.astroTokens.color.font.base
   }, boxShadowNone)
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -165,12 +160,12 @@ var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
     backgroundColor: 'critical.dark'
   }),
   '&.is-pressed': {
-    backgroundColor: criticalRedPress,
-    borderColor: criticalRedPress
+    backgroundColor: _onyxTokens.astroTokens.color.button.critical.press,
+    borderColor: _onyxTokens.astroTokens.color.button.critical.press
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: criticalRedHover,
-    borderColor: criticalRedHover,
+    backgroundColor: _onyxTokens.astroTokens.color.button.critical.hover,
+    borderColor: _onyxTokens.astroTokens.color.button.critical.hover,
     color: 'white'
   }, boxShadowNone)
 });
@@ -185,16 +180,16 @@ var inline = _objectSpread(_objectSpread({}, buttonBase), {}, {
   paddingTop: '0px',
   paddingBottom: '0px',
   backgroundColor: 'transparent',
-  color: primaryBlue,
-  borderColor: primaryBlue,
+  color: _onyxTokens.astroTokens.color.primary,
+  borderColor: _onyxTokens.astroTokens.color.primary,
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press,
     color: 'white'
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlue,
-    borderColor: primaryBlue,
+    backgroundColor: _onyxTokens.astroTokens.color.primary,
+    borderColor: _onyxTokens.astroTokens.color.primary,
     color: 'white',
     path: {
       fill: 'white'
@@ -215,16 +210,16 @@ var inlinePrimary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'white',
   borderColor: 'primary',
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlueHover,
-    borderColor: primaryBlueHover
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.hover,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.hover
   }, boxShadowNone),
   '&.is-focused': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press,
     outline: '2px solid'
   }
 });
@@ -242,12 +237,12 @@ var link = {
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',
-  px: '1.25rem',
-  py: '.75rem',
+  px: _onyxTokens.astroTokens.spacing.button['padding-x'],
+  py: _onyxTokens.astroTokens.spacing.button['padding-y'],
   '&.is-pressed': {
     textDecoration: 'underline',
     outline: 'none',
-    color: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: _chromaJs["default"].mix(_onyxTokens.astroTokens.color.primary, 'black', 0.125, 'rgb').hex()
   },
   '&.is-focused': {
     textDecoration: 'underline',
@@ -262,7 +257,7 @@ var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
   display: 'inline-flex',
   path: {
-    fill: primaryBlue
+    fill: _onyxTokens.astroTokens.color.primary
   }
 });
 var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
@@ -272,7 +267,7 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
 var inlineWithIcon = _objectSpread(_objectSpread({}, inline), {}, {
   display: 'inline-flex',
   path: {
-    fill: primaryBlue
+    fill: _onyxTokens.astroTokens.color.primary
   }
 });
 var inlinePrimaryWithIcon = _objectSpread(_objectSpread({}, inlinePrimary), {}, {
@@ -280,20 +275,20 @@ var inlinePrimaryWithIcon = _objectSpread(_objectSpread({}, inlinePrimary), {},
   color: 'white'
 });
 var colorBlock = {
-  bg: 'gray-200',
-  borderColor: 'gray-200',
+  bg: _onyxTokens.astroTokens.color.gray[200],
+  borderColor: _onyxTokens.astroTokens.color.gray[200],
   borderRadius: '1.75rem',
   width: 150,
   height: 50,
   p: '5px 15px 5px 20px',
   '&.is-hovered': _objectSpread({
-    bg: 'blue-100',
-    borderColor: 'blue-100'
+    bg: _onyxTokens.astroTokens.color.blue[100],
+    borderColor: _onyxTokens.astroTokens.color.blue[100]
   }, boxShadowNone),
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
-    bg: 'blue-100',
-    borderColor: 'blue-100'
+    bg: _onyxTokens.astroTokens.color.blue[100],
+    borderColor: _onyxTokens.astroTokens.color.blue[100]
   },
   '&>svg': {
     color: 'text.primary',
@@ -301,24 +296,24 @@ var colorBlock = {
   }
 };
 var colorBlockPrimary = _objectSpread(_objectSpread({}, colorBlock), {}, {
-  bg: primaryBlue,
-  borderColor: primaryBlue,
+  bg: _onyxTokens.astroTokens.color.primary,
+  borderColor: _onyxTokens.astroTokens.color.primary,
   '& span': {
     color: 'white',
     textAlign: 'left'
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlueHover,
-    borderColor: primaryBlueHover,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.hover,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.hover,
     color: 'white'
   }, boxShadowNone),
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press
   },
   '&.is-focused': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: _onyxTokens.astroTokens.color.button.primary.press,
+    borderColor: _onyxTokens.astroTokens.color.button.primary.press,
     outline: '2px solid'
   }
 });
@@ -337,7 +332,7 @@ var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
     outlineOffset: '3px'
   },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: _onyxTokens.astroTokens.color.gray[100],
     path: {
       fill: 'dark'
     }
@@ -382,13 +377,13 @@ var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
 var invertedIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
   '&.is-hovered': {
     boxShadow: 'none !important',
-    backgroundColor: 'blue-600'
+    backgroundColor: _onyxTokens.astroTokens.color.blue[600]
   },
   '&.is-pressed': {
-    backgroundColor: 'blue-600'
+    backgroundColor: _onyxTokens.astroTokens.color.blue[600]
   },
   '&.is-disabled': {
-    backgroundColor: 'gray-300'
+    backgroundColor: _onyxTokens.astroTokens.color.gray[300]
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
@@ -401,13 +396,13 @@ var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   alignItems: 'center',
   justifyContent: 'center',
   '&.is-hovered': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+    backgroundColor: _chromaJs["default"].mix(_onyxTokens.astroTokens.color.primary, 'black', 0.075, 'rgb').hex(),
     path: {
       fill: 'white'
     }
   },
   '&.is-pressed': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    backgroundColor: _chromaJs["default"].mix(_onyxTokens.astroTokens.color.primary, 'black', 0.125, 'rgb').hex(),
     path: {
       fill: 'white'
     }
@@ -420,7 +415,7 @@ var hintButton = {
     fill: 'dark'
   },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: _onyxTokens.astroTokens.color.gray[100],
     path: {
       fill: 'dark'
     }
@@ -433,7 +428,7 @@ var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   width: 14,
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
-    backgroundColor: 'gray-100',
+    backgroundColor: _onyxTokens.astroTokens.color.gray[100],
     path: {
       fill: 'dark'
     }
@@ -481,10 +476,10 @@ var iconButtons = {
       p: 0,
       width: 14,
       '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-        backgroundColor: 'gray-100'
+        backgroundColor: _onyxTokens.astroTokens.color.gray[100]
       }),
       '&.is-pressed': {
-        backgroundColor: 'gray-100',
+        backgroundColor: _onyxTokens.astroTokens.color.gray[100],
         path: {
           fill: 'dark'
         }
@@ -520,13 +515,13 @@ var iconButtons = {
     height: '32px',
     '&.is-hovered': {
       boxShadow: 'none !important',
-      backgroundColor: 'gray-100',
+      backgroundColor: _onyxTokens.astroTokens.color.gray[100],
       path: {
         fill: 'dark'
       }
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-100',
+      backgroundColor: _onyxTokens.astroTokens.color.gray[100],
       path: {
         fill: 'dark'
       }
@@ -535,7 +530,8 @@ var iconButtons = {
   hintButton: _objectSpread({}, hintButton),
   passwordVisibilityIcon: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), _box.commonContentProps), {}, {
     right: 0,
-    padding: '12px 20px',
+    py: _onyxTokens.astroTokens.spacing.button['padding-y'],
+    px: _onyxTokens.astroTokens.spacing.button['padding-x'],
     border: '0px solid !important',
     '&:hover, &.is-pressed': {
       background: 'transparent',
@@ -544,7 +540,7 @@ var iconButtons = {
     '&.is-focused': {
       outline: '2px solid',
       outlineOffset: '2px',
-      outlineColor: 'gray-700'
+      outlineColor: _onyxTokens.astroTokens.color.gray[700]
     }
   })
 };
@@ -558,7 +554,7 @@ var listBoxLink = {
   '&.is-pressed': {
     textDecoration: 'underline',
     outline: 'none',
-    color: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: _chromaJs["default"].mix(_onyxTokens.astroTokens.color.primary, 'black', 0.125, 'rgb').hex()
   },
   '&.is-focused': {
     textDecoration: 'underline',
@@ -577,12 +573,13 @@ var listBoxLink = {
 };
 var ButtonInputGroupContentRight = _objectSpread(_objectSpread(_objectSpread({}, tertiary), _box.commonContentProps), {}, {
   right: 0,
-  padding: '12px 20px',
+  py: _onyxTokens.astroTokens.spacing.button['padding-y'],
+  px: _onyxTokens.astroTokens.spacing.button['padding-x'],
   borderRadius: '0px 4px 4px 0px !important',
   borderWidth: '0px !important',
   borderLeftWidth: '1px !important',
   borderRightWidth: '1px !important',
-  borderLeftColor: 'gray-500'
+  borderLeftColor: _onyxTokens.astroTokens.color.gray[500]
 });
 var buttons = {
   neutral: neutral,

package/lib/cjs/styles/themes/next-gen/variants/callout.js

@@ -1,12 +1,11 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var base = {
   width: '100%',
   backgroundColor: 'light',
@@ -34,9 +33,9 @@ var base = {
 var icon = {
   ml: '0',
   mr: 'md',
-  minWidth: "".concat(_tShirtSizes["default"].sm, " !important"),
-  width: "".concat(_tShirtSizes["default"].sm, " !important"),
-  height: "".concat(_tShirtSizes["default"].sm, " !important")
+  minWidth: "".concat(_onyxTokens.astroTokens.size.alert.icon, "px !important"),
+  width: "".concat(_onyxTokens.astroTokens.size.alert.icon, "px !important"),
+  height: "".concat(_onyxTokens.astroTokens.size.alert.icon, "px !important")
 };
 var _default = exports["default"] = {
   base: base,

package/lib/cjs/styles/themes/next-gen/variants/cards.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _Card = require("../../../../components/Card/Card.styles");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -22,7 +23,7 @@ var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'gray-200',
+  borderColor: _onyxTokens.astroTokens.color.gray[200],
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     backgroundColor: 'backgroundBase',
@@ -38,7 +39,7 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   p: 'lg',
-  borderColor: 'gray-200',
+  borderColor: _onyxTokens.astroTokens.color.gray[200],
   lineHeight: 'body',
   boxShadow: 'none'
 });
@@ -59,7 +60,7 @@ var light = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   gap: 'lg'
 });
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
-  borderColor: 'gray-200',
+  borderColor: _onyxTokens.astroTokens.color.gray[200],
   '&.is-hovered': {
     borderColor: 'active',
     bg: 'default'

package/lib/cjs/styles/themes/next-gen/variants/dataTable.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.dataTable = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var container = {
@@ -34,14 +35,14 @@ var tableRow = {
 var selectableTableRow = _objectSpread(_objectSpread({}, tableRow), {}, {
   bg: 'backgroundBase',
   '&.is-hovered': {
-    bg: 'gray-100'
+    bg: _onyxTokens.astroTokens.color.gray[100]
   },
   '&.is-selected': {
-    bg: 'gray-100'
+    bg: _onyxTokens.astroTokens.color.gray[100]
   },
   '&.is-focused': {
     boxShadow: '0 0 0 3px inset #1a73e8',
-    bg: 'gray-100'
+    bg: _onyxTokens.astroTokens.color.gray[100]
   },
   '&.is-disabled': {
     opacity: '0.65 !important'

package/lib/cjs/styles/themes/next-gen/variants/footer.js

@@ -5,10 +5,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.footer = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
   fontFamily: 'standard',
   justifyContent: 'center',
-  backgroundColor: 'gray-800'
+  backgroundColor: _onyxTokens.astroTokens.color.gray[800]
 };
 var wrapper = {
   px: ['1.5rem', '1.5rem', '1.5rem', '3rem', '3rem', '3rem'],