@pingux/astro 2.122.0 → 2.122.1-alpha.1

package/lib/cjs/components/Badge/Badge.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 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");
@@ -9,7 +8,6 @@ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/in
 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -23,22 +21,22 @@ var _react = _interopRequireDefault(require("react"));
 var _themeUi = require("theme-ui");
 var _ = require("../..");
 var _BadgeContext = require("../../context/BadgeContext");
-var colors = _interopRequireWildcard(require("../../styles/colors"));
 var _react2 = require("@emotion/react");
 var _excluded = ["align", "bg", "children", "isUppercase", "label", "sx", "slots", "textColor", "textProps", "variant"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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) { (0, _defineProperty2["default"])(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; }
 var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var align = props.align,
-    bg = props.bg,
+    _props$bg = props.bg,
+    bg = _props$bg === void 0 ? 'badge.background' : _props$bg,
     children = props.children,
-    isUppercase = props.isUppercase,
+    _props$isUppercase = props.isUppercase,
+    isUppercase = _props$isUppercase === void 0 ? false : _props$isUppercase,
     label = props.label,
     sx = props.sx,
     slots = props.slots,
-    textColor = props.textColor,
+    _props$textColor = props.textColor,
+    textColor = _props$textColor === void 0 ? 'badge.textColor' : _props$textColor,
     textProps = props.textProps,
     variant = props.variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -77,10 +75,5 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     } : {}
   }, textProps), label), children));
 });
-Badge.defaultProps = {
-  textColor: 'white',
-  bg: colors.neutral[10],
-  isUppercase: false
-};
 var _default = Badge;
 exports["default"] = _default;

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

@@ -142,6 +142,25 @@ declare const _default: {
         display: string;
     };
     itemButton: {
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+        };
+        whiteSpace: string;
+        WebkitBoxOrient: string;
+        display: string;
+        WebkitLineClamp: string;
+        overflow: string;
         marginY: string;
         textDecoration: string;
         outline: string;
