🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
Neutral Colors
View in Pattern LabHTML Markup
<ul class="sg-colors">
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">0</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--white);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-000<br><em><strong>Fluent UI:</strong> White / White</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">50</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralLighterAlt);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-050<br><em><strong>Fluent UI:</strong> Neutral Lighter Alt / neutralLighterAlt</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">100</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralLighter);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-100<br><em><strong>Fluent UI:</strong> Neutral Lighter / neutralLighter</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">200</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralLight);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-200<br><em><strong>Fluent UI:</strong> Neutral Light / neutralLight</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">250</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralQuaternaryAlt);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-250<br><em><strong>Fluent UI:</strong> Neutral Quaternary Alt / neutralQuaternaryAlt</em><br></span>
</li>
<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(--neutralQuaternary);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-300<br><em><strong>Fluent UI:</strong> Neutral Quaternary / neutralQuaternary</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">350</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralTertiaryAlt);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-350<br><em><strong>Fluent UI:</strong> Neutral Tertiary Alt / neutralTertiaryAlt</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">400</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralTertiary);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-400<br><em><strong>Fluent UI:</strong> Neutral Tertiary / neutralTertiary</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">450</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralSecondaryAlt);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-450<br><em><strong>Fluent UI:</strong> Neutral Secondary Alt / neutralSecondaryAlt</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">500</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--neutralSecondary);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-500<br><em><strong>Fluent UI:</strong> Neutral Secondary / neutralSecondary</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(--neutralPrimaryAlt);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-600<br><em><strong>Fluent UI:</strong> Neutral Primary Alt / neutralPrimaryAlt</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(--neutralPrimary);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-700<br><em><strong>Fluent UI:</strong> Neutral Primary / neutralPrimary</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(--neutralDark);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-800<br><em><strong>Fluent UI:</strong> Neutral Dark / neutralDark</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">900</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--black);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-900<br><em><strong>Fluent UI:</strong> Black / Black</em><br></span>
</li>
</ul>
<!--end sg-colors--><small>To add to these items, use Sass variables that start with<code>$color-brand-</code>in<code>./source/css/scss/abstracts/_variables.scss</code></small>
This contains all neutral color variants.