@pingux/astro 2.75.0 → 2.76.0-alpha.0

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

@@ -0,0 +1,134 @@
+export var nextGenColors = {
+  'white': '#ffffff',
+  'blue-100': '#eaf2fd',
+  'blue-200': '#a3c7f6',
+  'blue-300': '#76abf1',
+  'blue-400': '#488fed',
+  'blue-500': '#1a73e8',
+  'blue-600': '#155cba',
+  'blue-700': '#10458b',
+  'blue-800': '#0a2e5d',
+  'blue-900': '#05172e',
+  'blue': '#1a73e8',
+  'indigo-100': '#f1dbf9',
+  'indigo-200': '#e3b8f3',
+  'indigo-300': '#d694ed',
+  'indigo-400': '#c871e7',
+  'indigo-500': '#BA4DE1',
+  'indigo-600': '#953eb4',
+  'indigo-700': '#702e87',
+  'indigo-800': '#4a1f5a',
+  'indigo-900': '#250f2d',
+  'indigo': '#BA4DE1',
+  'purple-100': '#e2d9f3',
+  'purple-200': '#c5b3e6',
+  'purple-300': '#a98eda',
+  'purple-400': '#8c68cd',
+  'purple-500': '#6f42c1',
+  'purple-600': '#59359a',
+  'purple-700': '#432874',
+  'purple-800': '#2c1a4d',
+  'purple-900': '#160d27',
+  'purple': '#6f42c1',
+  'pink-100': '#f7d6e6',
+  'pink-200': '#efadce',
+  'pink-300': '#e685b5',
+  'pink-400': '#de5c9d',
+  'pink-500': '#d63384',
+  'pink-600': '#ab296a',
+  'pink-700': '#801f4f',
+  'pink-800': '#561435',
+  'pink-900': '#2b0a1a',
+  'pink': '#d63384',
+  'red-100': '#fde1de',
+  'red-200': '#fcc3bd',
+  'red-300': '#faa49d',
+  'red-400': '#f9867c',
+  'red-500': '#f7685b',
+  'red-600': '#c65349',
+  'red-700': '#943e37',
+  'red-800': '#632a24',
+  'red-900': '#311512',
+  'red': '#f7685b',
+  'orange-100': '#ffe5d0',
+  'orange-200': '#fecba1',
+  'orange-300': '#feb272',
+  'orange-400': '#fd9843',
+  'orange-500': '#fd7e14',
+  'orange-600': '#ca6510',
+  'orange-700': '#984c0c',
+  'orange-800': '#653208',
+  'orange-900': '#331904',
+  'orange': '#fd7e14',
+  'yellow-100': '#fff1da',
+  'yellow-200': '#ffe3b5',
+  'yellow-300': '#ffd590',
+  'yellow-400': '#ffc76b',
+  'yellow-500': '#ffb946',
+  'yellow-600': '#cc9438',
+  'yellow-700': '#996f2a',
+  'yellow-800': '#664a1c',
+  'yellow-900': '#33250e',
+  'yellow': '#ffb946',
+  'green-100': '#d5f6e4',
+  'green-200': '#abeeca',
+  'green-300': '#82e5af',
+  'green-400': '#58dd95',
+  'green-500': '#2ed47a',
+  'green-600': '#25aa62',
+  'green-700': '#1c7f49',
+  'green-800': '#125531',
+  'green-900': '#092a18',
+  'green': '#2ed47a',
+  'teal-100': '#d1ecf1',
+  'teal-200': '#a2dae3',
+  'teal-300': '#74c7d4',
+  'teal-400': '#45b5c6',
+  'teal-500': '#17A2B8',
+  'teal-600': '#128293',
+  'teal-700': '#0e616e',
+  'teal-800': '#09414a',
+  'teal-900': '#052025',
+  'teal': '#17A2B8',
+  'cyan-100': '#cff4fc',
+  'cyan-200': '#9eeaf9',
+  'cyan-300': '#6edff6',
+  'cyan-400': '#3dd5f3',
+  'cyan-500': '#0dcaf0',
+  'cyan-600': '#0aa2c0',
+  'cyan-700': '#087990',
+  'cyan-800': '#055160',
+  'cyan-900': '#032830',
+  'cyan': '#0dcaf0',
+  'gray-100': '#f6f8fa',
+  'gray-200': '#e7eef4',
+  'gray-300': '#d3d8e0',
+  'gray-400': '#c0c9d5',
+  'gray-500': '#69788B',
+  'gray-600': '#5e6d82',
+  'gray-700': '#455469',
+  'gray-800': '#324054',
+  'gray-900': '#23282e',
+  'common': {
+    'background': {
+      'base': '#ffffff',
+      'secondary': '#f6f8fa'
+    },
+    'border': '#69788B',
+    'hairline': '#e7eef4'
+  },
+  'font': {
+    'base': '#23282e',
+    'light': '#5e6d82',
+    'link': '#1a73e8',
+    'label': '#5e6d82'
+  },
+  'active': '#1a73e8',
+  'active_light': '#eaf2fd',
+  'success': '#1c7f49',
+  'success_light': '#d5f6e4',
+  'critical': '#943e37',
+  'critical_light': '#fde1de',
+  'warning': '#984c0c',
+  'warning_light': '#ffe5d0'
+};

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

