fix: define CSS custom properties for header/crumbs/footer

If the Internet Header was used without having the styles as a global stylesheet, some CSS custom properties were not defined. This lead to focus rings not being visible. Extending the light theme colors for all the entry components defines these properties even if the styles package is not being used.

.changeset/sweet-spies-love.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Fixed an issue with invisible focus rings when not using the Design System Styles along with the Swisspost Internet Header. Focus rings are now displayed as expected.

packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss

@@ -1,4 +1,4 @@
-@use '@swisspost/design-system-styles/placeholders';
+@use '@swisspost/design-system-styles/placeholders/color' as color-ph;
 @use '@swisspost/design-system-styles/components/button';
 @use '@swisspost/design-system-styles/components/grid';
 @use '@swisspost/design-system-styles/components/spinner';
@@ -9,6 +9,8 @@
 @use '../../utils/mixins.scss';
 
 :host {
+  @extend %color-background-light-variables;
+
   display: block;
   position: relative;
 }

packages/internet-header/src/components/post-internet-footer/post-internet-footer.scss

@@ -1,12 +1,15 @@
-@use "@swisspost/design-system-styles/components/grid";
-@use "@swisspost/design-system-styles/variables/color";
-@use "@swisspost/design-system-styles/placeholders/text";
-@use "@swisspost/design-system-styles/functions";
-@use "@swisspost/design-system-styles/components/button";
-@use "../../utils/utils.scss";
-@use "../../utils/mixins.scss";
+@use '@swisspost/design-system-styles/components/grid';
+@use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/placeholders/text';
+@use '@swisspost/design-system-styles/placeholders/color' as color-ph;
+@use '@swisspost/design-system-styles/functions';
+@use '@swisspost/design-system-styles/components/button';
+@use '../../utils/utils.scss';
+@use '../../utils/mixins.scss';
 
 :host {
+  @extend %color-background-light-variables;
+
   display: block;
 }
 

packages/internet-header/src/components/post-internet-header/post-internet-header.scss

@@ -1,9 +1,12 @@
 @use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/placeholders/color' as color-ph;
 @use '../../utils/utils.scss';
 @use '../../utils/mixins.scss';
 @use './logo-animation/logo-animation.scss';
 
 :host {
+  @extend %color-background-light-variables;
+
   display: block;
   position: relative;
   font-size: 1rem;