Add ::selection background color token (#806)

* new selection token * Create ten-pandas-care.md * github-actions[bot] Regenerated snapshots --------- Co-authored-by: langermank <[email protected]>
primer · Feb 16, 2024 · 7016323 · 7016323
1 parent 4fb40ff
commit 7016323
Show file tree

Hide file tree

Showing 143 changed files with 143 additions and 34 deletions.
diff --git a/.changeset/ten-pandas-care.md b/.changeset/ten-pandas-care.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add `::selection` background color token
diff --git a/...olor-functional-tables--background-all-themes-dark-colorblind-theme-1-linux.png b/...olor-functional-tables--background-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...r-functional-tables--background-all-themes-dark-high-contrast-theme-1-linux.png b/...r-functional-tables--background-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...storybook-color-functional-tables--background-all-themes-dark-theme-1-linux.png b/...storybook-color-functional-tables--background-all-themes-dark-theme-1-linux.png
diff --git a/...olor-functional-tables--background-all-themes-dark-tritanopia-theme-1-linux.png b/...olor-functional-tables--background-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...lor-functional-tables--background-all-themes-light-colorblind-theme-1-linux.png b/...lor-functional-tables--background-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...-functional-tables--background-all-themes-light-high-contrast-theme-1-linux.png b/...-functional-tables--background-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...torybook-color-functional-tables--background-all-themes-light-theme-1-linux.png b/...torybook-color-functional-tables--background-all-themes-light-theme-1-linux.png
diff --git a/...lor-functional-tables--background-all-themes-light-tritanopia-theme-1-linux.png b/...lor-functional-tables--background-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-tables--border-all-themes-dark-colorblind-theme-1-linux.png b/...ok-color-functional-tables--border-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...color-functional-tables--border-all-themes-dark-high-contrast-theme-1-linux.png b/...color-functional-tables--border-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-tables--border-all-themes-dark-theme-1-linux.png b/...ots/storybook-color-functional-tables--border-all-themes-dark-theme-1-linux.png
diff --git a/...ok-color-functional-tables--border-all-themes-dark-tritanopia-theme-1-linux.png b/...ok-color-functional-tables--border-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...k-color-functional-tables--border-all-themes-light-colorblind-theme-1-linux.png b/...k-color-functional-tables--border-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...olor-functional-tables--border-all-themes-light-high-contrast-theme-1-linux.png b/...olor-functional-tables--border-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-color-functional-tables--border-all-themes-light-theme-1-linux.png b/...ts/storybook-color-functional-tables--border-all-themes-light-theme-1-linux.png
diff --git a/...k-color-functional-tables--border-all-themes-light-tritanopia-theme-1-linux.png b/...k-color-functional-tables--border-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...olor-functional-tables--foreground-all-themes-dark-colorblind-theme-1-linux.png b/...olor-functional-tables--foreground-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...r-functional-tables--foreground-all-themes-dark-high-contrast-theme-1-linux.png b/...r-functional-tables--foreground-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...storybook-color-functional-tables--foreground-all-themes-dark-theme-1-linux.png b/...storybook-color-functional-tables--foreground-all-themes-dark-theme-1-linux.png
diff --git a/...olor-functional-tables--foreground-all-themes-dark-tritanopia-theme-1-linux.png b/...olor-functional-tables--foreground-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...lor-functional-tables--foreground-all-themes-light-colorblind-theme-1-linux.png b/...lor-functional-tables--foreground-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...-functional-tables--foreground-all-themes-light-high-contrast-theme-1-linux.png b/...-functional-tables--foreground-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...torybook-color-functional-tables--foreground-all-themes-light-theme-1-linux.png b/...torybook-color-functional-tables--foreground-all-themes-light-theme-1-linux.png
diff --git a/...lor-functional-tables--foreground-all-themes-light-tritanopia-theme-1-linux.png b/...lor-functional-tables--foreground-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png b/...ok-color-functional-tables--shadow-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png b/...color-functional-tables--shadow-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png b/...ots/storybook-color-functional-tables--shadow-all-themes-dark-theme-1-linux.png
diff --git a/...ok-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png b/...ok-color-functional-tables--shadow-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...k-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png b/...k-color-functional-tables--shadow-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...olor-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png b/...olor-functional-tables--shadow-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png b/...ts/storybook-color-functional-tables--shadow-all-themes-light-theme-1-linux.png
diff --git a/...k-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png b/...k-color-functional-tables--shadow-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--avatar-all-themes-dark-colorblind-theme-1-linux.png b/...s/storybook-color-patterns--avatar-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...torybook-color-patterns--avatar-all-themes-dark-high-contrast-theme-1-linux.png b/...torybook-color-patterns--avatar-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--avatar-all-themes-dark-theme-1-linux.png b/...ts-snapshots/storybook-color-patterns--avatar-all-themes-dark-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--avatar-all-themes-dark-tritanopia-theme-1-linux.png b/...s/storybook-color-patterns--avatar-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--avatar-all-themes-light-colorblind-theme-1-linux.png b/.../storybook-color-patterns--avatar-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--avatar-all-themes-light-high-contrast-theme-1-linux.png b/...orybook-color-patterns--avatar-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--avatar-all-themes-light-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--avatar-all-themes-light-theme-1-linux.png
diff --git a/.../storybook-color-patterns--avatar-all-themes-light-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--avatar-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--button-all-themes-dark-colorblind-theme-1-linux.png b/...s/storybook-color-patterns--button-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...torybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png b/...torybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--button-all-themes-dark-theme-1-linux.png b/...ts-snapshots/storybook-color-patterns--button-all-themes-dark-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--button-all-themes-dark-tritanopia-theme-1-linux.png b/...s/storybook-color-patterns--button-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--button-all-themes-light-colorblind-theme-1-linux.png b/.../storybook-color-patterns--button-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png b/...orybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--button-all-themes-light-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--button-all-themes-light-theme-1-linux.png
diff --git a/.../storybook-color-patterns--button-all-themes-light-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--button-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--control-all-themes-dark-colorblind-theme-1-linux.png b/.../storybook-color-patterns--control-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--control-all-themes-dark-high-contrast-theme-1-linux.png b/...orybook-color-patterns--control-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--control-all-themes-dark-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--control-all-themes-dark-theme-1-linux.png
diff --git a/.../storybook-color-patterns--control-all-themes-dark-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--control-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...storybook-color-patterns--control-all-themes-light-colorblind-theme-1-linux.png b/...storybook-color-patterns--control-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...rybook-color-patterns--control-all-themes-light-high-contrast-theme-1-linux.png b/...rybook-color-patterns--control-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...-snapshots/storybook-color-patterns--control-all-themes-light-theme-1-linux.png b/...-snapshots/storybook-color-patterns--control-all-themes-light-theme-1-linux.png
diff --git a/...storybook-color-patterns--control-all-themes-light-tritanopia-theme-1-linux.png b/...storybook-color-patterns--control-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--counter-all-themes-dark-colorblind-theme-1-linux.png b/.../storybook-color-patterns--counter-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--counter-all-themes-dark-high-contrast-theme-1-linux.png b/...orybook-color-patterns--counter-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--counter-all-themes-dark-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--counter-all-themes-dark-theme-1-linux.png
diff --git a/.../storybook-color-patterns--counter-all-themes-dark-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--counter-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...storybook-color-patterns--counter-all-themes-light-colorblind-theme-1-linux.png b/...storybook-color-patterns--counter-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...rybook-color-patterns--counter-all-themes-light-high-contrast-theme-1-linux.png b/...rybook-color-patterns--counter-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...-snapshots/storybook-color-patterns--counter-all-themes-light-theme-1-linux.png b/...-snapshots/storybook-color-patterns--counter-all-themes-light-theme-1-linux.png
diff --git a/...storybook-color-patterns--counter-all-themes-light-tritanopia-theme-1-linux.png b/...storybook-color-patterns--counter-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ts/storybook-color-patterns--focus-all-themes-dark-colorblind-theme-1-linux.png b/...ts/storybook-color-patterns--focus-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...storybook-color-patterns--focus-all-themes-dark-high-contrast-theme-1-linux.png b/...storybook-color-patterns--focus-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--focus-all-themes-dark-theme-1-linux.png b/....ts-snapshots/storybook-color-patterns--focus-all-themes-dark-theme-1-linux.png
diff --git a/...ts/storybook-color-patterns--focus-all-themes-dark-tritanopia-theme-1-linux.png b/...ts/storybook-color-patterns--focus-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--focus-all-themes-light-colorblind-theme-1-linux.png b/...s/storybook-color-patterns--focus-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...torybook-color-patterns--focus-all-themes-light-high-contrast-theme-1-linux.png b/...torybook-color-patterns--focus-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--focus-all-themes-light-theme-1-linux.png b/...ts-snapshots/storybook-color-patterns--focus-all-themes-light-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--focus-all-themes-light-tritanopia-theme-1-linux.png b/...s/storybook-color-patterns--focus-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--header-all-themes-dark-colorblind-theme-1-linux.png b/...s/storybook-color-patterns--header-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...torybook-color-patterns--header-all-themes-dark-high-contrast-theme-1-linux.png b/...torybook-color-patterns--header-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--header-all-themes-dark-theme-1-linux.png b/...ts-snapshots/storybook-color-patterns--header-all-themes-dark-theme-1-linux.png
diff --git a/...s/storybook-color-patterns--header-all-themes-dark-tritanopia-theme-1-linux.png b/...s/storybook-color-patterns--header-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--header-all-themes-light-colorblind-theme-1-linux.png b/.../storybook-color-patterns--header-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--header-all-themes-light-high-contrast-theme-1-linux.png b/...orybook-color-patterns--header-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--header-all-themes-light-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--header-all-themes-light-theme-1-linux.png
diff --git a/.../storybook-color-patterns--header-all-themes-light-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--header-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ots/storybook-color-patterns--menu-all-themes-dark-colorblind-theme-1-linux.png b/...ots/storybook-color-patterns--menu-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/.../storybook-color-patterns--menu-all-themes-dark-high-contrast-theme-1-linux.png b/.../storybook-color-patterns--menu-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--menu-all-themes-dark-theme-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--menu-all-themes-dark-theme-1-linux.png
diff --git a/...ots/storybook-color-patterns--menu-all-themes-dark-tritanopia-theme-1-linux.png b/...ots/storybook-color-patterns--menu-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ts/storybook-color-patterns--menu-all-themes-light-colorblind-theme-1-linux.png b/...ts/storybook-color-patterns--menu-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...storybook-color-patterns--menu-all-themes-light-high-contrast-theme-1-linux.png b/...storybook-color-patterns--menu-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--menu-all-themes-light-theme-1-linux.png b/....ts-snapshots/storybook-color-patterns--menu-all-themes-light-theme-1-linux.png
diff --git a/...ts/storybook-color-patterns--menu-all-themes-light-tritanopia-theme-1-linux.png b/...ts/storybook-color-patterns--menu-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/.../storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png b/.../storybook-color-patterns--overlay-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...orybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png b/...orybook-color-patterns--overlay-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...s-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png b/...s-snapshots/storybook-color-patterns--overlay-all-themes-dark-theme-1-linux.png
diff --git a/.../storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png b/.../storybook-color-patterns--overlay-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png b/...storybook-color-patterns--overlay-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...rybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png b/...rybook-color-patterns--overlay-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png b/...-snapshots/storybook-color-patterns--overlay-all-themes-light-theme-1-linux.png
diff --git a/...storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png b/...storybook-color-patterns--overlay-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...rybook-color-patterns--select-menu-all-themes-dark-colorblind-theme-1-linux.png b/...rybook-color-patterns--select-menu-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ook-color-patterns--select-menu-all-themes-dark-high-contrast-theme-1-linux.png b/...ook-color-patterns--select-menu-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...apshots/storybook-color-patterns--select-menu-all-themes-dark-theme-1-linux.png b/...apshots/storybook-color-patterns--select-menu-all-themes-dark-theme-1-linux.png
diff --git a/...rybook-color-patterns--select-menu-all-themes-dark-tritanopia-theme-1-linux.png b/...rybook-color-patterns--select-menu-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ybook-color-patterns--select-menu-all-themes-light-colorblind-theme-1-linux.png b/...ybook-color-patterns--select-menu-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...ok-color-patterns--select-menu-all-themes-light-high-contrast-theme-1-linux.png b/...ok-color-patterns--select-menu-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...pshots/storybook-color-patterns--select-menu-all-themes-light-theme-1-linux.png b/...pshots/storybook-color-patterns--select-menu-all-themes-light-theme-1-linux.png
diff --git a/...ybook-color-patterns--select-menu-all-themes-light-tritanopia-theme-1-linux.png b/...ybook-color-patterns--select-menu-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...torybook-color-patterns--selection-all-themes-dark-colorblind-theme-1-linux.png b/...torybook-color-patterns--selection-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ybook-color-patterns--selection-all-themes-dark-high-contrast-theme-1-linux.png b/...ybook-color-patterns--selection-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...snapshots/storybook-color-patterns--selection-all-themes-dark-theme-1-linux.png b/...snapshots/storybook-color-patterns--selection-all-themes-dark-theme-1-linux.png
diff --git a/...torybook-color-patterns--selection-all-themes-dark-tritanopia-theme-1-linux.png b/...torybook-color-patterns--selection-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...orybook-color-patterns--selection-all-themes-light-colorblind-theme-1-linux.png b/...orybook-color-patterns--selection-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...book-color-patterns--selection-all-themes-light-high-contrast-theme-1-linux.png b/...book-color-patterns--selection-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...napshots/storybook-color-patterns--selection-all-themes-light-theme-1-linux.png b/...napshots/storybook-color-patterns--selection-all-themes-light-theme-1-linux.png
diff --git a/...orybook-color-patterns--selection-all-themes-light-tritanopia-theme-1-linux.png b/...orybook-color-patterns--selection-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...storybook-color-patterns--side-nav-all-themes-dark-colorblind-theme-1-linux.png b/...storybook-color-patterns--side-nav-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...rybook-color-patterns--side-nav-all-themes-dark-high-contrast-theme-1-linux.png b/...rybook-color-patterns--side-nav-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...-snapshots/storybook-color-patterns--side-nav-all-themes-dark-theme-1-linux.png b/...-snapshots/storybook-color-patterns--side-nav-all-themes-dark-theme-1-linux.png
diff --git a/...storybook-color-patterns--side-nav-all-themes-dark-tritanopia-theme-1-linux.png b/...storybook-color-patterns--side-nav-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...torybook-color-patterns--side-nav-all-themes-light-colorblind-theme-1-linux.png b/...torybook-color-patterns--side-nav-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...ybook-color-patterns--side-nav-all-themes-light-high-contrast-theme-1-linux.png b/...ybook-color-patterns--side-nav-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...snapshots/storybook-color-patterns--side-nav-all-themes-light-theme-1-linux.png b/...snapshots/storybook-color-patterns--side-nav-all-themes-light-theme-1-linux.png
diff --git a/...torybook-color-patterns--side-nav-all-themes-light-tritanopia-theme-1-linux.png b/...torybook-color-patterns--side-nav-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ook-color-patterns--timeline-badge-all-themes-dark-colorblind-theme-1-linux.png b/...ook-color-patterns--timeline-badge-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...-color-patterns--timeline-badge-all-themes-dark-high-contrast-theme-1-linux.png b/...-color-patterns--timeline-badge-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...hots/storybook-color-patterns--timeline-badge-all-themes-dark-theme-1-linux.png b/...hots/storybook-color-patterns--timeline-badge-all-themes-dark-theme-1-linux.png
diff --git a/...ook-color-patterns--timeline-badge-all-themes-dark-tritanopia-theme-1-linux.png b/...ook-color-patterns--timeline-badge-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ok-color-patterns--timeline-badge-all-themes-light-colorblind-theme-1-linux.png b/...ok-color-patterns--timeline-badge-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...color-patterns--timeline-badge-all-themes-light-high-contrast-theme-1-linux.png b/...color-patterns--timeline-badge-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-patterns--timeline-badge-all-themes-light-theme-1-linux.png b/...ots/storybook-color-patterns--timeline-badge-all-themes-light-theme-1-linux.png
diff --git a/...ok-color-patterns--timeline-badge-all-themes-light-tritanopia-theme-1-linux.png b/...ok-color-patterns--timeline-badge-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...book-color-patterns--underline-nav-all-themes-dark-colorblind-theme-1-linux.png b/...book-color-patterns--underline-nav-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...k-color-patterns--underline-nav-all-themes-dark-high-contrast-theme-1-linux.png b/...k-color-patterns--underline-nav-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...shots/storybook-color-patterns--underline-nav-all-themes-dark-theme-1-linux.png b/...shots/storybook-color-patterns--underline-nav-all-themes-dark-theme-1-linux.png
diff --git a/...book-color-patterns--underline-nav-all-themes-dark-tritanopia-theme-1-linux.png b/...book-color-patterns--underline-nav-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ook-color-patterns--underline-nav-all-themes-light-colorblind-theme-1-linux.png b/...ook-color-patterns--underline-nav-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...-color-patterns--underline-nav-all-themes-light-high-contrast-theme-1-linux.png b/...-color-patterns--underline-nav-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...hots/storybook-color-patterns--underline-nav-all-themes-light-theme-1-linux.png b/...hots/storybook-color-patterns--underline-nav-all-themes-light-theme-1-linux.png
diff --git a/...ook-color-patterns--underline-nav-all-themes-light-tritanopia-theme-1-linux.png b/...ook-color-patterns--underline-nav-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx b/docs/storybook/stories/Color/Functional/FunctionalTables.stories.tsx
@@ -26,9 +26,9 @@ export const Foreground = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Foreground
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -72,9 +72,9 @@ export const Background = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Background
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -118,9 +118,9 @@ export const Border = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Border
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -164,9 +164,9 @@ export const Shadow = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Shadow
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}

diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
@@ -27,9 +27,9 @@ export const Avatar = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Avatar
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -99,9 +99,9 @@ export const Control = () => {
   }))
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Control
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -152,9 +152,9 @@ export const Counter = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Counter
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -217,9 +217,9 @@ export const Button = () => {
   }))
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Button
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -270,9 +270,9 @@ export const Focus = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Focus
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -316,9 +316,9 @@ export const Header = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Header
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -369,9 +369,9 @@ export const Menu = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Menu
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -422,9 +422,9 @@ export const Overlay = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         Overlay
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -475,9 +475,9 @@ export const SelectMenu = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         SelectMenu
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -528,9 +528,9 @@ export const SideNav = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         SideNav
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -581,9 +581,9 @@ export const TimelineBadge = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         TimelineBadge
-      </Table.Title>
+      </h1>
       <DataTable
         aria-labelledby="pattern"
         data={data}
@@ -634,11 +634,11 @@ export const UnderlineNav = () => {
   })
   return (
     <Table.Container>
-      <Table.Title as="h1" id="pattern">
+      <h1 className="sr-only" id="table-heading">
         UnderlineNav
-      </Table.Title>
+      </h1>
       <DataTable
-        aria-labelledby="pattern"
+        aria-labelledby="table-heading"
         data={data}
         columns={[
           {
@@ -677,3 +677,49 @@ export const UnderlineNav = () => {
     </Table.Container>
   )
 }
+
+export const Selection = () => {
+  const data = getTokensByName(colorTokens, 'selection').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+  return (
+    <Table.Container>
+      <h1 className="sr-only" id="selection">
+        Text selection
+      </h1>
+      <DataTable
+        aria-labelledby="selection"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch selectionColor={row.name.includes('bgColor') ? row.name : undefined} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.value}</p>
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}
diff --git a/docs/storybook/stories/StorybookComponents/ColorTokenSwatch/ColorTokenSwatch.css b/docs/storybook/stories/StorybookComponents/ColorTokenSwatch/ColorTokenSwatch.css
@@ -42,3 +42,22 @@
   outline-style: solid;
   border-radius: var(--borderRadius-small);
 }
+
+.ColorTokenSwatch-selection {
+  font: var(--text-codeBlock-shorthand);
+  padding-inline: var(--base-size-8);
+  width: var(--base-size-20);
+  height: var(--base-size-20);
+  position: relative;
+  display: grid;
+  color: var(--fgColor-default);
+}
+
+.ColorTokenSwatch-selection::before {
+  content: '';
+  height: 100%;
+  width: 100%;
+  background: var(--selection-bgColor);
+  position: absolute;
+  border-radius: var(--borderRadius-small);
+}
diff --git a/docs/storybook/stories/StorybookComponents/ColorTokenSwatch/ColorTokenSwatch.tsx b/docs/storybook/stories/StorybookComponents/ColorTokenSwatch/ColorTokenSwatch.tsx
@@ -7,9 +7,17 @@ export type ColorTokenSwatchProps = {
   bgColor?: string
   shadowColor?: string
   outlineColor?: string
+  selectionColor?: string
 }
 
-export function ColorTokenSwatch({textColor, borderColor, bgColor, shadowColor, outlineColor}: ColorTokenSwatchProps) {
+export function ColorTokenSwatch({
+  textColor,
+  borderColor,
+  bgColor,
+  shadowColor,
+  outlineColor,
+  selectionColor,
+}: ColorTokenSwatchProps) {
   return (
     <>
       {textColor && (
@@ -23,6 +31,7 @@ export function ColorTokenSwatch({textColor, borderColor, bgColor, shadowColor,
       {outlineColor && (
         <div style={{outlineColor: `var(--${outlineColor})`}} className="ColorTokenSwatch-outline"></div>
       )}
+      {selectionColor && <div className="ColorTokenSwatch-selection">Aa</div>}
     </>
   )
 }

diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -2043,4 +2043,19 @@
       },
     },
   },
+  selection: {
+    bgColor: {
+      $value: '{fgColor.link.@}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+      alpha: 0.2,
+    },
+  },
 }
diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5
@@ -2041,4 +2041,19 @@
       },
     },
   },
+  selection: {
+    bgColor: {
+      $value: '{fgColor.link.@}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+      alpha: 0.1,
+    },
+  },
 }