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

package/lib/cjs/styles/forms/textarea.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports.textarea = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _input = require("./input");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+// Styles for default input and variants go here.
+var textarea = _objectSpread(_objectSpread({}, _input.input), {}, {
+  height: 'unset',
+  '&.is-unresizable': {
+    resize: 'none'
+  },
+  '.is-float-label &': {
+    height: 'unset'
+  }
+});
+
+exports.textarea = textarea;

package/lib/cjs/styles/spacing.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.button = void 0;
+var base = 10;
+var scale = {
+  xs: base * 0.5,
+  // 5
+  sm: base * 1,
+  // 10
+  md: base * 1.5,
+  // 15
+  lg: base * 2.5,
+  // 25
+  xl: base * 4,
+  // 40
+  xx: base * 6.5 // 65
+
+};
+var button = {
+  vPadding: scale.xs,
+  hPadding: scale.md
+};
+exports.button = button;
+var _default = scale;
+exports["default"] = _default;

package/lib/cjs/styles/text.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.textColors = exports.fontWeights = exports.fontSizes = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _colors = require("./colors");
+
+var _fontWeights;
+
+var baseSize = 15;
+var majorMultiplier = 1.15;
+
+var getFontSize = function getFontSize(major) {
+  return Math.round(baseSize * Math.pow(majorMultiplier, major));
+};
+
+var fontSizes = {
+  'xs': getFontSize(-2),
+  'sm': getFontSize(-1),
+  'md': getFontSize(0),
+  'lg': getFontSize(1),
+  'xl': getFontSize(2),
+  'xx': getFontSize(3)
+};
+exports.fontSizes = fontSizes;
+var fontWeights = (_fontWeights = {}, (0, _defineProperty2["default"])(_fontWeights, -1, 300), (0, _defineProperty2["default"])(_fontWeights, 0, 400), (0, _defineProperty2["default"])(_fontWeights, 1, 500), (0, _defineProperty2["default"])(_fontWeights, 2, 600), (0, _defineProperty2["default"])(_fontWeights, 3, 700), _fontWeights);
+exports.fontWeights = fontWeights;
+var textColors = {
+  primary: _colors.neutral[10],
+  secondary: _colors.neutral[40],
+  primaryLight: _colors.white,
+  secondaryLight: _colors.neutral[95],
+  button: _colors.button.label,
+  active: _colors.active
+};
+exports.textColors = textColors;

