refactor: re-implement grid base styles to use CSS borders

Author: vursen

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -17,13 +17,14 @@ export const gridStyles = css`
     position: relative;
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
+    --vaadin-grid-row-background-color: red;
     background: var(--vaadin-grid-background, var(--vaadin-background-color));
     border: var(--_border-width) solid var(--_border-color);
     cursor: default;
     --_border-color: var(--vaadin-grid-border-color, var(--vaadin-border-color-secondary));
     --_border-width: 0;
-    --_row-border-width: var(--vaadin-grid-row-border-width, 1px);
-    --_column-border-width: var(--vaadin-grid-column-border-width, 0px);
+    --_row-border-width: var(--vaadin-grid-row-border-width, 4px);
+    --_column-border-width: var(--vaadin-grid-column-border-width, 4px);
     border-radius: var(--_border-radius);
     --_border-radius: 0;
   }
@@ -95,15 +96,16 @@ export const gridStyles = css`
     position: sticky;
     left: 0;
     width: 100%;
+    z-index: 2;
   }
 
-  :host([overflow~='top']) #header,
+  /* :host([overflow~='top']) #header,
   :host([overflow~='bottom']) #footer,
   :host([navigating]) #header:has(tr:last-child:focus-within),
   :host([navigating]) #footer:has(tr:first-child:focus-within),
   [empty-state] #header {
     z-index: 2;
-  }
+  } */
 
   :host([dir='rtl']) #items,
   :host([dir='rtl']) #header,
@@ -154,32 +156,23 @@ export const gridStyles = css`
     height: 100%;
   }
 
+  [part~='row'] {
+    background: var(--vaadin-grid-row-background-color, var(--vaadin-background-color));
+  }
+
   [part~='cell'] {
+    --_cell-background-color: var(--vaadin-grid-cell-background-color, transparent);
+    --_cell-background-image: linear-gradient(var(--_cell-background-color), var(--_cell-background-color));
+
     padding: 0;
     box-sizing: border-box;
-    background: var(--vaadin-grid-cell-background, var(--vaadin-background-color));
-    border-block: var(--_row-border-width) solid var(--_border-color);
-    margin-top: calc(var(--_row-border-width) * -1);
-
-    /*
-    Box-shadows are used to create a "fake" border at the end of the cell/row, which is visible when a row/cell ends
-    before the edge of the grid viewport, as well as frozen columns and rows (header and footer).
-    If there are frozen columns, we'll make the "fake box-shadow border" on the header and footer opaque by rendering
-    both the border color and cell background color, so that a semi-transparent border color doesn't "stack" when
-    scrolling horizontally.
-    */
-    --_fake-border:
-      0 calc(var(--_top, 0) * var(--_row-border-width) * -1) 0 0 var(--_border-color),
-      0 calc(var(--_top-opaque, 0) * var(--_row-border-width) * -1) 0 0
-        var(--vaadin-grid-cell-background-color, var(--vaadin-background-color)),
-      0 calc(var(--_bottom, 0) * var(--_row-border-width)) 0 0 var(--_border-color),
-      0 calc(var(--_bottom-opaque, 0) * var(--_row-border-width)) 0 0
-        var(--vaadin-grid-cell-background-color, var(--vaadin-background-color)),
-      calc(var(--_start, 0) * var(--_column-border-width) * -1) 0 0 0 var(--_border-color),
-      calc(var(--_end, 0) * var(--_column-border-width)) 0 0 0 var(--_border-color),
-      calc(var(--_end-opaque, 0) * var(--_column-border-width)) 0 0 0
-        var(--vaadin-grid-cell-background-color, var(--vaadin-background-color));
-    box-shadow: var(--_fake-border);
+    background-color: inherit;
+    background-repeat: no-repeat;
+    background-origin: padding-box;
+    background-image:
+      var(--_hover-background-image, none), var(--_selected-background-image, none),
+      var(--_highlight-background-image, none), var(--_cell-background-image);
+    border: var(--_row-border-width) var(--_border-color);
   }
 
   [part~='cell']:where(:not([part~='details-cell'])) {
@@ -190,87 +183,56 @@ export const gridStyles = css`
     position: relative;
     align-items: center;
     white-space: nowrap;
