Vanilla uses several global placeholders to share common styles between components. These placeholders can be edited via the following placeholder variables, assuming a $sp-unit of 0.5rem.
| Placeholder variable | Default value | Use cases |
|---|---|---|
$bar-thickness |
0.1875rem |
Navigation, notification |
$border |
1px solid $color-mid-light |
Card, Code, Form, Search box |
$box-shadow |
0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) |
Card (highlighted), Modal, Notification, Switch |
$border-radius |
0 |
Deprecated This variable should not be used or modified, it will be removed in future version of Vanilla. |
