@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/spreadsheet/_theme.scss

@@ -1,216 +1,48 @@
 @use "../core/_index.scss" as *;
 @use "../list/_variables.scss"as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/spreadsheet/_theme.scss" as *;
 
 @mixin kendo-spreadsheet--theme() {
-    // Spreadsheet
-    .k-spreadsheet {
-        @include fill(
-            var( --kendo-spreadsheet-text, #{$kendo-spreadsheet-text} ),
-            var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ),
-            var( --kendo-spreadsheet-border, #{$kendo-spreadsheet-border} )
-        );
-    }
-
-    // Header
-    .k-spreadsheet-header {
-        @include fill(
-            var( --kendo-spreadsheet-header-text, #{$kendo-spreadsheet-header-text} ),
-            var( --kendo-spreadsheet-header-bg, #{$kendo-spreadsheet-header-bg} ),
-            var( --kendo-spreadsheet-header-border, #{$kendo-spreadsheet-header-border} )
-        );
-    }
-
-    // Row / column headers
-    .k-spreadsheet-top-corner,
-    .k-spreadsheet-row-header,
-    .k-spreadsheet-column-header {
-        @include fill(
-            var( --kendo-spreadsheet-header-text, #{$kendo-spreadsheet-header-text} ),
-            var( --kendo-spreadsheet-header-bg, #{$kendo-spreadsheet-header-bg} ),
-            var( --kendo-spreadsheet-header-border, #{$kendo-spreadsheet-header-border} )
-        );
-    }
-
-
-    // Cell editor
-    .k-spreadsheet-cell-editor {
-        @include fill(
-            var( --kendo-spreadsheet-cell-editor-text, #{$kendo-spreadsheet-cell-editor-text} ),
-            var( --kendo-spreadsheet-cell-editor-bg, #{$kendo-spreadsheet-cell-editor-bg} ),
-            var( --kendo-spreadsheet-cell-editor-border, #{$kendo-spreadsheet-cell-editor-border} )
-        );
-    }
-
-
-    // Cells
-    .k-spreadsheet-merged-cell {
-        @include fill( $bg: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ) );
-    }
-
-
-    // Selection
-    .k-spreadsheet .k-selection-full,
-    .k-spreadsheet .k-selection-partial {
-        @include fill( $bg: var( --kendo-spreadsheet-partial-selection-bg, #{$kendo-spreadsheet-partial-selection-bg} ) );
-    }
-    .k-spreadsheet-selection {
-        @include fill(
-            var( --kendo-spreadsheet-selection-text, #{$kendo-spreadsheet-selection-text} ),
-            var( --kendo-spreadsheet-selection-bg, #{$kendo-spreadsheet-selection-bg} ),
-            var( --kendo-spreadsheet-selection-border, #{$kendo-spreadsheet-selection-border} )
-        );
-        @include box-shadow( var( --kendo-spreadsheet-selection-shadow, #{$kendo-spreadsheet-selection-shadow} ) );
-    }
-    .k-spreadsheet-selection-highlight {
-        @include fill( $border: var( --kendo-spreadsheet-selection-border, #{$kendo-spreadsheet-selection-border} ) );
-    }
-    .k-spreadsheet .k-single-selection::after {
-        @include fill(
-            var( --kendo-spreadsheet-single-selection-text, #{$kendo-spreadsheet-single-selection-text} ),
-            var( --kendo-spreadsheet-single-selection-bg, #{$kendo-spreadsheet-single-selection-bg} ),
-            var( --kendo-spreadsheet-single-selection-border, #{$kendo-spreadsheet-single-selection-border} )
-        );
-    }
-    .k-spreadsheet-active-cell {
-        @include fill ( $bg: var( --kendo-spreadsheet-active-cell-bg, #{$kendo-spreadsheet-active-cell-bg} ) );
-        @include box-shadow( var( --kendo-spreadsheet-active-cell-shadow, #{$kendo-spreadsheet-active-cell-shadow} ) );
-    }
-
-    .k-spreadsheet .k-auto-fill {
-        border-color: var( --kendo-spreadsheet-selected-border, #{$kendo-spreadsheet-selected-border} );
-        background-color: var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
-        box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
-
-        @include fill(
-            var( --kendo-spreadsheet-auto-fill-text, #{$kendo-spreadsheet-auto-fill-text} ),
-            var( --kendo-spreadsheet-auto-fill-bg, #{$kendo-spreadsheet-auto-fill-bg} ),
-            var( --kendo-spreadsheet-auto-fill-border, #{$kendo-spreadsheet-auto-fill-border} )
-        );
-        @include box-shadow( var( --kendo-spreadsheet-auto-fill-shadow, #{$kendo-spreadsheet-auto-fill-shadow} ) );
-    }
-    .k-spreadsheet .k-auto-fill-punch {
-        @include fill( $bg: var( --kendo-spreadsheet-auto-fill-punch-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 {
-        @include fill( $bg: var( --kendo-spreadsheet-resize-handle-bg, #{$kendo-spreadsheet-resize-handle-bg} ) );
-    }
-
-    // Comments
-    .k-spreadsheet-has-comment::after {
-        border-block-color: var( --kendo-spreadsheet-cell-comment-border, #{$kendo-spreadsheet-cell-comment-border} ) transparent;
-        border-inline-color: transparent var( --kendo-spreadsheet-cell-comment-border, #{$kendo-spreadsheet-cell-comment-border} );
-    }
+    @include kendo-spreadsheet--theme-base();
 
-    // Validation
-    .k-spreadsheet-cell .k-dirty {
-        border-block-color: var( --kendo-spreadsheet-cell-dirty-border, #{$kendo-spreadsheet-cell-dirty-border} ) transparent;
-        border-inline-color: var( --kendo-spreadsheet-cell-dirty-border, #{$kendo-spreadsheet-cell-dirty-border} ) transparent;
-    }
 
     // Filter button
     .k-spreadsheet .k-filter-range {
-        border-color: var( --kendo-spreadsheet-primary-border, #{$kendo-spreadsheet-primary-border} );
+        border-color: $kendo-spreadsheet-primary-border;
     }
     .k-spreadsheet-filter {
         @include fill(
-            var( --kendo-spreadsheet-filter-button-text, #{$kendo-spreadsheet-filter-button-text} ),
-            var( --kendo-spreadsheet-filter-button-bg, #{$kendo-spreadsheet-filter-button-bg} ),
-            var( --kendo-spreadsheet-filter-button-border, #{$kendo-spreadsheet-filter-button-border} )
+            $kendo-spreadsheet-filter-button-text,
+            $kendo-spreadsheet-filter-button-bg,
+            $kendo-spreadsheet-filter-button-border
         );
-        box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-filter-button-border, #{$kendo-spreadsheet-filter-button-border} );
+        box-shadow: inset 0 0 0 1px $kendo-spreadsheet-filter-button-border;
 
         &:hover {
             @include fill(
-                var( --kendo-spreadsheet-filter-button-hover-text, #{$kendo-spreadsheet-filter-button-hover-text} ),
-                var( --kendo-spreadsheet-filter-button-hover-bg, #{$kendo-spreadsheet-filter-button-hover-bg} ),
-                var( --kendo-spreadsheet-filter-button-hover-border, #{$kendo-spreadsheet-filter-button-hover-border} )
+                $kendo-spreadsheet-filter-button-hover-text,
+                $kendo-spreadsheet-filter-button-hover-bg,
+                $kendo-spreadsheet-filter-button-hover-border
             );
         }
 
         &.k-active {
             @include fill(
-                var( --kendo-spreadsheet-filter-button-active-text, #{$kendo-spreadsheet-filter-button-active-text} ),
-                var( --kendo-spreadsheet-filter-button-active-bg, #{$kendo-spreadsheet-filter-button-active-bg} ),
-                var( --kendo-spreadsheet-filter-button-active-border, #{$kendo-spreadsheet-filter-button-active-border} )
+                $kendo-spreadsheet-filter-button-active-text,
+                $kendo-spreadsheet-filter-button-active-bg,
+                $kendo-spreadsheet-filter-button-active-border
             );
         }
 
     }
 
-    .k-spreadsheet-value-treeview-wrapper {
-        @include fill(
-            var( --kendo-spreadsheet-text, #{$kendo-spreadsheet-text} ),
-            var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ),
-            var( --kendo-spreadsheet-border, #{$kendo-spreadsheet-border} )
-        );
-    }
-
     // Filter menu legacy - delete after new rendering adoption R3 23
     .k-spreadsheet-filter-menu {
 
-        > .k-menu,
-        > .k-menu:not(.k-context-menu) {
-
-            .k-item:hover,
-            .k-item.k-hover {
-                @include fill(
-                    var( --kendo-list-item-hover-text, #{$kendo-list-item-hover-text} ),
-                    var( --kendo-list-item-hover-bg, #{$kendo-list-item-hover-bg} )
-                );
-            }
-        }
-
         .k-columnmenu-item > .k-icon:first-child {
-            color: var( --kendo-spreadsheet-filter-menu-icon-color, #{$kendo-spreadsheet-filter-menu-icon-color} );
-        }
-    }
-
-
-    .k-spreadsheet-insert-image-dialog {
-        border-color: var( --kendo-spreadsheet-insert-image-dialog-preview-border, #{$kendo-spreadsheet-insert-image-dialog-preview-border} );
-
-        .k-spreadsheet-has-image {
-            &:hover,
-            &.k-hover {
-                box-shadow: var( --kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow, #{$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow} );
-            }
-
-            &:hover div,
-            &.k-hover div {
-                color: var( --kendo-spreadsheet-insert-image-dialog-overlay-hover-text, #{$kendo-spreadsheet-insert-image-dialog-overlay-hover-text} );
-            }
-        }
-    }
-
-    .k-spreadsheet-drawing {
-        &.k-spreadsheet-active-drawing {
-            outline-color: var( --kendo-spreadsheet-drawing-handle-outline-color, #{$kendo-spreadsheet-drawing-handle-outline-color} );
-        }
-
-        .k-spreadsheet-drawing-handle {
-            border-color: var( --kendo-spreadsheet-drawing-handle-border-color, #{$kendo-spreadsheet-drawing-handle-border-color} );
-            background-color: var( --kendo-spreadsheet-drawing-handle-bg, #{$kendo-spreadsheet-drawing-handle-bg} );
+            color: $kendo-spreadsheet-filter-menu-icon-color;
         }
     }
 
-    .k-spreadsheet-drawing-anchor-cell {
-        background: var( --kendo-spreadsheet-drawing-anchor-bg, #{$kendo-spreadsheet-drawing-anchor-bg} );
-    }
-
-
-    // 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; }
-
 }