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 () => (
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 properly color.
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 EuiTextColor on individual text objects, or
by passing the color prop directly on EuiText for
- a blanket approach across the entirely of your text. Either solution wraps
- the element in a span with the !important applied to the color.
- It will override any other colors in use, so be careful.
+ a blanket approach across the entirely of your text.
),
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;
- }
- }
}
}