[Presentation] Replace euiThemeVars with euiTheme

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' ? (
           <EuiMarkdownEditor
@@ -96,7 +96,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
         ) : (
           <EuiMarkdownFormat
             css={css`
-              padding: ${euiThemeVars.euiSizeM};
+              padding: ${euiTheme.size.m};
             `}
           >
             {content ?? ''}

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 = (
               <EuiFlexItem
                 grow={false}
                 css={css`
-                  padding: ${euiThemeVars.euiSizeS};
+                  padding: ${euiTheme.size.s};
                 `}
               >
                 <DataViewPicker

examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx

@@ -7,7 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -18,7 +26,6 @@ import {
   SerializedTitles,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { PresentationContainer } from '@kbn/presentation-containers';
@@ -154,6 +161,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
               bookAttributesManager.bookTitle,
               bookAttributesManager.bookSynopsis
             );
+          const { euiTheme } = useEuiTheme();
 
           return (
             <div
@@ -179,7 +187,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
               )}
               <div
                 css={css`
-                  padding: ${euiThemeVars.euiSizeM};
+                  padding: ${euiTheme.size.m};
                 `}
               >
                 <EuiFlexGroup

examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiStat } from '@elastic/eui';
+import { EuiBadge, EuiStat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -17,7 +17,6 @@ import {
   initializeTimeRange,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useEffect } from 'react';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { SEARCH_EMBEDDABLE_ID } from './constants';
@@ -124,6 +123,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
         api,
         Component: () => {
           const [count, error] = useBatchedPublishingSubjects(count$, blockingError$);
+          const { euiTheme } = useEuiTheme();
 
           useEffect(() => {
             return () => {
@@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
             <div
               css={css`
                 width: 100%;
-                padding: ${euiThemeVars.euiSizeM};
+                padding: ${euiTheme.size.m};
               `}
             >
               <EuiStat

packages/kbn-grid-layout/grid/drag_preview.tsx

@@ -10,9 +10,8 @@
 import React, { useEffect, useRef } from 'react';
 import { combineLatest, skip } from 'rxjs';
 
-import { transparentize } from '@elastic/eui';
+import { transparentize, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import { GridLayoutStateManager } from './types';
 
@@ -24,6 +23,7 @@ export const DragPreview = ({
   gridLayoutStateManager: GridLayoutStateManager;
 }) => {
   const dragPreviewRef = useRef<HTMLDivElement | null>(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;
       `}
     />

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<HTMLDivElement | null>(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):

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,

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<HTMLDivElement, GridPanelProps>(
     { 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<HTMLDivElement, GridPanelProps>(
               // 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(

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<HTMLButtonElement, MouseEvent>
   ) => void;
 }) => {
+  const { euiTheme } = useEuiTheme();
   return (
     <button
       className="kbnGridPanel__resizeHandle"
@@ -41,17 +42,17 @@ export const ResizeHandle = ({
         opacity: 0;
         margin: -2px;
         position: absolute;
-        width: ${euiThemeVars.euiSizeL};
-        height: ${euiThemeVars.euiSizeL};
+        width: ${euiTheme.size.l};
+        height: ${euiTheme.size.l};
         transition: opacity 0.2s, border 0.2s;
         border-radius: 7px 0 7px 0;
-        border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
-        border-right: 2px solid ${euiThemeVars.euiColorSuccess};
+        border-bottom: 2px solid ${euiTheme.colors.accentSecondary};
+        border-right: 2px solid ${euiTheme.colors.accentSecondary};
         &:hover,
         &:focus {
           outline-style: none !important;
           opacity: 1;
-          background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
+          background-color: ${transparentize(euiTheme.colors.accentSecondary, 0.05)};
           cursor: se-resize;
         }
         .kbnGrid--static & {

packages/kbn-grid-layout/grid/grid_row/grid_row.tsx

@@ -10,9 +10,8 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { combineLatest, map, pairwise, skip } from 'rxjs';
 
-import { transparentize } from '@elastic/eui';
+import { transparentize, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import { cloneDeep } from 'lodash';
 import { DragPreview } from '../drag_preview';
@@ -36,6 +35,8 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
     const [rowTitle, setRowTitle] = useState<string>(currentRow.title);
     const [isCollapsed, setIsCollapsed] = useState<boolean>(currentRow.isCollapsed);
 
+    const { euiTheme } = useEuiTheme();
+
     /** Syncs panel IDs in order after a change in the grid layout, such as adding, removing, or reordering panels. */
     const syncPanelIds = useCallback(() => {
       const newPanelIds = getKeysInOrder(gridLayoutStateManager.gridLayout$.value[rowIndex].panels);
@@ -95,7 +96,7 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
             const targetRow = interactionEvent?.targetRowIndex;
             if (rowIndex === targetRow && interactionEvent) {
               // apply "targetted row" styles
-              const gridColor = transparentize(euiThemeVars.euiColorSuccess, 0.2);
+              const gridColor = transparentize(euiTheme.colors.accentSecondary, 0.2);
               rowRef.style.backgroundPosition = `top -${gutterSize / 2}px left -${
                 gutterSize / 2
               }px`;
@@ -105,7 +106,7 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
               rowRef.style.backgroundImage = `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
         linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`;
               rowRef.style.backgroundColor = `${transparentize(
-                euiThemeVars.euiColorSuccess,
+                euiTheme.colors.accentSecondary,
                 0.05
               )}`;
             } else {

packages/kbn-grid-layout/grid/use_grid_layout_state.ts

@@ -10,7 +10,7 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { BehaviorSubject, combineLatest, debounceTime } from 'rxjs';
 import useResizeObserver, { type ObservedSize } from 'use-resize-observer/polyfilled';
-
+import { useEuiTheme } from '@elastic/eui';
 import {
   ActivePanel,
   GridAccessMode,
@@ -38,6 +38,7 @@ export const useGridLayoutState = ({
 } => {
   const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
   const panelRefs = useRef<Array<{ [id: string]: HTMLDivElement | null }>>([]);
+  const { euiTheme } = useEuiTheme();
 
   const expandedPanelId$ = useMemo(
     () => new BehaviorSubject<string | undefined>(expandedPanelId),
@@ -81,7 +82,9 @@ export const useGridLayoutState = ({
       runtimeSettings$,
       interactionEvent$,
       expandedPanelId$,
-      isMobileView$: new BehaviorSubject<boolean>(shouldShowMobileView(accessMode)),
+      isMobileView$: new BehaviorSubject<boolean>(
+        shouldShowMobileView(accessMode, euiTheme.breakpoint.m)
+      ),
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -99,7 +102,9 @@ export const useGridLayoutState = ({
           gridSettings.columnCount;
 
         gridLayoutStateManager.runtimeSettings$.next({ ...gridSettings, columnPixelWidth });
-        gridLayoutStateManager.isMobileView$.next(shouldShowMobileView(currentAccessMode));
+        gridLayoutStateManager.isMobileView$.next(
+          shouldShowMobileView(currentAccessMode, euiTheme.breakpoint.m)
+        );
       });
 
     return () => {