🚧 Under Construction

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

Theme Color

View in Pattern Lab

HTML Markup

<ul class="sg-colors">
    <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(--themeLighterAlt);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-100<br><em><strong>Fluent UI:</strong>&nbsp;Theme Lighter Alt / themeLighterAlt</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(--themeLighter);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-200<br><em><strong>Fluent UI:</strong>&nbsp;Theme Lighter / themeLighter</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(--themeLight);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-300<br><em><strong>Fluent UI:</strong>&nbsp;Theme Light / themeLight</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(--themeTertiary);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-400<br><em><strong>Fluent UI:</strong>&nbsp;Theme Tertiary / themeTertiary</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(--themeSecondary);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-500<br><em><strong>Fluent UI:</strong>&nbsp;Theme Secondary / themeSecondary</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(--themePrimary);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-600<br><em><strong>Fluent UI:</strong>&nbsp;Theme Primary / themePrimary</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(--themeDarkAlt);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-700<br><em><strong>Fluent UI:</strong>&nbsp;Theme Dark Alt / themeDarkAlt</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(--themeDark);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-800<br><em><strong>Fluent UI:</strong>&nbsp;Theme Dark / themeDark</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(--themeDarker);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$theme-900<br><em><strong>Fluent UI:</strong>&nbsp;Theme Darker / themeDarker</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 primary color variants.