@pingux/astro 2.84.0-alpha.1 → 2.84.0-alpha.3

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

@@ -18,36 +18,63 @@ exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _theme = _interopRequireDefault(require("../../theme.js"));
+var _codeView = _interopRequireDefault(require("./codeView/codeView"));
 var _colors = _interopRequireDefault(require("./colors/colors"));
 var _button = _interopRequireDefault(require("./variants/button"));
+var _cards = _interopRequireDefault(require("./variants/cards"));
+var _links = _interopRequireDefault(require("./variants/links"));
 var _text = require("./variants/text");
 var _variants = _interopRequireWildcard(require("./variants/variants"));
 var _forms = _interopRequireDefault(require("./forms"));
+var _spacing = _interopRequireDefault(require("./spacing"));
 var _text2 = require("./text");
 require("./open_sans.css");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
 var nextGenTheme = {
   name: 'Next Gen',
   colors: _colors["default"],
+  breakpoints: breakpoints,
   buttons: _button["default"],
   forms: _forms["default"],
   fontSizes: _text2.fontSizes,
   fontWeights: _text2.fontWeights,
   lineHeights: {
-    body: '1.5'
+    body: '1.5',
+    md: '1.75'
   },
   text: _text.text,
   fonts: {
     standard: '"Open Sans", sans-serif',
     body: '"Open Sans", sans-serif',
-    heading: '"Open Sans", sans-serif'
+    heading: '"Open Sans", sans-serif',
+    codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
+  },
+  sizes: {
+    container: {
+      xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+      sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+      md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+      lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+      xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+      xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+      fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+    }
   },
   badges: _variants.badges,
-  variants: _variants["default"]
+  space: _spacing["default"],
+  links: _links["default"],
+  cards: _cards["default"],
+  variants: _variants["default"],
+  overrides: {
+    codeView: _codeView["default"]
+  }
 };
 var mergedTheme = (0, _deepmerge["default"])(_theme["default"], nextGenTheme);
-var _default = _objectSpread({}, mergedTheme);
+var _default = _objectSpread(_objectSpread({}, mergedTheme), {}, {
+  breakpoints: breakpoints
+});
 exports["default"] = _default;

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

@@ -0,0 +1,9 @@
+declare const scale: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xx: string;
+};
+export default scale;

package/lib/cjs/styles/themes/next-gen/spacing.js

@@ -0,0 +1,17 @@
+"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 scale = {
+  xs: '.25rem',
+  sm: '.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '3rem',
+  xx: '4rem'
+};
+var _default = scale;
+exports["default"] = _default;

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

