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

package/scss/core/motion/index.scss

@@ -1 +1,174 @@
-@forward "@progress/kendo-theme-core/scss/motion/index.scss";
+@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

@@ -250,7 +250,7 @@ $kendo-chart-tooltip-padding-y: k-spacing(0.5) !default;
 
 /// The transition of the Chart.
 /// @group charts
-$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+$kendo-chart-tooltip-transition: left k-transition(fade-in), top k-transition(fade-in) !default;
 
 /// The text color of the chart tooltip.
 /// @group charts

package/scss/floating-label/_variables.scss

@@ -1,4 +1,5 @@
 @use "../input/_variables.scss" as *;
+@use "../core/index.scss" as *;
 
 // Floating label
 
@@ -36,7 +37,7 @@ $kendo-floating-label-focus-offset-y: 0 !default;
 
 /// The transition of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-transition: .2s ease-out !default;
+$kendo-floating-label-transition: k-transition(scale-in) !default;
 
 /// The background color of the Floating Label.
 /// @group floating-label

package/scss/slider/_variables.scss

@@ -87,16 +87,16 @@ $kendo-slider-draghandle-focus-shadow: 0 0 4px 0 color-mix(in srgb, k-color(prim
 
 /// The transition speed of the Slider.
 /// @group slider
-$kendo-slider-transition-speed: .3s !default;
+$kendo-slider-transition-speed: k-duration(brisk) !default;
 /// The transition function of the Slider.
 /// @group slider
-$kendo-slider-transition-function: ease-out !default;
+$kendo-slider-transition-function: k-easing(standard) !default;
 /// The transition speed of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-transition-speed: .4s !default;
+$kendo-slider-draghandle-transition-speed: k-duration(quick) !default;
 /// The transition function of the Slider drag handle.
 /// @group slider
-$kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
+$kendo-slider-draghandle-transition-function: k-easing(decelerate) !default;
 
 /// The background color of the Slider track.
 /// @group slider

package/scss/stepper/_variables.scss

@@ -225,10 +225,10 @@ $kendo-stepper-progressbar-fill-text: null !default;
 $kendo-stepper-content-transition-property: height !default;
 /// The duration of the Stepper transition.
 /// @group stepper
-$kendo-stepper-content-transition-duration: 300ms !default;
+$kendo-stepper-content-transition-duration: k-duration(speedy) !default;
 /// The timing function of the Stepper transition.
 /// @group stepper
-$kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default;
+$kendo-stepper-content-transition-timing-function: k-easing(standard) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/stepper/_variables.scss" with (