Update EUI to v102.0.0

package.json

@@ -125,8 +125,8 @@
     "@elastic/ecs": "^8.11.5",
     "@elastic/elasticsearch": "9.0.0-alpha.4",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "101.4.0",
-    "@elastic/eui-theme-borealis": "0.2.0",
+    "@elastic/eui": "102.0.0",
+    "@elastic/eui-theme-borealis": "1.0.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@101.4.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-theme-borealis@0.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@102.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@1.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@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx

@@ -36,23 +36,19 @@ export const SeverityHealth: React.FC<Props> = ({ severity }) => {
 
   const severityData = {
     low: {
-      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.neutral,
       label: LOW,
     },
     medium: {
-      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning,
       label: MEDIUM,
     },
     high: {
-      color: isAmsterdam
-        ? euiTheme.colors.vis.euiColorVis7
-        : euiTheme.colors.vis.euiColorSeverity10,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.severity.risk,
       label: HIGH,
     },
     critical: {
-      color: isAmsterdam
-        ? euiTheme.colors.vis.euiColorVis9
-        : euiTheme.colors.vis.euiColorSeverity14,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger,
       label: CRITICAL,
     },
   };

x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx

@@ -101,6 +101,16 @@ const InContextMenuActions = (props: LayerActionsProps) => {
     }
   }, [isPopoverOpen]);
 
