Skip to content

fix: screenshot tests inverted backgrounds #3072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
martascorreia wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: screenshot tests inverted backgrounds #3072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52c3c41
fix: screenshot tests inverted backgrounds
martascorreia Jun 8, 2026
3bda592
chore: adding changeset
martascorreia Jun 8, 2026
6c9c121
Merge branch 'main' into fix/screenshot-tests-inverted-backgrounds
martascorreia Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/odd-ends-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@solid-design-system/docs': patch
---

Fixed background color for inverted screenshot tests.
2 changes: 1 addition & 1 deletion packages/docs/src/stories/components/badge.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const VariantAndInverted = {
options: {
templateBackgrounds: {
alternate: 'y',
colors: ['', 'rgba(var(--sd-color-primary))']
colors: ['', 'rgba(var(--sd-color-background-primary))']
}
}
});
Expand Down
10 changes: 5 additions & 5 deletions packages/docs/src/stories/components/button.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))']
}
}
});
Expand All @@ -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))']
}
}
})}
Expand All @@ -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))']
}
}
})}`;
Expand All @@ -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
});
}
Expand All @@ -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))']
}
}
});
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/components/carousel.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/components/divider.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']
}
}
});
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/stories/components/icon.default.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))'
]
}
},
Expand Down Expand Up @@ -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))'
]
}
},
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/components/icon.status.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/stories/components/icon.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))'
]
}
},
Expand Down Expand Up @@ -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))'
]
}
},
Expand Down Expand Up @@ -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))'
]
}
},
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/stories/components/link.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))']
}
}
})
Expand Down Expand Up @@ -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))']
}
}
})
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/components/loader.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/components/spinner.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/packages/tokens/Usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ Use primitive tokens when no semantic token exists for your use case, or when yo
<sd-tab-panel name="css">
```css
.my-element {
background-color: rgba(var(--sd-color-primary));
background-color: rgba(var(--sd-color-background-primary));
color: rgba(var(--sd-color-white));
}
```
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/stories/styles/container.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const Variants = {
'transparent',
'transparent',
'transparent',
'rgba(var(--sd-color-primary))'
'rgba(var(--sd-color-background-primary))'
]
}
},
Expand Down Expand Up @@ -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);
}`
*/

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/styles/display.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/styles/interactive.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const Inverted = {
templateContent: '<button class="%CLASSES%" title="Action name">%SLOT%</button>',
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 },
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/styles/leadtext.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand Down
8 changes: 4 additions & 4 deletions packages/docs/src/stories/styles/list.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`<ol class="%CLASSES%">
<li>
Expand Down Expand Up @@ -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`<ul class="%CLASSES%">
<li>
Expand Down Expand Up @@ -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`<ul class="sd-list--icon ${attributes.classes}">
Expand Down Expand Up @@ -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` <ul class="sd-list--icon sd-list--horizontal ${attributes.classes}">
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/stories/styles/meta.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))']
}
}
});
Expand All @@ -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
});
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/styles/paragraph.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/stories/styles/prose.test.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -707,7 +707,7 @@ export const Inverted = {
</style>
<div class="%CLASSES%">${args['default-slot'] || content}</div>
</div>`,
templateBackgrounds: { alternate: 'x', colors: ['white', 'rgba(var(--sd-color-primary))'] }
templateBackgrounds: { alternate: 'x', colors: ['white', 'rgba(var(--sd-color-background-primary))'] }
},
args
});
Expand Down
Loading