@primer/components 0.0.0-2021927203131 → 0.0.0-2021927232856

package/lib/ActionList/Item.js

@@ -35,14 +35,33 @@ 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: (0, _constants.get)('colors.neutral.subtle'),
-    focus: (0, _constants.get)('colors.neutral.muted')
+    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: (0, _constants.get)('colors.danger.subtle'),
-    focus: (0, _constants.get)('colors.danger.muted')
+    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)'
+    }
   }
 };
 /**
@@ -211,8 +230,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     }
   }, [onAction, disabled, itemProps, onClick]);
   const customItemTheme = customItemThemes[variant];
-  const hoverBackground = customItemTheme.hover;
-  const focusBackground = customItemTheme.focus;
+  const hoverBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit');
+  const focusBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit');
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();

package/lib-esm/ActionList/Item.js

@@ -8,17 +8,37 @@ import Truncate from '../Truncate';
 import styled from 'styled-components';
 import { StyledHeader } from './Header';
 import { StyledDivider } from './Divider';
-import { useTheme } from '../ThemeProvider';
+import { useColorSchemeVar, 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: get('colors.neutral.subtle'),
-    focus: get('colors.neutral.muted')
+    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: get('colors.danger.subtle'),
-    focus: get('colors.danger.muted')
+    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)'
+    }
   }
 };
 /**
@@ -177,8 +197,8 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     }
   }, [onAction, disabled, itemProps, onClick]);
   const customItemTheme = customItemThemes[variant];
-  const hoverBackground = customItemTheme.hover;
-  const focusBackground = customItemTheme.focus;
+  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit');
+  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit');
   const {
     theme
   } = useTheme();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021927203131",
+  "version": "0.0.0-2021927232856",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -132,6 +132,7 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "typescript": "4.2.2"
   },