@primer/components 31.2.1-rc.48ecca6e → 31.2.1-rc.7fa29a87

package/lib/ActionList/Item.js

@@ -35,39 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-  default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
-  },
-  danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
-  }
-};
-/**
- * Contract for props passed to the `Item` component.
- */
-
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -84,7 +51,10 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.danger.fg'),
         iconColor: (0, _constants.get)('colors.danger.fg'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.danger.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.danger.activeBg'),
+        hoverText: (0, _constants.get)('colors.actionListItem.danger.hoverText')
       };
 
     default:
@@ -92,7 +62,9 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: (0, _constants.get)('colors.fg.default'),
         iconColor: (0, _constants.get)('colors.fg.muted'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.default.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.default.activeBg')
       };
   }
 };
@@ -110,12 +82,16 @@ const MainContent = _styledComponents.default.div.withConfig({
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
-  hoverBackground
-}) => hoverBackground, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, _Divider.StyledDivider, _Header.StyledHeader, ({
@@ -123,14 +99,18 @@ const StyledItem = _styledComponents.default.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
-  focusBackground
-}) => focusBackground, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
-  hoverBackground
-}) => hoverBackground, ({
-  focusBackground
-}) => focusBackground, ({
-  focusBackground
-}) => focusBackground, _sx.default);
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _sx.default);
 
 const TextContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__TextContainer",
@@ -229,9 +209,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
-  const customItemTheme = customItemThemes[variant];
-  const hoverBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit');
-  const focusBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit');
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -247,9 +224,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
+    onClick: clickHandler
   }), !!selected === selected && /*#__PURE__*/_react.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",

package/lib/ActionList/Item.jsx

@@ -34,35 +34,6 @@ const Divider_1 = require("./Divider");
 const ThemeProvider_1 = require("../ThemeProvider");
 const focusZone_1 = require("../behaviors/focusZone");
 const ssr_1 = require("@react-aria/ssr");
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-    default: {
-        hover: {
-            light: 'rgba(46, 77, 108, 0.06)',
-            dark: 'rgba(201, 206, 212, 0.12)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-        },
-        focus: {
-            light: 'rgba(54, 77, 100, 0.16)',
-            dark: 'rgba(201, 206, 212, 0.24)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-        }
-    },
-    danger: {
-        hover: {
-            light: 'rgba(234, 74, 90, 0.08)',
-            dark: 'rgba(248, 81, 73, 0.16)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-        },
-        focus: {
-            light: 'rgba(234, 74, 90, 0.14)',
-            dark: 'rgba(248, 81, 73, 0.24)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-        }
-    }
-};
 const getItemVariant = (variant = 'default', disabled) => {
     if (disabled) {
         return {
@@ -78,14 +49,19 @@ const getItemVariant = (variant = 'default', disabled) => {
                 color: constants_1.get('colors.danger.fg'),
                 iconColor: constants_1.get('colors.danger.fg'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.danger.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.danger.activeBg'),
+                hoverText: constants_1.get('colors.actionListItem.danger.hoverText')
             };
         default:
             return {
                 color: constants_1.get('colors.fg.default'),
                 iconColor: constants_1.get('colors.fg.muted'),
                 annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
+                hoverCursor: 'pointer',
+                hoverBg: constants_1.get('colors.actionListItem.default.hoverBg'),
+                focusBg: constants_1.get('colors.actionListItem.default.activeBg')
             };
     }
 };
@@ -121,7 +97,11 @@ const StyledItem = styled_components_1.default.div `
   @media (hover: hover) and (pointer: fine) {
     :hover {
       // allow override in case another item in the list is active/focused
-      background: var(--item-hover-bg-override, ${({ hoverBackground }) => hoverBackground});
+      background: var(
+        --item-hover-bg-override,
+        ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg}
+      );
+      color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverText};
       cursor: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverCursor};
     }
   }
@@ -167,19 +147,19 @@ const StyledItem = styled_components_1.default.div `
 
   // Active Descendant
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
   &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
-    background: ${({ hoverBackground }) => hoverBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverBg};
   }
 
   &:focus {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
     outline: none;
   }
 
   &:active {
-    background: ${({ focusBackground }) => focusBackground};
+    background: ${({ variant, item }) => getItemVariant(variant, item?.disabled).focusBg};
   }
 
   ${sx_1.default}
@@ -264,11 +244,8 @@ exports.Item = react_1.default.forwardRef((itemProps, ref) => {
             onAction?.(itemProps, event);
         }
     }, [onAction, disabled, itemProps, onClick]);
-    const customItemTheme = customItemThemes[variant];
-    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
-    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
     const { theme } = ThemeProvider_1.useTheme();
-    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
+    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler}>
       {!!selected === selected && (<BaseVisualContainer>
           {selectionVariant === 'multiple' ? (<>
               {/**

package/lib/NewButton/button.js

@@ -23,6 +23,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
+
 const getVariantStyles = (variant = 'default', theme) => {
   const style = {
     default: {
@@ -146,7 +148,7 @@ const getVariantStyles = (variant = 'default', theme) => {
         borderColor: 'btn.outline.focusBorder',
         boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.focusShadow}`
       },
-      '&:active': {
+      '&:active:not([disabled])': {
         color: 'btn.outline.selectedText',
         backgroundColor: 'btn.outline.selectedBg',
         boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.selectedShadow}`,
@@ -217,6 +219,7 @@ const ButtonBase = _styledComponents.default.button.withConfig({
 
 const Button = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
+  sx: sxProp = {},
   ...props
 }, forwardedRef) => {
   const {
@@ -224,12 +227,9 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
     leadingIcon: LeadingIcon,
     trailingIcon: TrailingIcon,
     variant = 'default',
-    size = 'medium',
-    sx: sxProp = {}
+    size = 'medium'
   } = props;
   const iconOnly = !!Icon;
-  const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
-
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -270,46 +270,38 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
       gridArea: 'trailingIcon'
     }
   };
-  const variableStyles = { ...getSizeStyles(size, variant, iconOnly),
-    ...getVariantStyles(variant, theme)
-  };
-  const componentStyles = { ...styles,
-    ...variableStyles
-  };
   const iconWrapStyles = {
     display: 'inline-block'
   };
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore Why wont it accept the sx prop?
-    _react.default.createElement(ButtonBase, _extends({
-      sx: (0, _sx.merge)(componentStyles, sxProp),
-      ref: forwardedRef
-    }, props), LeadingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
-      as: "span",
-      "data-component": "leadingIcon",
-      sx: iconWrapStyles,
-      "aria-hidden": !iconOnly
-    }, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
-      "data-component": "text",
-      hidden: Icon ? true : undefined
-    }, children), Icon && /*#__PURE__*/_react.default.createElement(_Box.default, {
-      "data-component": "icon-only",
-      as: "span",
-      sx: {
-        display: 'inline-block'
-      },
-      "aria-hidden": !iconOnly
-    }, /*#__PURE__*/_react.default.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
-      as: "span",
-      "data-component": "trailingIcon",
-      sx: { ...iconWrapStyles,
-        ml: 2
-      },
-      "aria-hidden": !iconOnly
-    }, /*#__PURE__*/_react.default.createElement(TrailingIcon, null)))
-  );
+
+  const sxStyles = _sx.merge.all([styles, getSizeStyles(size, variant, iconOnly), getVariantStyles(variant, theme), sxProp]);
+
+  return /*#__PURE__*/_react.default.createElement(ButtonBase, _extends({
+    sx: sxStyles,
+    ref: forwardedRef
+  }, props), LeadingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    "data-component": "leadingIcon",
+    sx: iconWrapStyles,
+    "aria-hidden": !iconOnly
+  }, /*#__PURE__*/_react.default.createElement(LeadingIcon, null)), /*#__PURE__*/_react.default.createElement("span", {
+    "data-component": "text",
+    hidden: Icon ? true : false
+  }, children), Icon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    "data-component": "icon-only",
+    as: "span",
+    sx: {
+      display: 'inline-block'
+    },
+    "aria-hidden": !iconOnly
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    "data-component": "trailingIcon",
+    sx: { ...iconWrapStyles,
+      ml: 2
+    },
+    "aria-hidden": !iconOnly
+  }, /*#__PURE__*/_react.default.createElement(TrailingIcon, null)));
 });
 exports.Button = Button;
 Button.displayName = 'Button';

