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

package/lib/styles/forms/label.js

@@ -0,0 +1,75 @@
+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; }
+
+// Styles for default label and variants go here.
+import { text } from '../variants/text';
+var activeFloatLabel = {
+  fontWeight: 0,
+  transform: 'translate(0, -8px) scale(0.75)'
+}; // Default label
+
+export var label = _objectSpread(_objectSpread({}, text.label), {}, {
+  display: 'block',
+  mb: 'xs',
+  alignItems: 'center',
+  '&.is-float-label': {
+    textOverflow: 'ellipsis',
+    display: 'flex',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    fontSize: 'md',
+    fontWeight: -1,
+    position: 'absolute',
+    zIndex: 1,
+    top: '13px',
+    left: 'md',
+    mb: 0,
+    transformOrigin: 'top left',
+    transition: 'all 0.1s ease-out',
+    pointerEvents: 'none',
+    paddingRight: '25px',
+    paddingLeft: '1px' // Otherwise, certain characters get cut off on the left from the overflow
+
+  },
+  '.is-float-label-active &.is-float-label': _objectSpread({}, activeFloatLabel),
+  '&.is-left-label': {
+    width: 'auto',
+    pr: 'sm',
+    mb: 0,
+    alignSelf: 'center'
+  }
+}); // Variants below
+
+label.indicator = {
+  color: 'critical.bright',
+  ml: 5
+};
+label.radio = _objectSpread(_objectSpread({}, text.base), {}, {
+  cursor: 'pointer',
+  alignItems: 'center',
+  mb: 'xs'
+}); // NOTE: Rebass label adds 'flex' after other styles, so we have to use !important to override it
+
+label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
+  display: 'inline-flex !important',
+  div: {
+    flexShrink: 0
+  },
+  width: 'auto',
+  alignItems: 'center',
+  cursor: 'pointer'
+});
+label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
+  fontWeight: 1
+});

package/lib/styles/forms/radio.js

@@ -0,0 +1,21 @@
+// Styles for default radio and variants go here.
+// Default radio
+export var radio = {
+  width: 20,
+  height: 20,
+  color: 'active',
+  mr: 'xs',
+  // override the default focus styling
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus'
+  }
+};
+export var radioField = {
+  '.is-horizontal &': {
+    mr: '15px'
+  }
+};

package/lib/styles/forms/search.js

@@ -0,0 +1,20 @@
+export var clearButtonIcon = {
+  color: 'neutral.40'
+};
+export var container = {
+  position: 'relative',
+  justifyContent: 'center',
+  '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
+    WebkitAppearance: 'none'
+  }
+};
+export var icon = {
+  position: 'absolute',
+  color: 'neutral.40',
+  ml: 'sm'
+};
+export default {
+  clearButtonIcon: clearButtonIcon,
+  container: container,
+  icon: icon
+};

package/lib/styles/forms/select.js

@@ -0,0 +1,83 @@
+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; }
+
+// Styles for default select and variants go here.
+import { input } from './input';
+import { text } from '../variants';
+var activeFloatLabel = {
+  pt: 'md',
+  pb: 'xs'
+}; // Default select
+
+export var select = _objectSpread(_objectSpread({}, input), {}, {
+  display: 'flex',
+  alignItems: 'center',
+  '&.is-focused': {
+    boxShadow: 'focus'
+  },
+  '.is-float-label &': _objectSpread({
+    height: '45px'
+  }, activeFloatLabel)
+});
+select.currentValue = {
+  textAlign: 'left',
+  flex: '1 1 0',
+  minWidth: 0,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  // rebass adds display: flex after other styles and ellipsis goes away
+  display: 'inline !important'
+};
+select.listBoxPopup = _objectSpread(_objectSpread({}, input), {}, {
+  position: 'absolute',
+  width: '100%',
+  height: 'fit-content',
+  padding: '0',
+  zIndex: 2,
+  borderTop: 'none',
+  background: 'white',
+  boxShadow: 'standard'
+});
+select.option = _objectSpread(_objectSpread({}, text.base), {}, {
+  px: 'md',
+  py: 'sm',
+  alignItems: 'center',
+  outline: 'none',
+  cursor: 'pointer',
+  '&.is-selected': _objectSpread(_objectSpread({}, text.inputValue), {}, {
+    pl: 0
+  }),
+  '&.is-focused': {
+    color: 'white',
+    bg: 'active'
+  }
+});
+select.transparent = {
+  'select': {
+    bg: 'transparent'
+  },
+  '> div:after': {
+    bg: 'transparent'
+  }
+};
+select.arrow = {
+  ml: 'auto',
+  '.is-float-label &': {
+    mt: -10
+  },
+  '> svg': {
+    transition: 'all 0.2s linear'
+  }
+};

package/lib/styles/forms/switch.js

