Skip to content

Commit aec9a41

Browse files
mgadewollmgadewoll
committed
[Visual Refresh] Setup semantic color tokens (elastic#8097)
1 parent e0fdc9d commit aec9a41

File tree

150 files changed

+4718
-1179
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

150 files changed

+4718
-1179
lines changed

‎packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,24 @@ const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => {
3636
&:last-child {
3737
// border radius should be 1px smaller to work nicely
3838
// with the wrapper border width of 1px
39-
border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) calc(var(--docs-demo-border-radius) - 1px);
39+
border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px)
40+
calc(var(--docs-demo-border-radius) - 1px);
4041
}
4142
`,
4243
button: css`
43-
background: var(--eui-background-color-primary-opaque);
44+
background: var(--eui-background-color-primary);
4445
border: 1px solid var(--eui-border-color-primary);
4546
margin-right: auto;
4647
`,
4748
};
48-
}
49+
};
4950

5051
export const DemoActionsBar = ({
5152
isSourceOpen,
5253
setSourceOpen,
5354
onClickOpenInCodeSandbox,
5455
onClickReloadExample,
55-
onClickCopyToClipboard
56+
onClickCopyToClipboard,
5657
}: DemoActionsBarProps) => {
5758
const styles = useEuiMemoizedStyles(getDemoActionsBarStyles);
5859

‎packages/docusaurus-theme/src/theme/EditThisPage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { Props } from '@theme-original/EditThisPage';
55
import { EuiButton, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
66
// @ts-ignore - eui only has module declarations for '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
77
// but importing from /src results in "Module not found" error
8-
import { euiButtonColor } from '@elastic/eui/lib/themes/amsterdam/global_styling/mixins/button';
8+
import { euiButtonColor } from '@elastic/eui/lib/global_styling/mixins/_button';
99

1010
const getStyles = (theme: UseEuiTheme) => {
1111
const { euiTheme } = theme;

‎packages/docusaurus-theme/src/theme/Root.styles.ts

Lines changed: 67 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@
77
*/
88

99
import {
10-
euiBorderColor,
1110
euiFontSizeFromScale,
1211
euiLineHeightFromBaseline,
13-
useEuiBackgroundColor,
14-
useEuiFocusRing,
1512
UseEuiTheme,
1613
} from '@elastic/eui';
1714
import { css } from '@emotion/react';
@@ -48,76 +45,72 @@ export const getGlobalStyles = (theme: UseEuiTheme) => {
4845
const lineHeightXXS = euiLineHeightFromBaseline('xxs', euiTheme);
4946

5047
return css`
51-
// color theme related variables
52-
:root,
53-
[data-theme='dark']:root {
54-
/* EUI theme variables */
55-
--eui-background-color-primary: ${useEuiBackgroundColor('primary')};
56-
--eui-background-color-primary-opaque: ${useEuiBackgroundColor(
57-
'primary',
58-
{ method: 'opaque' }
59-
)};
60-
--eui-background-color-success: ${useEuiBackgroundColor('success')};
61-
--eui-background-color-danger: ${useEuiBackgroundColor('danger')};
62-
--eui-background-color-warning: ${useEuiBackgroundColor('warning')};
63-
--eui-background-color-accent: ${useEuiBackgroundColor('accent')};
64-
65-
--eui-color-danger-text: ${euiTheme.colors.dangerText};
66-
67-
/* Docusaurus theme variables */
68-
--ifm-background-color: ${colors.body};
69-
--ifm-font-color-base: ${colors.text};
70-
--ifm-link-color: ${colors.link};
71-
--ifm-link-hover-color: ${colors.link};
72-
73-
--ifm-menu-color: ${euiTheme.colors.text};
74-
--ifm-menu-color-background-active: ${euiTheme.colors.lightestShade};
75-
--ifm-menu-color-background-hover: var(--eui-background-color-primary);
76-
77-
--ifm-pre-background: ${euiTheme.colors.lightestShade};
78-
}
79-
80-
:root {
81-
/* EUI theme variables */
82-
--eui-font-size-base: ${fontBase.fontSize};
83-
--eui-font-size-xxl: ${fontSizeXXL};
84-
--eui-font-size-xl: ${fontSizeXL};
85-
--eui-font-size-l: ${fontSizeL};
86-
--eui-font-size-m: ${fontSizeM};
87-
--eui-font-size-s: ${fontSizeS};
88-
--eui-font-size-xs: ${fontSizeXS};
89-
--eui-font-size-xxs: ${fontSizeXXS};
90-
91-
--eui-line-height-base: ${lineHeightXL};
92-
--eui-line-height-xxl: ${lineHeightXXL};
93-
--eui-line-height-xl: ${lineHeightXL};
94-
--eui-line-height-l: ${lineHeightL};
95-
--eui-line-height-m: ${lineHeightM};
96-
--eui-line-height-s: ${lineHeightS};
97-
--eui-line-height-xs: ${lineHeightXS};
98-
--eui-line-height-xxs: ${lineHeightXXS};
99-
100-
--eui-size-xs: ${euiTheme.size.xs};
101-
--eui-size-s: ${euiTheme.size.s};
102-
103-
--eui-border-color-primary: ${euiBorderColor(theme, 'primary')};
104-
105-
--eui-theme-content-vertical-spacing: ${euiTheme.size.base};
106-
107-
/* Docusaurus theme variables */
108-
--ifm-font-family-base: ${fontBase.fontFamily};
109-
--ifm-font-size-base: var(--eui-font-size-base);
110-
--ifm-font-weight-base: ${fontBase.fontWeight};
111-
--ifm-line-height-base: var(--eui-line-height-base);
112-
113-
--ifm-h1-font-size: var(--eui-font-size-xl);
114-
--ifm-h2-font-size: var(--eui-font-size-l);
115-
--ifm-h3-font-size: var(--eui-font-size-m);
116-
--ifm-h4-font-size: var(--eui-font-size-s);
117-
--ifm-h5-font-size: var(--eui-font-size-xs);
118-
--ifm-h6-font-size: var(--eui-font-size-xxs);
119-
120-
--ifm-global-radius: ${euiTheme.border.radius.small};
121-
}
48+
// color theme related variables
49+
:root,
50+
[data-theme='dark']:root {
51+
/* EUI theme variables */
52+
--eui-background-color-primary: ${colors.backgroundBasePrimary};
53+
--eui-background-color-success: ${colors.backgroundBaseSuccess};
54+
--eui-background-color-danger: ${colors.backgroundBaseDanger};
55+
--eui-background-color-warning: ${colors.backgroundBaseWarning};
56+
--eui-background-color-accent: ${colors.backgroundBaseAccent};
57+
58+
--eui-color-danger-text: ${colors.textDanger};
59+
60+
/* Docusaurus theme variables */
61+
--ifm-background-color: ${colors.backgroundBasePlain};
62+
--ifm-font-color-base: ${colors.textParagraph};
63+
--ifm-link-color: ${colors.link};
64+
--ifm-link-hover-color: ${colors.link};
65+
66+
--ifm-menu-color: ${colors.textParagraph};
67+
--ifm-menu-color-background-active: ${colors.backgroundBaseSubdued};
68+
--ifm-menu-color-background-hover: var(--eui-background-color-primary);
69+
70+
--ifm-pre-background: ${colors.lightestShade};
71+
}
72+
73+
:root {
74+
/* EUI theme variables */
75+
--eui-font-size-base: ${fontBase.fontSize};
76+
--eui-font-size-xxl: ${fontSizeXXL};
77+
--eui-font-size-xl: ${fontSizeXL};
78+
--eui-font-size-l: ${fontSizeL};
79+
--eui-font-size-m: ${fontSizeM};
80+
--eui-font-size-s: ${fontSizeS};
81+
--eui-font-size-xs: ${fontSizeXS};
82+
--eui-font-size-xxs: ${fontSizeXXS};
83+
84+
--eui-line-height-base: ${lineHeightXL};
85+
--eui-line-height-xxl: ${lineHeightXXL};
86+
--eui-line-height-xl: ${lineHeightXL};
87+
--eui-line-height-l: ${lineHeightL};
88+
--eui-line-height-m: ${lineHeightM};
89+
--eui-line-height-s: ${lineHeightS};
90+
--eui-line-height-xs: ${lineHeightXS};
91+
--eui-line-height-xxs: ${lineHeightXXS};
92+
93+
--eui-size-xs: ${size.xs};
94+
--eui-size-s: ${size.s};
95+
96+
--eui-border-color-primary: ${colors.borderStrongPrimary};
97+
98+
--eui-theme-content-vertical-spacing: ${size.base};
99+
100+
/* Docusaurus theme variables */
101+
--ifm-font-family-base: ${fontBase.fontFamily};
102+
--ifm-font-size-base: var(--eui-font-size-base);
103+
--ifm-font-weight-base: ${fontBase.fontWeight};
104+
--ifm-line-height-base: var(--eui-line-height-base);
105+
106+
--ifm-h1-font-size: var(--eui-font-size-xl);
107+
--ifm-h2-font-size: var(--eui-font-size-l);
108+
--ifm-h3-font-size: var(--eui-font-size-m);
109+
--ifm-h4-font-size: var(--eui-font-size-s);
110+
--ifm-h5-font-size: var(--eui-font-size-xs);
111+
--ifm-h6-font-size: var(--eui-font-size-xxs);
112+
113+
--ifm-global-radius: ${euiTheme.border.radius.small};
114+
}
122115
`;
123116
};

‎packages/eui-theme-borealis/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
1111
"lint-es": "eslint --cache src/**/*.ts --max-warnings 0",
1212
"lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
13-
"test": "jest",
13+
"test": "jest ./src",
1414
"pre-push": "yarn build:workspaces && yarn lint && yarn test"
1515
},
1616
"repository": {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@
88

99
import { buildTheme, EuiThemeShape } from '@elastic/eui-theme-common';
1010

11-
import { colors } from './variables/_colors';
11+
import { colors } from './variables/colors';
1212
import { animation } from './variables/_animation';
1313
import { breakpoint } from './variables/_breakpoint';
1414
import { base, size } from './variables/_size';
1515
import { border } from './variables/_borders';
1616
import { levels } from './variables/_levels';
1717
import { font } from './variables/_typography';
1818
import { focus } from './variables/_states';
19+
import { components } from './variables/_components';
1920

2021
export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
2122

@@ -29,6 +30,7 @@ export const euiThemeBorealis: EuiThemeShape = {
2930
breakpoint,
3031
levels,
3132
focus,
33+
components,
3234
};
3335

3436
export const EuiThemeBorealis = buildTheme(

‎packages/eui-theme-borealis/src/theme_dark.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
// color mode specific variables
3-
@import './variables/colors_dark';
3+
@import './variables/colors/colors_dark';
44

55

66
// Global styling
7-
@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
8-
@import './variables/index';
7+
@import './variables/index';
8+
@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

‎packages/eui-theme-borealis/src/theme_light.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// color mode specific variables
2-
@import './variables/colors_light';
2+
@import './variables/colors/colors_light';
33

44

55
// Global styling
6-
@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
7-
@import './variables/index';
6+
@import './variables/index';
7+
@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

‎packages/eui-theme-borealis/src/variables/_borders.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Borders
2+
3+
$euiBorderColor: #00ff00 !default;

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ import {
1313
} from '@elastic/eui-theme-common';
1414

1515
export const border: _EuiThemeBorder = {
16-
color: computed(([lightShade]) => lightShade, ['colors.lightShade']),
16+
color: computed(
17+
([borderBasePlain]) => borderBasePlain,
18+
['colors.borderBasePlain']
19+
),
1720
width: {
1821
thin: '1px',
1922
thick: '2px',

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
$euiButtonColorDisabled: $euiColorDisabled;
2-
$euiButtonColorDisabledText: $euiColorDisabledText;
3-
$euiButtonDefaultTransparency: .8;
4-
$euiButtonFontWeight: $euiFontWeightMedium;
1+
$euiButtonHeight: $euiSizeXXL !default;
2+
$euiButtonHeightSmall: $euiSizeXL !default;
3+
$euiButtonHeightXSmall: $euiSizeL !default;
4+
5+
// Modifier naming and colors.
6+
$euiButtonTypes: (
7+
primary: $euiColorBackgroundFilledPrimary,
8+
accent: $euiColorBackgroundFilledAccent,
9+
success: $euiColorBackgroundFilledSuccess,
10+
warning: $euiColorBackgroundFilledWarning,
11+
danger: $euiColorBackgroundFilledDanger,
12+
ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
13+
text: $euiColorBackgroundFilledText, // Reserved for special use cases
14+
) !default;
15+
16+
// TODO: Remove this once elastic-charts no longer uses this variable
17+
// @see https://github.com/elastic/elastic-charts/pull/2528
18+
$euiButtonColorDisabledText: $euiColorTextDisabled;

0 commit comments

Comments
 (0)