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

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

@@ -0,0 +1,134 @@
+"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 nextGenCodeViewTheme = {
+  plain: {
+    color: '#f8f8f2',
+    backgroundColor: '#272822'
+  },
+  styles: [{
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: '#93a1a1'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: '#999999'
+    }
+  }, {
+    types: ['deleted', 'property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
+    style: {
+      color: '#c792ea'
+    }
+  }, {
+    types: ['inserted', 'selector', 'string', 'char', 'builtin', 'inserted', 'attr-name'],
+    style: {
+      color: '#A1C281'
+    }
+  }, {
+    types: ['operator', 'entity', 'url', 'language-css', 'style'],
+    style: {
+      color: '#dfc084',
+      background: 'transparent'
+    }
+  }, {
+    types: ['atrule', 'attr-value', 'keyword'],
+    style: {
+      color: '#c792ea'
+    }
+  }, {
+    types: ['function'],
+    style: {
+      color: '#53bcfd'
+    }
+  }, {
+    types: ['regex', 'important', 'variable'],
+    style: {
+      color: '#f07178'
+    }
+  }, {
+    types: ['important', 'bold'],
+    style: {
+      fontWeight: 'bold'
+    }
+  }, {
+    types: ['entity'],
+    style: {
+      cursor: 'help'
+    }
+  }]
+};
+var nextGenCodeViewWrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 'xs',
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    padding: '1em',
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontSize: '13px',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    },
+    fontFamily: 'codeView',
+    lineHeight: 'md'
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 'sm'
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 'sm'
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  px: 'xs',
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white',
+  lineHeight: '20px'
+};
+var _default = {
+  theme: nextGenCodeViewTheme,
+  wrapper: nextGenCodeViewWrapper,
+  lineNo: lineNo
+};
+exports["default"] = _default;

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

@@ -5,6 +5,6 @@ _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'];
+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'];
 var _default = nextGenConvertedComponents;
 exports["default"] = _default;

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,14 @@ declare const _default: {
         };
     };
     fontSizes: {
-        xs: number;
-        sm: number;
+        avatar: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        xs: string;
+        sm: string;
         md: string;
         lg: string;
         xl: string;
@@ -956,6 +996,7 @@ declare const _default: {
     };
     lineHeights: {
         body: string;
+        md: string;
     };
     text: {
         h1: {
@@ -1005,6 +1046,7 @@ declare const _default: {
         };
         placeholder: {
             color: string;
+            fontWeight: number;
         };
         paragraph: {
             lineHeight: string;
@@ -1012,11 +1054,35 @@ 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: {
+        avatar: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        container: {
+            xs: string[];
+            sm: string[];
+            md: string[];
+            lg: string[];
+            xl: string[];
+            xx: string[];
+            fluid: string[];
+        };
     };
     badges: {
         primary: {
@@ -1194,6 +1260,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: {
@@ -1407,6 +1555,9 @@ declare const _default: {
                     color: string;
                     bg: string;
                     pl: number;
+                    '&.is-focused': {
+                        color: string;
+                    };
                 };
             };
         };
@@ -1434,44 +1585,60 @@ declare const _default: {
                     bg: string;
                 };
             };
+            separator: {
+                my: string;
+            };
         };
         avatar: {
-            xl: {
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
-                fontSize: string;
+            backgroundColor: string;
+            color: string;
+            cursor: string;
+            '&.is-orange': {
+                backgroundColor: string;
+                color: string;
             };
-            lg: {
-                fontSize: string;
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
+            '&.is-green': {
+                backgroundColor: string;
+                color: string;
             };
-            md: {
-                fontSize: string;
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
+            '&.is-purple': {
+                backgroundColor: string;
+                color: string;
             };
-            sm: {
-                fontSize: string;
-                borderRadius: string;
-                textAlign: string;
-                justifyContent: string;
-                fontFamily: string;
-                size: string;
+            '&.is-pink': {
+                backgroundColor: string;
+                color: string;
             };
+            '&.is-red': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-yellow': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-cyan': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-teal': {
+                backgroundColor: string;
+                color: string;
+            };
+            display: string;
+            borderRadius: string;
+            textAlign: string;
+            alignItems: string;
+            justifyContent: string;
+            fontFamily: string;
         };
         listViewItem: {
+            rightOfData: {
+                flexShrink: number;
+                whiteSpace: string;
+            };
             iconContainer: {
-                mr: string;
+                ml: string;
             };
             styledListItem: {
                 bg: string;
@@ -1532,8 +1699,17 @@ declare const _default: {
                 borderRadius: string;
                 border: string;
                 borderColor: string;
-                '& > div': {
-                    borderRadius: string;
+                '& > div > div': {
+                    '& > div:first-of-type': {
+                        '& > div > div': {
+                            borderRadius: string;
+                        };
+                    };
+                    '& > div:last-of-type': {
+                        '& > div > div': {
+                            borderRadius: string;
+                        };
+                    };
                 };
             };
         };
@@ -1564,6 +1740,138 @@ 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;
+        };
+    };
+    images: {
+        avatar: {};
+    };
+    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: string;
+                };
+                '&.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;