Skip to content

Commit 8e67c21

Browse files
mgadewollmgadewoll
authored
[Theme] Support theme level overrides (#8558)
1 parent cb22e29 commit 8e67c21

29 files changed

+603
-378
lines changed

‎packages/eui-theme-borealis/changelogs/upcoming/8558.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
- Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides
2+
- Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides
3+

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { levels } from './variables/_levels';
1717
import { font } from './variables/_typography';
1818
import { focus } from './variables/_states';
1919
import { components } from './variables/_components';
20+
import { overrides } from './variables/_overrides';
2021

2122
export { colorVis } from './variables/colors/_colors_vis';
2223

@@ -37,6 +38,7 @@ export const euiThemeBorealis: EuiThemeShape = {
3738
hasGlobalFocusColor: true,
3839
hasVisColorAdjustment: false,
3940
},
41+
overrides,
4042
};
4143

4244
export const EuiThemeBorealis = buildTheme(

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

Lines changed: 154 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -6,121 +6,174 @@
66
* Side Public License, v 1.
77
*/
88

9-
import { _EuiThemeButton } from '@elastic/eui-theme-common';
9+
import { _EuiThemeButton, computed } from '@elastic/eui-theme-common';
1010
import { SEMANTIC_COLORS } from './colors/_semantic_colors';
11-
import {
12-
background_colors,
13-
brand_text_colors,
14-
text_colors,
15-
} from './colors/_colors_light';
16-
import {
17-
dark_background_colors,
18-
dark_brand_text_colors,
19-
dark_text_colors,
20-
} from './colors/_colors_dark';
2111

2212
const _buttons = {
23-
backgroundPrimary: background_colors.backgroundLightPrimary,
24-
backgroundAccent: background_colors.backgroundLightAccent,
25-
backgroundAccentSecondary: background_colors.backgroundLightAccentSecondary,
26-
backgroundSuccess: background_colors.backgroundLightSuccess,
27-
backgroundWarning: background_colors.backgroundLightWarning,
28-
backgroundDanger: background_colors.backgroundLightDanger,
29-
backgroundText: background_colors.backgroundLightText,
30-
backgroundDisabled: background_colors.backgroundBaseDisabled,
13+
backgroundPrimary: computed(
14+
([backgroundLightPrimary]) => backgroundLightPrimary,
15+
['colors.backgroundLightPrimary']
16+
),
17+
backgroundAccent: computed(
18+
([backgroundLightAccent]) => backgroundLightAccent,
19+
['colors.backgroundLightAccent']
20+
),
21+
backgroundAccentSecondary: computed(
22+
([backgroundLightAccentSecondary]) => backgroundLightAccentSecondary,
23+
['colors.backgroundLightAccentSecondary']
24+
),
25+
backgroundSuccess: computed(
26+
([backgroundLightSuccess]) => backgroundLightSuccess,
27+
['colors.backgroundLightSuccess']
28+
),
29+
backgroundWarning: computed(
30+
([backgroundLightWarning]) => backgroundLightWarning,
31+
['colors.backgroundLightWarning']
32+
),
33+
backgroundDanger: computed(
34+
([backgroundLightDanger]) => backgroundLightDanger,
35+
['colors.backgroundLightDanger']
36+
),
37+
backgroundText: computed(
38+
([backgroundLightText]) => backgroundLightText,
39+
['colors.backgroundLightText']
40+
),
41+
backgroundDisabled: computed(
42+
([backgroundBaseDisabled]) => backgroundBaseDisabled,
43+
['colors.backgroundBaseDisabled']
44+
),
3145

32-
backgroundFilledPrimary: background_colors.backgroundFilledPrimary,
33-
backgroundFilledAccent: background_colors.backgroundFilledAccent,
34-
backgroundFilledAccentSecondary:
35-
background_colors.backgroundFilledAccentSecondary,
36-
backgroundFilledSuccess: background_colors.backgroundFilledSuccess,
37-
backgroundFilledWarning: background_colors.backgroundFilledWarning,
38-
backgroundFilledDanger: background_colors.backgroundFilledDanger,
39-
backgroundFilledText: background_colors.backgroundFilledText,
40-
backgroundFilledDisabled: background_colors.backgroundBaseDisabled,
46+
backgroundFilledPrimary: computed(
47+
([backgroundFilledPrimary]) => backgroundFilledPrimary,
48+
['colors.backgroundFilledPrimary']
49+
),
50+
backgroundFilledAccent: computed(
51+
([backgroundFilledAccent]) => backgroundFilledAccent,
52+
['colors.backgroundFilledAccent']
53+
),
54+
backgroundFilledAccentSecondary: computed(
55+
([backgroundFilledAccentSecondary]) => backgroundFilledAccentSecondary,
56+
['colors.backgroundFilledAccentSecondary']
57+
),
58+
backgroundFilledSuccess: computed(
59+
([backgroundFilledSuccess]) => backgroundFilledSuccess,
60+
['colors.backgroundFilledSuccess']
61+
),
62+
backgroundFilledWarning: computed(
63+
([backgroundFilledWarning]) => backgroundFilledWarning,
64+
['colors.backgroundFilledWarning']
65+
),
66+
backgroundFilledDanger: computed(
67+
([backgroundFilledDanger]) => backgroundFilledDanger,
68+
['colors.backgroundFilledDanger']
69+
),
70+
backgroundFilledText: computed(
71+
([backgroundFilledText]) => backgroundFilledText,
72+
['colors.backgroundFilledText']
73+
),
74+
backgroundFilledDisabled: computed(
75+
([backgroundBaseDisabled]) => backgroundBaseDisabled,
76+
['colors.backgroundBaseDisabled']
77+
),
4178

4279
// Temp. mapping to support more variants in old theme
43-
backgroundEmptyPrimaryHover: background_colors.backgroundBaseInteractiveHover,
44-
backgroundEmptyAccentHover: background_colors.backgroundBaseInteractiveHover,
45-
backgroundEmptyAccentSecondaryHover:
46-
background_colors.backgroundBaseInteractiveHover,
47-
backgroundEmptySuccessHover: background_colors.backgroundBaseInteractiveHover,
48-
backgroundEmptyWarningHover: background_colors.backgroundBaseInteractiveHover,
49-
backgroundEmptyDangerHover: background_colors.backgroundBaseInteractiveHover,
50-
backgroundEmptyTextHover: background_colors.backgroundBaseInteractiveHover,
80+
backgroundEmptyPrimaryHover: computed(
81+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
82+
['colors.backgroundBaseInteractiveHover']
83+
),
84+
backgroundEmptyAccentHover: computed(
85+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
86+
['colors.backgroundBaseInteractiveHover']
87+
),
88+
backgroundEmptyAccentSecondaryHover: computed(
89+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
90+
['colors.backgroundBaseInteractiveHover']
91+
),
92+
backgroundEmptySuccessHover: computed(
93+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
94+
['colors.backgroundBaseInteractiveHover']
95+
),
96+
backgroundEmptyWarningHover: computed(
97+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
98+
['colors.backgroundBaseInteractiveHover']
99+
),
100+
backgroundEmptyDangerHover: computed(
101+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
102+
['colors.backgroundBaseInteractiveHover']
103+
),
104+
backgroundEmptyTextHover: computed(
105+
([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
106+
['colors.backgroundBaseInteractiveHover']
107+
),
51108

52-
textColorPrimary: brand_text_colors.textPrimary,
53-
textColorAccent: brand_text_colors.textAccent,
54-
textColorAccentSecondary: brand_text_colors.textAccentSecondary,
55-
textColorSuccess: brand_text_colors.textSuccess,
56-
textColorWarning: brand_text_colors.textWarning,
57-
textColorDanger: brand_text_colors.textDanger,
58-
textColorText: text_colors.textParagraph,
59-
textColorDisabled: text_colors.textDisabled,
109+
textColorPrimary: computed(
110+
([textPrimary]) => textPrimary,
111+
['colors.textPrimary']
112+
),
113+
textColorAccent: computed(
114+
([textAccent]) => textAccent,
115+
['colors.textAccent']
116+
),
117+
textColorAccentSecondary: computed(
118+
([textAccentSecondary]) => textAccentSecondary,
119+
['colors.textAccentSecondary']
120+
),
121+
textColorSuccess: computed(
122+
([textSuccess]) => textSuccess,
123+
['colors.textSuccess']
124+
),
125+
textColorWarning: computed(
126+
([textWarning]) => textWarning,
127+
['colors.textWarning']
128+
),
129+
textColorDanger: computed(
130+
([textDanger]) => textDanger,
131+
['colors.textDanger']
132+
),
133+
textColorText: computed(
134+
([textParagraph]) => textParagraph,
135+
['colors.textParagraph']
136+
),
137+
textColorDisabled: computed(
138+
([textDisabled]) => textDisabled,
139+
['colors.textDisabled']
140+
),
60141

61-
textColorFilledPrimary: text_colors.textInverse,
62-
textColorFilledAccent: text_colors.textInverse,
63-
textColorFilledAccentSecondary: text_colors.textInverse,
64-
textColorFilledSuccess: text_colors.textInverse,
142+
textColorFilledPrimary: computed(
143+
([textInverse]) => textInverse,
144+
['colors.textInverse']
145+
),
146+
textColorFilledAccent: computed(
147+
([textInverse]) => textInverse,
148+
['colors.textInverse']
149+
),
150+
textColorFilledAccentSecondary: computed(
151+
([textInverse]) => textInverse,
152+
['colors.textInverse']
153+
),
154+
textColorFilledSuccess: computed(
155+
([textInverse]) => textInverse,
156+
['colors.textInverse']
157+
),
65158
textColorFilledWarning: SEMANTIC_COLORS.warning110,
66-
textColorFilledDanger: text_colors.textInverse,
67-
textColorFilledText: text_colors.textInverse,
68-
textColorFilledDisabled: text_colors.textDisabled,
159+
textColorFilledDanger: computed(
160+
([textInverse]) => textInverse,
161+
['colors.textInverse']
162+
),
163+
textColorFilledText: computed(
164+
([textInverse]) => textInverse,
165+
['colors.textInverse']
166+
),
167+
textColorFilledDisabled: computed(
168+
([textDisabled]) => textDisabled,
169+
['colors.textDisabled']
170+
),
69171
};
70172

71173
const _dark_buttons = {
72-
backgroundPrimary: dark_background_colors.backgroundLightPrimary,
73-
backgroundAccent: dark_background_colors.backgroundLightAccent,
74-
backgroundAccentSecondary:
75-
dark_background_colors.backgroundLightAccentSecondary,
76-
backgroundSuccess: dark_background_colors.backgroundLightSuccess,
77-
backgroundWarning: dark_background_colors.backgroundLightWarning,
78-
backgroundDanger: dark_background_colors.backgroundLightDanger,
79-
backgroundText: dark_background_colors.backgroundLightText,
80-
backgroundDisabled: dark_background_colors.backgroundBaseDisabled,
174+
..._buttons,
81175

82-
backgroundFilledPrimary: dark_background_colors.backgroundFilledPrimary,
83-
backgroundFilledAccent: dark_background_colors.backgroundFilledAccent,
84-
backgroundFilledAccentSecondary:
85-
dark_background_colors.backgroundFilledAccentSecondary,
86-
backgroundFilledSuccess: dark_background_colors.backgroundFilledSuccess,
87-
backgroundFilledWarning: dark_background_colors.backgroundFilledWarning,
88-
backgroundFilledDanger: dark_background_colors.backgroundFilledDanger,
89-
backgroundFilledText: dark_background_colors.backgroundFilledText,
90-
backgroundFilledDisabled: dark_background_colors.backgroundBaseDisabled,
91-
92-
backgroundEmptyPrimaryHover:
93-
dark_background_colors.backgroundBaseInteractiveHover,
94-
backgroundEmptyAccentHover:
95-
dark_background_colors.backgroundBaseInteractiveHover,
96-
backgroundEmptyAccentSecondaryHover:
97-
dark_background_colors.backgroundBaseInteractiveHover,
98-
backgroundEmptySuccessHover:
99-
dark_background_colors.backgroundBaseInteractiveHover,
100-
backgroundEmptyWarningHover:
101-
dark_background_colors.backgroundBaseInteractiveHover,
102-
backgroundEmptyDangerHover:
103-
dark_background_colors.backgroundBaseInteractiveHover,
104-
backgroundEmptyTextHover:
105-
dark_background_colors.backgroundBaseInteractiveHover,
106-
107-
textColorPrimary: dark_brand_text_colors.textPrimary,
108-
textColorAccent: dark_brand_text_colors.textAccent,
109-
textColorAccentSecondary: dark_brand_text_colors.textAccentSecondary,
110-
textColorSuccess: dark_brand_text_colors.textSuccess,
111-
textColorWarning: dark_brand_text_colors.textWarning,
112-
textColorDanger: dark_brand_text_colors.textDanger,
113-
textColorText: dark_text_colors.textParagraph,
114-
textColorDisabled: dark_text_colors.textDisabled,
115-
116-
textColorFilledPrimary: dark_text_colors.textInverse,
117-
textColorFilledAccent: dark_text_colors.textInverse,
118-
textColorFilledAccentSecondary: dark_text_colors.textInverse,
119-
textColorFilledSuccess: dark_text_colors.textInverse,
120176
textColorFilledWarning: SEMANTIC_COLORS.warning110,
121-
textColorFilledDanger: dark_text_colors.textInverse,
122-
textColorFilledText: dark_text_colors.textInverse,
123-
textColorFilledDisabled: dark_text_colors.textDisabled,
124177
};
125178

126179
export const buttons: _EuiThemeButton = {

0 commit comments

Comments
 (0)