@@ -1,6 +1,6 @@
 export declare const fontSizes: {
-    xs: number;
-    sm: number;
+    xs: string;
+    sm: string;
     md: string;
     lg: string;
     xl: string;

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

@@ -8,20 +8,15 @@ _Object$defineProperty(exports, "__esModule", {
 exports.fontWeights = exports.fontSizes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 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': '15px',
-  'lg': '18.75px',
-  'xl': '22.5px',
-  'xx': '26.25px',
-  'xxx': '33.75px'
+  'xs': '0.75rem',
+  'sm': '0.875rem',
+  'md': '.9375rem',
+  'lg': '1.171875rem',
+  'xl': '1.40625rem',
+  'xx': '1.640625rem',
+  'xxx': '2.109375rem'
 };
 exports.fontSizes = fontSizes;
-var fontWeights = (_fontWeights = {}, (0, _defineProperty2["default"])(_fontWeights, -1, 400), (0, _defineProperty2["default"])(_fontWeights, 0, 400), (0, _defineProperty2["default"])(_fontWeights, 1, 400), (0, _defineProperty2["default"])(_fontWeights, 2, 600), (0, _defineProperty2["default"])(_fontWeights, 3, 600), _fontWeights);
+var fontWeights = (_fontWeights = {}, (0, _defineProperty2["default"])(_fontWeights, -1, 300), (0, _defineProperty2["default"])(_fontWeights, 0, 400), (0, _defineProperty2["default"])(_fontWeights, 1, 400), (0, _defineProperty2["default"])(_fontWeights, 2, 600), (0, _defineProperty2["default"])(_fontWeights, 3, 600), _fontWeights);
 exports.fontWeights = fontWeights;

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

@@ -1,11 +1,12 @@
 declare const buttons: {
     neutral: {
         '&.is-pressed': {
-            backgroundColor: string;
+            color: string;
         };
         '&.is-hovered': {
-            backgroundColor: string;
+            borderColor: string;
         };
+        transition: string;
         alignItems: string;
         justifyContent: string;
         minWidth: string;
@@ -34,7 +35,6 @@ declare const buttons: {
             outlineColor: string;
             outlineOffset: string;
         };
-        transition: string;
         color: string;
     };
     primary: {
@@ -417,6 +417,7 @@ declare const buttons: {
     };
     iconButtons: {
         base: {
+            cursor: string;
             transition: string;
             outline: string;
             borderRadius: string;
@@ -500,6 +501,7 @@ declare const buttons: {
             position: string;
             top: number;
             right: number;
+            cursor: string;
             transition: string;
             outline: string;
             borderRadius: string;
@@ -563,6 +565,7 @@ declare const buttons: {
             };
         };
         messageCloseButton: {
+            cursor: string;
             transition: string;
             outline: string;
             borderRadius: string;
@@ -590,11 +593,41 @@ declare const buttons: {
                 };
             };
         };
+        headerNav: {
+            borderRadius: string;
+            path: {
+                fill: string;
+            };
+            px: string;
+            py: string;
+            width: string;
+            '&.is-hovered': {
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                path: {
+                    fill: string;
+                };
+            };
+            cursor: string;
+            transition: string;
+            outline: string;
+            border: string;
+            borderColor: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;
         top: number;
         right: number;
+        cursor: string;
         transition: string;
         outline: string;
         borderRadius: string;

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

@@ -54,14 +54,14 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-var neutral = _objectSpread(_objectSpread({
+var neutral = _objectSpread(_objectSpread(_objectSpread({
   color: 'gray-600'
-}, buttonBase), {}, {
+}, buttonBase), transitions), {}, {
   '&.is-pressed': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    color: 'white'
   },
   '&.is-hovered': {
-    backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+    borderColor: 'primary'
   }
 });
 var primary = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -159,6 +159,7 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   color: 'white'
 });
 var baseIconButton = {
+  cursor: 'pointer',
   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',
@@ -238,7 +239,26 @@ var iconButtons = {
       }
     }, transitions)
   },
-  messageCloseButton: _objectSpread({}, baseIconButton)
+  messageCloseButton: _objectSpread({}, baseIconButton),
+  headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    borderRadius: '4px',
+    path: {
+      fill: 'gray-800'
+    },
+    px: 'md',
+    py: 'sm',
+    width: '56px',
+    '&.is-hovered': {
+      path: {
+        fill: 'gray-500'
+      }
+    },
+    '&.is-pressed': {
+      path: {
+        fill: 'gray-500'
+      }
+    }
+  })
 };
 var buttons = {
   neutral: neutral,

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

@@ -0,0 +1,20 @@
+declare const _default: {
+    interactive: {
+        boxShadow: string;
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+        transition: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            outline: string;
+            borderColor: string;
+            bg: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,28 @@
+"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 interactive = {
+  boxShadow: 'none',
+  borderRadius: '24px',
+  border: '1px solid',
+  borderColor: 'gray-300',
+  transition: 'border-color .15s ease-in',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
+  },
+  '&.is-hovered': {
+    outline: 'none',
+    borderColor: 'blue',
+    bg: 'default'
+  }
+};
+var _default = {
+  interactive: interactive
+};
+exports["default"] = _default;

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

@@ -0,0 +1,56 @@
+declare const _default: {
+    nextGen: {
+        color: string;
+        fontSize: string;
+        py: string;
+        px: string;
+        textDecoration: string;
+        borderRadius: string;
+        lineHeight: string;
+        minHeight: string;
+        fontFamily: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    sideNav: {
+        px: string;
+        display: string;
+        position: 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

@@ -0,0 +1,62 @@
+"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 nextGen = {
+  color: 'gray-800',
+  fontSize: 'md',
+  py: 'sm',
+  px: 'md',
+  textDecoration: 'none',
+  borderRadius: '4px',
+  lineHeight: '22.5px',
+  minHeight: '22.5px',
+  fontFamily: 'standard',
+  '&.is-hovered': {
+    color: '#155cba'
+  },
+  '&.is-pressed': {
+    color: '#155cba'
+  }
+};
+var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
+  px: '0',
+  display: 'block',
+  position: 'relative',
+  '&:before': {
+    position: 'absolute',
+    display: 'block',
+    borderRadius: '.25rem',
+    content: '""',
+    top: '0',
+    right: '-1rem',
+    bottom: 0,
+    left: '-1rem',
+    transition: 'background-color .15s ease'
+  },
+  '&.is-selected': {
+    color: '#155cba',
+    '&:before': {
+      backgroundColor: 'active_light'
+    }
+  }
+});
+var _default = {
+  nextGen: nextGen,
+  sideNav: sideNav
+};
+exports["default"] = _default;

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

@@ -46,6 +46,7 @@ export declare const text: {
     };
     placeholder: {
         color: string;
+        fontWeight: number;
     };
     paragraph: {
         lineHeight: string;
@@ -53,4 +54,10 @@ export declare const text: {
     listViewItemText: {
         fontWeight: number;
     };
+    small: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        lineHeight: string;
+    };
 };

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

@@ -52,7 +52,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'sm'
+    fontSize: 'xs'
   }
 };
 var text = _objectSpread({
@@ -65,13 +65,20 @@ var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary'
+    color: 'text.primary',
+    fontWeight: 1
   },
   paragraph: {
     lineHeight: 'body'
   },
   listViewItemText: {
     fontWeight: 2
+  },
+  small: {
+    fontSize: 'sm',
+    color: 'gray-500',
+    fontFamily: 'standard',
+    lineHeight: '1.75rem'
   }
 }, hTags);
 exports.text = text;

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

