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

Comparing version 24.5.0-alpha1 to 24.5.0-alpha10

badge.js

@@ -100,11 +100,11 @@ /**
 
-  [theme~='badge'] vaadin-icon {
+  [theme~='badge'] > vaadin-icon {
     margin: -0.25em 0;
   }
 
-  [theme~='badge'] vaadin-icon:first-child {
+  [theme~='badge'] > vaadin-icon:first-child {
     margin-left: -0.375em;
   }
 
-  [theme~='badge'] vaadin-icon:last-child {
+  [theme~='badge'] > vaadin-icon:last-child {
     margin-right: -0.375em;
@@ -111,0 +111,0 @@ }

mixins/input-field-shared.js

@@ -31,2 +31,3 @@ /**
     --_input-height: var(--vaadin-input-field-height, var(--lumo-text-field-size));
+    --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
   }
@@ -93,4 +94,3 @@
 
-  :host([disabled]) [part='label'],
-  :host([disabled]) [part='input-field'] ::slotted(*) {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
@@ -100,2 +100,7 @@ -webkit-text-fill-color: var(--lumo-disabled-text-color);
 
+  :host([disabled]) [part='input-field'] ::slotted(*) {
+    color: var(--_disabled-value-color);
+    -webkit-text-fill-color: var(--_disabled-value-color);
+  }
+
   /* Invalid style */
@@ -102,0 +107,0 @@ :host([invalid]) {

mixins/loader.js

@@ -28,3 +28,5 @@ /**
   :host([loading]) [part~='loader'] {
-    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
+    animation:
+      1s linear infinite lumo-loader-rotate,
+      0.3s 0.1s lumo-loader-fade-in both;
   }
@@ -31,0 +33,0 @@

mixins/overlay.js

@@ -27,3 +27,5 @@ /**
     border-radius: var(--lumo-border-radius-m);
-    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+    box-shadow:
+      0 0 0 1px var(--lumo-shade-5pct),
+      var(--lumo-box-shadow-m);
     color: var(--lumo-body-text-color);
@@ -30,0 +32,0 @@ font-family: var(--lumo-font-family);

package.json

 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
@@ -44,5 +44,5 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.5.0-alpha1",
-    "@vaadin/icon": "24.5.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1"
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/icon": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10"
   },
@@ -56,3 +56,3 @@ "devDependencies": {
   },
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

style.js

@@ -65,2 +65,4 @@ /**
     --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
+    --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
     /* Radio button */
@@ -76,2 +78,4 @@ --vaadin-radio-button-background: var(--lumo-contrast-20pct);
     --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
+    --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
     --vaadin-selection-color: var(--lumo-primary-color);
@@ -103,2 +107,4 @@ --vaadin-selection-color-text: var(--lumo-primary-text-color);
     --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
+    --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
+    --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
     --vaadin-input-field-height: var(--lumo-size-m);
@@ -105,0 +111,0 @@ --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);

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,5 +9,4 @@ /**
 export const transition = css`
-  .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-none {
+    transition: none;
   }
@@ -17,9 +16,25 @@ .transition-all {
   }
+  .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,
+    transition:
+      color,
+      background-color,
+      border-color,
+      text-decoration-color,
+      fill,
       stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
-  .transition-none {
-    transition: none;
-  }
   .transition-opacity {
@@ -26,0 +41,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

191775

increased by2.32%

Lines of code

6623

increased by3.5%

Dependency changes

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

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

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

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

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

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

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

• Updated@vaadin/icon@24.5.0-alpha10

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