@@ -0,0 +1,58 @@
+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 { defaultFocus } from '../variants/buttons';
+export var label = {
+  alignItems: 'center',
+  fontSize: 'md',
+  color: 'text.primary'
+};
+export var container = {
+  mr: 5,
+  cursor: 'pointer'
+};
+export var thumbContainer = {
+  appearance: 'none',
+  m: 0,
+  p: 0,
+  width: 42,
+  height: 22,
+  color: 'neutral.80',
+  bg: 'neutral.80',
+  border: '1px solid',
+  borderColor: 'neutral.80',
+  borderRadius: 9999,
+  'label.is-selected &': {
+    bg: 'active',
+    borderColor: 'active'
+  },
+  'label.is-focused &, &:focus': _objectSpread({}, defaultFocus)
+};
+export var thumb = {
+  width: 20,
+  height: 22,
+  borderRadius: 9999,
+  border: '1px solid',
+  borderColor: 'neutral.80',
+  bg: 'white',
+  boxShadow: 'standard',
+  transitionProperty: 'transform',
+  transitionTimingFunction: 'ease-out',
+  transitionDuration: '0.1s',
+  transform: 'translateX(0)',
+  'label.is-selected &': {
+    transform: 'translateX(20px)',
+    borderColor: 'active'
+  }
+};

package/lib/styles/forms/textarea.js

@@ -0,0 +1,25 @@
+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 { input } from './input'; // Styles for default input and variants go here.
+
+export var textarea = _objectSpread(_objectSpread({}, input), {}, {
+  height: 'unset',
+  '&.is-unresizable': {
+    resize: 'none'
+  },
+  '.is-float-label &': {
+    height: 'unset'
+  }
+});

package/lib/styles/spacing.js

@@ -0,0 +1,20 @@
+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
+
+};
+export var button = {
+  vPadding: scale.xs,
+  hPadding: scale.md
+};
+export default scale;

package/lib/styles/text.js

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+var _fontWeights;
+
+import { button, neutral, white, active } from './colors';
+var baseSize = 15;
+var majorMultiplier = 1.15;
+
+var getFontSize = function getFontSize(major) {
+  return Math.round(baseSize * Math.pow(majorMultiplier, major));
+};
+
+export var fontSizes = {
+  'xs': getFontSize(-2),
+  'sm': getFontSize(-1),
+  'md': getFontSize(0),
+  'lg': getFontSize(1),
+  'xl': getFontSize(2),
+  'xx': getFontSize(3)
+};
+export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 500), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 700), _fontWeights);
+export var textColors = {
+  primary: neutral[10],
+  secondary: neutral[40],
+  primaryLight: white,
+  secondaryLight: neutral[95],
+  button: button.label,
+  active: active
+};

package/lib/styles/theme.js

@@ -0,0 +1,61 @@
+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 spacing from './spacing';
+import colors, { accent, line, shadow, focus } from './colors';
+import { fontSizes, fontWeights, textColors } from './text';
+import breakpoints from './breakpoints';
+import forms from './forms';
+import { variants, buttons, text, images, links, bidirectionalIconButton } from './variants';
+export default {
+  name: 'Astro',
+  space: spacing,
+  colors: _objectSpread(_objectSpread({}, colors), {}, {
+    background: accent[99]
+  }),
+  borders: {
+    separator: "1px solid ".concat(line.hairline)
+  },
+  breakpoints: breakpoints,
+  fonts: {
+    standard: '"Helvetica Neue", Helvetica, sans-serif'
+  },
+  fontSizes: fontSizes,
+  fontWeights: fontWeights,
+  sizes: {
+    buttonHeight: 36,
+    column: 400,
+    container: {
+      xs: '400px',
+      sm: '550px',
+      md: '800px',
+      lg: '1200px',
+      full: '100%'
+    }
+  },
+  shadows: {
+    standard: "0 1px 3px ".concat(shadow),
+    row: "0 0 9px ".concat(accent[95]),
+    focus: "0 0 5px ".concat(focus)
+  },
+  forms: forms,
+  text: text,
+  images: images,
+  buttons: _objectSpread(_objectSpread({}, buttons), {}, {
+    bidirectionalIconButton: bidirectionalIconButton
+  }),
+  textColors: textColors,
+  links: links,
+  variants: variants
+};

package/lib/styles/themeOverrides/index.js

