diff --git a/CHANGELOG.md b/CHANGELOG.md index 6232e6ba685..8cc36f49b11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Converted `EuiErrorBoundary` to Typescript ([#2690](https://github.com/elastic/eui/pull/2690)) - Updated `EuiNavDrawer` to accept React fragments ([#2710](https://github.com/elastic/eui/pull/2710)) - Added `EuiFormFieldset` and `EuiFormLegend` components ([#2706](https://github.com/elastic/eui/pull/2706)) +- Adjusted colors of color blind viz palette ([#2686](https://github.com/elastic/eui/pull/2686)) **Bug fixes** @@ -15,6 +16,12 @@ - Fixed bug in `EuiDataGrid` where resizing columns changed the active DOM element ([#2724](https://github.com/elastic/eui/pull/#2724)) - Fixed position of scrollbar in `EuiCodeBlock` ([#2727](https://github.com/elastic/eui/pull/#2727)) +**Breaking changes** + +- Changed accepted properties of the `color_palette` method to accept an array of colors ([#2686](https://github.com/elastic/eui/pull/#2686)) +- Removed the `palette` export to export each palette function directly ([#2686](https://github.com/elastic/eui/pull/#2686)) +- Changed the palette functions to be methods that accept a number of steps and removed `.colors` key ([#2686](https://github.com/elastic/eui/pull/#2686)) + ## [`17.3.1`](https://github.com/elastic/eui/tree/v17.3.1) **Bug fixes** diff --git a/package.json b/package.json index 138dbe51cc8..777880cea3a 100644 --- a/package.json +++ b/package.json @@ -44,10 +44,12 @@ "test-staged" ], "dependencies": { + "@types/chroma-js": "^1.4.3", "@types/lodash": "^4.14.116", "@types/numeral": "^0.0.25", "@types/react-beautiful-dnd": "^10.1.0", "classnames": "^2.2.5", + "chroma-js": "^2.0.4", "highlight.js": "^9.12.0", "html": "^1.0.0", "keymirror": "^0.1.1", @@ -106,7 +108,6 @@ "chai-webdriverio": "^0.4.3", "chalk": "^2.4.1", "chokidar": "^1.7.0", - "chroma-js": "^2.0.4", "chromedriver": "2.37.0", "circular-dependency-plugin": "^5.0.2", "core-js": "^2.5.1", diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 3750c9f5944..a37483cf9bc 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -163,7 +163,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000; .guideCharts__customLegend { font-size: $euiFontSizeXS; position: absolute; - width: 123px; + width: 93px; right: 0; bottom: 0; padding: $euiSizeXS; @@ -229,23 +229,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000; margin-left: 0; width: 100%; } - - .euiFlexGroup--responsive > .euiFlexItem.guideColorPalette__swatch { - margin-bottom: 0 !important; - - span { - height: $euiSize; - width: $euiSizeL; - } - - &:first-child span { - border-radius: $euiBorderRadius $euiBorderRadius 0 0; - } - - &:last-child span { - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; - } - } } .euiDataGridRowCell--favoriteFranchise { diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 34b67d010fc..f392b99f11f 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -7,34 +7,63 @@ import { EuiSpacer, } from '../../../../src/components'; -import { palettes } from '../../../../src/services'; +import { euiPaletteColorBlind } from '../../../../src/services'; +import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; -const paletteData = palettes; -const paletteNames = Object.keys(paletteData); +const customPalettes = [ + { + title: 'Max 10 colors', + palette: euiPaletteColorBlind(), + }, + { + title: 'More than 10 colors are needed', + palette: euiPaletteColorBlind(2), + }, + { + title: + 'Series have multiple metrics and so the colors must coordinate but be distinguishable', + palette: euiPaletteColorBlind(3, 'group'), + }, +]; export default () => ( - {paletteNames.map((paletteName, i) => ( -
- -

{paletteName}

+ {customPalettes.map((palette, i) => ( + + +

{palette.title}

 - - {paletteData[paletteName].colors.map((hexCode, j) => ( - - - - ))} + + + + {palette.palette.map(hexCode => ( + + ))} + + + + 0 ? i + 1 : ''}${ + i > 1 ? ", 'group'" : '' + })`} + code={`euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${ + i > 1 ? ", 'group'" : '' + })`} + /> + - -
+ + ))} ); diff --git a/src-docs/src/views/color_palette/color_palette_custom.js b/src-docs/src/views/color_palette/color_palette_custom.js index ef4682e1b61..88b5640f899 100644 --- a/src-docs/src/views/color_palette/color_palette_custom.js +++ b/src-docs/src/views/color_palette/color_palette_custom.js @@ -1,69 +1,68 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useState } from 'react'; import { EuiFlexGroup, EuiFlexItem, - EuiTitle, + EuiRange, + EuiFormRow, EuiSpacer, } from '../../../../src/components'; -import { colorPalette, palettes } from '../../../../src/services'; +import { euiPaletteColorBlind, colorPalette } from '../../../../src/services'; +import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; -const euiColors = palettes.euiPaletteForLightBackground.colors; +const customPalettes = [ + [euiPaletteColorBlind()[3]], + [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], + [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], +]; -export default () => ( - - -

For mapping density, low to high

- - - {euiColors.map((color, j) => ( -
- - {colorPalette('FFFFFF', color, 20).map((hexCode, k) => ( - - - - ))} +export default () => { + const [length, setLength] = useState(10); + + const onLengthChange = e => { + setLength(e.currentTarget.value); + }; + + return ( + + + + + + + + {customPalettes.map((palette, i) => ( + + + + {colorPalette(palette, Number(length), i > 1).map(hexCode => ( + + ))} + + + + 1 ? ', true' : '' + });`} + code={`colorPalette([${palette}], ${length}${ + i > 1 ? ', true' : '' + });`} + /> + - -
- ))} - - -

