From 39f850e5d9e0a22ae755868331995bc9ec3e7c36 Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@gmail.com>
Date: Wed, 19 Feb 2020 09:37:06 -0800
Subject: [PATCH 1/8] Saturating colors and providing contrast mixin for text.

---
 src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss      | 4 +++-
 src/themes/eui-amsterdam/global_styling/mixins/_index.scss    | 1 +
 .../eui-amsterdam/global_styling/mixins/_typography.scss      | 4 ++++
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_typography.scss

diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
index 9d400244f7a..73b278f7894 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -1 +1,3 @@
-$euiColorPrimary: #006DE4;
+$euiColorPrimary:     #006DE4;
+$euiColorSecondary:   #00BFB3;
+$euiColorAccent:      #FC358E;
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
index a5b58fb8b6e..2690358ce99 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
@@ -1 +1,2 @@
 @import 'panel';
+@import 'typography';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
new file mode 100644
index 00000000000..8d5fddae17d
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
@@ -0,0 +1,4 @@
+@mixin euiText {
+  color: makeHighContrastColor($euiTextColor, $euiPageBackgroundColor);
+  font-weight: $euiFontWeightRegular;
+}

From 3752715f48ba1940dafdd8f32ac08a1185852e14 Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@gmail.com>
Date: Thu, 20 Feb 2020 09:28:31 -0800
Subject: [PATCH 2/8] Adding text-specific color variables and updating
 components to use them.

---
 src-docs/src/views/guidelines/colors.js                |  8 ++++++++
 src/components/expression/_variables.scss              |  8 ++++----
 src/components/link/_link.scss                         | 10 +++++-----
 src/components/stat/_stat.scss                         |  8 ++++----
 src/global_styling/variables/_colors.scss              |  6 ++++++
 .../eui-amsterdam/global_styling/mixins/_index.scss    |  1 -
 .../global_styling/mixins/_typography.scss             |  4 ----
 7 files changed, 27 insertions(+), 18 deletions(-)
 delete mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_typography.scss

diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
index fb2994f3607..fc4f7e31ff5 100644
--- a/src-docs/src/views/guidelines/colors.js
+++ b/src-docs/src/views/guidelines/colors.js
@@ -238,6 +238,14 @@ 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>
           <h3>Rating definitions</h3>
           <ul>
             <li>
diff --git a/src/components/expression/_variables.scss b/src/components/expression/_variables.scss
index 5a87d9e5eab..da2a00c3ca3 100644
--- 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,
+  primary:  $euiColorPrimaryText,
+  secondary: $euiColorSecondaryText,
+  warning: $euiColorWarningText,
   danger: $euiColorDanger,
-  accent: $euiColorAccent,
+  accent: $euiColorAccentText,
 );
diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
index 6048f65df93..691bf355781 100644
--- a/src/components/link/_link.scss
+++ b/src/components/link/_link.scss
@@ -1,9 +1,9 @@
 $textColors: (
   subdued: $euiColorDarkShade,
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  accent: $euiColorAccent,
-  warning: $euiColorWarning,
+  primary: $euiColorPrimaryText,
+  secondary: $euiColorSecondaryText,
+  accent: $euiColorAccentText,
+  warning: $euiColorWarningText,
   danger: $euiColorDanger,
   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;
-}
\ No newline at end of file
+}
diff --git a/src/components/stat/_stat.scss b/src/components/stat/_stat.scss
index c311e2d8851..b023526e99e 100644
--- 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,
+    primary: $euiColorPrimaryText,
+    secondary: $euiColorSecondaryText,
     danger: $euiColorDanger,
-    accent: $euiColorAccent,
+    accent: $euiColorAccentText,
   );
 
   .euiStat__title {
@@ -47,4 +47,4 @@
   0% { opacity: 1; }
   50% { opacity: .25; }
   100% { opacity: 1; }
-}
\ No newline at end of file
+}
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index b0224f9ad14..51e588f6696 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -30,6 +30,12 @@ $euiLinkColor: $euiColorPrimary !default;
 $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
 
