From 0ca6502ade09c4826bb12fff6837a33b0e7c2295 Mon Sep 17 00:00:00 2001 From: Marco Antonio Ghiani Date: Fri, 13 Dec 2024 12:25:04 +0100 Subject: [PATCH] [Logs UX][EUI Visual Refresh] Update theme usage (#202746) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📓 Summary Closes #202652 Closes #202653 Closes #202654 Closes #202656 Closes #202657 Closes #202658 Closes #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 Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../logs/components/cell_actions_popover.tsx | 14 +-- .../logs/components/summary_column/utils.tsx | 23 +++-- .../tsconfig.json | 1 - .../sub_components/highlight_field.tsx | 8 +- src/plugins/unified_doc_viewer/tsconfig.json | 1 - .../components/common/vertical_rule.tsx | 25 +++++ .../datasets_quality_indicators.tsx | 13 +-- .../degraded_field_flyout/field_info.tsx | 5 +- .../overview/summary/panel.tsx | 19 +--- .../dataset_quality/tsconfig.json | 1 - .../components/alert_annotation.tsx | 4 +- .../log_stream_react_embeddable.tsx | 2 +- .../components/logs_deprecation_callout.tsx | 7 +- .../components/waffle/node_square.tsx | 1 + .../sub_components/data_view_menu_item.tsx | 17 ++-- .../sub_components/selector_footer.tsx | 2 +- .../column_tooltips/field_with_token.tsx | 15 +-- .../logs_explorer/tsconfig.json | 1 - .../logs_shared/emotion.d.ts | 14 +++ .../column_headers_wrapper.tsx | 43 +++++---- .../logging/log_text_stream/highlighting.tsx | 35 +++---- .../logs_shared/public/utils/styles.ts | 94 ------------------- .../logs_shared/tsconfig.json | 3 +- .../observability_logs_explorer/emotion.d.ts | 14 +++ .../components/logs_explorer_top_nav_menu.tsx | 16 ++-- .../observability_logs_explorer/tsconfig.json | 4 +- .../custom_logs/api_key_banner.tsx | 2 +- .../custom_logs/configure_logs.tsx | 2 +- .../custom_logs/install_elastic_agent.tsx | 2 +- .../shared/optional_form_row.tsx | 2 +- 30 files changed, 164 insertions(+), 226 deletions(-) create mode 100644 x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx create mode 100644 x-pack/plugins/observability_solution/logs_shared/emotion.d.ts delete mode 100644 x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts create mode 100644 x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts diff --git a/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx b/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx index 96651cf26189b..8fa56c56162ab 100644 --- a/packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx +++ b/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" > - + {property}{' '} {typeof renderValue === 'function' ? renderValue(value) : value} diff --git a/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx b/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx index 7dacc3393763e..c6d8d3b10e297 100644 --- a/packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx +++ b/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: () => ( - - ), + Icon: () => { + const { euiTheme } = useEuiTheme(); + return ( + + ); + }, }), }; }); diff --git a/packages/kbn-discover-contextual-components/tsconfig.json b/packages/kbn-discover-contextual-components/tsconfig.json index 21d65228b9597..0dc07688b4cab 100644 --- 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/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx index 0c5356b7f1659..88a431beeabd4 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_logs_overview/sub_components/highlight_field.tsx +++ b/src/plugins/unified_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 ? (
- + {label} {hasFieldDescription ? : 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 index 212fcb0335c75..fb896fdace3e7 100644 --- 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/x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/common/vertical_rule.tsx new file mode 100644 index 0000000000000..4fc6ae6cb4933 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx index b186c16c0c0f8..483f2fff31eaf 100644 --- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/summary_panel/datasets_quality_indicators.tsx +++ b/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} /> - + - + ); }; - -const verticalRule = css` - width: 1px; - height: 63px; - background-color: ${euiThemeVars.euiColorLightShade}; -`; diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx index 3bcee0bbc89b3..12733e62c9cfb 100644 --- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/degraded_field_flyout/field_info.tsx +++ b/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 }) {degradedFieldValues?.values.map((value, idx) => ( - + {value} diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx index e03e0957b5a52..dfcd95fae704a 100644 --- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/panel.tsx +++ b/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) => ( {panelChild} - {index < panelChildren.length - 1 && } + {index < panelChildren.length - 1 && } )); } return ( <> {panelChildren} - + ); }; diff --git a/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json index 57b159cdbd295..9c515d8112088 100644 --- 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/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx index 73f458c3aa6fb..3c83d0673b9b5 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/alert_annotation.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/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 ( { - 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 index 756c42214d7c0..a9b14688888c3 100644 --- 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/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx index 977bf6b8b16cd..219200f85ded3 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx +++ b/x-pack/plugins/observability_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 (
{ + const { euiTheme } = useEuiTheme(); + if (isAvailable) { return {dataView.name}; } return ( <> - {dataView.name} + + {dataView.name} + diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx index fd1ae95770506..40c88a7453feb 100644 --- a/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx +++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/data_source_selector/sub_components/selector_footer.tsx @@ -57,7 +57,7 @@ export const ESQLButton = (props: DiscoverEsqlUrlProps) => { return ( - + {tryEsql} diff --git a/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx b/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx index 045dbc1205680..4b2fc981aeff8 100644 --- a/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx +++ b/x-pack/plugins/observability_solution/logs_explorer/public/components/virtual_columns/column_tooltips/field_with_token.tsx @@ -5,14 +5,9 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToken } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToken, useEuiTheme } from '@elastic/eui'; import React from 'react'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; - -const spacingXsCss = css` - margin-bottom: ${euiThemeVars.euiSizeXS}; -`; export const FieldWithToken = ({ field, @@ -21,8 +16,14 @@ export const FieldWithToken = ({ field: string; iconType?: string; }) => { + const { euiTheme } = useEuiTheme(); + return ( -
+
({ - role: props.role ?? 'row', -}))` - align-items: stretch; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - overflow: hidden; - padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px; - border-bottom: ${(props) => props.theme.eui.euiBorderThin}; - box-shadow: 0 2px 2px -1px ${(props) => - transparentize(0.3, props.theme.eui.euiColorLightShade)}; - position: relative; - z-index: 1; - `; +export const LogColumnHeadersWrapper = ({ role = 'row', ...props }) => { + const { euiTheme } = useEuiTheme(); + return ( +
+ ); +}; // eslint-disable-next-line import/no-default-export export default LogColumnHeadersWrapper; diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx index e8ddd350927db..a9e3b1d0511ed 100644 --- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx +++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/highlighting.tsx @@ -7,33 +7,20 @@ import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; -import { chooseLightOrDarkColor, tintOrShade } from '../../../utils/styles'; +import styled from '@emotion/styled'; -export const ActiveHighlightMarker = euiStyled.mark` - color: ${(props) => - chooseLightOrDarkColor( - props.theme.eui.euiColorAccent, - props.theme.eui.euiColorEmptyShade, - props.theme.eui.euiColorDarkestShade - )}; - background-color: ${(props) => props.theme.eui.euiColorAccent}; - outline: 1px solid ${(props) => props.theme.eui.euiColorAccent}; - }; +export const ActiveHighlightMarker = styled.mark` + color: ${({ theme }) => theme.euiTheme.colors.textParagraph}; + background-color: ${({ theme }) => theme.euiTheme.colors.backgroundFilledAccent}; + outline: ${({ theme }) => + `${theme.euiTheme.border.width.thin} solid ${theme.euiTheme.colors.backgroundFilledAccent}`}; `; -export const HighlightMarker = euiStyled.mark` - color: ${(props) => - chooseLightOrDarkColor( - tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5), - props.theme.eui.euiColorEmptyShade, - props.theme.eui.euiColorDarkestShade - )}; - background-color: ${(props) => - tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5)}; - outline: 1px solid ${(props) => - tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorAccent, 0.7, 0.5)}; - }; +export const HighlightMarker = styled.mark` + color: ${({ theme }) => theme.euiTheme.colors.textParagraph}; + background-color: ${({ theme }) => theme.euiTheme.colors.backgroundLightAccent}; + outline: ${({ theme }) => + `${theme.euiTheme.border.width.thin} solid ${theme.euiTheme.colors.backgroundLightAccent}`}; `; export const highlightFieldValue = ( diff --git a/x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts b/x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts deleted file mode 100644 index d0949b58bd575..0000000000000 --- a/x-pack/plugins/observability_solution/logs_shared/public/utils/styles.ts +++ /dev/null @@ -1,94 +0,0 @@ -/* - * 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 { get } from 'lodash'; -import { getLuminance, parseToHsl, parseToRgb, rgba, shade, tint } from 'polished'; - -type PropReader = (props: object, defaultValue?: Default) => Prop; - -const asPropReader = (reader: string | string[] | PropReader) => - typeof reader === 'function' - ? reader - : ( - props: Props, - defaultValue?: Default - ) => get(props, reader as Prop, defaultValue); - -export const switchProp = Object.assign( - (propName: string | string[] | PropReader, options: Map | object) => - (props: object) => { - const propValue = asPropReader(propName)(props, switchProp.default); - if (typeof propValue === 'undefined') { - return; - } - return options instanceof Map ? options.get(propValue) : get(options, propValue); - }, - { - default: Symbol('default'), - } -); - -export const ifProp = - (propName: string | string[] | PropReader, pass: Pass, fail: Fail) => - (props: object) => - asPropReader(propName)(props) ? pass : fail; - -export const tintOrShade = ( - textColor: string, - color: string, - tintFraction: number, - shadeFraction: number -) => { - if (parseToHsl(textColor).lightness > 0.5) { - return shade(1 - shadeFraction, color); - } else { - return tint(1 - tintFraction, color); - } -}; - -export const getContrast = (color1: string, color2: string): number => { - const luminance1 = getLuminance(color1); - const luminance2 = getLuminance(color2); - - return parseFloat( - (luminance1 > luminance2 - ? (luminance1 + 0.05) / (luminance2 + 0.05) - : (luminance2 + 0.05) / (luminance1 + 0.05) - ).toFixed(2) - ); -}; - -export const chooseLightOrDarkColor = ( - backgroundColor: string, - lightColor: string, - darkColor: string -) => { - if (getContrast(backgroundColor, lightColor) > getContrast(backgroundColor, darkColor)) { - return lightColor; - } else { - return darkColor; - } -}; - -export const transparentize = (amount: number, color: string): string => { - if (color === 'transparent') { - return color; - } - - const parsedColor = parseToRgb(color); - const alpha: number = - 'alpha' in parsedColor && typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1; - const colorWithAlpha = { - ...parsedColor, - alpha: clampValue((alpha * 100 - amount * 100) / 100, 0, 1), - }; - - return rgba(colorWithAlpha); -}; - -export const clampValue = (value: number, minValue: number, maxValue: number) => - Math.max(minValue, Math.min(maxValue, value)); diff --git a/x-pack/plugins/observability_solution/logs_shared/tsconfig.json b/x-pack/plugins/observability_solution/logs_shared/tsconfig.json index acaed5073a176..de14d6ae57492 100644 --- a/x-pack/plugins/observability_solution/logs_shared/tsconfig.json +++ b/x-pack/plugins/observability_solution/logs_shared/tsconfig.json @@ -8,7 +8,8 @@ "common/**/*", "public/**/*", "server/**/*", - "types/**/*" + "types/**/*", + "emotion.d.ts" ], "exclude": ["target/**/*"], "kbn_references": [ diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts b/x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts new file mode 100644 index 0000000000000..213178080e536 --- /dev/null +++ b/x-pack/plugins/observability_solution/observability_logs_explorer/emotion.d.ts @@ -0,0 +1,14 @@ +/* + * 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 '@emotion/react'; +import type { UseEuiTheme } from '@elastic/eui'; + +declare module '@emotion/react' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface Theme extends UseEuiTheme {} +} diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx index 0020df30b8708..0d0adc23f77c8 100644 --- a/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx +++ b/x-pack/plugins/observability_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx @@ -11,12 +11,12 @@ import { EuiHeaderLinks, EuiHeaderSection, EuiHeaderSectionItem, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public'; import { toMountPoint } from '@kbn/react-kibana-mount'; -import { euiThemeVars } from '@kbn/ui-theme'; import { LogsExplorerTabs } from '@kbn/discover-plugin/public'; import React, { useEffect, useState } from 'react'; import useObservable from 'react-use/lib/useObservable'; @@ -44,12 +44,13 @@ export const LogsExplorerTopNavMenu = () => { }; const ProjectTopNav = () => { + const { euiTheme } = useEuiTheme(); const { services } = useKibanaContextForPlugin(); return ( @@ -59,7 +60,7 @@ const ProjectTopNav = () => { @@ -85,6 +86,7 @@ const ProjectTopNav = () => { }; const ClassicTopNav = () => { + const { euiTheme } = useEuiTheme(); const { services: { appParams: { setHeaderActionMenu }, @@ -110,7 +112,7 @@ const ClassicTopNav = () => { @@ -127,7 +129,7 @@ const ClassicTopNav = () => { chrome.setBreadcrumbsAppendExtension(previousAppendExtension); } }; - }, [chrome, i18nStart, previousAppendExtension, theme]); + }, [chrome, i18nStart, previousAppendExtension, theme, euiTheme]); return ( @@ -151,9 +153,9 @@ const ClassicTopNav = () => { }; const VerticalRule = styled.span` - width: 1px; + width: ${(props) => props.theme.euiTheme.border.width.thin}; height: 20px; - background-color: ${euiThemeVars.euiColorLightShade}; + background-color: ${(props) => props.theme.euiTheme.colors.borderBaseSubdued}; `; const ConditionalVerticalRule = ({ Component }: { Component: JSX.Element | null }) => diff --git a/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json index 443d4ef8f0de7..7b786ae5bc7ed 100644 --- a/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json +++ b/x-pack/plugins/observability_solution/observability_logs_explorer/tsconfig.json @@ -8,7 +8,8 @@ "common/**/*", "public/**/*", "server/**/*", - ".storybook/**/*.tsx" + ".storybook/**/*.tsx", + "emotion.d.ts", ], "kbn_references": [ "@kbn/config-schema", @@ -31,7 +32,6 @@ "@kbn/share-plugin", "@kbn/shared-ux-router", "@kbn/shared-ux-utility", - "@kbn/ui-theme", "@kbn/xstate-utils", "@kbn/router-utils", "@kbn/observability-ai-assistant-plugin", diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx index 7c5cf36a46b30..bbcf20935b21a 100644 --- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx +++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/api_key_banner.tsx @@ -83,7 +83,7 @@ export function ApiKeyBanner({ data-test-subj="observabilityOnboardingApiKeySuccessCalloutButton" iconType="copyClipboard" onClick={copy} - color="success" + color="primary" css={{ '> svg.euiIcon': { borderRadius: '0 !important', diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx index 715116a00b28e..1c5045c893bef 100644 --- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx +++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/configure_logs.tsx @@ -284,7 +284,7 @@ export function ConfigureLogsContent() { id="advancedSettingsAccordion" css={{ '.euiAccordion__buttonContent': { - color: euiTheme.colors.primaryText, + color: euiTheme.colors.textPrimary, fontSize: xsFontSize, }, '.euiAccordion__arrow svg': { diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx index bb44d3ec38458..51101ead8c339 100644 --- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx +++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/custom_logs/install_elastic_agent.tsx @@ -220,7 +220,7 @@ export function InstallElasticAgent() { panelFooter={[ .euiFlexGroup > div:last-of-type': { fontWeight: 'normal', - color: euiTheme.colors.subduedText, + color: euiTheme.colors.textSubdued, }, }} label={