diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png
index c1592bea002..bf260d87913 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png
index 7cca96f3784..74c565249a0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png
index 7acff177b34..17188605c08 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png
index e7171c99924..addd2b78358 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png
index 7acff177b34..17188605c08 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png
index 47784ac7272..7d2eaead65a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png
index d33d8cdfa8f..44e76cba0a8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png
index cf6dc188114..5319b4316f5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png
index db58383a03e..7146e4a6426 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png
index 41b6e160a2a..d1905c1d2c8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png
index a566e286e1e..2ae4b4d3956 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
index 39c04636ce7..37ce5fd19ae 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png
index d967390d0b8..15b5206a533 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png
index d82022c9752..392dafbe799 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png
index ad1ab26d5dc..ab3767c36af 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
index c61590743fb..7b6852dc910 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 6022a934c7c..b73d703efad 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png
index cb83c348575..d6df30bc1d4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png
index 3a59f8f8d80..13a7e87fa14 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png
index ac3e36f4462..9cfb4a1c192 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index 569802b8de8..bf6ab99ccbb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png
index 19faacd998e..f68cc6e63ad 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
index ce1cb14c45a..e2f0c71128f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png
index 97ba2061e96..5dd0da580db 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
index 2fe12457054..709e222aa2b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png
index 46a8a4540b5..0fcfd7ae860 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png
index 69c3ccd13b9..bb2660d323f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png
index b27a364fea8..7e0fca1b364 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
index c873dedbc2c..180bfabe801 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
index 02eb3ac5aae..57098d1faa0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
index 2d98a808695..045e5c799d5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
index 3b813fc094b..bcce6b12d42 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
index faa33678382..943d190f451 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
index fcf24566352..eb6fbaf835d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png
index 994669c6ef2..f732c1e7ae6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
index 6018ec6336d..02b16b2fb15 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png
index 0a33c0f322a..aa139d236e2 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
index 602d89b397f..af085ea40e6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
index 4d2bd2cc402..399083b92e4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png
index 3fa8fa6d11b..ac1e7243c41 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
index 0f02e530674..d6ee7731cf3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png
index ab47e71cf01..80116666c88 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index 00f4ae1849b..37b41fe696d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index a98780bfdd3..da378d636d3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
index 209520a90d3..f95ad9c16f6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png
index 0f065f5a53b..d61fa08d4fd 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
index 5ba9429238a..5276b1a15fa 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
index e7168f6d229..b904d7b2905 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
index 63d9a0bc927..8ce75b84164 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
index eb26d533a67..931fa1f5bc4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png
index b8bdcd4aa97..c6e543afbcb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png
index 8af45ffc223..d05b222ae27 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png
index 865c8ac5be8..512072f1bcf 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png
index 1ef96c18c06..6bff294339c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png
index 323ccfa70e3..82e7fcce0e3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png
index 2df41641f8d..b99c6398141 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png
index 8899b282f25..6a7f1ddb415 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png
index 2df41641f8d..b99c6398141 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png
index 84faacc8ed6..e48996cbd71 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png
index 4bd9ca2b427..46d6420a224 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png
index 88442e084c5..f0127dc86cf 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png
index b7177278609..8f7aebbb28c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png
index 9c9d5aa8dbd..ae778b790f1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png
index ac6657f64c3..c48424b2c13 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
index 8b20b04c217..aba0ad2a7c9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png
index 003951fb62b..2533f7e3426 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png
index 8cfc6a2e92e..cd6cfc1f418 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png
index 42450f0dfd4..133530dc486 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index 8919da7c1ae..a4ed9c111da 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png
index 4e69f5b357f..99e4dec14ac 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 5ed5f9372c8..46f50babdda 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png
index 5ed5f9372c8..46f50babdda 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png
index a7eed94fc28..67706d333fd 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png
index 54f9cf80f07..98bbfa320de 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index dbfad8b28ab..81c6611958b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png
index b51e7c791ac..42fd0c7f92c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
index 23d7c9637c7..3f8fdd93575 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png
index 5f38ae976c6..9e933f77827 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
index 5116a81cf53..2e5d0f02610 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png
index 650a6c0e5eb..b83e7a1a967 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png
index b0d116f701f..582531e8f3c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
index 2c1b922b778..3c9f8dabc99 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
index 42ff0c58fd9..8314f94d80e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
index 9da87180427..a495e47e75f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
index ccf1bc9f7e2..2105f55980a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
index 7727a0f7cf9..5d8ce4dbc55 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
index 5e680384a22..d2164a5d477 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png
index e69d27c1b3f..826f0893ce1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
index 42082056729..7329a312061 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png
index 3603d50a39f..040c29959a1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
index 963c445f26c..121ddf1c38c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
index f080f46780a..4322defc0ff 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png
index 33d1f04ecf7..dda129d0a1d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
index 7d07bdc5d7e..4d913172b13 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index da3b2fa1735..d37b49e5199 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index d67dc4ca866..95312ae69be 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
index e12594c8620..20e1fdbc88b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png
index 91234362154..29f942cc4e6 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
index b9bbe290b9a..e72268717ab 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
index 7808291cad7..cb816ffbe71 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
index bb31dea1db2..25467696f5f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png
index ee36f46a323..916b9e861fe 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png
index f1c7ccf7af5..63c5f38fa03 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png
index 2a34be28946..708443a6429 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ
diff --git a/packages/eui/changelogs/upcoming/8778.md b/packages/eui/changelogs/upcoming/8778.md
new file mode 100644
index 00000000000..1b97002b7b7
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8778.md
@@ -0,0 +1,7 @@
+- Added new `refresh` design for input styles on form picker components:
+  - `EuiComboBox`
+  - `EuiFilePicker`
+  - `EuiDatePicker`
+  - `EuiSuperDatePicker`
+- Updated the font size of `xs` size `EuiButtonEmpty` to `14px`
+
diff --git a/packages/eui/src/components/combo_box/combo_box.spec.tsx b/packages/eui/src/components/combo_box/combo_box.spec.tsx
index 06aa8e035fd..be968013406 100644
--- a/packages/eui/src/components/combo_box/combo_box.spec.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.spec.tsx
@@ -254,7 +254,7 @@ describe('EuiComboBox', () => {
       );
       cy.get('[data-test-subj="comboBoxSearchInput"]')
         .invoke('width')
-        .should('be.eq', 356);
+        .should('be.eq', 352);
     });
   });
 
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts
index 01d89eb5112..47e3ae1a54f 100644
--- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 
-import { UseEuiTheme } from '../../../services';
+import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 import {
   euiFormControlStyles,
@@ -18,6 +18,10 @@ import {
 
 export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
   const formStyles = euiFormControlStyles(euiThemeContext);
 
   return {
@@ -25,6 +29,13 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
     euiComboBoxInputWrapper: css`
       ${euiFormControlDefaultShadow(euiThemeContext)}
       display: flex;
+
+      ${isRefreshVariant &&
+      `
+        &:focus-within {
+          ${formStyles.focus}
+        }
+      `}
     `,
     multiSelect: css`
       flex-wrap: wrap;
@@ -33,7 +44,10 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
       ${formStyles.uncompressed}
       ${logicalCSS('height', 'auto')}
       ${logicalCSS('padding-vertical', euiTheme.size.s)}
-      ${logicalCSS('padding-left', euiTheme.size.s)}
+      ${logicalCSS(
+        'padding-left',
+        isRefreshVariant ? euiTheme.size.m : euiTheme.size.s
+      )}
       column-gap: ${euiTheme.size.s};
       row-gap: ${euiTheme.size.xs};
     `,
@@ -60,7 +74,9 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
 
     invalid: css(formStyles.invalid),
     disabled: css(formStyles.disabled),
-    open: css(formStyles.focus),
+    open: css`
+      ${formStyles.focus}
+    `,
     inGroup: css(formStyles.inGroup),
 
     // Actual input element, which has variable width depending on its value
@@ -75,7 +91,7 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
       background: transparent;
 
       &:disabled {
-        color: ${euiTheme.colors.disabledText};
+        color: ${euiTheme.colors.textDisabled};
       }
 
       /* Ensure that no input states are visible on the hidden input */
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
index bce90e20c65..bff9f6d6900 100644
--- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -21,6 +21,8 @@ import {
   keys,
   CanvasTextUtils,
   RenderWithEuiStylesMemoizer,
+  isEuiThemeRefreshVariant,
+  RenderWithEuiTheme,
 } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import {
@@ -317,103 +319,122 @@ export class EuiComboBoxInput<T> extends Component<
     });
 
     return (
-      <RenderWithEuiStylesMemoizer>
-        {(stylesMemoizer) => {
-          const styles = stylesMemoizer(euiComboBoxInputStyles);
-          const cssStyles = [
-            styles.euiComboBoxInputWrapper,
-            !singleSelection && styles.multiSelect,
-            compressed ? styles.compressed : styles.uncompressed,
-            ...(this.asPlainText || showPlaceholder
-              ? [
-                  styles.plainText.plainText,
-                  compressed
-                    ? styles.plainText.compressed
-                    : styles.plainText.uncompressed,
-                ]
-              : []),
-            isDisabled
-              ? styles.disabled
-              : isInvalid
-              ? styles.invalid
-              : isListOpen
-              ? styles.open
-              : undefined,
-            isInGroup && styles.inGroup,
-          ];
-          const formLayoutStyles = [
-            styles.formLayout.euiComboBox__formControlLayout,
-            !singleSelection && styles.formLayout.multiSelect,
-          ];
-
-          return (
-            <EuiFormControlLayout
-              icon={icon}
-              {...clickProps}
-              inputId={id}
-              isLoading={isLoading}
-              isInvalid={isInvalid}
-              isDisabled={isDisabled}
-              compressed={compressed}
-              fullWidth={fullWidth}
-              prepend={prepend}
-              append={append}
-              css={formLayoutStyles}
-            >
-              <div
-                css={cssStyles}
-                className={wrapClasses}
-                data-test-subj="comboBoxInput"
-                onClick={onClick}
-                tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-              >
-                {this.renderPills()}
-                <EuiComboBoxOptionAppendPrepend
-                  option={this.asPlainText ? selectedOptions?.[0] : undefined}
-                  classNamePrefix="euiComboBoxPlainTextSelection"
-                  marginSize="xxs"
+      <RenderWithEuiTheme>
+        {(euiThemeContext) => (
+          <RenderWithEuiStylesMemoizer>
+            {(stylesMemoizer) => {
+              const styles = stylesMemoizer(euiComboBoxInputStyles);
+              const isRefreshVariant = isEuiThemeRefreshVariant(
+                euiThemeContext,
+                'formVariant'
+              );
+
+              const stateCss = isRefreshVariant
+                ? isListOpen
+                  ? styles.open
+                  : isInvalid
+                  ? styles.invalid
+                  : undefined
+                : isInvalid
+                ? styles.invalid
+                : isListOpen
+                ? styles.open
+                : undefined;
+
+              const cssStyles = [
+                styles.euiComboBoxInputWrapper,
+                !singleSelection && styles.multiSelect,
+                compressed ? styles.compressed : styles.uncompressed,
+                ...(this.asPlainText || showPlaceholder
+                  ? [
+                      styles.plainText.plainText,
+                      compressed
+                        ? styles.plainText.compressed
+                        : styles.plainText.uncompressed,
+                    ]
+                  : []),
+                isDisabled ? styles.disabled : stateCss,
+                isInGroup && styles.inGroup,
+              ];
+              const formLayoutStyles = [
+                styles.formLayout.euiComboBox__formControlLayout,
+                !singleSelection && styles.formLayout.multiSelect,
+              ];
+
+              return (
+                <EuiFormControlLayout
+                  icon={icon}
+                  {...clickProps}
+                  inputId={id}
+                  isLoading={isLoading}
+                  isInvalid={isInvalid}
+                  isDisabled={isDisabled}
+                  compressed={compressed}
+                  fullWidth={fullWidth}
+                  prepend={prepend}
+                  append={append}
+                  css={formLayoutStyles}
                 >
-                  <input
-                    aria-activedescendant={focusedOptionId}
-                    aria-autocomplete="list"
-                    aria-controls={isListOpen ? rootId('listbox') : ''}
-                    aria-expanded={isListOpen}
-                    aria-label={ariaLabel}
-                    aria-labelledby={ariaLabelledby}
-                    aria-describedby={ariaDescribedby}
-                    aria-invalid={isInvalid}
-                    aria-haspopup="listbox"
-                    css={styles.euiComboBoxInput}
-                    className="euiComboBox__input"
-                    data-test-subj="comboBoxSearchInput"
-                    disabled={isDisabled}
-                    id={id}
-                    onBlur={this.onBlur}
-                    onChange={(event) => onChange(event.target.value)}
-                    onFocus={this.onFocus}
-                    onKeyDown={this.onKeyDown}
-                    ref={this.inputRefCallback}
-                    role="combobox"
-                    style={{
-                      inlineSize:
-                        this.asPlainText || showPlaceholder
-                          ? '100%'
-                          : this.state.inputWidth,
-                    }}
-                    placeholder={showPlaceholder ? placeholder : undefined}
-                    value={this.searchValue}
-                    autoFocus={autoFocus}
-                    autoComplete="off"
-                    // Force the menu to re-open on every input click - only necessary when plain text
-                    onClick={this.asPlainText ? (onFocus as any) : undefined} // Type shenanigans - event should be mostly the same
-                  />
-                </EuiComboBoxOptionAppendPrepend>
-                {removeOptionMessage}
-              </div>
-            </EuiFormControlLayout>
-          );
-        }}
-      </RenderWithEuiStylesMemoizer>
+                  <div
+                    css={cssStyles}
+                    className={wrapClasses}
+                    data-test-subj="comboBoxInput"
+                    onClick={onClick}
+                    tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
+                  >
+                    {this.renderPills()}
+                    <EuiComboBoxOptionAppendPrepend
+                      option={
+                        this.asPlainText ? selectedOptions?.[0] : undefined
+                      }
+                      classNamePrefix="euiComboBoxPlainTextSelection"
+                      marginSize="xxs"
+                    >
+                      <input
+                        aria-activedescendant={focusedOptionId}
+                        aria-autocomplete="list"
+                        aria-controls={isListOpen ? rootId('listbox') : ''}
+                        aria-expanded={isListOpen}
+                        aria-label={ariaLabel}
+                        aria-labelledby={ariaLabelledby}
+                        aria-describedby={ariaDescribedby}
+                        aria-invalid={isInvalid}
+                        aria-haspopup="listbox"
+                        css={styles.euiComboBoxInput}
+                        className="euiComboBox__input"
+                        data-test-subj="comboBoxSearchInput"
+                        disabled={isDisabled}
+                        id={id}
+                        onBlur={this.onBlur}
+                        onChange={(event) => onChange(event.target.value)}
+                        onFocus={this.onFocus}
+                        onKeyDown={this.onKeyDown}
+                        ref={this.inputRefCallback}
+                        role="combobox"
+                        style={{
+                          inlineSize:
+                            this.asPlainText || showPlaceholder
+                              ? '100%'
+                              : this.state.inputWidth,
+                        }}
+                        placeholder={showPlaceholder ? placeholder : undefined}
+                        value={this.searchValue}
+                        autoFocus={autoFocus}
+                        autoComplete="off"
+                        // Force the menu to re-open on every input click - only necessary when plain text
+                        onClick={
+                          this.asPlainText ? (onFocus as any) : undefined
+                        } // Type shenanigans - event should be mostly the same
+                      />
+                    </EuiComboBoxOptionAppendPrepend>
+                    {removeOptionMessage}
+                  </div>
+                </EuiFormControlLayout>
+              );
+            }}
+          </RenderWithEuiStylesMemoizer>
+        )}
+      </RenderWithEuiTheme>
     );
   }
 }
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
index 95054275fad..53d178a5b02 100644
--- a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiDatePickerRange is rendered 1`] = `
-<span
+<div
   aria-label="aria-label"
   class="euiDatePickerRange testClass1 testClass2 emotion-euiDatePickerRange-euiTestCss"
   data-test-subj="test subject string"