+// Constrasty text variants
+$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary, $euiColorEmptyShade);
+$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary, $euiColorEmptyShade);
+$euiColorAccentText: makeHighContrastColor($euiColorAccent, $euiColorEmptyShade);
+$euiColorWarningText: makeHighContrastColor($euiColorWarning, $euiColorEmptyShade);
+
 // Visualization colors
 
 // Maps allow for easier JSON usage
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
index 2690358ce99..a5b58fb8b6e 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
@@ -1,2 +1 @@
 @import 'panel';
-@import 'typography';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
deleted file mode 100644
index 8d5fddae17d..00000000000
--- a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@mixin euiText {
-  color: makeHighContrastColor($euiTextColor, $euiPageBackgroundColor);
-  font-weight: $euiFontWeightRegular;
-}

From c500652fb90c710ad7b0f6edd431ad3f59f550da Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@gmail.com>
Date: Thu, 20 Feb 2020 10:37:14 -0800
Subject: [PATCH 3/8] Adding a danger text color as well.

---
 src/components/expression/_variables.scss | 2 +-
 src/components/link/_link.scss            | 2 +-
 src/components/stat/_stat.scss            | 2 +-
 src/global_styling/variables/_colors.scss | 9 +++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/expression/_variables.scss b/src/components/expression/_variables.scss
index da2a00c3ca3..7c078521eb3 100644
--- a/src/components/expression/_variables.scss
+++ b/src/components/expression/_variables.scss
@@ -4,6 +4,6 @@ $euiExpressionColors: (
   primary:  $euiColorPrimaryText,
   secondary: $euiColorSecondaryText,
   warning: $euiColorWarningText,
-  danger: $euiColorDanger,
+  danger: $euiColorDangerText,
   accent: $euiColorAccentText,
 );
diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
index 691bf355781..c732585e314 100644
--- a/src/components/link/_link.scss
+++ b/src/components/link/_link.scss
@@ -4,7 +4,7 @@ $textColors: (
   secondary: $euiColorSecondaryText,
   accent: $euiColorAccentText,
   warning: $euiColorWarningText,
-  danger: $euiColorDanger,
+  danger: $euiColorDangerText,
   text: $euiTextColor,
   ghost: $euiColorGhost,
 );
diff --git a/src/components/stat/_stat.scss b/src/components/stat/_stat.scss
index b023526e99e..09a3b090891 100644
--- a/src/components/stat/_stat.scss
+++ b/src/components/stat/_stat.scss
@@ -4,7 +4,7 @@
     subdued: $euiColorDarkShade,
     primary: $euiColorPrimaryText,
     secondary: $euiColorSecondaryText,
-    danger: $euiColorDanger,
+    danger: $euiColorDangerText,
     accent: $euiColorAccentText,
   );
 
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 51e588f6696..6c31e37f868 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -31,10 +31,11 @@ $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
 
 // Constrasty text variants
-$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary, $euiColorEmptyShade);
-$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary, $euiColorEmptyShade);
-$euiColorAccentText: makeHighContrastColor($euiColorAccent, $euiColorEmptyShade);
-$euiColorWarningText: makeHighContrastColor($euiColorWarning, $euiColorEmptyShade);
+$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary, $euiPageBackgroundColor);
+$euiColorSecondaryText: makeHighContrastColor($euiColorSecondary, $euiPageBackgroundColor);
+$euiColorAccentText: makeHighContrastColor($euiColorAccent, $euiPageBackgroundColor);
+$euiColorWarningText: makeHighContrastColor($euiColorWarning, $euiPageBackgroundColor);
+$euiColorDangerText: makeHighContrastColor($euiColorDanger, $euiPageBackgroundColor);
 
 // Visualization colors
 

From a5b5ec74b8563eb9bcbdf339ef91f8b682b2d225 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 13:39:22 -0500
Subject: [PATCH 4/8] 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 3d381d92420..22971f481bb 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 fc4f7e31ff5..6f40d3eac40 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 98208442fd5..14db7416aa2 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 7c078521eb3..d210f987b4a 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 df97dc77ae5..c1619808afe 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 8bb96cf4890..d3408269bd3 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 657ae804a49..15ca1446368 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 ee7f6fd1995..e371abcb788 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 6c31e37f868..da755a9fed7 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
 