+  // `neutral` and `risk` variants belong to `severity` so they're not
+  // available in `euiTheme.colors` directly
+  const getColorFromTheme = useCallback(
+    (color: LayerAction['color']) =>
+      color === 'risk' || color === 'neutral'
+        ? euiTheme.colors.severity[color]
+        : euiTheme.colors[color!],
+    [euiTheme]
+  );
+
   return (
     <EuiOutsideClickDetector onOutsideClick={closePopover}>
       <EuiPopover
@@ -144,9 +154,9 @@ const InContextMenuActions = (props: LayerActionsProps) => {
               {...(i.color
                 ? {
                     css: css`
-                      color: ${euiTheme.colors[i.color]};
+                      color: ${getColorFromTheme(i.color)};
                       &:hover {
-                        text-decoration-color: ${euiTheme.colors[i.color]} !important;
+                        text-decoration-color: ${getColorFromTheme(i.color)} !important;
                       }
                     `,
                     size: 's', // need to be explicit here as css prop will disable the default small size

x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx

@@ -35,23 +35,19 @@ export const SeverityFilter: React.FC<Props> = ({ selectedSeverity, onSeverityCh
 
   const severities = {
     [CaseSeverity.LOW]: {
-      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.neutral,
       label: i18n.SEVERITY_LOW_LABEL,
     },
     [CaseSeverity.MEDIUM]: {
-      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning,
       label: i18n.SEVERITY_MEDIUM_LABEL,
     },
     [CaseSeverity.HIGH]: {
-      color: isAmsterdam
-        ? euiTheme.colors.vis.euiColorVis7
-        : euiTheme.colors.vis.euiColorSeverity10,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis7 : euiTheme.colors.severity.risk,
       label: i18n.SEVERITY_HIGH_LABEL,
     },
     [CaseSeverity.CRITICAL]: {
-      color: isAmsterdam
-        ? euiTheme.colors.vis.euiColorVis9
-        : euiTheme.colors.vis.euiColorSeverity14,
+      color: isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger,
       label: i18n.SEVERITY_CRITICAL_LABEL,
     },
   };

x-pack/solutions/observability/plugins/apm/common/service_health_status.ts

@@ -42,15 +42,11 @@ export function getServiceHealthStatusColor(
 
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return isAmsterdam
-        ? euiTheme.colors.vis.euiColorVis0
-        : euiTheme.colors.vis.euiColorVisSuccess0;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.severity.success;
     case ServiceHealthStatus.warning:
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorVis9;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.severity.warning;
     case ServiceHealthStatus.critical:
-      return isAmsterdam
-        ? euiTheme.colors.vis.euiColorVis9
-        : euiTheme.colors.vis.euiColorSeverity14;
+      return isAmsterdam ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.severity.danger;
     case ServiceHealthStatus.unknown:
       return euiTheme.colors.mediumShade;
   }
@@ -66,15 +62,15 @@ export function getServiceHealthStatusBadgeColor(
     case ServiceHealthStatus.healthy:
       return isAmsterdam
         ? euiTheme.colors.vis.euiColorVisBehindText0
-        : euiTheme.colors.vis.euiColorVisSuccess0;
+        : euiTheme.colors.severity.success;
     case ServiceHealthStatus.warning:
       return isAmsterdam
         ? euiTheme.colors.vis.euiColorVisBehindText5
-        : euiTheme.colors.vis.euiColorVis9;
+        : euiTheme.colors.severity.warning;
     case ServiceHealthStatus.critical:
       return isAmsterdam
         ? euiTheme.colors.vis.euiColorVisBehindText9
-        : euiTheme.colors.vis.euiColorSeverity12;
+        : euiTheme.colors.severity.risk;
     case ServiceHealthStatus.unknown:
       return euiTheme.colors.mediumShade;
   }

x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx

@@ -20,6 +20,7 @@ export function RootCauseAnalysisPanel({
 }) {
   const theme = useTheme();
 
+  const isSeverityColor = color === 'risk' || color === 'neutral';
   const panelClassName =
     color &&
     color !== 'transparent' &&
@@ -28,7 +29,10 @@ export function RootCauseAnalysisPanel({
     color !== 'highlighted'
       ? css`
           border: 1px solid;
-          border-color: ${rgba(theme.colors[color], 0.25)};
+          border-color: ${rgba(
+            isSeverityColor ? theme.colors.severity[color] : theme.colors[color],
+            0.25
+          )};
         `
       : undefined;
 

yarn.lock

@@ -2167,26 +2167,26 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.2.0.tgz#0f32724e394f3bfa35d18ef8fa2e79da47191779"
   integrity sha512-EDp5FP8nbzGXwAMWM2xo6SL2LdsUwEVrt6idE8AoW45KybuJZ9Dr8IB8z6+wCr7Jxrg+nwdst039LpaslDur+g==
 
-"@elastic/eui-theme-borealis@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-0.2.0.tgz#abfe2776778be05d65a60ba02e936c2203bb1549"
-  integrity sha512-3gD60+QR4cWeCqC8OG6hXyO3xeagQ0chMBe+zZJE7qBcYXuPqGhaFb78rEI1BNniEm+pyUiGN88FQtLaoHInNw==
+"@elastic/eui-theme-borealis@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841"
+  integrity sha512-Zf3ZX5siUhF+TNOdP0FZ3PNEpVmfe3DDXFm5biAKFlGp4e5yrR1FKPYOzkOdJtPWlOoNaedawnALXNVjp1UH8w==
 
-"@elastic/eui-theme-common@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-0.2.0.tgz#570a988f58c24076c6f867475e70930769f3cff5"
-  integrity sha512-g2n38Uk4G9UqQU/wim+ZKWusWtO1bdudvDy/7+sdCYaxtgbINT5hhMHoU9M49D+7FJSsPuHn7gVfdYKMN9bTdQ==
+"@elastic/eui-theme-common@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.0.0.tgz#c5e7b7597c4ebe71fc533b18458415a14a93794d"
+  integrity sha512-9+P21npVm05OmFr0OPkA5DSdts9teOo/OEotbJFAVkqBLkNf+Eevv6q89B8eQ6r383RnVwTl7vBzb6M9PnULJg==
   dependencies:
     "@types/lodash" "^4.14.202"
     chroma-js "^2.4.2"
     lodash "^4.17.21"
 
-"@elastic/eui@101.4.0":
-  version "101.4.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-101.4.0.tgz#2db2d7163e2a317b514b6308197173655ff2ac4b"
-  integrity sha512-oKmlsjBMp4DSdu34YUqQD821Fov46mJ4nPHkWAUIHCv3+5PfAeK7NpVBEnyVZW5LTo+sAANqLN5mJFsovR8NZg==
+"@elastic/eui@102.0.0":
+  version "102.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.0.0.tgz#dda965d92eb46bf061aac8d0219218779aea28bb"
+  integrity sha512-o4BuXdyGLTAJOBMIUVovDaDmmW+RJgKG6XdIDds7aJyQFlcqIOHgM59yCorzEHhpPAuaYparShJE/vug2dJAIQ==
   dependencies:
-    "@elastic/eui-theme-common" "0.2.0"
+    "@elastic/eui-theme-common" "1.0.0"
     "@elastic/prismjs-esql" "^1.1.0"
     "@hello-pangea/dnd" "^16.6.0"
     "@types/lodash" "^4.14.202"