-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Addition of charting palettes #12
Comments
Content from NotionIntroduction
ExtendedThe extended palette is to be used as a backup in limited cases where more colours are needed. Consider changing your chart before you use the extended colours. HighlightThe highlight colour is set in chartbuilder as a way to highlight a certain category. It does not meet 3:1 contrast ratio against white, so ideally use when overlaid on other colours, e.g. a line chart combined with bar chart. |
Off the back of this, can see we have names for some of the ones that were nameless at the time of implementing the colour vars. Thinking it might be worthwhile us adding some var with those names in the codebase rather than directly using the hex colour value. |
It's probably worth adding about the colours that don't meet 3:1 contrast ratio. Information from the data vis repo and edited slightly:
|
Yep that was the intention - just documenting current state of knowledge when raising the issue. ^^ Possibly worth making those sass vars chart specific e.g. |
Are these darkened by a % amount or another way we can maintain these values from the original values? |
I think I did these manually actually, as they are different values away from accessible and I wanted to stay as close as possible to the colour. Could try out a way of doing it more automatically though |
There are separate colour palettes used for charting provided by chart builder in florence, these are specific to charting although some colour re-use from the primary palettes is included.
These are split into two variants:
Primary & Alternate
Primary
$ocean-blue
$sky-blue
$night-blue
$spring-green
Alternate
$ocean-blue
$sky-blue
$spring-green
Highlight colour for each palette is
Note
SASS $vars used above drawn from https://github.com/ONSdigital/dp-design-system/blob/main/src/scss/abstracts/variables/_colors.scss
The text was updated successfully, but these errors were encountered: