Closed thomasheartman closed 2 years ago
sradu
commented
2 years ago +1 was just looking into this yesterday and couldn't style the ApiDemoPanel at all. I would also like to tweak the object schemas.
In general would be great to have classes for everything that we could target via css.
sserrata
commented
2 years ago We've had internal discussions on this and agree that everything under ApiItem and ApiDemoPanel should have an appropriate class selector.
Also, we are open to suggestions on how to improve consistency and contrast for the method badges/pills.
sserrata
commented
2 years ago Hi @thomasheartman, here's a few things to note/consider:
The method badge style/color is derived from the Infima badge class and the supported modifiers, e.g. badge--success, badge--danger, etc. That said, those colors are in turn based on the built in Imfima color variables, including --ifm-color-success, --ifm-color-primary, etc.
Since the sidebar method badge colors are defined entirely in custom.css, it's possible you might be specifying colors outside of the --ifm-color-* variables or the --openapi-code-* colors.
Here's how the badge modifiers map to color variables:
function colorForMethod(method: string) {
switch (method.toLowerCase()) {
case "get":
return "primary";
case "post":
return "success";
case "delete":
return "danger";
case "put":
return "info";
case "patch":
return "warning";
case "head":
return "secondary";
default:
return undefined;
}
}Here's how the --openapi-code-* colors map to Infima variables:
:root {
--openapi-required: var(--ifm-color-danger);
--openapi-code-blue: var(--ifm-color-info);
--openapi-code-red: var(--ifm-color-danger);
--openapi-code-orange: var(--ifm-color-warning);
--openapi-code-green: var(--ifm-color-success);
}Can you share your custom.css you're using to style the sidebar method badges?
thomasheartman
commented
2 years ago @sserrata Thanks for the response and glad to hear you've decided to add more class selectors 😄
Yeah, I figured you did something like that for the colors. For our sake, the "primary" color wasn't really suitable as the "get" method, so we changed the color scheme a bit to keep it more in line with what Swagger UI does.
Can you share your custom.css you're using to style the sidebar method badges?
Absolutely! It's based on your code that you provided as an example to one of the other issues here, but with a few tweaks.
In short, it usus this bit of CSS for geeral styling:
.api-method > .menu__link::before {
width: 50px;
height: 20px;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
font-weight: 600;
border-radius: 0.25rem;
border: 1px solid;
border-inline-start-width: 5px;
margin-right: var(--ifm-spacing-horizontal);
text-align: center;
flex-shrink: 0;
}and then something like this for the different types:
.get > .menu__link::before {
content: 'get';
background-color: var(--ifm-color-info-contrast-background);
color: var(--ifm-color-info-contrast-foreground);
border-color: var(--ifm-color-info-dark);
}We decided to use the --ifm-color-(info|warning|danger|success|secondary)-* colors instead of the OpenAPI colors provided by this package because it matched what we wanted better. It also made it easy to copy the color schemes of docusaurus' admonitions, which already have enough contrast. The current version looks like this:
Dark mode:
Light mode:
sserrata
commented
2 years ago Thanks @thomasheartman, I think these styles definitely add more contrast and consistency. Right now we're focused on other priorities but we will definitely revisit refining our class selectors after we get through a few critical projects.
homotechsual
commented
2 years ago @thomasheartman would you be prepared to share the full CSS for that - looks very nice.
thomasheartman
commented
2 years ago Thanks! 😁 The only css we have that affects those badges is what I shared (check the inside of the details block). I don’t think there is anything else working on those bits, but that full custom.css file can be found here: https://github.com/Unleash/unleash/blob/794c70606f880105857e6aef8feb96307a7c1265/website/src/css/custom.css.
Edit: Replaced branch-based link with permalink.
Thomas Heartman (he/him)
On 9 Sep 2022, at 16:54, homotechsual @.***> wrote:
@thomasheartman would you be prepared to share the full CSS for that - looks very nice.
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.
IanVS
commented
1 year ago Was there any solution to styling the badges next to the path above the demo panel? I still don't see any classes that can be targeted, though this is marked as completed.
Edit: Never mind, I see I can use the --openapi-code-X Infima variables.
Is your feature request related to a problem?
The generated pages include operation buttons/pills next to the path. These seem to be rendered as normal docusaurus badges:
There's two issues:
The operation pills on the page don't seem to have a distinct class or anything that I can reach into for easy styling purposes.
Describe the solution you'd like
I'd like to be able to style the pills that appear next to the path, so that we can keep a consistent visual theme going and to ensure that operations use the same colors.
What strikes me as the easiest solution would be to use a similar class naming scheme as you use for the sidebar, adding a class name that matches the operation. Maybe simply adding the operation type to the pill class?
Describe alternatives you've considered
I tried looking for some other classes that distinguish the openapi pages from others, but couldn't find any. In theory, we could rewrite all badges to use the color scheme that we use for API operations, but that might impact something else (though I'm not sure we use any badges anywhere today).
Additional context
I think all context is described above, but I'd be happy to add anything else if you're wondering about anything 😄