Shadows
Shadows tokens definitions
| Shadow name | Value |
|---|---|
| 1 | 0px 0px 10px 0px var(–briks-color-translucid-dark-4) |
| 1-soft | 0px 0px 7px 0px var(–briks-color-translucid-dark-4) |
| 1-bottom | 0px 10px 10px 0px var(–briks-color-translucid-dark-4) |
| 1-plain | 0px 0px 12px 2px var(–briks-color-plain-1) |
| 2 | 0px 20px 20px 0px var(–briks-color-translucid-mid) |
| 3 | 0px 0px 3px 1px var(–briks-color-translucid-dark-3) |
| focus | 0 0 0px 3px var(–briks-color-translucid-dark-2) |
| focus-primary | 0 0 0px 3px var(–briks-color-translucid-primary) |
| focus-success | 0 0 0px 3px var(–briks-color-translucid-support-success) |
| focus-warning | 0 0 0px 3px var(–briks-color-translucid-support-warning) |
| focus-danger | 0 0 0px 3px var(–briks-color-translucid-support-danger) |
<div class="u-bs-1">1</div>
<div class="u-bs-1-soft">1-soft</div>
<div class="u-bs-1-bottom">1-bottom</div>
<div class="u-bs-1-plain">1-plain</div>
<div class="u-bs-2">2</div>
<div class="u-bs-3">3</div>
<div class="u-bs-focus">focus</div>
<div class="u-bs-focus-primary">focus-primary</div>
<div class="u-bs-focus-success">focus-success</div>
<div class="u-bs-focus-warning">focus-warning</div>
<div class="u-bs-focus-danger">focus-danger</div>
<!-- DEMO ONLY -->
<style>
body{padding:2em}
div{padding:2em;margin-bottom:1em;}
</style>