Remove occurences of primary-color as it was discarded

app/views/custom_styles/_inline_css.erb

@@ -40,13 +40,11 @@ See COPYRIGHT and LICENSE files for more details.
     <% if design_color.variable == "primary-button-color" %>
         --primary-button-color--major1: <%= design_color.darken 0.18 %>;
     <% end %>
-    <% if design_color.variable == "primary-color" %>
-        --primary-color--minor1: <%= design_color.lighten 0.3 %>;
-        --primary-color--minor2: <%= design_color.lighten 0.6 %>;
-        --primary-color--minor3: <%= design_color.lighten 0.8 %>;
-        --primary-color--major1: <%= design_color.darken 0.2 %>;
-        --primary-color--major2: <%= design_color.darken 0.4 %>;
-        --primary-color--major3: <%= design_color.darken 0.6 %>;
+    <% if design_color.variable == "content-link-color" %>
+        --content-link-color--major1: <%= design_color.darken 0.2 %>;
+        --content-link-color--major2: <%= design_color.darken 0.4 %>;
+        --content-link-color--minor1: <%= design_color.lighten 0.8 %>;
+        --content-link-color--minor2: <%= design_color.lighten 0.6 %>;
     <% end %>
     <% end %>
     }

config/locales/en.yml

@@ -42,7 +42,6 @@ en:
       colors:
         primary-button-color: "Primary button"
         content-link-color: "Link font"
-        primary-color: "Primary"
         header-bg-color: "Header background"
         header-item-bg-hover-color: "Header background on hover"
         header-item-font-color: "Header font"
@@ -63,7 +62,6 @@ en:
       instructions:
         primary-button-color: "Strong accent color, used for the most important button on a screen."
         content-link-color: "Font color of most of the links."
-        primary-color: "Main color."
         header-item-bg-hover-color: "Background color of clickable header items when hovered with the mouse."
         header-item-font-color: "Font color of clickable header items."
         header-item-font-hover-color: "Font color of clickable header items when hovered with the mouse."

frontend/src/app/core/global_search/input/global-search-input.component.sass

@@ -126,12 +126,8 @@ $search-input-height: 30px
       background-color: unset
       &:last-child
         border-bottom: none
-      &.ng-option-marked
-        color: var(--header-drop-down-item-font-hover-color)
       &.ng-option-disabled
         display: none
-      &.ng-option-selected
-        color: var(--header-drop-down-item-font-hover-color)
 
     &.-markable
       .ng-option

frontend/src/app/shared/components/datepicker/styles/datepicker.modal.sass

@@ -42,7 +42,7 @@
       // because that would overwrite the focus outline when the input field is focused.
       // So we make a border 2px wide like the outline, and then reduce margins by 1px so the
       // size of the element does not change.
-      border: 2px solid var(--primary-color)
+      border: 2px solid var(--control-checked-color)
       margin: -1px
 
   &--date-container

frontend/src/app/spot/styles/sass/components/breadcrumbs.sass

@@ -15,7 +15,7 @@
       height: $spot-spacing-1_5
 
       &:not(.spot-breadcrumbs--crumb-divider)
-        color: var(--primary-color)
+        color: var(--content-link-color)
 
     &_collapsed:before
       content: '...'

frontend/src/app/spot/styles/sass/components/switch.sass

@@ -49,12 +49,12 @@
       transition-timing-function: ease
 
   &--input:checked + &--fake
