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:
Родитель
6330f4a687
Коммит
731a027cbb
|
@ -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");
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче