Colors

Color variables are defined as CSS variables in the base CSS file and incorporated into the Tailwind Config allowing reference throughout the app via Tailwind's utility classes.

This guide provides a breakdown of each color variable, its CSS variable name, and what it applies to.

---

Type	CSS Variable	Applies to
Background	‑‑background	Layout pages background Drawers background Accordions background Alerts background Navbar 'inverted' variant header text Navbar icon Navigation Flyout
Foreground	‑‑foreground	Text Placeholder text (50% opacity) Selected product variant border
Primary	‑‑primary	Button hover background BackToTop hover background Input ring focus Carousel navigation buttons - Dark mode Checkbox ring
Primary Foreground	‑‑primary-foreground	Default variant Button hover text Default variant BackToTop hover text Cart quantity bubble text Badge default variant text color CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Secondary	‑‑secondary	Default variant Button background Default variant BackToTop background
Secondary Foreground	‑‑secondary‑foreground	Default variant Button text Default variant BackToTop text CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Destructive	‑‑destructive	Account: edit address alert Account: profile error Cart: promo code error Checkout: place order error Checkout: shipping error Product: add to cart error Product List: create error Destructive variant Button background Destructive variant BackToTop background Destructive variant Badge background Destructive variant Toast background
Destructive Foreground	‑‑destructive‑foreground	Destructive variant Button text Destructive variant BackToTop text Destructive variant Badge text Destructive variant Toast text CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Muted	‑‑muted	Skeleton background
Muted Foreground	‑‑muted‑foreground	Not-Found Page message text Ancestor breadcrumbs text Strikethrough pricing text Radio button selected inner ring Hovered product variant border Input placeholder text CMS-configurable text color in Footer MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Accent	‑‑accent	Ghost variant Button hover background Ghost variant BackToTop hover background
Accent Foreground	‑‑accent‑foreground	Navbar icons hover Footer links animated underline hover Cart quantity button hover Cart shipping, delivery, payment button text hover Category links animated underline hover Mobile PDP Gallery buttons CMS-configurable text color in MediaHero MediaBlockHero MediaBlockHeroYouTube MediaBlockHeroVimeo MediaCard
Popover	‑‑popover	Theme Switcher Popover background Locale Switcher Popover background Account Edit Address Popover background Cart 'Add to List' Popover background Cart Lists Popover background Breadcrumbs Popover background
Popover Foreground	‑‑popover‑foreground	Theme Switcher Popover text Locale Switcher Popover text Account Edit Address Popover text Cart 'Add to List' Popover text Cart Lists Popovers text
Footer	‑‑footer	Footer background
Footer Foreground	‑‑footer‑foreground	Footer text
Border	‑‑border	Inactive product variant border Inactive radio button border Navbar category menu border Order totals border Cart drawer border and dividers
Input	‑‑input	Input border Search Promo code Address Profile Checkout Product filter sort-by Secondary variant Button border