Core rebrand changes

core/Plugin/ThemeStyles.php

@@ -116,7 +116,7 @@ class ThemeStyles
     /**
      * @var string|array<string>
      */
-    public $colorTextLighter = ['#666666', '#999'];
+    public $colorTextLighter = ['#646464', '#999'];
 
     /**
      * @var string|array<string>
@@ -161,12 +161,12 @@ class ThemeStyles
     /**
      * @var string|array<string>
      */
-    public $colorHeaderBackground = ['#3450A3', '#2b3138'];
+    public $colorHeaderBackground;
 
     /**
      * @var string|array<string>
      */
-    public $colorHeaderText =  ['#fff', '#ccc'];
+    public $colorHeaderText;
 
     /**
      * @var string|array<string>
@@ -290,6 +290,8 @@ public function __construct(string $themeMode)
         $this->colorWidgetTitleBackground = $this->colorBackgroundContrast;
         $this->colorWidgetBackground = $this->colorBackgroundContrast;
         $this->colorWidgetBorder = $this->colorBackgroundTinyContrast;
+        $this->colorHeaderBackground = $this->colorBackgroundContrast;
+        $this->colorHeaderText = $this->colorTextLighter;
     }
 
     /**

plugins/CoreHome/stylesheets/layout.less

@@ -12,8 +12,9 @@ ul.browser-default {
   }
 }
 
-nav {
-  background-color: @theme-color-header-background !important;
+#root nav {
+  background-color: @theme-color-header-background;
+  box-shadow: none;
 
   a:focus-visible,
   button:focus-visible {
@@ -66,30 +67,75 @@ nav {
 
   ul.right.hide-on-med-and-down {
     margin-right: 4px;
+
+    > li[role="menuitem"].active {
+      background: transparent;
+
+      > a {
+        background: transparent;
+      }
+
+      .navbar-icon,
+      .navbar-label {
+        background-color: @theme-color-background-tinyContrast;
+      }
+    }
+
+    > li[role="menuitem"] a {
+      background: transparent;
+
+      &:hover,
+      &:focus {
+        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;
+      }
+    }
   }
 
   .languageSelection {
     &:hover {
-      background-color: rgba(0,0,0,0.1);
+      background-color: @theme-color-background-tinyContrast;
     }
   }
 
   ul:not(#mobile-top-menu) {
     .languageSelection {
       .title {
         color: @theme-color-header-text;
+        font-size: 14px;
       }
     }
   }
 
   ul a {
     color: @theme-color-header-text;
     text-decoration: none;
+    font-size: 14px;
+    padding: 0 8px;
 
     &:hover {
       text-decoration: none;
     }
   }
+  .navbar-icon {
+    font-size: 16px;
+  }
 }
 
  .navbar {

plugins/CoreHome/templates/_topBar.twig

@@ -4,7 +4,7 @@
         {% if icon is defined and icon and icon starts with 'icon-' %}
             <span class="navbar-icon {{ icon|striptags }}" aria-label="{{ label|translate|e('html_attr') }}"></span>
         {% else %}
-            {{ label|translate }}
+            <span class="navbar-label">{{ label|translate }}</span>
         {% endif %}
     {% endmacro %}
 

plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.less

@@ -36,13 +36,13 @@
                 opacity: 0.8;
             }
             &:hover:not(.activeDimension) {
-                border-color: @theme-color-header-background;
+                border-color: @theme-color-menu-contrast-textActive;
                 border-left-width: 1px;
                 padding-left: 17px;
             }
 
             &.activeDimension {
-                border-color: @theme-color-header-background;
+                border-color: @theme-color-menu-contrast-textActive;
 
                 .dimension {
                     font-weight: bold;

plugins/Ecommerce/tests/System/expected/test_ecommerceOrderWithItems_schedrep_html_row_evolution_graph__ScheduledReports.generateReport_week.original.html

@@ -10,15 +10,15 @@
 
 <a name="reportTop"></a>
 
-<table style="width:100%; background-color: &#x23;3450A3; color: &#x23;fff; padding:10px 0; margin: 0 0 25px 0; height:64px;">
+<table style="width:100%; background-color: &#x23;fff; color: &#x23;646464; padding:10px 0; margin: 0 0 25px 0; height:64px;">
     <tr>
         <td>
-            <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px;padding:0 15px;padding-bottom: 8px;color: &#x23;fff;height: 22px;display: inline-block;vertical-align: inherit;" rel="noreferrer noopener" target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/">
+            <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px;padding:0 15px;padding-bottom: 8px;color: &#x23;646464;height: 22px;display: inline-block;vertical-align: inherit;" rel="noreferrer noopener" target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/">
                                     <img src="http://example.com/piwik/tests/PHPUnit/proxy//plugins/Morpheus/images/logo-email.png" height="30px" width="auto" alt="Matomo,&#x20;free&#x2F;libre&#x20;analytics&#x20;platform" />
                             </a>
         </td>
         <td align="right">
-                        <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px; padding:0 15px; color: &#x23;fff" title="View Web Analytics reports for A very long name for a very tiny test site, that also reaches the 90 character limit fully." target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/index.php?module=CoreHome&action=redirectToCoreHomeIndex&idSite=1&period=day&date=today-date-removed-in-tests">
+                        <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px; padding:0 15px; color: &#x23;646464" title="View Web Analytics reports for A very long name for a very tiny test site, that also reaches the 90 character limit fully." target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/index.php?module=CoreHome&action=redirectToCoreHomeIndex&idSite=1&period=day&date=today-date-removed-in-tests">
                 Dashboard
             </a>
                     </td>

plugins/Ecommerce/tests/System/expected/test_ecommerceOrderWithItems_schedrep_html_row_evolution_overEach__ScheduledReports.generateReport_week.original.html

@@ -10,15 +10,15 @@
 
 <a name="reportTop"></a>
 
-<table style="width:100%; background-color: &#x23;3450A3; color: &#x23;fff; padding:10px 0; margin: 0 0 25px 0; height:64px;">
+<table style="width:100%; background-color: &#x23;fff; color: &#x23;646464; padding:10px 0; margin: 0 0 25px 0; height:64px;">
     <tr>
         <td>
-            <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px;padding:0 15px;padding-bottom: 8px;color: &#x23;fff;height: 22px;display: inline-block;vertical-align: inherit;" rel="noreferrer noopener" target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/">
+            <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px;padding:0 15px;padding-bottom: 8px;color: &#x23;646464;height: 22px;display: inline-block;vertical-align: inherit;" rel="noreferrer noopener" target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/">
                                     <img src="http://example.com/piwik/tests/PHPUnit/proxy//plugins/Morpheus/images/logo-email.png" height="30px" width="auto" alt="Matomo,&#x20;free&#x2F;libre&#x20;analytics&#x20;platform" />
                             </a>
         </td>
         <td align="right">
-                        <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px; padding:0 15px; color: &#x23;fff" title="View Web Analytics reports for A very long name for a very tiny test site, that also reaches the 90 character limit fully." target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/index.php?module=CoreHome&action=redirectToCoreHomeIndex&idSite=1&period=week&date=today-date-removed-in-tests">
+                        <a style="color:#212121;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;; font-size:16px; padding:0 15px; color: &#x23;646464" title="View Web Analytics reports for A very long name for a very tiny test site, that also reaches the 90 character limit fully." target="_blank" href="http://example.com/piwik/tests/PHPUnit/proxy/index.php?module=CoreHome&action=redirectToCoreHomeIndex&idSite=1&period=week&date=today-date-removed-in-tests">
                 Dashboard
             </a>
                     </td>