From 1d7def1467d7bfeae4d7ce53f056d6cdaf774d14 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann
Date: Wed, 11 Dec 2024 18:57:00 +0100
Subject: [PATCH] add composite border token (#1118)
* add composite border token
* add changeset
* change borderWith values to px
* added remaining borders and story
* github-actions[bot] Regenerated snapshots
---------
Co-authored-by: lukasoppermann
---
.changeset/shaggy-mails-clean.md | 5 +
...ches-dark-border-accent-emphasis-linux.png | Bin 0 -> 568 bytes
...watches-dark-border-accent-muted-linux.png | Bin 0 -> 568 bytes
...s-dark-border-attention-emphasis-linux.png | Bin 0 -> 568 bytes
...ches-dark-border-attention-muted-linux.png | Bin 0 -> 568 bytes
...ches-dark-border-closed-emphasis-linux.png | Bin 0 -> 568 bytes
...watches-dark-border-closed-muted-linux.png | Bin 0 -> 568 bytes
...ches-dark-border-danger-emphasis-linux.png | Bin 0 -> 568 bytes
...watches-dark-border-danger-muted-linux.png | Bin 0 -> 568 bytes
...lor-swatches-dark-border-default-linux.png | Bin 0 -> 568 bytes
...or-swatches-dark-border-disabled-linux.png | Bin 0 -> 568 bytes
...atches-dark-border-done-emphasis-linux.png | Bin 0 -> 568 bytes
...-swatches-dark-border-done-muted-linux.png | Bin 0 -> 568 bytes
...or-swatches-dark-border-emphasis-linux.png | Bin 0 -> 568 bytes
...color-swatches-dark-border-muted-linux.png | Bin 0 -> 568 bytes
...hes-dark-border-neutral-emphasis-linux.png | Bin 0 -> 568 bytes
...atches-dark-border-neutral-muted-linux.png | Bin 0 -> 568 bytes
...atches-dark-border-open-emphasis-linux.png | Bin 0 -> 568 bytes
...-swatches-dark-border-open-muted-linux.png | Bin 0 -> 568 bytes
...ches-dark-border-severe-emphasis-linux.png | Bin 0 -> 568 bytes
...watches-dark-border-severe-muted-linux.png | Bin 0 -> 568 bytes
...es-dark-border-sponsors-emphasis-linux.png | Bin 0 -> 568 bytes
...tches-dark-border-sponsors-muted-linux.png | Bin 0 -> 568 bytes
...hes-dark-border-success-emphasis-linux.png | Bin 0 -> 568 bytes
...atches-dark-border-success-muted-linux.png | Bin 0 -> 568 bytes
...swatches-dark-border-transparent-linux.png | Bin 0 -> 568 bytes
...ches-dark-border-upsell-emphasis-linux.png | Bin 0 -> 568 bytes
...watches-dark-border-upsell-muted-linux.png | Bin 0 -> 568 bytes
...olorblind-border-accent-emphasis-linux.png | Bin 0 -> 568 bytes
...k-colorblind-border-accent-muted-linux.png | Bin 0 -> 568 bytes
...rblind-border-attention-emphasis-linux.png | Bin 0 -> 568 bytes
...olorblind-border-attention-muted-linux.png | Bin 0 -> 568 bytes
...olorblind-border-closed-emphasis-linux.png | Bin 0 -> 568 bytes
...k-colorblind-border-closed-muted-linux.png | Bin 0 -> 568 bytes
...olorblind-border-danger-emphasis-linux.png | Bin 0 -> 568 bytes
...k-colorblind-border-danger-muted-linux.png | Bin 0 -> 568 bytes
...s-dark-colorblind-border-default-linux.png | Bin 0 -> 568 bytes
...-dark-colorblind-border-disabled-linux.png | Bin 0 -> 568 bytes
...-colorblind-border-done-emphasis-linux.png | Bin 0 -> 568 bytes
...ark-colorblind-border-done-muted-linux.png | Bin 0 -> 568 bytes
...-dark-colorblind-border-emphasis-linux.png | Bin 0 -> 568 bytes
...hes-dark-colorblind-border-muted-linux.png | Bin 0 -> 568 bytes
...lorblind-border-neutral-emphasis-linux.png | Bin 0 -> 568 bytes
...-colorblind-border-neutral-muted-linux.png | Bin 0 -> 568 bytes
...-colorblind-border-open-emphasis-linux.png | Bin 0 -> 568 bytes
...ark-colorblind-border-open-muted-linux.png | Bin 0 -> 568 bytes
...olorblind-border-severe-emphasis-linux.png | Bin 0 -> 568 bytes
...k-colorblind-border-severe-muted-linux.png | Bin 0 -> 568 bytes
...orblind-border-sponsors-emphasis-linux.png | Bin 0 -> 568 bytes
...colorblind-border-sponsors-muted-linux.png | Bin 0 -> 568 bytes
...lorblind-border-success-emphasis-linux.png | Bin 0 -> 568 bytes
...-colorblind-border-success-muted-linux.png | Bin 0 -> 568 bytes
...rk-colorblind-border-transparent-linux.png | Bin 0 -> 568 bytes
...olorblind-border-upsell-emphasis-linux.png | Bin 0 -> 568 bytes
...k-colorblind-border-upsell-muted-linux.png | Bin 0 -> 568 bytes
...-contrast-border-accent-emphasis-linux.png | Bin 0 -> 568 bytes
...igh-contrast-border-accent-muted-linux.png | Bin 0 -> 568 bytes
...ntrast-border-attention-emphasis-linux.png | Bin 0 -> 568 bytes
...-contrast-border-attention-muted-linux.png | Bin 0 -> 568 bytes
...-contrast-border-closed-emphasis-linux.png | Bin 0 -> 568 bytes
...igh-contrast-border-closed-muted-linux.png | Bin 0 -> 568 bytes
...-contrast-border-danger-emphasis-linux.png | Bin 0 -> 568 bytes
...igh-contrast-border-danger-muted-linux.png | Bin 0 -> 568 bytes
...ark-high-contrast-border-default-linux.png | Bin 0 -> 568 bytes
...rk-high-contrast-border-disabled-linux.png | Bin 0 -> 568 bytes
...gh-contrast-border-done-emphasis-linux.png | Bin 0 -> 568 bytes
...-high-contrast-border-done-muted-linux.png | Bin 0 -> 568 bytes
...rk-high-contrast-border-emphasis-linux.png | Bin 0 -> 568 bytes
...-dark-high-contrast-border-muted-linux.png | Bin 0 -> 568 bytes
...contrast-border-neutral-emphasis-linux.png | Bin 0 -> 568 bytes
...gh-contrast-border-neutral-muted-linux.png | Bin 0 -> 568 bytes
...gh-contrast-border-open-emphasis-linux.png | Bin 0 -> 568 bytes
...-high-contrast-border-open-muted-linux.png | Bin 0 -> 568 bytes
...-contrast-border-severe-emphasis-linux.png | Bin 0 -> 568 bytes
...igh-contrast-border-severe-muted-linux.png | Bin 0 -> 568 bytes
...ontrast-border-sponsors-emphasis-linux.png | Bin 0 -> 568 bytes
...h-contrast-border-sponsors-muted-linux.png | Bin 0 -> 568 bytes
...contrast-border-success-emphasis-linux.png | Bin 0 -> 568 bytes
...gh-contrast-border-success-muted-linux.png | Bin 0 -> 568 bytes
...high-contrast-border-transparent-linux.png | Bin 0 -> 568 bytes
...-contrast-border-upsell-emphasis-linux.png | Bin 0 -> 568 bytes
...igh-contrast-border-upsell-muted-linux.png | Bin 0 -> 568 bytes
...ritanopia-border-accent-emphasis-linux.png | Bin 0 -> 568 bytes
...k-tritanopia-border-accent-muted-linux.png | Bin 0 -> 568 bytes
...anopia-border-attention-emphasis-linux.png | Bin 0 -> 568 bytes
...ritanopia-border-attention-muted-linux.png | Bin 0 -> 568 bytes
...ritanopia-border-closed-emphasis-linux.png | Bin 0 -> 568 bytes
...k-tritanopia-border-closed-muted-linux.png | Bin 0 -> 568 bytes
...ritanopia-border-danger-emphasis-linux.png | Bin 0 -> 568 bytes
...k-tritanopia-border-danger-muted-linux.png | Bin 0 -> 568 bytes
...s-dark-tritanopia-border-default-linux.png | Bin 0 -> 568 bytes
...-dark-tritanopia-border-disabled-linux.png | Bin 0 -> 568 bytes
...-tritanopia-border-done-emphasis-linux.png | Bin 0 -> 568 bytes
...ark-tritanopia-border-done-muted-linux.png | Bin 0 -> 568 bytes
...-dark-tritanopia-border-emphasis-linux.png | Bin 0 -> 568 bytes
...hes-dark-tritanopia-border-muted-linux.png | Bin 0 -> 568 bytes
...itanopia-border-neutral-emphasis-linux.png | Bin 0 -> 568 bytes
...-tritanopia-border-neutral-muted-linux.png | Bin 0 -> 568 bytes
...-tritanopia-border-open-emphasis-linux.png | Bin 0 -> 568 bytes
...ark-tritanopia-border-open-muted-linux.png | Bin 0 -> 568 bytes
...ritanopia-border-severe-emphasis-linux.png | Bin 0 -> 568 bytes
...k-tritanopia-border-severe-muted-linux.png | Bin 0 -> 568 bytes
...tanopia-border-sponsors-emphasis-linux.png | Bin 0 -> 568 bytes
...tritanopia-border-sponsors-muted-linux.png | Bin 0 -> 568 bytes
...itanopia-border-success-emphasis-linux.png | Bin 0 -> 568 bytes
...-tritanopia-border-success-muted-linux.png | Bin 0 -> 568 bytes
...rk-tritanopia-border-transparent-linux.png | Bin 0 -> 568 bytes
...ritanopia-border-upsell-emphasis-linux.png | Bin 0 -> 568 bytes
...k-tritanopia-border-upsell-muted-linux.png | Bin 0 -> 568 bytes
...hes-light-border-accent-emphasis-linux.png | Bin 0 -> 566 bytes
...atches-light-border-accent-muted-linux.png | Bin 0 -> 566 bytes
...-light-border-attention-emphasis-linux.png | Bin 0 -> 566 bytes
...hes-light-border-attention-muted-linux.png | Bin 0 -> 566 bytes
...hes-light-border-closed-emphasis-linux.png | Bin 0 -> 566 bytes
...atches-light-border-closed-muted-linux.png | Bin 0 -> 566 bytes
...hes-light-border-danger-emphasis-linux.png | Bin 0 -> 566 bytes
...atches-light-border-danger-muted-linux.png | Bin 0 -> 566 bytes
...or-swatches-light-border-default-linux.png | Bin 0 -> 566 bytes
...r-swatches-light-border-disabled-linux.png | Bin 0 -> 566 bytes
...tches-light-border-done-emphasis-linux.png | Bin 0 -> 566 bytes
...swatches-light-border-done-muted-linux.png | Bin 0 -> 566 bytes
...r-swatches-light-border-emphasis-linux.png | Bin 0 -> 566 bytes
...olor-swatches-light-border-muted-linux.png | Bin 0 -> 566 bytes
...es-light-border-neutral-emphasis-linux.png | Bin 0 -> 566 bytes
...tches-light-border-neutral-muted-linux.png | Bin 0 -> 566 bytes
...tches-light-border-open-emphasis-linux.png | Bin 0 -> 566 bytes
...swatches-light-border-open-muted-linux.png | Bin 0 -> 566 bytes
...hes-light-border-severe-emphasis-linux.png | Bin 0 -> 566 bytes
...atches-light-border-severe-muted-linux.png | Bin 0 -> 566 bytes
...s-light-border-sponsors-emphasis-linux.png | Bin 0 -> 566 bytes
...ches-light-border-sponsors-muted-linux.png | Bin 0 -> 566 bytes
...es-light-border-success-emphasis-linux.png | Bin 0 -> 566 bytes
...tches-light-border-success-muted-linux.png | Bin 0 -> 566 bytes
...watches-light-border-transparent-linux.png | Bin 0 -> 566 bytes
...hes-light-border-upsell-emphasis-linux.png | Bin 0 -> 566 bytes
...atches-light-border-upsell-muted-linux.png | Bin 0 -> 566 bytes
...olorblind-border-accent-emphasis-linux.png | Bin 0 -> 566 bytes
...t-colorblind-border-accent-muted-linux.png | Bin 0 -> 566 bytes
...rblind-border-attention-emphasis-linux.png | Bin 0 -> 566 bytes
...olorblind-border-attention-muted-linux.png | Bin 0 -> 566 bytes
...olorblind-border-closed-emphasis-linux.png | Bin 0 -> 566 bytes
...t-colorblind-border-closed-muted-linux.png | Bin 0 -> 566 bytes
...olorblind-border-danger-emphasis-linux.png | Bin 0 -> 566 bytes
...t-colorblind-border-danger-muted-linux.png | Bin 0 -> 566 bytes
...-light-colorblind-border-default-linux.png | Bin 0 -> 566 bytes
...light-colorblind-border-disabled-linux.png | Bin 0 -> 566 bytes
...-colorblind-border-done-emphasis-linux.png | Bin 0 -> 566 bytes
...ght-colorblind-border-done-muted-linux.png | Bin 0 -> 566 bytes
...light-colorblind-border-emphasis-linux.png | Bin 0 -> 566 bytes
...es-light-colorblind-border-muted-linux.png | Bin 0 -> 566 bytes
...lorblind-border-neutral-emphasis-linux.png | Bin 0 -> 566 bytes
...-colorblind-border-neutral-muted-linux.png | Bin 0 -> 566 bytes
...-colorblind-border-open-emphasis-linux.png | Bin 0 -> 566 bytes
...ght-colorblind-border-open-muted-linux.png | Bin 0 -> 566 bytes
...olorblind-border-severe-emphasis-linux.png | Bin 0 -> 566 bytes
...t-colorblind-border-severe-muted-linux.png | Bin 0 -> 566 bytes
...orblind-border-sponsors-emphasis-linux.png | Bin 0 -> 566 bytes
...colorblind-border-sponsors-muted-linux.png | Bin 0 -> 566 bytes
...lorblind-border-success-emphasis-linux.png | Bin 0 -> 566 bytes
...-colorblind-border-success-muted-linux.png | Bin 0 -> 566 bytes
...ht-colorblind-border-transparent-linux.png | Bin 0 -> 566 bytes
...olorblind-border-upsell-emphasis-linux.png | Bin 0 -> 566 bytes
...t-colorblind-border-upsell-muted-linux.png | Bin 0 -> 566 bytes
...-contrast-border-accent-emphasis-linux.png | Bin 0 -> 566 bytes
...igh-contrast-border-accent-muted-linux.png | Bin 0 -> 566 bytes
...ntrast-border-attention-emphasis-linux.png | Bin 0 -> 566 bytes
...-contrast-border-attention-muted-linux.png | Bin 0 -> 566 bytes
...-contrast-border-closed-emphasis-linux.png | Bin 0 -> 566 bytes
...igh-contrast-border-closed-muted-linux.png | Bin 0 -> 566 bytes
...-contrast-border-danger-emphasis-linux.png | Bin 0 -> 566 bytes
...igh-contrast-border-danger-muted-linux.png | Bin 0 -> 566 bytes
...ght-high-contrast-border-default-linux.png | Bin 0 -> 566 bytes
...ht-high-contrast-border-disabled-linux.png | Bin 0 -> 566 bytes
...gh-contrast-border-done-emphasis-linux.png | Bin 0 -> 566 bytes
...-high-contrast-border-done-muted-linux.png | Bin 0 -> 566 bytes
...ht-high-contrast-border-emphasis-linux.png | Bin 0 -> 566 bytes
...light-high-contrast-border-muted-linux.png | Bin 0 -> 566 bytes
...contrast-border-neutral-emphasis-linux.png | Bin 0 -> 566 bytes
...gh-contrast-border-neutral-muted-linux.png | Bin 0 -> 566 bytes
...gh-contrast-border-open-emphasis-linux.png | Bin 0 -> 566 bytes
...-high-contrast-border-open-muted-linux.png | Bin 0 -> 566 bytes
...-contrast-border-severe-emphasis-linux.png | Bin 0 -> 566 bytes
...igh-contrast-border-severe-muted-linux.png | Bin 0 -> 566 bytes
...ontrast-border-sponsors-emphasis-linux.png | Bin 0 -> 566 bytes
...h-contrast-border-sponsors-muted-linux.png | Bin 0 -> 566 bytes
...contrast-border-success-emphasis-linux.png | Bin 0 -> 566 bytes
...gh-contrast-border-success-muted-linux.png | Bin 0 -> 566 bytes
...high-contrast-border-transparent-linux.png | Bin 0 -> 566 bytes
...-contrast-border-upsell-emphasis-linux.png | Bin 0 -> 566 bytes
...igh-contrast-border-upsell-muted-linux.png | Bin 0 -> 566 bytes
...ritanopia-border-accent-emphasis-linux.png | Bin 0 -> 566 bytes
...t-tritanopia-border-accent-muted-linux.png | Bin 0 -> 566 bytes
...anopia-border-attention-emphasis-linux.png | Bin 0 -> 566 bytes
...ritanopia-border-attention-muted-linux.png | Bin 0 -> 566 bytes
...ritanopia-border-closed-emphasis-linux.png | Bin 0 -> 566 bytes
...t-tritanopia-border-closed-muted-linux.png | Bin 0 -> 566 bytes
...ritanopia-border-danger-emphasis-linux.png | Bin 0 -> 566 bytes
...t-tritanopia-border-danger-muted-linux.png | Bin 0 -> 566 bytes
...-light-tritanopia-border-default-linux.png | Bin 0 -> 566 bytes
...light-tritanopia-border-disabled-linux.png | Bin 0 -> 566 bytes
...-tritanopia-border-done-emphasis-linux.png | Bin 0 -> 566 bytes
...ght-tritanopia-border-done-muted-linux.png | Bin 0 -> 566 bytes
...light-tritanopia-border-emphasis-linux.png | Bin 0 -> 566 bytes
...es-light-tritanopia-border-muted-linux.png | Bin 0 -> 566 bytes
...itanopia-border-neutral-emphasis-linux.png | Bin 0 -> 566 bytes
...-tritanopia-border-neutral-muted-linux.png | Bin 0 -> 566 bytes
...-tritanopia-border-open-emphasis-linux.png | Bin 0 -> 566 bytes
...ght-tritanopia-border-open-muted-linux.png | Bin 0 -> 566 bytes
...ritanopia-border-severe-emphasis-linux.png | Bin 0 -> 566 bytes
...t-tritanopia-border-severe-muted-linux.png | Bin 0 -> 566 bytes
...tanopia-border-sponsors-emphasis-linux.png | Bin 0 -> 566 bytes
...tritanopia-border-sponsors-muted-linux.png | Bin 0 -> 566 bytes
...itanopia-border-success-emphasis-linux.png | Bin 0 -> 566 bytes
...-tritanopia-border-success-muted-linux.png | Bin 0 -> 566 bytes
...ht-tritanopia-border-transparent-linux.png | Bin 0 -> 566 bytes
...ritanopia-border-upsell-emphasis-linux.png | Bin 0 -> 566 bytes
...t-tritanopia-border-upsell-muted-linux.png | Bin 0 -> 566 bytes
.../stories/Border/Border.stories.tsx | 48 ++++
.../storybook/stories/Size/Border.stories.tsx | 1 -
.../ColorPreview/ColorPreview.tsx | 3 +
scripts/buildTokens.ts | 2 +-
scripts/themes.config.ts | 39 ++-
src/primerStyleDictionary.ts | 7 +-
src/tokens/functional/border/border.json5 | 224 ++++++++++++++++++
.../color/dark/primitives-dark.json5 | 1 -
src/tokens/functional/size/border.json5 | 14 +-
src/transformers/borderToCss.test.ts | 2 +-
src/transformers/borderToCss.ts | 4 +-
228 files changed, 330 insertions(+), 20 deletions(-)
create mode 100644 .changeset/shaggy-mails-clean.md
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-high-contrast-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-tritanopia-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-high-contrast-border-upsell-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-accent-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-accent-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-attention-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-attention-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-closed-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-closed-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-danger-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-danger-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-default-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-disabled-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-done-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-done-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-neutral-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-neutral-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-open-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-open-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-severe-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-severe-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-sponsors-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-sponsors-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-success-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-success-muted-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-transparent-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-upsell-emphasis-linux.png
create mode 100644 .playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-tritanopia-border-upsell-muted-linux.png
create mode 100644 docs/storybook/stories/Border/Border.stories.tsx
diff --git a/.changeset/shaggy-mails-clean.md b/.changeset/shaggy-mails-clean.md
new file mode 100644
index 000000000..067c56017
--- /dev/null
+++ b/.changeset/shaggy-mails-clean.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Adding composite tokens for borders
diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-accent-emphasis-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-border-accent-emphasis-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..2320144ad70c5060211745864e292ba6a20386f6
GIT binary patch
literal 568
zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8*@_$r+7LgMk!dage(c!@6@aFM;e&o-U3d
z6?5KRR%B#QU^rlKKsn$`zE=p%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
Xp%Tu#L_r;eEdNop-KMwvrB9BwdI
X {
+ return (
+ <>
+ {borders.map(border => (
+
+ ))}
+ >
+ )
+}
+
+const roleBorders = [
+ 'accent',
+ 'success',
+ 'open',
+ 'danger',
+ 'closed',
+ 'attention',
+ 'severe',
+ 'done',
+ 'upsell',
+ 'sponsors',
+ 'neutral',
+].flatMap(border => [`border-${border}-emphasis`, `border-${border}-muted`])
+
+export const Roles = () => {
+ return (
+ <>
+ {roleBorders.map(border => (
+
+ ))}
+ >
+ )
+}
diff --git a/docs/storybook/stories/Size/Border.stories.tsx b/docs/storybook/stories/Size/Border.stories.tsx
index 8c8fa6ffc..260707c33 100644
--- a/docs/storybook/stories/Size/Border.stories.tsx
+++ b/docs/storybook/stories/Size/Border.stories.tsx
@@ -1,6 +1,5 @@
import React from 'react'
// eslint-disable-next-line import/extensions
-import sizeTokens from '../../../../dist/docs/functional/size/border.json'
import {SizeTokenSwatch} from '../StorybookComponents/SizeTokenSwatch/SizeTokenSwatch'
import {DataTable, Table} from '@primer/react/drafts'
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
diff --git a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
index 6da553bcf..9dbf50a43 100644
--- a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
+++ b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
@@ -5,6 +5,7 @@ import './ColorPreview.css'
export type ColorPreviewProps = {
textColor?: boolean
borderColor?: boolean
+ border?: boolean
bgColor?: boolean
canvasColor?: string
color?: string
@@ -16,6 +17,7 @@ export type ColorPreviewProps = {
export function ColorPreview({
textColor,
+ border,
borderColor,
bgColor,
canvasColor,
@@ -34,6 +36,7 @@ export function ColorPreview({
)}
{borderColor && }
+ {border && }
{bgColor && (
{
},
})
- const expectedOutput = '#000000 solid 1px'
+ const expectedOutput = '1px solid #000000'
expect(borderToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
})
diff --git a/src/transformers/borderToCss.ts b/src/transformers/borderToCss.ts
index a955c5ee4..9c0edf635 100644
--- a/src/transformers/borderToCss.ts
+++ b/src/transformers/borderToCss.ts
@@ -36,7 +36,7 @@ export const borderToCss: Transform = {
`Invalid border token property ${JSON.stringify(value)}. Must be an object with color, width and style properties.`,
)
}
- /* color | style | width */
- return `${value.color} ${value.style} ${value.width}`
+ /* width | style | color */
+ return `${value.width} ${value.style} ${value.color}`
},
}