@pingux/astro 2.75.0 → 2.76.0-alpha.0

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

@@ -0,0 +1,235 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _colors = _interopRequireDefault(require("../colors/colors"));
+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) { (0, _defineProperty2["default"])(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 primaryBlue = _colors["default"].primary,
+  criticalRed = _colors["default"].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: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-hovered': {
+    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+  }
+});
+var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  color: 'white',
+  backgroundColor: 'primary',
+  borderColor: 'primary',
+  '&.is-pressed': {
+    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-hovered': {
+    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+  }
+});
+var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
+  backgroundColor: 'transparent',
+  borderColor: 'primary',
+  color: 'primary',
+  '&.is-pressed': {
+    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+    color: 'white'
+  },
+  '&.is-hovered': {
+    backgroundColor: _chromaJs["default"].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: _chromaJs["default"].mix(criticalRed.bright, 'black', 0.125, 'rgb').hex(),
+    borderColor: _chromaJs["default"].mix(criticalRed.bright, 'black', 0.125, 'rgb').hex()
+  },
+  '&.is-hovered': {
+    backgroundColor: _chromaJs["default"].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: _chromaJs["default"].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
+};
+var _default = buttons;
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/input.d.ts

@@ -0,0 +1,66 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const input: ThemeUICSSObject;
+export declare const fieldControlWrapper: {
+    '> textarea': {
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+        outline: string;
+    };
+    '&.is-disabled': {
+        '> label': {
+            opacity: number;
+        };
+        opacity: number;
+        '> input': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            opacity: number;
+            fontWeight: number;
+        };
+        '> textarea': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            opacity: number;
+            fontWeight: number;
+        };
+        '&:after': {
+            display: string;
+        };
+    };
+    '&:after': {
+        display: string;
+    };
+    '& > input': {
+        borderLeftWidth: number;
+    };
+    '> button': {
+        borderLeftWidth: number;
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+    };
+    '&.is-read-only': {
+        '> input': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+        };
+        '> textarea': {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+        };
+        '&:after': {
+            display: string;
+        };
+    };
+    '&.is-focused': {
+        '> textarea': {
+            boxShadow: string;
+            outline: string;
+        };
+    };
+};

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.input = exports.fieldControlWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (0, _defineProperty2["default"])(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
+};
+var input = {
+  fontSize: 'md',
+  p: '0.75rem',
+  backgroundColor: 'white',
+  borderColor: 'border.base',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  borderRadius: '4px',
+  fontWeight: 1,
+  height: '50px'
+};
+exports.input = input;
+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%)'
+};
+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)
+  }
+};
+exports.fieldControlWrapper = fieldControlWrapper;
+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/cjs/styles/themes/next-gen/variants/label.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const label: ThemeUICSSObject;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.label = void 0;
+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'
+  }
+};
+exports.label = label;

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -0,0 +1,19 @@
+export declare const text: {
+    modalTitle: {
+        fontSize: string;
+        fontWeight: string;
+        fontFamily: string;
+    };
+    tabLabel: {
+        color: string;
+    };
+    placeholder: {
+        color: string;
+    };
+    paragraph: {
+        lineHeight: string;
+    };
+    listViewItemText: {
+        fontWeight: number;
+    };
+};

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.text = void 0;
+var text = {
+  modalTitle: {
+    fontSize: '20px',
+    fontWeight: '2',
+    fontFamily: 'standard'
+  },
+  tabLabel: {
+    color: 'text.primary'
+  },
+  placeholder: {
+    color: 'text.primary'
+  },
+  paragraph: {
+    lineHeight: 'body'
+  },
+  listViewItemText: {
+    fontWeight: 2
+  }
+};
+exports.text = text;