@pingux/astro 2.185.0-alpha.0 → 2.187.0-alpha.0

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

@@ -45,7 +45,7 @@ var badgeIconStyle = {
 var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
-  padding: '.25em .4em',
+  padding: '2.81px 4px',
   borderRadius: '4px',
   fontSize: 'unset',
   alignSelf: 'flex-start',
@@ -55,31 +55,45 @@ var baseBadge = _objectSpread({
 }, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
-  color: _onyxTokens.astroTokens.color.blue[600]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: _onyxTokens.astroTokens.color.blue[600]
+  })
 });
 var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#f6f8fa !important',
-  color: _onyxTokens.astroTokens.color.gray[900]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: _onyxTokens.astroTokens.color.gray[900]
+  })
 });
 var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#D3EDDF !important',
-  color: 'success.dark'
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: _onyxTokens.astroTokens.color.green[800]
+  }),
+  backgroundColor: '#D3EDDF !important'
 });
 var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#F8D8D5 !important',
-  color: _onyxTokens.astroTokens.color.red[700]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: _onyxTokens.astroTokens.color.red[700]
+  })
 });
 var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#FFF1DA !important',
-  color: _onyxTokens.astroTokens.color.yellow[800]
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: _onyxTokens.astroTokens.color.yellow[800]
+  })
 });
 var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'black !important',
-  color: 'white'
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'white'
+  })
 });
 var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#EAF2FD !important',
-  color: 'darkblue'
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'darkblue'
+  })
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
@@ -123,11 +137,21 @@ var dataTableBadge = {
   minWidth: '100px',
   border: 'none'
 };
-var activeStatusBadge = _objectSpread(_objectSpread({}, primary), dataTableBadge);
-var warningStatusBadge = _objectSpread(_objectSpread({}, warning), dataTableBadge);
-var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadge);
-var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
-var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
+var activeStatusBadge = _objectSpread({
+  border: 'none'
+}, primary);
+var warningStatusBadge = _objectSpread({
+  border: 'none'
+}, warning);
+var criticalStatusBadge = _objectSpread({
+  border: 'none'
+}, danger);
+var healthyStatusBadge = _objectSpread({
+  border: 'none'
+}, success);
+var secondaryStatusBadge = _objectSpread({
+  border: 'none'
+}, secondary);
 var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#455469 !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
