@pingux/astro 2.88.0 → 2.89.0-alpha.1

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

@@ -4,11 +4,11 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.copyButton = void 0;
 var nextGenCodeViewTheme = {
   plain: {
     color: '#f8f8f2',
-    backgroundColor: '#272822'
+    backgroundColor: '#23282e'
   },
   styles: [{
     types: ['comment', 'prolog', 'doctype', 'cdata'],
@@ -64,9 +64,10 @@ var nextGenCodeViewTheme = {
   }]
 };
 var nextGenCodeViewWrapper = {
-  bg: 'accent.99',
+  backgroundColor: 'gray-900',
   border: '1px solid',
-  borderColor: 'accent.95',
+  borderColor: 'gray-900',
+  borderRadius: '4px',
   width: 400,
   height: 200,
   my: 'xs',
@@ -78,7 +79,7 @@ var nextGenCodeViewWrapper = {
   },
   pre: {
     backgroundColor: 'transparent',
-    padding: '1em',
+    padding: 'md',
     height: '100%',
     width: '100%',
     overflowX: 'hidden',
@@ -116,6 +117,14 @@ var nextGenCodeViewWrapper = {
     }
   }
 };
+var nextGenCodeViewHeader = {
+  color: 'gray-300',
+  px: 'md',
+  width: '100%',
+  border: '1px solid',
+  borderColor: 'gray-800',
+  lineHeight: 'body'
+};
 var lineNo = {
   display: 'table-cell',
   userSelect: 'none',
@@ -126,9 +135,16 @@ var lineNo = {
   color: 'white',
   lineHeight: '20px'
 };
+var copyButton = {
+  path: {
+    fill: 'gray-300'
+  }
+};
+exports.copyButton = copyButton;
 var _default = {
   theme: nextGenCodeViewTheme,
   wrapper: nextGenCodeViewWrapper,
-  lineNo: lineNo
+  lineNo: lineNo,
+  header: nextGenCodeViewHeader
 };
 exports["default"] = _default;

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

@@ -1,2 +1,3 @@
 declare const nextGenConvertedComponents: string[];
+export declare const nextGenComponents: string[];
 export default nextGenConvertedComponents;

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

@@ -4,7 +4,9 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card'];
+exports.nextGenComponents = exports["default"] = void 0;
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'CodeView'];
+var nextGenComponents = ['NavigationHeader'];
+exports.nextGenComponents = nextGenComponents;
 var _default = nextGenConvertedComponents;
 exports["default"] = _default;

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

@@ -818,6 +818,11 @@ declare const _default: {
                     outlineOffset: string;
                 };
             };
+            copyButton: {
+                path: {
+                    fill: string;
+                };
+            };
         };
         modalCloseButton: {
             position: string;
@@ -1259,6 +1264,145 @@ declare const _default: {
             };
         };
     };
+    navigationHeader: {
+        headerPlaceholder: {
+            fontSize: string;
+            ml: string;
+            color: string;
+            lineHeight: string;
+            fontWeight: string;
+            '&.is-hovered': {
+                color: string;
+            };
+        };
+        link: {
+            fontSize: string;
+            fontFamily: string;
+            py: string;
+            px: string;
+            fontWeight: string;
+            color: string;
+            textDecoration: string;
+            borderRadius: string;
+            '&.is-hovered': {
+                textDecoration: string;
+                color: string;
+            };
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+                outlineColor: string;
+            };
+            '&.is-pressed': {
+                textDecoration: string;
+            };
+            '&.is-visited': {
+                textDecoration: string;
+            };
+        };
+        logoBand: {
+            p: number;
+            fontSize: string;
+            fontFamily: string;
+            py: string;
+            px: string;
+            fontWeight: string;
+            color: string;
+            textDecoration: string;
+            borderRadius: string;
+            '&.is-hovered': {
+                textDecoration: string;
+                color: string;
+            };
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+                outlineColor: string;
+            };
+            '&.is-pressed': {
+                textDecoration: string;
+            };
+            '&.is-visited': {
+                textDecoration: string;
+            };
+        };
+        container: {
+            fontFamily: string;
+            borderBottom: string;
+            borderColor: string;
+            bg: string;
+            height: string;
+            justifyContent: string;
+        };
+        wrapper: {
+            px: string[];
+            maxWidth: string;
+            mx: string;
+            width: string;
+        };
+        dropdownMenu: {
+            maxWidth: string;
+            p: string;
+            '& > li': {
+                p: string;
+            };
+        };
+        dropdownMenuItem: {
+            padding: string;
+            pr: string;
+            '&.is-hovered': {
+                textDecoration: string;
+            };
+            '&.is-pressed': {
+                textDecoration: string;
+            };
+            '&.is-focused': {
+                textDecoration: string;
+            };
+            '&.is-visited': {
+                textDecoration: string;
+            };
+            fontSize: string;
+            fontFamily: string;
+            py: string;
+            px: string;
+            fontWeight: string;
+            color: string;
+            textDecoration: string;
+            borderRadius: string;
+        };
+        accountButton: {
+            display: string;
+            width: string;
+            height: string;
+            cursor: string;
+            p: string;
+            px: string;
+            py: string;
+            border: string;
+            borderRadius: string;
+            bg: string;
+            '&.is-hovered': {
+                bg: string;
+                border: string;
+                boxShadow: string;
+            };
+            '&.is-pressed': {
+                bg: string;
+                border: string;
+                boxShadow: string;
+            };
+            '&.is-focused': {
+                bg: string;
+                outline: string;
+                outlineColor: string;
+            };
+            '&.is-visited': {
+                bg: string;
+            };
+            minWidth: string;
+        };
+    };
     space: {
         xs: string;
         sm: string;
@@ -1572,6 +1716,9 @@ declare const _default: {
         separator: {
             base: {
                 bg: string;
+                '&.is-vertical': {
+                    m: string;
+                };
             };
         };
         menuItem: {
@@ -1749,19 +1896,117 @@ declare const _default: {
             };
         };
         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: {
                 backgroundColor: string;
+                border: string;
+                borderColor: string;
                 borderRadius: string;
-                '> button >svg': {
-                    color: string;
-                    path: {
-                        fill: 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: string;
+                };
+                '&.has-no-copy-button': {
+                    pre: {
+                        p: string;
                     };
                 };
-                '> 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;
+            };
+            header: {
+                color: string;
+                px: string;
+                width: string;
+                border: string;
+                borderColor: string;
+                lineHeight: string;
+            };
         };
         tabs: {
             gap: string;
@@ -1817,9 +2062,10 @@ declare const _default: {
                 })[];
             };
             wrapper: {
-                bg: string;
+                backgroundColor: string;
                 border: string;
                 borderColor: string;
+                borderRadius: string;
                 width: number;
                 height: number;
                 my: string;
@@ -1879,6 +2125,14 @@ declare const _default: {
                 color: string;
                 lineHeight: string;
             };
+            header: {
+                color: string;
+                px: string;
+                width: string;
+                border: string;
+                borderColor: string;
+                lineHeight: string;
+            };
         };
     };
 };

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

