🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
Blues
View in Pattern LabHTML Markup
<ul class="sg-colors">
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">300</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--blueLight);"></span><span class="sg-label"><strong>SASS:</strong> $blue-300<br><em><strong>Fluent UI:</strong> Blue Light / blueLight</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">600</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--blue);"></span><span class="sg-label"><strong>SASS:</strong> $blue-600<br><em><strong>Fluent UI:</strong> blue / blue</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">700</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--blueMid);"></span><span class="sg-label"><strong>SASS:</strong> $blue-700<br><em><strong>Fluent UI:</strong> Blue Mid / blueMid</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">800</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--blueDark);"></span><span class="sg-label"><strong>SASS:</strong> $blue-800<br><em><strong>Fluent UI:</strong> Blue Dark / blueDark</em><br></span>
</li>
</ul>
<!--end sg-colors--><small></small>