From 1723b60049fa169c8d657b6e74c68b9632160d3b Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 8 Jan 2020 17:16:08 -0500 Subject: [PATCH 01/16] [TEMP] Contrast guide for viz colors --- src-docs/src/views/guidelines/colors.js | 133 ++++++++++++++++--- src/services/color/luminance_and_contrast.ts | 36 +++++ 2 files changed, 147 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 336cf15a33f..b8e77b1baaa 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import chroma from 'chroma-js'; import { Link } from 'react-router'; @@ -6,7 +7,12 @@ import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss'; import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss'; import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss'; -import { calculateContrast, rgbToHex } from '../../../../src/services'; +import { + calculateContrast, + rgbToHex, + isColorDark, +} from '../../../../src/services'; +import { createNonTextContrast } from '../../../../src/services/color/luminance_and_contrast'; import { GuidePage } from '../../components'; @@ -168,6 +174,37 @@ export default class extends Component { palette = lightColors; } + function getContrastRatings(color1, color2) { + if (color1.indexOf('Shade') === -1 && color2.indexOf('Shade') === -1) { + // Exit out, i.e. don't render, if non-shade top of non-shade + return; + } + + const contrast = calculateContrast( + [palette[color1].r, palette[color1].g, palette[color1].b], + [palette[color2].r, palette[color2].g, palette[color2].b] + ); + + let contrastRating; + let contrastRatingBadge; + if (contrast >= 7) { + contrastRating = ; + contrastRatingBadge = ratingAAA; + } else if (contrast >= 4.5) { + contrastRating = ; + contrastRatingBadge = ratingAA; + } else if (contrast >= 3) { + contrastRating = ; + contrastRatingBadge = ratingAA18; + } else if (color2.includes('Shade') && contrast >= 2) { + contrastRating = ; + } else { + contrastRating = ; + } + + return { contrast, contrastRating, contrastRatingBadge }; + } + return ( @@ -254,31 +291,17 @@ export default class extends Component {

{color}

{allowedColors.map(function(color2, index) { - const contrast = calculateContrast( - [palette[color].r, palette[color].g, palette[color].b], - [palette[color2].r, palette[color2].g, palette[color2].b] - ); + const contrastRatings = getContrastRatings(color, color2); - if (contrast < value) { + if (!contrastRatings || contrastRatings.contrast < value) { return; } - let contrastRating; - let contrastRatingBadge; - if (contrast >= 7) { - contrastRating = ; - contrastRatingBadge = ratingAAA; - } else if (contrast >= 4.5) { - contrastRating = ; - contrastRatingBadge = ratingAA; - } else if (contrast >= 3) { - contrastRating = ; - contrastRatingBadge = ratingAA18; - } else if (color2.includes('Shade') && contrast >= 2) { - contrastRating = ; - } else { - contrastRating = ; - } + const { + contrast, + contrastRating, + contrastRatingBadge, + } = getContrastRatings(color, color2); const tooltipContent = (
@@ -340,7 +363,73 @@ color: $${color2};`; return renderPaletteColor(palette, color, index); })} + + + + + {visColors.map(function(color, index) { + return ( + + +

{color}

+ {visPaletteContrast( + palette[color].rgba, + palette[allowedColors[0]].rgba, + index, + color + )} + + + ); + })} + ); } } + +function visPaletteContrast(foreground, background, index, name) { + const initialContrast = chroma.contrast(foreground, background); + const textColor = isColorDark(foreground) ? '#FFFFFF' : '#000000'; + + const betterForeground = createNonTextContrast(background, foreground); + const betterContrast = chroma.contrast(betterForeground, background); + const betterTextColor = isColorDark(betterForeground) ? '#FFFFFF' : '#000000'; + + return ( + <> + + {initialContrast.toFixed(1)}  {' '} + {(index > 0 && index < 4) || index === 9 ? 'original' : 'new'} + + {initialContrast < 3 && ( + + {betterContrast.toFixed(1)}   {'better'} + + )} + {name} + + {'lightened by 0.5'} + + + ); +} diff --git a/src/services/color/luminance_and_contrast.ts b/src/services/color/luminance_and_contrast.ts index 3c31c52733b..8cadf3df340 100644 --- a/src/services/color/luminance_and_contrast.ts +++ b/src/services/color/luminance_and_contrast.ts @@ -1,3 +1,4 @@ +import chroma from 'chroma-js'; import { rgbDef } from './color_types'; export function calculateLuminance(r: number, g: number, b: number): number { @@ -18,3 +19,38 @@ export function calculateContrast(rgb1: rgbDef, rgb2: rgbDef): number { } return contrast; } + +export function createNonTextContrast(background: string, foreground: string) { + let contrast = chroma.contrast(foreground, background); + + // Determine the lightness factor of the background color first to + // determine whether to shade or tint the foreground. + const brightness = chroma(background).lab()[0]; // get LAB Lightness value + let highContrastTextColor = chroma(foreground).hex(); + + while (contrast < 3) { + if (brightness > 50) { + highContrastTextColor = chroma(highContrastTextColor) + .darken(0.1) + .hex(); + } else { + highContrastTextColor = chroma(highContrastTextColor) + .brighten(0.1) + .hex(); + } + + contrast = chroma.contrast(highContrastTextColor, background); + + // @if (lightness($highContrastTextColor) < 5) { + // @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.'; + // @return $highContrastTextColor; + // } + + // @if (lightness($highContrastTextColor) > 95) { + // @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.'; + // @return $highContrastTextColor; + // } + } + + return highContrastTextColor; +} From 8f8cf32f745d2e8421c353b547d55a3b0de9a3d2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 8 Jan 2020 17:17:26 -0500 Subject: [PATCH 02/16] [WIP] Viz palette for text --- .../src/views/color_palette/color_palette.js | 11 ++++++++++- src/services/color/eui_palettes.ts | 17 ++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index f392b99f11f..812cd94cdc3 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -5,9 +5,13 @@ import { EuiFlexItem, EuiTitle, EuiSpacer, + EuiBadge, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; +import { + euiPaletteColorBlind, + euiPaletteColorBlindWithText, +} from '../../../../src/services'; import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; const customPalettes = [ @@ -65,5 +69,10 @@ export default () => ( ))} + {euiPaletteColorBlindWithText().map((color, i) => ( + + Text + + ))} ); diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 2e8cc628af3..b69ecb4b465 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -1,6 +1,7 @@ +import { flatten } from 'lodash'; +import chroma from 'chroma-js'; import { HEX } from './color_types'; import { colorPalette } from './color_palette'; -import { flatten } from 'lodash'; export type EuiPalette = string[]; @@ -64,6 +65,20 @@ export const euiPaletteColorBlind = function( return colors; }; +/** + * Color blind palette with text is meant for use when text is applied on top of the color. + * It increases the brightness of the color to give the text more contrast. + */ +export const euiPaletteColorBlindWithText = function(): EuiPalette { + const originalPalette = euiPaletteColorBlind(); + const newPalette = originalPalette.map(color => + chroma(color) + .brighten(0.5) + .hex() + ); + return newPalette; +}; + export const euiPaletteForLightBackground = function(): EuiPalette { return ['#006BB4', '#017D73', '#F5A700', '#BD271E', '#DD0A73']; }; From a61aaedb90e9d090841e3667baedcee5e3255e8f Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 8 Jan 2020 22:18:55 -0500 Subject: [PATCH 03/16] [SASS] Updates to vis palette 1. Created SASS map for viz palette 2. Removed duplicated colors from other themes and use dist folder json instead 3. Created a SASS function to convert vis palette for use behind text --- src-docs/src/views/guidelines/colors.js | 49 +++++++++---------- src/global_styling/functions/_colors.scss | 17 +++++-- src/global_styling/variables/_colors.scss | 49 ++++++++++++++----- .../eui_amsterdam_colors_dark.scss | 13 ----- src/themes/eui/eui_colors_dark.scss | 13 ----- 5 files changed, 75 insertions(+), 66 deletions(-) diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index b8e77b1baaa..62989f0bde8 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -3,6 +3,8 @@ import chroma from 'chroma-js'; import { Link } from 'react-router'; +import lightColorsJSON from '../../../../dist/eui_theme_light.json'; + import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss'; import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss'; import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss'; @@ -46,19 +48,6 @@ const allowedColors = [ 'euiColorAccent', ]; -const visColors = [ - 'euiColorVis0', - 'euiColorVis1', - 'euiColorVis2', - 'euiColorVis3', - 'euiColorVis4', - 'euiColorVis5', - 'euiColorVis6', - 'euiColorVis7', - 'euiColorVis8', - 'euiColorVis9', -]; - const ratingAAA = AAA; const ratingAA = AA; @@ -174,6 +163,10 @@ export default class extends Component { palette = lightColors; } + // Vis colors are the same for all palettes + const visColors = lightColors.euiColorVisColors; + const visColorKeys = Object.keys(lightColors.euiColorVisColors); + function getContrastRatings(color1, color2) { if (color1.indexOf('Shade') === -1 && color2.indexOf('Shade') === -1) { // Exit out, i.e. don't render, if non-shade top of non-shade @@ -359,25 +352,24 @@ color: $${color2};`; - {visColors.map(function(color, index) { - return renderPaletteColor(palette, color, index); + {visColorKeys.map(function(color, index) { + return renderPaletteColor(visColors, color, index); })} - {visColors.map(function(color, index) { + {visColorKeys.map(function(color, index) { + const foreground = visColors[color].rgba; + const background = palette[allowedColors[0]].rgba; return ( -

{color}

- {visPaletteContrast( - palette[color].rgba, - palette[allowedColors[0]].rgba, - index, - color - )} +

+ {chroma.contrast(foreground, background).toFixed(1)} {color} +

+ {visPaletteContrast(foreground, background, index, color)} ); @@ -407,8 +399,7 @@ function visPaletteContrast(foreground, background, index, name) { marginBottom: 2, borderRadius: 4, }}> - {initialContrast.toFixed(1)}  {' '} - {(index > 0 && index < 4) || index === 9 ? 'original' : 'new'} + {/* {initialContrast.toFixed(1)}   Base: {chroma(foreground).hex()} */} {initialContrast < 3 && ( - {'lightened by 0.5'} + JS:{' '} + {chroma(foreground) + .brighten(0.5) + .hex()} + + + CSS: {lightColorsJSON.euiColorVisColorsBehindText[name]} ); diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss index 1068030ffe9..217379b033e 100644 --- a/src/global_styling/functions/_colors.scss +++ b/src/global_styling/functions/_colors.scss @@ -1,3 +1,8 @@ +// Converting a normal hex color to RBG +@function hexToRGB($color) { + @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; +} + // Mixes a provided color with white. @function tint($color, $percent) { @return mix($euiColorGhost, $color, $percent); @@ -115,7 +120,13 @@ @return $highContrastTextColor; } -// Converting a normal hex color to RBG -@function hexToRGB($color) { - @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; +// The visualization palette is meant to be used as a graphic and contrated with the page background. +// However, if using text on top of the visualization color, the background color can be lightened to increase the contrast with the text. +@function convertVisColorForBehindText($color) { + // Chroma adjusts brightness on an 18 pt scale + // Therefore 1 chroma brightness = ~18% sass lightness + + // adjust-color properties: + // $color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $alpha: null + @return adjust-color($color, null, null, null, null, 9.7%, 9.7%, null); } diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 5023a69739a..9a7f8791acd 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -32,21 +32,48 @@ $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default; // Visualization colors -$euiColorVis0: #54B399 !default; -$euiColorVis1: #6092C0 !default; -$euiColorVis2: #D36086 !default; -$euiColorVis3: #9170B8 !default; -$euiColorVis4: #CA8EAE !default; -$euiColorVis5: #D6BF57 !default; -$euiColorVis6: #B9A888 !default; -$euiColorVis7: #DA8B45 !default; -$euiColorVis8: #AA6556 !default; -$euiColorVis9: #E7664C !default; +// Maps allow for easier JSON usage +// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file +$euiColorVisColors: ( + euiColorVis0: #54B399, + euiColorVis1: #6092C0, + euiColorVis2: #D36086, + euiColorVis3: #9170B8, + euiColorVis4: #CA8EAE, + euiColorVis5: #D6BF57, + euiColorVis6: #B9A888, + euiColorVis7: #DA8B45, + euiColorVis8: #AA6556, + euiColorVis9: #E7664C +) !default; + +$euiColorVis0: map-get($euiColorVisColors, 'euiColorVis0') !default; +$euiColorVis1: map-get($euiColorVisColors, 'euiColorVis1') !default; +$euiColorVis2: map-get($euiColorVisColors, 'euiColorVis2') !default; +$euiColorVis3: map-get($euiColorVisColors, 'euiColorVis3') !default; +$euiColorVis4: map-get($euiColorVisColors, 'euiColorVis4') !default; +$euiColorVis5: map-get($euiColorVisColors, 'euiColorVis5') !default; +$euiColorVis6: map-get($euiColorVisColors, 'euiColorVis6') !default; +$euiColorVis7: map-get($euiColorVisColors, 'euiColorVis7') !default; +$euiColorVis8: map-get($euiColorVisColors, 'euiColorVis8') !default; +$euiColorVis9: map-get($euiColorVisColors, 'euiColorVis9') !default; + +$euiColorVisColorsBehindText: ( + euiColorVis0: convertVisColorForBehindText($euiColorVis0), + euiColorVis1: convertVisColorForBehindText($euiColorVis1), + euiColorVis2: convertVisColorForBehindText($euiColorVis2), + euiColorVis3: convertVisColorForBehindText($euiColorVis3), + euiColorVis4: convertVisColorForBehindText($euiColorVis4), + euiColorVis5: convertVisColorForBehindText($euiColorVis5), + euiColorVis6: convertVisColorForBehindText($euiColorVis6), + euiColorVis7: convertVisColorForBehindText($euiColorVis7), + euiColorVis8: convertVisColorForBehindText($euiColorVis8), + euiColorVis9: convertVisColorForBehindText($euiColorVis9) +) !default; $euiColorChartLines: #EFF1F4 !default; $euiColorChartBand: #F5F7FA !default; - // Code $euiCodeBlockBackgroundColor: $euiColorLightestShade !default; diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss index 3e2a2b2b8c7..90a830e59ed 100644 --- a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss +++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss @@ -29,19 +29,6 @@ $euiFocusBackgroundColor: #232635; $euiShadowColor: #000; $euiShadowColorLarge: #000; -// Visualization colors -// Currently this is the same as light. It is required to list them for our docs to work -$euiColorVis0: #54B399; -$euiColorVis1: #6092C0; -$euiColorVis2: #D36086; -$euiColorVis3: #9170B8; -$euiColorVis4: #CA8EAE; -$euiColorVis5: #D6BF57; -$euiColorVis6: #B9A888; -$euiColorVis7: #DA8B45; -$euiColorVis8: #AA6556; -$euiColorVis9: #E7664C; - $euiColorChartLines: #343741; $euiColorChartBand: #2A2C35; diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss index cf6c2aab427..7112a3cc5f5 100644 --- a/src/themes/eui/eui_colors_dark.scss +++ b/src/themes/eui/eui_colors_dark.scss @@ -29,19 +29,6 @@ $euiFocusBackgroundColor: #232635; $euiShadowColor: #000; $euiShadowColorLarge: #000; -// Visualization colors -// Currently this is the same as light. It is required to list them for our docs to work -$euiColorVis0: #54B399; -$euiColorVis1: #6092C0; -$euiColorVis2: #D36086; -$euiColorVis3: #9170B8; -$euiColorVis4: #CA8EAE; -$euiColorVis5: #D6BF57; -$euiColorVis6: #B9A888; -$euiColorVis7: #DA8B45; -$euiColorVis8: #AA6556; -$euiColorVis9: #E7664C; - $euiColorChartLines: #343741; $euiColorChartBand: #2A2C35; From ac4acbb9a24e2177c49aba999fe7c50454c2ba41 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 12:07:42 -0500 Subject: [PATCH 04/16] Better maps and palette names - $euiColorVisColors -> $euiPaletteColorBlind - SASS map now is a nested map containing direct hexes for both graphic and behindText variants - Created new vars for each behindText variant - Got rid of temp color function --- src-docs/src/views/guidelines/colors.js | 106 +++++++++++++--------- src/global_styling/functions/_colors.scss | 11 --- src/global_styling/variables/_colors.scss | 95 ++++++++++++------- src/services/color/eui_palettes.ts | 2 +- src/services/color/index.ts | 1 + src/services/index.ts | 1 + 6 files changed, 128 insertions(+), 88 deletions(-) diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 62989f0bde8..b6cf22912e4 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -9,12 +9,7 @@ import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss'; import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss'; import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss'; -import { - calculateContrast, - rgbToHex, - isColorDark, -} from '../../../../src/services'; -import { createNonTextContrast } from '../../../../src/services/color/luminance_and_contrast'; +import { calculateContrast, rgbToHex } from '../../../../src/services'; import { GuidePage } from '../../components'; @@ -31,6 +26,8 @@ import { EuiCopy, EuiRange, EuiFormRow, + EuiCode, + EuiSwitch, } from '../../../../src/components'; const allowedColors = [ @@ -54,31 +51,34 @@ const ratingAA = AA; const ratingAA18 = AA18; -function renderPaletteColor(palette, color, index) { +function renderPaletteColor(palette, color, index, key) { + const hex = key ? palette[color][key] : palette[color]; + const name = key && key !== 'graphic' ? `${color}_${key}` : color; + return ( - + {copy => ( )} -

{color}

+

{name}

- {rgbToHex(palette[color].rgba).toUpperCase()} + {rgbToHex(hex.rgba).toUpperCase()}

@@ -86,7 +86,7 @@ function renderPaletteColor(palette, color, index) {

- rgb({palette[color].r}, {palette[color].g}, {palette[color].b}) + rgb({hex.r}, {hex.g}, {hex.b})

@@ -139,6 +139,7 @@ export default class extends Component { this.state = { value: '3', + behindTextVariant: false, }; } @@ -148,8 +149,14 @@ export default class extends Component { }); }; + onBehindTextVariantChange = e => { + this.setState({ + behindTextVariant: e.target.checked, + }); + }; + render() { - const { value } = this.state; + const { value, behindTextVariant } = this.state; const { selectedTheme } = this.props; let palette; @@ -164,8 +171,8 @@ export default class extends Component { } // Vis colors are the same for all palettes - const visColors = lightColors.euiColorVisColors; - const visColorKeys = Object.keys(lightColors.euiColorVisColors); + const visColors = lightColors.euiPaletteColorBlind; + const visColorKeys = Object.keys(lightColors.euiPaletteColorBlind); function getContrastRatings(color1, color2) { if (color1.indexOf('Shade') === -1 && color2.indexOf('Shade') === -1) { @@ -243,7 +250,8 @@ export default class extends Component {
  • : {ratingAA18} Passes with a contrast - of 3+, but only if the text is at least 18px or 14px and bold + of 3+, but only for graphics or if the text is at least 18px, or + 14px and bold
  • : Use only for disabled or @@ -340,37 +348,58 @@ color: $${color2};`;

    Categorical visualization palette

    The following colors are color-blind safe and should be used in - categorically seried visualizations. + categorically seried visualizations and graphics. They are meant to + be contrasted against the value of{' '} + euiColorEmptyShade for the current theme.

    For more visualization palettes and rendering services, go to the{' '} Color Palettes utility page.

    +

    + When using the palette as a background for text (i.e. badges), use + the _behindText variant. It is a brightened + version of the base palette to create better contrast with text. +

    + + Show _behindText variant + + } + checked={behindTextVariant} + onChange={this.onBehindTextVariantChange} + /> + + + {visColorKeys.map(function(color, index) { - return renderPaletteColor(visColors, color, index); + return renderPaletteColor( + visColors, + color, + index, + behindTextVariant ? 'behindText' : 'graphic' + ); })} - + {visColorKeys.map(function(color, index) { - const foreground = visColors[color].rgba; + const foreground = visColors[color].graphic.rgba; const background = palette[allowedColors[0]].rgba; return ( - -

    - {chroma.contrast(foreground, background).toFixed(1)} {color} -

    + {visPaletteContrast(foreground, background, index, color)} -     +     ); })} @@ -382,26 +411,15 @@ color: $${color2};`; function visPaletteContrast(foreground, background, index, name) { const initialContrast = chroma.contrast(foreground, background); - const textColor = isColorDark(foreground) ? '#FFFFFF' : '#000000'; + // const textColor = isColorDark(foreground) ? '#FFFFFF' : '#000000'; - const betterForeground = createNonTextContrast(background, foreground); - const betterContrast = chroma.contrast(betterForeground, background); - const betterTextColor = isColorDark(betterForeground) ? '#FFFFFF' : '#000000'; + // const betterForeground = createNonTextContrast(background, foreground); + // const betterContrast = chroma.contrast(betterForeground, background); + // const betterTextColor = isColorDark(betterForeground) ? '#FFFFFF' : '#000000'; return ( <> - - {/* {initialContrast.toFixed(1)}   Base: {chroma(foreground).hex()} */} - - {initialContrast < 3 && ( + {/* {initialContrast < 3 && ( {betterContrast.toFixed(1)}   {'better'} - )} - {name} + )} */} + + {initialContrast.toFixed(1)}: {name} + chroma(color) diff --git a/src/services/color/index.ts b/src/services/color/index.ts index 0f2c99b4ce6..e0ae46e180d 100644 --- a/src/services/color/index.ts +++ b/src/services/color/index.ts @@ -19,6 +19,7 @@ export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, + euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, diff --git a/src/services/index.ts b/src/services/index.ts index 4ab21066f31..6dcddf73154 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -33,6 +33,7 @@ export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, + euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, From fde3dce13e46754b5c8b6c4af2b5d0d55876361e Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 14:07:14 -0500 Subject: [PATCH 05/16] Using isValidHex with EuiBadge --- src-docs/src/views/guidelines/colors.js | 6 +++--- src/components/badge/badge.tsx | 6 ++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index b6cf22912e4..5a71f6a38a8 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -410,7 +410,7 @@ color: $${color2};`; } function visPaletteContrast(foreground, background, index, name) { - const initialContrast = chroma.contrast(foreground, background); + // const initialContrast = chroma.contrast(foreground, background); // const textColor = isColorDark(foreground) ? '#FFFFFF' : '#000000'; // const betterForeground = createNonTextContrast(background, foreground); @@ -432,9 +432,9 @@ function visPaletteContrast(foreground, background, index, name) { {betterContrast.toFixed(1)}   {'better'} )} */} - + {/* {initialContrast.toFixed(1)}: {name} - + */} Date: Thu, 9 Jan 2020 16:46:27 -0500 Subject: [PATCH 06/16] Cleanup --- .../src/views/color_palette/color_palette.js | 4 +- src-docs/src/views/guidelines/colors.js | 62 ------------------- src/global_styling/variables/_colors.scss | 1 + 3 files changed, 3 insertions(+), 64 deletions(-) diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 812cd94cdc3..0c619c02fae 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -10,7 +10,7 @@ import { import { euiPaletteColorBlind, - euiPaletteColorBlindWithText, + euiPaletteColorBlindBehindText, } from '../../../../src/services'; import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; @@ -69,7 +69,7 @@ export default () => ( ))} - {euiPaletteColorBlindWithText().map((color, i) => ( + {euiPaletteColorBlindBehindText().map((color, i) => ( Text diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 5a71f6a38a8..3b1d974f08a 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -1,10 +1,6 @@ import React, { Component } from 'react'; -import chroma from 'chroma-js'; - import { Link } from 'react-router'; -import lightColorsJSON from '../../../../dist/eui_theme_light.json'; - import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss'; import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss'; import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss'; @@ -388,65 +384,7 @@ color: $${color2};`; ); })} - - - - - {visColorKeys.map(function(color, index) { - const foreground = visColors[color].graphic.rgba; - const background = palette[allowedColors[0]].rgba; - return ( - - - {visPaletteContrast(foreground, background, index, color)} - - - ); - })} - ); } } - -function visPaletteContrast(foreground, background, index, name) { - // const initialContrast = chroma.contrast(foreground, background); - // const textColor = isColorDark(foreground) ? '#FFFFFF' : '#000000'; - - // const betterForeground = createNonTextContrast(background, foreground); - // const betterContrast = chroma.contrast(betterForeground, background); - // const betterTextColor = isColorDark(betterForeground) ? '#FFFFFF' : '#000000'; - - return ( - <> - {/* {initialContrast < 3 && ( - - {betterContrast.toFixed(1)}   {'better'} - - )} */} - {/* - {initialContrast.toFixed(1)}: {name} - */} - - JS:{' '} - {chroma(foreground) - .brighten(0.5) - .hex()} - - - CSS: {lightColorsJSON.euiColorVisColorsBehindText[name]} - - - ); -} diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index a73470f8154..aade7d9b11e 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -34,6 +34,7 @@ $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default; // Maps allow for easier JSON usage // Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function $euiPaletteColorBlind: ( euiColorVis0: ( graphic: #54B399, From e6327e7e436fbedb3c2d15f59c289099615db22b Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 16:59:33 -0500 Subject: [PATCH 07/16] Added docs for `euiPaletteColorBlindBehindText` --- .../src/views/color_palette/color_palette.js | 29 +++++++++++++++---- .../color_palette/color_palette_example.js | 8 +++++ 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 0c619c02fae..8c8487ec72d 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -6,6 +6,7 @@ import { EuiTitle, EuiSpacer, EuiBadge, + EuiFlexGrid, } from '../../../../src/components'; import { @@ -69,10 +70,28 @@ export default () => ( ))} - {euiPaletteColorBlindBehindText().map((color, i) => ( - - Text - - ))} + +

    Behind text variant

    +     + + + + + {euiPaletteColorBlindBehindText().map((color, i) => ( + + + Text + + + ))} + + + + + + ); diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js index 3c424ebdfb4..069e257cb8f 100644 --- a/src-docs/src/views/color_palette/color_palette_example.js +++ b/src-docs/src/views/color_palette/color_palette_example.js @@ -58,6 +58,14 @@ export const ColorPaletteExample = { more groups of 10 which are alternates of the original. This is better than allowing the initial set to loop.

    +

    + These colors are meant to be used as graphics and contrasted against + the value of euiColorEmptyShade for the current + theme. When placing text on top of these colors, use the{' '} + euiPaletteColorBlindBehindText() variant. It is a + brightened version of the base palette to create better contrast + with text. +

    • ), demo: , From fbcfc0591733798c648ee7af2060a67fffc67c91 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 17:07:04 -0500 Subject: [PATCH 08/16] Updated Avatar --- .../avatar/__snapshots__/avatar.test.tsx.snap | 22 +++++++++---------- src/components/avatar/avatar.tsx | 11 +++++----- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap index c2deff588fb..c0cbcba6190 100644 --- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap +++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = ` aria-label="aria-label" class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2" data-test-subj="test subject string" - style="background-image:none;background-color:#D36086;color:#000000" + style="background-image:none;background-color:#ee789d;color:#000000" title=" " > `; @@ -60,7 +60,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
    = ({ type = 'user', ...rest }) => { + const visColors = euiPaletteColorBlindBehindText(); + const classes = classNames( 'euiAvatar', sizeToClassNameMap[size], @@ -85,8 +87,7 @@ export const EuiAvatar: FunctionComponent = ({ } const assignedColor = - color || - VISUALIZATION_COLORS[Math.floor(name.length % VISUALIZATION_COLORS.length)]; + color || visColors[Math.floor(name.length % visColors.length)]; const textColor = isColorDark(...hexToRgb(assignedColor)) ? '#FFFFFF' : '#000000'; @@ -111,7 +112,7 @@ export const EuiAvatar: FunctionComponent = ({ // TODO: Migrate to a service function checkValidColor(color: EuiAvatarProps['color']) { - const validHex = color && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color); + const validHex = color && isValidHex(color); if (color && !validHex) { throw new Error( 'EuiAvatar needs to pass a valid color. This can either be a three ' + From 177251fdf2b637c73f9eb76f66a10c34861855f6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 17:24:51 -0500 Subject: [PATCH 09/16] Update loading chart colors --- src/components/loading/_loading_chart.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/loading/_loading_chart.scss b/src/components/loading/_loading_chart.scss index 749bd3b68dd..3c319fa08de 100644 --- a/src/components/loading/_loading_chart.scss +++ b/src/components/loading/_loading_chart.scss @@ -14,21 +14,21 @@ animation: euiLoadingChart 1s infinite; &:nth-child(1) { - background-color: $euiColorPrimary; + background-color: $euiColorVis0; } &:nth-child(2) { - background-color: $euiColorSecondary; + background-color: $euiColorVis1; animation-delay: .1s; } &:nth-child(3) { - background-color: $euiColorAccent; + background-color: $euiColorVis2; animation-delay: .2s; } &:nth-child(4) { - background-color: $euiColorDarkestShade; + background-color: $euiColorVis3; animation-delay: .3s; } } From fdd59fea5e9bd7a4f0cbb3b1128527aa28960f5c Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 17:26:25 -0500 Subject: [PATCH 10/16] Update combobox examples --- src-docs/src/views/combo_box/colors.js | 29 ++++++++++------- src-docs/src/views/combo_box/render_option.js | 32 ++++++++++++------- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/combo_box/colors.js b/src-docs/src/views/combo_box/colors.js index 41186d0075e..cbb5f6f6fad 100644 --- a/src-docs/src/views/combo_box/colors.js +++ b/src-docs/src/views/combo_box/colors.js @@ -1,58 +1,65 @@ import React, { Component } from 'react'; import { EuiComboBox } from '../../../../src/components'; +import { + euiPaletteColorBlind, + euiPaletteColorBlindBehindText, +} from '../../../../src/services'; export default class extends Component { constructor(props) { super(props); + this.visColors = euiPaletteColorBlind(); + this.visColorsBehindText = euiPaletteColorBlindBehindText(); + this.options = [ { label: 'Titan', 'data-test-subj': 'titanOption', - color: 'primary', + color: this.visColorsBehindText[0], }, { label: 'Enceladus', - color: 'secondary', + color: this.visColorsBehindText[1], }, { label: 'Mimas', - color: '#D36086', + color: this.visColorsBehindText[2], }, { label: 'Dione', - color: 'accent', + color: this.visColorsBehindText[3], }, { label: 'Iapetus', - color: 'warning', + color: this.visColorsBehindText[4], }, { label: 'Phoebe', - color: 'danger', + color: this.visColorsBehindText[5], }, { label: 'Rhea', - color: 'default', + color: this.visColorsBehindText[6], }, { label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - color: '#DA8B45', + color: this.visColorsBehindText[7], }, { label: 'Tethys', - color: '#CA8EAE', + color: this.visColorsBehindText[8], }, { label: 'Hyperion', - color: '#B9A888', + color: this.visColorsBehindText[9], }, ]; this.state = { - selectedOptions: [this.options[2], this.options[4]], + selectedOptions: [this.options[2], this.options[5]], }; } diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js index 4a6adbcdf22..e73e3eeaa55 100644 --- a/src-docs/src/views/combo_box/render_option.js +++ b/src-docs/src/views/combo_box/render_option.js @@ -5,11 +5,18 @@ import { EuiHighlight, EuiHealth, } from '../../../../src/components'; +import { + euiPaletteColorBlind, + euiPaletteColorBlindBehindText, +} from '../../../../src/services'; export default class extends Component { constructor(props) { super(props); + this.visColors = euiPaletteColorBlind(); + this.visColorsBehindText = euiPaletteColorBlindBehindText(); + this.options = [ { value: { @@ -17,49 +24,49 @@ export default class extends Component { }, label: 'Titan', 'data-test-subj': 'titanOption', - color: 'primary', + color: this.visColorsBehindText[0], }, { value: { size: 2, }, label: 'Enceladus', - color: 'secondary', + color: this.visColorsBehindText[1], }, { value: { size: 15, }, label: 'Mimas', - color: '#D36086', + color: this.visColorsBehindText[2], }, { value: { size: 1, }, label: 'Dione', - color: 'accent', + color: this.visColorsBehindText[3], }, { value: { size: 8, }, label: 'Iapetus', - color: 'warning', + color: this.visColorsBehindText[4], }, { value: { size: 2, }, label: 'Phoebe', - color: 'danger', + color: this.visColorsBehindText[5], }, { value: { size: 33, }, label: 'Rhea', - color: 'default', + color: this.visColorsBehindText[6], }, { value: { @@ -67,26 +74,26 @@ export default class extends Component { }, label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - color: '#DA8B45', + color: this.visColorsBehindText[7], }, { value: { size: 9, }, label: 'Tethys', - color: '#CA8EAE', + color: this.visColorsBehindText[8], }, { value: { size: 4, }, label: 'Hyperion', - color: '#B9A888', + color: this.visColorsBehindText[9], }, ]; this.state = { - selectedOptions: [this.options[2], this.options[4]], + selectedOptions: [this.options[2], this.options[5]], }; } @@ -129,8 +136,9 @@ export default class extends Component { renderOption = (option, searchValue, contentClassName) => { const { color, label, value } = option; + const dotColor = this.visColors[this.visColorsBehindText.indexOf(color)]; return ( - + {label}   From 029d1f84dcc7a6647028c52aa0bdfcbff1b03124 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 17:50:06 -0500 Subject: [PATCH 11/16] Add acessibility warning to quantitative palettes --- .../src/views/color_palette/color_palette_example.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js index 069e257cb8f..0c9198dd5ec 100644 --- a/src-docs/src/views/color_palette/color_palette_example.js +++ b/src-docs/src/views/color_palette/color_palette_example.js @@ -5,7 +5,12 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiText, EuiSpacer } from '../../../../src/components'; +import { + EuiCode, + EuiText, + EuiSpacer, + EuiCallOut, +} from '../../../../src/components'; import ColorPalette from './color_palette'; const colorPaletteSource = require('!!raw-loader!./color_palette'); @@ -96,6 +101,11 @@ export const ColorPaletteExample = { in the number of steps needed and the function will interpolate between the colors.

    +
    ), demo: , From 2d1904fbe4c9fa745b81957e6ab02643dd22d6a5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 18:03:35 -0500 Subject: [PATCH 12/16] Update badges to use euiPaletteColorBlindBehindText --- src/components/badge/badge.tsx | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index a6bb4ee1b08..8cb7def8d7b 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -7,7 +7,7 @@ import React, { import classNames from 'classnames'; import { CommonProps, ExclusiveUnion, keysOf, PropsOf } from '../common'; import chroma from 'chroma-js'; -import { euiPaletteColorBlind, isValidHex } from '../../services'; +import { euiPaletteColorBlindBehindText, isValidHex } from '../../services'; import { EuiInnerText } from '../inner_text'; import { EuiIcon, IconColor, IconType } from '../icon'; @@ -72,28 +72,18 @@ const colorInk = '#000'; const colorGhost = '#fff'; // The color blind palette has some stricter accessibility needs with regards to -// charts and contrast. We can ease (brighten) that requirement here since our +// charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our // accessibility concerns pertain to foreground (text) and background contrast -const brightenValue = 0.5; +const visColors = euiPaletteColorBlindBehindText(); const colorToHexMap: { [color in IconColor]: string } = { // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed default: '#d3dae6', - primary: chroma(euiPaletteColorBlind()[1]) - .brighten(brightenValue) - .hex(), - secondary: chroma(euiPaletteColorBlind()[0]) - .brighten(brightenValue) - .hex(), - accent: chroma(euiPaletteColorBlind()[2]) - .brighten(brightenValue) - .hex(), - warning: chroma(euiPaletteColorBlind()[5]) - .brighten(brightenValue) - .hex(), - danger: chroma(euiPaletteColorBlind()[9]) - .brighten(brightenValue) - .hex(), + primary: visColors[1], + secondary: visColors[0], + accent: visColors[2], + warning: visColors[5], + danger: visColors[9], }; export const COLORS = keysOf(colorToHexMap); From bf2935669be6147d2a875c55797e3b79c8583e0e Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 18:05:07 -0500 Subject: [PATCH 13/16] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 044def9a5ef..9865311d387 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732)) - Added `bellSlash` glyph to `EuiIcon` ([#2714](https://github.com/elastic/eui/pull/2714)) - Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739)) +- Created a `euiPaletteColorBlindBehindText` variant of the color blind palette ([#2750](https://github.com/elastic/eui/pull/2750)) **Bug fixes** From 4a58ca2da158d26f490291b390426c85c51ef99f Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 9 Jan 2020 18:08:19 -0500 Subject: [PATCH 14/16] Remove bad function --- src/services/color/luminance_and_contrast.ts | 36 -------------------- 1 file changed, 36 deletions(-) diff --git a/src/services/color/luminance_and_contrast.ts b/src/services/color/luminance_and_contrast.ts index 8cadf3df340..3c31c52733b 100644 --- a/src/services/color/luminance_and_contrast.ts +++ b/src/services/color/luminance_and_contrast.ts @@ -1,4 +1,3 @@ -import chroma from 'chroma-js'; import { rgbDef } from './color_types'; export function calculateLuminance(r: number, g: number, b: number): number { @@ -19,38 +18,3 @@ export function calculateContrast(rgb1: rgbDef, rgb2: rgbDef): number { } return contrast; } - -export function createNonTextContrast(background: string, foreground: string) { - let contrast = chroma.contrast(foreground, background); - - // Determine the lightness factor of the background color first to - // determine whether to shade or tint the foreground. - const brightness = chroma(background).lab()[0]; // get LAB Lightness value - let highContrastTextColor = chroma(foreground).hex(); - - while (contrast < 3) { - if (brightness > 50) { - highContrastTextColor = chroma(highContrastTextColor) - .darken(0.1) - .hex(); - } else { - highContrastTextColor = chroma(highContrastTextColor) - .brighten(0.1) - .hex(); - } - - contrast = chroma.contrast(highContrastTextColor, background); - - // @if (lightness($highContrastTextColor) < 5) { - // @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.'; - // @return $highContrastTextColor; - // } - - // @if (lightness($highContrastTextColor) > 95) { - // @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.'; - // @return $highContrastTextColor; - // } - } - - return highContrastTextColor; -} From 100595faea815d6e0db78b9e66d01b9092484425 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 10 Jan 2020 15:16:23 -0500 Subject: [PATCH 15/16] Remove unused var --- src-docs/src/views/combo_box/colors.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src-docs/src/views/combo_box/colors.js b/src-docs/src/views/combo_box/colors.js index cbb5f6f6fad..fb7969486c3 100644 --- a/src-docs/src/views/combo_box/colors.js +++ b/src-docs/src/views/combo_box/colors.js @@ -1,16 +1,12 @@ import React, { Component } from 'react'; import { EuiComboBox } from '../../../../src/components'; -import { - euiPaletteColorBlind, - euiPaletteColorBlindBehindText, -} from '../../../../src/services'; +import { euiPaletteColorBlindBehindText } from '../../../../src/services'; export default class extends Component { constructor(props) { super(props); - this.visColors = euiPaletteColorBlind(); this.visColorsBehindText = euiPaletteColorBlindBehindText(); this.options = [ From 9d2ae7ba3dfac1c6f6090d3dc601d8c47fb37e6f Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 10 Jan 2020 15:36:16 -0500 Subject: [PATCH 16/16] IE fixes --- src-docs/src/views/color_palette/color_palette.js | 2 +- src-docs/src/views/guidelines/colors.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 8c8487ec72d..c3bdfdf858a 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -78,7 +78,7 @@ export default () => ( {euiPaletteColorBlindBehindText().map((color, i) => ( - + Text diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 3b1d974f08a..fb2994f3607 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -52,7 +52,7 @@ function renderPaletteColor(palette, color, index, key) { const name = key && key !== 'graphic' ? `${color}_${key}` : color; return ( - +