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

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

@@ -14,10 +14,12 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _spacing = _interopRequireDefault(require("../spacing"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var line = {
-  mr: 'xs',
+  mx: "".concat(_spacing["default"].xs, " !important"),
+  maxWidth: '82px',
   borderBottomWidth: '2px',
   borderBottomColor: 'active',
   '&.is-inactive': {
@@ -39,32 +41,37 @@ var tab = {
   mr: 'xs'
 };
 var step = {
-  active: _objectSpread(_objectSpread({
-    backgroundColor: 'active',
-    borderColor: 'active',
-    color: 'backgroundBase'
-  }, stepBase), {}, {
-    '&:before': {
-      content: '""',
-      height: '24px',
-      width: '24px',
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      borderRadius: '100%',
-      borderStyle: 'solid',
-      borderColor: 'backgroundBase',
-      borderWidth: '2px'
-    }
-  }),
+  active: {
+    '&.is-horizontal': _objectSpread(_objectSpread({
+      backgroundColor: 'active',
+      borderColor: 'active',
+      color: 'white'
+    }, stepBase), {}, {
+      '&:before': {
+        content: '""',
+        height: '24px',
+        width: '24px',
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        borderRadius: '100%',
+        borderStyle: 'solid',
+        borderColor: 'backgroundBase',
+        borderWidth: '2px',
+        zIndex: 0
+      }
+    })
+  },
   completed: _objectSpread(_objectSpread({}, stepBase), {}, {
     borderColor: 'active'
   }),
-  inactive: _objectSpread({
-    backgroundColor: 'backgroundBase',
-    borderColor: 'blue-200',
-    color: 'active'
-  }, stepBase)
+  inactive: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'backgroundBase',
+      borderColor: 'blue-200',
+      color: 'active'
+    }, stepBase)
+  }
 };
 var _default = exports["default"] = {
   tab: tab,

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

@@ -31,6 +31,23 @@ export declare const text: {
         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;

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

@@ -101,6 +101,14 @@ var buttonSubtitle = {
   fontSize: '13px',
   fontWeight: 2
 };
+var stepperTabContent = {
+  fontSize: 'md',
+  color: 'font.base',
+  lineHeight: 'body'
+};
+var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
+  color: 'font.base'
+});
 var text = exports.text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -207,5 +215,13 @@ var text = exports.text = _objectSpread(_objectSpread({
     lineHeight: 'body',
     color: 'font.light',
     marginTop: '0px !important'
-  }
+  },
+  requirementsListText: {
+    color: 'font.base',
+    fontSize: 'md',
+    fontWeight: 0,
+    lineHeight: 'body'
+  },
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });

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

