@progress/kendo-theme-bootstrap 13.2.0-dev.1 → 13.2.0-dev.3

package/scss/grid/_theme.scss

@@ -1,454 +1,7 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-@use "../list/_variables.scss" as *;
-@use "../popup/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/grid/_theme.scss" as *;
 
 
 @mixin kendo-grid--theme() {
-
-    // Theme
-    .k-grid {
-        @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border );
-
-        .k-table {
-            background-color: inherit;
-        }
-
-        td,
-        .k-table-td,
-        .k-grid-content,
-        .k-grid-header-locked,
-        .k-grid-content-locked {
-            border-color: $kendo-grid-border;
-        }
-
-        // Alt row
-        .k-table-alt-row {
-            color: $kendo-grid-alt-text;
-            background-color: $kendo-grid-alt-bg;
-        }
-
-        // Hover state
-        tbody>tr:not(.k-detail-row):hover,
-        .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover {
-            color: $kendo-grid-hover-text;
-            background-color: $kendo-grid-hover-bg;
-        }
-
-        // Selected state
-        .k-table-th.k-selected,
-        td.k-selected,
-        .k-table-td.k-selected,
-        .k-table-row.k-selected > td,
-        .k-table-row.k-selected > .k-table-td {
-            @include fill( $kendo-grid-selected-text, $kendo-grid-selected-bg );
-        }
-
-        // Highlighted state
-        td.k-highlighted,
-        .k-table-row.k-highlighted > td,
-        .k-table-td.k-highlighted,
-        .k-table-row.k-highlighted > .k-table-td {
-            @include fill( $bg: $kendo-grid-highlighted-bg );
-        }
-
-        // Highlighted Selected state
-        td.k-highlighted.k-selected,
-        .k-table-row.k-highlighted.k-selected > td,
-        .k-table-td.k-highlighted.k-selected,
-        .k-table-row.k-highlighted.k-selected > .k-table-td,
-        .k-table-row.k-highlighted > .k-table-td.k-selected,
-        .k-table-row.k-selected > .k-table-td.k-highlighted {
-            @include fill( $bg: $kendo-grid-selected-highlighted-bg );
-        }
-
-        // Focused state
-        .k-table-th,
-        td,
-        .k-table-td,
-        .k-master-row > td,
-        .k-grouping-row > td,
-        .k-detail-row > td,
-        .k-group-footer > td,
-        .k-master-row > .k-table-td,
-        .k-grouping-row > .k-table-td,
-        .k-detail-row > .k-table-td,
-        .k-group-footer > .k-table-td,
-        .k-grid-pager {
-            &:focus,
-            &.k-focus {
-                box-shadow: $kendo-grid-focus-shadow;
-            }
-        }
-
-        col.k-sorted,
-        .k-table-th.k-sorted {
-            background-color: $kendo-grid-sorted-bg;
-        }
-
-        // Locked
-
-        .k-grid-header-locked,
-        .k-grid-content-locked,
-        .k-grid-footer-locked,
-        .k-grid-header-locked .k-header,
-        .k-grid-content-locked td,
-        .k-grid-content-locked .k-table-td,
-        .k-grid-footer-locked td,
-        .k-grid-footer-locked .k-table-td {
-            border-color: $kendo-grid-sticky-header-border;
-        }
-
-        .k-grid-header-locked .k-header {
-            border-block-end-color: $kendo-grid-header-border;
-        }
-
-        .k-grid-content-locked {
-            .k-group-footer td,
-            .k-group-footer .k-table-td,
-            .k-group-cell {
-                @include fill( $border: $kendo-grid-header-border );
-            }
-
-            .k-grouping-row + .k-table-row td,
-            .k-grouping-row + .k-table-row .k-table-td {
-                border-block-start-color: $kendo-grid-header-border;
-            }
-        }
-
-        // Sticky columns
-        .k-master-row {
-            .k-grid-content-sticky {
-                @include fill( $bg: $kendo-grid-sticky-bg, $border: $kendo-grid-sticky-border );
-                border-block-start-color: $kendo-grid-header-border;
-            }
-
-            .k-grid-row-sticky,
-            &.k-grid-row-sticky > .k-table-td {
-                @include fill( $bg: $kendo-grid-sticky-bg );
-                border-block-start-color: $kendo-grid-sticky-border;
-                border-block-end-color: $kendo-grid-sticky-border;
-            }
-
-            &.k-table-alt-row {
-                .k-grid-content-sticky,
-                &.k-grid-row-sticky > .k-table-td,
-                .k-grid-row-sticky {
-                    @include fill( $bg: $kendo-grid-sticky-alt-bg );
-                }
-            }
-
-            // Sticky
-            &.k-table-row td.k-grid-content-sticky,
-            &.k-table-row.k-grid-row-sticky > .k-table-td,
-            &.k-table-row .k-table-td.k-grid-row-sticky,
-            &.k-table-row td.k-grid-content-sticky,
-            &.k-table-row .k-table-td.k-grid-content-sticky {
-                @include fill( $bg: $kendo-grid-sticky-bg );
-            }
-
-            // Sticky Alt
-            &.k-table-alt-row td.k-grid-content-sticky,
-            &.k-table-alt-row.k-grid-row-sticky > .k-table-td,
-            &.k-table-alt-row .k-table-td.k-grid-row-sticky,
-            &.k-table-alt-row td.k-grid-content-sticky,
-            &.k-table-alt-row .k-table-td.k-grid-content-sticky {
-                @include fill( $bg: $kendo-grid-sticky-alt-bg );
-            }
-
-            // Sticky Hover
-            &.k-table-row:hover .k-grid-content-sticky,
-            &.k-table-row:hover .k-grid-row-sticky,
-            &.k-table-row:hover.k-grid-row-sticky > .k-table-td,
-            &.k-table-row.k-hover .k-grid-content-sticky,
-            &.k-table-row.k-hover .k-grid-row-sticky,
-            &.k-table-row.k-hover.k-grid-row-sticky > .k-table-td {
-                @include fill( $bg: $kendo-grid-sticky-hover-bg );
-            }
-
-            // Sticky Selected state
-            &.k-table-row.k-selected td.k-grid-content-sticky,
-            &.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
-            &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
-            &.k-table-row td.k-grid-content-sticky.k-selected,
-            &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
-                &::before {
-                    @include fill( $bg: $kendo-grid-selected-bg );
-                }
-            }
-
-            // Sticky Highlighted state
-            &.k-table-row.k-highlighted td.k-grid-content-sticky,
-            &.k-table-row.k-highlighted.k-grid-row-sticky > .k-table-td,
-            &.k-table-row.k-highlighted .k-table-td.k-grid-row-sticky,
-            &.k-table-row td.k-grid-content-sticky.k-highlighted,
-            &.k-table-row .k-table-td.k-grid-content-sticky.k-highlighted {
-                &::before {
-                    @include fill( $bg: $kendo-grid-highlighted-bg );
-                }
-            }
-
-            // Sticky Selected Highlighted state
-            &.k-table-row.k-selected.k-highlighted td.k-grid-content-sticky,
-            &.k-table-row.k-selected.k-highlighted.k-grid-row-sticky > .k-table-td,
-            &.k-table-row.k-selected.k-highlighted .k-table-td.k-grid-row-sticky,
-            &.k-selected.k-table-row .k-table-td.k-grid-content-sticky.k-highlighted,
-            &.k-highlighted.k-table-row .k-table-td.k-grid-content-sticky.k-selected,
-            &.k-table-row td.k-grid-content-sticky.k-selected.k-highlighted,
-            &.k-table-row .k-table-td.k-grid-content-sticky.k-selected.k-highlighted {
-                &::before {
-                    @include fill( $bg: $kendo-grid-selected-highlighted-bg );
-                }
-            }
-        }
-    }
-
-    .k-grid-pinned-container {
-        background-color: $kendo-grid-header-bg;
-        border-color: $kendo-grid-border;
-    }
-    .k-grid-pinned-wrap {
-        border-color: $kendo-grid-header-border;
-
-        > .k-table {
-            background-color: $kendo-grid-bg;
-            box-shadow: $kendo-grid-cell-vertical-border-width 0 0 0 $kendo-grid-border;
-        }
-    }
-
-    .k-grid-sticky-container {
-        background-color: $kendo-grid-bg;
-        border-color: $kendo-grid-sticky-border;
-    }
-
-
-    // Toolbar
-    .k-grid-toolbar {
-        @include fill(
-            null,
-            null,
-            inherit,
-            null
-        );
-    }
-
-
-    // Grouping header
-    .k-grouping-header {
-        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
-    }
-
-    // Header
-    .k-grid-header {
-        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
-
-        .k-sort-icon,
-        .k-sort-order {
-            color: $kendo-grid-sorting-indicator-text;
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            &:focus,
-            &.k-focus {
-                box-shadow: inset 0 0 0 2px rgba( black, .1 );
-            }
-            &.k-active {
-                color: k-color(on-primary);
-                background-color: k-color(primary);
-            }
-        }
-
-        .k-grid-header-sticky,
-        .k-grid-header-sticky.k-sorted {
-            @include fill(
-                $color: $kendo-grid-sticky-header-text,
-                $bg: $kendo-grid-sticky-header-bg
-            );
-
-            border-inline-end-color: $kendo-grid-sticky-header-border;
-            border-inline-start-color: $kendo-grid-sticky-header-border;
-        }
-    }
-
-
-    // Selection Aggregates
-    .k-selection-aggregates {
-        @include fill(
-            $kendo-grid-selection-aggregates-text,
-            $kendo-grid-selection-aggregates-bg,
-            $kendo-grid-selection-aggregates-border
-        );
-    }
-
-    .k-grouping-row {
-        .k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-header-bg );
-        }
-
-        &:hover .k-grid-content-sticky,
-        &.k-hover .k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-hover-bg );
-        }
-    }
-
-    .k-group-footer {
-        td,
-        .k-table-td,
-        .k-grid-footer-sticky {
-            @include fill( $bg: $kendo-grid-sticky-footer-bg );
-        }
-
-        &:hover .k-grid-footer-sticky,
-        &.k-hover .k-grid-footer-sticky {
-            @include fill( $bg: $kendo-grid-sticky-footer-hover-bg );
-        }
-    }
-
-    // Footer
-    .k-grid-footer {
-        @include fill(
-            $kendo-grid-footer-text,
-            $kendo-grid-footer-bg,
-            $kendo-grid-footer-border
-        );
-        .k-grid-footer-sticky {
-            border-color: $kendo-grid-sticky-border;
-            background-color: $kendo-grid-sticky-footer-bg;
-        }
-    }
-
-    // Grouping
-    .k-grouping-row,
-    .k-group-cell {
-        @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
-    }
-
-    .k-column-list-item:hover,
-    .k-columnmenu-item:hover {
-        @include fill(
-            $kendo-list-item-hover-text,
-            $kendo-list-item-hover-bg
-        );
-    }
-    .k-column-list-item:focus,
-    .k-column-list-item.k-focus,
-    .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-focus {
-        @include box-shadow( $kendo-list-item-focus-shadow );
-    }
-
-    .k-column-list-wrapper {
-        border-color: inherit;
-    }
-
-    .k-columnmenu-item {
-        &.k-selected {
-            @include fill(
-                $kendo-list-item-selected-text,
-                $kendo-list-item-selected-bg
-            );
-        }
-    }
-
-    .k-column-menu {
-
-        .k-menu:not(.k-context-menu) {
-
-            @include fill(
-                $kendo-popup-text,
-                $kendo-popup-bg,
-                $kendo-popup-border
-            );
-
-            .k-item {
-                @include fill(
-                    $kendo-list-item-text,
-                    $kendo-list-item-bg
-                );
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $kendo-list-item-hover-text,
-                        $kendo-list-item-hover-bg
-                    );
-                }
-
-                &.k-selected {
-                    @include fill(
-                        $kendo-list-item-selected-text,
-                        $kendo-list-item-selected-bg
-                    );
-                }
-
-                &:focus,
-                &.k-focus {
-                    @include box-shadow( $kendo-list-item-focus-shadow );
-                }
-            }
-        }
-    }
-    .k-column-menu-tabbed {
-        background-color: $kendo-grid-column-menu-tabbed-bg;
-    }
-
-    .k-column-menu-group-header-text {
-        @include fill(
-            $kendo-grid-column-menu-group-header-text,
-            $kendo-grid-column-menu-group-header-bg,
-            $kendo-grid-column-menu-group-header-border
-        );
-    }
-
-    .k-check-all-wrap {
-        @include fill( $border: $kendo-popup-border );
-    }
-
-    .k-grid-norecords-template {
-        background-color: $kendo-grid-bg;
-        border-color: $kendo-grid-border;
-    }
-
-    // Row resize indicator
-    .k-resizer-wrap {
-
-        &.k-hover .k-row-resizer {
-            @include fill( $bg: $kendo-grid-row-resizer-hover-bg );
-        }
-
-        &.k-active .k-row-resizer {
-            @include fill( $bg: $kendo-grid-row-resizer-active-bg );
-        }
-
-    }
-
-    .k-columnmenu-indicators {
-        color: $kendo-grid-sorting-indicator-text;
-    }
-
-    // Grid stack layout
-    .k-grid-stack-header {
-        @include fill( $color: $kendo-grid-stack-header-color );
-    }
-
-     .k-grid-stack-cell {
-        &:focus,
-        &.k-focus {
-            outline: 1px solid $kendo-grid-stack-focus-outline;
-        }
-
-        &.k-selected {
-            @include fill( $bg: $kendo-grid-selected-bg );
-        }
-    }
-
-    // Dirty cell
-    .k-grid-stack-cell .k-dirty {
-        border-inline-start-color: rgba(0, 0, 0, 0);
-        border-inline-end-color: currentColor;
-    }
+    @include kendo-grid--theme-base();
 }