@@ -140,6 +164,7 @@ var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
   border: 'none'
 });
 var badges = exports.badges = {
+  dataTableBadge: dataTableBadge,
   baseBadge: _objectSpread({}, baseBadge),
   "default": _objectSpread({}, baseBadge),
   primary: primary,
@@ -152,6 +177,7 @@ var badges = exports.badges = {
   dark: dark,
   info: info,
   selectedItemBadge: selectedItemBadge,
+  selected: activeStatusBadge,
   readOnlyBadge: readOnlyBadge,
   readOnlyFieldBadge: readOnlyFieldBadge,
   activeStatusBadge: activeStatusBadge,

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

@@ -10,6 +10,8 @@ var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
 var label = exports.label = {
   color: 'text.primary',
   fontSize: fontSizes.label,
+  mb: 'sm',
+  fontWeight: 'body',
   '&.is-float-label': {
     fontSize: fontSizes.label,
     fontWeight: 1,

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

@@ -1,5 +1,7 @@
 declare const _default: {
     container: {
+        minWidth: string;
+        boxShadow: string;
         transition: string;
         '&.animate': {
             opacity: number;
@@ -27,6 +29,7 @@ declare const _default: {
     };
     arrow: {
         color: string;
+        fontSize: string;
         '&:before': {
             content: string;
             position: string;

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

@@ -7,6 +7,8 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
 var container = {
+  minWidth: '150px',
+  boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.176)',
   transition: 'opacity 200ms ease',
   '&.animate': {
     opacity: 0
@@ -34,6 +36,7 @@ var container = {
 };
 var arrow = {
   color: 'white',
+  fontSize: 'sm',
   '&:before': {
     content: '""',
     position: 'absolute',

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

@@ -841,7 +841,9 @@ declare const _default: {
             lineHeight: string;
             textTransform: string;
             letterSpacing: string;
+            pl: string;
             ml: string;
+            py: string;
         };
     };
     listView: {
@@ -1395,6 +1397,8 @@ declare const _default: {
     };
     popoverMenu: {
         container: {
+            minWidth: string;
+            boxShadow: string;
             transition: string;
             '&.animate': {
                 opacity: number;
@@ -1422,6 +1426,7 @@ declare const _default: {
         };
         arrow: {
             color: string;
+            fontSize: string;
             '&:before': {
                 content: string;
                 position: string;
@@ -1674,6 +1679,7 @@ declare const _default: {
     separator: {
         base: {
             bg: string;
+            my: string;
             '&.is-vertical': {
                 m: string;
             };

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

@@ -51,7 +51,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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 fieldHelperText = {
   title: {
-    fontSize: 'sm',
+    fontSize: 'small',
     pt: '0px !important',
     mt: '.25rem',
     '&.is-default': {
@@ -174,7 +174,7 @@ var listBox = {
       zIndex: 1
     },
     '&.is-selected': {
-      color: 'text.primary',
+      color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
       borderRadius: '4px',
@@ -204,17 +204,20 @@ var listBox = {
   },
   sectionTitle: {
     color: 'font.light',
-    fontWeight: '1',
+    fontWeight: '0',
     fontSize: 'tiny',
     lineHeight: 'xs',
     textTransform: 'uppercase',
     letterSpacing: '1px',
-    ml: 'md'
+    pl: 'xs',
+    ml: 'sm',
+    py: 'sm'
   }
 };
 var separator = {
   base: {
     bg: 'border.base',
+    my: 'sm',
     '&.is-vertical': {
       m: '0'
     }

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -27,7 +27,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     state = _useAccordionGridCont.state;
   var cellRef = useRef();
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
 
@@ -98,13 +99,16 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       mr: '0px'
     }
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, _extends({
     color: "text.primary",
-    icon: isSelected ? upArrow : downArrow,
+    icon: isSelected ? upArrow : downArrow
+  }, isOnyx && {
+    size: 'sm'
+  }, {
     title: {
       name: isSelected ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  }))));
+  })))));
 });
 AccordionGridItemHeader.defaultProps = {
   hasCaret: true

package/lib/components/Badge/Badge.stories.js

@@ -214,21 +214,23 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
 };
 export var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({}, args, {
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Badge, _extends({}, args, {
     variant: "criticalStatusBadge",
-    label: "Critical",
-    mb: "lg"
+    label: "Critical"
   })), ___EmotionJSX(Badge, _extends({}, args, {
     variant: "warningStatusBadge",
-    label: "Warning",
-    mb: "lg"
+    label: "Warning"
   })), ___EmotionJSX(Badge, _extends({}, args, {
     variant: "healthyStatusBadge",
-    label: "Healthy",
-    mb: "lg"
+    label: "Healthy"
   })), ___EmotionJSX(Badge, _extends({}, args, {
     variant: "activeStatusBadge",
     label: "Active"
+  })), ___EmotionJSX(Badge, _extends({}, args, {
+    variant: "selected",
+    label: "Selected"
   })));
 };
 StatusBadgeVariants.parameters = {

package/lib/components/Badge/Badge.styles.js

@@ -152,6 +152,7 @@ var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
     color: 'white'
   }
 });
+var selected = convenienceDefault;
 var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#FFF !important',
   border: 'solid 1px',
@@ -265,6 +266,7 @@ export default {
   itemBadgeWithSlot: itemBadgeWithSlot,
   multivaluesBadge: multivaluesBadge,
   readOnlyBadge: readOnlyBadge,
+  selected: selected,
   selectedItemBadge: selectedItemBadge,
   invertedBadgeDeleteButton: invertedBadgeDeleteButton,
   successCalloutBadge: successCalloutBadge,

package/lib/components/ColorField/ColorFieldPreviewButton.js

@@ -12,7 +12,8 @@ var ColorFieldPreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     colorValue = props.colorValue,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuUp = icons.MenuUp,
     MenuDown = icons.MenuDown;
   var buttonRef = useLocalOrForwardRef(ref);
@@ -40,12 +41,14 @@ var ColorFieldPreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
       ml: 'auto'
     },
     flexGrow: "1"
-  }, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, _extends({
     ml: "auto",
     title: {
       name: isOpen ? 'menu-up' : 'menu-down'
     },
     icon: isOpen ? MenuUp : MenuDown
-  }))));
+  }, isOnyx && {
+    size: 'sm'
+  })))));
 });
 export default ColorFieldPreviewButton;

