@progress/kendo-theme-fluent 6.7.1-dev.0 → 6.8.0-dev.0

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.7.1-dev.0",
+    "version": "6.8.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.7.1-dev.0",
+    "version": "6.8.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "6.7.1-dev.0",
+  "version": "6.8.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,8 +52,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.7.1-dev.0",
-    "@progress/kendo-theme-utils": "6.7.1-dev.0"
+    "@progress/kendo-theme-core": "6.8.0-dev.0",
+    "@progress/kendo-theme-utils": "6.8.0-dev.0"
   },
-  "gitHead": "a8c5d01d034243bb5d6e21410a1f23439a1dc791"
+  "gitHead": "e41c60c822242a3a105f8f403df4fff291c81628"
 }

package/scss/input/_variables.scss

@@ -395,7 +395,7 @@ $kendo-picker-flat-text: k-get-theme-color-var( neutral-160 ) !default;
 
 /// The background color of the flat Picker components.
 /// @group input
-$kendo-picker-flat-bg: $kendo-color-white !default;
+$kendo-picker-flat-bg: none !default;
 
 /// The border color of the flat Picker components.
 /// @group input

package/scss/spreadsheet/_layout.scss

@@ -37,16 +37,6 @@
             inset-block-start: 100%;
             transform: translateY( -100% );
         }
-
-    }
-
-
-    // Header
-    .k-spreadsheet .k-tabstrip-wrapper {
-        border-width: 0 0 1px;
-        border-style: solid;
-        border-color: inherit;
-        position: relative;
     }
 
 
@@ -61,74 +51,37 @@
         inset-inline-start: 0;
     }
 
