[ResponseOps][UI] - EUI Visual Refresh integration and QA

packages/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx

@@ -14,11 +14,12 @@ import {
   EuiTabbedContentProps,
   useEuiOverflowScroll,
   EuiBasicTableColumn,
+  useEuiTheme,
+  useEuiFontSize,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React, { memo, useMemo } from 'react';
 import { Alert } from '@kbn/alerting-types';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { useEuiTablePersist } from '@kbn/shared-ux-table-persist';
 
 export const search = {
@@ -90,6 +91,8 @@ export interface AlertFieldsTableProps {
  * A paginated, filterable table to show alert object fields
  */
 export const AlertFieldsTable = memo(({ alert, fields }: AlertFieldsTableProps) => {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
   const { pageSize, sorting, onTableChange } = useEuiTablePersist<AlertField>({
     tableId: 'obltAlertFields',
     initialPageSize: 25,
@@ -122,8 +125,8 @@ export const AlertFieldsTable = memo(({ alert, fields }: AlertFieldsTableProps)
       search={search}
       css={css`
         & .euiTableRow {
-          font-size: ${euiThemeVars.euiFontSizeXS};
-          font-family: ${euiThemeVars.euiCodeFontFamily};
+          font-size: ${xsFontSize};
+          font-family: ${euiTheme.font.familyCode};
         }
       `}
     />

packages/kbn-alerts-ui-shared/tsconfig.json

@@ -19,7 +19,6 @@
     "@kbn/data-views-plugin",
     "@kbn/unified-search-plugin",
     "@kbn/es-query",
-    "@kbn/ui-theme",
     "@kbn/controls-plugin",
     "@kbn/embeddable-plugin",
     "@kbn/core-http-browser",

packages/kbn-grouping/src/components/accordion_panel/group_stats.tsx

@@ -15,13 +15,13 @@ import {
   EuiFlexItem,
   EuiPopover,
   EuiToolTip,
+  useEuiTheme,
+  useEuiFontSize,
 } from '@elastic/eui';
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { Filter } from '@kbn/es-query';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { GroupStatsItem } from '../types';
-import { statsContainerCss } from '../styles';
 import { TAKE_ACTION } from '../translations';
 
 interface GroupStatsProps<T> {
@@ -34,14 +34,15 @@ interface GroupStatsProps<T> {
 }
 
 const Separator = () => {
+  const { euiTheme } = useEuiTheme();
   return (
     <EuiFlexItem
       grow={false}
       role="separator"
       css={css`
         align-self: center;
         height: 20px;
-        border-right: ${euiThemeVars.euiBorderThin};
+        border-right: ${euiTheme.border.thin};
       `}
     />
   );
@@ -55,6 +56,9 @@ const GroupStatsComponent = <T,>({
   stats,
   takeActionItems: getTakeActionItems,
 }: GroupStatsProps<T>) => {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
+
   const [isPopoverOpen, setPopover] = useState(false);
   const takeActionItems = useMemo(() => {
     return getTakeActionItems?.(groupFilter, groupNumber) ?? [];
@@ -86,14 +90,28 @@ const GroupStatsComponent = <T,>({
 
         return (
           <EuiFlexItem grow={false} key={stat.title}>
-            <span css={statsContainerCss} data-test-subj={dataTestSubj}>
+            <span
+              css={css`
+                font-size: ${xsFontSize};
+                font-weight: ${euiTheme.font.weight.semiBold};
+                .smallDot {
+                  width: 3px !important;
+                  display: inline-block;
+                }
+                .euiBadge__text {
+                  text-align: center;
+                  width: 100%;
+                }
+              `}
+              data-test-subj={dataTestSubj}
+            >
               {stat.title}
               {component}
             </span>
           </EuiFlexItem>
         );
       }) ?? [],
-    [stats]
+    [stats, euiTheme, xsFontSize]
   );
 
   const takeActionMenu = useMemo(

packages/kbn-grouping/src/components/group_selector/index.test.tsx

@@ -65,6 +65,11 @@ const testProps = {
     },
   ],
   title: 'Group alerts by',
+  euiTheme: {
+    border: {
+      thin: '1px solid #E3E8F2',
+    },
+  },
 };
 describe('group selector', () => {
   beforeEach(() => {

packages/kbn-grouping/src/components/group_selector/index.tsx

@@ -7,9 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type {
+import {
   EuiContextMenuPanelDescriptor,
   EuiContextMenuPanelItemDescriptor,
+  useEuiTheme,
 } from '@elastic/eui';
 import { EuiPopover } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -44,6 +45,8 @@ const GroupSelectorComponent = ({
     [groupsSelected]
   );
 
+  const { euiTheme } = useEuiTheme();
+
   const panels: EuiContextMenuPanelDescriptor[] = useMemo(() => {
     const isOptionDisabled = (key?: string) => {
       // Do not disable when maxGroupingLevels is 1 to allow toggling between groups
@@ -147,6 +150,7 @@ const GroupSelectorComponent = ({
         data-test-subj="groupByContextMenu"
         initialPanelId="firstPanel"
         panels={panels}
+        euiTheme={euiTheme}
       />
     </EuiPopover>
   );

packages/kbn-grouping/src/components/grouping.tsx

@@ -13,7 +13,10 @@ import {
   EuiProgress,
   EuiSpacer,
   EuiTablePagination,
+  useEuiTheme,
+  useEuiFontSize,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { Filter } from '@kbn/es-query';
 import React, { useMemo, useState } from 'react';
 import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
@@ -22,7 +25,7 @@ import { createGroupFilter, getNullGroupFilter } from '../containers/query/helpe
 import { GroupPanel } from './accordion_panel';
 import { GroupStats } from './accordion_panel/group_stats';
 import { EmptyGroupingComponent } from './empty_results_panel';
-import { countCss, groupingContainerCss, groupingContainerCssLevel } from './styles';
+import { groupingContainerCss, groupingContainerCssLevel } from './styles';
 import { GROUPS_UNIT, NULL_GROUP } from './translations';
 import type { ParsedGroupingAggregation, GroupPanelRenderer, GetGroupStats } from './types';
 import { GroupingBucket, OnGroupToggle } from './types';
@@ -78,6 +81,17 @@ const GroupingComponent = <T,>({
   unit = defaultUnit,
   groupsUnit = GROUPS_UNIT,
 }: GroupingProps<T>) => {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
+
+  const countCss = css`
+    font-size: ${xsFontSize};
+    font-weight: ${euiTheme.font.weight.semiBold};
+    border-right: ${euiTheme.border.thin};
+    margin-right: 16px;
+    padding-right: 16px;
+  `;
+
   const [trigger, setTrigger] = useState<Record<string, { state: 'open' | 'closed' | undefined }>>(
     {}
   );
@@ -219,7 +233,9 @@ const GroupingComponent = <T,>({
         </EuiFlexGroup>
       )}
       <div
-        css={groupingLevel > 0 ? groupingContainerCssLevel : groupingContainerCss}
+        css={
+          groupingLevel > 0 ? groupingContainerCssLevel(euiTheme) : groupingContainerCss(euiTheme)
+        }
         className="eui-xScroll"
       >
         {isLoading ? (

packages/kbn-grouping/src/components/styles.tsx

@@ -7,52 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButtonEmpty, EuiContextMenu } from '@elastic/eui';
+import { EuiButtonEmpty, EuiContextMenu, type EuiThemeComputed } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
-export const countCss = css`
-  font-size: ${euiThemeVars.euiFontSizeXS};
-  font-weight: ${euiThemeVars.euiFontWeightSemiBold};
-  border-right: ${euiThemeVars.euiBorderThin};
-  margin-right: 16px;
-  padding-right: 16px;
-`;
-
-export const statsContainerCss = css`
-  font-size: ${euiThemeVars.euiFontSizeXS};
-  font-weight: ${euiThemeVars.euiFontWeightSemiBold};
-  .smallDot {
-    width: 3px !important;
-    display: inline-block;
-  }
-  .euiBadge__text {
-    text-align: center;
-    width: 100%;
-  }
-`;
-
-export const groupingContainerCss = css`
+export const groupingContainerCss = (euiTheme: EuiThemeComputed<{}>) => css`
   .groupingAccordionForm .euiAccordion__childWrapper .euiAccordion__children {
     margin-left: 8px;
     margin-right: 8px;
-    border-left: ${euiThemeVars.euiBorderThin};
-    border-right: ${euiThemeVars.euiBorderThin};
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-left: ${euiTheme.border.thin};
+    border-right: ${euiTheme.border.thin};
+    border-bottom: ${euiTheme.border.thin};
     border-radius: 0 0 6px 6px;
   }
   .groupingAccordionForm .euiAccordion__triggerWrapper {
-    border-bottom: ${euiThemeVars.euiBorderThin};
-    border-left: ${euiThemeVars.euiBorderThin};
-    border-right: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${euiTheme.border.thin};
+    border-left: ${euiTheme.border.thin};
+    border-right: ${euiTheme.border.thin};
     border-radius: 6px;
     min-height: 78px;
     padding-left: 16px;
     padding-right: 16px;
   }
   .groupingAccordionForm {
-    border-top: ${euiThemeVars.euiBorderThin};
+    border-top: ${euiTheme.border.thin};
     border-bottom: none;
     border-radius: 6px;
     min-width: 1090px;
@@ -65,17 +43,17 @@ export const groupingContainerCss = css`
   }
 `;
 
-export const groupingContainerCssLevel = css`
+export const groupingContainerCssLevel = (euiTheme: EuiThemeComputed<{}>) => css`
   .groupingAccordionFormLevel .euiAccordion__childWrapper .euiAccordion__children {
     margin-left: 8px;
     margin-right: 8px;
     border-left: none;
     border-right: none;
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${euiTheme.border.thin};
     border-radius: 0;
   }
   .groupingAccordionFormLevel .euiAccordion__triggerWrapper {
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${euiTheme.border.thin};
     border-left: none;
     border-right: none;
     min-height: 78px;
@@ -97,14 +75,14 @@ export const groupingContainerCssLevel = css`
   }
 `;
 
-export const StyledContextMenu = euiStyled(EuiContextMenu)`
+export const StyledContextMenu = euiStyled(EuiContextMenu)<{ euiTheme: EuiThemeComputed }>`
   width: 250px;
   & .euiContextMenuItem__text {
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .euiContextMenuItem {
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${(props) => props.euiTheme.border.thin};
   }
   .euiContextMenuItem:last-child {
     border: none;

packages/kbn-grouping/tsconfig.json

@@ -24,7 +24,6 @@
     "@kbn/i18n-react",
     "@kbn/kibana-react-plugin",
     "@kbn/shared-svg",
-    "@kbn/ui-theme",
     "@kbn/analytics",
   ]
 }

packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx

@@ -16,7 +16,6 @@ import {
   EuiPanel,
   EuiButtonIcon,
   useEuiTheme,
-  useEuiBackgroundColor,
   EuiIcon,
   EuiText,
   EuiTabs,
@@ -110,9 +109,9 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
   } = useRuleFormState();
 
   const [tab, setTab] = useState<string>(MESSAGES_TAB);
-  const subdued = useEuiBackgroundColor('subdued');
-  const plain = useEuiBackgroundColor('plain');
   const { euiTheme } = useEuiTheme();
+  const subdued = euiTheme.colors.lightestShade;
+  const plain = euiTheme.colors.backgroundBasePlain;
 
   const [availableActionVariables, setAvailableActionVariables] = useState<ActionVariable[]>(() => {
     if (!selectedRuleType.actionVariables) {
@@ -692,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
       }
       buttonContentClassName="eui-fullWidth"
       buttonContent={
-        <EuiPanel color="subdued" paddingSize="m">
+        <EuiPanel color="transparent" paddingSize="m">
           <EuiFlexGroup alignItems="center" responsive={false}>
             {accordionIcon}
             {connectorTitle}

packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx

@@ -126,8 +126,8 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
   >({});
   const [warning, setWarning] = useState<string | null>(null);
 
-  const subdued = useEuiBackgroundColor('subdued');
   const { euiTheme } = useEuiTheme();
+  const subdued = euiTheme.colors.lightestShade;
 
   const dispatch = useRuleFormDispatch();
   const actionTypeModel = actionTypeRegistry.get(action.actionTypeId);
@@ -267,7 +267,7 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
       buttonContent={
         <EuiPanel
           data-test-subj="ruleActionsSystemActionsItemAccordionButton"
-          color="subdued"
+          color="transparent"
           paddingSize="m"
         >
           <EuiFlexGroup alignItems="center">

packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { useEuiBackgroundColorCSS, EuiPageTemplate } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 
 interface RuleFormErrorPromptWrapperProps {
   hasBorder?: boolean;
@@ -18,7 +18,9 @@ interface RuleFormErrorPromptWrapperProps {
 export const RuleFormErrorPromptWrapper: React.FC<
   React.PropsWithChildren<RuleFormErrorPromptWrapperProps>
 > = ({ children, hasBorder, hasShadow }) => {
-  const styles = useEuiBackgroundColorCSS().transparent;
+  const styles = {
+    backgroundColor: 'transparent',
+  };
   return (
     <EuiPageTemplate offset={0} css={styles}>
       <EuiPageTemplate.EmptyPrompt paddingSize="none" hasBorder={hasBorder} hasShadow={hasShadow}>