[Logs UX][EUI Visual Refresh] Update theme usage (elastic#202746)

## 📓 Summary Closes elastic#202652 Closes elastic#202653 Closes elastic#202654 Closes elastic#202656 Closes elastic#202657 Closes elastic#202658 Closes elastic#202660 These changes close issues as part of a bigger effort to integrate the EUI changes. This takes into account renaming `success` colour token to the more appropriate `accentSecondary` as specified by the guidelines, and updating legacy naming for tokens to the new respective names. Also, it removes usages of the static `euiThemeVars` tokens and check for usages `vis` tokens. @patpscal Let me know if something feels off, I checked how the colour render in the 4 theme combination (amsterdam/borealis + light/dark) and it looks good to me. --------- Co-authored-by: Marco Antonio Ghiani <[email protected]> Co-authored-by: kibanamachine <[email protected]>
darnautov · Dec 13, 2024 · 0ca6502 · 0ca6502
1 parent 42af4e6
commit 0ca6502
Show file tree

Hide file tree

Showing 30 changed files with 164 additions and 226 deletions.
diff --git a/...bn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx b/...bn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx
@@ -20,10 +20,10 @@ import {
   EuiTextTruncate,
   EuiButtonEmpty,
   EuiCopy,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useBoolean } from '@kbn/react-hooks';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
@@ -38,10 +38,6 @@ import {
   openCellActionPopoverAriaText,
 } from './translations';
 
-const codeFontCSS = css`
-  font-family: ${euiThemeVars.euiCodeFontFamily};
-`;
-
 interface CellActionsPopoverProps {
   onFilter?: DocViewFilterFn;
   /* ECS mapping for the key */
@@ -67,6 +63,7 @@ export function CellActionsPopover({
   renderValue,
   renderPopoverTrigger,
 }: CellActionsPopoverProps) {
+  const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, { toggle: togglePopover, off: closePopover }] = useBoolean(false);
 
   const makeFilterHandlerByOperator = (operator: '+' | '-') => () => {
@@ -95,7 +92,12 @@ export function CellActionsPopover({
         data-test-subj="dataTableCellActionPopoverTitle"
       >
         <EuiFlexItem style={{ maxWidth: '200px' }}>
-          <EuiText size="s" css={codeFontCSS}>
+          <EuiText
+            size="s"
+            css={css`
+              font-family: ${euiTheme.font.familyCode};
+            `}
+          >
             <strong>{property}</strong>{' '}
             {typeof renderValue === 'function' ? renderValue(value) : value}
           </EuiText>

diff --git a/...bn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx b/...bn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx
@@ -11,7 +11,6 @@ import { dynamic } from '@kbn/shared-ux-utility';
 import React from 'react';
 import { css } from '@emotion/react';
 import { AgentName } from '@kbn/elastic-agent-utils';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import {
@@ -28,6 +27,7 @@ import {
 } from '@kbn/discover-utils';
 import { DataTableRecord, getFieldValue } from '@kbn/discover-utils';
 import { LogDocument, ResourceFields, getAvailableResourceFields } from '@kbn/discover-utils/src';
+import { useEuiTheme } from '@elastic/eui';
 import { FieldBadgeWithActions, FieldBadgeWithActionsProps } from '../cell_actions_popover';
 import { ServiceNameBadgeWithActions } from '../service_name_badge_with_actions';
 /**
@@ -94,15 +94,18 @@ export const createResourceFields = (
       value: resourceDoc[name] as string,
       ResourceBadge: resourceBadgeComponentWithDependencies,
       ...(name === SERVICE_NAME_FIELD && {
-        Icon: () => (
-          <AgentIcon
-            agentName={resourceDoc[AGENT_NAME_FIELD] as AgentName}
-            size="m"
-            css={css`
-              margin-right: ${euiThemeVars.euiSizeXS};
-            `}
-          />
-        ),
+        Icon: () => {
+          const { euiTheme } = useEuiTheme();
+          return (
+            <AgentIcon
+              agentName={resourceDoc[AGENT_NAME_FIELD] as AgentName}
+              size="m"
+              css={css`
+                margin-right: ${euiTheme.size.xs};
+              `}
+            />
+          );
+        },
       }),
     };
   });

diff --git a/packages/kbn-discover-contextual-components/tsconfig.json b/packages/kbn-discover-contextual-components/tsconfig.json
@@ -22,7 +22,6 @@
     "@kbn/router-utils",
     "@kbn/management-settings-ids",
     "@kbn/share-plugin",
-    "@kbn/ui-theme",
     "@kbn/unified-data-table",
     "@kbn/unified-doc-viewer",
     "@kbn/react-hooks",

diff --git a/..._doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx b/..._doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx
@@ -8,10 +8,8 @@
  */
 
 import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle } from '@elastic/eui';
-import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { dynamic } from '@kbn/shared-ux-utility';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { PartialFieldMetadataPlain } from '@kbn/fields-metadata-plugin/common';
 import { HoverActionPopover } from './hover_popover_action';
 
@@ -44,7 +42,7 @@ export function HighlightField({
   return formattedValue && value ? (
     <div {...props}>
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-        <EuiTitle css={fieldNameStyle} size="xxxs">
+        <EuiTitle size="xxxs">
           <span>{label}</span>
         </EuiTitle>
         {hasFieldDescription ? <HighlightFieldDescription fieldMetadata={fieldMetadata} /> : null}
@@ -80,7 +78,3 @@ const FormattedValue = ({ value }: { value: string }) => (
     dangerouslySetInnerHTML={{ __html: value }}
   />
 );
-
-const fieldNameStyle = css`
-  color: ${euiThemeVars.euiColorDarkShade};
-`;
diff --git a/src/plugins/unified_doc_viewer/tsconfig.json b/src/plugins/unified_doc_viewer/tsconfig.json
@@ -28,7 +28,6 @@
     "@kbn/code-editor-mock",
     "@kbn/custom-icons",
     "@kbn/react-field",
-    "@kbn/ui-theme",
     "@kbn/discover-shared-plugin",
     "@kbn/fields-metadata-plugin",
     "@kbn/core-notifications-browser",

diff --git a/...plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx b/...plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+
+export const VerticalRule = (props: React.ComponentProps<'span'>) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <span
+      css={css`
+        width: ${euiTheme.border.width.thin};
+        height: 63px;
+        background-color: ${euiTheme.colors.borderBaseSubdued};
+      `}
+      {...props}
+    />
+  );
+};
diff --git a/...t_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx b/...t_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx
@@ -6,8 +6,6 @@
  */
 
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
-import { css } from '@emotion/react';
 
 import {
   EuiFlexGroup,
@@ -30,6 +28,7 @@ import {
   summaryPanelQualityTooltipText,
 } from '../../../../common/translations';
 import { mapPercentagesToQualityCounts } from '../../quality_indicator';
+import { VerticalRule } from '../../common/vertical_rule';
 
 export function DatasetsQualityIndicators() {
   const { onPageReady } = usePerformanceContext();
@@ -71,14 +70,14 @@ export function DatasetsQualityIndicators() {
             description={summaryPanelQualityPoorText}
             isLoading={isDatasetsQualityLoading}
           />
-          <span css={verticalRule} />
+          <VerticalRule />
           <QualityIndicator
             value={qualityCounts.degraded}
             quality="warning"
             description={summaryPanelQualityDegradedText}
             isLoading={isDatasetsQualityLoading}
           />
-          <span css={verticalRule} />
+          <VerticalRule />
           <QualityIndicator
             value={qualityCounts.good + datasetsWithoutIgnoredField}
             quality="success"
@@ -125,9 +124,3 @@ const QualityIndicator = ({
     </EuiFlexGroup>
   );
 };
-
-const verticalRule = css`
-  width: 1px;
-  height: 63px;
-  background-color: ${euiThemeVars.euiColorLightShade};
-`;
diff --git a/...et_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx b/...et_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx
@@ -16,6 +16,7 @@ import {
   EuiTitle,
   EuiToolTip,
   formatNumber,
+  useEuiTheme,
 } from '@elastic/eui';
 import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
 
@@ -33,6 +34,8 @@ import { SparkPlot } from '../../common/spark_plot';
 import { DegradedField } from '../../../../common/api_types';
 
 export const DegradedFieldInfo = ({ fieldList }: { fieldList?: DegradedField }) => {
+  const { euiTheme } = useEuiTheme();
+
   const {
     fieldFormats,
     degradedFieldValues,
@@ -164,7 +167,7 @@ export const DegradedFieldInfo = ({ fieldList }: { fieldList?: DegradedField })
                 <EuiBadgeGroup gutterSize="s">
                   {degradedFieldValues?.values.map((value, idx) => (
                     <EuiBadge color="hollow" key={idx}>
-                      <EuiTextColor color="#765B96">
+                      <EuiTextColor color={euiTheme.colors.vis.euiColorVis3}>
                         <strong>{value}</strong>
                       </EuiTextColor>
                     </EuiBadge>

diff --git a/...tion/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx b/...tion/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx
@@ -7,22 +7,9 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSkeletonTitle, EuiText } from '@elastic/eui';
-import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { PrivilegesWarningIconWrapper } from '../../../common';
 import { notAvailableLabel } from '../../../../../common/translations';
-
-const verticalRule = css`
-  width: 1px;
-  height: 65px;
-  background-color: ${euiThemeVars.euiColorLightShade};
-`;
-
-const verticalRuleHidden = css`
-  width: 1px;
-  height: 65px;
-  visibility: hidden;
-`;
+import { VerticalRule } from '../../../common/vertical_rule';
 
 export function Panel({
   title,
@@ -38,14 +25,14 @@ export function Panel({
       return panelChildren.map((panelChild, index) => (
         <React.Fragment key={index}>
           {panelChild}
-          {index < panelChildren.length - 1 && <span css={verticalRule} />}
+          {index < panelChildren.length - 1 && <VerticalRule />}
         </React.Fragment>
       ));
     }
     return (
       <>
         {panelChildren}
-        <span css={verticalRuleHidden} />
+        <VerticalRule style={{ visibility: 'hidden' }} />
       </>
     );
   };

diff --git a/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
@@ -29,7 +29,6 @@
     "@kbn/router-utils",
     "@kbn/xstate-utils",
     "@kbn/shared-ux-utility",
-    "@kbn/ui-theme",
     "@kbn/data-service",
     "@kbn/observability-shared-plugin",
     "@kbn/data-plugin",

diff --git a/...erting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx b/...erting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx
@@ -14,8 +14,8 @@ import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
 
 export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
-  const { uiSettings } = useKibanaContextForPlugin().services;
   const { euiTheme } = useEuiTheme();
+  const { uiSettings } = useKibanaContextForPlugin().services;
 
   return (
     <LineAnnotation
@@ -33,7 +33,7 @@ export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
       style={{
         line: {
           strokeWidth: 3,
-          stroke: euiTheme.colors.textDanger,
+          stroke: euiTheme.colors.borderStrongDanger,
           opacity: 1,
         },
       }}

diff --git a/...observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx b/...observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx
@@ -111,8 +111,8 @@ const SAVED_SEARCH_DOCS_URL =
   'https://www.elastic.co/guide/en/kibana/current/save-open-search.html';
 
 const DeprecationCallout = () => {
-  const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
   const { euiTheme } = useEuiTheme();
+  const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false);
 
   if (isDismissed) {
     return null;

diff --git a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiButton } from '@elastic/eui';
 import { getRouterLinkProps } from '@kbn/router-utils';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { LocatorPublic } from '@kbn/share-plugin/common';
 import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common';
 import { useKibanaContextForPlugin } from '../hooks/use_kibana';
@@ -38,6 +38,7 @@ interface LogsDeprecationCalloutProps {
 }
 
 export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => {
+  const { euiTheme } = useEuiTheme();
   const {
     services: {
       share,
@@ -47,8 +48,6 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
     },
   } = useKibanaContextForPlugin();
 
-  const { euiTheme } = useEuiTheme();
-
   const { dismissalStorageKey, message } = pageConfigurations[page];
 
   const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false);
@@ -68,7 +67,7 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) =>
       iconType="iInCircle"
       heading="h2"
       onDismiss={() => setDismissed(true)}
-      className={css`
+      css={css`
         margin-bottom: ${euiTheme.size.l};
       `}
     >

diff --git a/...lity_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/...lity_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
@@ -66,6 +66,7 @@ const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string
 );
 const ValueInner = ({ children, ...props }: NodeProps) => {
   const { euiTheme } = useEuiTheme();
+
   return (
     <div
       css={css`

diff --git a/...gs_explorer/public/components/data_source_selector/sub_components/data_view_menu_item.tsx b/...gs_explorer/public/components/data_source_selector/sub_components/data_view_menu_item.tsx
@@ -6,9 +6,8 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { DataViewDescriptor } from '../../../../common/data_views/models/data_view_descriptor';
 import { openDiscoverLabel } from '../constants';
 
@@ -17,18 +16,22 @@ interface DataViewMenuItemProps {
   isAvailable: boolean;
 }
 
-const rightSpacing = css`
-  margin-right: ${euiThemeVars.euiSizeS};
-`;
-
 export const DataViewMenuItem = ({ dataView, isAvailable }: DataViewMenuItemProps) => {
+  const { euiTheme } = useEuiTheme();
+
   if (isAvailable) {
     return <span>{dataView.name}</span>;
   }
 
   return (
     <>
-      <span css={rightSpacing}>{dataView.name}</span>
+      <span
+        css={css`
+          margin-right: ${euiTheme.size.s};
+        `}
+      >
+        {dataView.name}
+      </span>
       <EuiToolTip content={openDiscoverLabel}>
         <EuiIcon type="popout" color="subdued" />
       </EuiToolTip>

diff --git a/...n/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx b/...n/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx
@@ -57,7 +57,7 @@ export const ESQLButton = (props: DiscoverEsqlUrlProps) => {
 
   return (
     <EuiFlexItem grow={false}>
-      <EuiButton {...linkProps} color="success" size="s" data-test-subj="esqlLink">
+      <EuiButton {...linkProps} color="text" size="s" data-test-subj="esqlLink">
         {tryEsql}
       </EuiButton>
     </EuiFlexItem>