@progress/kendo-theme-core 12.2.4-dev.1 → 12.3.0-dev.1

package/scss/components/chat/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../spacing/index.scss" as *;
 @use "../../border-radii/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../bubble/_variables.scss" as *;
@@ -99,7 +100,7 @@
             &,
             + .k-chat-user-status {
                 margin-block-end: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size + $kendo-chat-bubble-spacing);
-                transition: margin .2s ease-in-out;
+                transition: margin k-transition(fade-out);
             }
         }
 
@@ -192,7 +193,7 @@
         display: flex;
         flex-direction: column;
         position: relative;
-        transition: margin .2s ease-in-out;
+        transition: margin k-transition(fade-out);
         outline: none;
         overflow-wrap: break-word;
 
@@ -250,7 +251,7 @@
     .k-chat-bubble.k-bubble-expandable {
         .k-bubble-content {
             height: auto;
-            transition: height 2s ease;
+            transition: height k-transition(shrink);
         }
     }
 
@@ -275,7 +276,7 @@
         line-height: $kendo-chat-message-meta-line-height;
         white-space: nowrap;
         pointer-events: none;
-        transition: height .2s ease-in-out;
+        transition: height k-transition(fade-out);
         height: 0;
         overflow: hidden;
     }
@@ -304,7 +305,7 @@
             display: flex;
             flex-direction: column;
             gap: $kendo-chat-message-gap;
-            transition: height .2s ease-in-out;
+            transition: height k-transition(fade-out);
         }
 
         a {
@@ -325,6 +326,7 @@
         .k-message-time,
         .k-message-status {
             height: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size);
+            transition: height k-transition(fade-in);
         }
     }
 

package/scss/components/checkbox/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../spacing/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -23,6 +24,7 @@
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
     }
 
 
@@ -183,7 +185,7 @@
             left: 50%;
             border-radius: 100%;
             z-index: k-z-index("bottom");
-            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
+            transition: opacity k-transition(rapid), transform k-transition(rapid);
             transform: translate(-50%, -50%) scale(0);
             transform-origin: center center;
         }

package/scss/components/chip/_layout.scss

@@ -1,5 +1,6 @@
-@use "./_variables.scss" as *;
 @use "sass:map";
+@use "./_variables.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-chip--layout-base() {
 
@@ -23,6 +24,7 @@
         overflow: hidden;
         cursor: pointer;
         user-select: none;
+        transition: color k-transition(rapid), background-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
 
         *,
         *::before,

package/scss/components/colorgradient/_layout.scss

@@ -3,6 +3,7 @@
 @use "../../mixins/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-color-gradient--layout-base() {
@@ -58,6 +59,7 @@
             left: 50%;
             z-index: k-z-index("base", 1);
             cursor: pointer;
