Fixing the ghost colored disabled buttons

elastic · Feb 20, 2020 · d4d215a · d4d215a
1 parent 0a6b406
commit d4d215a
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -33,7 +33,7 @@ export default class extends Component {
           <EuiButton
             color="ghost"
             onClick={() => window.alert('Button clicked')}>
-            Primary
+            Ghost
           </EuiButton>
         </EuiFlexItem>
 

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -54,7 +54,7 @@
     }
 
     &.euiButton--fill {
-      color: $euiColorGhost;
+      color: lightOrDarkTheme($euiColorGhost, $euiColorLightShade);
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
 
@@ -85,7 +85,7 @@
       color: $euiTextColor;
     } @else {
       // Other colors need to check their contrast against the page background color.
-      color: makeHighContrastColor($color, $euiColorEmptyShade);
+      color: makeHighContrastColor($color, $euiPageBackgroundColor);
     }
 
     border-color: $color;
@@ -133,13 +133,31 @@
         }
       }
     }
+  }
+}
 
-    &:disabled,
-    &:disabled:hover,
-    &:disabled:focus {
-      @if ($name == 'ghost') {
-        @include euiSlightShadow($euiColorInk);
-      }
+// Fix ghost/disabled look specifically
+.euiButton:disabled.euiButton--ghost {
+  @include euiSlightShadow($euiColorInk);
+
+  &,
+  &:hover,
+  &:focus {
+    @include euiSlightShadow($euiColorInk);
+    color: $euiButtonColorGhostDisabled;
+    border-color: $euiButtonColorGhostDisabled;
+  }
+
+  .euiButton__spinner {
+    border-color: euiLoadingSpinnerBorderColors(transparentize($euiButtonColorGhostDisabled, .3));
+  }
+
+  &.euiButton--fill {
+    background-color: $euiButtonColorGhostDisabled;
+    color: $euiColorInk;
+
+    .euiButton__spinner {
+      border-color: euiLoadingSpinnerBorderColors(transparentize($euiColorInk, .3));
     }
   }
 }

diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
@@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
+$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade);
 $euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.

diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
@@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
+$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade);
 $euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.

diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss
@@ -12,7 +12,7 @@
     // Make sure to continue to use the variables used for these specific purposes
     // and just change the value of them, not the style
     // color: $euiColorMediumShade;
-    background-color: transparentize($euiButtonColorDisabled, .8);
+    background-color: transparentize($euiButtonColorDisabled, .9);
   }
 }
 
@@ -26,7 +26,7 @@
 
     @if ($name == 'ghost') {
       // Ghost is unique and ALWAYS sits against a dark background.
-      $backgroundColorSimulated: mix($euiColorDarkestShade, $color, 80%);
+      $backgroundColorSimulated: mix($euiColorInk, $color, 70%);
       color: makeHighContrastColor($color, $backgroundColorSimulated);
     } @else {
       // Then we can calculate the darkest text color needed