[7.16] Remove direct usage of EUI theme vars (#116232) (#118229)

* Remove direct usage of EUI theme vars (#116232)

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	packages/kbn-ui-shared-deps-src/src/theme.ts
#	src/plugins/discover/public/application/components/discover_grid/discover_grid_document_selection.tsx
#	src/plugins/expressions/public/react_expression_renderer.tsx
#	x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts

* commit using @elastic.co

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Spencer 2021-11-10 18:48:19 -07:00 committed by GitHub
parent c1989b695b
commit 5b99289c29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
74 changed files with 149 additions and 129 deletions

View file

@ -88,6 +88,16 @@ module.exports = {
exclude: USES_STYLED_COMPONENTS,
disallowedMessage: `Prefer using @emotion/react instead. To use styled-components, ensure you plugin is enabled in @kbn/dev-utils/src/babel.ts.`
},
...[
'@elastic/eui/dist/eui_theme_light.json',
'@elastic/eui/dist/eui_theme_dark.json',
'@elastic/eui/dist/eui_theme_amsterdam_light.json',
'@elastic/eui/dist/eui_theme_amsterdam_dark.json',
].map(from => ({
from,
to: false,
disallowedMessage: `Use "@kbn/ui-shared-deps-src/theme" to access theme vars.`
})),
],
],

View file

@ -23,7 +23,6 @@ filegroup(
)
NPM_MODULE_EXTRA_FILES = [
"eui_theme_vars/package.json",
"package.json",
"README.md"
]

View file

@ -1,4 +0,0 @@
{
"main": "../target_node/eui_theme_vars.js",
"types": "../target_types/eui_theme_vars.d.ts"
}

View file