package/lib/cjs/styles/theme.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _spacing = _interopRequireDefault(require("./spacing"));
+
+var _colors = _interopRequireWildcard(require("./colors"));
+
+var _text = require("./text");
+
+var _breakpoints = _interopRequireDefault(require("./breakpoints"));
+
+var _forms = _interopRequireDefault(require("./forms"));
+
+var _variants = require("./variants");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var _default = {
+  name: 'Astro',
+  space: _spacing["default"],
+  colors: _objectSpread(_objectSpread({}, _colors["default"]), {}, {
+    background: _colors.accent[99]
+  }),
+  borders: {
+    separator: "1px solid ".concat(_colors.line.hairline)
+  },
+  breakpoints: _breakpoints["default"],
+  fonts: {
+    standard: '"Helvetica Neue", Helvetica, sans-serif'
+  },
+  fontSizes: _text.fontSizes,
+  fontWeights: _text.fontWeights,
+  sizes: {
+    buttonHeight: 36,
+    column: 400
+  },
+  shadows: {
+    standard: "0 1px 3px ".concat(_colors.shadow),
+    row: "0 0 9px ".concat(_colors.accent[95]),
+    focus: "0 0 5px ".concat(_colors.focus)
+  },
+  forms: _forms["default"],
+  text: _variants.text,
+  images: _variants.images,
+  buttons: _variants.buttons,
+  textColors: _text.textColors,
+  links: _variants.links,
+  variants: _variants.variants
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/end-user/end-user.js

@@ -0,0 +1,280 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var base = 10;
+var spacing = {
+  xs: base * 0.5,
+  // 5
+  sm: base * 1,
+  // 10
+  md: base * 1.5,
+  // 15
+  lg: base * 2.5,
+  // 25
+  xl: base * 4,
+  // 40
+  xx: base * 6.5 // 65
+
+};
+var textColors = {
+  secondary: '#798087',
+  active: '#2996cc'
+};
+var colors = {
+  active: '#277ba5',
+  activeHover: '#3d88ae',
+  critical: '#a31300',
+  warning: '#eeb91c',
+  success: '#21934c',
+  neutral: {
+    10: '#575f67',
+    20: '#686f77',
+    30: '#798087',
+    40: '#8b9197',
+    50: '#9da2a8',
+    60: '#afb4b8',
+    70: '#c2c6ca',
+    80: '#d5d8db',
+    90: '#e8ebed',
+    95: '#f8f8f8'
+  },
+  line: {
+    hairline: '#8b9197'
+  },
+  cardBg: 'white',
+  text: textColors
+};
+var fontSizes = {
+  xs: '11px',
+  sm: '13px',
+  md: '15px',
+  lg: '22px',
+  xl: '28px',
+  xx: '36px'
+};
+var fontWeights = {
+  regular: 400,
+  light: 300,
+  semibold: 600,
+  bold: 700
+};
+var buttonText = {
+  fontSize: 'md',
+  fontFamily: 'standard',
+  color: 'neutral.20'
+};
+var buttonHover = {
+  color: 'active',
+  borderColor: 'active'
+};
+var buttonFocus = {
+  outline: 'none',
+  boxShadow: 'focus'
+};
+
+var buttonBase = _objectSpread(_objectSpread({}, buttonText), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'neutral.60',
+  borderRadius: 2,
+  display: 'block',
+  padding: '9px',
+  boxShadow: 'none',
+  minHeight: 40,
+  height: 'auto',
+  textOverflow: 'ellipsis',
+  cursor: 'pointer',
+  width: '100%',
+  outline: 'none',
+  '&.is-hovered': _objectSpread({}, buttonHover),
+  '&.is-pressed': {
+    color: buttonText.color,
+    borderColor: 'neutral.60'
+  },
+  '&.is-focused': _objectSpread({}, buttonFocus)
+});
+
+var card = {
+  bg: 'cardBg',
+  boxShadow: 'overlay',
+  boxSizing: 'border-box',
+  margin: '0 auto',
+  maxWidth: 400,
+  minHeight: 200,
+  position: 'relative',
+  width: '100%',
+  p: 'xl'
+};
+var shadows = {
+  overlay: '0 1px 4px 1px #79808759'
+};
+var buttons = {
+  "default": _objectSpread({}, buttonBase),
+  primary: _objectSpread(_objectSpread({}, buttonBase), {}, {
+    color: 'white',
+    bg: 'active',
+    borderColor: 'active',
+    '&.is-hovered': {
+      bg: 'activeHover',
+      borderColor: 'activeHover'
+    },
+    '&.is-pressed': {
+      bg: 'active',
+      borderColor: 'active'
+    }
+  }),
+  secondary: _objectSpread({}, buttonBase),
+  tertiary: _objectSpread(_objectSpread({}, buttonBase), {}, {
+    fontSize: 'sm',
+    py: 'xs',
+    px: 'md',
+    width: 'auto',
+    mx: 'auto',
+    minHeight: 'initial'
+  })
+};
+var wordWrap = {
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word'
+};
+
+var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+  fontSize: 'sm',
+  pb: 'sm',
+  '&.is-default': {
+    color: 'text.secondary'
+  },
+  '&.is-error': {
+    color: 'critical'
+  }
+});
+
+var text = {
+  base: {
+    color: 'neutral.20',
+    fontSize: 'md'
+  },
+  heading: {
+    color: 'neutral.20',
+    fontWeight: '400',
+    fontSize: 'lg',
+    fontFamily: 'standard'
+  },
+  subheading: {
+    fontSize: 'md'
+  },
+  label: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 15,
+    fontWeight: 500,
+    position: 'absolute',
+    fontFamily: 'proxima-nova, sans-serif',
+    color: 'text.secondary'
+  }),
+  input: {
+    color: 'neutral.30',
+    fontSize: 15,
+    fontWeight: 500,
+    fontFamily: 'proxima-nova, sans-serif'
+  },
+  fieldHelperText: fieldHelperText
+};
+var activeFloatLabel = {
+  fontWeight: 0,
+  fontSize: '13px',
+  transform: 'translate(-4px, -10px) scale(0.75)',
+  textTransform: 'uppercase',
+  color: 'text.active',
+  transition: 'all 0.05s'
+};
+
+var label = _objectSpread(_objectSpread({}, text.label), {}, {
+  display: 'block',
+  mb: 'xs',
+  alignItems: 'center',
+  '&.is-float-label': {
+    zIndex: 1,
+    top: '15px',
+    left: 'md',
+    mb: 0,
+    transformOrigin: 'top left',
+    transition: 'all 0.2s ease-out',
+    pointerEvents: 'none'
+  },
+  '.is-float-label-active &.is-float-label': _objectSpread({}, activeFloatLabel)
+});
+
+var input = _objectSpread(_objectSpread({}, text.input), {}, {
+  position: 'relative',
+  background: 'white',
+  borderColor: 'neutral.40',
+  borderWidth: 1,
+  borderRadius: 2,
+  display: 'block',
+  boxSizing: 'border-box',
+  width: '100%',
+  px: 10,
+  py: 15,
+  color: 'neutral.30',
+  outline: 'none',
+  '&:focus': {
+    borderColor: 'activeHover'
+  },
+  '&:after': {
+    display: 'none'
+  }
+});
+
+var _default = {
+  name: 'End User',
+  fonts: {
+    standard: '"proxima-nova", "helvetica", "arial", sans-serif'
+  },
+  space: spacing,
+  shadows: shadows,
+  colors: colors,
+  buttons: buttons,
+  fontSizes: fontSizes,
+  fontWeights: fontWeights,
+  text: text,
+  forms: {
+    input: input,
+    label: label
+  },
+  variants: {
+    card: card
+  }
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/end-user/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _endUser["default"];
+  }
+});
+
+var _endUser = _interopRequireDefault(require("./end-user"));

package/lib/cjs/styles/useAstroTheme.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.withAstroTheme = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledSystemUtils = require("../utils/devUtils/styledSystemUtils");
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _react2 = require("@emotion/react");
+
+var useAstroTheme = (0, _styledSystemUtils.makeUseDefaultTheme)(_theme["default"]);
+
+var withAstroTheme = function withAstroTheme(Component) {
+  return function (props) {
+    var theme = useAstroTheme();
+    return (0, _react2.jsx)(Component, (0, _extends2["default"])({
+      theme: theme
+    }, props));
+  };
+};
+
+exports.withAstroTheme = withAstroTheme;
+var _default = useAstroTheme;
+exports["default"] = _default;

package/lib/cjs/styles/variants/accordion.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var accordionTitle = {
+  display: 'inline-block !important',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  fontSize: 'lg',
+  fontWeight: 700,
+  color: 'text.primary',
+  '&.is-pressed': {
+    color: 'white'
+  }
+};
+var accordion = {
+  display: 'flex',
+  mt: '5px',
+  mb: '20px',
+  alignItems: 'flex-start'
+};
+var accordionBody = {
+  display: 'none',
+  pt: 'md',
+  width: '100%',
+  '.is-open &': {
+    display: 'flex'
+  }
+};
+var accordionGridHeader = {
+  cursor: 'pointer',
+  lineHeight: '30px',
+  pl: 'sm',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  bg: 'white',
+  color: 'neutral.10',
+  flexGrow: 1,
+  fontWeight: 700,
+  '&.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
+  },
+  minHeight: '64px',
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    '& div > div > div > span': {
+      color: 'accent.20'
+    }
+  }
+};
+var accordionGridHeaderNav = {
+  padding: '10px 15px 10px 15px',
+  cursor: 'pointer',
+  minHeight: '40px',
+  lineHeight: '30px',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  color: 'neutral.95',
+  flexGrow: 1,
+  fontWeight: 0,
+  fontSize: '16px',
+  mt: '5px',
+  '&.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.10'
+  }
+};
+var accordionGridBody = {
+  display: 'none !important',
+  pl: 'sm',
+  width: '100%',
+  '&.is-selected': {
+    display: 'flex !important'
+  }
+};
+var _default = {
+  accordionGridHeader: accordionGridHeader,
+  accordionGridBody: accordionGridBody,
+  accordionTitle: accordionTitle,
+  accordion: accordion,
+  accordionBody: accordionBody,
+  accordionGridHeaderNav: accordionGridHeaderNav
+};
+exports["default"] = _default;