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

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
+import { astroTokensDark } from '@pingux/onyx-tokens';
 var nextGen = {
   color: 'text.primary',
   '&.is-hovered': {
@@ -32,28 +33,28 @@ var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
   fontWeight: '2'
 });
 var copyRightLink = _objectSpread(_objectSpread({}, nextGen), {}, {
-  color: 'gray-400'
+  color: astroTokensDark.color.gray[400]
 });
 var footerLink = _objectSpread(_objectSpread({}, nextGen), {}, {
-  color: 'gray-400'
+  color: astroTokensDark.color.gray[400]
 });
 var footerEALink = _objectSpread(_objectSpread({}, nextGen), {}, {
-  color: 'gray-400'
+  color: astroTokensDark.color.gray[400]
 });
 var app = {
-  color: 'blue-400',
+  color: astroTokensDark.color.blue[400],
   '&.is-hovered': {
     textDecoration: 'underline',
-    textDecorationColor: 'blue-300',
-    color: 'blue-300'
+    textDecorationColor: astroTokensDark.color.blue[300],
+    color: astroTokensDark.color.blue[300]
   },
   '&.is-pressed': {
-    color: 'blue-300',
-    textDecorationColor: 'blue-300',
+    color: astroTokensDark.color.blue[300],
+    textDecorationColor: astroTokensDark.color.blue[300],
     textDecoration: 'underline'
   },
   '&:visited': {
-    color: 'purple-100'
+    color: astroTokensDark.color.purple[100]
   }
 };
 export default {

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

@@ -1,3 +1,4 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 import { colors } from '../colors';
 export var listViewItem = {
   styledListItem: {
@@ -29,7 +30,7 @@ export var listViewItem = {
     }
   },
   expandIcon: {
-    color: 'gray-100',
+    color: astroTokensDark.color.gray[100],
     fill: "".concat(colors.secondary, " !important")
   },
   expandableRow: {
@@ -45,21 +46,21 @@ export var listView = {
 };
 export var lisViewItemChart = {
   title: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   count: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   countLabel: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   chartLabel: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   trend: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   chartButton: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   }
 };

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

@@ -1,32 +1,33 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 export var menuItem = {
   item: {
     bg: 'transparent',
     padding: '12px 12px',
     outline: 'none',
-    color: 'gray-400',
+    color: astroTokensDark.color.gray[400],
     cursor: 'pointer',
     '&.is-hovered': {
       bg: '#2C323A',
-      color: 'gray-200',
+      color: astroTokensDark.color.gray[200],
       '> *': {
-        color: 'gray-200'
+        color: astroTokensDark.color.gray[200]
       }
     },
     '&.is-focused': {
       bg: '#2C323A',
-      color: 'gray-200',
+      color: astroTokensDark.color.gray[200],
       outline: '1px solid',
       outlineOffset: '1px',
       outlineColor: 'primary',
       '> *': {
-        color: 'gray-200'
+        color: astroTokensDark.color.gray[200]
       }
     },
     '&.is-selected, &.is-pressed': {
       color: 'text.secondary',
-      bg: 'gray-800',
+      bg: astroTokensDark.color.gray[800],
       '> *': {
-        color: 'gray-200'
+        color: astroTokensDark.color.gray[200]
       }
     }
   },

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

@@ -1,3 +1,4 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 export var message = {
   item: {
     backgroundColor: 'light',
@@ -7,7 +8,7 @@ export var message = {
     },
     '&.is-success': {
       bg: 'light',
-      borderLeftColor: 'green-500',
+      borderLeftColor: astroTokensDark.color.green[500],
       color: 'text.message'
     },
     '&.is-success, > .is-success': {
@@ -16,7 +17,7 @@ export var message = {
     },
     '&.is-warning': {
       bg: 'light',
-      borderLeftColor: 'yellow-500',
+      borderLeftColor: astroTokensDark.color.yellow[500],
       color: 'text.message'
     },
     '&.is-warning, > .is-warning': {
@@ -52,7 +53,7 @@ export var message = {
       }
     },
     '&.is-error': {
-      borderLeftColor: 'red-500'
+      borderLeftColor: astroTokensDark.color.red[500]
     }
   }
 };

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

@@ -1,13 +1,14 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 export var text = {
   listViewItemExpandedText: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   listViewItemText: {
     color: 'text.secondary'
   },
   searchNavTabLabel: {
     px: 'lg',
-    color: 'gray-400',
+    color: astroTokensDark.color.gray[400],
     '.is-selected &, .is-hovered &': {
       color: 'white'
     },
@@ -19,20 +20,20 @@ export var text = {
     }
   },
   listViewItemTextSelected: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   },
   listViewItemSubtext: {
-    color: 'gray-400'
+    color: astroTokensDark.color.gray[400]
   },
   itemTitle: {
     fontWeight: 2,
     color: 'text.secondary'
   },
   copyRightText: {
-    color: 'gray-400'
+    color: astroTokensDark.color.gray[400]
   },
   placeholder: {
-    color: 'gray-400',
+    color: astroTokensDark.color.gray[400],
     fontWeight: 1
   },
   messagesText: {
@@ -46,6 +47,6 @@ export var text = {
     color: 'text.secondary'
   },
   pageHeaderTitle: {
-    color: 'gray-100'
+    color: astroTokensDark.color.gray[100]
   }
 };

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

@@ -1,3 +1,4 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 import { colors } from '../colors';
 import { avatar } from './avatar';
 import callout from './callout';
@@ -18,22 +19,22 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
-    color: 'gray-400',
+    color: astroTokensDark.color.gray[400],
     '&.is-focused': {
-      color: 'gray-200',
+      color: astroTokensDark.color.gray[200],
       bg: '#2C323A'
     },
     '&.is-selected': {
-      color: 'gray-200',
+      color: astroTokensDark.color.gray[200],
       bg: '#2C323A',
       '&.is-focused': {
-        color: 'gray-200'
+        color: astroTokensDark.color.gray[200]
       }
     },
     '&.is-condensed': {
-      color: 'gray-400',
+      color: astroTokensDark.color.gray[400],
       '&.is-focused': {
-        color: 'gray-200'
+        color: astroTokensDark.color.gray[200]
       }
     },
     '&.is-focus-visible': {
@@ -90,7 +91,7 @@ var rockerButton = {
   },
   thumbSwitch: {
     backgroundColor: 'backgroundBase',
-    color: 'blue-400',
+    color: astroTokensDark.color.blue[400],
     '&.is-selected': {
       color: 'black',
       '& > div.status-icon': {
@@ -113,57 +114,57 @@ var attachment = {
 };
 var tooltip = {
   inline: {
-    color: 'blue-400'
+    color: astroTokensDark.color.blue[400]
   }
 };
 var statusIcon = {
   base: {
     '&.is-default': {
-      bg: 'gray-100',
+      bg: astroTokensDark.color.gray[100],
       span: {
         color: 'black'
       }
     },
     '&.is-critical': {
-      bg: 'red-500',
+      bg: astroTokensDark.color.red[500],
       span: {
         color: 'black'
       }
     },
     '&.is-warning': {
-      bg: 'yellow-500',
+      bg: astroTokensDark.color.yellow[500],
       span: {
         color: 'black'
       }
     },
     '&.is-info': {
-      bg: 'blue-500',
+      bg: astroTokensDark.color.blue[500],
       span: {
         color: 'black'
       }
     },
     '&.is-major': {
-      bg: 'orange-500',
+      bg: astroTokensDark.color.orange[500],
       span: {
         color: 'black'
       }
     },
     '&.is-minor': {
-      bg: 'yellow-500',
+      bg: astroTokensDark.color.yellow[500],
       span: {
         color: 'black'
       }
     },
     '&.is-warning-neutral': {
-      bg: 'gray-700',
+      bg: astroTokensDark.color.gray[700],
       span: {
-        color: 'gray-100'
+        color: astroTokensDark.color.gray[100]
       }
     },
     '&.is-fatal': {
-      bg: 'gray-100',
+      bg: astroTokensDark.color.gray[100],
       span: {
-        color: 'gray-700'
+        color: astroTokensDark.color.gray[700]
       }
     },
     '&.is-selected.is-selected': {

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

@@ -9,116 +9,117 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
+import { astroTokens } from '@pingux/onyx-tokens';
 import { nextGenColors } from '../tokens/colorTokens';
 import { iconWrapper } from './iconWrapper';
 import twoTone from './twoTone';
 var subColors = {
-  lightblue: nextGenColors['blue-100'],
-  lightindigo: nextGenColors['indigo-100'],
-  lightpurple: nextGenColors['purple-100'],
-  lightpink: nextGenColors['pink-100'],
-  lightred: nextGenColors['red-100'],
-  lightorange: nextGenColors['orange-100'],
-  lightyellow: nextGenColors['yellow-100'],
-  lightgreen: nextGenColors['green-100'],
-  lightteal: nextGenColors['teal-100'],
-  lightcyan: nextGenColors['cyan-100'],
-  darkblue: nextGenColors['blue-600'],
-  darkindigo: nextGenColors['indigo-700'],
-  darkpurple: nextGenColors['purple-500'],
-  darkpink: nextGenColors['pink-600'],
-  darkred: nextGenColors['red-700'],
-  darkorange: nextGenColors['orange-700'],
-  darkyellow: nextGenColors['yellow-800'],
-  darkgreen: nextGenColors['green-800'],
-  darkteal: nextGenColors['teal-700'],
-  darkcyan: nextGenColors['cyan-800'],
-  mediumblue: nextGenColors['blue-600'],
-  mediumindigo: nextGenColors['indigo-600'],
-  mediumpurple: nextGenColors['purple-600'],
-  mediumpink: nextGenColors['pink-600'],
-  mediumred: nextGenColors['red-600'],
-  mediumorange: nextGenColors['orange-600'],
-  mediumyellow: nextGenColors['yellow-600'],
-  mediumgreen: nextGenColors['green-700'],
-  mediumteal: nextGenColors['teal-600'],
-  mediumcyan: nextGenColors['cyan-700'],
-  primary: nextGenColors.blue,
-  secondary: nextGenColors['gray-600'],
-  info: nextGenColors.blue,
-  danger: nextGenColors.red,
-  light: nextGenColors['gray-100'],
-  dark: nextGenColors['gray-800']
+  lightblue: astroTokens.color.blue[100],
+  lightindigo: astroTokens.color.indigo[100],
+  lightpurple: astroTokens.color.purple[100],
+  lightpink: astroTokens.color.pink[100],
+  lightred: astroTokens.color.red[100],
+  lightorange: astroTokens.color.orange[100],
+  lightyellow: astroTokens.color.yellow[100],
+  lightgreen: astroTokens.color.green[100],
+  lightteal: astroTokens.color.teal[100],
+  lightcyan: astroTokens.color.cyan[100],
+  darkblue: astroTokens.color.blue[600],
+  darkindigo: astroTokens.color.indigo[700],
+  darkpurple: astroTokens.color.purple[500],
+  darkpink: astroTokens.color.pink[600],
+  darkred: astroTokens.color.red[700],
+  darkorange: astroTokens.color.orange[700],
+  darkyellow: astroTokens.color.yellow[800],
+  darkgreen: astroTokens.color.green[800],
+  darkteal: astroTokens.color.teal[700],
+  darkcyan: astroTokens.color.cyan[800],
+  mediumblue: astroTokens.color.blue[600],
+  mediumindigo: astroTokens.color.indigo[600],
+  mediumpurple: astroTokens.color.purple[600],
+  mediumpink: astroTokens.color.pink[600],
+  mediumred: astroTokens.color.red[600],
+  mediumorange: astroTokens.color.orange[600],
+  mediumyellow: astroTokens.color.yellow[600],
+  mediumgreen: astroTokens.color.green[700],
+  mediumteal: astroTokens.color.teal[600],
+  mediumcyan: astroTokens.color.cyan[700],
+  primary: astroTokens.color.primary,
+  secondary: astroTokens.color.gray[600],
+  info: astroTokens.color.primary,
+  danger: astroTokens.color.critical,
+  light: astroTokens.color.gray[100],
+  dark: 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: astroTokens.color.blue[500],
+  indigo: astroTokens.color.indigo[500],
+  purple: astroTokens.color.purple[500],
+  pink: astroTokens.color.pink[500],
+  red: astroTokens.color.red[500],
+  orange: astroTokens.color.orange[500],
+  yellow: astroTokens.color.yellow[500],
+  green: astroTokens.color.green[500],
+  teal: astroTokens.color.teal[500],
+  cyan: astroTokens.color.cyan[500],
+  active: astroTokens.color.blue[500]
 };
 export var critical = {
   bright: colorsObject.red,
-  dark: nextGenColors['red-700'],
-  light: nextGenColors['red-100']
+  dark: astroTokens.color.red.dark,
+  light: astroTokens.color.red.light
 };
 export var success = {
-  bright: nextGenColors['green-500'],
-  dark: nextGenColors['green-800'],
-  light: nextGenColors['green-100']
+  bright: astroTokens.color.green[500],
+  dark: astroTokens.color.green.dark,
+  light: astroTokens.color.green.light
 };
 export var warning = {
   bright: colorsObject.yellow,
-  dark: nextGenColors['yellow-800'],
-  light: nextGenColors['yellow-100']
+  dark: astroTokens.color.yellow.dark,
+  light: astroTokens.color.yellow.light
 };
 export var info = {
   bright: colorsObject.blue,
-  dark: nextGenColors['blue-600'],
-  light: nextGenColors['blue-100']
+  dark: astroTokens.color.blue.dark,
+  light: astroTokens.color.blue.light
 };
 var text = {
-  primary: nextGenColors['gray-900'],
-  secondary: nextGenColors['gray-500'],
-  message: nextGenColors['gray-700'],
-  fieldHelper: nextGenColors['gray-500']
+  primary: astroTokens.color.font.base,
+  secondary: astroTokens.color.gray[500],
+  message: astroTokens.color.gray[700],
+  fieldHelper: astroTokens.color.gray[500]
 };
 var border = {
-  base: nextGenColors['gray-300'],
-  input: nextGenColors['gray-500'],
-  separator: nextGenColors['gray-200'],
-  hairline: '#e7eef4'
+  base: astroTokens.color.gray[300],
+  input: astroTokens.color.gray[500],
+  separator: astroTokens.color.gray[200],
+  hairline: astroTokens.color.common.border
 };
 var overrides = {
   neutral: {
     80: '#69788B'
   },
   focus: colorsObject.active,
-  disabled: nextGenColors['gray-100']
+  disabled: astroTokens.color.gray[100]
 };
-var background = nextGenColors['blue-100'];
+var background = astroTokens.color.blue[100];
 var backgroundBase = 'white';
-var backgroundSecondary = nextGenColors['gray-100'];
-var backgroundCard = nextGenColors['blue-100'];
+var backgroundSecondary = astroTokens.color.gray[100];
+var backgroundCard = astroTokens.color.blue[100];
 var backgroundSuggestion = '#ecf0f5';
-var backgroundHover = nextGenColors['gray-100'];
+var backgroundHover = astroTokens.color.gray[100];
 var card = {
-  blue: nextGenColors['blue-100'],
-  gray: nextGenColors['gray-100']
+  blue: astroTokens.color.blue[100],
+  gray: astroTokens.color.gray[100]
 };
 var badge = {
-  textColor: nextGenColors.font.base,
-  background: nextGenColors['gray-100']
+  textColor: astroTokens.color.font.base,
+  background: astroTokens.color.gray[100]
 };
 var codeEditor = {
-  backgroundColor: nextGenColors['gray-900'],
-  headerColor: nextGenColors['gray-900']
+  backgroundColor: astroTokens.color.gray[900],
+  headerColor: astroTokens.color.gray[900]
 };
 var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {

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

@@ -1,38 +1,38 @@
-import { nextGenColors } from '../tokens/colorTokens';
+import { astroTokens } from '@pingux/onyx-tokens';
 var twoTone = {
   bg: {
-    orange: nextGenColors['orange-100'],
-    cyan: nextGenColors['cyan-100'],
-    green: nextGenColors['green-100'],
-    purple: nextGenColors['purple-100'],
-    pink: nextGenColors['pink-100'],
-    red: nextGenColors['red-100'],
-    yellow: nextGenColors['yellow-100'],
-    teal: nextGenColors['teal-100'],
-    blue: nextGenColors['blue-100'],
-    indigo: nextGenColors['indigo-100'],
-    lightBlue: nextGenColors['blue-100'],
-    lightPink: nextGenColors['pink-100'],
-    lightGreen: nextGenColors['green-100'],
-    lightYellow: nextGenColors['yellow-100'],
-    lightIndigo: nextGenColors['indigo-100']
+    orange: astroTokens.color.orange[100],
+    cyan: astroTokens.color.cyan[100],
+    green: astroTokens.color.green[100],
+    purple: astroTokens.color.purple[100],
+    pink: astroTokens.color.pink[100],
+    red: astroTokens.color.red[100],
+    yellow: astroTokens.color.yellow[100],
+    teal: astroTokens.color.teal[100],
+    blue: astroTokens.color.blue[100],
+    indigo: astroTokens.color.indigo[100],
+    lightBlue: astroTokens.color.blue[100],
+    lightPink: astroTokens.color.pink[100],
+    lightGreen: astroTokens.color.green[100],
+    lightYellow: astroTokens.color.yellow[100],
+    lightIndigo: astroTokens.color.indigo[100]
   },
   text: {
-    orange: nextGenColors['orange-800'],
-    cyan: nextGenColors['cyan-800'],
-    green: nextGenColors['green-800'],
-    purple: nextGenColors['purple-800'],
-    pink: nextGenColors['pink-800'],
-    red: nextGenColors['red-800'],
-    yellow: nextGenColors['yellow-800'],
-    teal: nextGenColors['teal-800'],
-    blue: nextGenColors['blue-600'],
-    indigo: nextGenColors['indigo-700'],
-    lightBlue: nextGenColors['blue-500'],
-    lightPink: nextGenColors['pink-600'],
-    lightGreen: nextGenColors['green-800'],
-    lightYellow: nextGenColors['yellow-800'],
-    lightIndigo: nextGenColors['indigo-700']
+    orange: astroTokens.color.orange[800],
+    cyan: astroTokens.color.cyan[800],
+    green: astroTokens.color.green[800],
+    purple: astroTokens.color.purple[800],
+    pink: astroTokens.color.pink[800],
+    red: astroTokens.color.red[800],
+    yellow: astroTokens.color.yellow[800],
+    teal: astroTokens.color.teal[800],
+    blue: astroTokens.color.blue[600],
+    indigo: astroTokens.color.indigo[700],
+    lightBlue: astroTokens.color.blue[500],
+    lightPink: astroTokens.color.pink[600],
+    lightGreen: astroTokens.color.green[800],
+    lightYellow: astroTokens.color.yellow[800],
+    lightIndigo: astroTokens.color.indigo[700]
   }
 };
 export default twoTone;

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
+import { astroTokens } from '@pingux/onyx-tokens';
 import { isSafari } from '../../safariAgent.js';
 import colors from './colors/colors';
 import tShirtSizes from './customProperties/tShirtSizes';
@@ -25,10 +26,10 @@ export var checkbox = {
   }
 };
 export var select = {
-  borderRadius: '4px',
+  borderRadius: astroTokens.radius.input,
   borderColor: 'border.input',
   color: 'text.primary',
-  height: '50px',
+  height: astroTokens.size.input.height,
   '&.is-disabled': {
     opacity: 1,
     borderColor: 'border.input',
@@ -62,7 +63,7 @@ export var comboBox = {
   input: {
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderRadius: '4px',
+    borderRadius: astroTokens.radius.input,
     height: '50px'
   },
   button: {

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

@@ -7,8 +7,11 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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) { _defineProperty(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; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import { astroTokens } from '@pingux/onyx-tokens';
 import merge from 'deepmerge';
 import { themes } from '../../../utils/devUtils/constants/themes';
 import theme from '../../theme';
@@ -37,7 +40,8 @@ var nextGenTheme = {
   fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: {
-    body: '1.6',
+    // @ts-expect-error - line-height is in default tokens but not in the type definition
+    body: astroTokens["default"]['line-height'].base,
     xs: '1.2',
     sm: '1.4',
     md: '1.75'
@@ -51,7 +55,7 @@ var nextGenTheme = {
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
   shadows: {
-    standard: '0 1px 3px 0 rgba(0, 0, 0, 0.13)'
+    standard: _concatInstanceProperty(_context = "0 ".concat(astroTokens.spacing.card.shadow.y, " ")).call(_context, astroTokens.spacing.card.shadow.blur, " 0 rgba(0, 0, 0, 0.13)")
   },
   sizes: sizes,
   badges: badges,