Content
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.
**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.
**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?
* Where to put it? Primer repo or core?
* We introduce a new file op-primer-colours with our named colours, mapped to base colours.
* Pass CSS variables?
* Semantic:
* "open" vs. "op-meeting-status-op" is semantic vs. functional?
* 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? Add `op-`.
* `op-role-state` eg. `op-restricted-emphasis`
* We have a parallel system for user-defined hex colours (for work pacakge status and types etc) that adapt to modes. We'll need a different feature for linking "created colours" (user) to named semantic colours later. It's out of scope for this.
* How do we handle dark mode for example?
* _\[open\] Do we keep our custom method for adapting colours (eg. status colours with borders using different opacity) or do we use Primer's own modes?_
* We'll probably have to maintain both systems.
* \[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)
### **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" op-uc-figure" style="height:1535.83px;width:100%;"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:120px;"><p class="op-uc-p">Page/Module</p></td><td class="op-uc-table--cell" class="op-uc-p">Page/Module</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:120px;"><p class="op-uc-p">Object</p></td><td class="op-uc-table--cell" class="op-uc-p">Object</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><p class="op-uc-p">State / Specifics</p></td><td class="op-uc-table--cell" Specifics</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><p class="op-uc-p">Existing Primer colour</p></td><td class="op-uc-table--cell" colour</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:25.676%;"><p class="op-uc-p">Names semantic colour</p></td><td class="op-uc-table--cell" colour</p></th><th class="op-uc-table--cell op-uc-table--cell_head" style="background-color:hsl(0, 0%, 90%);height:95.9896px;width:17.5098%;"><p class="op-uc-p">Base colour</p></td></tr><tr colour</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:120px;"><p class="op-uc-p"><strong>Meetings</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:120px;"><p class="op-uc-p"><strong>Meeting status</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Open</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-status-open</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-green-5</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">In progress</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-status-inprogress</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-yellow-5</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Closed</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-status-closed</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-colour-neutral-8</p></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;"><p class="op-uc-p"><strong>Activity tab</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:120px;"><p class="op-uc-p"><strong>Restricted visibility comments</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:71.9922px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC header background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-restricted-muted</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-coral-0</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC body background </p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-restricted-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-orange-0</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">RVC border</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">--borderColor-default</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">RDV text</p></td><td class="op-uc-table--cell"><p class="op-uc-p">--fgColor-default</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></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;"><p class="op-uc-p"><strong>Scheduling</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><p class="op-uc-p"><strong>Date picker</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Current date background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-today</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-yellow-0</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Non-working days</p></td><td class="op-uc-table--cell"><p class="op-uc-p">--bgColor-disabled</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Selection: start/end date background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">--bgColor-accent-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Selection: in-between dates background</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-date-range</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-blue-0</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Selection: start/end date background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-date-range-ends</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-neutral-8</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:71.9922px;width:25.676%;"><p class="op-uc-p">Selection: in-between dates background (disabled)</p></td><td class="op-uc-table--cell" style="height:71.9922px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-date-range-disabled</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-neutral-5</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Active field (not focus) border</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p">--button-outline-bgColor-active</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">"Closest" label</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--fgColor-neutral</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">"Inactive" label</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--fgColor-neutral</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></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;"><p class="op-uc-p"><strong>Notifications</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p">Notification center</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p">Unread badge</p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-unread</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-blue-5</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p">Top navigation</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Red unread badge</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">op-notification</p></td><td class="op-uc-table--cell"><p class="op-uc-p">base-color-red-4</p></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;"><p class="op-uc-p"><strong>Projects</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><p class="op-uc-p"><strong>Statuses</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">On track</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p"> --bgColor-success-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">At risk</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--bgColor-severe-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Off track</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--bgColor-danger-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Not started</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--bgColor-neutral-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Finished</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--bgColor-done-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p">Discontinued</p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p">--bgColor-attention-emphasis</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:120px;"><p class="op-uc-p"><strong>Enterprise plans</strong></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Community</p></td><td class="op-uc-table--cell" style="width:17.5098%;"><p class="op-uc-p">-</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Basic BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-severe-muted</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Basic FG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-severe</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Professional BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-sponsors-muted</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Professional FB</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-sponsors</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Premium BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-open-muted</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Premium FG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-open</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:25.676%;"><p class="op-uc-p">Corporate BG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );width:17.5098%;"><p class="op-uc-p">--bgColor-accent-muted</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Corportate FG</p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 100%, 91% );"><p class="op-uc-p">--fgColor-accent</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr></tbody></table></figure><br> class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);width:120px;"><p class="op-uc-p"><s><strong>Project lifecycle</strong></s></p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);width:120px;"><p class="op-uc-p"><s><strong>PM2 phases and gates</strong></s></p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(0, 0%, 90%);width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Initiating</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>PM2 Orange</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Planning</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>PM2 Dark orange</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Executing</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>PM2 Pink</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Closing</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>PM2 Green</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Gates</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>PM2 Purple</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></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;"><p class="op-uc-p"><s><strong>Work packages</strong></s></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:120px;"><p class="op-uc-p"><s><strong>Default types</strong></s></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Task</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Navy blue</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Milestone</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Green</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Phase</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Orange</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Feature</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Ocean blue</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Epic</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Purple</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>User story</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Sky blue</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Bug</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><s>Red</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></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;"><p class="op-uc-p"><s><strong>Work packages</strong></s></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:120px;"><p class="op-uc-p"><s><strong>Default statuses</strong></s></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:25.676%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl( 0, 0%, 92% );height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>New</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>In progress</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Merged</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:25.676%;"><p class="op-uc-p"><s>Closed</s></p></td><td class="op-uc-table--cell" style="height:23.9974px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:120px;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:25.676%;"><p class="op-uc-p"><s>... (how many are seeded?)</s></p></td><td class="op-uc-table--cell" style="height:47.9948px;width:17.5098%;"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></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
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.
**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.
**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?
* Where to put it? Primer repo or core?
* We introduce a new file op-primer-colours with our named colours, mapped to base colours.
* Pass CSS variables?
* Semantic:
* "open" vs. "op-meeting-status-op" is semantic vs. functional?
* 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? Add `op-`.
* `op-role-state` eg. `op-restricted-emphasis`
* We have a parallel system for user-defined hex colours (for work pacakge status and types etc) that adapt to modes. We'll need a different feature for linking "created colours" (user) to named semantic colours later. It's out of scope for this.
* How do we handle dark mode for example?
* _\[open\] Do we keep our custom method for adapting colours (eg. status colours with borders using different opacity) or do we use Primer's own modes?_
* We'll probably have to maintain both systems.
* \[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)
### **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"
### **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