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

package/src/global/style.css

@@ -0,0 +1,93 @@
+/**
+ * @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;
+}

package/src/global/typography.css

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:where(body, :host) {
+  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;
+}
+
+small,
+[theme~='font-size-s'] {
+  font-size: var(--lumo-font-size-s);
+  line-height: var(--lumo-line-height-s);
+}
+
+[theme~='font-size-xs'] {
+  font-size: var(--lumo-font-size-xs);
+  line-height: var(--lumo-line-height-xs);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-weight: 600;
+  line-height: var(--lumo-line-height-xs);
+  color: var(--lumo-header-text-color);
+  margin-block: 0;
+}
+
+:where(h1) {
+  font-size: var(--lumo-font-size-xxxl);
+}
+
+:where(h2) {
+  font-size: var(--lumo-font-size-xxl);
+}
+
+:where(h3) {
+  font-size: var(--lumo-font-size-xl);
+}
+
+:where(h4) {
+  font-size: var(--lumo-font-size-l);
+}
+
+:where(h5) {
+  font-size: var(--lumo-font-size-m);
+}
+
+:where(h6) {
+  font-size: var(--lumo-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+p,
+blockquote {
+  margin-top: 0.5em;
+  margin-bottom: 0.75em;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:where(:any-link) {
+  color: var(--lumo-primary-text-color);
+}
+
+a:where(:any-link):hover {
+  text-decoration: underline;
+}
+
+a:not(:any-link) {
+  color: var(--lumo-disabled-text-color);
+}
+
+hr {
+  display: block;
+  align-self: stretch;
+  height: 1px;
+  border: 0;
+  padding: 0;
+  margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+  background-color: var(--lumo-contrast-10pct);
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+code,
+pre {
+  border-radius: var(--lumo-border-radius-m);
+}
+
+pre code {
+  background: transparent;
+}
+
+blockquote {
+  border-left: 2px solid var(--lumo-contrast-30pct);
+  color: var(--lumo-secondary-text-color);
+}
+
+blockquote[dir='rtl'] {
+  border-left: none;
+  border-right: 2px solid var(--lumo-contrast-30pct);
+}

package/src/mixins/checkable-field.css

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_mixins_checkable-field {
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .vaadin-checkbox-container,
+  .vaadin-radio-button-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+  }
+
+  [part='checkbox'],
+  [part='radio'],
+  [part='label'],
+  ::slotted(input),
+  ::slotted(label) {
+    grid-row: 1;
+  }
+
+  [part='checkbox'],
+  [part='radio'],
+  ::slotted(input) {
+    grid-column: 1;
+  }
+
+  /* Control container (checkbox, radio button) */
+  [part='checkbox'],
+  [part='radio'] {
+    width: var(--_input-size, 1em);
+    height: var(--_input-size, 1em);
+    --_input-border-width: var(--vaadin-input-field-border-width, 0);
+    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
+  }
+
+  [part='checkbox']::before,
+  [part='radio']::before {
+    display: block;
+    content: '\202F';
+    line-height: var(--_input-size, 1em);
+    contain: paint;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    appearance: none;
+    width: initial;
+    height: initial;
+  }
+}

package/src/mixins/combo-box-loader.css

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_mixins_combo-box-loader {
+  [part='loader'] {
+    position: absolute;
+    z-index: 1;
+    inset-inline: var(--lumo-space-s);
+    top: var(--lumo-space-s);
+    margin-inline: auto 0;
+  }
+}

package/src/mixins/combo-box-overlay.css

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@media lumo_mixins_combo-box-overlay {
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0;
+  }
+
+  /* When items are empty, the spinner needs some room */
+  :host(:not([closing])) [part='content'] {
+    min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
+  }
+
+  [part='overlay'] {
+    position: relative;
+  }
+
+  :host([top-aligned]) [part='overlay'] {
+    margin-top: var(--lumo-space-xs);
+  }
+
+  :host([bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--lumo-space-xs);
+  }
+}

package/src/mixins/dashboard-item.css

