From aff82626e67a857a051f8a9ac23cf17410776c49 Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Thu, 3 May 2018 15:13:43 -0700
Subject: [PATCH] Remove specificity on text coloring (#770)

Fixes a coloring issue around EuiText.
---
 CHANGELOG.md                            |  4 ++++
 src-docs/src/views/text/text_color.js   |  2 +-
 src-docs/src/views/text/text_example.js |  4 +---
 src/components/text/_text.scss          |  4 ++++
 src/components/text/_text_color.scss    | 13 ++-----------
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0708c0c063..c4af767cc29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@
 - Added `isLoading` prop to `EuiButtonEmpty` ([#768](https://github.com/elastic/eui/pull/768))
 - Removed individual badge cross icon when `EuiComboBox` has `singleSelection` prop enabled. ([#769](https://github.com/elastic/eui/pull/769))
 
+**Bug fixes**
+
+- Removed specificity on `EuiText` that was causing cascade conflicts around text coloring. ([#770](https://github.com/elastic/eui/pull/770))
+
 ## [`0.0.45`](https://github.com/elastic/eui/tree/v0.0.45)
 
 - Added `EuiBetaBadge` for non-GA labelling including options to add it to `EuiCard` and `EuiKeyPadMenuItem` ([#705](https://github.com/elastic/eui/pull/705))
diff --git a/src-docs/src/views/text/text_color.js b/src-docs/src/views/text/text_color.js
index 02c7ebd6a45..f7d587310c3 100644
--- a/src-docs/src/views/text/text_color.js
+++ b/src-docs/src/views/text/text_color.js
@@ -68,7 +68,7 @@ export default () => (
       <p>
         Sometimes you need to color entire blocks of text, no matter what is in them.
         You can always apply color directly (versus using the separated component) to
-        make it easy.
+        make it easy. Links should still <a href="#">properly color</a>.
       </p>
     </EuiText>
   </div>
diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js
index a17aaa728d1..7e38d36b7fa 100644
--- a/src-docs/src/views/text/text_example.js
+++ b/src-docs/src/views/text/text_example.js
@@ -87,9 +87,7 @@ export const TextExample = {
         There are two ways to color text. Either individually by
         applying <EuiCode>EuiTextColor</EuiCode> on individual text objects, or
         by passing the <EuiCode>color</EuiCode> prop directly on <EuiCode>EuiText</EuiCode> for
-        a blanket approach across the entirely of your text. Either solution wraps
-        the element in a span with the <EuiCode>!important</EuiCode> applied to the color.
-        It will override any other colors in use, so be careful.
+        a blanket approach across the entirely of your text. 
       </p>
     ),
     props: { EuiTextColor },
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 18527fcb538..83785d45c47 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -88,6 +88,10 @@
 .euiText {
   @include euiText;
   @include euiFontSize;
+  // The euiText mixin forces a color. Since euiText is usually a child
+  // of other styling concerns, we should inherit their coloring. The default
+  // coloring will likely coming from the reset.scss anyway.
+  color: inherit;
 
   a {
     color: $euiLinkColor;
diff --git a/src/components/text/_text_color.scss b/src/components/text/_text_color.scss
index 7b867ef636e..9a69ba04f56 100644
--- a/src/components/text/_text_color.scss
+++ b/src/components/text/_text_color.scss
@@ -11,22 +11,13 @@ $textColors: (
 
 // Create color modifiers based on the map
 @each $name, $color in $textColors {
-  .euiTextColor.euiTextColor--#{$name} {
+  .euiTextColor--#{$name} {
 
     // The below function makes sure the color is accessible on our default background.
-    color: makeHighContrastColor($color, $euiColorEmptyShade) !important;
+    color: makeHighContrastColor($color, $euiColorEmptyShade);
 
     @if $name == "ghost" {
       color: $color !important;
     }
-
-    // We need a blanket approach for coloring. It should overule everything.
-    * {
-      color: makeHighContrastColor($color, $euiColorEmptyShade) !important;
-
-      @if $name == "ghost" {
-        color: $color !important;
-      }
-    }
   }
 }