+

package/scss/grid/_variables.scss

@@ -233,9 +233,6 @@ $kendo-grid-footer-border: $kendo-table-footer-border !default;
 /// The background color of the Grid alternating rows.
 /// @group grid
 $kendo-grid-alt-bg: $kendo-table-alt-row-bg !default;
-/// The text color of the Grid alternating rows.
-/// @group grid
-$kendo-grid-alt-text: $kendo-table-alt-row-text !default;
 
 /// The background color of hovered Grid rows.
 /// @group grid
@@ -286,7 +283,7 @@ $kendo-grid-selection-aggregates-font-weight: var(--kendo-font-weight-bold) !def
 
 /// The background color of the Grid row.
 /// @group grid
-$kendo-grid-grouping-row-bg: k-color(base-subtle) !default;
+$kendo-grid-grouping-row-bg: k-color(surface) !default;
 /// The text color of the Grid row.
 /// @group grid
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
@@ -347,9 +344,6 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 /// The background color of the sticky footer in the Grid.
 /// @group grid
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
-/// The background color of the hovered sticky footer in the Grid.
-/// @group grid
-$kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
 /// The box shadow of the sticky container in the Grid.
 /// @group grid

package/scss/icons/_variables.scss

@@ -40,7 +40,10 @@ $kendo-icon-spacing: k-spacing(2) !default;
 $kendo-icon-padding: k-spacing(1) !default;
 /// The color of accent icons.
 /// @group icon
