🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
Button Colors Primary
View in Pattern LabHTML Markup
<ul class="sg-colors">
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">neutral-000</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonText);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-000<br><em><strong>Fluent UI:</strong> Primary Button Text / primaryButtonText</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">neutral-000</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonTextHovered);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-000<br><em><strong>Fluent UI:</strong> Primary Button Text Hovered / primaryButtonTextHovered</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">neutral-000</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonTextPressed);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-000<br><em><strong>Fluent UI:</strong> Primary Button Text Pressed / primaryButtonTextPressed</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">neutral-100</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonBackgroundDisabled);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-100<br><em><strong>Fluent UI:</strong> Primary Button Background Disabled / primaryButtonBackgroundDisabled</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">neutral-300</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonTextDisabled);"></span><span class="sg-label"><strong>SASS:</strong> $neutral-300<br><em><strong>Fluent UI:</strong> Primary Button Text Disabled / primaryButtonTextDisabled</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">theme-600</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonBackground);"></span><span class="sg-label"><strong>SASS:</strong> $theme-600<br><em><strong>Fluent UI:</strong> Primary Button Background / primaryButtonBackground</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">theme-700</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonBackgroundHovered);"></span><span class="sg-label"><strong>SASS:</strong> $theme-700<br><em><strong>Fluent UI:</strong> Primary Button Background Hovered / primaryButtonBackgroundHovered</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">theme-800</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--primaryButtonBackgroundPressed);"></span><span class="sg-label"><strong>SASS:</strong> $theme-800<br><em><strong>Fluent UI:</strong> / primaryButtonBackgroundPressed</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
<stong class="sg-label-big">transparent</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: transparent;"></span><span class="sg-label"><strong>SASS:</strong> <br><em><strong>Fluent UI:</strong> Primary Button Border / primaryButtonBorder</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>
Button colors
.myelement{
color: var(--PrimaryColor);
}