Support inverse color tokens for Toast and Tooltip (#682)

* draft * testing a new naming convention * test using data attributes component level instead * use overlay pattern tokens * build is broken * fix token * test syntax * added changeset & fix for missing value * fix missing @ in reference * fix missing colors in overrides * fix wrong references * update colors * add size tokens * github-actions[bot] Regenerated snapshots * Update witty-countries-ring.md * fix overlay tokens * fix disabled color change * github-actions[bot] Regenerated snapshots * Update witty-countries-ring.md * use inverse instead of emphasis * github-actions[bot] Regenerated snapshots * Update witty-countries-ring.md * fix disabled colors * github-actions[bot] Regenerated snapshots * Update witty-countries-ring.md --------- Co-authored-by: Lukas Oppermann <[email protected]> Co-authored-by: langermank <[email protected]>
primer · Aug 21, 2023 · a082224 · a082224
1 parent 5ffe790
commit a082224
Show file tree

Hide file tree

Showing 133 changed files with 1,287 additions and 203 deletions.
diff --git a/.changeset/witty-countries-ring.md b/.changeset/witty-countries-ring.md
@@ -0,0 +1,9 @@
+---
+'@primer/primitives': minor
+---
+
+- Add `inverse` color options for semantic color tokens to support Toast
+- Update the default `emphasis` background color to `white` in dark mode
+- Add `overlay` size tokens
+
+
diff --git a/...torybook-color-functional-all--all-all-themes-dark-colorblind-theme-1-linux.png b/...torybook-color-functional-all--all-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png b/...ybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...snapshots/storybook-color-functional-all--all-all-themes-dark-theme-1-linux.png b/...snapshots/storybook-color-functional-all--all-all-themes-dark-theme-1-linux.png
diff --git a/...torybook-color-functional-all--all-all-themes-dark-tritanopia-theme-1-linux.png b/...torybook-color-functional-all--all-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...orybook-color-functional-all--all-all-themes-light-colorblind-theme-1-linux.png b/...orybook-color-functional-all--all-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...book-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png b/...book-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...napshots/storybook-color-functional-all--all-all-themes-light-theme-1-linux.png b/...napshots/storybook-color-functional-all--all-all-themes-light-theme-1-linux.png
diff --git a/...orybook-color-functional-all--all-all-themes-light-tritanopia-theme-1-linux.png b/...orybook-color-functional-all--all-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...-functional-background--background-all-themes-dark-colorblind-theme-1-linux.png b/...-functional-background--background-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...nctional-background--background-all-themes-dark-high-contrast-theme-1-linux.png b/...nctional-background--background-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ybook-color-functional-background--background-all-themes-dark-theme-1-linux.png b/...ybook-color-functional-background--background-all-themes-dark-theme-1-linux.png
diff --git a/...-functional-background--background-all-themes-dark-tritanopia-theme-1-linux.png b/...-functional-background--background-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...functional-background--background-all-themes-light-colorblind-theme-1-linux.png b/...functional-background--background-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...ctional-background--background-all-themes-light-high-contrast-theme-1-linux.png b/...ctional-background--background-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...book-color-functional-background--background-all-themes-light-theme-1-linux.png b/...book-color-functional-background--background-all-themes-light-theme-1-linux.png
diff --git a/...functional-background--background-all-themes-light-tritanopia-theme-1-linux.png b/...functional-background--background-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...-functional-foreground--foreground-all-themes-dark-colorblind-theme-1-linux.png b/...-functional-foreground--foreground-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...nctional-foreground--foreground-all-themes-dark-high-contrast-theme-1-linux.png b/...nctional-foreground--foreground-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ybook-color-functional-foreground--foreground-all-themes-dark-theme-1-linux.png b/...ybook-color-functional-foreground--foreground-all-themes-dark-theme-1-linux.png
diff --git a/...-functional-foreground--foreground-all-themes-dark-tritanopia-theme-1-linux.png b/...-functional-foreground--foreground-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...functional-foreground--foreground-all-themes-light-colorblind-theme-1-linux.png b/...functional-foreground--foreground-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...ctional-foreground--foreground-all-themes-light-high-contrast-theme-1-linux.png b/...ctional-foreground--foreground-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...book-color-functional-foreground--foreground-all-themes-light-theme-1-linux.png b/...book-color-functional-foreground--foreground-all-themes-light-theme-1-linux.png
diff --git a/...functional-foreground--foreground-all-themes-light-tritanopia-theme-1-linux.png b/...functional-foreground--foreground-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ook-color-functional-roles--accent-all-themes-dark-colorblind-theme-1-linux.png b/...ook-color-functional-roles--accent-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...-color-functional-roles--accent-all-themes-dark-high-contrast-theme-1-linux.png b/...-color-functional-roles--accent-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...hots/storybook-color-functional-roles--accent-all-themes-dark-theme-1-linux.png b/...hots/storybook-color-functional-roles--accent-all-themes-dark-theme-1-linux.png
diff --git a/...ook-color-functional-roles--accent-all-themes-dark-tritanopia-theme-1-linux.png b/...ook-color-functional-roles--accent-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-roles--accent-all-themes-light-colorblind-theme-1-linux.png b/...ok-color-functional-roles--accent-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...color-functional-roles--accent-all-themes-light-high-contrast-theme-1-linux.png b/...color-functional-roles--accent-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--accent-all-themes-light-theme-1-linux.png b/...ots/storybook-color-functional-roles--accent-all-themes-light-theme-1-linux.png
diff --git a/...ok-color-functional-roles--accent-all-themes-light-tritanopia-theme-1-linux.png b/...ok-color-functional-roles--accent-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...-color-functional-roles--attention-all-themes-dark-colorblind-theme-1-linux.png b/...-color-functional-roles--attention-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...lor-functional-roles--attention-all-themes-dark-high-contrast-theme-1-linux.png b/...lor-functional-roles--attention-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...s/storybook-color-functional-roles--attention-all-themes-dark-theme-1-linux.png b/...s/storybook-color-functional-roles--attention-all-themes-dark-theme-1-linux.png
diff --git a/...-color-functional-roles--attention-all-themes-dark-tritanopia-theme-1-linux.png b/...-color-functional-roles--attention-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...color-functional-roles--attention-all-themes-light-colorblind-theme-1-linux.png b/...color-functional-roles--attention-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...or-functional-roles--attention-all-themes-light-high-contrast-theme-1-linux.png b/...or-functional-roles--attention-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/.../storybook-color-functional-roles--attention-all-themes-light-theme-1-linux.png b/.../storybook-color-functional-roles--attention-all-themes-light-theme-1-linux.png
diff --git a/...color-functional-roles--attention-all-themes-light-tritanopia-theme-1-linux.png b/...color-functional-roles--attention-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ook-color-functional-roles--closed-all-themes-dark-colorblind-theme-1-linux.png b/...ook-color-functional-roles--closed-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...-color-functional-roles--closed-all-themes-dark-high-contrast-theme-1-linux.png b/...-color-functional-roles--closed-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...hots/storybook-color-functional-roles--closed-all-themes-dark-theme-1-linux.png b/...hots/storybook-color-functional-roles--closed-all-themes-dark-theme-1-linux.png
diff --git a/...ook-color-functional-roles--closed-all-themes-dark-tritanopia-theme-1-linux.png b/...ook-color-functional-roles--closed-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-roles--closed-all-themes-light-colorblind-theme-1-linux.png b/...ok-color-functional-roles--closed-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...color-functional-roles--closed-all-themes-light-high-contrast-theme-1-linux.png b/...color-functional-roles--closed-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--closed-all-themes-light-theme-1-linux.png b/...ots/storybook-color-functional-roles--closed-all-themes-light-theme-1-linux.png
diff --git a/...ok-color-functional-roles--closed-all-themes-light-tritanopia-theme-1-linux.png b/...ok-color-functional-roles--closed-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ook-color-functional-roles--danger-all-themes-dark-colorblind-theme-1-linux.png b/...ook-color-functional-roles--danger-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...-color-functional-roles--danger-all-themes-dark-high-contrast-theme-1-linux.png b/...-color-functional-roles--danger-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...hots/storybook-color-functional-roles--danger-all-themes-dark-theme-1-linux.png b/...hots/storybook-color-functional-roles--danger-all-themes-dark-theme-1-linux.png
diff --git a/...ook-color-functional-roles--danger-all-themes-dark-tritanopia-theme-1-linux.png b/...ook-color-functional-roles--danger-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-roles--danger-all-themes-light-colorblind-theme-1-linux.png b/...ok-color-functional-roles--danger-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...color-functional-roles--danger-all-themes-light-high-contrast-theme-1-linux.png b/...color-functional-roles--danger-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--danger-all-themes-light-theme-1-linux.png b/...ots/storybook-color-functional-roles--danger-all-themes-light-theme-1-linux.png
diff --git a/...ok-color-functional-roles--danger-all-themes-light-tritanopia-theme-1-linux.png b/...ok-color-functional-roles--danger-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ybook-color-functional-roles--done-all-themes-dark-colorblind-theme-1-linux.png b/...ybook-color-functional-roles--done-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ok-color-functional-roles--done-all-themes-dark-high-contrast-theme-1-linux.png b/...ok-color-functional-roles--done-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--done-all-themes-dark-theme-1-linux.png b/...pshots/storybook-color-functional-roles--done-all-themes-dark-theme-1-linux.png
diff --git a/...ybook-color-functional-roles--done-all-themes-dark-tritanopia-theme-1-linux.png b/...ybook-color-functional-roles--done-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...book-color-functional-roles--done-all-themes-light-colorblind-theme-1-linux.png b/...book-color-functional-roles--done-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...k-color-functional-roles--done-all-themes-light-high-contrast-theme-1-linux.png b/...k-color-functional-roles--done-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...shots/storybook-color-functional-roles--done-all-themes-light-theme-1-linux.png b/...shots/storybook-color-functional-roles--done-all-themes-light-theme-1-linux.png
diff --git a/...book-color-functional-roles--done-all-themes-light-tritanopia-theme-1-linux.png b/...book-color-functional-roles--done-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-roles--neutral-all-themes-dark-colorblind-theme-1-linux.png b/...ok-color-functional-roles--neutral-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...color-functional-roles--neutral-all-themes-dark-high-contrast-theme-1-linux.png b/...color-functional-roles--neutral-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--neutral-all-themes-dark-theme-1-linux.png b/...ots/storybook-color-functional-roles--neutral-all-themes-dark-theme-1-linux.png
diff --git a/...ok-color-functional-roles--neutral-all-themes-dark-tritanopia-theme-1-linux.png b/...ok-color-functional-roles--neutral-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...k-color-functional-roles--neutral-all-themes-light-colorblind-theme-1-linux.png b/...k-color-functional-roles--neutral-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...olor-functional-roles--neutral-all-themes-light-high-contrast-theme-1-linux.png b/...olor-functional-roles--neutral-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-color-functional-roles--neutral-all-themes-light-theme-1-linux.png b/...ts/storybook-color-functional-roles--neutral-all-themes-light-theme-1-linux.png
diff --git a/...k-color-functional-roles--neutral-all-themes-light-tritanopia-theme-1-linux.png b/...k-color-functional-roles--neutral-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ybook-color-functional-roles--open-all-themes-dark-colorblind-theme-1-linux.png b/...ybook-color-functional-roles--open-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ok-color-functional-roles--open-all-themes-dark-high-contrast-theme-1-linux.png b/...ok-color-functional-roles--open-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--open-all-themes-dark-theme-1-linux.png b/...pshots/storybook-color-functional-roles--open-all-themes-dark-theme-1-linux.png
diff --git a/...ybook-color-functional-roles--open-all-themes-dark-tritanopia-theme-1-linux.png b/...ybook-color-functional-roles--open-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...book-color-functional-roles--open-all-themes-light-colorblind-theme-1-linux.png b/...book-color-functional-roles--open-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...k-color-functional-roles--open-all-themes-light-high-contrast-theme-1-linux.png b/...k-color-functional-roles--open-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...shots/storybook-color-functional-roles--open-all-themes-light-theme-1-linux.png b/...shots/storybook-color-functional-roles--open-all-themes-light-theme-1-linux.png
diff --git a/...book-color-functional-roles--open-all-themes-light-tritanopia-theme-1-linux.png b/...book-color-functional-roles--open-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ook-color-functional-roles--severe-all-themes-dark-colorblind-theme-1-linux.png b/...ook-color-functional-roles--severe-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...-color-functional-roles--severe-all-themes-dark-high-contrast-theme-1-linux.png b/...-color-functional-roles--severe-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...hots/storybook-color-functional-roles--severe-all-themes-dark-theme-1-linux.png b/...hots/storybook-color-functional-roles--severe-all-themes-dark-theme-1-linux.png
diff --git a/...ook-color-functional-roles--severe-all-themes-dark-tritanopia-theme-1-linux.png b/...ook-color-functional-roles--severe-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-roles--severe-all-themes-light-colorblind-theme-1-linux.png b/...ok-color-functional-roles--severe-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...color-functional-roles--severe-all-themes-light-high-contrast-theme-1-linux.png b/...color-functional-roles--severe-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--severe-all-themes-light-theme-1-linux.png b/...ots/storybook-color-functional-roles--severe-all-themes-light-theme-1-linux.png
diff --git a/...ok-color-functional-roles--severe-all-themes-light-tritanopia-theme-1-linux.png b/...ok-color-functional-roles--severe-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...k-color-functional-roles--sponsors-all-themes-dark-colorblind-theme-1-linux.png b/...k-color-functional-roles--sponsors-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...olor-functional-roles--sponsors-all-themes-dark-high-contrast-theme-1-linux.png b/...olor-functional-roles--sponsors-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-color-functional-roles--sponsors-all-themes-dark-theme-1-linux.png b/...ts/storybook-color-functional-roles--sponsors-all-themes-dark-theme-1-linux.png
diff --git a/...k-color-functional-roles--sponsors-all-themes-dark-tritanopia-theme-1-linux.png b/...k-color-functional-roles--sponsors-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...-color-functional-roles--sponsors-all-themes-light-colorblind-theme-1-linux.png b/...-color-functional-roles--sponsors-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...lor-functional-roles--sponsors-all-themes-light-high-contrast-theme-1-linux.png b/...lor-functional-roles--sponsors-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...s/storybook-color-functional-roles--sponsors-all-themes-light-theme-1-linux.png b/...s/storybook-color-functional-roles--sponsors-all-themes-light-theme-1-linux.png
diff --git a/...-color-functional-roles--sponsors-all-themes-light-tritanopia-theme-1-linux.png b/...-color-functional-roles--sponsors-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ok-color-functional-roles--success-all-themes-dark-colorblind-theme-1-linux.png b/...ok-color-functional-roles--success-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...color-functional-roles--success-all-themes-dark-high-contrast-theme-1-linux.png b/...color-functional-roles--success-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--success-all-themes-dark-theme-1-linux.png b/...ots/storybook-color-functional-roles--success-all-themes-dark-theme-1-linux.png
diff --git a/...ok-color-functional-roles--success-all-themes-dark-tritanopia-theme-1-linux.png b/...ok-color-functional-roles--success-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...k-color-functional-roles--success-all-themes-light-colorblind-theme-1-linux.png b/...k-color-functional-roles--success-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...olor-functional-roles--success-all-themes-light-high-contrast-theme-1-linux.png b/...olor-functional-roles--success-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...ts/storybook-color-functional-roles--success-all-themes-light-theme-1-linux.png b/...ts/storybook-color-functional-roles--success-all-themes-light-theme-1-linux.png
diff --git a/...k-color-functional-roles--success-all-themes-light-tritanopia-theme-1-linux.png b/...k-color-functional-roles--success-all-themes-light-tritanopia-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/...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/...ybook-demos-toast--toast-prototype-all-themes-dark-colorblind-theme-1-linux.png b/...ybook-demos-toast--toast-prototype-all-themes-dark-colorblind-theme-1-linux.png
diff --git a/...ok-demos-toast--toast-prototype-all-themes-dark-high-contrast-theme-1-linux.png b/...ok-demos-toast--toast-prototype-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...pshots/storybook-demos-toast--toast-prototype-all-themes-dark-theme-1-linux.png b/...pshots/storybook-demos-toast--toast-prototype-all-themes-dark-theme-1-linux.png
diff --git a/...ybook-demos-toast--toast-prototype-all-themes-dark-tritanopia-theme-1-linux.png b/...ybook-demos-toast--toast-prototype-all-themes-dark-tritanopia-theme-1-linux.png
diff --git a/...book-demos-toast--toast-prototype-all-themes-light-colorblind-theme-1-linux.png b/...book-demos-toast--toast-prototype-all-themes-light-colorblind-theme-1-linux.png
diff --git a/...k-demos-toast--toast-prototype-all-themes-light-high-contrast-theme-1-linux.png b/...k-demos-toast--toast-prototype-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/...shots/storybook-demos-toast--toast-prototype-all-themes-light-theme-1-linux.png b/...shots/storybook-demos-toast--toast-prototype-all-themes-light-theme-1-linux.png
diff --git a/...book-demos-toast--toast-prototype-all-themes-light-tritanopia-theme-1-linux.png b/...book-demos-toast--toast-prototype-all-themes-light-tritanopia-theme-1-linux.png
diff --git a/...ook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png b/...ook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png
diff --git a/...ok-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png b/...ok-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png
diff --git a/docs/storybook/stories/Color/Functional/Background.stories.tsx b/docs/storybook/stories/Color/Functional/Background.stories.tsx
@@ -16,6 +16,7 @@ const bgColors = [
   'bgColor-disabled',
   'bgColor-emphasis',
   'bgColor-transparent',
+  'bgColor-inverse',
 ]
 
 export const Background = () => {

diff --git a/docs/storybook/stories/Color/Functional/Foreground.stories.tsx b/docs/storybook/stories/Color/Functional/Foreground.stories.tsx
@@ -9,7 +9,14 @@ export default {
   },
 }
 
-const fgColors = ['fgColor-default', 'fgColor-muted', 'fgColor-onEmphasis', 'fgColor-disabled', 'fgColor-link']
+const fgColors = [
+  'fgColor-default',
+  'fgColor-muted',
+  'fgColor-onEmphasis',
+  'fgColor-onInverse',
+  'fgColor-disabled',
+  'fgColor-link',
+]
 
 export const Foreground = () => {
   return (

diff --git a/docs/storybook/stories/Color/Functional/Roles.stories.tsx b/docs/storybook/stories/Color/Functional/Roles.stories.tsx
@@ -13,6 +13,7 @@ export const Neutral = () => {
   return (
     <>
       <ColorPreview color={'fgColor-neutral'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-neutral-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-neutral-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-neutral-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-neutral-muted'} borderColor canvasColor="bgColor-default" />
@@ -25,6 +26,7 @@ export const Accent = () => {
   return (
     <>
       <ColorPreview color={'fgColor-accent'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-accent-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-accent-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-accent-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-accent-muted'} borderColor canvasColor="bgColor-default" />
@@ -37,6 +39,7 @@ export const Success = () => {
   return (
     <>
       <ColorPreview color={'fgColor-success'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-success-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-success-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-success-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-success-muted'} borderColor canvasColor="bgColor-default" />
@@ -49,6 +52,7 @@ export const Attention = () => {
   return (
     <>
       <ColorPreview color={'fgColor-attention'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-attention-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-attention-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-attention-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-attention-muted'} borderColor canvasColor="bgColor-default" />
@@ -61,6 +65,7 @@ export const Severe = () => {
   return (
     <>
       <ColorPreview color={'fgColor-severe'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-severe-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-severe-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-severe-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-severe-muted'} borderColor canvasColor="bgColor-default" />
@@ -73,6 +78,7 @@ export const Danger = () => {
   return (
     <>
       <ColorPreview color={'fgColor-danger'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-danger-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-danger-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-danger-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-danger-muted'} borderColor canvasColor="bgColor-default" />
@@ -85,6 +91,7 @@ export const Open = () => {
   return (
     <>
       <ColorPreview color={'fgColor-open'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-open-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-open-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-open-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-open-muted'} borderColor canvasColor="bgColor-default" />
@@ -97,6 +104,7 @@ export const Closed = () => {
   return (
     <>
       <ColorPreview color={'fgColor-closed'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-closed-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-closed-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-closed-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-closed-muted'} borderColor canvasColor="bgColor-default" />
@@ -109,6 +117,7 @@ export const Done = () => {
   return (
     <>
       <ColorPreview color={'fgColor-done'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-done-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-done-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-done-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-done-muted'} borderColor canvasColor="bgColor-default" />
@@ -121,6 +130,7 @@ export const Sponsors = () => {
   return (
     <>
       <ColorPreview color={'fgColor-sponsors'} textColor canvasColor="bgColor-default" />
+      <ColorPreview color={'fgColor-sponsors-onInverse'} textColor canvasColor="bgColor-inverse" />
       <ColorPreview color={'bgColor-sponsors-muted'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'bgColor-sponsors-emphasis'} bgColor canvasColor="bgColor-default" />
       <ColorPreview color={'borderColor-sponsors-muted'} borderColor canvasColor="bgColor-default" />