@vaadin/vaadin-lumo-styles 25.0.0-alpha2 → 25.0.0-alpha21

package/src/components/upload.css

@@ -0,0 +1,56 @@
+/**
+ * @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_upload {
+  :host {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    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);
+    transition:
+      background-color 0.6s,
+      border-color 0.6s;
+  }
+
+  [part='drop-label'] {
+    display: inline-block;
+    white-space: normal;
+    padding: 0 var(--lumo-space-s);
+    color: var(--lumo-secondary-text-color);
+    font-family: var(--lumo-font-family);
+  }
+
+  :host([dragover-valid]) {
+    border-color: var(--lumo-primary-color-50pct);
+    background: var(--lumo-primary-color-10pct);
+    transition:
+      background-color 0.1s,
+      border-color 0.1s;
+  }
+
+  :host([dragover-valid]) [part='drop-label'] {
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host([disabled]) [part='drop-label'],
+  :host([max-files-reached]) [part='drop-label'] {
+    color: var(--lumo-disabled-text-color);
+  }
+}

package/src/components/user-tag.css

@@ -0,0 +1,48 @@
+/**
+ * @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_user-tag {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    margin: 0 0 var(--vaadin-user-tag-offset);
+    opacity: 0;
+    height: 1.3rem;
+    transition: opacity 0.2s ease-in-out;
+    background-color: var(--vaadin-user-tag-color);
+    color: #fff;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    --vaadin-user-tag-offset: 4px;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-xxs);
+    border-radius: var(--lumo-border-radius-s);
+    box-shadow: var(--lumo-box-shadow-xs);
+    --vaadin-user-tag-offset: var(--lumo-space-xs);
+  }
+
+  :host(.show) {
+    opacity: 1;
+  }
+
+  :host(:last-of-type) {
+    margin-bottom: 0;
+  }
+
+  [part='name'] {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    height: 1.3rem;
+    font-size: 13px;
+    color: var(--lumo-primary-contrast-color);
+    padding: 0.3em calc(0.3em + var(--lumo-border-radius-s) / 4);
+    line-height: 1;
+    font-weight: 500;
+    min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
+  }
+}

package/src/components/user-tags-overlay.css

@@ -0,0 +1,64 @@
+/**
+ * @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_user-tags-overlay {
+  [part='overlay'] {
+    box-shadow: none;
+    background: transparent;
+    position: relative;
+    left: -4px;
+    padding: 4px;
+    outline: none;
+    overflow: visible;
+    will-change: opacity, transform;
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+  }
+
+  :host([dir='rtl']) [part='overlay'] {
+    left: auto;
+    right: -4px;
+  }
+
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s user-tags-overlay-dummy-animation;
+  }
+
+  @keyframes user-tags-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-user-tags-enter ease-out both;
+  }
+
+  @keyframes lumo-user-tags-enter {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-user-tags-exit both;
+  }
+
+  @keyframes lumo-user-tags-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/components/vertical-layout.css

@@ -0,0 +1,34 @@
+/**
+ * @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_components_vertical-layout {
+  :host([theme~='margin']) {
+    margin: var(--lumo-space-m);
+  }
+
+  :host([theme~='padding']) {
+    padding: var(--lumo-space-m);
+  }
+
+  :host([theme~='spacing-xs']) {
+    gap: var(--lumo-space-xs);
+  }
+
+  :host([theme~='spacing-s']) {
+    gap: var(--lumo-space-s);
+  }
+
+  :host([theme~='spacing']) {
+    gap: var(--lumo-space-m);
+  }
+
+  :host([theme~='spacing-l']) {
+    gap: var(--lumo-space-l);
+  }
+
+  :host([theme~='spacing-xl']) {
+    gap: var(--lumo-space-xl);
+  }
+}

package/src/global/badge.css

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+[theme~='badge'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
+  color: var(--lumo-primary-text-color);
+  background-color: var(--lumo-primary-color-10pct);
+  border-radius: var(--lumo-border-radius-s);
+  font-family: var(--lumo-font-family);
+  font-size: var(--lumo-font-size-s);
+  line-height: 1;
+  font-weight: 500;
+  text-transform: initial;
+  letter-spacing: initial;
+  min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
+  flex-shrink: 0;
+}
+
+/* Ensure proper vertical alignment */
+[theme~='badge']::before {
+  display: inline-block;
+  content: '\2003';
+  width: 0;
+}
+
+[theme~='badge'][theme~='small'] {
+  font-size: var(--lumo-font-size-xxs);
+  line-height: 1;
+}
+
+/* Colors */
+
+[theme~='badge'][theme~='success'] {
+  color: var(--lumo-success-text-color);
+  background-color: var(--lumo-success-color-10pct);
+}
+
+[theme~='badge'][theme~='error'] {
+  color: var(--lumo-error-text-color);
+  background-color: var(--lumo-error-color-10pct);
+}
+
+[theme~='badge'][theme~='warning'] {
+  color: var(--lumo-warning-text-color);
+  background-color: var(--lumo-warning-color-10pct);
+}
+
+[theme~='badge'][theme~='contrast'] {
+  color: var(--lumo-contrast-80pct);
+  background-color: var(--lumo-contrast-5pct);
+}
+
+/* Primary */
+
+[theme~='badge'][theme~='primary'] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--lumo-primary-color);
+}
+
+[theme~='badge'][theme~='success'][theme~='primary'] {
+  color: var(--lumo-success-contrast-color);
+  background-color: var(--lumo-success-color);
+}
+
+[theme~='badge'][theme~='error'][theme~='primary'] {
+  color: var(--lumo-error-contrast-color);
+  background-color: var(--lumo-error-color);
+}
+
+[theme~='badge'][theme~='warning'][theme~='primary'] {
+  color: var(--lumo-warning-contrast-color);
+  background-color: var(--lumo-warning-color);
+}
+
+[theme~='badge'][theme~='contrast'][theme~='primary'] {
+  color: var(--lumo-base-color);
+  background-color: var(--lumo-contrast);
+}
+
+/* Links */
+
+[theme~='badge'][href]:hover {
+  text-decoration: none;
+}
+
+/* Icon */
+
+[theme~='badge'] > vaadin-icon {
+  margin: -0.25em 0;
+}
+
+[theme~='badge'] > vaadin-icon:first-child {
+  margin-left: -0.375em;
+}
+
+[theme~='badge'] > vaadin-icon:last-child {
+  margin-right: -0.375em;
+}
+
+vaadin-icon[theme~='badge'][icon] {
+  min-width: 0;
+  padding: 0;
+  font-size: 1rem;
+  width: var(--lumo-icon-size-m);
+  height: var(--lumo-icon-size-m);
+}
+
+vaadin-icon[theme~='badge'][icon][theme~='small'] {
+  width: var(--lumo-icon-size-s);
+  height: var(--lumo-icon-size-s);
+}
+
+/* Empty */
+
+[theme~='badge']:not([icon]):empty {
+  min-width: 0;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  border-radius: 50%;
+  background-color: var(--lumo-primary-color);
+}
+
+[theme~='badge'][theme~='small']:not([icon]):empty {
+  width: 0.75em;
+  height: 0.75em;
+}
+
+[theme~='badge'][theme~='contrast']:not([icon]):empty {
+  background-color: var(--lumo-contrast);
+}
+
+[theme~='badge'][theme~='success']:not([icon]):empty {
+  background-color: var(--lumo-success-color);
+}
+
+[theme~='badge'][theme~='error']:not([icon]):empty {
+  background-color: var(--lumo-error-color);
+}
+
+[theme~='badge'][theme~='warning']:not([icon]):empty {
+  background-color: var(--lumo-warning-color);
+}
+
+/* Pill */
+
+[theme~='badge'][theme~='pill'] {
+  --lumo-border-radius-s: 1em;
+}
+
+/* RTL specific styles */
+
+[dir='rtl'][theme~='badge'] vaadin-icon:first-child {
+  margin-right: -0.375em;
+  margin-left: 0;
+}
+
+[dir='rtl'][theme~='badge'] vaadin-icon:last-child {
+  margin-left: -0.375em;
+  margin-right: 0;
+}

