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

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

@@ -18,36 +18,56 @@ 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 _images = _interopRequireDefault(require("./variants/images"));
+var _links = _interopRequireDefault(require("./variants/links"));
 var _text = require("./variants/text");
 var _variants = _interopRequireWildcard(require("./variants/variants"));
 var _forms = _interopRequireDefault(require("./forms"));
+var _sizes = _interopRequireDefault(require("./sizes"));
+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: _sizes["default"],
   badges: _variants.badges,
-  variants: _variants["default"]
+  space: _spacing["default"],
+  links: _links["default"],
+  cards: _cards["default"],
+  variants: _variants["default"],
+  images: _images["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/sizes.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    avatar: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    container: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        xx: string[];
+        fluid: string[];
+    };
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/sizes.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["default"] = void 0;
+var avatar = {
+  sm: '24px',
+  md: '34px',
+  lg: '72px',
+  xl: '104px'
+};
+var 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%']
+};
+var _default = {
+  avatar: avatar,
+  container: container
+};
+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,12 @@
 export declare const fontSizes: {
-    xs: number;
-    sm: number;
+    avatar: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    xs: string;
+    sm: string;
     md: string;
     lg: string;
     xl: string;

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

@@ -7,21 +7,24 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.fontWeights = exports.fontSizes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _sizes = _interopRequireDefault(require("./sizes"));
 var _fontWeights;
-var baseSize = 15;
-var majorMultiplier = 1.15;
-var getFontSize = function getFontSize(major) {
-  return Math.round(baseSize * Math.pow(majorMultiplier, major));
-};
+var fontSizeBase = 0.9375;
 var fontSizes = {
-  'xs': getFontSize(-2),
-  'sm': getFontSize(-1),
-  'md': '15px',
-  'lg': '18.75px',
-  'xl': '22.5px',
-  'xx': '26.25px',
-  'xxx': '33.75px'
+  avatar: {
+    'sm': "calc(".concat(_sizes["default"].avatar.sm, " * .4)"),
+    'md': "calc(".concat(_sizes["default"].avatar.md, " * .4)"),
+    'lg': "calc(".concat(_sizes["default"].avatar.lg, " * .4)"),
+    'xl': "calc(".concat(_sizes["default"].avatar.xl, " * .4)")
+  },
+  'xs': "".concat(fontSizeBase * 0.8, "rem"),
+  'sm': '0.875rem',
+  'md': "".concat(fontSizeBase * 1, "rem"),
+  'lg': "".concat(fontSizeBase * 1.25, "rem"),
+  'xl': "".concat(fontSizeBase * 1.5, "rem"),
+  'xx': "".concat(fontSizeBase * 1.75, "rem"),
+  'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
 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: '1rem',
+  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/images.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    avatar: {};
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+"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 avatar = {};
+var _default = {
+  avatar: avatar
+};
+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: '1.5',
+  minHeight: '22.5px',
+  fontFamily: 'standard',
+  '&.is-hovered': {
+    color: 'blue-600'
+  },
+  '&.is-pressed': {
+    color: 'blue-600'
+  }
+};
+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: 'blue-600',
+    '&: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: 'md'
   }
 }, hTags);
 exports.text = text;