fix: use _semantic_ CSS variables for consistency (#742)

telekom · Dec 17, 2021 · 15af88b · 15af88b
1 parent 090b1ab
commit 15af88b
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...mponents/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css b/...mponents/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);
 }