[9.0] Upgrade EUI to v101.0.1 (#215698) (#216378)

# Backport

This will backport the following commits from `main` to `9.0`:
- [Upgrade EUI to v101.0.1
(#215698)](#215698)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Lene
Gadewoll","email":"lene.gadewoll@elastic.co"},"sourceCommit":{"committedDate":"2025-03-28T18:29:23Z","message":"Upgrade
EUI to v101.0.1 (#215698)\n\n`100.0.0` ⏩ `101.0.1`\n\n[Questions? Please
see our Kibana
upgrade\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)\n\n##
Package updates\n\n###
`@elastic/eui`\n[`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1)\n\n-
Updated `EuiProvider` and `EuiThemeProvider` with a
new\n`highContrastMode`
([#8444](https://github.com/elastic/eui/pull/8444))\n- This prop allows
toggling a higher contrast visual style that\nprimarily affects borders
and shadows\n- On `EuiProvider`, if the `highContrastMode` prop is not
passed, this\nsetting will inherit from the user's OS/system settings\n-
If the user is using a forced colors mode (e.g. Windows' high
contrast\nthemes), this system setting will take precedence over
any\n`highContrastMode` or `colorMode` props passed\n- Added
`highContrastModeStyles` and `preventForcedColors` styling
utils\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated
`EuiRangeTooltip` to be easier to see in dark
mode\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated
some deprecated color token usages that have direct\nsubstitutes
([#8444](https://github.com/elastic/eui/pull/8444))\n - `text` ->
`textParagraph`\n - `title` -> `textHeading`\n - `subduedText` ->
`textSubdued`\n - `disabledText` -> `textDisabled`\n - `accentText` ->
`textAccent`\n - `dangerText` -> `textDanger`\n - `warningText` ->
`textWarning`\n- `useEuiShadow()` now accepts a second `options`
argument\n([#8234](https://github.com/elastic/eui/pull/8234))\n-
`useEuiShadowFlat()` now accepts an `options` object instead of only
a\ncolor ([#8234](https://github.com/elastic/eui/pull/8234))\n- Updated
`EuiPopover` and `EuiToolTip` to be easier to see in dark\nmode.
([#8174](https://github.com/elastic/eui/pull/8174))\n\n**Bug
fixes**\n\n- Fixed a visual bug where a transparent border would create
visible\nempty space (`LIGHT` mode only) for the
components:\n([#8427](https://github.com/elastic/eui/pull/8427))\n -
`EuiPanel`\n - `EuiPopover`\n - `EuiToolTip`\n - `EuiToast`\n -
`EuiTour`\n \n --- \n \n###
`@elastic/eui-theme-common`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n-
Removed type
`EuiShadowCustomColor`\n([#8444](https://github.com/elastic/eui/pull/8444))\n-
Added types: ([#8444](https://github.com/elastic/eui/pull/8444))\n -
`EuiShadowOptions`\n - `EuiThemeHighContrastModeProp`\n -
`EuiThemeHighContrastMode`\n- Updated shadow utils to accepts a second
`options` argument and return\nborders in high contrast
mode:\n([#8444](https://github.com/elastic/eui/pull/8444))\n -
`euiShadow`\n - `euiShadowXSmall`\n - `euiShadowSmall`\n -
`euiShadowMedium`\n - `euiShadowLarge`\n - `euiSlightShadowHover`\n -
`euiShadowFlat`\n \n ---\n \n###
`@elastic/eui-theme-borealis`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n-
Added new component level
tokens:\n([#8444](https://github.com/elastic/eui/pull/8444))\n -
`buttonGroupBackgroundDisabledSelected`\n - `overlayMaskBackground`\n -
`overlayMaskBackgroundHighContrast`\n -
`skeletonBackgroundSkeletonMiddleHighContrast`\n \n\n## Additional
changes\n\nThe latest `@elastic/eui` package introduces high contrast
mode support.\nThis PR sets all usages of `EuiProvider` to
use\n`highContrastMode={false}` to introduce it in disabled state
(this\nreflects the current functionality in Kibana). This is because
the UI\nfor the high contrast mode functionality (and style adjustments)
need to\nfirst be implemented on Kibana side (by shared-ux).\n\n##
QA\n\nAdding high contrast mode in disabled state should result in no
visual\nchanges in Kibana. Please ensure your product view remain
unchanged.\n\n---------\n\nCo-authored-by: Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"2cd777d96909a73bab547cc3e3f509fc7ef916af","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:prev-minor","ci:cloud-deploy","ci:project-deploy-elasticsearch","ci:project-deploy-observability","ci:project-deploy-security","Team:obs-ux-infra_services","Team:obs-ux-management","v9.1.0"],"title":"Upgrade
EUI to
v101.0.1","number":215698,"url":"https://github.com/elastic/kibana/pull/215698","mergeCommit":{"message":"Upgrade
EUI to v101.0.1 (#215698)\n\n`100.0.0` ⏩ `101.0.1`\n\n[Questions? Please
see our Kibana
upgrade\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)\n\n##
Package updates\n\n###
`@elastic/eui`\n[`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1)\n\n-
Updated `EuiProvider` and `EuiThemeProvider` with a
new\n`highContrastMode`
([#8444](https://github.com/elastic/eui/pull/8444))\n- This prop allows
toggling a higher contrast visual style that\nprimarily affects borders
and shadows\n- On `EuiProvider`, if the `highContrastMode` prop is not
passed, this\nsetting will inherit from the user's OS/system settings\n-
If the user is using a forced colors mode (e.g. Windows' high
contrast\nthemes), this system setting will take precedence over
any\n`highContrastMode` or `colorMode` props passed\n- Added
`highContrastModeStyles` and `preventForcedColors` styling
utils\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated
`EuiRangeTooltip` to be easier to see in dark
mode\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated
some deprecated color token usages that have direct\nsubstitutes
([#8444](https://github.com/elastic/eui/pull/8444))\n - `text` ->
`textParagraph`\n - `title` -> `textHeading`\n - `subduedText` ->
`textSubdued`\n - `disabledText` -> `textDisabled`\n - `accentText` ->
`textAccent`\n - `dangerText` -> `textDanger`\n - `warningText` ->
`textWarning`\n- `useEuiShadow()` now accepts a second `options`
argument\n([#8234](https://github.com/elastic/eui/pull/8234))\n-
`useEuiShadowFlat()` now accepts an `options` object instead of only
a\ncolor ([#8234](https://github.com/elastic/eui/pull/8234))\n- Updated
`EuiPopover` and `EuiToolTip` to be easier to see in dark\nmode.
([#8174](https://github.com/elastic/eui/pull/8174))\n\n**Bug
fixes**\n\n- Fixed a visual bug where a transparent border would create
visible\nempty space (`LIGHT` mode only) for the
components:\n([#8427](https://github.com/elastic/eui/pull/8427))\n -
`EuiPanel`\n - `EuiPopover`\n - `EuiToolTip`\n - `EuiToast`\n -
`EuiTour`\n \n --- \n \n###
`@elastic/eui-theme-common`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n-
Removed type
`EuiShadowCustomColor`\n([#8444](https://github.com/elastic/eui/pull/8444))\n-
Added types: ([#8444](https://github.com/elastic/eui/pull/8444))\n -
`EuiShadowOptions`\n - `EuiThemeHighContrastModeProp`\n -
`EuiThemeHighContrastMode`\n- Updated shadow utils to accepts a second
`options` argument and return\nborders in high contrast
mode:\n([#8444](https://github.com/elastic/eui/pull/8444))\n -
`euiShadow`\n - `euiShadowXSmall`\n - `euiShadowSmall`\n -
`euiShadowMedium`\n - `euiShadowLarge`\n - `euiSlightShadowHover`\n -
`euiShadowFlat`\n \n ---\n \n###
`@elastic/eui-theme-borealis`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n-
Added new component level
tokens:\n([#8444](https://github.com/elastic/eui/pull/8444))\n -
`buttonGroupBackgroundDisabledSelected`\n - `overlayMaskBackground`\n -
`overlayMaskBackgroundHighContrast`\n -
`skeletonBackgroundSkeletonMiddleHighContrast`\n \n\n## Additional
changes\n\nThe latest `@elastic/eui` package introduces high contrast
mode support.\nThis PR sets all usages of `EuiProvider` to
use\n`highContrastMode={false}` to introduce it in disabled state
(this\nreflects the current functionality in Kibana). This is because
the UI\nfor the high contrast mode functionality (and style adjustments)
need to\nfirst be implemented on Kibana side (by shared-ux).\n\n##
QA\n\nAdding high contrast mode in disabled state should result in no
visual\nchanges in Kibana. Please ensure your product view remain
unchanged.\n\n---------\n\nCo-authored-by: Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"2cd777d96909a73bab547cc3e3f509fc7ef916af"}},"sourceBranch":"main","suggestedTargetBranches":["9.0"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215698","number":215698,"mergeCommit":{"message":"Upgrade
EUI to v101.0.1 (#215698)\n\n`100.0.0` ⏩ `101.0.1`\n\n[Questions? Please
see our Kibana
upgrade\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)\n\n##
Package updates\n\n###
`@elastic/eui`\n[`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1)\n\n-
Updated `EuiProvider` and `EuiThemeProvider` with a
new\n`highContrastMode`
([#8444](https://github.com/elastic/eui/pull/8444))\n- This prop allows
toggling a higher contrast visual style that\nprimarily affects borders
and shadows\n- On `EuiProvider`, if the `highContrastMode` prop is not
passed, this\nsetting will inherit from the user's OS/system settings\n-
If the user is using a forced colors mode (e.g. Windows' high
contrast\nthemes), this system setting will take precedence over
any\n`highContrastMode` or `colorMode` props passed\n- Added
`highContrastModeStyles` and `preventForcedColors` styling
utils\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated
`EuiRangeTooltip` to be easier to see in dark
mode\n([#8444](https://github.com/elastic/eui/pull/8444))\n- Updated
some deprecated color token usages that have direct\nsubstitutes
([#8444](https://github.com/elastic/eui/pull/8444))\n - `text` ->
`textParagraph`\n - `title` -> `textHeading`\n - `subduedText` ->
`textSubdued`\n - `disabledText` -> `textDisabled`\n - `accentText` ->
`textAccent`\n - `dangerText` -> `textDanger`\n - `warningText` ->
`textWarning`\n- `useEuiShadow()` now accepts a second `options`
argument\n([#8234](https://github.com/elastic/eui/pull/8234))\n-
`useEuiShadowFlat()` now accepts an `options` object instead of only
a\ncolor ([#8234](https://github.com/elastic/eui/pull/8234))\n- Updated
`EuiPopover` and `EuiToolTip` to be easier to see in dark\nmode.
([#8174](https://github.com/elastic/eui/pull/8174))\n\n**Bug
fixes**\n\n- Fixed a visual bug where a transparent border would create
visible\nempty space (`LIGHT` mode only) for the
components:\n([#8427](https://github.com/elastic/eui/pull/8427))\n -
`EuiPanel`\n - `EuiPopover`\n - `EuiToolTip`\n - `EuiToast`\n -
`EuiTour`\n \n --- \n \n###
`@elastic/eui-theme-common`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n-
Removed type
`EuiShadowCustomColor`\n([#8444](https://github.com/elastic/eui/pull/8444))\n-
Added types: ([#8444](https://github.com/elastic/eui/pull/8444))\n -
`EuiShadowOptions`\n - `EuiThemeHighContrastModeProp`\n -
`EuiThemeHighContrastMode`\n- Updated shadow utils to accepts a second
`options` argument and return\nborders in high contrast
mode:\n([#8444](https://github.com/elastic/eui/pull/8444))\n -
`euiShadow`\n - `euiShadowXSmall`\n - `euiShadowSmall`\n -
`euiShadowMedium`\n - `euiShadowLarge`\n - `euiSlightShadowHover`\n -
`euiShadowFlat`\n \n ---\n \n###
`@elastic/eui-theme-borealis`\n[`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0)\n\n-
Added new component level
tokens:\n([#8444](https://github.com/elastic/eui/pull/8444))\n -
`buttonGroupBackgroundDisabledSelected`\n - `overlayMaskBackground`\n -
`overlayMaskBackgroundHighContrast`\n -
`skeletonBackgroundSkeletonMiddleHighContrast`\n \n\n## Additional
changes\n\nThe latest `@elastic/eui` package introduces high contrast
mode support.\nThis PR sets all usages of `EuiProvider` to
use\n`highContrastMode={false}` to introduce it in disabled state
(this\nreflects the current functionality in Kibana). This is because
the UI\nfor the high contrast mode functionality (and style adjustments)
need to\nfirst be implemented on Kibana side (by shared-ux).\n\n##
QA\n\nAdding high contrast mode in disabled state should result in no
visual\nchanges in Kibana. Please ensure your product view remain
unchanged.\n\n---------\n\nCo-authored-by: Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"2cd777d96909a73bab547cc3e3f509fc7ef916af"}}]}]
BACKPORT-->

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: mgadewoll

examples/data_view_field_editor_example/public/app.tsx

@@ -136,7 +136,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
   );
 
   return (
-    <EuiProvider>
+    <EuiProvider highContrastMode={false}>
       <EuiPageTemplate offset={0}>
         <EuiPageTemplate.Header pageTitle="Data view field editor demo" />
         <EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>

examples/error_boundary/public/plugin.tsx

@@ -79,7 +79,7 @@ export class ErrorBoundaryExamplePlugin implements Plugin<void, void, SetupDeps>
         // Using the "EuiProvider" here rather than KibanaRenderContextProvider, because KibanaRenderContextProvider
         // wraps KibanaErrorBoundaryProvider and KibanaErrorBoundary and we want to test it directly, not a wrapper.
         ReactDOM.render(
-          <EuiProvider>
+          <EuiProvider highContrastMode={false}>
             <KibanaErrorBoundaryProvider analytics={core.analytics}>
               <KibanaErrorBoundary>
                 <KibanaPageTemplate>

examples/esql_ast_inspector/public/app.tsx

@@ -14,7 +14,7 @@ import { EsqlInspector } from './components/esql_inspector';
 
 export const App = () => {
   return (
-    <EuiProvider>
+    <EuiProvider highContrastMode={false}>
       <EuiPage>
         <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
           <EuiPageHeader paddingSize="s" bottomBorder={true} pageTitle="ES|QL AST Inspector" />

examples/field_formats_example/public/app.tsx

@@ -168,7 +168,7 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
 
 export const App: React.FC<{ deps: Deps }> = (props) => {
   return (
-    <EuiProvider>
+    <EuiProvider highContrastMode={false}>
       <EuiPageTemplate offset={0}>
         <EuiPageTemplate.Header pageTitle="Field formats examples" />
         <EuiPageTemplate.Section grow={false}>

examples/files_example/public/components/app.tsx

@@ -133,7 +133,7 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
   ];
 
   return (
-    <EuiProvider>
+    <EuiProvider highContrastMode={false}>
       <EuiPageTemplate restrictWidth>
         <EuiPageTemplate.Header pageTitle="Files example" />
         <EuiPageTemplate.Section>

examples/partial_results_example/public/app/app.tsx

@@ -42,7 +42,7 @@ export function App() {
   }, [expressions]);
 
   return (
-    <EuiProvider>
+    <EuiProvider highContrastMode={false}>
       <EuiPageTemplate offset={0}>
         <EuiPageTemplate.Header pageTitle="Partial Results Demo" />
         <EuiPageTemplate.Section>

package.json

@@ -123,8 +123,8 @@
     "@elastic/ecs": "^8.11.5",
     "@elastic/elasticsearch": "^8.17.0",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "100.0.0",
-    "@elastic/eui-theme-borealis": "0.0.11",
+    "@elastic/eui": "101.0.1",
+    "@elastic/eui-theme-borealis": "0.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "^1.2.3",
     "@elastic/numeral": "^2.5.1",

src/dev/license_checker/config.ts

@@ -88,8 +88,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@100.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-theme-borealis@0.0.11': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@101.0.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@0.1.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@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/private/kbn-panel-loader/index.tsx

@@ -35,7 +35,7 @@ export const PanelLoader = (props: {
       hasBorder={props.showBorder}
       data-test-subj={props.dataTestSubj}
     >
-      <EuiLoadingChart size="l" mono />
+      <EuiLoadingChart size="l" />
     </EuiPanel>
   );
 };

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/log_level_badge_cell/log_level_badge_cell.test.tsx

@@ -18,7 +18,7 @@ import { DataTableRecord, buildDataTableRecord } from '@kbn/discover-utils';
 const renderCell = (logLevelField: string, record: DataTableRecord) => {
   const LogLevelBadgeCell = getLogLevelBadgeCell(logLevelField);
   render(
-    <EuiProvider>
+    <EuiProvider highContrastMode={false}>
       <LogLevelBadgeCell
         rowIndex={0}
         colIndex={0}