@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/styles/variants/buttons.js

@@ -0,0 +1,554 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { text as textVariants } from './text';
+import { neutral } from '../colors';
+import { chip } from './boxes';
+
+var base = _objectSpread({
+  cursor: 'pointer',
+  height: 36,
+  lineHeight: '30px',
+  minWidth: 'min-content',
+  px: 'md',
+  outline: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '2px',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap'
+}, textVariants.buttonLabel);
+
+var defaultActive = {
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  'path': {
+    fill: 'white'
+  }
+};
+var defaultHover = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.40',
+  color: 'accent.40',
+  boxShadow: 'standard'
+};
+var defaultFocus = {
+  outline: 'none',
+  boxShadow: 'focus'
+};
+var navItemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+  display: 'block',
+  color: 'neutral.95',
+  fontSize: 'sm',
+  fontWeight: 1,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  lineHeight: '16px',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+};
+var iconButton = {
+  justifyContent: 'center',
+  appearance: 'none',
+  alignItems: 'center',
+  alignSelf: 'baseline',
+  display: 'inline-flex !important',
+  flexGrow: 0,
+  flexShrink: 0,
+  borderRadius: '100%',
+  cursor: 'pointer',
+  bg: 'transparent',
+  p: '3px',
+  width: 'inherit',
+  height: 'inherit',
+  path: {
+    fill: 'neutral.40'
+  },
+  outline: 'none',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.95'
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: 'active'
+  }
+};
+
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
+var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  position: 'absolute',
+  top: 14,
+  right: 10
+});
+
+var close = _objectSpread(_objectSpread({}, iconButton), {}, {
+  p: 0,
+  ml: 'auto',
+  outline: 'none',
+  path: {
+    fill: 'neutral.10'
+  },
+  '&.is-hovered': {
+    bg: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    boxShadow: 'standard',
+    bg: 'neutral.10',
+    path: {
+      fill: 'white'
+    }
+  },
+  '&.is-success': {
+    path: {
+      fill: 'success.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'success.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  },
+  '&.is-warning': {
+    path: {
+      fill: 'warning.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'warning.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  },
+  '&.is-error': {
+    path: {
+      fill: 'critical.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'critical.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  }
+});
+
+var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'white',
+  color: 'neutral.10',
+  paddingLeft: '5px',
+  paddingRight: '5px',
+  flexGrow: 0,
+  fontWeight: 700,
+  '&.is-hovered': {
+    color: 'active'
+  },
+  '&.is-pressed': {
+    color: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var primary = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'active',
+  border: '1px solid',
+  borderColor: 'active',
+  color: 'white',
+  '&.is-hovered': {
+    bg: 'accent.40',
+    border: '1px solid',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var success = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'success.bright',
+  border: '1px solid',
+  borderColor: 'success.bright',
+  color: 'white'
+});
+
+var critical = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'critical.bright',
+  border: '1px solid',
+  borderColor: 'critical.bright',
+  color: 'white'
+});
+
+var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
+  bg: 'active',
+  borderColor: 'active',
+  'path': {
+    fill: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  }
+});
+
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
+var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+
+var applicationPortalPinned = _objectSpread(_objectSpread({}, iconButton), {}, {
+  'path': {
+    fill: 'success.bright'
+  },
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+
+var helpHint = _objectSpread(_objectSpread({}, iconButton), {}, {
+  bg: 'neutral.90',
+  borderColor: 'active',
+  mt: 'auto',
+  mb: 'auto',
+  ml: '5px',
+  maxWidth: '13px',
+  maxHeight: '14px',
+  'path': {
+    fill: 'neutral.20'
+  },
+  '&.is-hovered': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    'path': {
+      fill: 'white'
+    },
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  }
+});
+
+var inline = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'white',
+  height: '22px',
+  lineHeight: 1,
+  fontSize: 'sm',
+  borderRadius: '15px',
+  border: '1px solid',
+  borderColor: 'active',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var text = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  border: '1px solid',
+  borderColor: 'transparent',
+  color: 'active',
+  height: 'auto',
+  padding: '0',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var quiet = {
+  all: 'unset',
+  display: 'flex'
+};
+var chipDeleteButton = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  ml: 'xs',
+  p: 0,
+  width: 14,
+  '&.is-focused, &.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40',
+    boxShadow: 'standard',
+    outline: 'none'
+  },
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
+
+var rocker = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  height: '26px',
+  lineHeight: '26px',
+  fontSize: '14px',
+  borderRadius: '15px',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  textTransform: 'uppercase',
+  bg: 'accent.95',
+  '&.is-selected': {
+    color: 'white'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var comboBox = {
+  bg: 'transparent',
+  color: 'black',
+  padding: 0
+};
+
+var danger = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'critical.bright',
+  color: 'critical.bright',
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    color: 'critical.bright',
+    borderColor: 'critical.bright'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    bg: 'critical.bright',
+    borderColor: 'critical.bright',
+    color: 'white'
+  }),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var copy = {
+  ml: 'xs',
+  outline: 'none',
+  cursor: 'pointer',
+  path: {
+    fill: 'neutral.10'
+  },
+  '&.is-focused': {
+    boxShadow: 'inset 0 0 5px #5873bdbf'
+  }
+};
+var colorField = {
+  border: "1px solid ".concat(neutral['80']),
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-focused': {
+    borderColor: 'accent.80',
+    boxShadow: 'focus'
+  }
+};
+
+var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  backgroundColor: 'accent.99',
+  border: '2px solid',
+  borderColor: 'neutral.95'
+});
+
+var link = _objectSpread(_objectSpread({}, text), {}, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: 'max-content'
+});
+
+var expandableRow = {
+  chartWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    color: 'black',
+    background: 'none',
+    cursor: 'pointer',
+    height: 60,
+    padding: 0,
+    '&:hover': {
+      backgroundColor: '#4462ED1A'
+    }
+  }
+};
+var fileInputField = {
+  background: 'none',
+  cursor: 'pointer',
+  '& span': {
+    textAlign: 'initial'
+  },
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'pointer',
+    '& span': {
+      textDecoration: 'underline'
+    }
+  },
+  '&.is-focused': {
+    boxShadow: 'focus'
+  }
+};
+
+var tooltipChip = _objectSpread(_objectSpread({}, chip), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+
+var tooltipIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+});
+
+var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+
+export default {
+  accordionHeader: accordionHeader,
+  chipDeleteButton: chipDeleteButton,
+  close: close,
+  colorField: colorField,
+  comboBox: comboBox,
+  copy: copy,
+  critical: critical,
+  danger: danger,
+  "default": _objectSpread(_objectSpread({}, base), {}, {
+    bg: 'white',
+    border: '1px solid',
+    borderColor: 'active',
+    '&.is-hovered': _objectSpread({}, defaultHover),
+    '&.is-pressed': _objectSpread({}, defaultActive),
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }),
+  expandableRow: expandableRow,
+  fileInputField: fileInputField,
+  iconButton: iconButton,
+  imageUpload: imageUpload,
+  inline: inline,
+  inverted: inverted,
+  link: link,
+  primary: primary,
+  quiet: quiet,
+  rocker: rocker,
+  success: success,
+  text: text,
+  helpHint: helpHint,
+  modalCloseButton: modalCloseButton,
+  navItemButton: navItemButton,
+  applicationPortalPinned: applicationPortalPinned,
+  applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
+  tooltipChip: tooltipChip,
+  tooltipIconButton: tooltipIconButton,
+  tooltipInline: tooltipInline
+};

