WIP(chore): implement motion system

packages/core/scss/index.import.scss

@@ -4,4 +4,5 @@
 @import "./module-system/index.import.scss";
 @import "./styles/index.import.scss";
 @import "./elevation/index.import.scss";
+@import "./motion/index.import.scss";
 @import "./_variables.scss";

packages/core/scss/motion/index.import.scss

@@ -0,0 +1,324 @@
+@import "../functions/index.import.scss";
+
+$_default-motion-durations: (
+    short-1: 0.05s,
+    short-2: 0.1s,
+    short-3: 0.15s,
+    short-4: 0.2s,
+    medium-1: 0.25s,
+    medium-2: 0.3s,
+    medium-3: 0.35s,
+    medium-4: 0.4s,
+    long-1: 0.45s,
+    long-2: 0.5s,
+    long-3: 0.55s,
+    long-4: 0.6s,
+    extra-long-1: 0.7s,
+    extra-long-2: 0.8s,
+    extra-long-3: 0.9,
+    extra-long-4: 1s
+) !default;
+
+$_default-motion-easings: (
+    "ease-in": cubic-bezier(0.42, 0, 1, 1),
+    "ease-out": cubic-bezier(0,0, 0.58, 1),
+    "ease-in-out": cubic-bezier(0.42, 0, 0.58, 1),
+    "linear": cubic-bezier(0, 0, 1, 1),
+    "decelerate-out": cubic-bezier(0, 0, 0.2, 1),
+    "accelerate-in": cubic-bezier(0.64, 0, 1, 1),
+    "accelerate-out-back": cubic-bezier(0.45, 1.45, 0.8, 1),
+    "accelerate-in-back": cubic-bezier(0.3, -0.05, 0.7, -0.5),
+    "accelerate-in-out-back": cubic-bezier(0.7, -0.4, 0.4, 1.4)
+) !default;
+
+$kendo-motion-durations: $_default-motion-durations !default;
+
+$kendo-motion-durations: k-map-merge($kendo-motion-durations, $_default-motion-durations);
+
+$kendo-motion-easings: $_default-motion-easings !default;
+
+$kendo-motion-easings: k-map-merge($kendo-motion-easings, $_default-motion-easings);
+
+@mixin static-small($properties...) {
+
+    @if ($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-3');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin static-medium($properties...) {
+
+    @if ($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-4');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+
+}
+
+@mixin move($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-3');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin expand-small($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-3');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin collapse-small($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin expand-medium($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'medium-1');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin collapse-medium($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-4');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin fade-in-out($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin appear-medium($properties...) {
+
+    @if ($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-3');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin disappear-medium($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin appear-large($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'medium-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin disappear-large($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'short-4');
+        $_timing-function: k-map-get($kendo-motion-easings, 'linear');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin enter-single($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'medium-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'decelerate-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin exit-single($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'medium-1');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin enter-replace($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'medium-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin push($properties...) {
+
+    @if($kendo-enable-transitions) {
+        $_transition-property: $properties;
+        $_transition-duration: k-map-get($kendo-motion-durations, 'long-2');
+        $_timing-function: k-map-get($kendo-motion-easings, 'ease-in-out');
+
+        transition-property: $_transition-property;
+        transition-duration: $_transition-duration;
+        transition-timing-function: $_timing-function;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0s;
+        }
+    }
+}
+
+@mixin kendo-motion--styles() {
+    :root {
+        @each $duration, $duration-value in $kendo-motion-durations {
+            --kendo-motion-#{$duration}: #{$duration-value};
+        }
+        @each $easing, $easing-value in $kendo-motion-easings {
+            --kendo-motion-#{$easing}: #{$easing-value};
+        }
+    }
+}