@progress/kendo-theme-material 6.7.1-dev.1 → 6.8.0-dev.1

package/dist/all.scss

@@ -24276,6 +24276,10 @@ $kendo-toolbar-input-width: 10em !default;
 /// @group toolbar
 $kendo-toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
 
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
 /// The sizes map for the Toolbar.
 /// @group toolbar
 $kendo-toolbar-sizes: (
@@ -24549,6 +24553,16 @@ $kendo-toolbar-sizes: (
         }
     }
 
+    // Flat Toolbar
+    .k-toolbar.k-toolbar-flat {
+        border-width: $kendo-toolbar-flat-border-width 0;
+        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+        border-bottom-color: inherit;
+        color: inherit;
+        background: none !important;  // stylelint-disable-line declaration-no-important
+        box-shadow: none;
+    }
+
 }
 
 
@@ -49646,6 +49660,72 @@ $kendo-spreadsheet-bg: $kendo-component-bg !default;
 $kendo-spreadsheet-text: $kendo-component-text !default;
 $kendo-spreadsheet-border: $kendo-component-border !default;
 
+$kendo-spreadsheet-header-bg: $kendo-component-bg !default;
+$kendo-spreadsheet-header-text: $kendo-component-text !default;
+$kendo-spreadsheet-header-border: $kendo-component-border !default;
+$kendo-spreadsheet-header-gradient: null !default;
+
+$kendo-spreadsheet-table-header-bg: material-color( gray, 100 ) !default;
+$kendo-spreadsheet-table-header-text: $kendo-component-header-text !default;
+$kendo-spreadsheet-table-header-border: $kendo-component-header-border !default;
+$kendo-spreadsheet-table-header-gradient: null !default;
+
+$kendo-spreadsheet-action-bar-border-width: 1px !default;
+$kendo-spreadsheet-action-bar-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-action-bar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-font-size !default;
+$kendo-spreadsheet-action-bar-font-family: Arial, Verdana, sans-serif !default;
+$kendo-spreadsheet-action-bar-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+
+$kendo-spreadsheet-formula-bar-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
+$kendo-spreadsheet-formula-input-padding-x: $kendo-input-padding-x !default;
+$kendo-spreadsheet-formula-input-padding-y: $kendo-input-padding-y !default;
+$kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
+
+$kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
+$kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
+
+$kendo-spreadsheet-selection-bg: rgba( $kendo-color-primary, .25 ) !default;
+$kendo-spreadsheet-selection-text: null !default;
+$kendo-spreadsheet-selection-border: $kendo-color-primary !default;
+$kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-color-primary !default;
+
+$kendo-spreadsheet-single-selection-bg: $kendo-color-primary !default;
+$kendo-spreadsheet-single-selection-text: null !default;
+$kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
+
+$kendo-spreadsheet-partial-selection-bg: rgba( black, .04 ) !default;
+
+$kendo-spreadsheet-active-cell-bg: $kendo-component-bg !default;
+$kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-color-primary !default;
+
+$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-color-primary, .25 ) !default;
+$kendo-spreadsheet-auto-fill-text: null !default;
+$kendo-spreadsheet-auto-fill-border: $kendo-color-primary !default;
+$kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-color-primary !default;
+$kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-component-bg, .5 ) !default;
+
+$kendo-spreadsheet-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;
+
+$kendo-spreadsheet-cell-editor-line-height: 20px !default;
+$kendo-spreadsheet-cell-editor-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-cell-editor-padding-y: 0px !default;
+$kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-bg !default;
+$kendo-spreadsheet-cell-editor-text: $kendo-spreadsheet-text !default;
+$kendo-spreadsheet-cell-editor-border: null !default;
+
+$kendo-spreadsheet-resize-handle-bg: $kendo-color-primary !default;
+
+$kendo-spreadsheet-cell-comment-border: $kendo-color-primary !default;
+
+$kendo-spreadsheet-cell-dirty-border: $kendo-color-error !default;
+
+$kendo-spreadsheet-sheets-bar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-bar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-bar-border-width: 1px !default;
+
 $kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
 $kendo-spreadsheet-insert-image-dialog-border-width: 2px !default;
 $kendo-spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
