Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Theme] Update EUI theme colors to full hex format #8244

Merged
merged 3 commits into from
Dec 17, 2024
Merged

[Theme] Update EUI theme colors to full hex format #8244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9dae150
refactor: update amsterdam 3 char hex colors to full format
mgadewoll Dec 16, 2024
b897351
test: update tests and snapshots
mgadewoll Dec 16, 2024
6116f08
chore: add changelog
mgadewoll Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/8244.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated the EUI theme color values to use a full 6 char hex code format
4 changes: 2 additions & 2 deletions packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ exports[`EuiBadge props color accent is rendered 1`] = `
exports[`EuiBadge props color accepts hex 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="--euiBadgeBackgroundColor: #333; --euiBadgeTextColor: #FFF;"
style="--euiBadgeBackgroundColor: #333; --euiBadgeTextColor: #FFFFFF;"
title="Content"
>
<span
Expand All @@ -196,7 +196,7 @@ exports[`EuiBadge props color accepts hex 1`] = `
exports[`EuiBadge props color accepts rgba 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="--euiBadgeBackgroundColor: rgba(255,255,255,1); --euiBadgeTextColor: #000;"
style="--euiBadgeBackgroundColor: rgba(255,255,255,1); --euiBadgeTextColor: #000000;"
title="Content"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/button/__snapshots__/button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
aria-label="Loading"
class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
role="progressbar"
style="border-color: #07c currentcolor currentcolor currentcolor;"
style="border-color: #0077cc currentcolor currentcolor currentcolor;"
/>
</span>
</button>
Expand Down
2 changes: 1 addition & 1 deletion .../src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa
aria-label="Loading"
class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
role="progressbar"
style="border-color: #07c currentcolor currentcolor currentcolor;"
style="border-color: #0077cc currentcolor currentcolor currentcolor;"
/>
<span
class="eui-textTruncate"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ exports[`EuiButtonEmpty props isLoading is rendered 1`] = `
aria-label="Loading"
class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
role="progressbar"
style="border-color: #07c currentcolor currentcolor currentcolor;"
style="border-color: #0077cc currentcolor currentcolor currentcolor;"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ exports[`EuiButtonIcon props isLoading is rendered 1`] = `
aria-label="Loading"
class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
role="progressbar"
style="border-color: #07c currentcolor currentcolor currentcolor;"
style="border-color: #0077cc currentcolor currentcolor currentcolor;"
/>
</button>
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1009,7 +1009,7 @@ exports[`line utils highlightByLine with line numbers with highlighted lines add
"properties": {
"className": [
"euiCodeBlock__lineText",
"css-96t2rh-euiCodeBlock__lineText-isHighlighted",
"css-1l6uyoo-euiCodeBlock__lineText-isHighlighted",
],
},
"tagName": "span",
Expand Down Expand Up @@ -1160,7 +1160,7 @@ exports[`line utils highlightByLine with line numbers with highlighted lines add
"properties": {
"className": [
"euiCodeBlock__lineText",
"css-96t2rh-euiCodeBlock__lineText-isHighlighted",
"css-1l6uyoo-euiCodeBlock__lineText-isHighlighted",
],
},
"tagName": "span",
Expand Down
18 changes: 9 additions & 9 deletions packages/eui/src/components/form/form.styles.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('euiFormVariables', () => {
"appendPrependBackground": "#e9edf3",
"backgroundColor": "#f9fbfd",
"backgroundDisabledColor": "#eef1f7",
"backgroundReadOnlyColor": "#FFF",
"backgroundReadOnlyColor": "#FFFFFF",
"borderColor": "rgba(32,38,47,0.1)",
"controlBorderRadius": "6px",
"controlBoxShadow": "0 0 transparent",
Expand Down Expand Up @@ -123,8 +123,8 @@ describe('euiFormControlStyles', () => {

",
"focus": "
--euiFormControlStateColor: #07C;
background-color: #FFF;
--euiFormControlStateColor: #0077CC;
background-color: #FFFFFF;
background-size: 100% 100%;
outline: none; /* Remove all outlines and rely on our own bottom border gradient */
",
Expand All @@ -150,7 +150,7 @@ describe('euiFormControlStyles', () => {
color: #343741;
-webkit-text-fill-color: #343741; /* Required for Safari */

background-color: #FFF;
background-color: #FFFFFF;
--euiFormControlStateColor: transparent;
",
"shared": "
Expand Down Expand Up @@ -237,16 +237,16 @@ describe('euiFormCustomControlStyles', () => {
},
"enabled": {
"selected": "
color: #FFF;
background-color: #07C;
color: #FFFFFF;
background-color: #0077CC;
",
"unselected": "
color: transparent;
background-color: #FFF;
background-color: #FFFFFF;
border: 1px solid #919296;

&:has(input:focus) {
border-color: #07C;
border-color: #0077CC;
}
",
},
Expand All @@ -259,7 +259,7 @@ describe('euiFormCustomControlStyles', () => {
align-items: center;

&:has(input:focus-visible) {
outline: 2px solid #07C;
outline: 2px solid #0077CC;
outline-offset: 2px;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`EuiLoadingSpinner custom colors 1`] = `
aria-label="Loading"
class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
role="progressbar"
style="border-color: #07c white white white;"
style="border-color: #0077cc white white white;"
/>
<span
aria-label="Loading"
Expand Down
14 changes: 7 additions & 7 deletions ...ages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,12 +151,12 @@ exports[`euiMarkdownFormat text colors default 1`] = `
exports[`euiMarkdownFormat text colors ghost 1`] = `
"
.euiMarkdownFormat__blockquote {
border-inline-start-color: #FFF;
border-inline-start-color: #FFFFFF;
}

.euiHorizontalRule {
background-color: #FFF;
color: #FFF; /* ensure that firefox gets the currentColor */
background-color: #FFFFFF;
color: #FFFFFF; /* ensure that firefox gets the currentColor */
}

/* Tables */
Expand All @@ -167,20 +167,20 @@ exports[`euiMarkdownFormat text colors ghost 1`] = `
overflow: auto;
border-spacing: 0;
border-collapse: collapse;
border-inline-start: 1px solid #FFF;
border-inline-start: 1px solid #FFFFFF;
}

.euiMarkdownFormat__table th,
.euiMarkdownFormat__table td {
border-block: 1px solid #FFF;
border-block: 1px solid #FFFFFF;

&:last-child {
border-inline-end: 1px solid #FFF;
border-inline-end: 1px solid #FFFFFF;
}
}

.euiMarkdownFormat__table tr {
border-block-start: 1px solid #FFF;
border-block-start: 1px solid #FFFFFF;
}
;label:ghost;"
`;
Expand Down
6 changes: 3 additions & 3 deletions packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`euiProgressStyles indeterminate div CSS colors danger 1`] = `
exports[`euiProgressStyles indeterminate div CSS colors primary 1`] = `
"
&::before {
background-color: #07C;
background-color: #0077CC;
}
;;label:primary;"
`;
Expand Down Expand Up @@ -175,10 +175,10 @@ exports[`euiProgressStyles native progress CSS colors danger 1`] = `
exports[`euiProgressStyles native progress CSS colors primary 1`] = `
"
&::-webkit-progress-value {
background-color: #07C;
background-color: #0077CC;
}
&::-moz-progress-bar {
background-color: #07C;
background-color: #0077CC;
}
;;label:primary;"
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`useEuiBackgroundColor mixin returns a calculated background version for

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: danger 1`] = `"#f8e9e9"`;

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: plain 1`] = `"#FFF"`;
exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: plain 1`] = `"#FFFFFF"`;

exports[`useEuiBackgroundColor mixin returns a calculated background version for each color: primary 1`] = `"#e6f1fa"`;

Expand All @@ -36,7 +36,7 @@ exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-c

exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: danger 1`] = `"background-color:#f8e9e9;label:danger;"`;

exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: plain 1`] = `"background-color:#FFF;label:plain;"`;
exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: plain 1`] = `"background-color:#FFFFFF;label:plain;"`;

exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: primary 1`] = `"background-color:#e6f1fa;label:primary;"`;

Expand Down
4 changes: 2 additions & 2 deletions packages/eui/src/services/theme/emotion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ describe('EuiEmotionThemeProvider', () => {
</EuiEmotionThemeProvider>
);

expect(getByTestSubject('consumer')).toHaveStyleRule('color', '#07C');
expect(getByTestSubject('consumer')).toHaveStyleRule('color', '#0077CC');

expect(container.firstChild).toMatchInlineSnapshot(`
<div
class="css-cs4x42"
class="css-1hfqh59"
data-test-subj="consumer"
>
hello world
Expand Down
8 changes: 4 additions & 4 deletions packages/eui/src/services/theme/provider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,15 @@ describe('EuiThemeProvider', () => {
</>
);

expect(getByText('Light mode')).toHaveStyleRule('color', '#000');
expect(getByText('Dark mode')).toHaveStyleRule('color', '#FFF');
expect(getByText('Light mode')).toHaveStyleRule('color', '#000000');
expect(getByText('Dark mode')).toHaveStyleRule('color', '#FFFFFF');
expect(getByText('Inverse of light mode')).toHaveStyleRule(
'color',
'#FFF'
'#FFFFFF'
);
expect(getByText('Inverse of dark mode')).toHaveStyleRule(
'color',
'#000'
'#000000'
);
});
});
Expand Down
28 changes: 14 additions & 14 deletions packages/eui/src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,51 +112,51 @@ exports[`useEuiButtonColorCSS fill 1`] = `
{
"accent": {
"map": undefined,
"name": "vi45v3-displaysColorsMap-display-color",
"name": "1lwffh1-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#000;background-color:#f583b7;outline-color:#000;;label:fill-accent;",
"styles": "color:#000000;background-color:#f583b7;outline-color:#000000;;label:fill-accent;",
"toString": [Function],
},
"danger": {
"map": undefined,
"name": "1ge48z4-displaysColorsMap-display-color",
"name": "eby024-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#FFF;background-color:#BD271E;outline-color:#000;;label:fill-danger;",
"styles": "color:#FFFFFF;background-color:#BD271E;outline-color:#000000;;label:fill-danger;",
"toString": [Function],
},
"disabled": {
"map": undefined,
"name": "xc42v8-displaysColorsMap-display-color",
"name": "152gjsw-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#a2abba;background-color:rgba(211,218,230,0.15);outline-color:#000;;label:fill-disabled;",
"styles": "color:#a2abba;background-color:rgba(211,218,230,0.15);outline-color:#000000;;label:fill-disabled;",
"toString": [Function],
},
"primary": {
"map": undefined,
"name": "btstjy-displaysColorsMap-display-color",
"name": "1si6c6d-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#FFF;background-color:#07C;outline-color:#000;;label:fill-primary;",
"styles": "color:#FFFFFF;background-color:#0077CC;outline-color:#000000;;label:fill-primary;",
"toString": [Function],
},
"success": {
"map": undefined,
"name": "p9aexd-displaysColorsMap-display-color",
"name": "3rxew5-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#000;background-color:#4dd2ca;outline-color:#000;;label:fill-success;",
"styles": "color:#000000;background-color:#4dd2ca;outline-color:#000000;;label:fill-success;",
"toString": [Function],
},
"text": {
"map": undefined,
"name": "5c80s5-displaysColorsMap-display-color",
"name": "z446pa-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#FFF;background-color:#69707D;outline-color:#000;;label:fill-text;",
"styles": "color:#FFFFFF;background-color:#69707D;outline-color:#000000;;label:fill-text;",
"toString": [Function],
},
"warning": {
"map": undefined,
"name": "17xxsr5-displaysColorsMap-display-color",
"name": "bt7do0-displaysColorsMap-display-color",
"next": undefined,
"styles": "color:#000;background-color:#FEC514;outline-color:#000;;label:fill-warning;",
"styles": "color:#000000;background-color:#FEC514;outline-color:#000000;;label:fill-warning;",
"toString": [Function],
},
}
Expand Down
12 changes: 6 additions & 6 deletions packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
*/

export const brand_colors: _EuiThemeBrandColors = {
primary: '#07C',
primary: '#0077CC',
accent: '#F04E98',
success: '#00BFB3',
warning: '#FEC514',
Expand All @@ -44,13 +44,13 @@ export const brand_text_colors: _EuiThemeBrandTextColors = {
};

export const shade_colors: _EuiThemeShadeColors = {
emptyShade: '#FFF',
emptyShade: '#FFFFFF',
lightestShade: '#F1F4FA',
lightShade: '#D3DAE6',
mediumShade: '#98A2B3',
darkShade: '#69707D',
darkestShade: '#343741',
fullShade: '#000',
fullShade: '#000000',
};

export const special_colors: _EuiThemeSpecialColors = {
Expand Down Expand Up @@ -91,7 +91,7 @@ export const dark_shades: _EuiThemeShadeColors = {
mediumShade: '#535966',
darkShade: '#98A2B3',
darkestShade: '#D4DAE5',
fullShade: '#FFF',
fullShade: '#FFFFFF',
};

export const dark_colors_ams: _EuiThemeColorsMode = {
Expand Down Expand Up @@ -130,8 +130,8 @@ export const dark_colors_ams: _EuiThemeColorsMode = {
*/

export const colors: _EuiThemeColors = {
ghost: '#FFF',
ink: '#000',
ghost: '#FFFFFF',
ink: '#000000',
LIGHT: light_colors,
DARK: dark_colors_ams,
};
Loading