From 3de8772824d92579c356d3a0c898dff293f69e85 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 18 Jun 2026 10:33:07 +0300 Subject: [PATCH 1/3] feat(grid): add new action-border-color property --- .../themes/components/grid/_grid-theme.scss | 9 +++++++ .../themes/schemas/components/dark/_grid.scss | 16 +++++++++++++ .../schemas/components/light/_grid.scss | 24 +++++++++++++++++++ 3 files changed, 49 insertions(+) diff --git a/packages/theming/sass/themes/components/grid/_grid-theme.scss b/packages/theming/sass/themes/components/grid/_grid-theme.scss index d1813aa2..52f570a2 100644 --- a/packages/theming/sass/themes/components/grid/_grid-theme.scss +++ b/packages/theming/sass/themes/components/grid/_grid-theme.scss @@ -52,6 +52,7 @@ /// @param {String} $row-border-width [null] - The row bottom border width. /// @param {String} $row-border-style [null] - The row bottom border style. /// @param {Color} $row-border-color [null] - The row bottom border color. Auto-derived from content-background. +/// @param {Color} $action-border-color [null] - The color used for action borders. /// @param {String} $pinned-border-width [null] - The border width of the pinned border. /// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border. /// @param {Color} $pinned-border-color [null] - The color of the pinned border. Auto-derived from content-background. @@ -160,6 +161,8 @@ $row-border-style: null, $row-border-color: null, + $action-border-color: null, + $pinned-border-width: null, $pinned-border-style: null, $pinned-border-color: null, @@ -396,6 +399,10 @@ $row-border-color: hsl(from color-mix(in srgb, var(--foreground) 16%, var(--background)) h s l / 0.38); } + @if not($action-border-color) and $foreground and $background { + $action-border-color: color-mix(in srgb, var(--foreground) 20%, var(--background)); + } + @if not($pinned-border-color) and $foreground and $background { $pinned-border-color: color-mix(in srgb, var(--foreground) 20%, var(--background)); } @@ -682,6 +689,8 @@ row-border-style: $row-border-style, row-border-color: $row-border-color, + action-border-color: $action-border-color, + pinned-border-width: $pinned-border-width, pinned-border-style: $pinned-border-style, pinned-border-color: $pinned-border-color, diff --git a/packages/theming/sass/themes/schemas/components/dark/_grid.scss b/packages/theming/sass/themes/schemas/components/dark/_grid.scss index aac946b1..7cd2902c 100644 --- a/packages/theming/sass/themes/schemas/components/dark/_grid.scss +++ b/packages/theming/sass/themes/schemas/components/dark/_grid.scss @@ -12,6 +12,7 @@ /// @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)] - The color used for header borders. +/// @prop {Map} action-border-color [color: ('gray', 200)] - The color used for action 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). @@ -54,6 +55,13 @@ $base-dark-grid: ( ), ), + action-border-color: ( + color: ( + 'gray', + 200, + ), + ), + header-background: ( color: ( 'gray', @@ -456,6 +464,7 @@ $dark-bootstrap-grid: extend( /// @type Map /// @prop {Map} content-text-color [contrast-color: ('gray', 50, .8)] - The table body text color. /// @prop {Map} header-border-color [color: ('gray', 200)] - The color used for header borders. +/// @prop {Map} action-border-color [color: ('gray', 200)] - The color used for action borders. /// @prop {Map} header-text-color [contrast-color: ('gray', 50, .9)] - The table header text color. /// @prop {Map} header-selected-background [color: ('primary', 900)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [contrast-color: ('gray' 50)] - The table header text color when selected (ex. column selection). @@ -528,6 +537,13 @@ $dark-indigo-grid: extend( ), ), + action-border-color: ( + color: ( + 'gray', + 200, + ), + ), + header-text-color: ( contrast-color: ( 'gray', diff --git a/packages/theming/sass/themes/schemas/components/light/_grid.scss b/packages/theming/sass/themes/schemas/components/light/_grid.scss index ad240c51..47d97d12 100644 --- a/packages/theming/sass/themes/schemas/components/light/_grid.scss +++ b/packages/theming/sass/themes/schemas/components/light/_grid.scss @@ -17,6 +17,7 @@ /// @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)] - The color used for header borders. +/// @prop {Map} action-border-color [color: ('gray', 400)] - The color used for action 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. @@ -179,6 +180,13 @@ $light-grid: extend( ), ), + action-border-color: ( + color: ( + 'gray', + 400, + ), + ), + ghost-header-background: ( color: ( 'gray', @@ -839,6 +847,7 @@ $material-grid: extend( /// @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', 300)] - The color used for header borders. +/// @prop {Map} action-border-color [color: ('gray', 300)] - The color used for action 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. @@ -904,6 +913,13 @@ $fluent-grid: extend( ), ), + action-border-color: ( + color: ( + 'gray', + 300, + ), + ), + row-border-color: ( color: ( 'gray', @@ -1226,6 +1242,7 @@ $bootstrap-grid: extend( /// @prop {Map} header-selected-background [color: ('primary', 50)] - The table header background color when selected (ex. column selection). /// @prop {Map} header-selected-text-color [color: 'gray', 900] - The table header text color when selected (ex. column selection). /// @prop {Map} header-border-color [color: ('gray', 400)] - The color used for header borders. +/// @prop {Map} action-border-color [color: ('gray', 400)] - The color used for action borders. /// @prop {Map} filtering-row-background [color: ('surface', 500)] - The background color of the filtering row. /// @prop {Map} filtering-dialog-background [contrast-color: ('gray', 900)] - The background color of the advanced filtering dialog. /// @prop {Map} edited-row-indicator [color: ('primary', 400)] - The indicator's color of edited row. @@ -1330,6 +1347,13 @@ $indigo-grid: extend( ), ), + action-border-color: ( + color: ( + 'gray', + 400, + ), + ), + filtering-header-background: ( color: ( 'gray', From 4b5b883a84b8e101bd00d75d24f37d11284427e9 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 18 Jun 2026 13:30:04 +0300 Subject: [PATCH 2/3] fix(grid): fix expander icons color --- .../sass/themes/components/grid/_grid-theme.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/theming/sass/themes/components/grid/_grid-theme.scss b/packages/theming/sass/themes/components/grid/_grid-theme.scss index 52f570a2..56415463 100644 --- a/packages/theming/sass/themes/components/grid/_grid-theme.scss +++ b/packages/theming/sass/themes/components/grid/_grid-theme.scss @@ -613,20 +613,20 @@ $drop-indicator-color: var(--accent-color); } - @if not($expand-all-icon-color) and $foreground and $background { - $expand-all-icon-color: color-mix(in srgb, var(--foreground) 70%, var(--background)); + @if not($expand-all-icon-color) and $header-text-color and $header-background { + $expand-all-icon-color: color-mix(in srgb, var(--header-text-color) 70%, var(--header-background)); } - @if not($expand-all-icon-hover-color) and $foreground and $background { - $expand-all-icon-hover-color: color-mix(in srgb, var(--foreground) 80%, var(--background)); + @if not($expand-all-icon-hover-color) and $header-text-color and $header-background { + $expand-all-icon-hover-color: color-mix(in srgb, var(--header-text-color) 80%, var(--header-background)); } - @if not($expand-icon-color) and $foreground and $background { - $expand-icon-color: color-mix(in srgb, var(--foreground) 60%, var(--background)); + @if not($expand-icon-color) and $header-text-color and $header-background { + $expand-icon-color: color-mix(in srgb, var(--header-text-color) 60%, var(--header-background)); } - @if not($expand-icon-hover-color) and $foreground and $background { - $expand-icon-hover-color: color-mix(in srgb, var(--foreground) 70%, var(--background)); + @if not($expand-icon-hover-color) and $header-text-color and $header-background { + $expand-icon-hover-color: color-mix(in srgb, var(--header-text-color) 70%, var(--header-background)); } @if $row-odd-background and not($body-column-border-color-odd) { From 85b507a7e8202867974d106a0dfa3026f4683c6e Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 18 Jun 2026 13:34:07 +0300 Subject: [PATCH 3/3] fix(grid): revert fix expander icons color --- .../sass/themes/components/grid/_grid-theme.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/theming/sass/themes/components/grid/_grid-theme.scss b/packages/theming/sass/themes/components/grid/_grid-theme.scss index 56415463..52f570a2 100644 --- a/packages/theming/sass/themes/components/grid/_grid-theme.scss +++ b/packages/theming/sass/themes/components/grid/_grid-theme.scss @@ -613,20 +613,20 @@ $drop-indicator-color: var(--accent-color); } - @if not($expand-all-icon-color) and $header-text-color and $header-background { - $expand-all-icon-color: color-mix(in srgb, var(--header-text-color) 70%, var(--header-background)); + @if not($expand-all-icon-color) and $foreground and $background { + $expand-all-icon-color: color-mix(in srgb, var(--foreground) 70%, var(--background)); } - @if not($expand-all-icon-hover-color) and $header-text-color and $header-background { - $expand-all-icon-hover-color: color-mix(in srgb, var(--header-text-color) 80%, var(--header-background)); + @if not($expand-all-icon-hover-color) and $foreground and $background { + $expand-all-icon-hover-color: color-mix(in srgb, var(--foreground) 80%, var(--background)); } - @if not($expand-icon-color) and $header-text-color and $header-background { - $expand-icon-color: color-mix(in srgb, var(--header-text-color) 60%, var(--header-background)); + @if not($expand-icon-color) and $foreground and $background { + $expand-icon-color: color-mix(in srgb, var(--foreground) 60%, var(--background)); } - @if not($expand-icon-hover-color) and $header-text-color and $header-background { - $expand-icon-hover-color: color-mix(in srgb, var(--header-text-color) 70%, var(--header-background)); + @if not($expand-icon-hover-color) and $foreground and $background { + $expand-icon-hover-color: color-mix(in srgb, var(--foreground) 70%, var(--background)); } @if $row-odd-background and not($body-column-border-color-odd) {