@pingux/astro 2.161.1-alpha.1 → 2.161.1-alpha.3

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -25,7 +25,9 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var requirements = props.requirements,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var SuccessCircle = icons.SuccessCircle,
     ErrorCircle = icons.ErrorCircle,
     WarningIcon = icons.WarningIcon,
@@ -75,7 +77,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             name: 'Empty Status Icon'
           },
           icon: DefaultCircle,
-          color: "neutral.40",
+          color: isOnyx ? 'common.dark' : 'neutral.40',
           mr: "sm",
           size: "sm",
           "data-testid": "status-icon__".concat(status)
@@ -91,7 +93,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       width: "100%",
       as: "li"
     }, statusIconRender(req.status, (0, _kebabCase["default"])(req.name)), (0, _react2.jsx)(_Text["default"], {
-      variant: "bodyWeak"
+      variant: "requirementsListText"
     }, req.name));
   };
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({

package/lib/cjs/components/Stepper/Stepper.stories.js

@@ -127,30 +127,27 @@ var Default = exports.Default = function Default(args) {
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 var DisabledToolTips = exports.DisabledToolTips = function DisabledToolTips(args) {
@@ -162,30 +159,27 @@ var DisabledToolTips = exports.DisabledToolTips = function DisabledToolTips(args
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
@@ -207,30 +201,27 @@ var WithCustomTooltip = exports.WithCustomTooltip = function WithCustomTooltip(a
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 var ControlledStepper = exports.ControlledStepper = function ControlledStepper() {
@@ -249,10 +240,9 @@ var ControlledStepper = exports.ControlledStepper = function ControlledStepper()
     }, (0, _react2.jsx)(_index.Box, {
       sx: sx.contentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      fontSize: "lg",
-      fontWeight: "3"
+      variant: "stepperTabContentHeader"
     }, item.title), (0, _react2.jsx)(_index.Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };
@@ -301,10 +291,9 @@ var Panel = exports.Panel = function Panel() {
       }, (0, _react2.jsx)(_index.Box, {
         sx: sx.contentContainer
       }, (0, _react2.jsx)(_index.Text, {
-        fontSize: "lg",
-        fontWeight: "3"
+        variant: "stepperTabContentHeader"
       }, item.title), (0, _react2.jsx)(_index.Text, {
-        fontSize: "md"
+        variant: "stepperTabContent"
       }, item.children)));
     })))
   );
