fix: transition (#1028)

* fix: transition * docs: update scoped variable * fix: transition value Co-authored-by: Maomao Meyer-Zhang <[email protected]>
telekom · May 4, 2022 · a36e97f · a36e97f
1 parent 614f83d
commit a36e97f
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 12 deletions.
diff --git a/packages/components/src/components/modal/modal.css b/packages/components/src/components/modal/modal.css
@@ -58,7 +58,7 @@
   --spacing-close-button: var(--telekom-spacing-unit-x2);
   --radius-close-button: var(--telekom-radius-standard);
   --transition-close-button: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+    cubic-bezier(var(--telekom-motion-easing-standard));
   --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight)
     var(--telekom-color-functional-focus);
   --color-close-button: var(--telekom-color-text-and-icon-standard);

diff --git a/...mponents/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css b/...mponents/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
@@ -23,7 +23,7 @@ app-navigation-main-mobile {
   --font-weight-child: var(--telekom-typography-font-weight-regular);
 
   --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+    cubic-bezier(var(--telekom-motion-easing-standard));
   width: 100%;
 }
 

diff --git a/...ents/src/components/telekom/app-navigation-sector-mobile/app-navigation-sector-mobile.css b/...ents/src/components/telekom/app-navigation-sector-mobile/app-navigation-sector-mobile.css
@@ -15,7 +15,7 @@ app-navigation-sector-mobile {
   --font-weight: var(--telekom-typography-font-weight-bold);
   --font-size: var(--telekom-typography-font-size-body);
   --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+    cubic-bezier(var(--telekom-motion-easing-standard));
   --border-bottom-selected: 1px solid var(--telekom-color-primary-standard);
   --color-selected: var(--telekom-color-text-and-icon-primary-standard);
   width: 100%;

diff --git a/packages/components/src/components/text-field/text-field.css b/packages/components/src/components/text-field/text-field.css
@@ -11,7 +11,7 @@
 
 scale-text-field {
   --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+    cubic-bezier(var(--telekom-motion-easing-standard));
   --radius: var(--telekom-radius-standard);
   --border: var(--telekom-spacing-unit-x025) solid
     var(--telekom-color-ui-outlined-border-standard);

diff --git a/packages/components/src/components/toggle-button/toggle-button.css b/packages/components/src/components/toggle-button/toggle-button.css
@@ -20,7 +20,7 @@
   --height-large: var(--telekom-spacing-unit-x12);
   --radius: var(--telekom-radius-small);
   --transition: all var(--telekom-motion-duration-transition)
-      var(--telekom-motion-easing-standard),
+      cubic-bezier(var(--telekom-motion-easing-standard)),
     border-radius var(--telekom-motion-duration-instant);
   --box-shadow-focus: inset 0 0 0 var(--telekom-line-weight-highlight)
     var(--telekom-color-functional-focus);

diff --git a/packages/components/src/components/tooltip/tooltip.css b/packages/components/src/components/tooltip/tooltip.css
@@ -27,11 +27,15 @@
   --max-width: 20rem;
   --transition-delay-hide: var(--telekom-motion-duration-instant);
   --transition-duration-hide: var(--telekom-motion-duration-immediate);
-  --transition-timing-function-hide: var(--telekom-motion-easing-standard);
+  --transition-timing-function-hide: cubic-bezier(
+    var(--telekom-motion-easing-standard)
+  );
 
   /* tooltip show */
   --transition-duration-show: var(--telekom-motion-duration-immediate);
-  --transition-timing-function-show: var(--telekom-motion-easing-standard);
+  --transition-timing-function-show: cubic-bezier(
+    var(--telekom-motion-easing-standard)
+  );
   --z-index: var(--scl-z-index-70);
 
   display: contents;

diff --git a/packages/components/src/html/semantic-tokens.html b/packages/components/src/html/semantic-tokens.html
@@ -21,7 +21,9 @@
         background: var(--telekom-color-background-canvas);
         transition: background;
         transition-duration: var(--telekom-motion-duration-animation);
-        transition-timing-function: var(--telekom-motion-easing-standard);
+        transition-timing-function: cubic-bezier(
+          var(--telekom-motion-easing-standard)
+        );
       }
     </style>
   </head>

diff --git a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
@@ -204,8 +204,8 @@ export const Template = (args, context) => ({
 
   --spacing-close-button: var(--telekom-spacing-unit-x2);
   --radius-close-button: var(--telekom-radius-standard);
-  --transition-close-button: all var(--telekom-motion-duration-transition) var(
-      --telekom-motion-easing-standard
+  --transition-close-button: all var(--telekom-motion-duration-transition) cubic-bezier(
+      var(--telekom-motion-easing-standard)
     );
   --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight) var(
       --telekom-color-functional-focus

diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
@@ -112,8 +112,8 @@ export const Template = (args, { argTypes }) => ({
 
 ```css
 scale-text-field {
-  --transition: all var(--telekom-motion-duration-transition) var(
-      --telekom-motion-easing-standard
+  --transition: all var(--telekom-motion-duration-transition) cubic-bezier(var(
+      --telekom-motion-easing-standard)
     );
   --radius: var(--telekom-radius-standard);
   --border: var(--telekom-spacing-unit-x025) solid var(