@@ -0,0 +1 @@
+export { default } from '.';

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -0,0 +1,110 @@
+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 theme from '../theme';
+var buttons = {
+  accordionHeader: _objectSpread(_objectSpread({}, theme.buttons.accordionHeader), {}, {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
+      color: 'active'
+    }),
+    '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+      border: 'none'
+    })
+  }),
+  critical: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.critical), theme.buttons.defaultHover)
+  },
+  danger: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.danger), theme.buttons.defaultHover)
+  },
+  success: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.success), theme.buttons.defaultHover)
+  },
+  "default": {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons["default"]), theme.buttons.defaultHover),
+    '&:focus': _objectSpread({}, theme.buttons.defaultHover)
+  },
+  inline: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
+  },
+  primary: {
+    '&:hover': _objectSpread({}, theme.buttons.primary)
+  },
+  link: {
+    'body &': theme.buttons.link,
+    'body &:hover': theme.buttons.link
+  },
+  iconButton: {
+    ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+      border: 'none'
+    })
+  },
+  environmentBreadcrumb: {
+    current: {
+      '&:hover:not(.disabled)': _objectSpread({}, theme.buttons.environmentBreadcrumb.current)
+    }
+  },
+  rocker: _objectSpread(_objectSpread({}, theme.buttons.rocker), {}, {
+    ':focus': {
+      border: 'none'
+    },
+    '&.is-selected:hover': {
+      color: 'white'
+    },
+    ':not(.is-selected):hover': {
+      color: 'accent.30'
+    }
+  })
+};
+var forms = {
+  input: {
+    numberField: _objectSpread(_objectSpread(_objectSpread({}, theme.input), theme.numberFieldStyles), {}, {
+      '&[type=text]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        backgroundColor: 'white',
+        borderColor: 'neutral.80'
+      }),
+      '&[type=text]:focus': {
+        borderColor: 'neutral.80'
+      }
+    })
+  },
+  select: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+      borderColor: 'neutral.80'
+    })
+  },
+  search: {
+    container: {
+      '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
+        borderColor: 'neutral.80',
+        bg: 'white',
+        '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
+          fontStyle: 'unset'
+        })
+      })
+    }
+  },
+  label: {
+    'body &': {
+      textTransform: 'none'
+    },
+    checkbox: {
+      textTransform: 'none'
+    }
+  }
+};
+export default {
+  buttons: buttons,
+  forms: forms
+};

package/lib/styles/themes/astro-nano/astro-nano.js

@@ -0,0 +1,141 @@
+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 { merge } from 'theme-ui';
+import chroma from 'chroma-js';
+import astroTheme from '../../theme';
+var scaleFont = 1.2;
+var borderRadius = 4;
+var focusStyles = {
+  boxShadow: 'none',
+  outline: '1px solid #000000',
+  outlineOffset: 2,
+  outlineColor: 'active'
+};
+var inputFocusStyles = {
+  borderColor: 'active',
+  outline: '4px solid #000000',
+  outlineColor: 'accent.90'
+};
+var baseButton = {
+  borderRadius: borderRadius,
+  fontWeight: 400,
+  height: '50px',
+  '&.is-hovered': {
+    boxShadow: 'none',
+    color: 'white',
+    bg: 'activeDark'
+  },
+  '&.is-pressed': {
+    bg: 'activeDarker'
+  },
+  '&:focus-visible': focusStyles,
+  '&.is-focused': focusStyles
+};
+var linkStyles = {
+  '&.is-hovered': {
+    color: 'activeDark'
+  },
+  '&.is-pressed': {
+    color: 'activeDarker'
+  }
+};
+var modifyTheme = {
+  buttons: {
+    "default": _objectSpread({
+      color: 'active'
+    }, baseButton),
+    primary: _objectSpread({}, baseButton)
+  },
+  colors: {
+    activeDark: chroma(astroTheme.colors.active).darken(0.5).hex(),
+    activeDarker: chroma(astroTheme.colors.active).darken(1).hex()
+  },
+  fontSizes: {
+    xs: scaleFont * astroTheme.fontSizes.xs,
+    sm: scaleFont * astroTheme.fontSizes.sm,
+    md: scaleFont * astroTheme.fontSizes.md,
+    lg: scaleFont * astroTheme.fontSizes.lg,
+    xl: scaleFont * astroTheme.fontSizes.xl,
+    xx: scaleFont * astroTheme.fontSizes.xx,
+    xxx: '48px'
+  },
+  forms: {
+    input: {
+      fontSize: 'md',
+      borderRadius: borderRadius,
+      height: '50px',
+      '&:focus': inputFocusStyles,
+      primary: _objectSpread(_objectSpread({}, astroTheme.forms.input), {}, {
+        borderRadius: borderRadius,
+        fontSize: 'xxx',
+        borderColor: 'neutral.60',
+        height: '75px',
+        textAlign: 'center',
+        letterSpacing: '12px',
+        fontWeight: 'bold',
+        '&:focus': inputFocusStyles
+      })
+    }
+  },
+  links: {
+    web: linkStyles,
+    app: linkStyles
+  },
+  text: {
+    title: {
+      fontWeight: 700
+    },
+    footer: {
+      color: 'text.secondary',
+      fontSize: 'xs'
+    },
+    label: {
+      color: 'text.primary'
+    }
+  },
+  variants: {
+    boxes: {
+      card: {
+        borderRadius: borderRadius,
+        flexGrow: [1, 0],
+        maxWidth: astroTheme.breakpoints[0],
+        bg: 'white',
+        alignItems: 'stretch',
+        py: [0, 'xl'],
+        my: 'auto',
+        boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
+        width: ['100%', '450px'],
+        minHeight: 'fit-content'
+      },
+      wrapper: {
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        bg: ['white', 'accent.99'],
+        py: 'lg',
+        gap: 'lg',
+        overflow: 'auto',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      cardBody: {
+        flexGrow: [1, 0]
+      }
+    }
+  }
+};
+export default merge(astroTheme, modifyTheme);

package/lib/styles/themes/astro-nano/index.js

@@ -0,0 +1 @@
+export { default } from './astro-nano';