Fix contrast in white-label header (#24446)

tzi · web-flow · commit f6b2de9be7c8 · 2026-04-30T09:23:29.000+12:00
* Fix contrast for white-label header

* Fix header background on login page

* With puppeteer support

* Update UI screenshots

* Update UI screenshots
diff --git a/plugins/CoreAdminHome/tests/UI/expected-screenshots/CustomLogo_admin.png b/plugins/CoreAdminHome/tests/UI/expected-screenshots/CustomLogo_admin.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aaf8b8d22e8a1e563d157d73fada1d943ba4a1e2522cfedaaa987d52f539d2d9
-size 13682
+oid sha256:1bdfa5d606af719d14e7b3f11d5e04c82eb345af355733900ab65bff53e68369
+size 13721
diff --git a/plugins/CoreAdminHome/tests/UI/expected-screenshots/CustomLogo_admin_svg.png b/plugins/CoreAdminHome/tests/UI/expected-screenshots/CustomLogo_admin_svg.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f966c4ed89959179fa62f1688505f8a235e13372cce75624964b40af1361b2b
-size 9208
+oid sha256:b22ece357368d588b3816379230a173f55463fefd50c58d3c8f3f2a4b83a1011
+size 9245
diff --git a/plugins/CoreHome/stylesheets/layout.less b/plugins/CoreHome/stylesheets/layout.less
@@ -68,6 +68,29 @@ ul.browser-default {
   ul.right.hide-on-med-and-down {
     margin-right: 4px;
 
+    .navbar-icon {
+      padding: 8px;
+    }
+    .navbar-label {
+      padding: 4px;
+    }
+    .navbar-label, .navbar-icon {
+      position: relative;
+      z-index: 1;
+      border-radius: 8px;
+
+      /* Hover & active background */
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: 8px;
+        background: transparent;
+        opacity: 0.051;
+      }
+    }
+
     > li[role="menuitem"].active {
       background: transparent;
 
@@ -77,7 +100,10 @@ ul.browser-default {
 
       .navbar-icon,
       .navbar-label {
-        background-color: @theme-color-background-tinyContrast;
+        &::after {
+          // contrast + opacity to create an effect that work in light and dark mode, with our without white-label customization
+          background: @color-mode-black;
+        }
       }
     }
 
@@ -89,32 +115,29 @@ ul.browser-default {
         background: transparent;
       }
 
-      .navbar-icon {
-        padding: 8px;
-      }
-      .navbar-label {
-        padding: 4px;
-      }
-      .navbar-label, .navbar-icon {
-        border-radius: 8px;
-      }
-
       &:hover .navbar-icon,
       &:hover .navbar-label,
       &:focus .navbar-icon,
       &:focus .navbar-label {
-        background-color: @theme-color-background-tinyContrast;
+        &::after {
+          // contrast + opacity to create an effect that work in light and dark mode, with our without white-label customization
+          background: light-dark(black, white);
+        }
       }
     }
   }
 
   .languageSelection {
     &:hover {
-      background-color: @theme-color-background-tinyContrast;
+      background-color: @color-mode-black;
     }
   }
 
   ul:not(#mobile-top-menu) {
+    a {
+      color: @theme-color-header-text;
+    }
+
     .languageSelection {
       .title {
         color: @theme-color-header-text;
@@ -124,7 +147,6 @@ ul.browser-default {
   }
 
   ul a {
-    color: @theme-color-header-text;
     text-decoration: none;
     font-size: 14px;
     padding: 0 8px;
diff --git a/plugins/CoreHome/tests/UI/expected-screenshots/WhatIsNew_menu.png b/plugins/CoreHome/tests/UI/expected-screenshots/WhatIsNew_menu.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e7130513bbea7f6e796b52ec72451a45f66983e04eb1c4fc5160df0401a49244
-size 7649
+oid sha256:6cde17e18bdb9a41a60dff8c32836b99352ddf096794435e225e5bf06a8fe85f
+size 7777
diff --git a/plugins/Goals/tests/UI/expected-screenshots/Goals_action_goals_visualization_page_urls.png b/plugins/Goals/tests/UI/expected-screenshots/Goals_action_goals_visualization_page_urls.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86b8a77d536f2f2380817520763d7fe1ab738afb10dbf3b2af36dd4c63e97a88
-size 103822
+oid sha256:b8069b6c74df5f119215ed06323b8b07653cb290611ba12e9aa16e3d6e8779a7
+size 103844
diff --git a/plugins/Goals/tests/UI/expected-screenshots/Goals_action_goals_visualization_page_urls_subtable.png b/plugins/Goals/tests/UI/expected-screenshots/Goals_action_goals_visualization_page_urls_subtable.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:63dea39bb07f8bffb625f419ef16555dac20b810ac244548376904735afb7440
-size 118452
+oid sha256:8daed21e55d344f9e1beec3ec7fa4ea411c34af05b7420683a3e342e66a972f4
+size 118460
diff --git a/plugins/LanguagesManager/tests/UI/expected-screenshots/LanguagesManager_TopNavigation_top_navigation_anonymous.png b/plugins/LanguagesManager/tests/UI/expected-screenshots/LanguagesManager_TopNavigation_top_navigation_anonymous.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bce1991a7c7694cd6f3f14ebecf9d1e4f0376aabb77d61c9864ab0238b8aa2ca
-size 11384
+oid sha256:5f519035985bc6f42ae6080ac083b65f2af594f37e698c1d528c8932471cebd4
+size 11405
diff --git a/plugins/Login/stylesheets/login.less b/plugins/Login/stylesheets/login.less
@@ -2,7 +2,7 @@
 ***********************/
 #loginPage {
     nav {
-        background-color: @color-white;
+        background-color: @theme-color-header-background;
     }
     #logo {
         padding-top: 6px;
diff --git a/plugins/Morpheus/stylesheets/base.less b/plugins/Morpheus/stylesheets/base.less
@@ -1,7 +1,8 @@
 /* base.less is a standalone Less file */
-
 @import "base/colors";
 @import "base/mixins";
+@import "base/mode-colors";
+
 /* General styles */
 @import "general/_default.less";
 @import "general/_utils.less";
diff --git a/plugins/Morpheus/stylesheets/base/mode-colors.less b/plugins/Morpheus/stylesheets/base/mode-colors.less
@@ -0,0 +1,8 @@
+// Mode color
+@color-mode-black: #000;
+@color-mode-white: #fff;
+
+.inDarkMode({
+  @color-mode-black: #fff;
+  @color-mode-white: #000;
+});
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentManagementPageTest_initial.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentManagementPageTest_initial.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a81a84483d57062823c6363b9799326e5a5111fac417f5f38055057cd7aef2ac
-size 122027
+oid sha256:18ff3bb68452e18eb4d586e78ec507195521db766677f130edd67046f2fdd3b2
+size 122056
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_complex_segment.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_complex_segment.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f84db757e254eedd3d1396ff32e43d591ac616cbb4d7a5511cc95a95af6a8a43
-size 427297
+oid sha256:a0c6f542feb118e43b3dcec8310fd18f11ff54c14db31304673aa77c5bffc30f
+size 427313
diff --git a/tests/UI/expected-screenshots/Menus_mobile_top.png b/tests/UI/expected-screenshots/Menus_mobile_top.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4af4a5f0b3aa4da38551d1184b386f249820a96ed4e3ccc4faed57023a99b721
-size 8858
+oid sha256:14e73e2eb6a451b9e570db9c3b647f5d1c7ae8ab4a0461d6fe0cc06d907bab22
+size 9065
diff --git a/tests/UI/expected-screenshots/SearchFilterPersistenceTest_load_ok.png b/tests/UI/expected-screenshots/SearchFilterPersistenceTest_load_ok.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aa7cce604ae305e375360988d00c9a92010303581f19b63c0aee82a336a55f88
-size 116338
+oid sha256:a44c50c6837233ea700b553be112e78e7ac6140a12959116d2a9c4cc44dcadeb
+size 116360
diff --git a/tests/UI/expected-screenshots/SearchFilterPersistenceTest_persisted_date.png b/tests/UI/expected-screenshots/SearchFilterPersistenceTest_persisted_date.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ff26cfe0fff0e7f23565d2fc70b0ba070f03669e96520773158547b442755b17
-size 101317
+oid sha256:45277c8cadef7625fc3738a28ae3931e97b72dc85682b6399972c0874e1a6d90
+size 101340
diff --git a/tests/UI/expected-screenshots/SearchFilterPersistenceTest_persisted_segment.png b/tests/UI/expected-screenshots/SearchFilterPersistenceTest_persisted_segment.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8dd70a36d0100c35eb9f607386360c0d96a3676f292f5d6d59a5a0db9b774d61
-size 106114
+oid sha256:a99e2d50229648d7fc1f20d51026b163e496b2f842e18ff457102c8b8f8d5757
+size 106132
diff --git a/tests/UI/expected-screenshots/SearchFilterPersistenceTest_persisted_sorting.png b/tests/UI/expected-screenshots/SearchFilterPersistenceTest_persisted_sorting.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e59efef7197cf82940e8a11eb6971bb772743b706c20e8c1f822a4773c5836cc
-size 105198
+oid sha256:d2f8e440f40e3278dd494e5090497790ab18cfb86a0f2b7a2aa5ada551c93a3f
+size 105224
diff --git a/tests/UI/expected-screenshots/SearchFilterPersistenceTest_search_results.png b/tests/UI/expected-screenshots/SearchFilterPersistenceTest_search_results.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:42ebeffe8517097ac3b46b2a8f4ea42d174b39b7cd4306ddf178b062602cac10
-size 105045
+oid sha256:3bec0018fe027ae97999de0d3b304c9731194cdb34de6fa200a1d27560be3cc8
+size 105058
diff --git a/tests/UI/expected-screenshots/Theme_home.png b/tests/UI/expected-screenshots/Theme_home.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:06a12188f26ae2eea1d1145c46408f1a2852325fb2b201bb3b711cc6513b5ee4
-size 82358
+oid sha256:f0261a74274da0aa86d2c2f85b0895769d597b31bb57f56f77056a097f2df321
+size 82130
diff --git a/tests/UI/expected-screenshots/Theme_home_dark.png b/tests/UI/expected-screenshots/Theme_home_dark.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8c56066d18667d61c17c2121678db222dd4170b0fe1ab9c6678bc6b087048826
-size 82945
+oid sha256:3cb16487b2d34637f05872387337277294acd13980115d381bc0d66eab8f658b
+size 82829
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_period_select_date_range_click.png b/tests/UI/expected-screenshots/UIIntegrationTest_period_select_date_range_click.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8009b5366ec300a6cadef2b3a4979aeb3e220f78b7a8ba4afb720a311f7b6d96
-size 94831
+oid sha256:d3c866093a0242780b25574a2964474f18779d80d56fb9786e61fb7e300584c8
+size 94846
diff --git a/tests/UI/expected-screenshots/VersionInfoHeaderMessage_update_available.png b/tests/UI/expected-screenshots/VersionInfoHeaderMessage_update_available.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8067ba710ca292baa050e4b55f522dde2716a5f40c1b613a6480d686449610cf
+size 18324
diff --git a/tests/UI/expected-screenshots/enable_framed_pages_embed_whole_app.png b/tests/UI/expected-screenshots/enable_framed_pages_embed_whole_app.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:10efb75d6ef01b7331ca8f0fcf436e72307dea7b1e06f525fb546600716b4be5
-size 242154
+oid sha256:da17d0804268695b3c68bfca40c2b2b44ce6e7f3631f9627d9d06b69640f0ba6
+size 242204

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`***********************/`
`3`	`3`	`#loginPage {`
`4`	`4`	`nav {`
`5`		`- background-color: @color-white;`
	`5`	`+ background-color: @theme-color-header-background;`
`6`	`6`	`}`
`7`	`7`	`#logo {`
`8`	`8`	`padding-top: 6px;`