diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
index 1a9b86a1de2..c3fee11f1ab 100644
--- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
+++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable no-restricted-globals */
 import React, { useState } from 'react';
 
-import { useIsWithinBreakpoints } from '../../../../src/services';
+import {
+  EuiThemeProvider,
+  useIsWithinBreakpoints,
+} from '../../../../src/services';
 import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
@@ -84,16 +87,18 @@ const GuideThemeSelectorComponent: React.FunctionComponent<
   });
 
   const button = (
-    <EuiButton
-      size="s"
-      iconType="arrowDown"
-      iconSide="right"
-      color="ghost"
-      minWidth={0}
-      onClick={onButtonClick}
-    >
-      {isMobileSize ? 'Theme' : currentTheme.text}
-    </EuiButton>
+    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
+      <EuiButton
+        size="s"
+        iconType="arrowDown"
+        iconSide="right"
+        color="text"
+        minWidth={0}
+        onClick={onButtonClick}
+      >
+        {isMobileSize ? 'Theme' : currentTheme.text}
+      </EuiButton>
+    </EuiThemeProvider>
   );
 
   return (
diff --git a/src-docs/src/views/bottom_bar/bottom_bar_position.js b/src-docs/src/views/bottom_bar/bottom_bar_position.js
index 6a96c946440..66855b9c044 100644
--- a/src-docs/src/views/bottom_bar/bottom_bar_position.js
+++ b/src-docs/src/views/bottom_bar/bottom_bar_position.js
@@ -1,25 +1,23 @@
 import React from 'react';
 
-import { EuiBottomBar, EuiSpacer, EuiText } from '../../../../src/components';
+import { EuiBottomBar, EuiText } from '../../../../src/components';
 
 export default () => {
   return (
-    <>
+    <div css={{ overflow: 'auto', blockSize: 200 }}>
       <EuiText>
         <p>
-          When scrolling past this example block, the{' '}
-          <strong>EuiBottomBar</strong> will stick to the bottom of the browser
-          window (with a 10px offset), but keeps it within the bounds of its
-          parent.
+          When scrolling within this example, the <strong>EuiBottomBar</strong>{' '}
+          will stick to the bottom of scrollable container (with a 10px offset),
+          but will not scroll with the page itself.
         </p>
       </EuiText>
-      <EuiSpacer size="xl" />
-      <EuiSpacer size="xl" />
+      <div css={{ blockSize: 400 }} />
       <EuiBottomBar position="sticky" bottom={10}>
-        <EuiText color="ghost" textAlign="center">
+        <EuiText textAlign="center">
           <p>Scroll to see!</p>
         </EuiText>
       </EuiBottomBar>
-    </>
+    </div>
   );
 };
diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 56ddcfa7840..196852c5ecc 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -101,12 +101,6 @@ const splitButtonSnippet = [
 </EuiFlexGroup>`,
 ];
 
-import ButtonGhost from './button_ghost';
-const buttonGhostSource = require('!!raw-loader!./button_ghost');
-const buttonGhostSnippet = `<EuiButton color="ghost">
-  <!-- Button text -->
-</EuiButton>`;
-
 import ButtonAsLink from './button_as_link';
 const buttonAsLinkSource = require('!!raw-loader!./button_as_link');
 const buttonAsLinkSnippet = `<EuiButton href={someUrl}><!-- Button text --></EuiButton>
@@ -703,35 +697,6 @@ export const ButtonExample = {
       props: { EuiButtonGroup, EuiButtonGroupOptionProps },
       demoPanelProps: { color: 'subdued' },
     },
-    {
-      title: 'Ghost vs. dark mode',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: buttonGhostSource,
-        },
-      ],
-      text: (
-        <p>
-          For buttons on dark color backgrounds, it is recommended to wrap the
-          entire area in{' '}
-          <EuiCode language="js">
-            {'<EuiThemeProvider colorMode="dark">'}
-          </EuiCode>{' '}
-          to invert all colors to dark mode. The legacy{' '}
-          <EuiCode language="js">{'color="ghost"'}</EuiCode> now uses this
-          method and is set for deprecation. An example usage of inverted
-          buttons is in combination with{' '}
-          <Link to="/layout/bottom-bar">
-            <strong>EuiBottomBar</strong>
-          </Link>{' '}
-          which already wraps its children in dark mode.
-        </p>
-      ),
-      snippet: buttonGhostSnippet,
-      demo: <ButtonGhost />,
-      demoPanelProps: { paddingSize: 'none' },
-    },
   ],
   guidelines: <Guidelines />,
 };
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
deleted file mode 100644
index eede6912d39..00000000000
--- a/src-docs/src/views/button/button_ghost.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-} from '../../../../src/components';
-import { EuiThemeProvider } from '../../../../src/services';
-
-export default () => {
-  const [toggle0On, setToggle0On] = useState(false);
-
-  const onToggle0Change = () => {
-    setToggle0On((isOn) => !isOn);
-  };
-
-  return (
-    <EuiThemeProvider colorMode="dark">
-      <EuiPanel borderRadius="none" hasShadow={false} color="subdued">
-        <EuiFlexGroup wrap gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiButton color="text" onClick={() => {}}>
-              Ghost
-            </EuiButton>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              color="text"
-              size="s"
-              iconType="check"
-              onClick={() => {}}
-            >
-              Filled
-            </EuiButton>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty size="s" color="text" onClick={() => {}}>
-              small
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButtonIcon
-              size="s"
-              color="text"
-              iconType="user"
-              onClick={() => {}}
-              aria-label="Your account"
-            />
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButton color="text" isLoading fill size="s">
-              Loading&hellip;
-            </EuiButton>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButton color="text" isLoading>
-              Loading&hellip;
-            </EuiButton>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              color="text"
-              isSelected={toggle0On}
-              fill={toggle0On}
-              onClick={onToggle0Change}
-            >
-              Toggle me
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
-    </EuiThemeProvider>
-  );
-};
diff --git a/src-docs/src/views/page_template/_page_demo.tsx b/src-docs/src/views/page_template/_page_demo.tsx
index f2f94bc6f9f..e2267136592 100644
--- a/src-docs/src/views/page_template/_page_demo.tsx
+++ b/src-docs/src/views/page_template/_page_demo.tsx
@@ -148,7 +148,7 @@ export const PageDemo: FunctionComponent<
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton color="ghost">Share</EuiButton>
+        <EuiButton color="text">Share</EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   ) : undefined;
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index e5a199790ef..5a20f9ae36d 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -41,17 +41,6 @@ exports[`EuiButton props color danger is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiButton props color ghost is rendered 1`] = `
-<button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark"
-  type="button"
->
-  <span
-    class="emotion-euiButtonDisplayContent"
-  />
-</button>
-`;
-
 exports[`EuiButton props color primary is rendered 1`] = `
 <button
   class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index e360a73842d..e850b01b434 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -27,10 +27,9 @@ import {
   EuiButtonDisplayCommonProps,
   isButtonDisabled,
 } from './button_display/_button_display';
-import { EuiThemeProvider } from '../../services';
 
-export const COLORS = [...BUTTON_COLORS, 'ghost'] as const;
-export type EuiButtonColor = _EuiButtonColor | 'ghost';
+export const COLORS = BUTTON_COLORS;
+export type EuiButtonColor = _EuiButtonColor;
 
 export const SIZES = ['s', 'm'] as const;
 export type EuiButtonSize = (typeof SIZES)[number];
@@ -43,7 +42,6 @@ interface BaseProps {
   fill?: boolean;
   /**
    * Any of the named color palette options.
-   * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
    */
   color?: EuiButtonColor;
   /**
@@ -84,55 +82,36 @@ export type Props = ExclusiveUnion<
  * EuiButton is largely responsible for providing relevant props
  * and the logic for element-specific attributes
  */
-export const EuiButton: FunctionComponent<Props> = (props) => {
-  const {
-    className,
-    buttonRef,
-    color: _color = 'primary',
-    fill,
-    ...rest
-  } = props;
-
-  const buttonIsDisabled = isButtonDisabled({
+export const EuiButton: FunctionComponent<Props> = ({
+  className,
+  buttonRef,
+  size = 'm',
+  color = 'primary',
+  fill,
+  ...rest
+}) => {
+  const isDisabled = isButtonDisabled({
     href: rest.href,
     isDisabled: rest.isDisabled || rest.disabled,
     isLoading: rest.isLoading,
   });
 
-  const color = buttonIsDisabled ? 'disabled' : _color;
-
   const buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base',
-  })[color === 'ghost' ? 'text' : color];
+  })[isDisabled ? 'disabled' : color];
 
   const buttonFocusStyle = useEuiButtonFocusCSS();
 
   const classes = classNames('euiButton', className);
   const cssStyles = [buttonColorStyles, buttonFocusStyle];
 
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (
-      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-        <EuiButton {...props} color="text" />
-      </EuiThemeProvider>
-    );
-  }
-
   return (
     <EuiButtonDisplay
       className={classes}
       css={cssStyles}
       ref={buttonRef}
+      size={size}
       {...rest}
     />
   );
 };
-
-EuiButton.displayName = 'EuiButton';
-
-// Use defaultProps for simple pass-through props
-EuiButton.defaultProps = {
-  size: 'm',
-  color: 'primary',
-};
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index 56dd6eadcf7..b5f0190c987 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -49,21 +49,6 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
-<button
-  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark"
-  type="button"
->
-  <span
-    class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-  >
-    <span
-      class="eui-textTruncate euiButtonEmpty__text"
-    />
-  </span>
-</button>
-`;
-
 exports[`EuiButtonEmpty props color primary is rendered 1`] = `
 <button
   class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"
diff --git a/src/components/button/button_empty/button_empty.test.tsx b/src/components/button/button_empty/button_empty.test.tsx
index 602e4e4334f..6a13815ab61 100644
--- a/src/components/button/button_empty/button_empty.test.tsx
+++ b/src/components/button/button_empty/button_empty.test.tsx
@@ -88,12 +88,6 @@ describe('EuiButtonEmpty', () => {
           expect(container.firstChild).toMatchSnapshot();
         });
       });
-
-      test('ghost is rendered', () => {
-        const { container } = render(<EuiButtonEmpty color={'ghost'} />);
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
     });
 
     describe('size', () => {
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index d9427ff9ead..960544f848f 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -15,11 +15,7 @@ import {
   PropsForAnchor,
   PropsForButton,
 } from '../../common';
-import {
-  useEuiTheme,
-  EuiThemeProvider,
-  getSecureRelForTarget,
-} from '../../../services';
+import { useEuiTheme, getSecureRelForTarget } from '../../../services';
 
 import {
   EuiButtonDisplayContent,
@@ -50,9 +46,8 @@ export interface CommonEuiButtonEmptyProps
     CommonProps {
   /**
    * Any of the named color palette options.
-   * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
    */
-  color?: _EuiButtonColor | 'ghost';
+  color?: _EuiButtonColor;
   size?: EuiButtonEmptySizes;
   /**
    * Ensure the text of the button sits flush to the left, right, or both sides of its container
@@ -92,39 +87,34 @@ export type EuiButtonEmptyProps = ExclusiveUnion<
   EuiButtonEmptyPropsForButton
 >;
 
-export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = (
-  props
-) => {
-  const {
-    children,
-    className,
-    iconType,
-    iconSide = 'left',
-    iconSize = 'm',
-    color: _color = 'primary',
-    size = 'm',
-    flush,
-    isDisabled: _isDisabled,
-    disabled,
-    isLoading,
-    href,
-    target,
-    rel,
-    type = 'button',
-    buttonRef,
-    contentProps,
-    textProps,
-    isSelected,
-    ...rest
-  } = props;
-
+export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
+  children,
+  className,
+  iconType,
+  iconSide = 'left',
+  iconSize = 'm',
+  color = 'primary',
+  size = 'm',
+  flush,
+  isDisabled: _isDisabled,
+  disabled,
+  isLoading,
+  href,
+  target,
+  rel,
+  type = 'button',
+  buttonRef,
+  contentProps,
+  textProps,
+  isSelected,
+  ...rest
+}) => {
   const isDisabled = isButtonDisabled({
     isDisabled: _isDisabled || disabled,
     href,
     isLoading,
   });
 
-  const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty',
   });
@@ -134,21 +124,12 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = (
   const cssStyles = [
     styles.euiButtonEmpty,
     styles[size],
-    buttonColorStyles[color],
+    buttonColorStyles[isDisabled ? 'disabled' : color],
     flush && styles.flush,
     flush && styles[flush],
     isDisabled && styles.isDisabled,
   ];
 
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (
-      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-        <EuiButtonEmpty {...props} color="text" />
-      </EuiThemeProvider>
-    );
-  }
-
   const classes = classNames('euiButtonEmpty', className);
 
   const contentClassNames = classNames(
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index c2dea385a0a..10f1726a5f2 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -46,21 +46,6 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 </button>
 `;
 
