[8.18] [SecuritySolution] Apply different color tokens for themes (#2…

…06254) (#210994) # Backport This will backport the following commits from `main` to `8.18`: - [[SecuritySolution] Apply different color tokens for themes (#206254)](#206254)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Feb 13, 2025 · d756ddb · d756ddb
1 parent 788df36
commit d756ddb
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 28 deletions.
diff --git a/...ommon/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette.ts b/...ommon/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import type { EuiThemeComputed } from '@elastic/eui';
+
+export const getDestinationIpColor = (euiTheme: EuiThemeComputed) =>
+  euiTheme.flags.hasVisColorAdjustment ? '#9170b8' : euiTheme.colors.vis.euiColorVis2;
+
+export const getSourceIpColor = (euiTheme: EuiThemeComputed) =>
+  euiTheme.flags.hasVisColorAdjustment ? '#d36186' : euiTheme.colors.vis.euiColorVis4;
diff --git a/...isualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap b/...isualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap
diff --git a/...visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap b/...visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap
diff --git a/...blic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts b/...blic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts
@@ -7,6 +7,7 @@
 
 import { DESTINATION_CHART_LABEL, SOURCE_CHART_LABEL } from '../../translations';
 import type { GetLensAttributes, LensAttributes } from '../../types';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 
 const columnSourceTimestamp = 'a0cb6400-f708-46c3-ad96-24788f12dae4';
 const columnSourceUniqueIp = 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe';
@@ -89,19 +90,15 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme
             layerType: 'data',
             seriesType: 'area',
             xAccessor: columnSourceTimestamp,
-            yConfig: [
-              { color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnSourceUniqueIp },
-            ],
+            yConfig: [{ color: getSourceIpColor(euiTheme), forAccessor: columnSourceUniqueIp }],
           },
           {
             accessors: [columnDestinationIp],
             layerId: layerDestinationIp,
             layerType: 'data',
             seriesType: 'area',
             xAccessor: columnDestinationTimestamp,
-            yConfig: [
-              { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnDestinationIp },
-            ],
+            yConfig: [{ color: getDestinationIpColor(euiTheme), forAccessor: columnDestinationIp }],
           },
         ],
         legend: { isVisible: false, position: 'right', showSingleSeries: false },

diff --git a/...ublic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts b/...ublic/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts
@@ -7,6 +7,7 @@
 
 import type { GetLensAttributes, LensAttributes } from '../../types';
 import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 const columnSourceIp = '32f66676-f4e1-48fd-b7f8-d4de38318601';
 const columnSourceFilter = 'f8bfa719-5c1c-4bf2-896e-c318d77fc08e';
 
@@ -96,17 +97,15 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme }
             layerType: 'data',
             seriesType: 'bar_horizontal_stacked',
             xAccessor: columnSourceFilter,
-            yConfig: [{ color: euiTheme.colors.vis.euiColorVis4, forAccessor: columnSourceIp }],
+            yConfig: [{ color: getSourceIpColor(euiTheme), forAccessor: columnSourceIp }],
           },
           {
             accessors: [columnDestinationIp],
             layerId: layerDestinationIp,
             layerType: 'data',
             seriesType: 'bar_horizontal_stacked',
             xAccessor: columnDestinationFilter,
-            yConfig: [
-              { color: euiTheme.colors.vis.euiColorVis2, forAccessor: columnDestinationIp },
-            ],
+            yConfig: [{ color: getDestinationIpColor(euiTheme), forAccessor: columnDestinationIp }],
           },
         ],
         legend: { isVisible: false, position: 'right', showSingleSeries: false },

diff --git a/...on_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap b/...on_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap
diff --git a/...ion_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap b/...ion_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap
diff --git a/...n/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts b/...n/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area.ts
@@ -6,6 +6,7 @@
  */
 import { DESTINATION_CHART_LABEL, SOURCE_CHART_LABEL } from '../../translations';
 import type { LensAttributes, GetLensAttributes } from '../../types';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 
 const columnTimestamp = '662cd5e5-82bf-4325-a703-273f84b97e09';
 const columnSourceIp = '5f317308-cfbb-4ee5-bfb9-07653184fabf';
@@ -66,7 +67,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ eu
             yConfig: [
               {
                 forAccessor: columnSourceIp,
-                color: euiTheme.colors.vis.euiColorVis4,
+                color: getSourceIpColor(euiTheme),
               },
             ],
           },
