[Amsterdam] Saturating colors and providing contrast mixin for text. (#…

…2873) * 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 * Showing callout and switich for all themes * Adding SASS example * cl Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · Feb 25, 2020 · e3d4826 · e3d4826
1 parent 06c2dcd
commit e3d4826
Show file tree

Hide file tree

Showing 17 changed files with 192 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `20.0.0`.
+- Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))
+- Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873))
+
+**Theme: Amsterdam**
+
+- Altered `secondary`, `accent` colors to be more saturated ([#2873](https://github.com/elastic/eui/pull/2873))
+
 
 ## [`20.0.0`](https://github.com/elastic/eui/tree/v20.0.0)
 

diff --git a/src-docs/src/components/guide_rule/_guide_rule_example.scss b/src-docs/src/components/guide_rule/_guide_rule_example.scss
@@ -32,7 +32,7 @@
     }
 
     .guideRule__caption {
-      color: $euiColorSuccess;
+      color: $euiColorSuccessText;
     }
   }
 

diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
@@ -24,6 +24,7 @@ import {
   EuiFormRow,
   EuiCode,
   EuiSwitch,
+  EuiCallOut,
 } from '../../../../src/components';
 
 const allowedColors = [
@@ -41,6 +42,21 @@ const allowedColors = [
   'euiColorAccent',
 ];
 
+const textVariants = [
+  'euiColorEmptyShade',
+  'euiColorLightestShade',
+  'euiColorLightShade',
+  'euiColorMediumShade',
+  'euiColorDarkShade',
+  'euiColorDarkestShade',
+  'euiColorFullShade',
+  'euiColorPrimaryText',
+  'euiColorSecondaryText',
+  'euiColorWarningText',
+  'euiColorDangerText',
+  'euiColorAccentText',
+];
+
 const ratingAAA = <EuiBadge color="#000">AAA</EuiBadge>;
 
 const ratingAA = <EuiBadge color="#333">AA</EuiBadge>;
@@ -136,6 +152,7 @@ export default class extends Component {
     this.state = {
       value: '3',
       behindTextVariant: false,
+      showTextVariants: true,
     };
   }
 
@@ -151,24 +168,36 @@ export default class extends Component {
     });
   };
 
