Fix disabled color on icon buttons

infor-design · May 9, 2024 · 8403878 · 8403878
1 parent abb73ea
commit 8403878
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 10 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -941,15 +941,12 @@ a.btn-close {
   .icon {
     color: $button-color-tertiary-initial-font;
   }
-
-  .ripple-effect {
-    background-color: $tertiary-btn-ripple-color;
-  }
 }
 
 .btn-icon {
   &[disabled] {
     background-color: transparent;
+    opacity: 0.4;
 
     .icon {
       color: $button-icon-disabled-color;

diff --git a/src/themes/theme-classic-dark.scss b/src/themes/theme-classic-dark.scss
@@ -108,7 +108,7 @@ $button-hyperlink-color: $ids-color-palette-slate-30;
 $button-hyperlink-hover-color: $ids-color-palette-slate-40;
 $button-color-tertiary-hover-background: $ids-color-palette-slate-50;
 $button-color-tertiary-hover-background-new: rgba(0, 0, 0, 0.25);
-$button-icon-disabled-color: $ids-color-palette-slate-60;
+$button-icon-disabled-color: $ids-color-palette-slate-10;
 $button-color-secondary-initial-font: $ids-color-palette-slate-10;
 $button-color-secondary-hover-background: $ids-color-palette-slate-50;
 $button-color-secondary-initial-background: $ids-color-palette-slate-40;

diff --git a/src/themes/theme-classic-light.scss b/src/themes/theme-classic-light.scss
@@ -25,7 +25,7 @@ $accordion-selected-text-color: $ids-color-palette-white;
 
 // Buttons
 $button-disabled-background-color: transparent;
-$button-icon-disabled-color: $ids-color-palette-slate-30;
+$button-icon-disabled-color: $ids-color-palette-slate-60;
 $button-color-secondary-initial-background: $ids-color-palette-graphite-30;
 $button-color-secondary-initial-font-new: $ids-color-palette-azure-60;
 $button-color-secondary-initial-border-new: $ids-color-palette-azure-60;

diff --git a/src/themes/theme-new-contrast.scss b/src/themes/theme-new-contrast.scss
@@ -225,6 +225,7 @@ $button-color-tertiary-focus-shadow: 0 0 0 .5px $ids-color-palette-azure-70, 0 0
 $button-color-tertiary-focus-border: $ids-color-palette-azure-70;
 $button-color-destructive-tertiary-focus-shadow: 0 0 0 1px $ids-color-palette-ruby-80, 0 0 0 .5px $ids-color-palette-ruby-80;
 $button-tertiary-gen-ai-focus: 0 0 0 0.5px #0B9789, 0 0 0 0.5px #0B9789;
+$button-icon-disabled-color: rgba(0, 0, 0, 0.9);
 
 // Secondary with Border
 $secondary-border-btn-color: $ids-color-palette-slate-90;

diff --git a/src/themes/theme-new-dark.scss b/src/themes/theme-new-dark.scss
@@ -138,11 +138,11 @@ $button-color-tertiary-hover-text-new: $ids-color-palette-white;
 $button-color-primary-destructive-initial-background-new: $ids-color-palette-ruby-60;
 $button-color-primary-destructive-hover-background-new: $ids-color-palette-ruby-70;
 $button-color-tertiary-destructive-initial-background-new: $ids-color-palette-ruby-40;
-$button-color-tertiary-destructive-hover-font-new: $ids-color-palette-ruby-10;
-$button-color-tertiary-destructive-hover-background-new: $ids-color-palette-ruby-50;
+$button-color-tertiary-destructive-hover-font-new: $ids-color-palette-ruby-40;
+$button-color-tertiary-destructive-hover-background-new: $ids-color-palette-ruby-90;
 $button-color-tertiary-destructive-disabled-font-new: $ids-color-palette-slate-60;
-$button-color-tertiary-destructive-disabled-background-new: $ids-color-palette-slate-80;
-$button-icon-disabled-color: $ids-color-palette-slate-60;
+$button-color-tertiary-destructive-disabled-background-new: $ids-color-palette-slate-90;
+$button-icon-disabled-color: $button-color-tertiary-initial-font;
 $hero-button-color-tertiary-hover-background-new: $button-color-tertiary-hover-background-new;
 $button-color-secondary-focus-shadow: 0 0 0 1px $ids-color-palette-azure-50, 0 0 0 1px $ids-color-palette-azure-50;
 $button-color-tertiary-focus-shadow: 0 0 0 .5px $ids-color-palette-azure-50, 0 0 0 .5px $ids-color-palette-azure-50;