For communicating state, trending negative

- - - - {colorPalette('#FBEFD3', '#BD4C48').map((hexCode, l) => ( - - - - ))} - - - -

For communicating state, trending positive

- - - - {colorPalette('#FFFFE0', '#017F75').map((hexCode, l) => ( - - - ))} - - -); + + ); +}; 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 6084e66f22f..3c424ebdfb4 100644 --- a/src-docs/src/views/color_palette/color_palette_example.js +++ b/src-docs/src/views/color_palette/color_palette_example.js @@ -1,21 +1,37 @@ import React from 'react'; +import { Link } from 'react-router'; import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode } from '../../../../src/components'; +import { EuiCode, EuiText, EuiSpacer } from '../../../../src/components'; import ColorPalette from './color_palette'; const colorPaletteSource = require('!!raw-loader!./color_palette'); const colorPaletteHtml = renderToHtml(ColorPalette); +import ColorPaletteQuant from './color_palette_quantitative'; +const colorPaletteQuantSource = require('!!raw-loader!./color_palette_quantitative'); +const colorPaletteQuantHtml = renderToHtml(ColorPaletteQuant); + import ColorPaletteCustom from './color_palette_custom'; const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom'); const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom); export const ColorPaletteExample = { title: 'Color Palettes', + intro: ( + <> + +

+ EUI provides a base set of color palettes that return an array of + hexadecimal color for use in other EUI components or charts. +