-    border-color: var(--primary-color)
-    background-color: var(--primary-color--minor3)
+    border-color: var(--control-checked-color)
+    background-color: var(--control-checked-color--minor1)
 
   &--input:checked + &--fake::before
     left: calc(100% - #{$spot-spacing-1} - 1px)
-    background-color: var(--primary-color)
+    background-color: var(--control-checked-color)
 
   &--input:disabled + &--fake,
   &--input:disabled + &--fake::before

frontend/src/global_styles/content/_badges.sass

@@ -27,7 +27,7 @@
 //++
 
 $badge-diameter: 1.25rem
-$badge-background: var(--primary-color)
+$badge-background: var(--control-checked-color)
 $badge-secondary-background: #F1F1F1
 $badge-color: var(--font-color-on-primary)
 

frontend/src/global_styles/content/_datepicker.sass

@@ -58,7 +58,7 @@ $datepicker--selected-border-radius: 5px
 
 .flatpickr-prev-month, .flatpickr-next-month
   svg:hover
-    fill: var(--primary-color) !important
+    fill: var(--control-checked-color) !important
 
 .flatpickr-prev-month, .flatpickr-next-month
   svg
@@ -164,13 +164,13 @@ $datepicker--selected-border-radius: 5px
         &.selected,
         &.startRange,
         &.endRange
-          background: var(--primary-color)
-          border-color: var(--primary-color)
+          background: var(--control-checked-color)
+          border-color: var(--control-checked-color)
           color: $spot-color-basic-white
 
           &:hover
-            background: var(--primary-color--major1)
-            border-color: var(--primary-color--major1)
+            background: var(--control-checked-color--major1)
+            border-color: var(--control-checked-color--major1)
 
         &.startRange
           border-radius: $datepicker--selected-border-radius 0 0 $datepicker--selected-border-radius
@@ -182,14 +182,14 @@ $datepicker--selected-border-radius: 5px
           border-radius: $datepicker--selected-border-radius
 
         &.inRange
-          background: var(--primary-color--minor3)
-          color: var(--primary-color)
-          border-color: var(--primary-color--minor3)
+          background: var(--control-checked-color--minor1)
+          color: var(--control-checked-color)
+          border-color: var(--control-checked-color--minor1)
           border-radius: 0
 
           &:hover
-            color: var(--primary-color--major1)
-            border-color: var(--primary-color--major1)
+            color: var(--control-checked-color--major1)
+            border-color: var(--control-checked-color--major1)
 
           &.flatpickr-non-working-day
             background: $spot-color-basic-gray-6

frontend/src/global_styles/content/_forms.sass

@@ -53,7 +53,6 @@ $content-form-input-border: 1px solid var(--color-border-default)
 
 %required-star
   @include default-transition
-  color: var(--primary-color--major1)
   content: '*'
   padding: 0 0.325rem
 
@@ -823,9 +822,6 @@ input[readonly].-clickable
       &::after
         @extend %required-star
 
-      &:hover::after
-        color: var(--primary-color)
-
     > a
       display: block
       min-width: 1.5rem
@@ -955,31 +951,11 @@ input[readonly].-clickable
 textarea
   text-rendering: optimizeLegibility
 
-// Overwriting Foundation color variables.
-// Unfortunatel I do not know how to get it DRY.
-input[type=range]::-moz-range-thumb
-  background: var(--primary-color)
-
-input[type=range]::-webkit-slider-thumb
-  background: var(--primary-color)
-
-input[type=range]::-ms-thumb
-  background: var(--primary-color)
-
-input[type=range]::-moz-range-thumb:hover
-  background: var(--primary-color--major1)
-
-input[type=range]::-webkit-slider-thumb:hover
-  background: var(--primary-color--major1)
-
 // Date and time inputs should be left-aligned on iOS
 input[type=date], input[type=time]
   &::-webkit-date-and-time-value
     text-align: left !important
 
-input[type=range]::-ms-thumb:hover
-  background: var(--primary-color--major1)
-
 // Special handling for the permissions_form of Admin/Roles --> permission report
 // Since FF ESR is not able to handle the overflow of fieldsets correctly, a workaround is needed.
 @supports (-moz-appearance: none)

frontend/src/global_styles/content/_resizer.sass

@@ -1,7 +1,6 @@
 .resizer
   width: 0
   height: 0
-  border-bottom: 20px solid var(--primary-color)
+  border-bottom: 20px solid var(--content-link-color)
   border-left: 20px solid transparent
   cursor: nwse-resize
-

frontend/src/global_styles/content/_table.sass

@@ -132,7 +132,6 @@ table.generic-table
       .-required:after
         @include default-transition
         content:  '*'
-        color:    var(--primary-color--major1)
         padding:  0 0.2rem
 
       &.-max

frontend/src/global_styles/content/_tabular.sass

@@ -34,6 +34,3 @@ label.no-css
   text-align: left
   margin-left: 0
   width: auto
-
-.required
-  color: var(--primary-color--major1)

frontend/src/global_styles/content/_tiles.sass

@@ -71,7 +71,7 @@
   &--title
     padding-top: 0
     padding-bottom: 5px
-    color: var(--primary-color--major1)
+    color: var(--content-link-color--major1)
     display: block
     text-align: left
     font-weight: var(--base-text-weight-bold)

frontend/src/global_styles/content/_toast.sass

@@ -57,6 +57,7 @@ $nm-pb-regress-color: whiteSmoke
 $nm-pb-regress-fill-color: #00558b
 $nm-pb-border-radius: rem-calc(6)
 $nm-pb-height: rem-calc(20)
+$nm-pb-background-color: #155282
 
 $nm-upload-status-font-size: rem-calc(18)
 $nm-upload-file-status-icon-size: rem-calc(12)
@@ -281,7 +282,7 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   animation: animate-stripes 5s linear infinite
   background-color: $nm-pb-regress-color
   border: rem-calc(1) solid $nm-pb-border-color
-  color: var(--primary-color--major1)
+  color: $nm-pb-background-color
   margin: 0
   width: 100%
 

frontend/src/global_styles/content/_types_form_configuration.sass

@@ -22,9 +22,9 @@
     min-height: 29px
 
 .type-form-conf-group
-  background: var(--primary-color)
+  background: var(--content-link-color)
   .group-name
-    border-color: var(--primary-color)
+    border-color: var(--content-link-color)
     border-width: 1px
     border-style: solid
     &:hover

frontend/src/global_styles/content/work_packages/_table_content.sass

@@ -49,7 +49,7 @@
   &.-dragged
     height: 0px
     border: none !important
-    outline: 1px solid var(--primary-color)
+    outline: 1px solid var(--content-link-color)
     opacity: 1
 
     .wp-table--cell-td

frontend/src/global_styles/content/work_packages/shared/_file_list.sass

@@ -76,7 +76,7 @@
       align-items: center
       padding-right: $spot-spacing-0_25
       overflow: hidden
-      color: var(--primary-color)
+      color: var(--content-link-color)
 
       &-icon
         margin-right: $spot-spacing-0_25

frontend/src/global_styles/content/work_packages/tabs/_files_tab.sass

@@ -94,7 +94,7 @@
       color: #87E2C1
 
     &_primary
-      color: var(--primary-color)
+      color: var(--content-link-color)
 
     &_default
       color: #9A9A9A

frontend/src/global_styles/layout/_toolbar.sass

@@ -265,7 +265,7 @@ $nm-color-success-background: #d8fdd1
     float: none
 
   span.filter-selection
-    @include query-select-dropdown-filter-select(var(--primary-color))
+    @include query-select-dropdown-filter-select(var(--content-link-color))
 
 .toolbar-input-group
   display: flex

frontend/src/global_styles/openproject/_mixins.sass

@@ -270,7 +270,7 @@ $scrollbar-size: 10px
       margin-right: 15px
 
 @mixin modifying--placeholder
-  border: 1px dashed var(--primary-color)
+  border: 1px dashed var(--content-link-color)
   pointer-events: none
   *
     visibility: hidden

frontend/src/global_styles/openproject/_variable_defaults.scss

@@ -29,15 +29,13 @@
 
 // use CSS4 variables for easier theming
 :root {
-  --primary-color: #1A67A3;
-  --primary-color--minor1: #5f95bf;
-  --primary-color--minor2: #a3c2da;
-  --primary-color--minor3: #d1e1ed;
-  --primary-color--major1: #155282;
-  --primary-color--major2: #103e62;
-  --primary-color--major3: #0a2941;
   --primary-button-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
   --primary-button-color--major1: #197032;
+  // TODO: Really?
+  --control-checked-color: var(--content-link-color--major1);
+  //--control-checked-color: var(--control-checked-bgColor-rest, var(--color-accent-fg));
+  --control-checked-color--major1: var(--content-link-color--major2);
+  --control-checked-color--minor1: var(--content-link-color--minor1);
 
   /**
    * The 100vh bug on iOS is a well known issue that will not be addressed.
@@ -59,7 +57,7 @@
   --base-line-height: 1.5;
   --base-text-weight-bold: 600;
   --secondary-color: #bfbfbf;
-  --content-link-color: var(--primary-color--major1);
+  --content-link-color: #155282;
   --font-color-on-primary: #FFFFFF;
   --font-color-on-primary-dark: #FFFFFF;
   --font-color-on-secondary: #FFFFFF;
@@ -67,7 +65,7 @@
   --list-side-margin: 40px;
   --header-height: 55px;
   --header-bg-color: #1A67A3;
-  --header-border-bottom-color: var(--primary-color);
+  --header-border-bottom-color: #155282;
   --header-border-bottom-width: 0;
   --header-item-font-size: 14px;
   --header-item-font-color: #FFFFFF;
@@ -75,7 +73,6 @@
   --header-item-bg-hover-color: #175A8E;
   --header-drop-down-bg-color: #FFFFFF;
   --header-drop-down-border-color: #DDDDDD;
-  --header-drop-down-item-font-hover-color: var(--primary-color);
   --main-menu-width: 230px;
   --main-menu-folded-width: 0px;
   --main-menu-border-color: #EAEAEA;
@@ -86,7 +83,7 @@
   --main-menu-bg-hover-background: #124E7C;
   --main-menu-font-color: #FFFFFF;
   --main-menu-hover-font-color: var(--main-menu-font-color);
-  --main-menu-resizer-color: var(--primary-color);
+  --main-menu-resizer-color: var(--main-menu-border-color);
   --main-menu-selected-font-color: var(--main-menu-font-color);
   --main-menu-font-size: 14px;
   --main-menu-fieldset-header-color: #B0B2B3;
@@ -140,6 +137,6 @@
   --grid-background-color: #F3F6F8;
   --avatar-border-color: transparent;
   --list-item-hover--border-color: var(--color-canvas-default-transparent);
-  --list-item-hover--color: var(--primary-color--major1);
+  --list-item-hover--color: var(--content-link-color);
   --link-text-decoration: none;
 }

lib/open_project/custom_styles/color_themes.rb

@@ -41,7 +41,6 @@ module OpenProject::CustomStyles
       {
         theme: OpenProject::CustomStyles::ColorThemes::DEFAULT_THEME_NAME,
         colors: {
-          'primary-color' => "#1A67A3",
           'primary-button-color' => PRIMER_PRIMARY_BUTTON_COLOR,
           'content-link-color' => "#175A8E",
           'header-bg-color' => "#1A67A3",
@@ -61,7 +60,6 @@ module OpenProject::CustomStyles
       {
         theme: 'OpenProject Light',
         colors: {
-          'primary-color' => "#1A67A3",
           'primary-button-color' => PRIMER_PRIMARY_BUTTON_COLOR,
           'content-link-color' => "#175A8E",
           'header-bg-color' => "#FAFAFA",
@@ -82,7 +80,6 @@ module OpenProject::CustomStyles
       {
         theme: 'OpenProject Dark',
         colors: {
-          'primary-color' => "#3270DB",
           'primary-button-color' => PRIMER_PRIMARY_BUTTON_COLOR,
           'content-link-color' => "#275BB5",
           'header-bg-color' => "#05002C",

lib/open_project/custom_styles/design.rb

@@ -68,8 +68,7 @@ module OpenProject::CustomStyles
     ##
     # Returns the keys of variables that are customizable through the design
     def customizable_variables
-      %w( primary-color
-          primary-button-color
+      %w( primary-button-color
           content-link-color
           header-bg-color
           header-item-bg-hover-color

modules/bim/lib/open_project/bim/patches/color_themes_patch.rb

@@ -24,7 +24,6 @@ module OpenProject::Bim
           {
             theme: OpenProject::CustomStyles::ColorThemes::BIM_THEME_NAME,
             colors: {
-              'primary-color' => "#3270DB",
               'primary-button-color' => OpenProject::CustomStyles::ColorThemes::PRIMER_PRIMARY_BUTTON_COLOR,
               'header-bg-color' => "#05002C",
               'header-item-bg-hover-color' => "#163473",

spec/controllers/custom_styles_controller_spec.rb

@@ -537,7 +537,7 @@ RSpec.describe CustomStylesController do
     describe "#update_colors", with_ee: %i[define_custom_style] do
       let(:params) do
         {
-          design_colors: [{ "primary-color" => "#990000" }]
+          design_colors: [{ "primary-button-color" => "#990000" }]
         }
       end
 
@@ -553,7 +553,7 @@ RSpec.describe CustomStylesController do
       end
 
       it "updates DesignColor instances" do
-        post :update_colors, params: { design_colors: [{ "primary-color" => "#110000" }] }
+        post :update_colors, params: { design_colors: [{ "primary-button-color" => "#110000" }] }
         design_colors = DesignColor.all
         expect(design_colors.size).to eq(1)
         expect(design_colors.first.hexcode).to eq("#110000")
@@ -562,7 +562,7 @@ RSpec.describe CustomStylesController do
 
       it "deletes DesignColor instances for each param" do
         expect(DesignColor.count).to eq(1)
-        post :update_colors, params: { design_colors: [{ "primary-color" => "" }] }
+        post :update_colors, params: { design_colors: [{ "primary-button-color" => "" }] }
         expect(DesignColor.count).to eq(0)
         expect(response).to redirect_to action: :show
       end

spec/factories/design_color_factory.rb

@@ -32,7 +32,7 @@ FactoryBot.define do
   end
 end
 
-{ "primary-color" => "#3493B3" }.each do |name, code|
+{ "primary-button-color" => "#3493B3" }.each do |name, code|
   FactoryBot.define do
     factory(:"design_color_#{name}", parent: :design_color) do
       variable { name }

spec/models/design_color_spec.rb

@@ -1,8 +1,8 @@
 require 'spec_helper'
 
 RSpec.describe DesignColor do
-  let(:default_primary) { OpenProject::CustomStyles::Design.variables['primary-color'] }
-  let(:primary_color) { create(:'design_color_primary-color') }
+  let(:default_primary) { OpenProject::CustomStyles::Design.variables['primary-button-color'] }
+  let(:primary_color) { create(:'design_color_primary-button-color') }
 
   describe "#setables" do
     it "returns an Array of instances" do
@@ -28,7 +28,7 @@ RSpec.describe DesignColor do
     end
 
     it "returns nil hexcode if hexcode not present" do
-      expect(described_class.new(variable: "primary-color").hexcode)
+      expect(described_class.new(variable: "primary-button-color").hexcode)
         .to be_nil
     end
   end

spec/views/layouts/base.html.erb_spec.rb

@@ -190,7 +190,7 @@ RSpec.describe 'layouts/base' do
 
     context "EE is active and styles are present" do
       let(:custom_style) { create(:custom_style) }
-      let(:primary_color) { create(:'design_color_primary-color') }
+      let(:primary_color) { create(:'design_color_primary-button-color') }
 
       before do
         allow(EnterpriseToken).to receive(:allows_to?).with(:define_custom_style).and_return(true)
@@ -206,7 +206,7 @@ RSpec.describe 'layouts/base' do
         primary_color
         render
         expect(rendered).to render_template partial: 'custom_styles/_inline_css'
-        expect(rendered).to match /--primary-color:\s*#{primary_color.hexcode}/
+        expect(rendered).to match /--primary-button-color:\s*#{primary_color.hexcode}/
       end
     end