refactor(3491): rename animation duration variables and revert base v…

…ariab… (#3746)

* feat(3491): rename animationduration variables and revert base variable to be global

* fix misspelled variables

* fix failed e2e and rename quick to fast

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/assets/styles/_animation.scss

@@ -41,18 +41,18 @@
 }
 
 :root {
-  --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
-  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 // allows animation trigger via JS by adding class to element
 .calcite-animate {
   opacity: 0;
   animation-fill-mode: both;
-  animation-duration: var(--calcite-internal-animation-timing);
+  animation-duration: var(--calcite-animation-timing);
 }
 
 // specify animation

src/components/calcite-alert/calcite-alert.scss

@@ -103,7 +103,7 @@
     transform: translate3d(0, $baseline, 0);
     transition: var(--calcite-internal-animation-timing-slow) $easing-function,
       opacity var(--calcite-internal-animation-timing-slow) $easing-function,
-      all var(--calcite-internal-animation-timing) ease-in-out;
+      all var(--calcite-animation-timing) ease-in-out;
   }
 }
 

src/components/calcite-button/calcite-button.scss

@@ -44,10 +44,10 @@
     font-inherit
     font-normal;
   // include transition from focus
-  transition: color var(--calcite-internal-animation-timing) ease-in-out,
-    background-color var(--calcite-internal-animation-timing) ease-in-out,
-    box-shadow var(--calcite-internal-animation-timing) ease-in-out, outline-offset 100ms ease-in-out,
-    outline-color 100ms ease-in-out;
+  transition: color var(--calcite-animation-timing) ease-in-out,
+    background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out,
+    outline-offset var(--calcite-internal-animation-timing-fast) ease-in-out,
+    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
   &:hover {
     @apply no-underline;
   }

src/components/calcite-color-picker/calcite-color-picker.scss

@@ -199,7 +199,7 @@ $gap--large: 12px;
   }
 
   &:hover {
-    transition: outline-color var(--calcite-internal-animation-timing-quick) ease-in-out;
+    transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
     outline: 2px solid var(--calcite-ui-border-2);
     outline-offset: 2px;
   }

src/components/calcite-loader/calcite-loader.scss

@@ -106,7 +106,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
     stroke: var(--calcite-ui-brand);
     stroke-dasharray: $loader-circumference;
     transform: rotate(-90deg);
-    transition: all var(--calcite-internal-animation-timing-quick) linear;
+    transition: all var(--calcite-internal-animation-timing-fast) linear;
   }
 }
 
@@ -146,8 +146,8 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
   @apply opacity-0;
   transform: scale(0.75, 0.75);
   transform-origin: center;
-  transition: opacity calc(180ms * var(--calcite-animation-timing-factor)) linear 800ms,
-    transform calc(180ms * var(--calcite-animation-timing-factor)) linear 800ms;
+  transition: opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms,
+    transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;
 }
 
 :host([complete]) .loader__percentage {

src/components/calcite-radio-group-item/calcite-radio-group-item.scss

@@ -3,7 +3,7 @@
     self-stretch
     cursor-pointer
     font-normal;
-  transition: background-color var(--calcite-internal-animation-timing-quick) ease-in-out,
+  transition: background-color var(--calcite-internal-animation-timing-fast) ease-in-out,
     border-color var(--calcite-animation-timing) ease-in-out;
 }
 
@@ -15,9 +15,9 @@
     pointer-events-none
     items-center
     m-0.5;
-  transition: background-color var(--calcite-internal-animation-timing-quick) ease-in-out,
-    border-color var(--calcite-internal-animation-timing-quick) ease-in-out,
-    color var(--calcite-internal-animation-timing-quick) ease-in-out;
+  transition: background-color var(--calcite-internal-animation-timing-fast) ease-in-out,
+    border-color var(--calcite-internal-animation-timing-fast) ease-in-out,
+    color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
 
 .label--horizontal {

src/components/calcite-slider/calcite-slider.scss

@@ -270,11 +270,11 @@
 }
 
 .tick__label--min {
-  transition: opacity var(--calcite-internal-animation-timing);
+  transition: opacity var(--calcite-animation-timing);
 }
 
 .tick__label--max {
-  transition: opacity var(--calcite-internal-animation-timing-quick);
+  transition: opacity var(--calcite-internal-animation-timing-fast);
 }
 
 :host([has-histogram][label-handles]),