+ + + + ), sections: [ { title: 'Preset qualitative palettes', @@ -32,22 +48,52 @@ export const ColorPaletteExample = { text: (

- The eui_palettes.js file provides a base set of - color palettes in an array format. The hexadecimal color codes in - these sets consist of both color safe and EUI themed colors. Import - the file, then use JavaScript to read and apply the color array - values to other EUI components, such as charts. + Qualitative palettes are best suited for communicating and comparing + discrete data series. EUI recommends using the{' '} + euiPaletteColorBlind() for qualitative and + categorical data.

- Quantitative palettes are best suited for communicating and - comparing discrete data series. + This palette is restricted to only 10 colors. However, you can add + more groups of 10 which are alternates of the original. This is + better than allowing the initial set to loop.

), demo: , + snippet: ['euiPaletteColorBlind()', "euiPaletteColorBlind(3, 'group')"], }, { title: 'Recommended quantitative palettes', + source: [ + { + type: GuideSectionTypes.JS, + code: colorPaletteQuantSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPaletteQuantHtml, + }, + ], + text: ( +
+

+ Quantitative palettes are best suited for displaying data on a + continuum, as in the case of health statuses and large geographic or + demographic-based data sets. +

+

+ EUI provides the following common palettes for quantitative data and{' '} + charts. Just pass + in the number of steps needed and the function will interpolate + between the colors. +

+
+ ), + demo: , + }, + { + title: 'Custom palettes', source: [ { type: GuideSectionTypes.JS, @@ -62,22 +108,19 @@ export const ColorPaletteExample = {

Use the colorPalette service to generate a - custom, gradiated palette array of any length from two hexadecimal - color codes. For example, obtain an array of yellow-to-green health - status colors using - - colorPalette('#FFFF6D', '#1EA593', 20) - - . -

-

- Custom palettes are best suited for displaying data on a continuum, - as in the case of health statuses and large geographic or - demographic-based data sets. + custom, gradiated palette array of any length from one or more + hexadecimal color codes. The third parameter{' '} + divergent, will interpolate between the two + halves of the spectrums separately. If a middle point is not + provided, it will graduate to light gray.

), demo: , + snippet: [ + "colorPalette(['#fff'. '#000'], 11);", + "colorPalette(['#fff'. '#000'], 11, divergent = true);", + ], }, ], }; diff --git a/src-docs/src/views/color_palette/color_palette_quantitative.js b/src-docs/src/views/color_palette/color_palette_quantitative.js new file mode 100644 index 00000000000..c7fb55d0c8e --- /dev/null +++ b/src-docs/src/views/color_palette/color_palette_quantitative.js @@ -0,0 +1,79 @@ +import React, { Fragment, useState } from 'react'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiRange, + EuiFormRow, + EuiSpacer, +} from '../../../../src/components'; + +import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; + +import { + euiPaletteComplimentary, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteCool, + euiPaletteWarm, + euiPaletteNegative, + euiPalettePositive, + euiPaletteGray, +} from '../../../../src/services'; +const paletteData = { + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteComplimentary, + euiPaletteNegative, + euiPalettePositive, + euiPaletteCool, + euiPaletteWarm, + euiPaletteGray, +}; +const paletteNames = Object.keys(paletteData); + +export default () => { + const [length, setLength] = useState(5); + + const onLengthChange = e => { + setLength(e.currentTarget.value); + }; + + return ( + + + + + + + + {paletteNames.map(paletteName => ( + + + + {paletteData[paletteName](Number(length)).map(hexCode => ( + + ))} + + + + + + + ))} + + ); +}; diff --git a/src-docs/src/views/color_palette/shared.js b/src-docs/src/views/color_palette/shared.js new file mode 100644 index 00000000000..705753ddbe8 --- /dev/null +++ b/src-docs/src/views/color_palette/shared.js @@ -0,0 +1,37 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { + EuiFlexItem, + EuiCopy, + EuiCode, + EuiLink, +} from '../../../../src/components'; + +export const ColorPaletteFlexItem = ({ hexCode, className, ...rest }) => { + return ( + + + + ); +}; + +export const ColorPaletteCopyCode = ({ textToCopy, code }) => { + return ( + + + {copy => ( + + {code} + + )} + + + ); +}; diff --git a/src-docs/src/views/color_picker/color_picker.js b/src-docs/src/views/color_picker/color_picker.js index 20f83723721..5fc8b2f548a 100644 --- a/src-docs/src/views/color_picker/color_picker.js +++ b/src-docs/src/views/color_picker/color_picker.js @@ -7,7 +7,7 @@ export class ColorPicker extends Component { constructor(props) { super(props); this.state = { - color: '#DB1374', + color: '#D36086', }; } diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js index e92f36a631f..b625c54aeb1 100644 --- a/src-docs/src/views/color_picker/color_stops.js +++ b/src-docs/src/views/color_picker/color_stops.js @@ -10,15 +10,15 @@ export const ColorStops = () => { const [extendedColorStops, setExtendedColorStops] = useState([ { stop: 100, - color: '#00B3A4', + color: '#5BBAA0', }, { stop: 250, - color: '#DB1374', + color: '#D36086', }, { stop: 350, - color: '#490092', + color: '#9170B8', }, ]); diff --git a/src-docs/src/views/color_picker/color_stops_range.js b/src-docs/src/views/color_picker/color_stops_range.js index 2a3aa879c99..10c18c6f35c 100644 --- a/src-docs/src/views/color_picker/color_stops_range.js +++ b/src-docs/src/views/color_picker/color_stops_range.js @@ -22,7 +22,7 @@ export const ColorStopsRange = () => { }; const [singleColorStops, setSingleColorStops] = useState([ - { stop: 10, color: '#DB1374' }, + { stop: 10, color: '#D36086' }, ]); const handleSingleChange = colorStops => { @@ -30,7 +30,7 @@ export const ColorStopsRange = () => { }; const [singleColorStops2, setSingleColorStops2] = useState([ - { stop: 10, color: '#DB1374' }, + { stop: 10, color: '#D36086' }, ]); const handleSingleChange2 = colorStops => { @@ -38,7 +38,7 @@ export const ColorStopsRange = () => { }; const [singleColorStops3, setSingleColorStops3] = useState([ - { stop: 10, color: '#DB1374' }, + { stop: 10, color: '#D36086' }, ]); const handleSingleChange3 = colorStops => { diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index 258af45a6c7..7d5d1cec3d5 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -10,7 +10,7 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPicker, useColorStop } from './utils'; export const KitchenSink = () => { - const [color, setColor] = useColorPicker('#DB1374'); + const [color, setColor] = useColorPicker('#D36086'); const [colorStops, setColorStops, addStop] = useColorStop(true); return ( diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js index 762950fb9a1..f264d20ae53 100644 --- a/src-docs/src/views/color_picker/modes.js +++ b/src-docs/src/views/color_picker/modes.js @@ -10,7 +10,7 @@ import { import { useColorPicker, useColorStop } from './utils'; export const Modes = () => { - const [color, setColor, errors] = useColorPicker('#DB1374'); + const [color, setColor, errors] = useColorPicker('#D36086'); const [colorStops, setColorStops] = useColorStop(); return ( diff --git a/src-docs/src/views/color_picker/utils.js b/src-docs/src/views/color_picker/utils.js index d375427c3d9..1a385e08eeb 100644 --- a/src-docs/src/views/color_picker/utils.js +++ b/src-docs/src/views/color_picker/utils.js @@ -10,15 +10,15 @@ export const useColorStop = (useRandomColor = false) => { const [colorStops, setColorStops] = useState([ { stop: 20, - color: '#00B3A4', + color: '#5BBAA0', }, { stop: 50, - color: '#DB1374', + color: '#D36086', }, { stop: 65, - color: '#490092', + color: '#9170B8', }, ]); diff --git a/src-docs/src/views/combo_box/colors.js b/src-docs/src/views/combo_box/colors.js index bbed1d8f9a1..ea806efbc2b 100644 --- a/src-docs/src/views/combo_box/colors.js +++ b/src-docs/src/views/combo_box/colors.js @@ -18,7 +18,7 @@ export default class extends Component { }, { label: 'Mimas', - color: '#DB1374', + color: '#D36086', }, { label: 'Dione', @@ -39,15 +39,15 @@ export default class extends Component { { label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - color: '#F98510', + color: '#F19F58', }, { label: 'Tethys', - color: '#FEB6DB', + color: '#EEAFCF', }, { label: 'Hyperion', - color: '#BFA180', + color: '#CDBD9D', }, ]; diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js index 23be0a45f1c..9472ed6e8a4 100644 --- a/src-docs/src/views/combo_box/render_option.js +++ b/src-docs/src/views/combo_box/render_option.js @@ -31,7 +31,7 @@ export default class extends Component { size: 15, }, label: 'Mimas', - color: '#DB1374', + color: '#D36086', }, { value: { @@ -67,21 +67,21 @@ export default class extends Component { }, label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", - color: '#F98510', + color: '#F19F58', }, { value: { size: 9, }, label: 'Tethys', - color: '#FEB6DB', + color: '#EEAFCF', }, { value: { size: 4, }, label: 'Hyperion', - color: '#BFA180', + color: '#CDBD9D', }, ]; diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index 9c00575c801..111810e15fc 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -179,68 +179,3 @@ export class MultiChartCard extends Component { ); } } - -/** - * The following function is very messy and hopefully will be replaced by something provided by elastic-charts - */ -import chroma from 'chroma-js'; -export function createSpectrum( - colors, - steps = 5, - diverging = false, - correctLightness = true, - bezier = true -) { - if (colors.length < 2) { - console.warn( - 'createSpectrum expects the colors array to have at least 2 colors' - ); - return; - } - - diverging = diverging || colors.length > 2; - - const even = steps % 2 === 0; - const numStepsLeft = diverging - ? Math.ceil(steps / 2) + (even ? 1 : 0) - : steps; - const numStepsRight = diverging ? Math.ceil(steps / 2) + (even ? 1 : 0) : 0; - - const numColorsHalf = - Math.ceil(colors.length / 2) + (colors.length % 2 === 0 ? 1 : 0); - - const colorsLeft = colors.filter(function(item, index) { - if (index < numColorsHalf) { - return true; // keep it - } - }); - const colorsRight = - diverging && - colors - .reverse() - .filter(function(item, index) { - if (index < numColorsHalf) { - return true; // keep it - } - }) - .reverse(); - - function createSteps(colors, steps) { - return colors.length - ? chroma - .scale(bezier && colors.length > 1 ? chroma.bezier(colors) : colors) - .correctLightness(correctLightness) - .colors(steps) - : []; - } - - const stepsLeft = createSteps(colorsLeft, numStepsLeft); - const stepsRight = createSteps(colorsRight, numStepsRight); - - const spectrum = (even && diverging - ? stepsLeft.slice(0, stepsLeft.length - 1) - : stepsLeft - ).concat(stepsRight.slice(1)); - - return spectrum; -} diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.js index 070c11aa2af..fd5c919f12b 100644 --- a/src-docs/src/views/elastic_charts/sparklines.js +++ b/src-docs/src/views/elastic_charts/sparklines.js @@ -26,7 +26,10 @@ import { } from '../../../../src/components'; import { TIME_DATA_SMALL } from './data'; -import { palettes } from '../../../../src/services'; +import { + euiPaletteForDarkBackground, + euiPaletteForLightBackground, +} from '../../../../src/services'; const getColorsMap = (color, specId) => { const map = new Map(); @@ -71,6 +74,12 @@ class _Sparklines extends Component { data={TIME_DATA_SMALL} xAccessor={0} yAccessors={[1]} + customSeriesColors={getColorsMap( + isDarkTheme + ? euiPaletteForDarkBackground()[1] + : euiPaletteForLightBackground()[1], + 'numbers' + )} /> @@ -93,8 +102,8 @@ class _Sparklines extends Component { yAccessors={[1]} customSeriesColors={getColorsMap( isDarkTheme - ? palettes.euiPaletteForDarkBackground.colors[1] - : palettes.euiPaletteForLightBackground.colors[1], + ? euiPaletteForDarkBackground()[1] + : euiPaletteForLightBackground()[1], 'increase' )} /> @@ -127,8 +136,8 @@ class _Sparklines extends Component { yAccessors={[1]} customSeriesColors={getColorsMap( isDarkTheme - ? palettes.euiPaletteForDarkBackground.colors[3] - : palettes.euiPaletteForLightBackground.colors[3], + ? euiPaletteForDarkBackground()[3] + : euiPaletteForLightBackground()[3], 'major' )} /> @@ -153,8 +162,8 @@ class _Sparklines extends Component { yAccessors={[1]} customSeriesColors={getColorsMap( isDarkTheme - ? palettes.euiPaletteForDarkBackground.colors[3] - : palettes.euiPaletteForLightBackground.colors[3], + ? euiPaletteForDarkBackground()[3] + : euiPaletteForLightBackground()[3], 'subtle' )} /> diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js index e444ca8889a..8d5be26f78f 100644 --- a/src-docs/src/views/elastic_charts/theming.js +++ b/src-docs/src/views/elastic_charts/theming.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment } from 'react'; +import React, { useState, Fragment } from 'react'; import { withTheme } from '../../components'; import { Chart, @@ -9,88 +9,159 @@ import { DataGenerator, } from '@elastic/charts'; +import { + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiSuperSelect, +} from '../../../../src/components'; + import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT, } from '../../../../src/themes/charts/themes'; -import { colorPalette } from '../../../../src/services'; - -class _Theming extends Component { - constructor(props) { - super(props); +import { + euiPaletteColorBlind, + euiPaletteComplimentary, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteCool, + euiPaletteWarm, + euiPaletteNegative, + euiPalettePositive, + euiPaletteGray, +} from '../../../../src/services'; +const paletteData = { + euiPaletteColorBlind, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteComplimentary, + euiPaletteNegative, + euiPalettePositive, + euiPaletteCool, + euiPaletteWarm, + euiPaletteGray, +}; +const paletteNames = Object.keys(paletteData); - this.state = { - chartType: 'LineSeries', - }; - } +const _Theming = props => { + /** + * Create palette select + */ + const paletteOptions = paletteNames.map((paletteName, index) => + createPaletteOption(paletteName, index) + ); - onMultiChange = multiObject => { - this.setState({ - ...multiObject, - }); + const [barPalette, setBarPalette] = useState('5'); + const onBarPaletteChange = value => { + setBarPalette(value); }; - onChartTypeChange = chartType => { - this.setState({ - chartType: chartType, - }); - }; + /** + * Create data + */ + const dg = new DataGenerator(); + const data1 = dg.generateGroupedSeries(20, 1); + const data2 = dg.generateGroupedSeries(20, 5); - render() { - const dg = new DataGenerator(); - const data1 = dg.generateGroupedSeries(20, 1); - const data2 = dg.generateGroupedSeries(20, 5); + /** + * Setup theme based on current light/dark theme + */ + const isDarkTheme = props.theme.includes('dark'); + const theme = isDarkTheme + ? EUI_CHARTS_THEME_DARK.theme + : EUI_CHARTS_THEME_LIGHT.theme; - const isDarkTheme = this.props.theme.includes('dark'); - const theme = isDarkTheme - ? EUI_CHARTS_THEME_DARK.theme - : EUI_CHARTS_THEME_LIGHT.theme; + const customColors = { + colors: { + vizColors: paletteData[paletteNames[Number(barPalette)]](5), + }, + }; - const customColors = { - colors: { - vizColors: colorPalette('#FFFFE0', '#017F75', 5), - }, - }; + const data1CustomSeriesColors = new Map(); + const data1DataSeriesColorValues = { + colorValues: [], + specId: 'control', + }; + data1CustomSeriesColors.set(data1DataSeriesColorValues, 'black'); - const data1CustomSeriesColors = new Map(); - const data1DataSeriesColorValues = { - colorValues: [], - specId: 'control', - }; - data1CustomSeriesColors.set(data1DataSeriesColorValues, 'black'); + return ( + + + + + + + + + + + + + + + + ); +}; - return ( +const createPaletteOption = function(paletteName, index) { + return { + value: String(index), + inputDisplay: createPalette( + paletteData[paletteNames[index]](index > 0 ? 10 : 1) + ), + dropdownDisplay: ( - - - - - - - + {paletteName} + + {createPalette(paletteData[paletteNames[index]](index > 0 ? 10 : 1))} - ); - } -} + ), + }; +}; + +const createPalette = function(palette) { + return ( + + {palette.map(hexCode => ( + + + + ))} + + ); +}; export const Theming = withTheme(_Theming); diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.js index bd5baad5d14..d13e8503914 100644 --- a/src-docs/src/views/elastic_charts/theming_categorical.js +++ b/src-docs/src/views/elastic_charts/theming_categorical.js @@ -23,8 +23,13 @@ import { EuiTitle, } from '../../../../src/components'; -import { CHART_COMPONENTS, createSpectrum, ChartCard } from './shared'; -import { palettes } from '../../../../src/services'; +import { CHART_COMPONENTS, ChartCard } from './shared'; +import { + euiPaletteColorBlind, + euiPalettePositive, + euiPaletteForStatus, + euiPaletteGray, +} from '../../../../src/services'; const getColorsMap = (color, specId) => { const map = new Map(); @@ -36,20 +41,20 @@ class _Categorical extends Component { constructor(props) { super(props); - this.highlightColor = palettes.euiPaletteColorBlind.colors[2]; + this.highlightColor = euiPaletteColorBlind()[2]; this.colorTypeRadios = [ { id: `${this.idPrefix}3`, - label: 'Category', + label: 'Categorical', }, { id: `${this.idPrefix}0`, - label: 'Quantity', + label: 'Sequential', }, { id: `${this.idPrefix}1`, - label: 'Trend', + label: 'Diverging', }, { id: `${this.idPrefix}2`, @@ -64,7 +69,8 @@ class _Categorical extends Component { numCharts: '3', data: null, dataString: '[{x: 1, y: 5.5, g: 0}]', - vizColors: palettes.euiPaletteColorBlind.colors, + vizColors: euiPaletteColorBlind(), + vizColorsString: 'euiPaletteColorBlind()', chartType: 'LineSeries', }; } @@ -103,13 +109,13 @@ class _Categorical extends Component { updateCorrectChart = (numCharts, chartType) => { switch (chartType) { - case 'Category': + case 'Categorical': this.createCategoryChart(numCharts); break; - case 'Quantity': + case 'Sequential': this.createQuantityChart(numCharts); break; - case 'Trend': + case 'Diverging': this.createTrendChart(numCharts); break; case 'Highlight': @@ -131,24 +137,21 @@ class _Categorical extends Component { const dg = new DataGenerator(); const data = dg.generateGroupedSeries(20, numCharts).map(item => { const index = Number(item.g); - item.g = `Category ${index + 1}`; + item.g = `Categorical ${index + 1}`; return item; }); this.setState({ data, - dataString: "[{x: 1, y: 5.5, g: 'Category 1'}]", - vizColors: palettes.euiPaletteColorBlind.colors, + dataString: "[{x: 1, y: 5.5, g: 'Categorical 1'}]", + vizColors: euiPaletteColorBlind(), + vizColorsString: 'euiPaletteColorBlind()', chartType: 'LineSeries', }); }; createQuantityChart = numCharts => { - const vizColors = createSpectrum( - ['#FFFFFF', palettes.euiPaletteColorBlind.colors[0]], - numCharts + 1 - ); - vizColors.shift(); + const vizColors = euiPalettePositive(numCharts); // convert series labels to percentages const dg = new DataGenerator(); @@ -168,15 +171,13 @@ class _Categorical extends Component { data, dataString: "[{x: 1, y: 5.5, g: '0 - 100%'}]", vizColors, + vizColorsString: `euiPaletteCool(${numCharts})`, chartType: 'BarSeries', }); }; createTrendChart = numCharts => { - const vizColors = createSpectrum( - ['#58ba6d', '#ebdf62', '#d75949'], - numCharts - ); + const vizColors = euiPaletteForStatus(numCharts); // convert series labels to better/worse const oddSeries = numCharts % 2; @@ -207,15 +208,13 @@ class _Categorical extends Component { data, dataString: "[{x: 1, y: 5.5, g: 'Better'}]", vizColors, + vizColorsString: `euiPaletteForStatus(${numCharts})`, chartType: 'BarSeries', }); }; createHighlightChart = numCharts => { - const isDarkTheme = this.props.theme.includes('dark'); - const vizColors = isDarkTheme - ? createSpectrum(['#343741', '#535966'], numCharts) - : createSpectrum(['#D3DAE6', '#98A2B3'], numCharts); + const vizColors = euiPaletteGray(numCharts); vizColors[vizColors.length - 1] = this.highlightColor; const dg = new DataGenerator(); @@ -225,6 +224,7 @@ class _Categorical extends Component { data, dataString: "[{x: 1, y: 5.5, g: '0'}]", vizColors: numCharts < 2 ? [this.highlightColor] : vizColors, + vizColorsString: `euiPaletteGray(${numCharts})[length - 1] = this.highlightColor`, chartType: 'LineSeries', }); }; @@ -234,6 +234,7 @@ class _Categorical extends Component { data, dataString, vizColors, + vizColorsString, chartType, numCharts, colorType, @@ -266,13 +267,10 @@ class _Categorical extends Component { const customColors = { colors: { vizColors }, }; - const customColorsString = - vizColors !== palettes.euiPaletteColorBlind.colors - ? `[ - { colors: { vizColors: [${JSON.stringify(vizColors)}] }}, + const customColorsString = `[ + { colors: { vizColors: ${vizColorsString} }}, isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme -]` - : null; +]`; const charts = []; let customLegend; @@ -310,7 +308,7 @@ class _Categorical extends Component { xAccessor={'x'} yAccessors={['y']} customSeriesColors={getColorsMap( - palettes.euiPaletteColorBlind.colors[index < 2 ? 0 : 1], + euiPaletteColorBlind()[index < 2 ? 0 : 1], `data${index}` )} lineSeriesStyle={{ @@ -442,11 +440,7 @@ class _Categorical extends Component { } - {`import { colorPalette } from '../../../../src/services'; + {`import { euiPalettePositive } from '../../../../src/services'; const customColors = { colors: { - vizColors: colorPalette('#FFFFE0', '#017F75', 5), + vizColors: euiPalettePositive(5), }, }; diff --git a/src-docs/src/views/form_compressed/complex_example.js b/src-docs/src/views/form_compressed/complex_example.js index 59814393281..7bac014313f 100644 --- a/src-docs/src/views/form_compressed/complex_example.js +++ b/src-docs/src/views/form_compressed/complex_example.js @@ -92,7 +92,7 @@ export default class extends Component { isSwitchChecked: false, opacityValue: '20', buttonGroupIdSelected: `${idPrefix}1`, - color: '#DB1374', + color: '#D36086', borderValue: 3, popoverSliderValues: 16, dualValue: [5, 10], diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 090d47c65d6..336cf15a33f 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -321,10 +321,10 @@ color: $${color2};`; -

Qualitative visualization palette

+

Categorical visualization palette

The following colors are color-blind safe and should be used in - qualitative visualizations. + categorically seried visualizations.

For more visualization palettes and rendering services, go to the{' '} diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss index 86e8c708f55..97132d18488 100644 --- a/src-docs/src/views/guidelines/index.scss +++ b/src-docs/src/views/guidelines/index.scss @@ -28,19 +28,20 @@ } .guideColorPalette__swatch { - span { height: $euiSize; width: $euiSizeL; } - &:first-child span { - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + &--small span { + width: auto; + height: $euiSizeS; } +} - &:last-child span { - border-radius: 0 $euiBorderRadius $euiBorderRadius 0; - } +.guideColorPalette__swatchHolder { + border-radius: $euiBorderRadius; + overflow: hidden; } // ------------------------------------- diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js index c5c25a5ec1e..49bd1108b2e 100644 --- a/src-docs/src/views/icon/icon_colors.js +++ b/src-docs/src/views/icon/icon_colors.js @@ -32,7 +32,7 @@ const iconColors = [ 'subdued', 'ghost', '#490', - '#F98510', + '#F19F58', '#DDDDDD', ]; diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index 8d1aee965ce..214862b8a35 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -16,8 +16,8 @@ import { const iconHtmlWarning = () => (

- HTML preview disabled. Icons use SVG and are not usable without React - unless you load the icons manually through a separate asset loader. + HTML preview disabled. Icons use SVG and are not usable without React unless + you load the icons manually through a separate asset loader.

); @@ -77,7 +77,7 @@ import IconColors from './icon_colors'; const iconColorsSource = require('!!raw-loader!./icon_colors'); const iconColorsSnippet = [ '', - '', + '', ]; import Accessibility from './accessibility'; diff --git a/src-docs/src/views/suggest/_global_filter_item.scss b/src-docs/src/views/suggest/_global_filter_item.scss index f726abf8181..bfda7254583 100644 --- a/src-docs/src/views/suggest/_global_filter_item.scss +++ b/src-docs/src/views/suggest/_global_filter_item.scss @@ -25,7 +25,7 @@ bottom: 0; left: 0; width: $euiSizeXS; - background-color: $euiColorVis0; + background-color: $euiColorSuccess; border-top-left-radius: $euiBorderRadius / 2; border-bottom-left-radius: $euiBorderRadius / 2; } diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js index b3c90b18753..981fc66c0f5 100644 --- a/src-docs/src/views/suggest/suggest_item.js +++ b/src-docs/src/views/suggest/suggest_item.js @@ -6,7 +6,7 @@ const shortDescription = 'This is the description'; const sampleItems = [ { - type: { iconType: 'kqlField', color: 'tint4' }, + type: { iconType: 'kqlField', color: 'tint5' }, label: 'Field sample', description: shortDescription, }, @@ -26,11 +26,11 @@ const sampleItems = [ description: shortDescription, }, { - type: { iconType: 'search', color: 'tint8' }, + type: { iconType: 'search', color: 'tint10' }, label: 'Recent search', }, { - type: { iconType: 'save', color: 'tint5' }, + type: { iconType: 'save', color: 'tint7' }, label: 'Saved query', }, ]; @@ -64,7 +64,7 @@ export default () => ( /> diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap index 0776c9d38a5..57b4f1fe9d5 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:#DB1374;color:#FFFFFF" + style="background-image:none;background-color:#D36086;color:#000000" title=" " > `; @@ -60,7 +60,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
@@ -615,10 +615,10 @@ exports[`renders inline EuiColorPicker 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >