[Bug] Leading & Trailing Visual Colors for Button (#3447)

* updated leading and trailing visuals * changed font size for Button Counter * update tests * Create strong-zoos-explain.md * test(vrt): update snapshots * add trailing action * test(vrt): update snapshots * fix trailing counter position * snaps * test(vrt): update snapshots --------- Co-authored-by: langermank <18661030+langermank@users.noreply.github.com> Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Jul 18, 2023 · 40808db · 40808db
1 parent c02f3a2
commit 40808db
Show file tree

Hide file tree

Showing 244 changed files with 1,135 additions and 611 deletions.
diff --git a/.changeset/strong-zoos-explain.md b/.changeset/strong-zoos-explain.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+[Bug] Leading & Trailing Visual Colors for Button
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-colorblind-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-colorblind-linux.png
diff --git a/...s/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-dimmed-linux.png b/...s/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-dimmed-linux.png
diff --git a/...mponents/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-linux.png b/...mponents/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-linux.png
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-tritanopia-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-dark-tritanopia-linux.png
diff --git a/...ionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-colorblind-linux.png b/...ionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-colorblind-linux.png
diff --git a/...ponents/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-linux.png b/...ponents/ActionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-linux.png
diff --git a/...ionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-tritanopia-linux.png b/...ionMenu.test.ts-snapshots/ActionMenu-Controlled-Menu-light-tritanopia-linux.png
diff --git a/...enu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-colorblind-linux.png b/...enu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-colorblind-linux.png
diff --git a/...ionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-dimmed-linux.png b/...ionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-dimmed-linux.png
diff --git a/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-linux.png b/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-linux.png
diff --git a/...enu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-tritanopia-linux.png b/...enu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-dark-tritanopia-linux.png
diff --git a/...nu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-colorblind-linux.png b/...nu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-colorblind-linux.png
diff --git a/...ts/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-linux.png b/...ts/ActionMenu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-linux.png
diff --git a/...nu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-tritanopia-linux.png b/...nu.test.ts-snapshots/ActionMenu-Custom-Overlay-Props-light-tritanopia-linux.png
diff --git a/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-colorblind-linux.png b/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-colorblind-linux.png
diff --git a/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-dimmed-linux.png b/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-dimmed-linux.png
diff --git a/...shots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-linux.png b/...shots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-linux.png
diff --git a/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-tritanopia-linux.png b/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Default-dark-tritanopia-linux.png
diff --git a/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-colorblind-linux.png b/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-colorblind-linux.png
diff --git a/...hots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-linux.png b/...hots/components/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-linux.png
diff --git a/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-tritanopia-linux.png b/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Default-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-colorblind-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-colorblind-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-dimmed-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-dimmed-linux.png
diff --git a/...onents/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-linux.png b/...onents/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-tritanopia-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-dark-tritanopia-linux.png
diff --git a/...nMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-colorblind-linux.png b/...nMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-colorblind-linux.png
diff --git a/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-linux.png b/...nents/ActionMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-linux.png
diff --git a/...nMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-tritanopia-linux.png b/...nMenu.test.ts-snapshots/ActionMenu-Links-And-Actions-light-tritanopia-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-colorblind-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-colorblind-linux.png
diff --git a/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-dimmed-linux.png b/...ents/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-dimmed-linux.png
diff --git a/.../components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-linux.png b/.../components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-tritanopia-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-dark-tritanopia-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-colorblind-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-colorblind-linux.png
diff --git a/...components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-linux.png b/...components/ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-tritanopia-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Multi-Select-light-tritanopia-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png
diff --git a/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png b/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png
diff --git a/...components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png b/...components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png
diff --git a/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png b/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png
diff --git a/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png
diff --git a/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png b/...onents/Button.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png b/...components/Button.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-Leading-Visual-dark-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png b/...onents/Button.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...nents/Button.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png b/...nents/Button.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png
diff --git a/...shots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-linux.png b/...shots/components/Button.test.ts-snapshots/Button-Leading-Visual-light-linux.png
diff --git a/...nents/Button.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png b/...nents/Button.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png
diff --git a/...nents/Button.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png b/...nents/Button.test.ts-snapshots/Button-Trailing-Action-dark-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png b/...omponents/Button.test.ts-snapshots/Button-Trailing-Action-dark-dimmed-linux.png
diff --git a/...shots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-linux.png b/...shots/components/Button.test.ts-snapshots/Button-Trailing-Action-dark-linux.png
diff --git a/...nents/Button.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png b/...nents/Button.test.ts-snapshots/Button-Trailing-Action-dark-tritanopia-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Action-light-colorblind-linux.png
diff --git a/...hots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-linux.png b/...hots/components/Button.test.ts-snapshots/Button-Trailing-Action-light-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Action-light-tritanopia-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png
diff --git a/...mponents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/...mponents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/...s/Button.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png
diff --git a/...hots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/...hots/components/Button.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png
diff --git a/.../Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.../Button.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png
diff --git a/...ots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/...ots/components/Button.test.ts-snapshots/Button-Trailing-Counter-light-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/...nts/Button.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png
diff --git a/...nents/Button.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png b/...nents/Button.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png b/...omponents/Button.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png
diff --git a/...shots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png b/...shots/components/Button.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png
diff --git a/...nents/Button.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png b/...nents/Button.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png
diff --git a/...hots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-linux.png b/...hots/components/Button.test.ts-snapshots/Button-Trailing-Visual-light-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png b/...ents/Button.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
diff --git a/...lteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-colorblind-linux.png b/...lteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-colorblind-linux.png
diff --git a/...s/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-dimmed-linux.png b/...s/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-dimmed-linux.png
diff --git a/...mponents/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-linux.png b/...mponents/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-linux.png
diff --git a/...lteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-tritanopia-linux.png b/...lteredSearch.test.ts-snapshots/FilteredSearch-Default-dark-tritanopia-linux.png
diff --git a/...teredSearch.test.ts-snapshots/FilteredSearch-Default-light-colorblind-linux.png b/...teredSearch.test.ts-snapshots/FilteredSearch-Default-light-colorblind-linux.png
diff --git a/...ponents/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-linux.png b/...ponents/FilteredSearch.test.ts-snapshots/FilteredSearch-Default-light-linux.png
diff --git a/...teredSearch.test.ts-snapshots/FilteredSearch-Default-light-tritanopia-linux.png b/...teredSearch.test.ts-snapshots/FilteredSearch-Default-light-tritanopia-linux.png
diff --git a/...redSearch.test.ts-snapshots/FilteredSearch-Playground-dark-colorblind-linux.png b/...redSearch.test.ts-snapshots/FilteredSearch-Playground-dark-colorblind-linux.png
diff --git a/...ilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-dimmed-linux.png b/...ilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-dimmed-linux.png
diff --git a/...nents/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-linux.png b/...nents/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-dark-linux.png
diff --git a/...redSearch.test.ts-snapshots/FilteredSearch-Playground-dark-tritanopia-linux.png b/...redSearch.test.ts-snapshots/FilteredSearch-Playground-dark-tritanopia-linux.png
diff --git a/...edSearch.test.ts-snapshots/FilteredSearch-Playground-light-colorblind-linux.png b/...edSearch.test.ts-snapshots/FilteredSearch-Playground-light-colorblind-linux.png
diff --git a/...ents/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-linux.png b/...ents/FilteredSearch.test.ts-snapshots/FilteredSearch-Playground-light-linux.png
diff --git a/...edSearch.test.ts-snapshots/FilteredSearch-Playground-light-tritanopia-linux.png b/...edSearch.test.ts-snapshots/FilteredSearch-Playground-light-tritanopia-linux.png
diff --git a/...inkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-colorblind-linux.png b/...inkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-colorblind-linux.png
diff --git a/...ts/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-dimmed-linux.png b/...ts/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-dimmed-linux.png
diff --git a/...omponents/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-linux.png b/...omponents/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-linux.png
diff --git a/...inkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-tritanopia-linux.png b/...inkButton.test.ts-snapshots/LinkButton-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...nkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-colorblind-linux.png b/...nkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-colorblind-linux.png
diff --git a/...mponents/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-linux.png b/...mponents/LinkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-linux.png
diff --git a/...nkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-tritanopia-linux.png b/...nkButton.test.ts-snapshots/LinkButton-Leading-Visual-light-tritanopia-linux.png
diff --git a/...nkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-colorblind-linux.png b/...nkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-colorblind-linux.png
diff --git a/...s/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-dimmed-linux.png b/...s/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-dimmed-linux.png
diff --git a/...mponents/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-linux.png b/...mponents/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-linux.png
diff --git a/...nkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-tritanopia-linux.png b/...nkButton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-tritanopia-linux.png
diff --git a/...kButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-colorblind-linux.png b/...kButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-colorblind-linux.png
diff --git a/...ponents/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-linux.png b/...ponents/LinkButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-linux.png
diff --git a/...kButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-tritanopia-linux.png b/...kButton.test.ts-snapshots/LinkButton-Trailing-Visual-light-tritanopia-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png
diff --git a/...onents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png b/...onents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
diff --git a/...nents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png b/...nents/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png
diff --git a/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png
diff --git a/...snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/...snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png
diff --git a/...est.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png b/...est.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png
diff --git a/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
diff --git a/...st.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png b/...st.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png
diff --git a/...ponents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/...ponents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
diff --git a/...onents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/...onents/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png
diff --git a/...nts/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png b/...nts/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-colorblind-linux.png
diff --git a/...ponents/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png b/...ponents/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-dimmed-linux.png
diff --git a/...ots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png b/...ots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-linux.png
diff --git a/...nts/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png b/...nts/SelectPanel.test.ts-snapshots/SelectPanel-Default-dark-tritanopia-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png b/...ts/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-colorblind-linux.png
diff --git a/...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png b/...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png b/...ts/SelectPanel.test.ts-snapshots/SelectPanel-Default-light-tritanopia-linux.png
diff --git a/...ctPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-linux.png b/...ctPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-colorblind-linux.png
diff --git a/...SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-linux.png b/...SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-dimmed-linux.png
diff --git a/...onents/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-linux.png b/...onents/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-linux.png
diff --git a/...ctPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-linux.png b/...ctPanel.test.ts-snapshots/SelectPanel-External-Anchor-dark-tritanopia-linux.png
diff --git a/...tPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-linux.png b/...tPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-colorblind-linux.png
diff --git a/...nents/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png b/...nents/SelectPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-linux.png
diff --git a/...tPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-linux.png b/...tPanel.test.ts-snapshots/SelectPanel-External-Anchor-light-tritanopia-linux.png
diff --git a/...s-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-colorblind-linux.png b/...s-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-colorblind-linux.png
diff --git a/...st.ts-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-dimmed-linux.png b/...st.ts-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-dimmed-linux.png
diff --git a/...anel.test.ts-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-linux.png b/...anel.test.ts-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-linux.png
diff --git a/...s-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-tritanopia-linux.png b/...s-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-dark-tritanopia-linux.png
diff --git a/...-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-light-colorblind-linux.png b/...-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-light-colorblind-linux.png
diff --git a/...nel.test.ts-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-light-linux.png b/...nel.test.ts-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-light-linux.png
diff --git a/...-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-light-tritanopia-linux.png b/...-snapshots/SelectPanel-SelectPanel-Above-a-Tall-Body-light-tritanopia-linux.png
diff --git a/...ectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-colorblind-linux.png b/...ectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-colorblind-linux.png
diff --git a/.../SelectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-dimmed-linux.png b/.../SelectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-dimmed-linux.png
diff --git a/...apshots/SelectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-linux.png b/...apshots/SelectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-linux.png
diff --git a/...ectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-tritanopia-linux.png b/...ectPanel-SelectPanel-Initial-Height-Overflowing-Items-dark-tritanopia-linux.png
diff --git a/...ctPanel-SelectPanel-Initial-Height-Overflowing-Items-light-colorblind-linux.png b/...ctPanel-SelectPanel-Initial-Height-Overflowing-Items-light-colorblind-linux.png
diff --git a/...pshots/SelectPanel-SelectPanel-Initial-Height-Overflowing-Items-light-linux.png b/...pshots/SelectPanel-SelectPanel-Initial-Height-Overflowing-Items-light-linux.png
diff --git a/...ctPanel-SelectPanel-Initial-Height-Overflowing-Items-light-tritanopia-linux.png b/...ctPanel-SelectPanel-Initial-Height-Overflowing-Items-light-tritanopia-linux.png
diff --git a/...ctPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-colorblind-linux.png b/...ctPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-colorblind-linux.png
diff --git a/...SelectPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-dimmed-linux.png b/...SelectPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-dimmed-linux.png
diff --git a/...pshots/SelectPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-linux.png b/...pshots/SelectPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-linux.png
diff --git a/...ctPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-tritanopia-linux.png b/...ctPanel-SelectPanel-Initial-Height-Underflowing-Items-dark-tritanopia-linux.png
diff --git a/...tPanel-SelectPanel-Initial-Height-Underflowing-Items-light-colorblind-linux.png b/...tPanel-SelectPanel-Initial-Height-Underflowing-Items-light-colorblind-linux.png
diff --git a/...shots/SelectPanel-SelectPanel-Initial-Height-Underflowing-Items-light-linux.png b/...shots/SelectPanel-SelectPanel-Initial-Height-Underflowing-Items-light-linux.png
diff --git a/...tPanel-SelectPanel-Initial-Height-Underflowing-Items-light-tritanopia-linux.png b/...tPanel-SelectPanel-Initial-Height-Underflowing-Items-light-tritanopia-linux.png
diff --git a/...lectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-linux.png b/...lectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-colorblind-linux.png
diff --git a/...s/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-linux.png b/...s/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-dimmed-linux.png
diff --git a/...mponents/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-linux.png b/...mponents/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-linux.png
diff --git a/...lectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-linux.png b/...lectPanel.test.ts-snapshots/SelectPanel-Single-Select-dark-tritanopia-linux.png
diff --git a/...ectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-linux.png b/...ectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-colorblind-linux.png
diff --git a/...ponents/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-linux.png b/...ponents/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-linux.png
diff --git a/...ectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-linux.png b/...ectPanel.test.ts-snapshots/SelectPanel-Single-Select-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png b/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png
diff --git a/...derlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png b/...derlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png
diff --git a/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png b/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png b/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png
diff --git a/...erlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png b/...erlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png
diff --git a/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png b/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png
diff --git a/...neNav-UnderlineNav-Interactions-dark-Keep-selected-item-visible-vrt-1-linux.png b/...neNav-UnderlineNav-Interactions-dark-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...neNav-UnderlineNav-Interactions-dark-Keep-selected-item-visible-vrt-3-linux.png b/...neNav-UnderlineNav-Interactions-dark-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...neNav-UnderlineNav-Interactions-dark-Keep-selected-item-visible-vrt-4-linux.png b/...neNav-UnderlineNav-Interactions-dark-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...nderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-2-linux.png b/...nderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-2-linux.png
diff --git a/...nderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png b/...nderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png
diff --git a/...nderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-4-linux.png b/...nderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-4-linux.png
diff --git a/...lineNav-Interactions-dark-colorblind-Keep-selected-item-visible-vrt-1-linux.png b/...lineNav-Interactions-dark-colorblind-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...lineNav-Interactions-dark-colorblind-Keep-selected-item-visible-vrt-3-linux.png b/...lineNav-Interactions-dark-colorblind-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...lineNav-Interactions-dark-colorblind-Keep-selected-item-visible-vrt-4-linux.png b/...lineNav-Interactions-dark-colorblind-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-2-linux.png b/...-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-2-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png b/...-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-4-linux.png b/...-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-4-linux.png
diff --git a/...nderlineNav-Interactions-dark-dimmed-Keep-selected-item-visible-vrt-1-linux.png b/...nderlineNav-Interactions-dark-dimmed-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...nderlineNav-Interactions-dark-dimmed-Keep-selected-item-visible-vrt-3-linux.png b/...nderlineNav-Interactions-dark-dimmed-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...nderlineNav-Interactions-dark-dimmed-Keep-selected-item-visible-vrt-4-linux.png b/...nderlineNav-Interactions-dark-dimmed-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-2-linux.png b/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-2-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png b/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-4-linux.png b/...eNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-4-linux.png
diff --git a/...lineNav-Interactions-dark-tritanopia-Keep-selected-item-visible-vrt-1-linux.png b/...lineNav-Interactions-dark-tritanopia-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...lineNav-Interactions-dark-tritanopia-Keep-selected-item-visible-vrt-3-linux.png b/...lineNav-Interactions-dark-tritanopia-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...lineNav-Interactions-dark-tritanopia-Keep-selected-item-visible-vrt-4-linux.png b/...lineNav-Interactions-dark-tritanopia-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-2-linux.png b/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-2-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png b/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png
diff --git a/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-4-linux.png b/...-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-4-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-light-Keep-selected-item-visible-vrt-1-linux.png b/...eNav-UnderlineNav-Interactions-light-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-light-Keep-selected-item-visible-vrt-3-linux.png b/...eNav-UnderlineNav-Interactions-light-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...eNav-UnderlineNav-Interactions-light-Keep-selected-item-visible-vrt-4-linux.png b/...eNav-UnderlineNav-Interactions-light-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...derlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-2-linux.png b/...derlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-2-linux.png
diff --git a/...derlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png b/...derlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png
diff --git a/...derlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-4-linux.png b/...derlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-4-linux.png
diff --git a/...ineNav-Interactions-light-colorblind-Keep-selected-item-visible-vrt-1-linux.png b/...ineNav-Interactions-light-colorblind-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...ineNav-Interactions-light-colorblind-Keep-selected-item-visible-vrt-3-linux.png b/...ineNav-Interactions-light-colorblind-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...ineNav-Interactions-light-colorblind-Keep-selected-item-visible-vrt-4-linux.png b/...ineNav-Interactions-light-colorblind-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-2-linux.png b/...UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-2-linux.png
diff --git a/...UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png b/...UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png
diff --git a/...UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-4-linux.png b/...UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-4-linux.png
diff --git a/...ineNav-Interactions-light-tritanopia-Keep-selected-item-visible-vrt-1-linux.png b/...ineNav-Interactions-light-tritanopia-Keep-selected-item-visible-vrt-1-linux.png
diff --git a/...ineNav-Interactions-light-tritanopia-Keep-selected-item-visible-vrt-3-linux.png b/...ineNav-Interactions-light-tritanopia-Keep-selected-item-visible-vrt-3-linux.png
diff --git a/...ineNav-Interactions-light-tritanopia-Keep-selected-item-visible-vrt-4-linux.png b/...ineNav-Interactions-light-tritanopia-Keep-selected-item-visible-vrt-4-linux.png
diff --git a/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-2-linux.png b/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-2-linux.png
diff --git a/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png b/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png
diff --git a/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-4-linux.png b/...UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-4-linux.png
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -25,6 +25,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.activeBg',
         borderColor: 'btn.activeBorder',
       },
