feat(sbb-container, sbb-sticky-bar): add new color variants

[DavideMininni-Fincons]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

This PR Closes #3171

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)

See Review Guidelines for more information what is checked during review process.

Changes

Changes in this pull request:

• add new color midnight and charcoal variants for the sbb-container and the sbb-sticky-bar
• add a note about consumers setting negative if needed when a dark background is used

Browsers

I tested the build on the following browsers:

• Firefox Desktop
• Chrome Desktop
• Edge Desktop
• Safari Desktop
• Chrome Mobile
• Safari Mobile

Screen readers

I tested the build on the following browsers:

• JAWS Firefox Desktop
• JAWS Chrome Desktop
• NVDA Firefox Desktop
• NVDA Chrome Desktop
• VoiceOver Safari Desktop
• VoiceOver Chrome Desktop
• VoiceOver Safari Mobile
• Android Accessibility Suite Chrome Mobile

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

Other information

[DavideMininni-Fincons]

Note for reviewers:
in the sticky-bar-stories.ts I was not sure about which combination could be relevant, so i created stories for charcoal sticky-bar on midnight container and viceversa, plus the expanded variant.
If not needed, they can be removed.

[TomMenga]

LGMT 👍

My opinion on the stories:
I feel they are noisy, hard to read and a heritage of when we run visual diff in storybook
I would remove all this.

[jeripeierSBB]

Looks good, thanks for implementing it. I commented some details :)

[DavideMininni-Fincons]

LGMT 👍

My opinion on the stories: I feel they are noisy, hard to read and a heritage of when we run visual diff in storybook I would remove all this.

@jeripeierSBB what do think about this?
should I consider only some basic combination (white/white, white/milk, midnight/midnight, midnight/charcoal)?
I feel we (me and Tom) don't have a full view of all the use cases..

[jeripeierSBB]

LGMT 👍
My opinion on the stories: I feel they are noisy, hard to read and a heritage of when we run visual diff in storybook I would remove all this.

@jeripeierSBB what do think about this? should I consider only some basic combination (white/white, white/milk, midnight/midnight, midnight/charcoal)? I feel we (me and Tom) don't have a full view of all the use cases..

I recommend to ask @mcilurzo what from perspective of design make sense (which color combinations). The existing stories (before your change) had all it's sense because also manual testing of various situation could easy be covered with those stories. Especially the "with content after" (or similar?) story should be left over.

[mcilurzo]

LGMT 👍
My opinion on the stories: I feel they are noisy, hard to read and a heritage of when we run visual diff in storybook I would remove all this.

@jeripeierSBB what do think about this? should I consider only some basic combination (white/white, white/milk, midnight/midnight, midnight/charcoal)? I feel we (me and Tom) don't have a full view of all the use cases..

I recommend to ask @mcilurzo what from perspective of design make sense (which color combinations). The existing stories (before your change) had all it's sense because also manual testing of various situation could easy be covered with those stories. Especially the "with content after" (or similar?) story should be left over.

in my opinion midnight with and without sticky-bar and charcoal with and without sticky-bar is enough (besides the previous stories). other combinations are not required.