[EuiIcon, EuiButtonIcon] Improved contrast for named colors (#4049)

* Improved constrast for icons named colors * Changelog * Improved contrast only for EuiHealth named colors * Fixing button icon color * Icons colors with graphic contrast levels. Button icon colors with text contrast levels. * CL and snapshots * reverting euiHealth code to use euiIcon color prop * Reverting euiHealth code * Better CL
elastic · Sep 24, 2020 · 4ed1089 · 4ed1089
1 parent c94385e
commit 4ed1089
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Improved contrast for `EuiIcon` and `EuiButtonIcon` named colors. This affects `EuiHealth` which uses the `EuiIcon` colors. ([#4049](https://github.com/elastic/eui/pull/4049))
+- Added color `accent` to `EuiButtonIcon` ([#4049](https://github.com/elastic/eui/pull/4049))
+
 **Theme: Amsterdam**
 
 - Removed `border-radius` from `EuiCallout` ([#4066](https://github.com/elastic/eui/pull/4066))

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -175,7 +175,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   @if (lightness($euiTextColor) < 50) {
     background: $euiColorDarkestShade;
   }
-  padding: $euiSizeL;
 }
 
 .guideDemo__icon {

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -7,6 +7,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonToggle,
+  EuiPanel,
 } from '../../../../src/components';
 
 export default () => {
@@ -17,67 +18,67 @@ export default () => {
   };
 
   return (
-    <EuiFlexGroup
-      wrap
-      gutterSize="s"
-      alignItems="center"
-      className="guideDemo__ghostBackground">
-      <EuiFlexItem grow={false}>
-        <EuiButton color="ghost" onClick={() => window.alert('Button clicked')}>
-          Ghost
-        </EuiButton>
-      </EuiFlexItem>
+    <EuiPanel paddingSize="l" className="guideDemo__ghostBackground">
+      <EuiFlexGroup wrap gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="ghost"
+            onClick={() => window.alert('Button clicked')}>
+            Ghost
+          </EuiButton>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          fill
-          color="ghost"
-          size="s"
-          iconType="check"
-          onClick={() => window.alert('Button clicked')}>
-          Filled
-        </EuiButton>
-      </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            color="ghost"
+            size="s"
+            iconType="check"
+            onClick={() => window.alert('Button clicked')}>
+            Filled
+          </EuiButton>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          size="s"
-          color="ghost"
-          onClick={() => window.alert('Button clicked')}>
-          small
-        </EuiButtonEmpty>
-      </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            size="s"
+            color="ghost"
+            onClick={() => window.alert('Button clicked')}>
+            small
+          </EuiButtonEmpty>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          size="s"
-          color="ghost"
-          iconType="user"
-          onClick={() => window.alert('Button clicked')}
-          aria-label="Your account"
-        />
-      </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size="s"
+            color="ghost"
+            iconType="user"
+            onClick={() => window.alert('Button clicked')}
+            aria-label="Your account"
+          />
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton color="ghost" isLoading fill size="s">
-          Loading&hellip;
-        </EuiButton>
-      </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton color="ghost" isLoading fill size="s">
+            Loading&hellip;
+          </EuiButton>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButton color="ghost" isLoading>
-          Loading&hellip;
-        </EuiButton>
-      </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton color="ghost" isLoading>
+            Loading&hellip;
+          </EuiButton>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiButtonToggle
-          color="ghost"
-          label="Toggle Me"
-          fill={toggle0On}
-          onChange={onToggle0Change}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiButtonToggle
+            color="ghost"
+            label="Toggle Me"
+            fill={toggle0On}
+            onChange={onToggle0Change}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 };
diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js
@@ -9,6 +9,7 @@ import {
 const colors = [
   'primary',
   'text',
+  'accent',
   'subdued',
   'success',
   'warning',

diff --git a/src-docs/src/views/health/health.js b/src-docs/src/views/health/health.js
@@ -4,7 +4,11 @@ import { EuiHealth, EuiSpacer } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiHealth color="subdued">Unknown</EuiHealth>
+    <EuiHealth color="subdued">Inactive</EuiHealth>
+
+    <EuiSpacer />
+
+    <EuiHealth color="primary">Active</EuiHealth>
 
     <EuiSpacer />
 

diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
@@ -11,6 +11,8 @@
 
 import React from 'react';
 
+import classNames from 'classnames';
+
 import {
   EuiFlexGrid,
   EuiFlexItem,
@@ -24,7 +26,7 @@ import {
 const iconColors = [
   'default',
   'primary',
-  'secondary',
+  'success',
   'accent',
   'warning',
   'danger',
@@ -44,9 +46,14 @@ export default () => (
           className="guideDemo__icon"
           key={iconColor}
           style={{ width: '340px' }}>
-          <EuiPanel>
+          <EuiPanel
+            className={classNames({
+              guideDemo__ghostBackground: iconColor === 'ghost',
+            })}>
             <EuiIcon type="brush" color={iconColor} />
-            <EuiText size="s">
+            <EuiText
+              size="s"
+              color={iconColor === 'ghost' ? 'ghost' : 'default'}>
               <p>{iconColor}</p>
             </EuiText>
           </EuiPanel>

diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -9,6 +9,14 @@ exports[`EuiButtonIcon is rendered 1`] = `
 />
 `;
 
+exports[`EuiButtonIcon props color accent is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--accent"
+  type="button"
+/>
+`;
+
 exports[`EuiButtonIcon props color danger is rendered 1`] = `
 <button
   aria-label="button"

diff --git a/src/components/button/button_icon/_variables.scss b/src/components/button/button_icon/_variables.scss
@@ -1,11 +1,12 @@
 // Modifier naming and colors.
 $euiButtonIconTypes: (
-  danger: $euiColorDanger,
+  accent: $euiColorAccentText,
+  danger: $euiColorDangerText,
   disabled: $euiButtonColorDisabledText,
   ghost: $euiColorGhost,
-  primary: $euiColorPrimary,
+  primary: $euiColorPrimaryText,
   subdued: $euiTextSubduedColor,
-  success: $euiColorSuccess,
+  success: $euiColorSuccessText,
   text: $euiTextColor,
-  warning: $euiColorWarning,
+  warning: $euiColorWarningText,
 );
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -39,6 +39,7 @@ import { IconType, IconSize, EuiIcon } from '../../icon';
 import { ButtonSize } from '../button';
 
 export type EuiButtonIconColor =
+  | 'accent'
   | 'danger'
   | 'disabled'
   | 'ghost'
@@ -82,6 +83,7 @@ type Props = ExclusiveUnion<
 >;
 
 const colorToClassNameMap: { [color in EuiButtonIconColor]: string } = {
+  accent: 'euiButtonIcon--accent',
   danger: 'euiButtonIcon--danger',
   disabled: 'euiButtonIcon--disabled',
   ghost: 'euiButtonIcon--ghost',

diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
@@ -2,15 +2,15 @@ $euiIconLoadingOpacity: .05;
 
 // Modifier naming and colors.
 $euiIconColors: (
-  text: $euiTextColor,
-  subdued: $euiTextSubduedColor,
-  primary: $euiColorPrimaryText,
-  secondary: $euiColorSecondaryText,
-  success: $euiColorSuccessText,
-  accent: $euiColorAccentText,
-  warning: $euiColorWarningText,
-  danger: $euiColorDangerText,
+  accent: makeGraphicContrastColor($euiColorAccent),
+  danger: makeGraphicContrastColor($euiColorDanger),
   ghost: $euiColorGhost,
+  primary: makeGraphicContrastColor($euiColorPrimary),
+  secondary: makeGraphicContrastColor($euiColorSecondary),
+  success: makeGraphicContrastColor($euiColorSuccess),
+  subdued: $euiTextSubduedColor,
+  text: $euiTextColor,
+  warning: makeGraphicContrastColor($euiColorWarning),
 );
 
 $euiIconSizes: (