feat(internet-header): expose CSS custom properties

[alizedebray]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: bd68e7b

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

This PR includes changesets to release 3 packages

Name	Type
@swisspost/internet-header	Minor
@swisspost/design-system-documentation	Minor
@swisspost/design-system-nextjs-integration	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-3200--swisspost-design-system-next.netlify.app

[gfellerph]

@alizedebray I think this is the way to go. Are the global styles delivered via JS or do the projects have to import an additional CSS file?

[alizedebray]

@alizedebray I think this is the way to go. Are the global styles delivered via JS or do the projects have to import an additional CSS file?

@gfellerph global styles have to be added manually by the consumers. This is why I declared the variables both on the :root and on the :host, this way you only have to import the global styles if you need to use the custom variables. What do you think?

The main drawback with this approach (apart from duplication) is that is makes the header height customizable... Otherwise we could expose the SCSS variables but then it is no longer framework agnostic.

[gfellerph]

@gfellerph global styles have to be added manually by the consumers. This is why I declared the variables both on the :root and on the :host, this way you only have to import the global styles if you need to use the custom variables. What do you think?

That's perfect. Can you please add documentation how to do that?

The main drawback with this approach (apart from duplication) is that is makes the header height customizable... Otherwise we could expose the SCSS variables but then it is no longer framework agnostic.

I think that's negligible. If you want to break the header, there are a thousand ways to do so. Setting this variable by mistake is an easy fix.

[alizedebray]

Can you please add documentation how to do that?

@gfellerph Sure, I added the documentation this morning: https://preview-3200--swisspost-design-system-next.netlify.app/?path=/docs/bfdf4e7c-37d3-40f8-a5d0-734f3e6612b5--docs

[gfellerph]

Good work!

[sonarcloud]

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