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

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#141218",
         "#2B2930",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#FEFBFF",
         "#F7F3FA",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.2.4-dev.1",
+    "version": "12.3.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "12.2.4-dev.1",
+  "version": "12.3.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.5.0",
-    "@progress/kendo-theme-core": "12.2.4-dev.1",
-    "@progress/kendo-theme-utils": "12.2.4-dev.1"
+    "@progress/kendo-theme-core": "12.3.0-dev.1",
+    "@progress/kendo-theme-utils": "12.3.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "fa01827fd3e94ef6e83f67fa2dc9038288d128fc"
+  "gitHead": "689804b100fdba0f1c7ef277340b9a47802b2ccc"
 }

package/scss/button/_variables.scss

@@ -270,9 +270,9 @@ $kendo-flat-button-selected-opacity: .22 !default;
 /// @group button
 $kendo-flat-button-focus-ring-opacity: unset !default;
 
-/// The box-shadow transition of the Button.
+/// The transition of the Button.
 /// @group button
-$kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;
+$kendo-button-transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
     $kendo-button-border-width: $kendo-button-border-width,

package/scss/checkbox/_theme.scss

@@ -69,14 +69,14 @@
         /* Checkbox Ripple animation */
 
         &::after {
-            animation: ripple-checkbox 225ms cubic-bezier(0, 0, 0.2, 1);
+            animation: ripple-checkbox k-transition(fade-out);
         }
 
         &:checked,
         &.k-checked,
         &.k-indeterminate {
             &::after {
-                animation: ripple-checkbox-checked 225ms cubic-bezier(0, 0, 0.2, 1);
+                animation: ripple-checkbox-checked k-transition(fade-out);
             }
         }
 

package/scss/core/_index.scss

@@ -13,6 +13,9 @@
 // Radii
 @use "./border-radii/index.scss" as *;
 
+// Motion
+@use "./motion/index.scss" as *;
+
 // Variables
 @forward "../_variables.scss";
 
@@ -45,6 +48,15 @@
     // Spacing
     $default-spacing: $kendo-spacing,
     $kendo-spacing: $kendo-spacing !default,
+    // Motion
+    $default-easings: $kendo-easings,
+    $kendo-easings: $kendo-easings !default,
+
+    $default-durations: $kendo-durations,
+    $kendo-durations: $kendo-durations !default,
+
+    $default-transitions: $kendo-transitions,
+    $kendo-transitions: $kendo-transitions !default,
 );
 
 // Global disabled styles

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

@@ -249,7 +249,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

@@ -37,7 +37,7 @@ $kendo-floating-label-focus-offset-y: 0px !default;
 
 /// The transition of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-transition: .15s cubic-bezier( .4, 0, .2, 1 ) !default;
+$kendo-floating-label-transition: k-transition(scale-in) !default;
 
 /// The background color of the Floating Label.
 /// @group floating-label

package/scss/input/_layout.scss

@@ -1,6 +1,7 @@
 @use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
 @use "../core/z-index/index.scss" as *;
+@use "../core/motion/index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *;
 
 
@@ -79,7 +80,7 @@
             inset: -1px;
             opacity: 0;
             transform: scaleX(0);
-            transition: opacity .3s, transform .3s;
+            transition: opacity k-transition(slide-in), transform k-transition(slide-in);
             pointer-events: none;
         }
 

package/scss/menu/_layout.scss

@@ -1,6 +1,5 @@
 @use "../_variables.scss" as *;
 @use "../core/_index.scss" as *;
-@use "../core/motion/index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/menu/_layout.scss" as *;
 
 
@@ -9,13 +8,6 @@
     @include kendo-menu--layout-base();
 
     // Menubar
-    .k-menu:not(.k-context-menu) {
-
-        // Root items
-        > .k-menu-item {
-            transition: $kendo-transition;
-        }
-    }
 
     .k-menu-expand-arrow {
         margin-inline-end: 0;

package/scss/radio/_layout.scss

@@ -41,9 +41,4 @@
         }
     }
 
-    .k-radio::before {
-        transition: transform linear 280ms;
-        transform-origin: 0 0;
-    }
-
 }

package/scss/radio/_theme.scss

@@ -66,13 +66,13 @@
         /* Radio Ripple animation */
 
         &::after {
-            animation: ripple-radio 225ms cubic-bezier(0, 0, 0.2, 1);
+            animation: ripple-radio k-transition(fade-out);
         }
 
         &:checked,
         &.k-checked {
             &::after {
-                animation: ripple-radio-checked 225ms cubic-bezier(0, 0, 0.2, 1);
+                animation: ripple-radio-checked k-transition(fade-out);
             }
         }
 

package/scss/slider/_variables.scss

@@ -90,16 +90,16 @@ $kendo-slider-draghandle-focus-shadow: 0 0 0 k-spacing(2.5) color-mix(in srgb, k
 
 /// 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

@@ -227,10 +227,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 (
     $kendo-stepper-margin-x: $kendo-stepper-margin-x,