@@ -0,0 +1,227 @@
+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; }
+import chroma from 'chroma-js';
+import colors from '../colors/colors';
+var primaryBlue = colors.primary,
+  criticalRed = colors.critical;
+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'
+};
+var defaultFocus = {
+  outline: '2px solid',
+  outlineColor: 'active',
+  outlineOffset: '3px'
+};
+var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: 'min-content',
+  cursor: 'pointer',
+  display: 'block',
+  maxWidth: '100%',
+  fontFamily: 'standard',
+  fontSize: '.9375rem',
+  flexGrow: '1',
+  fontWeight: 400,
+  textAlign: 'center',
+  verticalAlign: 'middle',
+  backgroundColor: 'transparent',
+  lineHeight: 1.5,
+  borderRadius: '1.75rem',
+  border: '1px solid',
+  borderColor: 'gray-300',
+  px: '20px',
+  py: '12px',
+  height: '48.5px',
+  '&.is-disabled': {
+    opacity: 0.65
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var neutral = _objectSpread(_objectSpread({
+  color: 'gray-600'
+}, buttonBase), {}, {
+  '&.is-pressed': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-hovered': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+  }
+});
+var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  color: 'white',
+  backgroundColor: 'primary',
+  borderColor: 'primary',
+  '&.is-pressed': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-hovered': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+  }
+});
+var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'transparent',
+  borderColor: 'primary',
+  color: 'primary',
+  '&.is-pressed': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    borderColor: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    color: 'white'
+  },
+  '&.is-hovered': {
+    backgroundColor: chroma.mix(primaryBlue, 'black', 0.075, 'rgb').hex(),
+    color: 'white'
+  }
+});
+var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'transparent',
+  borderColor: 'gray-300',
+  color: 'text.secondary'
+});
+var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'transparent',
+  borderColor: 'critical.bright',
+  color: 'critical.bright',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineColor: 'critical.bright'
+  }),
+  outlineColor: 'critical.bright'
+});
+var inverse = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'transparent',
+  borderColor: 'white',
+  color: 'white'
+});
+var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'critical.bright',
+  borderColor: 'critical',
+  color: 'white',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineColor: 'critical.bright',
+    backgroundColor: 'critical.dark'
+  }),
+  '&.is-pressed': {
+    backgroundColor: chroma.mix(criticalRed.bright, 'black', 0.125, 'rgb').hex(),
+    borderColor: chroma.mix(criticalRed.bright, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-hovered': {
+    backgroundColor: chroma.mix(criticalRed.bright, 'black', 0.075, 'rgb').hex(),
+    color: 'white'
+  }
+});
+var checkboxButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'transparent',
+  borderColor: 'gray-300',
+  color: 'text.secondary'
+});
+var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'gray-500',
+  color: 'white'
+});
+var link = {
+  transition: 'color, .15s, ease-in-and-out',
+  fontSize: 'md',
+  textDecoration: 'none',
+  px: '1.25rem',
+  py: '.75rem',
+  '&.is-pressed': {
+    textDecoration: 'underline',
+    outline: 'none',
+    color: chroma.mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-focused': {
+    textDecoration: 'underline',
+    outline: 'none'
+  }
+};
+var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
+  display: 'inline-flex'
+});
+var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
+  display: 'inline-flex',
+  color: 'white'
+});
+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',
+  borderColor: 'transparent',
+  path: {
+    fill: 'dark'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: 'gray-100',
+    borderColor: 'gray-200',
+    path: {
+      fill: 'dark'
+    }
+  }
+};
+var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  position: 'absolute',
+  top: 22,
+  right: 22
+});
+var iconButtons = {
+  base: _objectSpread({}, baseIconButton),
+  modalCloseButton: modalCloseButton,
+  badge: {
+    deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+      borderRadius: '50%',
+      cursor: 'pointer',
+      height: 14,
+      p: 0,
+      width: 14,
+      '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+        backgroundColor: 'gray-100'
+      }),
+      '&.is-pressed': {
+        backgroundColor: 'gray-100',
+        borderColor: 'gray-200',
+        path: {
+          fill: 'dark'
+        }
+      }
+    }, transitions)
+  },
+  messageCloseButton: _objectSpread({}, baseIconButton)
+};
+var buttons = {
+  neutral: neutral,
+  primary: primary,
+  "default": secondary,
+  tertiary: tertiary,
+  inverse: inverse,
+  critical: critical,
+  checkboxButton: checkboxButton,
+  checkboxActiveButton: checkboxActiveButton,
+  outlineCritical: outlineCritical,
+  link: link,
+  withIcon: withIcon,
+  primaryWithIcon: primaryWithIcon,
+  iconButtons: iconButtons,
+  modalCloseButton: modalCloseButton
+};
+export default buttons;

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

