@progress/kendo-theme-core 11.0.0-dev.0 → 11.0.0-dev.1

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.0.0-dev.0",
+  "version": "11.0.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,5 +45,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "b83fa9575266e751edf9317822154d05a4fc566a"
+  "gitHead": "57358fb664667fda76ce2febcd9bf331796b263c"
 }

package/scss/components/action-sheet/_layout.scss

@@ -184,6 +184,7 @@
     }
     .k-actionsheet-item-description {
         font-size: $kendo-actionsheet-item-description-font-size;
+        line-height: $kendo-actionsheet-item-description-line-height;
     }
 
 
@@ -250,6 +251,7 @@
         max-width: 100%;
         width: 100%;
         font-size: $kendo-adaptive-actionsheet-font-size;
+        line-height: $kendo-adaptive-actionsheet-line-height;
 
         .k-actionsheet-titlebar {
             padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
@@ -372,7 +374,6 @@
 
         .k-colorgradient-canvas {
             .k-hsv-gradient {
-                aspect-ratio: 1;
                 height: 100%;
             }
         }

package/scss/components/action-sheet/_variables.scss

@@ -59,6 +59,7 @@ $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
 
 $kendo-actionsheet-item-description-font-size: null !default;
+$kendo-actionsheet-item-description-line-height: null !default;
 $kendo-actionsheet-item-description-text: null !default;
 
 $kendo-actionsheet-item-hover-bg: null !default;
@@ -85,6 +86,7 @@ $kendo-actionsheet-item-disabled-opacity: null !default;
 
 // Adaptive Actionsheet
 $kendo-adaptive-actionsheet-font-size: null !default;
+$kendo-adaptive-actionsheet-line-height: null !default;
 $kendo-adaptive-actionsheet-titlebar-padding-y: null !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: null !default;
 

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

@@ -10,17 +10,17 @@
     @each $name, $color in $kendo-bottom-navigation-theme-colors {
         .k-bottom-nav-solid-#{$name} {
             @include fill(
-                $color: color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent),
+                $color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent),
                 $bg: $color
             );
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent));
+                @include fill( $bg: color-mix(in srgb, k-color(on-#{$name}) 12.5%, transparent));
             }
 
             .k-bottom-nav-item.k-selected {
-                @include fill( $color: k-color( on-#{$name} ));
+                @include fill( $color: k-color(on-#{$name}));
             }
         }
         // TODO: remove when suites update class names
@@ -40,12 +40,12 @@
 
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: color-mix(in srgb, k-color( on-app-surface ) 5%, transparent));
+                @include fill( $bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent));
             }
 
             .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
-                    @include fill( $color: k-color( #{$name} ));
+                    @include fill( $color: k-color(#{$name}));
                 } @else {
                     @include fill( $color: $color );
                 }

package/scss/components/button/_layout.scss

@@ -15,6 +15,7 @@
         color: inherit;
         background: none;
         font-family: $kendo-button-font-family;
+        font-weight: $kendo-button-font-weight;
         text-align: center;
         text-decoration: none;
         white-space: nowrap;

package/scss/components/button/_theme.scss

@@ -110,7 +110,7 @@
                 &:focus,
                 &.k-focus {
                     @if ( $kendo-solid-button-shadow ) {
-                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true );
+                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color($name) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true );
                     }
                 }
 
@@ -150,7 +150,7 @@
 
 
     // Outline button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color( on-app-surface ) ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface) ) ) {
         .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
@@ -162,13 +162,13 @@
             &.k-hover {
                 @if $name == "base" {
                     @include fill(
-                        k-color( base ),
-                        k-color( on-base ),
-                        k-color( on-base )
+                        k-color(base),
+                        k-color(on-base),
+                        k-color(on-base)
                     );
                 } @else {
                     @include fill(
-                        k-color( on-#{$name} ),
+                        k-color(on-#{$name}),
                         $color,
                         $color
                     );
@@ -180,9 +180,9 @@
             &.k-focus {
                 @if $kendo-outline-button-shadow {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
                     }
                 }
             }
@@ -192,13 +192,13 @@
             &.k-active {
                 @if $name == "base" {
                     @include fill(
-                        k-color( base ),
-                        k-color( on-base ),
-                        k-color( on-base )
+                        k-color(base ),
+                        k-color(on-base ),
+                        k-color(on-base )
                     );
                 } @else {
                     @include fill(
-                        k-color( on-#{$name} ),
+                        k-color(on-#{$name} ),
                         $color,
                         $color
                     );
@@ -209,13 +209,13 @@
             &.k-selected {
                 @if $name == "base" {
                     @include fill(
-                        k-color( base ),
-                        k-color( on-base ),
-                        k-color( on-base )
+                        k-color(base ),
+                        k-color(on-base ),
+                        k-color(on-base )
                     );
                 } @else {
                     @include fill(
-                        k-color( on-#{$name} ),
+                        k-color(on-#{$name} ),
                         $color,
                         $color
                     );
@@ -250,7 +250,7 @@
 
 
     // Link button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color( on-app-surface ) ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
         .k-button-link-#{$name} {
             color: $color;
 
@@ -269,9 +269,9 @@
             &.k-focus {
                 @if ( $kendo-link-button-shadow ) {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
                     }
                 }
             }
@@ -305,7 +305,7 @@
 
 
     // Clear button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color( on-app-surface ) ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
         .k-button-clear-#{$name} {
             color: k-color(#{$name}-on-surface);
 

package/scss/components/button/_variables.scss

@@ -15,6 +15,7 @@ $kendo-button-md-padding-y: null !default;
 $kendo-button-lg-padding-y: null !default;
 
 $kendo-button-font-family: null !default;
+$kendo-button-font-weight: null !default;
 
 $kendo-button-font-size: null !default;
 $kendo-button-sm-font-size: null !default;

package/scss/components/calendar/_layout.scss

@@ -12,6 +12,7 @@
         block-size: var( --INTERNAL--kendo-calendar-height, min-content );
         border-width: $kendo-calendar-border-width;
         border-style: solid;
+        border-radius: $kendo-calendar-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-calendar-font-family;
@@ -177,7 +178,8 @@
         overflow: hidden;
 
         .k-today {
-            font-weight: bold;
+            font-weight: $kendo-calendar-today-font-weight;
+            box-shadow: $kendo-calendar-today-box-shadow;
         }
     }
 

package/scss/components/calendar/_theme.scss

@@ -128,6 +128,10 @@
             );
         }
 
+        .k-calendar-navigation-marker {
+            color: $kendo-calendar-navigation-marker-text;
+        }
+
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
@@ -159,7 +163,6 @@
     .k-calendar { // stylelint-disable-line
 
         $kendo-calendar-range-gap: k-spacing(1px) !default;
-        $kendo-calendar-range-bg: color-mix(in srgb, k-color(primary) 25%, transparent);
         $kendo-calendar-range-split-size: 5px !default;
 
         .k-range-start,

package/scss/components/calendar/_variables.scss

@@ -5,6 +5,7 @@ $kendo-calendar-border-width: null !default;
 $kendo-calendar-font-family: null !default;
 $kendo-calendar-font-size: null !default;
 $kendo-calendar-line-height: null !default;
+$kendo-calendar-border-radius: null !default;
 
 $kendo-calendar-cell-size: null !default;
 
@@ -66,6 +67,8 @@ $kendo-calendar-weekend-text: null !default;
 
 $kendo-calendar-today-style: null !default;
 $kendo-calendar-today-color: null !default;
+$kendo-calendar-today-font-weight: null !default;
+$kendo-calendar-today-box-shadow: null !default;
 
 $kendo-calendar-week-number-bg: null !default;
 $kendo-calendar-week-number-text: null !default;
@@ -106,6 +109,10 @@ $kendo-calendar-navigation-border: null !default;
 
 $kendo-calendar-navigation-hover-text: null !default;
 
+$kendo-calendar-navigation-marker-text: null !default;
+
+$kendo-calendar-range-bg: null !default;
+
 $kendo-infinite-calendar-header-padding-x: null !default;
 $kendo-infinite-calendar-header-padding-y: null !default;
 
@@ -114,7 +121,6 @@ $kendo-infinite-calendar-view-padding-y: null !default;
 
 $kendo-infinite-calendar-view-height: null !default;
 
-
 // Multiview calendar
 
 $kendo-calendar-range-cell-border-radius: null !default;

package/scss/components/chat/_theme.scss

@@ -83,7 +83,7 @@
 
             &:focus,
             &.k-focus {
-                @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), true, true );
+                @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread color-mix(in srgb, k-color(primary) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), true, true );
             }
         }
     }

package/scss/components/chip/_layout.scss

@@ -11,6 +11,7 @@
         border-style: solid;
         outline: 0;
         font-family: var( --kendo-font-family, inherit );
+        font-weight: $kendo-chip-font-weight;
         font-size: $kendo-chip-font-size;
         line-height: $kendo-chip-line-height;
         display: inline-flex;

package/scss/components/chip/_theme.scss

@@ -35,26 +35,36 @@
                 }
             } @else {
                 @include fill(
-                    k-color( #{$name}-on-subtle ),
-                    k-color( #{$name}-subtle ),
-                    k-color( #{$name}-emphasis ),
+                    k-color(#{$name}-on-subtle),
+                    k-color(#{$name}-subtle),
+                    k-color(#{$name}-emphasis),
                     $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color( $name ) 16%, transparent));
+                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color($name) 16%, transparent));
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: k-color( #{$name}-subtle-hover ));
+                    @include fill( $bg: k-color(#{$name}-subtle-hover));
                 }
 
                 &.k-selected {
-                    @include fill( $bg: k-color( #{$name}-subtle-active ));
+                    @include fill( $bg: k-color(#{$name}-subtle-active));
                 }
             }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                @include fill(
+                    $kendo-chip-disabled-text,
+                    $kendo-chip-disabled-bg,
+                    $kendo-chip-disabled-border,
+                );
+            }
         }
     }
 
@@ -90,59 +100,66 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    k-color( on-app-surface ),
+                    k-color(on-app-surface),
                     transparent,
                     $color
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color( $name ) 16%, transparent));
+                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color($name) 16%, transparent));
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: k-color( on-#{$name} ),
+                        $color: k-color(on-#{$name}),
                         $bg: $color
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: k-color( on-#{$name} ),
+                        $color: k-color(on-#{$name}),
                         $bg: $color
                     );
                 }
             } @else {
                 @include fill(
-                    k-color( #{$name}-on-surface ),
+                    k-color(#{$name}-on-surface),
                     transparent,
-                    k-color( #{$name}-on-surface )
+                    k-color(#{$name}-on-surface)
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color( $name ) 16%, transparent));
+                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color($name) 16%, transparent));
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        k-color( on-#{$name} ),
-                        k-color( #{$name}-hover ),
-                        k-color( #{$name}-hover )
+                        k-color(on-#{$name}),
+                        k-color(#{$name}-hover),
+                        k-color(#{$name}-hover)
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        k-color( on-#{$name} ),
-                        k-color( #{$name}-active ),
-                        k-color( #{$name}-active )
+                        k-color(on-#{$name}),
+                        k-color(#{$name}-active),
+                        k-color(#{$name}-active)
                     );
                 }
             }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-chip-disabled-text;
+                border-color: $kendo-chip-disabled-text;
+            }
         }
     }
 

package/scss/components/chip/_variables.scss

@@ -13,6 +13,8 @@ $kendo-chip-sm-padding-y: null !default;
 $kendo-chip-md-padding-y: null !default;
 $kendo-chip-lg-padding-y: null !default;
 
+$kendo-chip-font-weight: null !default;
+
 $kendo-chip-font-size: null !default;
 $kendo-chip-sm-font-size: null !default;
 $kendo-chip-md-font-size: null !default;
@@ -58,6 +60,10 @@ $kendo-chip-outline-hover-text: null !default;
 $kendo-chip-outline-selected-bg: null !default;
 $kendo-chip-outline-selected-text: null !default;
 
+$kendo-chip-disabled-bg: null !default;
+$kendo-chip-disabled-text: null !default;
+$kendo-chip-disabled-border: null !default;
+
 // Chip List
 
 $kendo-chip-list-sizes: null !default;

package/scss/components/colorgradient/_layout.scss

@@ -46,6 +46,7 @@
 
         .k-hsv-gradient {
             @include border-radius( $kendo-color-gradient-canvas-border-radius );
+            aspect-ratio: 1;
             height: $kendo-color-gradient-canvas-rectangle-height;
         }
 
@@ -133,8 +134,6 @@
     @each $size, $size-props in $kendo-color-gradient-sizes {
         $_width: map.get( $size-props, width );
         $_gap: map.get( $size-props, gap );
-        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
-        $_rectangle-height: map.get( $size-props, rectangle-height );
         $_input-width: map.get( $size-props, input-width );
         $_canvas-gap: map.get( $size-props, canvas-gap );
         $_padding-x: map.get( $size-props, padding-x );
@@ -155,14 +154,6 @@
             .k-colorgradient-canvas {
                 gap: $_canvas-gap;
 
-                .k-hsv-gradient {
-                    height: $_rectangle-height;
-                }
-
-                .k-slider-vertical {
-                    height: $_vertical-slider-height;
-                }
-
                 .k-hsv-controls {
                     gap: $_canvas-gap;
                 }

package/scss/components/colorgradient/_variables.scss

@@ -36,9 +36,6 @@ $kendo-color-gradient-focus-shadow: null !default;
 $kendo-color-gradient-canvas-border-radius: null !default;
 $kendo-color-gradient-canvas-gap: null !default;
 $kendo-color-gradient-canvas-rectangle-height: null !default;
-$kendo-color-gradient-sm-canvas-rectangle-height: null !default;
-$kendo-color-gradient-md-canvas-rectangle-height: null !default;
-$kendo-color-gradient-lg-canvas-rectangle-height: null !default;
 
 $kendo-color-gradient-sm-canvas-gap: null !default;
 $kendo-color-gradient-md-canvas-gap: null !default;
@@ -51,9 +48,6 @@ $kendo-color-gradient-slider-draghandle-border-width: null !default;
 $kendo-color-gradient-slider-vertical-size: null !default;
 $kendo-color-gradient-slider-horizontal-size: null !default;
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
-$kendo-color-gradient-sm-slider-vertical-size: null !default;
-$kendo-color-gradient-md-slider-vertical-size: null !default;
-$kendo-color-gradient-lg-slider-vertical-size: null !default;
 
 $kendo-color-gradient-draghandle-width: null !default;
 $kendo-color-gradient-draghandle-height: null !default;

package/scss/components/dialog/_theme.scss

@@ -5,6 +5,9 @@
 @use "./variables.scss" as *;
 
 @mixin kendo-dialog--theme-base() {
+    .k-dialog {
+        background-color: $kendo-dialog-bg;
+    }
 
     // Dialog titlebar
     .k-dialog-titlebar {

package/scss/components/dialog/_variables.scss

@@ -9,4 +9,6 @@ $kendo-dialog-buttongroup-padding-y: null !default;
 $kendo-dialog-buttongroup-border-width: null !default;
 $kendo-dialog-button-spacing: null !default;
 
+$kendo-dialog-bg: null !default;
+
 $kendo-dialog-theme-colors: null !default;

package/scss/components/drawer/_layout.scss

@@ -125,7 +125,8 @@
     }
     .k-drawer-items {
         margin: 0;
-        padding: 0;
+        padding-block: $kendo-drawer-items-padding-y;
+        padding-inline: $kendo-drawer-items-padding-x;
         list-style: none;
         display: flex;
         flex-direction: column;
@@ -134,13 +135,16 @@
     .k-drawer-item {
         padding-block: $kendo-drawer-item-padding-y;
         padding-inline: $kendo-drawer-item-padding-x;
+        border-radius: $kendo-drawer-item-border-radius;
         outline: 0;
         color: inherit;
         font-size: $kendo-drawer-item-font-size;
         line-height: $kendo-drawer-item-line-height;
+        font-weight: $kendo-drawer-item-font-weight;
         display: flex;
         flex-flow: row nowrap;
-        gap: $kendo-drawer-item-padding-x;
+        gap: $kendo-drawer-item-spacing;
+        align-items: center;
         cursor: pointer;
 
         > .k-drawer-link {

package/scss/components/drawer/_theme.scss

@@ -54,6 +54,11 @@
                 color: $kendo-drawer-selected-hover-text;
                 background-color: $kendo-drawer-selected-hover-bg;
             }
+
+            &:focus,
+            &.k-focus {
+                background-color: $kendo-drawer-selected-focus-bg;
+            }
         }
     }
     .k-drawer-separator {

package/scss/components/drawer/_variables.scss

@@ -19,13 +19,18 @@ $kendo-drawer-scrollbar-bg: null !default;
 $kendo-drawer-scrollbar-radius: null !default;
 $kendo-drawer-scrollbar-hover-color: null !default;
 
+$kendo-drawer-items-padding-x: null !default;
+$kendo-drawer-items-padding-y: null !default;
 $kendo-drawer-item-padding-x: null !default;
 $kendo-drawer-item-padding-y: null !default;
+$kendo-drawer-item-spacing: null !default;
 $kendo-drawer-item-font-size: null !default;
 $kendo-drawer-item-line-height: null !default;
+$kendo-drawer-item-font-weight: null !default;
 
 $kendo-drawer-item-level-padding-x: null !default;
 $kendo-drawer-item-level-count: null !default;
+$kendo-drawer-item-border-radius: null !default;
 
 $kendo-drawer-icon-padding-x: null !default;
 
@@ -44,3 +49,5 @@ $kendo-drawer-selected-text: null !default;
 
 $kendo-drawer-selected-hover-bg: null !default;
 $kendo-drawer-selected-hover-text: null !default;
+
+$kendo-drawer-selected-focus-bg: null !default;

package/scss/components/editor/_theme.scss

@@ -6,9 +6,9 @@
 
     .k-editor {
         @include fill(
-            k-color( on-app-surface ),
-            k-color( surface-alt ),
-            k-color( border )
+            k-color(on-app-surface),
+            k-color(surface-alt),
+            k-color(border)
         );
 
         &.k-readonly {

package/scss/components/fab/_theme.scss

@@ -95,7 +95,7 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px k-color( on-app-surface ));
+            @include box-shadow( inset 0 0 0 2px k-color(on-app-surface));
         } @else {
             outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }

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

@@ -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) );
         }
     }
 

package/scss/components/forms/_theme.scss

@@ -6,7 +6,7 @@
 
     .k-form,
     .k-form-inline {
-        @include fill( $color: k-color( on-app-surface ) );
+        @include fill( $color: k-color(on-app-surface) );
 
         fieldset {
             legend {
@@ -19,18 +19,18 @@
         }
 
         .k-field-info {
-            @include fill( $color: k-color( subtle ) );
+            @include fill( $color: k-color(subtle) );
         }
 
         .k-alert-error {
-            @include fill( $color: k-color( error ) );
+            @include fill( $color: k-color(error) );
         }
     }
 
     .k-form-error,
     .k-text-error,
     .k-form-field-error .k-label {
-        @include fill( $color: k-color( error ) );
+        @include fill( $color: k-color(error) );
     }
 
     .k-form-separator {

package/scss/components/gantt/_theme.scss

@@ -103,7 +103,7 @@
         );
 
         &.k-task-delayed {
-            @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color( app-surface ), 90deg, 4px, 2px);
+            @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color(app-surface), 90deg, 4px, 2px);
         }
 
         &.k-task-advanced {
@@ -227,7 +227,7 @@
 
     // Delay offset
     .k-task-offset {
-        @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color( app-surface ), 135deg, 4px, 2px);
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color(app-surface), 135deg, 4px, 2px);
 
         .k-resize-e::before {
             @include fill(
@@ -241,7 +241,7 @@
     }
 
     .k-task-offset:hover {
-        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, k-color( app-surface ), 135deg, 4px, 2px);
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, k-color(app-surface), 135deg, 4px, 2px);
     }
 
     .k-pdf-export .k-task-offset {

package/scss/components/input/_layout.scss

@@ -518,11 +518,7 @@
                 box-sizing: content-box;
             }
         }
-        .k-dropdown-operator.k-picker-#{$size} {
-            .k-input-button {
-                padding: $_padding-y;
-            }
-        }
+
         select.k-picker-#{$size} {
             padding-block: $_padding-y;
             padding-inline: $_padding-x;

package/scss/components/list/_layout.scss

@@ -21,6 +21,7 @@
         margin: 0;
         padding: 0;
         box-sizing: border-box;
+        border-radius: inherit;
         font-family: $kendo-list-font-family;
         font-size: $kendo-list-font-size;
         line-height: $kendo-list-line-height;
@@ -160,9 +161,6 @@
 
     // List item group label
     .k-list-item-group-label {
-        padding-block: 0;
-        padding-inline: .5em;
-        font-size: .75em;
         position: absolute;
         top: 0;
         inset-inline-end: 0;
@@ -197,7 +195,8 @@
     .k-list-filter {
         display: block;
         position: relative;
-        padding: $kendo-list-filter-padding;
+        padding-inline: $kendo-list-filter-padding-x;
+        padding-block: $kendo-list-filter-padding-y;
         box-sizing: border-box;
         flex: none;
     }
@@ -221,6 +220,12 @@
         $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
         $_group-item-font-size: map.get( $size-props, group-item-font-size );
         $_group-item-line-height: map.get( $size-props, group-item-line-height );
+        $_group-label-padding-x: map.get( $size-props, item-group-label-padding-x );
+        $_group-label-padding-y: map.get( $size-props, item-group-label-padding-y );
+        $_group-label-font-size: map.get( $size-props, item-group-label-font-size );
+        $_group-label-line-height: map.get( $size-props, item-group-label-line-height );
+        $_filter-padding-x: map.get( $size-props, filter-padding-x );
+        $_filter-padding-y: map.get( $size-props, filter-padding-y );
 
         .k-list-#{$size} {
             font-size: $_font-size;
@@ -234,6 +239,11 @@
                 line-height: $_header-line-height;
             }
 
+            .k-list-filter {
+                padding-inline: $_filter-padding-x;
+                padding-block: $_filter-padding-y;
+            }
+
             .k-list-item {
                 padding-block: $_item-padding-y;
                 padding-inline: $_item-padding-x;
@@ -247,6 +257,13 @@
                 font-size: $_group-item-font-size;
                 line-height: $_group-item-line-height;
             }
+
+            .k-list-item-group-label {
+                padding-block: $_group-label-padding-y;
+                padding-inline: $_group-label-padding-x;
+                font-size: $_group-label-font-size;
+                line-height: $_group-label-line-height;
+            }
         }
     }
 }

package/scss/components/list/_variables.scss

@@ -36,7 +36,31 @@ $kendo-list-lg-header-line-height: null !default;
 
 $kendo-list-header-font-weight: null !default;
 
+$kendo-list-item-group-label-sm-font-size: null !default;
+$kendo-list-item-group-label-md-font-size: null !default;
+$kendo-list-item-group-label-lg-font-size: null !default;
+
+$kendo-list-item-group-label-sm-line-height: inherit !default;
+$kendo-list-item-group-label-md-line-height: inherit !default;
+$kendo-list-item-group-label-lg-line-height: inherit !default;
+
+$kendo-list-item-group-label-sm-padding-x: null !default;
+$kendo-list-item-group-label-md-padding-x: null !default;
+$kendo-list-item-group-label-lg-padding-x: null !default;
+
+$kendo-list-item-group-label-sm-padding-y: 0 !default;
+$kendo-list-item-group-label-md-padding-y: 0 !default;
+$kendo-list-item-group-label-lg-padding-y: 0 !default;
+
 $kendo-list-filter-padding: null !default;
+$kendo-list-filter-padding-x: null !default;
+$kendo-list-sm-filter-padding-x: null !default;
+$kendo-list-md-filter-padding-x: null !default;
+$kendo-list-lg-filter-padding-x: null !default;
+$kendo-list-filter-padding-y: null !default;
+$kendo-list-sm-filter-padding-y: null !default;
+$kendo-list-md-filter-padding-y: null !default;
+$kendo-list-lg-filter-padding-y: null !default;
 
 $kendo-list-item-padding-x: null !default;
 $kendo-list-sm-item-padding-x: null !default;

package/scss/components/menu/_layout.scss

@@ -84,6 +84,8 @@
     // Expand arrow
     .k-menu-expand-arrow {
         margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
+        padding-block: $kendo-menu-icon-padding-y;
+        padding-inline: $kendo-menu-icon-padding-x;
         display: inline-flex;
         flex-flow: row wrap;
         align-items: center;

package/scss/components/menu/_variables.scss

@@ -52,6 +52,8 @@ $kendo-menu-scroll-button-hover-text: null !default;
 $kendo-menu-scroll-button-hover-border: null !default;
 $kendo-menu-scroll-button-hover-gradient: null !default;
 
+$kendo-menu-icon-padding-x: null !default;
+$kendo-menu-icon-padding-y: null !default;
 
 // Menu Separator
 

package/scss/components/messagebox/_theme.scss

@@ -11,15 +11,15 @@
         .k-messagebox-#{$color-name} {
             @if $color-name == "inverse" {
                 @include fill(
-                    k-color( dark-on-subtle ),
-                    k-color( dark-subtle ),
-                    k-color( dark-hover )
+                    k-color(dark-on-subtle),
+                    k-color(dark-subtle),
+                    k-color(dark-hover)
                 );
             } @else {
                 @include fill(
-                    k-color( #{$color-name}-on-subtle ),
-                    k-color( #{$color-name}-subtle ),
-                    k-color( #{$color-name}-emphasis )
+                    k-color(#{$color-name}-on-subtle),
+                    k-color(#{$color-name}-subtle),
+                    k-color(#{$color-name}-emphasis)
                 );
             }
         }

package/scss/components/notification/_layout.scss

@@ -55,6 +55,8 @@
     }
 
     .k-notification-actions {
+        padding-inline: $kendo-notification-actions-padding-x;
+        padding-block: $kendo-notification-actions-padding-y;
         flex: none;
         display: flex;
         gap: $kendo-notification-icon-spacing;

package/scss/components/notification/_variables.scss

@@ -9,6 +9,8 @@ $kendo-notification-border-radius: k-border-radius(md)!default;
 $kendo-notification-font-family: null !default;
 $kendo-notification-font-size: null !default;
 $kendo-notification-line-height: null !default;
+$kendo-notification-actions-padding-x: null !default;
+$kendo-notification-actions-padding-y: null !default;
 $kendo-notification-bg: null !default;
 $kendo-notification-text: null !default;
 $kendo-notification-border: null !default;

package/scss/components/pager/_layout.scss

@@ -52,9 +52,6 @@
         &:hover {
             z-index: 2;
         }
-        &.k-disabled {
-            color: inherit;
-        }
     }
 
 

package/scss/components/panel/_theme.scss

@@ -14,9 +14,9 @@
 
         > .k-header {
             @include fill(
-                k-color( on-app-surface ),
-                k-color( surface-alt ),
-                k-color( border )
+                k-color(on-app-surface),
+                k-color(surface-alt),
+                k-color(border)
             );
         }
     }

package/scss/components/pivotgrid/_theme.scss

@@ -134,7 +134,7 @@
     }
 
     .k-pivotgrid-configurator-content .k-form-field-wrapper {
-        @include fill( $border: k-color( border ) );
+        @include fill( $border: k-color(border) );
     }
 
 

package/scss/components/progressbar/_theme.scss

@@ -36,7 +36,7 @@
 
     .k-progressbar-indeterminate {
         @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
-        @include striped-gradient( color-mix(in srgb, k-color( base-emphasis ) 55%, transparent) );
+        @include striped-gradient( color-mix(in srgb, k-color(base-emphasis) 55%, transparent) );
         background-size: $kendo-progressbar-height $kendo-progressbar-height;
         animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
     }

package/scss/components/scheduler/_theme.scss

@@ -170,9 +170,9 @@
         .k-scheduler-content .k-scheduler-row:hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
-                k-color( on-app-surface ),
-                k-color( base-hover ),
-                k-color( border ),
+                k-color(on-app-surface),
+                k-color(base-hover),
+                k-color(border),
                 null
             );
         }

package/scss/components/slider/_layout.scss

@@ -283,14 +283,14 @@
     .k-slider-horizontal :is(.k-slider-track, .k-slider-selection) {
         height: $kendo-slider-track-thickness;
         left: 0;
-        margin-top: - math.div( $kendo-slider-track-thickness, 2 );
+        margin-top: calc( #{$kendo-slider-track-thickness} / -2 );
         top: 50%;
     }
 
     .k-slider-vertical :is(.k-slider-track, .k-slider-selection) {
         bottom: 0;
         left: 50%;
-        margin-left: - math.div( $kendo-slider-track-thickness, 2 );
+        margin-left: calc( #{$kendo-slider-track-thickness} / -2 );
         width: $kendo-slider-track-thickness;
     }
 

package/scss/components/slider/_theme.scss

@@ -54,6 +54,11 @@
                 );
             }
 
+            &:hover,
+            &.k-hover {
+                @include focus-indicator( $kendo-slider-draghandle-hover-shadow );
+            }
+
             &:focus,
             &.k-focus {
                 @include focus-indicator( $kendo-slider-draghandle-focus-shadow );

package/scss/components/slider/_variables.scss

@@ -27,6 +27,7 @@ $kendo-slider-draghandle-hover-bg: null !default;
 $kendo-slider-draghandle-hover-text: null !default;
 $kendo-slider-draghandle-hover-border: null !default;
 $kendo-slider-draghandle-hover-gradient: null !default;
+$kendo-slider-draghandle-hover-shadow: null !default;
 
 $kendo-slider-draghandle-pressed-bg: null !default;
 $kendo-slider-draghandle-pressed-text: null !default;
@@ -46,3 +47,5 @@ $kendo-slider-disabled-opacity: null !default;
 
 $kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
 $kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+
+$kendo-slider-tick-marker-bg: null !default;

package/scss/components/stepper/_theme.scss

@@ -37,7 +37,7 @@
             .k-step-link:focus  {
                 // Labels only
                 .k-step-label:only-child {
-                    @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color( border ) ), $inset: true );
+                    @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color(border ) ), $inset: true );
                 }
             }
 
@@ -48,7 +48,7 @@
                 .k-step-indicator {
                     @include fill(
                         $kendo-stepper-indicator-disabled-text,
-                        k-color( app-surface ),
+                        k-color(app-surface),
                         $kendo-stepper-indicator-disabled-border
                     );
 
@@ -70,13 +70,13 @@
             );
         }
         .k-step-indicator::after {
-            @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color( surface-alt ) );
+            @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color(surface-alt ) );
         }
         .k-step-label:only-child {
             @include fill(
-                k-color( on-app-surface ),
-                k-color( surface-alt ),
-                k-color( border )
+                k-color(on-app-surface ),
+                k-color(surface-alt ),
+                k-color(border )
             );
         }
 
@@ -114,7 +114,7 @@
                 .k-step-indicator {
                     @include fill(
                         $kendo-stepper-indicator-done-disabled-text,
-                        k-color( app-surface ),
+                        k-color(app-surface ),
                         $kendo-stepper-indicator-done-disabled-border
                     );
 
@@ -160,7 +160,7 @@
                 .k-step-indicator {
                     @include fill(
                         $kendo-stepper-indicator-current-disabled-text,
-                        k-color( app-surface ),
+                        k-color(app-surface ),
                         $kendo-stepper-indicator-current-disabled-border
                     );
 

package/scss/components/switch/_theme.scss

@@ -63,7 +63,7 @@
                     $kendo-switch-off-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px k-color( on-app-surface ));
+                    @include box-shadow( 0 0 0 2px k-color(on-app-surface));
                 } @else {
                     outline: $kendo-switch-off-track-focus-ring;
                 }
@@ -81,6 +81,15 @@
                     $kendo-switch-off-track-disabled-gradient
                 );
             }
+
+            .k-switch-thumb {
+                @include fill(
+                    $kendo-switch-off-thumb-disabled-text,
+                    $kendo-switch-off-thumb-disabled-bg,
+                    $kendo-switch-off-thumb-disabled-border,
+                    $kendo-switch-off-thumb-disabled-gradient
+                );
+            }
         }
 
         .k-switch-label-on {
@@ -143,7 +152,7 @@
                     $kendo-switch-on-track-focus-gradient
                 );
                 @if $kendo-enable-focus-contrast {
-                    @include box-shadow( 0 0 0 2px k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ));
+                    @include box-shadow( 0 0 0 2px k-color(on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ));
                 } @else {
                     outline: $kendo-switch-on-track-focus-ring;
                 }
