From e502d6ba71acb8548a2bc83074aca58fbd4bc816 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 12 Jun 2026 13:46:29 +0300 Subject: [PATCH] feat(grid): update theme and summary borders --- .../components/grid/_grid-summary-theme.scss | 12 +- .../themes/components/grid/_grid-theme.scss | 398 +++++++++--------- .../components/light/_grid-summary.scss | 8 +- 3 files changed, 217 insertions(+), 201 deletions(-) diff --git a/packages/theming/sass/themes/components/grid/_grid-summary-theme.scss b/packages/theming/sass/themes/components/grid/_grid-summary-theme.scss index ded1ecc3..e545562e 100644 --- a/packages/theming/sass/themes/components/grid/_grid-summary-theme.scss +++ b/packages/theming/sass/themes/components/grid/_grid-summary-theme.scss @@ -26,9 +26,11 @@ /// @param {Color} $background-color [null] - The summaries background color. PRIMARY - derives label-color, result-color, border-color, pinned-border-color. /// @param {Color} $label-color [null] - The summaries label color. PRIMARY - derives label-hover-color. Auto-derived from background-color. /// @param {Color} $result-color [null] - The summaries value/result color. Auto-derived from background-color. +/// @param {String} $border-width [null] - The summaries border width. +/// @param {String} $border-style [null] - The summaries border style. /// @param {Color} $border-color [null] - The summaries border color. Auto-derived from background-color. -/// @param {Color} $pinned-border-width [null] - The border width of the summary panel. -/// @param {Color} $pinned-border-style [null] - The border style of the summary panel. +/// @param {String} $pinned-border-width [null] - The border width of the summary panel. +/// @param {String} $pinned-border-style [null] - The border style of the summary panel. /// @param {Color} $pinned-border-color [null] - The border color of the summary panel. Auto-derived from background-color. /// @param {Color} $label-hover-color [null] - The summaries hover label color. Auto-derived from label-color. /// @requires $light-material-schema @@ -45,6 +47,8 @@ $background-color: null, $label-color: null, $result-color: null, + $border-width: null, + $border-style: null, $border-color: null, $pinned-border-width: null, $pinned-border-style: null, @@ -75,7 +79,7 @@ } @if not($border-color) and $background-color { - $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.26); + $border-color: hsl(from adaptive-contrast(var(--background-color)) h s l / 0.2); } @if not($pinned-border-color) and $background-color { @@ -89,6 +93,8 @@ background-color: $background-color, label-color: $label-color, result-color: $result-color, + border-width: $border-width, + border-style: $border-style, border-color: $border-color, pinned-border-width: $pinned-border-width, pinned-border-style: $pinned-border-style, diff --git a/packages/theming/sass/themes/components/grid/_grid-theme.scss b/packages/theming/sass/themes/components/grid/_grid-theme.scss index 6b9b913c..14c7a7f6 100644 --- a/packages/theming/sass/themes/components/grid/_grid-theme.scss +++ b/packages/theming/sass/themes/components/grid/_grid-theme.scss @@ -270,247 +270,247 @@ $theme: digest-schema($grid-schema); $variant: map.get($theme, '_meta', 'theme'); - @if not($ghost-header-icon-color) and $ghost-header-background { - $ghost-header-icon-color: hsl(from adaptive-contrast(var(--ghost-header-background)) h s l / 0.07); - } + // @if not($ghost-header-icon-color) and $ghost-header-background { + // $ghost-header-icon-color: hsl(from adaptive-contrast(var(--ghost-header-background)) h s l / 0.07); + // } - @if not($ghost-header-text-color) and $ghost-header-background { - $ghost-header-text-color: adaptive-contrast(var(--ghost-header-background)); - } + // @if not($ghost-header-text-color) and $ghost-header-background { + // $ghost-header-text-color: adaptive-contrast(var(--ghost-header-background)); + // } - @if not($header-selected-text-color) and $header-selected-background and not($header-text-color) { - $header-selected-text-color: adaptive-contrast(var(--header-selected-background)); - } + // @if not($header-selected-text-color) and $header-selected-background and not($header-text-color) { + // $header-selected-text-color: adaptive-contrast(var(--header-selected-background)); + // } - @if not($header-text-color) and $header-background { - $header-text-color: adaptive-contrast(var(--header-background)); - } + // @if not($header-text-color) and $header-background { + // $header-text-color: adaptive-contrast(var(--header-background)); + // } - @if not($header-selected-background) and $header-background { - $header-selected-background: dynamic-shade(var(--header-background)); - } + // @if not($header-selected-background) and $header-background { + // $header-selected-background: dynamic-shade(var(--header-background)); + // } - @if not($header-selected-text-color) and $header-text-color { - $header-selected-text-color: var(--header-text-color); - } + // @if not($header-selected-text-color) and $header-text-color { + // $header-selected-text-color: var(--header-text-color); + // } - @if not($drop-area-text-color) and $header-text-color { - $drop-area-text-color: var(--header-text-color); - } + // @if not($drop-area-text-color) and $header-text-color { + // $drop-area-text-color: var(--header-text-color); + // } - @if not($drop-area-icon-color) and $drop-area-text-color { - $drop-area-icon-color: var(--drop-area-text-color); - } + // @if not($drop-area-icon-color) and $drop-area-text-color { + // $drop-area-icon-color: var(--drop-area-text-color); + // } - @if not($header-border-color) and $header-background { - $header-border-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.24); - } + // @if not($header-border-color) and $header-background { + // $header-border-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.24); + // } - @if not($content-text-color) and $content-background { - $content-text-color: adaptive-contrast(var(--content-background)); - } + // @if not($content-text-color) and $content-background { + // $content-text-color: adaptive-contrast(var(--content-background)); + // } - @if not($row-odd-background) and $content-background { - $row-odd-background: hsl(from var(--content-background) h calc(s - 10) l); - } + // @if not($row-odd-background) and $content-background { + // $row-odd-background: hsl(from var(--content-background) h calc(s - 10) l); + // } - @if not($row-odd-text-color) and $row-odd-background { - $row-odd-text-color: adaptive-contrast(var(--row-odd-background)); - } + // @if not($row-odd-text-color) and $row-odd-background { + // $row-odd-text-color: adaptive-contrast(var(--row-odd-background)); + // } - @if not($row-even-background) and $content-background { - $row-even-background: hsl(from var(--content-background) h calc(s + 10) l); - } + // @if not($row-even-background) and $content-background { + // $row-even-background: hsl(from var(--content-background) h calc(s + 10) l); + // } - @if not($row-even-text-color) and $row-even-background { - $row-even-text-color: adaptive-contrast(var(--row-even-background)); - } + // @if not($row-even-text-color) and $row-even-background { + // $row-even-text-color: adaptive-contrast(var(--row-even-background)); + // } - @if not($row-hover-background) and $content-background { - $row-hover-background: dynamic-shade(var(--content-background), $offset: 7); - } + // @if not($row-hover-background) and $content-background { + // $row-hover-background: dynamic-shade(var(--content-background), $offset: 7); + // } - @if not($row-hover-text-color) and $row-hover-background { - $row-hover-text-color: adaptive-contrast(var(--row-hover-background)); - } + // @if not($row-hover-text-color) and $row-hover-background { + // $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-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), $offset: 10); - } + // @if not($cell-selected-background) and $content-background { + // $cell-selected-background: dynamic-shade(var(--content-background), $offset: 10); + // } - @if not($cell-selected-text-color) and $cell-selected-background { - $cell-selected-text-color: adaptive-contrast(var(--cell-selected-background)); - } + // @if not($cell-selected-text-color) and $cell-selected-background { + // $cell-selected-text-color: adaptive-contrast(var(--cell-selected-background)); + // } - @if not($row-selected-background) and $content-background { - $row-selected-background: dynamic-shade(var(--content-background)); - } + // @if not($row-selected-background) and $content-background { + // $row-selected-background: dynamic-shade(var(--content-background)); + // } - @if not($row-selected-text-color) and $row-selected-background { - $row-selected-text-color: adaptive-contrast(var(--row-selected-background)); - } + // @if not($row-selected-text-color) and $row-selected-background { + // $row-selected-text-color: adaptive-contrast(var(--row-selected-background)); + // } - @if not($row-selected-hover-background) and $row-selected-background { - $row-selected-hover-background: dynamic-shade(var(--row-selected-background), $offset: 7); - } + // @if not($row-selected-hover-background) and $row-selected-background { + // $row-selected-hover-background: dynamic-shade(var(--row-selected-background), $offset: 7); + // } - @if not($row-selected-hover-text-color) and $row-selected-hover-background { - $row-selected-hover-text-color: adaptive-contrast(var(--row-selected-hover-background)); - } + // @if not($row-selected-hover-text-color) and $row-selected-hover-background { + // $row-selected-hover-text-color: adaptive-contrast(var(--row-selected-hover-background)); + // } - @if not($row-border-color) and $content-background { - $row-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.08); - } + // @if not($row-border-color) and $content-background { + // $row-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.08); + // } - @if not($cell-selected-within-background) and $row-selected-background { - $cell-selected-within-background: dynamic-shade(var(--row-selected-background), $offset: 7); - } + // @if not($cell-selected-within-background) and $row-selected-background { + // $cell-selected-within-background: dynamic-shade(var(--row-selected-background), $offset: 7); + // } - @if not($cell-selected-within-text-color) and $cell-selected-within-background { - $cell-selected-within-text-color: adaptive-contrast(var(--cell-selected-within-background)); - } + // @if not($cell-selected-within-text-color) and $cell-selected-within-background { + // $cell-selected-within-text-color: adaptive-contrast(var(--cell-selected-within-background)); + // } - @if not($cell-editing-background) and $content-background { - $cell-editing-background: var(--content-background); - } + // @if not($cell-editing-background) and $content-background { + // $cell-editing-background: var(--content-background); + // } - @if not($cell-editing-foreground) and $cell-editing-background { - $cell-editing-foreground: adaptive-contrast(var(--cell-editing-background)); - } + // @if not($cell-editing-foreground) and $cell-editing-background { + // $cell-editing-foreground: adaptive-contrast(var(--cell-editing-background)); + // } - @if not($cell-editing-focus-foreground) and $cell-editing-background { - $cell-editing-focus-foreground: adaptive-contrast(var(--cell-editing-background)); - } + // @if not($cell-editing-focus-foreground) and $cell-editing-background { + // $cell-editing-focus-foreground: adaptive-contrast(var(--cell-editing-background)); + // } - @if not($cell-active-border-color) and $content-background { - $cell-active-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5); - } + // @if not($cell-active-border-color) and $content-background { + // $cell-active-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5); + // } - @if not($pinned-border-color) and $content-background { - $pinned-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.08); - } + // @if not($pinned-border-color) and $content-background { + // $pinned-border-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.08); + // } - @if not($group-row-background) and $header-background { - $group-row-background: $header-background; - } + // @if not($group-row-background) and $header-background { + // $group-row-background: $header-background; + // } - @if not($expand-icon-color) and $group-row-background { - $expand-icon-color: adaptive-contrast(var(--group-row-background)); - } + // @if not($expand-icon-color) and $group-row-background { + // $expand-icon-color: adaptive-contrast(var(--group-row-background)); + // } - @if not($group-row-selected-background) and $group-row-background { - $group-row-selected-background: dynamic-shade(var(--group-row-background), $offset: 10); - } + // @if not($group-row-selected-background) and $group-row-background { + // $group-row-selected-background: dynamic-shade(var(--group-row-background), $offset: 10); + // } - @if not($group-label-text) and $group-row-selected-background { - $group-label-text: adaptive-contrast(var(--group-row-selected-background)); - } + // @if not($group-label-text) and $group-row-selected-background { + // $group-label-text: adaptive-contrast(var(--group-row-selected-background)); + // } - @if not($expand-icon-color) and $group-row-selected-background { - $expand-icon-color: adaptive-contrast(var(--group-row-selected-background)); - } + // @if not($expand-icon-color) and $group-row-selected-background { + // $expand-icon-color: adaptive-contrast(var(--group-row-selected-background)); + // } - @if not($expand-icon-hover-color) and $expand-icon-color { - $expand-icon-hover-color: var(--expand-icon-color); - } + // @if not($expand-icon-hover-color) and $expand-icon-color { + // $expand-icon-hover-color: var(--expand-icon-color); + // } - @if not($group-count-background) and $group-row-selected-background { - $group-count-background: adaptive-contrast(var(--group-row-selected-background)); - } + // @if not($group-count-background) and $group-row-selected-background { + // $group-count-background: adaptive-contrast(var(--group-row-selected-background)); + // } - @if not($expand-all-icon-color) and $header-background { - $expand-all-icon-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.87); - } + // @if not($expand-all-icon-color) and $header-background { + // $expand-all-icon-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.87); + // } - @if not($expand-all-icon-hover-color) and $header-background { - $expand-all-icon-hover-color: adaptive-contrast(var(--header-background)); - } + // @if not($expand-all-icon-hover-color) and $header-background { + // $expand-all-icon-hover-color: adaptive-contrast(var(--header-background)); + // } - @if not($sorted-header-icon-color) and $header-background { - $sorted-header-icon-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8); - } + // @if not($sorted-header-icon-color) and $header-background { + // $sorted-header-icon-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8); + // } - @if not($sortable-header-icon-hover-color) and $sorted-header-icon-color { - $sortable-header-icon-hover-color: hsl(from var(--sorted-header-icon-color) h s l / 1); - } + // @if not($sortable-header-icon-hover-color) and $sorted-header-icon-color { + // $sortable-header-icon-hover-color: hsl(from var(--sorted-header-icon-color) h s l / 1); + // } - @if not($edit-mode-color) and $content-background { - $edit-mode-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5); - } + // @if not($edit-mode-color) and $content-background { + // $edit-mode-color: hsl(from adaptive-contrast(var(--content-background)) h s l / 0.5); + // } - @if not($group-label-text) and $group-row-background { - $group-label-text: adaptive-contrast(var(--group-row-background)); - } + // @if not($group-label-text) and $group-row-background { + // $group-label-text: adaptive-contrast(var(--group-row-background)); + // } - @if not($group-count-background) and $group-row-background { - $group-count-background: adaptive-contrast(var(--group-row-background)); - } + // @if not($group-count-background) and $group-row-background { + // $group-count-background: adaptive-contrast(var(--group-row-background)); + // } - @if not($group-count-text-color) and $group-count-background { - $group-count-text-color: adaptive-contrast(var(--group-count-background)); - } + // @if not($group-count-text-color) and $group-count-background { + // $group-count-text-color: adaptive-contrast(var(--group-count-background)); + // } - @if not($grouparea-background) and $header-background { - $grouparea-background: var(--header-background); - } + // @if not($grouparea-background) and $header-background { + // $grouparea-background: var(--header-background); + // } - @if not($grouparea-color) and $grouparea-background { - $grouparea-color: hsl(from adaptive-contrast(var(--grouparea-background)) h s l / 0.8); - } + // @if not($grouparea-color) and $grouparea-background { + // $grouparea-color: hsl(from adaptive-contrast(var(--grouparea-background)) h s l / 0.8); + // } - @if not($grouparea-color) and $header-background { - $grouparea-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8); - } + // @if not($grouparea-color) and $header-background { + // $grouparea-color: hsl(from adaptive-contrast(var(--header-background)) h s l / 0.8); + // } - @if not($drop-area-background) and $grouparea-background { - $drop-area-background: dynamic-shade(var(--grouparea-background)); - } + // @if not($drop-area-background) and $grouparea-background { + // $drop-area-background: dynamic-shade(var(--grouparea-background)); + // } - @if not($drop-area-on-drop-background) and $drop-area-background { - $drop-area-on-drop-background: $drop-area-background; - } + // @if not($drop-area-on-drop-background) and $drop-area-background { + // $drop-area-on-drop-background: $drop-area-background; + // } - @if not($drop-area-text-color) and $drop-area-background { - $drop-area-text-color: adaptive-contrast(var(--drop-area-background)); - } + // @if not($drop-area-text-color) and $drop-area-background { + // $drop-area-text-color: adaptive-contrast(var(--drop-area-background)); + // } - @if not($drop-area-icon-color) and $drop-area-background { - $drop-area-icon-color: adaptive-contrast(var(--drop-area-background)); - } + // @if not($drop-area-icon-color) and $drop-area-background { + // $drop-area-icon-color: adaptive-contrast(var(--drop-area-background)); + // } - @if not($filtering-header-background) and $header-background { - $filtering-header-background: color-mix(in hsl, var(--header-background), #fff 5%); - } + // @if not($filtering-header-background) and $header-background { + // $filtering-header-background: color-mix(in hsl, var(--header-background), #fff 5%); + // } - @if not($filtering-header-text-color) and $filtering-header-background { - $filtering-header-text-color: adaptive-contrast(var(--filtering-header-background)); - } + // @if not($filtering-header-text-color) and $filtering-header-background { + // $filtering-header-text-color: adaptive-contrast(var(--filtering-header-background)); + // } - @if not($filtering-row-text-color) and $filtering-row-background { - $filtering-row-text-color: adaptive-contrast(var(--filtering-row-background)); - } + // @if not($filtering-row-text-color) and $filtering-row-background { + // $filtering-row-text-color: adaptive-contrast(var(--filtering-row-background)); + // } - @if not($excel-filtering-header-foreground) and $filtering-row-background { - $excel-filtering-header-foreground: adaptive-contrast(var(--filtering-row-background)); - } + // @if not($excel-filtering-header-foreground) and $filtering-row-background { + // $excel-filtering-header-foreground: adaptive-contrast(var(--filtering-row-background)); + // } - @if not($excel-filtering-subheader-foreground) and $filtering-row-background { - $excel-filtering-subheader-foreground: adaptive-contrast(var(--filtering-row-background)); - } + // @if not($excel-filtering-subheader-foreground) and $filtering-row-background { + // $excel-filtering-subheader-foreground: adaptive-contrast(var(--filtering-row-background)); + // } - @if not($excel-filtering-actions-foreground) and $filtering-row-background { - $excel-filtering-actions-foreground: hsl(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8); - } + // @if not($excel-filtering-actions-foreground) and $filtering-row-background { + // $excel-filtering-actions-foreground: hsl(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8); + // } - @if not($excel-filtering-actions-disabled-foreground) and $filtering-row-background { - $excel-filtering-actions-disabled-foreground: hsl( - from adaptive-contrast(var(--filtering-row-background)) h s l / 0.5 - ); - } + // @if not($excel-filtering-actions-disabled-foreground) and $filtering-row-background { + // $excel-filtering-actions-disabled-foreground: hsl( + // from adaptive-contrast(var(--filtering-row-background)) h s l / 0.5 + // ); + // } @if not($grid-shadow) { $grid-elevation: map.get($grid-schema, 'grid-elevation'); @@ -540,36 +540,42 @@ // header - @if not($header-background) and $foreground and $background { - $header-background: color-mix(in srgb, var(--foreground) 6%, var(--background)); + @if not($header-text-color) and $header-background { + $header-text-color: adaptive-contrast(var(--header-background)); } @if not($header-text-color) and $foreground { $header-text-color: var(--foreground); } - @if not($header-selected-background) and $accent-color and $background { - $header-selected-background: color-mix(in srgb, var(--accent-color) 12%, var(--background)); + @if not($header-background) and $foreground and $background { + $header-background: color-mix(in srgb, var(--foreground) 6%, var(--background)); } - @if not($header-selected-text-color) and $foreground { - $header-selected-text-color: var(--foreground); + @if not($header-selected-background) and $accent-color and $header-background { + $header-selected-background: color-mix(in srgb, var(--accent-color) 12%, var(--header-background)); + } + + @if not($header-selected-text-color) and $header-text-color { + $header-selected-text-color: var(--header-text-color); } @if not($ghost-header-background) and $header-background { $ghost-header-background: var(--header-background); } - @if not($ghost-header-text-color) and $foreground { - $ghost-header-text-color: var(--foreground); + @if not($ghost-header-text-color) and $header-text-color { + $ghost-header-text-color: var(--header-text-color); } - @if not($ghost-header-icon-color) and $foreground { - $ghost-header-icon-color: var(--foreground); + @if not($ghost-header-icon-color) and $header-text-color { + $ghost-header-icon-color: var(--header-text-color); } - @if not($header-border-color) and $foreground and $background { - $header-border-color: hsl(from color-mix(in srgb, var(--foreground) 20%, var(--background)) h s l / 0.38); + @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 + ); } @if not($sorted-header-icon-color) and $accent-color { @@ -594,8 +600,8 @@ $row-odd-background: var(--background); } - @if not($row-hover-background) and $accent-color and $background { - $row-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--background)); + @if not($row-hover-background) and $accent-color and $row-odd-background { + $row-hover-background: color-mix(in srgb, var(--accent-color) 8%, var(--row-odd-background)); } @if not($row-selected-background) and $accent-color and $background { diff --git a/packages/theming/sass/themes/schemas/components/light/_grid-summary.scss b/packages/theming/sass/themes/schemas/components/light/_grid-summary.scss index f88e18d9..99ddf15a 100644 --- a/packages/theming/sass/themes/schemas/components/light/_grid-summary.scss +++ b/packages/theming/sass/themes/schemas/components/light/_grid-summary.scss @@ -13,8 +13,10 @@ /// @prop {Map} label-color [color: ('primary', 500)] - The summaries label color. /// @prop {Map} label-hover-color [color: ('primary', 700)] - The summaries hover label color. /// @prop {Map} result-color [contrast-color: ('gray', 300)] - The summaries value/result color. +/// @prop {String} border-width [1px] - The summaries column border width. +/// @prop {String} border-style [solid] - The summaries column border style. /// @prop {Color} border-color [transparent] - The summaries column border color. -/// @prop {String} pinned-border-width [1px] - The border width of the summary panel. +/// @prop {String} pinned-border-width [2px] - The border width of the summary panel. /// @prop {String} pinned-border-style [solid] - The border style of the summary panel. /// @prop {Map} pinned-border-color [color: ('gray', 400)] - The border color of the summary panel. $light-grid-summary: ( @@ -46,9 +48,11 @@ $light-grid-summary: ( ), ), + border-width: 1px, + border-style: solid, border-color: transparent, - pinned-border-width: 1px, + pinned-border-width: 2px, pinned-border-style: solid, pinned-border-color: ( color: (