Skip to content

feat(grid): add additional border properties #579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 2 commits into from
Jun 10, 2026
Merged

feat(grid): add additional border properties #579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21c1596
feat(grid): add additional border properties
didimmova Jun 8, 2026
37f52c3
Merge branch 'master' into diidmmova/add-grid-border-props
simeonoff Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 27 additions & 10 deletions packages/theming/sass/themes/components/grid/_grid-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,13 @@
/// @param {Color} $row-selected-hover-text-color [null] - The selected row hover text color. Auto-derived from row-selected-hover-background.
/// @param {Color} $row-hover-background [null] - The hover row background color. Auto-derived from content-background.
/// @param {Color} $row-hover-text-color [null] - The hover row text color. Auto-derived from row-hover-background.
/// @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 {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.
/// @param {String} $cell-active-border-width [null] - The border width for the active cell.
/// @param {Color} $cell-active-border-color [null] - The border color for the active cell. Auto-derived from content-background.
/// @param {Color} $cell-selected-background [null] - The selected cell background color. Auto-derived from content-background.
/// @param {Color} $cell-selected-text-color [null] - The selected cell text color. Auto-derived from cell-selected-background.
Expand Down Expand Up @@ -99,6 +102,7 @@
/// @param {Color} $excel-filtering-actions-disabled-foreground [null] - The excel filtering actions disabled text color. Auto-derived from filtering-row-background.
/// @param {Color} $excel-filtering-border-color [null] - The border color used in the excel style filter. Auto-derived from foreground and background.
/// @param {Color} $tree-filtered-text-color [null] - Grouping row background color on focus.
/// @param {Color} $summaries-border-color [null] - The border color of the summaries row.
/// @param {Color} $summaries-patch-background [null] - The leading summaries patch background.
/// @param {Color} $row-highlight [null] - The grid row highlight indication color.
/// @param {List} $grid-shadow [null] - The shadow of the grid.
Expand Down Expand Up @@ -152,13 +156,17 @@
$row-selected-hover-text-color: null,
$row-hover-background: null,
$row-hover-text-color: null,
$row-border-width: null,
$row-border-style: null,
$row-border-color: null,

$pinned-border-width: null,
$pinned-border-style: null,
$pinned-border-color: null,

$cell-active-border-width: null,
$cell-active-border-color: null,

$cell-selected-background: null,
$cell-selected-text-color: null,
$cell-editing-background: null,
Expand Down Expand Up @@ -229,6 +237,7 @@
$drop-area-border-radius: null,
$grid-border-color: null,
$sortable-header-icon-hover-color: null,
$summaries-border-color: null,
$summaries-patch-background: null,

$cell-selected-within-background: null,
Expand Down Expand Up @@ -325,8 +334,12 @@
$row-hover-text-color: adaptive-contrast(var(--row-hover-background));
}

@if not($cell-selected-within-background) and $cell-selected-background {
$cell-selected-within-background: dynamic-shade($cell-selected-background);
}

@if not($cell-selected-background) and $content-background {
$cell-selected-background: dynamic-shade(var(--content-background));
$cell-selected-background: dynamic-shade(var(--content-background), $offset: 10);
}

@if not($cell-selected-text-color) and $cell-selected-background {
Expand Down Expand Up @@ -601,7 +614,7 @@
$row-odd-text-color: var(--foreground);
}

