Added a fully black color variable $euiColorInk (#2060)

elastic · Jun 19, 2019 · 35f0931 · 35f0931
1 parent b0ac716
commit 35f0931
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;