diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8769.md b/packages/eui-theme-borealis/changelogs/upcoming/8769.md new file mode 100644 index 00000000000..aad7cd4b520 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8769.md @@ -0,0 +1,15 @@ +- Added semantic tokens: + - `colors.backgroundBaseInteractiveSelectHover` + - `colors.borderStrongText` +- Added component tokens: + - `components.dataGridRowBackground` + - `components.dataGridRowBackgroundSelectHover` + - `components.dataGridRowStripesBackground` + - `components.dataGridRowStripesBackgroundHover` + - `components.dataGridRowStripesBackgroundStriped` + - `components.dataGridRowStripesBackgroundStripedHover` + - `components.dataGridRowStripesBackgroundSelect` + - `components.dataGridRowStripesBackgroundSelectHover` +- Updated values for tokens: + - `components.tableRowBackgroundSelectedHover` + - `components.tableRowInteractiveBackgroundFocus` diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index 7a4ba32cb9d..b13e06f4aff 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -381,6 +381,7 @@ "euiColorBackgroundBaseFormsControlDisabled": "#2B394F", "euiColorBackgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)", "euiColorBackgroundBaseInteractiveSelect": "#0D2F5E", + "euiColorBackgroundBaseInteractiveSelectHover": "#123778", "euiColorBackgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)", "euiColorBackgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)", "euiColorBackgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)", @@ -423,5 +424,6 @@ "euiColorBorderStrongSuccess": "#24C292", "euiColorBorderStrongWarning": "#FACB3D", "euiColorBorderStrongRisk": "#FC8544", - "euiColorBorderStrongDanger": "#F6726A" + "euiColorBorderStrongDanger": "#F6726A", + "euiColorBorderStrongText": "#8E9FBC" } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts index 9698fa46f5b..aef88d6c484 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts @@ -382,6 +382,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorBackgroundBaseFormsControlDisabled: string; euiColorBackgroundBaseInteractiveHover: string; euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveSelectHover: string; euiColorBackgroundBaseInteractiveOverlay: string; euiColorBackgroundBaseSkeletonEdge: string; euiColorBackgroundBaseSkeletonMiddle: string; @@ -425,6 +426,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorBorderStrongWarning: string; euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; + euiColorBorderStrongText: string; }; export default sassVariables; } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 488cfba7775..db72997fc44 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -381,6 +381,7 @@ "euiColorBackgroundBaseFormsControlDisabled": "#CAD3E2", "euiColorBackgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)", "euiColorBackgroundBaseInteractiveSelect": "#E8F1FF", + "euiColorBackgroundBaseInteractiveSelectHover": "#D9E8FF", "euiColorBackgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)", "euiColorBackgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)", "euiColorBackgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)", @@ -423,5 +424,6 @@ "euiColorBorderStrongSuccess": "#09724D", "euiColorBorderStrongWarning": "#825803", "euiColorBorderStrongRisk": "#9E3A16", - "euiColorBorderStrongDanger": "#A71627" + "euiColorBorderStrongDanger": "#A71627", + "euiColorBorderStrongText": "#5A6D8C" } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts index 6b8e1c68be6..44129e50330 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts @@ -382,6 +382,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorBackgroundBaseFormsControlDisabled: string; euiColorBackgroundBaseInteractiveHover: string; euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveSelectHover: string; euiColorBackgroundBaseInteractiveOverlay: string; euiColorBackgroundBaseSkeletonEdge: string; euiColorBackgroundBaseSkeletonMiddle: string; @@ -425,6 +426,7 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorBorderStrongWarning: string; euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; + euiColorBorderStrongText: string; }; export default sassVariables; } diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 91b0a10d57d..8c0df012a17 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -117,9 +117,10 @@ const component_colors: _EuiThemeComponentColors = { ([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued'] ), - dataGridRowBackgroundStriped: computed( - ([backgroundBaseSubdued]) => backgroundBaseSubdued, - ['colors.backgroundBaseSubdued'] + + dataGridRowBackground: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] ), dataGridRowBackgroundHover: computed( ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, @@ -129,6 +130,36 @@ const component_colors: _EuiThemeComponentColors = { ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect'] ), + dataGridRowBackgroundSelectHover: computed( + ([backgroundBaseInteractiveSelectHover]) => + backgroundBaseInteractiveSelectHover, + ['colors.backgroundBaseInteractiveSelectHover'] + ), + + dataGridRowStripesBackground: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + dataGridRowStripesBackgroundHover: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + dataGridRowStripesBackgroundStriped: computed( + ([backgroundBaseSubdued]) => backgroundBaseSubdued, + ['colors.backgroundBaseSubdued'] + ), + dataGridRowStripesBackgroundStripedHover: computed( + ([backgroundBaseSubdued]) => backgroundBaseSubdued, + ['colors.backgroundBaseSubdued'] + ), + dataGridRowStripesBackgroundSelect: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + dataGridRowStripesBackgroundSelectHover: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), dragDropDraggingBackground: computed( ([backgroundBaseSuccess]) => backgroundBaseSuccess, @@ -288,16 +319,17 @@ const component_colors: _EuiThemeComponentColors = { ['colors.backgroundBaseInteractiveSelect'] ), tableRowBackgroundSelectedHover: computed( - ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, - ['colors.backgroundBaseInteractiveSelect'] + ([backgroundBaseInteractiveSelectHover]) => + backgroundBaseInteractiveSelectHover, + ['colors.backgroundBaseInteractiveSelectHover'] ), tableRowInteractiveBackgroundHover: computed( ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect'] ), tableRowInteractiveBackgroundFocus: computed( - ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, - ['colors.backgroundBaseInteractiveSelect'] + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] ), tableCellSortableIconColor: computed( ([backgroundFilledText]) => backgroundFilledText, diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 72a6ae04773..f74fb04c1e0 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -47,6 +47,7 @@ $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; $euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha8 !default; $euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default; +$euiColorBackgroundBaseInteractiveSelectHover: $euiColorPrimary120 !default; $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default; $euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default; $euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default; @@ -128,6 +129,7 @@ $euiColorBorderStrongSuccess: $euiColorSuccess60 !default; $euiColorBorderStrongWarning: $euiColorWarning40 !default; $euiColorBorderStrongRisk: $euiColorRisk50 !default; $euiColorBorderStrongDanger: $euiColorDanger60 !default; +$euiColorBorderStrongText: $euiColorShade60 !default; // Charts $euiColorChartLines: $euiColorShade85 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index 7e803a2c029..3ed849c314c 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -97,6 +97,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha8, backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130, + backgroundBaseInteractiveSelectHover: SEMANTIC_COLORS.primary120, backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70, backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16, @@ -172,6 +173,7 @@ export const dark_border_colors: _EuiThemeBorderColors = { borderStrongWarning: SEMANTIC_COLORS.warning40, borderStrongRisk: SEMANTIC_COLORS.risk50, borderStrongDanger: SEMANTIC_COLORS.danger60, + borderStrongText: SEMANTIC_COLORS.shade60, }; export const dark_special_colors: _EuiThemeSpecialColors = { diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index b6657eb3e13..b00d45ac9a1 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -48,6 +48,7 @@ $euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; $euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default; $euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary10 !default; +$euiColorBackgroundBaseInteractiveSelectHover: $euiColorPrimary20 !default; $euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default; $euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default; $euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default; @@ -130,6 +131,7 @@ $euiColorBorderStrongSuccess: $euiColorSuccess100 !default; $euiColorBorderStrongWarning: $euiColorWarning100 !default; $euiColorBorderStrongRisk: $euiColorRisk100 !default; $euiColorBorderStrongDanger: $euiColorDanger100 !default; +$euiColorBorderStrongText: $euiColorShade90 !default; // Charts $euiColorChartLines: $euiColorShade30 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index 62c84723e34..6a9eaa34265 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -97,6 +97,7 @@ export const background_colors: _EuiThemeBackgroundColors = { backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4, backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary10, + backgroundBaseInteractiveSelectHover: SEMANTIC_COLORS.primary20, backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade100Alpha70, backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shade100Alpha16, @@ -171,6 +172,7 @@ export const border_colors: _EuiThemeBorderColors = { borderStrongWarning: SEMANTIC_COLORS.warning100, borderStrongRisk: SEMANTIC_COLORS.risk100, borderStrongDanger: SEMANTIC_COLORS.danger100, + borderStrongText: SEMANTIC_COLORS.shade90, }; export const special_colors: _EuiThemeSpecialColors = { diff --git a/packages/eui-theme-common/changelogs/upcoming/8769.md b/packages/eui-theme-common/changelogs/upcoming/8769.md new file mode 100644 index 00000000000..39731611f12 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8769.md @@ -0,0 +1,11 @@ +- Added types for + - `colors.backgroundBaseInteractiveSelectHover` + - `colors.borderStrongText` + - `components.dataGridRowBackground` + - `components.dataGridRowBackgroundSelectHover` + - `components.dataGridRowStripesBackground` + - `components.dataGridRowStripesBackgroundHover` + - `components.dataGridRowStripesBackgroundStriped` + - `components.dataGridRowStripesBackgroundStripedHover` + - `components.dataGridRowStripesBackgroundSelect` + - `components.dataGridRowStripesBackgroundSelectHover` diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index 7637f17c6d8..91ed26ad6c9 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -192,6 +192,7 @@ export type _EuiThemeBackgroundColors = { backgroundBaseFormsControlDisabled: ColorModeSwitch; backgroundBaseInteractiveHover: ColorModeSwitch; backgroundBaseInteractiveSelect: ColorModeSwitch; + backgroundBaseInteractiveSelectHover: ColorModeSwitch; backgroundBaseInteractiveOverlay: ColorModeSwitch; backgroundBaseSkeletonEdge: ColorModeSwitch; backgroundBaseSkeletonMiddle: ColorModeSwitch; @@ -275,6 +276,7 @@ export type _EuiThemeBorderColors = { borderStrongWarning: ColorModeSwitch; borderStrongRisk: ColorModeSwitch; borderStrongDanger: ColorModeSwitch; + borderStrongText: ColorModeSwitch; }; export type _EuiThemeVisColors = { diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index 62c4347df76..6721cd3ad86 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -59,9 +59,16 @@ export type _EuiThemeComponentColors = { dataGridBorderColor: ColorModeSwitch; dataGridVerticalLineBorderColor: ColorModeSwitch; - dataGridRowBackgroundStriped: ColorModeSwitch; + dataGridRowBackground: ColorModeSwitch; dataGridRowBackgroundHover: ColorModeSwitch; dataGridRowBackgroundSelect: ColorModeSwitch; + dataGridRowBackgroundSelectHover: ColorModeSwitch; + dataGridRowStripesBackground: ColorModeSwitch; + dataGridRowStripesBackgroundHover: ColorModeSwitch; + dataGridRowStripesBackgroundStriped: ColorModeSwitch; + dataGridRowStripesBackgroundStripedHover: ColorModeSwitch; + dataGridRowStripesBackgroundSelect: ColorModeSwitch; + dataGridRowStripesBackgroundSelectHover: ColorModeSwitch; dragDropDraggingBackground: ColorModeSwitch; dragDropDraggingOverBackground: ColorModeSwitch; 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..1308a354aa5 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..9926d75738c 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..cbb466758f8 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_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 97ba2061e96..4901ba04929 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_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index faa33678382..ffb5da6b153 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_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 5ba9429238a..3251232cdb9 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_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png index 54f9cf80f07..274198fdc13 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..08024f08936 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..78562d55b41 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_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 5f38ae976c6..c760f734cf1 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_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index 7727a0f7cf9..eae9a39f877 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/changelogs/upcoming/8769.md b/packages/eui/changelogs/upcoming/8769.md new file mode 100644 index 00000000000..e0830b9c01b --- /dev/null +++ b/packages/eui/changelogs/upcoming/8769.md @@ -0,0 +1 @@ +- Updated and aligned background hover styles for `EuiTable` and `EuiDataGrid` diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx index c62b8c1cab9..92be6112c16 100644 --- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx +++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx @@ -14,7 +14,8 @@ import React from 'react'; import { EuiDataGrid } from '../../data_grid'; const EXPECTED_HOVER_COLOR = 'rgb(90, 109, 140)'; -const EXPECTED_FOCUS_COLOR = 'rgb(11, 100, 221)'; +// TODO should change back to primary90 (rgb(11, 100, 221)) as per design spec +const EXPECTED_FOCUS_COLOR = 'rgb(23, 80, 186)'; // primary100 const ANIMATION = { DELAY: 350, DURATION: 150, diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts index 044576241d3..6043eb0799a 100644 --- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts +++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts @@ -16,8 +16,8 @@ import { } from '../../../../global_styling'; export const euiDataGridCellOutlineStyles = ({ euiTheme }: UseEuiTheme) => { - const focusColor = euiTheme.colors.primary; - const hoverColor = euiTheme.colors.darkShade; + const focusColor = euiTheme.colors.borderStrongPrimary; + const hoverColor = euiTheme.colors.borderStrongText; const outlineWidth = euiTheme.border.width.thick; const borderRadius = mathWithUnits( euiTheme.border.radius.medium, diff --git a/packages/eui/src/components/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts index c86b7ef0b0b..8da6f8096f4 100644 --- a/packages/eui/src/components/datagrid/data_grid.styles.ts +++ b/packages/eui/src/components/datagrid/data_grid.styles.ts @@ -72,15 +72,79 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => { * :where to reduce specificity / allow easier overrides via rowClasses */ *:where(& .euiDataGridRow) { - background-color: ${euiTheme.colors.emptyShade}; + background-color: ${euiTheme.components.dataGridRowBackground}; + } + + *:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover) { + background-color: ${euiTheme.components.dataGridRowBackgroundHover}; + } + + /* The euiDataGridRow--selected class is not used internally, + * it's there for convenience, to be used by consumers */ + + *:where(& .euiDataGridRow--selected) { + background-color: ${euiTheme.components.dataGridRowBackgroundSelect}; + } + + *:where( + &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover + ) { + background-color: ${euiTheme.components + .dataGridRowBackgroundSelectHover}; + } + + /* Stripes */ + + *:where(&.euiDataGrid--stripes .euiDataGridRow) { + background-color: ${euiTheme.components.dataGridRowStripesBackground}; } *:where(&.euiDataGrid--stripes .euiDataGridRow--striped) { - background-color: ${euiTheme.components.dataGridRowBackgroundStriped}; + background-color: ${euiTheme.components + .dataGridRowStripesBackgroundStriped}; } - *:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover) { - background-color: ${euiTheme.components.dataGridRowBackgroundHover}; + *:where( + &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight + .euiDataGridRow:hover + ) { + background-color: ${euiTheme.components + .dataGridRowStripesBackgroundHover}; + } + + *:where( + &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight + .euiDataGridRow--striped:hover + ) { + background-color: ${euiTheme.components + .dataGridRowStripesBackgroundStripedHover}; + } + + *:where(&.euiDataGrid--stripes .euiDataGridRow--selected) { + background-color: ${euiTheme.components + .dataGridRowStripesBackgroundSelect}; + } + + *:where( + &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight + .euiDataGridRow--selected:hover + ) { + background-color: ${euiTheme.components + .dataGridRowStripesBackgroundSelectHover}; + } + + /* Hover colors are semitransparent and .euiDataGrid__content has + * no background color anymore (see https://github.com/elastic/eui/pull/8220), + * so we add this "safety" background to the row to ensure + * hover colors display as expected */ + + *:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow)::before { + content: ''; + position: absolute; + z-index: -1; + pointer-events: none; + inset: 0; + background-color: ${euiTheme.components.dataGridRowBackground}; } `, cellPadding: { diff --git a/packages/eui/src/components/table/table_row.tsx b/packages/eui/src/components/table/table_row.tsx index 73d48abf76a..a1aab38a556 100644 --- a/packages/eui/src/components/table/table_row.tsx +++ b/packages/eui/src/components/table/table_row.tsx @@ -82,9 +82,9 @@ export const EuiTableRow: FunctionComponent = ({ : [ styles.euiTableRow, styles.desktop.desktop, + onClick && styles.desktop.clickable, isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, - onClick && styles.desktop.clickable, isExpandedRow && hasSelection && styles.desktop.checkboxOffset, ]; diff --git a/packages/eui/src/themes/amsterdam/_colors_dark.scss b/packages/eui/src/themes/amsterdam/_colors_dark.scss index 521a77b7f59..1e1e17adb22 100644 --- a/packages/eui/src/themes/amsterdam/_colors_dark.scss +++ b/packages/eui/src/themes/amsterdam/_colors_dark.scss @@ -48,6 +48,7 @@ $euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default; $euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default; $euiColorBackgroundBaseInteractiveSelect: shade($euiColorPrimary, 0.7) !default; +$euiColorBackgroundBaseInteractiveSelectHover: shade($euiColorPrimary, 0.6) !default; $euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default; $euiColorBackgroundBaseSkeletonEdge: shade($euiColorLightShade, 0.12) !default; $euiColorBackgroundBaseSkeletonMiddle: shade($euiColorLightShade, 0.24) !default; @@ -128,6 +129,7 @@ $euiColorBorderStrongSuccess: $euiColorSuccess !default; $euiColorBorderStrongWarning: $euiColorWarning !default; $euiColorBorderStrongRisk: tint($euiColorSeverityRisk, 0.2) !default; $euiColorBorderStrongDanger: $euiColorDanger !default; +$euiColorBorderStrongText: $euiColorDarkShade !default; // Charts $euiColorChartLines: $euiColorLightShade !default; diff --git a/packages/eui/src/themes/amsterdam/_colors_light.scss b/packages/eui/src/themes/amsterdam/_colors_light.scss index df2ea79c3c7..2c7540a2f7c 100644 --- a/packages/eui/src/themes/amsterdam/_colors_light.scss +++ b/packages/eui/src/themes/amsterdam/_colors_light.scss @@ -48,6 +48,7 @@ $euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default; $euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default; $euiColorBackgroundBaseInteractiveSelect: tint($euiColorPrimary, 0.96) !default; +$euiColorBackgroundBaseInteractiveSelectHover: tint($euiColorPrimary, 0.8) !default; $euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default; $euiColorBackgroundBaseSkeletonEdge: tint($euiColorLightShade, 0.65) !default; $euiColorBackgroundBaseSkeletonMiddle: tint($euiColorLightShade, 0.8) !default; @@ -128,6 +129,7 @@ $euiColorBorderStrongSuccess: $euiColorSuccess !default; $euiColorBorderStrongWarning: $euiColorWarning !default; $euiColorBorderStrongRisk: $euiColorSeverityRisk !default; $euiColorBorderStrongDanger: $euiColorDanger !default; +$euiColorBorderStrongText: $euiColorDarkShade !default; // Charts $euiColorChartLines: shade($euiColorLightestShade, 3%) !default; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index e3a3867be70..58c65535e28 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -159,6 +159,10 @@ export const background_colors: _EuiThemeBackgroundColors = { ([primary]) => tint(primary, 0.96), ['colors.primary'] ), + backgroundBaseInteractiveSelectHover: computed( + ([primary]) => tint(primary, 0.8), + ['colors.primary'] + ), backgroundBaseInteractiveOverlay: computed( ([ink]) => transparentize(ink, 0.5), ['colors.ink'] @@ -331,6 +335,7 @@ export const border_colors: _EuiThemeBorderColors = { borderStrongWarning: computed(([warning]) => warning, ['colors.warning']), borderStrongRisk: severityColors.risk, borderStrongDanger: computed(([danger]) => danger, ['colors.danger']), + borderStrongText: computed(([darkShade]) => darkShade, ['colors.darkShade']), }; export const light_colors: _EuiThemeColorsMode = { @@ -417,6 +422,10 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { ([primary]) => shade(primary, 0.7), ['colors.primary'] ), + backgroundBaseInteractiveSelectHover: computed( + ([primary]) => shade(primary, 0.6), + ['colors.primary'] + ), backgroundBaseInteractiveOverlay: computed( ([ink]) => transparentize(ink, 0.5), ['colors.ink'] @@ -550,6 +559,7 @@ export const dark_border_colors: _EuiThemeBorderColors = { borderStrongWarning: computed(([warning]) => warning, ['colors.warning']), borderStrongRisk: tint(severityColors.risk, 0.2).toUpperCase(), borderStrongDanger: computed(([danger]) => danger, ['colors.danger']), + borderStrongText: computed(([darkShade]) => darkShade, ['colors.darkShade']), }; export const dark_colors_ams: _EuiThemeColorsMode = { diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index 3d3d0e85891..6c7c455151b 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -170,9 +170,10 @@ const component_colors: _EuiThemeComponentColors = { ([color]) => tint(color, 0.3), ['border.color'] ), - dataGridRowBackgroundStriped: computed( - ([lightestShade]) => lightestShade, - ['colors.lightestShade'] + + dataGridRowBackground: computed( + ([emptyShade]) => emptyShade, + ['colors.emptyShade'] ), dataGridRowBackgroundHover: computed( ([highlight]) => highlight, @@ -182,6 +183,34 @@ const component_colors: _EuiThemeComponentColors = { ([highlight]) => highlight, ['colors.highlight'] ), + dataGridRowBackgroundSelectHover: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), + dataGridRowStripesBackground: computed( + ([emptyShade]) => emptyShade, + ['colors.emptyShade'] + ), + dataGridRowStripesBackgroundHover: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), + dataGridRowStripesBackgroundStriped: computed( + ([lightestShade]) => lightestShade, + ['colors.lightestShade'] + ), + dataGridRowStripesBackgroundStripedHover: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), + dataGridRowStripesBackgroundSelect: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), + dataGridRowStripesBackgroundSelectHover: computed( + ([highlight]) => highlight, + ['colors.highlight'] + ), dragDropDraggingBackground: computed( ([success]) => transparentize(success, 0.1), diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json index 591a2d94c2c..326e34d1a02 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json @@ -381,6 +381,7 @@ "euiColorBackgroundBaseFormsControlDisabled": "#535966", "euiColorBackgroundBaseInteractiveHover": "rgba(52,55,65,0.2)", "euiColorBackgroundBaseInteractiveSelect": "#103148", + "euiColorBackgroundBaseInteractiveSelectHover": "#164160", "euiColorBackgroundBaseInteractiveOverlay": "rgba(0,0,0,0.5)", "euiColorBackgroundBaseSkeletonEdge": "#2e3039", "euiColorBackgroundBaseSkeletonMiddle": "#282a31", @@ -423,5 +424,6 @@ "euiColorBorderStrongSuccess": "#7DDED8", "euiColorBorderStrongWarning": "#F3D371", "euiColorBorderStrongRisk": "#E1A26A", - "euiColorBorderStrongDanger": "#F86B63" + "euiColorBorderStrongDanger": "#F86B63", + "euiColorBorderStrongText": "#98A2B3" } diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts index afd03354874..2816f71c59c 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts @@ -382,6 +382,7 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorBackgroundBaseFormsControlDisabled: string; euiColorBackgroundBaseInteractiveHover: string; euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveSelectHover: string; euiColorBackgroundBaseInteractiveOverlay: string; euiColorBackgroundBaseSkeletonEdge: string; euiColorBackgroundBaseSkeletonMiddle: string; @@ -425,6 +426,7 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorBorderStrongWarning: string; euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; + euiColorBorderStrongText: string; }; export default sassVariables; } diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json index 30c2caf063b..fc4e77a4acb 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json @@ -380,7 +380,8 @@ "euiColorBackgroundBaseFormsPrepend": "#e9edf3", "euiColorBackgroundBaseFormsControlDisabled": "#98A2B3", "euiColorBackgroundBaseInteractiveHover": "rgba(211,218,230,0.2)", - "euiColorBackgroundBaseInteractiveSelect": "#f5fafd", + "euiColorBackgroundBaseInteractiveSelect": "#f7fbfe", + "euiColorBackgroundBaseInteractiveSelectHover": "#d7ecfc", "euiColorBackgroundBaseInteractiveOverlay": "rgba(0,0,0,0.5)", "euiColorBackgroundBaseSkeletonEdge": "#f0f2f6", "euiColorBackgroundBaseSkeletonMiddle": "#f6f8fa", @@ -423,5 +424,6 @@ "euiColorBorderStrongSuccess": "#00BFB3", "euiColorBorderStrongWarning": "#FEC514", "euiColorBorderStrongRisk": "#DA8B45", - "euiColorBorderStrongDanger": "#BD271E" + "euiColorBorderStrongDanger": "#BD271E", + "euiColorBorderStrongText": "#69707D" } diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts index d5de28c48d7..479638595d3 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts @@ -382,6 +382,7 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorBackgroundBaseFormsControlDisabled: string; euiColorBackgroundBaseInteractiveHover: string; euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveSelectHover: string; euiColorBackgroundBaseInteractiveOverlay: string; euiColorBackgroundBaseSkeletonEdge: string; euiColorBackgroundBaseSkeletonMiddle: string; @@ -425,6 +426,7 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorBorderStrongWarning: string; euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; + euiColorBorderStrongText: string; }; export default sassVariables; } diff --git a/packages/website/docs/components/data-grid/style-and-display.mdx b/packages/website/docs/components/data-grid/style-and-display.mdx index 56934528cd8..79edf7e1dbf 100644 --- a/packages/website/docs/components/data-grid/style-and-display.mdx +++ b/packages/website/docs/components/data-grid/style-and-display.mdx @@ -173,17 +173,22 @@ export default () => { return new Set(data.map((_, index) => index)); } return rowSelection; - }, new Set()); + }, new Set([1])); const { euiTheme } = useEuiTheme(); + const rowStyles = useMemo(() => { return css` .euiDataGridRow--rowClassesDemo { - background-color: ${euiTheme.colors.highlight}; + background-color: ${euiTheme.colors.backgroundLightWarning}; } .euiDataGridRow--rowClassesDemoSelected { - background-color: ${euiTheme.focus.backgroundColor}; + background-color: ${euiTheme.colors.backgroundBaseInteractiveSelect}; + + &:hover { + background-color: ${euiTheme.colors.backgroundBaseInteractiveSelectHover}; + } } `; }, [euiTheme]); @@ -210,7 +215,7 @@ export default () => { toolbarVisibility={{ additionalControls: , }} - gridStyle={{ rowClasses, rowHover: 'none' }} + gridStyle={{ rowClasses }} css={rowStyles} /> @@ -218,6 +223,12 @@ export default () => { }; ``` +:::tip A `.euiDataGridRow--selected` CSS class is available + +It can be useful to style selected rows when using the `gridStyle.rowClasses` prop. It also provides styles for the hover state, when `rowHover` equals `highlight`. + +::: + ## Row heights options By default, all rows get a height of **34 pixels**, but there are scenarios where you might want to adjust the height to fit more content. To do that, you can pass an object to the `rowHeightsOptions` prop. This object accepts the following properties: