Placeholders
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-radius |
$sp-unit * 0.25 |
Button, Card, Code, Form, Media object, Switch, Tooltip |
$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 |