diff --git a/packages/eui/changelogs/upcoming/8244.md b/packages/eui/changelogs/upcoming/8244.md new file mode 100644 index 00000000000..ac594b16573 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8244.md @@ -0,0 +1 @@ +- Updated the EUI theme color values to use a full 6 char hex code format diff --git a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap index aa5d8d93f85..ce00526e2f1 100644 --- a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -178,7 +178,7 @@ exports[`EuiBadge props color accent is rendered 1`] = ` exports[`EuiBadge props color accepts hex 1`] = ` diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index e3196dfd8a2..b0e32a19990 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -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;" /> `; diff --git a/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap b/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap index 0c229ef9d34..2b1117b31d9 100644 --- a/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap +++ b/packages/eui/src/components/code/__snapshots__/utils.test.tsx.snap @@ -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", @@ -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", diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx index 57af8d78585..a2df1d2940d 100644 --- a/packages/eui/src/components/form/form.styles.test.tsx +++ b/packages/eui/src/components/form/form.styles.test.tsx @@ -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", @@ -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 */ ", @@ -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": " @@ -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; } ", }, @@ -259,7 +259,7 @@ describe('euiFormCustomControlStyles', () => { align-items: center; &:has(input:focus-visible) { - outline: 2px solid #07C; + outline: 2px solid #0077CC; outline-offset: 2px; } diff --git a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap index 840a026157c..f5f127e03ee 100644 --- a/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap +++ b/packages/eui/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap @@ -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;" /> { ); - expect(getByTestSubject('consumer')).toHaveStyleRule('color', '#07C'); + expect(getByTestSubject('consumer')).toHaveStyleRule('color', '#0077CC'); expect(container.firstChild).toMatchInlineSnapshot(`
hello world diff --git a/packages/eui/src/services/theme/provider.test.tsx b/packages/eui/src/services/theme/provider.test.tsx index 539016bca0a..43c58ff440e 100644 --- a/packages/eui/src/services/theme/provider.test.tsx +++ b/packages/eui/src/services/theme/provider.test.tsx @@ -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' ); }); }); diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap b/packages/eui/src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap index 96beb3b0e63..168fcc96747 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap +++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap @@ -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], }, } diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index aa86e3f1ee6..29e2f2f5796 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -28,7 +28,7 @@ import { */ export const brand_colors: _EuiThemeBrandColors = { - primary: '#07C', + primary: '#0077CC', accent: '#F04E98', success: '#00BFB3', warning: '#FEC514', @@ -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 = { @@ -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 = { @@ -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, };