Containers
In the name of UI consistency all containment and content overlay should be achieved by using the core maps provided by Pattern-Lab. This allows global, and shared styling of all these types of patterns, including panels, forms, modals, modal backgrounds, and tables.
Containers
| Token | Use | Value |
|---|---|---|
container("fill")
|
A containers fill color |
color("whites", "bright")
|
container("borderSize")
|
A containers border size |
1px
|
container("borderStyle")
|
A containers border style |
solid
|
container("borderColor")
|
A default containers border color |
color("greys", "light")
|
container("borderColor", "dark")
|
A variant containers border color |
color("greys")
|
container("border")
|
A combination of size, style and color for a default containers style |
1px solid color("greys", "light")
|
container("border", "dark")
|
A combination of size, style and color for a variant containers style |
1px solid color("greys")
|
container("dropShadow")
|
A containers box shadow value |
0 2px 0 rgba(color("greys", "light"), 0.6)
|
container("margin")
|
A containers margin value, usually bottom margin |
spacing("single")
|
container("padding")
|
Default padding for a container |
spacing("single")
|
container("padding", "large")
|
Large padding for a variant container |
spacing("double")
|
Overlays
| Token | Use | Value |
|---|---|---|
overlay("fill")
|
An overlays background color |
rgba(color("blacks"), 0.8)
|