@vaadin/vaadin-lumo-styles 25.0.0-beta6 → 25.0.0-rc1

package/mixins/input-field-shared.js

@@ -130,6 +130,7 @@ const inputField = css`
     25% {
       transform: translateX(4px);
     }
+
     75% {
       transform: translateX(-4px);
     }

package/mixins/menu-overlay.js

@@ -48,10 +48,7 @@ const menuOverlayExt = css`
   /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
   @media (max-width: 450px), (max-height: 450px) {
     :host {
-      top: 0 !important;
-      right: 0 !important;
-      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
+      inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 !important;
       align-items: stretch !important;
       justify-content: flex-end !important;
     }

package/mixins/overlay.js

@@ -10,10 +10,7 @@ issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
 
 const overlay = css`
   :host {
-    top: var(--lumo-space-m);
-    right: var(--lumo-space-m);
-    bottom: var(--lumo-space-m);
-    left: var(--lumo-space-m);
+    inset: var(--vaadin-overlay-viewport-inset, var(--lumo-space-m));
     /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
     /* stylelint-disable-next-line */
     outline: 0px solid transparent;

package/mixins/required-field.js

@@ -16,8 +16,7 @@ const requiredField = css`
     font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
     transition: color 0.2s;
     line-height: 1;
-    padding-inline-start: calc(var(--lumo-border-radius-m) / 4);
-    padding-inline-end: 1em;
+    padding-inline: calc(var(--lumo-border-radius-m) / 4) 1em;
     padding-bottom: 0.5em;
     /* As a workaround for diacritics being cut off, add a top padding and a
     negative margin to compensate */
@@ -63,8 +62,11 @@ const requiredField = css`
   }
 
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\\2022');
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\\2022'));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     position: absolute;
     right: 0;
     width: 1em;
@@ -72,7 +74,10 @@ const requiredField = css`
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 
   [part='error-message'] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.0.0-beta6",
+  "version": "25.0.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -44,9 +44,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-beta6",
-    "@vaadin/icon": "25.0.0-beta6",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-beta6"
+    "@vaadin/component-base": "25.0.0-rc1",
+    "@vaadin/icon": "25.0.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-rc1"
   },
   "devDependencies": {
     "cssnano": "^7.1.1",
@@ -60,5 +60,5 @@
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1"
   },
-  "gitHead": "b6b638bee18aa62f095e0a0b7bf16a39db756f84"
+  "gitHead": "cea5e86ad18824e5631b63c11150b4d7701869c5"
 }

package/src/components/checkbox.css

@@ -225,9 +225,12 @@
   }
 
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\2022');
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
     transition: opacity 0.2s;
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     width: 1em;
     text-align: center;
   }
@@ -257,7 +260,10 @@
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 
   /* Error message */

package/src/components/dialog-overlay.css

@@ -78,9 +78,6 @@
     padding: var(--lumo-space-l);
     flex: 1;
     min-height: 0;
-  }
-
-  :host([overflow]) [part='content'] {
     overflow: auto;
   }
 

package/src/components/form-item.css

@@ -17,10 +17,13 @@
   }
 
   [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\2022');
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
     transition: opacity 0.2s;
     opacity: 0;
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     position: relative;
     width: 1em;
     text-align: center;
@@ -31,6 +34,9 @@
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 }

