@trimble-oss/moduswebcomponents/collection/components/modus-wc-badge/modus-wc-badge.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-badge .modus-wc-badge {
  display: flex;
  font-weight: var(--modus-wc-font-weight-semibold);
  height: fit-content;
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-sm {
  font-size: var(--modus-wc-font-size-xs);
  max-height: var(--modus-wc-size-xs);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-md {
  font-size: var(--modus-wc-font-size-sm);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-high-contrast {
  background-color: var(--modus-wc-color-black);
  border-color: var(--modus-wc-color-base-content);
  color: var(--modus-wc-color-white);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-counter {
  border-radius: 1rem;
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text {
  background-color: transparent;
  border: none;
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary {
  color: var(--modus-wc-color-trimble-blue);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-secondary {
  color: var(--modus-wc-color-secondary);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-neutral {
  color: var(--modus-wc-color-gray-1);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast {
  color: var(--modus-wc-color-base-content);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success {
  color: var(--modus-wc-color-green-dark);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-warning {
  color: var(--modus-wc-color-warning);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-error {
  color: var(--modus-wc-color-error);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined {
  background-color: transparent;
  border-radius: 1rem;
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-primary {
  border-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-secondary {
  border-color: var(--modus-wc-color-secondary);
  color: var(--modus-wc-color-secondary);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-neutral {
  border-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-gray-1);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-high-contrast {
  border-color: var(--modus-wc-color-base-content);
  color: var(--modus-wc-color-base-content);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-success {
  border-color: var(--modus-wc-color-success);
  color: var(--modus-wc-color-success);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-warning {
  border-color: var(--modus-wc-color-warning);
  color: var(--modus-wc-color-warning);
}
modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-error {
  border-color: var(--modus-wc-color-error);
  color: var(--modus-wc-color-error);
}

[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge,
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge {
  border: unset;
  font-weight: var(--modus-wc-font-weight-bold);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary,
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary {
  color: var(--modus-wc-color-gray-6);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined) {
  background-color: var(--modus-wc-color-gray-6);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter),
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter) {
  border-radius: var(--modus-wc-border-radius-md);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined) {
  background-color: var(--modus-wc-color-green-dark);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm,
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm {
  border-radius: var(--modus-wc-border-radius-sm);
  font-size: var(--modus-wc-font-size-xs);
  height: 14px;
  padding: var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-xs);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-md,
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-md {
  font-size: var(--modus-wc-font-size-sm);
  height: 20px;
  padding: var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg,
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg {
  font-size: var(--modus-wc-font-size-md);
  height: 28px;
  padding: var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md);
}
[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined,
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined {
  background-color: transparent;
  border: 1px solid;
  border-radius: 1rem;
}

[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-primary {
  background-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-success {
  background-color: var(--modus-wc-color-success);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-secondary {
  background-color: var(--modus-wc-color-gray-6);
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-neutral {
  background-color: var(--modus-wc-color-gray-1);
  color: var(--modus-wc-color-trimble-gray);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-high-contrast {
  background-color: var(--modus-wc-color-gray-light);
  color: var(--modus-wc-color-gray-10);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary {
  color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast {
  color: var(--modus-wc-color-gray-light);
}
[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success {
  color: var(--modus-wc-color-success);
}