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

package/src/mixins/menu-overlay-core.css

@@ -0,0 +1,36 @@
+/**
+ * @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_menu-overlay-core {
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
+  }
+
+  [part='overlay'] {
+    will-change: opacity, transform;
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  }
+
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-exit both;
+  }
+
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/mixins/menu-overlay-ext.css

@@ -0,0 +1,63 @@
+/**
+ * @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_menu-overlay-ext {
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 450px), (max-height: 450px) {
+    :host {
+      inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
+    }
+
+    [part='overlay'] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
+    }
+
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part='content'] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      overflow: auto;
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+    }
+
+    [part='backdrop'] {
+      display: block;
+    }
+
+    /* Animations */
+
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    }
+
+    :host([closing]),
+    :host([closing]) [part='backdrop'] {
+      animation-delay: 0.14s;
+    }
+
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
+    }
+  }
+
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
+    }
+  }
+}

package/src/mixins/overlay.css

@@ -0,0 +1,131 @@
+/**
+ * @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_overlay {
+  :host {
+    z-index: 200;
+    position: fixed;
+
+    /* Despite of what the names say, <vaadin-overlay> is just a container
+        for position/sizing/alignment. The actual overlay is the overlay part. */
+
+    /* Use flexbox alignment for the overlay part. */
+    display: flex;
+    flex-direction: column; /* makes dropdowns sizing easier */
+    /* Align to center by default. */
+    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;
+
+    /* The host is not clickable, only the overlay part is. */
+    pointer-events: none;
+
+    /* Remove tap highlight on touch devices. */
+    -webkit-tap-highlight-color: transparent;
+
+    /* CSS API for host */
+    --vaadin-overlay-viewport-bottom: 0;
+
+    inset: var(--vaadin-overlay-viewport-inset, var(--lumo-space-m));
+    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
+    /* stylelint-disable-next-line */
+    outline: 0px solid transparent;
+  }
+
+  :host([hidden]),
+  :host(:not([opened]):not([closing])),
+  :host(:not([opened]):not([closing])) [part='overlay'] {
+    display: none !important;
+  }
+
+  [part='overlay'] {
+    overflow: auto;
+    pointer-events: auto;
+
+    /* Prevent overflowing the host */
+    max-width: 100%;
+    box-sizing: border-box;
+
+    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    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;
+    user-select: text;
+    white-space: initial;
+    word-spacing: initial;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [part='backdrop'] {
+    z-index: -1;
+    content: '';
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+    background-color: var(--lumo-shade-20pct);
+    animation: 0.2s lumo-overlay-backdrop-enter both;
+    will-change: opacity;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+  }
+
+  @keyframes lumo-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  :host([closing]) [part='backdrop'] {
+    animation: 0.2s lumo-overlay-backdrop-exit both;
+  }
+
+  @keyframes lumo-overlay-backdrop-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/src/mixins/resizable-overlay.css

@@ -0,0 +1,100 @@
+/**
+ * @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_resizable-overlay {
+  [part='overlay'] {
+    position: relative;
+    overflow: visible;
+    max-height: 100%;
+    display: flex;
+  }
+
+  [part='content'] {
+    box-sizing: border-box;
+    height: 100%;
+  }
+
+  .resizer-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border-radius: inherit; /* prevent child elements being drawn outside part=overlay */
+  }
+
+  [part='overlay'][style] .resizer-container {
+    min-height: 100%;
+    width: 100%;
+  }
+
+  :host(:not([resizable])) .resizer {
+    display: none;
+  }
+
+  :host([resizable]) [part='title'] {
+    cursor: move;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .resizer {
+    position: absolute;
+    height: 16px;
+    width: 16px;
+  }
+
+  .resizer.edge {
+    height: 8px;
+    width: 8px;
+    inset: -4px;
+  }
+
+  .resizer.edge.n {
+    width: auto;
+    bottom: auto;
+    cursor: ns-resize;
+  }
+
+  .resizer.ne {
+    top: -4px;
+    right: -4px;
+    cursor: nesw-resize;
+  }
+
+  .resizer.edge.e {
+    height: auto;
+    left: auto;
+    cursor: ew-resize;
+  }
+
+  .resizer.se {
+    bottom: -4px;
+    right: -4px;
+    cursor: nwse-resize;
+  }
+
+  .resizer.edge.s {
+    width: auto;
+    top: auto;
+    cursor: ns-resize;
+  }
+
+  .resizer.sw {
+    bottom: -4px;
+    left: -4px;
+    cursor: nesw-resize;
+  }
+
+  .resizer.edge.w {
+    height: auto;
+    right: auto;
+    cursor: ew-resize;
+  }
+
+  .resizer.nw {
+    top: -4px;
+    left: -4px;
+    cursor: nwse-resize;
+  }
+}

