[Docs] `buildkite-agent annotate` is missing CSS colours

Features Requests
1

Reading the docs for buildkite-agent annotate, we indicate that we support styling from Basscss v8.

There is a code block with “An exhaustive list of classes that annotations support can be found below” (which as an aside is awesome, thank you!).

However, I don’t see the CSS colour classes in there.

Looking at the Buildkite docs, we link to the v7 docs for Colors, but the other links i.e. Flexbox are for v8.

It appears that in Basscss v8, the support for colours was moved to an external addon, which doesn’t appear to be used by Buildkite.

Within my testing, I was able to validate that only .black, .gray, .blue, .green, .orange and .red appear to work.

For reference:

A dark-mode screenshot, indicating that only a subset of the CSS classes for colours work
A light-mode screenshot, indicating that only a subset of the CSS classes for colours work

Tested via the following code being piped into buildkite-agent annotate:

<h3 class="center">
  <span class="black">.black</span>
  <span class="gray">.gray</span>
  <span class="silver">.silver</span>
  <span class="white">.white</span>
  <span class="aqua">.aqua</span>
  <span class="blue">.blue</span>
  <span class="navy">.navy</span>
  <span class="teal">.teal</span>
  <span class="green">.green</span>
  <span class="olive">.olive</span>
  <span class="lime">.lime</span>
  <span class="yellow">.yellow</span>
  <span class="orange">.orange</span>
  <span class="red">.red</span>
  <span class="fuchsia">.fuchsia</span>
  <span class="purple">.purple</span>
  <span class="maroon">.maroon</span>
  <span class="color-inherit">.color-inherit</span>
</h3>

Further investigating of the CSS on Buildkite shows that we have the following colours available:

/* Use this suite of color utilities to directly style elements. */

.black          { color: #111111 }

.gray           { color: #DDDDDD }

.mid-gray       { color: #BBBBBB }

.dark-gray      { color: #767676 }

.very-dark-gray { color: #444 }

.silver         { color: #F9FAFB }

.white          { color: #FFFFFF }

.aqua       { color: #7FDBFF }

.blue       { color: #337ab7 }

.navy       { color: #001F3F }

.teal       { color: #39CCCC }

.green      { color: #2ECC40 }

.olive      { color: #3D9970 }

.lime       { color: #14CC80 }

.dark-lime  { color: #00BB64 }

.yellow    { color: #FFDC00 }

.orange    { color: #FFBA11 }

.light-red { color: #D0A9A7 }

.red       { color: #EB130F }

.dark-red  { color: #a94442 }

.fuchsia   { color: #F012BE }

.purple    { color: #4B19D5 }

.maroon    { color: #85144B }

.denim     { color: #202632 }

.dark-denim { color: #151921 }

.color-inherit { color: inherit }

Would it be possible to tweak the docs accordingly, to indicate we’re using a separate set of colour classes? :pray:t3:

Looks related to Support all Basscss colors in annotation

2

Hello, @jamietanna-elastic! Thank you so much for pointing this out. We will address this by updating the Docs.