diff --git a/src/components/header/_header-new.scss b/src/components/header/_header-new.scss index 8207c028f3..7a4ef1b5ce 100755 --- 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 index 26b049637c..8ae7f7d5fb 100755 --- 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 index aae56bd41b..7f437339b0 100644 --- 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 index b981f66899..156c1512dd 100644 --- 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 index a5f7ee85da..2e0aadcbf5 100755 --- 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 index 72d8b7a58e..fa122f0394 100755 --- 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 index b397ea2a62..5641bdbbbb 100755 --- 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 index 90fe8a0a60..9ea86a831e 100644 --- a/src/themes/theme-new-contrast.scss +++ b/src/themes/theme-new-contrast.scss @@ -19,12 +19,14 @@ // 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; @@ -32,6 +34,11 @@ $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 index 3652dfbf28..8c7c5bec6a 100644 --- 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 index 5b5e844d33..b40df323dd 100644 --- 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;