From 52c3c41ae8ed82866945c3d268f63b7a35ad1038 Mon Sep 17 00:00:00 2001 From: martascorreia Date: Mon, 8 Jun 2026 17:09:49 +0100 Subject: [PATCH 1/2] fix: screenshot tests inverted backgrounds --- .../docs/src/stories/components/badge.test.stories.ts | 2 +- .../docs/src/stories/components/button.test.stories.ts | 10 +++++----- .../src/stories/components/carousel.test.stories.ts | 2 +- .../src/stories/components/divider.test.stories.ts | 2 +- .../src/stories/components/icon.default.stories.ts | 4 ++-- .../docs/src/stories/components/icon.status.stories.ts | 2 +- .../docs/src/stories/components/icon.test.stories.ts | 6 +++--- .../docs/src/stories/components/link.test.stories.ts | 4 ++-- .../docs/src/stories/components/loader.test.stories.ts | 2 +- .../src/stories/components/spinner.test.stories.ts | 2 +- packages/docs/src/stories/packages/tokens/Usage.mdx | 2 +- .../docs/src/stories/styles/container.test.stories.ts | 6 +++--- .../docs/src/stories/styles/display.test.stories.ts | 2 +- .../src/stories/styles/interactive.test.stories.ts | 2 +- .../docs/src/stories/styles/leadtext.test.stories.ts | 2 +- packages/docs/src/stories/styles/list.test.stories.ts | 8 ++++---- packages/docs/src/stories/styles/meta.test.stories.ts | 4 ++-- .../docs/src/stories/styles/paragraph.test.stories.ts | 2 +- packages/docs/src/stories/styles/prose.test.stories.ts | 2 +- 19 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/docs/src/stories/components/badge.test.stories.ts b/packages/docs/src/stories/components/badge.test.stories.ts index 5b3a87fdc8..01b988342f 100644 --- a/packages/docs/src/stories/components/badge.test.stories.ts +++ b/packages/docs/src/stories/components/badge.test.stories.ts @@ -61,7 +61,7 @@ export const VariantAndInverted = { options: { templateBackgrounds: { alternate: 'y', - colors: ['', 'rgba(var(--sd-color-primary))'] + colors: ['', 'rgba(var(--sd-color-background-primary))'] } } }); diff --git a/packages/docs/src/stories/components/button.test.stories.ts b/packages/docs/src/stories/components/button.test.stories.ts index 2059b82bcf..c0501f8315 100644 --- a/packages/docs/src/stories/components/button.test.stories.ts +++ b/packages/docs/src/stories/components/button.test.stories.ts @@ -58,7 +58,7 @@ export const VariantAndInverted = { options: { templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } }); @@ -85,7 +85,7 @@ export const Loading = { title: 'disabled=false', templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } })} @@ -104,7 +104,7 @@ export const Loading = { title: 'disabled=true', templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } })}`; @@ -123,7 +123,7 @@ export const Inverted = { ] }, constants: { type: 'attribute', name: 'inverted', value: true }, - options: { templateBackground: 'rgba(var(--sd-color-primary))' }, + options: { templateBackground: 'rgba(var(--sd-color-background-primary))' }, args }); } @@ -146,7 +146,7 @@ export const Disabled = { options: { templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } }); diff --git a/packages/docs/src/stories/components/carousel.test.stories.ts b/packages/docs/src/stories/components/carousel.test.stories.ts index 1f17460f3e..e026b02819 100644 --- a/packages/docs/src/stories/components/carousel.test.stories.ts +++ b/packages/docs/src/stories/components/carousel.test.stories.ts @@ -76,7 +76,7 @@ export const Inverted = { options: { templateBackgrounds: { alternate: 'y', - colors: ['rgba(var(--sd-color-primary))', 'transparent'] + colors: ['rgba(var(--sd-color-background-primary))', 'transparent'] }, templateRenderer: ({ attributes, slots }) => { const attrs = Object.entries(attributes) diff --git a/packages/docs/src/stories/components/divider.test.stories.ts b/packages/docs/src/stories/components/divider.test.stories.ts index 017462d717..a21abab782 100644 --- a/packages/docs/src/stories/components/divider.test.stories.ts +++ b/packages/docs/src/stories/components/divider.test.stories.ts @@ -76,7 +76,7 @@ export const Inverted = { options: { templateBackgrounds: { alternate: 'y', - colors: ['rgba(var(--sd-color-primary))', 'transparent'] + colors: ['rgba(var(--sd-color-background-primary))', 'transparent'] } } }); diff --git a/packages/docs/src/stories/components/icon.default.stories.ts b/packages/docs/src/stories/components/icon.default.stories.ts index 515948fc9b..a1f3238433 100644 --- a/packages/docs/src/stories/components/icon.default.stories.ts +++ b/packages/docs/src/stories/components/icon.default.stories.ts @@ -56,7 +56,7 @@ export const LibraryDefaultContent = { colors: [ 'rgba(var(--sd-color-background-white))', 'rgba(var(--sd-color-background-white))', - 'rgba(var(--sd-color-primary))' + 'rgba(var(--sd-color-background-primary))' ] } }, @@ -94,7 +94,7 @@ export const LibraryDefaultSystem = { colors: [ 'rgba(var(--sd-color-background-white))', 'rgba(var(--sd-color-background-white))', - 'rgba(var(--sd-color-primary))' + 'rgba(var(--sd-color-background-primary))' ] } }, diff --git a/packages/docs/src/stories/components/icon.status.stories.ts b/packages/docs/src/stories/components/icon.status.stories.ts index ecd35fa89c..994ce80914 100644 --- a/packages/docs/src/stories/components/icon.status.stories.ts +++ b/packages/docs/src/stories/components/icon.status.stories.ts @@ -41,7 +41,7 @@ export const SdStatusAssets = { }, constants: [{ type: 'attribute', name: 'library', value: 'sd-status-assets' }], options: { - templateBackgrounds: { alternate: 'x', colors: ['white', 'white', 'rgba(var(--sd-color-primary))'] } + templateBackgrounds: { alternate: 'x', colors: ['white', 'white', 'rgba(var(--sd-color-background-primary))'] } }, args }) diff --git a/packages/docs/src/stories/components/icon.test.stories.ts b/packages/docs/src/stories/components/icon.test.stories.ts index 4a9d7ec523..91e38a8e93 100644 --- a/packages/docs/src/stories/components/icon.test.stories.ts +++ b/packages/docs/src/stories/components/icon.test.stories.ts @@ -46,7 +46,7 @@ export const LibraryDefault = { colors: [ 'rgba(var(--sd-color-background-white))', 'rgba(var(--sd-color-background-white))', - 'rgba(var(--sd-color-primary))' + 'rgba(var(--sd-color-background-primary))' ] } }, @@ -79,7 +79,7 @@ export const LibraryInternal = { colors: [ 'rgba(var(--sd-color-background-white))', 'rgba(var(--sd-color-background-white))', - 'rgba(var(--sd-color-primary))' + 'rgba(var(--sd-color-background-primary))' ] } }, @@ -112,7 +112,7 @@ export const StatusLibrary = { colors: [ 'rgba(var(--sd-color-background-white))', 'rgba(var(--sd-color-background-white))', - 'rgba(var(--sd-color-primary))' + 'rgba(var(--sd-color-background-primary))' ] } }, diff --git a/packages/docs/src/stories/components/link.test.stories.ts b/packages/docs/src/stories/components/link.test.stories.ts index 0f65a10560..c543c50223 100644 --- a/packages/docs/src/stories/components/link.test.stories.ts +++ b/packages/docs/src/stories/components/link.test.stories.ts @@ -54,7 +54,7 @@ export const InvertedAndDisabled = { options: { templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } }) @@ -143,7 +143,7 @@ export const InvertedAndIconSlots = { options: { templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } }) diff --git a/packages/docs/src/stories/components/loader.test.stories.ts b/packages/docs/src/stories/components/loader.test.stories.ts index 05766667e0..a8f1769e60 100644 --- a/packages/docs/src/stories/components/loader.test.stories.ts +++ b/packages/docs/src/stories/components/loader.test.stories.ts @@ -47,7 +47,7 @@ export const Variants = { }, templateBackgrounds: { alternate: 'y', - colors: ['', 'rgba(var(--sd-color-primary))', 'transparent'] + colors: ['', 'rgba(var(--sd-color-background-primary))', 'transparent'] } }, args diff --git a/packages/docs/src/stories/components/spinner.test.stories.ts b/packages/docs/src/stories/components/spinner.test.stories.ts index b8e63a35ee..34867d6048 100644 --- a/packages/docs/src/stories/components/spinner.test.stories.ts +++ b/packages/docs/src/stories/components/spinner.test.stories.ts @@ -32,7 +32,7 @@ export const Variants = { options: { templateBackgrounds: { alternate: 'x', - colors: ['', 'rgba(var(--sd-color-primary))', 'rgba(var(--sd-color-neutral-100))'] + colors: ['', 'rgba(var(--sd-color-background-primary))', 'rgba(var(--sd-color-neutral-100))'] } }, args diff --git a/packages/docs/src/stories/packages/tokens/Usage.mdx b/packages/docs/src/stories/packages/tokens/Usage.mdx index 68dda33f73..17f6c597c5 100644 --- a/packages/docs/src/stories/packages/tokens/Usage.mdx +++ b/packages/docs/src/stories/packages/tokens/Usage.mdx @@ -240,7 +240,7 @@ Use primitive tokens when no semantic token exists for your use case, or when yo ```css .my-element { - background-color: rgba(var(--sd-color-primary)); + background-color: rgba(var(--sd-color-background-primary)); color: rgba(var(--sd-color-white)); } ``` diff --git a/packages/docs/src/stories/styles/container.test.stories.ts b/packages/docs/src/stories/styles/container.test.stories.ts index c4b595cd28..96d6fe7124 100644 --- a/packages/docs/src/stories/styles/container.test.stories.ts +++ b/packages/docs/src/stories/styles/container.test.stories.ts @@ -99,7 +99,7 @@ export const Variants = { 'transparent', 'transparent', 'transparent', - 'rgba(var(--sd-color-primary))' + 'rgba(var(--sd-color-background-primary))' ] } }, @@ -200,9 +200,9 @@ export const TriangleBorder = { }; /** - * You can set the color of the triangle cut-out using the `--triangle-background` CSS property. CSS variables can be set either with an inline style: `style="--triangle-background: var(--sd-color-primary);"` or a custom class: + * You can set the color of the triangle cut-out using the `--triangle-background` CSS property. CSS variables can be set either with an inline style: `style="--triangle-background: var(--sd-color-background-primary);"` or a custom class: * `.custom-sd-container { - --triangle-background: var(--sd-color-primary); + --triangle-background: var(--sd-color-background-primary); }` */ diff --git a/packages/docs/src/stories/styles/display.test.stories.ts b/packages/docs/src/stories/styles/display.test.stories.ts index 6c55cdf5d9..8fb7af3282 100644 --- a/packages/docs/src/stories/styles/display.test.stories.ts +++ b/packages/docs/src/stories/styles/display.test.stories.ts @@ -62,7 +62,7 @@ export const Inverted = { y: [{ type: 'attribute', name: 'sd-display--inverted', values: [false, true] }] }, options: { - templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-primary))'] } + templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } }, args }); diff --git a/packages/docs/src/stories/styles/interactive.test.stories.ts b/packages/docs/src/stories/styles/interactive.test.stories.ts index 6c2fdd1d48..67ee9f93c2 100644 --- a/packages/docs/src/stories/styles/interactive.test.stories.ts +++ b/packages/docs/src/stories/styles/interactive.test.stories.ts @@ -143,7 +143,7 @@ export const Inverted = { templateContent: '', templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } }, constants: { type: 'attribute', name: 'sd-interactive--inverted', value: true }, diff --git a/packages/docs/src/stories/styles/leadtext.test.stories.ts b/packages/docs/src/stories/styles/leadtext.test.stories.ts index 46ca11faa9..575f2f89df 100644 --- a/packages/docs/src/stories/styles/leadtext.test.stories.ts +++ b/packages/docs/src/stories/styles/leadtext.test.stories.ts @@ -63,7 +63,7 @@ export const Inverted = { }, constants: { type: 'attribute', name: 'sd-leadtext--inverted', value: true }, options: { - templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-primary))'] } + templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } }, args }); diff --git a/packages/docs/src/stories/styles/list.test.stories.ts b/packages/docs/src/stories/styles/list.test.stories.ts index 00735b2ae4..4914f63439 100644 --- a/packages/docs/src/stories/styles/list.test.stories.ts +++ b/packages/docs/src/stories/styles/list.test.stories.ts @@ -82,7 +82,7 @@ export const OrderedList = { options: { templateBackgrounds: { alternate: 'x', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] }, templateContent: html`
  1. @@ -134,7 +134,7 @@ export const UnorderedList = { options: { templateBackgrounds: { alternate: 'x', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] }, templateContent: html`
    • @@ -190,7 +190,7 @@ export const IconList = { options: { templateBackgrounds: { alternate: 'x', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] }, templateRenderer: ({ attributes }) => html`
        @@ -229,7 +229,7 @@ export const HorizontalIconList = { options: { templateBackgrounds: { alternate: 'x', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] }, templateRenderer: ({ attributes }) => html`
          diff --git a/packages/docs/src/stories/styles/meta.test.stories.ts b/packages/docs/src/stories/styles/meta.test.stories.ts index 2eba11f030..75890f4b98 100644 --- a/packages/docs/src/stories/styles/meta.test.stories.ts +++ b/packages/docs/src/stories/styles/meta.test.stories.ts @@ -82,7 +82,7 @@ export const LightAndInverted = { options: { templateBackgrounds: { alternate: 'y', - colors: ['transparent', 'rgba(var(--sd-color-primary))'] + colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } } }); @@ -103,7 +103,7 @@ export const Pipe = { }, constants: { type: 'attribute', name: 'sd-meta--pipe', value: true }, options: { - templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-primary))'] } + templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } }, args }); diff --git a/packages/docs/src/stories/styles/paragraph.test.stories.ts b/packages/docs/src/stories/styles/paragraph.test.stories.ts index fc7abe8b57..e8c8b3c367 100644 --- a/packages/docs/src/stories/styles/paragraph.test.stories.ts +++ b/packages/docs/src/stories/styles/paragraph.test.stories.ts @@ -62,7 +62,7 @@ export const Inverted = { }, constants: { type: 'attribute', name: 'sd-paragraph--inverted', value: true }, options: { - templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-primary))'] } + templateBackgrounds: { alternate: 'y', colors: ['transparent', 'rgba(var(--sd-color-background-primary))'] } }, args }); diff --git a/packages/docs/src/stories/styles/prose.test.stories.ts b/packages/docs/src/stories/styles/prose.test.stories.ts index fee787dfa5..0e6a2a13f8 100644 --- a/packages/docs/src/stories/styles/prose.test.stories.ts +++ b/packages/docs/src/stories/styles/prose.test.stories.ts @@ -707,7 +707,7 @@ export const Inverted = {
          ${args['default-slot'] || content}
          `, - templateBackgrounds: { alternate: 'x', colors: ['white', 'rgba(var(--sd-color-primary))'] } + templateBackgrounds: { alternate: 'x', colors: ['white', 'rgba(var(--sd-color-background-primary))'] } }, args }); From 3bda5922020ec905a31323bed2b5000acef39fdb Mon Sep 17 00:00:00 2001 From: martascorreia Date: Mon, 8 Jun 2026 17:16:54 +0100 Subject: [PATCH 2/2] chore: adding changeset --- .changeset/odd-ends-report.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/odd-ends-report.md diff --git a/.changeset/odd-ends-report.md b/.changeset/odd-ends-report.md new file mode 100644 index 0000000000..9a300f398d --- /dev/null +++ b/.changeset/odd-ends-report.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/docs': patch +--- + +Fixed background color for inverted screenshot tests.