[SecuritySolution] Apply different color tokens for themes (#206254)

## Summary

Previous changes applied same tokens for Borealis and Amsterdam:
https://github.com/elastic/kibana/pull/204631#issuecomment-2573415425

PR above causes color changes to the current theme, after discussing
with UX, we decide to maintain different color tokens until Borealis is
launched. This PR should revert the color changed on Amsterdam by the
previous PR and only apply the new color for Borealis.

| Current and Amsterdam | Borealis  |
|-------------------------|----------|
|Source: Hard coded: `#d36186`|Source: `euiColorVis4` - `#EE72A6` |
|Dest: Hard coded: `#9170b8` |Dest: `euiColorVis2` - `#61A2FF`|

### Host IPs:

| Current and Amsterdam | Borealis  |
|-------------------------|----------|
|<img width="2560" alt="host_IPs"
src="https://github.com/user-attachments/assets/c0f9f317-fb02-4c96-8422-c1d2484f4636"
/>|<img width="2560" alt="host_bor_light"
src="https://github.com/user-attachments/assets/451d6604-1d7c-4a2e-82c3-74b2499852d2"
/>|
|<img width="2558" alt="host_IPs_dark"
src="https://github.com/user-attachments/assets/ac45a3ac-ecaf-46b6-91d9-68704d8639ee"
/>|<img width="2553" alt="host_bor_dark"
src="https://github.com/user-attachments/assets/e34e56fd-8202-4a3c-80c1-996718320fd8"
/>|

### Network IPs:

| Current and Amsterdam | Borealis  |
|-------------------------|----------|
|<img width="2557" alt="network_IPs"
src="https://github.com/user-attachments/assets/0e0b33d9-55b7-41a5-8910-11b80e539398"
/>|<img width="2559" alt="network_bor_light"
src="https://github.com/user-attachments/assets/f616b3ab-5032-4e69-b67e-cde39b88ea5f"
/>|
|<img width="2558" alt="host_IPs_dark"
src="https://github.com/user-attachments/assets/9613a49f-f0c6-4b63-aa56-c960fac175fc"
/>|<img width="2560" alt="network_bor_dark"
src="https://github.com/user-attachments/assets/911f0509-43ea-428a-94d6-9ce01f5425ac"
/>|



### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.


- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/solutions/security/plugins/security_solution/public/common/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;

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_area.test.ts.snap

@@ -199,7 +199,7 @@ Object {
           "xAccessor": "a0cb6400-f708-46c3-ad96-24788f12dae4",
           "yConfig": Array [
             Object {
-              "color": "#CA8EAE",
+              "color": "#d36186",
               "forAccessor": "d9a6eb6b-8b78-439e-98e7-a718f8ffbebe",
             },
           ],
@@ -214,7 +214,7 @@ Object {
           "xAccessor": "95e74e6-99dd-4b11-8faf-439b4d959df9",
           "yConfig": Array [
             Object {
-              "color": "#D36086",
+              "color": "#9170b8",
               "forAccessor": "e7052671-fb9e-481f-8df3-7724c98cfc6f",
             },
           ],

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/__snapshots__/kpi_unique_ips_bar.test.ts.snap

@@ -212,7 +212,7 @@ Object {
           "xAccessor": "f8bfa719-5c1c-4bf2-896e-c318d77fc08e",
           "yConfig": Array [
             Object {
-              "color": "#CA8EAE",
+              "color": "#d36186",
               "forAccessor": "32f66676-f4e1-48fd-b7f8-d4de38318601",
             },
           ],
@@ -227,7 +227,7 @@ Object {
           "xAccessor": "c72aad6a-fc9c-43dc-9194-e13ca3ee8aff",
           "yConfig": Array [
             Object {
-              "color": "#D36086",
+              "color": "#9170b8",
               "forAccessor": "b7e59b08-96e6-40d1-84fd-e97b977d1c47",
             },
           ],

x-pack/solutions/security/plugins/security_solution/public/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,9 +90,7 @@ 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],
@@ -99,9 +98,7 @@ export const getKpiUniqueIpsAreaLensAttributes: GetLensAttributes = ({ euiTheme
             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 },

x-pack/solutions/security/plugins/security_solution/public/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,7 +97,7 @@ 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],
@@ -104,9 +105,7 @@ export const getKpiUniqueIpsBarLensAttributes: GetLensAttributes = ({ euiTheme }
             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 },

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_area.test.ts.snap

@@ -223,7 +223,7 @@ Object {
           "xAccessor": "662cd5e5-82bf-4325-a703-273f84b97e09",
           "yConfig": Array [
             Object {
-              "color": "#CA8EAE",
+              "color": "#d36186",
               "forAccessor": "5f317308-cfbb-4ee5-bfb9-07653184fabf",
             },
           ],
@@ -238,7 +238,7 @@ Object {
           "xAccessor": "36444b8c-7e10-4069-8298-6c1b46912be2",
           "yConfig": Array [
             Object {
-              "color": "#D36086",
+              "color": "#9170b8",
               "forAccessor": "ac1eb80c-ddde-46c4-a90c-400261926762",
             },
           ],

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/kpi_unique_private_ips_bar.test.ts.snap

@@ -238,7 +238,7 @@ Object {
           "xAccessor": "d9c438c5-f776-4436-9d20-d62dc8c03be8",
           "yConfig": Array [
             Object {
-              "color": "#CA8EAE",
+              "color": "#d36186",
               "forAccessor": "5acd4c9d-dc3b-4b21-9632-e4407944c36d",
             },
           ],
@@ -253,7 +253,7 @@ Object {
           "xAccessor": "4607c585-3af3-43b9-804f-e49b27796d79",
           "yConfig": Array [
             Object {
-              "color": "#D36086",
+              "color": "#9170b8",
               "forAccessor": "d27e0966-daf9-41f4-9033-230cf1e76dc9",
             },
           ],

x-pack/solutions/security/plugins/security_solution/public/common/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),
               },
             ],
           },

x-pack/solutions/security/plugins/security_solution/public/common/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,

x-pack/solutions/security/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,7 +34,7 @@ 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,
           },
@@ -38,7 +42,7 @@ export const useGetUniqueIpsStatItems: () => Readonly<StatItems[]> = () => {
             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]
   );
 };
 

x-pack/solutions/security/plugins/security_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,7 +34,7 @@ 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,
           },
@@ -38,7 +42,7 @@ export const useGetUniquePrivateIpsStatItems: () => Readonly<StatItems[]> = () =
             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]
   );
 };