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 colours.
In practice, theme colours are accessed using
X can be any number between 1 and 5. We recommend setting up your theme colours in order of importance: 1 being your primary, 2 being your secondary, etc. Black, white, and gre/ay are accessed using their respective names (and yes, we included both spellings!).
Clone also provides you with three customizable action colours: go (good), slow (attention), stop (error).
Clone allows you to customize the following sitewide colour 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 colour, 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 / grey black c1 (Theme Colour 01) c2 (Theme Colour 02) c3 (Theme Colour 03) c4 (Theme Colour 04) c5 (Theme Colour 05) stop slow go
Clone allows you to customize the following component specific colour settings:
data-c-hover-colorto accommodate buttons.
grayas a colour option.