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

package/scss/core/motion/_index.scss

@@ -1,2 +1,174 @@
-// Default transition
-$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, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
+@use "sass:map";
+@use "sass:list";
+
+$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);

package/scss/dataviz/_variables.scss

@@ -210,7 +210,7 @@ $kendo-chart-tooltip-font-size: var( --kendo-chart-tooltip-font-size, var( --ken
 $kendo-chart-tooltip-line-height: var( --kendo-chart-tooltip-line-height, var( --kendo-line-height-sm, normal ) ) !default;
 /// The transition of the tooltip of the chart component.
 /// @group charts
-$kendo-chart-tooltip-transition: left ease-in 80ms, top ease-in 80ms !default;
+$kendo-chart-tooltip-transition: left k-transition(fade-in), top k-transition(fade-in) !default;
 
 /// The font-size of the label of the chart component.
 /// @group chart

package/scss/drawer/_layout.scss

@@ -31,7 +31,7 @@
             transform: translateY(-50%);
             z-index: k-z-index("base", 2);
             opacity: 0;
-            transition: opacity .3s;
+            transition: opacity k-transition(snappy);
             pointer-events: none;
         }
 

package/scss/floating-label/_variables.scss

@@ -43,7 +43,7 @@ $kendo-floating-label-focus-offset-y: var(--kendo-floating-label-focus-offset-y,
 
 /// The transition of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-transition: var(--kendo-floating-label-transition, .2s ease-out) !default;
+$kendo-floating-label-transition: var(--kendo-floating-label-transition, k-transition(scale-in)) !default;
 
 /// The background color of the Floating Label.
 /// @group floating-label

package/scss/index.scss

@@ -307,9 +307,6 @@
     // Typography
     @include kendo-typography--styles();
 
-    // Transitions
-    @include kendo-transition--styles();
-
     // Generic content
     @include kendo-icon--styles();
     @include kendo-messagebox--styles();

package/scss/rating/_layout.scss

@@ -20,7 +20,6 @@
         position: relative;
         overflow: hidden;
         outline: 0;
-        transition: color 200ms ease-out 0s;
 
         * {
             pointer-events: none;

package/scss/searchbox/_layout.scss

@@ -8,7 +8,7 @@
     .k-searchbox {
 
         .k-input-icon {
-            transition: var( --kendo-transition, none );
+            transition: width k-transition(rapid), opacity k-transition(rapid);
         }
 
         &:focus,
@@ -17,7 +17,6 @@
             .k-input-icon {
                 width: 0;
                 opacity: 0;
-                transition: var( --kendo-transition, none );
             }
         }
     }

package/scss/slider/_layout.scss

@@ -125,16 +125,6 @@
         .k-slider-thumb-end {
             inset-inline-start: calc( var( --kendo-slider-end, 0) * 1% );
         }
-
-        // Transitions
-        &.k-slider-transitions {
-            .k-slider-selection {
-                transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
-            }
-            .k-slider-thumb {
-                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-thumb-transition-speed $kendo-slider-thumb-transition-function;
-            }
-        }
     }
 
     // Aliases - fluent specific thumb classes

package/scss/slider/_variables.scss

@@ -123,17 +123,19 @@ $kendo-slider-thumb-disabled-border: var( --kendo-slider-thumb-disabled-border,
 
 /// The transition speed of the Slider.
 /// @group slider
-$kendo-slider-transition-speed: var( --kendo-slider-transition-speed, .3s ) !default;
+$kendo-slider-transition-speed: var( --kendo-slider-transition-speed, k-duration(brisk) ) !default;
 /// The transition function of the Slider.
 /// @group slider
-$kendo-slider-transition-function: var( --kendo-slider-transition-function, ease-out ) !default;
+$kendo-slider-transition-function: var( --kendo-slider-transition-function, k-easing(standard) ) !default;
 
 /// The transition speed of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-transition-speed: var( --kendo-slider-thumb-transition-speed, .4s ) !default;
+$kendo-slider-thumb-transition-speed: var( --kendo-slider-thumb-transition-speed, k-duration(quick) ) !default;
+$kendo-slider-draghandle-transition-speed: $kendo-slider-thumb-transition-speed !default;
 /// The transition function of the Slider thumb.
 /// @group slider
-$kendo-slider-thumb-transition-function: var( --kendo-slider-thumb-transition-function, cubic-bezier(.25, .8, .25, 1) ) !default;
+$kendo-slider-thumb-transition-function: var( --kendo-slider-thumb-transition-function, k-easing(decelerate) ) !default;
+$kendo-slider-draghandle-transition-function: $kendo-slider-thumb-transition-function !default;
 
 /// The background image of the horizontal Slider tick.
 /// @group slider
@@ -150,6 +152,8 @@ $kendo-slider-tick-v-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5B
     $kendo-slider-line-height: $kendo-slider-line-height,
     $kendo-slider-transition-speed: $kendo-slider-transition-speed,
     $kendo-slider-transition-function: $kendo-slider-transition-function,
+    $kendo-slider-draghandle-transition-speed: $kendo-slider-draghandle-transition-speed,
+    $kendo-slider-draghandle-transition-function: $kendo-slider-draghandle-transition-function,
     $kendo-slider-track-bg: $kendo-slider-track-bg,
     $kendo-slider-selection-bg: $kendo-slider-selection-bg,
     $kendo-slider-tick-horizontal-image: $kendo-slider-tick-h-image,

package/scss/stepper/_variables.scss

@@ -198,10 +198,10 @@ $kendo-stepper-progressbar-size: var( --kendo-stepper-progressbar-size, k-spacin
 $kendo-stepper-content-transition-property: var( --kendo-stepper-content-transition-property, none ) !default;
 /// The duration of the Stepper transition.
 /// @group stepper
-$kendo-stepper-content-transition-duration: var( --kendo-stepper-content-transition-duration, 300ms ) !default;
+$kendo-stepper-content-transition-duration: var( --kendo-stepper-content-transition-duration, k-duration(speedy) ) !default;
 /// The timing function of the Stepper transition.
 /// @group stepper
-$kendo-stepper-content-transition-timing-function: var( --kendo-stepper-content-transition-timing-function, cubic-bezier(.4, 0, .2, 1) 0ms ) !default;
+$kendo-stepper-content-transition-timing-function: var( --kendo-stepper-content-transition-timing-function, k-easing(standard) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/stepper/_variables.scss" with (
     $kendo-stepper-label-margin-x: $kendo-stepper-label-margin-x,

package/scss/switch/_layout.scss

@@ -17,15 +17,4 @@
             border-radius: k-border-radius(md);
         }
     }
-
-    .k-switch-track {
-        transition: all 100ms ease-in-out;
-    }
-
-    .k-switch-thumb-wrap {
-        transition: inset-inline-start 100ms ease-in-out;
-    }
-    .k-switch-thumb {
-        transition: all 100ms ease-in-out;
-    }
 }