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)
This commit is contained in:
Joshua Smithrud 2024-11-20 12:05:10 -08:00 коммит произвёл GitHub
Родитель 6330f4a687
Коммит 731a027cbb
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
1 изменённых файлов: 8 добавлений и 0 удалений

Просмотреть файл

@ -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 <https://github.com/easyops-cn/docusaurus-search-local/issues/336>
--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 <https://github.com/easyops-cn/docusaurus-search-local/issues/336>
--ifm-navbar-search-input-icon: url("@site/static/assets/search-icon-dark.svg");
}