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

elastic · Dec 17, 2024 · 1462a7f · 1462a7f
1 parent 6fc6d14
commit 1462a7f
Show file tree

Hide file tree

Showing 16 changed files with 57 additions and 56 deletions.
diff --git a/packages/eui/changelogs/upcoming/8244.md 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
@@ -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
@@ -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

diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap
@@ -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>

diff --git a/.../src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/.../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;"
   />
   <span
     class="eui-textTruncate"

diff --git a/packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/packages/eui/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -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"

diff --git a/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -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>
 `;

diff --git 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
@@ -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
@@ -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"

diff --git a/...ages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap b/...ages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
@@ -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 */
@@ -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;"
 `;

diff --git a/packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap b/packages/eui/src/components/progress/__snapshots__/progress.styles.test.ts.snap
@@ -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;"
 `;
@@ -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;"
 `;

diff --git a/packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap b/packages/eui/src/global_styling/mixins/__snapshots__/_color.test.ts.snap
@@ -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"`;
 
@@ -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;"`;
 

diff --git a/packages/eui/src/services/theme/emotion.test.tsx b/packages/eui/src/services/theme/emotion.test.tsx
@@ -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

diff --git 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
@@ -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
@@ -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,
 };
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