@progress/kendo-theme-core 11.2.1-dev.1 → 11.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "11.2.1-dev.1",
+  "version": "11.3.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,5 +45,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "05a6da8b6ec28af742b5b5284582b9cfcde6fe29"
+  "gitHead": "89fa2a4b285a36ead7c7440ab9bb9764dbe7da9f"
 }

package/scss/components/badge/_variables.scss

@@ -2,12 +2,10 @@
 
 $kendo-badge-border-width: null !default;
 
-$kendo-badge-padding-x: null !default;
 $kendo-badge-sm-padding-x: null !default;
 $kendo-badge-md-padding-x: null !default;
 $kendo-badge-lg-padding-x: null !default;
 
-$kendo-badge-padding-y: null !default;
 $kendo-badge-sm-padding-y: null !default;
 $kendo-badge-md-padding-y: null !default;
 $kendo-badge-lg-padding-y: null !default;

package/scss/components/breadcrumb/_variables.scss

@@ -25,24 +25,20 @@ $kendo-breadcrumb-border: null !default;
 
 $kendo-breadcrumb-focus-shadow: null !default;
 
-$kendo-breadcrumb-link-padding-x: null !default;
 $kendo-breadcrumb-sm-link-padding-x: null !default;
 $kendo-breadcrumb-md-link-padding-x: null !default;
 $kendo-breadcrumb-lg-link-padding-x: null !default;
 
-$kendo-breadcrumb-link-padding-y: null !default;
 $kendo-breadcrumb-sm-link-padding-y: null !default;
 $kendo-breadcrumb-md-link-padding-y: null !default;
 $kendo-breadcrumb-lg-link-padding-y: null !default;
 
 $kendo-breadcrumb-link-border-radius: null !default;
 
-$kendo-breadcrumb-icon-link-padding-y: null !default;
 $kendo-breadcrumb-sm-icon-link-padding-y: null !default;
 $kendo-breadcrumb-md-icon-link-padding-y: null !default;
 $kendo-breadcrumb-lg-icon-link-padding-y: null !default;
 
-$kendo-breadcrumb-icon-link-padding-x: null !default;
 $kendo-breadcrumb-sm-icon-link-padding-x: null !default;
 $kendo-breadcrumb-md-icon-link-padding-x: null !default;
 $kendo-breadcrumb-lg-icon-link-padding-x: null !default;

package/scss/components/button/_layout.scss

@@ -162,7 +162,7 @@
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         > .k-button + .k-button {
-            margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
+            margin-inline-start: if( $kendo-button-border-width == 0, null, calc( -1 * $kendo-button-border-width ) );
         }
 
         > .k-button:hover,
@@ -268,10 +268,10 @@
         display: none;
         pointer-events: none;
         position: absolute;
-        left: -$kendo-button-border-width;
-        right: -$kendo-button-border-width;
-        top: -$kendo-button-border-width;
-        bottom: -$kendo-button-border-width;
+        left: calc( -1 * $kendo-button-border-width );
+        right: calc( -1 * $kendo-button-border-width );
+        top: calc( -1 * $kendo-button-border-width );
+        bottom: calc( -1 * $kendo-button-border-width );
         z-index: 0;
         transition: opacity .2s ease-in-out;
     }
@@ -333,10 +333,10 @@
             display: none;
             pointer-events: none;
             position: absolute;
-            left: -$kendo-button-border-width;
-            right: -$kendo-button-border-width;
-            top: -$kendo-button-border-width;
-            bottom: -$kendo-button-border-width;
+            left: calc( -1 * $kendo-button-border-width );
+            right: calc( -1 * $kendo-button-border-width );
+            top: calc( -1 * $kendo-button-border-width );
+            bottom: calc( -1 * $kendo-button-border-width );
             z-index: 0;
             transition: opacity .2s ease-in-out;
         }

package/scss/components/button/_theme.scss

@@ -72,8 +72,6 @@
         }
     }
 
