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

src-docs/src/components/guide_rule/_guide_rule_example.scss

@@ -32,7 +32,7 @@
     }
 
     .guideRule__caption {
-      color: $euiColorSuccess;
+      color: $euiColorSuccessText;
     }
   }
 

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,39 @@ 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 && selectedTheme === 'amsterdam-light'
+        ? textVariants
+        : allowedColors;
 
     function getContrastRatings(color1, color2) {
       if (color1.indexOf('Shade') === -1 && color2.indexOf('Shade') === -1) {
@@ -238,6 +270,27 @@ export default class extends Component {
             combination that is <EuiBadge color="#333">AA</EuiBadge> or above
             with the exception of using large text.
           </p>
+          {selectedTheme === 'amsterdam-light' && (
+            <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>. Components that
+                render text such as <EuiCode>EuiText</EuiCode> will do so on
+                their own without any extra configuration.
+              </p>
+              <EuiSwitch
+                label="Show text variant"
+                checked={showTextVariants}
+                onChange={this.onTextVariantChange}
+              />
+            </EuiCallOut>
+          )}
           <h3>Rating definitions</h3>
           <ul>
             <li>
@@ -259,7 +312,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 +340,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) {

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);
 }

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,
 );

src/components/icon/_icon.scss

@@ -17,7 +17,7 @@
 
   // This provides the default secondary color
   .euiIcon__fillSecondary {
-    fill: $euiColorSecondary;
+    fill: makeGraphicColor($euiColorSecondary);
   }
 }
 

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: makeGraphicColor($euiColorMediumShade),
+  primary: makeGraphicColor($euiColorPrimary),
+  secondary: makeGraphicColor($euiColorSecondary),
+  success: makeGraphicColor($euiColorSuccess),
+  accent: makeGraphicColor($euiColorAccent),
+  warning: makeGraphicColor($euiColorWarning),
+  danger: makeGraphicColor($euiColorDanger),
   ghost: $euiColorGhost,
 );
 

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;
-}
+}

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; }
-}
+}

src/components/toast/_toast.scss

@@ -48,15 +48,15 @@
 }
 
 // Modifier naming and colors.
-$toastTypes: (
-  primary: $euiColorPrimary,
-  success: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
+$euiToastTypes: (
+  primary: makeGraphicColor($euiColorPrimary, $euiColorEmptyShade),
+  success: makeGraphicColor($euiColorSecondary, $euiColorEmptyShade),
+  warning: makeGraphicColor($euiColorWarning, $euiColorEmptyShade),
+  danger: makeGraphicColor($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;
   }

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,9 @@
 
   @return $highContrastTextColor;
 }
+
+// Non-textual elements only need a contrast ration of 3:1
+@function makeGraphicColor($color, $background: $euiPageBackgroundColor) {
+  @return makeHighContrastColor($color, $background, 3);
+}
+

src/global_styling/variables/_colors.scss

@@ -1,3 +1,6 @@
+// This extra import allows any variables that are created via functions to work when loaded into JS
+@import '../functions/index';
+
 // Core
 $euiColorPrimary: #006BB4 !default;
 $euiColorSecondary: #017D73 !default;
@@ -23,13 +26,20 @@ $euiColorDarkestShade: #343741 !default;
 $euiColorFullShade: #000 !default;
 
 // Every color below must be based mathmatically on the set above.
-
 $euiTextColor: $euiColorDarkestShade !default;
 $euiTitleColor: shadeOrTint($euiTextColor, 50%, 0%) !default;
 $euiLinkColor: $euiColorPrimary !default;
 $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
 
+// Constrasty text variants
+$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
+$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary) !default;
+$euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
+$euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
+$euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
+$euiColorSuccessText: $euiColorSecondaryText !default;
+
 // Visualization colors
 
 // Maps allow for easier JSON usage

src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss

@@ -1 +1,11 @@
-$euiColorPrimary: #006DE4;
+// This extra import allows any variables that are created via functions to work when loaded into JS
+@import '../../global_styling/variables/colors';
+
+$euiColorPrimary:     #006DE4;
+$euiColorSecondary:   #00BFB3;
+$euiColorAccent:      #FC358E;
+
+// Constrasty text variants
+$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
+$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);
+$euiColorAccentText: makeHighContrastColor($euiColorAccent);