feat(grid): update border related properties of the grid (#584)

didimmova · web-flow · commit 118d33fecb16 · 2026-06-17T11:53:06.000Z
diff --git a/packages/theming/sass/themes/components/grid/_grid-summary-theme.scss b/packages/theming/sass/themes/components/grid/_grid-summary-theme.scss
@@ -78,10 +78,18 @@
         $result-color: adaptive-contrast(var(--background-color));
     }
 
+    @if not($border-color) and $background-color and $result-color {
+        $border-color: hsl(from color-mix(in srgb, var(--result-color) 16%, var(--background-color)) h s l / 0.38);
+    }
+
     @if not($border-color) and $background-color {
         $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.2);
     }
 
+    @if not($pinned-border-color) and $background-color and $result-color {
+        $pinned-border-color: color-mix(in srgb, var(--result-color) 20%, var(--background-color));
+    }
+
     @if not($pinned-border-color) and $background-color {
         $pinned-border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.26);
     }
diff --git a/packages/theming/sass/themes/components/grid/_grid-theme.scss b/packages/theming/sass/themes/components/grid/_grid-theme.scss
@@ -331,9 +331,7 @@
     }
 
     @if not($header-border-color) and $header-text-color and $header-background {
-        $header-border-color: hsl(
-            from color-mix(in srgb, var(--header-text-color) 20%, var(--header-background)) h s l / 0.38
-        );
+        $header-border-color: color-mix(in srgb, var(--header-text-color) 20%, var(--header-background));
     }
 
     @if not($sorted-header-icon-color) and $accent-color {
diff --git a/packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss b/packages/theming/sass/themes/components/grid/_grid-toolbar-theme.scss
@@ -90,16 +90,24 @@
         $item-text-color: var(--foreground);
     }
 
-    @if not($item-hover-background) and $background and $accent-color {
-        $item-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background));
+    @if not($item-hover-background) and $dropdown-background and $accent-color {
+        $item-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--dropdown-background));
+    }
+
+    @if not($item-hover-background) and $dropdown-background {
+        $item-hover-background: dynamic-shade(var(--dropdown-background));
     }
 
     @if not($item-hover-text-color) and $item-text-color {
         $item-hover-text-color: var(--item-text-color);
     }
 
-    @if not($item-focus-background) and $background and $accent-color {
-        $item-focus-background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+    @if not($item-focus-background) and $dropdown-background and $accent-color {
+        $item-focus-background: color-mix(in srgb, var(--accent-color) 12%, var(--dropdown-background));
+    }
+
+    @if not($item-focus-background) and $dropdown-background {
+        $item-focus-background: dynamic-shade(var(--dropdown-background), $offset: 8);
     }
 
     @if not($item-focus-text-color) and $item-text-color {
@@ -110,10 +118,6 @@
         $border-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
     }
 
-    @if not($title-text-color) and $background {
-        $title-text-color: adaptive-contrast(var(--background));
-    }
-
     @if not($item-text-color) and $dropdown-background {
         $item-text-color: adaptive-contrast(var(--dropdown-background));
     }
diff --git a/packages/theming/sass/themes/schemas/components/dark/_grid-summary.scss b/packages/theming/sass/themes/schemas/components/dark/_grid-summary.scss
@@ -60,6 +60,7 @@ $dark-material-grid-summary: extend(
 /// Generates a dark fluent grid-summary schema.
 /// @type Map
 /// @prop {Map} label-color [color: ('primary', 300)] - The summaries label color.
+/// @prop {Map} pinned-border-color [color: ('gray', 300, .24)] - The color of the pinned border.
 /// @requires $fluent-grid-summary
 $dark-fluent-grid-summary: extend(
     $fluent-grid-summary,
@@ -71,6 +72,14 @@ $dark-fluent-grid-summary: extend(
                 300,
             ),
         ),
+
+        pinned-border-color: (
+            color: (
+                'gray',
+                300,
+                0.24,
+            ),
+        ),
     )
 );
 
diff --git a/packages/theming/sass/themes/schemas/components/dark/_grid.scss b/packages/theming/sass/themes/schemas/components/dark/_grid.scss
@@ -11,7 +11,7 @@
 /// @type Map
 /// @prop {Color} content-background [color: 'surface'] - The table body background color.
 /// @prop {Map} drop-area-background [color: ('gray', 100, .4)] - The drop area background color.
-/// @prop {Map} header-border-color [color: ('gray', 200, .24)] - The color used for header borders.
+/// @prop {Map} header-border-color [color: ('gray', 200)] - The color used for header borders.
 /// @prop {Map} header-background [color: ('gray', 100)] - The table header background color.
 /// @prop {Map} header-selected-background [color: ('secondary', 600)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('secondary', 600)] - The table header text color when selected (ex. column selection).
@@ -51,7 +51,6 @@ $base-dark-grid: (
         color: (
             'gray',
             200,
-            0.24,
         ),
     ),
 
