@pingux/astro 2.91.0 → 2.92.0-alpha.0

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

@@ -0,0 +1,103 @@
+"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.badges = exports.badgeDeleteButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _button = _interopRequireDefault(require("./button"));
+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 badgeFont = {
+  fontSize: '11.25px',
+  fontWeight: 2
+};
+var baseBadge = {
+  alignItems: 'center',
+  justifyContent: 'center',
+  py: '.25em',
+  px: '.4em',
+  borderRadius: '4px',
+  fontSize: '11.25px',
+  alignSelf: 'flex-start',
+  display: 'inline-flex !important',
+  width: 'fit-content',
+  '& span': _objectSpread({}, badgeFont)
+};
+var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14
+});
+exports.badgeDeleteButton = badgeDeleteButton;
+var badges = {
+  primary: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf1fb !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: '#1967d2'
+    })
+  }),
+  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf1fb !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: '#1967d2'
+    })
+  }),
+  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#f6f8fa !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'gray-900'
+    })
+  }),
+  success: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#d3eddf !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'success.dark'
+    })
+  }),
+  danger: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#f8d8d5 !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'red-700'
+    })
+  }),
+  warning: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#fff1da !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'yellow-700'
+    })
+  }),
+  dark: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: 'black !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'white'
+    })
+  }),
+  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf2fd !important',
+    paddingRight: '0px !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      fontSize: '14px',
+      color: 'text.primary',
+      fontWeight: 400
+    })
+  }),
+  readOnlyBadge: {
+    '& span': {
+      fontSize: '14px'
+    }
+  },
+  badgeDeleteButton: badgeDeleteButton
+};
+exports.badges = badges;

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

@@ -320,6 +320,7 @@ declare const buttons: {
         transition: string;
     };
     link: {
+        color: string;
         transition: string;
         fontSize: string;
         textDecoration: string;

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

@@ -46,7 +46,7 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   lineHeight: 1.5,
   borderRadius: '1.75rem',
   border: '1px solid',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   px: '20px',
   py: '12px',
   height: '48.5px',
@@ -93,7 +93,7 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
 });
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   color: 'text.secondary'
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -129,14 +129,15 @@ var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
 });
 var checkboxButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   color: 'text.secondary'
 });
 var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
-  backgroundColor: 'gray-500',
+  backgroundColor: 'text.primary',
   color: 'white'
 });
 var link = {
+  color: 'active',
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',

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

@@ -16,6 +16,34 @@ declare const _default: {
             bg: string;
         };
     };
+    dark: {
+        border: string;
+        backgroundColor: string;
+        p: string;
+        gap: string;
+        boxShadow: string;
+        borderColor: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
+    light: {
+        border: string;
+        backgroundColor: string;
+        p: string;
+        gap: string;
+        boxShadow: string;
+        borderColor: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
     activeCard: {
         borderColor: string;
         '&.is-hovered': {
@@ -32,5 +60,17 @@ declare const _default: {
             outlineOffset: string;
         };
     };
+    container: {
+        p: string;
+        boxShadow: string;
+        border: string;
+        borderColor: string;
+        borderRadius: string;
+        display: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+    };
 };
 export default _default;

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _flatInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/flat");
 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");
@@ -14,13 +15,14 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Card = require("../../../../components/Card/Card.styles");
 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 interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     outline: '2px solid',
@@ -33,6 +35,21 @@ var interactive = {
     bg: 'default'
   }
 };
+var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
+  p: 'lg'
+});
+var dark = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
+  border: 'none',
+  backgroundColor: 'card.blue',
+  p: 'lg',
+  gap: 'lg'
+});
+var light = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
+  border: 'none',
+  backgroundColor: 'card.gray',
+  p: 'lg',
+  gap: 'lg'
+});
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
   borderColor: 'border.base',
   '&.is-hovered': {
@@ -42,6 +59,9 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
 });
 var _default = {
   interactive: interactive,
-  activeCard: activeCard
+  dark: dark,
+  light: light,
+  activeCard: activeCard,
+  container: container
 };
 exports["default"] = _default;

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

@@ -0,0 +1,36 @@
+declare const _default: {
+    sm: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        p: string;
+    };
+    md: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        p: string;
+    };
+    lg: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        p: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,51 @@
+"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"));
+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 circle = {
+  '&.is-circle': {
+    borderRadius: '50%'
+  }
+};
+var iconWrapper = {
+  sm: _objectSpread({
+    borderRadius: '4px',
+    minHeight: '32px',
+    minWidth: '32px',
+    height: '32px',
+    width: '32px',
+    p: '7px'
+  }, circle),
+  md: _objectSpread({
+    borderRadius: '4px',
+    minHeight: '48px',
+    minWidth: '48px',
+    height: '48px',
+    width: '48px',
+    p: '12px'
+  }, circle),
+  lg: _objectSpread({
+    borderRadius: '16px',
+    minHeight: '104px',
+    minWidth: '104px',
+    height: '104px',
+    width: '104px',
+    p: '28px'
+  }, circle)
+};
+var _default = _objectSpread({}, iconWrapper);
+exports["default"] = _default;

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

