chore(scss): remove deprecated easing variables (carbon-design-system…

…#1685)

For the next release.
Also, reorganized variable definitions so it's easier to remove feature
flags when we no longer need them.

Refs carbon-design-system#1677.

src/globals/scss/_vars.scss

@@ -13,29 +13,45 @@
 
 $prefix: 'bx' !default;
 
-$carbon--ease-in: cubic-bezier(0.25, 0, 1, 1); // Used primarily for removing elements from the screen.
-$carbon--ease-out: cubic-bezier(
-  0,
-  0,
-  0.25,
-  1
-); // Used for adding elements to the screen or changing on-screen states at a users's input.
-$carbon--standard-easing: cubic-bezier(0.5, 0, 0.1, 1); // Used for the majority of animations.
-
-// For back-ward compatibility
-$bx--ease-in: $carbon--ease-in;
-$bx--ease-out: $carbon--ease-out;
-$bx--standard-easing: $carbon--standard-easing;
-
-$transition--base: 250ms;
-$transition--expansion: 300ms;
+// TODO: Remove `null`-initialization once `components-x`/`breaking-changes-x` feature flags are removed
+$carbon--ease-in: null;
+$carbon--ease-out: null;
+$carbon--standard-easing: null;
+$transition--base: null;
+$transition--expansion: null;
+$bx--ease-in: null;
+$bx--ease-out: null;
+$bx--standard-easing: null;
 
 @if feature-flag-enabled('components-x') {
   $carbon--ease-in: cubic-bezier(0.2, 0, 1, 0.9); // Used primarily for removing elements from the screen.
-  $carbon--ease-out: cubic-bezier(0, 0, 0.38, 0.9); // Used for adding elements to the screen or changing on-screen states at a users's input.
+  $carbon--ease-out: cubic-bezier(
+    0,
+    0,
+    0.38,
+    0.9
+  ); // Used for adding elements to the screen or changing on-screen states at a users's input.
   $carbon--standard-easing: cubic-bezier(0.2, 0.2, 0.38, 0.9); // Used for the majority of animations.
 
   $transition--base: 100ms;
   $transition--expansion: 150ms;
+} @else {
+  $carbon--ease-in: cubic-bezier(0.25, 0, 1, 1); // Used primarily for removing elements from the screen.
+  $carbon--ease-out: cubic-bezier(
+    0,
+    0,
+    0.25,
+    1
+  ); // Used for adding elements to the screen or changing on-screen states at a users's input.
+  $carbon--standard-easing: cubic-bezier(0.5, 0, 0.1, 1); // Used for the majority of animations.
+
+  $transition--base: 250ms;
+  $transition--expansion: 300ms;
+}
 
+@if not feature-flag-enabled('breaking-changes-x') {
+  // For back-ward compatibility
+  $bx--ease-in: $carbon--ease-in;
+  $bx--ease-out: $carbon--ease-out;
+  $bx--standard-easing: $carbon--standard-easing;
 }

src/globals/scss/migrate-to-10.x.md

@@ -238,4 +238,9 @@ No change
 
 ## `_vars.scss`
 
+| v9                                  | v10                            |
+| ----------------------------------- | ------------------------------ |
+| `$bx--ease-*` (Deprecated)          | Removed (Or defined as `null`) |
+| `$bx--standard-easing` (Deprecated) | Removed (Or defined as `null`) |
+
 TODO motion table