@pingux/astro 2.173.1-alpha.0 → 2.174.0-alpha.0

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.input = exports.fieldControlWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _text = require("./text");
 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; }
@@ -21,24 +22,24 @@ var defaultFocus = {
   boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
 };
 var readOnlyandDisabledStyles = {
-  backgroundColor: 'disabled',
+  backgroundColor: _onyxTokens.astroTokens.color.input['readonly-bg'],
   border: '1px solid',
-  borderColor: 'border.input',
+  borderColor: _onyxTokens.astroTokens.color.input.border,
   opacity: 1
 };
 var input = exports.input = {
-  height: '50px',
+  height: _onyxTokens.astroTokens.size.input.height,
   fontSize: 'md',
   fontFamily: 'standard',
   p: '0.75rem',
   backgroundColor: 'backgroundBase',
   borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
-  borderRadius: '4px',
+  borderRadius: _onyxTokens.astroTokens.radius.input,
   fontWeight: 1,
   '&::placeholder': _text.text.placeholder,
   '.is-float-label &': {
-    height: '50px'
+    height: _onyxTokens.astroTokens.size.input.height
   }
 };
 input.large = _objectSpread(_objectSpread({}, input), {}, {
@@ -76,7 +77,7 @@ input.containedIcon = {
 };
 var fieldControlWrapper = exports.fieldControlWrapper = {
   '> textarea': {
-    borderRadius: '4px',
+    borderRadius: _onyxTokens.astroTokens.radius.input,
     border: '1px solid',
     borderColor: 'border.input !important',
     outline: 'none'
@@ -106,20 +107,20 @@ var fieldControlWrapper = exports.fieldControlWrapper = {
   },
   '> button': {
     borderLeftWidth: 1,
-    borderRadius: '4px',
+    borderRadius: _onyxTokens.astroTokens.radius.input,
     border: '1px solid',
-    borderColor: 'border.input'
+    borderColor: _onyxTokens.astroTokens.color.input.border
   },
   '&.is-read-only': {
     '> input': {
-      backgroundColor: 'disabled',
+      backgroundColor: _onyxTokens.astroTokens.color.input['readonly-bg'],
       border: '1px solid',
-      borderColor: 'border.input'
+      borderColor: _onyxTokens.astroTokens.color.input.border
     },
     '> textarea': {
-      backgroundColor: 'disabled',
+      backgroundColor: _onyxTokens.astroTokens.color.input['readonly-bg'],
       border: '1px solid',
-      borderColor: 'border.input'
+      borderColor: _onyxTokens.astroTokens.color.input.border
     },
     '&:after': {
       display: 'none'
@@ -134,9 +135,9 @@ var fieldControlWrapper = exports.fieldControlWrapper = {
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
   border: '1px solid',
-  borderColor: 'border.input',
-  borderRadius: '4px',
-  minHeight: '50px',
+  borderColor: _onyxTokens.astroTokens.color.input.border,
+  borderRadius: _onyxTokens.astroTokens.radius.input,
+  minHeight: _onyxTokens.astroTokens.size.input.height,
   '&.is-focused': {
     boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
   }
@@ -150,9 +151,9 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   pr: 10,
   pb: 5,
   pl: 12,
-  borderRadius: '4px',
+  borderRadius: _onyxTokens.astroTokens.radius.input,
   alignItems: 'center',
-  minHeight: '50px',
+  minHeight: _onyxTokens.astroTokens.size.input.height,
   '> input': {
     border: 'none',
     flex: 1,
@@ -207,7 +208,7 @@ input.dropDownContentRight = {
     '&.is-focused': {
       outline: '2px solid',
       outlineOffset: '2px',
-      outlineColor: 'gray-700'
+      outlineColor: _onyxTokens.astroTokens.color['gray-700']
     }
   }
 };
@@ -217,7 +218,7 @@ input.dropDownContentLeft = {
     '&.is-focused': {
       outline: '2px solid',
       outlineOffset: '2px',
-      outlineColor: 'gray-700'
+      outlineColor: _onyxTokens.astroTokens.color['gray-700']
     }
   }
 };

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

@@ -5,11 +5,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.label = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var label = exports.label = {
   color: 'text.primary',
-  fontSize: 'md',
+  fontSize: fontSizes.label,
   '&.is-float-label': {
-    fontSize: 'md',
+    fontSize: fontSizes.label,
     fontWeight: 1,
     top: '15px'
   },
@@ -19,7 +22,7 @@ var label = exports.label = {
   },
   opacity: 1,
   checkbox: {
-    fontSize: 'md',
+    fontSize: fontSizes.label,
     display: 'inline-flex !important',
     div: {
       flexShrink: 0
@@ -30,7 +33,7 @@ var label = exports.label = {
   },
   radioGroup: {
     color: 'text.primary',
-    fontSize: 'md',
+    fontSize: fontSizes.label,
     mb: 'md'
   }
 };

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

@@ -16,6 +16,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 _button = _interopRequireWildcard(require("./button"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -27,18 +28,18 @@ var navBarFocus = {
 var app = {
   lineHeight: '160%',
   '&.is-hovered': {
-    color: 'blue-600',
-    textDecorationColor: 'blue-600'
+    color: _onyxTokens.astroTokens.color.blue[600],
+    textDecorationColor: _onyxTokens.astroTokens.color.blue[600]
   },
   '&.is-focused': _objectSpread(_objectSpread({}, navBarFocus), {}, {
     borderRadius: '2px'
   }),
   '&.is-pressed': {
-    color: 'blue-600',
-    textDecorationColor: 'blue-600'
+    color: _onyxTokens.astroTokens.color.blue[600],
+    textDecorationColor: _onyxTokens.astroTokens.color.blue[600]
   },
   '&:visited': {
-    color: 'purple-700',
+    color: _onyxTokens.astroTokens.color.purple[700],
     textDecoration: 'underline'
   }
 };
@@ -54,10 +55,10 @@ var nextGen = {
   fontFamily: 'standard',
   cursor: 'pointer',
   '&.is-hovered': {
-    color: 'blue-600'
+    color: _onyxTokens.astroTokens.color.blue[600]
   },
   '&.is-pressed': {
-    color: 'blue-600'
+    color: _onyxTokens.astroTokens.color.blue[600]
   }
 };
 var onyx = _objectSpread({}, nextGen);
@@ -78,7 +79,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     transition: 'background-color .15s ease'
   },
   '&.is-selected': {
-    color: 'blue-600',
+    color: _onyxTokens.astroTokens.color.blue[600],
     '&:before': {
       backgroundColor: 'active_light'
     }

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

@@ -5,6 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.listViewItem = exports.listView = exports.lisViewItemChart = exports.focusBoxShadow = exports.borderRadius = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var focusBoxShadow = exports.focusBoxShadow = '0 0 0 2px inset #1a73e8';
 var borderRadius = exports.borderRadius = '16px';
 var listViewItem = exports.listViewItem = {
@@ -23,19 +24,19 @@ var listViewItem = exports.listViewItem = {
   styledListItem: {
     bg: 'white',
     '&.is-selected': {
-      bg: 'gray-100'
+      bg: _onyxTokens.astroTokens.color.gray[100]
     },
     borderBottom: 'none',
     '&.has-separator': {
       borderBottom: '1px solid',
-      borderBottomColor: 'gray-200'
+      borderBottomColor: _onyxTokens.astroTokens.color.gray[200]
     },
     '&.is-hovered': {
-      bg: 'gray-100'
+      bg: _onyxTokens.astroTokens.color.gray[100]
     },
     '&.is-focused': {
       boxShadow: focusBoxShadow,
-      bg: 'gray-100'
+      bg: _onyxTokens.astroTokens.color.gray[100]
     },
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
@@ -73,14 +74,14 @@ var listViewItem = exports.listViewItem = {
       }
     },
     '&.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: focusBoxShadow,
-      bg: 'gray-100'
+      bg: _onyxTokens.astroTokens.color.gray[100]
     }
   },
   expandableItemBody: {
@@ -96,7 +97,7 @@ var listViewItem = exports.listViewItem = {
   },
   expandableRow: {
     '&.has-separator': {
-      borderBottomColor: 'gray-200'
+      borderBottomColor: _onyxTokens.astroTokens.color.gray[200]
     },
     '&.has-separator.is-last-row': {
       border: 'none'
@@ -124,25 +125,25 @@ var listView = exports.listView = {
 };
 var lisViewItemChart = exports.lisViewItemChart = {
   title: {
-    color: 'gray-600',
+    color: _onyxTokens.astroTokens.color.gray[600],
     fontSize: 'tiny'
   },
   count: {
-    color: 'gray-600',
+    color: _onyxTokens.astroTokens.color.gray[600],
     fontSize: 'xl'
   },
   countLabel: {
-    color: 'gray-600',
+    color: _onyxTokens.astroTokens.color.gray[600],
     fontSize: 'tiny'
   },
   chartLabel: {
-    color: 'gray-600',
+    color: _onyxTokens.astroTokens.color.gray[600],
     fontSize: 'tiny'
   },
   trend: {
-    color: 'gray-600'
+    color: _onyxTokens.astroTokens.color.gray[600]
   },
   chartButton: {
-    color: 'gray-900'
+    color: _onyxTokens.astroTokens.color.gray[900]
   }
 };

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

@@ -5,6 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.menuSection = exports.menuItem = exports.menu = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var menu = exports.menu = {
   p: 'sm',
   border: '1px solid',
@@ -29,20 +30,20 @@ var menuItem = exports.menuItem = {
     bg: 'transparent',
     padding: '12px 12px',
     outline: 'none',
-    color: 'gray-700',
+    color: _onyxTokens.astroTokens.color.gray[700],
     fontSize: 'md',
     lineHeight: 'body',
     cursor: 'pointer',
     borderRadius: '4px',
     '&.is-hovered': {
-      bg: 'gray-100',
+      bg: _onyxTokens.astroTokens.color.gray[100],
       color: '#121518',
       '> *': {
         color: '#121518'
       }
     },
     '&.is-focused': {
-      bg: 'gray-100',
+      bg: _onyxTokens.astroTokens.color.gray[100],
       color: '#121518',
       outline: '1px solid',
       outlineOffset: '1px',

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

@@ -5,6 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.message = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var message = exports.message = {
   wrapper: {
     gap: 'md',
@@ -17,11 +18,11 @@ var message = exports.message = {
     p: '20px 16px 20px 20px',
     wordBreak: 'break-word',
     alignItems: 'center',
-    backgroundColor: 'blue-100',
+    backgroundColor: _onyxTokens.astroTokens.color.blue[100],
     borderLeftWidth: '5px',
     borderLeftStyle: 'solid',
     borderLeftColor: 'blue',
-    color: 'gray-700',
+    color: _onyxTokens.astroTokens.color.gray[700],
     fontSize: '15px !important',
     lineHeight: '1.3',
     borderRadius: 4,
@@ -29,35 +30,35 @@ var message = exports.message = {
       minWidth: '20px',
       width: '20px',
       height: '20px',
-      color: 'gray-700',
+      color: _onyxTokens.astroTokens.color.gray[700],
       path: {
-        fill: 'gray-700',
+        fill: _onyxTokens.astroTokens.color.gray[700],
         transform: 'scale(0.96)',
         transformOrigin: 'center'
       },
       alignSelf: 'start'
     },
     '&.is-success': {
-      bg: 'green-100',
-      borderLeftColor: 'green-500',
-      color: 'gray-700'
+      bg: _onyxTokens.astroTokens.color.green[100],
+      borderLeftColor: _onyxTokens.astroTokens.color.green[500],
+      color: _onyxTokens.astroTokens.color.gray[700]
     },
     '&.is-warning': {
       bg: 'warning.light',
-      borderLeftColor: 'yellow-500',
-      color: 'gray-700 '
+      borderLeftColor: _onyxTokens.astroTokens.color.yellow[500],
+      color: _onyxTokens.astroTokens.color.gray[700]
     },
     '&.is-error, > .is-error': {
       bg: 'red-100'
     },
     '&.is-error, > button > svg': {
-      color: 'gray-700 !important',
+      color: "".concat(_onyxTokens.astroTokens.color.gray[700], " !important"),
       path: {
-        fill: 'gray-700'
+        fill: _onyxTokens.astroTokens.color.gray[700]
       }
     },
     '&.is-error': {
-      borderLeftColor: 'red-500'
+      borderLeftColor: _onyxTokens.astroTokens.color.red[500]
     }
   }
 };

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

@@ -14,10 +14,13 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.navBarSelected = exports.navBarFocus = exports.navBar = 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; }
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var navBarSelected = exports.navBarSelected = {
-  backgroundColor: 'blue-100',
+  backgroundColor: _onyxTokens.astroTokens.color['nav-bar-item'].selected.bg,
   boxShadow: 'none'
 };
 var navBarFocus = exports.navBarFocus = {
@@ -42,39 +45,39 @@ var navBar = exports.navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200'
+      backgroundColor: _onyxTokens.astroTokens.color.gray[200]
     },
     '&.is-focused': _objectSpread({}, navBarFocus)
   },
   itemButton: {
     py: '.75rem',
     paddingLeft: '53px',
-    color: 'gray-700',
+    color: _onyxTokens.astroTokens.color.gray[700],
     borderRadius: '4px',
     fontWeight: 0,
-    fontSize: 'sm',
+    fontSize: fontSizes['nav-bar-item'],
     lineHeight: '160%',
     '&.is-focused': _objectSpread({}, navBarFocus),
     '&.is-hovered': {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200',
-      color: 'gray-700'
+      backgroundColor: _onyxTokens.astroTokens.color.gray[200],
+      color: _onyxTokens.astroTokens.color.gray[700]
     },
     '&.is-selected': {
-      bg: 'blue-100',
+      bg: _onyxTokens.astroTokens.color.blue[100],
       boxShadow: 'none',
       color: 'darkblue'
     }
   },
   subtitle: {
-    color: 'gray-700'
+    color: _onyxTokens.astroTokens.color.gray[700]
   },
   headerText: {
-    color: 'gray-700',
+    color: _onyxTokens.astroTokens.color.gray[700],
     fontWeight: 0,
-    fontSize: 'sm',
+    fontSize: fontSizes['nav-bar-item'],
     lineHeight: '160%',
     ml: 'sm',
     '.is-selected &': {
@@ -96,16 +99,16 @@ var navBar = exports.navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'gray-700',
+    color: _onyxTokens.astroTokens.color.gray[700],
     borderRadius: '4px',
     '&.is-hovered': {
-      backgroundColor: 'light'
+      backgroundColor: _onyxTokens.astroTokens.color['nav-bar-item'].hover.bg
     },
     '> div > svg': {
-      fill: 'gray-700'
+      fill: _onyxTokens.astroTokens.color.gray[700]
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200'
+      backgroundColor: _onyxTokens.astroTokens.color.gray[200]
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {
@@ -129,10 +132,10 @@ var navBar = exports.navBar = {
     '&.is-selected': _objectSpread({}, navBarSelected),
     backgroundColor: 'transparent',
     '> svg': {
-      fill: 'gray-700'
+      fill: _onyxTokens.astroTokens.color.gray[700]
     },
     '> div > svg': {
-      fill: 'gray-700'
+      fill: _onyxTokens.astroTokens.color.gray[700]
     }
   },
   navBarItemBody: {

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

@@ -5,6 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var calendarBody = {
   py: 'sm',
   borderTop: '1px solid',
@@ -54,17 +55,17 @@ var calendarButton = {
     outlineOffset: '2px'
   },
   '&.is-unavailable': {
-    backgroundColor: 'gray-300',
+    backgroundColor: _onyxTokens.astroTokens.color.gray[300],
     color: 'text.primary'
   },
   '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
-    backgroundColor: 'gray-300',
+    backgroundColor: _onyxTokens.astroTokens.color.gray[300],
     color: 'text.primary',
     opacity: 1
   },
   '&.is-disabled': {
     '&.is-hovered': {
-      color: 'gray-900',
+      color: _onyxTokens.astroTokens.color.gray[900],
       backgroundColor: 'unset'
     }
   }

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

@@ -14,6 +14,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 _spacing = _interopRequireDefault(require("../spacing"));
 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; }
@@ -24,7 +25,7 @@ var line = {
   borderBottomColor: 'active',
   '&.is-inactive': {
     borderBottomStyle: 'solid',
-    borderBottomColor: 'blue-200'
+    borderBottomColor: _onyxTokens.astroTokens.color.blue[200]
   }
 };
 var stepBase = {
@@ -68,7 +69,7 @@ var step = {
   inactive: {
     '&.is-horizontal': _objectSpread({
       backgroundColor: 'backgroundBase',
-      borderColor: 'blue-200',
+      borderColor: _onyxTokens.astroTokens.color.blue[200],
       color: 'active'
     }, stepBase)
   }

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

@@ -14,35 +14,38 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.text = 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; }
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var hTags = {
   H1: {
-    fontSize: 'xxx',
+    fontSize: fontSizes.h1,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H2: {
-    fontSize: 'xx',
+    fontSize: fontSizes.h2,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H3: {
-    fontSize: 'xl',
+    fontSize: fontSizes.h3,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H4: {
-    fontSize: 'lg',
+    fontSize: fontSizes.h4,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   H5: {
-    fontSize: 'md',
+    fontSize: fontSizes.h5,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
@@ -52,35 +55,35 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs',
+    fontSize: fontSizes.h6,
     letterSpacing: '1px'
   },
   h1: {
-    fontSize: 'xxx',
+    fontSize: fontSizes.h1,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h2: {
-    fontSize: 'xx',
+    fontSize: fontSizes.h2,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h3: {
-    fontSize: 'xl',
+    fontSize: fontSizes.h3,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h4: {
-    fontSize: 'lg',
+    fontSize: fontSizes.h4,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
   },
   h5: {
-    fontSize: 'md',
+    fontSize: fontSizes.h5,
     fontWeight: 2,
     color: 'text.primary',
     fontFamily: 'standard'
@@ -90,7 +93,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs',
+    fontSize: fontSizes.h6,
     letterSpacing: '1px'
   }
 };
@@ -140,7 +143,7 @@ var text = exports.text = _objectSpread(_objectSpread({
     wordBreak: 'normal'
   },
   placeholder: {
-    color: 'gray-600',
+    color: _onyxTokens.astroTokens.color.gray[600],
     fontWeight: 1
   },
   paragraph: {
@@ -204,11 +207,11 @@ var text = exports.text = _objectSpread(_objectSpread({
   }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
-      color: 'gray-700',
+      color: _onyxTokens.astroTokens.color.gray[700],
       '& > a': {
         fontWeight: '600',
         textDecoration: 'underline',
-        color: 'gray-700'
+        color: _onyxTokens.astroTokens.color.gray[700]
       }
     }
   },