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

package/src/components/upload-file.css

@@ -0,0 +1,133 @@
+/**
+ * @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-file {
+  :host {
+    display: block;
+    padding: var(--lumo-space-s) 0;
+    outline: none;
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  [part='row'] {
+    list-style-type: none;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  button {
+    background: transparent;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+  }
+
+  :host([complete]) ::slotted([slot='progress']),
+  :host([error]) ::slotted([slot='progress']) {
+    display: none !important;
+  }
+
+  :host([focus-ring]) [part='row'] {
+    border-radius: var(--lumo-border-radius-s);
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  [part='status'],
+  [part='error'] {
+    color: var(--lumo-secondary-text-color);
+    font-size: var(--lumo-font-size-s);
+  }
+
+  [part='info'] {
+    display: flex;
+    align-items: baseline;
+    flex: auto;
+  }
+
+  [part='meta'] {
+    width: 0.001px;
+    flex: 1 1 auto;
+  }
+
+  [part='name'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='commands'] {
+    display: flex;
+    align-items: baseline;
+    flex: none;
+  }
+
+  [part$='icon'] {
+    margin-right: var(--lumo-space-xs);
+    font-size: var(--lumo-icon-size-m);
+    font-family: 'lumo-icons';
+    line-height: 1;
+  }
+
+  /* When both icons are hidden, let us keep space for one */
+  [part='done-icon'][hidden] + [part='warning-icon'][hidden] {
+    display: block !important;
+    visibility: hidden;
+  }
+
+  [part$='button'] {
+    flex: none;
+    margin-left: var(--lumo-space-xs);
+    cursor: var(--lumo-clickable-cursor);
+  }
+
+  [part$='button']:focus {
+    outline: none;
+    border-radius: var(--lumo-border-radius-s);
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+  }
+
+  [part$='icon']::before,
+  [part$='button']::before {
+    vertical-align: -0.25em;
+  }
+
+  [part='done-icon']::before {
+    content: var(--lumo-icons-checkmark);
+    color: var(--lumo-primary-text-color);
+  }
+
+  [part='warning-icon']::before {
+    content: var(--lumo-icons-error);
+    color: var(--lumo-error-text-color);
+  }
+
+  [part='start-button']::before {
+    content: var(--lumo-icons-play);
+  }
+
+  [part='retry-button']::before {
+    content: var(--lumo-icons-reload);
+  }
+
+  [part='remove-button']::before {
+    content: var(--lumo-icons-cross);
+  }
+
+  [part='error'] {
+    color: var(--lumo-error-text-color);
+  }
+
+  ::slotted([slot='progress']) {
+    width: auto;
+    margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
+    margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
+  }
+}

package/src/components/upload-icon.css

@@ -0,0 +1,14 @@
+/**
+ * @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-icon {
+  :host::before {
+    content: var(--lumo-icons-upload);
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    vertical-align: -0.25em;
+  }
+}

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,67 @@
+/**
+ * @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;
+  }
+
+  ::slotted([part='tags']) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  :host([dir='rtl']) [part='overlay'] {
+    left: auto;
+    right: -4px;
+  }
+
+  [part='content'] {
+    padding: 0;
+  }
+
+  :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,38 @@
+/**
+ * @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);
+  }
+
+  :host([theme~='wrap']) {
+    flex-wrap: wrap;
+  }
+}

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/dark.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/
+ */
+[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;
+}