From e91899e85da4b32dfcc0fdec54a994394acb2f3b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 14:57:15 -0500
Subject: [PATCH 5/8] Added toggle to color guidelines to show text variant in
 amsterdam-light theme only

---
 src-docs/src/views/guidelines/colors.js       | 37 +++++++++++++++++--
 src/global_styling/variables/_colors.scss     |  3 ++
 .../eui_amsterdam_colors_light.scss           |  8 ++++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
index 6f40d3eac40..43215d2f848 100644
--- a/src-docs/src/views/guidelines/colors.js
+++ b/src-docs/src/views/guidelines/colors.js
@@ -42,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>;
@@ -137,6 +152,7 @@ export default class extends Component {
     this.state = {
       value: '3',
       behindTextVariant: false,
+      showTextVariants: true,
     };
   }
 
@@ -152,8 +168,14 @@ 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;
@@ -175,6 +197,10 @@ export default class extends Component {
     // 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) {
@@ -258,6 +284,11 @@ export default class extends Component {
                 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>
@@ -281,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">
@@ -309,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) {
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index da755a9fed7..c9715087371 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/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;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
index 73b278f7894..61c510d0e96 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -1,3 +1,11 @@
+// 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);

From 74573a1654471b2033b6464f616d67adbedcc2ef Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 20:52:49 -0500
Subject: [PATCH 6/8] Showing callout and switich for all themes

---
 src-docs/src/views/guidelines/colors.js       | 44 ++++++++-----------
 src/global_styling/variables/_colors.scss     |  2 +-
 .../eui_amsterdam_colors_dark.scss            | 15 ++++++-
 src/themes/eui/eui_colors_dark.scss           | 15 ++++++-
 4 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
index 43215d2f848..40a96fd9c4a 100644
--- a/src-docs/src/views/guidelines/colors.js
+++ b/src-docs/src/views/guidelines/colors.js
@@ -197,10 +197,7 @@ export default class extends Component {
     // 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;
+    const colorsForContrast = showTextVariants ? textVariants : allowedColors;
 
     function getContrastRatings(color1, color2) {
       if (color1.indexOf('Shade') === -1 && color2.indexOf('Shade') === -1) {
@@ -270,27 +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>
-          {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>
-          )}
+          <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>
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index c9715087371..76c645b58b6 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -113,11 +113,11 @@ $euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7')
 $euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
 $euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;
 
+// Charts
 $euiColorChartLines: #EFF1F4 !default;
 $euiColorChartBand: #F5F7FA !default;
 
 // Code
-
 $euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
 $euiCodeBlockColor: $euiTextColor !default;
 $euiCodeBlockSelectedBackgroundColor: inherit !default;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
index 90a830e59ed..b08b9857f9d 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
@@ -1,3 +1,5 @@
+@import '../../global_styling/functions/index';
+
 // Core
 $euiColorPrimary: #238CFF;
 $euiColorSecondary: #7DE2D1;
@@ -28,12 +30,23 @@ $euiLinkColor: $euiColorPrimary;
 $euiFocusBackgroundColor: #232635;
 $euiShadowColor: #000;
 $euiShadowColorLarge: #000;
+$euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%);
+
+// Constrasty text variants
+// These colors are just straight dups of the basic colors for now
+// because we know they pass contrast needs and makeHighContrastColor is broken in dark mode
+$euiColorPrimaryText: $euiColorPrimary;
+$euiColorSecondaryText: $euiColorSecondary;
+$euiColorAccentText: $euiColorAccent;
+$euiColorWarningText: $euiColorWarning;
+$euiColorDangerText: $euiColorDanger;
+$euiColorSuccessText: $euiColorSecondaryText;
 
+// Charts
 $euiColorChartLines: #343741;
 $euiColorChartBand: #2A2C35;
 
 // Code
-
 $euiCodeBlockCommentColor: #656565;
 $euiCodeBlockSelectorTagColor: #C792EA;
 $euiCodeBlockStringColor: #C3E88D;
diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss
index 7112a3cc5f5..7643c5a480b 100644
--- a/src/themes/eui/eui_colors_dark.scss
+++ b/src/themes/eui/eui_colors_dark.scss
@@ -1,3 +1,5 @@
+@import '../../global_styling/functions/index';
+
 // Core
 $euiColorPrimary: #1BA9F5;
 $euiColorSecondary: #7DE2D1;
@@ -28,12 +30,23 @@ $euiLinkColor: $euiColorPrimary;
 $euiFocusBackgroundColor: #232635;
 $euiShadowColor: #000;
 $euiShadowColorLarge: #000;
+$euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%);
+
+// Constrasty text variants
+// These colors are just straight dups of the basic colors for now
+// because we know they pass contrast needs and makeHighContrastColor is broken in dark mode
+$euiColorPrimaryText: $euiColorPrimary;
+$euiColorSecondaryText: $euiColorSecondary;
+$euiColorAccentText: $euiColorAccent;
+$euiColorWarningText: $euiColorWarning;
+$euiColorDangerText: $euiColorDanger;
+$euiColorSuccessText: $euiColorSecondaryText;
 
+// Charts
 $euiColorChartLines: #343741;
 $euiColorChartBand: #2A2C35;
 
 // Code
-
 $euiCodeBlockCommentColor: #656565;
 $euiCodeBlockSelectorTagColor: #C792EA;
 $euiCodeBlockStringColor: #C3E88D;

From 5f081c38c3c963c2c245888547d9a512c6a2fed0 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 21:21:18 -0500
Subject: [PATCH 7/8] Adding SASS example

---
 src-docs/src/views/guidelines/index.scss  |  5 +++++
 src-docs/src/views/guidelines/sass.js     | 20 ++++++++++++++++++++
 src/components/icon/_icon.scss            |  2 +-
 src/components/icon/_variables.scss       | 14 +++++++-------
 src/components/toast/_toast.scss          |  8 ++++----
 src/global_styling/functions/_colors.scss |  7 +++++--
 6 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss
index 97132d18488..866ca08b1d7 100644
--- 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
index 0fca9c796ff..304f7af2f38 100644
--- 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/icon/_icon.scss b/src/components/icon/_icon.scss
index c1619808afe..28c9044de10 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: makeGraphicColor($euiColorSecondary);
+    fill: makeGraphicContrastColor($euiColorSecondary);
   }
 }
 
diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
index d3408269bd3..227d26ced4e 100644
--- a/src/components/icon/_variables.scss
+++ b/src/components/icon/_variables.scss
@@ -3,13 +3,13 @@ $euiIconLoadingOpacity: .05;
 // Modifier naming and colors.
 $euiIconColors: (
   text: $euiTextColor,
-  subdued: makeGraphicColor($euiColorMediumShade),
-  primary: makeGraphicColor($euiColorPrimary),
-  secondary: makeGraphicColor($euiColorSecondary),
-  success: makeGraphicColor($euiColorSuccess),
-  accent: makeGraphicColor($euiColorAccent),
-  warning: makeGraphicColor($euiColorWarning),
-  danger: makeGraphicColor($euiColorDanger),
+  subdued: $euiColorDarkShade,
+  primary: $euiColorPrimaryText,
+  secondary: $euiColorSecondaryText,
+  success: $euiColorSuccessText,
+  accent: $euiColorAccentText,
+  warning: $euiColorWarningText,
+  danger: $euiColorDangerText,
   ghost: $euiColorGhost,
 );
 
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index 15ca1446368..bfb7c73ff85 100644
--- a/src/components/toast/_toast.scss
+++ b/src/components/toast/_toast.scss
@@ -49,10 +49,10 @@
 
 // Modifier naming and colors.
 $euiToastTypes: (
-  primary: makeGraphicColor($euiColorPrimary, $euiColorEmptyShade),
-  success: makeGraphicColor($euiColorSecondary, $euiColorEmptyShade),
-  warning: makeGraphicColor($euiColorWarning, $euiColorEmptyShade),
-  danger: makeGraphicColor($euiColorDanger, $euiColorEmptyShade),
+  primary: makeGraphicContrastColor($euiColorPrimary, $euiColorEmptyShade),
+  success: makeGraphicContrastColor($euiColorSecondary, $euiColorEmptyShade),
+  warning: makeGraphicContrastColor($euiColorWarning, $euiColorEmptyShade),
+  danger: makeGraphicContrastColor($euiColorDanger, $euiColorEmptyShade),
 );
 
 // Create button modifiders based upon the map.
diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss
index e371abcb788..887a363be3c 100644
--- a/src/global_styling/functions/_colors.scss
+++ b/src/global_styling/functions/_colors.scss
@@ -121,8 +121,11 @@
   @return $highContrastTextColor;
 }
 
-// Non-textual elements only need a contrast ration of 3:1
-@function makeGraphicColor($color, $background: $euiPageBackgroundColor) {
+// 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);
 }
 

From ef4dea7220dfc96d5ad0535891238a08dd28325d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 25 Feb 2020 14:02:55 -0500
Subject: [PATCH 8/8] cl

---
 CHANGELOG.md                                             | 6 ++++++
 src/global_styling/variables/_colors.scss                | 2 +-
 src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss  | 2 +-
 src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss | 2 +-
 src/themes/eui/eui_colors_dark.scss                      | 2 +-
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fd3032ce3d..fc0a08aaf92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,12 +11,18 @@
 - Added `image` glyph to `EuiIcon` ([#2870](https://github.com/elastic/eui/pull/2870))
 - Exported TS props from top level `EuiListGroupProps`, `EuiListGroupItemProps`, `EuiSelectableProps`,  `EuiSelectableOption`, `EuiSelectableOptionsListProps` ([#2869](https://github.com/elastic/eui/pull/2869))
 - Extending `EuiSelectable[options]` type with correct HTML element ([#2869](https://github.com/elastic/eui/pull/2869))
+- 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))
 
 **Bug fixes**
 
 - Fixed building dev & docs on Windows ([#2847](https://github.com/elastic/eui/pull/2847))
 - Fixed a bug in `EuiDataGrid` causing the first cell to autofocus if interactive ([#2872](https://github.com/elastic/eui/pull/2872))
 
+**Theme: Amsterdam**
+
+- Altered `secondary`, `accent` colors to be more saturated ([#2873](https://github.com/elastic/eui/pull/2873))
+
 ## [`19.0.0`](https://github.com/elastic/eui/tree/v19.0.0)
 
 - Added `cheer` glyph to `EuiIcon` ([#2814](https://github.com/elastic/eui/pull/2814))
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 76c645b58b6..abcdc1e3df8 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -32,7 +32,7 @@ $euiLinkColor: $euiColorPrimary !default;
 $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
 
-// Constrasty text variants
+// Contrasty text variants
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
 $euiColorSecondaryText: makeHighContrastColor($euiColorSecondary) !default;
 $euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
index b08b9857f9d..f04f54871d5 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
@@ -32,7 +32,7 @@ $euiShadowColor: #000;
 $euiShadowColorLarge: #000;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%);
 
-// Constrasty text variants
+// Contrasty text variants
 // These colors are just straight dups of the basic colors for now
 // because we know they pass contrast needs and makeHighContrastColor is broken in dark mode
 $euiColorPrimaryText: $euiColorPrimary;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
index 61c510d0e96..084c58a44c5 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -5,7 +5,7 @@ $euiColorPrimary:     #006DE4;
 $euiColorSecondary:   #00BFB3;
 $euiColorAccent:      #FC358E;
 
-// Constrasty text variants
+// Contrasty text variants
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
 $euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);
 $euiColorAccentText: makeHighContrastColor($euiColorAccent);
diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss
index 7643c5a480b..2775a76cf56 100644
--- a/src/themes/eui/eui_colors_dark.scss
+++ b/src/themes/eui/eui_colors_dark.scss
@@ -32,7 +32,7 @@ $euiShadowColor: #000;
 $euiShadowColorLarge: #000;
 $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%);
 
-// Constrasty text variants
+// Contrasty text variants
 // These colors are just straight dups of the basic colors for now
 // because we know they pass contrast needs and makeHighContrastColor is broken in dark mode
 $euiColorPrimaryText: $euiColorPrimary;