(Accessibility) Fix contrast issues in Search Profiler

x-pack/platform/plugins/shared/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_table.tsx

@@ -29,7 +29,7 @@ export const HighlightDetailsTable = ({ breakdown }: Props) => {
     {
       name: 'Time',
       render: (item: BreakdownItem) => (
-        <EuiBadge style={{ backgroundColor: item.color }}>
+        <EuiBadge color={item.color}>
           <span>{item.key.endsWith('_count') ? item.time : nsToPretty(item.time, 1)}</span>
         </EuiBadge>
       ),

x-pack/platform/plugins/shared/searchprofiler/public/application/components/percentage_badge/_percentage_badge.scss

@@ -1,13 +1,13 @@
-@mixin prfDevToolProgress($color: tintOrShade($euiColorPrimary, 60%, 60%)) {
+@mixin prfDevToolProgress($color: $euiColorBackgroundLightPrimary) {
   border: none;
   display: block;
   background-image:
     linear-gradient(
       to right,
       $color 0%,
       $color var(--prfDevToolProgressPercentage, auto),
-      $euiColorLightestShade var(--prfDevToolProgressPercentage, auto),
-      $euiColorLightestShade 100%
+      $euiColorBackgroundBaseSubdued var(--prfDevToolProgressPercentage, auto),
+      $euiColorBackgroundBaseSubdued 100%
     );
 
   .prfDevTool__progress--percent-ie {
@@ -22,10 +22,8 @@
   }
 
   &__progress--time {
-    @include prfDevToolProgress(#FFAFAF);
-    background-color: #F5F5F5; // Must be light at all times
+    @include prfDevToolProgress($euiColorBackgroundLightDanger);
     // Width of 3 badges, with the last child not having padding on the left
     width: ($badgeSize * 3) - ($euiSizeXS * .75);
-    // Force text to always be dark on top of white -> pink color
   }
 }

x-pack/platform/plugins/shared/searchprofiler/public/application/components/percentage_badge/percentage_badge.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiBadge } from '@elastic/eui';
+import { EuiBadge, useEuiTheme } from '@elastic/eui';
 import classNames from 'classnames';
 
 interface Props {
@@ -22,13 +22,16 @@ interface Props {
  * how far the percent bar should be drawn.
  */
 export const PercentageBadge = ({ timePercentage, label, valueType = 'percent' }: Props) => {
+  const { euiTheme } = useEuiTheme();
+
   return (
     <EuiBadge
       className={classNames({
         'prfDevTool__percentBadge__progress--percent': valueType === 'percent',
         'prfDevTool__percentBadge__progress--time': valueType === 'time',
         'euiTextAlign--center': true,
       })}
+      color={euiTheme.colors.backgroundBaseSubdued}
       style={{ '--prfDevToolProgressPercentage': timePercentage + '%' } as any}
     >
       <span className="prfDevTool__progress--percent-ie" style={{ width: timePercentage + '%' }} />

x-pack/platform/plugins/shared/searchprofiler/public/application/components/profile_tree/_profile_tree.scss

@@ -69,8 +69,6 @@
   &__badge {
     border: none;
     display: block;
-    // Force text to always be dark on top of white -> pink color
-    color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightestShade);
   }
 
   &__panel {

x-pack/platform/plugins/shared/searchprofiler/public/application/components/profile_tree/shard_details/shard_details_tree_node.tsx

@@ -59,7 +59,7 @@ export const ShardDetailsTreeNode = ({ operation, index, shard }: Props) => {
       <div className="prfDevTool__profileTree__cell prfDevTool__profileTree__time euiTextAlign--center">
         <EuiBadge
           className="prfDevTool__profileTree__badge euiTextAlign--center"
-          style={{ backgroundColor: op.absoluteColor }}
+          color={op.absoluteColor}
         >
           {msToPretty(op.selfTime || 0, 1)}
         </EuiBadge>
@@ -68,7 +68,7 @@ export const ShardDetailsTreeNode = ({ operation, index, shard }: Props) => {
       <div className="prfDevTool__profileTree__cell prfDevTool__profileTree__totalTime">
         <EuiBadge
           className="prfDevTool__profileTree__badge euiTextAlign--center"
-          style={{ backgroundColor: op.absoluteColor }}
+          color={op.absoluteColor}
         >
           {msToPretty(op.time, 1)}
         </EuiBadge>

x-pack/platform/plugins/shared/searchprofiler/public/application/components/profile_tree/unsafe_utils.ts

@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import tinycolor from 'tinycolor2';
 import _ from 'lodash';
 
+import { euiThemeVars } from '@kbn/ui-theme';
 import { BreakdownItem, Index, Operation, Shard, Targets } from '../../types';
 import { IndexMap } from './types';
 import { MAX_TREE_DEPTH } from './constants';
@@ -103,7 +104,13 @@ export function normalizeBreakdown(breakdown: Record<string, number>) {
         key,
         time: breakdown[key],
         relative,
-        color: tinycolor.mix('#F5F5F5', '#FFAFAF', relative).toHexString(),
+        color: tinycolor
+          .mix(
+            euiThemeVars.euiColorBackgroundBaseSubdued,
+            euiThemeVars.euiColorBackgroundLightDanger,
+            relative
+          )
+          .toHexString(),
         tip: getToolTip(key),
       });
     });
@@ -148,15 +155,25 @@ export function normalizeIndices(indices: IndexMap, target: Targets) {
     index.shards.sort(sortQueryComponents);
     for (const shard of index.shards) {
       shard.relative = ((shard.time / index.time) * 100).toFixed(2);
-      shard.color = tinycolor.mix('#F5F5F5', '#FFAFAF', shard.relative as any).toHexString();
+      shard.color = tinycolor
+        .mix(
+          euiThemeVars.euiColorBackgroundBaseSubdued,
+          euiThemeVars.euiColorBackgroundLightDanger,
+          shard.relative as any
+        )
+        .toHexString();
     }
   }
 }
 
 export function normalizeTime(operation: Operation, totalTime: number) {
   operation.timePercentage = ((timeInMilliseconds(operation) / totalTime) * 100).toFixed(2);
   operation.absoluteColor = tinycolor
-    .mix('#F5F5F5', '#FFAFAF', +operation.timePercentage)
+    .mix(
+      euiThemeVars.euiColorBackgroundBaseSubdued,
+      euiThemeVars.euiColorBackgroundLightDanger,
+      +operation.timePercentage
+    )
     .toHexString();
 }