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

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/_theme.scss

@@ -64,7 +64,7 @@
         &.k-selected:hover,
         &.k-selected.k-hover {
             color: $kendo-list-item-selected-text;
-            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
+            background-color: k-color(primary-hover);
         }
     }
 

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/listbox/_theme.scss

@@ -1,5 +1,5 @@
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-listbox--theme-base() {
@@ -14,7 +14,7 @@
             );
         }
         .k-drop-hint {
-            border-top-color: $kendo-color-primary;
+            border-top-color: k-color(primary);
         }
     }
 

package/scss/components/loader/_theme.scss

@@ -1,9 +1,9 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-loader--theme-base() {
 
-    @each $name, $color in $kendo-theme-colors {
+    @each $name, $color in $kendo-loader-theme-colors {
         .k-loader-#{$name} {
             color: $color;
         }

package/scss/components/loader/_variables.scss

@@ -49,3 +49,5 @@ $kendo-loading-bg: null !default;
 $kendo-loading-text: null !default;
 $kendo-loading-opacity: null !default;
 $kendo-zindex-loading: null !default;
+
+$kendo-loader-theme-colors: null !default;

package/scss/components/marquee/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-marquee--styles() {
+    @include import-once( "marquee" ) {
+        @include core-styles();
+        @include kendo-marquee--layout();
+        @include kendo-marquee--theme();
+    }
+}

package/scss/components/marquee/_layout.scss

@@ -0,0 +1,21 @@
+@mixin kendo-marquee--layout-base() {
+    // Marquee
+    .k-marquee {
+        position: absolute;
+        z-index: 100000;
+    }
+
+    .k-marquee-color,
+    .k-marquee-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+@mixin kendo-marquee--layout() {
+    @include kendo-marquee--layout-base();
+}

package/scss/components/marquee/_theme.scss

@@ -0,0 +1,27 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-marquee--theme-base() {
+    // Marquee
+    .k-marquee-color {
+        color: $kendo-marquee-text;
+        background-color: $kendo-marquee-bg;
+        border-color: $kendo-marquee-border;
+        opacity: .6;
+    }
+    .k-marquee-text {
+        color: $kendo-marquee-text;
+    }
+
+    // Text selection
+    .k-text-selection {
+        ::selection {
+            background-color: $kendo-marquee-bg;
+            color: $kendo-marquee-text;
+        }
+    }
+}
+
+
+@mixin kendo-marquee--theme() {
+    @include kendo-marquee--theme-base();
+}

package/scss/components/marquee/_variables.scss

@@ -0,0 +1,3 @@
+$kendo-marquee-text: null !default;
+$kendo-marquee-bg: null !default;
+$kendo-marquee-border: null !default;

package/scss/components/mediaplayer/_theme.scss

@@ -19,7 +19,7 @@
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
         background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 ));
+        text-shadow: 0 0 2px color-mix(in srgb, k-color(on-app-surface) 50%, transparent);
     }
 
 }

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