+            transition: outline-color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid);
         }
 
         .k-hsv-controls {

package/scss/components/colorpalette/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-color-palette--layout-base() {
 
@@ -40,6 +41,7 @@
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
+        transition: box-shadow k-transition(rapid);
 
         &:hover,
         &.k-hover {

package/scss/components/datetimepicker/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "./variables.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../action-buttons/_variables.scss" as *;
 
 @mixin kendo-date-time-picker--layout-base() {
@@ -10,7 +11,6 @@
     // Datetime selector
     .k-datetime-selector {
         display: flex;
-        transition: transform .2s;
     }
 
     // Wrap
@@ -56,9 +56,11 @@
     // Tabs
     .k-date-tab .k-datetime-selector {
         transform: translateX(0);
+        transition: transform k-transition(slide-in);
     }
     .k-time-tab .k-datetime-selector {
         transform: translateX(-100%);
+        transition: transform k-transition(slide-out);
     }
 
     :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector,

package/scss/components/dock-manager/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../typography/index.scss" as *;
-@use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
+@use "./variables.scss" as *;
 
 @mixin kendo-dock-manager--layout-base() {
 
@@ -198,6 +199,7 @@
         outline-width: $kendo-dock-indicator-outline-width;
         outline-style: $kendo-dock-indicator-outline-style;
         z-index: k-z-index("top", 1);
+        transition: color k-transition(emphasis), background-color k-transition(emphasis);
 
         &.k-dock-indicator-middle {
             filter: none;

package/scss/components/drawer/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-drawer--layout-base() {
 
@@ -31,7 +32,7 @@
         display: flex;
         flex-direction: column;
         flex: 0 0 auto;
-        transition: all 300ms ease-in-out;
+        transition: all k-transition(grow);
         overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
@@ -114,7 +115,7 @@
         overflow-x: hidden;
         overflow-y: auto;
         scrollbar-width: thin; // Scrollbar styles for Mozilla
-        transition: all 300ms ease-in-out;
+        transition: all k-transition(grow);
 
         // Scrollbar styles for Chrome, Safari and Opera
         &::-webkit-scrollbar {
@@ -147,6 +148,7 @@
         gap: $kendo-drawer-item-spacing;
         align-items: center;
         cursor: pointer;
+        transition: background-color k-transition(snappy), color k-transition(snappy), box-shadow k-transition(snappy);
 
         > .k-drawer-link {
             margin-block: calc( #{$kendo-drawer-item-padding-y} * -1 );

package/scss/components/fab/_layout.scss

@@ -1,6 +1,7 @@
-@use "../../spacing/index.scss" as *;
 @use "sass:map";
 @use "./variables.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-fab--layout-base() {
 
@@ -26,6 +27,7 @@
         text-overflow: ellipsis;
         cursor: pointer;
         outline: none;
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
 
         *,
         *::before,

package/scss/components/filter/_layout.scss

@@ -1,4 +1,5 @@
 @use "./variables.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-filter--layout-base() {
 
@@ -49,6 +50,7 @@
 
             .k-toolbar {
                 border-style: solid;
+                transition: box-shadow k-transition(snappy);
             }
         }
         .k-filter-operator .k-dropdown-list {

package/scss/components/gantt/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../typography/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../border-radii/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../table/_variables.scss" as *;
@@ -499,6 +500,7 @@
         border-style: solid;
         box-sizing: border-box;
         transform: rotate(45deg);
+        transition: background-color k-transition(rapid);
     }
 
 
@@ -512,6 +514,7 @@
     .k-task-summary,
     .k-task-summary-complete {
         background-color: currentColor;
+        transition: color k-transition(rapid);
 
         &::before,
         &::after {
@@ -552,6 +555,7 @@
         border-style: solid;
         box-sizing: border-box;
         cursor: default;
+        transition: background-color k-transition(rapid);
 
         .k-resize-handle {
             opacity: .5;
@@ -594,6 +598,7 @@
         width: 20%;
         position: absolute;
         z-index: k-z-index("base", 1);
+        transition: background-color k-transition(rapid);
         inset-block-start: 0;
         inset-block-end: 0;
         inset-inline-start: 0;

package/scss/components/input/_layout.scss

@@ -5,6 +5,7 @@
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-input--layout-base() {
 
@@ -35,6 +36,8 @@
         text-overflow: ellipsis;
         -webkit-appearance: none;
 
+        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
+
         *,
         *::before,
         *::after {

package/scss/components/list/_layout.scss

@@ -1,6 +1,7 @@
 
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "sass:map";
 
 @mixin kendo-list--layout-base() {
@@ -105,9 +106,8 @@
         align-content: center;
         gap: $kendo-icon-spacing;
         position: relative;
-        transition-property: color, background-color, outline-color, box-shadow;
-        transition-duration: 200ms;
-        transition-timing-function: ease;
+
+        transition: color k-transition(snappy), background-color k-transition(snappy), outline-color k-transition(snappy), box-shadow k-transition(snappy);
 
         &.k-first::before {
             content: "";

package/scss/components/listview/_layout.scss

@@ -1,4 +1,5 @@
 @use "./variables.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-listview--layout-base() {
 
@@ -71,6 +72,7 @@
         border-style: solid;
         box-sizing: border-box;
         flex-shrink: 0;
+        transition: color k-transition(snappy), border-color k-transition(snappy), background-color k-transition(snappy);
     }
     .k-listview-item-padding-rectangle {
         padding-block: $kendo-listview-item-padding-y;

package/scss/components/menu/_layout.scss

@@ -2,6 +2,7 @@
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-menu--layout-base() {
 
@@ -39,6 +40,7 @@
         flex: none;
         position: relative;
         user-select: none;
+        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
 
         &.k-selected {
             font-weight: $kendo-menu-item-selected-font-weight;
@@ -320,4 +322,10 @@
         }
     }
 
+    .k-menu-group,
+    .k-menu.k-context-menu {
+        .k-item > .k-link {
+            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
+        }
+    }
 }

package/scss/components/panelbar/_layout.scss

@@ -53,7 +53,7 @@
                 position: relative;
                 user-select: none;
                 cursor: default;
-                transition: $kendo-transition;
+                transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
             }
         }
         > .k-panelbar-header + .k-panelbar-header {
@@ -87,7 +87,7 @@
                 position: relative;
                 user-select: none;
                 cursor: default;
-                transition: $kendo-transition;
+                transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
             }
 
             // Hierarchy items

package/scss/components/progressbar/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../border-radii/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../spacing/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-progressbar--layout-base() {
@@ -192,7 +193,7 @@
 
         > .k-progressbar-value,
         > .k-progressbar-value > .k-progress-status-wrap {
-            transition: width .1s ease-in-out;
+            transition: width k-duration(brief) k-easing(standard);
         }
     }
 

package/scss/components/progressbar/_theme.scss

@@ -1,5 +1,6 @@
 @use "../../mixins/index.scss" as *;
 @use "../../functions/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../color-system/_functions.scss" as *;
 @use "../../_variables.scss" as *;
@@ -49,7 +50,7 @@
 
     .k-circular-progressbar-arc {
         stroke: $kendo-circular-progressbar-arc-stroke;
-        transition: stroke .5s ease;
+        transition: stroke k-transition(smooth);
     }
 
 }

package/scss/components/radio/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../mixins/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 
@@ -26,6 +27,7 @@
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
     }
 
 
@@ -178,7 +180,7 @@
             top: 50%;
             border-radius: 100%;
             z-index: k-z-index("bottom");
-            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
+            transition: opacity k-transition(rapid), transform k-transition(rapid);
             transform: translate(-50%, -50%) scale(0);
             transform-origin: center center;
         }

package/scss/components/rating/_layout.scss

@@ -1,4 +1,5 @@
 @use "../../color-system/_constants.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-rating--layout-base() {
@@ -44,7 +45,7 @@
             margin: 0;
             outline: 0;
             overflow: hidden;
-            transition: color 200ms ease-out 0s;
+            transition: color k-transition(bouncy);
 
             * {
                 pointer-events: none;

package/scss/components/ripple/_layout.scss

@@ -1,4 +1,5 @@
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-ripple--layout-base() {
 
@@ -23,7 +24,7 @@
         border-radius: 50%;
         padding: 0;
         transform: translate(-50%, -50%) scale(0);
-        transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
+        transition: opacity k-transition(fade-out), transform k-transition(smooth);
         opacity: .1;
         background-color: currentColor;
     }
@@ -34,7 +35,7 @@
 
     .k-ripple-focus::after {
         visibility: visible;
-        animation: ripple 600ms ease-out;
+        animation: ripple k-transition(fluid);
     }
 
     @keyframes ripple {

package/scss/components/scroller/_layout.scss

@@ -1,4 +1,5 @@
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-scroller--layout-base() {
 
@@ -44,7 +45,7 @@
         width: 2rem;
         font-size: 2rem;
         transform: rotate(0deg);
-        transition: transform 300ms linear;
+        transition: transform k-duration(speedy) k-easing(linear);
     }
     .km-widget .km-scroller-release .km-icon {
         transform: rotate(180deg);
@@ -63,7 +64,7 @@
         width: .4em;
         opacity: 0;
         transform-origin: 0 0;
-        transition: opacity .3s linear;
+        transition: opacity k-duration(speedy) k-easing(linear);
     }
 
     .k-map,

package/scss/components/scrollview/_layout.scss

@@ -1,4 +1,5 @@
 @use "../../color-system/_constants.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-scrollview--layout-base() {
@@ -113,6 +114,7 @@
         cursor: pointer;
         pointer-events: all;
         vertical-align: top;
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
 
         &::before {
             content: "";
@@ -138,6 +140,7 @@
         text-decoration: none;
         user-select: none;
         cursor: pointer;
+        transition: opacity k-transition(rapid);
 
         .k-icon {
             display: table-cell;

package/scss/components/slider/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:math";
 @use "sass:list";
 @use "../../color-system/_constants.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../tooltip/_variables.scss" as *;
 
@@ -320,7 +321,7 @@
     .k-slider-transitions {
         &.k-slider-horizontal {
             .k-draghandle {
-                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
+                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, border-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, box-shadow $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
             }
             .k-slider-selection {
                 transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
@@ -329,7 +330,7 @@
 
         &.k-slider-vertical {
             .k-draghandle {
-                transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
+                transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, border-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, box-shadow $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
             }
 
             .k-slider-selection {

package/scss/components/splitter/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-splitter--layout-base() {
 
@@ -52,6 +53,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: background-color k-transition(snappy), color k-transition(snappy);
 
         .k-collapse-prev,
         .k-collapse-next {

package/scss/components/spreadsheet/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../spacing/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../border-radii/index.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "./variables.scss" as *;
@@ -438,6 +439,7 @@
     .k-spreadsheet-active-cell {
         // always show exact active cell border, regardless of inline cell styles
         outline-color: transparent !important; // stylelint-disable-line declaration-no-important
+        transition: box-shadow k-transition(snappy);
         z-index: k-z-index("base", 4);
     }
 
@@ -476,6 +478,8 @@
 
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
+        transition: background-color k-transition(fade-in);
+
         &::after {
             display: none;
         }

package/scss/components/stepper/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../spacing/index.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 
@@ -76,9 +77,7 @@
             position: relative;
             z-index: k-z-index("base", 1);
             overflow: visible;
-            transition-property: color, background-color, border-color;
-            transition-duration: .4s;
-            transition-timing-function: ease-in-out;
+            transition: color k-transition(bouncy), border-color k-transition(bouncy), background-color k-transition(bouncy);
 
             &::before {
                 @include border-radius( $kendo-stepper-indicator-border-radius );
@@ -124,6 +123,7 @@
             align-items: center;
             justify-content: center;
             z-index: k-z-index("base", 1);
+            transition: font-weight k-transition(rapid);
         }
         .k-step-label:only-child {
             @include border-radius( $kendo-stepper-label-border-radius );

package/scss/components/suggestion/_layout.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 
 @mixin kendo-suggestion--layout-base() {
@@ -53,9 +54,7 @@
         border-style: $kendo-suggestion-border-style;
         line-height: $kendo-suggestion-line-height;
         flex: 0 0 auto;
-        transition-property: color, background-color, border-color;
-        transition-duration: .2s;
-        transition-timing-function: ease-in-out;
+        transition: background-color k-transition(rapid), box-shadow k-transition(rapid);
         cursor: pointer;
         outline: none;
         white-space: normal;