@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.1

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

@@ -32,13 +32,13 @@ export var defaultFocus = {
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   alignItems: 'center',
   justifyContent: 'center',
+  flexShrink: 0,
   minWidth: 'min-content',
   cursor: 'pointer',
   display: 'block',
   maxWidth: '100%',
   fontFamily: 'standard',
   fontSize: '.9375rem',
-  flexGrow: '1',
   fontWeight: 400,
   textAlign: 'center',
   verticalAlign: 'middle',
@@ -49,6 +49,7 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   borderColor: 'border.base',
   px: '20px',
   py: '12px',
+  maxHeight: '48.5px',
   height: '48.5px',
   '&.is-disabled': {
     opacity: 0.65
@@ -323,7 +324,7 @@ var baseIconButton = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
   outline: 'none',
   borderRadius: '28px',
-  border: '2px solid',
+  border: '1px solid',
   borderColor: 'transparent',
   path: {
     fill: 'dark'
@@ -377,6 +378,23 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var hintButton = {
+  backgroundColor: 'transparent',
+  path: {
+    fill: 'dark'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  }
+};
 var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   height: 14,
   p: 0,
@@ -539,11 +557,23 @@ var iconButtons = {
       }
     }
   }),
-  hintButton: {
-    bg: 'gray-100',
-    '&.is-hovered': {
-      bg: 'gray-900'
-    }
+  hintButton: _objectSpread({}, hintButton)
+};
+var listBoxLink = {
+  color: 'active',
+  transition: 'color, .15s, ease-in-and-out',
+  fontSize: 'md',
+  textDecoration: 'none',
+  px: 'md',
+  pt: 'md',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none',
+    color: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-focused': {
+    textDecoration: 'underline',
+    outline: 'none'
   },
   badgeDeleteButton: badgeDeleteButton,
   invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
@@ -569,6 +599,7 @@ var buttons = {
   checkboxActiveButton: checkboxActiveButton,
   outlineCritical: outlineCritical,
   link: link,
+  listBoxLink: listBoxLink,
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   inlineWithIcon: inlineWithIcon,

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

@@ -24,7 +24,7 @@ var interactive = {
   },
   '&.is-hovered': {
     outline: 'none',
-    borderColor: 'blue',
+    borderColor: 'focus',
     bg: 'default'
   }
 };

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

@@ -105,14 +105,14 @@ export var fieldControlWrapper = {
   },
   '&.is-read-only': {
     '> input': {
-      backgroundColor: 'gray-100',
+      backgroundColor: 'disabled',
       border: '1px solid',
-      borderColor: 'border.input !important'
+      borderColor: 'border.input'
     },
     '> textarea': {
-      backgroundColor: 'gray-100',
+      backgroundColor: 'disabled',
       border: '1px solid',
-      borderColor: 'border.input !important'
+      borderColor: 'border.input'
     },
     '&:after': {
       display: 'none'
@@ -135,7 +135,6 @@ input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   }
 });
 input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
-  borderColor: 'border.input',
   borderStyle: 'solid',
   borderWidth: 1,
   flexDirection: 'row !important',
@@ -161,6 +160,18 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-error': {
     borderColor: 'critical.dark'