@@ -79,7 +80,7 @@ export const getKpiUniquePrivateIpsAreaLensAttributes: GetLensAttributes = ({ eu
             yConfig: [
               {
                 forAccessor: columnDestinationIp,
-                color: euiTheme.colors.vis.euiColorVis2,
+                color: getDestinationIpColor(euiTheme),
               },
             ],
           },

diff --git a/...on/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts b/...on/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar.ts
@@ -7,6 +7,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import { SOURCE_CHART_LABEL, DESTINATION_CHART_LABEL, UNIQUE_COUNT } from '../../translations';
 import type { LensAttributes, GetLensAttributes } from '../../types';
+import { getDestinationIpColor, getSourceIpColor } from '../common/utils/unique_ips_palette';
 
 const columnSourceIp = uuidv4();
 const columnSourceIpFilter = uuidv4();
@@ -69,7 +70,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ eui
             yConfig: [
               {
                 forAccessor: columnSourceIp,
-                color: euiTheme.colors.vis.euiColorVis4,
+                color: getSourceIpColor(euiTheme),
               },
             ],
             xAccessor: columnSourceIpFilter,
@@ -82,7 +83,7 @@ export const getKpiUniquePrivateIpsBarLensAttributes: GetLensAttributes = ({ eui
             yConfig: [
               {
                 forAccessor: columnDestinationIp,
-                color: euiTheme.colors.vis.euiColorVis2,
+                color: getDestinationIpColor(euiTheme),
               },
             ],
             xAccessor: columnDestinationIpFilter,

diff --git a/.../plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx b/.../plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx
@@ -16,6 +16,10 @@ import { kpiUniqueIpsSourceMetricLensAttributes } from '../../../../../common/co
 import { KpiBaseComponent } from '../../../../components/kpi';
 import type { HostsKpiProps } from '../types';
 import * as i18n from './translations';
+import {
+  getDestinationIpColor,
+  getSourceIpColor,
+} from '../../../../../common/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette';
 
 export const ID = 'hostsKpiUniqueIpsQuery';
 
@@ -30,15 +34,15 @@ export const useGetUniqueIpsStatItems: () => Readonly<StatItems[]> = () => {
             key: 'uniqueSourceIps',
             name: i18n.SOURCE_CHART_LABEL,
             description: i18n.SOURCE_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis4,
+            color: getSourceIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniqueIpsSourceMetricLensAttributes,
           },
           {
             key: 'uniqueDestinationIps',
             name: i18n.DESTINATION_CHART_LABEL,
             description: i18n.DESTINATION_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis2,
+            color: getDestinationIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniqueIpsDestinationMetricLensAttributes,
           },
@@ -50,7 +54,7 @@ export const useGetUniqueIpsStatItems: () => Readonly<StatItems[]> = () => {
         getBarChartLensAttributes: getKpiUniqueIpsBarLensAttributes,
       },
     ],
-    [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4]
+    [euiTheme]
   );
 };
 

diff --git a/...urity_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx b/...urity_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx
@@ -16,6 +16,10 @@ import { kpiUniquePrivateIpsDestinationMetricLensAttributes } from '../../../../
 import { getKpiUniquePrivateIpsAreaLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_area';
 import { getKpiUniquePrivateIpsBarLensAttributes } from '../../../../../common/components/visualization_actions/lens_attributes/network/kpi_unique_private_ips_bar';
 import { KpiBaseComponent } from '../../../../components/kpi';
+import {
+  getDestinationIpColor,
+  getSourceIpColor,
+} from '../../../../../common/components/visualization_actions/lens_attributes/common/utils/unique_ips_palette';
 
 export const ID = 'networkKpiUniquePrivateIpsQuery';
 
@@ -30,15 +34,15 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly<StatItems[]> = () =
             key: 'uniqueSourcePrivateIps',
             name: i18n.SOURCE_CHART_LABEL,
             description: i18n.SOURCE_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis4,
+            color: getSourceIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniquePrivateIpsSourceMetricLensAttributes,
           },
           {
             key: 'uniqueDestinationPrivateIps',
             name: i18n.DESTINATION_CHART_LABEL,
             description: i18n.DESTINATION_UNIT_LABEL,
-            color: euiTheme.colors.vis.euiColorVis2,
+            color: getDestinationIpColor(euiTheme),
             icon: 'visMapCoordinate',
             lensAttributes: kpiUniquePrivateIpsDestinationMetricLensAttributes,
           },
@@ -50,7 +54,7 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly<StatItems[]> = () =
         getBarChartLensAttributes: getKpiUniquePrivateIpsBarLensAttributes,
       },
     ],
-    [euiTheme.colors.vis.euiColorVis2, euiTheme.colors.vis.euiColorVis4]
+    [euiTheme]
   );
 };