ONSdigital / dp-design-system

Design System for Digital Publishing
MIT License
6 stars 3 forks source link

Addition of charting palettes #12

Open armstrongb opened 3 years ago

armstrongb commented 3 years ago

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

Colour value Name sass $var Order
#206095 Ocean blue $ocean-blue 1
#27A0CC Sky blue $sky-blue 2
#003C57 Night blue $night-blue 3
#118C7B Emerald green -- 4
#A8BD3A Spring green $spring-green 5
#871A5B Beetroot purple -- 6
#F66068 Coral pink -- 7
#746CB1 Lavender purple -- 8
#22D0B6 Mint green -- 9

Alternate

Colour value Name sass $var Order
#206095 Ocean blue $ocean-blue 1
#27A0CC Sky blue $sky-blue 2
#871A5B Beetroot purple -- 3
#A8BD3A Spring green $spring-green 4
#F66068 Coral pink -- 5

Highlight colour for each palette is

Colour value Name sass $var Order
#F39431 Highlight orange -- --

Note

SASS $vars used above drawn from https://github.com/ONSdigital/dp-design-system/blob/main/src/scss/abstracts/variables/_colors.scss

armstrongb commented 3 years ago

Content from Notion

Introduction

Extended

The 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.

Highlight

The 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.

dandwal commented 3 years ago

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.

Rachel-Price-ONS commented 3 years ago

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:

Some of the colours do not meet 3:1 contrast ratio against white. If you use the colours for text, such as direct labelling, these need to be made darker. Text must be at least 14pt in bold or 18pt in regular text to use these colours.

  • Spring green #A8BD3A > #8A9B2E
  • Mint green #22D0B6 > #1AA590
  • Highlight orange #F39431 > #F56927
armstrongb commented 3 years ago

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.

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. $dp-chart-emerald-green as they aren't intended for use in non-chart contexts?

armstrongb commented 3 years ago

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:

Some of the colours do not meet 3:1 contrast ratio against white. If you use the colours for text, such as direct labelling, these need to be made darker. Text must be at least 14pt in bold or 18pt in regular text to use these colours.

  • Spring green #A8BD3A > #8A9B2E
  • Mint green #22D0B6 > #1AA590
  • Highlight orange #F39431 > #F56927

Are these darkened by a % amount or another way we can maintain these values from the original values?

Rachel-Price-ONS commented 3 years ago

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:

Some of the colours do not meet 3:1 contrast ratio against white. If you use the colours for text, such as direct labelling, these need to be made darker. Text must be at least 14pt in bold or 18pt in regular text to use these colours.

  • Spring green #A8BD3A > #8A9B2E
  • Mint green #22D0B6 > #1AA590
  • Highlight orange #F39431 > #F56927

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