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

Comparing version 24.5.0-alpha4 to 24.5.0-alpha5

package.json

 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.5.0-alpha4",
+  "version": "24.5.0-alpha5",
   "publishConfig": {
@@ -44,5 +44,5 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.5.0-alpha4",
-    "@vaadin/icon": "24.5.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha4"
+    "@vaadin/component-base": "24.5.0-alpha5",
+    "@vaadin/icon": "24.5.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha5"
   },
@@ -56,3 +56,3 @@ "devDependencies": {
   },
-  "gitHead": "a2cd3079183a097b793073eeffd3bd59dec2b664"
+  "gitHead": "4e57d240ababf0c2db9d674891b90bdf3812e6ae"
 }

utilities/background.js

@@ -18,16 +18,16 @@ /**
 
-  .bg-tint-5 {
-    background-color: var(--lumo-tint-5pct);
+  .bg-tint {
+    background-color: var(--lumo-tint);
   }
-  .bg-tint-10 {
-    background-color: var(--lumo-tint-10pct);
+  .bg-tint-90 {
+    background-color: var(--lumo-tint-90pct);
   }
-  .bg-tint-20 {
-    background-color: var(--lumo-tint-20pct);
+  .bg-tint-80 {
+    background-color: var(--lumo-tint-80pct);
   }
-  .bg-tint-30 {
-    background-color: var(--lumo-tint-30pct);
+  .bg-tint-70 {
+    background-color: var(--lumo-tint-70pct);
   }
-  .bg-tint-40 {
-    background-color: var(--lumo-tint-40pct);
+  .bg-tint-60 {
+    background-color: var(--lumo-tint-60pct);
   }
@@ -37,32 +37,32 @@ .bg-tint-50 {
   }
-  .bg-tint-60 {
-    background-color: var(--lumo-tint-60pct);
+  .bg-tint-40 {
+    background-color: var(--lumo-tint-40pct);
   }
-  .bg-tint-70 {
-    background-color: var(--lumo-tint-70pct);
+  .bg-tint-30 {
+    background-color: var(--lumo-tint-30pct);
   }
-  .bg-tint-80 {
-    background-color: var(--lumo-tint-80pct);
+  .bg-tint-20 {
+    background-color: var(--lumo-tint-20pct);
   }
-  .bg-tint-90 {
-    background-color: var(--lumo-tint-90pct);
+  .bg-tint-10 {
+    background-color: var(--lumo-tint-10pct);
   }
-  .bg-tint {
-    background-color: var(--lumo-tint);
+  .bg-tint-5 {
+    background-color: var(--lumo-tint-5pct);
   }
 
-  .bg-shade-5 {
-    background-color: var(--lumo-shade-5pct);
+  .bg-shade {
+    background-color: var(--lumo-shade);
   }
-  .bg-shade-10 {
-    background-color: var(--lumo-shade-10pct);
+  .bg-shade-90 {
+    background-color: var(--lumo-shade-90pct);
   }
-  .bg-shade-20 {
-    background-color: var(--lumo-shade-20pct);
+  .bg-shade-80 {
+    background-color: var(--lumo-shade-80pct);
   }
-  .bg-shade-30 {
-    background-color: var(--lumo-shade-30pct);
+  .bg-shade-70 {
+    background-color: var(--lumo-shade-70pct);
   }
-  .bg-shade-40 {
-    background-color: var(--lumo-shade-40pct);
+  .bg-shade-60 {
+    background-color: var(--lumo-shade-60pct);
   }
@@ -72,32 +72,32 @@ .bg-shade-50 {
   }
-  .bg-shade-60 {
-    background-color: var(--lumo-shade-60pct);
+  .bg-shade-40 {
+    background-color: var(--lumo-shade-40pct);
   }
-  .bg-shade-70 {
-    background-color: var(--lumo-shade-70pct);
+  .bg-shade-30 {
+    background-color: var(--lumo-shade-30pct);
   }
-  .bg-shade-80 {
-    background-color: var(--lumo-shade-80pct);
+  .bg-shade-20 {
+    background-color: var(--lumo-shade-20pct);
   }
-  .bg-shade-90 {
-    background-color: var(--lumo-shade-90pct);
+  .bg-shade-10 {
+    background-color: var(--lumo-shade-10pct);
   }
-  .bg-shade {
-    background-color: var(--lumo-shade);
+  .bg-shade-5 {
+    background-color: var(--lumo-shade-5pct);
   }
 
-  .bg-contrast-5 {
-    background-color: var(--lumo-contrast-5pct);
+  .bg-contrast {
+    background-color: var(--lumo-contrast);
   }
-  .bg-contrast-10 {
-    background-color: var(--lumo-contrast-10pct);
+  .bg-contrast-90 {
+    background-color: var(--lumo-contrast-90pct);
   }
-  .bg-contrast-20 {
-    background-color: var(--lumo-contrast-20pct);
+  .bg-contrast-80 {
+    background-color: var(--lumo-contrast-80pct);
   }
-  .bg-contrast-30 {
-    background-color: var(--lumo-contrast-30pct);
+  .bg-contrast-70 {
+    background-color: var(--lumo-contrast-70pct);
   }
-  .bg-contrast-40 {
-    background-color: var(--lumo-contrast-40pct);
+  .bg-contrast-60 {
+    background-color: var(--lumo-contrast-60pct);
   }
@@ -107,16 +107,16 @@ .bg-contrast-50 {
   }
-  .bg-contrast-60 {
-    background-color: var(--lumo-contrast-60pct);
+  .bg-contrast-40 {
+    background-color: var(--lumo-contrast-40pct);
   }
-  .bg-contrast-70 {
-    background-color: var(--lumo-contrast-70pct);
+  .bg-contrast-30 {
+    background-color: var(--lumo-contrast-30pct);
   }
-  .bg-contrast-80 {
-    background-color: var(--lumo-contrast-80pct);
+  .bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct);
   }
-  .bg-contrast-90 {
-    background-color: var(--lumo-contrast-90pct);
+  .bg-contrast-10 {
+    background-color: var(--lumo-contrast-10pct);
   }
-  .bg-contrast {
-    background-color: var(--lumo-contrast);
+  .bg-contrast-5 {
+    background-color: var(--lumo-contrast-5pct);
   }
@@ -123,0 +123,0 @@

utilities/border.js

@@ -13,2 +13,8 @@ /**
   }
+  .border-dashed {
+    --lumo-utility-border-style: dashed;
+  }
+  .border-dotted {
+    --lumo-utility-border-style: dotted;
+  }
   .border {
@@ -40,24 +46,18 @@ border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
   }
-  .border-dashed {
-    --lumo-utility-border-style: dashed;
-  }
-  .border-dotted {
-    --lumo-utility-border-style: dotted;
-  }
 
   /* === Border color === */
