chore(Token): Add VRT to prep for CSS Module migration (#5232)

* VRT dev story * test(vrt): update snapshots * update snapshot comparison * test(vrt): update snapshots * update other token tests to reflect new format * test(vrt): update snapshots --------- Co-authored-by: randall-krauskopf <randall-krauskopf@users.noreply.github.com>
primer · Nov 5, 2024 · bc8be36 · bc8be36
1 parent 8cc14f7
commit bc8be36
Show file tree

Hide file tree

Showing 92 changed files with 78 additions and 223 deletions.
diff --git a/...st.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-colorblind-linux.png b/...st.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-colorblind-linux.png
diff --git a/...n.test.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-dimmed-linux.png b/...n.test.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-dimmed-linux.png
diff --git a/...ts-snapshots/Token-Default-Default-IssueLabelToken-dark-high-contrast-linux.png b/...ts-snapshots/Token-Default-Default-IssueLabelToken-dark-high-contrast-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-linux.png
diff --git a/...st.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-tritanopia-linux.png b/...st.ts-snapshots/Token-Default-Default-IssueLabelToken-dark-tritanopia-linux.png
diff --git a/...t.ts-snapshots/Token-Default-Default-IssueLabelToken-light-colorblind-linux.png b/...t.ts-snapshots/Token-Default-Default-IssueLabelToken-light-colorblind-linux.png
diff --git a/...s-snapshots/Token-Default-Default-IssueLabelToken-light-high-contrast-linux.png b/...s-snapshots/Token-Default-Default-IssueLabelToken-light-high-contrast-linux.png
diff --git a/...s/Token.test.ts-snapshots/Token-Default-Default-IssueLabelToken-light-linux.png b/...s/Token.test.ts-snapshots/Token-Default-Default-IssueLabelToken-light-linux.png
diff --git a/...t.ts-snapshots/Token-Default-Default-IssueLabelToken-light-tritanopia-linux.png b/...t.ts-snapshots/Token-Default-Default-IssueLabelToken-light-tritanopia-linux.png
diff --git a/...ponents/Token.test.ts-snapshots/Token-Default-Default-dark-colorblind-linux.png b/...ponents/Token.test.ts-snapshots/Token-Default-Default-dark-colorblind-linux.png
diff --git a/.../components/Token.test.ts-snapshots/Token-Default-Default-dark-dimmed-linux.png b/.../components/Token.test.ts-snapshots/Token-Default-Default-dark-dimmed-linux.png
diff --git a/...ents/Token.test.ts-snapshots/Token-Default-Default-dark-high-contrast-linux.png b/...ents/Token.test.ts-snapshots/Token-Default-Default-dark-high-contrast-linux.png
diff --git a/...apshots/components/Token.test.ts-snapshots/Token-Default-Default-dark-linux.png b/...apshots/components/Token.test.ts-snapshots/Token-Default-Default-dark-linux.png
diff --git a/...ponents/Token.test.ts-snapshots/Token-Default-Default-dark-tritanopia-linux.png b/...ponents/Token.test.ts-snapshots/Token-Default-Default-dark-tritanopia-linux.png
diff --git a/...onents/Token.test.ts-snapshots/Token-Default-Default-light-colorblind-linux.png b/...onents/Token.test.ts-snapshots/Token-Default-Default-light-colorblind-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Default-light-high-contrast-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Default-light-high-contrast-linux.png
diff --git a/...pshots/components/Token.test.ts-snapshots/Token-Default-Default-light-linux.png b/...pshots/components/Token.test.ts-snapshots/Token-Default-Default-light-linux.png
diff --git a/...onents/Token.test.ts-snapshots/Token-Default-Default-light-tritanopia-linux.png b/...onents/Token.test.ts-snapshots/Token-Default-Default-light-tritanopia-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-colorblind-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-colorblind-linux.png
diff --git a/...ponents/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-dimmed-linux.png b/...ponents/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-dimmed-linux.png
diff --git a/.../Token.test.ts-snapshots/Token-Default-Dev-Default-dark-high-contrast-linux.png b/.../Token.test.ts-snapshots/Token-Default-Dev-Default-dark-high-contrast-linux.png
diff --git a/...ots/components/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-linux.png b/...ots/components/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-tritanopia-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Dev-Default-dark-tritanopia-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Dev-Default-light-colorblind-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Dev-Default-light-colorblind-linux.png
diff --git a/...Token.test.ts-snapshots/Token-Default-Dev-Default-light-high-contrast-linux.png b/...Token.test.ts-snapshots/Token-Default-Dev-Default-light-high-contrast-linux.png
diff --git a/...ts/components/Token.test.ts-snapshots/Token-Default-Dev-Default-light-linux.png b/...ts/components/Token.test.ts-snapshots/Token-Default-Dev-Default-light-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Dev-Default-light-tritanopia-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Dev-Default-light-tritanopia-linux.png
diff --git a/...pshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-colorblind-linux.png b/...pshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-colorblind-linux.png
diff --git a/...-snapshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-dimmed-linux.png b/...-snapshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-dimmed-linux.png
diff --git a/...ots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-high-contrast-linux.png b/...ots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-high-contrast-linux.png
diff --git a/...test.ts-snapshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-linux.png b/...test.ts-snapshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-linux.png
diff --git a/...pshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-tritanopia-linux.png b/...pshots/Token-Default-IssueLabelToken-with-onRemove-fn-dark-tritanopia-linux.png
diff --git a/...shots/Token-Default-IssueLabelToken-with-onRemove-fn-light-colorblind-linux.png b/...shots/Token-Default-IssueLabelToken-with-onRemove-fn-light-colorblind-linux.png
diff --git a/...ts/Token-Default-IssueLabelToken-with-onRemove-fn-light-high-contrast-linux.png b/...ts/Token-Default-IssueLabelToken-with-onRemove-fn-light-high-contrast-linux.png
diff --git a/...est.ts-snapshots/Token-Default-IssueLabelToken-with-onRemove-fn-light-linux.png b/...est.ts-snapshots/Token-Default-IssueLabelToken-with-onRemove-fn-light-linux.png
diff --git a/...shots/Token-Default-IssueLabelToken-with-onRemove-fn-light-tritanopia-linux.png b/...shots/Token-Default-IssueLabelToken-with-onRemove-fn-light-tritanopia-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Large-Token-dark-colorblind-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Large-Token-dark-colorblind-linux.png
diff --git a/...ponents/Token.test.ts-snapshots/Token-Default-Large-Token-dark-dimmed-linux.png b/...ponents/Token.test.ts-snapshots/Token-Default-Large-Token-dark-dimmed-linux.png
diff --git a/.../Token.test.ts-snapshots/Token-Default-Large-Token-dark-high-contrast-linux.png b/.../Token.test.ts-snapshots/Token-Default-Large-Token-dark-high-contrast-linux.png
diff --git a/...ots/components/Token.test.ts-snapshots/Token-Default-Large-Token-dark-linux.png b/...ots/components/Token.test.ts-snapshots/Token-Default-Large-Token-dark-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Large-Token-dark-tritanopia-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Large-Token-dark-tritanopia-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Large-Token-light-colorblind-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Large-Token-light-colorblind-linux.png
diff --git a/...Token.test.ts-snapshots/Token-Default-Large-Token-light-high-contrast-linux.png b/...Token.test.ts-snapshots/Token-Default-Large-Token-light-high-contrast-linux.png
diff --git a/...ts/components/Token.test.ts-snapshots/Token-Default-Large-Token-light-linux.png b/...ts/components/Token.test.ts-snapshots/Token-Default-Large-Token-light-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Large-Token-light-tritanopia-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Large-Token-light-tritanopia-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Small-Token-dark-colorblind-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Small-Token-dark-colorblind-linux.png
diff --git a/...ponents/Token.test.ts-snapshots/Token-Default-Small-Token-dark-dimmed-linux.png b/...ponents/Token.test.ts-snapshots/Token-Default-Small-Token-dark-dimmed-linux.png
diff --git a/.../Token.test.ts-snapshots/Token-Default-Small-Token-dark-high-contrast-linux.png b/.../Token.test.ts-snapshots/Token-Default-Small-Token-dark-high-contrast-linux.png
diff --git a/...ots/components/Token.test.ts-snapshots/Token-Default-Small-Token-dark-linux.png b/...ots/components/Token.test.ts-snapshots/Token-Default-Small-Token-dark-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Small-Token-dark-tritanopia-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Small-Token-dark-tritanopia-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Small-Token-light-colorblind-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Small-Token-light-colorblind-linux.png
diff --git a/...Token.test.ts-snapshots/Token-Default-Small-Token-light-high-contrast-linux.png b/...Token.test.ts-snapshots/Token-Default-Small-Token-light-high-contrast-linux.png
diff --git a/...ts/components/Token.test.ts-snapshots/Token-Default-Small-Token-light-linux.png b/...ts/components/Token.test.ts-snapshots/Token-Default-Small-Token-light-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Small-Token-light-tritanopia-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Small-Token-light-tritanopia-linux.png
diff --git a/....ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-colorblind-linux.png b/....ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-colorblind-linux.png
diff --git a/...test.ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-dimmed-linux.png b/...test.ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-dimmed-linux.png
diff --git a/...-snapshots/Token-Default-Token-With-Leading-Visual-dark-high-contrast-linux.png b/...-snapshots/Token-Default-Token-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/.../Token.test.ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-linux.png b/.../Token.test.ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-linux.png
diff --git a/....ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-tritanopia-linux.png b/....ts-snapshots/Token-Default-Token-With-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...ts-snapshots/Token-Default-Token-With-Leading-Visual-light-colorblind-linux.png b/...ts-snapshots/Token-Default-Token-With-Leading-Visual-light-colorblind-linux.png
diff --git a/...snapshots/Token-Default-Token-With-Leading-Visual-light-high-contrast-linux.png b/...snapshots/Token-Default-Token-With-Leading-Visual-light-high-contrast-linux.png
diff --git a/...Token.test.ts-snapshots/Token-Default-Token-With-Leading-Visual-light-linux.png b/...Token.test.ts-snapshots/Token-Default-Token-With-Leading-Visual-light-linux.png
diff --git a/...ts-snapshots/Token-Default-Token-With-Leading-Visual-light-tritanopia-linux.png b/...ts-snapshots/Token-Default-Token-With-Leading-Visual-light-tritanopia-linux.png
diff --git a/...est.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-colorblind-linux.png b/...est.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-colorblind-linux.png
diff --git a/...en.test.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-dimmed-linux.png b/...en.test.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-dimmed-linux.png
diff --git a/....ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-high-contrast-linux.png b/....ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-high-contrast-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-linux.png b/...nts/Token.test.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-linux.png
diff --git a/...est.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-tritanopia-linux.png b/...est.ts-snapshots/Token-Default-Token-with-onRemove-fn-dark-tritanopia-linux.png
diff --git a/...st.ts-snapshots/Token-Default-Token-with-onRemove-fn-light-colorblind-linux.png b/...st.ts-snapshots/Token-Default-Token-with-onRemove-fn-light-colorblind-linux.png
diff --git a/...ts-snapshots/Token-Default-Token-with-onRemove-fn-light-high-contrast-linux.png b/...ts-snapshots/Token-Default-Token-with-onRemove-fn-light-high-contrast-linux.png
diff --git a/...ts/Token.test.ts-snapshots/Token-Default-Token-with-onRemove-fn-light-linux.png b/...ts/Token.test.ts-snapshots/Token-Default-Token-with-onRemove-fn-light-linux.png
diff --git a/...st.ts-snapshots/Token-Default-Token-with-onRemove-fn-light-tritanopia-linux.png b/...st.ts-snapshots/Token-Default-Token-with-onRemove-fn-light-tritanopia-linux.png
diff --git a/...s/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-colorblind-linux.png b/...s/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-colorblind-linux.png
diff --git a/...nents/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-dimmed-linux.png b/...nents/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-dimmed-linux.png
diff --git a/...oken.test.ts-snapshots/Token-Default-X-Large-Token-dark-high-contrast-linux.png b/...oken.test.ts-snapshots/Token-Default-X-Large-Token-dark-high-contrast-linux.png
diff --git a/...s/components/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-linux.png b/...s/components/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-linux.png
diff --git a/...s/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-tritanopia-linux.png b/...s/Token.test.ts-snapshots/Token-Default-X-Large-Token-dark-tritanopia-linux.png
diff --git a/.../Token.test.ts-snapshots/Token-Default-X-Large-Token-light-colorblind-linux.png b/.../Token.test.ts-snapshots/Token-Default-X-Large-Token-light-colorblind-linux.png
diff --git a/...ken.test.ts-snapshots/Token-Default-X-Large-Token-light-high-contrast-linux.png b/...ken.test.ts-snapshots/Token-Default-X-Large-Token-light-high-contrast-linux.png
diff --git a/.../components/Token.test.ts-snapshots/Token-Default-X-Large-Token-light-linux.png b/.../components/Token.test.ts-snapshots/Token-Default-X-Large-Token-light-linux.png
diff --git a/.../Token.test.ts-snapshots/Token-Default-X-Large-Token-light-tritanopia-linux.png b/.../Token.test.ts-snapshots/Token-Default-X-Large-Token-light-tritanopia-linux.png
diff --git a/...hots/components/Token.test.ts-snapshots/Token-Default-dark-colorblind-linux.png b/...hots/components/Token.test.ts-snapshots/Token-Default-dark-colorblind-linux.png
diff --git a/...napshots/components/Token.test.ts-snapshots/Token-Default-dark-dimmed-linux.png b/...napshots/components/Token.test.ts-snapshots/Token-Default-dark-dimmed-linux.png
diff --git a/...s/components/Token.test.ts-snapshots/Token-Default-dark-high-contrast-linux.png b/...s/components/Token.test.ts-snapshots/Token-Default-dark-high-contrast-linux.png
diff --git a/...right/snapshots/components/Token.test.ts-snapshots/Token-Default-dark-linux.png b/...right/snapshots/components/Token.test.ts-snapshots/Token-Default-dark-linux.png
diff --git a/...hots/components/Token.test.ts-snapshots/Token-Default-dark-tritanopia-linux.png b/...hots/components/Token.test.ts-snapshots/Token-Default-dark-tritanopia-linux.png
diff --git a/...ots/components/Token.test.ts-snapshots/Token-Default-light-colorblind-linux.png b/...ots/components/Token.test.ts-snapshots/Token-Default-light-colorblind-linux.png
diff --git a/.../components/Token.test.ts-snapshots/Token-Default-light-high-contrast-linux.png b/.../components/Token.test.ts-snapshots/Token-Default-light-high-contrast-linux.png
diff --git a/...ight/snapshots/components/Token.test.ts-snapshots/Token-Default-light-linux.png b/...ight/snapshots/components/Token.test.ts-snapshots/Token-Default-light-linux.png
diff --git a/...ots/components/Token.test.ts-snapshots/Token-Default-light-tritanopia-linux.png b/...ots/components/Token.test.ts-snapshots/Token-Default-light-tritanopia-linux.png
diff --git a/e2e/components/Token.test.ts b/e2e/components/Token.test.ts
@@ -2,228 +2,73 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Token', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Small Token', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--small-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Small Token.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--small-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Large Token', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--large-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Large Token.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--large-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Xlarge Token', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--x-large-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Xlarge Token.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--x-large-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-token--default',
+  },
+  {
+    title: 'Dev Default',
+    id: 'components-token-dev--dev-default',
+  },
+  {
+    title: 'Small Token',
+    id: 'components-token-features--small-token',
+  },
+  {
+    title: 'Large Token',
+    id: 'components-token-features--large-token',
+  },
+  {
+    title: 'X Large Token',
+    id: 'components-token-features--x-large-token',
+  },
+  {
+    title: 'Token With Leading Visual',
+    id: 'components-token-features--token-with-leading-visual',
+  },
+  {
+    title: 'Token with onRemove fn',
+    id: 'components-token-features--token-with-on-remove-fn',
+  },
+  {
+    title: 'Default IssueLabelToken',
+    id: 'components-token-features--default-issue-label-token',
+  },
+  {
+    title: 'IssueLabelToken with onRemove fn',
+    id: 'components-token-features--issue-label-token-with-on-remove-fn',
+  },
+]
 
-  test.describe('Token With Leading Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--token-with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Token With Leading Visual.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--token-with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Token With On Remove Fn', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--token-with-on-remove-fn',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Token With On Remove Fn.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--token-with-on-remove-fn',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Default Issue Label Token', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--default-issue-label-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Default Issue Label Token.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--default-issue-label-token',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Issue Label Token With On Remove Fn', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--issue-label-token-with-on-remove-fn',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Token.Issue Label Token With On Remove Fn.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-token-features--issue-label-token-with-on-remove-fn',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('Token', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Token.Default.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
 })
diff --git a/packages/react/src/Token/Token.dev.stories.tsx b/packages/react/src/Token/Token.dev.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Token from './Token'
+
+export default {
+  title: 'Components/Token/Dev',
+  component: Token,
+} as Meta<typeof Token>
+
+export const DevDefault = () => <Token text="token" sx={{color: 'red'}} style={{border: '2px solid blue'}} />