@pingux/astro 2.173.0 → 2.174.0-alpha.0

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,

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

@@ -1,9 +1,13 @@
+import { astroTokens } from '@pingux/onyx-tokens';
+
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSizes = astroTokens["default"]['font-size'];
 var avatar = {
-  sm: '24px',
+  sm: "".concat(astroTokens.size.avatar.sm, "px"),
   md: '32px',
   xmd: '44px',
-  lg: '72px',
-  xl: '104px'
+  lg: "".concat(astroTokens.size.avatar.lg, "px"),
+  xl: "".concat(astroTokens.size.avatar.xl, "px")
 };
 var avatarLogo = {
   sm: '14px',
@@ -13,11 +17,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/styles/themes/next-gen/spacing.js

@@ -1,9 +1,10 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 var scale = {
-  xs: '.25rem',
-  sm: '.5rem',
-  md: '1rem',
-  lg: '1.5rem',
-  xl: '3rem',
+  xs: astroTokens.spacing.xs,
+  sm: astroTokens.spacing.sm,
+  md: astroTokens.spacing.md,
+  lg: astroTokens.spacing.lg,
+  xl: astroTokens.spacing.xl,
   xx: '4rem'
 };
 export default scale;

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

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import { astroTokens } from '@pingux/onyx-tokens';
 import sizes from './sizes';
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSize = astroTokens["default"]['font-size'];
 var fontSizeBase = 0.9375;
 export var fontSizes = {
   avatar: {
@@ -9,8 +12,8 @@ export var fontSizes = {
     'xl': "calc(".concat(sizes.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/styles/themes/next-gen/variants/accordionGrid.js

@@ -1,10 +1,11 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 var header = {
   px: 'lg',
   py: 'md',
   minHeight: '75px',
   border: 'none',
   '&.is-hovered': {
-    backgroundColor: 'gray-100'
+    backgroundColor: astroTokens.color.gray[100]
   },
   '&.is-focused': {
     outline: '2px solid',

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

@@ -1,3 +1,4 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 import sizes from '../sizes';
 export var avatar = {
   cursor: 'pointer',
@@ -88,7 +89,7 @@ export var avatar = {
   '&.is-logo': {
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: 'gray-200',
+    borderColor: astroTokens.color.gray[200],
     backgroundColor: 'transparent',
     '&.size-sm': {
       img: {

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

@@ -9,10 +9,12 @@ 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 buttons from './button';
 var badgeFont = {
-  fontSize: 'tiny',
-  fontWeight: '2'
+  fontSize: astroTokens.size.badge,
+  // @ts-expect-error - font-weight is in default tokens but not in the type definition
+  fontWeight: astroTokens["default"]['font-weight'].badge
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -38,8 +40,8 @@ var badgeIconStyle = {
 var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
-  py: '.25em',
-  px: '.34em',
+  py: astroTokens.spacing.badge['padding-y'],
+  px: astroTokens.spacing.badge['padding-x'],
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
@@ -51,11 +53,11 @@ var baseBadge = _objectSpread({
 }, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
-  color: 'blue-600'
+  color: astroTokens.color.blue[600]
 });
 var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#f6f8fa !important',
-  color: 'gray-900'
+  color: astroTokens.color.gray[900]
 });
 var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#D3EDDF !important',
@@ -63,11 +65,11 @@ var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
 });
 var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#F8D8D5 !important',
-  color: 'red-700'
+  color: astroTokens.color.red[700]
 });
 var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#FFF1DA !important',
-  color: 'yellow-800'
+  color: astroTokens.color.yellow[800]
 });
 var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'black !important',

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

@@ -9,16 +9,11 @@ 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 chroma from 'chroma-js';
 import { copyButton } from '../codeView/codeView';
-import colors from '../colors/colors';
 import tShirtSizes from '../customProperties/tShirtSizes';
 import { commonContentProps } from './box';
-var primaryBlue = colors.primary,
-  primaryBlueHover = colors.active_hover,
-  primaryBluePress = colors.active_pressed,
-  criticalRedHover = colors.critical_hover,
-  criticalRedPress = colors.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'
 };
@@ -59,8 +54,8 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   borderRadius: '1.75rem',
   border: '1px solid',
   borderColor: 'border.base',
-  px: '20px',
-  py: '12px',
+  px: astroTokens.spacing.button['padding-x'],
+  py: astroTokens.spacing.button['padding-y'],
   maxHeight: '48.5px',
   height: '48.5px',
   '&.is-disabled': {
@@ -84,34 +79,34 @@ var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'primary',
   borderColor: 'primary',
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlueHover,
-    borderColor: primaryBlueHover
+    backgroundColor: astroTokens.color.button.primary.hover.bg,
+    borderColor: astroTokens.color.button.primary.hover.border
   }, boxShadowNone),
   '&.is-focused': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press,
     outline: '2px solid'
   }
 });
 var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
