@pingux/astro 2.151.0-alpha.5 → 2.151.1-alpha.0

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

@@ -1,121 +1,281 @@
 export declare const copyButton: {
-    mx: string;
-    path: {
-        fill: string;
+    default: {
+        mx: string;
+        path: {
+            fill: string;
+        };
+        border: string;
+    };
+    light: {
+        mx: string;
+        path: {
+            fill: string;
+        };
+        border: string;
     };
-    border: string;
 };
 declare const _default: {
-    theme: {
-        plain: {
-            color: string;
-            backgroundColor: string;
-        };
-        styles: ({
-            types: string[];
-            style: {
+    default: {
+        theme: {
+            plain: {
                 color: string;
-                background?: undefined;
-                fontWeight?: undefined;
-                cursor?: undefined;
+                backgroundColor: string;
             };
-        } | {
-            types: string[];
-            style: {
-                color: string;
-                background: string;
-                fontWeight?: undefined;
-                cursor?: undefined;
+            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;
+            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;
             };
-        } | {
-            types: string[];
-            style: {
-                fontWeight: string;
-                color?: undefined;
-                background?: undefined;
-                cursor?: undefined;
+            '&.has-no-copy-button': {
+                pre: {
+                    p: string;
+                };
             };
-        } | {
-            types: string[];
-            style: {
-                cursor: string;
-                color?: undefined;
-                background?: undefined;
-                fontWeight?: undefined;
+            '&.has-line-numbers': {
+                pre: {
+                    p: string;
+                    overflow: string;
+                    '& .token-line:first-of-type *': {
+                        pt: string;
+                    };
+                    '& .token-line': {
+                        display: string;
+                        '& .token': {
+                            whiteSpace: string;
+                        };
+                    };
+                };
             };
-        })[];
-    };
-    wrapper: {
-        backgroundColor: string;
-        border: string;
-        borderColor: string;
-        borderRadius: string;
-        width: number;
-        height: number;
-        my: string;
-        overflow: string;
-        alignItems: string;
-        '&.is-focused, &:focus': {
-            boxShadow: string;
-            outline: string;
         };
-        pre: {
+        lineNo: {
+            display: string;
+            userSelect: string;
+            px: string;
+            m: string;
+            bg: string;
+            minWidth: number;
+            color: string;
+            lineHeight: string;
             backgroundColor: string;
-            padding: string;
-            height: string;
+        };
+        header: {
+            backgroundColor: string;
+            color: string;
+            px: string;
             width: string;
-            overflowX: string;
-            overflowY: string;
-            fontSize: string;
-            '& .token-line': {
-                display: string;
-                alignItems: string;
-                '& .token': {
-                    whiteSpace: string;
-                    wordBreak: string;
+            borderBottom: string;
+            borderBottomColor: string;
+            lineHeight: string;
+        };
+        copyButton: {
+            default: {
+                mx: string;
+                path: {
+                    fill: string;
                 };
+                border: string;
+            };
+            light: {
+                mx: string;
+                path: {
+                    fill: string;
+                };
+                border: string;
             };
-            fontFamily: string;
-            lineHeight: string;
         };
-        '&.has-no-copy-button': {
-            pre: {
-                p: string;
+    };
+    light: {
+        theme: {
+            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;
+                };
+            })[];
+            plain: {
+                color: string;
+                backgroundColor: string;
             };
         };
-        '&.has-line-numbers': {
+        wrapper: {
+            backgroundColor: string;
+            borderColor: string;
+            border: string;
+            borderRadius: string;
+            width: number;
+            height: number;
+            my: string;
+            overflow: string;
+            alignItems: string;
+            '&.is-focused, &:focus': {
+                boxShadow: string;
+                outline: string;
+            };
             pre: {
-                p: string;
-                overflow: string;
-                '& .token-line:first-of-type *': {
-                    pt: string;
-                };
+                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;
-    };
-    header: {
-        color: string;
-        px: string;
-        width: string;
-        border: string;
-        borderColor: string;
-        lineHeight: string;
+        header: {
+            backgroundColor: string;
+            borderBottomColor: string;
+            color: string;
+            px: string;
+            width: string;
+            borderBottom: string;
+            lineHeight: string;
+        };
+        lineNo: {
+            display: string;
+            userSelect: string;
+            px: string;
+            m: string;
+            bg: string;
+            minWidth: number;
+            color: string;
+            lineHeight: string;
+            backgroundColor: string;
+        };
+        copyButton: {
+            default: {
+                mx: string;
+                path: {
+                    fill: string;
+                };
+                border: string;
+            };
+            light: {
+                mx: string;
+                path: {
+                    fill: string;
+                };
+                border: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1,14 +1,27 @@
 "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"] = exports.copyButton = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _context;
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var nextGenCodeViewTheme = {
   plain: {
-    color: '#f8f8f2',
-    backgroundColor: '#23282e'
+    color: '#999999',
+    backgroundColor: 'codeEditor.backgroundColor'
   },
   styles: [{
     types: ['comment', 'prolog', 'doctype', 'cdata'],
@@ -64,9 +77,9 @@ var nextGenCodeViewTheme = {
   }]
 };
 var nextGenCodeViewWrapper = {
-  backgroundColor: 'gray-900',
+  backgroundColor: 'codeEditor.backgroundColor',
   border: '1px solid',
-  borderColor: 'gray-900',
+  borderColor: 'codeEditor.headerColor',
   borderRadius: '4px',
   width: 400,
   height: 200,
@@ -118,11 +131,12 @@ var nextGenCodeViewWrapper = {
   }
 };
 var nextGenCodeViewHeader = {
-  color: 'gray-300',
+  backgroundColor: 'codeEditor.headerColor',
+  color: 'font.reverse',
   px: 'md',
   width: '100%',
-  border: '1px solid',
-  borderColor: 'gray-800',
+  borderBottom: '1px solid',
+  borderBottomColor: 'gray-800',
   lineHeight: 'body'
 };
 var lineNo = {
@@ -132,21 +146,96 @@ var lineNo = {
   m: '0 10px 0 0',
   bg: 'accent.30',
   minWidth: 26,
-  color: 'white',
-  lineHeight: '20px'
+  color: '#93A1A1',
+  lineHeight: '20px',
+  backgroundColor: 'transparent'
 };
 var copyButton = {
-  mx: 'sm',
-  path: {
-    fill: 'text.primary'
+  "default": {
+    mx: 'sm',
+    path: {
+      fill: 'font.reverse'
+    },
+    border: 'none !important'
   },
-  border: 'none !important'
+  light: {
+    mx: 'sm',
+    path: {
+      fill: '#23282f'
+    },
+    border: 'none !important'
+  }
 };
 exports.copyButton = copyButton;
-var _default = {
+var codeView = {
   theme: nextGenCodeViewTheme,
   wrapper: nextGenCodeViewWrapper,
   lineNo: lineNo,
-  header: nextGenCodeViewHeader
+  header: nextGenCodeViewHeader,
+  copyButton: copyButton
+};
+var light = _objectSpread(_objectSpread({}, codeView), {}, {
+  theme: _objectSpread(_objectSpread({}, nextGenCodeViewTheme), {}, {
+    styles: (0, _concat["default"])(_context = []).call(_context, nextGenCodeViewTheme.styles, [{
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#94a0a0'
+      }
+    }, {
+      types: ['deleted', 'property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
+      style: {
+        color: '#99329f'
+      }
+    }, {
+      types: ['inserted', 'selector', 'string', 'char', 'builtin', 'inserted', 'attr-name'],
+      style: {
+        color: '#63a058'
+      }
+    }, {
+      types: ['operator', 'entity', 'url', 'language-css', 'style'],
+      style: {
+        color: '#a67f35',
+        background: 'transparent'
+      }
+    }, {
+      types: ['atrule', 'attr-value', 'keyword'],
+      style: {
+        color: '#99329f'
+      }
+    }, {
+      types: ['function'],
+      style: {
+        color: '#4e76ea'
+      }
+    }, {
+      types: ['regex', 'important', 'variable'],
+      style: {
+        color: '#f07178'
+      }
+    }, {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold'
+      }
+    }, {
+      types: ['entity'],
+      style: {
+        cursor: 'help'
+      }
+    }])
+  }),
+  wrapper: _objectSpread(_objectSpread({}, nextGenCodeViewWrapper), {}, {
+    backgroundColor: '#f7f8fa',
+    borderColor: '#f7f8fa'
+  }),
+  header: _objectSpread(_objectSpread({}, nextGenCodeViewHeader), {}, {
+    backgroundColor: '#f7f8fa',
+    borderBottomColor: '#e6edf5',
+    color: '#23282f'
+  })
+});
+var _default = {
+  "default": codeView,
+  light: light
 };
 exports["default"] = _default;

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

@@ -104,6 +104,10 @@ declare const colors: {
         };
     };
     tooltip: string;
+    codeEditor: {
+        backgroundColor: string;
+        headerColor: string;
+    };
     twoTone: {
         bg: {
             orange: string;
@@ -268,6 +272,7 @@ declare const colors: {
         light: string;
         link: string;
         label: string;
+        reverse: string;
     };
     active_hover: string;
     active_pressed: string;

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

@@ -127,6 +127,10 @@ var badge = {
   textColor: _colorTokens.nextGenColors.font.base,
   background: _colorTokens.nextGenColors['gray-100']
 };
+var codeEditor = {
+  backgroundColor: _colorTokens.nextGenColors['gray-900'],
+  headerColor: _colorTokens.nextGenColors['gray-900']
+};
 var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
   badge: badge,
@@ -147,6 +151,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   backgroundHover: backgroundHover,
   iconWrapper: _iconWrapper.iconWrapper,
   tooltip: tooltip,
+  codeEditor: codeEditor,
   twoTone: _twoTone["default"]
 });
 var _default = colors;

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

@@ -14,6 +14,7 @@ export declare const astroBlacklistStory: {
     NavBar: string[];
     SearchField: string[];
     Callout: string[];
+    CodeView: string[];
     StatusIcon: string[];
     Avatar: string[];
     Text: string[];

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

@@ -22,6 +22,7 @@ var astroBlacklistStory = {
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],
   Callout: ['Customizations'],
+  CodeView: ['Light'],
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['With Size Variation', 'With Color Variation', 'With Icon Variation', 'With Square Variation'],
   Text: ['Onyx'],