@@ -1,26 +1,25 @@
 
 @use "../../functions/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../_variables.scss" as *;
 
 @mixin kendo-messagebox--theme-base() {
 
-    @each $color-name, $color in $kendo-theme-colors {
+    @each $color-name, $color in $kendo-message-box-theme-colors {
         .k-messagebox-#{$color-name} {
             @if $color-name == "inverse" {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
-                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
-                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
+                    k-color(dark-on-subtle),
+                    k-color(dark-subtle),
+                    k-color(dark-hover)
                 );
             } @else {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
-                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
-                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
+                    k-color(#{$color-name}-on-subtle),
+                    k-color(#{$color-name}-subtle),
+                    k-color(#{$color-name}-emphasis)
                 );
             }
         }

package/scss/components/messagebox/_variables.scss

@@ -13,3 +13,5 @@ $kendo-message-box-border-level: null !default;
 
 $kendo-message-box-link-font-style: null !default;
 $kendo-message-box-link-text-decoration: null !default;
+
+$kendo-message-box-theme-colors: null !default;

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;
@@ -21,7 +23,7 @@ $kendo-notification-icon-spacing: null !default;
 
     @each $name, $color in $colors {
         $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+            color: k-color(on-#{$name}),
             background-color: $color,
             border: $color,
         )), $_theme );

package/scss/components/pager/_layout.scss

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

package/scss/components/panel/_theme.scss

@@ -1,5 +1,5 @@
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-panel--theme--base() {
@@ -14,9 +14,9 @@
 
         > .k-header {
             @include fill(
-                var( --kendo-component-text, #{$kendo-component-text} ),
-                var( --kendo-component-bg, #{$kendo-component-bg} ),
-                var( --kendo-component-border, #{$kendo-component-border} )
+                k-color(on-app-surface),
+                k-color(surface-alt),
+                k-color(border)
             );
         }
     }

package/scss/components/pivotgrid/_theme.scss

@@ -1,5 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../popup/_variables.scss" as *;
 
@@ -134,7 +134,7 @@
     }
 
     .k-pivotgrid-configurator-content .k-form-field-wrapper {
-        @include fill( $border: $kendo-component-border );
+        @include fill( $border: k-color(border) );
     }
 
 
@@ -191,7 +191,7 @@
         );
 
         .k-empty {
-            color: $kendo-subtle-text;
+            color: k-color(subtle);
         }
     }
 
@@ -223,15 +223,15 @@
     }
 
     .k-i-kpi-status-hold {
-        color: $kendo-color-warning;
+        color: k-color(warning);
     }
 
     .k-i-kpi-status-deny {
-        color: $kendo-color-error;
+        color: k-color(error);
     }
 
     .k-i-kpi-status-open {
-        color: $kendo-color-success;
+        color: k-color(success);
     }
 
 
@@ -239,7 +239,7 @@
     .k-pivotgrid-configurator-panel.kendo-jquery {
 
         .k-column-fields {
-            border-color: $kendo-component-border;
+            border-color: 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( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) );
+        @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/radio/_layout.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-radio--layout-base() {
@@ -72,10 +72,6 @@
 
 
     // Disabled state
-    .k-radio:disabled,
-    .k-radio.k-disabled {
-        @include disabled( $kendo-disabled-styling... );
-    }
     .k-radio:disabled:checked,
     .k-radio.k-disabled.k-checked {
         @if $kendo-radio-indicator-type == "image" {

package/scss/components/rating/_theme.scss

@@ -1,10 +1,10 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-rating--theme-base() {
 
     .k-rating {
-        color: $kendo-component-text;
+        color: k-color(on-app-surface);
 
         &:focus,
         &.k-focus {

package/scss/components/scheduler/_theme.scss

@@ -1,7 +1,6 @@
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -35,7 +34,7 @@
     }
 
     .k-scheduler-header {
-        background-color: $kendo-base-bg;
+        background-color: $kendo-scheduler-header-bg;
     }
 
     .k-scheduler-header-wrap {
@@ -74,7 +73,7 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+        background-color: color-mix(in srgb, k-color(primary) 25%, transparent);
     }
 
     .k-scheduler-layout-flex {
@@ -117,7 +116,7 @@
         }
 
         &.k-event-inverse {
-            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
+            color: if($kendo-enable-focus-contrast, black, k-color(on-app-surface));
         }
 
         &.k-event-ongoing {
@@ -134,7 +133,7 @@
     .k-scheduler-marquee {}
     .k-scheduler-marquee::before,
     .k-scheduler-marquee::after {
-        border-color: $kendo-color-primary;
+        border-color: k-color(primary);
     }
 
     // Edit dialog
@@ -171,10 +170,10 @@
         .k-scheduler-content .k-scheduler-row:hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
-                $kendo-hover-text,
-                $kendo-hover-bg,
-                $kendo-hover-border,
-                $kendo-hover-gradient
+                k-color(on-app-surface),
+                k-color(base-hover),
+                k-color(border),
+                null
             );
         }
 
@@ -191,7 +190,7 @@
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+            background-color: color-mix(in srgb, k-color(primary) 25%, transparent);
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {

package/scss/components/scheduler/_variables.scss

@@ -104,3 +104,5 @@ $kendo-scheduler-rtl-indicators-margin: null !default;
 
 $kendo-scheduler-marquee-label-inset-x: null !default;
 $kendo-scheduler-marquee-label-inset-y: null !default;
+
+$kendo-scheduler-header-bg: null !default;

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

@@ -1,4 +1,4 @@
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "../../border-radii/index.import.scss" as *;
 @use "./variables.scss" as *;
@@ -8,7 +8,7 @@
     // Slider
     .k-slider {
         // TODO: extract variables
-        color: $kendo-component-text;
+        color: k-color(on-app-surface);
 
         .k-slider-track,
         .k-slider-selection {
@@ -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/spreadsheet/_theme.scss

@@ -1,5 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
@@ -115,7 +115,7 @@
 
     // Filter button
     .k-spreadsheet .k-filter-range {
-        border-color: $kendo-color-primary;
+        border-color: k-color(primary);
     }
     .k-spreadsheet-filter {
         @include fill(