🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

greens

View in Pattern Lab

HTML 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(--greenLight);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$green-300<br><em><strong>Fluent UI:</strong>&nbsp;greenLight / greenLight</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(--green);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$green-600<br><em><strong>Fluent UI:</strong>&nbsp;green / green</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(--greenDark);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$green-800<br><em><strong>Fluent UI:</strong>&nbsp;greenDark / greenDark</em><br></span>
</li>
</ul>
<!--end sg-colors--><small></small>

All other colors by name