[ResponseOps] [UI] Color palette tokens and functions dynamically upd…

…ate with theme changes (#203448) Closes #202551 ## Summary - All usage of color palette tokens and functions now pull from the theme JSON tokens are anything from: @elastic/eui/dist/eui_theme_light.json @elastic/eui/dist/eui_theme_dark.json import { euiThemeVars } from '@kbn/ui-theme' --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Dec 16, 2024 · 5f20ac6 · 5f20ac6
1 parent 5ea1c45
commit 5f20ac6
Show file tree

Hide file tree

Showing 24 changed files with 206 additions and 175 deletions.
diff --git a/packages/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx b/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};
         }
       `}
     />

diff --git a/packages/kbn-alerts-ui-shared/tsconfig.json b/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",

diff --git a/packages/kbn-grouping/src/components/accordion_panel/group_stats.tsx b/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(

diff --git a/packages/kbn-grouping/src/components/grouping.tsx b/packages/kbn-grouping/src/components/grouping.tsx
@@ -13,6 +13,7 @@ import {
   EuiProgress,
   EuiSpacer,
   EuiTablePagination,
+  useEuiTheme,
 } from '@elastic/eui';
 import type { Filter } from '@kbn/es-query';
 import React, { useMemo, useState } from 'react';
@@ -78,6 +79,8 @@ const GroupingComponent = <T,>({
   unit = defaultUnit,
   groupsUnit = GROUPS_UNIT,
 }: GroupingProps<T>) => {
+  const { euiTheme } = useEuiTheme();
+
   const [trigger, setTrigger] = useState<Record<string, { state: 'open' | 'closed' | undefined }>>(
     {}
   );
@@ -198,12 +201,16 @@ const GroupingComponent = <T,>({
             {groupCount > 0 && unitCount > 0 ? (
               <EuiFlexGroup gutterSize="none">
                 <EuiFlexItem grow={false}>
-                  <span css={countCss} data-test-subj="unit-count">
+                  <span css={countCss(euiTheme)} data-test-subj="unit-count">
                     {unitCountText}
                   </span>
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <span css={countCss} data-test-subj="group-count" style={{ borderRight: 'none' }}>
+                  <span
+                    css={countCss(euiTheme)}
+                    data-test-subj="group-count"
+                    style={{ borderRight: 'none' }}
+                  >
                     {groupCountText}
                   </span>
                 </EuiFlexItem>
@@ -219,7 +226,9 @@ const GroupingComponent = <T,>({
         </EuiFlexGroup>
       )}
       <div
-        css={groupingLevel > 0 ? groupingContainerCssLevel : groupingContainerCss}
+        css={
+          groupingLevel > 0 ? groupingContainerCssLevel(euiTheme) : groupingContainerCss(euiTheme)
+        }
         className="eui-xScroll"
       >
         {isLoading ? (

diff --git a/packages/kbn-grouping/src/components/styles.tsx b/packages/kbn-grouping/src/components/styles.tsx
@@ -7,52 +7,38 @@
  * 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};
+export const countCss = (euiTheme: EuiThemeComputed<{}>) => css`
+  font-size: ${euiTheme.euiFontSize.xs};
+  font-weight: ${euiTheme.font.weight.semiBold};
+  border-right: ${euiTheme.border.thin};
   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 +51,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;
@@ -104,7 +90,7 @@ export const StyledContextMenu = euiStyled(EuiContextMenu)`
     text-overflow: ellipsis;
   }
   .euiContextMenuItem {
-    border-bottom: ${euiThemeVars.euiBorderThin};
+    border-bottom: ${(props) => props.theme.eui.border.thin};
   }
   .euiContextMenuItem:last-child {
     border: none;

diff --git a/packages/kbn-grouping/tsconfig.json b/packages/kbn-grouping/tsconfig.json
@@ -24,7 +24,6 @@
     "@kbn/i18n-react",
     "@kbn/kibana-react-plugin",
     "@kbn/shared-svg",
-    "@kbn/ui-theme",
     "@kbn/analytics",
   ]
 }
diff --git a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/link_icon.tsx b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/link_icon.tsx
@@ -6,35 +6,12 @@
  */
 
 import type { IconSize, IconType } from '@elastic/eui';
-import { EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiIcon, EuiLink, useEuiTheme } from '@elastic/eui';
 import type { LinkAnchorProps } from '@elastic/eui/src/components/link/link';
 import type { ReactNode } from 'react';
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 
-function getStyles(iconSide: string) {
-  return {
-    link: css`
-      align-items: center;
-      display: inline-flex;
-      vertical-align: top;
-      white-space: nowrap;
-      flex-direction: ${iconSide === 'left' ? 'row' : 'row-reverse'};
-    `,
-    leftSide: css`
-      margin-right: ${euiThemeVars.euiSizeXS};
-    `,
-    rightSide: css`
-      flex-direction: row-reverse;
-
-      .euiIcon {
-        margin-left: ${euiThemeVars.euiSizeXS};
-      }
-    `,
-  };
-}
-
 export interface LinkIconProps {
   children: string | ReactNode;
   iconSize?: IconSize;
@@ -60,11 +37,17 @@ export const LinkIcon = React.memo<LinkIconProps>(
     onClick,
     ...rest
   }) => {
-    const styles = getStyles(iconSide);
+    const { euiTheme } = useEuiTheme();
 
     return (
       <EuiLink
-        css={styles.link}
+        css={css`
+          align-items: center;
+          display: inline-flex;
+          vertical-align: top;
+          white-space: nowrap;
+          flex-direction: ${iconSide === 'left' ? 'row' : 'row-reverse'};
+        `}
         color={color}
         data-test-subj={dataTestSubj}
         disabled={disabled}
@@ -73,7 +56,19 @@ export const LinkIcon = React.memo<LinkIconProps>(
         {...rest}
       >
         <EuiIcon
-          css={iconSide === 'left' ? styles.leftSide : styles.rightSide}
+          css={
+            iconSide === 'left'
+              ? css`
+                  margin-right: ${euiTheme.size.xs};
+                `
+              : css`
+                  flex-direction: row-reverse;
+
+                  .euiIcon {
+                    margin-left: ${euiTheme.size.xs};
+                  }
+                `
+          }
           data-test-subj="link-icon"
           size={iconSize}
           type={iconType}