-  .border-contrast-5 {
-    --lumo-utility-border-color: var(--lumo-contrast-5pct);
+  .border-contrast {
+    --lumo-utility-border-color: var(--lumo-contrast);
   }
-  .border-contrast-10 {
-    --lumo-utility-border-color: var(--lumo-contrast-10pct);
+  .border-contrast-90 {
+    --lumo-utility-border-color: var(--lumo-contrast-90pct);
   }
-  .border-contrast-20 {
-    --lumo-utility-border-color: var(--lumo-contrast-20pct);
+  .border-contrast-80 {
+    --lumo-utility-border-color: var(--lumo-contrast-80pct);
   }
-  .border-contrast-30 {
-    --lumo-utility-border-color: var(--lumo-contrast-30pct);
+  .border-contrast-70 {
+    --lumo-utility-border-color: var(--lumo-contrast-70pct);
   }
-  .border-contrast-40 {
-    --lumo-utility-border-color: var(--lumo-contrast-40pct);
+  .border-contrast-60 {
+    --lumo-utility-border-color: var(--lumo-contrast-60pct);
   }
@@ -67,16 +67,16 @@ .border-contrast-50 {
   }
-  .border-contrast-60 {
-    --lumo-utility-border-color: var(--lumo-contrast-60pct);
+  .border-contrast-40 {
+    --lumo-utility-border-color: var(--lumo-contrast-40pct);
   }
-  .border-contrast-70 {
-    --lumo-utility-border-color: var(--lumo-contrast-70pct);
+  .border-contrast-30 {
+    --lumo-utility-border-color: var(--lumo-contrast-30pct);
   }
-  .border-contrast-80 {
-    --lumo-utility-border-color: var(--lumo-contrast-80pct);
+  .border-contrast-20 {
+    --lumo-utility-border-color: var(--lumo-contrast-20pct);
   }
-  .border-contrast-90 {
-    --lumo-utility-border-color: var(--lumo-contrast-90pct);
+  .border-contrast-10 {
+    --lumo-utility-border-color: var(--lumo-contrast-10pct);
   }
-  .border-contrast {
-    --lumo-utility-border-color: var(--lumo-contrast);
+  .border-contrast-5 {
+    --lumo-utility-border-color: var(--lumo-contrast-5pct);
   }
@@ -117,8 +117,8 @@
   }
+  .border-warning-strong {
+    --lumo-utility-border-color: var(--lumo-warning-text-color);
+  }
   .border-warning-10 {
     --lumo-utility-border-color: var(--lumo-warning-color-10pct);
   }
-  .border-warning-strong {
-    --lumo-utility-border-color: var(--lumo-warning-text-color);
-  }
 
@@ -125,0 +125,0 @@ /* === Border radius === */

utilities/flexbox-grid.js

@@ -70,4 +70,7 @@ /**
   /* === Flex === */
+  .flex-1 {
+    flex: 1 1 0%;
+  }
   .flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
@@ -93,16 +96,16 @@ .flex-none {
   /* === Flex grow === */
+  .flex-grow {
+    flex-grow: 1;
+  }
   .flex-grow-0 {
     flex-grow: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
 
   /* === Flex shrink === */
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
 
@@ -323,2 +326,17 @@ /* === Flex wrap === */
   @media (min-width: 640px) {
+    .sm\\items-baseline {
+      align-items: baseline;
+    }
+    .sm\\items-center {
+      align-items: center;
+    }
+    .sm\\items-end {
+      align-items: flex-end;
+    }
+    .sm\\items-start {
+      align-items: flex-start;
+    }
+    .sm\\items-stretch {
+      align-items: stretch;
+    }
     .sm\\:flex-col {
@@ -369,2 +387,17 @@ flex-direction: column;
   @media (min-width: 768px) {
+    .md\\items-baseline {
+      align-items: baseline;
+    }
+    .md\\items-center {
+      align-items: center;
+    }
+    .md\\items-end {
+      align-items: flex-end;
+    }
+    .md\\items-start {
+      align-items: flex-start;
+    }
+    .md\\items-stretch {
+      align-items: stretch;
+    }
     .md\\:flex-col {
@@ -414,2 +447,17 @@ flex-direction: column;
   @media (min-width: 1024px) {
+    .lg\\items-baseline {
+      align-items: baseline;
+    }
+    .lg\\items-center {
+      align-items: center;
+    }
+    .lg\\items-end {
+      align-items: flex-end;
+    }
+    .lg\\items-start {
+      align-items: flex-start;
+    }
+    .lg\\items-stretch {
+      align-items: stretch;
+    }
     .lg\\:flex-col {
@@ -459,2 +507,17 @@ flex-direction: column;
   @media (min-width: 1280px) {
+    .xl\\items-baseline {
+      align-items: baseline;
+    }
+    .xl\\items-center {
+      align-items: center;
+    }
+    .xl\\items-end {
+      align-items: flex-end;
+    }
+    .xl\\items-start {
+      align-items: flex-start;
+    }
+    .xl\\items-stretch {
+      align-items: stretch;
+    }
     .xl\\:flex-col {
@@ -504,2 +567,17 @@ flex-direction: column;
   @media (min-width: 1536px) {
+    .\\32xl\\items-baseline {
+      align-items: baseline;
+    }
+    .\\32xl\\items-center {
+      align-items: center;
+    }
+    .\\32xl\\items-end {
+      align-items: flex-end;
+    }
+    .\\32xl\\items-start {
+      align-items: flex-start;
+    }
+    .\\32xl\\items-stretch {
+      align-items: stretch;
+    }
     .\\32xl\\:flex-col {
@@ -506,0 +584,0 @@ flex-direction: column;

utilities/layout.js

@@ -261,2 +261,5 @@ /**
   /* === Z-index === */
+  .z-0 {
+    z-index: 0;
+  }
   .z-10 {
@@ -277,2 +280,5 @@ z-index: 10;
   }
+  .z-auto {
+    z-index: auto;
+  }
 
@@ -279,0 +285,0 @@ /* === Responsive design === */

utilities/shadows.js

@@ -10,2 +10,5 @@ /**
   /* === Box shadow === */
+  .shadow-none {
+    box-shadow: none;
+  }
   .shadow-xs {
@@ -12,0 +15,0 @@ box-shadow: var(--lumo-box-shadow-xs);

utilities/transition.js

@@ -9,2 +9,8 @@ /**
 export const transition = css`
+  .transition-none {
+    transition: none;
+  }
+  .transition-all {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
   .transition {
@@ -14,5 +20,2 @@ transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
   }
-  .transition-all {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
   .transition-colors {
@@ -22,5 +25,2 @@ transition: color, background-color, border-color, text-decoration-color, fill,
   }
-  .transition-none {
-    transition: none;
-  }
   .transition-opacity {
@@ -27,0 +27,0 @@ transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

190495

increased by1.63%

Lines of code

6573

increased by2.72%

Dependency changes

• + Added@vaadin/component-base@24.5.0-alpha5(transitive)

• + Added@vaadin/icon@24.5.0-alpha5(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.5.0-alpha5(transitive)

• - Removed@vaadin/component-base@24.5.0-alpha4(transitive)

• - Removed@vaadin/icon@24.5.0-alpha4(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.5.0-alpha4(transitive)

• Updated@vaadin/component-base@24.5.0-alpha5

• Updated@vaadin/icon@24.5.0-alpha5

• Updated@vaadin/vaadin-themable-mixin@24.5.0-alpha5