-  borderColor: 'primary',
-  color: 'primary',
+  borderColor: astroTokens.color.primary,
+  color: astroTokens.color.primary,
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press,
     color: 'white',
     path: {
       fill: 'white'
     }
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlue,
-    borderColor: primaryBlue,
+    backgroundColor: astroTokens.color.button.primary.hover.bg,
+    borderColor: astroTokens.color.button.primary.hover.border,
     color: 'white',
     path: {
       fill: 'white'
@@ -121,18 +116,18 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
   borderColor: 'border.base',
-  color: 'font.base',
+  color: astroTokens.color.font.base,
   '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     outlineColor: 'gray-700',
     backgroundColor: 'backgroundSecondary'
   }),
   '&.is-pressed': {
     backgroundColor: 'backgroundSecondary',
-    color: 'font.base'
+    color: astroTokens.color.font.base
   },
   '&.is-hovered': _objectSpread({
     backgroundColor: 'backgroundSecondary',
-    color: 'font.base'
+    color: astroTokens.color.font.base
   }, boxShadowNone)
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -158,12 +153,12 @@ var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
     backgroundColor: 'critical.dark'
   }),
   '&.is-pressed': {
-    backgroundColor: criticalRedPress,
-    borderColor: criticalRedPress
+    backgroundColor: astroTokens.color.button.critical.press,
+    borderColor: astroTokens.color.button.critical.press
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: criticalRedHover,
-    borderColor: criticalRedHover,
+    backgroundColor: astroTokens.color.button.critical.hover,
+    borderColor: astroTokens.color.button.critical.hover,
     color: 'white'
   }, boxShadowNone)
 });
@@ -178,16 +173,16 @@ var inline = _objectSpread(_objectSpread({}, buttonBase), {}, {
   paddingTop: '0px',
   paddingBottom: '0px',
   backgroundColor: 'transparent',
-  color: primaryBlue,
-  borderColor: primaryBlue,
+  color: astroTokens.color.primary,
+  borderColor: astroTokens.color.primary,
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press,
     color: 'white'
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlue,
-    borderColor: primaryBlue,
+    backgroundColor: astroTokens.color.primary,
+    borderColor: astroTokens.color.primary,
     color: 'white',
     path: {
       fill: 'white'
@@ -208,16 +203,16 @@ var inlinePrimary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   color: 'white',
   borderColor: 'primary',
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlueHover,
-    borderColor: primaryBlueHover
+    backgroundColor: astroTokens.color.button.primary.hover,
+    borderColor: astroTokens.color.button.primary.hover
   }, boxShadowNone),
   '&.is-focused': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press,
     outline: '2px solid'
   }
 });
@@ -235,12 +230,12 @@ var link = {
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',
-  px: '1.25rem',
-  py: '.75rem',
+  px: astroTokens.spacing.button['padding-x'],
+  py: astroTokens.spacing.button['padding-y'],
   '&.is-pressed': {
     textDecoration: 'underline',
     outline: 'none',
-    color: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: chroma.mix(astroTokens.color.primary, 'black', 0.125, 'rgb').hex()
   },
   '&.is-focused': {
     textDecoration: 'underline',
@@ -255,7 +250,7 @@ var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
   display: 'inline-flex',
   path: {
-    fill: primaryBlue
+    fill: astroTokens.color.primary
   }
 });
 var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
