igniteui-theming 27.0.0 → 27.2.0

package/sass/themes/components/grid/_grid-theme.scss

@@ -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.
@@ -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.
@@ -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,
@@ -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,
@@ -261,244 +270,6 @@
     $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-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-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-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-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($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-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-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-text-color) and $row-hover-background {
-        $row-hover-text-color: adaptive-contrast(var(--row-hover-background));
-    }
-
-    @if not($cell-selected-background) and $content-background {
-        $cell-selected-background: dynamic-shade(var(--content-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-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-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($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-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-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($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($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-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-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($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($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($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-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($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 $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-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-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-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($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-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($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
         $grid-shadow: elevation($grid-elevation);
@@ -527,36 +298,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-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 $foreground {
-        $header-selected-text-color: var(--foreground);
+    @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 {
@@ -581,8 +358,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 {
@@ -601,7 +378,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);
     }
 
@@ -651,12 +428,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 {
@@ -683,12 +460,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 {
@@ -767,12 +544,12 @@
 
     // grouping
 
-    @if not($grouparea-background) and $foreground and $background {
-        $grouparea-background: color-mix(in srgb, var(--foreground) 6%, var(--background));
+    @if not($grouparea-background) and $header-background {
+        $grouparea-background: var(--header-background);
     }
 
-    @if not($grouparea-color) and $foreground and $background {
-        $grouparea-color: color-mix(in srgb, var(--foreground) 60%, var(--background));
+    @if not($grouparea-color) and $header-text-color and $header-background {
+        $grouparea-color: color-mix(in srgb, var(--header-text-color) 60%, var(--header-background));
     }
 
     @if not($group-row-background) and $foreground and $background {
@@ -803,20 +580,20 @@
         $group-count-text-color: var(--foreground);
     }
 
-    @if not($drop-area-text-color) and $foreground and $background {
-        $drop-area-text-color: color-mix(in srgb, var(--foreground) 80%, var(--background));
+    @if not($drop-area-text-color) and $header-text-color and $header-background {
+        $drop-area-text-color: color-mix(in srgb, var(--header-text-color) 80%, var(--header-background));
     }
 
-    @if not($drop-area-icon-color) and $foreground and $background {
-        $drop-area-icon-color: color-mix(in srgb, var(--foreground) 80%, var(--background));
+    @if not($drop-area-icon-color) and $drop-area-text-color {
+        $drop-area-icon-color: var(--drop-area-text-color);
     }
 
-    @if not($drop-area-background) and $background {
-        $drop-area-background: var(--background);
+    @if not($drop-area-background) and $header-background {
+        $drop-area-background: dynamic-shade(var(--header-background));
     }
 
-    @if not($drop-area-on-drop-background) and $background {
-        $drop-area-on-drop-background: var(--background);
+    @if not($drop-area-on-drop-background) and $header-background {
+        $drop-area-on-drop-background: dynamic-shade(var(--header-background));
     }
 
     // summaries
@@ -903,12 +680,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,
@@ -983,6 +763,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,

package/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: (

package/sass/themes/schemas/components/light/_grid.scss

@@ -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.
@@ -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.
@@ -165,8 +169,7 @@ $light-grid: extend(
             ),
         ),
 
-        header-border-width: 1px,
-
+        header-border-width: rem(1px),
         header-border-style: solid,
 
         header-border-color: (
@@ -351,6 +354,9 @@ $light-grid: extend(
             ),
         ),
 
+        row-border-width: rem(1px),
+        row-border-style: solid,
+
         row-border-color: (
             color: (
                 'gray',
@@ -366,8 +372,7 @@ $light-grid: extend(
             ),
         ),
 
-        pinned-border-width: 0.125rem,
-
+        pinned-border-width: rem(2px),
         pinned-border-style: solid,
 
         pinned-border-color: (
@@ -377,6 +382,7 @@ $light-grid: extend(
             ),
         ),
 
+        cell-active-border-width: rem(1px),
         cell-active-border-color: (
             color: (
                 'primary',
@@ -656,6 +662,13 @@ $light-grid: extend(
             ),
         ),
 
+        summaries-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
         summaries-patch-background: (
             color: (
                 'gray',