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]) {