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.
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 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
<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>