[Amsterdam] Updating button styles (#2874)

* Saturating colors and providing contrast mixin for text.

* Adding text-specific color variables and updating components to use them.

* Adding a danger text color as well.

* Update some more downstream components

- Only showing the Amsterdam callout when they’ve switched to the Amsterdam theme
- Added `makeGraphicColor()` SASS color function
- Added defaults to `makeHighContrastColor()` SASS color function

* Added toggle to color guidelines to show text variant in amsterdam-light theme only

* Updating button styles.

* Updating button styles.

* Figuring out a better way to override

- Broke `euiButton()` mixin down to smaller mixins for easier reuse of base styles
- Moved `overrides/` folder out of `global_styling` and importing __after__ component imports
- Only overriding what __needs__ to/what is __different__

* Fixing the ghost colored disabled buttons

* Woking on getting the colors and states right.

* Removing rogue mixin import.

* Merge conflict in colors.js.

* CL

* Picking up requested changes.

* moving the button icon color map into global variables.

* Removing text button style from docs example and setting up deprecation

* Added `$euiButtonColorDisabledText` and refactored for its usage

* A little cleanup

* cl

* addressing button states in dark mode.

* Changing transparency instead of shade

* Fix contrast of filled ghost disabled button

* Temporarily fix context menu

* Revert "Temporarily fix context menu"

This reverts commit 8575def.

Co-authored-by: Caroline Horn <[email protected]>

CHANGELOG.md

@@ -3,6 +3,11 @@
 **Bug Fixes**
 
 - Fixed `EuiDataGrid`'s sort popover to behave properly on mobile screens ([#2979](https://github.com/elastic/eui/pull/2979))
+- Fixed `EuiButton` and other textual components' disabled contrast ([#2874](https://github.com/elastic/eui/pull/2874))
+
+**Theme: Amsterdam**
+
+- Buttons have a new visual style ([#2874](https://github.com/elastic/eui/pull/2874))
 
 ## [`20.1.0`](https://github.com/elastic/eui/tree/v20.1.0)
 

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>
 

src/components/badge/_badge.scss

@@ -23,7 +23,7 @@
     // sass-lint:disable-block no-important
     // Using !important to override inline styles
     background-color: $euiButtonColorDisabled !important;
-    color: $euiColorEmptyShade !important;
+    color: $euiButtonColorDisabledText !important;
   }
 
   &:focus-within {

src/components/button/_button.scss

@@ -44,7 +44,7 @@
   }
 
   &:disabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
     pointer-events: none;
 
@@ -53,8 +53,13 @@
       cursor: not-allowed;
     }
 
+    .euiButton__spinner {
+      border-color: euiLoadingSpinnerBorderColors(currentColor);
+    }
+
     &.euiButton--fill {
-      color: $euiColorGhost;
+      // Only increase the contrast of background color to text to 2.0 for disabled
+      color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
 
@@ -85,7 +90,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;
@@ -106,10 +111,6 @@
           border-color: darken($color, 5%);
         }
       }
-
-      &:disabled .euiButton__spinner {
-        border-color: euiLoadingSpinnerBorderColors(transparentize($fillTextColor, .3));
-      }
     }
 
     &:enabled {
@@ -133,14 +134,22 @@
         }
       }
     }
+  }
+}
 
-    &:disabled,
-    &:disabled:hover,
-    &:disabled:focus {
-      @if ($name == 'ghost') {
-        @include euiSlightShadow($euiColorInk);
-      }
-    }
+// Fix ghost/disabled look specifically
+.euiButton:disabled.euiButton--ghost {
+  &,
+  &:hover,
+  &:focus {
+    @include euiSlightShadow($euiColorInk);
+    color: $euiButtonColorGhostDisabled;
+    border-color: $euiButtonColorGhostDisabled;
+  }
+
+  &.euiButton--fill {
+    background-color: $euiButtonColorGhostDisabled;
+    color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
   }
 }
 

src/components/button/button.tsx

@@ -27,6 +27,10 @@ export type ButtonColor =
   | 'warning'
   | 'danger'
   | 'ghost'