@@ -161,6 +170,15 @@
                     $kendo-switch-on-track-disabled-gradient
                 );
             }
+
+            .k-switch-thumb {
+                @include fill(
+                    $kendo-switch-on-thumb-disabled-text,
+                    $kendo-switch-on-thumb-disabled-bg,
+                    $kendo-switch-on-thumb-disabled-border,
+                    $kendo-switch-on-thumb-disabled-gradient
+                );
+            }
         }
 
         .k-switch-label-off {

package/scss/components/switch/_variables.scss

@@ -43,6 +43,11 @@ $kendo-switch-off-thumb-hover-text: null !default;
 $kendo-switch-off-thumb-hover-border: null !default;
 $kendo-switch-off-thumb-hover-gradient: null !default;
 
+$kendo-switch-off-thumb-disabled-bg: null !default;
+$kendo-switch-off-thumb-disabled-text: null !default;
+$kendo-switch-off-thumb-disabled-border: null !default;
+$kendo-switch-off-thumb-disabled-gradient: null !default;
+
 
 $kendo-switch-on-track-bg: null !default;
 $kendo-switch-on-track-text: null !default;
@@ -74,3 +79,8 @@ $kendo-switch-on-thumb-hover-bg: null !default;
 $kendo-switch-on-thumb-hover-text: null !default;
 $kendo-switch-on-thumb-hover-border: null !default;
 $kendo-switch-on-thumb-hover-gradient: null !default;
+
+$kendo-switch-on-thumb-disabled-bg: null !default;
+$kendo-switch-on-thumb-disabled-text: null !default;
+$kendo-switch-on-thumb-disabled-border: null !default;
+$kendo-switch-on-thumb-disabled-gradient: null !default;

package/scss/components/tabstrip/_layout.scss

@@ -449,7 +449,6 @@
                 display: none !important; // stylelint-disable-line declaration-no-important
             }
         }
-
     }
 
 

package/scss/components/tabstrip/_theme.scss

@@ -94,9 +94,21 @@
     // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {
 
-        .k-tabstrip-items-wrapper {
-            .k-item.k-active::after {
-                border-color: $kendo-tabstrip-indicator-color;
+        .k-tabstrip-top,
+        .k-tabstrip-bottom {
+            > .k-tabstrip-items-wrapper {
+                .k-item.k-active .k-link::after {
+                    background: $kendo-tabstrip-indicator-color;
+                }
+            }
+        }
+
+        .k-tabstrip-left,
+        .k-tabstrip-right {
+            > .k-tabstrip-items-wrapper {
+                .k-item.k-active::after {
+                    background: $kendo-tabstrip-indicator-color;
+                }
             }
         }
     }

package/scss/components/tabstrip/_variables.scss

@@ -53,7 +53,6 @@ $kendo-tabstrip-item-selected-border: null !default;
 $kendo-tabstrip-item-selected-gradient: null !default;
 $kendo-tabstrip-item-selected-font-weight: null !default;
 
-
 $kendo-tabstrip-item-focus-shadow: null !default;
 
 $kendo-tabstrip-item-dragging-shadow: null !default;

package/scss/components/timeselector/_theme.scss

@@ -18,14 +18,15 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
+        .k-title {
+            color: $kendo-time-selector-header-title-text;
+        }
 
         .k-time-now {
-            // TODO: use a variable
-            color: $kendo-time-selector-now-button-text;
+            color: $kendo-time-selector-header-time-now-text;
         }
         .k-time-now:hover {
-            // TODO: use a variable
-            color: $kendo-time-selector-now-button-hover-text;
+            color: $kendo-time-selector-header-time-now-hover-text;
         }
     }
 

package/scss/components/timeselector/_variables.scss

@@ -12,6 +12,9 @@ $kendo-time-selector-border: null !default;
 $kendo-time-selector-header-padding-x: null !default;
 $kendo-time-selector-header-padding-y: null !default;
 $kendo-time-selector-header-border-width: null !default;
+$kendo-time-selector-header-title-text: null !default;
+$kendo-time-selector-header-time-now-text: null !default;
+$kendo-time-selector-header-time-now-hover-text: null !default;
 
 $kendo-time-selector-fast-selection-gap: null !default;
 

package/scss/components/typography/_theme.scss

@@ -6,8 +6,8 @@
 
     .k-body {
         @include fill(
-            k-color( on-app-surface ),
-            k-color( app-surface )
+            k-color(on-app-surface),
+            k-color(app-surface)
         );
     }