feat(styles): implement form switch styles using tokens

[schaertim]

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0ff178fdacf968d616ed189116577b76f98463f4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@swisspost/design-system-styles	Patch
@swisspost/design-system-components-angular-workspace	Patch
@swisspost/design-system-components	Patch
@swisspost/design-system-documentation	Patch
@swisspost/internet-header	Patch
@swisspost/design-system-intranet-header-workspace	Patch
@swisspost/design-system-nextjs-integration	Patch
@swisspost/design-system-styles-primeng-workspace	Patch
@swisspost/design-system-intranet-header	Patch
@swisspost/design-system-styles-primeng	Patch
@swisspost/design-system-components-react	Patch
@swisspost/design-system-components-angular	Patch
@swisspost/design-system-intranet-header-showcase	Patch
@swisspost/design-system-tokens	Patch
@swisspost/design-system-icons	Patch
@swisspost/design-system-migrations	Patch

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

[swisspost-bot]

Related Previews

• https://preview-3558--swisspost-web-frontend.netlify.app
• https://preview-3558--swisspost-design-system-next.netlify.app

[schaertim]

I implemented the PR feedback, except for these two points:

• The invalid styles seems incorrect as well but you can first ask Sandra to document them in Figma
• You will have to update the snapshot story to use the correct tokens on dark background

Regarding the first one: The validation styles will not be implemented for each component using individual tokens respective to each component. Instead the styling will be done centrally with a designated "validation" token set to be reused in all components requiring validation. I opened a new ticket (#3630) for this which has to be tackled first before completing the switch styling.

And for the second point: Right now it is not clear if the inverted mode will differ from the dark mode. If it does new tokens would have to be created for all inverted colors. Discussions about that decision are still ongoing.

[alizedebray]

The validation styles will not be implemented for each component using individual tokens respective to each component. Instead the styling will be done centrally with a designated "validation" token set to be reused in all components requiring validation.

@schaertim It is true, however the switch currently has a red border when invalid which is not correct and will not be solved when implementing the validation tokens.

[sonarqubecloud[bot]]

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 SonarCloud