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

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

@@ -1,5 +1,6 @@
 import './open_sans.css';
 declare const _default: {
+    breakpoints: string[];
     name: string;
     colors: {
         critical: {
@@ -197,11 +198,12 @@ declare const _default: {
     buttons: {
         neutral: {
             '&.is-pressed': {
-                backgroundColor: string;
+                color: string;
             };
             '&.is-hovered': {
-                backgroundColor: string;
+                borderColor: string;
             };
+            transition: string;
             alignItems: string;
             justifyContent: string;
             minWidth: string;
@@ -230,7 +232,6 @@ declare const _default: {
                 outlineColor: string;
                 outlineOffset: string;
             };
-            transition: string;
             color: string;
         };
         primary: {
@@ -613,6 +614,7 @@ declare const _default: {
         };
         iconButtons: {
             base: {
+                cursor: string;
                 transition: string;
                 outline: string;
                 borderRadius: string;
@@ -696,6 +698,7 @@ declare const _default: {
                 position: string;
                 top: number;
                 right: number;
+                cursor: string;
                 transition: string;
                 outline: string;
                 borderRadius: string;
@@ -759,6 +762,7 @@ declare const _default: {
                 };
             };
             messageCloseButton: {
+                cursor: string;
                 transition: string;
                 outline: string;
                 borderRadius: string;
@@ -786,11 +790,41 @@ declare const _default: {
                     };
                 };
             };
+            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;
@@ -939,8 +973,8 @@ declare const _default: {
         };
     };
     fontSizes: {
-        xs: number;
-        sm: number;
+        xs: string;
+        sm: string;
         md: string;
         lg: string;
         xl: string;
@@ -956,6 +990,7 @@ declare const _default: {
     };
     lineHeights: {
         body: string;
+        md: string;
     };
     text: {
         h1: {
@@ -1005,6 +1040,7 @@ declare const _default: {
         };
         placeholder: {
             color: string;
+            fontWeight: number;
         };
         paragraph: {
             lineHeight: string;
@@ -1012,11 +1048,29 @@ declare const _default: {
         listViewItemText: {
             fontWeight: number;
         };
+        small: {
+            fontSize: string;
+            color: string;
+            fontFamily: string;
+            lineHeight: string;
+        };
     };
     fonts: {
         standard: string;
         body: string;
         heading: string;
+        codeView: string;
+    };
+    sizes: {
+        container: {
+            xs: string[];
+            sm: string[];
+            md: string[];
+            lg: string[];
+            xl: string[];
+            xx: string[];
+            fluid: string[];
+        };
     };
     badges: {
         primary: {
@@ -1194,6 +1248,88 @@ declare const _default: {
             };
         };
     };
+    space: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xx: string;
+    };
+    links: {
+        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;
+            };
+        };
+    };
+    cards: {
+        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;
+            };
+        };
+    };
     variants: {
         navBar: {
             container: {
@@ -1434,6 +1570,9 @@ declare const _default: {
                     bg: string;
                 };
             };
+            separator: {
+                my: string;
+            };
         };
         avatar: {
             xl: {
@@ -1470,8 +1609,12 @@ declare const _default: {
             };
         };
         listViewItem: {
+            rightOfData: {
+                flexShrink: number;
+                whiteSpace: string;
+            };
             iconContainer: {
-                mr: string;
+                ml: string;
             };
             styledListItem: {
                 bg: string;
@@ -1564,6 +1707,135 @@ 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;
+        };
+    };
+    overrides: {
+        codeView: {
+            theme: {
+                plain: {
+                    color: string;
+                    backgroundColor: string;
+                };
+                styles: ({
+                    types: string[];
+                    style: {
+                        color: string;
+                        background?: undefined;
+                        fontWeight?: undefined;
+                        cursor?: undefined;
+                    };
+                } | {
+                    types: string[];
+                    style: {
+                        color: string;
+                        background: string;
+                        fontWeight?: undefined;
+                        cursor?: undefined;
+                    };
+                } | {
+                    types: string[];
+                    style: {
+                        fontWeight: string;
+                        color?: undefined;
+                        background?: undefined;
+                        cursor?: undefined;
+                    };
+                } | {
+                    types: string[];
+                    style: {
+                        cursor: string;
+                        color?: undefined;
+                        background?: undefined;
+                        fontWeight?: undefined;
+                    };
+                })[];
+            };
+            wrapper: {
+                bg: string;
+                border: string;
+                borderColor: string;
+                width: number;
+                height: number;
+                my: string;
+                overflow: string;
+                alignItems: string;
+                '&.is-focused, &:focus': {
+                    boxShadow: string;
+                    outline: string;
+                };
+                pre: {
+                    backgroundColor: string;
+                    padding: string;
+                    height: string;
+                    width: string;
+                    overflowX: string;
+                    overflowY: string;
+                    fontSize: string;
+                    '& .token-line': {
+                        display: string;
+                        alignItems: string;
+                        '& .token': {
+                            whiteSpace: string;
+                            wordBreak: string;
+                        };
+                    };
+                    fontFamily: string;
+                    lineHeight: number;
+                };
+                '&.has-no-copy-button': {
+                    pre: {
+                        p: string;
+                    };
+                };
+                '&.has-line-numbers': {
+                    pre: {
+                        p: string;
+                        overflow: string;
+                        '& .token-line:first-of-type *': {
+                            pt: string;
+                        };
+                        '& .token-line': {
+                            display: string;
+                            '& .token': {
+                                whiteSpace: string;
+                            };
+                        };
+                    };
+                };
+            };
+            lineNo: {
+                display: string;
+                userSelect: string;
+                px: string;
+                m: string;
+                bg: string;
+                minWidth: number;
+                color: string;
+                lineHeight: string;
+            };
+        };
     };
 };
 export default _default;

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;