package/lib/styles/variants/codeView.js

@@ -0,0 +1,67 @@
+var wrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 5,
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    m: 0,
+    p: 10,
+    pr: 0,
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontFamily: 'standard',
+    fontSize: 'sm',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    }
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 10
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 10
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  p: 5,
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white'
+};
+export default {
+  wrapper: wrapper,
+  lineNo: lineNo
+};

package/lib/styles/variants/imageUpload.js

@@ -0,0 +1,19 @@
+var hoveredPreview = {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  },
+  shaded: {
+    opacity: 0.3,
+    backgroundColor: '#000',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    borderRadius: 2
+  }
+};
+export default {
+  hoveredPreview: hoveredPreview
+};

package/lib/styles/variants/images.js

@@ -0,0 +1,9 @@
+var avatar = {
+  cursor: 'pointer',
+  borderRadius: '100%',
+  width: '35px',
+  height: '35px'
+};
+export default {
+  avatar: avatar
+};

package/lib/styles/variants/index.js

@@ -0,0 +1,4 @@
+export { default as variants } from './variants';
+export { default as buttons } from './buttons';
+export { default as images } from './images';
+export * from './text';

package/lib/styles/variants/link.js

@@ -0,0 +1,17 @@
+var link = {
+  color: 'white',
+  fontFamily: 'standard',
+  fontSize: 'md',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  }
+};
+export default link;