@vaadin/vaadin-lumo-styles/src/components/badge.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/
 */
@media lumo_components_badge {
  :host {
    border-width: var(--vaadin-badge-border-width, 0);
    background: var(--vaadin-badge-background, var(--lumo-primary-color-10pct));
    color: var(--vaadin-badge-text-color, var(--lumo-primary-text-color));
    font-family: var(--vaadin-badge-font-family, var(--lumo-font-family));
    font-size: var(--vaadin-badge-font-size, var(--lumo-font-size-s));
  }

  :host([theme~='small']) {
    font-size: var(--lumo-font-size-xxs);
  }

  :host([theme~='success']) {
    --vaadin-badge-background: var(--lumo-success-color-10pct);
    --vaadin-badge-text-color: var(--lumo-success-text-color);
  }

  :host([theme~='error']) {
    --vaadin-badge-background: var(--lumo-error-color-10pct);
    --vaadin-badge-text-color: var(--lumo-error-text-color);
  }

  :host([theme~='warning']) {
    --vaadin-badge-background: var(--lumo-warning-color-10pct);
    --vaadin-badge-text-color: var(--lumo-warning-text-color);
  }

  :host(:is([theme~='neutral'], [theme~='contrast'])) {
    --vaadin-badge-background: var(--lumo-contrast-5pct);
    --vaadin-badge-text-color: var(--lumo-contrast-80pct);
  }

  :host([theme~='filled']) {
    background: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
  }

  :host([theme~='success'][theme~='filled']) {
    background: var(--lumo-success-color);
    color: var(--lumo-success-contrast-color);
  }

  :host([theme~='error'][theme~='filled']) {
    background: var(--lumo-error-color);
    color: var(--lumo-error-contrast-color);
  }

  :host([theme~='warning'][theme~='filled']) {
    background: var(--lumo-warning-color);
    color: var(--lumo-warning-contrast-color);
  }

  :host(:is([theme~='neutral'], [theme~='contrast'])[theme~='filled']) {
    background: var(--lumo-contrast);
    color: var(--lumo-base-color);
  }

  :host([theme~='dot']) {
    background: var(--lumo-primary-color);
  }

  :host([theme~='dot'][theme~='success']) {
    background: var(--lumo-success-color);
  }

  :host([theme~='dot'][theme~='error']) {
    background: var(--lumo-error-color);
  }

  :host([theme~='dot'][theme~='warning']) {
    background: var(--lumo-warning-color);
  }

  :host([theme~='dot']:is([theme~='neutral'], [theme~='contrast'])) {
    background: var(--lumo-contrast);
  }
}