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

**URL:** <https://forum.buildkite.community/t/docs-buildkite-agent-annotate-is-missing-css-colours/4085>\
**Category:** Features Requests\
**Created:** [December 11, 2024, 10:31am UTC](https://forum.buildkite.community/t/docs-buildkite-agent-annotate-is-missing-css-colours/4085 "2024-12-11T10:31:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamietanna-elastic](https://avatars.discourse-cdn.com/v4/letter/j/65b543/32.png) [@jamietanna-elastic](https://forum.buildkite.community/u/jamietanna-elastic)\
**Post date:** [December 11, 2024, 10:31am UTC](https://forum.buildkite.community/t/docs-buildkite-agent-annotate-is-missing-css-colours/4085/1 "2024-12-11T10:31:05Z")

</div>

Reading [the docs](https://buildkite.com/docs/agent/v3/cli-annotate) for `buildkite-agent annotate`, we [indicate that](https://buildkite.com/docs/agent/v3/cli-annotate#supported-css-classes-basscss) 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](https://basscss.com/v7/docs/colors/), but the other links i.e. [Flexbox](http://basscss.com/#basscss-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](https://us1.discourse-cdn.com/flex016/uploads/buildkite1/original/2X/3/33ee2a19500b719f6ce41ca626a690bf75b301d6.png)  
 ![A light-mode screenshot, indicating that only a subset of the CSS classes for colours work](https://us1.discourse-cdn.com/flex016/uploads/buildkite1/original/2X/2/296ffbc666e63540e1d857232bcb2ba2a71f5be9.png)

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

```auto
<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:

```css
/* 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? 🙏🏼

Looks related to [Support all Basscss colors in annotation](https://forum.buildkite.community/t/support-all-basscss-colors-in-annotation/3536)

---

<div class="post-metadata">

**Author:** ![karen.sawrey](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.buildkite.community/karen.sawrey/32/1188_2.png) [@karen.sawrey](https://forum.buildkite.community/u/karen.sawrey)\
**Post date:** [December 11, 2024, 3:45pm UTC](https://forum.buildkite.community/t/docs-buildkite-agent-annotate-is-missing-css-colours/4085/2 "2024-12-11T15:45:32Z")

</div>

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