@@ -49707,98 +49787,41 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
             top: 100%;
             transform: translateY( -100% );
         }
-
-
-    }
-
-
-    // Header
-    .k-spreadsheet .k-tabstrip-wrapper {
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: inherit;
-        position: relative;
     }
 
-
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {
-        padding: $kendo-toolbar-md-padding-y;
-        display: inline-flex;
-        flex-direction: row;
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-    }
-
-
-    // Tabstrip
-    .k-spreadsheet-tabstrip {
-        padding-top: $kendo-toolbar-md-padding-y;
-        position: relative;
-        z-index: 1;
-    }
-    .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper {
-        margin: 0;
-    }
-    .k-spreadsheet-tabstrip .k-loading {
-        // TODO: better name
-        display: none;
-    }
-    .k-spreadsheet-tabstrip .k-content,
-    .k-spreadsheet-tabstrip .k-tabstrip-content {
-        @include border-radius( 0 );
-        padding: 0;
-        border-width: 0;
-        overflow: hidden;
-    }
-
-
     // Toolbar
     .k-spreadsheet-toolbar {
         border-width: 0;
-
-
-        // Tools
-        [data-tool="backgroundColor"],
-        [data-tool="textColor"],
-        [data-tool="borders"],
-        [data-tool="alignment"],
-        [data-tool="merge"],
-        [data-tool="freeze"] {
-            width: auto;
-            min-width: calc( #{$kendo-form-line-height} * 1em );
-        }
-
-        .k-color-picker {
-            width: min-content;
-        }
     }
 
-
     // Action bar
     .k-spreadsheet-action-bar {
-        border-width: 0 0 1px;
+        border-width: 0 0 $kendo-spreadsheet-action-bar-border-width;
         border-style: solid;
         border-color: inherit;
-        font-size: 12px;
-        font-family: Arial, Verdana, sans-serif;
+        padding-block: $kendo-spreadsheet-action-bar-padding-y;
+        padding-inline: $kendo-spreadsheet-action-bar-padding-x;
+        font-size: $kendo-spreadsheet-action-bar-font-size;
+        font-family: $kendo-spreadsheet-action-bar-font-family;
         position: relative;
         display: flex;
         flex-direction: row;
+        gap: $kendo-spreadsheet-action-bar-spacing;
     }
+    // Todo check
     .k-spreadsheet-name-editor {
         width: 10em;
     }
     .k-spreadsheet-formula-bar {
+        min-width: 0px;
         border-color: inherit;
         display: flex;
         flex-direction: row;
         align-items: center;
         flex: 1;
-        gap: $kendo-padding-md-y;
+        gap: $kendo-spreadsheet-formula-bar-gap;
 
+        // move to legacy selector
         > .k-icon,
         > .k-svg-icon {
             padding-block: 0;
@@ -49810,6 +49833,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
             flex-shrink: 0;
         }
 
+        // add k-hidden from component
         .k-tooltip,
         .k-group-header,
         .k-list-scroller {
@@ -49817,9 +49841,13 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
 
         .k-spreadsheet-formula-input {
-            padding-block: $kendo-input-padding-y;
-            padding-inline: $kendo-input-padding-x;
-            line-height: $kendo-input-line-height;
+            padding-block: $kendo-spreadsheet-formula-input-padding-y;
+            padding-inline: $kendo-spreadsheet-formula-input-padding-x;
+            line-height: $kendo-spreadsheet-formula-input-line-height;
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
 
             &.k-spreadsheet-array-formula {
                 &::before {
@@ -49870,27 +49898,36 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        padding-block: 0;
-        padding-inline: 3px;
-        line-height: 20px;
+        padding-block: $kendo-spreadsheet-cell-editor-padding-y;
+        padding-inline: $kendo-spreadsheet-cell-editor-padding-x;
+        line-height: $kendo-spreadsheet-cell-editor-line-height;
         display: none;
         overflow: hidden;
         position: absolute;
-        z-index: 2000;
+        z-index: 100;
     }
 
 
     // Sheets bar
     .k-spreadsheet-sheets-bar {
-        padding: 0 0 k-map-get( $kendo-spacing, 1 ) k-map-get( $kendo-spacing, 1 );
-        border-width: 1px 0 0;
+        padding-block-end: $kendo-spreadsheet-sheets-bar-padding-y;
+        padding-inline: $kendo-spreadsheet-sheets-bar-padding-x;
+        border-width: $kendo-spreadsheet-sheets-bar-border-width 0 0;
         border-style: solid;
         border-color: inherit;
         display: flex;
         flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
         position: relative;
     }
+
+    .k-spreadsheet-sheets {
+        flex: 1 1 auto;
+    }
+    .k-spreadsheet-sheets .k-tabstrip-items-wrapper {
+        border-width: 0;
+    }
+
     .k-spreadsheet-sheets-bar-add {
         align-self: center;
 
@@ -49900,6 +49937,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
             background: none;
         }
     }
+
     .k-spreadsheet-sheets-items {
         flex: 1;
         overflow: hidden;
@@ -49932,8 +49970,8 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
     .k-spreadsheet-view {
         height: auto !important; // stylelint-disable-line declaration-no-important
         border-color: inherit;
-        font-size: 12px;
-        font-family: Arial, Verdana, Sans-serif;
+        font-size: $kendo-spreadsheet-view-font-size;
+        font-family: $kendo-spreadsheet-view-font-family;
         flex: 1;
         position: relative;
         overflow: hidden;
@@ -49945,8 +49983,8 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
     }
 
     .k-spreadsheet-fixed-container {
-        width: 100%;
-        height: 100%;
+        width: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) );
+        height: calc( 100% - var(--kendo-scrollbar-width, #{$kendo-scrollbar-width}) );
         border-color: inherit;
         box-sizing: border-box;
         user-select: none;
@@ -49954,6 +49992,8 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         z-index: 2;
         overflow: hidden;
     }
+
+    // todo check if used - probably not
     .k-spreadsheet-overflow {
         position: absolute;
         top: 0;
@@ -49963,6 +50003,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         overflow: hidden;
         border-color: inherit;
     }
+
     .k-spreadsheet-pane {
         padding: 0 1px 0 0;
         border-width: 2px 0 0 2px;
@@ -49977,6 +50018,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
 
     }
+
     .k-spreadsheet-top-corner {
         border-width: 0 1px 1px 0;
         border-style: solid;
@@ -50000,6 +50042,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
             border-bottom-color: inherit;
         }
     }
+
     .k-spreadsheet-scroller {
         width: 100%;
         height: 100%;
@@ -50100,14 +50143,15 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
 
     // Cells
     .k-spreadsheet-cell {
-        padding: 1px;
+        padding-block: $kendo-spreadsheet-cell-padding-y;
+        padding-inline: $kendo-spreadsheet-cell-padding-x;
         box-sizing: border-box;
         position: absolute;
         line-height: normal;
         white-space: pre;
         overflow: hidden;
     }
-    .k-spreadsheet-merged-cells-wrapers {
+    .k-spreadsheet-merged-cells-wrapper {
         position: relative;
     }
 
@@ -50127,8 +50171,8 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         position: absolute;
     }
     .k-spreadsheet .k-spreadsheet-selection-highlight {
-        border-width: 1px;
-        border-style: solid;
+        border-width: 2px;
+        border-style: dashed;
         box-sizing: border-box;
         position: absolute;
     }
@@ -50173,7 +50217,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         position: absolute;
         bottom: 0;
         right: 0;
-        z-index: 100;
+        z-index: 300;
         cursor: crosshair;
     }
 
@@ -50212,35 +50256,34 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         display: block;
         position: absolute;
         top: 0;
-        right: 0;
-        left: auto;
+        inset-inline-end: 0;
+        inset-inline-start: auto;
         border-width: 3px;
         border-style: solid;
     }
 
+
     // Validation
-    .k-dirty {
-        left: 0;
-        right: auto;
+    .k-spreadsheet-cell .k-dirty {
+        inset-inline-start: 0;
+        inset-inline-end: auto;
     }
 
 
-    // Spreadsheet filter
-    $kendo-filter-menu-padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
-
     // Filter button
     .k-spreadsheet .k-filter-wrapper {
         position: relative;
         z-index: 50;
     }
     .k-spreadsheet .k-filter-range {
-        border-width: 1px;
+        border-width: 2px;
         border-style: solid;
         position: absolute;
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
         @include border-radius( $kendo-border-radius );
+        padding: $kendo-padding-y;
         line-height: 1;
         position: absolute;
         cursor: pointer;
@@ -50265,7 +50308,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
                 color: inherit;
             }
             .k-link {
-                padding-left: $kendo-filter-menu-padding-left;
+                padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
             }
             .k-icon,
             .k-svg-icon {
@@ -50333,8 +50376,6 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
-
-
     // Spreadsheet toolbar
     .k-spreadsheet-popup {
         padding: 0;
@@ -50361,13 +50402,6 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
-    .k-spreadsheet-format-popup {
-        .k-item { justify-content: space-between; }
-        .k-spreadsheet-sample { order: 1; }
-    }
-    .k-spreadsheet-sample {
-        opacity: .7;
-    }
 
     .k-spreadsheet-clipboard,
     .k-spreadsheet-clipboard-paste {
@@ -50453,7 +50487,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         height: auto;
     }
 
-    // Insert image dialog
+    // Insert image dialog - Delete after new rendering adoption R3 23
     .k-spreadsheet-insert-image-dialog {
         @include border-radius( $kendo-spreadsheet-insert-image-dialog-preview-border-radius );
         border-style: $kendo-spreadsheet-insert-image-dialog-border-style;
@@ -50557,21 +50591,67 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
     }
 
 
+    // Legacy styles
+    .k-spreadsheet-legacy {
+        .k-spreadsheet,
+        .k-spreadsheet-action-bar,
+        .k-spreadsheet-view {
+            font-size: 12px;
+        }
 
-    // RTL
-    .k-rtl .k-spreadsheet,
-    .k-spreadsheet[dir="rtl"] {
+        .k-spreadsheet-cell {
+            padding: 1px;
+        }
 
-        .k-dirty {
-            right: 0;
-            left: auto;
+        .k-spreadsheet-filter {
+            padding: 0px;
         }
 
-        .k-spreadsheet-has-comment::after {
-            left: 0;
-            right: auto;
+        .k-filter-range {
+            border-width: 1px;
         }
 
+        .k-spreadsheet .k-spreadsheet-selection-highlight {
+            border-width: 1px;
+            border-style: solid;
+        }
+    }
+
+    // Tabstrip
+    .k-spreadsheet .k-tabstrip-wrapper {
+        border-width: 0 0 1px;
+        border-style: solid;
+        border-color: inherit;
+        position: relative;
+    }
+
+    .k-spreadsheet-quick-access-toolbar {
+        padding: $kendo-toolbar-md-padding-y;
+        display: inline-flex;
+        flex-direction: row;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+    }
+
+    .k-spreadsheet-tabstrip {
+        padding-top: $kendo-toolbar-md-padding-y;
+        position: relative;
+        z-index: 1;
+    }
+    .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper {
+        margin: 0;
+    }
+    .k-spreadsheet-tabstrip .k-loading {
+        display: none;
+    }
+    .k-spreadsheet-tabstrip .k-content,
+    .k-spreadsheet-tabstrip .k-tabstrip-content {
+        @include border-radius( 0 );
+        padding: 0;
+        border-width: 0;
+        overflow: hidden;
     }
 
 }
@@ -50601,7 +50681,6 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
 
     }
 
-
     // Spreadsheet tabstrip
     .k-spreadsheet-tabstrip {
         padding-top: 0;
@@ -50611,10 +50690,8 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
-
     // Spreadsheet footer
     .k-spreadsheet-sheets-bar {
-        padding: 0;
 
         .k-spreadsheet-sheets-bar-add {
             margin: k-map-get( $kendo-spacing, 1 );
@@ -50626,7 +50703,6 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
 
     }
 
-
     // Selection
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
@@ -50650,114 +50726,104 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         );
     }
 
-
     // Header
-    .k-spreadsheet .k-tabstrip-wrapper {}
-
-
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {}
-
+    .k-spreadsheet-header {
+        @include fill(
+            $kendo-spreadsheet-header-text,
+            $kendo-spreadsheet-header-bg,
+            $kendo-spreadsheet-header-border,
+            $kendo-spreadsheet-header-gradient
+        );
+    }
 
-    // Row / column headers
+    // Row / Column Headers
     .k-spreadsheet-top-corner,
     .k-spreadsheet-row-header,
     .k-spreadsheet-column-header {
         @include fill(
-            $kendo-component-header-text,
-            $kendo-component-header-bg,
-            $kendo-component-header-border,
-            $kendo-component-header-gradient
+            $kendo-spreadsheet-table-header-text,
+            $kendo-spreadsheet-table-header-bg,
+            $kendo-spreadsheet-table-header-border,
+            $kendo-spreadsheet-table-header-gradient
         );
     }
 
-
-    // Formula bar
-    .k-spreadsheet-formula-list {}
-    .k-syntax-ref { color: #ff8822; }
-    .k-syntax-num { color: #0099ff; }
-    .k-syntax-str { color: #38b714; }
-    .k-syntax-error { color: red; }
-    .k-syntax-bool { color: #a9169c; }
-    .k-syntax-paren-match { background-color: #caf200; }
-
-
     // Cell editor
     .k-spreadsheet-cell-editor {
-        color: $kendo-spreadsheet-text;
-        background-color: $kendo-spreadsheet-bg;
+        @include fill(
+            $kendo-spreadsheet-cell-editor-text,
+            $kendo-spreadsheet-cell-editor-bg,
+            $kendo-spreadsheet-cell-editor-border
+        )
     }
 
-
     // Cells
     .k-spreadsheet-merged-cell {
-        background-color: $kendo-spreadsheet-bg;
+        @include fill( $bg: $kendo-spreadsheet-bg );
     }
     .k-spreadsheet-disabled-mask {
-        background-color: $kendo-spreadsheet-bg;
+        @include fill( $bg: $kendo-spreadsheet-bg );
     }
 
     // Selection
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
-        // TODO: consider extracting variables
-        background-color: rgba( $kendo-selected-bg, .25 );
+        @include fill( $bg: $kendo-spreadsheet-partial-selection-bg );
     }
     .k-spreadsheet-selection {
-        border-color: $kendo-selected-bg;
-        background-color: rgba( $kendo-selected-bg, .25 );
-        box-shadow: inset 0 0 0 1px $kendo-selected-bg;
+        @include fill(
+            $kendo-spreadsheet-selection-text,
+            $kendo-spreadsheet-selection-bg,
+            $kendo-spreadsheet-selection-border
+        );
+        @include box-shadow( $kendo-spreadsheet-selection-shadow );
+    }
+    .k-spreadsheet-selection-highlight {
+        @include fill( $border: $kendo-spreadsheet-selection-border );
     }
     .k-spreadsheet .k-single-selection::after {
-        border-color: $kendo-spreadsheet-bg;
-        background-color: $kendo-selected-bg;
+        @include fill(
+            $kendo-spreadsheet-single-selection-text,
+            $kendo-spreadsheet-single-selection-bg,
+            $kendo-spreadsheet-single-selection-border
+        )
     }
     .k-spreadsheet-active-cell {
-        box-shadow: inset 0 0 0 1px $kendo-selected-bg;
-        background-color: $kendo-spreadsheet-bg;
-
-        &.k-right {
-            box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px 0 0 1px $kendo-selected-bg;
-        }
-
-        &.k-bottom {
-            box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset 0 -1px 0 1px $kendo-selected-bg;
-        }
-
-        &.k-bottom.k-right {
-            box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px -1px 0 1px $kendo-selected-bg;
-        }
+        @include fill ( $bg: $kendo-spreadsheet-active-cell-bg );
+        @include box-shadow( $kendo-spreadsheet-active-cell-shadow );
     }
 
     .k-spreadsheet .k-auto-fill {
-        border-color: $kendo-selected-bg;
-        background-color: rgba( $kendo-selected-bg, .25 );
-        box-shadow: inset 0 0 0 1px $kendo-selected-bg;
+        @include fill(
+            $kendo-spreadsheet-auto-fill-text,
+            $kendo-spreadsheet-auto-fill-bg,
+            $kendo-spreadsheet-auto-fill-border
+        );
+        @include box-shadow( $kendo-spreadsheet-auto-fill-shadow );
     }
     .k-spreadsheet .k-auto-fill-punch {
-        background-color: rgba( $kendo-spreadsheet-bg, .5 );
+        @include fill( $bg: $kendo-spreadsheet-auto-fill-punch-bg );
     }
 
-
     // Resize handle
     .k-spreadsheet .k-resize-handle,
     .k-spreadsheet .k-resize-hint-handle,
     .k-spreadsheet .k-resize-hint-marker {
-        background-color: $kendo-color-primary;
+        @include fill( $bg: $kendo-spreadsheet-resize-handle-bg );
     }
 
     // Comments
     .k-spreadsheet-has-comment::after {
-        border-color: $kendo-color-primary $kendo-color-primary transparent transparent;
+        border-block-color: $kendo-spreadsheet-cell-comment-border transparent;
+        border-inline-color: transparent $kendo-spreadsheet-cell-comment-border;
     }
 
     // Validation
-    .k-dirty {
-        border-color: $kendo-color-error transparent transparent $kendo-color-error;
+    .k-spreadsheet-cell .k-dirty {
+        border-block-color: $kendo-spreadsheet-cell-dirty-border transparent;
+        border-inline-color: $kendo-spreadsheet-cell-dirty-border transparent;
     }
 
-
-
     // Filter button
     .k-spreadsheet .k-filter-range {
         border-color: $kendo-color-primary;
@@ -50790,10 +50856,8 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
-
-    // Filter menu
+    // Filter menu legacy - delete after new rendering adoption R3 23
     .k-spreadsheet-filter-menu {
-
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
 
@@ -50815,32 +50879,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
-
-
-    .k-spreadsheet-popup {
-
-        // Buttons
-        .k-button {}
-
-        .k-button:hover,
-        .k-button.k-hover {
-            @include fill(
-                $kendo-list-item-hover-text,
-                $kendo-list-item-hover-bg
-            );
-        }
-        .k-button:active,
-        .k-button.k-active,
-        .k-button.k-selected {
-            @include fill(
-                $kendo-list-item-selected-text,
-                $kendo-list-item-selected-bg
-            );
-        }
-    }
-
-
-
+    // Delete after new rendering adoption R3 23
     .k-spreadsheet-insert-image-dialog {
         border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;
 
@@ -50857,6 +50896,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
+    // Drawing
     .k-spreadsheet-drawing {
         &.k-spreadsheet-active-drawing {
             outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
@@ -50872,26 +50912,17 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         background: $kendo-spreadsheet-drawing-anchor-bg;
     }
 
-
-
-    .k-rtl .k-spreadsheet,
-    .k-spreadsheet[dir="rtl"],
-    [dir="rtl"] .k-spreadsheet {
-
-        .k-spreadsheet-has-comment::after {
-            border-color: $kendo-color-primary transparent transparent $kendo-color-primary;
-        }
-
-        .k-dirty {
-            border-color: $kendo-color-error $kendo-color-error transparent transparent;
-        }
-
-    }
+    // Formula bar
+    .k-spreadsheet-formula-list {}
+    .k-syntax-ref { color: #ff8822; }
+    .k-syntax-num { color: #0099ff; }
+    .k-syntax-str { color: #38b714; }
+    .k-syntax-error { color: red; }
+    .k-syntax-bool { color: #a9169c; }
+    .k-syntax-paren-match { background-color: #caf200; }
 
 }
 
-
-
 @mixin kendo-spreadsheet--theme() {
     @include kendo-spreadsheet--theme-base();
 }
@@ -50900,16 +50931,7 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
 
 
 @mixin kendo-spreadsheet--theme() {
-
-    // Spreadsheet
-    .k-spreadsheet {
-        @include fill(
-            $kendo-spreadsheet-text,
-            $kendo-spreadsheet-bg,
-            $kendo-spreadsheet-border
-        );
-    }
-
+    @include kendo-spreadsheet--theme-base();
 
     // Spreadsheet header
     .k-spreadsheet > .k-tabstrip-wrapper {
@@ -50926,241 +50948,18 @@ $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
-
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
         color: $kendo-color-primary-contrast;
         background-color: $kendo-color-primary;
     }
 
-
-    // Spreadsheet footer
-    .k-spreadsheet-sheets-bar {
-        @include fill(
-            $kendo-toolbar-text,
-            k-try-shade( $kendo-toolbar-bg, .5 ),
-            inherit,
-            $kendo-toolbar-gradient
-        );
-
-        .k-tabstrip-items .k-item.k-active {
-            border-color: $kendo-color-secondary;
-        }
-    }
-
-
-    // Row / column headers
-    .k-spreadsheet-top-corner,
-    .k-spreadsheet-row-header,
-    .k-spreadsheet-column-header {
-        border-color: $kendo-component-border;
-        background-color: k-try-shade( $kendo-component-bg, 1 );
-    }
-
-
-    // Formula bar
-    .k-spreadsheet-formula-list {}
-    .k-syntax-ref { color: #ff8822; }
-    .k-syntax-num { color: #0099ff; }
-    .k-syntax-str { color: #38b714; }
-    .k-syntax-error { color: red; }
-    .k-syntax-bool { color: #a9169c; }
-    .k-syntax-paren-match { background-color: #caf200; }
-
-
-    // Cell editor
-    .k-spreadsheet-cell-editor {
-        color: $kendo-component-text;
-        background-color: $kendo-component-bg;
-    }
-
-
-    // Cells
-    .k-spreadsheet-merged-cell {
-        background-color: $kendo-component-bg;
-    }
-
-
     // Selection
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
-        background-color: rgba( black, .04 );
-
         &::after { border-color: $kendo-color-secondary; }
     }
 
-
-    .k-spreadsheet-selection {
-        border-color: $kendo-color-primary;
-        background-color: rgba( $kendo-color-primary, .25 );
-        box-shadow: inset 0 0 0 1px $kendo-color-primary;
-    }
-
-    .k-spreadsheet .k-single-selection::after {
-        border-color: $kendo-component-bg;
-        background-color: $kendo-color-primary;
-    }
-    .k-spreadsheet-active-cell {
-        box-shadow: inset 0 0 0 1px $kendo-color-primary;
-        background-color: $kendo-component-bg;
-
-        &.k-right {
-            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset -1px 0 0 1px $kendo-color-primary;
-        }
-
-        &.k-bottom {
-            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset 0 -1px 0 1px $kendo-color-primary;
-        }
-
-        &.k-bottom.k-right {
-            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset -1px -1px 0 1px $kendo-color-primary;
-        }
-    }
-
-    .k-spreadsheet .k-auto-fill {
-        border-color: $kendo-color-primary;
-        background-color: rgba( $kendo-color-primary, .25 );
-        box-shadow: inset 0 0 0 1px $kendo-color-primary;
-    }
-    .k-spreadsheet .k-auto-fill-punch {
-        background-color: rgba( $kendo-component-bg, .5 );
-    }
-
-
-    // Resize handle
-    .k-spreadsheet .k-resize-handle,
-    .k-spreadsheet .k-resize-hint-handle,
-    .k-spreadsheet .k-resize-hint-marker {
-        background-color: $kendo-color-primary;
-    }
-
-    // Comments
-    .k-spreadsheet-has-comment::after {
-        border-color: $kendo-color-primary $kendo-color-primary transparent transparent;
-    }
-
-    // Validation
-    .k-dirty {
-        border-color: $kendo-color-error transparent transparent $kendo-color-error;
-    }
-
-
-    // Filter button
-    .k-spreadsheet .k-filter-range {
-        border-color: $kendo-color-primary;
-    }
-    .k-spreadsheet-filter {
-        @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
-        );
-        box-shadow: inset 0 0 0 1px $kendo-button-border;
-
-        &.k-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-            @include box-shadow( $kendo-button-active-shadow );
-        }
-
-        &:hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-        }
-    }
-
-
-    // Filter menu
-    .k-spreadsheet-filter-menu {
-
-        .k-spreadsheet-value-treeview-wrapper {
-            @include fill(
-                $kendo-component-text,
-                $kendo-component-bg,
-                $kendo-component-border
-            );
-        }
-    }
-
-
-    .k-spreadsheet-insert-image-dialog {
-        border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;
-
-        .k-spreadsheet-has-image {
-            &:hover,
-            &.k-hover {
-                box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
-            }
-
-            &:hover div,
-            &.k-hover div {
-                color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
-            }
-        }
-    }
-
-    .k-spreadsheet-drawing {
-        &.k-spreadsheet-active-drawing {
-            outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
-        }
-
-        .k-spreadsheet-drawing-handle {
-            border-color: $kendo-spreadsheet-drawing-handle-border-color;
-            background-color: $kendo-spreadsheet-drawing-handle-bg;
-        }
-    }
-
-    .k-spreadsheet-drawing-anchor-cell {
-        background: $kendo-spreadsheet-drawing-anchor-bg;
-    }
-
-
-    .k-spreadsheet-popup {
-
-        // Buttons
-        .k-button {}
-
-        .k-button:hover,
-        .k-button.k-hover {
-            @include fill(
-                $kendo-list-item-hover-text,
-                $kendo-list-item-hover-bg
-            );
-        }
-        .k-button:active,
-        .k-button.k-active,
-        .k-button.k-selected {
-            @include fill(
-                $kendo-list-item-selected-text,
-                $kendo-list-item-selected-bg
-            );
-        }
-    }
-
-
-    .k-rtl .k-spreadsheet,
-    .k-spreadsheet[dir="rtl"],
-    [dir="rtl"] .k-spreadsheet {
-
-        .k-spreadsheet-has-comment::after {
-            border-color: $kendo-color-primary transparent transparent $kendo-color-primary;
-        }
-
-        .k-dirty {
-            border-color: $kendo-color-error $kendo-color-error transparent transparent;
-        }
-
-    }
-
 }
 
 // #endregion