@ -59,8 +59,7 @@ exports.externals = {
'@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
'@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
'@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
'@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.Theme.euiLightVars',
'@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.Theme.euiDarkVars',
// transient dep of eui
'react-beautiful-dnd': '__kbnSharedDeps__.ReactBeautifulDnD',
lodash: '__kbnSharedDeps__.Lodash',

View file

@ -6,9 +6,13 @@
* Side Public License, v 1.
*/
/* eslint-disable-next-line @kbn/eslint/module_migration */
import { default as v7Light } from '@elastic/eui/dist/eui_theme_light.json';
/* eslint-disable-next-line @kbn/eslint/module_migration */
import { default as v7Dark } from '@elastic/eui/dist/eui_theme_dark.json';
/* eslint-disable-next-line @kbn/eslint/module_migration */
import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
/* eslint-disable-next-line @kbn/eslint/module_migration */
import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
const globals: any = typeof window === 'undefined' ? {} : window;

View file

@ -10,8 +10,10 @@ import moment, { Moment } from 'moment';
import React, { FC } from 'react';
import { LineAnnotation, AnnotationDomainType, LineAnnotationStyle } from '@elastic/charts';
import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
import {
euiLightVars as lightEuiTheme,
euiDarkVars as darkEuiTheme,
} from '@kbn/ui-shared-deps-src/theme';
interface CurrentTimeProps {
isDarkMode: boolean;

View file

@ -17,8 +17,10 @@ import {
} from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
import {
euiLightVars as lightEuiTheme,
euiDarkVars as darkEuiTheme,
} from '@kbn/ui-shared-deps-src/theme';
interface EndzonesProps {
isDarkMode: boolean;

View file

@ -17,8 +17,10 @@ import {
EuiDataGridCellValueElementProps,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import themeDark from '@elastic/eui/dist/eui_theme_dark.json';
import themeLight from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as themeLight,
euiDarkVars as themeDark,
} from '@kbn/ui-shared-deps-src/theme';
import { ElasticSearchHit } from '../../doc_views/doc_views_types';
import { DiscoverGridContext } from './discover_grid_context';

View file

@ -8,8 +8,10 @@
import React, { useContext, useEffect } from 'react';
import { EuiButtonIcon, EuiDataGridCellValueElementProps, EuiToolTip } from '@elastic/eui';
import themeDark from '@elastic/eui/dist/eui_theme_dark.json';
import themeLight from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as themeLight,
euiDarkVars as themeDark,
} from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import { DiscoverGridContext } from './discover_grid_context';
import { EsHitRecord } from '../../types';

View file

@ -7,8 +7,10 @@
*/
import React, { Fragment, useContext, useEffect } from 'react';
import themeLight from '@elastic/eui/dist/eui_theme_light.json';
import themeDark from '@elastic/eui/dist/eui_theme_dark.json';
import {
euiLightVars as themeLight,
euiDarkVars as themeDark,
} from '@kbn/ui-shared-deps-src/theme';
import type { IndexPattern } from 'src/plugins/data/common';
import {

View file

@ -12,7 +12,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 { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { IExpressionLoaderParams, ExpressionRenderError } from './types';
import { ExpressionAstExpression, IInterpreterRenderHandlers } from '../common';
import { ExpressionLoader } from './loader';

View file

@ -8,8 +8,7 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
// @ts-ignore
import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { FormattedMessage } from '@kbn/i18n/react';
import {
@ -54,7 +53,7 @@ const rollupSelectItem = (
defaultMessage="Rollup index pattern"
/>
&nbsp;
<EuiBadge color={euiColorAccent}>
<EuiBadge color={euiLightVars.euiColorAccent}>
<FormattedMessage id="indexPatternEditor.typeSelect.betaLabel" defaultMessage="Beta" />
</EuiBadge>
</EuiDescriptionListTitle>

View file

@ -7,8 +7,10 @@
*/
import React from 'react';
import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as lightTheme,
euiDarkVars as darkTheme,
} from '@kbn/ui-shared-deps-src/theme';
import { EuiFormControlLayout } from '@elastic/eui';
import { CodeEditor, Props } from './code_editor';

View file

@ -8,8 +8,10 @@
import { monaco } from '@kbn/monaco';
import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as lightTheme,
euiDarkVars as darkTheme,
} from '@kbn/ui-shared-deps-src/theme';
// NOTE: For talk around where this theme information will ultimately live,
// please see this discuss issue: https://github.com/elastic/kibana/issues/43814

View file

@ -12,7 +12,7 @@ import $ from 'jquery';
import { Binder } from '../../lib/binder';
import { positionTooltip } from './position_tooltip';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
let allContents = [];

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as lightTheme } from '@kbn/ui-shared-deps-src/theme';
function getVizColorsForTheme(theme = lightTheme) {
return [

View file

@ -5,8 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { EuiErrorBoundary } from '@elastic/eui';
import { AppMountParameters, CoreStart } from 'kibana/public';
import React from 'react';

View file

@ -13,7 +13,7 @@ import {
LineAnnotationStyle,
Position,
} from '@elastic/charts';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { EuiToolTip } from '@elastic/eui';
interface Props {

View file

@ -8,7 +8,7 @@
import React, { ReactNode } from 'react';
import { EuiHighlight, EuiSelectableOption } from '@elastic/eui';
import styled from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
const StyledSpan = styled.span`
color: ${euiLightVars.euiColorSecondaryText};

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as lightTheme } from '@kbn/ui-shared-deps-src/theme';
import { render } from '@testing-library/react';
import cytoscape from 'cytoscape';
import React, { ReactNode } from 'react';

View file

@ -5,8 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
import React from 'react';
import { Route } from 'react-router-dom';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
const { euiColorDarkShade, euiColorWarning } = theme;
export const errorColor = '#c23c2b';

View file

@ -6,7 +6,7 @@
*/
import { sum, round } from 'lodash';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { isFiniteNumber } from '../../../../../../common/utils/is_finite_number';
import { Setup } from '../../../../helpers/setup_request';
import { getMetricsDateHistogramParams } from '../../../../helpers/metrics';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import { METRIC_JAVA_GC_COUNT } from '../../../../../../common/elasticsearch_fieldnames';
import { Setup } from '../../../../helpers/setup_request';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import { METRIC_JAVA_GC_TIME } from '../../../../../../common/elasticsearch_fieldnames';
import { Setup } from '../../../../helpers/setup_request';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import {
METRIC_JAVA_HEAP_MEMORY_MAX,

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import {
METRIC_JAVA_NON_HEAP_MEMORY_MAX,

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import {
METRIC_JAVA_THREAD_COUNT,

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';
import {
METRIC_SYSTEM_CPU_PERCENT,

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { ESSearchResponse } from '../../../../../../src/core/types/elasticsearch';
import { getVizColorForIndex } from '../../../common/viz_colors';
import { GenericMetricsRequest } from './fetch_and_transform_metrics';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { I18nProvider } from '@kbn/i18n/react';
import React from 'react';
import { BehaviorSubject } from 'rxjs';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { shallow } from 'enzyme';
import React from 'react';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { mount, shallow } from 'enzyme';
import React from 'react';
import { TestProviders } from '../../common/mock';

View file

@ -7,8 +7,10 @@
import d3 from 'd3';
import { useMemo } from 'react';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
import {
euiLightVars as euiThemeLight,
euiDarkVars as euiThemeDark,
} from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';

View file

@ -9,7 +9,7 @@ import React from 'react';
import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
import { EuiBadge, EuiToolTip } from '@elastic/eui';
import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme';
import type { Agent } from '../../../types';
@ -29,7 +29,7 @@ const Status = {
</EuiBadge>
),
Inactive: (
<EuiBadge color={euiVars.default.euiColorDarkShade}>
<EuiBadge color={euiVars.euiColorDarkShade}>
<FormattedMessage id="xpack.fleet.agentHealth.inactiveStatusText" defaultMessage="Inactive" />
</EuiBadge>
),

View file

@ -7,20 +7,20 @@
import { euiPaletteColorBlindBehindText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import type { SimplifiedAgentStatus } from '../../../types';
const visColors = euiPaletteColorBlindBehindText();
const colorToHexMap = {
// using variables as mentioned here https://elastic.github.io/eui/#/guidelines/getting-started
default: euiVars.default.euiColorLightShade,
default: euiLightVars.euiColorLightShade,
primary: visColors[1],
secondary: visColors[0],
accent: visColors[2],
warning: visColors[5],
danger: visColors[9],
inactive: euiVars.default.euiColorDarkShade,
inactive: euiLightVars.euiColorDarkShade,
};
export const AGENT_STATUSES: SimplifiedAgentStatus[] = [

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars as euiVars } from '@kbn/ui-shared-deps-src/theme';
import { stringHash } from './string_utils';

View file

@ -7,8 +7,10 @@
import d3 from 'd3';
import { useMemo } from 'react';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
import {
euiLightVars as euiThemeLight,
euiDarkVars as euiThemeDark,
} from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';

View file

@ -17,7 +17,7 @@ import {
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { JobMessage } from '../../../../common/types/audit_message';
import { JobIcon } from '../job_message_icon';

View file

@ -10,7 +10,7 @@ import { render, waitFor, screen } from '@testing-library/react';
import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';
import { ScatterplotMatrix } from './scatterplot_matrix';

View file

@ -10,7 +10,7 @@ import 'jest-canvas-mock';
// @ts-ignore
import { compile } from 'vega-lite/build/vega-lite';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';
import { LEGEND_TYPES } from '../vega_chart/common';

View file

@ -9,7 +9,7 @@
// @ts-ignore
import type { TopLevelSpec } from 'vega-lite/build/vega-lite';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';
import { euiPaletteColorBlind, euiPaletteNegative, euiPalettePositive } from '@elastic/eui';

View file

@ -10,7 +10,7 @@
import type { TopLevelSpec } from 'vega-lite/build/vega-lite';
import { euiPaletteColorBlind, euiPaletteGray } from '@elastic/eui';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';

View file

@ -24,7 +24,7 @@ import { EuiIcon } from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';
import { i18n } from '@kbn/i18n';
import euiVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme';
import type { DecisionPathPlotData } from './use_classification_path_data';
import { formatSingleValue } from '../../../../../formatters/format_value';
import {

View file

@ -21,7 +21,7 @@ import {
BarSeriesSpec,
} from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import euiVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme';
import {
TotalFeatureImportance,
isClassificationTotalFeatureImportance,

View file

@ -5,8 +5,10 @@
* 2.0.
*/
import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as lightTheme,
euiDarkVars as darkTheme,
} from '@kbn/ui-shared-deps-src/theme';
import {
JobCreatorType,
isMultiMetricJobCreator,

View file

@ -16,8 +16,7 @@ import {
} from '@elastic/eui';
import styled from 'styled-components';
import { FormattedMessage } from '@kbn/i18n/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { getCoreVitalTooltipMessage, Thresholds } from './core_vital_item';
import { useUiSetting$ } from '../../../../../../../src/plugins/kibana_react/public';
import {

View file

@ -6,8 +6,7 @@
*/
import { EuiErrorBoundary } from '@elastic/eui';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import React, { useMemo } from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';

View file

@ -8,7 +8,7 @@
import { storiesOf } from '@storybook/react';
import React, { ReactNode } from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { AndOrBadge } from '..';

View file

@ -8,7 +8,7 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { storiesOf, addDecorator } from '@storybook/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { createItems, TEST_COLUMNS } from './test_utils';
import { ConditionsTable } from '.';

View file

@ -9,7 +9,7 @@ import { storiesOf, addDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { ExceptionItem } from './';
import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';

View file

@ -9,7 +9,7 @@ import { storiesOf, addDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
import { ExceptionsViewerHeader } from './exceptions_viewer_header';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { shallow } from 'enzyme';
import React from 'react';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { mount, shallow } from 'enzyme';
import React from 'react';

View file

@ -8,7 +8,7 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { storiesOf, addDecorator } from '@storybook/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { ItemDetailsAction, ItemDetailsCard, ItemDetailsPropertySummary } from '.';

View file

@ -8,7 +8,7 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { storiesOf, addDecorator } from '@storybook/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { TextFieldValue } from '.';

View file

@ -9,7 +9,7 @@ import { storiesOf, addDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { LogicButtons } from './logic_buttons';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { mount, shallow } from 'enzyme';
import React from 'react';

View file

@ -5,8 +5,10 @@
* 2.0.
*/
import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as lightTheme,
euiDarkVars as darkTheme,
} from '@kbn/ui-shared-deps-src/theme';
import { DEFAULT_DARK_MODE } from '../../../../common/constants';
import { useUiSetting$ } from '../kibana';

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { I18nProvider } from '@kbn/i18n/react';
import React from 'react';

View file

@ -8,7 +8,7 @@
import { upperFirst } from 'lodash/fp';
import React from 'react';
import { EuiHealth } from '@elastic/eui';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
interface Props {
value: string;

View file

@ -7,7 +7,7 @@
import styled from 'styled-components';
import { EuiHealth } from '@elastic/eui';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import React from 'react';
import { Severity } from '@kbn/securitysolution-io-ts-alerting-types';

View file

@ -8,7 +8,7 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { addDecorator, storiesOf } from '@storybook/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { EuiCheckbox, EuiSpacer, EuiSwitch, EuiText } from '@elastic/eui';
import { OperatingSystem } from '../../../../../../../common/endpoint/types';

View file

@ -9,7 +9,7 @@ import React from 'react';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import { storiesOf } from '@storybook/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { EuiHorizontalRule } from '@elastic/eui';
import { KibanaContextProvider } from '../../../../../../../../../../src/plugins/kibana_react/public';

View file

@ -8,7 +8,7 @@
import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { storiesOf, addDecorator } from '@storybook/react';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
import { ViewType } from '../../../state';
import { ViewTypeToggle } from '.';

View file

@ -5,8 +5,10 @@
* 2.0.
*/
import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as lightTheme,
euiDarkVars as darkTheme,
} from '@kbn/ui-shared-deps-src/theme';
import React from 'react';
import { DEFAULT_DARK_MODE } from '../../../../common/constants';

View file

@ -14,7 +14,7 @@ import {
EuiIcon,
EuiText,
} from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import styled from 'styled-components';
import * as i18n from '../translations';

View file

@ -6,8 +6,10 @@
*/
import { EuiHorizontalRule } from '@elastic/eui';
import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
import {
euiLightVars as lightTheme,
euiDarkVars as darkTheme,
} from '@kbn/ui-shared-deps-src/theme';
import { getOr } from 'lodash/fp';
import React, { useCallback, useMemo } from 'react';

View file

@ -5,10 +5,8 @@
* 2.0.
*/
import euiThemeAmsterdamDark from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
import euiThemeAmsterdamLight from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
import { darkMode, euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
import { useMemo } from 'react';
import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';
type ResolverColorNames =
| 'copyableFieldBackground'
@ -31,24 +29,22 @@ type ColorMap = Record<ResolverColorNames, string>;
* Get access to Kibana-theme based colors.
*/
export function useColors(): ColorMap {
const isDarkMode = useUiSetting('theme:darkMode');
const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
return useMemo(() => {
return {
copyableFieldBackground: theme.euiColorLightShade,
descriptionText: theme.euiTextColor,
full: theme.euiColorFullShade,
graphControls: theme.euiColorDarkestShade,
graphControlsBackground: theme.euiColorEmptyShade,
graphControlsBorderColor: theme.euiColorLightShade,
processBackingFill: `${theme.euiColorPrimary}${isDarkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
resolverBackground: theme.euiColorEmptyShade,
resolverEdge: isDarkMode ? theme.euiColorLightShade : theme.euiColorLightestShade,
resolverBreadcrumbBackground: theme.euiColorLightestShade,
resolverEdgeText: isDarkMode ? theme.euiColorFullShade : theme.euiColorDarkShade,
triggerBackingFill: `${theme.euiColorDanger}${isDarkMode ? '1F' : '0F'}`,
pillStroke: theme.euiColorLightShade,
linkColor: theme.euiLinkColor,
copyableFieldBackground: euiThemeVars.euiColorLightShade,
descriptionText: euiThemeVars.euiTextColor,
full: euiThemeVars.euiColorFullShade,
graphControls: euiThemeVars.euiColorDarkestShade,
graphControlsBackground: euiThemeVars.euiColorEmptyShade,
graphControlsBorderColor: euiThemeVars.euiColorLightShade,
processBackingFill: `${euiThemeVars.euiColorPrimary}${darkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
resolverBackground: euiThemeVars.euiColorEmptyShade,
resolverEdge: darkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorLightestShade,
resolverBreadcrumbBackground: euiThemeVars.euiColorLightestShade,
resolverEdgeText: darkMode ? euiThemeVars.euiColorFullShade : euiThemeVars.euiColorDarkShade,
triggerBackingFill: `${euiThemeVars.euiColorDanger}${darkMode ? '1F' : '0F'}`,
pillStroke: euiThemeVars.euiColorLightShade,
linkColor: euiThemeVars.euiLinkColor,
};
}, [isDarkMode, theme]);
}, []);
}

View file

@ -7,12 +7,10 @@
import { i18n } from '@kbn/i18n';
import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
import { ButtonColor } from '@elastic/eui';
import euiThemeAmsterdamDark from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
import euiThemeAmsterdamLight from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
import { useMemo } from 'react';
import { ResolverProcessType, NodeDataStatus } from '../types';
import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';
import { useSymbolIDs } from './use_symbol_ids';
import { useColors } from './use_colors';
@ -24,8 +22,6 @@ export function useCubeAssets(
isProcessTrigger: boolean
): NodeStyleConfig {
const SymbolIds = useSymbolIDs();
const isDarkMode = useUiSetting('theme:darkMode');
const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
const colorMap = useColors();
const nodeAssets: NodeStyleMap = useMemo(
@ -39,7 +35,7 @@ export function useCubeAssets(
}),
isLabelFilled: true,
labelButtonFill: 'primary',
strokeColor: theme.euiColorPrimary,
strokeColor: euiThemeVars.euiColorPrimary,
},
loadingCube: {
backingFill: colorMap.processBackingFill,
@ -50,7 +46,7 @@ export function useCubeAssets(
}),
isLabelFilled: false,
labelButtonFill: 'primary',
strokeColor: theme.euiColorPrimary,
strokeColor: euiThemeVars.euiColorPrimary,
},
errorCube: {
backingFill: colorMap.processBackingFill,
@ -61,7 +57,7 @@ export function useCubeAssets(
}),
isLabelFilled: false,
labelButtonFill: 'primary',
strokeColor: theme.euiColorPrimary,
strokeColor: euiThemeVars.euiColorPrimary,
},
runningTriggerCube: {
backingFill: colorMap.triggerBackingFill,
@ -72,7 +68,7 @@ export function useCubeAssets(
}),
isLabelFilled: true,
labelButtonFill: 'danger',
strokeColor: theme.euiColorDanger,
strokeColor: euiThemeVars.euiColorDanger,
},
terminatedProcessCube: {
backingFill: colorMap.processBackingFill,
@ -86,7 +82,7 @@ export function useCubeAssets(
),
isLabelFilled: false,
labelButtonFill: 'primary',
strokeColor: theme.euiColorPrimary,
strokeColor: euiThemeVars.euiColorPrimary,
},
terminatedTriggerCube: {
backingFill: colorMap.triggerBackingFill,
@ -100,10 +96,10 @@ export function useCubeAssets(
),
isLabelFilled: false,
labelButtonFill: 'danger',
strokeColor: theme.euiColorDanger,
strokeColor: euiThemeVars.euiColorDanger,
},
}),
[SymbolIds, colorMap, theme]
[SymbolIds, colorMap]
);
if (cubeType === 'terminated') {

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import { I18nProvider } from '@kbn/i18n/react';
import React from 'react';

View file

@ -10,7 +10,7 @@ import React, { useState } from 'react';
import { EuiSpacer, EuiBasicTable } from '@elastic/eui';
// @ts-ignore
import { formatDate } from '@elastic/eui/lib/services/format';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
import { i18n } from '@kbn/i18n';

View file

@ -16,7 +16,7 @@ import {
EuiIconTip,
EuiTitle,
} from '@elastic/eui';
import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars as lightEuiTheme } from '@kbn/ui-shared-deps-src/theme';
import { Axis, BarSeries, Chart, CurveType, LineSeries, Settings } from '@elastic/charts';
import { assign, fill } from 'lodash';
import { formatMillisForDisplay } from '../../../lib/execution_duration_utils';

View file

@ -5,9 +5,8 @@
* 2.0.
*/
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
import React, { createContext, useMemo } from 'react';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts';
import { UptimeAppColors } from '../apps/uptime_app';