From 875c86d1c5a802508b7223e898baa091d6b814f3 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 3 Feb 2021 11:48:34 -0600 Subject: [PATCH] theme: colorVis and borders, sizes update --- src-docs/src/views/emotion/canopy.tsx | 9 +- src/services/theme/theme.ts | 141 ++++++++++++++++++++++++-- src/services/theme/types.ts | 5 + 3 files changed, 144 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/emotion/canopy.tsx b/src-docs/src/views/emotion/canopy.tsx index a25b37817ae..bd051841e70 100644 --- a/src-docs/src/views/emotion/canopy.tsx +++ b/src-docs/src/views/emotion/canopy.tsx @@ -18,7 +18,7 @@ */ import * as React from 'react'; -// import { css } from '@emotion/react'; +import { css } from '@emotion/react'; import chroma from 'chroma-js'; import { EuiSpacer } from '../../../../src/components/spacer'; import { EuiIcon } from '../../../../src/components/icon'; @@ -118,13 +118,18 @@ const View2 = () => { class Block extends React.Component { render() { const { theme, ...props } = this.props; + const blockStyle = css` + color: ${theme.theme.colors.euiColorPrimary}; + border-radius: ${theme.theme.borders.euiBorderRadiusSmall}; + border: ${theme.theme.borders.euiBorderEditable}; + `; return (
); diff --git a/src/services/theme/theme.ts b/src/services/theme/theme.ts index cb5b77fb966..5700f5366b3 100644 --- a/src/services/theme/theme.ts +++ b/src/services/theme/theme.ts @@ -204,21 +204,142 @@ export const dark = { ), }; +// Visualization colors + +// 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 +const 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', + }, +}; + +const colorVis = { + euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, + euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, + euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, + euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, + euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, + euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, + euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, + euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, + euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, + euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, + + euiColorVis0_behindText: euiPaletteColorBlind.euiColorVis0.behindText, + euiColorVis1_behindText: euiPaletteColorBlind.euiColorVis1.behindText, + euiColorVis2_behindText: euiPaletteColorBlind.euiColorVis2.behindText, + euiColorVis3_behindText: euiPaletteColorBlind.euiColorVis3.behindText, + euiColorVis4_behindText: euiPaletteColorBlind.euiColorVis4.behindText, + euiColorVis5_behindText: euiPaletteColorBlind.euiColorVis5.behindText, + euiColorVis6_behindText: euiPaletteColorBlind.euiColorVis6.behindText, + euiColorVis7_behindText: euiPaletteColorBlind.euiColorVis7.behindText, + euiColorVis8_behindText: euiPaletteColorBlind.euiColorVis8.behindText, + euiColorVis9_behindText: euiPaletteColorBlind.euiColorVis9.behindText, +}; + +// TODO: `calc()` probably not the right solution const sizes = { - euiSize: 16, - euiSizeXS: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.25), - euiSizeS: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.5), - euiSizeM: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.75), - euiSizeL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 1.5), - euiSizeXL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 2), - euiSizeXXL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 2.5), + euiSize: '16px', + euiSizeXS: computed( + ['sizes.euiSize'], + ([euiSize]) => `calc(${euiSize} * 0.25)` + ), + euiSizeS: computed( + ['sizes.euiSize'], + ([euiSize]) => `calc(${euiSize} * 0.5)` + ), + euiSizeM: computed( + ['sizes.euiSize'], + ([euiSize]) => `calc(${euiSize} * 0.75)` + ), + euiSizeL: computed( + ['sizes.euiSize'], + ([euiSize]) => `calc(${euiSize} * 1.5)` + ), + euiSizeXL: computed(['sizes.euiSize'], ([euiSize]) => `calc(${euiSize} * 2)`), + euiSizeXXL: computed( + ['sizes.euiSize'], + ([euiSize]) => `calc(${euiSize} * 2.5)` + ), - euiButtonMinWidth: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 7), + euiButtonMinWidth: computed( + ['sizes.euiSize'], + ([euiSize]) => `calc(${euiSize} * 7)` + ), euiScrollBar: computed(['sizes.euiSize'], ([euiSize]) => euiSize), euiScrollBarCorner: computed( ['sizes.euiSizeS'], - ([euiSizeS]) => euiSizeS * 0.75 + ([euiSizeS]) => `calc(${euiSizeS} * 0.75)` + ), +}; + +const borders = { + euiBorderWidthThin: '1px', + euiBorderWidthThick: '2px', + + euiBorderColor: computed( + ['colors.euiColorLightShade'], + ([euiColorLightShade]) => euiColorLightShade + ), + euiBorderRadius: '4px', + euiBorderRadiusSmall: computed( + ['borders.euiBorderRadius'], + ([euiBorderRadius]) => `calc(${euiBorderRadius} / 2)` + ), + euiBorderThick: computed( + ['borders.euiBorderWidthThick', 'borders.euiBorderColor'], + ([euiBorderWidthThick, euiBorderColor]) => + `${euiBorderWidthThick} solid ${euiBorderColor}` + ), + euiBorderThin: computed( + ['borders.euiBorderWidthThin', 'borders.euiBorderColor'], + ([euiBorderWidthThin, euiBorderColor]) => + `${euiBorderWidthThin} solid ${euiBorderColor}` + ), + euiBorderEditable: computed( + ['borders.euiBorderWidthThick', 'borders.euiBorderColor'], + ([euiBorderWidthThick, euiBorderColor]) => + `${euiBorderWidthThick} dotted ${euiBorderColor}` ), }; @@ -227,7 +348,9 @@ export const unbuiltDefaultEuiTheme = { light, dark, }, + colorVis, sizes, + borders, buttons: { [COLOR_MODE_KEY]: { light: { diff --git a/src/services/theme/types.ts b/src/services/theme/types.ts index 91e39c4e47e..b7039ce5eea 100644 --- a/src/services/theme/types.ts +++ b/src/services/theme/types.ts @@ -105,4 +105,9 @@ export type EuiThemeColorMode = // The actual shape of a theme is still in flux export interface EuiTheme { [key: string]: any; + // colors: { [key: string]: any }; + // colorVis: { [key: string]: any }; + // sizes: { [key: string]: any }; + // borders: { [key: string]: any }; + // buttons: { [key: string]: any }; }