Tweaks for Headers

infor-design · Oct 11, 2023 · 233f212 · 233f212
1 parent d9e3cd0
commit 233f212
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 20 deletions.
diff --git a/src/components/header/_header-new.scss b/src/components/header/_header-new.scss
@@ -253,8 +253,18 @@
   .flex-toolbar {
     [class^='btn'] {
       &:not(.close):not(.collapse-button):not([disabled]):hover {
-        color: $ids-color-palette-white !important;
-        background-color: $header-toolbar-button-hover-color !important;
+        color: $ids-color-palette-white;
+        background-color: $header-toolbar-button-hover-color;
+
+        svg.icon {
+          color: $header-button-hover-color-new;
+        }
+      }
+
+      &.application-menu-trigger:hover {
+        &:not(:focus) .icon {
+          color: $header-button-hover-color-new;
+        }
       }
     }
   }

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -685,11 +685,11 @@ $subheader-height: 60px;
         color: $header-button-focus-color;
 
         &.collapse-button {
-          border-color: $header-button-focus-color;
+          border-color: $header-button-focus-border-color;
         }
 
         &:not(.collapse-button) {
-          border-color: $header-button-focus-color;
+          border-color: $header-button-focus-border-color;
           box-shadow: 0 0 0 2px transparent, 0 0 0 0 $header-button-focus-color, $header-focus-box-shadow;
         }
 

diff --git a/src/components/personalize/_personalize.scss b/src/components/personalize/_personalize.scss
@@ -23,6 +23,7 @@
 
 .is-personalizable.header {
   background-color: $header-default-bg-color;
+  border-bottom: 1px solid $header-default-bg-border-color;
 }
 
 .is-personalizable.has-more-button.tab-container.horizontal {

diff --git a/src/core/_config.scss b/src/core/_config.scss
@@ -7,18 +7,20 @@ $subhead-bg-color: $ids-color-palette-azure-70;
 $transparent: transparent;
 
 $header-border-color: $ids-color-palette-azure-80;
-$header-button-color: $ids-color-palette-white;
-$header-button-focus-color: rgba($ids-color-palette-white, 1);
+$header-button-color: $ids-color-palette-slate-100;
+$header-button-focus-color: $ids-color-palette-slate-100;
+$header-button-focus-border-color: $ids-color-palette-azure-60;
 $header-button-hover-color: rgba($ids-color-palette-white, 0.7);
 $header-button-disabled-color: rgba($ids-color-palette-white, 0.3);
 $header-primary-btn-background-color: $ids-color-palette-azure-50;
 $header-primary-btn-background-hover-color: $ids-color-brand-primary-base;
-$header-text-color: $ids-color-palette-white;
+$header-text-color: $ids-color-palette-slate-100;
 $header-disabled-color: $ids-color-palette-slate-50;
 $header-focus-box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.3);
 
 $header-full-searchfield-hyperlink-color: $ids-color-palette-white;
 
+$header-button-hover-color-new: $ids-color-palette-azure-60;
 $ids-color-palette-alabaster: $ids-color-palette-white;
 
 // Homepage
@@ -34,7 +36,8 @@ $homepage-header-menu-button-color: $ids-color-palette-black;
 $widget-editable-border-color: $ids-color-palette-azure-60;
 
 // Color Personalization in header
-$header-default-bg-color: $ids-color-palette-azure-60;
+$header-default-bg-color: $ids-color-palette-white;
+$header-default-bg-border-color: $ids-color-palette-slate-30;
 $header-default-bg-hover-color: $ids-color-palette-azure-80;
 
 $masthead-bg-color: $ids-color-palette-slate-80;
@@ -1113,8 +1116,8 @@ $subheader-searchfield-category-button-font-color: $ids-color-palette-slate-80;
 $header-searchfield-input-border-color: $ids-color-palette-slate-40;
 $header-searchfield-input-border-hover-color: $ids-color-palette-slate-100;
 $header-searchfield-btn-font-color: $ids-color-palette-slate-80;
-$header-toolbar-searchfield-icon-color: $ids-color-palette-white;
-$header-toolbar-button-hover-color: rgba(0, 0, 0, 0.3);
+$header-toolbar-searchfield-icon-color: $ids-color-palette-slate-100;
+$header-toolbar-button-hover-color: $ids-color-palette-azure-10;
 
 // Header Tabs
 $header-tabcontainer-border-color: $ids-color-palette-graphite-30;

diff --git a/src/themes/theme-classic-contrast.scss b/src/themes/theme-classic-contrast.scss
@@ -22,18 +22,19 @@
 $header-bg-color: $ids-color-palette-azure-60;
 $subhead-bg-color: $ids-color-palette-azure-70;
 $header-border-color: $ids-color-palette-slate-100;