+  /**
+   * Set for deprecation 2/26/20
+   * This color button can easily be confused with disabled, it should not be used
+   */
   | 'text';
 
 export type ButtonSize = 's' | 'm';
@@ -60,6 +64,9 @@ export interface EuiButtonProps extends CommonProps {
   iconType?: IconType;
   iconSide?: ButtonIconSide;
   fill?: boolean;
+  /**
+   * `text` color is set for deprecation
+   */
   color?: ButtonColor;
   size?: ButtonSize;
   isLoading?: boolean;

src/components/button/button_empty/_button_empty.scss

@@ -41,7 +41,7 @@
   }
 
   &:disabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     pointer-events: none;
 
     .euiButtonEmpty__content {
@@ -50,7 +50,7 @@
     }
 
     .euiButtonEmpty__icon {
-      fill: $euiButtonColorDisabled;
+      fill: currentColor;
     }
 
     &:focus {
@@ -68,7 +68,7 @@
 $euiButtonEmptyTypes: (
   primary: $euiColorPrimary,
   danger: $euiColorDanger,
-  disabled: tintOrShade($euiTextColor, 70%, 80%),
+  disabled: $euiButtonColorDisabledText,
   ghost: $euiColorGhost,
   text: $euiTextColor,
 );

src/components/button/button_icon/_button_icon.scss

@@ -18,7 +18,7 @@
   }
 
   &:disabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     pointer-events: none;
 
     .euiButtonIcon__icon {
@@ -34,18 +34,6 @@
   }
 }
 
-// Modifier naming and colors.
-$euiButtonIconTypes: (
-  danger: $euiColorDanger,
-  disabled: $euiButtonColorDisabled,
-  ghost: $euiColorGhost,
-  primary: $euiColorPrimary,
-  subdued: $euiColorDarkShade,
-  success: $euiColorSuccess,
-  text: $euiTextColor,
-  warning: $euiColorWarning,
-);
-
 // Create button modifiders based upon the map.
 @each $name, $color in $euiButtonIconTypes {
   .euiButtonIcon--#{$name} {

src/components/button/button_icon/_index.scss

@@ -1 +1,2 @@
+@import 'variables';
 @import 'button_icon';

src/components/button/button_icon/_variables.scss

@@ -0,0 +1,11 @@
+// Modifier naming and colors.
+$euiButtonIconTypes: (
+  danger: $euiColorDanger,
+  disabled: $euiButtonColorDisabledText,
+  ghost: $euiColorGhost,
+  primary: $euiColorPrimary,
+  subdued: $euiColorDarkShade,
+  success: $euiColorSuccess,
+  text: $euiTextColor,
+  warning: $euiColorWarning,
+);

src/components/context_menu/_context_menu_item.scss

@@ -15,7 +15,7 @@
   }
 
   &.euiContextMenuItem-isDisabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     cursor: default;
 
     &:hover,

src/components/facet/_facet_button.scss

@@ -31,7 +31,7 @@
   }
 
   &:disabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     pointer-events: none;
 
     .euiFacetButton__content {

src/components/filter_group/_filter_button.scss

@@ -7,7 +7,7 @@
   font-size: $euiFontSizeS;
 
   &:disabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     pointer-events: none;
 
     .euiFilterButton__notification {

src/components/key_pad_menu/_key_pad_menu.scss

@@ -42,14 +42,14 @@
   }
 
   &:disabled {
-    color: $euiButtonColorDisabled;
+    color: $euiButtonColorDisabledText;
     cursor: not-allowed;
 
     .euiKeyPadMenuItem__icon  {
       filter: grayscale(100%);
 
       svg * { // sass-lint:disable-line nesting-depth
-        fill: $euiButtonColorDisabled;
+        fill: $euiButtonColorDisabledText;
       }
     }
 

src/global_styling/functions/_colors.scss

@@ -128,4 +128,3 @@
 @function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) {
   @return makeHighContrastColor($color, $background, 3);
 }
-

src/global_styling/mixins/_button.scss

@@ -1,29 +1,25 @@
-@mixin euiButton {
-  @include euiFont;
-  @include euiFontSize;
-
+// Provides a solid reset and base for handling sizing layout
+// Does not include any visual styles
+@mixin euiButtonBase {
   display: inline-block;
   appearance: none;
   cursor: pointer;
   height: $euiButtonHeight;
   line-height: $euiButtonHeight; // prevents descenders from getting cut off
-  text-decoration: none;
-  border: solid 1px transparent;
   text-align: center;
-  transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
   white-space: nowrap;
   max-width: 100%;
   vertical-align: middle;
+}
+
+// Adds the focus (and hover) animation for translating up 1px
+@mixin euiButtonFocus {
+  transition: all $euiAnimSpeedNormal ease-in-out;
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
   }
 
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: underline;
-  }
-
   &:focus {
     animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
   }
@@ -33,9 +29,35 @@
   }
 }
 