@@ -275,6 +274,7 @@ $dark-material-grid: extend(
 /// @prop {Map} row-selected-hover-background [color: ('gray', 200)] - The selected row background color on hover.
 /// @prop {Map} body-column-selected-border-color [color: ('gray', 100)] - The border color used for the body column when in group-row state.
 /// @prop {Map} body-column-hover-selected-border-color [color: ('gray', 200)] - The border color used for the body column when in group-row + hover state.
+/// @prop {Map} pinned-border-color [color: ('gray', 300, .24)] - The color of the pinned border.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
diff --git a/packages/theming/sass/themes/schemas/components/light/_grid.scss b/packages/theming/sass/themes/schemas/components/light/_grid.scss
@@ -16,7 +16,7 @@
 /// @prop {Map} sortable-header-icon-hover-color [color: ('secondary', 500)] - The icon color on hover in grid header when the column is sortable.
 /// @prop {Number} header-border-width [1px] - The border width used for header borders.
 /// @prop {String} header-border-style [solid] - The border style used for header borders.
-/// @prop {Map} header-border-color [color: ('gray', 400, .38)] - The color used for header borders.
+/// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders.
 /// @prop {Map} ghost-header-text-color [color: ('gray', 700)] - The dragged header text color.
 /// @prop {Map} ghost-header-icon-color [color: ('gray', 600)] - The dragged header icon color.
 /// @prop {Map} ghost-header-background [color: ('gray', 50)] - The dragged header background color.
@@ -176,7 +176,6 @@ $light-grid: extend(
             color: (
                 'gray',
                 400,
-                0.38,
             ),
         ),
 
@@ -839,7 +838,7 @@ $material-grid: extend(
 /// @prop {Map} header-text-color [color: ('gray', 800)] - The table header text color.
 /// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection).
-/// @prop {Map} header-border-color [color: ('gray', 100)] - The color used for header borders.
+/// @prop {Map} header-border-color [color: ('gray', 300)] - The color used for header borders.
 /// @prop {Map} row-selected-background [color: ('gray', 200)] - The selected row background color.
 /// @prop {Map} row-selected-hover-background [color: ('gray', 300)] - The selected row hover background.
 /// @prop {Map} body-column-selected-border-color [color: ('gray', 200)] - The border color used for the body column when in group-row state.
@@ -901,7 +900,7 @@ $fluent-grid: extend(
         header-border-color: (
             color: (
                 'gray',
-                100,
+                300,
             ),
         ),
 

Original file line number	Diff line number	Diff line change
`@@ -78,10 +78,18 @@`
`78`	`78`	`$result-color: adaptive-contrast(var(--background-color));`
`79`	`79`	`}`
`80`	`80`
	`81`	`+ @if not($border-color) and $background-color and $result-color {`
	`82`	`+ $border-color: hsl(from color-mix(in srgb, var(--result-color) 16%, var(--background-color)) h s l / 0.38);`
	`83`	`+ }`
	`84`	`+`
`81`	`85`	`@if not($border-color) and $background-color {`
`82`	`86`	`$border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.2);`
`83`	`87`	`}`
`84`	`88`
	`89`	`+ @if not($pinned-border-color) and $background-color and $result-color {`
	`90`	`+ $pinned-border-color: color-mix(in srgb, var(--result-color) 20%, var(--background-color));`
	`91`	`+ }`
	`92`	`+`
`85`	`93`	`@if not($pinned-border-color) and $background-color {`
`86`	`94`	`$pinned-border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.26);`
`87`	`95`	`}`
Original file line number	Diff line number	Diff line change
`@@ -331,9 +331,7 @@`
`331`	`331`	`}`
`332`	`332`
`333`	`333`	`@if not($header-border-color) and $header-text-color and $header-background {`
`334`		`- $header-border-color: hsl(`
`335`		`- from color-mix(in srgb, var(--header-text-color) 20%, var(--header-background)) h s l / 0.38`
`336`		`- );`
	`334`	`+ $header-border-color: color-mix(in srgb, var(--header-text-color) 20%, var(--header-background));`
`337`	`335`	`}`
`338`	`336`
`339`	`337`	`@if not($sorted-header-icon-color) and $accent-color {`
Original file line number	Diff line number	Diff line change
`@@ -90,16 +90,24 @@`
`90`	`90`	`$item-text-color: var(--foreground);`
`91`	`91`	`}`
`92`	`92`
`93`		`- @if not($item-hover-background) and $background and $accent-color {`
`94`		`- $item-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background));`
	`93`	`+ @if not($item-hover-background) and $dropdown-background and $accent-color {`
	`94`	`+ $item-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--dropdown-background));`
	`95`	`+ }`
	`96`	`+`
	`97`	`+ @if not($item-hover-background) and $dropdown-background {`
	`98`	`+ $item-hover-background: dynamic-shade(var(--dropdown-background));`
`95`	`99`	`}`
`96`	`100`
`97`	`101`	`@if not($item-hover-text-color) and $item-text-color {`
`98`	`102`	`$item-hover-text-color: var(--item-text-color);`
`99`	`103`	`}`
`100`	`104`
`101`		`- @if not($item-focus-background) and $background and $accent-color {`
`102`		`- $item-focus-background: color-mix(in srgb, var(--accent-color) 12%, var(--background));`
	`105`	`+ @if not($item-focus-background) and $dropdown-background and $accent-color {`
	`106`	`+ $item-focus-background: color-mix(in srgb, var(--accent-color) 12%, var(--dropdown-background));`
	`107`	`+ }`
	`108`	`+`
	`109`	`+ @if not($item-focus-background) and $dropdown-background {`
	`110`	`+ $item-focus-background: dynamic-shade(var(--dropdown-background), $offset: 8);`
`103`	`111`	`}`
`104`	`112`
`105`	`113`	`@if not($item-focus-text-color) and $item-text-color {`
`@@ -110,10 +118,6 @@`
`110`	`118`	`$border-color: color-mix(in srgb, var(--foreground) 20%, var(--background));`
`111`	`119`	`}`
`112`	`120`
`113`		`- @if not($title-text-color) and $background {`
`114`		`- $title-text-color: adaptive-contrast(var(--background));`
`115`		`- }`
`116`		`-`
`117`	`121`	`@if not($item-text-color) and $dropdown-background {`
`118`	`122`	`$item-text-color: adaptive-contrast(var(--dropdown-background));`
`119`	`123`	`}`