package/lib/components/ComboBox/ComboBoxInput.js

@@ -51,7 +51,8 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     containerProps: containerProps
   }, mergeProps(inputProps, others));
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown;
 
   // istanbul ignore next
@@ -72,9 +73,11 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.comboBox.inputInContainerSlot"
   },
   // Render loader after delay if filtering or loading
-  isLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, {
+  isLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, _extends({
     variant: "loader.withinInput"
-  }), ___EmotionJSX(PressResponder, {
+  }, isOnyx && {
+    size: 'sm'
+  })), ___EmotionJSX(PressResponder, {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, ___EmotionJSX(Button, _extends({
@@ -85,7 +88,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: -1
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
-    size: "md",
+    size: isOnyx ? 'sm' : 'md',
     sx: isOpen ? {
       transform: 'rotate(180deg)'
     } : null,

package/lib/components/ListBox/Option.js

@@ -132,7 +132,6 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    size: "24px",
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
@@ -146,7 +145,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Check Icon'
     },
-    color: "green-500"
+    color: "green-500",
+    size: isOnyx ? 'xsm' : 'md'
   }));
 });
 Option.defaultProps = {

package/lib/components/ListView/ListViewExpandableItem.js

@@ -21,7 +21,8 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     isFocusable = props.isFocusable,
     className = props.className;
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var _useContext = useContext(ListViewContext),
@@ -63,7 +64,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       alignItems: 'center',
       width: '100%'
     }
-  }, item.rendered && item.rendered[0], ___EmotionJSX(Icon, {
+  }, item.rendered && item.rendered[0], ___EmotionJSX(Icon, _extends({
     sx: {
       ml: 'auto'
     },
@@ -72,7 +73,9 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     title: {
       name: "".concat(key, " expand icon button")
     }
-  }))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {
+  }, isOnyx && {
+    size: 'sm'
+  })))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {
     isFocusEscaped: isFocusEscaped,
     containerProps: expandableContainerProps
   }, item.rendered && item.rendered[1])));

package/lib/components/Loader/Loader.styles.js