-$kendo-accent-icon-color: k-color(tertiary) !default;
+$kendo-accent-icon-color: k-color(tertiary-on-surface) !default;
+/// The color of action icons.
+/// @group icon
+$kendo-action-icon-color: k-color( primary-on-surface ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
     $kendo-icon-default-size: $kendo-icon-default-size,
@@ -54,5 +57,6 @@ $kendo-accent-icon-color: k-color(tertiary) !default;
     $kendo-icon-size-xxxl: $kendo-icon-size-xxxl,
     $kendo-icon-spacing: $kendo-icon-spacing,
     $kendo-icon-padding: $kendo-icon-padding,
-    $kendo-accent-icon-color: $kendo-accent-icon-color
+    $kendo-accent-icon-color: $kendo-accent-icon-color,
+    $kendo-action-icon-color: $kendo-action-icon-color
 );

package/scss/spreadsheet/_variables.scss

@@ -227,7 +227,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000p
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: k-color(app-surface) !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: k-color(on-app-surface) !default;
 
 /// The width of the Spreadsheet drawing handle.
 /// @group spreadsheet

package/scss/stepper/_variables.scss

@@ -183,7 +183,7 @@ $kendo-stepper-label-text: null !default;
 $kendo-stepper-label-success-text: k-color(success) !default;
 /// The error text color of the Stepper label.
 /// @group stepper