@@ -21,16 +21,16 @@ var defaultFocus = {
   boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
 };
 var readOnlyandDisabledStyles = {
-  backgroundColor: 'gray-100',
+  backgroundColor: 'disabled',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'border.input',
   opacity: 1
 };
 var input = {
   fontSize: 'md',
   p: '0.75rem',
-  backgroundColor: 'white',
-  borderColor: 'border.base',
+  backgroundColor: 'background.base',
+  borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
@@ -53,7 +53,7 @@ var fieldControlWrapper = {
   '> textarea': {
     borderRadius: '4px',
     border: '1px solid',
-    borderColor: 'border.base !important',
+    borderColor: 'border.input !important',
     outline: 'none'
   },
   '&.is-disabled': {
@@ -83,18 +83,18 @@ var fieldControlWrapper = {
     borderLeftWidth: 1,
     borderRadius: '4px',
     border: '1px solid',
-    borderColor: 'border.base'
+    borderColor: 'border.input'
   },
   '&.is-read-only': {
     '> input': {
       backgroundColor: 'gray-100',
       border: '1px solid',
-      borderColor: 'border.base !important'
+      borderColor: 'border.input !important'
     },
     '> textarea': {
       backgroundColor: 'gray-100',
       border: '1px solid',
-      borderColor: 'border.base !important'
+      borderColor: 'border.input !important'
     },
     '&:after': {
       display: 'none'
@@ -109,7 +109,7 @@ var fieldControlWrapper = {
 exports.fieldControlWrapper = fieldControlWrapper;
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
-  borderColor: 'border.base',
+  borderColor: 'border.input',
   borderStyle: 'solid',
   borderWidth: 1,
   flexDirection: 'row !important',

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

@@ -6,7 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.label = void 0;
 var label = {
-  color: 'gray-900',
+  color: 'text.primary',
   fontSize: '.9375rem',
   '&.is-float-label': {
     fontSize: 'md',

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

@@ -54,5 +54,80 @@ declare const _default: {
             color: string;
         };
     };
+    footerLinks: {
+        px: string;
+        display: string;
+        position: string;
+        cursor: string;
+        '&:before': {
+            position: string;
+            display: string;
+            borderRadius: string;
+            content: string;
+            top: string;
+            right: string;
+            bottom: number;
+            left: string;
+            transition: string;
+        };
+        '&.is-selected': {
+            color: string;
+            '&:before': {
+                backgroundColor: string;
+            };
+        };
+        color: string;
+        fontSize: string;
+        py: string;
+        textDecoration: string;
+        borderRadius: string;
+        lineHeight: string;
+        minHeight: string;
+        fontFamily: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    footerHeader: {
+        fontWeight: string;
+        px: string;
+        display: string;
+        position: string;
+        cursor: string;
+        '&:before': {
+            position: string;
+            display: string;
+            borderRadius: string;
+            content: string;
+            top: string;
+            right: string;
+            bottom: number;
+            left: string;
+            transition: string;
+        };
+        '&.is-selected': {
+            color: string;
+            '&:before': {
+                backgroundColor: string;
+            };
+        };
+        color: string;
+        fontSize: string;
+        py: string;
+        textDecoration: string;
+        borderRadius: string;
+        lineHeight: string;
+        minHeight: string;
+        fontFamily: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
 };
 export default _default;

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

@@ -57,8 +57,14 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     }
   }
 });
+var footerLinks = _objectSpread({}, sideNav);
+var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
+  fontWeight: '2'
+});
 var _default = {
   nextGen: nextGen,
-  sideNav: sideNav
+  sideNav: sideNav,
+  footerLinks: footerLinks,
+  footerHeader: footerHeader
 };
 exports["default"] = _default;

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

@@ -0,0 +1,68 @@
+export declare const listViewItem: {
+    rightOfData: {
+        flexShrink: number;
+        whiteSpace: string;
+    };
+    iconContainer: {
+        ml: string;
+    };
+    styledListItem: {
+        bg: string;
+        '&.is-selected': {
+            bg: string;
+        };
+        borderBottom: string;
+        '&.has-separator': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            bg: string;
+        };
+    };
+    styledContainer: {
+        py: string;
+        px: string;
+        bg: string;
+        '&.is-hovered': {
+            bg: string;
+            cursor: string;
+        };
+    };
+    expandableStyledListItem: {
+        pr: string;
+        pl: number;
+    };
+    expandableItemBody: {
+        px: string;
+    };
+    expandableRow: {
+        '&.has-separator': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+    };
+};
+export declare const listView: {
+    container: {
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+        '& > div > div': {
+            '& > div:first-of-type': {
+                '& > div > div': {
+                    borderRadius: string;
+                };
+            };
+            '& > div:last-of-type': {
+                '& > div > div': {
+                    borderRadius: string;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listViewItem = exports.listView = void 0;
+var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
+  iconContainer: {
+    ml: '0px'
+  },
+  styledListItem: {
+    bg: 'white',
+    '&.is-selected': {
+      bg: 'gray-100'
+    },
+    borderBottom: 'none',
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'gray-200'
+    },
+    '&.is-hovered': {
+      bg: 'gray-100'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'gray-100'
+    }
+  },
+  styledContainer: {
+    py: 'md',
+    px: 'lg',
+    bg: 'transparent',
+    '&.is-hovered': {
+      bg: 'transparent',
+      cursor: 'pointer'
+    }
+  },
+  expandableStyledListItem: {
+    pr: '1.25rem',
+    pl: 0
+  },
+  expandableItemBody: {
+    px: '1.5rem'
+  },
+  expandableRow: {
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border.base'
+    }
+  }
+};
+exports.listViewItem = listViewItem;
+var listView = {
+  container: {
+    borderRadius: '16px',
+    border: '1px solid',
+    borderColor: '#e7eef4',
+    '& > div > div': {
+      '& > div:first-of-type': {
+        '& > div > div': {
+          borderRadius: '16px 16px 0 0'
+        }
+      },
+      '& > div:last-of-type': {
+        '& > div > div': {
+          borderRadius: ' 0 0 16px 16px'
+        }
+      }
+    }
+  }
+};
+exports.listView = listView;