Warhol

Configuration

The configuration is how you connect Warhol to your pattern library. It lets Warhol know where to find your pattern library, 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

Field patternLibUrl (optional, string or null, defaults to null)

URL for the pattern library's main page ("kitchen sink"), if any. Can be overruled for each component and theme configuration with their own URLs. If the pattern library URL is not specified, components and themes (or sub-sections of themes) must provide their own URLs.

Field breakpoints (optional, number[] or null, defaults to [ 1000 ])

Breakpoints for the pattern library (and the production page that implements the pattern lib), controls the screen widths at which snapshots for the components are taken.

Field components (optional, ComponentDefinition[] or null, defaults to [])

List of component definitions. A component definition is an object with the following fields:

  • source (string, required, non-empty): source selector
  • target (string, optional, non-empty): target selector, defaults to the source selector
  • name (string or null, optional, non-empty): component name, defaults to null
  • componentUrl (string or null, 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.

Field theme (optional, object or null, defaults to null)

Theme configuration for colors, typography and such.

Field theme.themeUrl (optional, string or null, defaults to the pattern lib URL)

Theme URL, can be overruled by the URLs specified in the theme's sub-properties.

Field theme.colors (optional, object or null, defaults to null)

Configuration for theme colors with the following fields:

  • sources (string, required, non-empty): selector for color source elements
  • properties (enum of CSS color properties, optional, defaults to [ "background-color" ]): configures the CSS properties to use as a color source. CSS shorthand properties like background are not allowed.
  • colorsUrl (string or null, optional or required depending on the theme and pattern lib URLs, defaults to the theme or pattern lib URL): the URL for the color sources

The colorsUrl field is required if neither a pattern lib URL nor a theme URL have been specified.

Field theme.typography (optional, object or null, defaults to null)

Configuration for theme typography with the following fields:

  • sources (string, required, non-empty): selector for elements that contain typography examples
  • properties (list of CSS color properties, optional, defaults to [ "font-family", "font-size", "font-weight", "font-style" ]): configures the CSS properties that define a typography example. CSS shorthand properties like font are not allowed.
  • typographyUrl (string or null, optional or required depending on the theme and pattern lib URLs, defaults to the theme or pattern lib URL): the URL for the typography examples

The typographyUrl field is required if neither a pattern lib URL nor a theme URL have been specified.

Field theme.icons (optional, object or null, defaults to null)

Configuration for theme icons with the following fields:

  • sources (string, required, non-empty): selector for elements that contain icons
  • iconsUrl (string or null, optional or required depending on the theme and pattern lib URLs, defaults to the theme or pattern lib URL): the URL for the icon examples
  • isFont (boolean, required, non-empty): defines if icons are created using an icon font

The iconsUrl field is required if neither a pattern lib URL nor a theme URL have been specified.

Field utils (optional, object or null, defaults to null)

Definitions for style utilities (classes for alignment, layout, shadows and the like).

Field utils.utilsUrl (optional, string or null, defaults to the pattern lib URL)

URL for style utilities, is only required if there is no top-level patternLibUrl.

Field utils.sources (required, array of objects)

Sources for utilities. Each utility is described by an object:

  • type (either "rule" or "element"): whether to read the utility styles from an element or from a CSS rule
  • selector (string, required, non-empty): the selector for the style utility
  • name (string, optional, non-empty, defaults to null): utility name, defaults to null