@patternfly/patternfly/utilities/BackgroundColor/BackgroundColor.css

Assets, source, tooling, and content for PatternFly 4

.pf-v5-u-background-color-100 {
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
}

.pf-v5-u-background-color-200 {
  background-color: var(--pf-v5-global--BackgroundColor--200) !important;
}

.pf-v5-u-background-color-active-color-100 {
  background-color: var(--pf-v5-global--active-color--100) !important;
}

.pf-v5-u-background-color-active-color-300 {
  background-color: var(--pf-v5-global--active-color--300) !important;
}

.pf-v5-u-background-color-primary-color-200 {
  background-color: var(--pf-v5-global--primary-color--200) !important;
}

.pf-v5-u-background-color-dark-100 {
  background-color: var(--pf-v5-global--BackgroundColor--dark-100) !important;
}

.pf-v5-u-background-color-dark-200 {
  background-color: var(--pf-v5-global--BackgroundColor--dark-200) !important;
}

.pf-v5-u-background-color-dark-300 {
  background-color: var(--pf-v5-global--BackgroundColor--dark-300) !important;
}

.pf-v5-u-background-color-dark-400 {
  background-color: var(--pf-v5-global--BackgroundColor--dark-400) !important;
}

.pf-v5-u-background-color-disabled-color-200 {
  background-color: var(--pf-v5-global--disabled-color--200) !important;
}

.pf-v5-u-background-color-disabled-color-300 {
  background-color: var(--pf-v5-global--disabled-color--300) !important;
}

.pf-v5-u-background-color-default {
  background-color: var(--pf-v5-global--palette--cyan-50) !important;
}

.pf-v5-u-background-color-success {
  background-color: var(--pf-v5-global--palette--green-50) !important;
}

.pf-v5-u-background-color-info {
  background-color: var(--pf-v5-global--palette--blue-50) !important;
}

.pf-v5-u-background-color-warning {
  background-color: var(--pf-v5-global--palette--gold-50) !important;
}

.pf-v5-u-background-color-danger {
  background-color: var(--pf-v5-global--palette--red-50) !important;
}

