Background Color

Semantic background color utilities. All values reference theme color tokens so they adapt to light/dark mode automatically.

---

Surface Backgrounds

Class	CSS variable
bg-background	var(--color-background)
bg-background-alt	var(--color-background-alt)
bg-surface	var(--color-surface)
bg-surface-alt	var(--color-surface-alt)
bg-surface-raised	var(--color-surface-raised)
bg-overlay	var(--color-surface-overlay)
bg-backdrop	var(--color-modal-backdrop)
bg-transparent	transparent

<div class="flex flex-col gap-2">
  <div class="bg-background p-3 rounded-md border">.bg-background</div>
  <div class="bg-background-alt p-3 rounded-md border">.bg-background-alt</div>
  <div class="bg-surface p-3 rounded-md border">.bg-surface</div>
  <div class="bg-surface-alt p-3 rounded-md border">.bg-surface-alt</div>
  <div class="bg-surface-raised p-3 rounded-md border">.bg-surface-raised</div>
  <div class="bg-overlay p-3 rounded-md text-inverse">.bg-overlay</div>
</div>

.bg-background

.bg-background-alt

.bg-surface

.bg-surface-alt

.bg-surface-raised

.bg-overlay

Brand & Status

Class	CSS variable
bg-primary	var(--color-primary)
bg-primary-light	var(--color-primary-light)
bg-primary-dark	var(--color-primary-dark)
bg-secondary	var(--color-secondary)
bg-success	var(--color-success)
bg-success-light	var(--color-success-light)
bg-warning	var(--color-warning)
bg-warning-light	var(--color-warning-light)
bg-error	var(--color-error)
bg-error-light	var(--color-error-light)
bg-info	var(--color-info)
bg-info-light	var(--color-info-light)

<div class="flex flex-col gap-2">
  <div class="bg-primary p-3 rounded-md text-inverse">.bg-primary</div>
  <div class="bg-primary-light p-3 rounded-md">.bg-primary-light</div>
  <div class="bg-success p-3 rounded-md text-inverse">.bg-success</div>
  <div class="bg-success-light p-3 rounded-md">.bg-success-light</div>
  <div class="bg-warning p-3 rounded-md">.bg-warning</div>
  <div class="bg-warning-light p-3 rounded-md">.bg-warning-light</div>
  <div class="bg-error p-3 rounded-md text-inverse">.bg-error</div>
  <div class="bg-error-light p-3 rounded-md">.bg-error-light</div>
  <div class="bg-info p-3 rounded-md text-inverse">.bg-info</div>
  <div class="bg-info-light p-3 rounded-md">.bg-info-light</div>
</div>

.bg-primary

.bg-primary-light

.bg-success

.bg-success-light

.bg-warning

.bg-warning-light

.bg-error

.bg-error-light

.bg-info

.bg-info-light

---

Responsive Variants

All background classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<div class="bg-surface md:bg-surface-raised">
  Surface on mobile, raised from md up
</div>

---

SCSS

@use '@grundtone/design-tokens/scss/lib' as gt;

.card {
  background-color: gt.color('surface-raised');
}