From 731a027cbbd3b21c03cee454e0d9967382e8a94c Mon Sep 17 00:00:00 2001 From: Joshua Smithrud <54606601+Josmithr@users.noreply.github.com> Date: Wed, 20 Nov 2024 12:05:10 -0800 Subject: [PATCH] fix(docs): Fix contrast ratio accessibility issues in the site's searchbar (#23154) Fixes insufficient contrast ratio between the searchbar's text and its background. Before and after screenshots below. Note: the difference is significantly more pronounced in light mode. | Scenario | Before | After | | --- | --- | --- | | Light mode (placeholder) | ![light-placeholder-before](https://github.com/user-attachments/assets/79436610-76c0-4428-9073-3998da7a6121)| ![light-placeholder-after](https://github.com/user-attachments/assets/b25a1433-e7a6-47fb-b445-1ee685c4f304) | | Light mode (filled) | ![light-filled-before](https://github.com/user-attachments/assets/e0320909-5ca4-4fbb-b0f7-a2388b0821c5)| ![light-filled-after](https://github.com/user-attachments/assets/19fbde84-191b-4d84-b6c8-ea29a8b0bc64)| | Dark mode (placeholder) | ![dark-placeholder-before](https://github.com/user-attachments/assets/9d3dc8dc-a1a3-4363-a248-ed63c5cbd284)| ![dark-placeholder-after](https://github.com/user-attachments/assets/97db35fc-d5d6-4e5f-89fb-3aba4b524837) | | Dark mode (filled) | ![dark-filled-before](https://github.com/user-attachments/assets/f00c10ae-71e5-4cc9-9025-d4197d007a69)| ![dark-filled-after](https://github.com/user-attachments/assets/0acb8a09-c018-46e8-a1f5-5b56b90f621a)| [AB#22718](https://dev.azure.com/fluidframework/235294da-091d-4c29-84fc-cdfc3d90890b/_workitems/edit/22718) --- docs/src/css/custom.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss index e725ac9d75c..1610023d4b2 100644 --- a/docs/src/css/custom.scss +++ b/docs/src/css/custom.scss @@ -16,6 +16,10 @@ --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + // Search bar + --ifm-navbar-search-input-placeholder-color: dimgray; + --ifm-navbar-search-input-color: black; + // Workaround for --ifm-navbar-search-input-icon: url("@site/static/assets/search-icon-light.svg"); } @@ -31,6 +35,10 @@ --ifm-color-primary-lightest: #3cd3ff; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + // Search bar + --ifm-navbar-search-input-placeholder-color: lightgray; + --ifm-navbar-search-input-color: white; + // Workaround for --ifm-navbar-search-input-icon: url("@site/static/assets/search-icon-dark.svg"); }