@@ -1674,7 +1674,8 @@ declare const _default: {
             mr: string;
         };
         line: {
-            mr: string;
+            mx: string;
+            maxWidth: string;
             borderBottomWidth: string;
             borderBottomColor: string;
             '&.is-inactive': {
@@ -1684,29 +1685,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;
@@ -1720,17 +1724,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/components/RequirementsList/RequirementsList.js

@@ -13,7 +13,9 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var SuccessCircle = icons.SuccessCircle,
     ErrorCircle = icons.ErrorCircle,
     WarningIcon = icons.WarningIcon,
@@ -63,7 +65,7 @@ var RequirementsList = /*#__PURE__*/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)
@@ -79,7 +81,7 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
       width: "100%",
       as: "li"
     }, statusIconRender(req.status, kebabCase(req.name)), ___EmotionJSX(Text, {
-      variant: "bodyWeak"
+      variant: "requirementsListText"
     }, req.name));
   };
   return ___EmotionJSX(Box, _extends({

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

@@ -115,30 +115,27 @@ export var Default = function Default(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 export var DisabledToolTips = function DisabledToolTips(args) {
@@ -150,30 +147,27 @@ export var DisabledToolTips = function DisabledToolTips(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
@@ -195,30 +189,27 @@ export var WithCustomTooltip = function WithCustomTooltip(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 export var ControlledStepper = function ControlledStepper() {
@@ -237,10 +228,9 @@ export var ControlledStepper = function ControlledStepper() {
     }, ___EmotionJSX(Box, {
       sx: sx.contentContainer
     }, ___EmotionJSX(Text, {
-      fontSize: "lg",
-      fontWeight: "3"
+      variant: "stepperTabContentHeader"
     }, item.title), ___EmotionJSX(Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };
@@ -289,10 +279,9 @@ export var Panel = function Panel() {
       }, ___EmotionJSX(Box, {
         sx: sx.contentContainer
       }, ___EmotionJSX(Text, {
-        fontSize: "lg",
-        fontWeight: "3"
+        variant: "stepperTabContentHeader"
       }, item.title), ___EmotionJSX(Text, {
-        fontSize: "md"
+        variant: "stepperTabContent"
       }, item.children)));
     })))
   );
@@ -316,7 +305,7 @@ export var VerticalStepper = function VerticalStepper() {
     }, ___EmotionJSX(Box, {
       sx: sx.verticalContentContainer
     }, ___EmotionJSX(Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };

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

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

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

@@ -163,6 +163,13 @@ var listViewItemExpandedText = {
   fontSize: 'md',
   color: 'text.primary'
 };
+var stepperTabContent = {
+  fontSize: 'md'
+};
+var stepperTabContentHeader = {
+  fontSize: 'lg',
+  fontWeight: 3
+};
 export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -260,6 +267,11 @@ export var 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,
@@ -281,5 +293,7 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   copyRightText: copyRightText,
   attachmentTitle: attachmentTitle,
   messagesText: _objectSpread({}, base),
-  stepperLabel: stepperLabel
+  stepperLabel: stepperLabel,
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });

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

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

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

@@ -0,0 +1,15 @@
+var step = {
+  active: {
+    '&.is-horizontal': {
+      color: 'black'
+    }
+  },
+  inactive: {
+    '&.is-horizontal': {
+      backgroundColor: 'black'
+    }
+  }
+};
+export default {
+  step: step
+};

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

@@ -9,6 +9,7 @@ import { message } from './message';
 import { navBar } from './navbar';
 import rangeCalendar from './rangeCalendar';
 import skeleton from './skeleton';
+import stepper from './stepper';
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -182,6 +183,7 @@ export default {
   tab: tab,
   iconBadge: iconBadge,
   skeleton: skeleton,
+  stepper: stepper,
   footer: footer,
   tooltip: tooltip,
   popoverMenu: {

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

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

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

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

package/lib/styles/themes/next-gen/variants/stepper.js

@@ -9,8 +9,10 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import spacing from '../spacing';
 var line = {
-  mr: 'xs',
+  mx: "".concat(spacing.xs, " !important"),
+  maxWidth: '82px',
   borderBottomWidth: '2px',
   borderBottomColor: 'active',
   '&.is-inactive': {
@@ -32,32 +34,37 @@ var tab = {
   mr: 'xs'
 };
 var step = {
-  active: _objectSpread(_objectSpread({
-    backgroundColor: 'active',
-    borderColor: 'active',
-    color: 'backgroundBase'
-  }, stepBase), {}, {
-    '&:before': {
-      content: '""',
-      height: '24px',
-      width: '24px',
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      borderRadius: '100%',
-      borderStyle: 'solid',
-      borderColor: 'backgroundBase',
-      borderWidth: '2px'
-    }
-  }),
+  active: {
+    '&.is-horizontal': _objectSpread(_objectSpread({
+      backgroundColor: 'active',
+      borderColor: 'active',
+      color: 'white'
+    }, stepBase), {}, {
+      '&:before': {
+        content: '""',
+        height: '24px',
+        width: '24px',
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        borderRadius: '100%',
+        borderStyle: 'solid',
+        borderColor: 'backgroundBase',
+        borderWidth: '2px',
+        zIndex: 0
+      }
+    })
+  },
   completed: _objectSpread(_objectSpread({}, stepBase), {}, {
     borderColor: 'active'
   }),
-  inactive: _objectSpread({
-    backgroundColor: 'backgroundBase',
-    borderColor: 'blue-200',
-    color: 'active'
-  }, stepBase)
+  inactive: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'backgroundBase',
+      borderColor: 'blue-200',
+      color: 'active'
+    }, stepBase)
+  }
 };
 export default {
   tab: tab,

package/lib/styles/themes/next-gen/variants/text.js

@@ -94,6 +94,14 @@ var buttonSubtitle = {
   fontSize: '13px',
   fontWeight: 2
 };
+var stepperTabContent = {
+  fontSize: 'md',
+  color: 'font.base',
+  lineHeight: 'body'
+};
+var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
+  color: 'font.base'
+});
 export var text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -200,5 +208,13 @@ export var text = _objectSpread(_objectSpread({
     lineHeight: 'body',
     color: 'font.light',
     marginTop: '0px !important'
-  }
+  },
+  requirementsListText: {
+    color: 'font.base',
+    fontSize: 'md',
+    fontWeight: 0,
+    lineHeight: 'body'
+  },
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });