Colors

Black, White, Gray, and Theme Colors

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 cX, where 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.

Go, Slow, Stop

Clone also provides you with three customizable action colors: go (good), slow (attention), stop (error).

Sitewide Color Settings

Clone allows you to customize the following sitewide color settings:

• Text Selection Background Color (changes the color of the background behind highlighted text)
  • $clone-selection-background-color
• Focus Color (changes the focus border color of buttons and input fields)
  • $clone-focus-color

Hover Colors

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 $clone-hover-color variable.

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

Component Colors

Clone allows you to customize the following component specific color settings:

• Accordions
  • $clone-accordion-border-color
  • $clone-accordion-alternating-background-color
• Alerts
  • $clone-alert-information
  • $clone-alert-warning
  • $clone-alert-error
• Blockquotes
  • $clone-blockquote-color
• Code Blocks
  • $clone-code-background
• Menus
  • $clone-menu-background-color
  • $clone-submenu-background-color
  • $clone-menu-font-color
  • $clone-menu-divider-color
  • $clone-menu-icon-color
• Pullquotes
  • $clone-pullquote-color
• Tables
  • $clone-table-heading-color
  • $clone-table-alternating-color

Changelog

Version 2.4.18

• Fixed a bug that prevented data-c-colour from working properly.

Version 2.4.17

• Removed $clone-visited-link-color as it was interfering with the ability to properly control the color of links on a variety of background colors.

Version 2.4.12

• Added content under Color to explain manual hover overrides.
• Updates data-c-hover-color to accommodate buttons.
• Fixes a bug where anchors were not respecting hover attributes that override the default hover value.

Version 2.3.9

• Fixes quite a few inheritance bugs for colour, font, weight, etc.

Version 2.3.1

• Added a variable for visited link colour.
• Added gray as a colour option.