@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/styles/variants/buttons.js

@@ -0,0 +1,733 @@
+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); 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 { 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'
+};
+export var defaultFocus = {
+  outline: '1px solid',
+  outlineColor: 'active',
+  outlineOffset: '4px'
+};
+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'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
+  }
+};
+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 svgIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  path: {
+    fill: 'default'
+  }
+});
+
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
+var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  position: 'absolute',
+  top: 14,
+  right: 10
+});
+
+var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
+  bg: 'accent.99',
+  height: '40px',
+  minWidth: 'max-content',
+  pl: 'xs',
+  ml: '10px',
+  path: {
+    fill: 'active'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'accent.99'
+  }
+});
+
+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: 'transparent',
+  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',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
+  '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 inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
+var text = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  border: '1px solid',
+  borderColor: 'transparent',
+  color: 'active',
+  height: 'auto',
+  padding: '0',
+  lineHeight: 'unset',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var quiet = {
+  all: 'unset',
+  display: 'flex'
+};
+var chipDeleteButton = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  mx: '3px !important',
+  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), {}, {
+  border: '0',
+  display: 'inline-flex',
+  height: '26px',
+  lineHeight: '26px',
+  fontSize: '14px',
+  borderRadius: '15px',
+  alignSelf: 'center',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  textTransform: 'uppercase',
+  bg: 'accent.95',
+  '&.is-selected': {
+    bg: 'active',
+    color: 'white',
+    zIndex: '1'
+  },
+  '&.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',
+  height: 'auto',
+  cursor: 'pointer',
+  path: {
+    fill: 'neutral.10'
+  },
+  '&.is-focused': _objectSpread({
+    boxShadow: 'none'
+  }, defaultFocus)
+};
+var colorField = {
+  border: "1px solid ".concat(neutral['80']),
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+
+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), {}, {
+  lineHeight: 'unset',
+  textDecoration: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: 'max-content',
+  '&.is-current': {
+    cursor: 'default',
+    color: 'text.primary'
+  }
+});
+
+var neutralText = _objectSpread(_objectSpread({}, link), {}, {
+  color: 'neutral.10'
+});
+
+var expandableRow = {
+  chartWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    color: 'black',
+    background: 'none',
+    cursor: 'pointer',
+    height: 60,
+    padding: 0,
+    '&:hover': {
+      backgroundColor: '#4462ED1A'
+    }
+  }
+};
+var environmentBreadcrumb = {
+  current: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.30',
+    fontSize: 'md',
+    fontWeight: 1,
+    padding: '4px',
+    '&.is-hovered': {
+      color: 'active',
+      textDecoration: 'none',
+      boxShadow: 'none'
+    },
+    '&.is-focused': {
+      borderRadius: '2px',
+      boxShadow: '0 0 0 1px #4462ED'
+    },
+    '&.is-pressed': {
+      color: 'accent.20',
+      textDecoration: 'none'
+    }
+  }),
+  selectItem: _objectSpread(_objectSpread({}, text), {}, {
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 0,
+    justifyContent: 'start'
+  })
+};
+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'
+  }
+});
+
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
+
+var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
+  color: 'neutral.40',
+  alignItems: 'center',
+  '&.is-selected *, &.is-hovered *': {
+    color: 'active'
+  },
+  '& + *:not(div:first-of-type)': {
+    'ml': 'md'
+  }
+});
+
+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)
+  }),
+  environmentBreadcrumb: environmentBreadcrumb,
+  expandableRow: expandableRow,
+  fileInputField: fileInputField,
+  filter: filter,
+  iconButton: iconButton,
+  imageUpload: imageUpload,
+  inline: inline,
+  inlinePrimary: inlinePrimary,
+  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,
+  colorBlock: colorBlock,
+  menuTab: menuTab,
+  collapsiblePanelToggle: collapsiblePanelToggle,
+  neutralText: neutralText,
+  svgIconButton: svgIconButton
+};