**Context:** We need to use Primer colours for this features so they adapt well to different colour modes. What colours should this be?

#### Proposal

We've discovered that Primer offers a lot more named colours than we thought (via their colour mode files eg. light.sass, dark.sass). We're testing to see if we can use these colours for this feature. After a LOT of testing different options, the best option seems to be the following:

<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"><p class="op-uc-p"><strong>Element</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>Named colour</strong></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Header BG</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">display-brown-bgColor-muted</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Body BG</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">bgColor-default</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Text</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">fgColor-default</code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Border</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><code Begin of the insertionclass="op-uc-code">display-brown-borderColor-emphasis</code></p><p class="op-uc-p"><i><s><strong>Note:End of the insertion Begin of the deletion class="op-uc-code">display-brown-borderColor-muted</code></p><p class="op-uc-p"><i><strong>Note:End of the deletion </strong>We're also testing with Begin of the insertion</s></i><code class="op-uc-code"><s>display-brown-borderColor-emphasis</s></code><s>,End of the insertion Begin of the deletion </i><code class="op-uc-code">display-brown-borderColor-emphasis</code>,End of the deletion but that seems too bold; we need to check with front-end (Henriette) if we can possibly use emphasis with 50% Begin of the insertionopacity.</s></p></td></tr></tbody></table></figure>End of the insertion Begin of the deletion opacity.</p></td></tr></tbody></table></figure>End of the deletion

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/369246/content">

<br>

#### Archive

> * [~~Primer colours~~](https://primer.style/foundations/color/base-scales) ~~to use:~~
>
> * ~~**Background info line:** base-color-orange-1~~
>
> * ~~**Background body**: base-color-orange-0~~
>
> * ~~**Stroke info line**: base-color-orange-1~~
>
> * ~~**Stroke body**: base-color-orange-1~~
>
> * ~~These colours will automatically adjust to dark mode (Primer feature)~~
>
>
> ~~FIGMA:~~ [~~https://www.figma.com/design/w0YoqQ5v0JGNT5NS5NZJZq/Comments-with-restricted-visibility?node-id=3-6110&amp;t=4Cj4fssoj258fqBb-0~~](https://www.figma.com/design/w0YoqQ5v0JGNT5NS5NZJZq/Comments-with-restricted-visibility?node-id=3-6110&t=4Cj4fssoj258fqBb-0)

<br>

~~The colors proposed on this design are not defined by primer currently in the background presets (i.e. bg: primer system argument)~~ [~~https://primer.style/foundations/primitives/color#background~~](https://primer.style/foundations/primitives/color#background) ~~Hence it&#39;s likely we would need to introduce our own following primer. See~~ [~~https://primer.style/foundations/primitives/token-names~~](https://primer.style/foundations/primitives/token-names)

<br>

~~\---~~

~~Henriette: We cannot introduce any new system arguments as they are controlled by Primer, we are okay to use base color variables as the use is localized.~~

~~\--~~

~~**UX Proposal (Parimal):**~~

~~Three options:~~

~~<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/340275/content">~~

<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"><p class="op-uc-p"><s><strong>Colour option</strong></s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s><strong>A</strong></s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s><strong>B</strong></s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s><strong>C</strong></s></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><s>Primer variables</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Info line background: </s><code class="op-uc-code"><s>--data-auburn-color-muted</s></code><br><s>Comment body background: </s><code class="op-uc-code"><s>--bgColor-severe-muted</s></code><br><s>Info/comment body stroke: </s><code class="op-uc-code"><s>--borderColor-attention-emphasis</s></code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Info line background: </s><code class="op-uc-code"><s>--bgColor-severe-muted</s></code><br><s>Comment body background: </s><code class="op-uc-code"><s>none</s></code><br><s>Info/comment body stroke: </s><code class="op-uc-code"><s>--borderColor-attention-emphasis</s></code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Info line background: </s><code class="op-uc-code"><s>---bgColor-inset</s></code><br><s>Comment body background: none</s><br><s>Info/comment body stroke: </s><code class="op-uc-code"><s>--borderColor-attention-emphasis</s></code></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><s>Remarks</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>The comments is easily distinguisable as being different, although the colours are still quite subtle</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>Still quite distinguishable as different, slightly brighter, less-subtle colour on just the info bar. Is it sufficiently different?</s></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><s>This only </s><i><s>only</s></i><s> changes stroke colour, but I had to use a darker/higher-emphasis one else it's too subtle. Without a fill, I don't think it's suficiently distinguisable.</s></p></td></tr></tbody></table></figure>