-
Notifications
You must be signed in to change notification settings - Fork 843
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated color blind viz palette (#2686)
* Updated viz color palette * Use the color palette service for visualization_colors service * Updated EuiSuggestItem’s tints to just match the whole viz palette sequence * Revert some token colors to old viz hashes * Changed color_palette code to use chroma palette functions * Ammend* * Clean up color_palette function * [Breaking] `color_palette` now accepts one parameter that is an array of colors * [Breaking] EUI palettes are now functions i.e: `palettes.euiPaletteColorBlind` -> `palettes.euiPaletteColorBlind()` * Added documentation for custom * Adding `rotation` and `combined` props to color blind palette * Updating charts docs examples * Fix `color_palette.categorical` default * Finalized palettes * Finalized palettes * Added palette switcher to chart example * Palette again using similar hues as before * Fixed suggest doc example to match previous * Fix roundedness of palette display * typo * Fix addition of tint10 in new TS file for EuiSuggestItem * Remove not working props and fix comment * Update src/services/color/color_palette.ts Co-Authored-By: Greg Thompson <thompsongl@users.noreply.github.com> * [Breaking] Remove the `.colors` key from palettes Now just returns the array of colors * Change last prop of palettes.euiPaletteColorBlind to enum of * Remove `palettes` and just export each named palette * SLight adjust to status and temp ramp Co-authored-by: Greg Thompson <thompsongl@users.noreply.github.com>
- Loading branch information
1 parent
b7cca07
commit a2fbf75
Showing
48 changed files
with
910 additions
and
580 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 57 additions & 58 deletions
115
src-docs/src/views/color_palette/color_palette_custom.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 () => ( | ||
| <Fragment> | ||
| <EuiTitle size="xxs"> | ||
| <h3>For mapping density, low to high</h3> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| {euiColors.map((color, j) => ( | ||
| <div key={j}> | ||
| <EuiFlexGroup | ||
| gutterSize="none" | ||
| alignItems="flexStart" | ||
| key={`${color}-${j}`}> | ||
| {colorPalette('FFFFFF', color, 20).map((hexCode, k) => ( | ||
| <EuiFlexItem | ||
| key={`${hexCode}-${k}`} | ||
| grow={false} | ||
| className={'guideColorPalette__swatch'}> | ||
| <span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
| </EuiFlexItem> | ||
| ))} | ||
| export default () => { | ||
| const [length, setLength] = useState(10); | ||
|
|
||
| const onLengthChange = e => { | ||
| setLength(e.currentTarget.value); | ||
| }; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <EuiFormRow label="Number of steps" display="columnCompressed"> | ||
| <EuiRange | ||
| value={length} | ||
| onChange={onLengthChange} | ||
| min={2} | ||
| max={20} | ||
| compressed | ||
| showValue | ||
| /> | ||
| </EuiFormRow> | ||
|
|
||
| <EuiSpacer /> | ||
|
|
||
| {customPalettes.map((palette, i) => ( | ||
| <EuiFlexGroup alignItems="center" key={i}> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiFlexGroup | ||
| className="guideColorPalette__swatchHolder" | ||
| gutterSize="none" | ||
| responsive={false}> | ||
| {colorPalette(palette, Number(length), i > 1).map(hexCode => ( | ||
| <ColorPaletteFlexItem hexCode={hexCode} key={hexCode} /> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <ColorPaletteCopyCode | ||
| textToCopy={`colorPalette([], ${length}${ | ||
| i > 1 ? ', true' : '' | ||
| });`} | ||
| code={`colorPalette([${palette}], ${length}${ | ||
| i > 1 ? ', true' : '' | ||
| });`} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| <EuiSpacer size="m" /> | ||
| </div> | ||
| ))} | ||
| <EuiSpacer size="l" /> | ||
| <EuiTitle size="xxs"> | ||
| <h3>For communicating state, trending negative</h3> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| <EuiFlexGroup gutterSize="none" alignItems="flexStart"> | ||
| {colorPalette('#FBEFD3', '#BD4C48').map((hexCode, l) => ( | ||
| <EuiFlexItem | ||
| key={`${hexCode}-${l}`} | ||
| grow={false} | ||
| className={'guideColorPalette__swatch'}> | ||
| <span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
| </EuiFlexItem> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| <EuiSpacer size="l" /> | ||
| <EuiTitle size="xxs"> | ||
| <h3>For communicating state, trending positive</h3> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| <EuiFlexGroup gutterSize="none" alignItems="flexStart"> | ||
| {colorPalette('#FFFFE0', '#017F75').map((hexCode, l) => ( | ||
| <EuiFlexItem | ||
| key={`${hexCode}-${l}`} | ||
| grow={false} | ||
| className={'guideColorPalette__swatch'}> | ||
| <span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
| </EuiFlexItem> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| </Fragment> | ||
| ); | ||
| </Fragment> | ||
| ); | ||
| }; |
Oops, something went wrong.