chore(slo): update EUI tokens for Borealis (elastic#204066)

lukasolson · Dec 16, 2024 · 7fd9d7c · 7fd9d7c
1 parent d638475
commit 7fd9d7c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/...ns/observability/plugins/slo/public/pages/slo_details/components/timeslice_annotation.tsx b/...ns/observability/plugins/slo/public/pages/slo_details/components/timeslice_annotation.tsx
@@ -35,7 +35,7 @@ export function TimesliceAnnotation({ slo, maxValue, minValue }: Props) {
         style={{
           line: {
             strokeWidth: 2,
-            stroke: euiTheme.colors.warning || '#000',
+            stroke: euiTheme.colors.warning,
             opacity: 1,
           },
         }}
@@ -55,7 +55,7 @@ export function TimesliceAnnotation({ slo, maxValue, minValue }: Props) {
           },
         ]}
         id="thresholdShade"
-        style={{ fill: euiTheme.colors.warning || '#000', opacity: 0.1 }}
+        style={{ fill: euiTheme.colors.warning, opacity: 0.1 }}
       />
     </>
   ) : null;

diff --git a/...utions/observability/plugins/slo/public/pages/slos/components/card_view/slo_card_item.tsx b/...utions/observability/plugins/slo/public/pages/slos/components/card_view/slo_card_item.tsx
@@ -6,7 +6,7 @@
  */
 
 import { Chart, isMetricElementEvent, Metric, MetricTrendShape, Settings } from '@elastic/charts';
-import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiIcon, EuiPanel, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -20,9 +20,9 @@ import moment from 'moment';
 import React, { useState } from 'react';
 import { SloDeleteModal } from '../../../../components/slo/delete_confirmation_modal/slo_delete_confirmation_modal';
 import { SloResetConfirmationModal } from '../../../../components/slo/reset_confirmation_modal/slo_reset_confirmation_modal';
+import { useKibana } from '../../../../hooks/use_kibana';
 import { useResetSlo } from '../../../../hooks/use_reset_slo';
 import { BurnRateRuleParams } from '../../../../typings';
-import { useKibana } from '../../../../hooks/use_kibana';
 import { formatHistoricalData } from '../../../../utils/slo/chart_data_formatter';
 import { useSloListActions } from '../../hooks/use_slo_list_actions';
 import { useSloFormattedSummary } from '../../hooks/use_slo_summary';
@@ -44,11 +44,12 @@ export interface Props {
 }
 
 export const useSloCardColor = (status?: SLOWithSummaryResponse['summary']['status']) => {
+  const { euiTheme } = useEuiTheme();
   const colors = {
-    DEGRADING: useEuiBackgroundColor('warning'),
-    VIOLATED: useEuiBackgroundColor('danger'),
-    HEALTHY: useEuiBackgroundColor('success'),
-    NO_DATA: useEuiBackgroundColor('subdued'),
+    DEGRADING: euiTheme.colors.backgroundBaseWarning,
+    VIOLATED: euiTheme.colors.backgroundBaseDanger,
+    HEALTHY: euiTheme.colors.backgroundBaseSuccess,
+    NO_DATA: euiTheme.colors.backgroundBaseSubdued,
   };
 
   return { cardColor: colors[status ?? 'NO_DATA'], colors };

diff --git a/...ns/observability/plugins/slo/public/pages/slos/components/slos_overview/slos_overview.tsx b/...ns/observability/plugins/slo/public/pages/slos/components/slos_overview/slos_overview.tsx
@@ -96,7 +96,7 @@ export function SLOsOverview() {
               tooltip={i18n.translate('xpack.slo.sLOsOverview.euiStat.degradingLabel.tooltip', {
                 defaultMessage: 'Click to filter SLOs by Degrading status.',
               })}
-              titleColor={theme.colors.warningText}
+              titleColor={theme.colors.textWarning}
             />
             <OverviewItem
               title={data?.stale}