@@ -265,7 +260,7 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
 var inlineWithIcon = _objectSpread(_objectSpread({}, inline), {}, {
   display: 'inline-flex',
   path: {
-    fill: primaryBlue
+    fill: astroTokens.color.primary
   }
 });
 var inlinePrimaryWithIcon = _objectSpread(_objectSpread({}, inlinePrimary), {}, {
@@ -273,20 +268,20 @@ var inlinePrimaryWithIcon = _objectSpread(_objectSpread({}, inlinePrimary), {},
   color: 'white'
 });
 var colorBlock = {
-  bg: 'gray-200',
-  borderColor: 'gray-200',
+  bg: astroTokens.color.gray[200],
+  borderColor: 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: astroTokens.color.blue[100],
+    borderColor: astroTokens.color.blue[100]
   }, boxShadowNone),
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
-    bg: 'blue-100',
-    borderColor: 'blue-100'
+    bg: astroTokens.color.blue[100],
+    borderColor: astroTokens.color.blue[100]
   },
   '&>svg': {
     color: 'text.primary',
@@ -294,24 +289,24 @@ var colorBlock = {
   }
 };
 var colorBlockPrimary = _objectSpread(_objectSpread({}, colorBlock), {}, {
-  bg: primaryBlue,
-  borderColor: primaryBlue,
+  bg: astroTokens.color.primary,
+  borderColor: astroTokens.color.primary,
   '& span': {
     color: 'white',
     textAlign: 'left'
   },
   '&.is-hovered': _objectSpread({
-    backgroundColor: primaryBlueHover,
-    borderColor: primaryBlueHover,
+    backgroundColor: astroTokens.color.button.primary.hover,
+    borderColor: astroTokens.color.button.primary.hover,
     color: 'white'
   }, boxShadowNone),
   '&.is-pressed': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press
   },
   '&.is-focused': {
-    backgroundColor: primaryBluePress,
-    borderColor: primaryBluePress,
+    backgroundColor: astroTokens.color.button.primary.press,
+    borderColor: astroTokens.color.button.primary.press,
     outline: '2px solid'
   }
 });
@@ -330,7 +325,7 @@ var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
     outlineOffset: '3px'
   },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: astroTokens.color.gray[100],
     path: {
       fill: 'dark'
     }
