diff --git a/CHANGELOG.md b/CHANGELOG.md index d08bb437649..9377c89ec5e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739)) - Changed `EuiNavDrawerFlyout` to close after child nav items are clicked ([#2749](https://github.com/elastic/eui/pull/2749)) - Changed `EuiNavDrawerFlyout` to trap focus while navigating via keyboard ([#2749](https://github.com/elastic/eui/pull/2749)) +- Created a `euiPaletteColorBlindBehindText` variant of the color blind palette ([#2750](https://github.com/elastic/eui/pull/2750)) **Bug fixes** diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index f392b99f11f..c3bdfdf858a 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -5,9 +5,14 @@ import { EuiFlexItem, EuiTitle, EuiSpacer, + EuiBadge, + EuiFlexGrid, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; +import { + euiPaletteColorBlind, + euiPaletteColorBlindBehindText, +} from '../../../../src/services'; import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; const customPalettes = [ @@ -65,5 +70,28 @@ export default () => ( ))} + +

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..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'); @@ -58,6 +63,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: , @@ -88,6 +101,11 @@ export const ColorPaletteExample = { in the number of steps needed and the function will interpolate between the colors.

+ ), demo: , diff --git a/src-docs/src/views/combo_box/colors.js b/src-docs/src/views/combo_box/colors.js index 41186d0075e..fb7969486c3 100644 --- a/src-docs/src/views/combo_box/colors.js +++ b/src-docs/src/views/combo_box/colors.js @@ -1,58 +1,61 @@ import React, { Component } from 'react'; import { EuiComboBox } from '../../../../src/components'; +import { euiPaletteColorBlindBehindText } from '../../../../src/services'; export default class extends Component { constructor(props) { super(props); + 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}   diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 336cf15a33f..fb2994f3607 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; - import { Link } from 'react-router'; import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss'; @@ -23,6 +22,8 @@ import { EuiCopy, EuiRange, EuiFormRow, + EuiCode, + EuiSwitch, } from '../../../../src/components'; const allowedColors = [ @@ -40,50 +41,40 @@ const allowedColors = [ 'euiColorAccent', ]; -const visColors = [ - 'euiColorVis0', - 'euiColorVis1', - 'euiColorVis2', - 'euiColorVis3', - 'euiColorVis4', - 'euiColorVis5', - 'euiColorVis6', - 'euiColorVis7', - 'euiColorVis8', - 'euiColorVis9', -]; - const ratingAAA = AAA; 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()}

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

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

@@ -144,6 +135,7 @@ export default class extends Component { this.state = { value: '3', + behindTextVariant: false, }; } @@ -153,8 +145,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; @@ -168,6 +166,41 @@ export default class extends Component { palette = lightColors; } + // Vis colors are the same for all palettes + const visColors = lightColors.euiPaletteColorBlind; + const visColorKeys = Object.keys(lightColors.euiPaletteColorBlind); + + 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 ( @@ -213,7 +246,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 @@ -254,31 +288,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 = (
    @@ -324,20 +344,44 @@ 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} + /> + + + - {visColors.map(function(color, index) { - return renderPaletteColor(palette, color, index); + {visColorKeys.map(function(color, index) { + return renderPaletteColor( + visColors, + color, + index, + behindTextVariant ? 'behindText' : 'graphic' + ); })} 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 ' + diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 48434625814..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 } from '../../services/color/eui_palettes'; +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); @@ -297,11 +287,9 @@ function setTextColor(bgColor: string) { } function checkValidColor(color: null | IconColor | string) { - const validHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i; - if ( color != null && - !validHex.test(color) && + !isValidHex(color) && !COLORS.includes(color) && color !== 'hollow' ) { 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; } } diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss index 1068030ffe9..ee7f6fd1995 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); @@ -114,8 +119,3 @@ @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'; -} diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 5023a69739a..aade7d9b11e 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -32,21 +32,78 @@ $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 +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +$euiPaletteColorBlind: ( + euiColorVis0: ( + graphic: #54B399, + behindText: #6DCCB1, + ), + euiColorVis1: ( + graphic: #6092C0, + behindText: #79AAD9, + ), + euiColorVis2: ( + graphic: #D36086, + behindText: #EE789D, + ), + euiColorVis3: ( + graphic: #9170B8, + behindText: #A987D1, + ), + euiColorVis4: ( + graphic: #CA8EAE, + behindText: #E4A6C7, + ), + euiColorVis5: ( + graphic: #D6BF57, + behindText: #F1D86F, + ), + euiColorVis6: ( + graphic: #B9A888, + behindText: #D2C0A0, + ), + euiColorVis7: ( + graphic: #DA8B45, + behindText: #F5A35C, + ), + euiColorVis8: ( + graphic: #AA6556, + behindText: #C47C6C, + ), + euiColorVis9: ( + graphic: #E7664C, + behindText: #FF7E62, + ) +) !default; + +$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; +$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; +$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default; +$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default; +$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default; +$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default; +$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default; +$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default; +$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default; +$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default; + +// sass-lint:disable-block variable-name-format +$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default; +$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default; +$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default; +$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default; +$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default; +$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default; +$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default; +$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default; +$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default; +$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default; $euiColorChartLines: #EFF1F4 !default; $euiColorChartBand: #F5F7FA !default; - // Code $euiCodeBlockBackgroundColor: $euiColorLightestShade !default; diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 2e8cc628af3..8ade827a468 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 euiPaletteColorBlindBehindText = 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']; }; 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, 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;