[57153] Reduce amount of design variables needed for the sidebar (#16691

)

* remove unnecessary variables from the list

* create a helper for updating design variables

* undo changes in update design service

* set font colors based on the bg color in inline_css file

* change default values of font color for selected and hovered menu item

* undo changes in colors helper

* remove border colour variables and calculate them based on the background

app/views/custom_styles/_inline_css.erb

@@ -31,11 +31,28 @@ See COPYRIGHT and LICENSE files for more details.
     :root {
     <% DesignColor.overwritten.each do |design_color| %>
         --<%= design_color.variable %>: <%= design_color.hexcode %>;
-    <% if design_color.variable == "header-border-bottom-color" %>
+    <% if design_color.variable == "header-bg-color" %>
+      --header-item-font-color: <%= design_color.contrasting_font_color %>;
+      <% if design_color.bright? %>
         --header-border-bottom-width: 1px;
+        --header-border-bottom-color: #d0d7de;
+      <% end %>
     <% end %>
-    <% if design_color.variable == "main-menu-border-color" %>
+    <% if design_color.variable == "header-item-bg-hover-color" %>
+      --header-item-font-hover-color: <%= design_color.contrasting_font_color %>;
+    <% end %>
+    <% if design_color.variable == "main-menu-bg-color" %>
+      --main-menu-font-color: <%= design_color.contrasting_font_color %>;
+      <% if design_color.bright? %>
         --main-menu-border-width: 1px;
+        --main-menu-border-color: #d0d7de;
+      <% end %>
+    <% end %>
+    <% if design_color.variable == "main-menu-bg-selected-background" %>
+      --main-menu-selected-font-color: <%= design_color.contrasting_font_color %>;
+    <% end %>
+    <% if design_color.variable == "main-menu-bg-hover-background" %>
+      --main-menu-hover-font-color: <%= design_color.contrasting_font_color %>;
     <% end %>
     <% if design_color.variable == "primary-button-color" %>
         --primary-button-color--major1: <%= design_color.darken 0.18 %>;

frontend/src/global_styles/openproject/_variable_defaults.scss

@@ -86,9 +86,9 @@
   --main-menu-bg-selected-background: #175A8E;
   --main-menu-bg-hover-background: #124E7C;
   --main-menu-font-color: #FFFFFF;
-  --main-menu-hover-font-color: var(--main-menu-font-color);
+  --main-menu-hover-font-color: #FFFFFF;
   --main-menu-resizer-color: var(--main-menu-border-color);
-  --main-menu-selected-font-color: var(--main-menu-font-color);
+  --main-menu-selected-font-color: #FFFFFF;
   --main-menu-font-size: 14px;
   --main-menu-fieldset-header-color: #B0B2B3;
   --main-menu-hover-border-color: transparent;

lib/open_project/custom_styles/design.rb

@@ -72,16 +72,9 @@ def customizable_variables
           accent-color
           header-bg-color
           header-item-bg-hover-color
-          header-item-font-color
-          header-item-font-hover-color
-          header-border-bottom-color
           main-menu-bg-color
           main-menu-bg-selected-background
-          main-menu-bg-hover-background
-          main-menu-font-color
-          main-menu-selected-font-color
-          main-menu-hover-font-color
-          main-menu-border-color )
+          main-menu-bg-hover-background)
     end
   end
 end