[Logs UX][EUI Visual Refresh] Update theme usage

packages/core/ui-settings/core-ui-settings-common/src/theme.ts

@@ -35,7 +35,8 @@ export type ThemeTags = readonly ThemeTag[];
  * An array of theme tags available in Kibana by default when not customized
  * using KBN_OPTIMIZER_THEMES environment variable.
  */
-export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags;
+export const DEFAULT_THEME_TAGS: ThemeTags = SUPPORTED_THEME_TAGS; // TODO: (tonyghiani) remove after design QA on deployment
+// export const DEFAULT_THEME_TAGS: ThemeTags = ThemeAmsterdamTags; // TODO: (tonyghiani) uncomment after design QA on deployment
 
 export const FALLBACK_THEME_TAG: ThemeTag = 'v8light';
 

packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts

@@ -104,9 +104,10 @@ export const getThemeSettings = (
         }),
       },
       value: 'amsterdam',
-      readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
-        ? !options.isThemeSwitcherEnabled
-        : true,
+      // TODO: (tonyghiani) Remove after design QA on deployment
+      // readonly: Object.hasOwn(options, 'isThemeSwitcherEnabled')
+      //   ? !options.isThemeSwitcherEnabled
+      //   : true,
       requiresPageReload: true,
       schema: schema.oneOf([
         schema.literal('amsterdam'),

packages/kbn-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>

packages/kbn-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};
+              `}
+            />
+          );
+        },
       }),
     };
   });

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",

src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx

@@ -7,11 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiText, EuiTitle, useEuiTheme } 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';
 
@@ -39,12 +38,19 @@ export function HighlightField({
   children,
   ...props
 }: HighlightFieldProps) {
+  const { euiTheme } = useEuiTheme();
+
   const hasFieldDescription = !!fieldMetadata?.short;
 
   return formattedValue && value ? (
     <div {...props}>
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-        <EuiTitle css={fieldNameStyle} size="xxxs">
+        <EuiTitle
+          css={css`
+            color: ${euiTheme.colors.textHeading};
+          `}
+          size="xxxs"
+        >
           <span>{label}</span>
         </EuiTitle>
         {hasFieldDescription ? <HighlightFieldDescription fieldMetadata={fieldMetadata} /> : null}
@@ -80,7 +86,3 @@ const FormattedValue = ({ value }: { value: string }) => (
     dangerouslySetInnerHTML={{ __html: value }}
   />
 );
-
-const fieldNameStyle = css`
-  color: ${euiThemeVars.euiColorDarkShade};
-`;

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",

x-pack/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: 1px;
+        height: 63px;
+        background-color: ${euiTheme.colors.borderBaseSubdued};
+      `}
+      {...props}
+    />
+  );
+};

x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx

@@ -91,7 +91,7 @@ export function IntegrationsSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityIntegrationsSelectableButton"
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={integrations.length}

x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx

@@ -71,7 +71,7 @@ export function NamespacesSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityNamespacesSelectableButton"
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={namespaces.length}

x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/qualities_selector.tsx

@@ -75,7 +75,7 @@ export function QualitiesSelector({
     <EuiFilterButton
       data-test-subj="datasetQualityQualitiesSelectableButton"
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={qualities.length}

x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/filters/selector.tsx

@@ -62,7 +62,7 @@ export function Selector({
     <EuiFilterButton
       data-test-subj={`${dataTestSubj}Button`}
       iconType="arrowDown"
-      badgeColor="success"
+      badgeColor="accentSecondary"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={options.length}

x-pack/plugins/observability_solution/dataset_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};
-`;

x-pack/plugins/observability_solution/dataset_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>

x-pack/plugins/observability_solution/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' }} />
       </>
     );
   };

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",

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx

@@ -8,12 +8,12 @@
 import React from 'react';
 import { AnnotationDomainType, LineAnnotation, Position } from '@elastic/charts';
 import moment from 'moment';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
 export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
+  const { euiTheme } = useEuiTheme();
   const { uiSettings } = useKibanaContextForPlugin().services;
 
   return (
@@ -32,7 +32,7 @@ export function AlertAnnotation({ alertStarted }: { alertStarted: number }) {
       style={{
         line: {
           strokeWidth: 3,
-          stroke: euiThemeVars.euiColorDangerText,
+          stroke: euiTheme.colors.borderStrongDanger,
           opacity: 1,
         },
       }}