@media screen and (min-width: 576px) {
  .pf-v5-u-background-color-100-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  .pf-v5-u-background-color-200-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--200) !important;
  }
  .pf-v5-u-background-color-active-color-100-on-sm {
    background-color: var(--pf-v5-global--active-color--100) !important;
  }
  .pf-v5-u-background-color-active-color-300-on-sm {
    background-color: var(--pf-v5-global--active-color--300) !important;
  }
  .pf-v5-u-background-color-primary-color-200-on-sm {
    background-color: var(--pf-v5-global--primary-color--200) !important;
  }
  .pf-v5-u-background-color-dark-100-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--dark-100) !important;
  }
  .pf-v5-u-background-color-dark-200-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--dark-200) !important;
  }
  .pf-v5-u-background-color-dark-300-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--dark-300) !important;
  }
  .pf-v5-u-background-color-dark-400-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--dark-400) !important;
  }
  .pf-v5-u-background-color-disabled-color-200-on-sm {
    background-color: var(--pf-v5-global--disabled-color--200) !important;
  }
  .pf-v5-u-background-color-disabled-color-300-on-sm {
    background-color: var(--pf-v5-global--disabled-color--300) !important;
  }
  .pf-v5-u-background-color-default-on-sm {
    background-color: var(--pf-v5-global--palette--cyan-50) !important;
  }
  .pf-v5-u-background-color-success-on-sm {
    background-color: var(--pf-v5-global--palette--green-50) !important;
  }
  .pf-v5-u-background-color-info-on-sm {
    background-color: var(--pf-v5-global--palette--blue-50) !important;
  }
  .pf-v5-u-background-color-warning-on-sm {
    background-color: var(--pf-v5-global--palette--gold-50) !important;
  }
  .pf-v5-u-background-color-danger-on-sm {
    background-color: var(--pf-v5-global--palette--red-50) !important;
  }
}
@media screen and (min-width: 768px) {
  .pf-v5-u-background-color-100-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  .pf-v5-u-background-color-200-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--200) !important;
  }
  .pf-v5-u-background-color-active-color-100-on-md {
    background-color: var(--pf-v5-global--active-color--100) !important;
  }
  .pf-v5-u-background-color-active-color-300-on-md {
    background-color: var(--pf-v5-global--active-color--300) !important;
  }
  .pf-v5-u-background-color-primary-color-200-on-md {
    background-color: var(--pf-v5-global--primary-color--200) !important;
  }
  .pf-v5-u-background-color-dark-100-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--dark-100) !important;
  }
  .pf-v5-u-background-color-dark-200-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--dark-200) !important;
  }
  .pf-v5-u-background-color-dark-300-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--dark-300) !important;
  }
  .pf-v5-u-background-color-dark-400-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--dark-400) !important;
  }
  .pf-v5-u-background-color-disabled-color-200-on-md {
    background-color: var(--pf-v5-global--disabled-color--200) !important;
  }
  .pf-v5-u-background-color-disabled-color-300-on-md {
    background-color: var(--pf-v5-global--disabled-color--300) !important;
  }
  .pf-v5-u-background-color-default-on-md {
    background-color: var(--pf-v5-global--palette--cyan-50) !important;
  }
  .pf-v5-u-background-color-success-on-md {
    background-color: var(--pf-v5-global--palette--green-50) !important;
  }
  .pf-v5-u-background-color-info-on-md {
    background-color: var(--pf-v5-global--palette--blue-50) !important;
  }
  .pf-v5-u-background-color-warning-on-md {
    background-color: var(--pf-v5-global--palette--gold-50) !important;
  }
  .pf-v5-u-background-color-danger-on-md {
    background-color: var(--pf-v5-global--palette--red-50) !important;
  }
}
@media screen and (min-width: 992px) {
  .pf-v5-u-background-color-100-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  .pf-v5-u-background-color-200-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--200) !important;
  }
  .pf-v5-u-background-color-active-color-100-on-lg {
    background-color: var(--pf-v5-global--active-color--100) !important;
  }
  .pf-v5-u-background-color-active-color-300-on-lg {
    background-color: var(--pf-v5-global--active-color--300) !important;
  }
  .pf-v5-u-background-color-primary-color-200-on-lg {
    background-color: var(--pf-v5-global--primary-color--200) !important;
  }
  .pf-v5-u-background-color-dark-100-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--dark-100) !important;
  }
  .pf-v5-u-background-color-dark-200-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--dark-200) !important;
  }
  .pf-v5-u-background-color-dark-300-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--dark-300) !important;
  }
  .pf-v5-u-background-color-dark-400-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--dark-400) !important;
  }
  .pf-v5-u-background-color-disabled-color-200-on-lg {
    background-color: var(--pf-v5-global--disabled-color--200) !important;
  }
  .pf-v5-u-background-color-disabled-color-300-on-lg {
    background-color: var(--pf-v5-global--disabled-color--300) !important;
  }
  .pf-v5-u-background-color-default-on-lg {
    background-color: var(--pf-v5-global--palette--cyan-50) !important;
  }
  .pf-v5-u-background-color-success-on-lg {
    background-color: var(--pf-v5-global--palette--green-50) !important;
  }
  .pf-v5-u-background-color-info-on-lg {
    background-color: var(--pf-v5-global--palette--blue-50) !important;
  }
  .pf-v5-u-background-color-warning-on-lg {
    background-color: var(--pf-v5-global--palette--gold-50) !important;
  }
  .pf-v5-u-background-color-danger-on-lg {
    background-color: var(--pf-v5-global--palette--red-50) !important;
  }
}
@media screen and (min-width: 1200px) {
  .pf-v5-u-background-color-100-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  .pf-v5-u-background-color-200-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--200) !important;
  }
  .pf-v5-u-background-color-active-color-100-on-xl {
    background-color: var(--pf-v5-global--active-color--100) !important;
  }
  .pf-v5-u-background-color-active-color-300-on-xl {
    background-color: var(--pf-v5-global--active-color--300) !important;
  }
  .pf-v5-u-background-color-primary-color-200-on-xl {
    background-color: var(--pf-v5-global--primary-color--200) !important;
  }
  .pf-v5-u-background-color-dark-100-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-100) !important;
  }
  .pf-v5-u-background-color-dark-200-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-200) !important;
  }
  .pf-v5-u-background-color-dark-300-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-300) !important;
  }
  .pf-v5-u-background-color-dark-400-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-400) !important;
  }
  .pf-v5-u-background-color-disabled-color-200-on-xl {
    background-color: var(--pf-v5-global--disabled-color--200) !important;
  }
  .pf-v5-u-background-color-disabled-color-300-on-xl {
    background-color: var(--pf-v5-global--disabled-color--300) !important;
  }
  .pf-v5-u-background-color-default-on-xl {
    background-color: var(--pf-v5-global--palette--cyan-50) !important;
  }
  .pf-v5-u-background-color-success-on-xl {
    background-color: var(--pf-v5-global--palette--green-50) !important;
  }
  .pf-v5-u-background-color-info-on-xl {
    background-color: var(--pf-v5-global--palette--blue-50) !important;
  }
  .pf-v5-u-background-color-warning-on-xl {
    background-color: var(--pf-v5-global--palette--gold-50) !important;
  }
  .pf-v5-u-background-color-danger-on-xl {
    background-color: var(--pf-v5-global--palette--red-50) !important;
  }
}
@media screen and (min-width: 1450px) {
  .pf-v5-u-background-color-100-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  .pf-v5-u-background-color-200-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--200) !important;
  }
  .pf-v5-u-background-color-active-color-100-on-2xl {
    background-color: var(--pf-v5-global--active-color--100) !important;
  }
  .pf-v5-u-background-color-active-color-300-on-2xl {
    background-color: var(--pf-v5-global--active-color--300) !important;
  }
  .pf-v5-u-background-color-primary-color-200-on-2xl {
    background-color: var(--pf-v5-global--primary-color--200) !important;
  }
  .pf-v5-u-background-color-dark-100-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-100) !important;
  }
  .pf-v5-u-background-color-dark-200-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-200) !important;
  }
  .pf-v5-u-background-color-dark-300-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-300) !important;
  }
  .pf-v5-u-background-color-dark-400-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--dark-400) !important;
  }
  .pf-v5-u-background-color-disabled-color-200-on-2xl {
    background-color: var(--pf-v5-global--disabled-color--200) !important;
  }
  .pf-v5-u-background-color-disabled-color-300-on-2xl {
    background-color: var(--pf-v5-global--disabled-color--300) !important;
  }
  .pf-v5-u-background-color-default-on-2xl {
    background-color: var(--pf-v5-global--palette--cyan-50) !important;
  }
  .pf-v5-u-background-color-success-on-2xl {
    background-color: var(--pf-v5-global--palette--green-50) !important;
  }
  .pf-v5-u-background-color-info-on-2xl {
    background-color: var(--pf-v5-global--palette--blue-50) !important;
  }
  .pf-v5-u-background-color-warning-on-2xl {
    background-color: var(--pf-v5-global--palette--gold-50) !important;
  }
  .pf-v5-u-background-color-danger-on-2xl {
    background-color: var(--pf-v5-global--palette--red-50) !important;
  }
}
:where(.pf-v5-theme-dark) .pf-v5-u-background-color-default {
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
}
:where(.pf-v5-theme-dark) .pf-v5-u-background-color-success {
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
}
:where(.pf-v5-theme-dark) .pf-v5-u-background-color-info {
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
}
:where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning {
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
}
:where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger {
  background-color: var(--pf-v5-global--BackgroundColor--100) !important;
}
@media screen and (min-width: 576px) {
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-sm {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
}
@media screen and (min-width: 768px) {
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-md {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
}
@media screen and (min-width: 992px) {
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-lg {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
}
@media screen and (min-width: 1200px) {
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
}
@media screen and (min-width: 1450px) {
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-default-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-success-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-info-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-warning-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
  :where(.pf-v5-theme-dark) .pf-v5-u-background-color-danger-on-2xl {
    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
  }
}