-exports[`EuiButtonIcon props color ghost is rendered 1`] = `
-<button
-  aria-label="button"
-  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark"
-  type="button"
->
-  <span
-    aria-hidden="true"
-    class="euiButtonIcon__icon"
-    color="inherit"
-    data-euiicon-type="user"
-  />
-</button>
-`;
-
 exports[`EuiButtonIcon props color primary is rendered 1`] = `
 <button
   aria-label="button"
diff --git a/src/components/button/button_icon/button_icon.styles.ts b/src/components/button/button_icon/button_icon.styles.ts
index 38ea22118da..e8769c1bc50 100644
--- a/src/components/button/button_icon/button_icon.styles.ts
+++ b/src/components/button/button_icon/button_icon.styles.ts
@@ -57,7 +57,7 @@ export const euiButtonIconStyles = (euiThemeContext: UseEuiTheme) => {
 
 export const _emptyHoverStyles = (
   euiThemeContext: UseEuiTheme,
-  color: _EuiButtonColor | 'disabled'
+  color: _EuiButtonColor
 ) => {
   return css`
     &:hover {
diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
index f5e50258e50..e9c06140b6c 100644
--- a/src/components/button/button_icon/button_icon.test.tsx
+++ b/src/components/button/button_icon/button_icon.test.tsx
@@ -80,14 +80,6 @@ describe('EuiButtonIcon', () => {
           expect(container.firstChild).toMatchSnapshot();
         });
       });
