Add useEuiThemeCSSVariables syntactical sugar hook

src/services/theme/hooks.test.tsx

@@ -7,15 +7,18 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { renderHook } from '../../test/rtl';
 
+import { EuiProvider } from '../../components';
+
 import { setEuiDevProviderWarning } from './warning';
 import {
   useEuiTheme,
   UseEuiTheme,
   withEuiTheme,
   RenderWithEuiTheme,
+  useEuiThemeCSSVariables,
 } from './hooks';
 
 describe('useEuiTheme', () => {
@@ -82,3 +85,21 @@ describe('RenderWithEuiTheme', () => {
     );
   });
 });
+
+describe('useEuiThemeCSSVariables', () => {
+  it('returns CSS variable related state setters/getters', () => {
+    const { result } = renderHook(useEuiThemeCSSVariables, {
+      wrapper: EuiProvider,
+    });
+    expect(result.current.globalCSSVariables).toBeUndefined();
+    expect(result.current.themeCSSVariables).toBeUndefined();
+
+    act(() => {
+      result.current.setNearestThemeCSSVariables({ '--hello': 'world' });
+    });
+
+    // In this case, the nearest theme is the global one, so it should set both
+    expect(result.current.globalCSSVariables).toEqual({ '--hello': 'world' });
+    expect(result.current.themeCSSVariables).toEqual({ '--hello': 'world' });
+  });
+});

src/services/theme/hooks.tsx

@@ -13,6 +13,7 @@ import {
   EuiModificationsContext,
   EuiColorModeContext,
   defaultComputedTheme,
+  EuiNestedThemeContext,
 } from './context';
 import { emitEuiProviderWarning } from './warning';
 import {
@@ -95,3 +96,23 @@ export const RenderWithEuiTheme = <T extends {} = {}>({
   const theme = useEuiTheme<T>();
   return children(theme);
 };
+
+/**
+ * Minor syntactical sugar hook for theme CSS variables.
+ * Primarily meant for internal EUI usage.
+ */
+export const useEuiThemeCSSVariables = () => {
+  const {
+    setGlobalCSSVariables,
+    globalCSSVariables,
+    setNearestThemeCSSVariables,
+    themeCSSVariables,
+  } = useContext(EuiNestedThemeContext);
+
+  return {
+    setGlobalCSSVariables,
+    globalCSSVariables,
+    setNearestThemeCSSVariables,
+    themeCSSVariables,
+  };
+};

src/services/theme/index.ts

@@ -14,7 +14,12 @@ export {
   EuiColorModeContext,
 } from './context';
 export type { UseEuiTheme, WithEuiThemeProps } from './hooks';
-export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from './hooks';
+export {
+  useEuiTheme,
+  withEuiTheme,
+  RenderWithEuiTheme,
+  useEuiThemeCSSVariables,
+} from './hooks';
 export type { EuiThemeProviderProps } from './provider';
 export { EuiThemeProvider } from './provider';
 export { getEuiDevProviderWarning, setEuiDevProviderWarning } from './warning';

src/services/theme/provider.stories.tsx

@@ -6,10 +6,10 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, useContext, useEffect } from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { EuiNestedThemeContext } from './context';
+import { useEuiThemeCSSVariables } from './hooks';
 import { EuiThemeProvider, EuiThemeProviderProps } from './provider';
 
 const meta: Meta<EuiThemeProviderProps<{}>> = {
@@ -79,9 +79,8 @@ const MockComponent: FunctionComponent<{
   color: string;
   children: any;
 }> = ({ global, color, children }) => {
-  const { setGlobalCSSVariables, setNearestThemeCSSVariables } = useContext(
-    EuiNestedThemeContext
-  );
+  const { setGlobalCSSVariables, setNearestThemeCSSVariables } =
+    useEuiThemeCSSVariables();
 
   useEffect(() => {
     if (global) {