diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png new file mode 100644 index 00000000000..96fa576cb44 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png new file mode 100644 index 00000000000..95fc456b5a1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png new file mode 100644 index 00000000000..023f76c77f7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-linux.png new file mode 100644 index 00000000000..83a20efc55d Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png new file mode 100644 index 00000000000..83a20efc55d Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-colorblind-linux.png new file mode 100644 index 00000000000..0a0d7b132f4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png new file mode 100644 index 00000000000..dae7d216dbd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-linux.png new file mode 100644 index 00000000000..7ed18997013 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png new file mode 100644 index 00000000000..9e2ca27cf01 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Danger-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..56d48dbc00a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..857e7d3bc0c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..cd7ea93d91a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-linux.png new file mode 100644 index 00000000000..6eebd6ca8c7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png new file mode 100644 index 00000000000..321b19d37f3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png new file mode 100644 index 00000000000..7b9171e6cd9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1a6f14f4040 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-linux.png new file mode 100644 index 00000000000..321b19d37f3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png new file mode 100644 index 00000000000..321b19d37f3 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png new file mode 100644 index 00000000000..29cde67f322 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png new file mode 100644 index 00000000000..8b9f8c96d23 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-linux.png new file mode 100644 index 00000000000..880a2e50e11 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png new file mode 100644 index 00000000000..29cde67f322 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Disabled-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png new file mode 100644 index 00000000000..3eeceac5f96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png new file mode 100644 index 00000000000..4b7ff48113a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ea3f43522f6 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-linux.png new file mode 100644 index 00000000000..584be2216df Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3eeceac5f96 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png new file mode 100644 index 00000000000..8ca573d8cb9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png new file mode 100644 index 00000000000..cadeebdeb0a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-linux.png new file mode 100644 index 00000000000..8ca573d8cb9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png new file mode 100644 index 00000000000..8ca573d8cb9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Invisible-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-colorblind-linux.png new file mode 100644 index 00000000000..afd7b05b4c9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-dimmed-linux.png new file mode 100644 index 00000000000..d35df7a4ec0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png new file mode 100644 index 00000000000..3eba9aac4ad Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-linux.png new file mode 100644 index 00000000000..afd7b05b4c9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png new file mode 100644 index 00000000000..afd7b05b4c9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-colorblind-linux.png new file mode 100644 index 00000000000..3a8fb2fe2f0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-high-contrast-linux.png new file mode 100644 index 00000000000..884474df496 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-linux.png new file mode 100644 index 00000000000..ad5f989bde0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-tritanopia-linux.png new file mode 100644 index 00000000000..3a8fb2fe2f0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Large-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png new file mode 100644 index 00000000000..36d2a45986e Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png new file mode 100644 index 00000000000..6af5e736bb0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png new file mode 100644 index 00000000000..9c595667f02 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-linux.png new file mode 100644 index 00000000000..36d2a45986e Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png new file mode 100644 index 00000000000..36d2a45986e Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png new file mode 100644 index 00000000000..d45c0170307 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png new file mode 100644 index 00000000000..b533d6b9181 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-linux.png new file mode 100644 index 00000000000..b58cb0b1a9c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png new file mode 100644 index 00000000000..d45c0170307 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Leading-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png new file mode 100644 index 00000000000..56d48dbc00a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png new file mode 100644 index 00000000000..857e7d3bc0c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-colorblind-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png new file mode 100644 index 00000000000..cd7ea93d91a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-linux.png new file mode 100644 index 00000000000..6eebd6ca8c7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Medium-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png new file mode 100644 index 00000000000..aa0f3d2ac3a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png new file mode 100644 index 00000000000..e331fe785f4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png new file mode 100644 index 00000000000..35074bda2ab Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-linux.png new file mode 100644 index 00000000000..aa0f3d2ac3a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png new file mode 100644 index 00000000000..aa0f3d2ac3a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-colorblind-linux.png new file mode 100644 index 00000000000..e3f7ea01ccd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png new file mode 100644 index 00000000000..cbdddbc1c78 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-linux.png new file mode 100644 index 00000000000..a2dfc789df8 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png new file mode 100644 index 00000000000..e3f7ea01ccd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png new file mode 100644 index 00000000000..56d48dbc00a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png new file mode 100644 index 00000000000..857e7d3bc0c Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e3d5a91a66b Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-colorblind-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png new file mode 100644 index 00000000000..cd7ea93d91a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-linux.png new file mode 100644 index 00000000000..6eebd6ca8c7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png new file mode 100644 index 00000000000..5762cf818cd Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png new file mode 100644 index 00000000000..dc4d05ce9d9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png new file mode 100644 index 00000000000..6c6ae9fa1db Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5244e303e67 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-linux.png new file mode 100644 index 00000000000..3d0da735bb5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png new file mode 100644 index 00000000000..dc4d05ce9d9 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-colorblind-linux.png new file mode 100644 index 00000000000..a052c678e1a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png new file mode 100644 index 00000000000..cf8968e0ee4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-linux.png new file mode 100644 index 00000000000..aee8843bc04 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png new file mode 100644 index 00000000000..a052c678e1a Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Primary-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-colorblind-linux.png new file mode 100644 index 00000000000..aff81a49101 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-dimmed-linux.png new file mode 100644 index 00000000000..98b02c72117 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ecd451e4315 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-linux.png new file mode 100644 index 00000000000..aff81a49101 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png new file mode 100644 index 00000000000..aff81a49101 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-colorblind-linux.png new file mode 100644 index 00000000000..c8f16253757 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-high-contrast-linux.png new file mode 100644 index 00000000000..ac720db602f Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-linux.png new file mode 100644 index 00000000000..ebc8a536b39 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-tritanopia-linux.png new file mode 100644 index 00000000000..c8f16253757 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Small-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png new file mode 100644 index 00000000000..356e04c2210 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png new file mode 100644 index 00000000000..04cb590fdb1 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f72ac95fbdc Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png new file mode 100644 index 00000000000..2b9856fc2e5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png new file mode 100644 index 00000000000..356e04c2210 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png new file mode 100644 index 00000000000..d464f75c686 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png new file mode 100644 index 00000000000..6d0cb868d34 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-linux.png new file mode 100644 index 00000000000..b711754a8fa Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png new file mode 100644 index 00000000000..d464f75c686 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Counter-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png new file mode 100644 index 00000000000..9003e7c4334 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png new file mode 100644 index 00000000000..1d2a6bcc090 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a0d34354240 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png new file mode 100644 index 00000000000..9003e7c4334 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png new file mode 100644 index 00000000000..9003e7c4334 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png new file mode 100644 index 00000000000..49a1746bcd5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png new file mode 100644 index 00000000000..8b2074ab8f7 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-linux.png new file mode 100644 index 00000000000..2e5424b2215 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png new file mode 100644 index 00000000000..49a1746bcd5 Binary files /dev/null and b/.playwright/snapshots/components/drafts/Button2.test.ts-snapshots/Button-Trailing-Visual-light-tritanopia-linux.png differ diff --git a/e2e/components/drafts/Button2.test.ts b/e2e/components/drafts/Button2.test.ts new file mode 100644 index 00000000000..fd6ff67991f --- /dev/null +++ b/e2e/components/drafts/Button2.test.ts @@ -0,0 +1,447 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../../test-helpers/storybook' +import {themes} from '../../test-helpers/themes' + +test.describe('Button', () => { + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--playground', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Disabled', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--invisible', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--large', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Large.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--large', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Leading Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Medium', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--medium', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Medium.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--medium', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Outline', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--outline', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Outline.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--outline', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Primary.${theme}.png`) + }) + + test.fixme('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--small', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Trailing Counter', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Counter.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'drafts-components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) +}) diff --git a/src/drafts/Button2/Button.dev.stories.tsx b/src/drafts/Button2/Button.dev.stories.tsx new file mode 100644 index 00000000000..b6ee51efaf9 --- /dev/null +++ b/src/drafts/Button2/Button.dev.stories.tsx @@ -0,0 +1,98 @@ +import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react' +import React from 'react' +import {Button, IconButton} from '.' + +export default { + title: 'Drafts/Components/Button/DevOnly', +} + +export const InvisibleVariants = () => { + const count = 4 + return ( +