refactor: update flyout footer to use highlighted background

elastic · Dec 9, 2024 · bb9248a · bb9248a
1 parent e33d51f
commit bb9248a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts
@@ -85,6 +85,7 @@ const component_colors: _EuiThemeComponentColors = {
   filterSelectItemBackgroundFocusDisabled:
     background_colors.backgroundBaseDisabled,
 
+  flyoutFooterBackground: background_colors.backgroundBaseHighlighted,
   flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain,
 
   headerBackground: background_colors.backgroundBasePlain,
@@ -220,6 +221,7 @@ export const components: _EuiThemeComponents = {
     filterSelectItemBackgroundFocusDisabled:
       dark_background_colors.backgroundBaseDisabled,
 
+    flyoutFooterBackground: dark_background_colors.backgroundBaseHighlighted,
     flyoutCloseButtonInsideBackground:
       dark_background_colors.backgroundBasePlain,
 

diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts
@@ -67,6 +67,7 @@ export type _EuiThemeComponentColors = {
 
   filterSelectItemBackgroundFocusDisabled: ColorModeSwitch;
 
+  flyoutFooterBackground: ColorModeSwitch;
   flyoutCloseButtonInsideBackground: ColorModeSwitch;
 
   keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch;

diff --git a/packages/eui/src/components/flyout/flyout_footer.styles.ts b/packages/eui/src/components/flyout/flyout_footer.styles.ts
@@ -14,7 +14,7 @@ export const euiFlyoutFooterStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiFlyoutFooter: css`
-      background-color: ${euiTheme.colors.lightestShade};
+      background-color: ${euiTheme.components.flyoutFooterBackground};
       flex-grow: 0;
     `,
   };

diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
@@ -184,6 +184,10 @@ const component_colors: _EuiThemeComponentColors = {
     ['colors.disabled']
   ),
 
+  flyoutFooterBackground: computed(
+    ([lightestShade]) => lightestShade,
+    ['colors.lightestShade']
+  ),
   flyoutCloseButtonInsideBackground: computed(
     ([emptyShade]) => transparentize(emptyShade, 0.9),
     ['colors.emptyShade']