@@ -26,7 +26,7 @@ var withinInput = {
 var withinListbox = {
   color: 'active',
   fontSize: '6px',
-  padding: 'md',
+  padding: 'sm',
   alignItems: 'center',
   justifyContent: 'center'
 };

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -95,7 +95,8 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputRef = useRef();
   var buttonRef = useRef();
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var _useFocusWithin = useFocusWithin({
@@ -382,12 +383,15 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       border: 'none'
     }
-  }, ___EmotionJSX(Icon, {
-    icon: isOpen ? MenuUp : MenuDown,
+  }, ___EmotionJSX(Icon, _extends({
+    icon: isOpen ? MenuUp : MenuDown
+  }, isOnyx && {
+    size: 'sm'
+  }, {
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  })));
+  }))));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, mergeProps(containerProps, focusWithinProps), ___EmotionJSX(TextField, _extends({

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -29,7 +29,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
   var navBarState = useNavBarContext();
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons,
-    navBarIconSize = _useGetTheme.navBarIconSize;
+    navBarIconSize = _useGetTheme.navBarIconSize,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
@@ -85,7 +86,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: "xsm",
+    size: isOnyx ? 'sm' : 'xsm',
     sx: {
       color: getIconColor(),
       fill: getIconColor()

package/lib/components/NumberField/NumberField.js

@@ -20,7 +20,7 @@ import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
-import { useField, usePropWarning } from '../../hooks';
+import { useField, useGetTheme, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
@@ -31,6 +31,8 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     status = props.status;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
@@ -61,7 +63,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
-    size: 18,
+    size: isOnyx ? 'sm' : 18,
     title: {
       name: 'Menu Up Icon'
     }
@@ -71,7 +73,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
-    size: 18,
+    size: isOnyx ? 'sm' : 18,
     title: {
       name: 'Menu Down Icon'
     }

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -60,7 +60,8 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
   var helperTextId = useMemo(function () {
@@ -81,7 +82,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Menu down'
     },
-    size: "md"
+    size: isOnyx ? 'sm' : 'md'
   }));
   var clearButton = hasClearButton && state.selectedKey && ___EmotionJSX(IconButton, _extends({
     tabIndex: 0,

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

@@ -11,35 +11,51 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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 { astroTokensDark } from '@pingux/onyx-tokens';
 var baseBadge = {
-  color: 'badge.textColor'
+  '& span': {
+    color: 'badge.textColor'
+  }
 };
 var primary = {
   backgroundColor: '#1a73e8 !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var secondary = {
   backgroundColor: '#324054 !important',
-  color: astroTokensDark.color.gray[100]
+  '& span': {
+    color: astroTokensDark.color.gray[100]
+  }
 };
 var success = {
   backgroundColor: '#22a75f !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var danger = {
   backgroundColor: '#da3a2b !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var warning = {
   backgroundColor: '#ffb946 !important',
-  color: 'black'
+  '& span': {
+    color: 'black'
+  }
 };
 var info = {
   backgroundColor: '#324054 !important',
-  color: astroTokensDark.color.gray[100]
+  '& span': {
+    color: astroTokensDark.color.gray[100]
+  }
 };
 var dark = {
   backgroundColor: '#c0c9d5 !important',
-  color: astroTokensDark.color.gray[100]
+  '& span': {
+    color: astroTokensDark.color.gray[100]
+  }
 };
 var activeStatusBadge = _objectSpread({}, primary);
 var warningStatusBadge = _objectSpread({}, warning);
@@ -97,6 +113,7 @@ var badges = {
   info: info,
   dark: dark,
   activeStatusBadge: activeStatusBadge,
+  selected: activeStatusBadge,
   warningStatusBadge: warningStatusBadge,
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,

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

@@ -0,0 +1,10 @@
+import { colors } from '../colors';
+var comboBox = {
+  input: {
+    bg: 'gray[900]',
+    '&.is-disabled, &.is-read-only': {
+      bg: "".concat(colors.disabled, " !important")
+    }
+  }
+};
+export default comboBox;

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

@@ -10,6 +10,7 @@ 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 { astroTokensDark } from '@pingux/onyx-tokens';
+import comboBox from './comboBox';
 import { input } from './input';
 export var select = {
   backgroundColor: 'backgroundBase',
@@ -81,5 +82,6 @@ export default {
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
   }),
-  "switch": switchable
+  "switch": switchable,
+  comboBox: comboBox
 };

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

@@ -15,7 +15,7 @@ var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
     border: '1px solid',
-    borderColor: 'transparent',
+    borderColor: 'border.attachment',
     borderRadius: '4px'
   },
   option: {

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

@@ -13,6 +13,7 @@ export var fontSizes = {
   'xs': '11px',
   'tiny': "".concat(fontSize.tiny, "px"),
   'sm': "".concat(fontSize.small || fontSize.sm, "px"),
+  'small': "".concat(fontSize.small, "px"),
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),
   'xl': "".concat(fontSizeBase * 1.5, "rem"),