Theme.Colors


Theme colors are the only colors that you want to allow in a design. With theme colors, Warhol can check every element on a web page for invalid colors, not just components. Warhol can read theme colors from your pattern library; you just have to point to color examples in your configuration.

If you use theme colors, every color that you want to allow in your project must be part of the color swatch in your pattern library. The only exceptions to this rule are fully transparent color values like rgba(255, 0, 0, 0) and transparent. Even colors for borders and shadows must be part of the pattern library. The same is true for basic colors like black and white.

The alpha component of every color counts towards two colors being considered different. For Warhol, rgba(255, 0, 0, 0.99) is as different from rgba(255, 0, 0, 1) as it is from green.

Example configuration #

Full example:

{
  "patternLibUrl": "https://warhol.io/components",
  "breakpoints": [800, 1000],
  "theme": {
    "colors": {
      "colorsUrl": "https://warhol.io/components/colors",
      "sources": ".color-swatch",
      "properties": [ "background-color" ]
    }
  }
}

Minimal example:

{
  "patternLibUrl": "https://warhol.io/components",
  "breakpoints": [800, 1000],
  "theme": {
    "colors": {
      "sources": ".color-swatch"
    }
  }
}

Field theme.colors.colorsUrl (optional, string, defaults to the theme URL or the pattern lib URL) #

If your color swatch lives on a specific URL in your pattern library, you can specify this here. If you omit theme.colors.colorsUrl or set it to null, theme.themeUrl will be used instead. If theme.themeUrl is not defined, the top-level patternLibUrl will be used. If you set none of the URL fields to a valid URL, you will get an error.

Field theme.colors.sources (string, required, non-empty) #

The selector for color source elements. Colors are only read from the source elements themselves, not from their children!

Field properties (list of CSS color properties, optional, defaults to [ "background-color" ]) #

Configures the computed CSS properties to read colors from. This field defaults to just [ "background-color" ]as in most color swatches other color properties (like for text or borders) are not part of the actual color definition, but if you want to, you can use the following CSS properties as color sources:

  • background-color (default)
  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
  • box-shadow
  • color
  • lighting-color
  • outline-color
  • text-decoration-color
  • text-shadow

Note that you can not use CSS shorthand properties like background or border-color in this configuration field. This is only a limitation of the configuration format! The CSS in your pattern libraries and web pages can of course use shorthand properties.

About color checking #

Warhol's color checking is smart, but merciless. Invalid colors that are not visible due to CSS interplay do not get reported as error. If for example a border-top-color is set to #F00, but your theme only allows #FFF and #00F, you will only get an error if the border-top-width computes to a value larger than 0px. Also the element in question has be rendered in the first place; elements that are display: none are not checked for theme violations at all.

On the other hand, Warhol will complain about even just slightly different shades of gray. This even extends to shadow colors with different alpha components and basic colors like black or white. If a color is not allowed by the theme, it has no place in production.

Tips for debugging #

  • Don't get discouraged if Warhol points out tens of different grays in your production web project. We have found that this always happens in every project, no matter how talented and thorough the designers and developers are. Like bugs in software, proliferation of grays is a fact of life and just has to be dealt with at some point.
  • Do not hesitate to update the pattern library and add colors if necessary. Most pattern libraries that were created without Warhol's help are less comprehensive than their creators like to believe.
  • Check the snapshot error log in browser extension or the web app to make sure that Warhol was able to find the source elements for colors.
  • Inspect your color palette in the browser extension or the web app to make sure that it is complete.

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.