Update EUI to v109.0.0 (#241947)

tkajtoch · web-flow · commit 2e4fde3077ae · 2025-11-06T14:09:50.000+01:00
diff --git a/examples/grid_example/public/use_layout_styles.tsx b/examples/grid_example/public/use_layout_styles.tsx
@@ -72,7 +72,7 @@ export const useLayoutStyles = () => {
           mask-position: bottom ${euiTheme.size.s} right ${euiTheme.size.s};
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cg clip-path='url(%23clip0_472_172810)'%3E%3Ccircle cx='7' cy='1' r='1' fill='%23000000'/%3E%3C/g%3E%3Cg clip-path='url(%23clip1_472_172810)'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23000000'/%3E%3Ccircle cx='7' cy='4' r='1' fill='%23000000'/%3E%3C/g%3E%3Cg clip-path='url(%23clip2_472_172810)'%3E%3Ccircle cx='1' cy='7' r='1' fill='%23000000'/%3E%3Ccircle cx='4' cy='7' r='1' fill='%23000000'/%3E%3Ccircle cx='7' cy='7' r='1' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
 
-          background-color: ${euiTheme.colors.borderBaseFormsControl};
+          background-color: ${euiTheme.colors.borderBaseProminent};
         }
         &:hover,
         &:focus-visible {
diff --git a/package.json b/package.json
@@ -129,8 +129,8 @@
     "@elastic/ecs": "^9.0.0",
     "@elastic/elasticsearch": "9.1.1",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "108.0.0",
-    "@elastic/eui-theme-borealis": "4.0.0",
+    "@elastic/eui": "109.0.0",
+    "@elastic/eui-theme-borealis": "5.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",
     "@elastic/monaco-esql": "^3.1.11",
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -91,8 +91,8 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.6.3': ['Elastic License 2.0'],
-  '@elastic/eui@108.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-theme-borealis@4.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@109.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@5.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@2.5.2': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap
diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx
@@ -94,7 +94,7 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean)
   }, [euiTheme]);
 
   const containerStyles = useMemo(() => {
-    const editModeOutline = `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`;
+    const editModeOutline = `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseProminent}`;
     const viewModeOutline = `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`;
 
     return css`
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/highlight_styles.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/highlight_styles.tsx
@@ -31,7 +31,7 @@ const getOutlineFadeKeyframes = ({ euiTheme }: UseEuiTheme) =>
       outline: `${euiTheme.border.width.thin} dashed transparent`,
     },
     '100%': {
-      outline: `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`,
+      outline: `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseProminent}`,
     },
   });
 
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/use_layout_styles.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/use_layout_styles.tsx
@@ -72,7 +72,7 @@ export const useLayoutStyles = () => {
           mask-position: bottom ${euiTheme.size.s} right ${euiTheme.size.s};
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cg clip-path='url(%23clip0_472_172810)'%3E%3Ccircle cx='7' cy='1' r='1' fill='%23000000'/%3E%3C/g%3E%3Cg clip-path='url(%23clip1_472_172810)'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23000000'/%3E%3Ccircle cx='7' cy='4' r='1' fill='%23000000'/%3E%3C/g%3E%3Cg clip-path='url(%23clip2_472_172810)'%3E%3Ccircle cx='1' cy='7' r='1' fill='%23000000'/%3E%3Ccircle cx='4' cy='7' r='1' fill='%23000000'/%3E%3Ccircle cx='7' cy='7' r='1' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
 
-          background-color: ${euiTheme.colors.borderBaseFormsControl};
+          background-color: ${euiTheme.colors.borderBaseProminent};
         }
         &:hover,
         &:focus-visible {
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx b/x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
@@ -100,6 +100,6 @@ export const useEdgeColor = (edgeColor: EdgeViewModel['color']) => {
       return euiTheme.colors.primary;
     case 'subdued':
     default:
-      return euiTheme.colors.borderBaseFormsControl;
+      return euiTheme.colors.borderBaseProminent;
   }
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/data_providers/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/data_providers/index.tsx
@@ -56,7 +56,7 @@ const DropTargetDataProviders = styled.div`
   flex-direction: column;
   justify-content: flex-start;
   position: relative;
-  border: 0.2rem dashed ${({ theme }) => theme.euiTheme.colors.borderBaseFormsControl};
+  border: 0.2rem dashed ${({ theme }) => theme.euiTheme.colors.borderBaseProminent};
   border-radius: 5px;
   padding: ${({ theme }) => theme.euiTheme.size.s} 0;
   margin: 0px 0 0px 0;
diff --git a/yarn.lock b/yarn.lock
@@ -2636,26 +2636,26 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-2.5.0.tgz#99ca807edeb157baf38fef9e39fd031f19b702a5"
   integrity sha512-dW6U7N4HAdSst+Iqhaw1In8zxT8rE4AMnIJIN6C/vNM8XDKmFyzkw/AddpvW5oZHdV0D7+3w/VI9petN4RnWBQ==
 
-"@elastic/eui-theme-borealis@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-4.0.0.tgz#9fc6463f8e358f9b3b2f6387e5935d66be481122"
-  integrity sha512-NV+g4vaoPfAV1mAI2oORMY7WD2YdLqx1zMGSH/HKjM9j49U/OK8Jl3DvHGTTAloWe2TvjlWnq6QJgm0xNwxjiA==
+"@elastic/eui-theme-borealis@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-5.0.0.tgz#a6bacd76a8d54fe33b623f2fc93f64ae4fd976b8"
+  integrity sha512-87LIeV/KQPB4aBe08/r//7uSOqDdnaSa4e3rAaxSwwQT1dXku/00uwXOWYgZ52otjzF+4t6vTmyqdgQGnLurNQ==
 
-"@elastic/eui-theme-common@6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-6.0.0.tgz#0227f2a1d2b023024fe5777afd57257c53048f69"
-  integrity sha512-Qi52Jfby/W5huw8Tj5mTjSxwn4qoXPqidscukPEgUe8IVdgaIJ3CLTR1gOplsPKf/CDfX8Tb7l4dLoL2FWSaMA==
+"@elastic/eui-theme-common@7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-7.0.0.tgz#9550ea1b575f0e3052a6f40977e686d9ea44a9f0"
+  integrity sha512-zt4F4wwlUUaAV38B2ESbVUL5AMeGHozq7Xw2tYBgz/FXkYGGTMBsLIwBm7lPipEGjQ7N7Nkjff9l3h635yLdrQ==
   dependencies:
     "@types/lodash" "^4.14.202"
     chroma-js "^2.4.2"
     lodash "^4.17.21"
 
-"@elastic/eui@108.0.0":
-  version "108.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-108.0.0.tgz#409fc6c49f19651832c411072482cd79bcdbd17c"
-  integrity sha512-W9l/jGlhxYYT0pN9vpaGmeR7nWYwTpmiLCkX8HnYOORQLUY6eXz5+9ng6WY68XzHWTcWUOMQB15OSyisj4VLVw==
+"@elastic/eui@109.0.0":
+  version "109.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-109.0.0.tgz#6ae5abe802dcd0649c4230b7204cad60f1fdbdcf"
+  integrity sha512-mPclhFKSzGyJC21rNvmCkY3maKbPVNgBEQa1NdI2Faz9lzna1bMrC0VSEjVKNSGrPeq54ZubVx3krIsF8HxoIg==
   dependencies:
-    "@elastic/eui-theme-common" "6.0.0"
+    "@elastic/eui-theme-common" "7.0.0"
     "@elastic/prismjs-esql" "^1.1.2"
     "@hello-pangea/dnd" "^16.6.0"
     "@types/lodash" "^4.14.202"

Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@ export const useLayoutStyles = () => {`
`72`	`72`	`mask-position: bottom ${euiTheme.size.s} right ${euiTheme.size.s};`
`73`	`73`	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cg clip-path='url(%23clip0_472_172810)'%3E%3Ccircle cx='7' cy='1' r='1' fill='%23000000'/%3E%3C/g%3E%3Cg clip-path='url(%23clip1_472_172810)'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23000000'/%3E%3Ccircle cx='7' cy='4' r='1' fill='%23000000'/%3E%3C/g%3E%3Cg clip-path='url(%23clip2_472_172810)'%3E%3Ccircle cx='1' cy='7' r='1' fill='%23000000'/%3E%3Ccircle cx='4' cy='7' r='1' fill='%23000000'/%3E%3Ccircle cx='7' cy='7' r='1' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
`74`	`74`
`75`		`- background-color: ${euiTheme.colors.borderBaseFormsControl};`
	`75`	`+ background-color: ${euiTheme.colors.borderBaseProminent};`
`76`	`76`	`}`
`77`	`77`	`&:hover,`
`78`	`78`	`&:focus-visible {`
-Original file line number
+Diff line change
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
 -  '@elastic/eui@108.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
 -  '@elastic/eui-theme-borealis@4.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
 +  '@elastic/eui@109.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
 +  '@elastic/eui-theme-borealis@5.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)