npm - @progress/kendo-theme-core - Versions diffs - 13.2.0-dev.1 → 13.2.0-dev.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/package.json +2 -2
package/scss/components/bottom-navigation/_theme.scss +1 -5
package/scss/components/button/_theme.scss +4 -4
package/scss/components/floating-label/_theme.scss +1 -1
package/scss/components/forms/_theme.scss +2 -2
package/scss/components/grid/_layout.scss +6 -29
package/scss/components/grid/_theme.scss +244 -296
package/scss/components/icons/_theme.scss +4 -0
package/scss/components/icons/_variables.scss +1 -0
package/scss/components/pdf-viewer/_layout.scss +9 -0
package/scss/components/timeselector/_theme.scss +1 -1

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "13.2.0-dev.1",
+  "version": "13.2.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "0898cb4c2955f92610c5766da2c849ab3e12b11c"
+  "gitHead": "5487edc15973af51b6b452b987a8cb020d654a57"
 }

package/scss/components/bottom-navigation/_theme.scss CHANGED Viewed

@@ -50,11 +50,7 @@
                     }
                     .k-bottom-nav-item.k-selected {
-                        @if $name == "secondary" or $name == "light" {
-                            @include fill( $color: k-color(#{$name}));
-                        } @else {
-                            @include fill( $color: k-color(#{$name}) );
-                        }
+                        @include fill( $color: k-color(#{$name}-on-surface));
                     }
                 }
             }

package/scss/components/button/_theme.scss CHANGED Viewed

@@ -291,7 +291,7 @@
                     @if $name == "base" {
                         color: k-color(on-app-surface);
                     } @else {
-                        color: k-color(#{$name});
+                        color: k-color(#{$name}-on-surface);
                     }
                     // Hover
@@ -303,7 +303,7 @@
                         @if $name == "base" {
                             color: k-color(on-app-surface);
                         } @else {
-                            color: k-color(#{$name}-hover);
+                            color: k-color(#{$name}-on-surface);
                         }
                     }
@@ -328,7 +328,7 @@
                         @if $name == "base" {
                             color: k-color(on-app-surface);
                         } @else {
-                            color: k-color(#{$name}-active);
+                            color: k-color(#{$name}-on-surface);
                         }
                     }
@@ -340,7 +340,7 @@
                         @if $name == "base" {
                             color: k-color(on-app-surface);
                         } @else {
-                            color: k-color(#{$name}-active);
+                            color: k-color(#{$name}-on-surface);
                         }
                     }

package/scss/components/floating-label/_theme.scss CHANGED Viewed

@@ -24,7 +24,7 @@
         &.k-invalid > .k-floating-label,
         &.ng-invalid.ng-touched > .k-floating-label,
         &.ng-invalid.ng-dirty > .k-floating-label {
-            @include fill ( $color: k-color(error) );
+            @include fill ( $color: k-color(error-on-surface) );
         }
     }

package/scss/components/forms/_theme.scss CHANGED Viewed

@@ -23,14 +23,14 @@
         }
         .k-alert-error {
-            @include fill( $color: k-color(error) );
+            @include fill( $color: k-color(error-on-surface) );
         }
     }
     .k-form-error,
     .k-text-error,
     .k-form-field-error .k-label {
-        @include fill( $color: k-color(error) );
+        @include fill( $color: k-color(error-on-surface) );
     }
     .k-form-separator {

package/scss/components/grid/_layout.scss CHANGED Viewed

@@ -90,7 +90,6 @@
         }
         .k-table-th,
-        td,
         .k-table-td {
             border-width: 0;
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
@@ -125,7 +124,6 @@
             white-space: nowrap;
         }
-        td,
         .k-table-td {
             border-block-end-width: $kendo-grid-cell-horizontal-border-width;
             white-space: unset;
@@ -287,12 +285,10 @@
             }
         }
-        .k-grouping-row td,
         .k-grouping-row .k-table-td {
             overflow: visible;
         }
-        .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
             border-block-start-width: $kendo-grid-grouping-row-border-top;
         }
@@ -309,13 +305,11 @@
             text-decoration: none;
         }
-        .k-table .k-group-footer td,
         .k-table .k-group-footer .k-table-td {
             border-style: solid;
             border-width: $kendo-grid-group-footer-border-y 0;
         }
-        .k-group-footer .k-group-cell + td,
         .k-group-footer .k-group-cell + .k-table-td {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
@@ -352,11 +346,14 @@
             }
         }
+        .k-table-td:has(.k-pin-cell) {
+            text-overflow: clip;
+        }
         .k-hierarchy-cell + .k-grid-content-sticky {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
-        .k-detail-cell {}
-        .k-master-row {}
         .k-detail-row {
             .k-detail-cell {
@@ -414,8 +411,6 @@
         }
         // Highlighted state
-        td.k-highlighted,
-        .k-table-row.k-highlighted > td,
         .k-table-td.k-highlighted,
         .k-table-row.k-highlighted > .k-table-td {
             font-weight: $kendo-grid-highlighted-font-weight;
@@ -560,15 +555,11 @@
     .k-grid-footer {
         border-block-start-width: 1px;
-        td,
         .k-table-td {
             height: $kendo-line-height-em;
         }
     }
-    .k-grid-footer td,
-    .k-group-footer td,
-    .k-grouping-row td,
     .k-grid-footer .k-table-td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td {
@@ -594,7 +585,6 @@
     .k-filter-row {
         line-height: $kendo-form-line-height;
-        td,
         .k-table-td,
         .k-table-th {
             border-width: 0;
@@ -603,7 +593,6 @@
             white-space: nowrap;
         }
-        td:first-child,
         .k-table-td:first-child {
             border-inline-start-width: 0;
         }
@@ -640,7 +629,6 @@
         border-color: inherit;
         outline: 0;
-        .k-table-row:last-child > td,
         .k-table-row:last-child > .k-table-td {
             border-block-end-width: 0;
         }
@@ -666,13 +654,11 @@
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
-    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
         text-overflow: clip;
     }
     .k-grid .k-edit-cell,
-    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
         > input:not([type="checkbox"]):not([type="radio"]),
@@ -837,11 +823,10 @@
         visibility: hidden;
     }
-    .k-width-container  div {
+    .k-width-container div {
         height: 1px;
     }
-    .k-grid-add-row td,
     .k-grid-add-row .k-table-td {
         border-block-end-style: solid;
         border-block-end-width: 1px;
@@ -927,7 +912,6 @@
             position: static;
         }
-        .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
             border-block-end-width: $kendo-grid-border-width;
             border-block-start-width: $kendo-grid-border-width;
@@ -938,8 +922,6 @@
             z-index: k-z-index("base", 2);
         }
-        .k-grid-row-sticky td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
         .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
             z-index: k-z-index("base", 3);
@@ -966,7 +948,6 @@
     .k-grid .k-table .k-grid-footer-sticky {
         border-inline-end-width: $kendo-grid-cell-vertical-border-width;
-        &:not([style*="display: none"]) + td,
         &:not([style*="display: none"]) + .k-table-td,
         &:not([style*="display: none"]) + .k-table-th {
             border-inline-start-width: 0;
@@ -1064,7 +1045,6 @@
                     padding-inline: $_header-padding-x;
                 }
-                td,
                 .k-table-td {
                     padding-block: $_cell-padding-y;
                     padding-inline: $_cell-padding-x;
@@ -1130,7 +1110,6 @@
                     // Edit row
                     .k-edit-cell,
                     .k-command-cell,
-                    .k-grid-edit-row td,
                     .k-grid-edit-row .k-table-td {
                         padding-block: $_edit-cell-padding-y;
                         padding-inline: $_edit-cell-padding-x;
@@ -1140,7 +1119,6 @@
                 // Filter row
                 .k-filter-row {
-                    td,
                     .k-table-td,
                     .k-table-th {
                         padding-block: $_filter-cell-padding-y;
@@ -1475,7 +1453,6 @@
         table-layout: auto !important; // stylelint-disable-line declaration-no-important
         .k-table-th,
-        td,
         .k-table-td {
             white-space: nowrap !important; // stylelint-disable-line declaration-no-important
         }

package/scss/components/grid/_theme.scss CHANGED Viewed

@@ -10,162 +10,84 @@
 @mixin kendo-grid--theme-base() {
-    .k-grid-header,
-    .k-grid-header-wrap,
-    .k-grouping-header,
-    .k-grid .k-table-th,
-    .k-grid td,
-    .k-grid .k-table-td,
-    .k-grid-footer,
-    .k-grid-footer-wrap,
-    .k-grid-content-locked,
-    .k-grid-footer-locked,
-    .k-grid-header-locked,
-    .k-filter-row > .k-table-th,
-    .k-filter-row > td,
-    .k-filter-row > .k-table-td {
-        @include fill( $border: $kendo-grid-header-border );
-    }
-    .k-grid-header,
-    .k-grouping-header,
-    .k-grid-add-row,
-    .k-grid-footer {
-        @include fill(
-            $color: $kendo-grid-header-text,
-            $bg: $kendo-grid-header-bg
-        );
-    }
-    .k-grid .k-table {
-        background-color: inherit;
-    }
-    .k-grid-toolbar {
-        @include fill(
-            null,
-            null,
-            inherit,
-            null
-        );
-        @include box-shadow( none );
-    }
-    .k-grid-content {
-        // setting this background color resolves glitches in iOS
-        @include fill($bg: $kendo-grid-bg );
-    }
-    .k-group-footer td,
-    .k-grouping-row td,
-    .k-group-footer .k-table-td,
-    .k-grouping-row .k-table-td,
-    .k-table-tbody .k-group-cell {
-        @include fill(
-            $color: $kendo-grid-grouping-row-text,
-            $bg: $kendo-grid-grouping-row-bg
-        );
-    }
-    .k-grid-pinned-container {
-        background-color: $kendo-grid-header-bg;
+    .k-grid {
+        background-color: $kendo-grid-bg;
+        color: $kendo-grid-text;
         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-table {
+            background-color: inherit;
         }
-    }
-    .k-grid-sticky-container {
-        background-color: $kendo-grid-sticky-bg;
-        border-color: $kendo-grid-sticky-border;
-    }
-    .k-grouping-dropclue {
-        &::before {
-            border-color: $kendo-grid-header-text transparent transparent;
+        .k-table-th,
+        .k-table-td {
+            border-color: $kendo-grid-header-border;
         }
-        &::after {
-            background-color: $kendo-grid-header-text;
+        // Sorted column
+        .k-sorted {
+            background-color: $kendo-grid-sorted-bg;
         }
-    }
-    .k-grid {
-        @include fill( $kendo-grid-text, $kendo-grid-bg, $kendo-grid-border );
         // Alt row
-        .k-table-row.k-table-alt-row {
+        .k-table-alt-row {
             background-color: $kendo-grid-alt-bg;
         }
         // Hover state
-        .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
-        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
+        .k-table-row:is(:hover, .k-hover),
+        .k-master-row:is(:hover, .k-hover) {
             color: $kendo-grid-hover-text;
             background-color: $kendo-grid-hover-bg;
         }
+        // Focus state
+        .k-table-row:is(:focus, .k-focus),
+        .k-master-row:is(:focus, .k-focus),
+        .k-grouping-row:is(:focus, .k-focus),
+        .k-grid-pager:is(:focus, .k-focus) {
+            @include focus-indicator( $kendo-grid-focus-shadow, true );
+        }
+        .k-table-row,
+        .k-master-row,
+        .k-grouping-row {
+            > :is(:focus, .k-focus) {
+                @include focus-indicator( $kendo-grid-focus-shadow, true );
+            }
+        }
         // Selected state
-        td.k-selected,
-        .k-table-row.k-selected > td,
         .k-table-td.k-selected,
         .k-table-row.k-selected > .k-table-td {
-            @include fill( $kendo-grid-selected-text, $kendo-grid-selected-bg );
+            background-color: $kendo-grid-selected-bg;
+            color: $kendo-grid-selected-text;
         }
         // 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 );
+            background-color: $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 {
-                @include focus-indicator( $kendo-grid-focus-shadow, true );
-            }
-        }
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            color: $kendo-grid-header-text;
+            background-color: $kendo-grid-selected-highlighted-bg;
         }
+        // Grouping row
         .k-grouping-row {
             background-color: $kendo-grid-grouping-row-bg;
-            .k-icon {
+            .k-table-td {
+                color: $kendo-grid-grouping-row-text;
+                background-color: $kendo-grid-grouping-row-bg;
+            }
+            .k-icon:not(.k-action-icon) {
                 color: $kendo-grid-header-text;
             }
@@ -173,132 +95,109 @@
                 border-color: $kendo-grid-sticky-border;
                 border-block-start-color: $kendo-grid-header-border;
             }
+            &:hover .k-grid-content-sticky,
+            &.k-hover .k-grid-content-sticky {
+                background-color: $kendo-grid-sticky-hover-bg;
+            }
         }
         // Locked columns
-        .k-grid-header-locked,
-        .k-grid-content-locked,
-        .k-grid-footer-locked,
-        .k-grid-header-locked .k-table-th,
-        .k-grid-content-locked td,
-        .k-grid-content-locked .k-table-td,
-        .k-grid-footer-locked td,
-        .k-grid-footer-locked .k-table-td {
+        .k-grid-content-locked {
             border-color: $kendo-grid-sticky-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-grid-header-locked .k-table-th {
-            border-block-end-color: $kendo-grid-header-border;
+        .k-grid-sticky-container {
+            background-color: $kendo-grid-sticky-bg;
+            border-color: $kendo-grid-sticky-border;
         }
-        // Sticky columns
         .k-master-row {
             .k-grid-content-sticky {
-                @include fill( $bg: $kendo-grid-sticky-bg, $border: $kendo-grid-sticky-border );
+                background-color: $kendo-grid-sticky-bg;
+                border-color: $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-row {
-            &.k-table-alt-row {
+                // Sticky
                 .k-grid-content-sticky,
-                &.k-grid-row-sticky > .k-table-td,
-                .k-grid-row-sticky {
-                    @include fill( $bg: $kendo-grid-sticky-alt-bg );
+                .k-table-td.k-grid-content-sticky,
+                .k-grid-row-sticky,
+                &.k-grid-row-sticky > .k-table-td {
+                    background-color: $kendo-grid-sticky-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 );
-            }
+                .k-grid-row-sticky,
+                &.k-grid-row-sticky > .k-table-td {
+                    border-block-start-color: $kendo-grid-sticky-border;
+                    border-block-end-color: $kendo-grid-sticky-border;
+                }
-            // 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
+                &:is(:hover, .k-hover) {
+                    .k-grid-row-sticky,
+                    .k-table-td.k-grid-content-sticky,
+                    &.k-grid-row-sticky > .k-table-td {
+                        background-color: $kendo-grid-sticky-hover-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-selected.k-grid-row-sticky > .k-table-td,
+                &.k-selected .k-table-td.k-grid-row-sticky,
+                &.k-selected .k-grid-content-sticky,
+                .k-selected.k-table-td.k-grid-content-sticky {
+                    &::before {
+                        background-color: $kendo-grid-selected-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-highlighted.k-grid-row-sticky > .k-table-td,
+                &.k-highlighted .k-table-td.k-grid-row-sticky,
+                &.k-highlighted .k-grid-content-sticky,
+                .k-highlighted.k-table-td.k-grid-content-sticky {
+                    &::before {
+                        background-color: $kendo-grid-highlighted-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-selected.k-highlighted.k-grid-row-sticky > .k-table-td,
+                &.k-selected.k-highlighted .k-table-td.k-grid-row-sticky,
+                &.k-selected.k-highlighted .k-grid-content-sticky,
+                &.k-selected .k-table-td.k-grid-content-sticky.k-highlighted,
+                &.k-highlighted .k-table-td.k-grid-content-sticky.k-selected,
+                .k-table-td.k-grid-content-sticky.k-selected.k-highlighted {
+                    &::before {
+                        background-color: $kendo-grid-selected-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-table-alt-row {
+                .k-grid-content-sticky,
+                .k-table-td.k-grid-content-sticky,
+                &.k-grid-row-sticky > .k-table-td,
+                .k-grid-row-sticky {
+                    background-color: $kendo-grid-sticky-alt-bg;
                 }
             }
         }
-    }
-    col.k-sorted,
-    .k-table-th.k-sorted {
-        background-color: $kendo-grid-sorted-bg;
     }
     // Grid header
     .k-grid-header {
+        border-color: $kendo-grid-header-border;
+        color: $kendo-grid-header-text;
+        background-color: $kendo-grid-header-bg;
         .k-sort-icon,
         .k-sort-order {
@@ -309,6 +208,9 @@
         .k-header-column-menu,
         .k-grid-header-menu,
         .k-hierarchy-cell .k-icon {
+            color: $kendo-grid-header-text;
             &:hover {
                 color: $kendo-button-hover-text;
                 background-color: $kendo-button-hover-bg;
@@ -323,8 +225,11 @@
             }
         }
+        .k-grid-header-locked {
+            border-color: $kendo-grid-sticky-header-border;
+        }
         .k-table-th.k-grid-header-sticky,
-        td.k-grid-header-sticky,
         .k-table-td.k-grid-header-sticky,
         .k-grid-header-sticky.k-sorted {
             @include fill(
@@ -335,117 +240,188 @@
             border-inline-end-color: $kendo-grid-sticky-header-border;
             border-inline-start-color: $kendo-grid-sticky-header-border;
         }
+    }
+    .k-grid-header-wrap {
+        border-color: $kendo-grid-header-border;
     }
     // Grid footer
     .k-grid-footer {
-        @include fill(
-            $kendo-grid-footer-text,
-            $kendo-grid-footer-bg,
-            $kendo-grid-footer-border
-        );
+        border-color: $kendo-grid-footer-border;
+        color: $kendo-grid-footer-text;
+        background-color: $kendo-grid-footer-bg;
         .k-grid-footer-sticky {
             border-inline-start-color: $kendo-grid-sticky-border;
             border-inline-end-color: $kendo-grid-sticky-border;
             background-color: $kendo-grid-sticky-footer-bg;
         }
+        .k-grid-footer-locked {
+            border-color: $kendo-grid-sticky-border;
+        }
     }
-    // Selection Aggregates
-    .k-selection-aggregates {
+    .k-grid-footer-wrap {
+        border-color: $kendo-grid-footer-border;
+    }
+    // Grid toolbar
+    .k-grid-toolbar {
+        border-color: inherit;
+        @include box-shadow( none );
+    }
+    // Grid content
+    .k-grid-content {
+        // setting this background color resolves glitches in iOS
+        @include fill($bg: $kendo-grid-bg );
+    }
+    // Grouping
+    .k-grouping-header,
+    .k-grid-add-row {
+        color: $kendo-grid-header-text;
+        background-color: $kendo-grid-header-bg;
+        border-color: $kendo-grid-header-border;
+    }
+    .k-group-footer .k-table-td,
+    .k-table-tbody .k-group-cell {
         @include fill(
-            $kendo-grid-selection-aggregates-text,
-            $kendo-grid-selection-aggregates-bg,
-            $kendo-grid-selection-aggregates-border
+            $color: $kendo-grid-grouping-row-text,
+            $bg: $kendo-grid-grouping-row-bg
         );
     }
-    .k-grouping-row {
-        .k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-header-bg );
+    .k-grouping-dropclue {
+        &::before {
+            border-color: $kendo-grid-header-text transparent transparent;
         }
-        &:hover .k-grid-content-sticky,
-        &.k-hover .k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-hover-bg );
+        &::after {
+            background-color: $kendo-grid-header-text;
         }
     }
-    .k-column-list-item:hover,
-    .k-columnmenu-item:hover {
-        @include fill(
-            $kendo-list-item-hover-text,
-            $kendo-list-item-hover-bg
-        );
+    // Filtering
+    .k-filter-row > .k-table-th,
+    .k-filter-row > .k-table-td {
+        border-color: $kendo-grid-header-border;
+    }
+    // Pinned rows
+    .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;
+        }
+    }
+    // Selection Aggregates
+    .k-selection-aggregates {
+        color: $kendo-grid-selection-aggregates-text;
+        background-color: $kendo-grid-selection-aggregates-bg;
+        border-color: $kendo-grid-selection-aggregates-border;
     }
-    .k-column-list-item:focus,
-    .k-column-list-item.k-focus,
-    .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-focus {
-        @include focus-indicator( $kendo-list-item-focus-shadow, true );
+    // Grid stack layout
+    .k-grid-stack-header {
+        color: $kendo-grid-stack-header-color;
     }
+    .k-grid-stack-cell {
+        &:focus,
+        &.k-focus {
+            outline: 1px solid $kendo-grid-stack-focus-outline;
+        }
+        &.k-selected {
+            background-color: $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;
+    }
+    // Column menu
+    .k-column-list-item,
     .k-columnmenu-item {
+        &:hover {
+            color: $kendo-list-item-hover-text;
+            background-color: $kendo-list-item-hover-bg;
+        }
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-list-item-focus-shadow, true );
+        }
         &.k-selected {
-            @include fill(
-                $kendo-list-item-selected-text,
-                $kendo-list-item-selected-bg
-            );
+            color: $kendo-list-item-selected-text;
+            background-color: $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
-            );
+            color: $kendo-popup-text;
+            background-color: $kendo-popup-bg;
+            border-color: $kendo-popup-border;
             .k-item {
-                @include fill(
-                    $kendo-list-item-text,
-                    $kendo-list-item-bg
-                );
+                color: $kendo-list-item-text;
+                background-color: $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
-                    );
+                    color: $kendo-list-item-hover-text;
+                    background-color: $kendo-list-item-hover-bg;
                 }
                 &:focus,
                 &.k-focus {
                     @include focus-indicator( $kendo-list-item-focus-shadow, true );
                 }
+                &.k-selected {
+                    color: $kendo-list-item-selected-text;
+                    background-color: $kendo-list-item-selected-bg;
+                }
             }
         }
     }
     .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
-        );
+        color: $kendo-grid-column-menu-group-header-text;
+        background-color: $kendo-grid-column-menu-group-header-bg;
+        border-color: $kendo-grid-column-menu-group-header-border;
+    }
+    .k-columnmenu-indicators {
+        color: $kendo-grid-sorting-indicator-text;
     }
     .k-check-all-wrap {
-        @include fill( $border: $kendo-popup-border );
+        border-color: $kendo-popup-border;
     }
     .k-grid-norecords-template {
@@ -455,7 +431,6 @@
     // Row resizing
     .k-resizer-wrap {
         &.k-hover .k-row-resizer {
             @include fill( $bg: $kendo-grid-row-resizer-hover-bg );
         }
@@ -463,32 +438,5 @@
         &.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;
     }
 }

package/scss/components/icons/_theme.scss CHANGED Viewed

@@ -4,4 +4,8 @@
     .k-accent-icon {
         color: $kendo-accent-icon-color;
     }
+    .k-action-icon {
+        color: $kendo-action-icon-color;
+    }
 }

package/scss/components/icons/_variables.scss CHANGED Viewed

@@ -11,3 +11,4 @@ $kendo-icon-spacing: null !default;
 $kendo-icon-padding: null !default;
 $kendo-accent-icon-color: null !default;
+$kendo-action-icon-color: null !default;

package/scss/components/pdf-viewer/_layout.scss CHANGED Viewed

@@ -106,6 +106,9 @@
                 inset-inline-start: 0;
                 opacity: .2;
                 overflow: hidden;
+                --min-font-size: 1;
+                --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+                --min-font-size-inv: calc(1 / var(--min-font-size));
                 .k-marked-content > span,
                 > span, br {
@@ -115,6 +118,12 @@
                     color: transparent;
                     white-space: pre;
                     cursor: text;
+                    z-index: k-z-index("base", 1);
+                    --font-height: 0;
+                    font-size: calc(var(--text-scale-factor) * var(--font-height));
+                    --scale-x: 1;
+                    --rotate: 0deg;
+                    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
                 }
                 .k-marked-content {

package/scss/components/timeselector/_theme.scss CHANGED Viewed

@@ -60,7 +60,7 @@
         }
         .k-item:hover {
-            color: k-color(primary);
+            color: k-color(primary-on-surface);
         }
     }