package/src/global/color-scheme.css

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:where(:root, :host) {
+  color: var(--lumo-body-text-color);
+  background-color: var(--lumo-base-color);
+  color-scheme: light;
+}
+
+[theme~='dark'] {
+  /* Base (background) */
+  --lumo-base-color: hsl(214, 35%, 21%);
+
+  /* Tint */
+  --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
+  --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
+  --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
+  --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
+  --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
+  --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
+  --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+  --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
+  --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+  --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+  --lumo-tint: hsl(214, 100%, 98%);
+
+  /* Shade */
+  --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
+  --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
+  --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
+  --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
+  --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
+  --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
+  --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
+  --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
+  --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
+  --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
+  --lumo-shade: hsl(214, 33%, 13%);
+
+  /* Contrast */
+  --lumo-contrast-5pct: var(--lumo-tint-5pct);
+  --lumo-contrast-10pct: var(--lumo-tint-10pct);
+  --lumo-contrast-20pct: var(--lumo-tint-20pct);
+  --lumo-contrast-30pct: var(--lumo-tint-30pct);
+  --lumo-contrast-40pct: var(--lumo-tint-40pct);
+  --lumo-contrast-50pct: var(--lumo-tint-50pct);
+  --lumo-contrast-60pct: var(--lumo-tint-60pct);
+  --lumo-contrast-70pct: var(--lumo-tint-70pct);
+  --lumo-contrast-80pct: var(--lumo-tint-80pct);
+  --lumo-contrast-90pct: var(--lumo-tint-90pct);
+  --lumo-contrast: var(--lumo-tint);
+
+  /* Text */
+  --lumo-header-text-color: var(--lumo-contrast);
+  --lumo-body-text-color: var(--lumo-contrast-90pct);
+  --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+  --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+  --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+  /* Primary */
+  --lumo-primary-color: hsl(214, 90%, 48%);
+  --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+  --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+  --lumo-primary-text-color: hsl(214, 90%, 77%);
+  --lumo-primary-contrast-color: #fff;
+
+  /* Error */
+  --lumo-error-color: hsl(3, 79%, 49%);
+  --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+  --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+  --lumo-error-text-color: hsl(3, 100%, 80%);
+
+  /* Success */
+  --lumo-success-color: hsl(145, 72%, 30%);
+  --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+  --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+  --lumo-success-text-color: hsl(145, 85%, 46%);
+
+  /* Warning */
+  --lumo-warning-color: hsl(43, 100%, 48%);
+  --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
+  --lumo-warning-text-color: hsl(45, 100%, 60%);
+  --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+
+  /* User colors */
+  --vaadin-user-color-0: #ff66c7;
+  --vaadin-user-color-1: #9d8aff;
+  --vaadin-user-color-2: #8aff66;
+  --vaadin-user-color-3: #ffbd66;
+  --vaadin-user-color-4: #dc6bff;
+  --vaadin-user-color-5: #66fffa;
+  --vaadin-user-color-6: #e6ff66;
+
+  color: var(--lumo-body-text-color);
+  background-color: var(--lumo-base-color);
+  color-scheme: dark;
+}

package/{utility-global.js → src/global/index.css}

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { addLumoGlobalStyles } from './global.js';
-import { utility } from './utility.js';
-
-addLumoGlobalStyles('utility', utility);
+@import './badge.css';
+@import './color-scheme.css';
+@import './typography.css';

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);
+  }
+}