karma/ui/src/Styles/Components/BaseLabel.scss

.components-label-with-hover:hover {
  filter: brightness(0.85);
  cursor: pointer;
}

.components-label {
  border: 1px solid transparent;

  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* https://stackoverflow.com/a/20566810 */
  vertical-align: bottom !important;

  margin-top: 2px;
  margin-bottom: 2px;
}

.btn-default,
.badge-default {
  background-color: $color-default;
}
.border-default {
  border: 1px solid $color-default;
}

.components-label:not(.badge-pill) {
  &.badge-default,
  &.btn-default {
    border: 1px solid darken($color-default, 2%);
  }

  &.badge-primary,
  &.btn-primary {
    border: 1px solid lighten($primary, 2%);
  }
  &.badge-secondary,
  &.btn-secondary {
    border: 1px solid darken($secondary, 2%);
  }
  &.badge-success,
  &.btn-success {
    border: 1px solid darken($success, 2%);
  }
  &.badge-danger,
  &.btn-danger {
    border: 1px solid lighten($danger, 2%);
  }
  &.badge-warning,
  &.btn-warning {
    border: 1px solid lighten($warning, 3%);
  }
  &.badge-info,
  &.btn-info {
    border: 1px solid darken($info, 2%);
  }
  &.badge-dark,
  &.btn-dark {
    border: 1px solid darken($dark, 2%);
  }
}

/* badge class uses em and we modify font sizes a bit, so switch to rem */
span.badge.components-label:not(.badge-pill) {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
span.badge.components-label.badge-pill {
  padding-right: 0.6rem;
  padding-left: 0.6rem;
}
span.badge.components-label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

button.components-label-bright,
span.components-label-bright,
.components-label-bright {
  color: $black;
  &:hover {
    color: $black;
  }

  &.components-label-name,
  .components-label-name {
    color: lighten($black, 20%);
    &:hover {
      color: lighten($black, 20%);
    }
  }
  &.components-label-value,
  .components-label-value {
    color: $black;
    &:hover {
      color: $black;
    }
  }

  @for $i from 10 through 11 {
    &.components-label-brightness-#{$i} {
      border: 1px solid darken(#fff, $i * 1.1%);
    }
  }
}

button.components-label-dark,
span.components-label-dark,
.components-label-dark {
  color: $white;
  &:hover {
    color: $white;
  }

  &.components-label-name,
  .components-label-name {
    color: darken($white, 10%);
    &:hover {
      color: darken($white, 10%);
    }
  }

  &.components-label-value,
  .components-label-value {
    color: $white;
    &:hover {
      color: $white;
    }
  }
}