From 3e57b70b4b5dddb26ca02f52a76129a2b8d4a14a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 13:39:22 -0500
Subject: [PATCH] Update some more downstream components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../guide_rule/_guide_rule_example.scss       |  2 +-
 src-docs/src/views/guidelines/colors.js       | 46 ++++++++++++-------
 .../_notification_badge.scss                  | 11 +++--
 src/components/expression/_variables.scss     |  2 +-
 src/components/icon/_icon.scss                |  2 +-
 src/components/icon/_variables.scss           | 15 +++---
 src/components/toast/_toast.scss              | 12 ++---
 src/global_styling/functions/_colors.scss     | 11 ++++-
 src/global_styling/variables/_colors.scss     | 12 ++---
 9 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/src-docs/src/components/guide_rule/_guide_rule_example.scss b/src-docs/src/components/guide_rule/_guide_rule_example.scss
index 3d381d924204..22971f481bbe 100644
--- 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
index fc4f7e31ff54..6f40d3eac405 100644
--- 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 = [
@@ -156,14 +157,19 @@ export default class extends Component {
     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
@@ -238,14 +244,22 @@ export default class extends Component {
             combination that is <EuiBadge color="#333">AA</EuiBadge> or above
             with the exception of using large text.
           </p>
-          <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>
+          {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>
+            </EuiCallOut>
+          )}
           <h3>Rating definitions</h3>
           <ul>
             <li>
diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
index 98208442fd5d..14db7416aa2b 100644
--- 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
index 7c078521eb39..d210f987b4a1 100644
--- a/src/components/expression/_variables.scss
+++ b/src/components/expression/_variables.scss
@@ -1,6 +1,6 @@
 // Modifier naming and colors.
 $euiExpressionColors: (
-  subdued: $euiColorMediumShade,
+  subdued: $euiColorDarkShade,
   primary:  $euiColorPrimaryText,
   secondary: $euiColorSecondaryText,
   warning: $euiColorWarningText,
diff --git a/src/components/icon/_icon.scss b/src/components/icon/_icon.scss
index df97dc77ae57..c1619808afee 100644
--- 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: makeGraphicColor($euiColorSecondary);
   }
 }
 
diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
index 8bb96cf48908..d3408269bd3e 100644
--- 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: makeGraphicColor($euiColorMediumShade),
+  primary: makeGraphicColor($euiColorPrimary),
+  secondary: makeGraphicColor($euiColorSecondary),
+  success: makeGraphicColor($euiColorSuccess),
+  accent: makeGraphicColor($euiColorAccent),
+  warning: makeGraphicColor($euiColorWarning),
+  danger: makeGraphicColor($euiColorDanger),
   ghost: $euiColorGhost,
 );
 
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index 657ae804a496..15ca1446368d 100644
--- 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: 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;
   }
diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss
index ee7f6fd19951..e371abcb788f 100644
--- 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,9 @@
 
   @return $highContrastTextColor;
 }
+
+// Non-textual elements only need a contrast ration of 3:1
+@function makeGraphicColor($color, $background: $euiPageBackgroundColor) {
+  @return makeHighContrastColor($color, $background, 3);
+}
+
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 6c31e37f868b..da755a9fed77 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -23,7 +23,6 @@ $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;
@@ -31,11 +30,12 @@ $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
 
 // Constrasty text variants
-$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary, $euiPageBackgroundColor);
-$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary, $euiPageBackgroundColor);
-$euiColorAccentText: makeHighContrastColor($euiColorAccent, $euiPageBackgroundColor);
-$euiColorWarningText: makeHighContrastColor($euiColorWarning, $euiPageBackgroundColor);
-$euiColorDangerText: makeHighContrastColor($euiColorDanger, $euiPageBackgroundColor);
+$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