[Backport 2.x] Feat mitigate to oui style variables

public/components/monitoring/index.scss

@@ -15,7 +15,7 @@
   .ml-modelModelIdText {
     &:hover{
       cursor: pointer;
-      color: #006BB4;
+      color: $ouiLinkColor;
       text-decoration: underline;
     }
   }

public/components/monitoring/index.tsx

@@ -14,7 +14,6 @@ import {
 } from '@elastic/eui';
 import React, { useState, useRef, useCallback } from 'react';
 
-import { useUiSetting } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { ModelDeploymentProfile } from '../../apis/profile';
 import { RefreshInterval } from '../common/refresh_interval';
 import { PreviewPanel } from '../preview_panel';
@@ -36,7 +35,6 @@ export const Monitoring = () => {
     reload,
     searchByStatus,
   } = useMonitoring();
-  const darkMode = useUiSetting<boolean>('theme:darkMode');
   const [previewModel, setPreviewModel] = useState<ModelDeploymentItem | null>(null);
   const searchInputRef = useRef<HTMLInputElement | null>();
 
@@ -75,11 +73,7 @@ export const Monitoring = () => {
       <EuiSpacer size="xs" />
       <EuiPageHeader
         pageTitle="Overview"
-        rightSideItems={[
-          <div style={{ backgroundColor: darkMode ? undefined : '#fff' }}>
-            <RefreshInterval onRefresh={reload} />
-          </div>,
-        ]}
+        rightSideItems={[<RefreshInterval onRefresh={reload} />]}
       />
       <EuiSpacer size="m" />
       <EuiPanel>

public/components/monitoring/model_deployment_table.tsx

@@ -98,8 +98,8 @@ export const ModelDeploymentTable = ({
             return (
               <EuiHealth className="ml-modelStatusCell" color="danger">
                 <div className="eui-textTruncate">
-                  <span style={{ fontWeight: 600 }}>Not responding</span> on {planningNodesCount} of{' '}
-                  {planningNodesCount} nodes
+                  <strong>Not responding</strong> on {planningNodesCount} of {planningNodesCount}{' '}
+                  nodes
                 </div>
               </EuiHealth>
             );
@@ -108,17 +108,16 @@ export const ModelDeploymentTable = ({
             return (
               <EuiHealth className="ml-modelStatusCell" color="success">
                 <div className="eui-textTruncate">
-                  <span style={{ fontWeight: 600 }}>Responding</span> on {planningNodesCount} of{' '}
-                  {planningNodesCount} nodes
+                  <strong>Responding</strong> on {planningNodesCount} of {planningNodesCount} nodes
                 </div>
               </EuiHealth>
             );
           }
           return (
             <EuiHealth className="ml-modelStatusCell" color="warning">
               <div className="eui-textTruncate">
-                <span style={{ fontWeight: 600 }}>Partially responding</span> on{' '}
-                {respondingNodesCount} of {planningNodesCount} nodes
+                <strong>Partially responding</strong> on {respondingNodesCount} of{' '}
+                {planningNodesCount} nodes
               </div>
             </EuiHealth>
           );

public/components/monitoring/tests/index.test.tsx

@@ -6,7 +6,6 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import * as opensearchDashboardsReactExports from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import { render, screen, waitFor, within } from '../../../../test/test_utils';
 import { Monitoring } from '../index';
 import * as useMonitoringExports from '../use_monitoring';
@@ -330,18 +329,4 @@ describe('<Monitoring />', () => {
     await user.click(screen.getByLabelText('Close this dialog'));
     expect(reload).not.toHaveBeenCalled();
   });
-
-  it('should NOT render background for refresh interval picker in the dark mode', () => {
-    const useUiSettingMock = jest
-      .spyOn(opensearchDashboardsReactExports, 'useUiSetting')
-      .mockReturnValue(true);
-
-    setup();
-    expect(
-      screen.getByLabelText('current interval value').closest('div.euiFormControlLayout')
-        ?.parentElement
-    ).not.toHaveStyle('background-color: rgb(255, 255, 255);');
-
-    useUiSettingMock.mockRestore();
-  });
 });

public/components/preview_panel/index.tsx

@@ -98,15 +98,13 @@ export const PreviewPanel = ({ onClose, model }: Props) => {
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiDescriptionList>
-          <EuiDescriptionListTitle style={{ fontSize: '14px' }}>Model ID</EuiDescriptionListTitle>
+          <EuiDescriptionListTitle>Model ID</EuiDescriptionListTitle>
           <EuiDescriptionListDescription>
             <CopyableText text={id} iconLeft={false} tooltipText="Copy model ID" />
           </EuiDescriptionListDescription>
-          <EuiDescriptionListTitle style={{ fontSize: '14px' }}>Source</EuiDescriptionListTitle>
+          <EuiDescriptionListTitle>Source</EuiDescriptionListTitle>
           <EuiDescriptionListDescription>{source}</EuiDescriptionListDescription>
-          <EuiDescriptionListTitle style={{ fontSize: '14px' }}>
-            Model status by node
-          </EuiDescriptionListTitle>
+          <EuiDescriptionListTitle>Model status by node</EuiDescriptionListTitle>
           <EuiDescriptionListDescription>{respondingStatus}</EuiDescriptionListDescription>
         </EuiDescriptionList>
         <EuiSpacer />

public/components/preview_panel/nodes_table.scss

@@ -1,7 +1,7 @@
 .ml-nodesTableNodeIdCellText {
   &:hover{
     cursor: pointer;
-    color: #006BB4;
+    color: $ouiLinkColor;
     text-decoration: underline;
   }
 }

public/index.ts

@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './index.scss';
-
 import { MlCommonsPluginPlugin } from './plugin';
 
 // This exports static code and TypeScript types,