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