-
-    // Tabstrip
-    .k-spreadsheet-tabstrip {
-        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: var( --kendo-form-line-height-em, #{$kendo-form-line-height-em} );
-        }
-
-        .k-color-picker {
-            width: min-content;
-        }
     }
 
 
     // Action bar
     .k-spreadsheet-action-bar {
-        border-width: 0 0 1px;
+        border-width: 0 0 var( --kendo-spreadsheet-action-bar-border-width, #{$kendo-spreadsheet-action-bar-border-width} );
         border-style: solid;
         border-color: inherit;
-        font-size: 12px;
-        font-family: Arial, Verdana, sans-serif;
+        padding-block: var( --kendo-spreadsheet-action-bar-padding-y, #{$kendo-spreadsheet-action-bar-padding-y} );
+        padding-inline: var( --kendo-spreadsheet-action-bar-padding-x, #{$kendo-spreadsheet-action-bar-padding-x} );
+        font-size: var( --kendo-spreadsheet-action-bar-font-size, #{$kendo-spreadsheet-action-bar-font-size} );
+        font-family: var( --kendo-spreadsheet-action-bar-font-family, #{$kendo-spreadsheet-action-bar-font-family} );
         position: relative;
         display: flex;
         flex-direction: row;
+        gap: var( --kendo-spreadsheet-action-bar-spacing, #{$kendo-spreadsheet-action-bar-spacing} );
     }
     .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: var( --kendo-padding-y, #{$kendo-padding-md-y} );
+        gap: var( --kendo-spreadsheet-formula-bar-gap, #{$kendo-spreadsheet-formula-bar-gap} );
 
         > .k-icon,
         > .k-svg-icon {
@@ -148,9 +101,13 @@
         }
 
         .k-spreadsheet-formula-input {
-            padding-inline: var( --kendo-input-md-padding-x, #{$kendo-input-md-padding-x} );
-            padding-block: var( --kendo-input-md-padding-y, #{$kendo-input-md-padding-y} );
-            line-height: var( --kendo-input-md-line-height, #{$kendo-input-md-line-height} );
+            padding-inline: var( --kendo-spreadsheet-formula-input-padding-x, #{$kendo-spreadsheet-formula-input-padding-x} );
+            padding-block: var( --kendo-spreadsheet-formula-input-padding-y, #{$kendo-spreadsheet-formula-input-padding-y} );
+            line-height: var( --kendo-spreadsheet-formula-input-line-height, #{$kendo-spreadsheet-formula-input-line-height} );
+            display: inline-block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
 
             &.k-spreadsheet-array-formula {
                 &::before {
@@ -201,28 +158,36 @@
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        padding-block: 0;
-        padding-inline: 3px;
-        line-height: var( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height );
+        padding-block: var( --kendo-spreadsheet-cell-editor-padding-y, $kendo-spreadsheet-cell-editor-padding-y );
+        padding-inline: var( --kendo-spreadsheet-cell-editor-padding-x, $kendo-spreadsheet-cell-editor-padding-x );
+        line-height: var( --kendo-spreadsheet-cell-editor-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-inline: var( --kendo-spreadsheet-sheets-bar-padding-x, #{$kendo-spreadsheet-sheets-bar-padding-x} ) 0;
-        padding-block: 0 var( --kendo-spreadsheet-sheets-bar-padding-y, #{$kendo-spreadsheet-sheets-bar-padding-y} );
+        padding-block-end: var( --kendo-spreadsheet-sheets-bar-padding-y, #{$kendo-spreadsheet-sheets-bar-padding-y} );
+        padding-inline: var( --kendo-spreadsheet-sheets-bar-padding-x, #{$kendo-spreadsheet-sheets-bar-padding-x} );
         border-width: var( --kendo-spreadsheet-border-width, $kendo-spreadsheet-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;
 
@@ -232,6 +197,7 @@
             background: none;
         }
     }
+
     .k-spreadsheet-sheets-items {
         flex: 1;
         overflow: hidden;
@@ -264,8 +230,8 @@
     .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-family: var( --kendo-spreadsheet-view-font-family, #{$kendo-spreadsheet-view-font-family} );
+        font-size: var( --kendo-spreadsheet-view-font-size, #{$kendo-spreadsheet-view-font-size} );
         flex: 1;
         position: relative;
         overflow: hidden;
@@ -277,8 +243,8 @@
     }
 
     .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;
@@ -425,7 +391,8 @@
 
     // Cells
     .k-spreadsheet-cell {
-        padding: 1px;
+        padding-block: var( --kendo-spreadsheet-cell-padding-y, #{$kendo-spreadsheet-cell-padding-y} );
+        padding-inline: var( --kendo-spreadsheet-cell-padding-x, #{$kendo-spreadsheet-cell-padding-x} );
         box-sizing: border-box;
         position: absolute;
         line-height: normal;
@@ -453,8 +420,8 @@
         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;
     }
@@ -499,7 +466,7 @@
         position: absolute;
         inset-block-end: 0;
         inset-inline-end: 0;
-        z-index: 100;
+        z-index: 300;
         cursor: crosshair;
     }
 
@@ -556,13 +523,14 @@
         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: var( --kendo-padding-y, #{$kendo-padding-md-y} );
         line-height: 1;
         position: absolute;
         cursor: pointer;
@@ -871,4 +839,60 @@
             }
         }
     }
+
+    // Legacy styles
+    .k-spreadsheet-legacy {
+        .k-spreadsheet,
+        .k-spreadsheet-action-bar,
+        .k-spreadsheet-view {
+            font-size: 12px;
+        }
+
+        .k-spreadsheet-cell {
+            padding: 1px;
+        }
+
+        .k-spreadsheet-filter {
+            padding: 0px;
+        }
+
+        .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-tabstrip {
+        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;
+    }
 }

package/scss/spreadsheet/_theme.scss

@@ -12,14 +12,14 @@
         );
     }
 
-
     // Header
-    .k-spreadsheet .k-tabstrip-wrapper {}
-
-
-    // Quick access toolbar
-    .k-spreadsheet-quick-access-toolbar {}
-
+    .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,
@@ -33,68 +33,64 @@
     }
 
 
-    // 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: var( --kendo-spreadsheet-text, #{$kendo-spreadsheet-text} );
-        background-color: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} );
+        @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 {
-        background-color: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} );
+        @include fill( $bg: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} ) );
     }
 
 
     // Selection
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
-        // TODO: consider extracting variables
-        background-color: var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
+        @include fill( $bg: var( --kendo-spreadsheet-partial-selection-bg, #{$kendo-spreadsheet-partial-selection-bg} ) );
     }
     .k-spreadsheet-selection {
-        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-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 {
-        border-color: var( --kendo-spreadsheet-border, #{$kendo-spreadsheet-border} );
-        background-color: var( --kendo-spreadsheet-selected-border, #{$kendo-spreadsheet-selected-border} );
+        @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 {
-        box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
-        background-color: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} );
-
-        &.k-right {
-            box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} ), inset -1px 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
-        }
-
-        &.k-bottom {
-            box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} ), inset 0 -1px 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
-        }
-
-        &.k-bottom.k-right {
-            box-shadow: inset 0 0 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} ), inset -1px -1px 0 1px var( --kendo-spreadsheet-selected-bg, #{$kendo-spreadsheet-selected-bg} );
-        }
+        @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 {
-        background-color: var( --kendo-spreadsheet-bg, #{$kendo-spreadsheet-bg} );
+        @include fill( $bg: var( --kendo-spreadsheet-auto-fill-punch-bg, #{$kendo-spreadsheet-auto-fill-punch-bg} ) );
     }
 
 
@@ -102,17 +98,19 @@
     .k-spreadsheet .k-resize-handle,
     .k-spreadsheet .k-resize-hint-handle,
     .k-spreadsheet .k-resize-hint-marker {
-        background-color: var( --kendo-spreadsheet-primary-bg, #{$kendo-spreadsheet-primary-bg} );
+        @include fill( $bg: var( --kendo-spreadsheet-resize-handle-bg, #{$kendo-spreadsheet-resize-handle-bg} ) );
     }
 
     // Comments
     .k-spreadsheet-has-comment::after {
-        border-color: var( --kendo-spreadsheet-primary-border, #{$kendo-spreadsheet-primary-border} ) var( --kendo-spreadsheet-primary-border, #{$kendo-spreadsheet-primary-border} ) transparent transparent;
+        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} );
     }
 
     // Validation
-    .k-dirty {
-        border-color: var( --kendo-spreadsheet-error-border, #{$kendo-spreadsheet-error-border} ) transparent transparent var( --kendo-spreadsheet-error-border, #{$kendo-spreadsheet-error-border} );
+    .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
@@ -153,7 +151,7 @@
         );
     }
 
-    // Filter menu
+    // Filter menu legacy - delete after new rendering adoption R3 23
     .k-spreadsheet-filter-menu {
 
         > .k-menu,
@@ -174,32 +172,6 @@
     }
 
 
-
-
-    .k-spreadsheet-popup {
-
-        // Buttons
-        .k-button {}
-
-        .k-button:hover,
-        .k-button.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-button:active,
-        .k-button.k-active,
-        .k-button.k-selected {
-            @include fill(
-                var( --kendo-list-item-selected-text, #{$kendo-list-item-selected-text} ),
-                var( --kendo-list-item-selected-bg, #{$kendo-list-item-selected-bg} )
-            );
-        }
-    }
-
-
-
     .k-spreadsheet-insert-image-dialog {
         border-color: var( --kendo-spreadsheet-insert-image-dialog-preview-border, #{$kendo-spreadsheet-insert-image-dialog-preview-border} );
 
@@ -232,18 +204,13 @@
     }
 
 
-    .k-rtl .k-spreadsheet,
-    .k-spreadsheet[dir="rtl"],
-    [dir="rtl"] .k-spreadsheet {
-
-        .k-spreadsheet-has-comment::after {
-            border-color: var( --kendo-spreadsheet-primary-border, #{$kendo-spreadsheet-primary-border} ) transparent transparent var( --kendo-spreadsheet-primary-border, #{$kendo-spreadsheet-primary-border} );
-        }
-
-        .k-dirty {
-            border-color: var( --kendo-spreadsheet-error-border, #{$kendo-spreadsheet-error-border} ) var( --kendo-spreadsheet-error-border, #{$kendo-spreadsheet-error-border} ) 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; }
 
 }