+  },
+  '&.is-read-only': {
+    alignItems: 'center',
+    boxShadow: 'inset 0 0 0 100px #F6F8FA',
+    border: '1px solid',
+    borderColor: 'gray-900',
+    '> input': {
+      backgroundColor: 'background.secondary'
+    },
+    '&:after': {
+      display: 'none'
+    }
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {

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

@@ -1,6 +1,6 @@
 export var label = {
   color: 'text.primary',
-  fontSize: '.9375rem',
+  fontSize: 'md',
   '&.is-float-label': {
     fontSize: 'md',
     fontWeight: 1,
@@ -12,7 +12,7 @@ export var label = {
   },
   opacity: 1,
   checkbox: {
-    fontSize: '.9375rem',
+    fontSize: 'md',
     display: 'inline-flex !important',
     div: {
       flexShrink: 0
@@ -22,6 +22,8 @@ export var label = {
     cursor: 'pointer'
   },
   radioGroup: {
-    fontSize: '.9375rem'
+    color: 'text.primary',
+    fontSize: 'md',
+    mb: 'md'
   }
 };

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

@@ -105,7 +105,7 @@ export var listView = {
   container: {
     borderRadius: borderRadius,
     border: '1px solid',
-    borderColor: '#e7eef4'
+    borderColor: 'border.hairline'
   }
 };
 export var lisViewItemChart = {

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

@@ -0,0 +1,18 @@
+var container = {
+  bg: 'background.base',
+  border: 'none',
+  minHeight: 72,
+  maxHeight: 72
+};
+var controls = {
+  alignSelf: 'start',
+  pt: 'xs'
+};
+var wrapper = {
+  mr: 'md'
+};
+export default {
+  container: container,
+  controls: controls,
+  wrapper: wrapper
+};

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

@@ -0,0 +1,66 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var line = {
+  mr: 'xs',
+  borderBottomWidth: '2px',
+  borderBottomColor: 'active',
+  '&.is-inactive': {
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'blue-200'
+  }
+};
+var stepBase = {
+  borderWidth: '2px',
+  width: 32,
+  height: 32,
+  minWidth: 32,
+  minHeight: 32,
+  position: 'relative',
+  fontWeight: 2,
+  fontSize: 'md'
+};
+var tab = {
+  mr: 'xs'
+};
+var step = {
+  active: _objectSpread(_objectSpread({
+    backgroundColor: 'active',
+    borderColor: 'active',
+    color: 'background.base'
+  }, stepBase), {}, {
+    '&:before': {
+      content: '""',
+      height: '24px',
+      width: '24px',
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      borderRadius: '100%',
+      borderStyle: 'solid',
+      borderColor: 'background.base',
+      borderWidth: '2px'
+    }
+  }),
+  completed: _objectSpread(_objectSpread({}, stepBase), {}, {
+    borderColor: 'active'
+  }),
+  inactive: _objectSpread({
+    backgroundColor: 'background.base',
+    borderColor: 'blue-200',
+    color: 'active'
+  }, stepBase)
+};
+export default {
+  tab: tab,
+  line: line,
+  step: step
+};

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

@@ -0,0 +1,36 @@
+export var switchable = {
+  container: {
+    minWidth: '32px',
+    color: 'neutral.80',
+    bg: 'backgorund.base',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    borderRadius: 9999,
+    '&.is-selected': {
+      bg: 'active',
+      borderColor: 'active'
+    }
+  },
+  thumbContainer: {
+    bg: 'transparent',
+    border: 'none',
+    maxWidth: 24,
+    height: 16,
+    py: '3px',
+    px: '3px',
+    'label.is-selected &': {
+      bg: 'transparent'
+    }
+  },
+  thumb: {
+    bg: 'gray-500',
+    minHeight: 10,
+    maxHeight: 10,
+    width: 10,
+    border: 'none',
+    '&.is-selected': {
+      bg: 'white',
+      transform: 'translateX(15px)'
+    }
+  }
+};

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

@@ -9,11 +9,42 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import colors from '../colors/colors';
 import { defaultFocus as baseFocus } from './button';
 var borderRadius = '16px';
 var defaultFocus = _objectSpread(_objectSpread({}, baseFocus), {}, {
   outlineOffset: '-2px'
 });
+var container = {
+  '& > thead > tr': {
+    '& > th:first-of-type': {
+      borderTopLeftRadius: borderRadius
+    },
+    '& > th:last-of-type': {
+      borderTopRightRadius: borderRadius
+    }
+  },
+  '& > tbody > tr:last-child': {
+    borderBottom: 'unset',
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    '& > td:first-of-type': {
+      borderBottomLeftRadius: borderRadius
+    },
+    '& > td:last-of-type': {
+      borderBottomRightRadius: borderRadius
+    }
+  },
+  '&.has-caption > thead > tr:first-of-type > th': {
+    borderRadius: '0'
+  },
+  '&.has-pagination > tbody > tr:last-child': {
+    borderRadius: 0,
+    '& > td': {
+      borderRadius: 0
+    }
+  }
+};
 var caption = {
   backgroundColor: 'background.base',
   px: 'lg',
@@ -40,17 +71,8 @@ var row = {
 var thead = {
   borderBottomColor: 'border.base',
   backgroundColor: 'background.base',
-  '&:not(.has-caption)': {
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    '& > tr:first-child': {
-      '& > th:first-of-type': {
-        borderTopLeftRadius: borderRadius
-      },
-      '& > th:last-of-type': {
-        borderTopRightRadius: borderRadius
-      }
-    }
+  '&.is-sticky': {
+    boxShadow: "0 1px 0 ".concat(colors.border.base)
   }
 };
 var head = {
@@ -67,24 +89,14 @@ var tbody = {
   borderBottom: 'unset',
   backgroundColor: 'background.base',
   borderBottomLeftRadius: borderRadius,
-  borderBottomRightRadius: borderRadius,
-  '& > tr:last-child': {
-    borderBottom: 'unset',
-    borderBottomLeftRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
-    '& > td:first-of-type': {
-      borderBottomLeftRadius: borderRadius
-    },
-    '& > td:last-of-type': {
-      borderBottomRightRadius: borderRadius
-    }
-  }
+  borderBottomRightRadius: borderRadius
 };
 var data = _objectSpread(_objectSpread({}, head), {}, {
   py: 'md',
   fontWeight: '1'
 });
 export var tableBase = {
+  container: container,
   caption: caption,
   row: row,
   thead: thead,

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

@@ -10,45 +10,100 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var hTags = {
+  H1: {
+    fontSize: 'xxx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H2: {
+    fontSize: 'xx',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H3: {
+    fontSize: 'xl',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H4: {
+    fontSize: 'lg',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H5: {
+    fontSize: 'md',
+    fontWeight: 2,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  },
+  H6: {
+    textTransform: 'uppercase',
+    color: 'text.primary',
+    fontFamily: 'standard',
+    fontWeight: 1,
+    fontSize: 'xs',
+    letterSpacing: '1px'
+  },
   h1: {
     fontSize: 'xxx',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h2: {
     fontSize: 'xx',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h3: {
     fontSize: 'xl',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h4: {
     fontSize: 'lg',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h5: {
     fontSize: 'md',
     fontWeight: 2,
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard'
   },
   h6: {
     textTransform: 'uppercase',
-    color: 'text.secondary',
+    color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'xs'
+    fontSize: 'xs',
+    letterSpacing: '1px'
   }
 };
+var buttonTitle = {
+  fontSize: '13px'
+};
+var buttonSubtitle = {
+  fontSize: '13px',
+  fontWeight: 2
+};
 export var text = _objectSpread(_objectSpread({
+  base: {
+    lineHeight: 'body'
+  },
+  buttonSubtitle: buttonSubtitle,
+  buttonTitle: buttonTitle,
+  pageHeaderBody: {
+    lineHeight: '150%',
+    color: 'text.primary'
+  },
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -118,6 +173,11 @@ export var text = _objectSpread(_objectSpread({
     fontSize: 'lg',
     fontWeight: 2
   },
+  panelHeaderText: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  }),
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {
       color: 'gray-700',