-$kendo-stepper-label-error-text: k-color(error) !default;
+$kendo-stepper-label-error-text: k-color(error-on-surface) !default;
 /// The text color of the hovered Stepper label.
 /// @group stepper
 $kendo-stepper-label-hover-text: unset !default;

package/scss/timeselector/_variables.scss

@@ -46,10 +46,10 @@ $kendo-time-selector-header-border-width: 0px !default;
 $kendo-time-selector-header-title-text: unset !default;
 /// The text color of the TimeSelector header current time indicator.
 /// @group time-selector
-$kendo-time-selector-header-time-now-text: k-color(primary) !default;
+$kendo-time-selector-header-time-now-text: k-color(primary-on-surface) !default;
 /// The text color of the hovered TimeSelector header current time indicator.
 /// @group time-selector
-$kendo-time-selector-header-time-now-hover-text: k-color(primary-hover) !default;
+$kendo-time-selector-header-time-now-hover-text: k-color(primary-on-surface) !default;
 
 /// The width of the TimeSelector list.
 /// @group time-selector
@@ -141,10 +141,10 @@ $kendo-time-list-focus-bg: color-mix(in srgb, k-color(inverse) 2%, transparent)
 
 /// The text color of the TimeSelector button.
 /// @group time-selector
-$kendo-time-selector-now-button-text: k-color(primary) !default;
+$kendo-time-selector-now-button-text: k-color(primary-on-surface) !default;
 /// The text color of the hovered TimeSelector button.
 /// @group time-selector