package/src/props/color.css

@@ -0,0 +1,98 @@
+/**
+ * @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) {
+  /* Base (background) */
+  --lumo-base-color: #fff;
+
+  /* Tint */
+  --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
+  --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
+  --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
+  --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
+  --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
+  --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
+  --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
+  --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
+  --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
+  --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
+  --lumo-tint: #fff;
+
+  /* Shade */
+  --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
+  --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
+  --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
+  --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
+  --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
+  --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+  --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+  --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
+  --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+  --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+  --lumo-shade: hsl(214, 35%, 15%);
+
+  /* Contrast */
+  --lumo-contrast-5pct: var(--lumo-shade-5pct);
+  --lumo-contrast-10pct: var(--lumo-shade-10pct);
+  --lumo-contrast-20pct: var(--lumo-shade-20pct);
+  --lumo-contrast-30pct: var(--lumo-shade-30pct);
+  --lumo-contrast-40pct: var(--lumo-shade-40pct);
+  --lumo-contrast-50pct: var(--lumo-shade-50pct);
+  --lumo-contrast-60pct: var(--lumo-shade-60pct);
+  --lumo-contrast-70pct: var(--lumo-shade-70pct);
+  --lumo-contrast-80pct: var(--lumo-shade-80pct);
+  --lumo-contrast-90pct: var(--lumo-shade-90pct);
+  --lumo-contrast: var(--lumo-shade);
+
+  /* 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, 100%, 48%);
+  --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+  --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+  --lumo-primary-text-color: hsl(214, 100%, 43%);
+  --lumo-primary-contrast-color: #fff;
+
+  /* Error */
+  --lumo-error-color: hsl(3, 85%, 48%);
+  --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+  --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+  --lumo-error-text-color: hsl(3, 89%, 42%);
+  --lumo-error-contrast-color: #fff;
+
+  /* Success */
+  --lumo-success-color: hsl(145, 72%, 30%);
+  --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+  --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+  --lumo-success-text-color: hsl(145, 85%, 25%);
+  --lumo-success-contrast-color: #fff;
+
+  /* Warning */
+  --lumo-warning-color: hsl(48, 100%, 50%);
+  --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
+  --lumo-warning-text-color: hsl(32, 100%, 30%);
+  --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+
+  /* User colors */
+  --vaadin-user-color-0: #df0b92;
+  --vaadin-user-color-1: #650acc;
+  --vaadin-user-color-2: #097faa;
+  --vaadin-user-color-3: #ad6200;
+  --vaadin-user-color-4: #bf16f3;
+  --vaadin-user-color-5: #084391;
+  --vaadin-user-color-6: #078836;
+}
+
+/* forced-colors mode adjustments */
+@media (forced-colors: active) {
+  :where(:root, :host) {
+    --lumo-disabled-text-color: GrayText;
+  }
+}

