diff --git a/CHANGELOG.md b/CHANGELOG.md index b3cab0d4df9..6bf70dc2589 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Changed `EuiNavDrawerFlyout` title from `h5` to `div` ([#2040](https://github.com/elastic/eui/pull/2040)) - Added `magnifyWithMinus` and `magnifyWithPlus` glyphs to `EuiIcon` ([2056](https://github.com/elastic/eui/pull/2056)) +- Added a fully black (no matter the theme) color SASS variable `$euiColorInk` ([2060](https://github.com/elastic/eui/pull/2060)) **Bug fixes** diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index 3e5bc86d342..3cad5c38013 100644 --- a/src-docs/src/views/guidelines/sass.js +++ b/src-docs/src/views/guidelines/sass.js @@ -25,7 +25,6 @@ import { } from '../../../../src/components'; const euiColors = [ - 'euiColorGhost', 'euiColorEmptyShade', 'euiColorLightestShade', 'euiColorLightShade', @@ -39,6 +38,8 @@ const euiColors = [ 'euiColorDanger', 'euiColorWarning', 'euiColorSuccess', + 'euiColorGhost', + 'euiColorInk', ]; const euiTextColors = ['euiTextColor', 'euiColorDarkShade', 'euiLinkColor']; diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index 7eac910c94a..88a712e86a2 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -49,7 +49,7 @@ &:focus { background-color: transparentize($euiColorGhost, .2); - color: #000; // sass-lint:disable-line no-color-literals + color: $euiColorInk; border-radius: 2px; } @@ -105,12 +105,11 @@ $badgeTypes: ( @each $name, $color in $badgeTypes { .euiBadge--#{$name} { - // sass-lint:disable-block no-color-literals background-color: $color; @if (lightness($color) > 50) { - color: #000; + color: $euiColorInk; } @else { - color: #FFF; + color: $euiColorGhost; } } } diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index c81a2daa893..75ba5096e6d 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -107,7 +107,7 @@ $buttonTypes: ( border-color: $color; // The function makes that hexes safe for theming - $fillTextColor: chooseLightOrDarkText($color, #FFF, #000); // sass-lint:disable-line no-color-literals + $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk); color: $fillTextColor; @@ -127,7 +127,7 @@ $buttonTypes: ( &:enabled { $shadowColor: $euiShadowColor; @if ($name == 'ghost') { - $shadowColor: #000; + $shadowColor: $euiColorInk; } @else if (lightness($euiTextColor) < 50) { // Only if this is the light theme do we use the button variant color to colorize the shadow $shadowColor: desaturate($color, 60%); @@ -150,7 +150,7 @@ $buttonTypes: ( &:disabled:hover, &:disabled:focus { @if ($name == 'ghost') { - @include euiSlightShadow(#000); + @include euiSlightShadow($euiColorInk); } } } diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index 472e4b63062..a0f829f7ffe 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -140,7 +140,7 @@ @mixin euiFormControlReadOnlyStyle { cursor: default; // Use transparency since there is no border and in case form is on a non-white background - background: transparentize(lightOrDarkTheme($euiColorLightShade, #000), .88); + background: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .88); border-color: transparent; box-shadow: none; } diff --git a/src/components/series_chart/styles/react_vis/plot.scss b/src/components/series_chart/styles/react_vis/plot.scss index 8d1f75ca255..e9896ac213a 100644 --- a/src/components/series_chart/styles/react_vis/plot.scss +++ b/src/components/series_chart/styles/react_vis/plot.scss @@ -64,7 +64,7 @@ $rv-xy-plot-tooltip-padding: 7px 10px; .rv-xy-plot__series--line { fill: none; - stroke: #000; + stroke: $euiColorInk; stroke-width: 2px; } diff --git a/src/components/tool_tip/_mixins.scss b/src/components/tool_tip/_mixins.scss index 420044cc514..710f58fe1b4 100644 --- a/src/components/tool_tip/_mixins.scss +++ b/src/components/tool_tip/_mixins.scss @@ -1,5 +1,5 @@ @mixin euiToolTipStyle($size: null) { - @include euiBottomShadow($color: #000); + @include euiBottomShadow($color: $euiColorInk); border-radius: $euiBorderRadius; background-color: $euiTooltipBackgroundColor; color: $euiColorGhost; diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss index c40147a1b3f..8573b723805 100644 --- a/src/global_styling/functions/_colors.scss +++ b/src/global_styling/functions/_colors.scss @@ -1,11 +1,11 @@ // Mixes a provided color with white. @function tint($color, $percent) { - @return mix(#FFF, $color, $percent); + @return mix($euiColorGhost, $color, $percent); } // Mixes a provided color with black. @function shade($color, $percent) { - @return mix(#000, $color, $percent); + @return mix($euiColorInk, $color, $percent); } // For theming. Checks the text color and tells us whether it's light or dark. diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 99ec08a50d3..f635a65fcf5 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -1,10 +1,12 @@ // Core - $euiColorPrimary: #006BB4 !default; $euiColorSecondary: #017D73 !default; $euiColorAccent: #DD0A73 !default; -$euiColorHighlight: #FFFBF1 !default; +$euiColorHighlight: #FFFBF1 !default; // Not used should we deprecate? + +// These colors stay the same no matter the theme $euiColorGhost: #FFF !default; +$euiColorInk: #000 !default; // Status $euiColorSuccess: $euiColorSecondary !default; diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index caa396563a4..5d1078efcf1 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -1,8 +1,11 @@ -// Code +// Core $euiColorPrimary: #1BA9F5; $euiColorSecondary: #7DE2D1; $euiColorAccent: #F990C0; + +// These colors stay the same no matter the theme $euiColorGhost: #FFF; +$euiColorInk: #000; // Status $euiColorSuccess: $euiColorSecondary;