src/components/calcite-tip-manager/calcite-tip-manager.scss

@@ -64,7 +64,7 @@
     focus-base
     mt-px;
   animation-name: none;
-  animation-duration: var(--calcite-internal-animation-timing);
+  animation-duration: var(--calcite-animation-timing);
   height: var(--calcite-tip-manager-height);
   &:focus {
     @apply focus-outset;

src/components/calcite-tree-item/calcite-tree-item.scss

@@ -102,9 +102,8 @@
   margin-inline-start: theme("margin.5");
   transform: scaleY(0);
   opacity: 0;
-  transition: var(--calcite-internal-animation-timing) $easing-function,
-    opacity var(--calcite-internal-animation-timing) $easing-function,
-    all var(--calcite-internal-animation-timing) ease-in-out; // note that we're transitioning transform, not height!
+  transition: var(--calcite-animation-timing) $easing-function, opacity var(--calcite-animation-timing) $easing-function,
+    all var(--calcite-animation-timing) ease-in-out; // note that we're transitioning transform, not height!
   transform-origin: top; // keep the top of the element in the same place. this is optional.
 
   :host([expanded]) > & {

src/tests/globalStyles.e2e.ts

@@ -38,17 +38,17 @@ describe("global styles", () => {
       });
     });
 
-    it("should set animation duration to 0ms when --animation-timing-factor set to zero", async () => {
+    it("should set animation duration to 0ms when --calcite-duration-factor set to zero", async () => {
       const page = await newE2EPage({
         html: html`
           <html>
             <style>
               html {
-                --calcite-animation-timing-factor: 0;
+                --calcite-duration-factor: 0;
               }
             </style>
             <body>
-              <div style="transition: all var(--calcite-internal-animation-timing) linear;"></div>
+              <div style="transition: all var(--calcite-animation-timing) linear;"></div>
             </body>
           </html>
         `
@@ -65,13 +65,13 @@ describe("global styles", () => {
     });
   });
 
-  it("should not be able to disable animations with --animation-timing-factor at component level", async () => {
+  it("should not be able to disable animations with --calcite-duration-factor at component level", async () => {
     const page = await newE2EPage({
-      html: html` <div style="transition: all var(--calcite-internal-animation-timing) linear;"></div> `
+      html: html` <div style="transition: all var(--calcite-animation-timing) linear;"></div> `
     });
     await page.waitForChanges();
     await page.$eval("div", (element: any) => {
-      element.style.setProperty("--calcite-animation-timing-factor", 0);
+      element.style.setProperty("--calcite-duration-factor", 0);
     });
     const eleTransition = await page.evaluate(() => {
       const ele = document.querySelector("div");
@@ -85,7 +85,7 @@ describe("global styles", () => {
 
   it("should set animation duration to default value 150ms", async () => {
     const page = await newE2EPage({
-      html: html` <div style="transition: all var(--calcite-internal-animation-timing) linear;"></div> `
+      html: html` <div style="transition: all var(--calcite-animation-timing) linear;"></div> `
     });
     const eleTransition = await page.evaluate(() => {
       const ele = document.querySelector("div");

tailwind.config.js

@@ -239,7 +239,7 @@ module.exports = {
         },
         ".transition-default": {
           "transition-property": "all",
-          "transition-duration": "var(--calcite-internal-animation-timing)",
+          "transition-duration": "var(--calcite-animation-timing)",
           "transition-timing-function": "ease-in-out",
           "transition-delay": "0s"
         }