@pingux/astro 2.240.0-alpha.0 → 2.241.0-alpha.0

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

@@ -181,7 +181,7 @@ input.multivaluesWrapper = {
   flexDirection: 'row !important',
   flexWrap: 'wrap',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: '2px',

package/lib/cjs/components/ListBox/Option.js

@@ -13,6 +13,7 @@ var _listbox = require("@react-aria/listbox");
 var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
+var _CheckboxIcons = require("../Checkbox/CheckboxIcons");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ListBoxContext = require("./ListBoxContext");
 var _react2 = require("@emotion/react");
@@ -125,17 +126,30 @@ const Option = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? (0, _react2.jsx)(_Box.default, {
-    isRow: true,
-    alignItems: "center",
-    flex: "1"
-  }, (0, _react2.jsx)(_Icon.default, {
+  }), isCondensed && (isOnyx ? (0, _react2.jsx)(_CheckboxIcons.OnyxDefaultCheckboxIcon, {
+    isChecked: isSelected,
+    sx: {
+      mr: 'sm',
+      color: isSelected ? 'primary' : 'gray-500',
+      '&.is-disabled': {
+        color: 'gray-400'
+      },
+      '&.is-focused, &.is-focus-visible': {
+        outline: '2px solid',
+        outlineColor: 'focus'
+      }
+    }
+  }) : (0, _react2.jsx)(_Icon.default, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    mr: "xs",
+    mr: "sm",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }), rendered) : (0, _react2.jsx)(_react.default.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon.default, {
+  })), isCondensed && (0, _react2.jsx)(_Box.default, {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, rendered), !isCondensed && (0, _react2.jsx)(_react.default.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && (0, _react2.jsx)(_Icon.default, {
     icon: _CircleSmallIcon.default,
     title: {
       name: 'Circle Small Icon'

package/lib/cjs/components/MultivaluesField/BadgeLabelTooltip.js

@@ -53,6 +53,7 @@ const BadgeLabelTooltip = ({
     variant: "badge.deleteButton",
     "aria-describedby": "selectedKeysState"
   }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
+    color: "text.primary",
     icon: _CloseIcon.default,
     size: 14,
     title: {

package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js

@@ -248,10 +248,12 @@ const CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)((props, re
     onPress: handleSelection,
     ref: buttonRef,
     variant: "listBoxLink",
-    mt: "sm",
-    ml: "14px",
     sx: {
-      fontWeight: '400'
+      fontWeight: '400',
+      width: '100%',
+      justifyContent: 'flex-start',
+      pl: 'lg',
+      pr: 'md'
     }
   }, selectionState), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
@@ -337,7 +339,7 @@ const CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)((props, re
   }, (0, _react2.jsx)(_.Icon, (0, _extends2.default)({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
-    size: 'sm'
+    size: 'md'
   }, {
     title: {
       name: ''

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -447,7 +447,11 @@ const DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         isRow: true,
         sx: {
           p: 0,
-          flexWrap: 'wrap'
+          flexWrap: 'wrap',
+          ...(isOnyx && {
+            columnGap: 'xs',
+            rowGap: 'xs'
+          })
         }
       }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     },

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

@@ -118,6 +118,7 @@ export declare const colors: {
         headerColor: string;
     };
     critical: {
+        bright: string;
         dark: string;
     };
     common: {

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

@@ -182,6 +182,7 @@ const colors = exports.colors = {
   badge,
   codeEditor,
   critical: {
+    bright: _onyxTokens.astroTokensDark.color.red[300],
     dark: _onyxTokens.astroTokensDark.color.red[100]
   },
   common

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

@@ -141,22 +141,32 @@ declare const badges: {
         '& span': {
             color: string;
         };
+        '& svg': {
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
     };
     readOnlyBadge: {
         color: string;
         backgroundColor: string;
         borderColor: string;
         '& span': {
+            fontWeight: number;
             color: string;
+            fontSize: number;
+            lineHeight: string;
         };
     };
     readOnlyFieldBadge: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
         '& span': {
+            fontWeight: number;
             color: string;
         };
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
     };
     itemBadgeWithSlot: {
         '& svg': {

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

@@ -110,32 +110,42 @@ const countNeutral = {
   }
 };
 const readOnlyBadge = {
-  color: _onyxTokens.astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
+  color: _onyxTokens.astroTokensDark.color.gray[600],
+  backgroundColor: 'white !important',
   borderColor: 'border.attachment',
   '& span': {
-    color: _onyxTokens.astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: _onyxTokens.astroTokensDark.color.gray[600],
+    fontSize: _onyxTokens.astroTokensDark.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
-  color: _onyxTokens.astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
-  borderColor: 'border.attachment',
+  ...readOnlyBadge,
   '& span': {
-    color: _onyxTokens.astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: _onyxTokens.astroTokensDark.color.gray[600]
   }
 };
+
+// Onyx dark selected-tag spec: neutral surface, not the light-theme blue (UXE-8463 QA)
 const selectedItemBadge = {
-  backgroundColor: '#155CBA !important',
+  backgroundColor: '#2C323A !important',
   '& span': {
-    color: _onyxTokens.astroTokensDark.color.gray[100]
+    color: _onyxTokens.astroTokensDark.color.gray[200]
+  },
+  '& svg': {
+    color: _onyxTokens.astroTokensDark.color.gray[200],
+    path: {
+      fill: _onyxTokens.astroTokensDark.color.gray[200]
+    }
   }
 };
 const itemBadgeWithSlot = {
   ...selectedItemBadge,
   '& svg': {
     path: {
-      fill: _onyxTokens.astroTokensDark.color.gray[100]
+      fill: _onyxTokens.astroTokensDark.color.gray[200]
     }
   }
 };

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

@@ -37,7 +37,7 @@ const checkbox = exports.checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: _onyxTokens.astroTokensDark.color.blue[400],
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

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

@@ -32,6 +32,7 @@ input.fieldControlWrapper = {
 };
 input.multivaluesWrapper = {
   backgroundColor: 'backgroundBase',
+  rowGap: 'xs',
   '&.is-read-only': {
     boxShadow: 'inset 0 0 0 100px #30373f',
     border: '1px solid',

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

@@ -40,7 +40,7 @@ const text = exports.text = {
   },
   placeholder: {
     color: _onyxTokens.astroTokensDark.color.gray[400],
-    fontWeight: 1
+    fontWeight: 400
   },
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {

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

@@ -464,6 +464,9 @@ declare const _default: {
         };
         option: {
             color: string;
+            '&.is-disabled': {
+                color: string;
+            };
             '&.is-focused': {
                 color: string;
                 bg: string;

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

@@ -27,6 +27,9 @@ const listBox = {
   },
   option: {
     color: _onyxTokens.astroTokensDark.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: _onyxTokens.astroTokensDark.color.gray[400]
+    },
     '&.is-focused': {
       color: _onyxTokens.astroTokensDark.color.common.menu.item.hover.text,
       bg: '#2C323A'

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

@@ -31,7 +31,7 @@ const checkbox = exports.checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: _colors.default.focus,
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

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

@@ -3835,23 +3835,23 @@ declare const _default: {
         };
         selectedItemBadge: {
             backgroundColor: string;
-            paddingRight: string;
+            pt: string;
+            pb: string;
+            m: number;
+            mr: number;
+            my: number;
+            pr: string;
+            pl: string;
+            maxWidth: string;
             '& span': {
+                fontWeight: number;
                 color: string;
-                fontWeight: string;
+                fontSize: number;
+                lineHeight: string;
+                mr: number;
             };
             '& button': {
-                alignSelf: string;
-                p: string;
-                bg: string;
-                '&.is-hovered': {
-                    bg: string;
-                    '& svg': {
-                        path: {
-                            fill: string;
-                        };
-                    };
-                };
+                ml: string;
             };
             '& svg': {
                 color: string;
@@ -3910,9 +3910,10 @@ declare const _default: {
             borderColor: string;
             backgroundColor: string;
             '& span': {
+                fontWeight: number;
                 color: string;
+                fontSize: number;
                 lineHeight: string;
-                fontWeight: string;
             };
             '& button': {
                 alignSelf: string;
@@ -3945,9 +3946,10 @@ declare const _default: {
         };
         readOnlyFieldBadge: {
             '& span': {
+                fontWeight: number;
                 color: string;
+                fontSize: number;
                 lineHeight: string;
-                fontWeight: string;
             };
             border: string;
             borderColor: string;
@@ -4203,19 +4205,16 @@ declare const _default: {
                 fill: string;
             };
             backgroundColor: string;
-            paddingRight: string;
+            pt: string;
+            pb: string;
+            m: number;
+            mr: number;
+            my: number;
+            pr: string;
+            pl: string;
+            maxWidth: string;
             '& button': {
-                alignSelf: string;
-                p: string;
-                bg: string;
-                '&.is-hovered': {
-                    bg: string;
-                    '& svg': {
-                        path: {
-                            fill: string;
-                        };
-                    };
-                };
+                ml: string;
             };
             alignItems: string;
             justifyContent: string;
@@ -6172,12 +6171,15 @@ declare const _default: {
             };
             option: {
                 py: string;
-                pl: string;
+                pl: number;
                 pr: number;
                 justifyContent: string;
                 borderRadius: number;
                 lineHeight: string;
                 color: string;
+                '&.is-disabled': {
+                    color: string;
+                };
                 '&.is-focused': {
                     color: string;
                     bg: string;

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

@@ -422,23 +422,23 @@ export declare const badges: {
     };
     selectedItemBadge: {
         backgroundColor: string;
-        paddingRight: string;
+        pt: string;
+        pb: string;
+        m: number;
+        mr: number;
+        my: number;
+        pr: string;
+        pl: string;
+        maxWidth: string;
         '& span': {
+            fontWeight: number;
             color: string;
-            fontWeight: string;
+            fontSize: number;
+            lineHeight: string;
+            mr: number;
         };
         '& button': {
-            alignSelf: string;
-            p: string;
-            bg: string;
-            '&.is-hovered': {
-                bg: string;
-                '& svg': {
-                    path: {
-                        fill: string;
-                    };
-                };
-            };
+            ml: string;
         };
         '& svg': {
             color: string;
@@ -497,9 +497,10 @@ export declare const badges: {
         borderColor: string;
         backgroundColor: string;
         '& span': {
+            fontWeight: number;
             color: string;
+            fontSize: number;
             lineHeight: string;
-            fontWeight: string;
         };
         '& button': {
             alignSelf: string;
@@ -532,9 +533,10 @@ export declare const badges: {
     };
     readOnlyFieldBadge: {
         '& span': {
+            fontWeight: number;
             color: string;
+            fontSize: number;
             lineHeight: string;
-            fontWeight: string;
         };
         border: string;
         borderColor: string;
@@ -790,19 +792,16 @@ export declare const badges: {
             fill: string;
         };
         backgroundColor: string;
-        paddingRight: string;
+        pt: string;
+        pb: string;
+        m: number;
+        mr: number;
+        my: number;
+        pr: string;
+        pl: string;
+        maxWidth: string;
         '& button': {
-            alignSelf: string;
-            p: string;
-            bg: string;
-            '&.is-hovered': {
-                bg: string;
-                '& svg': {
-                    path: {
-                        fill: string;
-                    };
-                };
-            };
+            ml: string;
         };
         alignItems: string;
         justifyContent: string;

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

@@ -107,10 +107,24 @@ const info = {
 const selectedItemBadge = {
   ...baseBadge,
   backgroundColor: '#eaf2fd !important',
-  paddingRight: '0px !important',
+  pt: 'xs',
+  pb: 'xs',
+  m: 0,
+  mr: 0,
+  my: 0,
+  pr: 'sm',
+  pl: 'sm',
+  maxWidth: 'none',
   '& span': {
     ...badgeFont,
-    color: 'text.primary'
+    fontWeight: 0,
+    color: 'text.primary',
+    fontSize: _onyxTokens.astroTokens.default['font-size'].small,
+    lineHeight: '18px',
+    mr: 0
+  },
+  '& button': {
+    ml: 'sm'
   }
 };
 const readOnlyBadge = {
@@ -119,17 +133,19 @@ const readOnlyBadge = {
   borderColor: 'border.hairline',
   backgroundColor: '#FFFFFF !important',
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: _onyxTokens.astroTokens.color.gray[600],
+    fontSize: _onyxTokens.astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
   ...readOnlyBadge,
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: _onyxTokens.astroTokens.color.gray[600],
+    fontSize: _onyxTokens.astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const itemBadgeWithSlot = {

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

@@ -154,8 +154,9 @@ input.multivaluesWrapper = {
   borderWidth: 1,
   flexDirection: 'row !important',
   flexWrap: 'wrap',
+  rowGap: 'xs',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: _onyxTokens.astroTokens.radius.input,
@@ -166,7 +167,7 @@ input.multivaluesWrapper = {
     flex: 1,
     height: 27,
     lineHeight: '100%',
-    p: 5,
+    p: 0,
     '&.is-focused': {
       boxShadow: 'none',
       outline: 'none'
@@ -176,7 +177,7 @@ input.multivaluesWrapper = {
     ...defaultFocus
   },
   '&.is-error': {
-    borderColor: 'critical.dark'
+    borderColor: _onyxTokens.astroTokens.color.red.base
   },
   '&.is-read-only': {
     alignItems: 'center',

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

@@ -166,7 +166,7 @@ const text = exports.text = {
   },
   placeholder: {
     color: _onyxTokens.astroTokens.color.gray[600],
-    fontWeight: 1
+    fontWeight: 400
   },
   paragraph: {
     lineHeight: 'body'

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

@@ -903,12 +903,15 @@ declare const _default: {
         };
         option: {
             py: string;
-            pl: string;
+            pl: number;
             pr: number;
             justifyContent: string;
             borderRadius: number;
             lineHeight: string;
             color: string;
+            '&.is-disabled': {
+                color: string;
+            };
             '&.is-focused': {
                 color: string;
                 bg: string;

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

@@ -177,12 +177,15 @@ const listBox = {
   },
   option: {
     py: 'md-s',
-    pl: 'md-s',
+    pl: _onyxTokens.astroTokens.spacing.md,
     pr: _onyxTokens.astroTokens.spacing.md,
     justifyContent: 'space-between',
     borderRadius: _onyxTokens.astroTokens.radius.md,
     lineHeight: 'body',
     color: _onyxTokens.astroTokens.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: _onyxTokens.astroTokens.color.gray[700]
+    },
     '&.is-focused': {
       color: _onyxTokens.astroTokens.color.common.menu.item.hover.text,
       bg: 'gray-100',

package/lib/components/Input/Input.styles.js

@@ -175,7 +175,7 @@ input.multivaluesWrapper = {
   flexDirection: 'row !important',
   flexWrap: 'wrap',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: '2px',

package/lib/components/ListBox/Option.js

@@ -6,6 +6,7 @@ import { useOption } from '@react-aria/listbox';
 import { useMultivaluesContext } from '../../context/MultivaluesContext';
 import { useGetTheme, useStatusClasses } from '../../hooks';
 import Box from '../Box';
+import { OnyxDefaultCheckboxIcon } from '../Checkbox/CheckboxIcons';
 import Icon from '../Icon';
 import { ListBoxContext } from './ListBoxContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -117,17 +118,30 @@ const Option = /*#__PURE__*/forwardRef((props, ref) => {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center",
-    flex: "1"
-  }, ___EmotionJSX(Icon, {
+  }), isCondensed && (isOnyx ? ___EmotionJSX(OnyxDefaultCheckboxIcon, {
+    isChecked: isSelected,
+    sx: {
+      mr: 'sm',
+      color: isSelected ? 'primary' : 'gray-500',
+      '&.is-disabled': {
+        color: 'gray-400'
+      },
+      '&.is-focused, &.is-focus-visible': {
+        outline: '2px solid',
+        outlineColor: 'focus'
+      }
+    }
+  }) : ___EmotionJSX(Icon, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    mr: "xs",
+    mr: "sm",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }), rendered) : ___EmotionJSX(React.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
+  })), isCondensed && ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, rendered), !isCondensed && ___EmotionJSX(React.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'

package/lib/components/MultivaluesField/BadgeLabelTooltip.js

@@ -45,6 +45,7 @@ const BadgeLabelTooltip = ({
     variant: "badge.deleteButton",
     "aria-describedby": "selectedKeysState"
   }, item.buttonProps), ___EmotionJSX(Icon, {
+    color: "text.primary",
     icon: Clear,
     size: 14,
     title: {

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -240,10 +240,12 @@ const CondensedMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
     onPress: handleSelection,
     ref: buttonRef,
     variant: "listBoxLink",
-    mt: "sm",
-    ml: "14px",
     sx: {
-      fontWeight: '400'
+      fontWeight: '400',
+      width: '100%',
+      justifyContent: 'flex-start',
+      pl: 'lg',
+      pr: 'md'
     }
   }, selectionState), ___EmotionJSX(DismissButton, {
     onDismiss: close
@@ -329,7 +331,7 @@ const CondensedMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
   }, ___EmotionJSX(Icon, _extends({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
-    size: 'sm'
+    size: 'md'
   }, {
     title: {
       name: ''

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -439,7 +439,11 @@ const DefaultMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
         isRow: true,
         sx: {
           p: 0,
-          flexWrap: 'wrap'
+          flexWrap: 'wrap',
+          ...(isOnyx && {
+            columnGap: 'xs',
+            rowGap: 'xs'
+          })
         }
       }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     },

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

@@ -175,6 +175,7 @@ export const colors = {
   badge,
   codeEditor,
   critical: {
+    bright: astroTokensDark.color.red[300],
     dark: astroTokensDark.color.red[100]
   },
   common

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

@@ -104,32 +104,42 @@ const countNeutral = {
   }
 };
 const readOnlyBadge = {
-  color: astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
+  color: astroTokensDark.color.gray[600],
+  backgroundColor: 'white !important',
   borderColor: 'border.attachment',
   '& span': {
-    color: astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: astroTokensDark.color.gray[600],
+    fontSize: astroTokensDark.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
-  color: astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
-  borderColor: 'border.attachment',
+  ...readOnlyBadge,
   '& span': {
-    color: astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: astroTokensDark.color.gray[600]
   }
 };
+
+// Onyx dark selected-tag spec: neutral surface, not the light-theme blue (UXE-8463 QA)
 const selectedItemBadge = {
-  backgroundColor: '#155CBA !important',
+  backgroundColor: '#2C323A !important',
   '& span': {
-    color: astroTokensDark.color.gray[100]
+    color: astroTokensDark.color.gray[200]
+  },
+  '& svg': {
+    color: astroTokensDark.color.gray[200],
+    path: {
+      fill: astroTokensDark.color.gray[200]
+    }
   }
 };
 const itemBadgeWithSlot = {
   ...selectedItemBadge,
   '& svg': {
     path: {
-      fill: astroTokensDark.color.gray[100]
+      fill: astroTokensDark.color.gray[200]
     }
   }
 };

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

@@ -30,7 +30,7 @@ export const checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: astroTokensDark.color.blue[400],
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

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

@@ -26,6 +26,7 @@ input.fieldControlWrapper = {
 };
 input.multivaluesWrapper = {
   backgroundColor: 'backgroundBase',
+  rowGap: 'xs',
   '&.is-read-only': {
     boxShadow: 'inset 0 0 0 100px #30373f',
     border: '1px solid',

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

@@ -34,7 +34,7 @@ export const text = {
   },
   placeholder: {
     color: astroTokensDark.color.gray[400],
-    fontWeight: 1
+    fontWeight: 400
   },
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {

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

@@ -20,6 +20,9 @@ const listBox = {
   },
   option: {
     color: astroTokensDark.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: astroTokensDark.color.gray[400]
+    },
     '&.is-focused': {
       color: astroTokensDark.color.common.menu.item.hover.text,
       bg: '#2C323A'

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

@@ -24,7 +24,7 @@ export const checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: colors.focus,
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

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

@@ -100,10 +100,24 @@ const info = {
 const selectedItemBadge = {
   ...baseBadge,
   backgroundColor: '#eaf2fd !important',
-  paddingRight: '0px !important',
+  pt: 'xs',
+  pb: 'xs',
+  m: 0,
+  mr: 0,
+  my: 0,
+  pr: 'sm',
+  pl: 'sm',
+  maxWidth: 'none',
   '& span': {
     ...badgeFont,
-    color: 'text.primary'
+    fontWeight: 0,
+    color: 'text.primary',
+    fontSize: astroTokens.default['font-size'].small,
+    lineHeight: '18px',
+    mr: 0
+  },
+  '& button': {
+    ml: 'sm'
   }
 };
 const readOnlyBadge = {
@@ -112,17 +126,19 @@ const readOnlyBadge = {
   borderColor: 'border.hairline',
   backgroundColor: '#FFFFFF !important',
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: astroTokens.color.gray[600],
+    fontSize: astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
   ...readOnlyBadge,
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: astroTokens.color.gray[600],
+    fontSize: astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const itemBadgeWithSlot = {

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

@@ -148,8 +148,9 @@ input.multivaluesWrapper = {
   borderWidth: 1,
   flexDirection: 'row !important',
   flexWrap: 'wrap',
+  rowGap: 'xs',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: astroTokens.radius.input,
@@ -160,7 +161,7 @@ input.multivaluesWrapper = {
     flex: 1,
     height: 27,
     lineHeight: '100%',
-    p: 5,
+    p: 0,
     '&.is-focused': {
       boxShadow: 'none',
       outline: 'none'
@@ -170,7 +171,7 @@ input.multivaluesWrapper = {
     ...defaultFocus
   },
   '&.is-error': {
-    borderColor: 'critical.dark'
+    borderColor: astroTokens.color.red.base
   },
   '&.is-read-only': {
     alignItems: 'center',

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

@@ -160,7 +160,7 @@ export const text = {
   },
   placeholder: {
     color: astroTokens.color.gray[600],
-    fontWeight: 1
+    fontWeight: 400
   },
   paragraph: {
     lineHeight: 'body'

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

@@ -169,12 +169,15 @@ const listBox = {
   },
   option: {
     py: 'md-s',
-    pl: 'md-s',
+    pl: astroTokens.spacing.md,
     pr: astroTokens.spacing.md,
     justifyContent: 'space-between',
     borderRadius: astroTokens.radius.md,
     lineHeight: 'body',
     color: astroTokens.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: astroTokens.color.gray[700]
+    },
     '&.is-focused': {
       color: astroTokens.color.common.menu.item.hover.text,
       bg: 'gray-100',

package/package.json

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