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)