swisspost
feat(tokens , styles): palettes 2.0
📄 Description
Please include a summary of the changes made in this PR.
🚀 Demo
If applicable, please add a screenshot or video to illustrate the changes.
📝 Checklist
- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- 🧪 I have added tests that prove my fix is effective or that my feature works
- ✔️ New and existing unit tests pass locally with my changes
🦋 Changeset detected
Latest commit: 40391d8de7f2b8ecd2aaeeb8e484fd0bc2649451
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 12 packages
| Name | Type |
|---|---|
| @swisspost/design-system-documentation | Patch |
| @swisspost/design-system-components | Major |
| @swisspost/design-system-styles | Major |
| @swisspost/design-system-tokens | Major |
| @swisspost/design-system-components-angular-workspace | Patch |
| @swisspost/design-system-components-react | Major |
| @swisspost/design-system-components-angular | Major |
| @swisspost/internet-header | Patch |
| @swisspost/design-system-nextjs-integration | Patch |
| @swisspost/design-system-styles-primeng-workspace | Patch |
| @swisspost/design-system-styles-primeng | Major |
| @swisspost/design-system-icons | Major |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
Related Previews
- https://preview-5250--swisspost-design-system-next.netlify.app
Quality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube Cloud
![sonarqubecloud[bot] avatar](https://avatars.githubusercontent.com/in/12526?v=4 "Published by a pub.dev verified publisher"){kind=small}
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| design-system-documentation | ❌ Failed (Inspect) | May 7, 2025 1:18pm |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
It seems, that the palettes accent- and nested-colors are not set up correctly yet. Regarding these colors, the design is in a tryout state right now.
There is still an issue with the body color, this does not work:
<!DOCTYPE html>
<html lang="en" data-color-scheme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Styles playground</title>
<link rel="stylesheet" id="styles" href="src/cargo-default.scss" />
<script src="playground.js" defer></script>
</head>
<body>
<div data-color-scheme="light" style="background-color: aliceblue">
<h2>Hello</h2>
<p><a>World</a></p>
</div>
</body>
</html>
To fix this issue, two adjustments are necessary:
- The text color is limited to only two possible value, either white or dark grey, based on the current color scheme.
This means the text color should be directly set using the
light-dark()function instead of being set from the palettes layer. - Whenever a selector applies a color scheme (e.g., using
[data-color-scheme]), thecolorproperty must be explicitly reset to ensure the text color matches the scheme. This prevents unintended color inheritance or overrides.
@oliverschuerch Reviewed the hex colors for every variant and all looks correct.
I'm setting "Request changes" again so that I don't see it in my list of PRs to review as there has not been any changes from the previous review. Otherwise I'll just miss it when you will have done the changes on the schemes file 😉
I did it. The PR is ready to be merged imo. Since the merge is blocked through a review, I'm currently leaving the PR unmerged (unlike what was discussed this morning). I'm having a quick meeting on Monday anyway with @gfellerph and @alizedebray and we can discuss it there who will take the honor to merge it.
Quality Gate passed
Issues
0 New issues
0 Accepted issues
Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code
See analysis details on SonarQube Cloud