...
Light and dark modes are considered themes in Chameleon and will require a full set of colour palettes (default and inverse) to be designed and implemented.
On{colour}
Some colours in Chameleon are referred to as on colours. These are colours designed to sit on top of other colours.
...
For example, this button uses two colours:
Action - For the background colour
On-action - For the text colour
We make this separation to allow for maximum flexibility. If you wanted to change your action colour you only need to consider the action, and on-action declarations. Otherwise you would have to find out where you’ve used every instance of your action colour (chameleon green-500) and change it individually. You would also need to ensure that any text that sits on top of action is also updated.
Colours in use
Action colours
Colour | Default | Inverse | |
|---|---|---|---|
Action | chameleon green-500 | chameleon green-500 | |
On-action | white-500 | deep blue-500 | |
Action hover | chameleon green-700 | chameleon green-150 | |
On-hover | white-500 | deep blue-500 | |
Action focus | chameleon green-700 | chameleon green-150 | |
On-Focus | white-500 | deep blue-500 | |
Action focus border | chameleon blue-400 | chameleon blue-400 | |
Action active | chameleon green-800 | chameleon green-50 | |
On-active | white-500 | deep blue-500 | |
Action disabled | grey-200 | grey-200 | |
On-disabled | grey-500 | grey-500 | |
Selected | chameleon green-800 | chameleon green-50 | |
On-selected | white-500 | deep blue-500 | |
Dropdown hover | chameleon green-50 | steel blue-900 | |
CTA link border | chameleon green-400 | chameleon green-400 |
General UI colours
Colour | Default | Inverse | |
|---|---|---|---|
Accent | |||
Input field border | |||
Input field hover | |||
Divider | |||
Heading | |||
Body | |||
Placeholder | |||
Visited | |||
Surface | |||
Elevation | |||
Background default | |||
Background alternating |
...