@if not($row-even-text-color) and $foreground {
@if not($row-even-text-color) and $foreground and not($row-even-background) {
$row-even-text-color: var(--foreground);
}

Expand Down Expand Up @@ -651,12 +664,12 @@

// cell

@if not($cell-selected-background) and $accent-color and $background {
$cell-selected-background: color-mix(in srgb, var(--accent-color) 24%, var(--background));
@if not($cell-selected-text-color) and $foreground and not($cell-selected-background) {
$cell-selected-text-color: var(--foreground);
}

@if not($cell-selected-text-color) and $foreground {
$cell-selected-text-color: var(--foreground);
@if not($cell-selected-background) and $accent-color and $background {
$cell-selected-background: color-mix(in srgb, var(--accent-color) 24%, var(--background));
}

@if not($cell-editing-background) and $background {
Expand All @@ -683,12 +696,12 @@
$cell-active-border-color: var(--accent-color);
}

@if not($cell-selected-within-background) and $accent-color and $background {
$cell-selected-within-background: color-mix(in srgb, var(--accent-color) 24%, var(--background));
@if not($cell-selected-within-text-color) and $foreground and not($cell-selected-within-background) {
$cell-selected-within-text-color: var(--foreground);
}

@if not($cell-selected-within-text-color) and $foreground {
$cell-selected-within-text-color: var(--foreground);
@if not($cell-selected-within-background) and $accent-color and $background {
$cell-selected-within-background: color-mix(in srgb, var(--accent-color) 24%, var(--background));
}

@if not($cell-disabled-color) and $foreground and $background {
Expand Down Expand Up @@ -903,12 +916,15 @@
row-selected-hover-text-color: $row-selected-hover-text-color,
row-hover-background: $row-hover-background,
row-hover-text-color: $row-hover-text-color,
row-border-width: $row-border-width,
row-border-style: $row-border-style,
row-border-color: $row-border-color,

pinned-border-width: $pinned-border-width,
pinned-border-style: $pinned-border-style,
pinned-border-color: $pinned-border-color,

cell-active-border-width: $cell-active-border-width,
cell-active-border-color: $cell-active-border-color,
cell-selected-background: $cell-selected-background,
cell-editing-background: $cell-editing-background,
Expand Down Expand Up @@ -983,6 +999,7 @@
drop-area-border-radius: $drop-area-border-radius,
sortable-header-icon-hover-color: $sortable-header-icon-hover-color,
grid-border-color: $grid-border-color,
summaries-border-color: $summaries-border-color,
summaries-patch-background: $summaries-patch-background,

cell-selected-within-background: $cell-selected-within-background,
Expand Down
21 changes: 17 additions & 4 deletions packages/theming/sass/themes/schemas/components/light/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,14 @@
/// @prop {Map} row-hover-background [color: ('gray', 200)] - The hover row background color.
/// @prop {Map} body-column-hover-border-color [color: ('gray', 200)] - The border color used for the body columns.
/// @prop {Map} row-hover-text-color [contrast-color: ('gray', 200)] - The hover row text color.
/// @prop {Number} row-border-width [rem(1px)] - The row bottom border width.
/// @prop {String} row-border-style [solid] - The row bottom border style.
/// @prop {Map} row-border-color [color: ('gray', 300, .38)] - The row bottom border color.
/// @prop {Map} row-highlight [color: ('secondary', 500)] - The grid row highlight color.
/// @prop {Number} pinned-border-width [.125rem] - The border width of the pinned border.
/// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border.
/// @prop {Map} pinned-border-color [color: ('gray', 400)] - The color of the pinned border.
/// @prop {Number} cell-active-border-width [1px] - The border width for the active cell.
/// @prop {Map} cell-active-border-color [color: ('primary', 500)] - The active(focused) cell border color.
/// @prop {Map} cell-selected-background [color: ('gray', 200)] - The selected cell background color.
/// @prop {Map} cell-selected-text-color [contrast-color: ('gray', 200)] - The selected cell text color.
Expand Down Expand Up @@ -95,6 +98,7 @@
/// @prop {List} group-area-size [(rem(41), rem(49px), rem(57px))] - The size used for the grid group area.
/// @prop {Color} row-ghost-background [color: ('gray', 50)] - The background color of the dragged row.
/// @prop {Color} row-ghost-border-color [color: ('gray', 500)] - The border color of the dragged row.
/// @prop {Map} summaries-border-color [color: ('gray', 400)] - The border color of the summaries row.
/// @prop {Color} summaries-patch-background [color: ('gray', 300)] - The leading summaries patch backround. Used in hierarchical grids.
/// @prop {String} active-state-border-style ['solid'] - The border style used for row active state and cell active state.
/// @prop {Map} typography [header: (comfortable: (value: 'overline'), compact: (value: 'subtitle-1'))] - The typography styles used for the component.
Expand Down Expand Up @@ -165,8 +169,7 @@ $light-grid: extend(
),
),

header-border-width: 1px,

header-border-width: rem(1px),
header-border-style: solid,

header-border-color: (
Expand Down Expand Up @@ -351,6 +354,9 @@ $light-grid: extend(
),
),

row-border-width: rem(1px),
row-border-style: solid,

row-border-color: (
color: (
'gray',
Expand All @@ -366,8 +372,7 @@ $light-grid: extend(
),
),

pinned-border-width: 0.125rem,

pinned-border-width: rem(2px),
pinned-border-style: solid,

pinned-border-color: (
Expand All @@ -377,6 +382,7 @@ $light-grid: extend(
),
),

cell-active-border-width: rem(1px),
cell-active-border-color: (
color: (
'primary',
Expand Down Expand Up @@ -656,6 +662,13 @@ $light-grid: extend(
),
),

summaries-border-color: (
color: (
'gray',
400,
),
),

summaries-patch-background: (
color: (
'gray',
Expand Down
Loading