@vaadin/vaadin-lumo-styles - npm Package Compare versions

Comparing version 24.7.0-alpha9 to 24.7.0-beta1

package.json

 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.7.0-alpha9",
+  "version": "24.7.0-beta1",
   "publishConfig": {
@@ -44,5 +44,5 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha9",
-    "@vaadin/icon": "24.7.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha9"
+    "@vaadin/component-base": "24.7.0-beta1",
+    "@vaadin/icon": "24.7.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-beta1"
   },
@@ -56,3 +56,3 @@ "devDependencies": {
   },
-  "gitHead": "b0a16c6ed7fc50a22a42dcab0649d74f4c300485"
+  "gitHead": "4043c518ef9b915cde612d2907ddc9bd10e5af17"
 }

utilities/transition.js

@@ -9,40 +9,42 @@ /**
 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-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 {
-    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-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;
+  }
 `;

No alert changes

Improved metrics

Total package byte prevSize

196066

increased by0.97%

Worsened metrics

Lines of code

6638

decreased by-0.12%

Dependency changes

• + Added@vaadin/component-base@24.7.0-beta1(transitive)

• + Added@vaadin/icon@24.7.0-beta1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.7.0-beta1(transitive)

• - Removed@vaadin/component-base@24.7.0-alpha9(transitive)

• - Removed@vaadin/icon@24.7.0-alpha9(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha9(transitive)

• Updated@vaadin/component-base@24.7.0-beta1

• Updated@vaadin/icon@24.7.0-beta1

• Updated@vaadin/vaadin-themable-mixin@24.7.0-beta1