@@ -0,0 +1,253 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+@media lumo_mixins_dashboard-item {
+  /* stylelint-disable length-zero-no-unit */
+  :host {
+    box-sizing: border-box;
+    --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
+    --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
+    --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
+    --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
+    --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
+    --_widget-editable-shadow: var(--lumo-box-shadow-s);
+    --_widget-selected-shadow:
+      0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);
+    --_drop-target-background-color: var(
+      --vaadin-dashboard-drop-target-background-color,
+      var(--lumo-primary-color-10pct)
+    );
+    --_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--lumo-primary-color-50pct));
+
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_icon-color: var(--lumo-contrast-60pct);
+    opacity: var(--_widget-opacity);
+    filter: var(--_widget-filter);
+  }
+
+  :host([dragging]) * {
+    visibility: hidden;
+  }
+
+  :host(:not([editable])) [part~='move-button'],
+  :host(:not([editable])) [part~='remove-button'],
+  :host(:not([editable])) #focus-button,
+  :host(:not([editable])) #focus-button-wrapper,
+  :host(:not([editable])) .mode-controls {
+    display: none;
+  }
+
+  #focustrap {
+    display: contents;
+  }
+
+  #focus-button-wrapper,
+  #focus-button {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+  }
+
+  #focus-button {
+    pointer-events: none;
+    padding: 0;
+    border: none;
+  }
+
+  .mode-controls {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+  }
+
+  .mode-controls[hidden] {
+    display: none;
+  }
+
+  /* Move-mode buttons */
+  [part~='move-backward-button'],
+  [part~='move-forward-button'],
+  [part~='move-apply-button'] {
+    position: absolute;
+    top: 50%;
+  }
+
+  [part~='move-backward-button'] {
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+  }
+
+  [part~='move-forward-button'] {
+    inset-inline-end: 0;
+    transform: translateY(-50%);
+  }
+
+  [part~='move-apply-button'] {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    --icon: var(--lumo-icons-checkmark);
+    font-size: var(--lumo-icon-size-m);
+  }
+
+  :host([first-child]) [part~='move-backward-button'],
+  :host([last-child]) [part~='move-forward-button'] {
+    display: none;
+  }
+
+  /* Resize-mode buttons */
+  [part~='resize-shrink-width-button'],
+  [part~='resize-shrink-height-button'],
+  [part~='resize-grow-width-button'],
+  [part~='resize-grow-height-button'],
+  [part~='resize-apply-button'] {
+    position: absolute;
+  }
+
+  [part~='resize-shrink-width-button'] {
+    inset-inline-end: 0;
+    top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  .mode-controls:has([part~='resize-grow-width-button'][hidden]) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%);
+  }
+
+  [part~='resize-grow-width-button'] {
+    inset-inline-start: 100%;
+    top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  [part~='resize-shrink-height-button'] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+
+  [part~='resize-grow-height-button'] {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+
+  [part~='resize-apply-button'] {
+    left: 50%;
+    top: 50%;
+
+    transform: translate(-50%, -50%);
+  }
+
+  :host([focused]) {
+    z-index: 1;
+  }
+
+  header {
+    overflow: hidden;
+    display: flex;
+    align-items: start;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+
+  [part='title'] {
+    flex: 1;
+    color: var(--lumo-header-text-color);
+    white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: var(--lumo-line-height-s);
+    margin: 0 0 1px;
+    align-self: safe center;
+  }
+
+  vaadin-dashboard-button {
+    font-family: 'lumo-icons';
+    font-size: var(--lumo-icon-size-m);
+    margin: 0;
+    z-index: 1;
+  }
+
+  vaadin-dashboard-button .icon::before {
+    display: block;
+    content: var(--icon);
+  }
+
+  /* Common styles for non-mode edit buttons */
+  [part='move-button'],
+  [part='resize-button'],
+  [part='remove-button'] {
+    color: var(--_icon-color);
+    padding-inline: 0;
+  }
+
+  :where([part='move-button'], [part='resize-button'], [part='remove-button']):hover {
+    --_icon-color: var(--lumo-primary-text-color);
+  }
+
+  :host([selected]) {
+    opacity: 1;
+    z-index: 1;
+    --_icon-color: var(--lumo-primary-text-color);
+  }
+
+  :host(:is([move-mode], [resize-mode])) {
+    --_icon-color: var(--lumo-disabled-text-color);
+  }
+
+  /* Drag handle */
+  [part~='move-button'] {
+    cursor: move;
+    --icon: var(--lumo-icons-drag-handle);
+  }
+
+  /* Remove button */
+  [part~='remove-button'] {
+    cursor: pointer;
+    --icon: var(--lumo-icons-cross);
+    margin-inline-start: var(--lumo-space-xs);
+  }
+
+  /* Mode controls */
+  .mode-controls vaadin-dashboard-button[focused] {
+    z-index: 3;
+  }
+
+  /* Move mode */
+
+  :host(:not([dir='rtl'])) [part~='move-backward-button'],
+  :host([dir='rtl']) [part~='move-forward-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    --icon: var(--lumo-icons-angle-left);
+  }
+
+  :host(:not([dir='rtl'])) [part~='move-forward-button'],
+  :host([dir='rtl']) [part~='move-backward-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    --icon: var(--lumo-icons-angle-right);
+  }
+}