@vaadin/vaadin-lumo-styles 24.7.0-alpha8 → 24.7.0-beta1

package/auto-complete.css

@@ -2221,43 +2221,39 @@
   padding-top: var(--lumo-space-xl);
 }
 
-.transition-none {
-  transition: none;
-}
-.transition-all {
-  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
 .transition {
-  transition:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke,
-    opacity,
-    box-shadow,
-    transform,
-    filter,
-    backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.transition-colors {
-  transition:
-    color,
-    background-color,
-    border-color,
-    text-decoration-color,
-    fill,
-    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.transition-opacity {
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.transition-shadow {
-  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.transition-transform {
-  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color,
+    fill, filter, opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
+  transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--lumo-utility-transition-duration, 150ms);
+}
+ .transition-all {
+  transition-property: all;
+  transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--lumo-utility-transition-duration, 150ms);
+}
+ .transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke, text-decoration-color;
+  transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--lumo-utility-transition-duration, 150ms);
+}
+ .transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--lumo-utility-transition-duration, 150ms);
+}
+ .transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--lumo-utility-transition-duration, 150ms);
+}
+ .transition-transform {
+  transition-property: rotate, scale, transform, translate;
+  transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-duration: var(--lumo-utility-transition-duration, 150ms);
+}
+ .transition-none {
+  transition-property: none;
 }
 
 /* === Font size === */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -41,9 +41,9 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha8",
-    "@vaadin/icon": "24.7.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha8"
+    "@vaadin/component-base": "24.7.0-beta1",
+    "@vaadin/icon": "24.7.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-beta1"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "d015035192480fcc8cc9df5d00a950f177b83c32"
+  "gitHead": "4043c518ef9b915cde612d2907ddc9bd10e5af17"
 }

package/utilities/transition.js

@@ -6,42 +6,44 @@
 import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
 export const transition = css`
-  .transition-none {
-    transition: none;
+  .transition {
+    transition-property: -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color,
+      fill, filter, opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-all {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .transition {
-    transition:
-      color,
-      background-color,
-      border-color,
-      text-decoration-color,
-      fill,
-      stroke,
-      opacity,
-      box-shadow,
-      transform,
-      filter,
-      backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: all;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-colors {
-    transition:
-      color,
-      background-color,
-      border-color,
-      text-decoration-color,
-      fill,
-      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: background-color, border-color, color, fill, stroke, text-decoration-color;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-opacity {
-    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: opacity;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-shadow {
-    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: box-shadow;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }
+
   .transition-transform {
-    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: rotate, scale, transform, translate;
+    transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+    transition-duration: var(--lumo-utility-transition-duration, 150ms);
+  }
+
+  .transition-none {
+    transition-property: none;
   }
 `;