Schemes

To prevent the propagation of color settings throughout the product, schemes have been provided that satisfy common patterns. Schemes save the developer from having to manage changes by abstracting color characteristics away from the component level. They apply complex theme based operations with a single class on your element

Not every UI pattern is included in a scheme. Most schemes are the result of a pattern needing to be applyied to multiple element structures. This is why there is no 'button' scheme. If you need that, you should use a button or .sme-button class.

Scheme Classes

Class Use Case Example
.sme-scheme-base Applies the primary theme to the current element The base scheme is applied
.sme-scheme-alt Applies the alternate theme to the current element The alternate scheme is applied
.sme-scheme-dropdown Applies the dropdown content colors The dropdown scheme is applied
.sme-scheme-dialog Applies the dialog content colors The dialog scheme is applied
.sme-scheme-nav-item Applies the navigation item colors The navigation item scheme is applied
.sme-scheme-nav-list-item Applies the navigation list item colors The navigation list item scheme is applied
.sme-scheme-nav-menu-item Applies the navigation menu item colors The navigation menu item scheme is applied
.sme-scheme-list-item Applies the list item colors The list item scheme is applied
.sme-scheme-sideloaded Applies the sideloaded item colors. This should be used to indicate dev time only features. The sideloaded scheme is applied
.sme-scheme-backdrop-opaque Applies the opaque backdrop colors The opaque backdrop scheme is applied
.sme-scheme-banner Applies the banner colors The banner scheme is applied

Item Schemes

Item schemes are used to add list selection behavior to items presented to the user. These schemes are used in grids, menus, lists and more.

You can use the following class to indicate a 'selected' state on elements that have an item scheme applied.

.sme-active

Example

.sme-scheme-nav-item
.sme-scheme-nav-list-item
.sme-scheme-nav-menu-item
.sme-scheme-list-item
<div class="sme-padding-squish-v-sm sme-scheme-nav-item" [class.sme-active]="selectedItem===1" (click)="selectedItem=1">.sme-scheme-nav-item</div> <div class="sme-padding-squish-v-sm sme-scheme-nav-list-item" [class.sme-active]="selectedItem===2" (click)="selectedItem=2">.sme-scheme-nav-list-item</div> <div class="sme-padding-squish-v-sm sme-scheme-nav-menu-item" [class.sme-active]="selectedItem===3" (click)="selectedItem=3">.sme-scheme-nav-menu-item</div> <div class="sme-padding-squish-v-sm sme-scheme-list-item" [class.sme-active]="selectedItem===4" (click)="selectedItem=4">.sme-scheme-list-item</div>