diff --git a/.changeset/witty-countries-ring.md b/.changeset/witty-countries-ring.md new file mode 100644 index 000000000..3d0a9727a --- /dev/null +++ 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/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-colorblind-theme-1-linux.png index a1e28430f..f2e3c5607 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png index ab5da36d8..a18748ce3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-theme-1-linux.png index 3fe9b8d85..3808ac3ab 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-tritanopia-theme-1-linux.png index 0aaa0cba4..9653e01ba 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-colorblind-theme-1-linux.png index 6beed6b46..77e1118f6 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png index 9d4048192..c121229bf 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-theme-1-linux.png index 745054dc8..377aa4db6 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-tritanopia-theme-1-linux.png index cee03fd15..3d9bae250 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-all--all-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-colorblind-theme-1-linux.png index eeb9ebfd1..8fd829cee 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-high-contrast-theme-1-linux.png index 626a84c57..7a1bdd0fc 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-theme-1-linux.png index eeb9ebfd1..8fd829cee 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-tritanopia-theme-1-linux.png index eeb9ebfd1..8fd829cee 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-colorblind-theme-1-linux.png index 75338e3a4..6845a7458 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-high-contrast-theme-1-linux.png index 7d960b33f..47ef8845e 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-theme-1-linux.png index 75338e3a4..6845a7458 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-tritanopia-theme-1-linux.png index 75338e3a4..6845a7458 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-background--background-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-colorblind-theme-1-linux.png index c3bcde71f..cef180668 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-high-contrast-theme-1-linux.png index 7cd19bc3b..415b67d39 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-theme-1-linux.png index c3bcde71f..cef180668 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-tritanopia-theme-1-linux.png index c3bcde71f..cef180668 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-colorblind-theme-1-linux.png index 6d76a4ba5..cf5376f15 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-high-contrast-theme-1-linux.png index 03e9e5b0c..ad473473f 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-theme-1-linux.png index 6d76a4ba5..cf5376f15 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-tritanopia-theme-1-linux.png index 6d76a4ba5..cf5376f15 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-foreground--foreground-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-colorblind-theme-1-linux.png index 2ef740f1d..ed5ec5dc8 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-high-contrast-theme-1-linux.png index 23b499c1a..5d856ade0 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-theme-1-linux.png index 2ef740f1d..ed5ec5dc8 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-tritanopia-theme-1-linux.png index 2ef740f1d..ed5ec5dc8 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-colorblind-theme-1-linux.png index 07a6faee0..4f0d92fe3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-high-contrast-theme-1-linux.png index 2d345d08d..bc33363db 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-theme-1-linux.png index 07a6faee0..4f0d92fe3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-tritanopia-theme-1-linux.png index 07a6faee0..4f0d92fe3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--accent-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-colorblind-theme-1-linux.png index 2264e978c..46bb585dc 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-high-contrast-theme-1-linux.png index 5c9f64227..f651406cb 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-theme-1-linux.png index 2264e978c..46bb585dc 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-tritanopia-theme-1-linux.png index 2264e978c..46bb585dc 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-colorblind-theme-1-linux.png index 312c3b810..486505e8c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-high-contrast-theme-1-linux.png index 84f5a2e27..47357dd40 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-theme-1-linux.png index 312c3b810..486505e8c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-tritanopia-theme-1-linux.png index 312c3b810..486505e8c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--attention-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-colorblind-theme-1-linux.png index 0d5c9cffe..0cfed0f53 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-high-contrast-theme-1-linux.png index 0b6507464..59a7051ab 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-theme-1-linux.png index af3944fa6..b3e812300 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-tritanopia-theme-1-linux.png index 1b41ad449..aa11d902f 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-colorblind-theme-1-linux.png index eb534146a..8b9535cd3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-high-contrast-theme-1-linux.png index f3bf6f3a1..399f6182e 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-theme-1-linux.png index cc01954f7..da7442737 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-tritanopia-theme-1-linux.png index eaa3832e4..679f0be74 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--closed-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-colorblind-theme-1-linux.png index 329467888..301f39dd1 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-high-contrast-theme-1-linux.png index c4436907f..9bafcb8e7 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-theme-1-linux.png index 6ac3718be..2bd74842f 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-tritanopia-theme-1-linux.png index 6ac3718be..2bd74842f 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-colorblind-theme-1-linux.png index 1d30d9bfb..b00761948 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-high-contrast-theme-1-linux.png index d2d4caf1f..658eaa3c0 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-theme-1-linux.png index 6aae842f8..e0fbb0418 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-tritanopia-theme-1-linux.png index 6aae842f8..e0fbb0418 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--danger-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-colorblind-theme-1-linux.png index b30772199..175ac858d 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-high-contrast-theme-1-linux.png index 79936247e..c3f459ba1 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-theme-1-linux.png index b30772199..175ac858d 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-tritanopia-theme-1-linux.png index b30772199..175ac858d 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-colorblind-theme-1-linux.png index ccd777072..89baf37ac 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-high-contrast-theme-1-linux.png index 692f9bda3..48fdb70ae 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-theme-1-linux.png index ccd777072..89baf37ac 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-tritanopia-theme-1-linux.png index ccd777072..89baf37ac 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--done-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-colorblind-theme-1-linux.png index 454925ebe..cb2d6ebe9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-high-contrast-theme-1-linux.png index 1174098b1..6628662e0 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-theme-1-linux.png index 454925ebe..cb2d6ebe9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-tritanopia-theme-1-linux.png index 454925ebe..cb2d6ebe9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-colorblind-theme-1-linux.png index 98c5a9a24..222ff01f5 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-high-contrast-theme-1-linux.png index 973d5adf9..06e794c5a 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-theme-1-linux.png index 98c5a9a24..222ff01f5 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-tritanopia-theme-1-linux.png index 98c5a9a24..222ff01f5 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--neutral-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-colorblind-theme-1-linux.png index bd729c48d..97db44969 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-high-contrast-theme-1-linux.png index 9224b4985..a42738b6f 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-theme-1-linux.png index ed3c1ac14..320d6d182 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-tritanopia-theme-1-linux.png index 508a8eab5..ff56653a9 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-colorblind-theme-1-linux.png index f0259f136..cc894e59d 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-high-contrast-theme-1-linux.png index 521462109..254951558 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-theme-1-linux.png index 92a69f528..34d1211f3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-tritanopia-theme-1-linux.png index a8b657349..0874acc6e 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--open-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-colorblind-theme-1-linux.png index 0c099a896..faa72510c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-high-contrast-theme-1-linux.png index 95d3d9dda..eaf3e71af 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-theme-1-linux.png index 0c099a896..faa72510c 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-tritanopia-theme-1-linux.png index c1d50eb05..4675d8327 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-colorblind-theme-1-linux.png index 986661b94..a7a155d9b 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-high-contrast-theme-1-linux.png index feba6cb3c..4d3877ed8 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-theme-1-linux.png index 986661b94..a7a155d9b 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-tritanopia-theme-1-linux.png index 435003d12..d1a218484 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--severe-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-colorblind-theme-1-linux.png index ff9a6b17b..06f9fb0a6 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-high-contrast-theme-1-linux.png index 2ea114a94..773bfc74b 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-theme-1-linux.png index ff9a6b17b..06f9fb0a6 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-tritanopia-theme-1-linux.png index ff9a6b17b..06f9fb0a6 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-colorblind-theme-1-linux.png index e7cfe715d..d991b47c3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-high-contrast-theme-1-linux.png index 8595ddbe2..3807605a3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-theme-1-linux.png index e7cfe715d..d991b47c3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-tritanopia-theme-1-linux.png index e7cfe715d..d991b47c3 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--sponsors-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-colorblind-theme-1-linux.png index 34424b950..7a40f2b27 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-high-contrast-theme-1-linux.png index cd9ba4c35..d810f61ac 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-theme-1-linux.png index 5d1064fc6..c2ceafa99 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-tritanopia-theme-1-linux.png index 34424b950..7a40f2b27 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-colorblind-theme-1-linux.png index 2502743c5..abd34e7ac 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-colorblind-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-high-contrast-theme-1-linux.png index 9ec1b64b3..fa58dcedc 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-theme-1-linux.png index c1b708f7a..5d6534af1 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-tritanopia-theme-1-linux.png index 2502743c5..abd34e7ac 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-tritanopia-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-functional-roles--success-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png index 3b333eeed..5a124f3af 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png index 702ce8c08..22403223b 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-color-patterns--button-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-colorblind-theme-1-linux.png new file mode 100644 index 000000000..396305f40 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-high-contrast-theme-1-linux.png new file mode 100644 index 000000000..ce1b640d0 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-theme-1-linux.png new file mode 100644 index 000000000..00a1c558e Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-tritanopia-theme-1-linux.png new file mode 100644 index 000000000..396305f40 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-dark-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-colorblind-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-colorblind-theme-1-linux.png new file mode 100644 index 000000000..7cc54dd15 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-colorblind-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-high-contrast-theme-1-linux.png new file mode 100644 index 000000000..3fc7c082f Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-theme-1-linux.png new file mode 100644 index 000000000..7cc54dd15 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-tritanopia-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-tritanopia-theme-1-linux.png new file mode 100644 index 000000000..7cc54dd15 Binary files /dev/null and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-demos-toast--toast-prototype-all-themes-light-tritanopia-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png index 6b6556851..d32c30f46 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-dark-high-contrast-theme-1-linux.png differ diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png index ba22d282a..a68915ae4 100644 Binary files a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png and b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-migration-tables--fallbacks-all-themes-light-high-contrast-theme-1-linux.png differ diff --git a/docs/storybook/stories/Color/Functional/Background.stories.tsx b/docs/storybook/stories/Color/Functional/Background.stories.tsx index 561a871ab..4800d3fb3 100644 --- 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 index e05e4c3c5..051d28177 100644 --- 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 index f9cba089e..32f8e18de 100644 --- 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 ( <> + @@ -25,6 +26,7 @@ export const Accent = () => { return ( <> + @@ -37,6 +39,7 @@ export const Success = () => { return ( <> + @@ -49,6 +52,7 @@ export const Attention = () => { return ( <> + @@ -61,6 +65,7 @@ export const Severe = () => { return ( <> + @@ -73,6 +78,7 @@ export const Danger = () => { return ( <> + @@ -85,6 +91,7 @@ export const Open = () => { return ( <> + @@ -97,6 +104,7 @@ export const Closed = () => { return ( <> + @@ -109,6 +117,7 @@ export const Done = () => { return ( <> + @@ -121,6 +130,7 @@ export const Sponsors = () => { return ( <> + diff --git a/docs/storybook/stories/Demos/ToastPrototype.stories.tsx b/docs/storybook/stories/Demos/ToastPrototype.stories.tsx new file mode 100644 index 000000000..0567d473b --- /dev/null +++ b/docs/storybook/stories/Demos/ToastPrototype.stories.tsx @@ -0,0 +1,325 @@ +import React from 'react' +import {Box, IconButton, Link, Spinner} from '@primer/react' +import {CheckIcon, AlertIcon, StopIcon, InfoIcon, XIcon} from '@primer/octicons-react' + +export default { + title: 'Demos/Toast', +} + +export const ToastPrototype = () => { + return ( +
+ + + + +

This is a Toast prototype

+ + + Undo + + + + + + + + +

This is a Toast prototype

+ + + + + +

This is a Toast prototype

+ + + + + +

This is a Toast prototype

+ + + + + +

This is a Toast prototype

+ + + + + +

This is a Toast prototype

+ +
+ ) +} diff --git a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css index 42431e006..e116f93c7 100644 --- a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css +++ b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css @@ -17,6 +17,11 @@ background-color: var(--bgColor-emphasis) !important; } +/* set bg color for text that matches default bg */ +.ColorPreview:has([style='color: var(--fgColor-onInverse);']) { + background-color: var(--bgColor-inverse) !important; +} + /* add border to bg colors that match default bg */ .ColorPreview:has([style='background-color: var(--bgColor-default); border: solid 1px var(--undefined);']) > div, .ColorPreview:has([style='background-color: var(--bgColor-transparent); border: solid 1px var(--undefined);']) > div { diff --git a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 index cdd4f14b4..e826a0bb2 100644 --- a/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 @@ -19,10 +19,58 @@ $value: '{base.color.gray.3}', $type: 'color', }, + neutral: { + onInverse: { + $value: '{base.color.gray.8}', + $type: 'color', + }, + }, + accent: { + onInverse: { + $value: '{base.color.blue.8}', + $type: 'color', + }, + }, + success: { + onInverse: { + $value: '{base.color.green.8}', + $type: 'color', + }, + }, + attention: { + onInverse: { + $value: '{base.color.yellow.8}', + $type: 'color', + }, + }, + danger: { + onInverse: { + $value: '{base.color.red.9}', + $type: 'color', + }, + }, + severe: { + onInverse: { + $value: '{base.color.orange.8}', + $type: 'color', + }, + }, + done: { + onInverse: { + $value: '{base.color.purple.9}', + $type: 'color', + }, + }, + sponsors: { + onInverse: { + $value: '{base.color.pink.9}', + $type: 'color', + }, + }, }, bgColor: { emphasis: { - $value: '{base.color.gray.0}', + $value: '{base.color.white}', $type: 'color', }, neutral: { @@ -239,6 +287,22 @@ }, }, }, + invisible: { + bgColor: { + hover: { + $value: '{base.color.gray.1}', + $type: 'color', + alpha: null, + mix: null, + }, + active: { + $value: '{base.color.gray.2}', + $type: 'color', + alpha: null, + mix: null, + }, + }, + }, }, buttonCounter: { primary: { diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 index 63962c40b..9cb3a3397 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -6,20 +6,46 @@ { fgColor: { success: { - $value: '{base.color.blue.3}', - $type: 'color', + '@': { + $value: '{base.color.blue.3}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.blue.5}', + $type: 'color', + }, }, danger: { - $value: '{base.color.orange.4}', - $type: 'color', + '@': { + $value: '{base.color.orange.4}', + $type: 'color', + }, + }, + severe: { + onInverse: { + $value: '{base.color.orange.5}', + $type: 'color', + }, }, open: { - $value: '{base.color.orange.3}', - $type: 'color', + '@': { + $value: '{base.color.orange.3}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.orange.5}', + $type: 'color', + }, }, closed: { - $value: '{base.color.gray.3}', - $type: 'color', + '@': { + $value: '{base.color.gray.3}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.gray.5}', + $type: 'color', + }, }, }, bgColor: { diff --git a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 index 38bfbcd99..3fdd02eab 100644 --- a/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 @@ -6,20 +6,44 @@ { fgColor: { success: { - $value: '{base.color.blue.3}', - $type: 'color', + '@': { + $value: '{base.color.blue.3}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.blue.5}', + $type: 'color', + }, }, severe: { - $value: '{base.color.red.4}', - $type: 'color', + '@': { + $value: '{base.color.red.4}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.red.5}', + $type: 'color', + }, }, open: { - $value: '{base.color.red.4}', - $type: 'color', + '@': { + $value: '{base.color.red.4}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.red.6}', + $type: 'color', + }, }, closed: { - $value: '{base.color.gray.4}', - $type: 'color', + '@': { + $value: '{base.color.gray.4}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.gray.5}', + $type: 'color', + }, }, }, bgColor: { diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5 index 0227ba441..aca9c3b30 100644 --- a/src/tokens/functional/color/dark/patterns-dark.json5 +++ b/src/tokens/functional/color/dark/patterns-dark.json5 @@ -349,7 +349,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -977,7 +977,7 @@ invisible: { fgColor: { rest: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1128,7 +1128,7 @@ }, }, disabled: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1214,7 +1214,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1247,7 +1247,7 @@ }, }, disabled: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1261,7 +1261,7 @@ }, iconColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1481,7 +1481,7 @@ }, }, disabled: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1535,7 +1535,7 @@ }, fgColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1557,7 +1557,7 @@ }, }, disabled: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5 index f446a5a79..2fa29bb6a 100644 --- a/src/tokens/functional/color/dark/primitives-dark.json5 +++ b/src/tokens/functional/color/dark/primitives-dark.json5 @@ -1,5 +1,5 @@ { - "fgColor": { + fgColor: { default: { $value: '{base.color.gray.0}', $type: 'color', @@ -41,6 +41,17 @@ }, }, }, + onInverse: { + $value: '{base.color.gray.9}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, disabled: { $value: '{base.color.gray.3}', $type: 'color', @@ -54,7 +65,18 @@ }, link: { '@': { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{fgColor.accent.onInverse}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -65,106 +87,251 @@ }, }, }, + neutral: { + '@': { + $value: '{base.color.gray.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.gray.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + }, accent: { - $value: '{base.color.blue.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.blue.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + mix: { + color: '{base.color.blue.5}', + weight: 0.35, }, }, - mix: { - color: '{base.color.blue.5}', - weight: 0.35, + onInverse: { + $value: '{base.color.blue.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, }, }, success: { - $value: '{base.color.green.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.green.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.green.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, attention: { - $value: '{base.color.yellow.3}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.yellow.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.yellow.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, severe: { - $value: '{base.color.orange.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.orange.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.orange.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, danger: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.red.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.red.5}', + $type: 'color', + mix: { + color: '{base.color.red.4}', + weight: 0.05, + }, + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, open: { - $value: '{fgColor.success}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{fgColor.success.@}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{fgColor.success.onInverse}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, closed: { - $value: '{base.color.red.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.red.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{fgColor.danger.onInverse}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, done: { - $value: '{base.color.purple.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.purple.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.purple.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, sponsors: { - $value: '{base.color.pink.4}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'dark', - scopes: ['fgColor'], + '@': { + $value: '{base.color.pink.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.pink.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['fgColor'], + }, }, }, }, @@ -214,6 +381,17 @@ }, }, }, + inverse: { + $value: '{base.color.white}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'dark', + scopes: ['bgColor'], + }, + }, + }, disabled: { $value: '{base.color.gray.8}', $type: 'color', diff --git a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 index da63c76a8..41562391b 100644 --- a/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +++ b/src/tokens/functional/color/light/overrides/light.high-contrast.json5 @@ -10,17 +10,65 @@ $type: 'color', mix: null, }, - danger: { - $value: '{base.color.red.6}', + disabled: { + $value: '{base.color.gray.6}', $type: 'color', }, + danger: { + '@': { + $value: '{base.color.red.6}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.red.2}', + $type: 'color', + }, + }, + neutral: { + onInverse: { + $value: '{base.color.gray.2}', + $type: 'color', + }, + }, accent: { - $value: '{base.color.blue.6}', - $type: 'color', + '@': { + $value: '{base.color.blue.6}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.blue.2}', + $type: 'color', + }, }, - disabled: { - $value: '{base.color.gray.6}', - $type: 'color', + severe: { + onInverse: { + $value: '{base.color.orange.2}', + $type: 'color', + }, + }, + success: { + onInverse: { + $value: '{base.color.green.2}', + $type: 'color', + }, + }, + attention: { + onInverse: { + $value: '{base.color.yellow.2}', + $type: 'color', + }, + }, + done: { + onInverse: { + $value: '{base.color.purple.2}', + $type: 'color', + }, + }, + sponsors: { + onInverse: { + $value: '{base.color.pink.2}', + $type: 'color', + }, }, }, bgColor: { @@ -318,6 +366,20 @@ }, }, }, + invisible: { + bgColor: { + hover: { + $value: '{base.color.gray.8}', + $type: 'color', + alpha: 1, + }, + active: { + $value: '{base.color.gray.6}', + $type: 'color', + alpha: 1, + }, + }, + }, }, buttonCounter: { default: { diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 index 9d1a4e9bb..79a77fb11 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -6,23 +6,43 @@ { fgColor: { success: { - $value: '{base.color.blue.5}', - $type: 'color', + '@': { + $value: '{base.color.blue.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.blue.3}', + $type: 'color', + }, }, open: { - $value: '{base.color.orange.5}', - $type: 'color', + '@': { + $value: '{base.color.orange.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.orange.3}', + $type: 'color', + }, }, closed: { - $value: '{base.color.gray.5}', - $type: 'color', + '@': { + $value: '{base.color.gray.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.gray.3}', + $type: 'color', + }, }, danger: { - $value: '{base.color.orange.5}', - $type: 'color', - mix: { - color: '{base.color.orange.4}', - weight: 0.05, + '@': { + $value: '{base.color.orange.5}', + $type: 'color', + mix: { + color: '{base.color.orange.4}', + weight: 0.05, + }, }, }, }, diff --git a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 index d72fc6c79..f0cce79f5 100644 --- a/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.tritanopia.json5 @@ -6,20 +6,44 @@ { fgColor: { success: { - $value: '{base.color.blue.5}', - $type: 'color', + '@': { + $value: '{base.color.blue.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.blue.3}', + $type: 'color', + }, }, severe: { - $value: '{base.color.red.5}', - $type: 'color', + '@': { + $value: '{base.color.red.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.red.3}', + $type: 'color', + }, }, open: { - $value: '{base.color.red.5}', - $type: 'color', + '@': { + $value: '{base.color.red.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.red.4}', + $type: 'color', + }, }, closed: { - $value: '{base.color.gray.5}', - $type: 'color', + '@': { + $value: '{base.color.gray.5}', + $type: 'color', + }, + onInverse: { + $value: '{base.color.gray.3}', + $type: 'color', + }, }, }, bgColor: { diff --git a/src/tokens/functional/color/light/patterns-light.json5 b/src/tokens/functional/color/light/patterns-light.json5 index 343868531..75de84d29 100644 --- a/src/tokens/functional/color/light/patterns-light.json5 +++ b/src/tokens/functional/color/light/patterns-light.json5 @@ -347,7 +347,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -358,7 +358,7 @@ }, }, hover: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -826,7 +826,7 @@ collection: 'pattern/mode', mode: 'light', scopes: ['borderColor'], - } + }, }, }, }, @@ -969,7 +969,7 @@ invisible: { fgColor: { rest: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -980,7 +980,7 @@ }, }, hover: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1087,7 +1087,7 @@ outline: { fgColor: { rest: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1120,7 +1120,7 @@ }, }, disabled: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1210,7 +1210,7 @@ danger: { fgColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1243,7 +1243,7 @@ }, }, disabled: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1257,7 +1257,7 @@ }, iconColor: { rest: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1478,7 +1478,7 @@ }, }, disabled: { - $value: '{fgColor.accent}', + $value: '{fgColor.accent.@}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -1558,7 +1558,7 @@ }, }, disabled: { - $value: '{fgColor.danger}', + $value: '{fgColor.danger.@}', $type: 'color', $extensions: { 'org.primer.figma': { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index effd30f75..a541a0b6a 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -37,8 +37,8 @@ }, }, }, - disabled: { - $value: '{base.color.gray.4}', + onInverse: { + $value: '{base.color.gray.0}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -48,8 +48,8 @@ }, }, }, - link: { - $value: '{fgColor.accent}', + disabled: { + $value: '{base.color.gray.4}', $type: 'color', $extensions: { 'org.primer.figma': { @@ -59,106 +59,274 @@ }, }, }, + link: { + '@': { + $value: '{fgColor.accent.@}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{fgColor.accent.onInverse}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + }, + neutral: { + '@': { + $value: '{base.color.gray.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.gray.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + }, accent: { - $value: '{base.color.blue.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.blue.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.blue.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, success: { - $value: '{base.color.green.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.green.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.green.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, attention: { - $value: '{base.color.yellow.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.yellow.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.yellow.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, severe: { - $value: '{base.color.orange.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.orange.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.orange.3}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, danger: { - $value: '{base.color.red.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.red.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + mix: { + color: '{base.color.red.4}', + weight: 0.05, }, }, - mix: { - color: '{base.color.red.4}', - weight: 0.05, + onInverse: { + $value: '{base.color.red.4}', + $type: 'color', + mix: null, + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, }, }, open: { - $value: '{fgColor.success}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{fgColor.success.@}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{fgColor.success.onInverse}', + $type: 'color', + mix: null, + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, closed: { - $value: '{fgColor.danger}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{fgColor.danger.@}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{fgColor.danger.onInverse}', + $type: 'color', + mix: null, + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, done: { - $value: '{base.color.purple.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.purple.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.purple.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, sponsors: { - $value: '{base.color.pink.5}', - $type: 'color', - $extensions: { - 'org.primer.figma': { - collection: 'mode', - mode: 'light', - scopes: ['fgColor'], + '@': { + $value: '{base.color.pink.5}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, + }, + }, + onInverse: { + $value: '{base.color.pink.4}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['fgColor'], + }, }, }, }, @@ -208,6 +376,17 @@ }, }, }, + inverse: { + $value: '{base.color.gray.9}', + $type: 'color', + $extensions: { + 'org.primer.figma': { + collection: 'mode', + mode: 'light', + scopes: ['bgColor'], + }, + }, + }, disabled: { $value: '{base.color.gray.0}', $type: 'color', diff --git a/src/tokens/functional/size/size.json b/src/tokens/functional/size/size.json index 5bbd8a06d..786f69894 100644 --- a/src/tokens/functional/size/size.json +++ b/src/tokens/functional/size/size.json @@ -574,5 +574,155 @@ } } } + }, + "overlay": { + "width": { + "xsmall": { + "$value": "192px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "small": { + "$value": "320px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "medium": { + "$value": "480px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "large": { + "$value": "640px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "xlarge": { + "$value": "960px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + } + }, + "height": { + "small": { + "$value": "256px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "medium": { + "$value": "320px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "large": { + "$value": "432px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + }, + "xlarge": { + "$value": "600px", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["size"] + } + } + } + }, + "padding": { + "normal": { + "$value": "{base.size.16}", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["gap"] + } + } + }, + "condensed": { + "$value": "{base.size.8}", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["gap"] + } + } + } + }, + "paddingBlock": { + "condensed": { + "$value": "{base.size.4}", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["gap"] + } + } + }, + "normal": { + "$value": "{base.size.12}", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["gap"] + } + } + } + }, + "borderRadius": { + "$value": "{borderRadius.medium}", + "$type": "dimension", + "$extensions": { + "org.primer.figma": { + "collection": "pattern/size", + "scopes": ["radius"] + } + } + } } }