Semantic colors
| background: var(--background); | color: var(--on-background); |
| background: var(--primary); | color: var(--on-primary); |
| background: var(--primary-highlight); | color: var(--on-primary-highlight); |
| background: var(--secondary); | color: var(--on-secondary); |
| background: var(--secondary-highlight); | color: var(--on-secondary-highlight); |
| background: var(--surface); | color: var(--on-surface); |
| background: var(--surface-1dp); | color: var(--on-surface); |
| background: var(--surface-2dp); | color: var(--on-surface); |
| background: var(--surface); | color: var(--primary); |
| background: var(--surface-1dp); | color: var(--primary); |
| background: var(--surface-2dp); | color: var(--primary); |
| background: var(--surface); | color: var(--secondary); |
| background: var(--surface-1dp); | color: var(--secondary); |
| background: var(--surface-2dp); | color: var(--secondary); |
| background: var(--disabled); | color: var(--on-disabled); |
| background: var(--error); | color: var(--on-error); |
| background: var(--error-container); | color: var(--on-error-container); |
Specialty colors
| background: var(--failure); | color: var(--on-failure); |
| background: var(--failure-alpha); | color: var(--on-failure); |
| background: var(--warning); | color: var(--on-warning); |
| background: var(--warning-alpha); | color: var(--on-warning); |
| background: var(--success); | color: var(--on-success); |
| background: var(--success-alpha); | color: var(--on-success); |
| background: var(--unexpected); | color: var(--on-surface); |
| background: var(--unexpected-alpha); | color: var(--on-surface); |
| background: var(--untriaged); | color: var(--surface); |
| background: var(--surface); | color: var(--untriaged); |
| background: var(--positive); | color: var(--surface); |
| background: var(--surface); | color: var(--positive); |
| background: var(--negative); | color: var(--surface); |
| background: var(--surface); | color: var(--negative); |
Example Controls
Buttons
<button>Plain</button>
<button class="action">Action</button>
With Icons
Large Button Styles
<button class="large">Plain</button>
Icons
<span class="icon-sk">menu</span>menu link link_off
Large Icons
<span class="large-icon-sk">menu</span>
Select
<select multiple size="3">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<select size="1">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<select-sk>
<div>select</div>
<div>any</div>
<div selected>one</div>
</select-sk>
<multi-select-sk>
<div>select</div>
<div selected>any</div>
<div>ones</div>
<div>you</div>
<div selected>like</div>
</multi-select-sk>
Details/Summary
<details>
<summary>Summary appears as button</summary>
<ul>
<li>Details</li>
<li>appear</li>
<li>here</li>
</ul>
</details>
Summary appears as button
- Details
- appear
- here
<details class="expando">
<summary id="options-open">
<span>Summary with class `expando`</span><expand-less-icon-sk></expand-less-icon-sk
><expand-more-icon-sk></expand-more-icon-sk>
</summary>
<ul>
<li>Details</li>
<li>appear</li>
<li>here</li>
</ul>
</details>
Calendar
<calendar-input-sk></calendar-input-sk>
Check/Radio Buttons
<checkbox-sk label="Unchecked" ></checkbox-sk>
<checkbox-sk label="Checked" checked></checkbox-sk>
<checkbox-sk label="Disabled Checked" disabled checked></checkbox-sk>
<checkbox-sk label="Disabled Unchecked" disabled></checkbox-sk>
<radiogroup>
<radio-sk label="Unchecked"></radio-sk>
<radio-sk checked label="Checked"></radio-sk>
<radio-sk disabled label="Disabled Unchecked"></radio-sk>
</radiogroup>
tabs-sk and tabs-panel-sk
<tabs-sk>
<button class=selected>Query</button>
<button>Results</button>
<button>Details</button>
</tabs-sk>
<tabs-panel-sk>
<div>
This is the query tab.
</div>
<div>
This is the results tab.
</div>
<div>
This is the details tab.
</div>
</tabs-panel-sk>
spinner-sk
<spinner-sk active></spinner-sk>
Scrollbars
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis nisi nec velit rhoncus ultrices et ac augue. Morbi malesuada augue at est imperdiet luctus. Pellentesque condimentum mi eget lorem luctus facilisis. Mauris vitae tempor dolor, eu finibus orci. Etiam risus justo, mollis eu neque ut, suscipit vehicula sapien. Integer convallis, sem non lobortis congue, risus lacus sodales massa, vitae dignissim odio arcu a mi. Nulla accumsan dolor id congue pharetra.
Nunc mattis consequat faucibus. Aliquam ut leo lorem. Morbi dignissim sem id sem dapibus, nec mattis sem congue. Nunc sodales scelerisque enim, at consectetur nisi tincidunt ut. Sed tempus orci et nulla pellentesque efficitur. Ut sollicitudin finibus est et accumsan. Vestibulum elit justo, interdum nec nisl id, eleifend egestas augue. Curabitur blandit nisl est, consectetur pellentesque orci finibus at. Cras porta leo mi, vel iaculis quam finibus eget. Etiam rutrum tempus ullamcorper. Maecenas mattis, enim ac gravida ullamcorper, purus purus varius mauris, eget tempor turpis ante nec leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Tables
<table>
<tbody><tr>
<th>Fruit</th>
<th>Color</th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Grape</td>
<td>Green</td>
</tr>
</tbody></table>
| Fruit | Color |
|---|---|
| Apple | Red |
| Grape | Green |
Nav Buttons
<nav-button-sk></nav-button-sk>
<nav-links-sk closed>
<a href="">Main</a>
<a href="">Triage</a>
<a href="">Alerts</a>
</nav-links-sk>
toast-sk
<toast-sk duration="5000">
This will disappear in 5s (the default), unless you click the Close
button.
<button id="hide-toast" class="action">Close</button>
</toast-sk>
error-toast-sk
<error-toast-sk></error-toast-sk>