-$header-text-color: $ids-color-palette-white;
-$header-button-color: $ids-color-palette-white;
-$header-button-focus-color: $ids-color-palette-white;
+$header-text-color: $ids-color-palette-slate-100;
+$header-button-color: $ids-color-palette-slate-100;
+$header-button-focus-color: $ids-color-palette-slate-100;
 $header-button-hover-color: rgba($ids-color-palette-white, 0.7);
 $header-button-disabled-color: rgba($ids-color-palette-white, 0.3);
 $header-primary-btn-background-color: $ids-color-brand-primary-base;
 $header-primary-btn-background-hover-color: $ids-color-palette-azure-50;
 $header-disabled-color: $ids-color-palette-graphite-50;
 $header-focus-box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.3);
-$header-toolbar-searchfield-icon-color: $ids-color-palette-white;
 $header-toolbar-button-hover-color: transparent;
-$header-default-bg-color: $ids-color-palette-azure-80;
+$header-default-bg-color: $ids-color-palette-white;
+$header-toolbar-searchfield-icon-color: $ids-color-palette-slate-100;
+
 
 // Homepages
 $header-hero-text-color: $ids-color-palette-white;

diff --git a/src/themes/theme-classic-dark.scss b/src/themes/theme-classic-dark.scss
@@ -18,7 +18,7 @@
 // Override Config
 //================================================== //
 
-$header-default-bg-color: $ids-color-palette-slate-60;
+$header-default-bg-color: $ids-color-palette-slate-70;
 $header-default-bg-hover-color: $ids-color-palette-slate-80;
 
 // Form Background Color

diff --git a/src/themes/theme-classic-light.scss b/src/themes/theme-classic-light.scss
@@ -16,6 +16,7 @@
 @import '../core/config';
 
 $header-toolbar-button-hover-color: transparent;
+$header-default-bg-color: $ids-color-palette-white;
 $toolbar-btn-actions-hover-bg-color: transparent;
 
 // Accordion

diff --git a/src/themes/theme-new-contrast.scss b/src/themes/theme-new-contrast.scss
@@ -19,19 +19,26 @@
 
 // Form Background Color
 $header-bg-color: $ids-color-palette-azure-80;
-$header-default-bg-color: $ids-color-palette-azure-80;
+$header-default-bg-color: $ids-color-palette-white;
+$header-default-bg-border-color: $ids-color-palette-slate-30;
 $header-default-bg-hover-color: rgba(0, 0, 0, .3);
 $subhead-bg-color: $ids-color-palette-azure-90;
 $header-border-color: $ids-color-palette-slate-100;
-$header-button-color: $ids-color-palette-white;
-$header-button-focus-color: $ids-color-palette-white;
+$header-button-color: $ids-color-palette-slate-100;
+$header-button-focus-color: $ids-color-palette-slate-100;
+$header-button-focus-border-color: $ids-color-palette-azure-60;
 $header-button-hover-color: rgba($ids-color-palette-slate-70, 0.85);
 $header-button-disabled-color: rgba($ids-color-palette-white, 0.3);
 $header-primary-btn-background-color: $ids-color-brand-primary-base;
 $header-primary-btn-background-hover-color: $ids-color-palette-azure-50;
 $header-disabled-color: $ids-color-palette-slate-50;
 $header-focus-box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.3);
 
+$header-text-color: $ids-color-palette-slate-100;
+$header-button-hover-color-new: $ids-color-palette-azure-80;
+$header-toolbar-searchfield-icon-color: $ids-color-palette-slate-100;
+$header-toolbar-button-hover-color: $ids-color-palette-azure-10;
+
 $body-color-primary-background: $ids-color-palette-slate-10;
 
 // Homepages

diff --git a/src/themes/theme-new-dark.scss b/src/themes/theme-new-dark.scss
@@ -901,6 +901,7 @@ $header-primary-btn-background-hover-color: $ids-color-palette-slate-80;
 $header-flex-toolbar-input-searchfield-color: $ids-color-palette-white;
 $header-flex-toolbar-close-icon-color: $header-flex-toolbar-input-searchfield-color;
 
+$header-button-hover-color-new: $ids-color-palette-white;
 $header-hero-widget-bg-color: $ids-color-palette-slate-90;
 
 // Header Tabs

diff --git a/src/themes/theme-new-light.scss b/src/themes/theme-new-light.scss
@@ -29,7 +29,7 @@ $drop-shadow-depth: rgba($ids-color-boxshadow-base, 0.2);
 
 $application-menu-border-color: $ids-color-palette-slate-90;
 
-$header-default-bg-color: $ids-color-palette-azure-60;
+$header-default-bg-color: $ids-color-palette-white;
 
 // Icons
 $icon-color: $icon-color-fill;