fix: define CSS custom properties for header/crumbs/footer (#2793)

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.
swisspost · Mar 18, 2024 · a2dea9a · a2dea9a
1 parent 35aa0f0
commit a2dea9a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/.changeset/sweet-spies-love.md b/.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.
diff --git a/...s/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss b/...s/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;
 }

diff --git a/packages/internet-header/src/components/post-internet-footer/post-internet-footer.scss b/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;
 }
 

diff --git a/packages/internet-header/src/components/post-internet-header/post-internet-header.scss b/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;