package/src/components/grid-sorter-icons.css

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@font-face {
+  font-family: 'vaadin-grid-sorter-icons';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAA0AAAAABuwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEFAAAABkAAAAcfep+mUdERUYAAAP4AAAAHAAAAB4AJwAOT1MvMgAAAZgAAAA/AAAAYA8TBPpjbWFwAAAB7AAAAFUAAAFeF1fZ4mdhc3AAAAPwAAAACAAAAAgAAAAQZ2x5ZgAAAlgAAABcAAAAnMvguMloZWFkAAABMAAAAC8AAAA2C5Ap72hoZWEAAAFgAAAAHQAAACQGbQPHaG10eAAAAdgAAAAUAAAAHAoAAABsb2NhAAACRAAAABIAAAASAIwAYG1heHAAAAGAAAAAFgAAACAACwAKbmFtZQAAArQAAAECAAACZxWCgKhwb3N0AAADuAAAADUAAABZCrApUXicY2BkYGAA4rDECVrx/DZfGbhZGEDgyqNPOxH0/wNMq5kPALkcDEwgUQBWRA0dAHicY2BkYGA+8P8AAwMLAwgwrWZgZEAFbABY4QM8AAAAeJxjYGRgYOAAQiYGEICQSAAAAi8AFgAAeJxjYGY6yziBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKoAkwODAwvmRiPvD/AIMDMxCD1CDJKjAwAgBktQsXAHicY2GAAMZQCM0EwqshbAALxAEKeJxjYGBgZoBgGQZGBhCIAPIYwXwWBhsgzcXAwcAEhIwMCi+Z/v/9/x+sSuElA4T9/4k4K1gHFwMMMILMY2QDYmaoABOQYGJABUA7WBiGNwAAJd4NIQAAAAAAAAAACAAIABAAGAAmAEAATgAAeJyNjLENgDAMBP9tIURJwQCMQccSZgk2i5fIYBDAidJjycXr7x5EPwE2wY8si7jmyBNXGo/bNBerxJNrpxhbO3/fEFpx8ZICpV+ghxJ74fAMe+h7Ox14AbrsHB14nK2QQWrDMBRER4mTkhQK3ZRQKOgCNk7oGQqhhEIX2WSlWEI1BAlkJ5CDdNsj5Ey9Rncdi38ES+jzNJo/HwTgATcoDEthhY3wBHc4CE+pfwsX5F/hGe7Vo/AcK/UhvMSz+mGXKhZU6pww8ISz3oWn1BvhgnwTnuEJf8Jz1OpFeIlX9YULDLdFi4ASHolkSR0iuYdjLak1vAequBhj21D61Nqyi6l3qWybGPjySbPHGScGJl6dP58MYcQRI0bts7mjebBqrFENH7t3qWtj0OuqHnXcW7b0HOTZFnKryRGW2hFX1m0O2vEM3opNMfTau+CS6Z3Vx6veNnEXY6jwDxhsc2gAAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSrpYEBlIbxjQDrzgsuAAAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKyoz1cD0o087YTQATOcIewAAAA==)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

package/src/components/map.css

@@ -20,11 +20,11 @@
   }
 
   :host(:not([theme~='no-border'])) {
-    border-radius: var(--lumo-border-radius-l);
+    border-radius: var(--vaadin-map-border-radius, var(--lumo-border-radius-l));
   }
 
   :host(:not([theme~='no-border']))::before {
-    border: 1px solid var(--lumo-contrast-10pct);
+    border: 1px solid var(--vaadin-map-border-color, var(--lumo-contrast-10pct));
   }
 
   :host([focus-ring]) {
@@ -121,8 +121,8 @@
   }
 
   .ol-control button {
-    width: var(--lumo-size-s);
-    height: var(--lumo-size-s);
+    width: var(--vaadin-map-control-size, var(--lumo-size-s));
+    height: var(--vaadin-map-control-size, var(--lumo-size-s));
     border-radius: inherit;
     font-family: 'lumo-icons';
     font-size: var(--lumo-icon-size-s);

package/src/components/message.css

@@ -9,8 +9,8 @@
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
-    padding: var(--lumo-space-s) var(--lumo-space-m);
-    gap: 0;
+    padding: var(--vaadin-message-padding, var(--lumo-space-s) var(--lumo-space-m));
+    gap: var(--vaadin-message-gap, 0);
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: 100%;
@@ -27,7 +27,7 @@
   }
 
   [part='name'] {
-    color: inherit;
+    color: var(--vaadin-message-name-color, inherit);
     margin-inline-end: var(--lumo-space-s);
   }
 
