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

package/src/mixins/overlay.css

@@ -18,6 +18,14 @@
     align-items: center;
     justify-content: center;
 
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
+
     /* Allow centering when max-width/max-height applies. */
     margin: auto;
 

package/style.d.ts

@@ -1,5 +1,3 @@
 import type { CSSResult } from 'lit';
 
-export const globals: CSSResult;
-
 export const style: CSSResult;

package/style.js

@@ -26,94 +26,6 @@ const style = css`
   }
 `;
 
-/**
- * Default values for component-specific custom properties.
- */
-const globals = css`
-  html {
-    /* Button */
-    --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);
-    /* Checkbox */
-    --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);
-    /* Radio button */
-    --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-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);
-    --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-    --vaadin-focus-ring-width: 2px;
-    /* Label */
-    --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;
-    /* Helper */
-    --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;
-    /* Error message */
-    --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;
-    /* Input field */
-    --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;
-  }
-`;
-
 addLumoGlobalStyles('style-props', style);
 
-export { globals, style };
+export { style };

package/src/components/master-detail-layout.css

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-@media lumo_components_master-detail-layout {
-  :host(:is([drawer], [stack])) [part='detail'] {
-    background-color: var(--lumo-base-color);
-  }
-
-  :host([drawer]) [part='detail'] {
-    box-shadow: var(--lumo-box-shadow-s);
-  }
-
-  :host([drawer][orientation='horizontal']) [part='detail'] {
-    border-inline-start: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  :host([drawer][orientation='vertical']) [part='detail'] {
-    border-block-start: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  :host([drawer]) [part='backdrop'] {
-    background-color: var(--lumo-shade-20pct);
-  }
-}

package/src/global/style.css

@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-:where(:root, :host) {
-  /* Button */
-  --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);
-
-  /* Checkbox */
-  --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);
-
-  /* Radio button */
-  --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-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);
-  --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-  --vaadin-focus-ring-width: 2px;
-
-  /* Label */
-  --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;
-
-  /* Helper */
-  --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;
-
-  /* Error message */
-  --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;
-
-  /* Input field */
-  --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;
-}