package/src/props/icons.css

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@font-face {
+  font-family: 'lumo-icons';
+  src: url(data:application/font-woff;charset=utf-8;base64,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)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+:where(:root, :host) {
+  --lumo-icons-align-center: '\ea01';
+  --lumo-icons-align-left: '\ea02';
+  --lumo-icons-align-right: '\ea03';
+  --lumo-icons-angle-down: '\ea04';
+  --lumo-icons-angle-left: '\ea05';
+  --lumo-icons-angle-right: '\ea06';
+  --lumo-icons-angle-up: '\ea07';
+  --lumo-icons-arrow-down: '\ea08';
+  --lumo-icons-arrow-left: '\ea09';
+  --lumo-icons-arrow-right: '\ea0a';
+  --lumo-icons-arrow-up: '\ea0b';
+  --lumo-icons-bar-chart: '\ea0c';
+  --lumo-icons-bell: '\ea0d';
+  --lumo-icons-calendar: '\ea0e';
+  --lumo-icons-checkmark: '\ea0f';
+  --lumo-icons-chevron-down: '\ea10';
+  --lumo-icons-chevron-left: '\ea11';
+  --lumo-icons-chevron-right: '\ea12';
+  --lumo-icons-chevron-up: '\ea13';
+  --lumo-icons-clean: '\ea14';
+  --lumo-icons-clock: '\ea15';
+  --lumo-icons-cog: '\ea16';
+  --lumo-icons-cross: '\ea17';
+  --lumo-icons-download: '\ea18';
+  --lumo-icons-drag-handle: '\ea19';
+  --lumo-icons-dropdown: '\ea1a';
+  --lumo-icons-edit: '\ea1b';
+  --lumo-icons-error: '\ea1c';
+  --lumo-icons-eye: '\ea1d';
+  --lumo-icons-eye-disabled: '\ea1e';
+  --lumo-icons-indent: '\ea1f';
+  --lumo-icons-link: '\ea20';
+  --lumo-icons-menu: '\ea21';
+  --lumo-icons-minus: '\ea22';
+  --lumo-icons-ordered-list: '\ea23';
+  --lumo-icons-outdent: '\ea24';
+  --lumo-icons-phone: '\ea25';
+  --lumo-icons-photo: '\ea26';
+  --lumo-icons-play: '\ea27';
+  --lumo-icons-plus: '\ea28';
+  --lumo-icons-redo: '\ea29';
+  --lumo-icons-reload: '\ea2a';
+  --lumo-icons-resize-handle: '\ea2b';
+  --lumo-icons-search: '\ea2c';
+  --lumo-icons-undo: '\ea2d';
+  --lumo-icons-unordered-list: '\ea2e';
+  --lumo-icons-upload: '\ea2f';
+  --lumo-icons-user: '\ea30';
+}

package/src/props/index.css

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './reset.css';
+@import './icons.css';
+@import './color.css';
+@import './sizing.css';
+@import './spacing.css';
+@import './style.css';
+@import './typography.css';

package/src/props/reset.css

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/* Reset properties that are set by the base theme */
+:where(:root, :host) {
+  --vaadin-focus-ring-color: inherit;
+  --vaadin-focus-ring-width: inherit;
+}

package/src/props/sizing.css

@@ -0,0 +1,19 @@
+/**
+ * @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) {
+  --lumo-size-xs: 1.625rem;
+  --lumo-size-s: 1.875rem;
+  --lumo-size-m: 2.25rem;
+  --lumo-size-l: 2.75rem;
+  --lumo-size-xl: 3.5rem;
+
+  /* Icons */
+  --lumo-icon-size-s: 1.25em;
+  --lumo-icon-size-m: 1.5em;
+  --lumo-icon-size-l: 2.25em;
+  /* For backwards compatibility */
+  --lumo-icon-size: var(--lumo-icon-size-m);
+}

package/src/props/spacing.css

@@ -0,0 +1,27 @@
+/**
+ * @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) {
+  /* Square */
+  --lumo-space-xs: 0.25rem;
+  --lumo-space-s: 0.5rem;
+  --lumo-space-m: 1rem;
+  --lumo-space-l: 1.5rem;
+  --lumo-space-xl: 2.5rem;
+
+  /* Wide */
+  --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
+  --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
+  --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
+  --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
+  --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
+
+  /* Tall */
+  --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
+  --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
+  --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
+  --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
+  --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
+}

package/src/props/style.css

@@ -0,0 +1,21 @@
+/**
+ * @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) {
+  /* Border radius */
+  --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+  --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
+  --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
+
+  /* Shadow */
+  --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
+  --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
+  --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
+  --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
+  --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
+
+  /* Clickable element cursor */
+  --lumo-clickable-cursor: default;
+}

package/src/props/typography.css

@@ -0,0 +1,24 @@
+/**
+ * @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) {
+  /* prettier-ignore */
+  --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  /* Font sizes */
+  --lumo-font-size-xxs: 0.75rem;
+  --lumo-font-size-xs: 0.8125rem;
+  --lumo-font-size-s: 0.875rem;
+  --lumo-font-size-m: 1rem;
+  --lumo-font-size-l: 1.125rem;
+  --lumo-font-size-xl: 1.375rem;
+  --lumo-font-size-xxl: 1.75rem;
+  --lumo-font-size-xxxl: 2.5rem;
+
+  /* Line heights */
+  --lumo-line-height-xs: 1.25;
+  --lumo-line-height-s: 1.375;
+  --lumo-line-height-m: 1.625;
+}

package/src/utilities/accessibility.css

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* === Screen readers === */
+.sr-only {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}