@progress/kendo-theme-core 14.7.0-dev.8 → 14.7.0

package/dist/meta/sassdoc-data.json

@@ -615,17 +615,17 @@
         {
             "description": "The sizes map of the Badge.\n",
             "commentRange": {
-                "start": 33,
-                "end": 34
+                "start": 38,
+                "end": 39
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-badge-sizes",
-                "value": "(\n    sm: (\n        padding-x: $kendo-badge-sm-padding-x,\n        padding-y: $kendo-badge-sm-padding-y,\n        font-size: $kendo-badge-sm-font-size,\n        line-height: $kendo-badge-sm-line-height,\n        min-width: $kendo-badge-sm-min-width\n    ),\n    md: (\n        padding-x: $kendo-badge-md-padding-x,\n        padding-y: $kendo-badge-md-padding-y,\n        font-size: $kendo-badge-md-font-size,\n        line-height: $kendo-badge-md-line-height,\n        min-width: $kendo-badge-md-min-width\n    ),\n    lg: (\n        padding-x: $kendo-badge-lg-padding-x,\n        padding-y: $kendo-badge-lg-padding-y,\n        font-size: $kendo-badge-lg-font-size,\n        line-height: $kendo-badge-lg-line-height,\n        min-width: $kendo-badge-lg-min-width\n    )\n)",
+                "value": "(\n    sm: (\n        padding-x: $kendo-badge-sm-padding-x,\n        padding-y: $kendo-badge-sm-padding-y,\n        gap: $kendo-badge-sm-gap,\n        font-size: $kendo-badge-sm-font-size,\n        line-height: $kendo-badge-sm-line-height,\n        min-width: $kendo-badge-sm-min-width\n    ),\n    md: (\n        padding-x: $kendo-badge-md-padding-x,\n        padding-y: $kendo-badge-md-padding-y,\n        gap: $kendo-badge-md-gap,\n        font-size: $kendo-badge-md-font-size,\n        line-height: $kendo-badge-md-line-height,\n        min-width: $kendo-badge-md-min-width\n    ),\n    lg: (\n        padding-x: $kendo-badge-lg-padding-x,\n        padding-y: $kendo-badge-lg-padding-y,\n        gap: $kendo-badge-lg-gap,\n        font-size: $kendo-badge-lg-font-size,\n        line-height: $kendo-badge-lg-line-height,\n        min-width: $kendo-badge-lg-min-width\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 35,
-                    "end": 57
+                    "start": 40,
+                    "end": 65
                 }
             },
             "group": [
@@ -640,8 +640,8 @@
         {
             "description": "The theme colors map of the Badge.\n",
             "commentRange": {
-                "start": 61,
-                "end": 62
+                "start": 69,
+                "end": 70
             },
             "context": {
                 "type": "variable",
@@ -649,8 +649,8 @@
                 "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
                 "scope": "default",
                 "line": {
-                    "start": 63,
-                    "end": 63
+                    "start": 71,
+                    "end": 71
                 }
             },
             "group": [
@@ -11059,17 +11059,17 @@
                 {
                     "description": "The sizes map of the Badge.\n",
                     "commentRange": {
-                        "start": 33,
-                        "end": 34
+                        "start": 38,
+                        "end": 39
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-badge-sizes",
-                        "value": "(\n    sm: (\n        padding-x: $kendo-badge-sm-padding-x,\n        padding-y: $kendo-badge-sm-padding-y,\n        font-size: $kendo-badge-sm-font-size,\n        line-height: $kendo-badge-sm-line-height,\n        min-width: $kendo-badge-sm-min-width\n    ),\n    md: (\n        padding-x: $kendo-badge-md-padding-x,\n        padding-y: $kendo-badge-md-padding-y,\n        font-size: $kendo-badge-md-font-size,\n        line-height: $kendo-badge-md-line-height,\n        min-width: $kendo-badge-md-min-width\n    ),\n    lg: (\n        padding-x: $kendo-badge-lg-padding-x,\n        padding-y: $kendo-badge-lg-padding-y,\n        font-size: $kendo-badge-lg-font-size,\n        line-height: $kendo-badge-lg-line-height,\n        min-width: $kendo-badge-lg-min-width\n    )\n)",
+                        "value": "(\n    sm: (\n        padding-x: $kendo-badge-sm-padding-x,\n        padding-y: $kendo-badge-sm-padding-y,\n        gap: $kendo-badge-sm-gap,\n        font-size: $kendo-badge-sm-font-size,\n        line-height: $kendo-badge-sm-line-height,\n        min-width: $kendo-badge-sm-min-width\n    ),\n    md: (\n        padding-x: $kendo-badge-md-padding-x,\n        padding-y: $kendo-badge-md-padding-y,\n        gap: $kendo-badge-md-gap,\n        font-size: $kendo-badge-md-font-size,\n        line-height: $kendo-badge-md-line-height,\n        min-width: $kendo-badge-md-min-width\n    ),\n    lg: (\n        padding-x: $kendo-badge-lg-padding-x,\n        padding-y: $kendo-badge-lg-padding-y,\n        gap: $kendo-badge-lg-gap,\n        font-size: $kendo-badge-lg-font-size,\n        line-height: $kendo-badge-lg-line-height,\n        min-width: $kendo-badge-lg-min-width\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 35,
-                            "end": 57
+                            "start": 40,
+                            "end": 65
                         }
                     },
                     "group": [
@@ -11084,8 +11084,8 @@
                 {
                     "description": "The theme colors map of the Badge.\n",
                     "commentRange": {
-                        "start": 61,
-                        "end": 62
+                        "start": 69,
+                        "end": 70
                     },
                     "context": {
                         "type": "variable",
@@ -11093,8 +11093,8 @@
                         "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
                         "scope": "default",
                         "line": {
-                            "start": 63,
-                            "end": 63
+                            "start": 71,
+                            "end": 71
                         }
                     },
                     "group": [

package/dist/meta/sassdoc-raw-data.json

@@ -614,17 +614,17 @@
     {
         "description": "The sizes map of the Badge.\n",
         "commentRange": {
-            "start": 33,
-            "end": 34
+            "start": 38,
+            "end": 39
         },
         "context": {
             "type": "variable",
             "name": "kendo-badge-sizes",
-            "value": "(\n    sm: (\n        padding-x: $kendo-badge-sm-padding-x,\n        padding-y: $kendo-badge-sm-padding-y,\n        font-size: $kendo-badge-sm-font-size,\n        line-height: $kendo-badge-sm-line-height,\n        min-width: $kendo-badge-sm-min-width\n    ),\n    md: (\n        padding-x: $kendo-badge-md-padding-x,\n        padding-y: $kendo-badge-md-padding-y,\n        font-size: $kendo-badge-md-font-size,\n        line-height: $kendo-badge-md-line-height,\n        min-width: $kendo-badge-md-min-width\n    ),\n    lg: (\n        padding-x: $kendo-badge-lg-padding-x,\n        padding-y: $kendo-badge-lg-padding-y,\n        font-size: $kendo-badge-lg-font-size,\n        line-height: $kendo-badge-lg-line-height,\n        min-width: $kendo-badge-lg-min-width\n    )\n)",
+            "value": "(\n    sm: (\n        padding-x: $kendo-badge-sm-padding-x,\n        padding-y: $kendo-badge-sm-padding-y,\n        gap: $kendo-badge-sm-gap,\n        font-size: $kendo-badge-sm-font-size,\n        line-height: $kendo-badge-sm-line-height,\n        min-width: $kendo-badge-sm-min-width\n    ),\n    md: (\n        padding-x: $kendo-badge-md-padding-x,\n        padding-y: $kendo-badge-md-padding-y,\n        gap: $kendo-badge-md-gap,\n        font-size: $kendo-badge-md-font-size,\n        line-height: $kendo-badge-md-line-height,\n        min-width: $kendo-badge-md-min-width\n    ),\n    lg: (\n        padding-x: $kendo-badge-lg-padding-x,\n        padding-y: $kendo-badge-lg-padding-y,\n        gap: $kendo-badge-lg-gap,\n        font-size: $kendo-badge-lg-font-size,\n        line-height: $kendo-badge-lg-line-height,\n        min-width: $kendo-badge-lg-min-width\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 35,
-                "end": 57
+                "start": 40,
+                "end": 65
             }
         },
         "group": [
@@ -639,8 +639,8 @@
     {
         "description": "The theme colors map of the Badge.\n",
         "commentRange": {
-            "start": 61,
-            "end": 62
+            "start": 69,
+            "end": 70
         },
         "context": {
             "type": "variable",
@@ -648,8 +648,8 @@
             "value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
             "scope": "default",
             "line": {
-                "start": 63,
-                "end": 63
+                "start": 71,
+                "end": 71
             }
         },
         "group": [

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": "14.7.0-dev.8",
+  "version": "14.7.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/scss/components/badge/_layout.scss

@@ -31,6 +31,10 @@
             box-sizing: border-box;
         }
 
+        .k-badge-text {
+            padding-inline: $kendo-badge-text-padding-x;
+        }
+
         // Roundness
         @each $roundness in $kendo-badge-roundness {
             #{k-when-default($kendo-badge-default-roundness, $roundness)}
@@ -43,6 +47,7 @@
         @each $size, $size-props in $kendo-badge-sizes {
             $_padding-x: map.get( $size-props, padding-x );
             $_padding-y: map.get( $size-props, padding-y );
+            $_gap: map.get( $size-props, gap );
             $_font-size: map.get( $size-props, font-size );
             $_line-height: map.get( $size-props, line-height );
             $_min-width: map.get( $size-props, min-width );
@@ -54,6 +59,7 @@
                 font-size: $_font-size;
                 line-height: $_line-height;
                 min-width: $_min-width;
+                gap: $_gap;
 
                 &:empty {
                     padding: $_padding-y;
@@ -62,6 +68,10 @@
             }
         }
     }
+    .k-badge:has(> .k-badge-icon:only-child) {
+        padding-inline: 0;
+        aspect-ratio: 1;
+    }
     .k-badge > * {
         color: inherit;
     }

package/scss/components/badge/_theme.scss

@@ -19,6 +19,19 @@
             }
         }
 
+        // Tint badges
+        #{k-when-default($kendo-badge-default-fill-mode, "tint")}
+        &.k-badge-tint {
+            @each $name in $kendo-badge-theme-colors {
+                #{k-when-default($kendo-badge-default-theme-color, $name)}
+                &.k-badge-#{$name} {
+                    border-color: k-color(#{$name}-subtle);
+                    color: k-color(#{$name}-on-subtle);
+                    background-color: k-color(#{$name}-subtle);
+                }
+            }
+        }
+
         // Outline badges
         #{k-when-default($kendo-badge-default-fill-mode, "outline")}
         &.k-badge-outline {

package/scss/components/badge/_variables.scss

@@ -15,6 +15,11 @@ $kendo-badge-sm-padding-y: null !default;
 $kendo-badge-md-padding-y: null !default;
 $kendo-badge-lg-padding-y: null !default;
 
+$kendo-badge-text-padding-x: null !default;
+$kendo-badge-sm-gap: null !default;
+$kendo-badge-md-gap: null !default;
+$kendo-badge-lg-gap: null !default;
+
 $kendo-badge-font-size: null !default;
 $kendo-badge-sm-font-size: null !default;
 $kendo-badge-md-font-size: null !default;
@@ -36,6 +41,7 @@ $kendo-badge-sizes: (
     sm: (
         padding-x: $kendo-badge-sm-padding-x,
         padding-y: $kendo-badge-sm-padding-y,
+        gap: $kendo-badge-sm-gap,
         font-size: $kendo-badge-sm-font-size,
         line-height: $kendo-badge-sm-line-height,
         min-width: $kendo-badge-sm-min-width
@@ -43,6 +49,7 @@ $kendo-badge-sizes: (
     md: (
         padding-x: $kendo-badge-md-padding-x,
         padding-y: $kendo-badge-md-padding-y,
+        gap: $kendo-badge-md-gap,
         font-size: $kendo-badge-md-font-size,
         line-height: $kendo-badge-md-line-height,
         min-width: $kendo-badge-md-min-width
@@ -50,6 +57,7 @@ $kendo-badge-sizes: (
     lg: (
         padding-x: $kendo-badge-lg-padding-x,
         padding-y: $kendo-badge-lg-padding-y,
+        gap: $kendo-badge-lg-gap,
         font-size: $kendo-badge-lg-font-size,
         line-height: $kendo-badge-lg-line-height,
         min-width: $kendo-badge-lg-min-width

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

@@ -2,6 +2,7 @@
 @use "../../functions/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../border-radii/index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "_variables.scss" as *;
 
 @mixin kendo-column-menu--layout-base() {
@@ -57,6 +58,20 @@
                     font-size: $_font-size;
                     line-height: $_line-height;
                 }
+
+                // Items without start actions are pushed by the actions width so their text lines up with items that have them.
+                // Action width = icon + k-spacing(1) padding on both sides; the gap to the text is k-spacing(1).
+                &:where(:has(.k-group-menu-item > .k-group-menu-item-actions:first-child)) .k-group-menu-item {
+                    padding-inline-start: calc( #{$_padding-x} + ( #{$ki-icon-size} + #{k-spacing(1)} * 2 ) + #{k-spacing(1)} );
+                }
+
+                &:where(:has(.k-group-menu-item > .k-group-menu-item-actions:first-child > .k-group-menu-item-action + .k-group-menu-item-action)) .k-group-menu-item {
+                    padding-inline-start: calc( #{$_padding-x} + ( #{$ki-icon-size} + #{k-spacing(1)} * 2 ) * 2 + #{k-spacing(1)} );
+                }
+
+                .k-group-menu-item:has(> .k-group-menu-item-actions:first-child) {
+                    padding-inline-start: $_padding-x;
+                }
             }
         }
     }

package/scss/components/imageeditor/_layout.scss

@@ -245,6 +245,8 @@
         flex-flow: row nowrap;
         border-bottom-left-radius: inherit;
         border-bottom-right-radius: inherit;
+        // Clips the canvas scrollbars/corner, which otherwise paint square over the rounded corner
+        overflow: hidden;
     }
 
 
@@ -253,6 +255,8 @@
         flex: 1 1 100%;
         display: flex;
         flex-flow: row nowrap;
+        min-height: 0;
+        min-width: 0;
         overflow: auto;
         padding: k-spacing(6);
         box-sizing: border-box;
@@ -296,6 +300,19 @@
             font-size: var(--kendo-font-size-xl);
             font-weight: var(--kendo-font-weight-medium);
         }
+
+        // Upload renders as a bare button: no frame, background or drop hint
+        .k-imageeditor-placeholder-upload {
+            margin-block-start: k-spacing(6);
+            border-width: 0;
+            background-color: transparent;
+            overflow: visible;
+
+            .k-upload-dropzone {
+                padding: 0;
+                justify-content: center;
+            }
+        }
     }
 
 
@@ -359,6 +376,11 @@
         gap: $kendo-image-editor-pane-content-gap;
         flex: 1 1 auto;
         overflow-y: auto;
+
+        // Keeps a mode switch above the form from shrinking when the content overflows
+        > .k-segmented-control {
+            flex-shrink: 0;
+        }
     }
 
     .k-imageeditor-pane-footer {
@@ -468,6 +490,23 @@
         inset-inline-start: 0;
     }
 
+    // Dims the image around the crop frame. The frame's position and size are passed through
+    // --crop-x, --crop-y, --crop-w and --crop-h (set on the overlay) and cut out of the layer.
+    .k-imageeditor-crop-dim {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        clip-path: polygon(
+            evenodd,
+            0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+            var(--crop-x, 0px) var(--crop-y, 0px),
+            var(--crop-x, 0px) calc(var(--crop-y, 0px) + var(--crop-h, 0px)),
+            calc(var(--crop-x, 0px) + var(--crop-w, 0px)) calc(var(--crop-y, 0px) + var(--crop-h, 0px)),
+            calc(var(--crop-x, 0px) + var(--crop-w, 0px)) var(--crop-y, 0px),
+            var(--crop-x, 0px) var(--crop-y, 0px)
+        );
+    }
+
     .k-imageeditor-crop {
         @include kendo-image-editor-frame-base();
 

package/scss/components/imageeditor/_theme.scss

@@ -146,8 +146,8 @@
         }
     }
 
-    // Crop Overlay: accent-tinted layer (matches the frame/handle color) stacked over a neutral dark scrim
-    .k-imageeditor-crop-overlay {
+    // Crop Dim: accent-tinted layer (matches the frame/handle color) stacked over a neutral dark scrim
+    .k-imageeditor-crop-dim {
         background-image:
             linear-gradient($kendo-image-editor-crop-overlay-accent-bg, $kendo-image-editor-crop-overlay-accent-bg),
             linear-gradient($kendo-image-editor-crop-overlay-bg, $kendo-image-editor-crop-overlay-bg);

package/scss/components/list/_theme.scss

@@ -63,6 +63,10 @@
                 $kendo-list-item-hover-text,
                 $kendo-list-item-hover-bg
             );
+
+            .k-list-item-description {
+                color: $kendo-list-item-hover-description-text;
+            }
         }
 
         // Focus
@@ -81,6 +85,10 @@
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
             );
+
+            .k-list-item-description {
+                color: $kendo-list-item-selected-description-text;
+            }
         }
         &.k-selected:hover,
         &.k-selected.k-hover {

package/scss/components/list/_variables.scss

@@ -224,4 +224,6 @@ $kendo-list-option-label-text: null !default;
 $kendo-list-item-description-font-size: null !default;
 $kendo-list-item-description-line-height: null !default;
 $kendo-list-item-description-text: null !default;
+$kendo-list-item-hover-description-text: null !default;
+$kendo-list-item-selected-description-text: null !default;
 

package/scss/components/marquee/_theme.scss

@@ -1,15 +1,24 @@
+@use "../../color-system/_functions.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-marquee--theme-base() {
     // Marquee
+    .k-marquee {
+        --kendo-marquee-bg: var(--kendo-marquee-color);
+        // Contrast is computed against the bg as it renders: translucent over the surface
+        --kendo-marquee-on-color: oklch(from color-mix(in srgb, var(--kendo-marquee-bg) 60%, #{k-color(surface)}) clamp(0.10, (0.6 - l) * 99999, 1) 0 h);
+    }
     .k-marquee-color {
-        color: $kendo-marquee-text;
-        background-color: $kendo-marquee-bg;
-        border-color: $kendo-marquee-border;
-        opacity: .6;
+        color: var(--kendo-marquee-on-color, #{$kendo-marquee-text});
+        background-color: oklch(from var(--kendo-marquee-bg, #{$kendo-marquee-bg}) l c h / calc(alpha * .6));
+        border-color: oklch(from #{$kendo-marquee-border} l c h / calc(alpha * .6));
+    }
+    .k-scheduler-marquee::before,
+    .k-scheduler-marquee::after {
+        border-color: var(--kendo-marquee-bg, #{$kendo-marquee-bg});
     }
     .k-marquee-text {
-        color: $kendo-marquee-text;
+        color: var(--kendo-marquee-on-color, #{$kendo-marquee-text});
     }
 
     // Text selection

package/scss/components/menu/_theme.scss

@@ -92,6 +92,10 @@
                     $kendo-menu-popup-item-hover-border,
                     $kendo-menu-popup-item-hover-gradient
                 );
+
+                .k-menu-link-description {
+                    color: $kendo-menu-popup-item-hover-description-text;
+                }
             }
 
             &:active,
@@ -103,6 +107,10 @@
                     $kendo-menu-popup-item-active-border,
                     $kendo-menu-popup-item-active-gradient
                 );
+
+                .k-menu-link-description {
+                    color: $kendo-menu-popup-item-active-description-text;
+                }
             }
         }
 

package/scss/components/menu/_variables.scss

@@ -233,10 +233,12 @@ $kendo-menu-popup-item-hover-bg: null !default;
 $kendo-menu-popup-item-hover-text: null !default;
 $kendo-menu-popup-item-hover-border: null !default;
 $kendo-menu-popup-item-hover-gradient: null !default;
+$kendo-menu-popup-item-hover-description-text: null !default;
 
 $kendo-menu-popup-item-active-bg: null !default;
 $kendo-menu-popup-item-active-text: null !default;
 $kendo-menu-popup-item-active-border: null !default;
 $kendo-menu-popup-item-active-gradient: null !default;
+$kendo-menu-popup-item-active-description-text: null !default;
 
 $kendo-menu-popup-item-focus-shadow: null !default;

package/scss/components/scheduler/_theme.scss

@@ -112,7 +112,7 @@
     // Events
     .k-event {
         @include fill(
-            var(--kendo-scheduler-on-event, $kendo-scheduler-event-text),
+            var(--kendo-scheduler-event-on-color, $kendo-scheduler-event-text),
             var(--kendo-scheduler-event-bg, $kendo-scheduler-event-bg),
             $kendo-scheduler-event-border,
             $kendo-scheduler-event-gradient
@@ -120,13 +120,13 @@
         @include box-shadow( $kendo-scheduler-event-shadow );
 
         --kendo-scheduler-event-bg: var(--kendo-scheduler-event-color);
-        --kendo-scheduler-on-event: oklch(from var(--kendo-scheduler-event-bg) clamp(0.10, (0.75 - l) * 99999, 1) 0 h);
+        --kendo-scheduler-event-on-color: oklch(from var(--kendo-scheduler-event-bg) clamp(0.10, (0.75 - l) * 99999, 1) 0 h);
 
 
         &:hover,
         &.k-hover {
             @include fill(
-                var(--kendo-scheduler-on-event, $kendo-scheduler-event-hover-text),
+                var(--kendo-scheduler-event-on-color, $kendo-scheduler-event-hover-text),
                 var(--kendo-scheduler-event-bg, $kendo-scheduler-event-hover-bg),
                 $kendo-scheduler-event-hover-border,
                 $kendo-scheduler-event-hover-gradient
@@ -136,7 +136,7 @@
 
         &.k-selected {
             @include fill(
-                var(--kendo-scheduler-on-event, $kendo-scheduler-event-selected-text),
+                var(--kendo-scheduler-event-on-color, $kendo-scheduler-event-selected-text),
                 var(--kendo-scheduler-event-bg, $kendo-scheduler-event-selected-bg),
                 $kendo-scheduler-event-selected-border,
                 $kendo-scheduler-event-selected-gradient
@@ -172,10 +172,6 @@
 
     // Resizing
     .k-scheduler-marquee {}
-    .k-scheduler-marquee::before,
-    .k-scheduler-marquee::after {
-        border-color: k-color(primary);
-    }
 
     // Day view
     .k-scheduler-dayview {}