@vaadin/vaadin-lumo-styles 25.0.0-alpha7 → 25.0.0-alpha9

package/auto-complete.css

@@ -99,77 +99,6 @@
   --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
   --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
   --lumo-clickable-cursor: default;
-  --vaadin-button-background: var(--lumo-contrast-5pct);
-  --vaadin-button-border: none;
-  --vaadin-button-border-radius: var(--lumo-border-radius-m);
-  --vaadin-button-font-size: var(--lumo-font-size-m);
-  --vaadin-button-font-weight: 500;
-  --vaadin-button-height: var(--lumo-size-m);
-  --vaadin-button-margin: var(--lumo-space-xs) 0;
-  --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
-  --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
-  --vaadin-button-text-color: var(--lumo-primary-text-color);
-  --vaadin-button-primary-background: var(--lumo-primary-color);
-  --vaadin-button-primary-border: none;
-  --vaadin-button-primary-font-weight: 600;
-  --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
-  --vaadin-button-tertiary-background: transparent !important;
-  --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
-  --vaadin-button-tertiary-font-weight: 500;
-  --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
-  --vaadin-checkbox-background: var(--lumo-contrast-20pct);
-  --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
-  --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
-  --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
-  --vaadin-checkbox-checkmark-char-indeterminate: '';
-  --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
-  --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
-  --vaadin-checkbox-label-color: var(--lumo-body-text-color);
-  --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);
-  --vaadin-radio-button-dot-size: 3px;
-  --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);
-  --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-  --vaadin-focus-ring-width: 2px;
-  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
-  --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
-  --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
-  --vaadin-input-field-label-font-weight: 500;
-  --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
-  --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
-  --vaadin-input-field-helper-font-weight: 400;
-  --vaadin-input-field-helper-spacing: 0.4em;
-  --vaadin-input-field-error-color: var(--lumo-error-text-color);
-  --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
-  --vaadin-input-field-error-font-weight: 400;
-  --vaadin-input-field-background: var(--lumo-contrast-10pct);
-  --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
-  --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);
-  --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
-  --vaadin-input-field-value-color: var(--lumo-body-text-color);
-  --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
-  --vaadin-input-field-value-font-weight: 500;
   --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --lumo-font-size-xxs: 0.75rem;
   --lumo-font-size-xs: 0.8125rem;

package/components/master-detail-layout.css

@@ -3,9 +3,17 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-@import '../src/components/master-detail-layout.css';
-
-:is(:root, :host)::before {
-  --vaadin-master-detail-layout-lumo-inject: 1;
-  --vaadin-master-detail-layout-lumo-inject-modules: lumo_components_master-detail-layout;
+:where(:root, :host) {
+  --vaadin-master-detail-layout-backdrop: var(
+    --lumo-shade-20pct
+  );
+  --vaadin-master-detail-layout-detail-background: var(
+    --lumo-base-color
+  );
+  --vaadin-master-detail-layout-detail-shadow:
+    0 0 0 1px var(--lumo-shade-5pct),
+    var(--lumo-box-shadow-m);
+  --vaadin-master-detail-layout-border-color: var(
+    --lumo-contrast-10pct
+  );
 }

package/global.css

@@ -4,11 +4,5 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @import './src/global/badge.css';
-@import './src/global/dark.css';
+@import './src/global/color-scheme.css';
 @import './src/global/typography.css';
-
-:where(:root, :host) {
-  color: var(--lumo-body-text-color);
-  background-color: var(--lumo-base-color);
-  color-scheme: light;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -42,9 +42,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/icon": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7"
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/icon": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9"
   },
   "devDependencies": {
     "gulp": "^5.0.1",
@@ -54,5 +54,5 @@
     "imagemin": "^9.0.0",
     "imagemin-svgo": "^10.0.1"
   },
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

package/src/components/avatar-group.css

@@ -24,17 +24,17 @@
     flex-wrap: nowrap;
   }
 
-  ::slotted(vaadin-avatar:not(:first-child)) {
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
     mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
     margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
     mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
   }
 
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
     margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
     mask-position: calc(
       50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)

package/src/components/avatar.css

@@ -5,40 +5,25 @@
  */
 @media lumo_components_avatar {
   :host {
-    position: relative;
-    display: inline-block;
-    flex: none;
-    overflow: hidden;
-    height: var(--vaadin-avatar-size, 64px);
-    width: var(--vaadin-avatar-size, 64px);
+    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     border: var(--vaadin-avatar-outline-width) solid transparent;
     margin: calc(var(--vaadin-avatar-outline-width) * -1);
-    background-clip: content-box;
-    --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     color: var(--lumo-secondary-text-color);
     background-color: var(--lumo-contrast-10pct);
-    border-radius: 50%;
     outline: none;
-    cursor: default;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  }
-
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
+    vertical-align: baseline;
   }
 
   [part='icon'] {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
     font-size: var(--vaadin-avatar-size, 64px);
     line-height: 1;
+    mask: none;
+    background: none;
   }
 
   [part='icon']::before {
@@ -51,28 +36,19 @@
     font-family: var(--lumo-font-family);
     font-size: 2.4375em;
     font-weight: 500;
-    fill: currentColor;
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
   }
 
   :host([has-color-index]) {
-    background-color: var(--vaadin-avatar-user-color);
     color: var(--lumo-base-color);
   }
 
   :host([has-color-index])::before {
-    position: absolute;
-    content: '';
-    inset: 0;
-    border-radius: inherit;
+    border: none;
     box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
   }
 
   :host([focus-ring]) {
+    outline: none;
     border-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
   }
 

package/src/components/button.css

@@ -266,7 +266,6 @@ Note, to make it work, the form fields should have the same "::before" pseudo-el
   /* Icons */
 
   [part] ::slotted(vaadin-icon) {
-    display: inline-block;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
   }

