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

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

@@ -9,29 +9,30 @@ 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 { text } from './text';
 var defaultFocus = {
   boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
 };
 var readOnlyandDisabledStyles = {
-  backgroundColor: 'disabled',
+  backgroundColor: astroTokens.color.input['readonly-bg'],
   border: '1px solid',
-  borderColor: 'border.input',
+  borderColor: astroTokens.color.input.border,
   opacity: 1
 };
 export var input = {
-  height: '50px',
+  height: astroTokens.size.input.height,
   fontSize: 'md',
   fontFamily: 'standard',
   p: '0.75rem',
   backgroundColor: 'backgroundBase',
   borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
-  borderRadius: '4px',
+  borderRadius: astroTokens.radius.input,
   fontWeight: 1,
   '&::placeholder': text.placeholder,
   '.is-float-label &': {
-    height: '50px'
+    height: astroTokens.size.input.height
   }
 };
 input.large = _objectSpread(_objectSpread({}, input), {}, {
@@ -69,7 +70,7 @@ input.containedIcon = {
 };
 export var fieldControlWrapper = {
   '> textarea': {
-    borderRadius: '4px',
+    borderRadius: astroTokens.radius.input,
     border: '1px solid',
     borderColor: 'border.input !important',
     outline: 'none'
@@ -99,20 +100,20 @@ export var fieldControlWrapper = {
   },
   '> button': {
     borderLeftWidth: 1,
-    borderRadius: '4px',
+    borderRadius: astroTokens.radius.input,
     border: '1px solid',
-    borderColor: 'border.input'
+    borderColor: astroTokens.color.input.border
   },
   '&.is-read-only': {
     '> input': {
-      backgroundColor: 'disabled',
+      backgroundColor: astroTokens.color.input['readonly-bg'],
       border: '1px solid',
-      borderColor: 'border.input'
+      borderColor: astroTokens.color.input.border
     },
     '> textarea': {
-      backgroundColor: 'disabled',
+      backgroundColor: astroTokens.color.input['readonly-bg'],
       border: '1px solid',
-      borderColor: 'border.input'
+      borderColor: astroTokens.color.input.border
     },
     '&:after': {
       display: 'none'
@@ -127,9 +128,9 @@ export var fieldControlWrapper = {
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
   border: '1px solid',
-  borderColor: 'border.input',
-  borderRadius: '4px',
-  minHeight: '50px',
+  borderColor: astroTokens.color.input.border,
+  borderRadius: astroTokens.radius.input,
+  minHeight: astroTokens.size.input.height,
   '&.is-focused': {
     boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
   }
@@ -143,9 +144,9 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   pr: 10,
   pb: 5,
   pl: 12,
-  borderRadius: '4px',
+  borderRadius: astroTokens.radius.input,
   alignItems: 'center',
-  minHeight: '50px',
+  minHeight: astroTokens.size.input.height,
   '> input': {
     border: 'none',
     flex: 1,
@@ -200,7 +201,7 @@ input.dropDownContentRight = {
     '&.is-focused': {
       outline: '2px solid',
       outlineOffset: '2px',
-      outlineColor: 'gray-700'
+      outlineColor: astroTokens.color['gray-700']
     }
   }
 };
@@ -210,7 +211,7 @@ input.dropDownContentLeft = {
     '&.is-focused': {
       outline: '2px solid',
       outlineOffset: '2px',
-      outlineColor: 'gray-700'
+      outlineColor: astroTokens.color['gray-700']
     }
   }
 };

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

@@ -1,8 +1,11 @@
+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'];
 export var label = {
   color: 'text.primary',
-  fontSize: 'md',
+  fontSize: fontSizes.label,
   '&.is-float-label': {
-    fontSize: 'md',
+    fontSize: fontSizes.label,
     fontWeight: 1,
     top: '15px'
   },
@@ -12,7 +15,7 @@ export var label = {
   },
   opacity: 1,
   checkbox: {
-    fontSize: 'md',
+    fontSize: fontSizes.label,
     display: 'inline-flex !important',
     div: {
       flexShrink: 0
@@ -23,7 +26,7 @@ export var label = {
   },
   radioGroup: {
     color: 'text.primary',
-    fontSize: 'md',
+    fontSize: fontSizes.label,
     mb: 'md'
   }
 };

package/lib/styles/themes/next-gen/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 { astroTokens } from '@pingux/onyx-tokens';
 import buttons, { defaultFocus } from './button';
 var navBarFocus = {
   outline: '2px solid',
@@ -17,18 +18,18 @@ var navBarFocus = {
 var app = {
   lineHeight: '160%',
   '&.is-hovered': {
-    color: 'blue-600',
-    textDecorationColor: 'blue-600'
+    color: astroTokens.color.blue[600],
+    textDecorationColor: astroTokens.color.blue[600]
   },
   '&.is-focused': _objectSpread(_objectSpread({}, navBarFocus), {}, {
     borderRadius: '2px'
   }),
   '&.is-pressed': {
-    color: 'blue-600',
-    textDecorationColor: 'blue-600'
+    color: astroTokens.color.blue[600],
+    textDecorationColor: astroTokens.color.blue[600]
   },
   '&:visited': {
-    color: 'purple-700',
+    color: astroTokens.color.purple[700],
     textDecoration: 'underline'
   }
 };
@@ -44,10 +45,10 @@ var nextGen = {
   fontFamily: 'standard',
   cursor: 'pointer',
   '&.is-hovered': {
-    color: 'blue-600'
+    color: astroTokens.color.blue[600]
   },
   '&.is-pressed': {
-    color: 'blue-600'
+    color: astroTokens.color.blue[600]
   }
 };
 var onyx = _objectSpread({}, nextGen);
@@ -68,7 +69,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     transition: 'background-color .15s ease'
   },
   '&.is-selected': {
-    color: 'blue-600',
+    color: astroTokens.color.blue[600],
     '&:before': {
       backgroundColor: 'active_light'
     }

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

@@ -1,3 +1,4 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 export var focusBoxShadow = '0 0 0 2px inset #1a73e8';
 export var borderRadius = '16px';
 export var listViewItem = {
@@ -16,19 +17,19 @@ export var listViewItem = {
   styledListItem: {
     bg: 'white',
     '&.is-selected': {
-      bg: 'gray-100'
+      bg: astroTokens.color.gray[100]
     },
     borderBottom: 'none',
     '&.has-separator': {
       borderBottom: '1px solid',
-      borderBottomColor: 'gray-200'
+      borderBottomColor: astroTokens.color.gray[200]
     },
     '&.is-hovered': {
-      bg: 'gray-100'
+      bg: astroTokens.color.gray[100]
     },
     '&.is-focused': {
       boxShadow: focusBoxShadow,
-      bg: 'gray-100'
+      bg: astroTokens.color.gray[100]
     },
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
@@ -66,14 +67,14 @@ export var listViewItem = {
       }
     },
     '&.is-hovered': {
-      bg: 'gray-100'
+      bg: astroTokens.color.gray[100]
     },
     '&.is-selected': {
-      bg: 'gray-100'
+      bg: astroTokens.color.gray[100]
     },
     '&.is-focused': {
       boxShadow: focusBoxShadow,
-      bg: 'gray-100'
+      bg: astroTokens.color.gray[100]
     }
   },
   expandableItemBody: {
@@ -89,7 +90,7 @@ export var listViewItem = {
   },
   expandableRow: {
     '&.has-separator': {
-      borderBottomColor: 'gray-200'
+      borderBottomColor: astroTokens.color.gray[200]
     },
     '&.has-separator.is-last-row': {
       border: 'none'
@@ -117,25 +118,25 @@ export var listView = {
 };
 export var lisViewItemChart = {
   title: {
-    color: 'gray-600',
+    color: astroTokens.color.gray[600],
     fontSize: 'tiny'
   },
   count: {
-    color: 'gray-600',
+    color: astroTokens.color.gray[600],
     fontSize: 'xl'
   },
   countLabel: {
-    color: 'gray-600',
+    color: astroTokens.color.gray[600],
     fontSize: 'tiny'
   },
   chartLabel: {
-    color: 'gray-600',
+    color: astroTokens.color.gray[600],
     fontSize: 'tiny'
   },
   trend: {
-    color: 'gray-600'
+    color: astroTokens.color.gray[600]
   },
   chartButton: {
-    color: 'gray-900'
+    color: astroTokens.color.gray[900]
   }
 };

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

@@ -1,3 +1,4 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 export var menu = {
   p: 'sm',
   border: '1px solid',
@@ -22,20 +23,20 @@ export var menuItem = {
     bg: 'transparent',
     padding: '12px 12px',
     outline: 'none',
-    color: 'gray-700',
+    color: astroTokens.color.gray[700],
     fontSize: 'md',
     lineHeight: 'body',
     cursor: 'pointer',
     borderRadius: '4px',
     '&.is-hovered': {
-      bg: 'gray-100',
+      bg: astroTokens.color.gray[100],
       color: '#121518',
       '> *': {
         color: '#121518'
       }
     },
     '&.is-focused': {
-      bg: 'gray-100',
+      bg: astroTokens.color.gray[100],
       color: '#121518',
       outline: '1px solid',
       outlineOffset: '1px',

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

@@ -1,3 +1,4 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 export var message = {
   wrapper: {
     gap: 'md',
@@ -10,11 +11,11 @@ export var message = {
     p: '20px 16px 20px 20px',
     wordBreak: 'break-word',
     alignItems: 'center',
-    backgroundColor: 'blue-100',
+    backgroundColor: astroTokens.color.blue[100],
     borderLeftWidth: '5px',
     borderLeftStyle: 'solid',
     borderLeftColor: 'blue',
-    color: 'gray-700',
+    color: astroTokens.color.gray[700],
     fontSize: '15px !important',
     lineHeight: '1.3',
     borderRadius: 4,
@@ -22,35 +23,35 @@ export var message = {
       minWidth: '20px',
       width: '20px',
       height: '20px',
-      color: 'gray-700',
+      color: astroTokens.color.gray[700],
       path: {
-        fill: 'gray-700',
+        fill: astroTokens.color.gray[700],
         transform: 'scale(0.96)',
         transformOrigin: 'center'
       },
       alignSelf: 'start'
     },
     '&.is-success': {
-      bg: 'green-100',
-      borderLeftColor: 'green-500',
-      color: 'gray-700'
+      bg: astroTokens.color.green[100],
+      borderLeftColor: astroTokens.color.green[500],
+      color: astroTokens.color.gray[700]
     },
     '&.is-warning': {
       bg: 'warning.light',
-      borderLeftColor: 'yellow-500',
-      color: 'gray-700 '
+      borderLeftColor: astroTokens.color.yellow[500],
+      color: astroTokens.color.gray[700]
     },
     '&.is-error, > .is-error': {
       bg: 'red-100'
     },
     '&.is-error, > button > svg': {
-      color: 'gray-700 !important',
+      color: "".concat(astroTokens.color.gray[700], " !important"),
       path: {
-        fill: 'gray-700'
+        fill: astroTokens.color.gray[700]
       }
     },
     '&.is-error': {
-      borderLeftColor: 'red-500'
+      borderLeftColor: astroTokens.color.red[500]
     }
   }
 };

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

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

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

@@ -1,3 +1,4 @@
+import { astroTokens } from '@pingux/onyx-tokens';
 var calendarBody = {
   py: 'sm',
   borderTop: '1px solid',
@@ -47,17 +48,17 @@ var calendarButton = {
     outlineOffset: '2px'
   },
   '&.is-unavailable': {
-    backgroundColor: 'gray-300',
+    backgroundColor: astroTokens.color.gray[300],
     color: 'text.primary'
   },
   '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
-    backgroundColor: 'gray-300',
+    backgroundColor: astroTokens.color.gray[300],
     color: 'text.primary',
     opacity: 1
   },
   '&.is-disabled': {
     '&.is-hovered': {
-      color: 'gray-900',
+      color: astroTokens.color.gray[900],
       backgroundColor: 'unset'
     }
   }

package/lib/styles/themes/next-gen/variants/stepper.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 spacing from '../spacing';
 var line = {
   mx: "".concat(spacing.xs, " !important"),
@@ -17,7 +18,7 @@ var line = {
   borderBottomColor: 'active',
   '&.is-inactive': {
     borderBottomStyle: 'solid',
-    borderBottomColor: 'blue-200'
+    borderBottomColor: astroTokens.color.blue[200]
   }
 };
 var stepBase = {
@@ -61,7 +62,7 @@ var step = {
   inactive: {
     '&.is-horizontal': _objectSpread({
       backgroundColor: 'backgroundBase',
-      borderColor: 'blue-200',
+      borderColor: astroTokens.color.blue[200],
       color: 'active'
     }, stepBase)
   }

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

@@ -9,33 +9,37 @@ 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';
+
+// @ts-expect-error - font-size is in default tokens but not in the type definition
+var fontSizes = 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'
@@ -45,35 +49,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'
@@ -83,7 +87,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs',
+    fontSize: fontSizes.h6,
     letterSpacing: '1px'
   }
 };
@@ -133,7 +137,7 @@ export var text = _objectSpread(_objectSpread({
     wordBreak: 'normal'
   },
   placeholder: {
-    color: 'gray-600',
+    color: astroTokens.color.gray[600],
     fontWeight: 1
   },
   paragraph: {
@@ -197,11 +201,11 @@ export var text = _objectSpread(_objectSpread({
   }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
-      color: 'gray-700',
+      color: astroTokens.color.gray[700],
       '& > a': {
         fontWeight: '600',
         textDecoration: 'underline',
-        color: 'gray-700'
+        color: astroTokens.color.gray[700]
       }
     }
   },