From 15af88b6c48c0418912074968611734b2e48c265 Mon Sep 17 00:00:00 2001
From: christopherGdynia <84845536+christopherGdynia@users.noreply.github.com>
Date: Fri, 17 Dec 2021 12:16:31 +0100
Subject: [PATCH] fix: use _semantic_ CSS variables for consistency (#742)

---
 .../src/components/menu-flyout-item/menu-flyout-item.css      | 2 +-
 .../src/components/menu-flyout-list/menu-flyout-list.css      | 2 +-
 packages/components/src/components/modal/modal.css            | 3 ++-
 .../src/components/telekom/app-header/app-header.css          | 4 ++--
 .../src/components/telekom/app-mega-menu/app-mega-menu.css    | 2 +-
 .../app-navigation-main-mobile/app-navigation-main-mobile.css | 2 +-
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/components/menu-flyout-item/menu-flyout-item.css b/packages/components/src/components/menu-flyout-item/menu-flyout-item.css
index 5bcc9040cb..d984141bf5 100644
--- a/packages/components/src/components/menu-flyout-item/menu-flyout-item.css
+++ b/packages/components/src/components/menu-flyout-item/menu-flyout-item.css
@@ -36,7 +36,7 @@
   white-space: nowrap;
   border-radius: 0;
   cursor: pointer;
-  color: var(--scl-color-black);
+  color: var(--scl-color-text-standard);
   /* 10px relates to the PAD value in Menu component */
   max-width: calc(100vw - 2 * var(--scl-spacing-24) - 2 * 10px);
   overflow: hidden;
diff --git a/packages/components/src/components/menu-flyout-list/menu-flyout-list.css b/packages/components/src/components/menu-flyout-list/menu-flyout-list.css
index b28548ed0e..9aee37646d 100644
--- a/packages/components/src/components/menu-flyout-list/menu-flyout-list.css
+++ b/packages/components/src/components/menu-flyout-list/menu-flyout-list.css
@@ -26,7 +26,7 @@
   position: absolute;
   pointer-events: initial;
   z-index: var(--scl-z-index-20);
-  background: var(--scl-color-white);
+  background: var(--scl-color-background-standard);
   border-radius: var(--scl-radius-12);
   box-shadow: var(--scl-shadow-level-4);
   overflow-y: hidden;
diff --git a/packages/components/src/components/modal/modal.css b/packages/components/src/components/modal/modal.css
index 536564e460..a6e1a8d79e 100644
--- a/packages/components/src/components/modal/modal.css
+++ b/packages/components/src/components/modal/modal.css
@@ -100,7 +100,7 @@
   position: relative;
   overflow-y: auto;
   flex-direction: column;
-  background-color: white;
+  background-color: var(--scl-color-background-standard);
   max-height: var(--max-height-window);
   border-radius: var(--radius-window);
   box-shadow: var(--box-shadow-window);
@@ -185,6 +185,7 @@
   appearance: none;
   cursor: pointer;
   user-select: none;
+  color: var(--scl-color-text-standard);
 }
 
 .modal__close-button:focus {
diff --git a/packages/components/src/components/telekom/app-header/app-header.css b/packages/components/src/components/telekom/app-header/app-header.css
index 11002aa078..2f443e1d65 100644
--- a/packages/components/src/components/telekom/app-header/app-header.css
+++ b/packages/components/src/components/telekom/app-header/app-header.css
@@ -25,7 +25,7 @@ scale-app-header {
   --background-brand: var(--scl-color-primary);
 
   --color-nav: var(--scl-color-text-standard);
-  --background-nav: var(--scl-color-white);
+  --background-nav: var(--scl-color-background-standard);
   --spacing-nav: 0 var(--scl-spacing-16);
 }
 @keyframes keyframes-slideUp {
@@ -112,7 +112,7 @@ scale-app-header {
   height: calc(2 * var(--header-border-radius));
   position: absolute;
   border-top: var(--border);
-  box-shadow: 0 calc(-1 * var(--header-border-radius)) 0 0 #fff;
+  box-shadow: 0 calc(-1 * var(--header-border-radius)) 0 0 var(--scl-color-background-standard);
   background-color: transparent;
 }
 .header.menu--open .header__nav-before,
diff --git a/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css b/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css
index 0d02d36e69..11e019b166 100644
--- a/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css
+++ b/packages/components/src/components/telekom/app-mega-menu/app-mega-menu.css
@@ -14,7 +14,7 @@ app-mega-menu {
   --spacing-y: 34px;
   --spacing-right: var(--scl-spacing-16);
   --spacing-left: var(--scl-spacing-24);
-  --background: var(--scl-color-white);
+  --background: var(--scl-color-background-standard);
   --color-active: var(--scl-color-primary);
 
   --font-size-row-title: var(--scl-font-size-16);
diff --git a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
index a2b25ef0d0..51bdc722dd 100644
--- a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
+++ b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
@@ -80,7 +80,7 @@ app-navigation-main-mobile {
   position: absolute;
   top: 0;
   left: 0;
-  background: var(--scl-color-white);
+  background: var(--scl-color-background-standard);
   width: 100%;
   min-height: var(--min-height);
 }