-$kendo-time-selector-now-button-hover-text: k-color(primary-hover) !default;
+$kendo-time-selector-now-button-hover-text: k-color(primary-on-surface) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
     $kendo-time-selector-default-size: $kendo-time-selector-default-size,

package/scss/treeview/_variables.scss

@@ -142,7 +142,7 @@ $kendo-treeview-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(on
 $kendo-treeview-loadmore-bg: transparent !default;
 /// The text color of the Load More button in the TreeView.
 /// @group treeview
-$kendo-treeview-loadmore-text: k-color(primary) !default;
+$kendo-treeview-loadmore-text: k-color(primary-on-surface) !default;
 /// The border color of the Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-border: null !default;

package/scss/upload/_variables.scss

@@ -89,14 +89,14 @@ $kendo-upload-progress-bg: k-color(info) !default;
 
 /// The success text color of the Upload.
 /// @group upload
-$kendo-upload-success-text: k-color(success) !default;
+$kendo-upload-success-text: k-color(success-on-surface) !default;
 /// The success background color of the Upload progress bar.
 /// @group upload
 $kendo-upload-success-bg: k-color(success) !default;
 
 /// The error text color of the Upload.
 /// @group upload
-$kendo-upload-error-text: k-color(error) !default;
+$kendo-upload-error-text: k-color(error-on-surface) !default;
 /// The error background color of the Upload progress bar.
 /// @group upload
 $kendo-upload-error-bg: k-color(error) !default;