Utilities: Colors - Launchpad

Text Colors

text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-muted

text-dark

<p class="lp-text-primary">text-primary</p>
<p class="lp-text-secondary">text-secondary</p>
<p class="lp-text-success">text-success</p>
<p class="lp-text-danger">text-danger</p>
<p class="lp-text-warning">text-warning</p>
<p class="lp-text-info">text-info</p>
<p class="lp-text-muted">text-muted</p>
<p class="lp-text-dark">text-dark</p>

Background Colors

primary secondary success danger warning info dark light

<div class="lp-d-flex lp-flex-wrap lp-gap-2">
    <span class="lp-demo-box lp-demo-box--pill lp-bg-primary lp-text-white">primary</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-secondary lp-text-white">secondary</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-success lp-text-white">success</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-danger lp-text-white">danger</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-warning">warning</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-info lp-text-white">info</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-dark lp-text-white">dark</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-light">light</span>
</div>

Subtle Background Variants

primary success danger warning info

<div class="lp-d-flex lp-flex-wrap lp-gap-2">
    <span class="lp-demo-box lp-demo-box--pill lp-bg-primary-subtle lp-text-primary">primary</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-success-subtle lp-text-success">success</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-danger-subtle lp-text-danger">danger</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-warning-subtle lp-text-warning">warning</span>
    <span class="lp-demo-box lp-demo-box--pill lp-bg-info-subtle lp-text-info">info</span>
</div>

Gradients

gradient-primary

gradient-success

gradient-danger

gradient-info

<div class="lp-d-grid lp-grid-cols-2 lp-gap-3">
    <div class="lp-demo-box lp-demo-box--pill lp-bg-gradient-primary lp-text-white lp-w-full">gradient-primary</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-gradient-success lp-text-white lp-w-full">gradient-success</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-gradient-danger lp-text-white lp-w-full">gradient-danger</div>
    <div class="lp-demo-box lp-demo-box--pill lp-bg-gradient-info lp-text-white lp-w-full">gradient-info</div>
</div>

Border Colors

primary success danger warning info dark

<div class="lp-d-flex lp-flex-wrap lp-gap-2">
    <span class="lp-demo-box lp-demo-box--pill lp-border lp-border-primary">primary</span>
    <span class="lp-demo-box lp-demo-box--pill lp-border lp-border-success">success</span>
    <span class="lp-demo-box lp-demo-box--pill lp-border lp-border-danger">danger</span>
    <span class="lp-demo-box lp-demo-box--pill lp-border lp-border-warning">warning</span>
    <span class="lp-demo-box lp-demo-box--pill lp-border lp-border-info">info</span>
    <span class="lp-demo-box lp-demo-box--pill lp-border lp-border-dark">dark</span>
</div>

CSS Reference

Class	Description
`.lp-text-{primary\|secondary\|success\|danger\|warning\|info\|dark\|light\|muted\|white\|black}`	Text color
`.lp-bg-{color}`	Solid background
`.lp-bg-{color}-subtle`	Subtle tinted background
`.lp-bg-gradient-{color}`	Linear gradient background
`.lp-bg-gradient-to-{r\|l\|t\|b}`	Gradient direction
`.lp-border-{color}`	Border color
`.lp-text-opacity-{0\|25\|50\|75\|100}`	Text opacity
`.lp-focus-ring-{color}`	Focus ring color