diff --git a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx index 2ad9cd639a223..7c262d744a55e 100644 --- a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx +++ b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiMarkdownEditor, EuiMarkdownFormat } from '@elastic/eui'; +import { EuiMarkdownEditor, EuiMarkdownFormat, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; @@ -16,7 +16,6 @@ import { useInheritedViewMode, useStateFromPublishingSubject, } from '@kbn/presentation-publishing'; -import { euiThemeVars } from '@kbn/ui-theme'; import React from 'react'; import { BehaviorSubject } from 'rxjs'; import { EUI_MARKDOWN_ID } from './constants'; @@ -80,6 +79,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory< // get state for rendering const content = useStateFromPublishingSubject(content$); const viewMode = useInheritedViewMode(api) ?? 'view'; + const { euiTheme } = useEuiTheme(); return viewMode === 'edit' ? ( {content ?? ''} diff --git a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx index c6b13d2419971..c88219d1fafc3 100644 --- a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx +++ b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; import type { Reference } from '@kbn/content-management-utils'; import { CoreStart } from '@kbn/core-lifecycle-browser'; @@ -17,7 +17,6 @@ import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; import { initializeTitles, useBatchedPublishingSubjects } from '@kbn/presentation-publishing'; import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public'; -import { euiThemeVars } from '@kbn/ui-theme'; import { UnifiedFieldListSidebarContainer, type UnifiedFieldListSidebarContainerProps, @@ -150,6 +149,7 @@ export const getFieldListFactory = ( dataViews$, selectedFieldNames$ ); + const { euiTheme } = useEuiTheme(); const selectedDataView = renderDataViews?.[0]; @@ -165,7 +165,7 @@ export const getFieldListFactory = ( { bookAttributesManager.bookTitle, bookAttributesManager.bookSynopsis ); + const { euiTheme } = useEuiTheme(); return (
{ )}
{ api, Component: () => { const [count, error] = useBatchedPublishingSubjects(count$, blockingError$); + const { euiTheme } = useEuiTheme(); useEffect(() => { return () => { @@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
{ const dragPreviewRef = useRef(null); + const { euiTheme } = useEuiTheme(); useEffect( () => { @@ -62,8 +62,8 @@ export const DragPreview = ({ css={css` display: none; pointer-events: none; - border-radius: ${euiThemeVars.euiBorderRadius}; - background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.2)}; + border-radius: ${euiTheme.border.radius}; + background-color: ${transparentize(euiTheme.colors.accentSecondary, 0.2)}; transition: opacity 100ms linear; `} /> diff --git a/packages/kbn-grid-layout/grid/grid_height_smoother.tsx b/packages/kbn-grid-layout/grid/grid_height_smoother.tsx index c880832c90a04..922cd112c80ce 100644 --- a/packages/kbn-grid-layout/grid/grid_height_smoother.tsx +++ b/packages/kbn-grid-layout/grid/grid_height_smoother.tsx @@ -10,7 +10,7 @@ import { css } from '@emotion/react'; import React, { PropsWithChildren, useEffect, useRef } from 'react'; import { combineLatest } from 'rxjs'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { useEuiTheme } from '@elastic/eui'; import { GridLayoutStateManager } from './types'; export const GridHeightSmoother = ({ @@ -19,6 +19,7 @@ export const GridHeightSmoother = ({ }: PropsWithChildren<{ gridLayoutStateManager: GridLayoutStateManager }>) => { // set the parent div size directly to smooth out height changes. const smoothHeightRef = useRef(null); + const { euiTheme } = useEuiTheme(); useEffect(() => { const interactionStyleSubscription = combineLatest([ gridLayoutStateManager.gridDimensions$, @@ -51,7 +52,7 @@ export const GridHeightSmoother = ({ if (expandedPanelId) { const smoothHeightRefY = smoothHeightRef.current.getBoundingClientRect().y + document.documentElement.scrollTop; - const gutterSize = parseFloat(euiThemeVars.euiSizeL); + const gutterSize = parseFloat(euiTheme.size.l); // When panel is expanded, ensure the page occupies the full viewport height // If the parent element is a flex container (preferred approach): diff --git a/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx b/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx index 90305812ff8d5..f75df4b00afe9 100644 --- a/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx +++ b/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx @@ -11,7 +11,6 @@ import React from 'react'; import { EuiIcon, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { i18n } from '@kbn/i18n'; import { PanelInteractionEvent } from '../types'; @@ -37,17 +36,17 @@ export const DragHandle = ({ position: absolute; align-items: center; justify-content: center; - top: -${euiThemeVars.euiSizeL}; - width: ${euiThemeVars.euiSizeL}; - height: ${euiThemeVars.euiSizeL}; - z-index: ${euiThemeVars.euiZLevel3}; - margin-left: ${euiThemeVars.euiSizeS}; + top: -${euiTheme.size.l}; + width: ${euiTheme.size.l}; + height: ${euiTheme.size.l}; + z-index: ${euiTheme.levels.mask}; // TODO: double check this + margin-left: ${euiTheme.size.s}; border: 1px solid ${euiTheme.border.color}; border-bottom: none; - background-color: ${euiTheme.colors.emptyShade}; - border-radius: ${euiThemeVars.euiBorderRadius} ${euiThemeVars.euiBorderRadius} 0 0; + background-color: ${euiTheme.colors.backgroundBasePlain}; + border-radius: ${euiTheme.border.radius} ${euiTheme.border.radius} 0 0; cursor: grab; - transition: ${euiThemeVars.euiAnimSpeedSlow} opacity; + transition: ${euiTheme.animation.slow} opacity; .kbnGridPanel:hover &, .kbnGridPanel:focus-within &, &:active, diff --git a/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx index e817f5fc3871b..4721daed6b62d 100644 --- a/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx +++ b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx @@ -10,9 +10,14 @@ import React, { forwardRef, useEffect, useMemo } from 'react'; import { combineLatest, skip } from 'rxjs'; -import { EuiPanel, euiFullHeight, useEuiOverflowScroll } from '@elastic/eui'; +import { + EuiPanel, + euiFullHeight, + useEuiOverflowScroll, + useEuiTheme, + useEuiThemeCSSVariables, +} from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { GridLayoutStateManager, PanelInteractionEvent } from '../types'; import { getKeysInOrder } from '../utils/resolve_grid_row'; import { DragHandle } from './drag_handle'; @@ -34,6 +39,7 @@ export const GridPanel = forwardRef( { panelId, rowIndex, renderPanelContents, interactionStart, gridLayoutStateManager }, panelRef ) => { + const { euiTheme } = useEuiTheme(); /** Set initial styles based on state at mount to prevent styles from "blipping" */ const initialStyles = useMemo(() => { const initialPanel = gridLayoutStateManager.gridLayout$.getValue()[rowIndex].panels[panelId]; @@ -73,7 +79,7 @@ export const GridPanel = forwardRef( // if the current panel is active, give it fixed positioning depending on the interaction event const { position: draggingPosition } = activePanel; - ref.style.zIndex = `${euiThemeVars.euiZModal}`; + ref.style.zIndex = `${euiTheme.levels.modal}`; if (currentInteractionEvent?.type === 'resize') { // if the current panel is being resized, ensure it is not shrunk past the size of a single cell ref.style.width = `${Math.max( diff --git a/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx b/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx index 4c4a2d60ee5cb..30a062d273c4c 100644 --- a/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx +++ b/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { transparentize } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { PanelInteractionEvent } from '../types'; @@ -23,6 +23,7 @@ export const ResizeHandle = ({ e: React.MouseEvent ) => void; }) => { + const { euiTheme } = useEuiTheme(); return (