@@ -150,34 +169,18 @@ declare const _default: {
         backgroundColor: string;
         paddingTop: string;
         paddingBottom: string;
-        display: string;
         color: string;
         fontSize: string;
         fontWeight: number;
         flexGrow: string;
         width: string;
         textAlign: string;
-        whiteSpace: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
         paddingLeft: string;
         paddingRight: string;
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-        };
-        '&.is-hovered': {
-            bg: string;
-        };
-        '&.is-selected': {
-            bg: string;
-            boxShadow: string;
-        };
-        '&.is-pressed': {
-            bg: string;
-        };
     };
     popUpItemButton: {
         fontSize: string;
@@ -200,6 +203,11 @@ declare const _default: {
             bg: string;
             color: string;
         };
+        whiteSpace: string;
+        WebkitBoxOrient: string;
+        display: string;
+        WebkitLineClamp: string;
+        overflow: string;
         marginY: string;
         textDecoration: string;
         outline: string;
@@ -208,12 +216,10 @@ declare const _default: {
         backgroundColor: string;
         paddingTop: string;
         paddingBottom: string;
-        display: string;
         fontWeight: number;
         flexGrow: string;
         width: string;
         textAlign: string;
-        whiteSpace: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;

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

@@ -126,7 +126,14 @@ var popUpSectionContainer = {
 var sectionBody = _objectSpread(_objectSpread({}, _AccordionGrid["default"].body), {}, {
   pl: '0'
 });
-var itemButton = {
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '3',
+  overflow: 'hidden'
+};
+var itemButton = _objectSpread(_objectSpread({
   marginY: '2px',
   textDecoration: 'none',
   outline: 'none',
@@ -135,20 +142,19 @@ var itemButton = {
   backgroundColor: 'transparent',
   paddingTop: 'sm',
   paddingBottom: 'sm',
-  display: 'block',
   color: 'neutral.90',
   fontSize: 'md',
   fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
   paddingLeft: '45px',
-  paddingRight: 'md',
+  paddingRight: 'md'
+}, truncateText), {}, {
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'
@@ -163,7 +169,7 @@ var itemButton = {
   '&.is-pressed': {
     bg: 'accent.5'
   }
-};
+});
 var popUpItemButton = _objectSpread(_objectSpread({}, itemButton), {}, {
   fontSize: 'sm',
   px: 'sm',

package/lib/cjs/components/NavBarSection/NavBarItemBody.js

@@ -63,7 +63,12 @@ var NavBarItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var shouldShowTransition = isExpanded && isTransitioning;
   var getEstimatedHeight = function getEstimatedHeight() {
     if (item !== null && item !== void 0 && item.children && typeof (item === null || item === void 0 ? void 0 : item.children.length) === 'number') {
-      return (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+      var height = (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+      /*
+        returning Double the max height to address
+        UIP-7608: Ensures the last NavBar item is visible when system scrollbars are always shown
+      */
+      return height * 2;
     }
     return null;
   };

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

@@ -100,6 +100,10 @@ export declare const text: {
 export declare const shadow: string;
 declare const allColors: {
     black: string;
+    badge: {
+        textColor: string;
+        background: string;
+    };
     white: string;
     neutral: {
         10: string;
@@ -206,6 +210,10 @@ export default allColors;
 export declare const flatColorList: any;
 export declare const getBaseHexColor: (colorName: string) => string | {
     black: string;
+    badge: {
+        textColor: string;
+        background: string;
+    };
     white: string;
     neutral: {
         10: string;

package/lib/cjs/styles/colors.js

@@ -142,9 +142,14 @@ var text = {
 exports.text = text;
 var shadow = (0, _chromaJs["default"])(neutral[10]).alpha(0.25).hex();
 exports.shadow = shadow;
+var badge = {
+  textColor: 'white',
+  background: neutral[10]
+};
 var tooltip = accent[20];
 var allColors = {
   black: black,
+  badge: badge,
   white: white,
   neutral: neutral,
   accent: accent,

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

@@ -40,6 +40,10 @@ export declare const colors: {
         card: string;
         hover: string;
     };
+    badge: {
+        background: string;
+        textColor: string;
+    };
     neutral: {
         90: string;
     };

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

@@ -33,6 +33,10 @@ var border = {
   separator: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
   attachment: '#39414b'
 };
+var badge = {
+  background: _colorTokens.nextGenColors['gray-700'],
+  textColor: _colorTokens.nextGenColors['gray-100']
+};
 var iconWrapper = {
   wrapper: {
     orange: _colorTokens.nextGenColors['orange-500'],
@@ -107,6 +111,7 @@ var colors = _objectSpread(_objectSpread({
     secondary: '#1a1e22',
     card: '#1a1e22',
     hover: hoverDark
-  }
+  },
+  badge: badge
 });
 exports.colors = colors;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkStickerSheet.chromatic.stories.js

@@ -11,7 +11,7 @@ var _ = require("../../../..");
 var _StickerSheetComponent = _interopRequireDefault(require("../../../themes/next-gen/stories/StickerSheetComponent"));
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only Onyx Dark Sticker Sheet'
+  title: 'Onyx Dark Sticker Sheet'
 };
 exports["default"] = _default;
 var Default = function Default() {

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

@@ -23,9 +23,18 @@ declare const badges: {
         width: string;
     };
     baseBadge: {
-        backgroundColor: string;
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
         '& span': {
-            color: string;
+            fontSize: string;
+            fontWeight: number;
         };
     };
     success: {

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

@@ -34,9 +34,9 @@ var baseBadge = {
 };
 var badges = {
   primary: {
-    backgroundColor: '#1a73e8 !important',
+    backgroundColor: '#155CBA !important',
     '& span': {
-      color: 'black'
+      color: 'active_light'
     }
   },
   secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -45,28 +45,23 @@ var badges = {
       color: 'gray-400'
     })
   }),
-  baseBadge: {
-    backgroundColor: '#324054 !important',
-    '& span': {
-      color: 'dark'
-    }
-  },
+  baseBadge: _objectSpread({}, baseBadge),
   success: {
-    backgroundColor: '#2ed47a !important',
+    backgroundColor: '#0E4326 !important',
     '& span': {
-      color: 'black'
+      color: 'success_light'
     }
   },
   danger: {
-    backgroundColor: '#f7685b !important',
+    backgroundColor: '#83231A !important',
     '& span': {
-      color: 'black'
+      color: 'critical_light'
     }
   },
   warning: {
-    backgroundColor: '#984c0c !important',
+    backgroundColor: '#664A1C !important',
     '& span': {
-      color: 'black'
+      color: 'yellow-100'
     }
   },
   info: _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -76,9 +71,9 @@ var badges = {
     }, badgeFont)
   }),
   dark: {
-    backgroundColor: '#c0c9d5 !important',
+    backgroundColor: '#F6F8FA !important',
     '& span': {
-      color: 'gray-900'
+      color: 'black'
     }
   },
   selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {

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

@@ -14,6 +14,10 @@ export declare const warning: {
     light: string;
 };
 declare const colors: {
+    badge: {
+        textColor: string;
+        background: string;
+    };
     card: {
         blue: string;
         gray: string;

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

@@ -115,8 +115,13 @@ var card = {
   blue: _colorTokens.nextGenColors['blue-100'],
   gray: _colorTokens.nextGenColors['gray-100']
 };
+var badge = {
+  textColor: _colorTokens.nextGenColors['gray-900'],
+  background: _colorTokens.nextGenColors['gray-100']
+};
 var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
+  badge: badge,
   card: card,
   critical: critical,
   success: success,

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

@@ -2,6 +2,10 @@ declare const _default: {
     breakpoints: string[];
     name: string;
     colors: {
+        badge: {
+            textColor: string;
+            background: string;
+        };
         card: {
             blue: string;
             gray: string;
@@ -1421,12 +1425,21 @@ declare const _default: {
     };
     badges: {
         baseBadge: {
-            backgroundColor: string;
+            alignItems: string;
+            justifyContent: string;
+            py: string;
+            px: string;
+            borderRadius: string;
+            fontSize: string;
+            alignSelf: string;
+            display: string;
+            width: string;
             '& span': {
-                color: string;
                 fontSize: string;
                 fontWeight: number;
             };
+        };
+        default: {
             alignItems: string;
             justifyContent: string;
             py: string;
@@ -1436,6 +1449,10 @@ declare const _default: {
             alignSelf: string;
             display: string;
             width: string;
+            '& span': {
+                fontSize: string;
+                fontWeight: number;
+            };
         };
         primary: {
             backgroundColor: string;
@@ -1689,6 +1706,23 @@ declare const _default: {
                 };
             };
         };
+        info: {
+            backgroundColor: string;
+            '& span': {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+            };
+            alignItems: string;
+            justifyContent: string;
+            py: string;
+            px: string;
+            borderRadius: string;
+            fontSize: string;
+            alignSelf: string;
+            display: string;
+            width: string;
+        };
     };
     navigationHeader: {
         headerPlaceholder: {

package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -48,7 +48,7 @@ var textStyling = {
   fontWeight: 600
 };
 var avatarColors = ['orange', 'cyan', 'green', 'purple', 'pink', 'red', 'yellow', 'teal'];
-var badges = ['primary', 'baseBadge', 'success', 'danger', 'warning', 'info', 'dark'];
+var badges = ['primary', 'default', 'success', 'danger', 'warning', 'info', 'dark'];
 var tabs = [{
   name: 'Tab 1',
   children: 'Tab 1 body'

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

@@ -32,12 +32,21 @@ export declare const badgeDeleteButton: {
 };
 export declare const badges: {
     baseBadge: {
-        backgroundColor: string;
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
         '& span': {
-            color: string;
             fontSize: string;
             fontWeight: number;
         };
+    };
+    default: {
         alignItems: string;
         justifyContent: string;
         py: string;
@@ -47,6 +56,10 @@ export declare const badges: {
         alignSelf: string;
         display: string;
         width: string;
+        '& span': {
+            fontSize: string;
+            fontWeight: number;
+        };
     };
     primary: {
         backgroundColor: string;
@@ -300,4 +313,21 @@ export declare const badges: {
             };
         };
     };
+    info: {
+        backgroundColor: string;
+        '& span': {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+        alignItems: string;
+        justifyContent: string;
+        py: string;
+        px: string;
+        borderRadius: string;
+        fontSize: string;
+        alignSelf: string;
+        display: string;
+        width: string;
+    };
 };

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

@@ -83,6 +83,12 @@ var readOnlyBadge = {
     fontSize: '14px'
   }
 };
+var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#eaf2fd !important',
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'darkblue'
+  })
+});
 var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
   borderRadius: '50%',
   cursor: 'pointer',
@@ -101,12 +107,8 @@ var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadg
 var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
 var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
 var badges = {
-  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf1fb !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: '#1967d2'
-    })
-  }),
+  baseBadge: _objectSpread({}, baseBadge),
+  "default": _objectSpread({}, baseBadge),
   primary: primary,
   secondary: secondary,
   success: success,
@@ -120,6 +122,7 @@ var badges = {
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
-  badgeDeleteButton: badgeDeleteButton
+  badgeDeleteButton: badgeDeleteButton,
+  info: info
 };
 exports.badges = badges;

package/lib/components/Badge/Badge.js

@@ -17,17 +17,19 @@ import React from 'react';
 import { Badge as ThemeUIBadge } from 'theme-ui';
 import { Box, Text } from '../..';
 import { BadgeContext } from '../../context/BadgeContext';
-import * as colors from '../../styles/colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var align = props.align,
-    bg = props.bg,
+    _props$bg = props.bg,
+    bg = _props$bg === void 0 ? 'badge.background' : _props$bg,
     children = props.children,
-    isUppercase = props.isUppercase,
+    _props$isUppercase = props.isUppercase,
+    isUppercase = _props$isUppercase === void 0 ? false : _props$isUppercase,
     label = props.label,
     sx = props.sx,
     slots = props.slots,
-    textColor = props.textColor,
+    _props$textColor = props.textColor,
+    textColor = _props$textColor === void 0 ? 'badge.textColor' : _props$textColor,
     textProps = props.textProps,
     variant = props.variant,
     others = _objectWithoutProperties(props, _excluded);
@@ -66,9 +68,4 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } : {}
   }, textProps), label), children));
 });
-Badge.defaultProps = {
-  textColor: 'white',
-  bg: colors.neutral[10],
-  isUppercase: false
-};
 export default Badge;

package/lib/components/NavBar/NavBar.styles.js

@@ -119,7 +119,14 @@ var popUpSectionContainer = {
 var sectionBody = _objectSpread(_objectSpread({}, accordionGrid.body), {}, {
   pl: '0'
 });
-var itemButton = {
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '3',
+  overflow: 'hidden'
+};
+var itemButton = _objectSpread(_objectSpread({
   marginY: '2px',
   textDecoration: 'none',
   outline: 'none',
@@ -128,20 +135,19 @@ var itemButton = {
   backgroundColor: 'transparent',
   paddingTop: 'sm',
   paddingBottom: 'sm',
-  display: 'block',
   color: 'neutral.90',
   fontSize: 'md',
   fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
   paddingLeft: '45px',
-  paddingRight: 'md',
+  paddingRight: 'md'
+}, truncateText), {}, {
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'
@@ -156,7 +162,7 @@ var itemButton = {
   '&.is-pressed': {
     bg: 'accent.5'
   }
-};
+});
 var popUpItemButton = _objectSpread(_objectSpread({}, itemButton), {}, {
   fontSize: 'sm',
   px: 'sm',

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -52,7 +52,12 @@ var NavBarItemBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var shouldShowTransition = isExpanded && isTransitioning;
   var getEstimatedHeight = function getEstimatedHeight() {
     if (item !== null && item !== void 0 && item.children && typeof (item === null || item === void 0 ? void 0 : item.children.length) === 'number') {
-      return (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+      var height = (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
+      /*
+        returning Double the max height to address
+        UIP-7608: Ensures the last NavBar item is visible when system scrollbars are always shown
+      */
+      return height * 2;
     }
     return null;
   };

package/lib/styles/colors.js

@@ -118,9 +118,14 @@ export var text = {
   active: active
 };
 export var shadow = chroma(neutral[10]).alpha(0.25).hex();
+var badge = {
+  textColor: 'white',
+  background: neutral[10]
+};
 var tooltip = accent[20];
 var allColors = {
   black: black,
+  badge: badge,
   white: white,
   neutral: neutral,
   accent: accent,

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

@@ -25,6 +25,10 @@ var border = {
   separator: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex(),
   attachment: '#39414b'
 };
+var badge = {
+  background: nextGenColors['gray-700'],
+  textColor: nextGenColors['gray-100']
+};
 var iconWrapper = {
   wrapper: {
     orange: nextGenColors['orange-500'],
@@ -99,5 +103,6 @@ export var colors = _objectSpread(_objectSpread({
     secondary: '#1a1e22',
     card: '#1a1e22',
     hover: hoverDark
-  }
+  },
+  badge: badge
 });

package/lib/styles/themeOverrides/nextGenDarkMode/stories/NextGenDarkStickerSheet.chromatic.stories.js

@@ -3,7 +3,7 @@ import { AstroProvider, NextGenDarkTheme } from '../../../..';
 import StickerSheetComponent from '../../../themes/next-gen/stories/StickerSheetComponent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Chromatic Only Onyx Dark Sticker Sheet'
+  title: 'Onyx Dark Sticker Sheet'
 };
 export var Default = function Default() {
   return ___EmotionJSX(AstroProvider, {

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

@@ -27,9 +27,9 @@ var baseBadge = {
 };
 var badges = {
   primary: {
-    backgroundColor: '#1a73e8 !important',
+    backgroundColor: '#155CBA !important',
     '& span': {
-      color: 'black'
+      color: 'active_light'
     }
   },
   secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -38,28 +38,23 @@ var badges = {
       color: 'gray-400'
     })
   }),
-  baseBadge: {
-    backgroundColor: '#324054 !important',
-    '& span': {
-      color: 'dark'
-    }
-  },
+  baseBadge: _objectSpread({}, baseBadge),
   success: {
-    backgroundColor: '#2ed47a !important',
+    backgroundColor: '#0E4326 !important',
     '& span': {
-      color: 'black'
+      color: 'success_light'
     }
   },
   danger: {
-    backgroundColor: '#f7685b !important',
+    backgroundColor: '#83231A !important',
     '& span': {
-      color: 'black'
+      color: 'critical_light'
     }
   },
   warning: {
-    backgroundColor: '#984c0c !important',
+    backgroundColor: '#664A1C !important',
     '& span': {
-      color: 'black'
+      color: 'yellow-100'
     }
   },
   info: _objectSpread(_objectSpread({}, baseBadge), {}, {
@@ -69,9 +64,9 @@ var badges = {
     }, badgeFont)
   }),
   dark: {
-    backgroundColor: '#c0c9d5 !important',
+    backgroundColor: '#F6F8FA !important',
     '& span': {
-      color: 'gray-900'
+      color: 'black'
     }
   },
   selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {

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

@@ -105,8 +105,13 @@ var card = {
   blue: nextGenColors['blue-100'],
   gray: nextGenColors['gray-100']
 };
+var badge = {
+  textColor: nextGenColors['gray-900'],
+  background: nextGenColors['gray-100']
+};
 var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), nextGenColors), overrides), {}, {
+  badge: badge,
   card: card,
   critical: critical,
   success: success,

package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -40,7 +40,7 @@ var textStyling = {
   fontWeight: 600
 };
 var avatarColors = ['orange', 'cyan', 'green', 'purple', 'pink', 'red', 'yellow', 'teal'];
-var badges = ['primary', 'baseBadge', 'success', 'danger', 'warning', 'info', 'dark'];
+var badges = ['primary', 'default', 'success', 'danger', 'warning', 'info', 'dark'];
 var tabs = [{
   name: 'Tab 1',
   children: 'Tab 1 body'

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

@@ -76,6 +76,12 @@ var readOnlyBadge = {
     fontSize: '14px'
   }
 };
+var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#eaf2fd !important',
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'darkblue'
+  })
+});
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {
   borderRadius: '50%',
   cursor: 'pointer',
@@ -93,12 +99,8 @@ var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadg
 var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
 var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
 export var badges = {
-  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf1fb !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: '#1967d2'
-    })
-  }),
+  baseBadge: _objectSpread({}, baseBadge),
+  "default": _objectSpread({}, baseBadge),
   primary: primary,
   secondary: secondary,
   success: success,
@@ -112,5 +114,6 @@ export var badges = {
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
-  badgeDeleteButton: badgeDeleteButton
+  badgeDeleteButton: badgeDeleteButton,
+  info: info
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.122.0",
+  "version": "2.122.1-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",