If you're using Clone through NPM, it comes with a built in theme system to help you build in your brand aesthetic. There are customizable variables for black, white, gre/ay, and 5 distinct theme colors.
In practice, theme colors are accessed using
X can be any number between 1 and 5. We recommend setting up your theme colors in order of importance: 1 being your primary, 2 being your secondary, etc. Black, white, and gray are accessed using their respective names.
Clone also provides you with three customizable action colors: go (good), slow (attention), stop (error).
Clone allows you to customize the following sitewide color settings:
Clone offers a sitewide variable that allows you to customize the generic hover color of links and buttons, but in some instances you'll want to customize the hover color to accommodate for accessibility or color schemes. In order to do this, Clone provides an attribute that provides access to the entire theme palette discussed above.
To set the sitewide hover color, you can use the
To set a custom hover color on an element, you can use the
data-c-hover-color="COLOR" attribute. The options available to this attribute are outlined below.
# COLOR white gray black c1 (Theme Color 01) c2 (Theme Color 02) c3 (Theme Color 03) c4 (Theme Color 04) c5 (Theme Color 05) stop slow go
Clone allows you to customize the following component specific color settings:
data-c-colourfrom working properly.
$clone-visited-link-coloras it was interfering with the ability to properly control the color of links on a variety of background colors.
data-c-hover-colorto accommodate buttons.
grayas a colour option.