@@ -36,12 +36,12 @@
   }
 
   [part='message'] {
-    color: inherit;
+    color: var(--vaadin-message-text-color, inherit);
   }
 
   [part='time'] {
-    color: var(--lumo-secondary-text-color);
-    font-size: var(--lumo-font-size-s);
+    color: var(--vaadin-message-time-color, var(--lumo-secondary-text-color));
+    font-size: var(--vaadin-message-time-font-size, var(--lumo-font-size-s));
   }
 
   ::slotted([slot='avatar']) {

package/src/components/rich-text-editor.css

@@ -23,7 +23,7 @@
   }
 
   .vaadin-rich-text-editor-container {
-    background: transparent;
+    background: var(--vaadin-rich-text-editor-background, transparent);
     border: none;
     border-radius: 0;
   }
@@ -33,22 +33,22 @@
   }
 
   [part='toolbar'] {
-    background-color: var(--lumo-contrast-5pct);
-    padding: calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs);
-    gap: 0;
+    background-color: var(--vaadin-rich-text-editor-toolbar-background, var(--lumo-contrast-5pct));
+    padding: var(--vaadin-rich-text-editor-toolbar-padding, calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs));
+    gap: var(--vaadin-rich-text-editor-toolbar-gap, 0);
   }
 
   [part~='toolbar-button'] {
-    padding: 0;
+    padding: var(--vaadin-rich-text-editor-toolbar-button-padding, 0);
     font: inherit;
     line-height: 1;
     text-transform: none;
-    background: transparent;
-    border: none;
+    background: var(--vaadin-rich-text-editor-toolbar-button-background, transparent);
+    border-width: var(--vaadin-rich-text-editor-toolbar-button-border-width, 0);
     width: var(--lumo-size-m);
     height: var(--lumo-size-m);
     border-radius: var(--lumo-border-radius-m);
-    color: var(--lumo-contrast-60pct);
+    color: var(--vaadin-rich-text-editor-toolbar-button-text-color, var(--lumo-contrast-60pct));
     margin: 2px 1px;
     cursor: var(--lumo-clickable-cursor);
     transition:
@@ -58,8 +58,8 @@
 
   [part~='toolbar-button']:not([part~='toolbar-button-pressed']):hover {
     outline: none;
-    background-color: var(--lumo-contrast-5pct);
-    color: var(--lumo-contrast-80pct);
+    --vaadin-rich-text-editor-toolbar-button-background: var(--lumo-contrast-5pct);
+    --vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-contrast-80pct);
   }
 
   [part~='toolbar-button']::before {
@@ -202,7 +202,7 @@
   }
 
   :host([disabled]) [part~='toolbar-button'] {
-    background-color: transparent;
+    --vaadin-rich-text-editor-toolbar-button-background: transparent;
   }
 
   [part~='toolbar-button']:focus,
@@ -213,18 +213,18 @@
 
   @media (hover: none) {
     [part~='toolbar-button']:hover {
-      background-color: transparent;
+      --vaadin-rich-text-editor-toolbar-button-background: transparent;
     }
   }
 
   [part~='toolbar-button-pressed'] {
-    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
-    color: var(--lumo-primary-contrast-color);
+    --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-selection-color, var(--lumo-primary-color));
+    --vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-primary-contrast-color);
   }
 
   [part~='toolbar-button']:not([part~='toolbar-button-pressed']):active {
-    background-color: var(--lumo-contrast-10pct);
-    color: var(--lumo-contrast-90pct);
+    --vaadin-rich-text-editor-toolbar-button-background: var(--lumo-contrast-10pct);
+    --vaadin-rich-text-editor-toolbar-button-text-color: var(--lumo-contrast-90pct);
   }
 
   [part~='toolbar-button-undo']::before {
@@ -310,8 +310,7 @@
   }
 
   :host([theme~='no-border']) [part='toolbar'] {
-    padding-top: var(--lumo-space-s);
-    padding-bottom: var(--lumo-space-s);
+    --vaadin-rich-text-editor-toolbar-padding: var(--lumo-space-s) var(--lumo-space-xs);
   }
 
   /* Compact */