-    $_shade-fn: meta.get-function( $kendo-solid-button-shade-function );
-
     @each $name, $color in $kendo-button-theme-colors {
         @if ($name != "base") {
             $_button-text: k-color(on-#{$name});

package/scss/components/button/_variables.scss

@@ -4,12 +4,10 @@ $kendo-button-border-width: null !default;
 
 $kendo-button-border-radius: null !default;
 
-$kendo-button-padding-x: null !default;
 $kendo-button-sm-padding-x: null !default;
 $kendo-button-md-padding-x: null !default;
 $kendo-button-lg-padding-x: null !default;
 
-$kendo-button-padding-y: null !default;
 $kendo-button-sm-padding-y: null !default;
 $kendo-button-md-padding-y: null !default;
 $kendo-button-lg-padding-y: null !default;
@@ -27,7 +25,6 @@ $kendo-button-sm-line-height: null !default;
 $kendo-button-md-line-height: null !default;
 $kendo-button-lg-line-height: null !default;
 
-$kendo-button-calc-size: null !default;
 $kendo-button-sm-calc-size: null !default;
 $kendo-button-md-calc-size: null !default;
 $kendo-button-lg-calc-size: null !default;

package/scss/components/calendar/_layout.scss

@@ -201,7 +201,7 @@
     // Year view
     .k-year-calendar,
     .k-calendar-yearview {
-        $_year-cell-size: ( 2 * $kendo-calendar-cell-size );
+        $_year-cell-size: calc( 2 * #{$kendo-calendar-cell-size} );
 
         .k-calendar-td {
             width: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
@@ -215,7 +215,7 @@
     // Decade view
     .k-decade-calendar,
     .k-calendar-decadeview {
-        $_decade-cell-size: ( 2 * $kendo-calendar-cell-size );
+        $_decade-cell-size: calc( 2 * #{$kendo-calendar-cell-size} );
 
         .k-calendar-td {
             width: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
@@ -229,7 +229,7 @@
     // Century view
     .k-century-calendar,
     .k-calendar-centuryview {
-        $_century-cell-size: ( 2 * $kendo-calendar-cell-size );
+        $_century-cell-size: calc( 2 * #{$kendo-calendar-cell-size} );
 
         .k-calendar-td {
             width: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
@@ -290,12 +290,12 @@
         $_cell-padding-y: map.get( $size-props, cell-padding-y );
 
         $_month-cell-size: $_cell-size;
-        $_year-cell-size: ( 2 * $_cell-size );
-        $_decade-cell-size: ( 2 * $_cell-size );
-        $_century-cell-size: ( 2 * $_cell-size );
+        $_year-cell-size: calc( 2 * #{$_cell-size} );
+        $_decade-cell-size: calc( 2 * #{$_cell-size} );
+        $_century-cell-size: calc( 2 * #{$_cell-size} );
 
         .k-calendar-#{$size} {
-            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
+            --INTERNAL--kendo-calendar-view-width: calc( 8 * #{$_cell-size} );
             --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
             --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
             font-size: $_font-size;
@@ -361,7 +361,7 @@
                 z-index: 1;
                 width: 150%;
                 left: -25%;
-                box-shadow: 0 0 $kendo-calendar-cell-size math.div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg;
+                box-shadow: 0 0 $kendo-calendar-cell-size calc( #{$kendo-calendar-cell-size} / 2 ) $kendo-calendar-bg;
             }
         }
 
@@ -400,8 +400,8 @@
             z-index: 1;
             width: 200%;
             left: -50%;
-            $shadow-size: 3 * $kendo-calendar-navigation-item-height;
-            box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-calendar-navigation-bg;
+            $shadow-size: calc( 3 * #{$kendo-calendar-navigation-item-height} );
+            box-shadow: 0 0 $shadow-size calc( #{$shadow-size} / 2 ) $kendo-calendar-navigation-bg;
         }
 
         &::before { top: 0; }

package/scss/components/chat/_layout.scss

@@ -375,11 +375,6 @@
         }
     }
 
-
-    // Local variables
-    $kendo-chat-typing-indicator-dot-size: 8px !default;
-    $kendo-chat-typing-indicator-dot-spacing: 5px !default;
-
     // Typing indicator
     .k-typing-indicator {
         padding: 0;

package/scss/components/chat/_variables.scss

@@ -80,3 +80,6 @@ $kendo-chat-quick-reply-hover-border: null !default;
 $kendo-chat-quick-reply-shadow-blur: null !default;
 $kendo-chat-quick-reply-shadow-spread: null !default;
 $kendo-chat-quick-reply-shadow-opacity: null !default;
+
+$kendo-chat-typing-indicator-dot-size: null !default;
+$kendo-chat-typing-indicator-dot-spacing: null !default;

package/scss/components/chip/_layout.scss

@@ -5,8 +5,8 @@
 
     // Chip
     .k-chip {
-        padding-block: $kendo-chip-padding-y;
-        padding-inline: $kendo-chip-padding-x;
+        padding-block: $kendo-chip-md-padding-y;
+        padding-inline: $kendo-chip-md-padding-x;
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;

package/scss/components/chip/_variables.scss

@@ -3,12 +3,10 @@
 $kendo-chip-border-width: null !default;
 $kendo-chip-spacing: null !default;
 
-$kendo-chip-padding-x: null !default;
 $kendo-chip-sm-padding-x: null !default;
 $kendo-chip-md-padding-x: null !default;
 $kendo-chip-lg-padding-x: null !default;
 
-$kendo-chip-padding-y: null !default;
 $kendo-chip-sm-padding-y: null !default;
 $kendo-chip-md-padding-y: null !default;
 $kendo-chip-lg-padding-y: null !default;

package/scss/components/coloreditor/_layout.scss

@@ -29,7 +29,7 @@
 
     // Header
     .k-coloreditor-header {
-        padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0;
+        padding: $kendo-color-editor-md-header-padding-y $kendo-color-editor-md-header-padding-x 0;
     }
 
     .k-coloreditor-header-actions {
@@ -89,8 +89,8 @@
     // Views
     .k-coloreditor-views {
         min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
-        padding-block: $kendo-color-editor-views-padding-y;
-        padding-inline: $kendo-color-editor-views-padding-x;
+        padding-block: $kendo-color-editor-md-views-padding-y;
+        padding-inline: $kendo-color-editor-md-views-padding-x;
         gap: $kendo-color-editor-views-gap;
 
         .k-colorgradient {

package/scss/components/coloreditor/_variables.scss

@@ -19,8 +19,6 @@ $kendo-color-editor-focus-border: null !default;
 // TODO: does this ever get focused? Isn't it always in a popup?
 $kendo-color-editor-focus-shadow: null !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)
 
-$kendo-color-editor-header-padding-y: null !default;
-$kendo-color-editor-header-padding-x: null !default;
 $kendo-color-editor-header-actions-gap: null !default;
 $kendo-color-editor-sm-header-padding-y: null !default;
 $kendo-color-editor-sm-header-padding-x: null !default;
@@ -43,8 +41,6 @@ $kendo-color-editor-md-color-preview-height: null !default;
 $kendo-color-editor-lg-color-preview-width: null !default;
 $kendo-color-editor-lg-color-preview-height: null !default;
 
-$kendo-color-editor-views-padding-y: null !default;
-$kendo-color-editor-views-padding-x: null !default;
 $kendo-color-editor-views-gap: null !default;
 $kendo-color-editor-sm-views-padding-y: null !default;
 $kendo-color-editor-sm-views-padding-x: null !default;

package/scss/components/colorgradient/_layout.scss

@@ -10,8 +10,8 @@
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
         width: $kendo-color-gradient-width;
-        padding-block: $kendo-color-gradient-padding-y;
-        padding-inline: $kendo-color-gradient-padding-x;
+        padding-block: $kendo-color-gradient-md-padding-y;
+        padding-inline: $kendo-color-gradient-md-padding-x;
         border-style: solid;
         border-width: $kendo-color-gradient-border-width;
         box-sizing: border-box;
@@ -92,7 +92,7 @@
         &.k-slider-vertical .k-slider-track {
             width: $kendo-color-gradient-slider-track-size;
             border-radius: $kendo-color-gradient-slider-border-radius;
-            margin-left: - math.div( $kendo-color-gradient-slider-track-size, 2 );
+            margin-left: calc( -1 * ( $kendo-color-gradient-slider-track-size / 2 ) );
         }
 
         &.k-slider-horizontal {
@@ -103,7 +103,7 @@
         &.k-slider-horizontal .k-slider-track {
             height: $kendo-color-gradient-slider-track-size;
             border-radius: $kendo-color-gradient-slider-border-radius;
-            margin-top: - math.div( $kendo-color-gradient-slider-track-size, 2 );
+            margin-top: calc( -1 * ( $kendo-color-gradient-slider-track-size / 2 ) );
         }
 
         &.k-alpha-slider .k-slider-track::before {

package/scss/components/colorgradient/_variables.scss

@@ -5,8 +5,6 @@ $kendo-color-gradient-spacer: null !default;
 $kendo-color-gradient-width: null !default;
 $kendo-color-gradient-border-width: null !default;
 $kendo-color-gradient-border-radius: null !default;
-$kendo-color-gradient-padding-y: null !default;
-$kendo-color-gradient-padding-x: null !default;
 $kendo-color-gradient-gap: null !default;
 $kendo-color-gradient-font-family: null !default;
 $kendo-color-gradient-font-size: null !default;

package/scss/components/column-menu/_variables.scss

@@ -1,6 +1,3 @@
-$kendo-column-menu-item-padding-x: null !default;
-$kendo-column-menu-item-padding-y: null !default;
-
 $kendo-column-menu-item-sm-padding-x: null !default;
 $kendo-column-menu-item-sm-padding-y: null !default;
 

package/scss/components/dataviz/_layout.scss

@@ -147,31 +147,31 @@
     }
 
     .k-left-handle {
-        left: - math.div( $kendo-chart-selection-handle-size, 2 );
+        left: calc( -1 * ( $kendo-chart-selection-handle-size / 2 ) );
     }
 
     .k-right-handle {
-        right: - math.div( $kendo-chart-selection-handle-size, 2 );
+        right: calc( -1 * ( $kendo-chart-selection-handle-size / 2 ) );
     }
 
     .k-left-handle div {
-        margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 ));
-        padding: ($kendo-chart-selection-handle-size * 2) (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0;
-    }
+        margin: calc( -1 * $kendo-chart-selection-handle-size ) 0 0 calc( -1 * ( $kendo-chart-selection-handle-size / 1.5 ) );
+            padding: calc($kendo-chart-selection-handle-size * 2) calc( ( $kendo-chart-selection-handle-size / 1.5 ) * 2) 0 0;
+        }
 
     .k-right-handle div {
-        margin: -($kendo-chart-selection-handle-size) 0 0 (- math.div( $kendo-chart-selection-handle-size, 1.5 ));
-        padding: ($kendo-chart-selection-handle-size * 2) 0 0 (math.div( $kendo-chart-selection-handle-size, 1.5 ) * 2);
+        margin: calc( -1 * $kendo-chart-selection-handle-size ) 0 0 calc( -1 * ( $kendo-chart-selection-handle-size / 1.5 ) );
+        padding: calc($kendo-chart-selection-handle-size * 2) 0 0 calc( ( $kendo-chart-selection-handle-size / 1.5 ) * 2);
     }
 
     .k-left-handle.k-handle-active div {
-        margin-left: -($kendo-chart-selection-handle-size * 2);
-        padding-left: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 );
+        margin-left: calc( -1 * ( $kendo-chart-selection-handle-size * 2 ) );
+        padding-left: calc( ( $kendo-chart-selection-handle-size * 2 ) + ( $kendo-chart-selection-handle-size / 1.5 ) );
     }
 
     .k-right-handle.k-handle-active div {
-        margin-left: -($kendo-chart-selection-handle-size * 2);
-        padding-right: ($kendo-chart-selection-handle-size * 2) + math.div( $kendo-chart-selection-handle-size, 1.5 );
+        margin-left: calc( $kendo-chart-selection-handle-size * -2);
+        padding-right: calc( ( $kendo-chart-selection-handle-size * 2 ) + ( $kendo-chart-selection-handle-size / 1.5 ) );
     }
 
     .k-mask {

package/scss/components/draggable/_layout.scss

@@ -48,7 +48,7 @@
     .k-drop-hint-start,
     .k-drop-hint-end {
         flex-shrink: 0;
-        border-width: math.div( $kendo-drop-hint-arrow-size, 2 );
+        border-width: calc( $kendo-drop-hint-arrow-size / 2 );
         border-style: solid;
         border-color: transparent;
     }
@@ -60,7 +60,7 @@
 
     .k-drop-hint-h {
         .k-drop-hint-start {
-            border-left-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-left-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
             border-left-color: $kendo-drop-hint-bg;
             border-right-width: 0;
         }
@@ -71,7 +71,7 @@
         }
 
         .k-drop-hint-end {
-            border-right-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-right-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
             border-right-color: $kendo-drop-hint-bg;
             border-left-width: 0;
         }
@@ -81,7 +81,7 @@
         flex-direction: column;
 
         .k-drop-hint-start {
-            border-top-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-top-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
             border-top-color: $kendo-drop-hint-bg;
             border-bottom-width: 0;
         }
@@ -92,7 +92,7 @@
         }
 
         .k-drop-hint-end {
-            border-bottom-width: ( math.div( $kendo-drop-hint-arrow-size, 2 ) * $equilateral-index );
+            border-bottom-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
             border-bottom-color: $kendo-drop-hint-bg;
             border-top-width: 0;
         }

package/scss/components/editor/_layout.scss

@@ -493,8 +493,8 @@
 
         .k-breadcrumbs-wrap {
             position: absolute;
-            left: $kendo-input-padding-x;
-            top: $kendo-input-padding-y;
+            left: $kendo-input-md-padding-x;
+            top: $kendo-input-md-padding-y;
 
             .k-icon {
                 position: static;

package/scss/components/fab/_theme.scss

@@ -11,7 +11,7 @@
         .k-fab-solid-#{$name} {
             @include box-shadow($kendo-fab-shadow);
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
-            outline-offset: -$kendo-fab-border-width;
+            outline-offset: calc(#{$kendo-fab-border-width} * -1);
             border-color: $color;
             color: k-color(on-#{$name});
             background-color: $color;
@@ -103,7 +103,7 @@
         );
         @include box-shadow($kendo-fab-item-shadow);
         outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
-        outline-offset: -$kendo-fab-border-width;
+        outline-offset: calc(#{$kendo-fab-border-width} * -1);
     }
 
     // Hover state

package/scss/components/fab/_variables.scss

@@ -6,12 +6,10 @@ $kendo-fab-font-family: null !default;
 $kendo-fab-font-size: null !default;
 $kendo-fab-line-height: null !default;
 
-$kendo-fab-padding-x: null !default;
 $kendo-fab-sm-padding-x: null !default;
 $kendo-fab-md-padding-x: null !default;
 $kendo-fab-lg-padding-x: null !default;
 
-$kendo-fab-padding-y: null !default;
 $kendo-fab-sm-padding-y: null !default;
 $kendo-fab-md-padding-y: null !default;
 $kendo-fab-lg-padding-y: null !default;

package/scss/components/forms/_layout.scss

@@ -338,7 +338,7 @@
     .k-edit-label {
         margin: 0 0 k-spacing(4);
         // TODO: do we need the input variable?
-        padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
+        padding: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $kendo-form-line-height;
         text-align: end;
@@ -354,7 +354,7 @@
 
         &.k-no-editor {
             // TODO: do we need the input variable?
-            padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
+            padding: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} ) 0;
         }
     }
 

package/scss/components/gantt/_layout.scss

@@ -48,7 +48,7 @@
             position: relative;
         }
         .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} );
+            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-cell-padding-y} * 2 + #{$kendo-grid-cell-horizontal-border-width} );
         }
 
         &.k-gantt-planned .k-grid-content tr {
@@ -243,9 +243,9 @@
             }
             .k-gantt-pdf,
             .k-gantt-create {
-                padding: $kendo-button-padding-y;
-                width: $kendo-button-calc-size;
-                height: $kendo-button-calc-size;
+                padding: $kendo-button-md-padding-y;
+                width: $kendo-button-md-calc-size;
+                height: $kendo-button-md-calc-size;
 
                 .k-button-icon {}
                 .k-button-text {

package/scss/components/grid/_layout.scss

@@ -295,8 +295,8 @@
         }
 
         .k-grouping-row .k-icon {
-            margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
-            margin-inline-end: math.div( $kendo-icon-size, 2 );
+            margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: calc( $kendo-icon-size / 2 );
             text-decoration: none;
         }
 
@@ -448,7 +448,7 @@
     }
 
     .k-grouping-dropclue {
-        width: ($kendo-grid-group-drop-hint-size * 2);
+        width: calc($kendo-grid-group-drop-hint-size * 2);
         position: absolute;
         top: $kendo-grid-group-drop-hint-top;
         box-sizing: content-box;
@@ -481,7 +481,7 @@
     // Grid header / footer
     .k-grid-header-wrap,
     .k-grid-footer-wrap {
-        margin-inline-end: -#{$kendo-grid-cell-vertical-border-width};
+        margin-inline-end: calc( -1 * #{$kendo-grid-cell-vertical-border-width} );
         width: 100%;
         border-width: 0;
         border-inline-end-width: $kendo-grid-cell-vertical-border-width;
@@ -1006,7 +1006,7 @@
             }
 
             .k-grouping-row .k-icon {
-                margin-inline-start: calc( #{math.div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
+                margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
             }
 
             .k-grouping-dropclue {
@@ -1135,10 +1135,14 @@
 
     // Command cell
     .k-grid-stack-cell.k-command-cell {
-        display: flex;
-        flex-wrap: wrap;
         padding: 0;
         grid-column: 1 / -1;
+
+        .k-grid-stack-content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: $kendo-grid-command-cell-button-spacing;
+        }
     }
 
     // Dirty cell
@@ -1331,7 +1335,7 @@
     }
 
     .k-filter-selected-items {
-        font-weight: bold;
+        font-weight: var( --kendo-font-weight-bold, normal );
         line-height: normal;
         white-space: nowrap;
     }
@@ -1379,7 +1383,7 @@
         box-sizing: border-box;
 
         .k-menu:not(.k-context-menu) {
-            font-weight: 400;
+            font-weight: var( --kendo-font-weight, 400 );
         }
 
         .k-expander {
@@ -1498,7 +1502,7 @@
         border-bottom-style: solid;
         font-size: $kendo-grid-column-menu-group-header-font-size;
         line-height: $kendo-grid-column-menu-group-header-line-height;
-        font-weight: bold;
+        font-weight: var( --kendo-font-weight-bold, normal );
         text-transform: $kendo-grid-column-menu-group-header-text-transform;
         flex: 1 1 auto;
     }

package/scss/components/imageeditor/_layout.scss

@@ -115,14 +115,14 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) );
+            left: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
             width: $kendo-image-editor-resize-handle-size;
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - (#{math.div( $kendo-image-editor-resize-handle-size, 2 )}) );
+            top: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
             width: 0;
             height: $kendo-image-editor-resize-handle-size;
         }

package/scss/components/input/_layout.scss

@@ -66,8 +66,8 @@
     .k-input {}
     input.k-input,
     textarea.k-textarea {
-        padding-block: $kendo-input-padding-y;
-        padding-inline: $kendo-input-padding-x;
+        padding-block: $kendo-input-md-padding-y;
+        padding-inline: $kendo-input-md-padding-x;
     }
 
     textarea.k-textarea {
@@ -80,8 +80,8 @@
         cursor: pointer;
     }
     select.k-picker {
-        padding-block: $kendo-input-padding-y;
-        padding-inline: $kendo-input-padding-x;
+        padding-block: $kendo-input-md-padding-y;
+        padding-inline: $kendo-input-md-padding-x;
         appearance: auto;
         align-items: center;
     }
@@ -89,8 +89,8 @@
 
     // Input inner
     .k-input-inner {
-        padding-block: $kendo-input-padding-y;
-        padding-inline: $kendo-input-padding-x;
+        padding-block: $kendo-input-md-padding-y;
+        padding-inline: $kendo-input-md-padding-x;
         width: 100%;
         border: 0;
         outline: 0;
@@ -163,7 +163,7 @@
     // Icon picker
     .k-icon-picker {
         > .k-input-inner {
-            padding: $kendo-input-padding-y;
+            padding: $kendo-input-md-padding-y;
             // TODO we need better way
             // width: $kendo-input-inner-calc-height;
             // height: $kendo-input-inner-calc-height;

package/scss/components/input/_theme.scss

@@ -77,11 +77,17 @@
 
         // Prefix & Suffix
         .k-input-prefix {
-            color: $kendo-input-prefix-text;
+            @include fill(
+                $kendo-input-prefix-text,
+                $kendo-input-prefix-bg,
+            );
         }
 
         .k-input-suffix {
-            color: $kendo-input-suffix-text;
+            @include fill(
+                $kendo-input-suffix-text,
+                $kendo-input-suffix-bg,
+            );
         }
 
         .k-input-separator {