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}` }, }