@vaadin/vaadin-lumo-styles 25.0.0-alpha17 → 25.0.0-alpha19

package/all-imports.d.ts

@@ -2,11 +2,3 @@ export * from './mixins/field-button.js';
 export * from './mixins/menu-overlay.js';
 export * from './mixins/overlay.js';
 export * from './mixins/required-field.js';
-export * from './badge.js';
-export * from './color.js';
-export * from './sizing.js';
-export * from './spacing.js';
-export * from './style.js';
-export * from './typography.js';
-export * from './user-colors.js';
-export * from './utility.js';

package/all-imports.js

@@ -11,22 +11,4 @@ import './mixins/overlay.js';
 export * from './mixins/overlay.js';
 import './mixins/required-field.js';
 export * from './mixins/required-field.js';
-import './badge.js';
-export * from './badge.js';
-import './color.js';
-export * from './color.js';
-import './font-icons.js';
-export * from './font-icons.js';
-import './sizing.js';
-export * from './sizing.js';
-import './spacing.js';
-export * from './spacing.js';
-import './style.js';
-export * from './style.js';
-import './typography.js';
-export * from './typography.js';
-import './user-colors.js';
-export * from './user-colors.js';
-import './utility.js';
-export * from './utility.js';
 import './vaadin-iconset.js';

package/components/upload.css

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @import '../src/mixins/field-button.css';
-@import '../src/components/upload-file-list.css';
 @import '../src/components/upload-file.css';
 @import '../src/components/upload-icon.css';
 @import '../src/components/upload.css';
@@ -22,7 +21,11 @@
   --vaadin-upload-file-lumo-inject-modules:
     lumo_mixins_field-button,
     lumo_components_upload-file;
+}
 
-  --vaadin-upload-file-list-lumo-inject: 1;
-  --vaadin-upload-file-list-lumo-inject-modules: lumo_components_upload-file-list;
+:where(:root, :host) {
+  --vaadin-upload-gap: 0;
+  --vaadin-upload-file-list-border-color: var(
+    --lumo-contrast-10pct
+  );
 }

