Fix action button disable css (#1567)

* Darken light theme to comply with WCAG AA * Adjust opacity on disabled Color and/or opacity is used to delineate enabled vs disabled elements. Both are required becaus some themes do not change color on disabled.
bitwarden · Jan 25, 2021 · a261697 · a261697
1 parent f71bf77
commit a261697
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
@@ -378,11 +378,13 @@
             &.disabled {
                 @include themify($themes) {
                     color: themed('disabledIconColor');
+                    opacity: themed('disabledBoxOpacity');
                 }
 
                 &:hover {
                     @include themify($themes) {
                         color: themed('disabledIconColor');
+                        opacity: themed('disabledBoxOpacity');
                     }
                 }
             }

diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss
@@ -9,7 +9,8 @@ $text-color: #000000;
 $border-color: #f0f0f0;
 $border-color-dark: #ddd;
 $list-item-hover: #fbfbfb;
-$list-icon-color: #c7c7cd;
+$list-icon-color: #767679;
+$disabled-box-opacity: 1;
 $border-radius: 3px;
 $line-height-base: 1.42857143;
 
@@ -59,6 +60,7 @@ $themes: (
         headerInputPlaceholderColor: lighten($brand-primary, 35%),
         listItemBackgroundHoverColor: $list-item-hover,
         disabledIconColor: $list-icon-color,
+        disabledBoxOpacity: $disabled-box-opacity,
         headingColor: $gray-light,
         labelColor: $gray-light,
         mutedColor: $text-muted,
@@ -106,7 +108,8 @@ $themes: (
         headerInputColor: #ffffff,
         headerInputPlaceholderColor: #707070,
         listItemBackgroundHoverColor: #3c3c3c,
-        disabledIconColor: #c7c7cd,
+        disabledIconColor: #cacaca,
+        disabledBoxOpacity: 0.5,
         headingColor: #a3a3a3,
         labelColor: #a3a3a3,
         mutedColor: #a3a3a3,
@@ -154,7 +157,8 @@ $themes: (
         headerInputColor: $nord2,
         headerInputPlaceholderColor: $nord3,
         listItemBackgroundHoverColor: $nord3,
-        disabledIconColor: $nord5,
+        disabledIconColor: $nord4,
+        disabledBoxOpacity: 0.5,
         headingColor: $nord4,
         labelColor: $nord4,
         mutedColor: $nord4,