No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Accent Colors == | |||
<div style="color:white;"> | |||
<div style="background-color:var(--color-primary); width:100px; height:100px">Primary</div> | |||
<div style="background-color:var(--color-destructive); width:100px; height:100px">Destructive</div> | |||
<div style="background-color:var(--color-success); width:100px; height:100px">Success</div> | |||
<div style="background-color:var(--color-warning); width:100px; height:100px">Warning</div> | |||
</div> | |||
== Background Colors == | |||
Never use Surface 0, that's reserved for the page background color ONLY. | |||
<div style="color:white;"> | |||
<div style="background-color:var(--color-surface-0); width:100px; height:100px">Surface 0</div> | |||
<div style="background-color:var(--color-surface-1); width:100px; height:100px">Surface 1</div> | |||
<div style="background-color:var(--color-surface-2); width:100px; height:100px">Surface 2</div> | |||
<div style="background-color:var(--color-surface-3); width:100px; height:100px">Surface 3</div> | |||
<div style="background-color:var(--color-surface-4); width:100px; height:100px">Surface 4</div> | |||
</div> | |||
== Text == | |||
<div style="color:black;"> | |||
<div style="background-color:var(--color-base); width:200px; height:100px">Base</div> | |||
<div style="background-color:var(--color-base--emphasized); width:200px; height:100px">Emphasized(Title)</div> | |||
<div style="background-color:var(--color-base--subtle); width:200px; height:100px">Captions/Subtle</div> | |||
</div> | </div> | ||
Latest revision as of 04:58, 14 January 2024
Accent Colors
Primary
Destructive
Success
Warning
Background Colors
Never use Surface 0, that's reserved for the page background color ONLY.
Surface 0
Surface 1
Surface 2
Surface 3
Surface 4
Text
Base
Emphasized(Title)
Captions/Subtle