Remove specificity on text coloring (#770)

Fixes a coloring issue around EuiText.

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

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>

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 },

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;

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