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

package/src/components/button.css

@@ -0,0 +1,335 @@
+/**
+ * @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_button {
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+    /* Sizing */
+    --lumo-button-size: var(--lumo-size-m);
+    min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
+    height: var(--_button-size);
+    padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
+    margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
+    box-sizing: border-box;
+    /* Style */
+    font-family: var(--lumo-font-family);
+    font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
+    font-weight: var(--vaadin-button-font-weight, 500);
+    color: var(--_lumo-button-text-color);
+    background: var(--_lumo-button-background);
+    border: var(--vaadin-button-border, none);
+    border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m));
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    flex-shrink: 0;
+    --_button-size: var(--vaadin-button-height, var(--lumo-button-size));
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    /* Used by notification */
+    --_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
+    --_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
+    --_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
+    --_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-button-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    text-shadow: inherit;
+  }
+
+  /* Aligns the button with form fields when placed on the same line.
+Note, to make it work, the form fields should have the same "::before" pseudo-element. */
+  .vaadin-button-container::before {
+    content: '\2003';
+    display: inline-block;
+    width: 0;
+    max-height: 100%;
+  }
+
+  [part='prefix'],
+  [part='suffix'] {
+    flex: none;
+  }
+
+  /* Set only for the internal parts so we don't affect the host vertical alignment */
+  [part='label'],
+  [part='prefix'],
+  [part='suffix'] {
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='label'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: calc(var(--lumo-button-size) / 6) 0;
+  }
+
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-button-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='large']) {
+    font-size: var(--lumo-font-size-l);
+    --lumo-button-size: var(--lumo-size-l);
+  }
+
+  /* For interaction states */
+  :host::before,
+  :host::after {
+    content: '';
+    /* We rely on the host always being relative */
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    background-color: currentColor;
+    border-radius: inherit;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+
+  @media (any-hover: hover) {
+    :host(:not([disabled]):hover)::before {
+      opacity: 0.02;
+    }
+  }
+
+  /* Active */
+
+  :host::after {
+    transition:
+      opacity 1.4s,
+      transform 0.1s;
+    filter: blur(8px);
+  }
+
+  :host([active])::before {
+    opacity: 0.05;
+    transition-duration: 0s;
+  }
+
+  :host([active])::after {
+    opacity: 0.1;
+    transition-duration: 0s, 0s;
+    transform: scale(0);
+  }
+
+  /* Keyboard focus */
+
+  :host([focus-ring]) {
+    box-shadow:
+      0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
+      0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
+  }
+
+  :host([theme~='primary'][focus-ring]) {
+    --_focus-ring-gap-on: 1;
+  }
+
+  /* Types (primary, tertiary, tertiary-inline */
+
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    --_background: transparent !important;
+    background: var(--vaadin-button-tertiary-background, var(--_background));
+    min-width: 0;
+  }
+
+  :host([theme~='tertiary']) {
+    border: var(--vaadin-button-tertiary-border, none);
+    color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
+    font-weight: var(--vaadin-button-tertiary-font-weight, 500);
+    padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
+  }
+
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
+  }
+
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
+  }
+
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
+  }
+
+  :host([theme~='primary']) {
+    background: var(--_lumo-button-primary-background);
+    border: var(--vaadin-button-primary-border, none);
+    color: var(--_lumo-button-primary-text-color);
+    font-weight: var(--vaadin-button-primary-font-weight, 600);
+    min-width: calc(var(--lumo-button-size) * 2.5);
+  }
+
+  :host([theme~='primary'])::before {
+    background-color: black;
+  }
+
+  @media (any-hover: hover) {
+    :host([theme~='primary']:not([disabled]):hover)::before {
+      opacity: 0.05;
+    }
+  }
+
+  :host([theme~='primary'][active])::before {
+    opacity: 0.1;
+  }
+
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
+  }
+
+  /* Colors (success, warning, error, contrast) */
+
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
+  }
+
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
+  }
+
+  :host([theme~='warning']) {
+    color: var(--lumo-warning-text-color);
+  }
+
+  :host([theme~='warning'][theme~='primary']) {
+    background-color: var(--lumo-warning-color);
+    color: var(--lumo-warning-contrast-color);
+  }
+
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
+  }
+
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+  }
+
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
+  }
+
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+  }
+
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    color: var(--lumo-disabled-text-color);
+    pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
+    cursor: not-allowed;
+  }
+
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
+
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
+  }
+
+  /* Icons */
+
+  [part] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
+  }
+
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  [part='suffix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  /* Icon-only */
+
+  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
+    min-width: var(--lumo-button-size);
+    padding-left: calc(var(--lumo-button-size) / 4);
+    padding-right: calc(var(--lumo-button-size) / 4);
+  }
+
+  :host([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+
+    :host([focused]) {
+      outline-width: 2px;
+    }
+
+    :host([disabled]) {
+      outline-color: GrayText;
+    }
+  }
+}

package/src/components/card.css

@@ -0,0 +1,38 @@
+/**
+ * @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_card {
+  :host::before {
+    inset: var(--_card-border-inset, 0);
+    border-radius: var(--_card-border-pseudo-radius, inherit);
+  }
+
+  :host([theme~='outlined']) {
+    --vaadin-card-border-width: 1px;
+    --vaadin-card-background: var(--lumo-base-color);
+  }
+
+  :host([theme~='elevated']) {
+    --vaadin-card-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct)) var(--lumo-base-color);
+    --vaadin-card-shadow: var(--lumo-box-shadow-xs);
+    --vaadin-card-border-width: 1px;
+    --_card-border-inset: calc(-1 * var(--vaadin-card-border-width));
+    --_card-border-pseudo-radius: calc(var(--vaadin-card-border-radius) + var(--vaadin-card-border-width));
+  }
+
+  :host([theme~='elevated']:not([theme~='outlined'])) {
+    --vaadin-card-border-color: var(--lumo-contrast-10pct);
+  }
+
+  :host(:where([theme~='stretch-media'])) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
+    border-radius: var(--lumo-border-radius-m);
+  }
+
+  :host([theme~='elevated'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
+    margin-top: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
+    margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
+    width: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
+  }
+}

package/src/components/chart.css

@@ -0,0 +1,88 @@
+/**
+ * @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_chart {
+  :host {
+    --vaadin-charts-background: var(--lumo-base-color);
+    --vaadin-charts-title-label: var(--lumo-header-text-color);
+    --vaadin-charts-axis-title: var(--lumo-secondary-text-color);
+    --vaadin-charts-axis-label: var(--lumo-secondary-text-color);
+    --vaadin-charts-data-label: var(--lumo-body-text-color);
+    --vaadin-charts-secondary-label: var(--lumo-secondary-text-color);
+    --vaadin-charts-axis-line: var(--lumo-contrast-5pct);
+    --vaadin-charts-grid-line: var(--lumo-contrast-20pct);
+    --vaadin-charts-disabled-label: var(--lumo-disabled-text-color);
+    --vaadin-charts-contrast: var(--lumo-contrast);
+    --vaadin-charts-contrast-5pct: var(--lumo-contrast-5pct);
+    --vaadin-charts-contrast-10pct: var(--lumo-contrast-10pct);
+    --vaadin-charts-contrast-20pct: var(--lumo-contrast-20pct);
+    --vaadin-charts-contrast-60pct: var(--lumo-contrast-60pct);
+    --vaadin-charts-tooltip-background: var(--lumo-base-color);
+    --vaadin-charts-tooltip-border-color: inherit;
+    --vaadin-charts-button-label: var(--lumo-primary-text-color);
+    --vaadin-charts-button-background: var(--lumo-contrast-5pct);
+    --vaadin-charts-button-hover-background: var(--lumo-primary-color-10pct);
+    --vaadin-charts-button-active-label: var(--lumo-primary-contrast-color);
+    --vaadin-charts-button-active-background: var(--lumo-primary-color);
+    --vaadin-charts-xaxis-line-width: 0;
+    --vaadin-charts-tooltip-background-opacity: 1;
+    --vaadin-charts-color-0: #5ac2f7;
+    --vaadin-charts-color-1: #1676f3;
+    --vaadin-charts-color-2: #ff7d94;
+    --vaadin-charts-color-3: #c5164e;
+    --vaadin-charts-color-4: #15c15d;
+    --vaadin-charts-color-5: #0e8151;
+    --vaadin-charts-color-6: #c18ed2;
+    --vaadin-charts-color-7: #9233b3;
+    --vaadin-charts-color-8: #fda253;
+    --vaadin-charts-color-9: #e24932;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-4, #15c15d);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-9, #e24932);
+    font-family: var(--lumo-font-family);
+  }
+
+  :host([theme~='gradient']) {
+    --vaadin-charts-color-0: #1676f3;
+    --vaadin-charts-color-1: #13bbf0;
+    --vaadin-charts-color-2: #1ee;
+    --vaadin-charts-color-3: #0cd9bf;
+    --vaadin-charts-color-4: #06be81;
+    --vaadin-charts-color-5: #00a344;
+    --vaadin-charts-color-6: #41c639;
+    --vaadin-charts-color-7: #8aed2c;
+    --vaadin-charts-color-8: #c0e632;
+    --vaadin-charts-color-9: #f6db3a;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-6);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-1);
+  }
+
+  :host([theme~='monotone']) {
+    --vaadin-charts-color-0: #1676f3;
+    --vaadin-charts-color-1: #4795f5;
+    --vaadin-charts-color-2: #71b0f7;
+    --vaadin-charts-color-3: #a0cef9;
+    --vaadin-charts-color-4: #bce0fa;
+    --vaadin-charts-color-5: #a8d8ed;
+    --vaadin-charts-color-6: #7fc3dd;
+    --vaadin-charts-color-7: #54adcc;
+    --vaadin-charts-color-8: #2b99bc;
+    --vaadin-charts-color-9: #0284ac;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-3);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-9);
+  }
+
+  :host([theme~='classic']) {
+    --vaadin-charts-color-0: #7cb5ec;
+    --vaadin-charts-color-1: #434348;
+    --vaadin-charts-color-2: #90ed7d;
+    --vaadin-charts-color-3: #f7a35c;
+    --vaadin-charts-color-4: #8085e9;
+    --vaadin-charts-color-5: #f15c80;
+    --vaadin-charts-color-6: #e4d354;
+    --vaadin-charts-color-7: #2b908f;
+    --vaadin-charts-color-8: #f45b5b;
+    --vaadin-charts-color-9: #91e8e1;
+  }
+}

package/src/components/checkbox-group.css

@@ -0,0 +1,18 @@
+/**
+ * @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_checkbox-group {
+  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
+  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
+    }
+  }
+}