Skip to content

Commit f656df2

Browse files
mgadewollmgadewoll
committed
feat(colors): support HCM version for data vis colors
1 parent e616fdf commit f656df2

File tree

11 files changed

+309
-49
lines changed

11 files changed

+309
-49
lines changed

‎packages/eui-theme-borealis/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { focus } from './variables/_states';
1919
import { components } from './variables/_components';
2020
import { overrides } from './variables/_overrides';
2121

22-
export { colorVis } from './variables/colors/_colors_vis';
22+
export { visColorsLight as colorVis } from './variables/colors/_colors_vis_light';
2323

2424
export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
2525

‎packages/eui-theme-borealis/src/variables/_components.ts‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ import {
2121
import { buttons } from './_buttons';
2222
import { forms } from './_forms';
2323
import { border_colors } from './colors/_colors_light';
24-
import { colorVis } from './colors/_colors_vis';
24+
25+
import { visColorsLight } from './colors/_colors_vis_light';
26+
import { visColorsDark } from './colors/_colors_vis_dark';
2527

2628
const component_colors: _EuiThemeComponentColors = {
2729
badgeBackground: computed(
@@ -79,31 +81,31 @@ const component_colors: _EuiThemeComponentColors = {
7981
([textParagraph]) => textParagraph,
8082
['colors.textParagraph']
8183
),
82-
codeInlineColor: colorVis.euiColorVisAsTextLight6,
84+
codeInlineColor: visColorsLight.euiColorVisAsTextLight6,
8385
codeCommentColor: computed(
8486
([textSubdued]) => textSubdued,
8587
['colors.textSubdued']
8688
),
8789
codeSelectorColor: 'inherit',
88-
codeStringColor: colorVis.euiColorVisAsTextLight2,
89-
codeTagColor: colorVis.euiColorVisAsTextLight1,
90-
codeNameColor: colorVis.euiColorVisAsTextLight1,
91-
codeNumberColor: colorVis.euiColorVisAsTextLight0,
92-
codeInlineCodeKeywordColor: colorVis.euiColorVisAsTextLight6,
93-
codeKeywordColor: colorVis.euiColorVisAsTextLight1,
90+
codeStringColor: visColorsLight.euiColorVisAsTextLight2,
91+
codeTagColor: visColorsLight.euiColorVisAsTextLight1,
92+
codeNameColor: visColorsLight.euiColorVisAsTextLight1,
93+
codeNumberColor: visColorsLight.euiColorVisAsTextLight0,
94+
codeInlineCodeKeywordColor: visColorsLight.euiColorVisAsTextLight6,
95+
codeKeywordColor: visColorsLight.euiColorVisAsTextLight1,
9496
codeFunctionTitleColor: 'inherit',
95-
codeTypeColor: colorVis.euiColorVisAsTextLight1,
97+
codeTypeColor: visColorsLight.euiColorVisAsTextLight1,
9698
codeAttributeColor: 'inherit',
97-
codeSymbolColor: colorVis.euiColorVisAsTextLight3,
99+
codeSymbolColor: visColorsLight.euiColorVisAsTextLight3,
98100
codeParamsColor: 'inherit',
99101
codeMetaColor: computed(
100102
([textSubdued]) => textSubdued,
101103
['colors.textSubdued']
102104
),
103-
codeTitleColor: colorVis.euiColorVisAsTextLight4,
104-
codeSectionColor: colorVis.euiColorVisAsTextLight3,
105-
codeAdditionColor: colorVis.euiColorVisAsTextLight0,
106-
codeDeletionColor: colorVis.euiColorVisAsTextLight3,
105+
codeTitleColor: visColorsLight.euiColorVisAsTextLight4,
106+
codeSectionColor: visColorsLight.euiColorVisAsTextLight3,
107+
codeAdditionColor: visColorsLight.euiColorVisAsTextLight0,
108+
codeDeletionColor: visColorsLight.euiColorVisAsTextLight3,
107109
codeSelectorClassColor: 'inherit',
108110
codeSelectorIdColor: 'inherit',
109111

@@ -340,18 +342,18 @@ export const components: _EuiThemeComponents = {
340342
buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain,
341343
buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,
342344

343-
codeInlineColor: colorVis.euiColorVisAsTextDark6,
344-
codeStringColor: colorVis.euiColorVisAsTextDark2,
345-
codeTagColor: colorVis.euiColorVisAsTextDark1,
346-
codeNameColor: colorVis.euiColorVisAsTextDark1,
347-
codeNumberColor: colorVis.euiColorVisAsTextDark0,
348-
codeKeywordColor: colorVis.euiColorVisAsTextDark6,
349-
codeTypeColor: colorVis.euiColorVisAsTextDark1,
350-
codeSymbolColor: colorVis.euiColorVisAsTextDark3,
351-
codeTitleColor: colorVis.euiColorVisAsTextDark4,
352-
codeSectionColor: colorVis.euiColorVisAsTextDark3,
353-
codeAdditionColor: colorVis.euiColorVisAsTextDark0,
354-
codeDeletionColor: colorVis.euiColorVisAsTextDark3,
345+
codeInlineColor: visColorsDark.euiColorVisAsTextDark6,
346+
codeStringColor: visColorsDark.euiColorVisAsTextDark2,
347+
codeTagColor: visColorsDark.euiColorVisAsTextDark1,
348+
codeNameColor: visColorsDark.euiColorVisAsTextDark1,
349+
codeNumberColor: visColorsDark.euiColorVisAsTextDark0,
350+
codeKeywordColor: visColorsDark.euiColorVisAsTextDark6,
351+
codeTypeColor: visColorsDark.euiColorVisAsTextDark1,
352+
codeSymbolColor: visColorsDark.euiColorVisAsTextDark3,
353+
codeTitleColor: visColorsDark.euiColorVisAsTextDark4,
354+
codeSectionColor: visColorsDark.euiColorVisAsTextDark3,
355+
codeAdditionColor: visColorsDark.euiColorVisAsTextDark0,
356+
codeDeletionColor: visColorsDark.euiColorVisAsTextDark3,
355357

356358
filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade105,
357359

‎packages/eui-theme-borealis/src/variables/_overrides.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,18 @@
77
*/
88

99
import { _EuiThemeOverrides } from '@elastic/eui-theme-common';
10+
1011
import { PRIMITIVE_COLORS } from './colors/_primitive_colors';
12+
import { visColorsLightHighContrast } from './colors/_colors_vis_light_hcm';
1113

1214
export const overrides: _EuiThemeOverrides = {
1315
HCM: {
1416
colors: {
1517
ink: PRIMITIVE_COLORS.black,
1618
ghost: PRIMITIVE_COLORS.white,
19+
LIGHT: {
20+
vis: visColorsLightHighContrast,
21+
},
1722
},
1823
},
1924
};

‎packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts‎ renamed to ‎packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const euiPaletteColorBlind = {
4747
},
4848
};
4949

50-
export const colorVis: _EuiThemeVisColors = {
50+
export const visColorsDark: _EuiThemeVisColors = {
5151
euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
5252
euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
5353
euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,

‎packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
10+
11+
import { SEMANTIC_COLORS } from './_semantic_colors';
12+
import { PRIMITIVE_COLORS } from './_primitive_colors';
13+
14+
// Maps allow for easier JSON usage
15+
// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file
16+
// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
17+
const euiPaletteColorBlind = {
18+
euiColorVis0: {
19+
graphic: SEMANTIC_COLORS.accentSecondary60,
20+
},
21+
euiColorVis1: {
22+
graphic: SEMANTIC_COLORS.accentSecondary30,
23+
},
24+
euiColorVis2: {
25+
graphic: SEMANTIC_COLORS.primary60,
26+
},
27+
euiColorVis3: {
28+
graphic: SEMANTIC_COLORS.primary30,
29+
},
30+
euiColorVis4: {
31+
graphic: SEMANTIC_COLORS.accent60,
32+
},
33+
euiColorVis5: {
34+
graphic: SEMANTIC_COLORS.accent30,
35+
},
36+
euiColorVis6: {
37+
graphic: SEMANTIC_COLORS.danger60,
38+
},
39+
euiColorVis7: {
40+
graphic: SEMANTIC_COLORS.danger30,
41+
},
42+
euiColorVis8: {
43+
graphic: SEMANTIC_COLORS.warning60,
44+
},
45+
euiColorVis9: {
46+
graphic: SEMANTIC_COLORS.warning30,
47+
},
48+
};
49+
50+
export const visColorsLight: _EuiThemeVisColors = {
51+
euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
52+
euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
53+
euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
54+
euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic,
55+
euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic,
56+
euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic,
57+
euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic,
58+
euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic,
59+
euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
60+
euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic,
61+
62+
euiColorVisBehindText0: euiPaletteColorBlind.euiColorVis0.graphic,
63+
euiColorVisBehindText1: euiPaletteColorBlind.euiColorVis1.graphic,
64+
euiColorVisBehindText2: euiPaletteColorBlind.euiColorVis2.graphic,
65+
euiColorVisBehindText3: euiPaletteColorBlind.euiColorVis3.graphic,
66+
euiColorVisBehindText4: euiPaletteColorBlind.euiColorVis4.graphic,
67+
euiColorVisBehindText5: euiPaletteColorBlind.euiColorVis5.graphic,
68+
euiColorVisBehindText6: euiPaletteColorBlind.euiColorVis6.graphic,
69+
euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.graphic,
70+
euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic,
71+
euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic,
72+
73+
euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
74+
euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100,
75+
euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100,
76+
euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100,
77+
euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100,
78+
euiColorVisAsTextLight5: SEMANTIC_COLORS.success100,
79+
euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100,
80+
81+
euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60,
82+
euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60,
83+
euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60,
84+
euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60,
85+
euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60,
86+
euiColorVisAsTextDark5: SEMANTIC_COLORS.success60,
87+
euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60,
88+
89+
euiColorVisSuccess0: SEMANTIC_COLORS.success60,
90+
euiColorVisSuccess1: SEMANTIC_COLORS.success30,
91+
euiColorVisWarning0: SEMANTIC_COLORS.warning30,
92+
euiColorVisDanger0: SEMANTIC_COLORS.danger60,
93+
euiColorVisDanger1: SEMANTIC_COLORS.danger30,
94+
95+
euiColorVisNeutral0: PRIMITIVE_COLORS.mutedGrey10,
96+
97+
euiColorSeverity0: PRIMITIVE_COLORS.mutedGrey20,
98+
euiColorSeverity1: SEMANTIC_COLORS.shade90,
99+
euiColorSeverity2: SEMANTIC_COLORS.shade75,
100+
euiColorSeverity3: SEMANTIC_COLORS.shade60,
101+
euiColorSeverity4: SEMANTIC_COLORS.shade45,
102+
euiColorSeverity5: SEMANTIC_COLORS.shade30,
103+
euiColorSeverity6: SEMANTIC_COLORS.warning20,
104+
euiColorSeverity7: SEMANTIC_COLORS.warning30,
105+
euiColorSeverity8: SEMANTIC_COLORS.danger30,
106+
euiColorSeverity9: SEMANTIC_COLORS.danger40,
107+
euiColorSeverity10: SEMANTIC_COLORS.danger50,
108+
euiColorSeverity11: SEMANTIC_COLORS.danger60,
109+
euiColorSeverity12: SEMANTIC_COLORS.danger70,
110+
euiColorSeverity13: SEMANTIC_COLORS.danger80,
111+
euiColorSeverity14: SEMANTIC_COLORS.danger90,
112+
113+
euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30,
114+
euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60,
115+
euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90,
116+
euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130,
117+
118+
euiColorVisWarm0: SEMANTIC_COLORS.danger10,
119+
euiColorVisWarm1: SEMANTIC_COLORS.danger40,
120+
euiColorVisWarm2: SEMANTIC_COLORS.danger60,
121+
122+
euiColorVisCool0: SEMANTIC_COLORS.primary10,
123+
euiColorVisCool1: SEMANTIC_COLORS.primary40,
124+
euiColorVisCool2: SEMANTIC_COLORS.primary60,
125+
126+
euiColorVisComplementary0: SEMANTIC_COLORS.primary60,
127+
euiColorVisComplementary1: SEMANTIC_COLORS.warning60,
128+
};

‎packages/eui-theme-borealis/src/variables/colors/_colors_vis_light_hcm.ts‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
10+
11+
import { SEMANTIC_COLORS } from './_semantic_colors';
12+
import { PRIMITIVE_COLORS } from './_primitive_colors';
13+
14+
const baseColorVis = {
15+
euiColorVis0: SEMANTIC_COLORS.accentSecondary80,
16+
euiColorVis1: SEMANTIC_COLORS.accentSecondary110,
17+
euiColorVis2: SEMANTIC_COLORS.primary80,
18+
euiColorVis3: SEMANTIC_COLORS.primary110,
19+
euiColorVis4: SEMANTIC_COLORS.accent80,
20+
euiColorVis5: SEMANTIC_COLORS.accent110,
21+
euiColorVis6: SEMANTIC_COLORS.danger80,
22+
euiColorVis7: SEMANTIC_COLORS.danger110,
23+
euiColorVis8: SEMANTIC_COLORS.warning80,
24+
euiColorVis9: SEMANTIC_COLORS.warning110,
25+
};
26+
27+
export const visColorsLightHighContrast: _EuiThemeVisColors = {
28+
euiColorVis0: SEMANTIC_COLORS.accentSecondary80,
29+
euiColorVis1: SEMANTIC_COLORS.accentSecondary110,
30+
euiColorVis2: SEMANTIC_COLORS.primary80,
31+
euiColorVis3: SEMANTIC_COLORS.primary110,
32+
euiColorVis4: SEMANTIC_COLORS.accent80,
33+
euiColorVis5: SEMANTIC_COLORS.accent110,
34+
euiColorVis6: SEMANTIC_COLORS.danger80,
35+
euiColorVis7: SEMANTIC_COLORS.danger110,
36+
euiColorVis8: SEMANTIC_COLORS.warning80,
37+
euiColorVis9: SEMANTIC_COLORS.warning110,
38+
39+
euiColorVisBehindText0: baseColorVis.euiColorVis0,
40+
euiColorVisBehindText1: baseColorVis.euiColorVis1,
41+
euiColorVisBehindText2: baseColorVis.euiColorVis2,
42+
euiColorVisBehindText3: baseColorVis.euiColorVis3,
43+
euiColorVisBehindText4: baseColorVis.euiColorVis4,
44+
euiColorVisBehindText5: baseColorVis.euiColorVis5,
45+
euiColorVisBehindText6: baseColorVis.euiColorVis6,
46+
euiColorVisBehindText7: baseColorVis.euiColorVis7,
47+
euiColorVisBehindText8: baseColorVis.euiColorVis8,
48+
euiColorVisBehindText9: baseColorVis.euiColorVis9,
49+
50+
euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100,
51+
euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100,
52+
euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100,
53+
euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100,
54+
euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100,
55+
euiColorVisAsTextLight5: SEMANTIC_COLORS.success100,
56+
euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100,
57+
58+
euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60,
59+
euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60,
60+
euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60,
61+
euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60,
62+
euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60,
63+
euiColorVisAsTextDark5: SEMANTIC_COLORS.success60,
64+
euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60,
65+
66+
euiColorVisSuccess0: SEMANTIC_COLORS.success100,
67+
euiColorVisSuccess1: SEMANTIC_COLORS.success80,
68+
euiColorVisWarning0: SEMANTIC_COLORS.warning80,
69+
euiColorVisDanger0: SEMANTIC_COLORS.danger80,
70+
euiColorVisDanger1: SEMANTIC_COLORS.danger100,
71+
72+
euiColorVisNeutral0: PRIMITIVE_COLORS.mutedGrey70,
73+
74+
euiColorSeverity0: PRIMITIVE_COLORS.mutedGrey20,
75+
euiColorSeverity1: SEMANTIC_COLORS.shade90,
76+
euiColorSeverity2: SEMANTIC_COLORS.shade75,
77+
euiColorSeverity3: SEMANTIC_COLORS.shade60,
78+
euiColorSeverity4: SEMANTIC_COLORS.shade45,
79+
euiColorSeverity5: SEMANTIC_COLORS.shade30,
80+
euiColorSeverity6: SEMANTIC_COLORS.warning20,
81+
euiColorSeverity7: SEMANTIC_COLORS.warning30,
82+
euiColorSeverity8: SEMANTIC_COLORS.danger30,
83+
euiColorSeverity9: SEMANTIC_COLORS.danger40,
84+
euiColorSeverity10: SEMANTIC_COLORS.danger50,
85+
euiColorSeverity11: SEMANTIC_COLORS.danger60,
86+
euiColorSeverity12: SEMANTIC_COLORS.danger70,
87+
euiColorSeverity13: SEMANTIC_COLORS.danger80,
88+
euiColorSeverity14: SEMANTIC_COLORS.danger90,
89+
90+
euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30,
91+
euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60,
92+
euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90,
93+
euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130,
94+
95+
euiColorVisWarm0: SEMANTIC_COLORS.danger10,
96+
euiColorVisWarm1: SEMANTIC_COLORS.danger50,
97+
euiColorVisWarm2: SEMANTIC_COLORS.danger100,
98+
99+
euiColorVisCool0: SEMANTIC_COLORS.primary10,
100+
euiColorVisCool1: SEMANTIC_COLORS.primary50,
101+
euiColorVisCool2: SEMANTIC_COLORS.primary100,
102+
103+
euiColorVisComplementary0: SEMANTIC_COLORS.primary80,
104+
euiColorVisComplementary1: SEMANTIC_COLORS.warning80,
105+
};

‎packages/eui-theme-borealis/src/variables/colors/index.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,20 @@ import type { _EuiThemeColors } from '@elastic/eui-theme-common';
1111
import { SEMANTIC_COLORS } from './_semantic_colors';
1212
import { light_colors } from './_colors_light';
1313
import { dark_colors } from './_colors_dark';
14-
import { colorVis } from './_colors_vis';
14+
import { visColorsLight } from './_colors_vis_light';
15+
import { visColorsDark } from './_colors_vis_dark';
1516

1617
export const colors: _EuiThemeColors = {
1718
ghost: SEMANTIC_COLORS.plainLight,
1819
ink: SEMANTIC_COLORS.plainDark,
1920
plainLight: SEMANTIC_COLORS.plainLight,
2021
plainDark: SEMANTIC_COLORS.plainDark,
21-
LIGHT: light_colors,
22-
DARK: dark_colors,
23-
vis: colorVis,
22+
LIGHT: {
23+
...light_colors,
24+
vis: visColorsLight,
25+
},
26+
DARK: {
27+
...dark_colors,
28+
vis: visColorsDark,
29+
},
2430
};

0 commit comments

Comments
 (0)