package/lib/NewButton/button.jsx

@@ -28,6 +28,7 @@ const Box_1 = __importDefault(require("../Box"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const sx_1 = __importStar(require("../sx"));
 const ThemeProvider_1 = require("../ThemeProvider");
+const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
 const getVariantStyles = (variant = 'default', theme) => {
     const style = {
         default: {
@@ -151,7 +152,7 @@ const getVariantStyles = (variant = 'default', theme) => {
                 borderColor: 'btn.outline.focusBorder',
                 boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
             },
-            '&:active': {
+            '&:active:not([disabled])': {
                 color: 'btn.outline.selectedText',
                 backgroundColor: 'btn.outline.selectedBg',
                 boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
@@ -208,10 +209,9 @@ const getSizeStyles = (size = 'medium', variant = 'default', iconOnly) => {
     };
 };
 const ButtonBase = styled_components_1.default.button(sx_1.default);
-const Button = react_1.forwardRef(({ children, ...props }, forwardedRef) => {
-    const { icon: Icon, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium', sx: sxProp = {} } = props;
+const Button = react_1.forwardRef(({ children, sx: sxProp = {}, ...props }, forwardedRef) => {
+    const { icon: Icon, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium' } = props;
     const iconOnly = !!Icon;
-    const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
     const { theme } = ThemeProvider_1.useTheme();
     const styles = {
         borderRadius: '2',
@@ -250,28 +250,29 @@ const Button = react_1.forwardRef(({ children, ...props }, forwardedRef) => {
             gridArea: 'trailingIcon'
         }
     };
-    const variableStyles = { ...getSizeStyles(size, variant, iconOnly), ...getVariantStyles(variant, theme) };
-    const componentStyles = { ...styles, ...variableStyles };
     const iconWrapStyles = {
         display: 'inline-block'
     };
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore Why wont it accept the sx prop?
-    <ButtonBase sx={sx_1.merge(componentStyles, sxProp)} ref={forwardedRef} {...props}>
-      {LeadingIcon && (<Box_1.default as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
-          <LeadingIcon />
-        </Box_1.default>)}
-      <span data-component="text" hidden={Icon ? true : undefined}>
-        {children}
-      </span>
-      {Icon && (<Box_1.default data-component="icon-only" as="span" sx={{ display: 'inline-block' }} aria-hidden={!iconOnly}>
-          <Icon />
-        </Box_1.default>)}
-      {TrailingIcon && (<Box_1.default as="span" data-component="trailingIcon" sx={{ ...iconWrapStyles, ml: 2 }} aria-hidden={!iconOnly}>
-          <TrailingIcon />
-        </Box_1.default>)}
-    </ButtonBase>);
+    const sxStyles = sx_1.merge.all([
+        styles,
+        getSizeStyles(size, variant, iconOnly),
+        getVariantStyles(variant, theme),
+        sxProp
+    ]);
+    return (<ButtonBase sx={sxStyles} ref={forwardedRef} {...props}>
+        {LeadingIcon && (<Box_1.default as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
+            <LeadingIcon />
+          </Box_1.default>)}
+        <span data-component="text" hidden={Icon ? true : false}>
+          {children}
+        </span>
+        {Icon && (<Box_1.default data-component="icon-only" as="span" sx={{ display: 'inline-block' }} aria-hidden={!iconOnly}>
+            <Icon />
+          </Box_1.default>)}
+        {TrailingIcon && (<Box_1.default as="span" data-component="trailingIcon" sx={{ ...iconWrapStyles, ml: 2 }} aria-hidden={!iconOnly}>
+            <TrailingIcon />
+          </Box_1.default>)}
+      </ButtonBase>);
 });
 exports.Button = Button;
 Button.displayName = 'Button';

package/lib/utils/testing.d.ts

@@ -231,67 +231,13 @@ export declare function render(component: React.ReactElement, theme?: {
             gradientOut: string;
         };
         mktg: {
-            success: string;
-            info: string;
-            bgShadeGradient: {
-                top: string;
-                bottom: string;
-            };
             btn: {
-                bg: {
-                    top: string;
-                    bottom: string;
-                };
-                bgOverlay: {
-                    top: string;
-                    bottom: string;
-                };
-                text: string;
-                primary: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                enterprise: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                outline: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
-                };
-                dark: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
+                bg: string;
+                shadow: {
+                    outline: string;
+                    focus: string;
+                    hover: string;
+                    hoverMuted: string;
                 };
             };
         };

package/lib-esm/ActionList/Item.js

@@ -8,43 +8,10 @@ import Truncate from '../Truncate';
 import styled from 'styled-components';
 import { StyledHeader } from './Header';
 import { StyledDivider } from './Divider';
-import { useColorSchemeVar, useTheme } from '../ThemeProvider';
+import { useTheme } from '../ThemeProvider';
 import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
 import { useSSRSafeId } from '@react-aria/ssr';
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-  default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
-  },
-  danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
-  }
-};
-/**
- * Contract for props passed to the `Item` component.
- */
-
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
@@ -61,7 +28,10 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: get('colors.danger.fg'),
         iconColor: get('colors.danger.fg'),
         annotationColor: get('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.danger.hoverBg'),
+        focusBg: get('colors.actionListItem.danger.activeBg'),
+        hoverText: get('colors.actionListItem.danger.hoverText')
       };
 
     default:
@@ -69,7 +39,9 @@ const getItemVariant = (variant = 'default', disabled) => {
         color: get('colors.fg.default'),
         iconColor: get('colors.fg.muted'),
         annotationColor: get('colors.fg.muted'),
-        hoverCursor: 'pointer'
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.default.hoverBg'),
+        focusBg: get('colors.actionListItem.default.activeBg')
       };
   }
 };
@@ -85,12 +57,16 @@ const MainContent = styled.div.withConfig({
 const StyledItem = styled.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
-  hoverBackground
-}) => hoverBackground, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
@@ -98,14 +74,18 @@ const StyledItem = styled.div.withConfig({
 }) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
-  focusBackground
-}) => focusBackground, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
-  hoverBackground
-}) => hoverBackground, ({
-  focusBackground
-}) => focusBackground, ({
-  focusBackground
-}) => focusBackground, sx);
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, sx);
 export const TextContainer = styled.span.withConfig({
   displayName: "Item__TextContainer",
   componentId: "jqpvy8-3"
@@ -196,9 +176,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
       onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
     }
   }, [onAction, disabled, itemProps, onClick]);
-  const customItemTheme = customItemThemes[variant];
-  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit');
-  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit');
   const {
     theme
   } = useTheme();
@@ -214,9 +191,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
   }, props, {
     "data-id": id,
     onKeyPress: keyPressHandler,
-    onClick: clickHandler,
-    hoverBackground: disabled ? 'inherit' : hoverBackground,
-    focusBackground: disabled ? 'inherit' : focusBackground
+    onClick: clickHandler
   }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectIcon, {
     selected: selected,
     width: "16",