@@ -64,11 +64,11 @@ exports[`EuiDatePickerRange is rendered 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props compressed 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRange"
 >
   <div
@@ -129,11 +129,11 @@ exports[`EuiDatePickerRange props compressed 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props disabled 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRange"
 >
   <div
@@ -196,11 +196,11 @@ exports[`EuiDatePickerRange props disabled 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props fullWidth 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRange"
 >
   <div
@@ -261,11 +261,11 @@ exports[`EuiDatePickerRange props fullWidth 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props inline renders 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRangeInline-responsive-shadow"
 >
   <div
@@ -1319,11 +1319,11 @@ exports[`EuiDatePickerRange props inline renders 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props isInvalid 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRange"
 >
   <div
@@ -1394,11 +1394,11 @@ exports[`EuiDatePickerRange props isInvalid 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props isLoading 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRange"
 >
   <div
@@ -1468,11 +1468,11 @@ exports[`EuiDatePickerRange props isLoading 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange props readOnly 1`] = `
-<span
+<div
   class="euiDatePickerRange emotion-euiDatePickerRange"
 >
   <div
@@ -1535,11 +1535,11 @@ exports[`EuiDatePickerRange props readOnly 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
-<span
+<div
   aria-label="aria-label"
   class="euiDatePickerRange testClass1 testClass2 emotion-euiDatePickerRange-euiTestCss"
   data-test-subj="test subject string"
@@ -1602,5 +1602,5 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
diff --git a/packages/eui/src/components/date_picker/date_picker.styles.ts b/packages/eui/src/components/date_picker/date_picker.styles.ts
index dc34b8eb880..2e2e171d1d0 100644
--- a/packages/eui/src/components/date_picker/date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/date_picker.styles.ts
@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import { euiShadowMedium } from '@elastic/eui-theme-common';
 
-import { UseEuiTheme } from '../../services';
+import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
 import {
   euiFormControlDisabledStyles,
@@ -20,6 +20,17 @@ import {
 
 export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
+
+  const inlineStyles = `
+      /* removes form layout border */
+      &::after {
+        display: none;
+      }
+    `;
 
   return {
     euiDatePicker: css`
@@ -33,6 +44,8 @@ export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
           ${logicalCSS('width', 'fit-content')}
           border: none;
           padding: 0;
+
+          ${isRefreshVariant && inlineStyles}
         }
 
         .euiFormControlLayout__childrenWrapper {
diff --git a/packages/eui/src/components/date_picker/date_picker_range.styles.ts b/packages/eui/src/components/date_picker/date_picker_range.styles.ts
index 22f28df8adc..f9ec6f32711 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.styles.ts
+++ b/packages/eui/src/components/date_picker/date_picker_range.styles.ts
@@ -10,28 +10,54 @@ import { css } from '@emotion/react';
 import { euiShadowMedium } from '@elastic/eui-theme-common';
 
 import { logicalCSS } from '../../global_styling';
-import { UseEuiTheme } from '../../services';
-
-export const euiDatePickerRangeStyles = {
-  euiDatePickerRange: css`
-    /* Needed for correct focus/invalid underline/linear-gradient styles */
-    .euiPopover,
-    .react-datepicker__input-container,
-    .euiDatePicker {
-      ${logicalCSS('height', '100%')}
-    }
-
-    /* Needed for the fullWidth prop: makes inputs take the whole available space */
-    .euiPopover {
-      flex: 1;
-    }
-  `,
+import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../services';
+import { disableFormControlHoverStyles } from '../form/form.styles';
+
+export const euiDatePickerRangeStyles = (euiThemeContext: UseEuiTheme) => {
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
+
+  const refreshStyles = `
+      .euiPopover:last-child {
+        ${logicalCSS('border-top-right-radius', 'inherit')}
+        ${logicalCSS('border-bottom-right-radius', 'inherit')}
+
+        * {
+          ${logicalCSS('border-top-right-radius', 'inherit')}
+          ${logicalCSS('border-bottom-right-radius', 'inherit')}
+        }
+      }
+    `;
+
+  return {
+    euiDatePickerRange: css`
+      /* Needed for correct focus/invalid underline/linear-gradient styles */
+      .euiPopover,
+      .react-datepicker__input-container,
+      .euiDatePicker {
+        ${logicalCSS('height', '100%')}
+      }
+
+      /* Needed for the fullWidth prop: makes inputs take the whole available space */
+      .euiPopover {
+        flex: 1;
+      }
+
+      ${isRefreshVariant && refreshStyles}
+    `,
+  };
 };
 
 export const euiDatePickerRangeInlineStyles = (
   euiThemeContext: UseEuiTheme
 ) => {
   const { euiTheme } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
 
   // Use a container query to stack date pickers vertically if the container is
   // not wide enough to fit both. We need a fn for this to render two width queries,
@@ -82,6 +108,13 @@ export const euiDatePickerRangeInlineStyles = (
           ${logicalCSS('height', 'auto')}
           ${logicalCSS('padding-bottom', euiTheme.size.s)}
         }
+
+        ${isRefreshVariant &&
+        `
+          &::after {
+            display: none;
+          }
+        `}
       }
 
       /* Make sure the inline date picker sets its absolute positioning based off the correct parent */
@@ -100,6 +133,17 @@ export const euiDatePickerRangeInlineStyles = (
         ${euiShadowMedium(euiThemeContext, {
           borderAllInHighContrastMode: true,
         })}
+
+        ${isRefreshVariant &&
+        `
+          /* the form layout is not part of the interactive behavior but rather a container in this variant  */
+          ${disableFormControlHoverStyles()}
+
+          .euiFormControlLayout__childrenWrapper {
+            box-shadow: none;
+            ${disableFormControlHoverStyles()}
+          }
+        `}
       }
     `,
 
diff --git a/packages/eui/src/components/date_picker/date_picker_range.tsx b/packages/eui/src/components/date_picker/date_picker_range.tsx
index 8e64e6ae760..cc7b0bbd989 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.tsx
@@ -26,7 +26,7 @@ import { CommonProps } from '../common';
 
 import { useEuiMemoizedStyles } from '../../services';
 import {
-  euiDatePickerRangeStyles as styles,
+  euiDatePickerRangeStyles,
   euiDatePickerRangeInlineStyles,
 } from './date_picker_range.styles';
 
@@ -124,6 +124,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
 
   const classes = classNames('euiDatePickerRange', className);
 
+  const styles = useEuiMemoizedStyles(euiDatePickerRangeStyles);
   const inlineStyles = useEuiMemoizedStyles(euiDatePickerRangeInlineStyles);
   const cssStyles = !inline
     ? styles.euiDatePickerRange
@@ -203,7 +204,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   }, [iconType, inline]);
 
   return (
-    <span className={classes} css={cssStyles} {...rest}>
+    <div className={classes} css={cssStyles} {...rest}>
       <EuiFormControlLayoutDelimited
         icon={icon}
         startControl={startControl}
@@ -224,6 +225,6 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
             : inlineStyles.formLayout.noShadow)
         }
       />
-    </span>
+    </div>
   );
 };
diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 306224a0103..f76ca298a77 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -764,7 +764,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
   class="euiSuperDatePicker testClass1 testClass2 emotion-euiSuperDatePicker-restricted-euiTestCss"
   data-test-subj="test subject string"
 >
-  <span
+  <div
     class="euiDatePickerRange emotion-euiDatePickerRange-euiSuperDatePicker__range-euiSuperDatePicker__formControlLayout-default"
   >
     <div
@@ -839,7 +839,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
         </div>
       </div>
     </div>
-  </span>
+  </div>
   <span
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
index 7d8157a2cd1..8f6d92e5022 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
@@ -8,7 +8,11 @@
 
 import { css } from '@emotion/react';
 
-import { UseEuiTheme, makeHighContrastColor } from '../../../services';
+import {
+  UseEuiTheme,
+  isEuiThemeRefreshVariant,
+  makeHighContrastColor,
+} from '../../../services';
 import {
   euiFontSize,
   euiMaxBreakpoint,
@@ -22,10 +26,17 @@ import {
   euiFormControlInvalidStyles,
   euiFormControlDisabledStyles,
   euiFormControlShowBackgroundLine,
+  euiFormControlFocusStyles,
+  euiFormControlHighlightBorderStyles,
 } from '../../form/form.styles';
 
 export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
+
   const forms = euiFormVariables(euiThemeContext);
 
   const inputWidth = euiTheme.base * 30;
@@ -52,6 +63,116 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
     needsUpdatingBackgroundColor
   );
 
+  const formLayoutStyles = `
+      /* using wrapper hover styles instead */
+      .euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover {
+        outline: none;
+      }
+
+      .euiPopover {
+        /* mimic input border-radius */
+        border-radius: ${forms.controlBorderRadius};
+
+        &:first-child {
+          ${logicalCSS('border-top-left-radius', 'inherit')}
+          ${logicalCSS('border-bottom-left-radius', 'inherit')}
+        }
+
+        &:last-child {
+          ${logicalCSS('border-top-right-radius', 'inherit')}
+          ${logicalCSS('border-bottom-right-radius', 'inherit')}
+        }
+      }
+
+      .euiDatePopoverButton {
+        background-color: transparent;
+        border-radius: inherit;
+      }
+    `;
+
+  const popoverButtonFocusStyles = isRefreshVariant
+    ? `
+       ${euiFormControlFocusStyles(euiThemeContext)}
+    `
+    : `
+      --euiFormControlStateColor: ${euiTheme.colors.primary};
+      ${euiFormControlShowBackgroundLine(
+        euiThemeContext,
+        euiTheme.colors.primary
+      )}
+    `;
+
+  const invalidStyles = isRefreshVariant
+    ? `
+      &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus) {
+        --euiFormControlStateColor: ${forms.borderColor};
+        --euiFormControlStateHoverColor: ${forms.borderHovered};
+      }
+
+      &:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)) {
+        ${euiFormControlInvalidStyles(euiThemeContext)}
+      }
+
+      .euiDatePopoverButton:focus,
+      .euiPopover-isOpen .euiDatePopoverButton {
+        ${euiFormControlFocusStyles(euiThemeContext)}
+      }
+    `
+    : `
+      ${euiFormControlInvalidStyles(euiThemeContext)}
+    `;
+
+  const needsUpdatingStyles = `
+      --euiFormControlStateColor: ${euiTheme.colors.success};
+      --euiFormControlStateHoverColor: ${euiTheme.colors.success};
+      --euiFormControlStateWidth: ${euiTheme.border.width.thin};
+      ${euiFormControlHighlightBorderStyles}
+  
+      &:has(.euiPopover-isOpen),
+      &:focus-within {
+        --euiFormControlStateColor: ${forms.borderColor};
+        --euiFormControlStateHoverColor: ${forms.borderHovered};
+      }
+    `;
+
+  const needsUpdatingPopoverButtonFocusStyles = isRefreshVariant
+    ? `
+      ${euiFormControlFocusStyles(euiThemeContext)}
+    `
+    : `
+      --euiFormControlStateColor: ${euiTheme.colors.success};
+      ${euiFormControlShowBackgroundLine(
+        euiThemeContext,
+        euiTheme.colors.success
+      )}
+
+      ${highContrastModeStyles(euiThemeContext, {
+        // Force the fill color of all icons/svgs to give a bit more indication of state,
+        // since Windows high contrast themes otherwise override background/text color
+        forced: `
+          svg,
+          & + * svg {
+            fill: ${euiTheme.colors.success};
+          }
+        `,
+      })}
+    `;
+
+  const prettyFormatStyles = `
+      --euiFormControlStateHoverColor: ${forms.borderHovered};
+      ${euiFormControlDefaultShadow(euiThemeContext)}
+      
+      ${highContrastModeStyles(euiThemeContext, {
+        preferred: `
+          border: none;
+        `,
+      })}
+
+      &:focus {
+        ${euiFormControlFocusStyles(euiThemeContext)}
+      }
+    `;
+
   return {
     euiSuperDatePicker: css`
       display: flex;
@@ -129,17 +250,22 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
     euiSuperDatePicker__prettyFormat: css`
       ${_buttonStyles(euiThemeContext)}
       text-align: start;
+
+      ${isRefreshVariant && prettyFormatStyles}
     `,
 
     // Form states
     states: {
       euiSuperDatePicker__formControlLayout: css`
         .euiFormControlLayout__childrenWrapper {
+          --euiFormControlStateHoverColor: ${forms.borderHovered};
           ${euiFormControlDefaultShadow(euiThemeContext)}
           ${highContrastModeStyles(euiThemeContext, {
             none: 'box-shadow: none;',
             preferred: 'border: none;',
           })}
+
+          ${isRefreshVariant && formLayoutStyles}
         }
       `,
       default: css`
@@ -150,19 +276,18 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
 
         /* Focus/selection underline per-button */
         .euiDatePopoverButton {
-          ${euiFormControlDefaultShadow(euiThemeContext, {
+          --euiFormControlStateHoverColor: ${forms.borderHovered};
+          ${!isRefreshVariant &&
+          euiFormControlDefaultShadow(euiThemeContext, {
             withBorder: false,
             withBackgroundColor: false,
           })}
+          box-shadow: none;
         }
 
         .euiDatePopoverButton:focus,
         .euiPopover-isOpen .euiDatePopoverButton {
-          --euiFormControlStateColor: ${euiTheme.colors.primary};
-          ${euiFormControlShowBackgroundLine(
-            euiThemeContext,
-            euiTheme.colors.primary
-          )}
+          ${popoverButtonFocusStyles}
         }
       `,
       disabled: css`
@@ -174,13 +299,16 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         .euiFormControlLayout__childrenWrapper {
           color: ${euiTheme.colors.textDanger};
           background-color: ${forms.backgroundColor};
-          ${euiFormControlInvalidStyles(euiThemeContext)}
+
+          ${invalidStyles}
         }
       `,
       needsUpdating: css`
         .euiFormControlLayout__childrenWrapper {
           color: ${needsUpdatingTextColor};
           background-color: ${needsUpdatingBackgroundColor};
+
+          ${isRefreshVariant && needsUpdatingStyles}
         }
 
         .euiFormControlLayoutDelimited__delimiter {
@@ -193,27 +321,14 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
             withBorder: false,
             withBackgroundColor: false,
           })}
+          background-color: inherit;
+          box-shadow: none;
         }
 
         .euiDatePopoverButton:focus,
         .euiPopover-isOpen .euiDatePopoverButton {
-          --euiFormControlStateColor: ${euiTheme.colors.success};
-          ${euiFormControlShowBackgroundLine(
-            euiThemeContext,
-            euiTheme.colors.success
-          )}
+          ${needsUpdatingPopoverButtonFocusStyles}
         }
-
-        ${highContrastModeStyles(euiThemeContext, {
-          // Force the fill color of all icons/svgs to give a bit more indication of state,
-          // since Windows high contrast themes otherwise override background/text color
-          forced: `
-            svg,
-            & + * svg {
-              fill: ${euiTheme.colors.success};
-            }
-          `,
-        })}
       `,
     },
   };
diff --git a/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap b/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
index 58022a1b3d9..d2e37966f5a 100644
--- a/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
+++ b/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiFilePicker is rendered 1`] = `
     <span
       aria-hidden="true"
       class="euiFilePicker__icon emotion-euiFilePicker__icon-large"
-      color="primary"
+      color="text"
       data-euiicon-type="importAction"
     />
     <span
diff --git a/packages/eui/src/components/form/file_picker/file_picker.styles.ts b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
index 653f8576c0c..e68d15c78d6 100644
--- a/packages/eui/src/components/form/file_picker/file_picker.styles.ts
+++ b/packages/eui/src/components/form/file_picker/file_picker.styles.ts
@@ -8,18 +8,28 @@
 
 import { css } from '@emotion/react';
 
-import { UseEuiTheme } from '../../../services';
+import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services';
 import {
   euiCanAnimate,
   euiFontSize,
   euiTextTruncate,
+  highContrastModeStyles,
   logicalCSS,
   mathWithUnits,
 } from '../../../global_styling';
-import { euiFormControlStyles, euiFormVariables } from '../form.styles';
+import {
+  euiFormControlShowBackgroundLine,
+  euiFormControlStyles,
+  euiFormVariables,
+} from '../form.styles';
 
 export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, highContrastMode } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'formVariant'
+  );
+
   const formStyles = euiFormControlStyles(euiThemeContext);
   const formVariables = euiFormVariables(euiThemeContext);
   const { fontSize, lineHeight } = euiFontSize(euiThemeContext, 's');
@@ -28,16 +38,60 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
     euiFilePicker: css`
       --euiFormControlLeftIconsCount: 1; /* Manually account for .euiFilePicker__icon */
       position: relative;
+      border-radius: ${formVariables.controlBorderRadius};
 
       &:has(input:focus) {
-        --euiFormControlStateColor: ${euiTheme.colors.primary};
+        --euiFormControlStateColor: ${formVariables.borderFocused};
+      }
+
+      &:hover {
+        --euiFormControlStateColor: ${highContrastMode
+          ? euiTheme.border.color
+          : formVariables.borderHovered};
+        --euiFormControlStateStyle: ${highContrastMode && isRefreshVariant
+          ? 'solid'
+          : 'dashed'};
+      }
+
+      &:focus-within {
+        ${highContrastModeStyles(euiThemeContext, {
+          forced: `
+              ${euiFormControlShowBackgroundLine(
+                euiThemeContext,
+                formVariables.borderFocused
+              )}
+            `,
+        })}
       }
     `,
     isDroppingFile: css`
-      --euiFormControlStateColor: ${euiTheme.colors.primary};
+      --euiFormControlStateColor: ${isRefreshVariant
+        ? euiTheme.colors.borderStrongSuccess
+        : euiTheme.colors.primary};
+
+      ${isRefreshVariant &&
+      `  
+        --euiFormControlStateStyle: ${
+          highContrastMode === 'forced' ? 'solid' : 'dashed'
+        };
+        background-color: ${euiTheme.components.forms.backgroundDropping}
+      `}
     `,
     invalid: css`
-      --euiFormControlStateColor: ${euiTheme.colors.danger};
+      --euiFormControlStateColor: ${formVariables.borderInvalid};
+
+      &:hover {
+        --euiFormControlStateColor: ${formVariables.borderInvalidHovered};
+      }
+
+      ${highContrastModeStyles(euiThemeContext, {
+        forced: `
+          ${euiFormControlShowBackgroundLine(
+            euiThemeContext,
+            formVariables.borderInvalid
+          )}
+        `,
+      })}
     `,
     hasFiles: css`
       --euiFormControlRightIconsCount: 1;
@@ -80,11 +134,17 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
         .euiFilePicker-isDroppingFile & {
           & + .euiFilePicker__prompt {
             .euiFilePicker__promptText {
-              text-decoration: underline;
+              text-decoration: ${isRefreshVariant ? '' : 'underline'};
+
+              ${highContrastModeStyles(euiThemeContext, {
+                forced: `
+                  text-decoration: underline;
+                `,
+              })}
             }
 
             .euiFilePicker__icon {
-              transform: scale(1.1);
+              transform: scale(${isRefreshVariant ? 1.05 : 1.1});
             }
           }
         }
@@ -97,8 +157,16 @@ export const euiFilePickerStyles = (euiThemeContext: UseEuiTheme) => {
       line-height: 1; /* Vertically centers default display text */
       ${euiTextTruncate()}
       color: ${euiTheme.colors.textParagraph};
-      border: ${euiTheme.border.width.thick} dashed
-        var(--euiFormControlStateColor, ${euiTheme.border.color});
+      border: ${isRefreshVariant
+          ? euiTheme.border.width.thin
+          : euiTheme.border.width.thick}
+        var(--euiFormControlStateStyle, dashed)
+        var(
+          --euiFormControlStateColor,
+          ${isRefreshVariant
+            ? formVariables.borderColor
+            : euiTheme.border.color}
+        );
 
       ${euiCanAnimate} {
         transition: border-color ${euiTheme.animation.fast} ease-in,
diff --git a/packages/eui/src/components/form/file_picker/file_picker.tsx b/packages/eui/src/components/form/file_picker/file_picker.tsx
index 43a32d20ee6..91ab93de901 100644
--- a/packages/eui/src/components/form/file_picker/file_picker.tsx
+++ b/packages/eui/src/components/form/file_picker/file_picker.tsx
@@ -13,6 +13,8 @@ import {
   withEuiStylesMemoizer,
   WithEuiStylesMemoizerProps,
   htmlIdGenerator,
+  RenderWithEuiTheme,
+  isEuiThemeRefreshVariant,
 } from '../../../services';
 import { CommonProps } from '../../common';
 
@@ -143,184 +145,210 @@ export class EuiFilePickerClass extends Component<
     const { defaultFullWidth } = this.context as FormContextValue;
 
     return (
-      <EuiI18n
-        token="euiFilePicker.removeSelectedAriaLabel"
-        default="Remove selected files"
-      >
-        {(removeSelectedAriaLabel: string) => {
-          const {
-            stylesMemoizer,
-            id,
-            name,
-            initialPromptText,
-            className,
-            disabled,
-            compressed,
-            onChange,
-            isInvalid,
-            fullWidth = defaultFullWidth,
-            isLoading,
-            display,
-            ...rest
-          } = this.props;
-
-          const promptId = `${id || this.generatedId}-filePicker__prompt`;
-
-          const isOverridingInitialPrompt = this.state.promptText != null;
-
-          const normalFormControl = display === 'default';
-
-          const classes = classNames(
-            'euiFilePicker',
-            {
-              'euiFilePicker-isDroppingFile': this.state.isHoveringDrop,
-              'euiFilePicker-isInvalid': isInvalid,
-              'euiFilePicker-isLoading': isLoading,
-              'euiFilePicker-hasFiles': isOverridingInitialPrompt,
-            },
-            className
-          );
-
-          const styles = stylesMemoizer(euiFilePickerStyles);
-          const cssStyles = [
-            styles.euiFilePicker,
-            fullWidth ? styles.fullWidth : styles.formWidth,
-            this.state.isHoveringDrop && styles.isDroppingFile,
-            isInvalid && !disabled && styles.invalid,
-            isOverridingInitialPrompt && !disabled && styles.hasFiles,
-            isLoading && styles.loading,
-          ];
-
-          const inputStyles = [
-            styles.input.euiFilePicker__input,
-            !normalFormControl && !disabled && styles.input.largeInteractive,
-          ];
-
-          const promptStyles = [
-            styles.euiFilePicker__prompt,
-            disabled && styles.disabled,
-            ...(normalFormControl
-              ? [compressed ? styles.compressed : styles.uncompressed]
-              : [
-                  styles.large.large,
-                  compressed
-                    ? styles.large.compressed
-                    : styles.large.uncompressed,
-                ]),
-          ];
-
-          const iconStyles = [
-            styles.icon.euiFilePicker__icon,
-            ...(normalFormControl
-              ? [
-                  styles.icon.normal,
-                  compressed
-                    ? styles.icon.compresssed
-                    : styles.icon.uncompressed,
-                ]
-              : [styles.icon.large]),
-          ];
-
-          const rightIconStyles = normalFormControl
-            ? [
-                styles.rightIcon.euiFilePicker__rightIcon,
-                compressed
-                  ? styles.rightIcon.compressed
-                  : styles.rightIcon.uncompressed,
-              ]
-            : undefined;
-
-          let clearButton;
-          if (isLoading && normalFormControl) {
-            // Override clear button with loading spinner if it is in loading state
-            clearButton = (
-              <EuiLoadingSpinner
-                css={rightIconStyles}
-                className="euiFilePicker__loadingSpinner"
-                size={compressed ? 's' : 'm'}
-              />
-            );
-          } else if (isOverridingInitialPrompt && !disabled) {
-            if (normalFormControl) {
-              clearButton = (
-                <EuiFormControlLayoutClearButton
-                  aria-label={removeSelectedAriaLabel}
-                  css={[styles.euiFilePicker__clearButton, rightIconStyles]}
-                  className="euiFilePicker__clearButton"
-                  onClick={this.removeFiles}
-                  size={compressed ? 's' : 'm'}
-                />
+      <RenderWithEuiTheme>
+        {(euiThemeContext) => (
+          <EuiI18n
+            token="euiFilePicker.removeSelectedAriaLabel"
+            default="Remove selected files"
+          >
+            {(removeSelectedAriaLabel: string) => {
+              const {
+                stylesMemoizer,
+                id,
+                name,
+                initialPromptText,
+                className,
+                disabled,
+                compressed,
+                onChange,
+                isInvalid,
+                fullWidth = defaultFullWidth,
+                isLoading,
+                display,
+                ...rest
+              } = this.props;
+
+              const isRefreshVariant = isEuiThemeRefreshVariant(
+                euiThemeContext,
+                'formVariant'
+              );
+
+              const promptId = `${id || this.generatedId}-filePicker__prompt`;
+
+              const isOverridingInitialPrompt = this.state.promptText != null;
+
+              const normalFormControl = display === 'default';
+
+              const classes = classNames(
+                'euiFilePicker',
+                {
+                  'euiFilePicker-isDroppingFile': this.state.isHoveringDrop,
+                  'euiFilePicker-isInvalid': isInvalid,
+                  'euiFilePicker-isLoading': isLoading,
+                  'euiFilePicker-hasFiles': isOverridingInitialPrompt,
+                },
+                className
               );
-            } else {
-              clearButton = (
-                <EuiButtonEmpty
-                  aria-label={removeSelectedAriaLabel}
-                  css={styles.euiFilePicker__clearButton}
-                  className="euiFilePicker__clearButton"
-                  size="xs"
-                  onClick={this.removeFiles}
-                >
-                  <EuiI18n
-                    token="euiFilePicker.removeSelected"
-                    default="Remove"
+
+              const styles = stylesMemoizer(euiFilePickerStyles);
+              const cssStyles = [
+                styles.euiFilePicker,
+                fullWidth ? styles.fullWidth : styles.formWidth,
+                this.state.isHoveringDrop && styles.isDroppingFile,
+                isInvalid && !disabled && styles.invalid,
+                isOverridingInitialPrompt && !disabled && styles.hasFiles,
+                isLoading && styles.loading,
+              ];
+
+              const inputStyles = [
+                styles.input.euiFilePicker__input,
+                !normalFormControl &&
+                  !disabled &&
+                  styles.input.largeInteractive,
+              ];
+
+              const promptStyles = [
+                styles.euiFilePicker__prompt,
+                disabled && styles.disabled,
+                ...(normalFormControl
+                  ? [compressed ? styles.compressed : styles.uncompressed]
+                  : [
+                      styles.large.large,
+                      compressed
+                        ? styles.large.compressed
+                        : styles.large.uncompressed,
+                    ]),
+              ];
+
+              const iconStyles = [
+                styles.icon.euiFilePicker__icon,
+                ...(normalFormControl
+                  ? [
+                      styles.icon.normal,
+                      compressed
+                        ? styles.icon.compresssed
+                        : styles.icon.uncompressed,
+                    ]
+                  : [styles.icon.large]),
+              ];
+
+              const rightIconStyles = normalFormControl
+                ? [
+                    styles.rightIcon.euiFilePicker__rightIcon,
+                    compressed
+                      ? styles.rightIcon.compressed
+                      : styles.rightIcon.uncompressed,
+                  ]
+                : undefined;
+
+              let clearButton;
+              if (isLoading && normalFormControl) {
+                // Override clear button with loading spinner if it is in loading state
+                clearButton = (
+                  <EuiLoadingSpinner
+                    css={rightIconStyles}
+                    className="euiFilePicker__loadingSpinner"
+                    size={compressed ? 's' : 'm'}
                   />
-                </EuiButtonEmpty>
+                );
+              } else if (isOverridingInitialPrompt && !disabled) {
+                if (normalFormControl) {
+                  clearButton = (
+                    <EuiFormControlLayoutClearButton
+                      aria-label={removeSelectedAriaLabel}
+                      css={[styles.euiFilePicker__clearButton, rightIconStyles]}
+                      className="euiFilePicker__clearButton"
+                      onClick={this.removeFiles}
+                      size={compressed ? 's' : 'm'}
+                    />
+                  );
+                } else {
+                  clearButton = (
+                    <EuiButtonEmpty
+                      aria-label={removeSelectedAriaLabel}
+                      css={styles.euiFilePicker__clearButton}
+                      className="euiFilePicker__clearButton"
+                      size="xs"
+                      onClick={this.removeFiles}
+                    >
+                      <EuiI18n
+                        token="euiFilePicker.removeSelected"
+                        default="Remove"
+                      />
+                    </EuiButtonEmpty>
+                  );
+                }
+              } else {
+                clearButton = null;
+              }
+
+              const loader = !normalFormControl && isLoading && (
+                <EuiProgress size="xs" color="accent" position="absolute" />
+              );
+
+              // Currently this tenary is a little complex, it'll be simplified once we remove Amsterdam
+              const iconColor = isInvalid
+                ? 'danger'
+                : disabled
+                ? isRefreshVariant
+                  ? 'disabled'
+                  : 'subdued'
+                : isRefreshVariant
+                ? 'text'
+                : 'primary';
+
+              return (
+                <div css={cssStyles} className={classes}>
+                  <EuiValidatableControl isInvalid={isInvalid}>
+                    <input
+                      type="file"
+                      id={id}
+                      name={name}
+                      css={inputStyles}
+                      className="euiFilePicker__input"
+                      onChange={this.handleChange}
+                      ref={(input) => {
+                        this.fileInput = input;
+                      }}
+                      onDragOver={this.showDrop}
+                      onDragLeave={this.hideDrop}
+                      onDrop={this.hideDrop}
+                      disabled={disabled}
+                      aria-describedby={promptId}
+                      {...rest}
+                    />
+                  </EuiValidatableControl>
+                  <div
+                    css={promptStyles}
+                    className="euiFilePicker__prompt"
+                    id={promptId}
+                  >
+                    <EuiIcon
+                      css={iconStyles}
+                      className="euiFilePicker__icon"
+                      color={iconColor}
+                      type={
+                        isInvalid
+                          ? 'alert'
+                          : isRefreshVariant && disabled
+                          ? 'minusInCircle'
+                          : 'importAction'
+                      }
+                      size={normalFormControl ? 'm' : 'l'}
+                      aria-hidden="true"
+                    />
+                    <span className="euiFilePicker__promptText">
+                      {this.state.promptText || initialPromptText}
+                    </span>
+                    {clearButton}
+                    {loader}
+                  </div>
+                </div>
               );
-            }
-          } else {
-            clearButton = null;
-          }
-
-          const loader = !normalFormControl && isLoading && (
-            <EuiProgress size="xs" color="accent" position="absolute" />
-          );
-
-          return (
-            <div css={cssStyles} className={classes}>
-              <EuiValidatableControl isInvalid={isInvalid}>
-                <input
-                  type="file"
-                  id={id}
-                  name={name}
-                  css={inputStyles}
-                  className="euiFilePicker__input"
-                  onChange={this.handleChange}
-                  ref={(input) => {
-                    this.fileInput = input;
-                  }}
-                  onDragOver={this.showDrop}
-                  onDragLeave={this.hideDrop}
-                  onDrop={this.hideDrop}
-                  disabled={disabled}
-                  aria-describedby={promptId}
-                  {...rest}
-                />
-              </EuiValidatableControl>
-              <div
-                css={promptStyles}
-                className="euiFilePicker__prompt"
-                id={promptId}
-              >
-                <EuiIcon
-                  css={iconStyles}
-                  className="euiFilePicker__icon"
-                  color={
-                    isInvalid ? 'danger' : disabled ? 'subdued' : 'primary'
-                  }
-                  type={isInvalid ? 'alert' : 'importAction'}
-                  size={normalFormControl ? 'm' : 'l'}
-                  aria-hidden="true"
-                />
-                <span className="euiFilePicker__promptText">
-                  {this.state.promptText || initialPromptText}
-                </span>
-                {clearButton}
-                {loader}
-              </div>
-            </div>
-          );
-        }}
-      </EuiI18n>
+            }}
+          </EuiI18n>
+        )}
+      </RenderWithEuiTheme>
     );
   }
 }
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
index 558c9f8fa8b..af9265bb843 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
@@ -221,6 +221,7 @@ export const euiFormControlLayoutSideNodeStyles = (
       ${buttons} {
         /* Override button hover/active transform */
         transform: none !important; /* stylelint-disable-line declaration-no-important */
+        line-height: 1; /* ensures correct vertical positioning of icons */
 
         /* Account for border around focusable children */
         &:focus-visible {
diff --git a/packages/eui/src/global_styling/mixins/_button.ts b/packages/eui/src/global_styling/mixins/_button.ts
index 68b82a03e9c..94b96c047fe 100644
--- a/packages/eui/src/global_styling/mixins/_button.ts
+++ b/packages/eui/src/global_styling/mixins/_button.ts
@@ -394,7 +394,7 @@ export const euiButtonSizeMap = (euiThemeContext: UseEuiTheme) => {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),
       height: euiTheme.size.l,
       radius: euiTheme.border.radius.small,
-      fontScale: 'xs' as const,
+      fontScale: isRefreshVariant ? ('s' as const) : ('xs' as const),
     },
     s: {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),