diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx
index de89d5b3e88..14130537e55 100644
--- a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx
+++ b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx
@@ -1,11 +1,9 @@
 import {
-  euiBackgroundColor,
   EuiButton,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiToolTip,
   useEuiMemoizedStyles,
-  euiBorderColor,
   UseEuiTheme,
   darken,
 } from '@elastic/eui';
@@ -23,7 +21,7 @@ export interface DemoActionsBarProps {
 const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => {
   return {
     actionsBar: css`
-      padding: ${euiTheme.euiTheme.size.s};
+      padding: var(--eui-size-s);
       background: ${darken(euiTheme.euiTheme.colors.body, 0.05)};
       border-top: 1px solid var(--docs-demo-border-color);
 
@@ -34,8 +32,8 @@ const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => {
       }
     `,
     button: css`
-      background: ${euiBackgroundColor(euiTheme, 'primary', { method: 'opaque' })};
-      border: 1px solid ${euiBorderColor(euiTheme, 'primary')};
+      background: var(--eui-background-color-primary-opaque);
+      border: 1px solid var(--eui-border-color-primary);
       margin-right: auto;
     `,
   };
diff --git a/packages/docusaurus-theme/src/components/demo/editor/editor.tsx b/packages/docusaurus-theme/src/components/demo/editor/editor.tsx
index 8ae582784db..4a5394025f3 100644
--- a/packages/docusaurus-theme/src/components/demo/editor/editor.tsx
+++ b/packages/docusaurus-theme/src/components/demo/editor/editor.tsx
@@ -1,8 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
 import { LiveEditor, LiveError } from 'react-live';
 import { css } from '@emotion/react';
-import { useEuiTheme, euiFontSize, euiBackgroundColor, UseEuiTheme } from '@elastic/eui';
+import { useEuiMemoizedStyles, useEuiTheme } from '@elastic/eui';
 
-const getEditorStyles = (euiTheme: UseEuiTheme) => ({
+const getEditorStyles = () => ({
   editor: css`
     font-family: var(--ifm-font-family-monospace);
     border-radius: 0 0 var(--docs-demo-border-radius) var(--docs-demo-border-radius);
@@ -15,10 +23,10 @@ const getEditorStyles = (euiTheme: UseEuiTheme) => ({
     // docusaurus overrides the default pre styles
     // forcing us to use higher specificity here
     && > pre {
-      font-size: ${euiFontSize(euiTheme, 's')};
-      background: ${euiBackgroundColor(euiTheme, 'danger')};
-      color: ${euiTheme.euiTheme.colors.dangerText};
-      padding: ${euiTheme.euiTheme.size.xs} ${euiTheme.euiTheme.size.s};
+      font-size: var(--eui-font-size-s);
+      background: var(--eui-background-color-danger);
+      color: var(--eui-color-danger-text);
+      padding: var(--eui-size-xs) var(--eui-size-s);
       margin: 0;
       border-radius: 0;
     }
@@ -26,8 +34,7 @@ const getEditorStyles = (euiTheme: UseEuiTheme) => ({
 });
 
 export const DemoEditor = () => {
-  const euiTheme = useEuiTheme();
-  const styles = getEditorStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(getEditorStyles);
 
   return (
     <div css={styles.editor}>
diff --git a/packages/docusaurus-theme/src/theme/Root.styles.ts b/packages/docusaurus-theme/src/theme/Root.styles.ts
index 94883648bda..f1af0c84e44 100644
--- a/packages/docusaurus-theme/src/theme/Root.styles.ts
+++ b/packages/docusaurus-theme/src/theme/Root.styles.ts
@@ -1,4 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
 import {
+  euiBorderColor,
   euiFontSizeFromScale,
   euiLineHeightFromBaseline,
   useEuiBackgroundColor,
@@ -8,7 +17,8 @@ import {
 // override docusaurus variables as needed
 // NOTE: we use define variables with style calculations here
 // on the global level to reduce how often they are called
-export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
+export const getGlobalStyles = (theme: UseEuiTheme) => {
+  const { euiTheme } = theme;
   const { font, base, colors, size } = euiTheme;
   const fontBodyScale = font.scale[font.body.scale];
   const fontBase = {
@@ -39,10 +49,13 @@ export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
       [data-theme='dark']:root {
         /* EUI theme variables */
         --eui-background-color-primary: ${useEuiBackgroundColor('primary')};
+        --eui-background-color-primary-opaque: ${useEuiBackgroundColor('primary', { method: 'opaque' })};
         --eui-background-color-success: ${useEuiBackgroundColor('success')};
         --eui-background-color-danger: ${useEuiBackgroundColor('danger')};
         --eui-background-color-warning: ${useEuiBackgroundColor('warning')};
-  
+
+        --eui-color-danger-text: ${euiTheme.colors.dangerText};
+
         /* Docusaurus theme variables */
         --ifm-background-color: ${colors.body};
         --ifm-font-color-base: ${colors.text};
@@ -68,6 +81,11 @@ export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
         --eui-line-height-s: ${lineHeightS};
         --eui-line-height-xs: ${lineHeightXS};
 
+        --eui-size-xs: ${euiTheme.size.xs};
+        --eui-size-s: ${euiTheme.size.s};
+
+        --eui-border-color-primary: ${euiBorderColor(theme, 'primary')};
+
         /* Docusaurus theme variables */
         --ifm-font-family-base: ${fontBase.fontFamily};
         --ifm-font-size-base: var(--eui-font-size-base);
@@ -80,7 +98,7 @@ export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => {
       h1, h2, h3, h4, h5, h6 {
         margin-block-start: ${size.l};
         margin-block-end: ${size.m};
-        
+
         font-weight: ${font.weight.bold};
       }