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>