-
-      test('ghost is rendered', () => {
-        const { container } = render(
-          <EuiButtonIcon iconType="user" aria-label="button" color={'ghost'} />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
     });
 
     describe('display', () => {
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index 239fac6a985..5995f45dd87 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -14,11 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import {
-  EuiThemeProvider,
-  getSecureRelForTarget,
-  useEuiTheme,
-} from '../../../services';
+import { getSecureRelForTarget, useEuiTheme } from '../../../services';
 import {
   CommonProps,
   ExclusiveUnion,
@@ -48,9 +44,8 @@ export interface EuiButtonIconProps extends CommonProps {
   iconType: IconType;
   /**
    * Any of the named color palette options.
-   * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
    */
-  color?: _EuiButtonColor | 'ghost';
+  color?: _EuiButtonColor;
   'aria-label'?: string;
   'aria-labelledby'?: string;
   isDisabled?: boolean;
@@ -105,26 +100,24 @@ type Props = ExclusiveUnion<
   EuiButtonIconPropsForButton
 >;
 
-export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
-  const {
-    className,
-    iconType,
-    iconSize = 'm',
-    color: _color = 'primary',
-    isDisabled: _isDisabled,
-    disabled,
-    href,
-    type = 'button',
-    display = 'empty',
-    target,
-    rel,
-    size = 'xs',
-    buttonRef,
-    isSelected,
-    isLoading,
-    ...rest
-  } = props;
-
+export const EuiButtonIcon: FunctionComponent<Props> = ({
+  className,
+  iconType,
+  iconSize = 'm',
+  color = 'primary',
+  isDisabled: _isDisabled,
+  disabled,
+  href,
+  type = 'button',
+  display = 'empty',
+  target,
+  rel,
+  size = 'xs',
+  buttonRef,
+  isSelected,
+  isLoading,
+  ...rest
+}) => {
   const euiThemeContext = useEuiTheme();
   const isDisabled = isButtonDisabled({
     isDisabled: _isDisabled || disabled,
@@ -142,33 +135,25 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
     );
   }
 
-  const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({ display });
   const buttonFocusStyle = useEuiButtonFocusCSS();
+  const emptyHoverStyles =
+    display === 'empty' &&
+    !isDisabled &&
+    _emptyHoverStyles(euiThemeContext, color);
 
   const styles = euiButtonIconStyles(euiThemeContext);
-  const emptyHoverStyles = _emptyHoverStyles(euiThemeContext, color);
-
   const cssStyles = [
     styles.euiButtonIcon,
     styles[size],
-    buttonColorStyles[color],
+    buttonColorStyles[isDisabled ? 'disabled' : color],
     buttonFocusStyle,
-    display === 'empty' && emptyHoverStyles,
+    emptyHoverStyles,
     isDisabled && styles.isDisabled,
   ];
 
   const classes = classNames('euiButtonIcon', className);
 
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (
-      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
-        <EuiButtonIcon {...props} color="text" />
-      </EuiThemeProvider>
-    );
-  }
-
   // Add an icon to the button if one exists.
   let buttonIcon;
 
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index 2a29d3c7006..2aac6cf47b0 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiControlBar is rendered 1`] = `
 <div>
   <section
     aria-label="aria-label"
-    class="euiControlBar testClass1 testClass2 emotion-euiTestCss euiControlBar--large euiControlBar--fixed"
+    class="euiControlBar testClass1 testClass2 euiControlBar--large euiControlBar--fixed emotion-euiTestCss-euiColorMode-dark"
     data-test-subj="test subject string"
     style="left: 0px; right: 0px;"
   >
@@ -49,7 +49,7 @@ exports[`EuiControlBar is rendered 1`] = `
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
@@ -145,7 +145,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
@@ -241,7 +241,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
@@ -337,7 +337,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
@@ -432,7 +432,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
       </ol>
     </nav>
     <button
-      class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+      class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
       data-test-subj="dts"
       type="button"
     >
@@ -521,7 +521,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
@@ -617,7 +617,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
@@ -718,7 +718,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
         data-test-subj="dts"
         type="button"
       >
diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx
index ab5072969dc..055214de336 100644
--- a/src/components/control_bar/control_bar.tsx
+++ b/src/components/control_bar/control_bar.tsx
@@ -15,6 +15,8 @@ import React, {
   Ref,
   ReactNode,
 } from 'react';
+
+import { EuiThemeProvider } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../breadcrumbs';
 import {
@@ -312,14 +314,7 @@ export class EuiControlBar extends Component<
     const controlItem = (control: Control, index: number) => {
       switch (control.controlType) {
         case 'button': {
-          const {
-            controlType,
-            id,
-            color = 'ghost',
-            label,
-            className,
-            ...rest
-          } = control;
+          const { controlType, id, color, label, className, ...rest } = control;
           return (
             <EuiButton
               key={id + index}
@@ -338,7 +333,7 @@ export class EuiControlBar extends Component<
             id,
             iconType,
             className,
-            color = 'ghost',
+            color = 'text',
             onClick,
             href,
             ...rest
@@ -432,29 +427,39 @@ export class EuiControlBar extends Component<
         default="Page level controls"
       >
         {(screenReaderHeading: string) => (
-          // Though it would be better to use aria-labelledby than aria-label and not repeat the same string twice
-          // A bug in voiceover won't list some landmarks in the rotor without an aria-label
-          <section
-            className={classes}
-            aria-label={landmarkHeading ? landmarkHeading : screenReaderHeading}
-            {...rest}
-            style={styles}
+          <EuiThemeProvider
+            colorMode="dark"
+            wrapperProps={{ cloneElement: true }}
           >
-            <EuiScreenReaderOnly>
-              <h2>{landmarkHeading ? landmarkHeading : screenReaderHeading}</h2>
-            </EuiScreenReaderOnly>
-            <div
-              className="euiControlBar__controls"
-              ref={(node) => {
-                this.bar = node;
-              }}
+            <section
+              className={classes}
+              // Though it would be better to use aria-labelledby than aria-label
+              // and not repeat the same string twice, a bug in voiceover won't list
+              // some landmarks in the rotor without an aria-label
+              aria-label={
+                landmarkHeading ? landmarkHeading : screenReaderHeading
+              }
+              {...rest}
+              style={styles}
             >
-              {controls.map((control, index) => controlItem(control, index))}
-            </div>
-            {this.props.showContent ? (
-              <div className="euiControlBar__content">{children}</div>
-            ) : null}
-          </section>
+              <EuiScreenReaderOnly>
+                <h2>
+                  {landmarkHeading ? landmarkHeading : screenReaderHeading}
+                </h2>
+              </EuiScreenReaderOnly>
+              <div
+                className="euiControlBar__controls"
+                ref={(node) => {
+                  this.bar = node;
+                }}
+              >
+                {controls.map((control, index) => controlItem(control, index))}
+              </div>
+              {this.props.showContent ? (
+                <div className="euiControlBar__content">{children}</div>
+              ) : null}
+            </section>
+          </EuiThemeProvider>
         )}
       </EuiI18n>
     );
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
index 71a48992a5d..fa792a8d48e 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`EuiSuperUpdateButton iconOnly 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -43,7 +42,6 @@ exports[`EuiSuperUpdateButton iconOnly 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Refresh"
@@ -77,7 +75,6 @@ exports[`EuiSuperUpdateButton is rendered 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -107,7 +104,6 @@ exports[`EuiSuperUpdateButton is rendered 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Refresh"
@@ -147,7 +143,6 @@ exports[`EuiSuperUpdateButton isDisabled 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -177,7 +172,6 @@ exports[`EuiSuperUpdateButton isDisabled 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Refresh"
@@ -211,7 +205,6 @@ exports[`EuiSuperUpdateButton isLoading 1`] = `
       isLoading={true}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -241,7 +234,6 @@ exports[`EuiSuperUpdateButton isLoading 1`] = `
       isLoading={true}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Updating"
@@ -281,7 +273,6 @@ exports[`EuiSuperUpdateButton needsUpdate 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -311,7 +302,6 @@ exports[`EuiSuperUpdateButton needsUpdate 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Update"
@@ -348,7 +338,6 @@ exports[`EuiSuperUpdateButton responsive can be all 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -381,7 +370,6 @@ exports[`EuiSuperUpdateButton responsive can be all 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Refresh"
@@ -410,7 +398,6 @@ exports[`EuiSuperUpdateButton responsive can be false 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -435,7 +422,6 @@ exports[`EuiSuperUpdateButton responsive can be false 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Refresh"
@@ -469,7 +455,6 @@ exports[`EuiSuperUpdateButton showTooltip 1`] = `
       isLoading={false}
       minWidth={false}
       onClick={[Function]}
-      size="m"
       textProps={
         Object {
           "className": "euiScreenReaderOnly",
@@ -499,7 +484,6 @@ exports[`EuiSuperUpdateButton showTooltip 1`] = `
       isLoading={false}
       minWidth={118}
       onClick={[Function]}
-      size="m"
     >
       <EuiI18n
         default="Refresh"
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
index 4ab93765fed..c4ed2034ad7 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
@@ -94,7 +94,6 @@ exports[`EuiQuickSelect is rendered 1`] = `
       <EuiButton
         aria-describedby="generated-id generated-id"
         className="euiQuickSelect__applyButton"
-        color="primary"
         disabled={false}
         onClick={[Function]}
         size="s"
@@ -220,7 +219,6 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
       <EuiButton
         aria-describedby="generated-id generated-id"
         className="euiQuickSelect__applyButton"
-        color="primary"
         disabled={false}
         onClick={[Function]}
         size="s"
diff --git a/upcoming_changelogs/7296.md b/upcoming_changelogs/7296.md
new file mode 100644
index 00000000000..524ca015af1
--- /dev/null
+++ b/upcoming_changelogs/7296.md
@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed the `ghost` color option from `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`. Use an `<EuiThemeProvider colorMode="dark">` wrapper and `color="text"` instead.