Merge pull request #19975 from calixteman/fix_color_dialog_buttons

calixteman · web-flow · commit 712d502561a2 · 2025-05-28T16:14:28.000+02:00
Fix the colors of disabled buttons in the dialogs
diff --git a/web/dialog.css b/web/dialog.css
@@ -51,6 +51,11 @@
   );
   --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
   --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
+  --button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
+  --button-secondary-disabled-border-color: var(
+    --button-secondary-border-color
+  );
+  --button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
 
   --button-primary-bg-color: light-dark(#0060df, #0df);
   --button-primary-fg-color: light-dark(#fbfbfe, #15141a);
@@ -61,15 +66,17 @@
   --button-primary-hover-bg-color: light-dark(#0250bb, #80ebff);
   --button-primary-hover-fg-color: var(--button-primary-fg-color);
   --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
-
-  --button-disabled-bg-color: color-mix(in srgb, currentcolor, transparent 60%);
-  --button-disabled-fg-color: var(--button-disabled-bg-color);
+  --button-primary-disabled-bg-color: var(--button-primary-bg-color);
+  --button-primary-disabled-border-color: var(--button-primary-border-color);
+  --button-primary-disabled-fg-color: var(--button-primary-fg-color);
+  --button-disabled-opacity: 0.4;
 
   --input-text-bg-color: light-dark(white, #42414d);
   --input-text-fg-color: var(--text-primary-color);
 
   @media (prefers-color-scheme: dark) {
     --hover-filter: brightness(1.4);
+    --button-disabled-opacity: 0.6;
   }
 
   @media screen and (forced-colors: active) {
@@ -101,6 +108,8 @@
     --button-secondary-hover-bg-color: HighlightText;
     --button-secondary-hover-fg-color: SelectedItem;
     --button-secondary-hover-border-color: SelectedItem;
+    --button-secondary-disabled-fg-color: GrayText;
+    --button-secondary-disabled-border-color: GrayText;
 
     --button-primary-bg-color: ButtonText;
     --button-primary-fg-color: HighlightText;
@@ -111,9 +120,10 @@
     --button-primary-hover-bg-color: SelectedItem;
     --button-primary-hover-fg-color: HighlightText;
     --button-primary-hover-border-color: SelectedItem;
-
-    --button-disabled-bg-color: GrayText;
-    --button-disabled-fg-color: ButtonFace;
+    --button-primary-disabled-bg-color: GrayText;
+    --button-primary-disabled-fg-color: ButtonFace;
+    --button-primary-disabled-border-color: GrayText;
+    --button-disabled-opacity: 1;
 
     --input-text-bg-color: HighlightText;
     --input-text-fg-color: FieldText;
@@ -249,6 +259,13 @@
           background-color: var(--button-secondary-active-bg-color);
           border-color: var(--button-secondary-active-border-color);
         }
+
+        &:disabled {
+          background-color: var(--button-secondary-disabled-bg-color);
+          border-color: var(--button-secondary-disabled-border-color);
+          color: var(--button-secondary-disabled-fg-color);
+          opacity: var(--button-disabled-opacity);
+        }
       }
 
       &.primaryButton {
@@ -268,12 +285,16 @@
           background-color: var(--button-primary-active-bg-color);
           border-color: var(--button-primary-active-border-color);
         }
+
+        &:disabled {
+          background-color: var(--button-primary-disabled-bg-color);
+          border-color: var(--button-primary-disabled-border-color);
+          color: var(--button-primary-disabled-fg-color);
+          opacity: var(--button-disabled-opacity);
+        }
       }
 
       &:disabled {
-        color: var(--button-disabled-fg-color) !important;
-        background-color: var(--button-disabled-bg-color);
-        border-color: var(--button-disabled-bg-color);
         pointer-events: none;
       }
     }
