@vaadin/vaadin-lumo-styles 24.4.6 → 24.5.0-alpha10

package/auto-complete.css

@@ -128,6 +128,8 @@
   --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
   --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
   --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);
   --vaadin-radio-button-background: var(--lumo-contrast-20pct);
   --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
   --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
@@ -135,6 +137,8 @@
   --vaadin-radio-button-label-color: var(--lumo-body-text-color);
   --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
   --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);
   --vaadin-selection-color-text: var(--lumo-primary-text-color);
   --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
@@ -157,6 +161,8 @@
   --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
   --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
   --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);
   --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
   --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
@@ -2222,11 +2228,26 @@
   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:
+    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-opacity {

package/mixins/input-field-shared.js

@@ -28,6 +28,7 @@ const inputField = css`
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
     --_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));
   }
 
   :host::before {
@@ -89,12 +90,16 @@ const inputField = css`
     --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
   }
 
-  :host([disabled]) [part='label'],
-  :host([disabled]) [part='input-field'] ::slotted(*) {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
     -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 */
   :host([invalid]) {
     --vaadin-input-field-border-color: var(--lumo-error-color);

package/mixins/loader.js

@@ -25,7 +25,9 @@ const loader = css`
   }
 
   :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;
   }
 
   @keyframes lumo-loader-fade-in {

package/mixins/overlay.js

@@ -24,7 +24,9 @@ const overlay = css`
     background-color: var(--lumo-base-color);
     background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
     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);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -41,9 +41,9 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.4.6",
-    "@vaadin/icon": "~24.4.6",
-    "@vaadin/vaadin-themable-mixin": "~24.4.6"
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/icon": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "46d3cdb72eb99d544c7bb86c3de95043b9e5857f"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

package/style.js

@@ -62,6 +62,8 @@ const globals = css`
     --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
     --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
     --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 */
     --vaadin-radio-button-background: var(--lumo-contrast-20pct);
     --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
@@ -72,6 +74,8 @@ const globals = css`
     --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
       var(--lumo-space-xs);
     --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);
     --vaadin-selection-color-text: var(--lumo-primary-text-color);
     --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
@@ -98,6 +102,8 @@ const globals = css`
     --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
     --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
     --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);
     --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
     --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);

package/utilities/transition.js

@@ -13,11 +13,26 @@ export const transition = css`
     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:
+      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-opacity {