Update stoplight css

[GideonShils]

What are you changing in this pull request and why?

A few CSS fixes for our stoplight based API docs:

• Use same font as rest of docs site
• Fix codeblock colors so they are legible in dark mode
• Ensure stoplight CSS does not override nav bar fonts / styles

Updated sidepanel fonts:

Updated content fonts / codeblock colors:

Checklist

• Review the Content style guide and About versioning so my content adheres to these guidelines.
• Add a checklist item for anything that needs to happen before this PR is merged, such as "needs technical review" or "change base branch."

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 30, 2023 5:01pm

[runleonarun]

@GideonShils I'm still seeing missing bullet points. For example here:

And missing steps as shown in the quickstarts.

[JKarlavige]

Hey @GideonShils, when the css files are added within the docusaurus config, it will add them to every page throughout the site. For example, I see styles from stoplight-base.css being applied on the homepage.

Most are overridden by custom styles, but it might be difficult to promise styles on all pages are not affected.

Rather than adding them here in the config, would it be possible to add the css files directly in the src/pages/dbt-cloud/api* files to make them only available on those pages?

[GideonShils]

I ended up removing the css files from the docusaurus config and imported them directly in the stoplight component. I kept them as separate stylesheets as opposed to CSS modules so that they would only load on the API docs pages and not on the rest of the site. Tested to ensure:

• New styles do not load on rest of site: headings look correct, bullet points appear as expected
• Styles load on new pages: nav bar has correct font, content has correct custom styles

[JKarlavige]

lgtm! verified stoplight styles being picked up on the api pages, while not being applied to other pages on the site

[runleonarun]

Hey @GideonShils! This looks good to me. I love that the examples are working, I think it's a known issue that the Send API request is still not working, but all fonts and the rest of the site look good.

The one tiny nit I found was the API calls are also hard to read in dark mode. But [perhaps something for another day.