Background Color
Utilities for controlling an element's background color.
| Class | Properties | Value |
|---|---|---|
ob-bg-inherit | background-color: inherit | |
ob-bg-current | background-color: currentColor | |
ob-bg-transparent | background-color: transparent | |
ob-bg-white | background-color: var(--ob-white) | |
ob-bg-black | background-color: var(--ob-black) | |
ob-bg-body-light | background-color: var(--ob-body-light) | |
ob-bg-body-dark | background-color: var(--ob-body-dark) | |
ob-bg-white-emph-high | background-color: var(--ob-white-emph-high) | |
ob-bg-white-emph-medium | background-color: var(--ob-white-emph-medium) | |
ob-bg-white-emph-low | background-color: var(--ob-white-emph-low) | |
ob-bg-black-emph-high | background-color: var(--ob-black-emph-high) | |
ob-bg-black-emph-medium | background-color: var(--ob-black-emph-medium) | |
ob-bg-black-emph-low | background-color: var(--ob-black-emph-low) | |
ob-bg-primary-50 | background-color: var(--ob-primary-50) | |
ob-bg-primary-100 | background-color: var(--ob-primary-100) | |
ob-bg-primary-200 | background-color: var(--ob-primary-200) | |
ob-bg-primary-300 | background-color: var(--ob-primary-300) | |
ob-bg-primary-400 | background-color: var(--ob-primary-400) | |
ob-bg-primary-500 | background-color: var(--ob-primary-500) | |
ob-bg-primary-600 | background-color: var(--ob-primary-600) | |
ob-bg-primary-700 | background-color: var(--ob-primary-700) | |
ob-bg-primary-800 | background-color: var(--ob-primary-800) | |
ob-bg-primary-900 | background-color: var(--ob-primary-900) | |
ob-bg-secondary-50 | background-color: var(--ob-secondary-50) | |
ob-bg-secondary-100 | background-color: var(--ob-secondary-100) | |
ob-bg-secondary-200 | background-color: var(--ob-secondary-200) | |
ob-bg-secondary-300 | background-color: var(--ob-secondary-300) | |
ob-bg-secondary-400 | background-color: var(--ob-secondary-400) | |
ob-bg-secondary-500 | background-color: var(--ob-secondary-500) | |
ob-bg-secondary-600 | background-color: var(--ob-secondary-600) | |
ob-bg-secondary-700 | background-color: var(--ob-secondary-700) | |
ob-bg-secondary-800 | background-color: var(--ob-secondary-800) | |
ob-bg-secondary-900 | background-color: var(--ob-secondary-900) | |
ob-bg-tertiary-50 | background-color: var(--ob-tertiary-50) | |
ob-bg-tertiary-100 | background-color: var(--ob-tertiary-100) | |
ob-bg-tertiary-200 | background-color: var(--ob-tertiary-200) | |
ob-bg-tertiary-300 | background-color: var(--ob-tertiary-300) | |
ob-bg-tertiary-400 | background-color: var(--ob-tertiary-400) | |
ob-bg-tertiary-500 | background-color: var(--ob-tertiary-500) | |
ob-bg-tertiary-600 | background-color: var(--ob-tertiary-600) | |
ob-bg-tertiary-700 | background-color: var(--ob-tertiary-700) | |
ob-bg-tertiary-800 | background-color: var(--ob-tertiary-800) | |
ob-bg-tertiary-900 | background-color: var(--ob-tertiary-900) | |
ob-bg-neutral-50 | background-color: var(--ob-neutral-50) | |
ob-bg-neutral-100 | background-color: var(--ob-neutral-100) | |
ob-bg-neutral-200 | background-color: var(--ob-neutral-200) | |
ob-bg-neutral-300 | background-color: var(--ob-neutral-300) | |
ob-bg-neutral-400 | background-color: var(--ob-neutral-400) | |
ob-bg-neutral-500 | background-color: var(--ob-neutral-500) | |
ob-bg-neutral-600 | background-color: var(--ob-neutral-600) | |
ob-bg-neutral-700 | background-color: var(--ob-neutral-700) | |
ob-bg-neutral-800 | background-color: var(--ob-neutral-800) | |
ob-bg-neutral-900 | background-color: var(--ob-neutral-900) | |
ob-bg-accent-50 | background-color: var(--ob-accent-50) | |
ob-bg-accent-100 | background-color: var(--ob-accent-100) | |
ob-bg-accent-200 | background-color: var(--ob-accent-200) | |
ob-bg-accent-300 | background-color: var(--ob-accent-300) | |
ob-bg-accent-400 | background-color: var(--ob-accent-400) | |
ob-bg-accent-500 | background-color: var(--ob-accent-500) | |
ob-bg-accent-600 | background-color: var(--ob-accent-600) | |
ob-bg-accent-700 | background-color: var(--ob-accent-700) | |
ob-bg-accent-800 | background-color: var(--ob-accent-800) | |
ob-bg-accent-900 | background-color: var(--ob-accent-900) | |
ob-bg-informative-50 | background-color: var(--ob-informative-50) | |
ob-bg-informative-100 | background-color: var(--ob-informative-100) | |
ob-bg-informative-200 | background-color: var(--ob-informative-200) | |
ob-bg-informative-300 | background-color: var(--ob-informative-300) | |
ob-bg-informative-400 | background-color: var(--ob-informative-400) | |
ob-bg-informative-500 | background-color: var(--ob-informative-500) | |
ob-bg-informative-600 | background-color: var(--ob-informative-600) | |
ob-bg-informative-700 | background-color: var(--ob-informative-700) | |
ob-bg-informative-800 | background-color: var(--ob-informative-800) | |
ob-bg-informative-900 | background-color: var(--ob-informative-900) | |
ob-bg-success-50 | background-color: var(--ob-success-50) | |
ob-bg-success-100 | background-color: var(--ob-success-100) | |
ob-bg-success-200 | background-color: var(--ob-success-200) | |
ob-bg-success-300 | background-color: var(--ob-success-300) | |
ob-bg-success-400 | background-color: var(--ob-success-400) | |
ob-bg-success-500 | background-color: var(--ob-success-500) | |
ob-bg-success-600 | background-color: var(--ob-success-600) | |
ob-bg-success-700 | background-color: var(--ob-success-700) | |
ob-bg-success-800 | background-color: var(--ob-success-800) | |
ob-bg-success-900 | background-color: var(--ob-success-900) | |
ob-bg-warning-50 | background-color: var(--ob-warning-50) | |
ob-bg-warning-100 | background-color: var(--ob-warning-100) | |
ob-bg-warning-200 | background-color: var(--ob-warning-200) | |
ob-bg-warning-300 | background-color: var(--ob-warning-300) | |
ob-bg-warning-400 | background-color: var(--ob-warning-400) | |
ob-bg-warning-500 | background-color: var(--ob-warning-500) | |
ob-bg-warning-600 | background-color: var(--ob-warning-600) | |
ob-bg-warning-700 | background-color: var(--ob-warning-700) | |
ob-bg-warning-800 | background-color: var(--ob-warning-800) | |
ob-bg-warning-900 | background-color: var(--ob-warning-900) | |
ob-bg-error-50 | background-color: var(--ob-error-50) | |
ob-bg-error-100 | background-color: var(--ob-error-100) | |
ob-bg-error-200 | background-color: var(--ob-error-200) | |
ob-bg-error-300 | background-color: var(--ob-error-300) | |
ob-bg-error-400 | background-color: var(--ob-error-400) | |
ob-bg-error-500 | background-color: var(--ob-error-500) | |
ob-bg-error-600 | background-color: var(--ob-error-600) | |
ob-bg-error-700 | background-color: var(--ob-error-700) | |
ob-bg-error-800 | background-color: var(--ob-error-800) | |
ob-bg-error-900 | background-color: var(--ob-error-900) | |
ob-bg-elevations-24dp | background: var(--ob-elevations-24dp) | |
ob-bg-elevations-16dp | background: var(--ob-elevations-16dp) | |
ob-bg-elevations-12dp | background: var(--ob-elevations-12dp) | |
ob-bg-elevations-9dp | background: var(--ob-elevations-9dp) | |
ob-bg-elevations-8dp | background: var(--ob-elevations-8dp) | |
ob-bg-elevations-6dp | background: var(--ob-elevations-6dp) | |
ob-bg-elevations-4dp | background: var(--ob-elevations-4dp) | |
ob-bg-elevations-3dp | background: var(--ob-elevations-3dp) | |
ob-bg-elevations-2dp | background: var(--ob-elevations-2dp) | |
ob-bg-elevations-1dp | background: var(--ob-elevations-1dp) | |
ob-bg-white-trans-90 | background-color: var(--ob-white-trans-90) | |
ob-bg-white-trans-80 | background-color: var(--ob-white-trans-80) | |
ob-bg-white-trans-70 | background-color: var(--ob-white-trans-70) | |
ob-bg-white-trans-60 | background-color: var(--ob-white-trans-60) | |
ob-bg-white-trans-50 | background-color: var(--ob-white-trans-50) | |
ob-bg-white-trans-40 | background-color: var(--ob-white-trans-40) | |
ob-bg-white-trans-20 | background-color: var(--ob-white-trans-20) | |
ob-bg-white-trans-10 | background-color: var(--ob-white-trans-10) | |
ob-bg-white-trans-5 | background-color: var(--ob-white-trans-5) | |
ob-bg-white-trans-1 | background-color: var(--ob-white-trans-1) |