@progress/kendo-theme-core 14.7.0-dev.9 → 14.7.1-dev.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": "14.7.0-dev.9",
+  "version": "14.7.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

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 {}