lumo-css-framework/backgrounds.css

CSS framework for building web apps using Vaadin's Lumo theme

/* === Background color === */
.bg-base {
  background-color: var(--lumo-base-color);
}

.bg-transparent {
  background-color: transparent;
}

.bg-contrast-5 {
  background-color: var(--lumo-contrast-5pct);
}
.bg-contrast-10 {
  background-color: var(--lumo-contrast-10pct);
}
.bg-contrast-20 {
  background-color: var(--lumo-contrast-20pct);
}
.bg-contrast-30 {
  background-color: var(--lumo-contrast-30pct);
}
.bg-contrast-40 {
  background-color: var(--lumo-contrast-40pct);
}
.bg-contrast-50 {
  background-color: var(--lumo-contrast-50pct);
}
.bg-contrast-60 {
  background-color: var(--lumo-contrast-60pct);
}
.bg-contrast-70 {
  background-color: var(--lumo-contrast-70pct);
}
.bg-contrast-80 {
  background-color: var(--lumo-contrast-80pct);
}
.bg-contrast-90 {
  background-color: var(--lumo-contrast-90pct);
}
.bg-contrast {
  background-color: var(--lumo-contrast);
}

.bg-primary {
  background-color: var(--lumo-primary-color);
}
.bg-primary-50 {
  background-color: var(--lumo-primary-color-50pct);
}
.bg-primary-10 {
  background-color: var(--lumo-primary-color-10pct);
}

.bg-error {
  background-color: var(--lumo-error-color);
}
.bg-error-50 {
  background-color: var(--lumo-error-color-50pct);
}
.bg-error-10 {
  background-color: var(--lumo-error-color-10pct);
}

.bg-success {
  background-color: var(--lumo-success-color);
}
.bg-success-50 {
  background-color: var(--lumo-success-color-50pct);
}
.bg-success-10 {
  background-color: var(--lumo-success-color-10pct);
}