Full range of button icon colors (elastic#908)

Fixes for button icon coloring and dark theme changes.

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added multiple style-only adjustments to `EuiFormControlLayout` buttons/icons ([#894](https://github.com/elastic/eui/pull/894))
 - Shifted `readOnly` inputs to not have left padding unless it has an icon ([#894](https://github.com/elastic/eui/pull/894))
 - Added more customization options to `EuiAvatar` ([#903](https://github.com/elastic/eui/pull/903))
+- Added more color options to `EuiButtonIcon` ([#907](https://github.com/elastic/eui/pull/907))
 
 **Bug fixes**
 
@@ -19,6 +20,7 @@
 - Fixed responsive widths of `EuiDescribedFormGroup` ([#894](https://github.com/elastic/eui/pull/894))
 - Fixed descenders being cut off in `EuiSelect` ([#894](https://github.com/elastic/eui/pull/894))
 - Fixed extra spacing applied by Safari to `EuiFieldSearch` ([#894](https://github.com/elastic/eui/pull/894))
+- Fixed contrast issues in dark theming ([#907](https://github.com/elastic/eui/pull/907))
 
 ## [`0.0.51`](https://github.com/elastic/eui/tree/v0.0.51)
 

src-docs/src/views/button/button_example.js

@@ -164,7 +164,10 @@ export const ButtonExample = {
     }],
     text: (
       <p>
-        Button icons are buttons that only contain an icon (no text).
+        Button icons are buttons that only contain an icon
+        (no text). <strong>Note:</strong> the
+        the dark background on the <EuiCode>ghost</EuiCode> example is used
+        only for illustrative purposes.
       </p>
     ),
     props: { EuiButtonIcon },

src-docs/src/views/button/button_icon.js

@@ -6,35 +6,31 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
+const colors = [
+  'primary',
+  'text',
+  'subdued',
+  'success',
+  'warning',
+  'danger',
+  'disabled',
+];
+
 export default () => (
   <EuiFlexGroup gutterSize="s" alignItems="center">
-    <EuiFlexItem grow={false}>
-      <EuiButtonIcon
-        onClick={() => window.alert('Button clicked')}
-        iconType="arrowRight"
-        aria-label="Next"
-      />
-    </EuiFlexItem>
-
-    <EuiFlexItem grow={false}>
-      <EuiButtonIcon
-        size="s"
-        color="danger"
-        onClick={() => window.alert('Button clicked')}
-        iconType="arrowRight"
-        aria-label="Next"
-      />
-    </EuiFlexItem>
-
-    <EuiFlexItem grow={false}>
-      <EuiButtonIcon
-        size="s"
-        color="disabled"
-        onClick={() => window.alert('Button clicked')}
-        iconType="arrowRight"
-        aria-label="Next"
-      />
-    </EuiFlexItem>
+    {
+      colors.map(color => (
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size="s"
+            color={color}
+            onClick={() => window.alert('Button clicked')}
+            iconType="arrowRight"
+            aria-label="Next"
+            disabled={color === "disabled" ? true : false}
+          />
+        </EuiFlexItem>
+      ))
+    }
   </EuiFlexGroup>
 );
-

src/components/button/button_icon/__snapshots__/button_icon.test.js.snap

@@ -41,6 +41,22 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
 />
 `;
 
+exports[`EuiButtonIcon props color subdued is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--subdued"
+  type="button"
+/>
+`;
+
+exports[`EuiButtonIcon props color success is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--success"
+  type="button"
+/>
+`;
+
 exports[`EuiButtonIcon props color text is rendered 1`] = `
 <button
   aria-label="button"
@@ -49,6 +65,14 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
 />
 `;
 
+exports[`EuiButtonIcon props color warning is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--warning"
+  type="button"
+/>
+`;
+
 exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
 <a
   aria-label="button"

src/components/button/button_icon/_button_icon.scss

@@ -32,11 +32,14 @@
 
 // Modifier naming and colors.
 $buttonTypes: (
-  primary: $euiColorPrimary,
   danger: $euiColorDanger,
-  disabled: tintOrShade($euiTextColor, 70%, 80%),
+  disabled: $euiButtonColorDisabled,
   ghost: $euiColorGhost,
+  primary: $euiColorPrimary,
+  subdued: $euiColorDarkShade,
+  success: $euiColorSuccess,
   text: $euiTextColor,
+  warning: $euiColorWarning,
 );
 
 // Create button modifiders based upon the map.

src/components/button/button_icon/button_icon.js

@@ -25,11 +25,14 @@ const accessibleButtonIcon = (props, propName, componentName) => {
 };
 
 const colorToClassNameMap = {
-  primary: 'euiButtonIcon--primary',
   danger: 'euiButtonIcon--danger',
   disabled: 'euiButtonIcon--disabled',
   ghost: 'euiButtonIcon--ghost',
+  primary: 'euiButtonIcon--primary',
+  subdued: 'euiButtonIcon--subdued',
+  success: 'euiButtonIcon--success',
   text: 'euiButtonIcon--text',
+  warning: 'euiButtonIcon--warning',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);

src/themes/eui/eui_colors_dark.scss

@@ -1,10 +1,10 @@
 // Dark theme overides
 
 $euiColorEmptyShade: #222;
-$euiColorLightestShade: #272727;
+$euiColorLightestShade: #242424;
 $euiColorLightShade: #333;
 $euiColorMediumShade: #444;
-$euiColorDarkShade: #D9D9D9;
+$euiColorDarkShade: #8A8A8A;
 $euiColorDarkestShade: #F5F5F5;
 $euiColorFullShade: #FFF;
 $euiColorSlightHue: #494E51;

src/themes/k6/k6_colors_dark.scss

@@ -1,13 +1,15 @@
 // Dark theme overides
 
 $euiColorEmptyShade: #222;
-$euiColorLightestShade: #272727;
+$euiColorLightestShade: #242424;
 $euiColorLightShade: #333;
 $euiColorMediumShade: #444;
-$euiColorDarkShade: #D9D9D9;
+$euiColorDarkShade: #8A8A8A;
 $euiColorDarkestShade: #F5F5F5;
 $euiColorFullShade: #FFF;
+$euiColorSlightHue: #494E51;
 $euiColorPrimary: #4da1c0;
+$euiColorWarning: #c06c4c;
 $euiColorDanger: #bf4d4d;
 $euiTextColor: #DDD;