From a2dea9a76de0fdcd1a146590405a0afece332149 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 18 Mar 2024 11:10:19 +0100
Subject: [PATCH] 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.
---
 .changeset/sweet-spies-love.md                  |  5 +++++
 .../post-internet-breadcrumbs.scss              |  4 +++-
 .../post-internet-footer.scss                   | 17 ++++++++++-------
 .../post-internet-header.scss                   |  3 +++
 4 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/sweet-spies-love.md

diff --git a/.changeset/sweet-spies-love.md b/.changeset/sweet-spies-love.md
new file mode 100644
index 0000000000..49cb7123fd
--- /dev/null
+++ 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/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss b/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss
index 21b1d9a6cb..b380c04d4e 100644
--- a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss
+++ b/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;
 }
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
index 136e829b60..521dc67631 100644
--- 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
index 9d751908b2..beed680f81 100644
--- 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;