test(e2e): add playwright setup (#623)

* test(e2e): add playwright setup * test(jest): add testIgnorePatterns * Delete index.html * refactor: update playwright setup and add update flow * chore: add install step for storybook workspace * lint * workflow syntax * Update update_visual_snapshots.yml * github-actions[bot] Regenerated snapshots * test: disable animations for screenshot * ci: remove extra Node.js setup step * github-actions[bot] Regenerated snapshots * ci: add remove label step to end of action --------- Co-authored-by: Lukas Oppermann <[email protected]> Co-authored-by: Katie Langerman <[email protected]> Co-authored-by: joshblack <[email protected]>
primer · Jul 12, 2023 · 6912893 · 6912893
1 parent 091007d
commit 6912893
Show file tree

Hide file tree

Showing 741 changed files with 284 additions and 3 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -37,4 +37,57 @@ jobs:
         run: npm run format:check
 
       - name: Run unit tests
-        run: npm test
+        run: npm test
+
+  vrt-runner:
+    runs-on: ubuntu-latest-8-cores
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build v8 tokens
+        run: npm run build:next
+      - name: Build storybook
+        working-directory: docs/storybook
+        run: |
+          npm ci
+          npm run build-storybook
+      - name: Install browsers
+        run: npx playwright install --with-deps
+      - name: Run storybook
+        id: storybook
+        run: |
+          npx serve -l 6006 storybook-static &
+          pid=$!
+          echo "pid=$pid" >> $GITHUB_OUTPUT
+          sleep 5
+        working-directory: docs/storybook
+      - name: Run Visual Regression Tests
+        run: npx playwright test --shard="${{ matrix.shard }}/${{ strategy.job-total }}"
+      - name: Stop storybook
+        run: kill ${{ steps.storybook.outputs.pid }}
+      - name: Upload report
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: vrt-${{ matrix.shard }}
+          path: .playwright/report
+
+  vrt:
+    name: 'Visual Regression Testing'
+    if: ${{ always() }}
+    runs-on: ubuntu-latest
+    needs: vrt-runner
+    steps:
+      - name: Check vrt-runner job status
+        if: ${{ needs.vrt-runner.result == 'failure' }}
+        run: exit 1
diff --git a/.github/workflows/update_visual_snapshots.yml b/.github/workflows/update_visual_snapshots.yml
@@ -0,0 +1,56 @@
+name: Snapshots
+
+on:
+  pull_request:
+    types: [labeled]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  update:
+    if: ${{ github.event.label.name == 'update snapshots' }}
+    name: 'Update snapshots'
+    runs-on:
+      labels: ubuntu-latest-16-cores
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.head_ref }}
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci --no-audit --no-fund --ignore-scripts
+      - name: Install browsers
+        run: npx playwright install --with-deps
+      - name: Build v8 tokens
+        run: npm run build:next
+      - name: Build storybook
+        working-directory: docs/storybook
+        run: |
+          npm ci
+          npm run build-storybook
+      - name: Run storybook
+        id: storybook
+        run: |
+          npx serve -l 6006 storybook-static &
+          pid=$!
+          echo "pid=$pid" >> $GITHUB_OUTPUT
+          sleep 5
+        working-directory: docs/storybook
+      - name: Run Visual Regression Tests
+        run: npx playwright test --update-snapshots
+      - name: Stop storybook
+        run: kill ${{ steps.storybook.outputs.pid }}
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: github-actions[bot] Regenerated snapshots
+      - uses: actions-ecosystem/action-remove-labels@v1
+        with:
+          labels: 'update snapshots'
diff --git a/.playwright/.gitignore b/.playwright/.gitignore
@@ -0,0 +1,8 @@
+axe/
+report/
+results/
+results.json
+
+# Only include snapshots from Linux as these are used in CI
+*.png
+!*-linux.png
diff --git a/...book.test.ts-snapshots/storybook-color-base-scales--all-scales-dark-1-linux.png b/...book.test.ts-snapshots/storybook-color-base-scales--all-scales-dark-1-linux.png
diff --git a/...s-snapshots/storybook-color-base-scales--all-scales-dark-colorblind-1-linux.png b/...s-snapshots/storybook-color-base-scales--all-scales-dark-colorblind-1-linux.png
diff --git a/...napshots/storybook-color-base-scales--all-scales-dark-high-contrast-1-linux.png b/...napshots/storybook-color-base-scales--all-scales-dark-high-contrast-1-linux.png
diff --git a/...s-snapshots/storybook-color-base-scales--all-scales-dark-tritanopia-1-linux.png b/...s-snapshots/storybook-color-base-scales--all-scales-dark-tritanopia-1-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-color-base-scales--all-scales-light-1-linux.png b/...ook.test.ts-snapshots/storybook-color-base-scales--all-scales-light-1-linux.png
diff --git a/...-snapshots/storybook-color-base-scales--all-scales-light-colorblind-1-linux.png b/...-snapshots/storybook-color-base-scales--all-scales-light-colorblind-1-linux.png
diff --git a/...apshots/storybook-color-base-scales--all-scales-light-high-contrast-1-linux.png b/...apshots/storybook-color-base-scales--all-scales-light-high-contrast-1-linux.png
diff --git a/...-snapshots/storybook-color-base-scales--all-scales-light-tritanopia-1-linux.png b/...-snapshots/storybook-color-base-scales--all-scales-light-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--black-dark-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--black-dark-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--black-dark-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--black-dark-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--black-dark-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--black-dark-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--black-dark-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--black-dark-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--black-light-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--black-light-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--black-light-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--black-light-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--black-light-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--black-light-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--black-light-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--black-light-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-base-scales--blue-dark-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-base-scales--blue-dark-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--blue-dark-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--blue-dark-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--blue-dark-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--blue-dark-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--blue-dark-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--blue-dark-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--blue-light-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--blue-light-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--blue-light-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--blue-light-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--blue-light-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--blue-light-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--blue-light-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--blue-light-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--coral-dark-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--coral-dark-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--coral-dark-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--coral-dark-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--coral-dark-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--coral-dark-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--coral-dark-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--coral-dark-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--coral-light-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--coral-light-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--coral-light-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--coral-light-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--coral-light-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--coral-light-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--coral-light-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--coral-light-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-base-scales--gray-dark-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-base-scales--gray-dark-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--gray-dark-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--gray-dark-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--gray-dark-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--gray-dark-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--gray-dark-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--gray-dark-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--gray-light-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--gray-light-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--gray-light-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--gray-light-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--gray-light-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--gray-light-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--gray-light-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--gray-light-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--green-dark-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--green-dark-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--green-dark-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--green-dark-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--green-dark-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--green-dark-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--green-dark-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--green-dark-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--green-light-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--green-light-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--green-light-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--green-light-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--green-light-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--green-light-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--green-light-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--green-light-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--orange-dark-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--orange-dark-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--orange-dark-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--orange-dark-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--orange-dark-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--orange-dark-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--orange-dark-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--orange-dark-tritanopia-1-linux.png
diff --git a/...orybook.test.ts-snapshots/storybook-color-base-scales--orange-light-1-linux.png b/...orybook.test.ts-snapshots/storybook-color-base-scales--orange-light-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--orange-light-colorblind-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--orange-light-colorblind-1-linux.png
diff --git a/...s-snapshots/storybook-color-base-scales--orange-light-high-contrast-1-linux.png b/...s-snapshots/storybook-color-base-scales--orange-light-high-contrast-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--orange-light-tritanopia-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--orange-light-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-base-scales--pink-dark-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-base-scales--pink-dark-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--pink-dark-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--pink-dark-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--pink-dark-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--pink-dark-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--pink-dark-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--pink-dark-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--pink-light-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--pink-light-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--pink-light-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--pink-light-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--pink-light-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--pink-light-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--pink-light-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--pink-light-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--purple-dark-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--purple-dark-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--purple-dark-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--purple-dark-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--purple-dark-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--purple-dark-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--purple-dark-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--purple-dark-tritanopia-1-linux.png
diff --git a/...orybook.test.ts-snapshots/storybook-color-base-scales--purple-light-1-linux.png b/...orybook.test.ts-snapshots/storybook-color-base-scales--purple-light-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--purple-light-colorblind-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--purple-light-colorblind-1-linux.png
diff --git a/...s-snapshots/storybook-color-base-scales--purple-light-high-contrast-1-linux.png b/...s-snapshots/storybook-color-base-scales--purple-light-high-contrast-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--purple-light-tritanopia-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--purple-light-tritanopia-1-linux.png
diff --git a/...s/storybook.test.ts-snapshots/storybook-color-base-scales--red-dark-1-linux.png b/...s/storybook.test.ts-snapshots/storybook-color-base-scales--red-dark-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-base-scales--red-dark-colorblind-1-linux.png b/....test.ts-snapshots/storybook-color-base-scales--red-dark-colorblind-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--red-dark-high-contrast-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--red-dark-high-contrast-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-base-scales--red-dark-tritanopia-1-linux.png b/....test.ts-snapshots/storybook-color-base-scales--red-dark-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-base-scales--red-light-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-base-scales--red-light-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--red-light-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--red-light-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--red-light-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--red-light-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-base-scales--red-light-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-base-scales--red-light-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-base-scales--white-dark-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-base-scales--white-dark-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--white-dark-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--white-dark-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-base-scales--white-dark-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-base-scales--white-dark-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-base-scales--white-dark-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-base-scales--white-dark-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--white-light-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--white-light-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--white-light-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--white-light-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--white-light-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--white-light-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--white-light-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--white-light-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-base-scales--yellow-dark-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-base-scales--yellow-dark-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--yellow-dark-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--yellow-dark-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-base-scales--yellow-dark-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-base-scales--yellow-dark-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-base-scales--yellow-dark-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-base-scales--yellow-dark-tritanopia-1-linux.png
diff --git a/...orybook.test.ts-snapshots/storybook-color-base-scales--yellow-light-1-linux.png b/...orybook.test.ts-snapshots/storybook-color-base-scales--yellow-light-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--yellow-light-colorblind-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--yellow-light-colorblind-1-linux.png
diff --git a/...s-snapshots/storybook-color-base-scales--yellow-light-high-contrast-1-linux.png b/...s-snapshots/storybook-color-base-scales--yellow-light-high-contrast-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-base-scales--yellow-light-tritanopia-1-linux.png b/...t.ts-snapshots/storybook-color-base-scales--yellow-light-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-functional-all--all-dark-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-functional-all--all-dark-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-functional-all--all-dark-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-functional-all--all-dark-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-all--all-dark-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-functional-all--all-dark-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-functional-all--all-dark-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-functional-all--all-dark-tritanopia-1-linux.png
diff --git a/...orybook.test.ts-snapshots/storybook-color-functional-all--all-light-1-linux.png b/...orybook.test.ts-snapshots/storybook-color-functional-all--all-light-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-functional-all--all-light-colorblind-1-linux.png b/...t.ts-snapshots/storybook-color-functional-all--all-light-colorblind-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-all--all-light-high-contrast-1-linux.png b/...s-snapshots/storybook-color-functional-all--all-light-high-contrast-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-functional-all--all-light-tritanopia-1-linux.png b/...t.ts-snapshots/storybook-color-functional-all--all-light-tritanopia-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-background--background-dark-1-linux.png b/...ts-snapshots/storybook-color-functional-background--background-dark-1-linux.png
diff --git a/...s/storybook-color-functional-background--background-dark-colorblind-1-linux.png b/...s/storybook-color-functional-background--background-dark-colorblind-1-linux.png
diff --git a/...torybook-color-functional-background--background-dark-high-contrast-1-linux.png b/...torybook-color-functional-background--background-dark-high-contrast-1-linux.png
diff --git a/...s/storybook-color-functional-background--background-dark-tritanopia-1-linux.png b/...s/storybook-color-functional-background--background-dark-tritanopia-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-background--background-light-1-linux.png b/...s-snapshots/storybook-color-functional-background--background-light-1-linux.png
diff --git a/.../storybook-color-functional-background--background-light-colorblind-1-linux.png b/.../storybook-color-functional-background--background-light-colorblind-1-linux.png
diff --git a/...orybook-color-functional-background--background-light-high-contrast-1-linux.png b/...orybook-color-functional-background--background-light-high-contrast-1-linux.png
diff --git a/.../storybook-color-functional-background--background-light-tritanopia-1-linux.png b/.../storybook-color-functional-background--background-light-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-border--border-dark-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-border--border-dark-1-linux.png
diff --git a/...snapshots/storybook-color-functional-border--border-dark-colorblind-1-linux.png b/...snapshots/storybook-color-functional-border--border-dark-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-border--border-dark-high-contrast-1-linux.png b/...pshots/storybook-color-functional-border--border-dark-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-border--border-dark-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-border--border-dark-tritanopia-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-functional-border--border-light-1-linux.png b/...k.test.ts-snapshots/storybook-color-functional-border--border-light-1-linux.png
diff --git a/...napshots/storybook-color-functional-border--border-light-colorblind-1-linux.png b/...napshots/storybook-color-functional-border--border-light-colorblind-1-linux.png
diff --git a/...shots/storybook-color-functional-border--border-light-high-contrast-1-linux.png b/...shots/storybook-color-functional-border--border-light-high-contrast-1-linux.png
diff --git a/...napshots/storybook-color-functional-border--border-light-tritanopia-1-linux.png b/...napshots/storybook-color-functional-border--border-light-tritanopia-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-foreground--foreground-dark-1-linux.png b/...ts-snapshots/storybook-color-functional-foreground--foreground-dark-1-linux.png
diff --git a/...s/storybook-color-functional-foreground--foreground-dark-colorblind-1-linux.png b/...s/storybook-color-functional-foreground--foreground-dark-colorblind-1-linux.png
diff --git a/...torybook-color-functional-foreground--foreground-dark-high-contrast-1-linux.png b/...torybook-color-functional-foreground--foreground-dark-high-contrast-1-linux.png
diff --git a/...s/storybook-color-functional-foreground--foreground-dark-tritanopia-1-linux.png b/...s/storybook-color-functional-foreground--foreground-dark-tritanopia-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-foreground--foreground-light-1-linux.png b/...s-snapshots/storybook-color-functional-foreground--foreground-light-1-linux.png
diff --git a/.../storybook-color-functional-foreground--foreground-light-colorblind-1-linux.png b/.../storybook-color-functional-foreground--foreground-light-colorblind-1-linux.png
diff --git a/...orybook-color-functional-foreground--foreground-light-high-contrast-1-linux.png b/...orybook-color-functional-foreground--foreground-light-high-contrast-1-linux.png
diff --git a/.../storybook-color-functional-foreground--foreground-light-tritanopia-1-linux.png b/.../storybook-color-functional-foreground--foreground-light-tritanopia-1-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-color-functional-roles--accent-dark-1-linux.png b/...ook.test.ts-snapshots/storybook-color-functional-roles--accent-dark-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--accent-dark-colorblind-1-linux.png b/...-snapshots/storybook-color-functional-roles--accent-dark-colorblind-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--accent-dark-high-contrast-1-linux.png b/...apshots/storybook-color-functional-roles--accent-dark-high-contrast-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--accent-dark-tritanopia-1-linux.png b/...-snapshots/storybook-color-functional-roles--accent-dark-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-roles--accent-light-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-roles--accent-light-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--accent-light-colorblind-1-linux.png b/...snapshots/storybook-color-functional-roles--accent-light-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--accent-light-high-contrast-1-linux.png b/...pshots/storybook-color-functional-roles--accent-light-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--accent-light-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-roles--accent-light-tritanopia-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-functional-roles--attention-dark-1-linux.png b/....test.ts-snapshots/storybook-color-functional-roles--attention-dark-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--attention-dark-colorblind-1-linux.png b/...apshots/storybook-color-functional-roles--attention-dark-colorblind-1-linux.png
diff --git a/...hots/storybook-color-functional-roles--attention-dark-high-contrast-1-linux.png b/...hots/storybook-color-functional-roles--attention-dark-high-contrast-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--attention-dark-tritanopia-1-linux.png b/...apshots/storybook-color-functional-roles--attention-dark-tritanopia-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-functional-roles--attention-light-1-linux.png b/...test.ts-snapshots/storybook-color-functional-roles--attention-light-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--attention-light-colorblind-1-linux.png b/...pshots/storybook-color-functional-roles--attention-light-colorblind-1-linux.png
diff --git a/...ots/storybook-color-functional-roles--attention-light-high-contrast-1-linux.png b/...ots/storybook-color-functional-roles--attention-light-high-contrast-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--attention-light-tritanopia-1-linux.png b/...pshots/storybook-color-functional-roles--attention-light-tritanopia-1-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-color-functional-roles--closed-dark-1-linux.png b/...ook.test.ts-snapshots/storybook-color-functional-roles--closed-dark-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--closed-dark-colorblind-1-linux.png b/...-snapshots/storybook-color-functional-roles--closed-dark-colorblind-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--closed-dark-high-contrast-1-linux.png b/...apshots/storybook-color-functional-roles--closed-dark-high-contrast-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--closed-dark-tritanopia-1-linux.png b/...-snapshots/storybook-color-functional-roles--closed-dark-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-roles--closed-light-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-roles--closed-light-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--closed-light-colorblind-1-linux.png b/...snapshots/storybook-color-functional-roles--closed-light-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--closed-light-high-contrast-1-linux.png b/...pshots/storybook-color-functional-roles--closed-light-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--closed-light-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-roles--closed-light-tritanopia-1-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-color-functional-roles--danger-dark-1-linux.png b/...ook.test.ts-snapshots/storybook-color-functional-roles--danger-dark-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--danger-dark-colorblind-1-linux.png b/...-snapshots/storybook-color-functional-roles--danger-dark-colorblind-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--danger-dark-high-contrast-1-linux.png b/...apshots/storybook-color-functional-roles--danger-dark-high-contrast-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--danger-dark-tritanopia-1-linux.png b/...-snapshots/storybook-color-functional-roles--danger-dark-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-roles--danger-light-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-roles--danger-light-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--danger-light-colorblind-1-linux.png b/...snapshots/storybook-color-functional-roles--danger-light-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--danger-light-high-contrast-1-linux.png b/...pshots/storybook-color-functional-roles--danger-light-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--danger-light-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-roles--danger-light-tritanopia-1-linux.png
diff --git a/...ybook.test.ts-snapshots/storybook-color-functional-roles--done-dark-1-linux.png b/...ybook.test.ts-snapshots/storybook-color-functional-roles--done-dark-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-roles--done-dark-colorblind-1-linux.png b/...ts-snapshots/storybook-color-functional-roles--done-dark-colorblind-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--done-dark-high-contrast-1-linux.png b/...snapshots/storybook-color-functional-roles--done-dark-high-contrast-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-roles--done-dark-tritanopia-1-linux.png b/...ts-snapshots/storybook-color-functional-roles--done-dark-tritanopia-1-linux.png
diff --git a/...book.test.ts-snapshots/storybook-color-functional-roles--done-light-1-linux.png b/...book.test.ts-snapshots/storybook-color-functional-roles--done-light-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-roles--done-light-colorblind-1-linux.png b/...s-snapshots/storybook-color-functional-roles--done-light-colorblind-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--done-light-high-contrast-1-linux.png b/...napshots/storybook-color-functional-roles--done-light-high-contrast-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-roles--done-light-tritanopia-1-linux.png b/...s-snapshots/storybook-color-functional-roles--done-light-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-roles--neutral-dark-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-roles--neutral-dark-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--neutral-dark-colorblind-1-linux.png b/...snapshots/storybook-color-functional-roles--neutral-dark-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--neutral-dark-high-contrast-1-linux.png b/...pshots/storybook-color-functional-roles--neutral-dark-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--neutral-dark-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-roles--neutral-dark-tritanopia-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-functional-roles--neutral-light-1-linux.png b/...k.test.ts-snapshots/storybook-color-functional-roles--neutral-light-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--neutral-light-colorblind-1-linux.png b/...napshots/storybook-color-functional-roles--neutral-light-colorblind-1-linux.png
diff --git a/...shots/storybook-color-functional-roles--neutral-light-high-contrast-1-linux.png b/...shots/storybook-color-functional-roles--neutral-light-high-contrast-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--neutral-light-tritanopia-1-linux.png b/...napshots/storybook-color-functional-roles--neutral-light-tritanopia-1-linux.png
diff --git a/...ybook.test.ts-snapshots/storybook-color-functional-roles--open-dark-1-linux.png b/...ybook.test.ts-snapshots/storybook-color-functional-roles--open-dark-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-roles--open-dark-colorblind-1-linux.png b/...ts-snapshots/storybook-color-functional-roles--open-dark-colorblind-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--open-dark-high-contrast-1-linux.png b/...snapshots/storybook-color-functional-roles--open-dark-high-contrast-1-linux.png
diff --git a/...ts-snapshots/storybook-color-functional-roles--open-dark-tritanopia-1-linux.png b/...ts-snapshots/storybook-color-functional-roles--open-dark-tritanopia-1-linux.png
diff --git a/...book.test.ts-snapshots/storybook-color-functional-roles--open-light-1-linux.png b/...book.test.ts-snapshots/storybook-color-functional-roles--open-light-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-roles--open-light-colorblind-1-linux.png b/...s-snapshots/storybook-color-functional-roles--open-light-colorblind-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--open-light-high-contrast-1-linux.png b/...napshots/storybook-color-functional-roles--open-light-high-contrast-1-linux.png
diff --git a/...s-snapshots/storybook-color-functional-roles--open-light-tritanopia-1-linux.png b/...s-snapshots/storybook-color-functional-roles--open-light-tritanopia-1-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-color-functional-roles--severe-dark-1-linux.png b/...ook.test.ts-snapshots/storybook-color-functional-roles--severe-dark-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--severe-dark-colorblind-1-linux.png b/...-snapshots/storybook-color-functional-roles--severe-dark-colorblind-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--severe-dark-high-contrast-1-linux.png b/...apshots/storybook-color-functional-roles--severe-dark-high-contrast-1-linux.png
diff --git a/...-snapshots/storybook-color-functional-roles--severe-dark-tritanopia-1-linux.png b/...-snapshots/storybook-color-functional-roles--severe-dark-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-roles--severe-light-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-roles--severe-light-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--severe-light-colorblind-1-linux.png b/...snapshots/storybook-color-functional-roles--severe-light-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--severe-light-high-contrast-1-linux.png b/...pshots/storybook-color-functional-roles--severe-light-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--severe-light-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-roles--severe-light-tritanopia-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-functional-roles--sponsors-dark-1-linux.png b/...k.test.ts-snapshots/storybook-color-functional-roles--sponsors-dark-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--sponsors-dark-colorblind-1-linux.png b/...napshots/storybook-color-functional-roles--sponsors-dark-colorblind-1-linux.png
diff --git a/...shots/storybook-color-functional-roles--sponsors-dark-high-contrast-1-linux.png b/...shots/storybook-color-functional-roles--sponsors-dark-high-contrast-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--sponsors-dark-tritanopia-1-linux.png b/...napshots/storybook-color-functional-roles--sponsors-dark-tritanopia-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-functional-roles--sponsors-light-1-linux.png b/....test.ts-snapshots/storybook-color-functional-roles--sponsors-light-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--sponsors-light-colorblind-1-linux.png b/...apshots/storybook-color-functional-roles--sponsors-light-colorblind-1-linux.png
diff --git a/...hots/storybook-color-functional-roles--sponsors-light-high-contrast-1-linux.png b/...hots/storybook-color-functional-roles--sponsors-light-high-contrast-1-linux.png
diff --git a/...apshots/storybook-color-functional-roles--sponsors-light-tritanopia-1-linux.png b/...apshots/storybook-color-functional-roles--sponsors-light-tritanopia-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-functional-roles--success-dark-1-linux.png b/...ok.test.ts-snapshots/storybook-color-functional-roles--success-dark-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--success-dark-colorblind-1-linux.png b/...snapshots/storybook-color-functional-roles--success-dark-colorblind-1-linux.png
diff --git a/...pshots/storybook-color-functional-roles--success-dark-high-contrast-1-linux.png b/...pshots/storybook-color-functional-roles--success-dark-high-contrast-1-linux.png
diff --git a/...snapshots/storybook-color-functional-roles--success-dark-tritanopia-1-linux.png b/...snapshots/storybook-color-functional-roles--success-dark-tritanopia-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-functional-roles--success-light-1-linux.png b/...k.test.ts-snapshots/storybook-color-functional-roles--success-light-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--success-light-colorblind-1-linux.png b/...napshots/storybook-color-functional-roles--success-light-colorblind-1-linux.png
diff --git a/...shots/storybook-color-functional-roles--success-light-high-contrast-1-linux.png b/...shots/storybook-color-functional-roles--success-light-high-contrast-1-linux.png
diff --git a/...napshots/storybook-color-functional-roles--success-light-tritanopia-1-linux.png b/...napshots/storybook-color-functional-roles--success-light-tritanopia-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-functional-shadows--shadows-dark-1-linux.png b/....test.ts-snapshots/storybook-color-functional-shadows--shadows-dark-1-linux.png
diff --git a/...apshots/storybook-color-functional-shadows--shadows-dark-colorblind-1-linux.png b/...apshots/storybook-color-functional-shadows--shadows-dark-colorblind-1-linux.png
diff --git a/...hots/storybook-color-functional-shadows--shadows-dark-high-contrast-1-linux.png b/...hots/storybook-color-functional-shadows--shadows-dark-high-contrast-1-linux.png
diff --git a/...apshots/storybook-color-functional-shadows--shadows-dark-tritanopia-1-linux.png b/...apshots/storybook-color-functional-shadows--shadows-dark-tritanopia-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-functional-shadows--shadows-light-1-linux.png b/...test.ts-snapshots/storybook-color-functional-shadows--shadows-light-1-linux.png
diff --git a/...pshots/storybook-color-functional-shadows--shadows-light-colorblind-1-linux.png b/...pshots/storybook-color-functional-shadows--shadows-light-colorblind-1-linux.png
diff --git a/...ots/storybook-color-functional-shadows--shadows-light-high-contrast-1-linux.png b/...ots/storybook-color-functional-shadows--shadows-light-high-contrast-1-linux.png
diff --git a/...pshots/storybook-color-functional-shadows--shadows-light-tritanopia-1-linux.png b/...pshots/storybook-color-functional-shadows--shadows-light-tritanopia-1-linux.png
diff --git a/...s/storybook.test.ts-snapshots/storybook-color-patterns--avatar-dark-1-linux.png b/...s/storybook.test.ts-snapshots/storybook-color-patterns--avatar-dark-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--avatar-dark-colorblind-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--avatar-dark-colorblind-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-patterns--avatar-dark-high-contrast-1-linux.png b/...st.ts-snapshots/storybook-color-patterns--avatar-dark-high-contrast-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--avatar-dark-tritanopia-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--avatar-dark-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-patterns--avatar-light-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-patterns--avatar-light-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--avatar-light-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--avatar-light-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--avatar-light-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--avatar-light-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--avatar-light-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--avatar-light-tritanopia-1-linux.png
diff --git a/...s/storybook.test.ts-snapshots/storybook-color-patterns--button-dark-1-linux.png b/...s/storybook.test.ts-snapshots/storybook-color-patterns--button-dark-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--button-dark-colorblind-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--button-dark-colorblind-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-patterns--button-dark-high-contrast-1-linux.png b/...st.ts-snapshots/storybook-color-patterns--button-dark-high-contrast-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--button-dark-tritanopia-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--button-dark-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-patterns--button-light-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-patterns--button-light-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--button-light-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--button-light-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--button-light-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--button-light-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--button-light-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--button-light-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-patterns--control-dark-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-patterns--control-dark-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--control-dark-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--control-dark-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--control-dark-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--control-dark-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--control-dark-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--control-dark-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-patterns--control-light-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-patterns--control-light-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--control-light-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--control-light-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--control-light-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-patterns--control-light-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--control-light-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--control-light-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-patterns--counter-dark-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-patterns--counter-dark-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--counter-dark-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--counter-dark-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--counter-dark-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--counter-dark-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--counter-dark-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--counter-dark-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-patterns--counter-light-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-patterns--counter-light-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--counter-light-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--counter-light-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--counter-light-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-patterns--counter-light-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--counter-light-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--counter-light-tritanopia-1-linux.png
diff --git a/...ts/storybook.test.ts-snapshots/storybook-color-patterns--focus-dark-1-linux.png b/...ts/storybook.test.ts-snapshots/storybook-color-patterns--focus-dark-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-patterns--focus-dark-colorblind-1-linux.png b/...k.test.ts-snapshots/storybook-color-patterns--focus-dark-colorblind-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--focus-dark-high-contrast-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--focus-dark-high-contrast-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-patterns--focus-dark-tritanopia-1-linux.png b/...k.test.ts-snapshots/storybook-color-patterns--focus-dark-tritanopia-1-linux.png
diff --git a/...s/storybook.test.ts-snapshots/storybook-color-patterns--focus-light-1-linux.png b/...s/storybook.test.ts-snapshots/storybook-color-patterns--focus-light-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--focus-light-colorblind-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--focus-light-colorblind-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-patterns--focus-light-high-contrast-1-linux.png b/...st.ts-snapshots/storybook-color-patterns--focus-light-high-contrast-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--focus-light-tritanopia-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--focus-light-tritanopia-1-linux.png
diff --git a/...s/storybook.test.ts-snapshots/storybook-color-patterns--header-dark-1-linux.png b/...s/storybook.test.ts-snapshots/storybook-color-patterns--header-dark-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--header-dark-colorblind-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--header-dark-colorblind-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-patterns--header-dark-high-contrast-1-linux.png b/...st.ts-snapshots/storybook-color-patterns--header-dark-high-contrast-1-linux.png
diff --git a/....test.ts-snapshots/storybook-color-patterns--header-dark-tritanopia-1-linux.png b/....test.ts-snapshots/storybook-color-patterns--header-dark-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-patterns--header-light-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-patterns--header-light-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--header-light-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--header-light-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--header-light-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--header-light-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--header-light-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--header-light-tritanopia-1-linux.png
diff --git a/...ots/storybook.test.ts-snapshots/storybook-color-patterns--menu-dark-1-linux.png b/...ots/storybook.test.ts-snapshots/storybook-color-patterns--menu-dark-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-patterns--menu-dark-colorblind-1-linux.png b/...ok.test.ts-snapshots/storybook-color-patterns--menu-dark-colorblind-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--menu-dark-high-contrast-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--menu-dark-high-contrast-1-linux.png
diff --git a/...ok.test.ts-snapshots/storybook-color-patterns--menu-dark-tritanopia-1-linux.png b/...ok.test.ts-snapshots/storybook-color-patterns--menu-dark-tritanopia-1-linux.png
diff --git a/...ts/storybook.test.ts-snapshots/storybook-color-patterns--menu-light-1-linux.png b/...ts/storybook.test.ts-snapshots/storybook-color-patterns--menu-light-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-patterns--menu-light-colorblind-1-linux.png b/...k.test.ts-snapshots/storybook-color-patterns--menu-light-colorblind-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--menu-light-high-contrast-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--menu-light-high-contrast-1-linux.png
diff --git a/...k.test.ts-snapshots/storybook-color-patterns--menu-light-tritanopia-1-linux.png b/...k.test.ts-snapshots/storybook-color-patterns--menu-light-tritanopia-1-linux.png
diff --git a/.../storybook.test.ts-snapshots/storybook-color-patterns--overlay-dark-1-linux.png b/.../storybook.test.ts-snapshots/storybook-color-patterns--overlay-dark-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--overlay-dark-colorblind-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--overlay-dark-colorblind-1-linux.png
diff --git a/...t.ts-snapshots/storybook-color-patterns--overlay-dark-high-contrast-1-linux.png b/...t.ts-snapshots/storybook-color-patterns--overlay-dark-high-contrast-1-linux.png
diff --git a/...test.ts-snapshots/storybook-color-patterns--overlay-dark-tritanopia-1-linux.png b/...test.ts-snapshots/storybook-color-patterns--overlay-dark-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-patterns--overlay-light-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-patterns--overlay-light-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--overlay-light-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--overlay-light-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--overlay-light-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-patterns--overlay-light-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--overlay-light-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--overlay-light-tritanopia-1-linux.png
diff --git a/...rybook.test.ts-snapshots/storybook-color-patterns--select-menu-dark-1-linux.png b/...rybook.test.ts-snapshots/storybook-color-patterns--select-menu-dark-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--select-menu-dark-colorblind-1-linux.png b/....ts-snapshots/storybook-color-patterns--select-menu-dark-colorblind-1-linux.png
diff --git a/...-snapshots/storybook-color-patterns--select-menu-dark-high-contrast-1-linux.png b/...-snapshots/storybook-color-patterns--select-menu-dark-high-contrast-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--select-menu-dark-tritanopia-1-linux.png b/....ts-snapshots/storybook-color-patterns--select-menu-dark-tritanopia-1-linux.png
diff --git a/...ybook.test.ts-snapshots/storybook-color-patterns--select-menu-light-1-linux.png b/...ybook.test.ts-snapshots/storybook-color-patterns--select-menu-light-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--select-menu-light-colorblind-1-linux.png b/...ts-snapshots/storybook-color-patterns--select-menu-light-colorblind-1-linux.png
diff --git a/...snapshots/storybook-color-patterns--select-menu-light-high-contrast-1-linux.png b/...snapshots/storybook-color-patterns--select-menu-light-high-contrast-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--select-menu-light-tritanopia-1-linux.png b/...ts-snapshots/storybook-color-patterns--select-menu-light-tritanopia-1-linux.png
diff --git a/...storybook.test.ts-snapshots/storybook-color-patterns--side-nav-dark-1-linux.png b/...storybook.test.ts-snapshots/storybook-color-patterns--side-nav-dark-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--side-nav-dark-colorblind-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--side-nav-dark-colorblind-1-linux.png
diff --git a/....ts-snapshots/storybook-color-patterns--side-nav-dark-high-contrast-1-linux.png b/....ts-snapshots/storybook-color-patterns--side-nav-dark-high-contrast-1-linux.png
diff --git a/...est.ts-snapshots/storybook-color-patterns--side-nav-dark-tritanopia-1-linux.png b/...est.ts-snapshots/storybook-color-patterns--side-nav-dark-tritanopia-1-linux.png
diff --git a/...torybook.test.ts-snapshots/storybook-color-patterns--side-nav-light-1-linux.png b/...torybook.test.ts-snapshots/storybook-color-patterns--side-nav-light-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-patterns--side-nav-light-colorblind-1-linux.png b/...st.ts-snapshots/storybook-color-patterns--side-nav-light-colorblind-1-linux.png
diff --git a/...ts-snapshots/storybook-color-patterns--side-nav-light-high-contrast-1-linux.png b/...ts-snapshots/storybook-color-patterns--side-nav-light-high-contrast-1-linux.png
diff --git a/...st.ts-snapshots/storybook-color-patterns--side-nav-light-tritanopia-1-linux.png b/...st.ts-snapshots/storybook-color-patterns--side-nav-light-tritanopia-1-linux.png
diff --git a/...ook.test.ts-snapshots/storybook-color-patterns--timeline-badge-dark-1-linux.png b/...ook.test.ts-snapshots/storybook-color-patterns--timeline-badge-dark-1-linux.png