ActionList color bug fixes (#5416)

* lil things * Create eight-bears-worry.md * test(vrt): update snapshots * snippy snappos * fix border * test(vrt): update snapshots * snaps --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Dec 11, 2024 · 1dcc534 · 1dcc534
1 parent d44a4cf
commit 1dcc534
Show file tree

Hide file tree

Showing 61 changed files with 27 additions and 22 deletions.
diff --git a/.changeset/eight-bears-worry.md b/.changeset/eight-bears-worry.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionList color bug fixes
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/...Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png b/...Overlay.test.ts-snapshots/Overlay-Dropdown-Overlay-dark-high-contrast-linux.png
diff --git a/...lectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png b/...lectPanel-Above-Tall-Body-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...SelectPanel-Above-Tall-Body-light-colorblind-modern-action-list--true-linux.png b/...SelectPanel-Above-Tall-Body-light-colorblind-modern-action-list--true-linux.png
diff --git a/...-snapshots/SelectPanel-Above-Tall-Body-light-modern-action-list--true-linux.png b/...-snapshots/SelectPanel-Above-Tall-Body-light-modern-action-list--true-linux.png
diff --git a/...SelectPanel-Above-Tall-Body-light-tritanopia-modern-action-list--true-linux.png b/...SelectPanel-Above-Tall-Body-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...shots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png b/...shots/SelectPanel-Default-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...apshots/SelectPanel-Default-light-colorblind-modern-action-list--true-linux.png b/...apshots/SelectPanel-Default-light-colorblind-modern-action-list--true-linux.png
diff --git a/....test.ts-snapshots/SelectPanel-Default-light-modern-action-list--true-linux.png b/....test.ts-snapshots/SelectPanel-Default-light-modern-action-list--true-linux.png
diff --git a/...apshots/SelectPanel-Default-light-tritanopia-modern-action-list--true-linux.png b/...apshots/SelectPanel-Default-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...lectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png b/...lectPanel-External-Anchor-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...al-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png b/...al-with-Overflowing-Items-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...tial-with-Overflowing-Items-light-colorblind-modern-action-list--true-linux.png b/...tial-with-Overflowing-Items-light-colorblind-modern-action-list--true-linux.png
diff --git a/...-Height-Initial-with-Overflowing-Items-light-modern-action-list--true-linux.png b/...-Height-Initial-with-Overflowing-Items-light-modern-action-list--true-linux.png
diff --git a/...tial-with-Overflowing-Items-light-tritanopia-modern-action-list--true-linux.png b/...tial-with-Overflowing-Items-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...l-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png b/...l-with-Underflowing-Items-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ial-with-Underflowing-Items-light-colorblind-modern-action-list--true-linux.png b/...ial-with-Underflowing-Items-light-colorblind-modern-action-list--true-linux.png
diff --git a/...Height-Initial-with-Underflowing-Items-light-modern-action-list--true-linux.png b/...Height-Initial-with-Underflowing-Items-light-modern-action-list--true-linux.png
diff --git a/...ial-with-Underflowing-Items-light-tritanopia-modern-action-list--true-linux.png b/...ial-with-Underflowing-Items-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...s/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png b/...s/SelectPanel-With-Footer-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ots/SelectPanel-With-Footer-light-colorblind-modern-action-list--true-linux.png b/...ots/SelectPanel-With-Footer-light-colorblind-modern-action-list--true-linux.png
diff --git a/...t.ts-snapshots/SelectPanel-With-Footer-light-modern-action-list--true-linux.png b/...t.ts-snapshots/SelectPanel-With-Footer-light-modern-action-list--true-linux.png
diff --git a/...ots/SelectPanel-With-Footer-light-tritanopia-modern-action-list--true-linux.png b/...ots/SelectPanel-With-Footer-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...s/SelectPanel-With-Groups-dark-high-contrast-modern-action-list--true-linux.png b/...s/SelectPanel-With-Groups-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ots/SelectPanel-With-Groups-light-colorblind-modern-action-list--true-linux.png b/...ots/SelectPanel-With-Groups-light-colorblind-modern-action-list--true-linux.png
diff --git a/...t.ts-snapshots/SelectPanel-With-Groups-light-modern-action-list--true-linux.png b/...t.ts-snapshots/SelectPanel-With-Groups-light-modern-action-list--true-linux.png
diff --git a/...ots/SelectPanel-With-Groups-light-tritanopia-modern-action-list--true-linux.png b/...ots/SelectPanel-With-Groups-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...tPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png b/...tPanel-With-Item-Dividers-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ectPanel-With-Item-Dividers-light-colorblind-modern-action-list--true-linux.png b/...ectPanel-With-Item-Dividers-light-colorblind-modern-action-list--true-linux.png
diff --git a/...apshots/SelectPanel-With-Item-Dividers-light-modern-action-list--true-linux.png b/...apshots/SelectPanel-With-Item-Dividers-light-modern-action-list--true-linux.png
diff --git a/...ectPanel-With-Item-Dividers-light-tritanopia-modern-action-list--true-linux.png b/...ectPanel-With-Item-Dividers-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...nel-With-Label-Internally-dark-high-contrast-modern-action-list--true-linux.png b/...nel-With-Label-Internally-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...Panel-With-Label-Internally-light-colorblind-modern-action-list--true-linux.png b/...Panel-With-Label-Internally-light-colorblind-modern-action-list--true-linux.png
diff --git a/...hots/SelectPanel-With-Label-Internally-light-modern-action-list--true-linux.png b/...hots/SelectPanel-With-Label-Internally-light-modern-action-list--true-linux.png
diff --git a/...Panel-With-Label-Internally-light-tritanopia-modern-action-list--true-linux.png b/...Panel-With-Label-Internally-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...ith-Label-Visually-Hidden-dark-high-contrast-modern-action-list--true-linux.png b/...ith-Label-Visually-Hidden-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...-With-Label-Visually-Hidden-light-colorblind-modern-action-list--true-linux.png b/...-With-Label-Visually-Hidden-light-colorblind-modern-action-list--true-linux.png
diff --git a/...SelectPanel-With-Label-Visually-Hidden-light-modern-action-list--true-linux.png b/...SelectPanel-With-Label-Visually-Hidden-light-modern-action-list--true-linux.png
diff --git a/...-With-Label-Visually-Hidden-light-tritanopia-modern-action-list--true-linux.png b/...-With-Label-Visually-Hidden-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...ceholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png b/...ceholder-for-Search-Input-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...laceholder-for-Search-Input-light-colorblind-modern-action-list--true-linux.png b/...laceholder-for-Search-Input-light-colorblind-modern-action-list--true-linux.png
diff --git a/...anel-With-Placeholder-for-Search-Input-light-modern-action-list--true-linux.png b/...anel-With-Placeholder-for-Search-Input-light-modern-action-list--true-linux.png
diff --git a/...laceholder-for-Search-Input-light-tritanopia-modern-action-list--true-linux.png b/...laceholder-for-Search-Input-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...anel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-high-contrast-linux.png b/...anel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-high-contrast-linux.png
diff --git a/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-colorblind-linux.png b/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-colorblind-linux.png
diff --git a/...rafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-linux.png b/...rafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-linux.png
diff --git a/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-tritanopia-linux.png b/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-tritanopia-linux.png
diff --git a/...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png b/...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png
diff --git a/...ctPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-colorblind-linux.png b/...ctPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-colorblind-linux.png
diff --git a/...drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-linux.png b/...drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-linux.png
diff --git a/...ctPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-tritanopia-linux.png b/...ctPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-tritanopia-linux.png
diff --git a/...st.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-high-contrast-linux.png b/...st.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-high-contrast-linux.png
diff --git a/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-colorblind-linux.png b/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-colorblind-linux.png
diff --git a/...electPanel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-linux.png b/...electPanel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-linux.png
diff --git a/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-tritanopia-linux.png b/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-high-contrast-linux.png b/....test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-high-contrast-linux.png
diff --git a/packages/react/src/ActionList/Item.tsx b/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`,

diff --git a/packages/react/src/ActionList/Selection.tsx b/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',

diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/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]) {

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/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]) {