@pingux/astro 2.151.0 → 2.151.1-alpha.0

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

@@ -122,6 +122,7 @@ export declare const nextGenColors: {
         light: string;
         link: string;
         label: string;
+        reverse: string;
     };
     active: string;
     active_hover: string;

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

@@ -128,7 +128,8 @@ var nextGenColors = {
     'base': '#23282e',
     'light': '#5e6d82',
     'link': '#1a73e8',
-    'label': '#5e6d82'
+    'label': '#5e6d82',
+    'reverse': '#ffffff'
   },
   'active': '#1a73e8',
   'active_hover': '#1462C8',

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

@@ -1061,11 +1061,20 @@ declare const buttons: {
             boxShadow: string;
         };
         copyButton: {
-            mx: string;
-            path: {
-                fill: string;
+            default: {
+                mx: string;
+                path: {
+                    fill: string;
+                };
+                border: string;
+            };
+            light: {
+                mx: string;
+                path: {
+                    fill: string;
+                };
+                border: string;
             };
-            border: string;
         };
         deleteAttachment: {
             backgroundColor: string;

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

@@ -251,116 +251,267 @@ declare const _default: {
         };
     };
     codeView: {
-        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;
                 };
-            } | {
-                types: string[];
-                style: {
-                    fontWeight: string;
-                    color?: undefined;
-                    background?: undefined;
-                    cursor?: undefined;
+                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: {
-                    cursor: string;
-                    color?: undefined;
-                    background?: undefined;
-                    fontWeight?: undefined;
+                '&.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;
+                            };
+                        };
+                    };
                 };
-            })[];
-        };
-        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;
+                };
+            };
         };
     };
     dataTable: {

package/lib/components/CodeView/CodeView.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps"];
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps", "variant"];
 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) { _defineProperty(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; }
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
@@ -38,6 +38,8 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     customPrism = props.Prism,
     stylesProp = props.stylesProp,
     iconButtonProps = props.iconButtonProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
     others = _objectWithoutProperties(props, _excluded);
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -63,7 +65,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     return tokens.length.toString().length * 12;
   };
   var code = (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '';
-  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isOnyx ? codeViewStyle.theme : styles.theme);
+  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isOnyx ? codeViewStyle[variant].theme : styles[variant].theme);
   useEffect(function () {
     try {
       // eslint-disable-next-line import/no-dynamic-require, global-require
@@ -96,7 +98,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
         key: i
       })), hasLineNumbers && ___EmotionJSX(Box, {
         as: "span",
-        variant: "codeView.lineNo",
+        variant: "codeView.".concat(variant, ".lineNo"),
         sx: {
           minWidth: getLineNoWidth(tokens)
         }
@@ -113,7 +115,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   if (isOnyx) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
-      variant: "codeView.wrapper",
+      variant: "codeView.".concat(variant, ".wrapper"),
       className: classNames
     }, mergeProps(focusProps, hoverProps, others), {
       role: "none"
@@ -121,9 +123,9 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       isRow: true,
       justifyContent: "space-between",
       alignItems: "center",
-      variant: "codeView.header"
+      variant: "codeView.".concat(variant, ".header")
     }, ___EmotionJSX(Text, {
-      color: "gray-300",
+      variant: "codeView.".concat(variant, ".header.color"),
       mb: "0",
       mr: "sm",
       py: "sm"
@@ -131,13 +133,15 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: ref,
       mode: "rightText",
       textToCopy: textToCopy || children,
-      iconButtonProps: iconButtonProps
-    }, "Copy")), content);
+      iconButtonProps: _objectSpread(_objectSpread({}, iconButtonProps), {}, {
+        variant: variant
+      })
+    })), content);
   }
   if (hasNoCopyButton) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
-      variant: "codeView.wrapper",
+      variant: "codeView.".concat(variant, ".wrapper"),
       className: classNames
     }, mergeProps(focusProps, hoverProps, others), {
       role: "none"
@@ -152,7 +156,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     wrapperProps: _objectSpread({
       className: classNames,
-      variant: 'codeView.wrapper'
+      variant: "codeView.".concat(variant, ".wrapper")
     }, others),
     iconButtonProps: iconButtonProps
   }, content);

package/lib/components/CodeView/CodeView.stories.js

@@ -168,4 +168,19 @@ WithCustomLanguage.parameters = {
       }]
     }
   }
+};
+export var Light = function Light(args) {
+  return ___EmotionJSX(CodeView, _extends({
+    variant: "light"
+  }, args));
+};
+Light.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };

package/lib/components/CodeView/CodeView.styles.js

@@ -155,7 +155,9 @@ var lineNo = {
   lineHeight: '20px'
 };
 export default {
-  theme: theme,
-  wrapper: wrapper,
-  lineNo: lineNo
+  "default": {
+    theme: theme,
+    wrapper: wrapper,
+    lineNo: lineNo
+  }
 };

package/lib/components/CopyText/CopyButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["iconProps"];
+var _excluded = ["iconProps", "variant"];
 import React, { forwardRef } from 'react';
 import ContentCopy from '@pingux/mdi-react/ContentCopyIcon';
 import { useGetTheme } from '../../hooks';
@@ -8,14 +8,20 @@ import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  /* istanbul ignore next */
   var iconProps = props.iconProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    copyButtonSize = _useGetTheme.copyButtonSize;
+    copyButtonSize = _useGetTheme.copyButtonSize,
+    themeState = _useGetTheme.themeState;
+  /* istanbul ignore next */
+  var themeVariant = !themeState.isOnyx ? 'copyButton' : "copyButton.".concat(variant);
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
     "aria-label": "copy to clipboard",
-    variant: "copyButton"
+    variant: themeVariant
   }, others), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
     size: copyButtonSize,

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -35,6 +35,16 @@ var badge = {
   background: nextGenColors['gray-800'],
   textColor: nextGenColors['gray-100']
 };
+var background = {
+  base: nextGenColors['gray-900'],
+  secondary: '#1a1e22',
+  card: '#1a1e22',
+  hover: hoverDark
+};
+var codeEditor = {
+  backgroundColor: background.secondary,
+  headerColor: nextGenColors['gray-900']
+};
 var twoTone = {
   bg: {
     orange: nextGenColors['orange-500'],
@@ -131,11 +141,13 @@ export var colors = _objectSpread(_objectSpread({
     message: 'white',
     fieldHelper: nextGenColors['gray-400']
   },
+  background: background,
   backgroundBase: backgroundBase,
   backgroundSecondary: backgroundSecondary,
   backgroundCard: backgroundCard,
   backgroundSuggestion: backgroundSuggestion,
   backgroundHover: backgroundHover,
   font: font,
-  badge: badge
+  badge: badge,
+  codeEditor: codeEditor
 });