From 80b04a91a0cba738950358485cf12feaba1fa5e0 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:33:45 -0700
Subject: [PATCH] Fix documentation site contrast ratios and link text
 underline in articles (#7020)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 📖 Description

This change modifies some small color updates for the documentation site to meet accessibility compliance with link contrast ratios and text-decoration.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/master/CODE_OF_CONDUCT.md#our-standards) for this project.
---
 sites/website/src/css/custom.css | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/sites/website/src/css/custom.css b/sites/website/src/css/custom.css
index 9346597567e..31158c07c1a 100644
--- a/sites/website/src/css/custom.css
+++ b/sites/website/src/css/custom.css
@@ -171,6 +171,7 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark {
     --base-layer-luminance: 0.09;
     --wrapper-gutter: 20px;
     --wrapper-max-width: 8px;
+    --ifm-link-color: #fb2360;
     background-color: var(--fill-color);
     color: var(--neutral-foreground-rest);
     font-family: var(--body-font);
@@ -305,6 +306,31 @@ li {
     border: 0.1rem solid rgba(255, 255, 255, 0.1);
 }
 
+/**
+ * Color contrast overrides
+ */
+
+article {
+    --ifm-link-decoration: underline;
+}
+
+.navbar__link--active {
+    --ifm-link-color: #ff4ca3;
+}
+
+.menu__link--active,
+.breadcrumbs__link[itemprop="name"] {
+    --ifm-link-color: #ff4088;
+}
+
+a code {
+    --ifm-link-color: #ff5ac4;
+}
+
+html[data-theme="dark"] {
+    --ifm-table-stripe-background: #202021;
+}
+
 @media screen and (min-width: 900px) {
     .frontpage {
         --type-ramp-base-font-size: 14px;