Backgrounds and shadows
Backgrounds
Helper classes for adding a background color for an element.
.bg-default
.bg-primary
.bg-secondary
.bg-transparent
.bg-default
.bg-primary
.bg-secondary
.bg-transparent
<div class="bg-default">This div will have --neutral-05 background color for the light mode and --neutral-70 for the dark mode.</div>
<div class="bg-primary">This div will have --neutral-20 background color for the light mode and --neutral-80 for the dark mode.</div>
<div class="bg-secondary">This div will have --blue-60 background color for the light mode and --blue-80 for the dark mode.</div>
<div class="bg-transparent">This div will have transparent background color for the light mode and dark mode.</div>
Shadows
Helper classes for adding shadows for an element.
.shadow-50
.shadow-40
.shadow-30
.shadow-20
.shadow-10
.shadow-0
.shadow-50
.shadow-40
.shadow-30
.shadow-20
.shadow-10
.shadow-0
<div class="shadow-50 bg-default"> ... </div>
<div class="shadow-40 bg-default"> ... </div>
<div class="shadow-30 bg-default"> ... </div>
<div class="shadow-20 bg-default"> ... </div>
<div class="shadow-10 bg-default"> ... </div>
<div class="shadow-0 bg-default"> ... </div>