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

package/scss/components/switch/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-switch--layout-base() {
@@ -50,7 +51,7 @@
         flex-flow: row nowrap;
         flex: 1 0 auto;
         position: relative;
-        transition: background-color 200ms ease-in-out;
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), color k-transition(rapid);
     }
 
 
@@ -60,7 +61,6 @@
         height: 0;
         overflow: visible;
         position: absolute;
-        transition: left 200ms ease-in-out;
         inset-block-start: 50%;
     }
     .k-switch-thumb {
@@ -69,6 +69,7 @@
         display: block;
         position: absolute;
         transform: translate( -50%, -50% );
+        transition: all k-transition(rapid);
     }
 
 
@@ -81,6 +82,7 @@
         inset-block-start: 50%;
         transform: translateY( -50% );
         overflow: hidden;
+        transition: color k-transition(snappy);
     }
 
 
@@ -115,9 +117,11 @@
 
             &.k-switch-on .k-switch-thumb-wrap {
                 inset-inline-start: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
+                transition: left k-transition(bouncy);
             }
             &.k-switch-off .k-switch-thumb-wrap {
                 inset-inline-start: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
+                transition: left k-transition(snappy);
             }
         }
     }

package/scss/components/tabstrip/_layout.scss

@@ -4,6 +4,7 @@
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-tabstrip--layout-base() {
 
@@ -81,6 +82,7 @@
             align-items: stretch;
             justify-items: stretch;
             outline: 0;
+            transition: color k-transition(emphasis), border-color k-transition(emphasis), box-shadow k-transition(emphasis), background-color k-transition(emphasis), font-weight k-transition(emphasis);
 
             // Active state
             &:active,
@@ -162,7 +164,7 @@
         position: absolute;
         inset-block-start: 0;
         inset-inline-start: 0;
-        transition: width .2s linear;
+        transition: width k-duration(rapid) k-easing(linear);
 
         // TODO: a better name
         display: none;

package/scss/components/timeline/_layout.scss

@@ -5,6 +5,7 @@
 @use "./variables.scss" as *;
 @use "../card/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../motion/index.scss" as *;
 
 @mixin kendo-timeline--layout-base() {
 
@@ -208,7 +209,7 @@
                 margin-block: calc( #{$kendo-icon-spacing} * -1 );
                 margin-inline: 0;
                 transform: rotate(90deg);
-                transition: transform .2s ease-in-out;
+                transition: transform k-transition(subtle);
             }
 
             &.k-collapsed {
@@ -358,7 +359,7 @@
                 z-index: k-z-index("base", 2);
 
                 .k-timeline-scrollable-wrap {
-                    transition: transform 1s ease-in-out;
+                    transition: transform k-duration(sluggish) k-easing(standard);
                 }
             }
 

package/scss/components/treeview/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "../../spacing/index.scss" as *;
+@use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
@@ -120,6 +121,7 @@
         align-content: center;
         vertical-align: middle;
         position: relative;
+        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid);
 
         .k-icon,
         .k-image,

package/scss/index.scss

@@ -2,20 +2,21 @@
 @forward "./color-system/index.scss";
 @forward "./mixins/index.scss";
 @forward "./spacing/index.scss";
-@forward "./styles/index.scss";
 @forward "./elevation/index.scss";
 @forward "./typography/index.scss";
 @forward "./border-radii/index.scss";
 @forward "./motion/index.scss";
 @forward "./z-index/index.scss";
+@forward "./styles/index.scss";
 
 @use "./color-system/index.scss" as *;
 @use "./mixins/index.scss" as *;
-@use "./styles/index.scss" as *;
 @use "./elevation/index.scss" as *;
 @use "./typography/index.scss" as *;
 @use "./spacing/index.scss" as *;
+@use "./motion/index.scss" as *;
 @use "./border-radii/index.scss" as *;
+@use "./styles/index.scss" as *;
 
 @mixin core-styles() {
     @include import-once("core-styles") {
@@ -24,6 +25,7 @@
         @include kendo-border-radius--styles();
         @include kendo-elevation--styles();
         @include kendo-core--typography--styles();
+        @include kendo-motion--styles();
         @include kendo-core--styles();
     }
 }

package/scss/motion/index.scss

@@ -1,7 +1,212 @@
-$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
+@use "sass:map";
+@use "sass:list";
 
-@mixin kendo-transition--styles() {
+$default-easings: (
+    linear: cubic-bezier(0, 0, 1, 1),
+    accelerate: cubic-bezier(0.42, 0, 1, 1),
+    decelerate: cubic-bezier(0, 0, 0.58, 1),
+    standard: cubic-bezier(0.42, 0, 0.58, 1),
+    sharp: cubic-bezier(0.75, 0, 0.25, 1),
+    bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55),
+    elastic: cubic-bezier(0.5, -0.5, 0.5, 1.5),
+) !default;
+
+$default-durations: (
+    instant: 0ms,
+    immediate: 50ms,
+    brief: 100ms,
+    quick: 150ms,
+    rapid: 200ms,
+    swift: 250ms,
+    speedy: 300ms,
+    brisk: 350ms,
+    prompt: 400ms,
+    timely: 450ms,
+    moderate: 500ms,
+    measured: 550ms,
+    steady: 600ms,
+    leisurely: 700ms,
+    slow: 800ms,
+    languid: 900ms,
+    sluggish: 1000ms,
+) !default;
+
+$default-transitions: (
+    instant: (
+        duration: var(--kendo-duration-instant),
+        easing: var(--kendo-easing-linear),
+    ),
+    rapid: (
+        duration: var(--kendo-duration-quick),
+        easing: var(--kendo-easing-decelerate),
+    ),
+    snappy: (
+        duration: var(--kendo-duration-swift),
+        easing: var(--kendo-easing-decelerate),
+    ),
+    energetic: (
+        duration: var(--kendo-duration-swift),
+        easing: var(--kendo-easing-elastic),
+    ),
+    bouncy: (
+        duration: var(--kendo-duration-speedy),
+        easing: var(--kendo-easing-bounce),
+    ),
+    subtle: (
+        duration: var(--kendo-duration-brisk),
+        easing: var(--kendo-easing-standard),
+    ),
+    gentle: (
+        duration: var(--kendo-duration-prompt),
+        easing: var(--kendo-easing-accelerate),
+    ),
+    enter: (
+        duration: var(--kendo-duration-speedy),
+        easing: var(--kendo-easing-decelerate),
+    ),
+    exit: (
+        duration: var(--kendo-duration-rapid),
+        easing: var(--kendo-easing-accelerate),
+    ),
+    settle: (
+        duration: var(--kendo-duration-brisk),
+        easing: var(--kendo-easing-decelerate),
+    ),
+    scale-out: (
+        duration: var(--kendo-duration-quick),
+        easing: var(--kendo-easing-accelerate),
+    ),
+    scale-in: (
+        duration: var(--kendo-duration-rapid),
+        easing: var(--kendo-easing-decelerate),
+    ),
+    fade-out: (
+        duration: var(--kendo-duration-rapid),
+        easing: var(--kendo-easing-standard),
+    ),
+    fade-in: (
+        duration: var(--kendo-duration-swift),
+        easing: var(--kendo-easing-standard),
+    ),
+    slide-out: (
+        duration: var(--kendo-duration-swift),
+        easing: var(--kendo-easing-accelerate),
+    ),
+    slide-in: (
+        duration: var(--kendo-duration-speedy),
+        easing: var(--kendo-easing-decelerate),
+    ),
+    emphasis: (
+        duration: var(--kendo-duration-quick),
+        easing: var(--kendo-easing-sharp),
+    ),
+    collapse: (
+        duration: var(--kendo-duration-speedy),
+        easing: var(--kendo-easing-accelerate),
+    ),
+    expand: (
+        duration: var(--kendo-duration-prompt),
+        easing: var(--kendo-easing-standard),
+    ),
+    shrink: (
+        duration: var(--kendo-duration-brisk),
+        easing: var(--kendo-easing-accelerate),
+    ),
+    grow: (
+        duration: var(--kendo-duration-prompt),
+        easing: var(--kendo-easing-standard),
+    ),
+    pulse: (
+        duration: var(--kendo-duration-brisk),
+        easing: var(--kendo-easing-standard),
+    ),
+    smooth: (
+        duration: var(--kendo-duration-moderate),
+        easing: var(--kendo-easing-standard),
+    ),
+    flip: (
+        duration: var(--kendo-duration-measured),
+        easing: var(--kendo-easing-standard),
+    ),
+    fluid: (
+        duration: var(--kendo-duration-steady),
+        easing: var(--kendo-easing-standard),
+    ),
+    deliberate: (
+        duration: var(--kendo-duration-slow),
+        easing: var(--kendo-easing-standard),
+    ),
+) !default;
+
+/// The global map of motion easing tokens.
+/// @group motion
+$kendo-easings: $default-easings !default;
+$kendo-easings: map.merge($default-easings, $kendo-easings);
+
+/// The global map of motion duration tokens.
+/// @group motion
+$kendo-durations: $default-durations !default;
+$kendo-durations: map.merge($default-durations, $kendo-durations);
+
+/// The global map of motion transition tokens.
+/// @group motion
+///
+/// @subgroup {fast}
+/// [instant, rapid, snappy, energetic]
+/// Speed and Responsiveness
+///
+/// @subgroup {expressive}
+/// [emphasis, bouncy, pulse, flip]
+/// Personality and Playfulness
+///
+/// @subgroup {calm}
+/// [subtle, gentle, settle, smooth, fluid, deliberate]
+/// Subtle & Natural
+///
+/// @subgroup {visibility}
+/// [slide-in, slide-out, fade-in, fade-out, enter, exit]
+/// Visibility & Movement Change
+///
+/// @subgroup {size}
+/// [scale-in, scale-out, grow, shrink, expand, collapse]
+/// Size & Scale Adjustments
+$kendo-transitions: $default-transitions !default;
+$kendo-transitions: map.merge($default-transitions, $kendo-transitions);
+
+@function k-easing($key) {
+    $easing: map.get($kendo-easings, $key);
+    @return var(--kendo-easing-#{$key}, $easing);
+}
+
+@function k-duration($key) {
+    $_duration: map.get($kendo-durations, $key);
+    @return var(--kendo-duration-#{$key}, $_duration);
+}
+
+@function k-transition($key) {
+    @return var(--kendo-transition-#{$key});
+}
+
+@mixin kendo-motion--styles() {
     :root {
-        --kendo-transition: #{$kendo-transition};
+        @each $key, $value in $kendo-durations {
+            --kendo-duration-#{$key}: var(--kendo-duration-global, #{$value});
+        }
+
+        @each $key, $value in $kendo-easings {
+            --kendo-easing-#{$key}: #{$value};
+        }
+
+        @each $key, $config in $kendo-transitions {
+            $_duration: map.get($config, duration);
+            $_easing: map.get($config, easing);
+            --kendo-transition-#{$key}: #{$_duration} #{$_easing};
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        :root {
+            --kendo-duration-global: 0.01ms;
+        }
     }
 }

package/scss/styles/_animations.scss

@@ -1,3 +1,5 @@
+@use "../motion/index.scss" as *;
+
 @mixin kendo-core--styles--animations() {
 
     // Animations
@@ -10,7 +12,7 @@
         &-enter-active,
         &-appear-active {
             transform: translate(0, 0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -19,7 +21,7 @@
 
         &-exit-active {
             transform: translate(100%, 0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -32,7 +34,7 @@
         &-enter-active,
         &-appear-active {
             transform: translate(0, 0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -41,7 +43,7 @@
 
         &-exit-active {
             transform: translate(-100%, 0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -54,7 +56,7 @@
         &-enter-active,
         &-appear-active {
             transform: translate(0, 0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -63,7 +65,7 @@
 
         &-exit-active {
             transform: translate(0, 100%);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -76,7 +78,7 @@
         &-enter-active,
         &-appear-active {
             transform: translate(0, 0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -85,7 +87,7 @@
 
         &-exit-active {
             transform: translate(0, -100%);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -98,7 +100,7 @@
         &-enter-active,
         &-appear-active {
             transform: scaleY(1);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(expand);
         }
 
         &-exit {
@@ -107,7 +109,7 @@
 
         &-exit-active {
             transform: scaleY(0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(collapse);
         }
     }
 
@@ -120,7 +122,7 @@
         &-enter-active,
         &-appear-active {
             transform: scaleX(1);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(expand);
         }
 
         &-exit {
@@ -129,7 +131,7 @@
 
         &-exit-active {
             transform: scaleX(0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(collapse);
         }
     }
 
@@ -142,7 +144,7 @@
         &-enter-active,
         &-appear-active {
             opacity: 1;
-            transition: opacity 500ms ease-in-out;
+            transition: opacity k-transition(fade-in);
         }
 
         &-exit {
@@ -151,7 +153,7 @@
 
         &-exit-active {
             opacity: 0;
-            transition: opacity 500ms ease-in-out;
+            transition: opacity k-transition(fade-out);
         }
 
         &-exit-active + &-exit-active,
@@ -171,7 +173,7 @@
         &-appear-active {
             opacity: 1;
             transform: scale(1);
-            transition: transform, opacity 300ms ease-in-out;
+            transition: transform k-transition(scale-in), opacity k-transition(scale-in);
         }
 
         &-exit {
@@ -182,7 +184,7 @@
         &-exit-active {
             opacity: 0;
             transform: scale(2);
-            transition: transform, opacity 300ms ease-in-out;
+            transition: transform k-transition(scale-in), opacity k-transition(scale-out);
         }
     }
 
@@ -197,7 +199,7 @@
         &-appear-active {
             opacity: 1;
             transform: scale(1);
-            transition: transform, opacity 300ms ease-in-out;
+            transition: transform k-transition(scale-in), opacity k-transition(scale-out);
         }
 
         &-exit {
@@ -208,7 +210,7 @@
         &-exit-active {
             opacity: 0;
             transform: scale(0);
-            transition: transform, opacity 300ms ease-in-out;
+            transition: transform k-transition(scale-in), opacity k-transition(scale-in);
         }
     }
 
@@ -225,7 +227,7 @@
         &-appear-active {
             opacity: 1;
             transform: translate(0, 0);
-            transition: transform .3s cubic-bezier(.2, .6, .4, 1), opacity .3s cubic-bezier(.2, 1, .2, 1);
+            transition: transform k-transition(slide-in), opacity k-transition(slide-in);
 
             .k-centered {
                 transform: translate(-50%, -50%);
@@ -242,7 +244,7 @@
         &-enter-active,
         &-appear-active {
             transform: translateY(0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -251,7 +253,7 @@
 
         &-exit-active {
             transform: translateY(-100%);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -264,7 +266,7 @@
         &-enter-active,
         &-appear-active {
             transform: translateY(0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -273,7 +275,7 @@
 
         &-exit-active {
             transform: translateY(100%);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -286,7 +288,7 @@
         &-enter-active,
         &-appear-active {
             transform: translateX(0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -295,7 +297,7 @@
 
         &-exit-active {
             transform: translateX(-100%);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -308,7 +310,7 @@
         &-enter-active,
         &-appear-active {
             transform: translateX(0);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-in);
         }
 
         &-exit {
@@ -317,7 +319,7 @@
 
         &-exit-active {
             transform: translateX(100%);
-            transition: transform 300ms ease-in-out;
+            transition: transform k-transition(slide-out);
         }
     }
 
@@ -329,13 +331,13 @@
 
         &-enter-active,
         &-appear-active {
-            transition: max-height 300ms ease-in-out;
+            transition: max-height k-transition(grow);
         }
 
         &-exit-active {
             // override any max-height set to element to allow animation
             max-height: 0 !important; // stylelint-disable-line declaration-no-important
-            transition: max-height 300ms ease-in-out;
+            transition: max-height k-transition(shrink);
         }
     }
 
@@ -347,23 +349,21 @@
 
         &-enter-active,
         &-appear-active {
-            transition: max-width 300ms ease-in-out;
+            transition: max-width k-transition(grow);
         }
 
         &-exit-active {
             // override any max-height set to element to allow animation
             max-width: 0 !important; // stylelint-disable-line declaration-no-important
-            transition: max-width 300ms ease-in-out;
+            transition: max-width k-transition(shrink);
         }
     }
 
 
     // FX
-    $fx-duration: 350ms;
-
     .k-fx-end .k-fx-next,
     .k-fx-end .k-fx-current {
-        transition: all $fx-duration ease-out;
+        transition: all k-transition(settle);
     }
 
     .k-fx {
@@ -458,7 +458,7 @@
         &.k-fx-end .k-fx-current .km-content,
         &.k-fx-end .k-fx-current .km-header,
         &.k-fx-end .k-fx-current .km-footer {
-            transition: all $fx-duration ease-out;
+            transition: all k-transition(settle);
         }
 
         // left