Configuration
The pattern library configuration is how you connect Warhol to your pattern library. It lets Warhol know where to find your pattern library on the web, which breakpoints the pattern library implements, which selectors to use to identify components and so on.
You can set up the configuration for a pattern library in the pattern library screen in the web app.
Summary of configuration options #
See the docs page for each configuration option for configuration examples.
Field patternLibUrl
(a full URL) #
patternLibUrl
The full URL for the pattern library's main page ("kitchen sink") where all components, colors and typography examples can be found. This URL can be overruled for each component and theme configuration with their own URLs. If the pattern library URL is not specified or, components and themes (or sub-sections of themes) must provide their own URLs.
Field breakpoints
(JSON list of numbers, defaults to [ 1000 ]
) #
breakpoints
[ 1000 ]
Breakpoints for the pattern library (and the production page that implements the pattern lib). This controls the screen widths at which snapshots for the components are taken.
Field components
(list of component definitions or null
, defaults to []
) #
components
null
[]
List of components to take snapshots of. A component definition is a JSON object with the following fields:
(CSS selector string, required, non-empty): source selectorsource
(CSS selector string, optional, non-empty): target selector, defaults to the source selectortarget
(string orname
, optional, non-empty): component name, defaults tonull
null
(URL string orcomponentUrl
, optional or required depending on the pattern lib URL): this component's own URL, defaults to the pattern lib URL. If no pattern lib URL was specified, this field is required for each component.null
Field theme
(optional, JSON object or null
, defaults to null
) #
theme
null
null
Theme configuration for colors, typography and icons. Details explained below.
Field theme.themeUrl
(optional, URL string or null
, defaults to the pattern lib URL) #
theme.themeUrl
null
Theme URL, can be overruled by the URLs specified in the theme's sub-properties.
Field theme.colors
(optional, JSON object or null
, defaults to null
) #
theme.colors
null
null
Configuration for theme colors with the following fields:
(CSS selector string, required, non-empty): selector for color source elementssources
(list of CSS color properties, optional, defaults toproperties
): configures the CSS properties to use as a color source. CSS shorthand properties like[ "background-color" ]
are not allowed.background
(URL string orcolorsUrl
, optional or required depending on the theme and pattern lib URLs, defaults to the theme or pattern lib URL): the URL for the color sourcesnull
The
colorsUrl
field is required if neither a pattern lib URL nor a theme URL have been specified.
Field theme.typography
(optional, JSON object or null
, defaults to null
) #
theme.typography
null
null
Configuration for theme typography with the following fields:
(CSS selector string, required, non-empty): selector for elements that contain typography examplessources
(list of CSS color properties, optional, defaults toproperties
): configures the CSS properties that define a typography example. CSS shorthand properties like[ "font-family", "font-size", "font-weight", "font-style" ]
are not allowed.font
(URL string ortypographyUrl
, optional or required depending on the theme and pattern lib URLs, defaults to the theme or pattern lib URL): the URL for the typography examplesnull
The
typographyUrl
field is required if neither a pattern lib URL nor a theme URL have been specified.
Field theme.icons
(optional, JSON object or null
, defaults to null
) #
theme.icons
null
null
Configuration for theme icons with the following fields:
(CSS selector string, required, non-empty): selector for elements that contain iconssources
(URL string oriconsUrl
, optional or required depending on the theme and pattern lib URLs, defaults to the theme or pattern lib URL): the URL for the icon examplesnull
(isFont
, required, non-empty): defines if icons are created using an icon fontboolean
The
iconsUrl
field is required if neither a pattern lib URL nor a theme URL have been specified.
Field utils
(optional, JSON object or null
, defaults to null
) #
utils
null
null
Definitions for style utilities (classes for alignment, layout, shadows and the like).
Field utils.utilsUrl
(optional, URL string or null
, defaults to the pattern lib URL) #
utils.utilsUrl
null
URL for style utilities, is only required if there is no top-level
patternLibUrl
.
Field utils.sources
(required, array of JSON objects) #
utils.sources
Sources for utilities. Each utility is described by an object:
(eithertype
or"rule"
): whether to read the utility styles from an element or from a CSS rule"element"
(CSS selector string, required, non-empty): the selector for the style utilityselector
(string, optional, non-empty, defaults toname
): utility name, defaults to nullnull