@@ -375,13 +370,13 @@ var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
 var invertedIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
   '&.is-hovered': {
     boxShadow: 'none !important',
-    backgroundColor: 'blue-600'
+    backgroundColor: astroTokens.color.blue[600]
   },
   '&.is-pressed': {
-    backgroundColor: 'blue-600'
+    backgroundColor: astroTokens.color.blue[600]
   },
   '&.is-disabled': {
-    backgroundColor: 'gray-300'
+    backgroundColor: astroTokens.color.gray[300]
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
@@ -394,13 +389,13 @@ var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   alignItems: 'center',
   justifyContent: 'center',
   '&.is-hovered': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+    backgroundColor: chroma.mix(astroTokens.color.primary, 'black', 0.075, 'rgb').hex(),
     path: {
       fill: 'white'
     }
   },
   '&.is-pressed': {
-    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    backgroundColor: chroma.mix(astroTokens.color.primary, 'black', 0.125, 'rgb').hex(),
     path: {
       fill: 'white'
     }
@@ -413,7 +408,7 @@ var hintButton = {
     fill: 'dark'
   },
   '&.is-hovered': {
-    backgroundColor: 'gray-100',
+    backgroundColor: astroTokens.color.gray[100],
     path: {
       fill: 'dark'
     }
@@ -426,7 +421,7 @@ var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   width: 14,
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-pressed': {
-    backgroundColor: 'gray-100',
+    backgroundColor: astroTokens.color.gray[100],
     path: {
       fill: 'dark'
     }
@@ -474,10 +469,10 @@ var iconButtons = {
       p: 0,
       width: 14,
       '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
-        backgroundColor: 'gray-100'
+        backgroundColor: astroTokens.color.gray[100]
       }),
       '&.is-pressed': {
-        backgroundColor: 'gray-100',
+        backgroundColor: astroTokens.color.gray[100],
         path: {
           fill: 'dark'
         }
@@ -513,13 +508,13 @@ var iconButtons = {
     height: '32px',
     '&.is-hovered': {
       boxShadow: 'none !important',
-      backgroundColor: 'gray-100',
+      backgroundColor: astroTokens.color.gray[100],
       path: {
         fill: 'dark'
       }
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-100',
+      backgroundColor: astroTokens.color.gray[100],
       path: {
         fill: 'dark'
       }
@@ -528,7 +523,8 @@ var iconButtons = {
   hintButton: _objectSpread({}, hintButton),
   passwordVisibilityIcon: _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), commonContentProps), {}, {
     right: 0,
-    padding: '12px 20px',
+    py: astroTokens.spacing.button['padding-y'],
+    px: astroTokens.spacing.button['padding-x'],
     border: '0px solid !important',
     '&:hover, &.is-pressed': {
       background: 'transparent',
@@ -537,7 +533,7 @@ var iconButtons = {
     '&.is-focused': {
       outline: '2px solid',
       outlineOffset: '2px',
-      outlineColor: 'gray-700'
+      outlineColor: astroTokens.color.gray[700]
     }
   })
 };
@@ -551,7 +547,7 @@ var listBoxLink = {
   '&.is-pressed': {
     textDecoration: 'underline',
     outline: 'none',
-    color: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: chroma.mix(astroTokens.color.primary, 'black', 0.125, 'rgb').hex()
   },
   '&.is-focused': {
     textDecoration: 'underline',
@@ -570,12 +566,13 @@ var listBoxLink = {
 };
 var ButtonInputGroupContentRight = _objectSpread(_objectSpread(_objectSpread({}, tertiary), commonContentProps), {}, {
   right: 0,
-  padding: '12px 20px',
+  py: astroTokens.spacing.button['padding-y'],
+  px: astroTokens.spacing.button['padding-x'],
   borderRadius: '0px 4px 4px 0px !important',
   borderWidth: '0px !important',
   borderLeftWidth: '1px !important',
   borderRightWidth: '1px !important',
-  borderLeftColor: 'gray-500'
+  borderLeftColor: astroTokens.color.gray[500]
 });
 var buttons = {
   neutral: neutral,

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

@@ -1,4 +1,4 @@
-import tShirtSizes from '../customProperties/tShirtSizes';
+import { astroTokens } from '@pingux/onyx-tokens';
 var base = {
   width: '100%',
   backgroundColor: 'light',
@@ -26,9 +26,9 @@ var base = {
 var icon = {
   ml: '0',
   mr: 'md',
-  minWidth: "".concat(tShirtSizes.sm, " !important"),
-  width: "".concat(tShirtSizes.sm, " !important"),
-  height: "".concat(tShirtSizes.sm, " !important")
+  minWidth: "".concat(astroTokens.size.alert.icon, "px !important"),
+  width: "".concat(astroTokens.size.alert.icon, "px !important"),
+  height: "".concat(astroTokens.size.alert.icon, "px !important")
 };
 export default {
   base: base,

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

@@ -9,12 +9,13 @@ 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 { flat } from '../../../../components/Card/Card.styles';
 var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'gray-200',
+  borderColor: astroTokens.color.gray[200],
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     backgroundColor: 'backgroundBase',
@@ -30,7 +31,7 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, flat), {}, {
   p: 'lg',
-  borderColor: 'gray-200',
+  borderColor: astroTokens.color.gray[200],
   lineHeight: 'body',
   boxShadow: 'none'
 });
@@ -51,7 +52,7 @@ var light = _objectSpread(_objectSpread({}, flat), {}, {
   gap: 'lg'
 });
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
-  borderColor: 'gray-200',
+  borderColor: astroTokens.color.gray[200],
   '&.is-hovered': {
     borderColor: 'active',
     bg: 'default'