@vaadin/vaadin-lumo-styles 25.0.0-alpha18 → 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/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-alpha18",
+  "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-alpha18",
-    "@vaadin/icon": "25.0.0-alpha18",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha18"
+    "@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": "cb5cafb5687a117ebead1b81e2116991cec13abe"
+  "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/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;