Use brand colors in components

[katjuell]

What should this PR do?

Resolves DEVED-91 by bringing our color palette more in line with what's described in our brand guidelines.

In general, buttons and markdown links roll up to blurple, while Sourcegraph dark gray is used for things like footer social icons (following precedent set by the about site) and table of contents links. Hover behavior has been added to buttons and links where it made sense (see screenshots below).

Why are we making this change?

It will be good to standardize on our color palette across our web properties.

What are the acceptance criteria?

• The style changes make sense and look okay.

How should this PR be tested?

• Check out the branch and take a look at the new styles (screenshots below).

Pull request process

Reviewers:

1. Test functionality using the criteria above.
2. Offer tips for efficiency, feedback on best practices, and possible alternative approaches and things that may not have been considered.
3. For shorter, "quick" PRs, use your best judgement on #​2.
4. Use a collaborative approach and provide resources and/or context where appropriate.
5. Provide screenshots/grabs where appropriate to show findings during review.

Reviewees:

1. Prefer incremental and appropriately-scoped changes.
2. Leave a comment on things you want explicit feedback on.
3. Respond clearly to comments and questions.

[netlify]

✔️ Deploy Preview for sourcegraph-learn ready!

🔨 Explore the source changes: 0b58537

🔍 Inspect the deploy log: https://app.netlify.com/sites/sourcegraph-learn/deploys/611318415bf76400077e230f

😎 Browse the preview: https://deploy-preview-157--sourcegraph-learn.netlify.app

[katjuell]

Table of contents (hover shown):

Tag buttons (hover shown):

Footer icons (hover shown):

Collection view:

[ltagliaferri]

Great idea to do this, I also ingested the brand guide setting up the dev.to/sourcegraph page 😄 The blurple buttons are looking 🔥

[katjuell]

Yay! One thing worth noting here, that we can circle back to — the footer column headers/contents contrast ratio was not passing a11y muster, but I didn't want to make that change, since we are going for the same look as about right now. I am sure that we will come back to the footer at some point, though, so making a note here for the future.

[ltagliaferri]

Maybe worth raising an issue on the about site?