jbms / sphinx-immaterial

Adaptation of the popular mkdocs-material material design theme to the sphinx documentation system
https://jbms.github.io/sphinx-immaterial/
Other
196 stars 29 forks source link

Signature linkable parameter colors #135

Closed mhostetter closed 2 years ago

mhostetter commented 2 years ago

I noticed that when linkable parameters were added (which are 🔥), they are now colored like normal hyperlinks var(--md-typeset-a-color). I find that in python-apigen entity summaries or on an entity page, the hyperlink color (blue for me) is a bit much. I personally prefer the original color var(--md-default-fg-color--light).

I'm willing to create a custom CSS rule to change my project only. However, the CSS classes between the linkable parameters and the linkable function/class name in the entity summary seem identical. So there's no way to change the parameters' colors without also changing the function/class color too, if that makes sense. They both yield this selector.

.md-typeset .sig-inline a.reference.sig-name,
.md-typeset .sig-inline a.reference:not(.desctype)>.n,
.md-typeset .sig-inline a.reference>.sig-name,
.md-typeset :is(dl.objdesc,dl.api-field)>dt a.reference.sig-name,
.md-typeset :is(dl.objdesc,dl.api-field)>dt a.reference:not(.desctype)>.n,
.md-typeset :is(dl.objdesc,dl.api-field)>dt a.reference>.sig-name

If you all agree with my color preference, perhaps we could just change it. If not, can we add a CSS class to the linkable parameters so I can select on it in custom CSS? (PS I've been looking through the code and trying different things, but haven't been successful yet.)

Current

image

image

Desired

Note, I created these images by making the documented parameter names mismatch the signature so they wouldn't hyperlink.

image

image

2bndy5 commented 2 years ago

If you only want to change the non-hovered color:

/* revert param name color */
.sig-param a.reference span .pre {
  color: var(--md-code-hl-generic-color);
}

/* show hyperlink color on hover */
.sig-param a.reference span .pre:hover {
  color: var(--md-typeset-a-color);
}
2bndy5 commented 2 years ago

You would greatly benefit from a crash course in CSS. SASS/SCSS (which is the src of compiled CSS) is built on top of CSS, but can be marginally different...

I kinda like the appearance of hyperlinks in the signature, and the hover/non-hover colors correspond to the configured primary/accent colors. Reverting the hyperlink color would seem to hide this great theme-specific feature.

jbms commented 2 years ago

I did originally try to style the parameter names with a lower-contrast appearance for exactly the reason @mhostetter described, but that was indeed somewhat accidentally lost when adding the parameter cross linking. But I also agree that it is a bit unfortunate not to have a way to distinguish hyperlinked things (e.g. parameters and types) from non-hyperlinked things, without having to hover. Traditionally that was indicated with an underline, but that doesn't necessarily fit so well with this theme. Additionally, as you refine the documentation for a project, eventually more and more things may end up being hyperlinked, to the point that basically every parameter and type is hyperlinked, and it is no longer very helpful to distinguish hyperlinked and non-hyperlinked things in signatures.

mhostetter commented 2 years ago

@2bndy5 thank you for the solution. I can confirm it works for me.

You would greatly benefit from a crash course in CSS. SASS/SCSS (which is the src of compiled CSS) is built on top of CSS, but can be marginally different...

I agree that I would. I admittedly don't know it.

Reverting the hyperlink color would seem to hide this great theme-specific feature.

Additionally, as you refine the documentation for a project, eventually more and more things may end up being hyperlinked, to the point that basically every paracetamol parameter and type is hyperlinked, and it is no longer very helpful to distinguish hyperlinked and non-hyperlinked things in signatures.

Regarding the debate on coloring, my personal thoughts are similar to what @jbms expressed, but I understand this is personal preference. I don't mind what you chose for the project defaults -- I'm perfectly happy adding the custom CSS @2bndy5 provided to my project.

I'm happy to close this issue. Feel free to re-open if you'd like to track anything here for future changes.