@@ -446,6 +446,9 @@ declare const _default: {
                 bg: string;
             };
         };
+        separator: {
+            my: string;
+        };
     };
     avatar: {
         xl: {
@@ -482,8 +485,12 @@ declare const _default: {
         };
     };
     listViewItem: {
+        rightOfData: {
+            flexShrink: number;
+            whiteSpace: string;
+        };
         iconContainer: {
-            mr: string;
+            ml: string;
         };
         styledListItem: {
             bg: string;
@@ -576,5 +583,28 @@ declare const _default: {
             fontSize: string;
         };
     };
+    codeView: {
+        wrapper: {
+            backgroundColor: string;
+            borderRadius: string;
+            '> button >svg': {
+                color: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '> pre': {
+                p: string;
+            };
+        };
+    };
+    tabs: {
+        gap: string;
+    };
+    menu: {
+        p: string;
+        border: string;
+        borderColor: string;
+    };
 };
 export default _default;

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

@@ -235,11 +235,14 @@ var menuItem = {
       color: 'text.primary',
       bg: 'lightblue'
     }
+  },
+  separator: {
+    my: 'sm'
   }
 };
 var separator = {
   base: {
-    bg: 'gray-200'
+    bg: 'gray-300'
   }
 };
 var avatarBase = {
@@ -282,8 +285,12 @@ var progressBar = {
   })
 };
 var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
   iconContainer: {
-    mr: 'sm'
+    ml: '0px'
   },
   styledListItem: {
     bg: 'white',
@@ -304,8 +311,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1.25rem',
-    px: '1rem',
+    py: '1rem',
+    px: '1.5rem',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -459,6 +466,29 @@ var dataTable = {
     fontSize: 'md'
   }
 };
+var codeView = {
+  wrapper: {
+    backgroundColor: 'gray-900',
+    borderRadius: '4px',
+    '> button >svg': {
+      color: 'gray-300',
+      path: {
+        fill: 'gray-300'
+      }
+    },
+    '> pre': {
+      p: 'md'
+    }
+  }
+};
+var tabs = {
+  gap: '0px'
+};
+var menu = {
+  p: 'sm',
+  border: '1px solid',
+  borderColor: 'gray-300'
+};
 var _default = {
   navBar: navBar,
   fieldHelperText: fieldHelperText,
@@ -473,6 +503,9 @@ var _default = {
   listViewItem: listViewItem,
   progressBar: progressBar,
   listView: listView,
-  dataTable: dataTable
+  dataTable: dataTable,
+  codeView: codeView,
+  tabs: tabs,
+  menu: menu
 };
 exports["default"] = _default;

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

@@ -41,6 +41,7 @@ var _ListViewItem = _interopRequireDefault(require("../../components/ListViewIte
 var _Loader = _interopRequireDefault(require("../../components/Loader/Loader.styles"));
 var _Menu = _interopRequireDefault(require("../../components/Menu/Menu.styles"));
 var _MenuItem = _interopRequireDefault(require("../../components/MenuItem/MenuItem.styles"));
+var _MenuSection = _interopRequireDefault(require("../../components/MenuSection/MenuSection.styles"));
 var _Message = _interopRequireDefault(require("../../components/Messages/Message.styles"));
 var _Modal = _interopRequireDefault(require("../../components/Modal/Modal.styles"));
 var _NavBar = _interopRequireDefault(require("../../components/NavBar/NavBar.styles"));
@@ -90,6 +91,7 @@ var _default = _objectSpread({
   loader: _Loader["default"],
   menu: _Menu["default"],
   menuItem: _MenuItem["default"],
+  menuSection: _MenuSection["default"],
   message: _Message["default"],
   modal: _Modal["default"],
   navBar: _NavBar["default"],

package/lib/cjs/types/codeView.d.ts

@@ -13,4 +13,5 @@ export interface CodeViewProps extends HoverProps {
     language?: Language;
     Prism?: PrismProps;
     sx?: ThemeUICSSObject;
+    stylesProp?: ThemeUICSSObject;
 }

package/lib/cjs/types/index.d.ts

@@ -30,6 +30,7 @@ export * from './listItem';
 export * from './loader';
 export * from './menu';
 export * from './menuItem';
+export * from './menuSection';
 export * from './messages';
 export * from './Modal';
 export * from './navBar';