-    border-inline-start: var(--_column-border-width) solid var(--_border-color);
-  }
-
-  [part~='first-column-cell'] {
-    border-inline-start: 0;
-  }
-
-  [part~='first-header-row-cell'],
-  [part~='first-footer-row-cell'],
-  [part~='first-row-cell'] {
-    margin-top: 0;
-    border-top: 0;
-  }
-
-  table[has-header] [part~='first-row-cell'] {
-    border-top: var(--_row-border-width) solid var(--_border-color);
-  }
-
-  [part~='last-column-cell'] {
-    --_end: 1;
   }
 
-  [part~='last-column-cell']:is([part~='header-cell'], [part~='footer-cell']) {
-    --_end-opaque: 1;
-  }
-
-  [part~='last-row-cell']:where(:not([part~='details-opened-row-cell'])),
-  [part~='last-footer-row-cell'] {
-    border-bottom: 0;
-    --_bottom: 1;
-  }
-
-  [part~='last-frozen-cell'] {
-    --_end: 1;
-  }
-
-  [part~='last-frozen-cell'] + [part~='cell'] {
-    border-inline-start-color: transparent;
+  [part~='body-cell'] {
+    --_highlight-background-color: var(--vaadin-grid-row-highlight-background-color, transparent);
+    --_highlight-background-image: linear-gradient(
+      var(--_highlight-background-color),
+      var(--_highlight-background-color)
+    );
   }
 
-  [part~='first-frozen-to-end-cell'] {
-    border-inline-start: 0;
-    --_start: 1;
+  #table[has-header] {
+    [part~='first-row-cell'] {
+      border-block-start-style: solid;
+    }
   }
 
-  [part~='last-header-row-cell'] {
-    border-bottom: 0;
-  }
+  #table[has-footer] {
+    [part~='last-row-cell'] {
+      border-block-end-style: solid;
+    }
 
-  :host([overflow~='top']) [part~='last-header-row-cell'],
-  [empty-state] [part~='last-header-row-cell'] {
-    --_bottom: 1;
+    [part~='last-row-cell'] + [part~='details-cell'] {
+      border-block-end-style: solid;
+    }
   }
 
-  #header:has(:is([frozen], [frozen-to-end])) [part~='last-header-row-cell'] {
-    --_bottom-opaque: 1;
+  [part~='header-cell']:not([part~='first-header-row-cell']),
+  [part~='footer-cell']:not([part~='first-footer-row-cell']),
+  [part~='body-cell']:not([part~='first-row-cell']) {
+    border-block-start-style: solid;
   }
 
-  :host([overflow~='bottom']) [part~='first-footer-row-cell'],
-  [empty-state] [part~='first-footer-row-cell'] {
-    --_top: 1;
+  [part~='details-opened-row-cell'] {
+    border-block-end-style: solid;
   }
 
-  #footer:has(:is([frozen], [frozen-to-end])) [part~='first-footer-row-cell'] {
-    --_top-opaque: 1;
+  [part~='header-cell']:not([part~='first-column-cell']),
+  [part~='footer-cell']:not([part~='first-column-cell']),
+  [part~='body-cell']:not([part~='first-column-cell']) {
+    border-inline-start-style: solid;
   }
 
-  table[has-footer] [part~='last-row-cell']:not([part~='details-opened-row-cell']) {
-    border-bottom: var(--_row-border-width) solid var(--_border-color);
-    --_bottom: 0;
-  }
+  [part~='last-frozen-cell'] {
+    &:not([part~='last-column-cell']) {
+      border-inline-end-style: solid;
+    }
 
-  [part~='body-cell']:where(:not([part~='details-cell'])) {
-    --_highlight-background-color: var(--vaadin-grid-row-highlight-background-color, transparent);
-    --_highlight-background-image: linear-gradient(
-      var(--_highlight-background-color),
-      var(--_highlight-background-color)
-    );
-    background:
-      var(--_hover-background-image, none), var(--_selected-background-image, none), var(--_highlight-background-image),
-      var(--vaadin-grid-cell-background-color, var(--vaadin-background-color));
+    &:not([part~='last-column-cell']) + [part~='cell'] {
+      border-inline-start-style: none;
+    }
   }
 
   /* Variant: wrap cell contents */
@@ -280,40 +242,16 @@ export const gridStyles = css`
   }
 
   /* Variant: row stripes */
-  [part~='odd-row'] {
-    --vaadin-grid-cell-background-color: var(--vaadin-grid-row-odd-background-color, var(--vaadin-background-color));
-  }
-
   :host([theme~='row-stripes']) [part~='odd-row'] {
     --vaadin-grid-cell-background-color: var(
       --vaadin-grid-row-odd-background-color,
       color-mix(in srgb, var(--vaadin-text-color) 4%, var(--vaadin-background-color))
     );
   }
 
-  /* Raise highlighted rows above others */
-
-  [part~='row']:focus,
-  [part~='row']:focus-within,
-  [part~='body-row']:where([selected]) {
-    z-index: 3;
-  }
-
-  @container style(--vaadin-grid-row-odd-background-color) {
-    [part~='odd-row'] {
-      z-index: 1;
-    }
-  }
-
   /* Row hover */
   @media (any-hover: hover) {
-    @container style(--vaadin-grid-row-hover-background-color) {
-      [part~='body-row']:hover {
-        z-index: 2;
-      }
-    }
-
-    [part~='body-row']:hover [part~='cell']:where(:not([part~='details-cell'])) {
+    [part~='body-row']:hover [part~='body-cell'] {
       --_hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent);
       --_hover-background-image: linear-gradient(var(--_hover-background-color), var(--_hover-background-color));
     }
@@ -323,12 +261,6 @@ export const gridStyles = css`
     position: absolute;
     bottom: 0;
     width: 100%;
-    margin-top: 0;
-    border-top: 0;
-  }
-
-  [part~='last-row-cell'] + [part~='details-cell'] {
-    border-bottom: 0;
   }
 
   [part~='cell'] ::slotted(vaadin-grid-cell-content) {
@@ -348,7 +280,7 @@ export const gridStyles = css`
   }
 
   /* Selected row */
-  [part~='body-row'][selected] {
+  [part~='selected-row-cell'] {
     --_selected-background-color: var(
       --vaadin-grid-row-selected-background-color,
       color-mix(in srgb, currentColor 8%, transparent)
@@ -523,28 +455,10 @@ export const gridStyles = css`
     inset-inline-end: 0;
   }
 
-  #header [part~='row']:first-child::after,
-  [part~='first-header-row-cell']::after,
-  [part*='first-row']::after {
-    top: 0;
-  }
-
   table[has-header] [part~='first-row-cell']::after {
     top: calc(var(--_row-border-width) * -1);
   }
 
-  #footer [part~='row']:last-child::after,
-  [part~='last-footer-row-cell']::after,
-  [part~='last-row']::after,
-  [part~='last-row-cell']::after {
-    bottom: 0;
-  }
-
-  #header [part~='row']:last-child::after,
-  table[has-footer] [part*='last-row']::after {
-    bottom: calc(var(--_row-border-width) * -1);
-  }
-
   :host([navigating]) [part~='row']:focus,
   :host([navigating]) [part~='cell']:focus {
     outline: 0;
@@ -661,7 +575,7 @@ export const gridStyles = css`
     content: '-';
   }
 
-  @media (forced-colors: active) {
+  /* @media (forced-colors: active) {
     :host([overflow~='top']) [part~='last-header-row-cell'] {
       border-bottom: var(--_row-border-width) solid;
       margin-bottom: calc(var(--_row-border-width) * -1);
@@ -671,5 +585,5 @@ export const gridStyles = css`
       border-top: var(--_row-border-width) solid;
       margin-top: calc(var(--_row-border-width) * -1);
     }
-  }
+  } */
 `;