@progress/kendo-theme-core 14.1.1-dev.3 → 14.2.0-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.1.1-dev.3",
+  "version": "14.2.0-0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,6 +45,5 @@
   },
   "directories": {
     "doc": "docs"
-  },
-  "gitHead": "bb56b0126e8d6f3e5d77c2ac6d87e8d90d450711"
+  }
 }

package/scss/border-radii/index.scss

@@ -52,6 +52,10 @@ $kendo-border-radii: $default-border-radii !default;
 $kendo-border-radii: map.merge($default-border-radii, $kendo-border-radii);
 
 
+/// Returns a CSS variable reference for a border-radius token.
+/// @param {String} $key - The border-radius key from $kendo-border-radii.
+/// @return {String} CSS variable reference for the given border-radius token.
+/// @group functions
 @function k-border-radius($key) {
     @return var(--kendo-border-radius-#{$key});
 }

package/scss/color-system/_functions.scss

@@ -90,7 +90,7 @@
 /// @param {String} $theme - The theme the colors will be generated for
 /// @return {Map} - A map with the generated keys and values
 ///
-/// @group color-system
+/// @group functions
 @function k-generate-color-variations( $name, $color, $theme: null ) {
     $result: ();
 
@@ -212,7 +212,7 @@
 /// @param {String} $key - The name of a color/key in the $kendo-colors map
 /// @return {String} - CSS variable with the actual color as a fallback
 ///
-/// @group color-system
+/// @group functions
 @function k-color($key) {
     @return var(--kendo-color-#{$key});
 }

package/scss/components/diagram/_layout.scss

@@ -0,0 +1,13 @@
+@use "../../spacing/index.scss" as *;
+
+@mixin kendo-diagram--layout-base() {
+
+    // Diagram shapes container
+    .k-diagram-shapes-container {
+        padding: k-spacing(1);
+        display: grid;
+        grid-template-columns: repeat(4, max-content);
+        gap: k-spacing(3);
+    }
+
+}

package/scss/components/diagram/_theme.scss

@@ -0,0 +1,2 @@
+@mixin kendo-diagram--theme-base() {
+}

package/scss/components/diagram/_variables.scss

@@ -0,0 +1 @@
+// Diagram

package/scss/components/drawer/_theme.scss

@@ -12,19 +12,6 @@
     }
 
     // Drawer items
-    .k-drawer-wrapper {
-        scrollbar-color: $kendo-drawer-scrollbar-color $kendo-drawer-scrollbar-bg;
-
-        &::-webkit-scrollbar-track {
-            background: $kendo-drawer-scrollbar-bg;
-        }
-        &::-webkit-scrollbar-thumb {
-            background: $kendo-drawer-scrollbar-color;
-        }
-        &::-webkit-scrollbar-thumb:hover {
-            background: $kendo-drawer-scrollbar-hover-color;
-        }
-    }
     .k-drawer-item {
 
         &:hover,

package/scss/components/drawer/_variables.scss

@@ -14,10 +14,7 @@ $kendo-drawer-content-padding-x: null !default;
 $kendo-drawer-content-padding-y: null !default;
 
 $kendo-drawer-scrollbar-width: null !default;
-$kendo-drawer-scrollbar-color: null !default;
-$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;

package/scss/components/grid/_theme.scss

@@ -94,7 +94,7 @@
 
             .k-grid-content-sticky {
                 border-inline-color: $kendo-grid-sticky-border;
-                border-block-start-color: $kendo-grid-header-border;
+                border-block-end-color: $kendo-grid-sticky-border;
             }
 
             &:hover .k-grid-content-sticky,
@@ -120,7 +120,7 @@
             .k-grid-content-sticky {
                 background-color: $kendo-grid-sticky-bg;
                 border-inline-color: $kendo-grid-sticky-border;
-                border-block-start-color: $kendo-grid-header-border;
+                border-block-end-color: $kendo-grid-sticky-border;
             }
 
             &.k-table-row {

package/scss/components/loader/_layout.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
 @use "../overlay/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../functions/index.scss" as *;
 
@@ -517,8 +518,8 @@
 
     // Loading indicator
     .k-i-loading {
-        width: 1em;
-        height: 1em;
+        width: $kendo-icon-size-md;
+        height: $kendo-icon-size-md;
         line-height: 1;
         display: inline-flex;
         flex-flow: row nowrap;

package/scss/components/mediaplayer/_theme.scss

@@ -18,7 +18,7 @@
     // Title bar
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
-        background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
+        background-image: if( $kendo-media-player-titlebar-gradient, linear-gradient( $kendo-media-player-titlebar-gradient ), null );
         text-shadow: 0 0 2px color-mix(in srgb, k-color(on-app-surface) 50%, transparent);
     }
 

package/scss/components/scheduler/_layout.scss

@@ -7,6 +7,7 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../listgroup/_variables.scss" as *;
 
 @mixin kendo-scheduler--layout-base() {
 
@@ -936,4 +937,336 @@
         }
     }
 
+
+    // Adaptive rendering container
+    .k-pane-wrapper {
+        border-width: $kendo-scheduler-adaptive-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-scheduler-adaptive-font-family;
+        font-size: $kendo-scheduler-adaptive-font-size;
+        line-height: $kendo-scheduler-adaptive-line-height;
+        display: block;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        .k-pane {
+            width: 100%;
+            height: 100%;
+            user-select: none;
+            box-sizing: border-box;
+            font-family: sans-serif;
+            overflow-x: hidden;
+        }
+
+        .k-view {
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            position: relative;
+            border: 0;
+            box-sizing: border-box;
+            outline: 0;
+            font-family: $kendo-scheduler-adaptive-font-family;
+            font-size: $kendo-scheduler-adaptive-font-size;
+            line-height: $kendo-scheduler-adaptive-line-height;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+            align-items: stretch;
+            align-content: stretch;
+            vertical-align: top;
+            -webkit-touch-callout: none;
+            -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+        }
+
+        .k-content {
+            min-height: 1px;
+            flex: 1;
+            align-items: stretch;
+            display: block;
+            width: auto;
+            overflow: hidden;
+            position: relative;
+        }
+
+        // Common adaptive layout
+        .k-appbar {
+            padding: k-spacing(1);
+        }
+
+        .k-list-title,
+        .k-filter-help-text {
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
+            display: block;
+        }
+
+        .k-listgroup-title {
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .k-listgroup {
+
+            .k-listgroup-item {
+                border-color: inherit;
+            }
+        }
+        .k-listgroup + .k-listgroup {
+            margin-block-start: k-spacing(4);
+        }
+
+        .k-popup-edit-form {
+
+            .k-recur-editor-wrap {
+                display: flex;
+            }
+
+            .k-mobiletimezoneeditor {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                position: relative;
+                flex: 1 1 auto;
+            }
+        }
+
+        .k-multicheck-wrap.k-listgroup {
+            overflow-y: auto;
+        }
+    }
+
+
+    // Scheduler adaptive styles
+    .k-pane-wrapper { // stylelint-disable-line
+
+        .k-scheduler-edit-form {
+
+            .k-recur-view {
+                padding: 0;
+                flex-direction: column;
+                align-items: stretch;
+
+                > .k-listgroup-form-row {
+                    margin: 0;
+                }
+            }
+
+            .k-recur-items-wrap {
+                width: 100%;
+                margin-block: -1px;
+                margin-inline: 0;
+            }
+
+            .k-scheduler-recur-end-wrap {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .k-scheduler {
+        &.k-scheduler-mobile {
+            border-width: 0;
+        }
+    }
+
+    .k-scheduler-mobile {
+
+        border-radius: 0;
+
+        th {
+            font-weight: normal;
+        }
+
+        .k-event:hover .k-resize-handle {
+            visibility: hidden;
+        }
+
+        .k-scheduler-toolbar {
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
+            border-radius: 0;
+
+            > * {
+                margin: 0;
+            }
+
+            &::before {
+                display: none;
+            }
+
+            .k-scheduler-navigation {
+                width: 100%;
+                display: flex;
+                flex-flow: row nowrap;
+                justify-content: space-between;
+                margin: 0;
+
+                .k-nav-current {
+                    line-height: 1;
+                    display: flex;
+                    flex-flow: column nowrap;
+                    align-items: center;
+                    justify-content: space-evenly;
+                    gap: 0;
+                }
+            }
+
+            .k-scheduler-views-wrapper {
+                .k-views-dropdown {
+                    display: inline-block;
+                }
+            }
+        }
+
+        .k-scheduler-footer {
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
+            display: flex;
+            justify-content: space-between;
+            border-radius: 0;
+
+            > * {
+                margin: 0;
+            }
+
+            &::before {
+                display: none;
+            }
+        }
+
+        .k-scheduler-monthview {
+
+            .k-hidden {
+                height: 40px;
+            }
+
+            .k-scheduler-table td {
+                height: 40px;
+                vertical-align: top;
+                text-align: center;
+            }
+
+            .k-events-container {
+                position: absolute;
+                text-align: center;
+                height: 6px;
+                line-height: 6px;
+            }
+
+            .k-event {
+                position: static;
+                padding: 4px;
+                border-radius: 50%;
+                display: inline-block;
+                width: 4px;
+                height: 4px;
+                min-height: 0;
+                margin: 1px;
+            }
+        }
+
+        // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler
+        // Thus, the below selector is needed
+        .k-scheduler-dayview .k-mobile-header {
+
+            &.k-mobile-horizontal-header .k-scheduler-times table tr:first-child {
+                display: none;
+            }
+
+            .k-scheduler-header .k-scheduler-date-group {
+                display: none;
+            }
+        }
+
+        .k-scheduler-header-wrap > div {
+            overflow: visible;
+        }
+
+        .k-scheduler-agendaview {
+            .k-mobile-header {
+                display: none;
+            }
+
+            .k-scheduler-table {
+                table-layout: auto;
+
+                .k-scheduler-groupcolumn {
+                    width: 1%;
+                }
+
+                td {
+                    white-space: normal;
+                }
+            }
+        }
+
+        .k-mobile-header {
+            .k-scheduler-table td,
+            .k-scheduler-table th {
+                height: 1.5em;
+            }
+        }
+
+        .k-time-text,
+        .k-time-period {
+            display: block;
+            line-height: 1;
+        }
+
+        .k-time-period {
+            font-size: .7em;
+        }
+
+        .k-scheduler-table td,
+        .k-scheduler-table th {
+            height: 2em;
+            vertical-align: middle;
+        }
+
+        .k-scheduler-datecolumn-wrap {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .k-task {
+            display: flex;
+            align-items: center;
+            gap: .5em;
+
+            .k-scheduler-mark {
+                border-radius: 50%;
+                margin: 0;
+            }
+
+            .k-scheduler-task-text {
+                flex: 1 1 0%;
+            }
+        }
+
+        .k-scheduler-times,
+        .k-scheduler-agenda {
+
+            .k-scheduler-group-cell,
+            .k-scheduler-groupcolumn {
+                vertical-align: top;
+
+                .k-scheduler-group-text {
+                    writing-mode: vertical-lr;
+                    transform: rotate(180deg);
+                    white-space: nowrap;
+                }
+            }
+        }
+
+        .k-scrollbar-h tr + tr .k-scheduler-times {
+            border-block-end-width: 0;
+        }
+    }
 }

package/scss/components/scheduler/_theme.scss

@@ -235,4 +235,75 @@
     // Scheduler edit form
     .k-scheduler-edit-form {}
 
+
+    // Adaptive
+    .k-pane-wrapper,
+    .k-view {
+        @include fill(
+            $kendo-scheduler-adaptive-text,
+            $kendo-scheduler-adaptive-bg,
+            $kendo-scheduler-adaptive-border
+        );
+    }
+
+    .k-pane-wrapper .k-pane {
+
+        > .k-view > .k-content {
+            background-position: 50% 50%;
+            background-color: $kendo-scheduler-adaptive-content-bg;
+        }
+    }
+
+    .k-pane-wrapper .k-pane {
+
+        .k-scheduler-mobile {
+
+            .k-nav-current {
+                color: $kendo-scheduler-adaptive-current-text;
+            }
+
+            .k-scheduler-times,
+            .k-scheduler-header,
+            .k-scheduler-groupcolumn,
+            .k-mobile-scheduler-agendadate {
+                color: $kendo-scheduler-adaptive-base-text;
+            }
+
+            .k-time-period,
+            .k-mobile-scheduler-agendaweekday {
+                color: $kendo-scheduler-adaptive-subtle-text;
+            }
+
+            .k-scheduler-times,
+            .k-scheduler-header,
+            .k-scheduler-header-wrap,
+            .k-scheduler-datecolumn,
+            .k-scheduler-groupcolumn,
+            .k-scheduler-group-cell,
+            .k-scheduler-header-all-day {
+                background-color: $kendo-scheduler-adaptive-content-bg;
+            }
+
+            .k-scheduler-toolbar .k-scheduler-tools > li {
+                display: inline-block;
+                background-color: inherit;
+            }
+        }
+
+        .k-scheduler-edit-form {
+
+            .k-item,
+            .k-link {
+                color: k-color(on-app-surface);
+            }
+
+            .k-scheduler-delete,
+            .k-scheduler-resetSeries { // stylelint-disable-line
+                color: $kendo-scheduler-adaptive-menu-clear-text;
+            }
+
+        }
+
+    }
+
 }

package/scss/components/scheduler/_variables.scss

@@ -103,3 +103,22 @@ $kendo-scheduler-marquee-label-inset-x: null !default;
 $kendo-scheduler-marquee-label-inset-y: null !default;
 
 $kendo-scheduler-header-bg: null !default;
+
+
+// Adaptive
+$kendo-scheduler-adaptive-bg: null !default;
+$kendo-scheduler-adaptive-text: null !default;
+$kendo-scheduler-adaptive-border: null !default;
+
+$kendo-scheduler-adaptive-content-bg: null !default;
+
+$kendo-scheduler-adaptive-menu-clear-text: null !default;
+
+$kendo-scheduler-adaptive-border-width: null !default;
+$kendo-scheduler-adaptive-font-family: null !default;
+$kendo-scheduler-adaptive-font-size: null !default;
+$kendo-scheduler-adaptive-line-height: null !default;
+
+$kendo-scheduler-adaptive-current-text: null !default;
+$kendo-scheduler-adaptive-base-text: null !default;
+$kendo-scheduler-adaptive-subtle-text: null !default;

package/scss/components/slider/_layout.scss

@@ -122,7 +122,7 @@
                 }
                 .k-draghandle:focus,
                 .k-draghandle:active {
-                    transform: translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale);
+                    transform: if( $kendo-slider-draghandle-active-scale, translate(-50%, -50%) scale($kendo-slider-draghandle-active-scale), null );
                 }
 
                 .k-slider-selection {
@@ -151,7 +151,7 @@
                 }
                 .k-draghandle:focus,
                 .k-draghandle:active {
-                    transform: translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale);
+                    transform: if( $kendo-slider-draghandle-active-scale, translate(-50%, 50%) scale($kendo-slider-draghandle-active-scale), null );
                 }
 
                 .k-slider-selection {

package/scss/components/timeline/_theme.scss

@@ -24,25 +24,6 @@
                 background-color: $kendo-card-bg;
                 color: $kendo-card-text;
             }
-
-            .k-card-body {
-
-                // Scrollbar styles for Mozilla
-                scrollbar-color: $kendo-card-border $kendo-card-bg;
-
-                // Scrollbar styles for Chrome, Safari and Opera
-                &::-webkit-scrollbar-track {
-                    background: $kendo-card-bg;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background: $kendo-card-border;
-                }
-
-                &::-webkit-scrollbar-thumb:hover {
-                    background: k-color(border);
-                }
-            }
         }
 
         // TODO: remove

package/scss/elevation/index.scss

@@ -36,6 +36,10 @@ $kendo-elevation: map.merge($default-elevation, $kendo-elevation);
     @return #{$result};
 }
 
+/// Returns a CSS variable reference for an elevation shadow level.
+/// @param {Number} $level - The elevation level key from $kendo-elevation.
+/// @return {String} CSS variable reference for the given elevation level.
+/// @group functions
 @function k-elevation($level) {
     @return var(--kendo-elevation-#{$level});
 }
@@ -46,10 +50,13 @@ $kendo-elevation-bg-lightness-step: 0.015 !default;
 // Each elevation-bg level increases oklch chroma by level * this value.
 $kendo-elevation-bg-chroma-step: 0.001 !default;
 
-// The background color for a given elevation level is calculated by increasing the lightness and chroma of the base background color
-// by a step multiplied by the elevation level, but only if the base background color is light (for light themes) or dark (for dark themes).
-// This is achieved by multiplying the steps by a clamp function that returns 1 when the background color is in the appropriate range and 0 otherwise.
-// clamp(0, (0.5 - l) * 99999, 1) → 1 when bg is dark, 0 when light
+/// Returns an elevated background color expression using oklch relative color syntax.
+/// The lightness and chroma are increased per elevation level, but only when the
+/// base color is in the appropriate light/dark range.
+/// @param {Number} $level - The elevation level that drives lightness and chroma increase.
+/// @param {Color} $color - The base background color.
+/// @return {String} An oklch relative color expression that represents the elevated background.
+/// @group functions
 @function k-elevation-bg($level, $color) {
     $_result: "oklch(from #{$color} calc(l + #{$level} * #{$kendo-elevation-bg-lightness-step} * clamp(0, (0.5 - l) * 99999, 1)) calc(c + #{$level} * #{$kendo-elevation-bg-chroma-step} * clamp(0, (0.5 - l) * 99999, 1)) h)";
     @return #{$_result};