@@ -320,11 +319,11 @@
   }
 
   :host([theme~='compact']) [part='toolbar'] {
-    padding: var(--lumo-space-xs) 0;
+    --vaadin-rich-text-editor-toolbar-padding: var(--lumo-space-xs) 0;
   }
 
   :host([theme~='compact'][theme~='no-border']) [part='toolbar'] {
-    padding: calc(var(--lumo-space-xs) + 1px) 0;
+    --vaadin-rich-text-editor-toolbar-padding: calc(var(--lumo-space-xs) + 1px) 0;
   }
 
   :host([theme~='compact']) [part~='toolbar-button'] {
@@ -337,8 +336,8 @@
   }
 
   .ql-editor {
-    color: inherit;
-    padding: var(--lumo-space-s) var(--lumo-space-m);
+    color: var(--vaadin-rich-text-editor-content-color, inherit);
+    padding: var(--vaadin-rich-text-editor-content-padding, var(--lumo-space-s) var(--lumo-space-m));
   }
 
   .ql-code-block-container {

package/src/components/upload.css

@@ -5,41 +5,36 @@
  */
 @media lumo_components_upload {
   :host {
-    display: block;
-    position: relative;
-    box-sizing: border-box;
+    border: var(--vaadin-upload-border-width, 1px) dashed var(--vaadin-upload-border-color, var(--lumo-contrast-20pct));
+    border-radius: var(--vaadin-upload-border-radius, var(--lumo-border-radius-l));
     line-height: var(--lumo-line-height-m);
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  :host(:not([nodrop])) {
-    overflow: hidden;
-    border: 1px dashed var(--lumo-contrast-20pct);
-    border-radius: var(--lumo-border-radius-l);
-    padding: var(--lumo-space-m);
+    padding: var(--vaadin-upload-padding, var(--lumo-space-m));
     transition:
       background-color 0.6s,
       border-color 0.6s;
   }
 
+  :host([nodrop]) {
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    transition: none;
+  }
+
   [part='drop-label'] {
-    display: inline-block;
-    white-space: normal;
-    padding: 0 var(--lumo-space-s);
-    color: var(--lumo-secondary-text-color);
+    color: var(--vaadin-upload-drop-label-color, var(--lumo-secondary-text-color));
+    gap: var(--vaadin-upload-drop-label-gap, var(--lumo-space-xs));
     font-family: var(--lumo-font-family);
+    padding: 0 var(--lumo-space-s);
+  }
+
+  [part='primary-buttons'] {
+    gap: 0;
   }
 
   :host([dragover-valid]) {
-    border-color: var(--lumo-primary-color-50pct);
-    background: var(--lumo-primary-color-10pct);
+    --vaadin-upload-background: var(--lumo-primary-color-10pct);
+    --vaadin-upload-border-color: var(--lumo-primary-color-50pct);
     transition:
       background-color 0.1s,
       border-color 0.1s;

package/src/global/color-scheme.css

@@ -10,6 +10,7 @@
   color-scheme: light;
 }
 
+:host([theme~='dark']),
 [theme~='dark'] {
   /* Base (background) */
   --lumo-base-color: hsl(214, 35%, 21%);

package/src/mixins/field-required.css

@@ -5,8 +5,11 @@
  */
 @media lumo_mixins_field-required {
   :host([required]) [part='required-indicator']::after {
-    content: var(--lumo-required-field-indicator, '\2022');
-    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+    content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
+    );
     position: absolute;
     right: 0;
     width: 1em;
@@ -14,7 +17,10 @@
   }
 
   :host([invalid]) [part='required-indicator']::after {
-    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    color: var(
+      --vaadin-input-field-required-indicator-color,
+      var(--lumo-required-field-indicator-color, var(--lumo-error-text-color))
+    );
   }
 
   /* RTL specific styles */