package/mixins/field-button.js

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../color.js';
-import '../font-icons.js';
-import '../sizing.js';
-import '../style.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 const fieldButton = css`
   [part$='button'] {
     flex: none;

package/mixins/helper.js

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../color.js';
-import '../sizing.js';
-import '../style.js';
-import '../typography.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 export const helper = css`
   :host {
     --_helper-spacing: var(--vaadin-input-field-helper-spacing, 0.4em);

package/mixins/input-field-shared.js

@@ -3,17 +3,14 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../color.js';
-import '../font-icons.js';
-import '../sizing.js';
-import '../spacing.js';
-import '../style.js';
-import '../typography.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { fieldButton } from './field-button.js';
 import { helper } from './helper.js';
 import { requiredField } from './required-field.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 const inputField = css`
   :host {
     --lumo-text-field-size: var(--lumo-size-m);

package/mixins/loader.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2022 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../color.js';
-import '../sizing.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 const loader = css`
   [part~='loader'] {
     box-sizing: border-box;

package/mixins/menu-overlay.js

@@ -3,11 +3,12 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../spacing.js';
-import '../style.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { overlay } from './overlay.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 const menuOverlayCore = css`
   :host([opening]),
   :host([closing]) {

package/mixins/overlay.js

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../color.js';
-import '../spacing.js';
-import '../style.js';
-import '../typography.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 const overlay = css`
   :host {
     top: var(--lumo-space-m);

package/mixins/required-field.js

@@ -3,12 +3,11 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '../color.js';
-import '../spacing.js';
-import '../style.js';
-import '../typography.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+issueWarning('Lumo .js mixins are deprecated and will be removed in V26');
+
 const requiredField = css`
   [part='label'] {
     align-self: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.0.0-alpha17",
+  "version": "25.0.0-alpha19",
   "publishConfig": {
     "access": "public"
   },
@@ -30,9 +30,8 @@
     "components/*.css",
     "mixins/*.d.ts",
     "mixins/*.js",
-    "presets/*.js",
-    "src",
-    "utilities/*.js"
+    "presets",
+    "src"
   ],
   "keywords": [
     "vaadin",
@@ -42,9 +41,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha17",
-    "@vaadin/icon": "25.0.0-alpha17",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17"
+    "@vaadin/component-base": "25.0.0-alpha19",
+    "@vaadin/icon": "25.0.0-alpha19",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha19"
   },
   "devDependencies": {
     "gulp": "^5.0.1",
@@ -54,5 +53,5 @@
     "imagemin": "^9.0.0",
     "imagemin-svgo": "^10.0.1"
   },
-  "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
+  "gitHead": "1f9af1ce5f0bae8daff044176c8a8df697763881"
 }

package/presets/compact.css

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/* Use a stronger selector than `:where()` used by other Lumo CSS */
+:is(:root, :host) {
+  --lumo-size-xl: 3rem;
+  --lumo-size-l: 2.5rem;
+  --lumo-size-m: 2rem;
+  --lumo-size-s: 1.75rem;
+  --lumo-size-xs: 1.5rem;
+  --lumo-font-size: 1rem;
+  --lumo-font-size-xxxl: 1.75rem;
+  --lumo-font-size-xxl: 1.375rem;
+  --lumo-font-size-xl: 1.125rem;
+  --lumo-font-size-l: 1rem;
+  --lumo-font-size-m: 0.875rem;
+  --lumo-font-size-s: 0.8125rem;
+  --lumo-font-size-xs: 0.75rem;
+  --lumo-font-size-xxs: 0.6875rem;
+  --lumo-line-height-m: 1.4;
+  --lumo-line-height-s: 1.2;
+  --lumo-line-height-xs: 1.1;
+  --lumo-space-xl: 1.875rem;
+  --lumo-space-l: 1.25rem;
+  --lumo-space-m: 0.625rem;
+  --lumo-space-s: 0.3125rem;
+  --lumo-space-xs: 0.1875rem;
+}

package/src/components/context-menu-overlay.css

@@ -7,6 +7,7 @@
   :host {
     align-items: flex-start;
     justify-content: flex-start;
+    --_default-offset: var(--lumo-space-xs);
     /* TODO These style overrides should not be needed.
      We should instead offer a way to have non-selectable items inside the context menu. */
     --_lumo-list-box-item-selected-icon-display: none;
@@ -38,4 +39,24 @@
       outline: 3px solid !important;
     }
   }
+
+  :host([position^='top'][top-aligned]) [part='overlay'],
+  :host([position^='bottom'][top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-context-menu-offset-top, var(--_default-offset));
+  }
+
+  :host([position^='top'][bottom-aligned]) [part='overlay'],
+  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-context-menu-offset-bottom, var(--_default-offset));
+  }
+
+  :host([position^='start'][start-aligned]) [part='overlay'],
+  :host([position^='end'][start-aligned]) [part='overlay'] {
+    margin-inline-start: var(--vaadin-context-menu-offset-start, var(--_default-offset));
+  }
+
+  :host([position^='start'][end-aligned]) [part='overlay'],
+  :host([position^='end'][end-aligned]) [part='overlay'] {
+    margin-inline-end: var(--vaadin-context-menu-offset-end, var(--_default-offset));
+  }
 }

package/src/components/upload-file.css

@@ -12,9 +12,9 @@
   }
 
   :host(:focus-visible) {
-    outline: none;
     border-radius: var(--lumo-border-radius-s);
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1);
   }
 
   [part='status'],
@@ -49,7 +49,8 @@
   }
 
   [part$='button']:focus {
-    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1);
   }
 
   /* Vertically align icons / buttons with the first line of text */

package/src/mixins/overlay.css

@@ -65,13 +65,22 @@
     box-shadow:
       0 0 0 1px var(--lumo-shade-5pct),
       var(--lumo-box-shadow-m);
+
+    /* CSS reset for font styles */
     color: var(--lumo-body-text-color);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
+    font-style: normal;
     font-weight: 400;
+    font-variant: normal;
     line-height: var(--lumo-line-height-m);
     letter-spacing: 0;
+    text-align: initial;
+    text-decoration: none;
+    text-indent: initial;
     text-transform: none;
+    white-space: initial;
+    word-spacing: initial;
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

package/utility.css

@@ -3,7 +3,6 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-@import './props.css';
 @import './src/utilities/accessibility.css';
 @import './src/utilities/background.css';
 @import './src/utilities/border.css';