Merge pull request #15601 from opf/bug/55132-disabled-primer-button-s…

…tyles-not-displayed-correctly [55132] Disabled Primer button styles not displayed correctly
opf · May 17, 2024 · 1deb14e · 1deb14e
2 parents 4157128 + 8645918
commit 1deb14e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/app/views/custom_styles/_inline_css.erb b/app/views/custom_styles/_inline_css.erb
@@ -40,6 +40,7 @@ See COPYRIGHT and LICENSE files for more details.
     <% if design_color.variable == "primary-button-color" %>
         --primary-button-color--major1: <%= design_color.darken 0.18 %>;
         --primary-button-color--minor1: <%= design_color.lighten 0.8 %>;
+        --primary-button-color--minor2: <%= design_color.lighten 0.6 %>;
     <% end %>
     <% if design_color.variable == "accent-color" %>
         --accent-color--major1: <%= design_color.darken 0.2 %>;

diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb
@@ -16,6 +16,7 @@
     --button-primary-bgColor-rest: var(--button--primary-background-color) !important;
     --button-primary-bgColor-hover: var(--button--primary-background-hover-color) !important;
     --button-primary-bgColor-disabled: var(--button--primary-background-disabled-color) !important;
+    --button-primary-borderColor-disabled: var(--button--primary-border-disabled-color) !important;
   }
   [data-light-theme=light_high_contrast]{
     --avatar-border-color: var(--avatar-borderColor);

diff --git a/frontend/src/global_styles/openproject/_variable_defaults.scss b/frontend/src/global_styles/openproject/_variable_defaults.scss
@@ -31,6 +31,8 @@
 :root {
   --primary-button-color: #1F883D;
   --primary-button-color--major1: #197032;
+  --primary-button-color--minor1: #d2e7d8;
+  --primary-button-color--minor2: #a5cfb1;
 
   --control-checked-color: var(--accent-color);
   --control-checked-color--major1: var(--accent-color--major1);
@@ -128,7 +130,8 @@
   --button--active-border-color: #cacaca;
   --button--primary-background-color: var(--primary-button-color);
   --button--primary-background-hover-color: var(--primary-button-color--major1);
-  --button--primary-background-disabled-color: var(--primary-button-color--minor1);
+  --button--primary-background-disabled-color: var(--primary-button-color--minor2);
+  --button--primary-border-disabled-color: var(--primary-button-color--minor2);
   --button--primary-font-color: var(--font-color-on-primary);
   --generic-table--header-font-size: 0.875rem;
   --generic-table--header-height: 45px;