[Visual Refresh] Update color token mappings

packages/eui-theme-borealis/src/variables/_components.ts

@@ -72,9 +72,12 @@ const component_colors: _EuiThemeComponentColors = {
   collapsibleNavGroupBackgroundDark:
     dark_background_colors.backgroundBaseSubdued,
 
+  dataGridBorderColor: border_colors.borderBasePlain,
   dataGridVerticalLineBorderColor: border_colors.borderBasePlain,
   dataGridRowBackgroundStriped: background_colors.backgroundBaseSubdued,
   dataGridRowBackgroundHover: background_colors.backgroundBaseInteractiveHover,
+  dataGridRowBackgroundSelect:
+    background_colors.backgroundBaseInteractiveSelect,
 
   dragDropDraggingBackground: background_colors.backgroundBaseSuccess,
   dragDropDraggingOverBackground: background_colors.backgroundLightSuccess,
@@ -207,6 +210,8 @@ export const components: _EuiThemeComponents = {
     dataGridRowBackgroundStriped: dark_background_colors.backgroundBaseSubdued,
     dataGridRowBackgroundHover:
       dark_background_colors.backgroundBaseInteractiveHover,
+    dataGridRowBackgroundSelect:
+      dark_background_colors.backgroundBaseInteractiveSelect,
 
     dragDropDraggingBackground: dark_background_colors.backgroundBaseSuccess,
     dragDropDraggingOverBackground:

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -51,9 +51,11 @@ export type _EuiThemeComponentColors = {
   collapsibleNavGroupBackground: ColorModeSwitch;
   collapsibleNavGroupBackgroundDark: ColorModeSwitch;
 
+  dataGridBorderColor: ColorModeSwitch;
   dataGridVerticalLineBorderColor: ColorModeSwitch;
   dataGridRowBackgroundStriped: ColorModeSwitch;
   dataGridRowBackgroundHover: ColorModeSwitch;
+  dataGridRowBackgroundSelect: ColorModeSwitch;
 
   dragDropDraggingBackground: ColorModeSwitch;
   dragDropDraggingOverBackground: ColorModeSwitch;

packages/eui/src-docs/src/services/theme/theme.js

@@ -8,5 +8,12 @@ export function applyTheme(newTheme, colorMode = 'LIGHT') {
   Object.keys(themes).forEach((theme) =>
     Object.values(themes[theme]).forEach((cssFile) => cssFile.unuse())
   );
+
   themes[newTheme]?.[colorMode]?.use();
+
+  if (newTheme.toLowerCase().includes('borealis')) {
+    document?.body.classList.add('euiTheme--borealis');
+  } else {
+    document?.body.classList.remove('euiTheme--borealis');
+  }
 }

packages/eui/src-docs/src/views/datagrid/_datagrid.scss

@@ -23,3 +23,7 @@
 .euiDataGridRow--rowClassesDemoSelected {
   background: $euiColorHighlight;
 }
+
+.euiTheme--borealis .euiDataGridRow--rowClassesDemoSelected {
+  background: $euiColorBackgroundBaseInteractiveSelect;
+}

packages/eui/src/components/datagrid/data_grid.styles.ts

@@ -47,6 +47,8 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
   const { cellPadding, lineHeight, fontSize } =
     euiDataGridVariables(euiThemeContext);
 
+  const border = `${euiTheme.border.width.thin} solid ${euiTheme.components.dataGridBorderColor}`;
+
   return {
     euiDataGrid: css`
       display: flex;
@@ -133,24 +135,24 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
         .euiDataGridRowCell:not(.euiDataGridFooterCell),
         .euiDataGridFooter,
         &:not(.euiDataGrid--headerUnderline) .euiDataGridHeader {
-          ${logicalCSS('border-bottom', euiTheme.border.thin)}
+          ${logicalCSS('border-bottom', border)}
         }
 
         &:not(.euiDataGrid--footerOverline) .euiDataGridFooter {
-          ${logicalCSS('border-top', euiTheme.border.thin)}
+          ${logicalCSS('border-top', border)}
           ${logicalCSS('margin-top', `-${euiTheme.border.width.thin}`)}
         }
 
         .euiDataGridHeader {
-          ${logicalCSS('border-top', euiTheme.border.thin)}
+          ${logicalCSS('border-top', border)}
         }
       `,
       all: css`
         label: borders;
 
         .euiDataGridRowCell {
           &:not(.euiDataGridFooterCell) {
-            ${logicalCSS('border-bottom', euiTheme.border.thin)}
+            ${logicalCSS('border-bottom', border)}
             ${logicalCSS(
               'border-right',
               // Visually lighten vertical borders
@@ -159,42 +161,45 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
           }
 
           &--firstColumn {
-            ${logicalCSS('border-left', euiTheme.border.thin)}
+            ${logicalCSS('border-left', border)}
           }
 
           &--lastColumn {
-            ${logicalCSS('border-right-color', euiTheme.border.color)}
+            ${logicalCSS(
+              'border-right-color',
+              euiTheme.components.dataGridBorderColor
+            )}
           }
         }
 
         .euiDataGridFooterCell,
         .euiDataGridHeaderCell {
-          ${logicalCSS('border-right', euiTheme.border.thin)}
+          ${logicalCSS('border-right', border)}
 
           &:first-of-type {
-            ${logicalCSS('border-left', euiTheme.border.thin)}
+            ${logicalCSS('border-left', border)}
           }
         }
 
         .euiDataGridFooter {
-          ${logicalCSS('border-bottom', euiTheme.border.thin)}
+          ${logicalCSS('border-bottom', border)}
         }
 
         &:not(.euiDataGrid--footerOverline) .euiDataGridFooter {
-          ${logicalCSS('border-top', euiTheme.border.thin)}
+          ${logicalCSS('border-top', border)}
           ${logicalCSS('margin-top', `-${euiTheme.border.width.thin}`)}
         }
 
         &:not(.euiDataGrid--headerUnderline) .euiDataGridHeader {
-          ${logicalCSS('border-bottom', euiTheme.border.thin)}
+          ${logicalCSS('border-bottom', border)}
         }
 
         &:is(.euiDataGrid--noControls) .euiDataGridHeader {
-          ${logicalCSS('border-top', euiTheme.border.thin)}
+          ${logicalCSS('border-top', border)}
         }
 
         .euiDataGrid__controls {
-          border: ${euiTheme.border.thin};
+          border: ${border};
           background-color: ${euiTheme.colors.body};
         }
       `,

packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts

@@ -152,6 +152,7 @@ const component_colors: _EuiThemeComponentColors = {
     ['colors.darkestShade']
   ),
 
+  dataGridBorderColor: computed(([color]) => color, ['border.color']),
   dataGridVerticalLineBorderColor: computed(
     ([color]) => tint(color, 0.3),
     ['border.color']
@@ -164,6 +165,10 @@ const component_colors: _EuiThemeComponentColors = {
     ([highlight]) => highlight,
     ['colors.highlight']
   ),
+  dataGridRowBackgroundSelect: computed(
+    ([highlight]) => highlight,
+    ['colors.highlight']
+  ),
 
   dragDropDraggingBackground: computed(
     ([success]) => transparentize(success, 0.1),

packages/website/docs/components/tabular_content/data_grid_style_and_display.mdx

@@ -146,7 +146,7 @@ import React, {
   useState,
   useMemo,
 } from 'react';
-import { EuiDataGrid, EuiCheckbox, EuiButtonEmpty } from '@elastic/eui';
+import { EuiDataGrid, EuiCheckbox, EuiButtonEmpty, useEuiTheme } from '@elastic/eui';
 import { faker } from '@faker-js/faker';
 
 /**
@@ -256,6 +256,8 @@ const leadingControlColumns = [
  * Data grid
  */
 export default () => {
+  const { euiTheme } = useEuiTheme();
+
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
   );
@@ -300,6 +302,24 @@ export default () => {
           additionalControls: <SelectionButton />,
         }}
         gridStyle={{ rowClasses, rowHover: 'none' }}
+        css={{
+            '--datagridRow-stripeColor': euiTheme.colors.lightShade,
+            '.euiDataGridRow--rowClassesDemoSelected': {
+              backgroundColor: euiTheme.components.dataGridRowBackgroundSelect,
+            },
+            '.euiDataGridRow--rowClassesDemo': {
+              backgroundImage: `linear-gradient(135deg,
+                ${euiTheme.colors.emptyShade} 41.67%,
+                var(--datagridRow-stripeColor) 41.67%,
+                var(--datagridRow-stripeColor) 50%,
+                ${euiTheme.colors.emptyShade} 50%,
+                ${euiTheme.colors.emptyShade} 91.67%,
+                var(--datagridRow-stripeColor) 91.67%,
+                var(--datagridRow-stripeColor) 100%
+              )`,
+              backgroundSize: '8.49px 8.49px',
+            }
+        }}
       />
     </SelectionContext.Provider>
   );