@@ -328,7 +317,7 @@ var VerticalStepper = exports.VerticalStepper = function VerticalStepper() {
     }, (0, _react2.jsx)(_index.Box, {
       sx: sx.verticalContentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };

package/lib/cjs/components/Stepper/Stepper.styles.js

@@ -23,7 +23,7 @@ var wrapper = {
 var tabs = {
   outline: 'none',
   borderBottom: 'none',
-  mb: 0,
+  mb: 'lg',
   justifyContent: 'center',
   '&.is-horizontal': {
     width: '100%'

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -1950,6 +1950,16 @@ export declare const text: {
         wordWrap: wordWrapText;
         wordBreak: wordBreak;
     };
+    requirementsListText: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     searchNavTabLabel: {
         whiteSpace: string;
         fontSize: string;
@@ -6431,6 +6441,13 @@ export declare const text: {
         variant?: string;
         label?: string;
     };
+    stepperTabContent: {
+        fontSize: string;
+    };
+    stepperTabContentHeader: {
+        fontSize: string;
+        fontWeight: number;
+    };
     H1: {
         lineHeight: string;
         fontWeight: number;

package/lib/cjs/components/Text/Text.styles.js

@@ -170,6 +170,13 @@ var listViewItemExpandedText = {
   fontSize: 'md',
   color: 'text.primary'
 };
+var stepperTabContent = {
+  fontSize: 'md'
+};
+var stepperTabContentHeader = {
+  fontSize: 'lg',
+  fontWeight: 3
+};
 var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -267,6 +274,11 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
+  requirementsListText: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
   searchNavTabLabel: searchNavTabLabel,
   sectionTitle: sectionTitle,
   subtitle: subtitle,
@@ -288,5 +300,7 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   copyRightText: copyRightText,
   attachmentTitle: attachmentTitle,
   messagesText: _objectSpread({}, base),
-  stepperLabel: stepperLabel
+  stepperLabel: stepperLabel,
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -95,6 +95,9 @@ export declare const colors: {
         backgroundColor: string;
         headerColor: string;
     };
+    common: {
+        dark: string;
+    };
     neutral: {
         90: string;
     };

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

@@ -106,6 +106,9 @@ var iconWrapper = {
     lightIndigo: _colorTokens.nextGenColors['indigo-100']
   }
 };
+var common = {
+  dark: '#C0C9D5'
+};
 var backgroundBase = _colorTokens.nextGenColors['gray-900'];
 var backgroundSecondary = _colorTokens.nextGenColors['gray-900'];
 var backgroundCard = '#1a1e22';
@@ -157,5 +160,6 @@ var colors = exports.colors = _objectSpread(_objectSpread({
   backgroundHover: backgroundHover,
   font: font,
   badge: badge,
-  codeEditor: codeEditor
+  codeEditor: codeEditor,
+  common: common
 });

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/stepper.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    step: {
+        active: {
+            '&.is-horizontal': {
+                color: string;
+            };
+        };
+        inactive: {
+            '&.is-horizontal': {
+                backgroundColor: string;
+            };
+        };
+    };
+};
+export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/stepper.js

@@ -0,0 +1,22 @@
+"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 step = {
+  active: {
+    '&.is-horizontal': {
+      color: 'black'
+    }
+  },
+  inactive: {
+    '&.is-horizontal': {
+      backgroundColor: 'black'
+    }
+  }
+};
+var _default = exports["default"] = {
+  step: step
+};

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -532,6 +532,20 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    stepper: {
+        step: {
+            active: {
+                '&.is-horizontal': {
+                    color: string;
+                };
+            };
+            inactive: {
+                '&.is-horizontal': {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
     footer: {
         container: {
             backgroundColor: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -17,6 +17,7 @@ var _message = require("./message");
 var _navbar = require("./navbar");
 var _rangeCalendar = _interopRequireDefault(require("./rangeCalendar"));
 var _skeleton = _interopRequireDefault(require("./skeleton"));
+var _stepper = _interopRequireDefault(require("./stepper"));
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -190,6 +191,7 @@ var _default = exports["default"] = {
   tab: tab,
   iconBadge: _iconBadge["default"],
   skeleton: _skeleton["default"],
+  stepper: _stepper["default"],
   footer: _footer.footer,
   tooltip: tooltip,
   popoverMenu: {

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

@@ -266,6 +266,7 @@ declare const colors: {
         };
         border: string;
         hairline: string;
+        dark: string;
     };
     font: {
         base: string;

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

@@ -76,7 +76,7 @@ var critical = exports.critical = {
   light: _colorTokens.nextGenColors['red-100']
 };
 var success = exports.success = {
-  bright: _colorTokens.nextGenColors['green-600'],
+  bright: _colorTokens.nextGenColors['green-500'],
   dark: _colorTokens.nextGenColors['green-800'],
   light: _colorTokens.nextGenColors['green-100']
 };

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

@@ -249,6 +249,7 @@ declare const _default: {
             };
             border: string;
             hairline: string;
+            dark: string;
         };
         font: {
             base: string;
@@ -1975,6 +1976,23 @@ declare const _default: {
             color: string;
             marginTop: string;
         };
+        requirementsListText: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        stepperTabContent: {
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+        };
+        stepperTabContentHeader: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            fontFamily: string;
+        };
         H1: {
             fontSize: string;
             fontWeight: number;
@@ -5282,7 +5300,8 @@ declare const _default: {
                 mr: string;
             };
             line: {
-                mr: string;
+                mx: string;
+                maxWidth: string;
                 borderBottomWidth: string;
                 borderBottomColor: string;
                 '&.is-inactive': {
@@ -5292,29 +5311,32 @@ declare const _default: {
             };
             step: {
                 active: {
-                    '&:before': {
-                        content: string;
-                        height: string;
-                        width: string;
-                        top: number;
-                        left: number;
+                    '&.is-horizontal': {
+                        '&:before': {
+                            content: string;
+                            height: string;
+                            width: string;
+                            top: number;
+                            left: number;
+                            position: string;
+                            borderRadius: string;
+                            borderStyle: string;
+                            borderColor: string;
+                            borderWidth: string;
+                            zIndex: number;
+                        };
+                        borderWidth: string;
+                        width: number;
+                        height: number;
+                        minWidth: number;
+                        minHeight: number;
                         position: string;
-                        borderRadius: string;
-                        borderStyle: string;
+                        fontWeight: number;
+                        fontSize: string;
+                        backgroundColor: string;
                         borderColor: string;
-                        borderWidth: string;
+                        color: string;
                     };
-                    borderWidth: string;
-                    width: number;
-                    height: number;
-                    minWidth: number;
-                    minHeight: number;
-                    position: string;
-                    fontWeight: number;
-                    fontSize: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    color: string;
                 };
                 completed: {
                     borderColor: string;
@@ -5328,17 +5350,19 @@ declare const _default: {
                     fontSize: string;
                 };
                 inactive: {
-                    borderWidth: string;
-                    width: number;
-                    height: number;
-                    minWidth: number;
-                    minHeight: number;
-                    position: string;
-                    fontWeight: number;
-                    fontSize: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    color: string;
+                    '&.is-horizontal': {
+                        borderWidth: string;
+                        width: number;
+                        height: number;
+                        minWidth: number;
+                        minHeight: number;
+                        position: string;
+                        fontWeight: number;
+                        fontSize: string;
+                        backgroundColor: string;
+                        borderColor: string;
+                        color: string;
+                    };
                 };
             };
         };

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

@@ -116,6 +116,7 @@ export declare const nextGenColors: {
         };
         border: string;
         hairline: string;
+        dark: string;
     };
     font: {
         base: string;

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

@@ -122,7 +122,8 @@ var nextGenColors = exports.nextGenColors = {
       'secondary': '#f6f8fa'
     },
     'border': '#69788B',
-    'hairline': '#e7eef4'
+    'hairline': '#e7eef4',
+    'dark': '#324054'
   },
   'font': {
     'base': '#23282e',

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

@@ -3,7 +3,8 @@ declare const _default: {
         mr: string;
     };
     line: {
-        mr: string;
+        mx: string;
+        maxWidth: string;
         borderBottomWidth: string;
         borderBottomColor: string;
         '&.is-inactive': {
@@ -13,29 +14,32 @@ declare const _default: {
     };
     step: {
         active: {
-            '&:before': {
-                content: string;
-                height: string;
-                width: string;
-                top: number;
-                left: number;
+            '&.is-horizontal': {
+                '&:before': {
+                    content: string;
+                    height: string;
+                    width: string;
+                    top: number;
+                    left: number;
+                    position: string;
+                    borderRadius: string;
+                    borderStyle: string;
+                    borderColor: string;
+                    borderWidth: string;
+                    zIndex: number;
+                };
+                borderWidth: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
                 position: string;
-                borderRadius: string;
-                borderStyle: string;
+                fontWeight: number;
+                fontSize: string;
+                backgroundColor: string;
                 borderColor: string;
-                borderWidth: string;
+                color: string;
             };
-            borderWidth: string;
-            width: number;
-            height: number;
-            minWidth: number;
-            minHeight: number;
-            position: string;
-            fontWeight: number;
-            fontSize: string;
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
         };
         completed: {
             borderColor: string;
@@ -49,17 +53,19 @@ declare const _default: {
             fontSize: string;
         };
         inactive: {
-            borderWidth: string;
-            width: number;
-            height: number;
-            minWidth: number;
-            minHeight: number;
-            position: string;
-            fontWeight: number;
-            fontSize: string;
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
+            '&.is-horizontal': {
+                borderWidth: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                position: string;
+                fontWeight: number;
+                fontSize: string;
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
         };
     };
 };