package/src/components/chart.css

@@ -15,10 +15,6 @@
     --vaadin-charts-grid-line: var(--lumo-contrast-20pct);
     --vaadin-charts-disabled-label: var(--lumo-disabled-text-color);
     --vaadin-charts-contrast: var(--lumo-contrast);
-    --vaadin-charts-contrast-5pct: var(--lumo-contrast-5pct);
-    --vaadin-charts-contrast-10pct: var(--lumo-contrast-10pct);
-    --vaadin-charts-contrast-20pct: var(--lumo-contrast-20pct);
-    --vaadin-charts-contrast-60pct: var(--lumo-contrast-60pct);
     --vaadin-charts-tooltip-background: var(--lumo-base-color);
     --vaadin-charts-tooltip-border-color: inherit;
     --vaadin-charts-button-label: var(--lumo-primary-text-color);
@@ -26,6 +22,7 @@
     --vaadin-charts-button-hover-background: var(--lumo-primary-color-10pct);
     --vaadin-charts-button-active-label: var(--lumo-primary-contrast-color);
     --vaadin-charts-button-active-background: var(--lumo-primary-color);
+    --vaadin-charts-button-border-radius: 2px;
     --vaadin-charts-xaxis-line-width: 0;
     --vaadin-charts-tooltip-background-opacity: 1;
     --vaadin-charts-color-0: #5ac2f7;

package/src/components/form-layout.css

@@ -7,5 +7,6 @@
   :host {
     --vaadin-form-layout-column-spacing: var(--lumo-space-l);
     --vaadin-form-layout-row-spacing: 0;
+    --vaadin-form-layout-label-spacing: 1em;
   }
 }

package/src/components/horizontal-layout.css

@@ -31,8 +31,4 @@
   :host([theme~='spacing-xl']) {
     gap: var(--lumo-space-xl);
   }
-
-  :host([theme~='wrap']) {
-    flex-wrap: wrap;
-  }
 }

package/src/components/icon.css

@@ -5,43 +5,7 @@
  */
 @media lumo_components_icon {
   :host {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    vertical-align: middle;
     width: var(--lumo-icon-size-m);
     height: var(--lumo-icon-size-m);
-    fill: currentColor;
-    container-type: size;
-  }
-
-  :host::after,
-  :host::before {
-    line-height: 1;
-    font-size: 100cqh;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    /* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
-    overflow: visible;
-  }
-
-  :host(:is([icon-class], [font-icon-content])) svg {
-    display: none;
-  }
-
-  :host([font-icon-content])::before {
-    content: attr(font-icon-content);
   }
 }

package/src/components/input-container.css

@@ -9,10 +9,8 @@
     align-items: center;
     flex: 0 1 auto;
     --_border-radius: var(--vaadin-input-field-border-radius, 0);
-    /* stylelint-disable-next-line length-zero-no-unit */
     --_input-border-width: var(--vaadin-input-field-border-width, 0px);
-    /* stylelint-disable-next-line length-zero-no-unit */
-    box-shadow: inset 0 0 0 var(--_input-border-width, 0px) var(--_input-border-color);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     background: var(--_background);
     padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
     font-weight: var(--vaadin-input-field-value-font-weight, 500);

package/src/components/login-form-wrapper.css

@@ -5,15 +5,19 @@
  */
 @media lumo_components_login-form-wrapper {
   :host {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: var(--lumo-space-l);
     overflow: hidden;
-    display: inline-block;
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    max-width: calc(var(--lumo-size-m) * 10);
+    width: calc(var(--lumo-size-m) * 10);
+    max-width: 100%;
     background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
   }
 
@@ -21,15 +25,12 @@
     display: none !important;
   }
 
-  [part='form'] {
-    flex: 1;
+  ::slotted(form) {
     display: flex;
     flex-direction: column;
-    box-sizing: border-box;
-    padding: var(--lumo-space-l);
   }
 
-  [part='form-title'] {
+  ::slotted([slot='form-title']) {
     margin: 0;
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
     color: var(--lumo-header-text-color);
@@ -109,20 +110,4 @@
     line-height: var(--lumo-line-height-s);
     color: var(--lumo-secondary-text-color);
   }
-
-  :host([theme~='with-overlay']) {
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    max-width: 100%;
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    :host([theme~='with-overlay']) [part='form'] {
-      height: 100%;
-      flex: 1;
-      padding: 2px;
-    }
-  }
 }

package/src/components/login-overlay-wrapper.css

@@ -51,7 +51,7 @@
     min-height: calc(var(--lumo-size-m) * 5);
   }
 
-  [part='title'] {
+  ::slotted([slot='title']) {
     color: inherit;
     margin: 0;
     font-size: var(--lumo-font-size-xxxl);
@@ -77,6 +77,11 @@
     padding: 0;
   }
 
+  ::slotted(vaadin-login-form-wrapper) {
+    min-height: 100%;
+    max-width: 100%;
+  }
+
   /* Small screen */
   @media only screen and (max-width: 500px) {
     [part='overlay'],
@@ -114,7 +119,7 @@
     }
 
     [part='brand'],
-    [part='form'] {
+    [part='form-wrapper'] {
       flex: auto;
       flex-basis: 0;
       box-sizing: border-box;
@@ -124,10 +129,15 @@
       justify-content: flex-start;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       padding: var(--lumo-space-l);
       overflow: auto;
     }
+
+    ::slotted(vaadin-login-form-wrapper) {
+      flex: 1;
+      padding: 2px;
+    }
   }
 
   /* Landscape really small screen */
@@ -147,7 +157,7 @@
       box-shadow: none;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       height: 100%;
       overflow: auto;
     }