@@ -24,6 +24,7 @@ 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 _navigationHeader = _interopRequireDefault(require("./variants/navigationHeader"));
 var _text = require("./variants/text");
 var _variants = _interopRequireWildcard(require("./variants/variants"));
 var _forms = _interopRequireDefault(require("./forms"));
@@ -58,6 +59,7 @@ var nextGenTheme = {
   },
   sizes: _sizes["default"],
   badges: _variants.badges,
+  navigationHeader: _navigationHeader["default"],
   space: _spacing["default"],
   links: _links["default"],
   cards: _cards["default"],

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

@@ -622,6 +622,11 @@ declare const buttons: {
                 outlineOffset: string;
             };
         };
+        copyButton: {
+            path: {
+                fill: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;

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

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _codeView = require("../codeView/codeView");
 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; }
@@ -243,22 +244,23 @@ var iconButtons = {
   headerNav: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     borderRadius: '4px',
     path: {
-      fill: 'gray-800'
+      fill: 'text.primary'
     },
     px: 'md',
     py: 'sm',
     width: '56px',
     '&.is-hovered': {
       path: {
-        fill: 'gray-500'
+        fill: 'text.secondary'
       }
     },
     '&.is-pressed': {
       path: {
-        fill: 'gray-500'
+        fill: 'text.secondary'
       }
     }
-  })
+  }),
+  copyButton: _codeView.copyButton
 };
 var buttons = {
   neutral: neutral,

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

@@ -0,0 +1,140 @@
+declare const navigationHeader: {
+    headerPlaceholder: {
+        fontSize: string;
+        ml: string;
+        color: string;
+        lineHeight: string;
+        fontWeight: string;
+        '&.is-hovered': {
+            color: string;
+        };
+    };
+    link: {
+        fontSize: string;
+        fontFamily: string;
+        py: string;
+        px: string;
+        fontWeight: string;
+        color: string;
+        textDecoration: string;
+        borderRadius: string;
+        '&.is-hovered': {
+            textDecoration: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        '&.is-visited': {
+            textDecoration: string;
+        };
+    };
+    logoBand: {
+        p: number;
+        fontSize: string;
+        fontFamily: string;
+        py: string;
+        px: string;
+        fontWeight: string;
+        color: string;
+        textDecoration: string;
+        borderRadius: string;
+        '&.is-hovered': {
+            textDecoration: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        '&.is-visited': {
+            textDecoration: string;
+        };
+    };
+    container: {
+        fontFamily: string;
+        borderBottom: string;
+        borderColor: string;
+        bg: string;
+        height: string;
+        justifyContent: string;
+    };
+    wrapper: {
+        px: string[];
+        maxWidth: string;
+        mx: string;
+        width: string;
+    };
+    dropdownMenu: {
+        maxWidth: string;
+        p: string;
+        '& > li': {
+            p: string;
+        };
+    };
+    dropdownMenuItem: {
+        padding: string;
+        pr: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        '&.is-pressed': {
+            textDecoration: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+        };
+        '&.is-visited': {
+            textDecoration: string;
+        };
+        fontSize: string;
+        fontFamily: string;
+        py: string;
+        px: string;
+        fontWeight: string;
+        color: string;
+        textDecoration: string;
+        borderRadius: string;
+    };
+    accountButton: {
+        display: string;
+        width: string;
+        height: string;
+        cursor: string;
+        p: string;
+        px: string;
+        py: string;
+        border: string;
+        borderRadius: string;
+        bg: string;
+        '&.is-hovered': {
+            bg: string;
+            border: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            border: string;
+            boxShadow: string;
+        };
+        '&.is-focused': {
+            bg: string;
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-visited': {
+            bg: string;
+        };
+        minWidth: string;
+    };
+};
+export default navigationHeader;