+      '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
+        color: 'fg.muted',
+      },
     },
     primary: {
       color: 'btn.primary.text',
@@ -234,7 +237,7 @@ export const getBaseStyles = (theme?: Theme) => ({
     },
   },
   '[data-component=ButtonCounter]': {
-    fontSize: '1',
+    fontSize: '0',
   },
   '&[data-component=IconButton]': {
     display: 'inline-grid',
@@ -295,6 +298,9 @@ export const getButtonStyles = (theme?: Theme) => {
       gridArea: 'text',
       lineHeight: 'calc(20/14)',
       whiteSpace: 'nowrap',
+      // remove flex in next major release
+      display: 'flex',
+      alignItems: 'center',
     },
     '[data-component="trailingVisual"]': {
       gridArea: 'trailingVisual',

diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -116,7 +116,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c1 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c1[data-component=IconButton] {
@@ -178,6 +178,14 @@ exports[`ActionMenu renders consistently 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c1 [data-component="trailingVisual"] {
@@ -223,6 +231,12 @@ exports[`ActionMenu renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
+.c1 [data-component="leadingVisual"],
+.c1 [data-component="trailingVisual"],
+.c1 [data-component="trailingAction"] {
+  color: #656d76;
+}
+
 @media (forced-colors:active) {
   .c1:focus {
     outline: solid 1px transparent;

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -164,6 +164,14 @@ exports[`Button renders consistently 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -209,6 +217,12 @@ exports[`Button renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: #656d76;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -329,7 +343,7 @@ exports[`Button respects block prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -391,6 +405,14 @@ exports[`Button respects block prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -436,6 +458,12 @@ exports[`Button respects block prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -562,7 +590,7 @@ exports[`Button respects the alignContent prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -624,6 +652,14 @@ exports[`Button respects the alignContent prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -669,6 +705,12 @@ exports[`Button respects the alignContent prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -794,7 +836,7 @@ exports[`Button respects the large size prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -856,6 +898,14 @@ exports[`Button respects the large size prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -901,6 +951,12 @@ exports[`Button respects the large size prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -1027,7 +1083,7 @@ exports[`Button respects the small size prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -1089,6 +1145,14 @@ exports[`Button respects the small size prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1134,6 +1198,12 @@ exports[`Button respects the small size prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -1263,7 +1333,7 @@ exports[`Button styles danger button appropriately 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
   color: btn.danger.counterFg;
   background-color: btn.danger.counterBg;
 }
@@ -1327,6 +1397,14 @@ exports[`Button styles danger button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1511,7 +1589,7 @@ exports[`Button styles invisible button appropriately 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -1574,6 +1652,14 @@ exports[`Button styles invisible button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1764,7 +1850,7 @@ exports[`Button styles primary button appropriately 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
   background-color: btn.primary.counterBg;
   color: btn.primary.text;
 }
@@ -1828,6 +1914,14 @@ exports[`Button styles primary button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {