@vaadin/vaadin-lumo-styles/src/props/color.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
:where(:root),
:where(:host) {
  /* Base (background) */
  --lumo-base-color: light-dark(#fff, hsl(214, 35%, 21%));

  /* Tint */
  --lumo-tint-5pct: light-dark(hsla(0, 0%, 100%, 0.3), hsla(214, 65%, 85%, 0.06));
  --lumo-tint-10pct: light-dark(hsla(0, 0%, 100%, 0.37), hsla(214, 60%, 80%, 0.14));
  --lumo-tint-20pct: light-dark(hsla(0, 0%, 100%, 0.44), hsla(214, 64%, 82%, 0.23));
  --lumo-tint-30pct: light-dark(hsla(0, 0%, 100%, 0.5), hsla(214, 69%, 84%, 0.32));
  --lumo-tint-40pct: light-dark(hsla(0, 0%, 100%, 0.57), hsla(214, 73%, 86%, 0.41));
  --lumo-tint-50pct: light-dark(hsla(0, 0%, 100%, 0.64), hsla(214, 78%, 88%, 0.5));
  --lumo-tint-60pct: light-dark(hsla(0, 0%, 100%, 0.7), hsla(214, 82%, 90%, 0.58));
  --lumo-tint-70pct: light-dark(hsla(0, 0%, 100%, 0.77), hsla(214, 87%, 92%, 0.69));
  --lumo-tint-80pct: light-dark(hsla(0, 0%, 100%, 0.84), hsla(214, 91%, 94%, 0.8));
  --lumo-tint-90pct: light-dark(hsla(0, 0%, 100%, 0.9), hsla(214, 96%, 96%, 0.9));
  --lumo-tint: light-dark(#fff, hsl(214, 100%, 98%));

  /* Shade */
  --lumo-shade-5pct: light-dark(hsla(214, 61%, 25%, 0.05), hsla(214, 0%, 0%, 0.07));
  --lumo-shade-10pct: light-dark(hsla(214, 57%, 24%, 0.1), hsla(214, 4%, 2%, 0.15));
  --lumo-shade-20pct: light-dark(hsla(214, 53%, 23%, 0.16), hsla(214, 8%, 4%, 0.23));
  --lumo-shade-30pct: light-dark(hsla(214, 50%, 22%, 0.26), hsla(214, 12%, 6%, 0.32));
  --lumo-shade-40pct: light-dark(hsla(214, 47%, 21%, 0.38), hsla(214, 16%, 8%, 0.41));
  --lumo-shade-50pct: light-dark(hsla(214, 45%, 20%, 0.52), hsla(214, 20%, 10%, 0.5));
  --lumo-shade-60pct: light-dark(hsla(214, 43%, 19%, 0.6), hsla(214, 24%, 12%, 0.6));
  --lumo-shade-70pct: light-dark(hsla(214, 42%, 18%, 0.69), hsla(214, 28%, 13%, 0.7));
  --lumo-shade-80pct: light-dark(hsla(214, 41%, 17%, 0.83), hsla(214, 32%, 13%, 0.8));
  --lumo-shade-90pct: light-dark(hsla(214, 40%, 16%, 0.94), hsla(214, 33%, 13%, 0.9));
  --lumo-shade: light-dark(hsl(214, 35%, 15%), hsl(214, 33%, 13%));

  /* Contrast */
  --lumo-contrast-5pct: light-dark(var(--lumo-shade-5pct), var(--lumo-tint-5pct));
  --lumo-contrast-10pct: light-dark(var(--lumo-shade-10pct), var(--lumo-tint-10pct));
  --lumo-contrast-20pct: light-dark(var(--lumo-shade-20pct), var(--lumo-tint-20pct));
  --lumo-contrast-30pct: light-dark(var(--lumo-shade-30pct), var(--lumo-tint-30pct));
  --lumo-contrast-40pct: light-dark(var(--lumo-shade-40pct), var(--lumo-tint-40pct));
  --lumo-contrast-50pct: light-dark(var(--lumo-shade-50pct), var(--lumo-tint-50pct));
  --lumo-contrast-60pct: light-dark(var(--lumo-shade-60pct), var(--lumo-tint-60pct));
  --lumo-contrast-70pct: light-dark(var(--lumo-shade-70pct), var(--lumo-tint-70pct));
  --lumo-contrast-80pct: light-dark(var(--lumo-shade-80pct), var(--lumo-tint-80pct));
  --lumo-contrast-90pct: light-dark(var(--lumo-shade-90pct), var(--lumo-tint-90pct));
  --lumo-contrast: light-dark(var(--lumo-shade), 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: light-dark(hsl(214, 100%, 48%), hsl(214, 90%, 48%));
  --lumo-primary-color-50pct: light-dark(hsla(214, 100%, 49%, 0.76), hsla(214, 90%, 70%, 0.69));
  --lumo-primary-color-10pct: light-dark(hsla(214, 100%, 60%, 0.13), hsla(214, 90%, 55%, 0.13));
  --lumo-primary-text-color: light-dark(hsl(214, 100%, 43%), hsl(214, 90%, 77%));
  --lumo-primary-contrast-color: #fff;

  /* Error */
  --lumo-error-color: light-dark(hsl(3, 85%, 48%), hsl(3, 79%, 49%));
  --lumo-error-color-50pct: light-dark(hsla(3, 85%, 49%, 0.5), hsla(3, 75%, 62%, 0.5));
  --lumo-error-color-10pct: light-dark(hsla(3, 85%, 49%, 0.1), hsla(3, 75%, 62%, 0.14));
  --lumo-error-text-color: light-dark(hsl(3, 89%, 42%), hsl(3, 100%, 80%));
  --lumo-error-contrast-color: #fff;

  /* Success */
  --lumo-success-color: hsl(145, 72%, 30%);
  --lumo-success-color-50pct: light-dark(hsla(145, 72%, 31%, 0.5), hsla(145, 92%, 51%, 0.5));
  --lumo-success-color-10pct: light-dark(hsla(145, 72%, 31%, 0.1), hsla(145, 92%, 51%, 0.1));
  --lumo-success-text-color: light-dark(hsl(145, 85%, 25%), hsl(145, 85%, 46%));
  --lumo-success-contrast-color: #fff;

  /* Warning */
  --lumo-warning-color: light-dark(hsl(48, 100%, 50%), hsl(43, 100%, 48%));
  --lumo-warning-color-10pct: light-dark(hsla(48, 100%, 50%, 0.25), hsla(40, 100%, 50%, 0.2));
  --lumo-warning-text-color: light-dark(hsl(32, 100%, 30%), hsl(45, 100%, 60%));
  --lumo-warning-contrast-color: var(--lumo-shade-90pct);

  /* User colors */
  --vaadin-user-color-0: light-dark(#df0b92, #ff66c7);
  --vaadin-user-color-1: light-dark(#650acc, #9d8aff);
  --vaadin-user-color-2: light-dark(#097faa, #8aff66);
  --vaadin-user-color-3: light-dark(#ad6200, #ffbd66);
  --vaadin-user-color-4: light-dark(#bf16f3, #dc6bff);
  --vaadin-user-color-5: light-dark(#084391, #66fffa);
  --vaadin-user-color-6: light-dark(#078836, #e6ff66);

  /* Base styles colors */
  --vaadin-text-color: var(--lumo-body-text-color);
  --vaadin-text-color-secondary: var(--lumo-secondary-text-color);
  --vaadin-text-color-disabled: var(--lumo-disabled-text-color);
  --vaadin-border-color: var(--lumo-contrast-30pct);
  --vaadin-border-color-secondary: var(--lumo-contrast-10pct);
  --vaadin-background-color: var(--lumo-base-color);
  --vaadin-background-container: var(--lumo-contrast-5pct);
  --vaadin-background-container-strong: var(--lumo-contrast-10pct);
}

/* forced-colors mode adjustments */
@media (forced-colors: active) {
  :where(:root),
  :where(:host) {
    --lumo-disabled-text-color: GrayText;
  }
}