refactor(core): use custom properties for css transition times (#1212)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · Apr 12, 2024 · 5b4e96e · 5b4e96e
1 parent f709834
commit 5b4e96e
Show file tree

Hide file tree

Showing 14 changed files with 22 additions and 16 deletions.
diff --git a/.changeset/chilled-paws-run.md b/.changeset/chilled-paws-run.md
@@ -0,0 +1,6 @@
+---
+"@siemens/ix-aggrid": patch
+"@siemens/ix": patch
+---
+
+refactor(core): use custom properties for css transition times
diff --git a/packages/aggrid/scss/ix-aggrid.scss b/packages/aggrid/scss/ix-aggrid.scss
@@ -87,7 +87,7 @@
   }
 
   .ag-header-cell-resize::after {
-    transition: background-color 250ms linear;
+    transition: background-color var(--theme-default-time) linear;
   }
 
   .ag-header-cell-resize:hover::after {

diff --git a/packages/core/scss/legacy/components/_buttons.scss b/packages/core/scss/legacy/components/_buttons.scss
@@ -17,7 +17,7 @@
   height: $x-large-space;
   font-size: $font-size-default;
   font-weight: $font-weight-bold;
-  transition: $default-time;
+  transition: var(--theme-default-time);
   padding: 0 $small-space;
   min-width: 5rem;
   gap: $tiny-space;

diff --git a/packages/core/scss/legacy/components/_dropdown.scss b/packages/core/scss/legacy/components/_dropdown.scss
@@ -57,7 +57,7 @@
   border-radius: var(--theme-menu--border-radius);
   max-width: 100vw;
   padding: $tiny-space 0;
-  transition: background-color $default-time;
+  transition: background-color var(--theme-default-time);
   box-shadow: var(--theme-menu--box-shadow);
 
   &.xl > .dropdown-item {

diff --git a/packages/core/src/components/blind/blind.scss b/packages/core/src/components/blind/blind.scss
@@ -179,7 +179,7 @@
     display: block;
     padding: 1rem;
     transition-property: padding;
-    transition-duration: $default-time;
+    transition-duration: var(--theme-default-time);
     transition-timing-function: ease-in;
 
     &.hide {

diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss
@@ -30,7 +30,7 @@
   background-color: var(--theme-color-1);
   border-radius: $default-border-radius;
 
-  transition: all $medium-time ease-out;
+  transition: all var(--theme-medium-time) ease-out;
 
   .toggle {
     z-index: 100;

diff --git a/packages/core/src/components/event-list-item/event-list-item.scss b/packages/core/src/components/event-list-item/event-list-item.scss
@@ -27,7 +27,7 @@ $default-event-list-item-height: 2.5rem;
     border-radius: var(--event-list-item-border-radius, $default-border-radius);
     background-color: var(--theme-event-item--background);
     overflow: hidden;
-    transition: $default-time;
+    transition: var(--theme-default-time);
     cursor: pointer;
     margin-bottom: var(--event-list-item-margin-bottom, $small-space);
 

diff --git a/packages/core/src/components/expanding-search/expanding-search.scss b/packages/core/src/components/expanding-search/expanding-search.scss
@@ -25,7 +25,7 @@ $container-width: 11.5625rem;
   position: relative;
 
   .input-container {
-    transition: all 0.3s ease-in-out;
+    transition: all var(--theme-medium-time) ease-in-out;
   }
 
   input {
@@ -59,7 +59,7 @@ $container-width: 11.5625rem;
     max-width: $x-large-space;
     max-height: $x-large-space;
     border-radius: var(--theme-input--border-radius);
-    transition: all 0.15s ease-in-out;
+    transition: all var(--theme-default-time) ease-in-out;
     z-index: 1;
     align-items: center;
     position: relative;

diff --git a/packages/core/src/components/menu-about-news/menu-about-news.scss b/packages/core/src/components/menu-about-news/menu-about-news.scss
@@ -27,7 +27,7 @@ $left: 3.4rem;
   padding: 1rem;
   left: $left;
   z-index: 10000;
-  transition: left var(--animate-duration);
+  transition: left var(--theme-default-time);
 
   margin-inline-start: var(--margin) !important;
 

diff --git a/packages/core/src/components/menu-avatar/menu-avatar.scss b/packages/core/src/components/menu-avatar/menu-avatar.scss
@@ -31,7 +31,7 @@
     padding-left: 0.25rem;
     margin-left: 0.41rem;
     margin-right: 0.35rem;
-    transition: 0.15s;
+    transition: var(--theme-default-time);
 
     .avatar-name {
       display: flex;

diff --git a/packages/core/src/components/menu/burger-menu.scss b/packages/core/src/components/menu/burger-menu.scss
@@ -33,7 +33,7 @@ $focus-bdr-width: 0.0625rem;
     fill: var(--theme-menu-btn--color);
     opacity: 1;
     x: 2px;
-    transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,
+    transition: x 0.075s ease-in var(--theme-default-time), transform 0.075s ease-in-out 0.075s,
       y 0.075s ease-in-out, opacity 0.075s linear 0.075s;
     transform-origin: center;
   }

diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss
@@ -97,7 +97,7 @@ $menu-expanded-width: 16rem;
     }
 
     background-color: var(--theme-nav--background);
-    transition: width var(--animate-duration) ease-in-out;
+    transition: width var(--theme-default-time) ease-in-out;
   }
 
   .menu-overlay {
@@ -109,7 +109,7 @@ $menu-expanded-width: 16rem;
     z-index: -1;
     backdrop-filter: blur(1rem);
     background-color: var(--theme-sidebar-overlay-blur);
-    transition: left var(--animate-duration) ease-in-out;
+    transition: left var(--theme-default-time) ease-in-out;
   }
 
   .menu-overlay.visible {

diff --git a/packages/core/src/components/toggle/toggle.scss b/packages/core/src/components/toggle/toggle.scss
@@ -45,7 +45,7 @@
     right: 0;
     bottom: 0;
     background-color: var(--theme-switch-off--background);
-    transition: 150ms;
+    transition: var(--theme-default-time);
     border-radius: 1.5rem;
   }
 
@@ -57,7 +57,7 @@
     left: 4px;
     bottom: 3px;
     background-color: var(--theme-switch-thumb-off--background);
-    transition: 150ms;
+    transition: var(--theme-default-time);
     border-radius: 50%;
   }
 

diff --git a/packages/core/src/components/tree-item/tree-item.scss b/packages/core/src/components/tree-item/tree-item.scss
@@ -38,7 +38,7 @@
     height: 2rem;
 
     ix-icon {
-      transition: transform $default-time ease-in-out;
+      transition: transform var(--theme-default-time) ease-in-out;
 
       &.icon-toggle-down {
         transform: rotate(90deg);