+// All of the button base styles including the base, focus, font, and initial styles
+// Does not include individual alterations like color or sizes
+@mixin euiButton {
+  @include euiButtonBase;
+  @include euiFont;
+  @include euiFontSize;
+
+  text-decoration: none;
+  border: solid 1px transparent;
+
+  // sass-lint:disable mixins-before-declarations
+  // focus states should come after all default styles
+  @include euiButtonFocus;
+
+  &:hover:not(:disabled),
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+// Correctly lays out the contents of a button when using the proper dom elements of:
+// <button>
+//   <span className="__content">
+//     {icon/spinner}
+//     {child}
+//   </span>
+// </button>
 // 1. Apply margin to all but last item in the flex.
 // 2. Margin gets flipped because of the row-reverse.
-
 @mixin euiButtonContent($isReverse: false) {
   height: 100%;
   width: 100%;

src/global_styling/variables/_buttons.scss

@@ -2,6 +2,9 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
+// Only increase the contrast of background color to text to 2.0 for disabled
+$euiButtonColorDisabledText: makeHighContrastColor($euiButtonColorDisabled, $euiPageBackgroundColor, 2) !default;
+$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade) !default;
 $euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.

src/theme_amsterdam_dark.scss

@@ -9,3 +9,7 @@
 
 // Packages
 @import '../packages/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import 'themes/eui-amsterdam/overrides/index';

src/theme_amsterdam_light.scss

@@ -9,3 +9,7 @@
 
 // Packages
 @import '../packages/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import 'themes/eui-amsterdam/overrides/index';

src/themes/eui-amsterdam/global_styling/index.scss

@@ -5,6 +5,7 @@
 
 // Variables come next, and are used in some mixins
 @import '../../../global_styling/variables/index';
+@import 'variables/index';
 
 // Mixins provide generic code expansion through helpers
 @import '../../../global_styling/mixins/index';

src/themes/eui-amsterdam/global_styling/mixins/_button.scss

@@ -0,0 +1,18 @@
+@mixin euiButton {
+  @include euiButtonBase;
+  @include euiFont;
+  @include euiFontSize;
+
+  font-weight: $euiFontWeightMedium;
+  text-decoration: none;
+  transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
+
+  // sass-lint:disable mixins-before-declarations
+  // focus states should come after all default styles
+  @include euiButtonFocus;
+
+  &:hover:not(:disabled),
+  &:focus {
+    text-decoration: underline;
+  }
+}

src/themes/eui-amsterdam/global_styling/mixins/_index.scss

@@ -1 +1,2 @@
 @import 'panel';
+@import 'button';

src/themes/eui-amsterdam/global_styling/variables/_borders.scss

@@ -0,0 +1 @@
+$euiBorderRadius: $euiSizeS * .75;

src/themes/eui-amsterdam/global_styling/variables/_buttons.scss

@@ -0,0 +1 @@
+$euiButtonColorDisabled: tintOrShade($euiTextColor, 75%, 70%);

src/themes/eui-amsterdam/global_styling/variables/_index.scss

@@ -0,0 +1,2 @@
+@import 'buttons';
+@import 'borders';