ActionList color bug fixes

.changeset/eight-bears-worry.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionList color bug fixes

packages/react/src/ActionList/Item.tsx

@@ -155,7 +155,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
  '&:focus-visible, > a.focus-visible, &:focus.focus-visible': {
  outline: 'none',
  border: `2 solid`,
- boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,
+ boxShadow: `0 0 0 2px var(--focus-outlineColor)`,
  },
  '&:active:not([aria-disabled]):not([data-inactive])': {
  backgroundColor: `actionListItem.${variant}.activeBg`,

packages/react/src/ActionList/Selection.tsx

@@ -66,7 +66,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
  <LeadingVisualContainer data-component="ActionList.Selection" sx={{minWidth: '16px'}}>
  <Box
  sx={{
- borderColor: selected ? 'accent.fg' : 'neutral.emphasis',
+ borderColor: selected ? 'var(--control-checked-borderColor-rest)' : 'var(--control-borderColor-emphasis)',
  borderStyle: 'solid',
  borderWidth: '1',
  borderRadius: '1',
@@ -76,7 +76,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
  margin: '0',
  placeContent: 'center',
  width: 'var(--base-size-16, 16px)',
- backgroundColor: selected ? 'accent.fg' : 'canvas.default',
+ backgroundColor: selected ? 'var(--control-checked-bgColor-rest)' : 'canvas.default',
  transition: selected
  ? 'background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1)'
  : 'background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms',

packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -304,7 +304,7 @@ exports[`NavList renders a simple list 1`] = `
  .c2:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c2:active:not([aria-disabled]):not([data-inactive]) {
@@ -334,7 +334,7 @@ exports[`NavList renders a simple list 1`] = `
  .c6:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c6:active:not([aria-disabled]):not([data-inactive]) {
@@ -783,7 +783,7 @@ exports[`NavList renders with groups 1`] = `
  .c6:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c6:active:not([aria-disabled]):not([data-inactive]) {
@@ -813,7 +813,7 @@ exports[`NavList renders with groups 1`] = `
  .c10:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c10:active:not([aria-disabled]):not([data-inactive]) {
@@ -1300,7 +1300,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
  .c11:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c11:active:not([aria-disabled]):not([data-inactive]) {
@@ -1330,7 +1330,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
  .c4:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c4:active:not([aria-disabled]):not([data-inactive]) {
@@ -1811,7 +1811,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
  .c11:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c11:active:not([aria-disabled]):not([data-inactive]) {
@@ -1849,7 +1849,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
  .c4:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c4:active:not([aria-disabled]):not([data-inactive]) {

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -910,7 +910,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c6 {
- border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
+ border-color: var(--control-borderColor-emphasis);
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
@@ -1165,7 +1165,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
  .c3:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c3:active:not([aria-disabled]):not([data-inactive]) {
@@ -1860,7 +1860,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c5 {
- border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
+ border-color: var(--control-borderColor-emphasis);
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
@@ -2071,7 +2071,7 @@ exports[`snapshots renders a multiselect input 1`] = `
  .c3:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c3:active:not([aria-disabled]):not([data-inactive]) {
@@ -2713,7 +2713,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c5 {
- border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+ border-color: var(--control-checked-borderColor-rest);
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
@@ -2723,7 +2723,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
  margin: 0;
  place-content: center;
  width: var(--base-size-16,16px);
- background-color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+ background-color: var(--control-checked-bgColor-rest);
  -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
  transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1);
 }
@@ -2776,7 +2776,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c9 {
- border-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
+ border-color: var(--control-borderColor-emphasis);
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
@@ -3070,7 +3070,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
  .c3:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c3:active:not([aria-disabled]):not([data-inactive]) {
@@ -3100,7 +3100,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
  .c8:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c8:active:not([aria-disabled]):not([data-inactive]) {
@@ -3893,7 +3893,7 @@ exports[`snapshots renders a single select input 1`] = `
  .c3:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c3:active:not([aria-disabled]):not([data-inactive]) {
@@ -4387,7 +4387,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
  .c3:focus.focus-visible {
  outline: none;
  border: 2 solid;
- box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
+ box-shadow: 0 0 0 2px var(--focus-outlineColor);
  }
 
  .c3:active:not([aria-disabled]):not([data-inactive]) {