@@ -0,0 +1,131 @@
+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 defaultFocus = {
+  boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
+};
+var readOnlyandDisabledStyles = {
+  backgroundColor: 'gray-100',
+  border: '1px solid',
+  borderColor: 'border.base',
+  opacity: 1
+};
+export var input = {
+  fontSize: 'md',
+  p: '0.75rem',
+  backgroundColor: 'white',
+  borderColor: 'border.base',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  borderRadius: '4px',
+  fontWeight: 1,
+  height: '50px'
+};
+input.search = _objectSpread(_objectSpread({}, input), {}, {
+  '&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {
+    '> input': _objectSpread({}, readOnlyandDisabledStyles)
+  })
+});
+input.containedIcon = {
+  position: 'absolute',
+  right: 0,
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+};
+export var fieldControlWrapper = {
+  '> textarea': {
+    borderRadius: '4px',
+    border: '1px solid',
+    borderColor: 'border.base !important',
+    outline: 'none'
+  },
+  '&.is-disabled': {
+    '> label': {
+      opacity: 1
+    },
+    // Override global opacity for disabled items because the children will handle their own opacity
+    // and it will otherwise stack the opacity effect.
+    opacity: 1,
+    '> input': _objectSpread({
+      fontWeight: 400
+    }, readOnlyandDisabledStyles),
+    '> textarea': _objectSpread({
+      fontWeight: 400
+    }, readOnlyandDisabledStyles),
+    '&:after': {
+      display: 'none'
+    }
+  },
+  '&:after': {
+    display: 'none'
+  },
+  '& > input': {
+    borderLeftWidth: 1
+  },
+  '> button': {
+    borderLeftWidth: 1,
+    borderRadius: '4px',
+    border: '1px solid',
+    borderColor: 'border.base'
+  },
+  '&.is-read-only': {
+    '> input': {
+      backgroundColor: 'gray-100',
+      border: '1px solid',
+      borderColor: 'border.base !important'
+    },
+    '> textarea': {
+      backgroundColor: 'gray-100',
+      border: '1px solid',
+      borderColor: 'border.base !important'
+    },
+    '&:after': {
+      display: 'none'
+    }
+  },
+  '&.is-focused': {
+    '> textarea': _objectSpread({
+      outline: 'none'
+    }, defaultFocus)
+  }
+};
+input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
+input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
+  borderColor: 'border.base',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  flexDirection: 'row !important',
+  flexWrap: 'wrap',
+  pt: 6,
+  pr: 10,
+  pb: 5,
+  pl: 12,
+  borderRadius: '4px',
+  alignItems: 'center',
+  height: '50px',
+  '> input': {
+    border: 'none',
+    flex: 1,
+    height: 27,
+    lineHeight: '100%',
+    p: 5,
+    '&.is-focused': {
+      boxShadow: 'none',
+      outline: 'none'
+    }
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  }
+});
+input.numberField = _objectSpread(_objectSpread({}, input), {}, {
+  pr: '28px'
+});

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

@@ -0,0 +1,26 @@
+export var label = {
+  color: 'gray-900',
+  fontSize: '.9375rem',
+  '&.is-float-label': {
+    fontSize: 'md',
+    fontWeight: 1
+  },
+  '.is-float-label-active &.is-float-label': {
+    fontSize: 'sm',
+    left: '12px'
+  },
+  opacity: 1,
+  checkbox: {
+    fontSize: '.9375rem',
+    display: 'inline-flex !important',
+    div: {
+      flexShrink: 0
+    },
+    width: 'max-content',
+    alignItems: 'center',
+    cursor: 'pointer'
+  },
+  radioGroup: {
+    fontSize: '.9375rem'
+  }
+};

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

@@ -0,0 +1,19 @@
+export var text = {
+  modalTitle: {
+    fontSize: '20px',
+    fontWeight: '2',
+    fontFamily: 'standard'
+  },
+  tabLabel: {
+    color: 'text.primary'
+  },
+  placeholder: {
+    color: 'text.primary'
+  },
+  paragraph: {
+    lineHeight: 'body'
+  },
+  listViewItemText: {
+    fontWeight: 2
+  }
+};