+  onTextVariantChange = e => {
+    this.setState({
+      showTextVariants: e.target.checked,
+    });
+  };
+
   render() {
-    const { value, behindTextVariant } = this.state;
+    const { value, behindTextVariant, showTextVariants } = this.state;
     const { selectedTheme } = this.props;
 
     let palette;
-    if (selectedTheme === 'amsterdam-dark') {
-      palette = darkAmsterdamColors;
-    } else if (selectedTheme === 'amsterdam-light') {
-      palette = { ...lightColors, ...lightAmsterdamColors };
-    } else if (selectedTheme === 'dark') {
-      palette = darkColors;
-    } else {
-      palette = lightColors;
+    switch (selectedTheme) {
+      case 'amsterdam-dark':
+        palette = darkAmsterdamColors;
+        break;
+      case 'amsterdam-light':
+        palette = { ...lightColors, ...lightAmsterdamColors };
+        break;
+      case 'dark':
+        palette = darkColors;
+        break;
+      default:
+        palette = lightColors;
+        break;
     }
 
     // Vis colors are the same for all palettes
     const visColors = lightColors.euiPaletteColorBlind;
     const visColorKeys = Object.keys(lightColors.euiPaletteColorBlind);
+    const colorsForContrast = showTextVariants ? textVariants : allowedColors;
 
     function getContrastRatings(color1, color2) {
       if (color1.indexOf('Shade') === -1 && color2.indexOf('Shade') === -1) {
@@ -238,6 +267,24 @@ export default class extends Component {
             combination that is <EuiBadge color="#333">AA</EuiBadge> or above
             with the exception of using large text.
           </p>
+          <EuiCallOut
+            color="warning"
+            iconType="accessibility"
+            title="Amsterdam changes in contrast levels">
+            <p>
+              The Amsterdam theme introduces a more vibrant core color palette.
+              In order to maintain a WCAG contrast of at least 4.5 you should
+              use the text variants of the core color variables such as&nbsp;
+              <EuiCode>$euiColorSecondaryText</EuiCode>. These new variables
+              have also been added to the default EUI theme and can be used in
+              components that render text.
+            </p>
+            <EuiSwitch
+              label="Show text variant"
+              checked={showTextVariants}
+              onChange={this.onTextVariantChange}
+            />
+          </EuiCallOut>
           <h3>Rating definitions</h3>
           <ul>
             <li>
@@ -259,7 +306,7 @@ export default class extends Component {
         <EuiSpacer size="xxl" />
 
         <EuiFlexGroup className="eui-textCenter" justifyContent="center">
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem style={{ maxWidth: 400 }}>
             <EuiFormRow
               id="ratingsRange"
               label="Minimum color contrast combinations to show">
@@ -287,7 +334,7 @@ export default class extends Component {
               <EuiFlexItem key={index}>
                 <EuiText size="xs">
                   <h3>{color}</h3>
-                  {allowedColors.map(function(color2, index) {
+                  {colorsForContrast.map(function(color2, index) {
                     const contrastRatings = getContrastRatings(color, color2);
 
                     if (!contrastRatings || contrastRatings.contrast < value) {

diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss
@@ -305,6 +305,11 @@
   padding: $euiSize;
   border-left: $euiBorderThick;
   border-color: $euiColorWarning;
+
+  .square {
+    fill: makeGraphicContrastColor($euiColorWarning, $backgroundColor);
+    vertical-align: bottom;
+  }
 }
 
 @include euiBreakpoint('xl') {

diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
@@ -356,6 +356,11 @@ const contrastExample = `// Make sure text passes a contrast check
   padding: $euiSize;
   border-left: $euiBorderThick;
   border-color: $euiColorWarning;
+
+  // Graphics can have a lower minimum contrast level of 3.0
+  .square {
+    fill: makeGraphicContrastColor($euiColorWarning, $backgroundColor);
+  }
 }
 `;
 
@@ -575,6 +580,21 @@ export const SassGuidelines = ({ selectedTheme }) => {
           <EuiSpacer />
 
           <div className="guideSass__contrastExample">
+            <svg
+              className="square"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16">
+              <rect
+                width="12"
+                height="12"
+                x="2"
+                y="2"
+                rx="2"
+                fillRule="evenodd"
+              />
+            </svg>{' '}
             This orange text now passes a contrast check!
           </div>
 

diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
@@ -2,8 +2,6 @@
   flex-shrink: 0; // Ensures it never scales down below its intended size
   display: inline-block;
   border-radius: $euiBorderRadius;
-  background: $euiColorAccent;
-  color: $euiColorEmptyShade;
   font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightMedium;
   line-height: $euiSize;
@@ -15,6 +13,10 @@
   text-align: center;
   transition: all $euiAnimSpeedFast ease-in;
   cursor: default;
+
+  $backgroundColor: $euiColorAccent;
+  background: $backgroundColor;
+  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
 }
 
 .euiNotificationBadge--medium {
@@ -26,6 +28,7 @@
 }
 
 .euiNotificationBadge--subdued {
-  background-color: tint($euiColorLightShade, 30%);
-  color: $euiColorFullShade;
+  $backgroundColor: tint($euiColorLightShade, 30%);
+  background: $backgroundColor;
+  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
 }
diff --git a/src/components/expression/_variables.scss b/src/components/expression/_variables.scss
@@ -1,9 +1,9 @@
 // Modifier naming and colors.
 $euiExpressionColors: (
-  subdued: $euiColorMediumShade,
-  primary:  $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  accent: $euiColorAccent,
+  subdued: $euiColorDarkShade,
+  primary:  $euiColorPrimaryText,
+  secondary: $euiColorSecondaryText,
+  warning: $euiColorWarningText,
+  danger: $euiColorDangerText,
+  accent: $euiColorAccentText,
 );
diff --git a/src/components/icon/_icon.scss b/src/components/icon/_icon.scss
@@ -17,7 +17,7 @@
 
   // This provides the default secondary color
   .euiIcon__fillSecondary {
-    fill: $euiColorSecondary;
+    fill: makeGraphicContrastColor($euiColorSecondary);
   }
 }
 

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

diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
@@ -1,10 +1,10 @@
 $textColors: (
   subdued: $euiColorDarkShade,
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  accent: $euiColorAccent,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
+  primary: $euiColorPrimaryText,
+  secondary: $euiColorSecondaryText,
+  accent: $euiColorAccentText,
+  warning: $euiColorWarningText,
+  danger: $euiColorDangerText,
   text: $euiTextColor,
   ghost: $euiColorGhost,
 );
@@ -41,4 +41,4 @@ $textColors: (
 // Make button EuiLink's text selectable
 button.euiLink { // sass-lint:disable-line no-qualifying-elements
   user-select: text;
-}
+}
diff --git a/src/components/stat/_stat.scss b/src/components/stat/_stat.scss
@@ -2,10 +2,10 @@
   // Modifier naming and colors.
   $titleColors: (
     subdued: $euiColorDarkShade,
-    primary: $euiColorPrimary,
-    secondary: $euiColorSecondary,
-    danger: $euiColorDanger,
-    accent: $euiColorAccent,
+    primary: $euiColorPrimaryText,
+    secondary: $euiColorSecondaryText,
+    danger: $euiColorDangerText,
+    accent: $euiColorAccentText,
   );
 
   .euiStat__title {
@@ -47,4 +47,4 @@
   0% { opacity: 1; }
   50% { opacity: .25; }
   100% { opacity: 1; }
-}
+}
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
@@ -48,15 +48,15 @@
 }
 
 // Modifier naming and colors.
-$toastTypes: (
-  primary: $euiColorPrimary,
-  success: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
+$euiToastTypes: (
+  primary: makeGraphicContrastColor($euiColorPrimary, $euiColorEmptyShade),
+  success: makeGraphicContrastColor($euiColorSecondary, $euiColorEmptyShade),
+  warning: makeGraphicContrastColor($euiColorWarning, $euiColorEmptyShade),
+  danger: makeGraphicContrastColor($euiColorDanger, $euiColorEmptyShade),
 );
 
 // Create button modifiders based upon the map.
-@each $name, $color in $toastTypes {
+@each $name, $color in $euiToastTypes {
   .euiToast--#{$name} {
     border-top: 2px solid $color;
   }

diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss
@@ -85,10 +85,11 @@
 
 // Given a $foreground and a $background, make the $foreground AA accessibility by slightly
 // adjusting it till the contrast is high enough
+// By default it will compare against the page background color
 
 // ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until
 //     it had higher than 4.5 contrast on a white background.
-@function makeHighContrastColor($foreground, $background) {
+@function makeHighContrastColor($foreground, $background: $euiPageBackgroundColor, $ratio: 4.5) {
   $contrast: contrastRatio($foreground, $background);
 
   // Determine the lightness factor of the background color first to
@@ -97,7 +98,7 @@
 
   $highContrastTextColor: $foreground;
 
-  @while ($contrast < 4.5) {
+  @while ($contrast < $ratio) {
     @if ($brightness > 50) {
       $highContrastTextColor: shade($highContrastTextColor, 5%);
     } @else {
@@ -119,3 +120,12 @@
 
   @return $highContrastTextColor;
 }
+
+// Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background.
+// Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0.
+// It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked.
+// https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)
+@function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) {
+  @return makeHighContrastColor($color, $background, 3);
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ @@
         }
         .guideRule__caption {
-          color: $euiColorSuccess;
+          color: $euiColorSuccessText;
         }
       }
@@ Expand Down @@