diff --git a/CHANGELOG.md b/CHANGELOG.md index 6de6e50e61d4..fe8de6188dff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -82,6 +82,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [Console] Remove unused ul element and its custom styling ([#3993](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3993)) - Remove unused Sass in `tile_map` plugin ([#4110](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4110)) - [Home] Remove unused tutorials ([#5212](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5212)) +- [UiSharedDeps] Standardize theme JSON imports to be light/dark-mode aware ([#5662](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5662)) ### 🔩 Tests diff --git a/src/plugins/expressions/public/react_expression_renderer.tsx b/src/plugins/expressions/public/react_expression_renderer.tsx index 838fa703a750..dd2d1bdccc42 100644 --- a/src/plugins/expressions/public/react_expression_renderer.tsx +++ b/src/plugins/expressions/public/react_expression_renderer.tsx @@ -34,7 +34,7 @@ import { Observable, Subscription } from 'rxjs'; import { filter } from 'rxjs/operators'; import useShallowCompareEffect from 'react-use/lib/useShallowCompareEffect'; import { EuiLoadingChart, EuiProgress } from '@elastic/eui'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { euiThemeVars } from '@osd/ui-shared-deps/theme'; import { IExpressionLoaderParams, ExpressionRenderError } from './types'; import { ExpressionAstExpression, IInterpreterRenderHandlers } from '../common'; import { ExpressionLoader } from './loader'; @@ -191,8 +191,9 @@ export const ReactExpressionRenderer = ({ const expressionStyles: React.CSSProperties = {}; + // TODO: refactor to SCSS instead of getting values from theme: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5661 if (padding) { - expressionStyles.padding = theme.paddingSizes[padding]; + expressionStyles.padding = euiThemeVars.paddingSizes[padding]; } return ( diff --git a/src/plugins/index_pattern_management/public/components/create_button/create_button.tsx b/src/plugins/index_pattern_management/public/components/create_button/create_button.tsx index af67a5e317ce..28ba3b7afca6 100644 --- a/src/plugins/index_pattern_management/public/components/create_button/create_button.tsx +++ b/src/plugins/index_pattern_management/public/components/create_button/create_button.tsx @@ -28,8 +28,6 @@ * under the License. */ -// @ts-ignore -import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json'; import React, { Component, Fragment } from 'react'; import { @@ -148,7 +146,7 @@ export class CreateButton extends Component<Props, State> { private renderBetaBadge = () => { return ( - <EuiBadge color={euiColorAccent}> + <EuiBadge color="accent"> <FormattedMessage id="indexPatternManagement.indexPatternList.createButton.betaLabel" defaultMessage="Beta" diff --git a/src/plugins/opensearch_dashboards_react/public/code_editor/editor_theme.ts b/src/plugins/opensearch_dashboards_react/public/code_editor/editor_theme.ts index 0dd3807d530b..c5b76c8bf206 100644 --- a/src/plugins/opensearch_dashboards_react/public/code_editor/editor_theme.ts +++ b/src/plugins/opensearch_dashboards_react/public/code_editor/editor_theme.ts @@ -122,6 +122,7 @@ export function createTheme( }; } +// TODO: Refactor to use packages/osd-ui-shared-deps/theme.ts: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5661 const DARK_THEME = createTheme(darkTheme, '#343551'); const LIGHT_THEME = createTheme(lightTheme, '#E3E4ED'); diff --git a/src/plugins/vis_type_vislib/public/vislib/components/tooltip/tooltip.js b/src/plugins/vis_type_vislib/public/vislib/components/tooltip/tooltip.js index 99e095897b89..7770ae03739a 100644 --- a/src/plugins/vis_type_vislib/public/vislib/components/tooltip/tooltip.js +++ b/src/plugins/vis_type_vislib/public/vislib/components/tooltip/tooltip.js @@ -34,13 +34,13 @@ import $ from 'jquery'; import { Binder } from '../../lib/binder'; import { positionTooltip } from './position_tooltip'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { euiThemeVars } from '@osd/ui-shared-deps/theme'; let allContents = []; -const tooltipColumnPadding = parseInt(theme.euiSizeXS || 0, 10) * 2; -const tooltipTableMargin = parseInt(theme.euiSizeS || 0, 10) * 2; -const tooltipMaxWidth = parseInt(theme.euiSizeXL || 0, 10) * 10; +const tooltipColumnPadding = parseInt(euiThemeVars.euiSizeXS || 0, 10) * 2; +const tooltipTableMargin = parseInt(euiThemeVars.euiSizeS || 0, 10) * 2; +const tooltipMaxWidth = parseInt(euiThemeVars.euiSizeXL || 0, 10) * 10; /** * Add tooltip and listeners to visualization elements