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 be3e661dc55..8136f1708bd 100644 --- a/src-docs/src/views/color_palette/color_palette_custom.js +++ b/src-docs/src/views/color_palette/color_palette_custom.js @@ -9,27 +9,37 @@ import { import { colorPalette, + palettes, } from '../../../../src/services'; +const euiColors = palettes.euiPaletteForLightBackground.colors; + export default () => ( -

Status: yellow to green

+

For mapping density, low to high

- - { - colorPalette('FFFF6D', '1EA593', 20).map((hexCode, k) => ( - - - - )) - } - + { + euiColors.map((color, j) => ( +
+ + { + colorPalette('FFFFFF', color, 20).map((hexCode, k) => ( + + + + )) + } + + +
+ )) + } -

Status: yellow to red

+

For communicating state, trending negaitve

{ - colorPalette('#FFFF6D', '#A30000', 15).map((hexCode, l) => ( + colorPalette('#FBEFD3', '#BD4C48').map((hexCode, l) => ( @@ -37,11 +47,11 @@ export default () => ( } -

Status: green to pink

+

For communicating state, trending positive

{ - colorPalette('#1EA593', '#DD0A73').map((hexCode, l) => ( + colorPalette('#FFFFE0', '#017F75').map((hexCode, l) => ( diff --git a/src-docs/src/views/color_palette/color_palette_histogram.js b/src-docs/src/views/color_palette/color_palette_histogram.js index 4549822e0d8..a95ca495636 100644 --- a/src-docs/src/views/color_palette/color_palette_histogram.js +++ b/src-docs/src/views/color_palette/color_palette_histogram.js @@ -22,7 +22,7 @@ const margins = { right: 0, bottom: 20, }; -const qualColors = palettes.color_blind.colors; +const qualColors = palettes.euiPaletteColorBlind.colors; const quantColors = colorPalette('#FFFF6D', '#1EA593', 6); function randomizeData(size = 24, max = 8) { diff --git a/src/services/color/color_palette.js b/src/services/color/color_palette.js index da14d456b57..82cd10a626e 100644 --- a/src/services/color/color_palette.js +++ b/src/services/color/color_palette.js @@ -15,8 +15,6 @@ class Color { * This function takes a color palette name and returns an array of hex color * codes for use in UI elements such as charts. * - * @param {string} paletteName Required. The name of the palette being requested - * Set paletteName to "custom" and provide two hex color codes for a custom palette * @param {string} hexStart The beginning hexidecimal color code * @param {string} hexEnd The ending hexidecimal color code * @param {number} len The number of colors in the resulting array (default 10) @@ -32,10 +30,9 @@ function colorPalette(hexStart, hexEnd, len = 10) { const count = len - 1; const startHex = colorParse(hex1); // get RGB equivalent values as array const endHex = colorParse(hex2); // get RGB equivalent values as array - let step = new Array(3); // to collect each step increment piece (r,g,b) colorArray[0] = new Color(startHex[0], startHex[1], startHex[2]); // create first color obj colorArray[count] = new Color(endHex[0], endHex[1], endHex[2]); // create last color obj - step = stepCalc(count, colorArray[0], colorArray[count]); // create array of step increments + const step = stepCalc(count, colorArray[0], colorArray[count]); // create array of step increments // build the color palette array hexPalette[0] = colorArray[0].text; // set the first color in the array for (let i = 1; i < count; i++) { @@ -68,10 +65,9 @@ function createHex(rgbValues) { let result = ''; let val = 0; let piece; - const d = 1; const base = 16; for (let k = 0; k < 3; k++) { - val = Math.round(rgbValues[k] / d); + val = Math.round(rgbValues[k]); piece = val.toString(base); // Converts to radix 16 based value (0-9, A-F) if (piece.length < 2) {piece = `0${piece}`;} result = result + piece; @@ -84,21 +80,17 @@ function createHex(rgbValues) { * Convert hexideciaml color into an array of RGB integer values */ function colorParse(color) { - const m = 1; const base = 16; - let a; - let b; - let c = color.toUpperCase(); - let col = c.replace('#', ''); + let col = color.toUpperCase().replace('#', ''); if (col.length === 3) { - a = col.substr(0, 1); - b = col.substr(1, 1); - c = col.substr(2, 1); + const a = col.substr(0, 1); + const b = col.substr(1, 1); + const c = col.substr(2, 1); col = a + a + b + b + c + c; } const num = [col.substr(0, 2), col.substr(2, 2), col.substr(4, 2)]; - const ret = [parseInt(num[0], base) * m, parseInt(num[1], base) * m, parseInt(num[2], base) * m]; + const ret = [parseInt(num[0], base), parseInt(num[1], base), parseInt(num[2], base)]; return(ret); } @@ -122,10 +114,11 @@ function formatHex(hex) { */ function stepCalc(st, cStart, cEnd) { const steps = st; - const step = new Array(3); - step[0] = (cEnd.r - cStart.r) / steps; // Calc step amount for red value - step[1] = (cEnd.g - cStart.g) / steps; // Calc step amount for green value - step[2] = (cEnd.b - cStart.b) / steps; // Calc step amount for blue value + const step = [ + (cEnd.r - cStart.r) / steps, // Calc step amount for red value + (cEnd.g - cStart.g) / steps, // Calc step amount for green value + (cEnd.b - cStart.b) / steps, // Calc step amount for blue value + ]; return step; } diff --git a/src/services/color/eui_palettes.js b/src/services/color/eui_palettes.js index 8833673624b..732a3091c4c 100644 --- a/src/services/color/eui_palettes.js +++ b/src/services/color/eui_palettes.js @@ -1,5 +1,5 @@ export const palettes = { - color_blind: { + euiPaletteColorBlind: { colors: [ '#1EA593', '#2B70F7', @@ -13,26 +13,7 @@ export const palettes = { '#34130C', ], }, - color_blind_15: { - colors: [ - '#000000', - '#004949', - '#009292', - '#FF6DB6', - '#FFB6DB', - '#490092', - '#006DDB', - '#B66DFF', - '#6DB6FF', - '#B6DBFF', - '#920000', - '#924900', - '#DB6D00', - '#24FF24', - '#FFFF6D', - ] - }, - eui_light: { + euiPaletteForLightBackground: { colors: [ '#0079A5', '#017F75', @@ -41,7 +22,7 @@ export const palettes = { '#DD0A73', ] }, - eui_dark: { + euiPaletteForDarkBackground: { colors: [ '#4DA1C0', '#01B2A4', @@ -50,4 +31,18 @@ export const palettes = { '#F5258C', ] }, + euiPaletteForStatus: { + colors: [ + '#58BA6D', + '#6ECE67', + '#A5E26A', + '#D2E26A', + '#EBDF61', + '#EBD361', + '#EBC461', + '#D99D4C', + '#D97E4C', + '#D75949', + ] + }, };