Feature SDS-238: Prepare Figma colour libraries and documentation using Primer's named colours

View differences

Updated by Parimal Satyal about 1 year ago

#### **Context**

Ever since we moved to Primer, colour definitions have also changed. The big benefit of using Primer's named colours, among others, is that they automatically adapt to different colour modes like Dark or High contrast. This is because each colour has already-defined variants in different modes.

However, the named colours offered by Primer are not enough for all the uses we have in Open Project. A good example are the colours used for Meeting statuses; we _could_ misuse available colours like `bgColor/attention-emphasis` or `bgColor/neutral-emphasis` but this would be misusing them, since we are ignoring the semantics of these colour definitions.

#### Primer named colours

Primer has a number of [**named colours**](https://primer.style/foundations/primitives/color) that we can use as-is. However, some colours are missing from this library, and quite a few of these named colours are not available in Figma.

Some of these colours that are _not_ available or properly documented are more useful to us in our designs because they are semantically ambiguous, eg. `display-blue-fgColor`.

#### **Identified limitations**

* Really light background colours don't exist (for restricted visibility comments, for example, we went with the default background)

* Some background colours have transparency in dark mode, so there's some inconsistency there

* Border colours like `display-brown-borderColor-muted` don't seem to adapt well to high-contrast mode and remain low-contrast. This makes borders a lot less versatile.

* We might sometimes have to use non-semantic names, eg. `--label-orange-bgColor-hover` for something that isn't a label and isn't on hover

* Extracted the light/dark colours into an HTML colour palette that's easier to navigate and browse through

####

#### Figma library

I've prepared a Figma library with all of these named colours in light and dark modes. To use these colours, add the "Named Primer Colours" library to your Figma file.

The naming convention is a bit strange for now:

`:light | --fgColor-onEmphasis` ~~--**fgColor-onEmphasis**`~~

Only the bold part is probably needed in code.

<img class="image_resized op-uc-image op-uc-image_inline" style="width:508px;" src="/api/v3/attachments/372686/content">

**Helpful links**

* [**Named colours in Primer**](https://primer.style/foundations/primitives/color) that we can use as-is

* [**Base scales**](https://primer.style/foundations/color/base-scales#all-color-scales) that "should only be used to construct functional and component/pattern design tokens, never used directly in code"; we can use them to construct our own semantic colour set.

#### Archived

~~**Suggestion**~~

~~We can define and maintain our own set of semantic colours using Primer's approach, either by basing them on existing scales that already work in different modes out of the box, or by defining our own custom colours that we maintain (with HEX values for different modes for each named colour).~~

### ~~**Approach**~~

* ~~Include base scales (we currently don't), and point~~ _~~our~~_ ~~semantic named colours to these base scale colours.~~

* ~~Note: they~~ _~~do~~_ ~~seem to adapt to different colour modes.~~

* ~~Architecture: How do we structure that in code so that we avoid devs randomly adding new colour variables?~~

* _~~To be discussed~~_

* ~~Process:~~

* ~~Only the Primer team can define new semantic colours based on identified needs. (New additions need to be new features/documented in Lookbook and Figma). Similar to what we do today for Octicons.~~

* ~~Add an automated test in GitHub to detect the use of base colours and throw a test failed.~~

* ~~Prefix:~~ `~~op-role-state~~` ~~eg.~~ `~~op-restricted-emphasis~~`

* ~~How do we handle dark mode for example?~~

* _~~\[open\] Base colours don't know if they're foreground/background; automatic mode adjustments might not be accurate.~~_

* ~~\[open\] Can our semantic colours point to~~ _~~other~~_ ~~named colours instead of base colours?~~

* ~~Generally, no, we should stick to base colours.~~

* ~~BUT, we have to first establish if we will even~~ _~~need~~_ ~~more colours than the base colours.~~

* ~~Risk: we create too many specific colours that are component-specific. (Eg.~~ `~~date-picker-selected-start-date~~` ~~is not a good idea)~~

* ~~We will keep the existing a parallel system for user-defined hex colours (for work pacakge status and types etc) that adapt to the dark modes. We'll need a different feature for linking "created colours" (user) to named semantic colours later. It's out of scope for this.~~

* ~~The only input needed with this system is the hex code in light mode.~~

* ~~When using semantic colours, more colours need to be manually defined, eg:~~

* ~~Background/muted~~

* ~~Text colour/foreground~~

* ~~Border, if any~~

* ~~We'll allow transparency only for border colours (not for fg and bg).~~

* ~~For every new semantic colour added, it needs to also assign base scale colours to:~~

* ~~light mode~~

* ~~dark mode~~

* ~~high contrast~~

### ~~**Identified semantic colour needs**~~

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:120px;"><s>Page/Module</s></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:120px;"><s>Object</s></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><s>State / Specifics</s></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><s>Existing Primer colour</s></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><s>Names semantic colour</s></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><s>Base colour</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:120px;"><s>Meetings</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:120px;"><s>Meeting status</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Open</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"> </td><td class="op-uc-table--cell"><s>op-status-open</s></td><td class="op-uc-table--cell"><s>base-color-green-5</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>In progress</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"> </td><td class="op-uc-table--cell"><s>op-status-inprogress</s></td><td class="op-uc-table--cell"><s>base-color-yellow-5</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Closed</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"> </td><td class="op-uc-table--cell"><s>op-status-closed</s></td><td class="op-uc-table--cell"><s>base-colour-neutral-8</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:120px;"><s>Activity tab</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:120px;"><s>Restricted visibility comments</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:17.5098%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>RVC header background</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"> </td><td class="op-uc-table--cell"><s>op-restricted-emphasis</s></td><td class="op-uc-table--cell"><s>light: base-color-coral-0</s> <s>dark: - </s> <s>hight contrast: -</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>RVC body background </s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"> </td><td class="op-uc-table--cell"><s>op-restricted-muted</s></td><td class="op-uc-table--cell"><s>base-color-orange-0</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>RVC border</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><s>--borderColor-default</s></td><td class="op-uc-table--cell"><s>op-restricted-border</s></td><td class="op-uc-table--cell"><s>base-color-orange-0 at 40%</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"><s>RDV text</s></td><td class="op-uc-table--cell"><s>--fgColor-default</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><s>Scheduling</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><s>Date picker</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>Current date background</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><s>--label-yellow-bgColor-active</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"><s>Non-working days</s></td><td class="op-uc-table--cell"><s>--bgColor-disabled</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>Selection: start/end date background</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><s>--bgColor-accent-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>Selection: in-between dates background</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><s>(re-evaluate, we might be able to use existing values)</s></td><td class="op-uc-table--cell"><s>op-date-range</s></td><td class="op-uc-table--cell"><s>base-color-blue-0</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"> </td><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"> </td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><s>Selection: start/end date background (disabled)</s></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><s>(re-evaluate, we might be able to use existing values)</s></td><td class="op-uc-table--cell"><s>op-date-range-ends</s></td><td class="op-uc-table--cell"><s>base-color-neutral-8</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"> </td><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"> </td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><s>Selection: in-between dates background (disabled)</s></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><s>(re-evaluate, we might be able to use existing values)</s></td><td class="op-uc-table--cell"><s>op-date-range-disabled</s></td><td class="op-uc-table--cell"><s>base-color-neutral-5</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>Active field (not focus) border</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><s>--button-outline-bgColor-active</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>"Closest" label</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--fgColor-neutral</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>"Inactive" label</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--fgColor-neutral</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><s>Notifications</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"> </td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><s>Notification center</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><s>Unread badge</s></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><s>update</s></td><td class="op-uc-table--cell"><s>op-unread</s></td><td class="op-uc-table--cell"><s>base-color-blue-5</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><s>Top navigation</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Red unread badge</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--display-red-bgColor-emphasis</s></td><td class="op-uc-table--cell"><s>op-notification</s></td><td class="op-uc-table--cell"><s>base-color-red-4</s></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><s>Projects</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><s>Statuses</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:25.676%;"><s>On track</s></td><td class="op-uc-table--cell" style="width:17.5098%;"><s> --bgColor-success-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>At risk</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--bgColor-severe-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Off track</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--bgColor-danger-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Not started</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--bgColor-neutral-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Finished</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--bgColor-done-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"> </td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><s>Discontinued</s></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><s>--bgColor-attention-emphasis</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:120px;"><s>Enterprise plans</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:120px;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:17.5098%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"> </td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:25.676%;"><s>Community</s></td><td class="op-uc-table--cell" style="width:17.5098%;"><s>-</s></td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:25.676%;"><s>Basic BG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><s>--bgColor-severe-muted</s></td><td class="op-uc-table--cell"><s>op-basic-bg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"><s>Basic FG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><s>--fgColor-severe</s></td><td class="op-uc-table--cell"><s>ob-basic-fg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:25.676%;"><s>Professional BG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><s>--bgColor-sponsors-muted</s></td><td class="op-uc-table--cell"><s>op-professional-bg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"><s>Professional FB</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><s>--fgColor-sponsors</s></td><td class="op-uc-table--cell"><s>op-professional-fg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:25.676%;"><s>Premium BG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><s>--bgColor-open-muted</s></td><td class="op-uc-table--cell"><s>op-premium-bg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"><s>Premium FG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><s>--fgColor-open</s></td><td class="op-uc-table--cell"><s>op-premium-fg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:120px;"> </td><td class="op-uc-table--cell" style="width:25.676%;"><s>Corporate BG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><s>--bgColor-accent-muted</s></td><td class="op-uc-table--cell"><s>op-corporate-bg?</s></td><td class="op-uc-table--cell"> </td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"> </td><td class="op-uc-table--cell"><s>Corportate FG</s></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><s>--fgColor-accent</s></td><td class="op-uc-table--cell"><s>op-corporate-fg?</s></td><td class="op-uc-table--cell"> </td></tr></tbody></table></figure> 

### ~~**Technical notes**~~

* ~~The colours will need to adapt to different modes (dark, high contrast...) the way Primer's own named colours do~~

### ~~**Out of scope**~~

* ~~Front-end colour picker~~

Back

Content

View differences