Colors that have significance:
<!-- example -->
<div class="shape-circle fill-primary halo-primary">primary</div>
Adjusted tones can be exploited obtaining sematics blocks of info.
<!-- example -->
<div class="shape-square fill-primary-container">primary</div>
Standard colors adapted that fits the actual theme:
<!-- example -->
<div class="shape-circle fill-green">green</div>
Adjusted tones can be exploited obtaining colored blocks of info.
<!-- example -->
<div class="shape-square fill-green-container">green</div>
Text can be colorized as it follows:
<!-- example -->
<span class="text-primary">primary</span>
Hover/focus intereactivity feedback can be requested to filled DOMElements or colored text content by adding .fill-interactive and .text-interactive css classes respectively.
<!-- examples -->
<span class="fill-primary fill-interactive">primary</span>
<span class="fill-primary-container fill-interactive">primary-container</span>
<span class="text-primary text-interactive">primary</span>
Borders can be colorized as it follows:
<!-- example -->
<div class="shape-square border-solid border-size--2 border-primary">primary</div>
Halo effect either inner or outer can be applied as it follows:
<!-- halo effect (outer) -->
<div class="shape-circle halo-primary">out</div>
<!-- halo effect (inner) -->
<div class="shape-circle halo-primary halo-in">in</div>
<!-- halo effect (both inner and outer) -->
<div class="shape-circle halo-primary halo-in-out">in-out</div>
Glass effects, per-color, can be applied as it follows:
<!-- glassmorphism -->
<div class="shape-circle fill-primary fill-glass">primary</div>