@pingux/astro 2.173.0 → 2.174.0-alpha.0

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/message.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 = {
   item: {
     backgroundColor: 'light',
@@ -14,7 +15,7 @@ var message = exports.message = {
     },
     '&.is-success': {
       bg: 'light',
-      borderLeftColor: 'green-500',
+      borderLeftColor: _onyxTokens.astroTokensDark.color.green[500],
       color: 'text.message'
     },
     '&.is-success, > .is-success': {
@@ -23,7 +24,7 @@ var message = exports.message = {
     },
     '&.is-warning': {
       bg: 'light',
-      borderLeftColor: 'yellow-500',
+      borderLeftColor: _onyxTokens.astroTokensDark.color.yellow[500],
       color: 'text.message'
     },
     '&.is-warning, > .is-warning': {
@@ -59,7 +60,7 @@ var message = exports.message = {
       }
     },
     '&.is-error': {
-      borderLeftColor: 'red-500'
+      borderLeftColor: _onyxTokens.astroTokensDark.color.red[500]
     }
   }
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -5,16 +5,17 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.text = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var text = exports.text = {
   listViewItemExpandedText: {
-    color: 'gray-100'
+    color: _onyxTokens.astroTokensDark.color.gray[100]
   },
   listViewItemText: {
     color: 'text.secondary'
   },
   searchNavTabLabel: {
     px: 'lg',
-    color: 'gray-400',
+    color: _onyxTokens.astroTokensDark.color.gray[400],
     '.is-selected &, .is-hovered &': {
       color: 'white'
     },
@@ -26,20 +27,20 @@ var text = exports.text = {
     }
   },
   listViewItemTextSelected: {
-    color: 'gray-100'
+    color: _onyxTokens.astroTokensDark.color.gray[100]
   },
   listViewItemSubtext: {
-    color: 'gray-400'
+    color: _onyxTokens.astroTokensDark.color.gray[400]
   },
   itemTitle: {
     fontWeight: 2,
     color: 'text.secondary'
   },
   copyRightText: {
-    color: 'gray-400'
+    color: _onyxTokens.astroTokensDark.color.gray[400]
   },
   placeholder: {
-    color: 'gray-400',
+    color: _onyxTokens.astroTokensDark.color.gray[400],
     fontWeight: 1
   },
   messagesText: {
@@ -53,6 +54,6 @@ var text = exports.text = {
     color: 'text.secondary'
   },
   pageHeaderTitle: {
-    color: 'gray-100'
+    color: _onyxTokens.astroTokensDark.color.gray[100]
   }
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _colors = require("../colors");
 var _avatar = require("./avatar");
 var _callout = _interopRequireDefault(require("./callout"));
@@ -26,22 +27,22 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
-    color: 'gray-400',
+    color: _onyxTokens.astroTokensDark.color.gray[400],
     '&.is-focused': {
-      color: 'gray-200',
+      color: _onyxTokens.astroTokensDark.color.gray[200],
       bg: '#2C323A'
     },
     '&.is-selected': {
-      color: 'gray-200',
+      color: _onyxTokens.astroTokensDark.color.gray[200],
       bg: '#2C323A',
       '&.is-focused': {
-        color: 'gray-200'
+        color: _onyxTokens.astroTokensDark.color.gray[200]
       }
     },
     '&.is-condensed': {
-      color: 'gray-400',
+      color: _onyxTokens.astroTokensDark.color.gray[400],
       '&.is-focused': {
-        color: 'gray-200'
+        color: _onyxTokens.astroTokensDark.color.gray[200]
       }
     },
     '&.is-focus-visible': {
@@ -98,7 +99,7 @@ var rockerButton = {
   },
   thumbSwitch: {
     backgroundColor: 'backgroundBase',
-    color: 'blue-400',
+    color: _onyxTokens.astroTokensDark.color.blue[400],
     '&.is-selected': {
       color: 'black',
       '& > div.status-icon': {
@@ -121,57 +122,57 @@ var attachment = {
 };
 var tooltip = {
   inline: {
-    color: 'blue-400'
+    color: _onyxTokens.astroTokensDark.color.blue[400]
   }
 };
 var statusIcon = {
   base: {
     '&.is-default': {
-      bg: 'gray-100',
+      bg: _onyxTokens.astroTokensDark.color.gray[100],
       span: {
         color: 'black'
       }
     },
     '&.is-critical': {
-      bg: 'red-500',
+      bg: _onyxTokens.astroTokensDark.color.red[500],
       span: {
         color: 'black'
       }
     },
     '&.is-warning': {
-      bg: 'yellow-500',
+      bg: _onyxTokens.astroTokensDark.color.yellow[500],
       span: {
         color: 'black'
       }
     },
     '&.is-info': {
-      bg: 'blue-500',
+      bg: _onyxTokens.astroTokensDark.color.blue[500],
       span: {
         color: 'black'
       }
     },
     '&.is-major': {
-      bg: 'orange-500',
+      bg: _onyxTokens.astroTokensDark.color.orange[500],
       span: {
         color: 'black'
       }
     },
     '&.is-minor': {
-      bg: 'yellow-500',
+      bg: _onyxTokens.astroTokensDark.color.yellow[500],
       span: {
         color: 'black'
       }
     },
     '&.is-warning-neutral': {
-      bg: 'gray-700',
+      bg: _onyxTokens.astroTokensDark.color.gray[700],
       span: {
-        color: 'gray-100'
+        color: _onyxTokens.astroTokensDark.color.gray[100]
       }
     },
     '&.is-fatal': {
-      bg: 'gray-100',
+      bg: _onyxTokens.astroTokensDark.color.gray[100],
       span: {
-        color: 'gray-700'
+        color: _onyxTokens.astroTokensDark.color.gray[700]
       }
     },
     '&.is-selected.is-selected': {

package/lib/cjs/styles/themes/next-gen/colors/colors.js

@@ -14,118 +14,119 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.warning = exports.success = exports.info = exports["default"] = exports.critical = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _colorTokens = require("../tokens/colorTokens");
 var _iconWrapper = require("./iconWrapper");
 var _twoTone = _interopRequireDefault(require("./twoTone"));
 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 subColors = {
-  lightblue: _colorTokens.nextGenColors['blue-100'],
-  lightindigo: _colorTokens.nextGenColors['indigo-100'],
-  lightpurple: _colorTokens.nextGenColors['purple-100'],
-  lightpink: _colorTokens.nextGenColors['pink-100'],
-  lightred: _colorTokens.nextGenColors['red-100'],
-  lightorange: _colorTokens.nextGenColors['orange-100'],
-  lightyellow: _colorTokens.nextGenColors['yellow-100'],
-  lightgreen: _colorTokens.nextGenColors['green-100'],
-  lightteal: _colorTokens.nextGenColors['teal-100'],
-  lightcyan: _colorTokens.nextGenColors['cyan-100'],
-  darkblue: _colorTokens.nextGenColors['blue-600'],
-  darkindigo: _colorTokens.nextGenColors['indigo-700'],
-  darkpurple: _colorTokens.nextGenColors['purple-500'],
-  darkpink: _colorTokens.nextGenColors['pink-600'],
-  darkred: _colorTokens.nextGenColors['red-700'],
-  darkorange: _colorTokens.nextGenColors['orange-700'],
-  darkyellow: _colorTokens.nextGenColors['yellow-800'],
-  darkgreen: _colorTokens.nextGenColors['green-800'],
-  darkteal: _colorTokens.nextGenColors['teal-700'],
-  darkcyan: _colorTokens.nextGenColors['cyan-800'],
-  mediumblue: _colorTokens.nextGenColors['blue-600'],
-  mediumindigo: _colorTokens.nextGenColors['indigo-600'],
-  mediumpurple: _colorTokens.nextGenColors['purple-600'],
-  mediumpink: _colorTokens.nextGenColors['pink-600'],
-  mediumred: _colorTokens.nextGenColors['red-600'],
-  mediumorange: _colorTokens.nextGenColors['orange-600'],
-  mediumyellow: _colorTokens.nextGenColors['yellow-600'],
-  mediumgreen: _colorTokens.nextGenColors['green-700'],
-  mediumteal: _colorTokens.nextGenColors['teal-600'],
-  mediumcyan: _colorTokens.nextGenColors['cyan-700'],
-  primary: _colorTokens.nextGenColors.blue,
-  secondary: _colorTokens.nextGenColors['gray-600'],
-  info: _colorTokens.nextGenColors.blue,
-  danger: _colorTokens.nextGenColors.red,
-  light: _colorTokens.nextGenColors['gray-100'],
-  dark: _colorTokens.nextGenColors['gray-800']
+  lightblue: _onyxTokens.astroTokens.color.blue[100],
+  lightindigo: _onyxTokens.astroTokens.color.indigo[100],
+  lightpurple: _onyxTokens.astroTokens.color.purple[100],
+  lightpink: _onyxTokens.astroTokens.color.pink[100],
+  lightred: _onyxTokens.astroTokens.color.red[100],
+  lightorange: _onyxTokens.astroTokens.color.orange[100],
+  lightyellow: _onyxTokens.astroTokens.color.yellow[100],
+  lightgreen: _onyxTokens.astroTokens.color.green[100],
+  lightteal: _onyxTokens.astroTokens.color.teal[100],
+  lightcyan: _onyxTokens.astroTokens.color.cyan[100],
+  darkblue: _onyxTokens.astroTokens.color.blue[600],
+  darkindigo: _onyxTokens.astroTokens.color.indigo[700],
+  darkpurple: _onyxTokens.astroTokens.color.purple[500],
+  darkpink: _onyxTokens.astroTokens.color.pink[600],
+  darkred: _onyxTokens.astroTokens.color.red[700],
+  darkorange: _onyxTokens.astroTokens.color.orange[700],
+  darkyellow: _onyxTokens.astroTokens.color.yellow[800],
+  darkgreen: _onyxTokens.astroTokens.color.green[800],
+  darkteal: _onyxTokens.astroTokens.color.teal[700],
+  darkcyan: _onyxTokens.astroTokens.color.cyan[800],
+  mediumblue: _onyxTokens.astroTokens.color.blue[600],
+  mediumindigo: _onyxTokens.astroTokens.color.indigo[600],
+  mediumpurple: _onyxTokens.astroTokens.color.purple[600],
+  mediumpink: _onyxTokens.astroTokens.color.pink[600],
+  mediumred: _onyxTokens.astroTokens.color.red[600],
+  mediumorange: _onyxTokens.astroTokens.color.orange[600],
+  mediumyellow: _onyxTokens.astroTokens.color.yellow[600],
+  mediumgreen: _onyxTokens.astroTokens.color.green[700],
+  mediumteal: _onyxTokens.astroTokens.color.teal[600],
+  mediumcyan: _onyxTokens.astroTokens.color.cyan[700],
+  primary: _onyxTokens.astroTokens.color.primary,
+  secondary: _onyxTokens.astroTokens.color.gray[600],
+  info: _onyxTokens.astroTokens.color.primary,
+  danger: _onyxTokens.astroTokens.color.critical,
+  light: _onyxTokens.astroTokens.color.gray[100],
+  dark: _onyxTokens.astroTokens.color.gray[800]
 };
 var colorsObject = {
-  blue: '#1a73e8',
-  indigo: '#BA4DE1',
-  purple: '#6f42c1',
-  pink: '#d63384',
-  red: '#da3a2b',
-  orange: '#fd7e14',
-  yellow: '#ffb946',
-  green: '#22a75f',
-  teal: '#17A2B8',
-  cyan: '#0dcaf0',
-  active: '#1a73e8'
+  blue: _onyxTokens.astroTokens.color.blue[500],
+  indigo: _onyxTokens.astroTokens.color.indigo[500],
+  purple: _onyxTokens.astroTokens.color.purple[500],
+  pink: _onyxTokens.astroTokens.color.pink[500],
+  red: _onyxTokens.astroTokens.color.red[500],
+  orange: _onyxTokens.astroTokens.color.orange[500],
+  yellow: _onyxTokens.astroTokens.color.yellow[500],
+  green: _onyxTokens.astroTokens.color.green[500],
+  teal: _onyxTokens.astroTokens.color.teal[500],
+  cyan: _onyxTokens.astroTokens.color.cyan[500],
+  active: _onyxTokens.astroTokens.color.blue[500]
 };
 var critical = exports.critical = {
   bright: colorsObject.red,
-  dark: _colorTokens.nextGenColors['red-700'],
-  light: _colorTokens.nextGenColors['red-100']
+  dark: _onyxTokens.astroTokens.color.red.dark,
+  light: _onyxTokens.astroTokens.color.red.light
 };
 var success = exports.success = {
-  bright: _colorTokens.nextGenColors['green-500'],
-  dark: _colorTokens.nextGenColors['green-800'],
-  light: _colorTokens.nextGenColors['green-100']
+  bright: _onyxTokens.astroTokens.color.green[500],
+  dark: _onyxTokens.astroTokens.color.green.dark,
+  light: _onyxTokens.astroTokens.color.green.light
 };
 var warning = exports.warning = {
   bright: colorsObject.yellow,
-  dark: _colorTokens.nextGenColors['yellow-800'],
-  light: _colorTokens.nextGenColors['yellow-100']
+  dark: _onyxTokens.astroTokens.color.yellow.dark,
+  light: _onyxTokens.astroTokens.color.yellow.light
 };
 var info = exports.info = {
   bright: colorsObject.blue,
-  dark: _colorTokens.nextGenColors['blue-600'],
-  light: _colorTokens.nextGenColors['blue-100']
+  dark: _onyxTokens.astroTokens.color.blue.dark,
+  light: _onyxTokens.astroTokens.color.blue.light
 };
 var text = {
-  primary: _colorTokens.nextGenColors['gray-900'],
-  secondary: _colorTokens.nextGenColors['gray-500'],
-  message: _colorTokens.nextGenColors['gray-700'],
-  fieldHelper: _colorTokens.nextGenColors['gray-500']
+  primary: _onyxTokens.astroTokens.color.font.base,
+  secondary: _onyxTokens.astroTokens.color.gray[500],
+  message: _onyxTokens.astroTokens.color.gray[700],
+  fieldHelper: _onyxTokens.astroTokens.color.gray[500]
 };
 var border = {
-  base: _colorTokens.nextGenColors['gray-300'],
-  input: _colorTokens.nextGenColors['gray-500'],
-  separator: _colorTokens.nextGenColors['gray-200'],
-  hairline: '#e7eef4'
+  base: _onyxTokens.astroTokens.color.gray[300],
+  input: _onyxTokens.astroTokens.color.gray[500],
+  separator: _onyxTokens.astroTokens.color.gray[200],
+  hairline: _onyxTokens.astroTokens.color.common.border
 };
 var overrides = {
   neutral: {
     80: '#69788B'
   },
   focus: colorsObject.active,
-  disabled: _colorTokens.nextGenColors['gray-100']
+  disabled: _onyxTokens.astroTokens.color.gray[100]
 };
-var background = _colorTokens.nextGenColors['blue-100'];
+var background = _onyxTokens.astroTokens.color.blue[100];
 var backgroundBase = 'white';
-var backgroundSecondary = _colorTokens.nextGenColors['gray-100'];
-var backgroundCard = _colorTokens.nextGenColors['blue-100'];
+var backgroundSecondary = _onyxTokens.astroTokens.color.gray[100];
+var backgroundCard = _onyxTokens.astroTokens.color.blue[100];
 var backgroundSuggestion = '#ecf0f5';
-var backgroundHover = _colorTokens.nextGenColors['gray-100'];
+var backgroundHover = _onyxTokens.astroTokens.color.gray[100];
 var card = {
-  blue: _colorTokens.nextGenColors['blue-100'],
-  gray: _colorTokens.nextGenColors['gray-100']
+  blue: _onyxTokens.astroTokens.color.blue[100],
+  gray: _onyxTokens.astroTokens.color.gray[100]
 };
 var badge = {
-  textColor: _colorTokens.nextGenColors.font.base,
-  background: _colorTokens.nextGenColors['gray-100']
+  textColor: _onyxTokens.astroTokens.color.font.base,
+  background: _onyxTokens.astroTokens.color.gray[100]
 };
 var codeEditor = {
-  backgroundColor: _colorTokens.nextGenColors['gray-900'],
-  headerColor: _colorTokens.nextGenColors['gray-900']
+  backgroundColor: _onyxTokens.astroTokens.color.gray[900],
+  headerColor: _onyxTokens.astroTokens.color.gray[900]
 };
 var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {

package/lib/cjs/styles/themes/next-gen/colors/twoTone.js

@@ -5,41 +5,41 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _colorTokens = require("../tokens/colorTokens");
+var _onyxTokens = require("@pingux/onyx-tokens");
 var twoTone = {
   bg: {
-    orange: _colorTokens.nextGenColors['orange-100'],
-    cyan: _colorTokens.nextGenColors['cyan-100'],
-    green: _colorTokens.nextGenColors['green-100'],
-    purple: _colorTokens.nextGenColors['purple-100'],
-    pink: _colorTokens.nextGenColors['pink-100'],
-    red: _colorTokens.nextGenColors['red-100'],
-    yellow: _colorTokens.nextGenColors['yellow-100'],
-    teal: _colorTokens.nextGenColors['teal-100'],
-    blue: _colorTokens.nextGenColors['blue-100'],
-    indigo: _colorTokens.nextGenColors['indigo-100'],
-    lightBlue: _colorTokens.nextGenColors['blue-100'],
-    lightPink: _colorTokens.nextGenColors['pink-100'],
-    lightGreen: _colorTokens.nextGenColors['green-100'],
-    lightYellow: _colorTokens.nextGenColors['yellow-100'],
-    lightIndigo: _colorTokens.nextGenColors['indigo-100']
+    orange: _onyxTokens.astroTokens.color.orange[100],
+    cyan: _onyxTokens.astroTokens.color.cyan[100],
+    green: _onyxTokens.astroTokens.color.green[100],
+    purple: _onyxTokens.astroTokens.color.purple[100],
+    pink: _onyxTokens.astroTokens.color.pink[100],
+    red: _onyxTokens.astroTokens.color.red[100],
+    yellow: _onyxTokens.astroTokens.color.yellow[100],
+    teal: _onyxTokens.astroTokens.color.teal[100],
+    blue: _onyxTokens.astroTokens.color.blue[100],
+    indigo: _onyxTokens.astroTokens.color.indigo[100],
+    lightBlue: _onyxTokens.astroTokens.color.blue[100],
+    lightPink: _onyxTokens.astroTokens.color.pink[100],
+    lightGreen: _onyxTokens.astroTokens.color.green[100],
+    lightYellow: _onyxTokens.astroTokens.color.yellow[100],
+    lightIndigo: _onyxTokens.astroTokens.color.indigo[100]
   },
   text: {
-    orange: _colorTokens.nextGenColors['orange-800'],
-    cyan: _colorTokens.nextGenColors['cyan-800'],
-    green: _colorTokens.nextGenColors['green-800'],
-    purple: _colorTokens.nextGenColors['purple-800'],
-    pink: _colorTokens.nextGenColors['pink-800'],
-    red: _colorTokens.nextGenColors['red-800'],
-    yellow: _colorTokens.nextGenColors['yellow-800'],
-    teal: _colorTokens.nextGenColors['teal-800'],
-    blue: _colorTokens.nextGenColors['blue-600'],
-    indigo: _colorTokens.nextGenColors['indigo-700'],
-    lightBlue: _colorTokens.nextGenColors['blue-500'],
-    lightPink: _colorTokens.nextGenColors['pink-600'],
-    lightGreen: _colorTokens.nextGenColors['green-800'],
-    lightYellow: _colorTokens.nextGenColors['yellow-800'],
-    lightIndigo: _colorTokens.nextGenColors['indigo-700']
+    orange: _onyxTokens.astroTokens.color.orange[800],
+    cyan: _onyxTokens.astroTokens.color.cyan[800],
+    green: _onyxTokens.astroTokens.color.green[800],
+    purple: _onyxTokens.astroTokens.color.purple[800],
+    pink: _onyxTokens.astroTokens.color.pink[800],
+    red: _onyxTokens.astroTokens.color.red[800],
+    yellow: _onyxTokens.astroTokens.color.yellow[800],
+    teal: _onyxTokens.astroTokens.color.teal[800],
+    blue: _onyxTokens.astroTokens.color.blue[600],
+    indigo: _onyxTokens.astroTokens.color.indigo[700],
+    lightBlue: _onyxTokens.astroTokens.color.blue[500],
+    lightPink: _onyxTokens.astroTokens.color.pink[600],
+    lightGreen: _onyxTokens.astroTokens.color.green[800],
+    lightYellow: _onyxTokens.astroTokens.color.yellow[800],
+    lightIndigo: _onyxTokens.astroTokens.color.indigo[700]
   }
 };
 var _default = exports["default"] = twoTone;

package/lib/cjs/styles/themes/next-gen/forms.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.timeField = exports.select = exports.search = exports.radio = exports.numberField = exports["default"] = exports.comboBox = exports.checkbox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _safariAgent = require("../../safariAgent.js");
 var _colors = _interopRequireDefault(require("./colors/colors"));
 var _tShirtSizes = _interopRequireDefault(require("./customProperties/tShirtSizes"));
@@ -32,10 +33,10 @@ var checkbox = exports.checkbox = {
   }
 };
 var select = exports.select = {
-  borderRadius: '4px',
+  borderRadius: _onyxTokens.astroTokens.radius.input,
   borderColor: 'border.input',
   color: 'text.primary',
-  height: '50px',
+  height: _onyxTokens.astroTokens.size.input.height,
   '&.is-disabled': {
     opacity: 1,
     borderColor: 'border.input',
@@ -69,7 +70,7 @@ var comboBox = exports.comboBox = {
   input: {
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderRadius: '4px',
+    borderRadius: _onyxTokens.astroTokens.radius.input,
     height: '50px'
   },
   button: {

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

@@ -14,6 +14,8 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _themes = require("../../../utils/devUtils/constants/themes");
 var _theme = _interopRequireDefault(require("../../theme"));
@@ -32,8 +34,9 @@ var _forms = _interopRequireDefault(require("./forms"));
 var _sizes = _interopRequireDefault(require("./sizes"));
 var _spacing = _interopRequireDefault(require("./spacing"));
 var _text2 = require("./text");
+var _context;
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
 var nextGenTheme = {
   name: _themes.themes.NEXT_GEN,
@@ -44,7 +47,8 @@ var nextGenTheme = {
   fontSizes: _text2.fontSizes,
   fontWeights: _text2.fontWeights,
   lineHeights: {
-    body: '1.6',
+    // @ts-expect-error - line-height is in default tokens but not in the type definition
+    body: _onyxTokens.astroTokens["default"]['line-height'].base,
     xs: '1.2',
     sm: '1.4',
     md: '1.75'
@@ -58,7 +62,7 @@ var nextGenTheme = {
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
   shadows: {
-    standard: '0 1px 3px 0 rgba(0, 0, 0, 0.13)'
+    standard: (0, _concat["default"])(_context = "0 ".concat(_onyxTokens.astroTokens.spacing.card.shadow.y, " ")).call(_context, _onyxTokens.astroTokens.spacing.card.shadow.blur, " 0 rgba(0, 0, 0, 0.13)")
   },
   sizes: _sizes["default"],
   badges: _badges.badges,

package/lib/cjs/styles/themes/next-gen/sizes.js

@@ -5,12 +5,15 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = 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 avatar = {
-  sm: '24px',
+  sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
   md: '32px',
   xmd: '44px',
-  lg: '72px',
-  xl: '104px'
+  lg: "".concat(_onyxTokens.astroTokens.size.avatar.lg, "px"),
+  xl: "".concat(_onyxTokens.astroTokens.size.avatar.xl, "px")
 };
 var avatarLogo = {
   sm: '14px',
@@ -20,11 +23,11 @@ var avatarLogo = {
   xl: '54px'
 };
 var avatarFontSize = {
-  sm: '9.6px',
-  md: '13.6px',
+  sm: fontSizes.avatar.sm,
+  md: fontSizes.avatar.md,
   xmd: '18px',
-  lg: '28.8px',
-  xl: '41.6px'
+  lg: fontSizes.avatar.lg,
+  xl: fontSizes.avatar.xl
 };
 var iconBadge = {
   md: '48px',

package/lib/cjs/styles/themes/next-gen/spacing.js

@@ -5,12 +5,13 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var scale = {
-  xs: '.25rem',
-  sm: '.5rem',
-  md: '1rem',
-  lg: '1.5rem',
-  xl: '3rem',
+  xs: _onyxTokens.astroTokens.spacing.xs,
+  sm: _onyxTokens.astroTokens.spacing.sm,
+  md: _onyxTokens.astroTokens.spacing.md,
+  lg: _onyxTokens.astroTokens.spacing.lg,
+  xl: _onyxTokens.astroTokens.spacing.xl,
   xx: '4rem'
 };
 var _default = exports["default"] = scale;

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

@@ -7,7 +7,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.fontWeights = exports.fontSizes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _sizes = _interopRequireDefault(require("./sizes"));
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSize = _onyxTokens.astroTokens["default"]['font-size'];
 var fontSizeBase = 0.9375;
 var fontSizes = exports.fontSizes = {
   avatar: {
@@ -17,8 +20,8 @@ var fontSizes = exports.fontSizes = {
     'xl': "calc(".concat(_sizes["default"].avatar.xl, " * .4)")
   },
   'xs': '11px',
-  'tiny': '12px',
-  'sm': '0.875rem',
+  'tiny': "".concat(fontSize.tiny, "px"),
+  'sm': "".concat(fontSize.sm, "px"),
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),
   'xl': "".concat(fontSizeBase * 1.5, "rem"),

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

@@ -5,13 +5,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var header = {
   px: 'lg',
   py: 'md',
   minHeight: '75px',
   border: 'none',
   '&.is-hovered': {
-    backgroundColor: 'gray-100'
+    backgroundColor: _onyxTokens.astroTokens.color.gray[100]
   },
   '&.is-focused': {
     outline: '2px solid',