search

algolia / docsearch

:blue_book: The easiest way to add search to your documentation.
https://docsearch.algolia.com
MIT License
4.03k stars 390 forks source link

Infima styling usage #992

Closed Ehesp closed 3 years ago

Ehesp commented 3 years ago

I've just taken a look at the React component (https://github.com/algolia/docsearch/tree/next/packages/docsearch-react) and had a go implementing it.

When the styles are imported, I noticed some CSS variables used are ones such as --ifm-color-emphasis-800. After digging around, I found this to be from https://facebookincubator.github.io/infima/

Those CSS variables aren't available in my project (nor do I plan on using Infima - is there anyway to remove the usage of them? Right now I've pretty much copied the CSS over and provided my own styling variables.

I'd imagine this would become more and more of an issue as v3 is rolled out for more users. That or an alternative stylesheet which other variables which users can provide themselves.

Cheers!

Shipow commented 3 years ago

hi @Ehesp, yes it's made to be customizable, you can copy the set of variables from docsearch.css and remap it to your will. That's what we are doing for Docusaurus and Infima. Let us know if you think it's a good approach.

Haroenv commented 3 years ago

Note that the ifm variables are used in the website (https://github.com/algolia/docsearch/blob/df3e0e1e602195c549bd7694520decf0998f9076/packages%2Fwebsite%2Fsrc%2Fcss%2Fcustom.css), not in the main docsearch css itself

Ehesp commented 3 years ago

Thanks for the replies. The CSS I looked at was the compiled code within node_modules, and saw the usages of ifm variables, I assumed they were required.

I'll do some more playing around as I didn't spend long on it.

Ehesp commented 3 years ago

Cool - understand it now. Thanks!