Update stoplight css (#4350)

## What are you changing in this pull request and why?
<!---
Describe your changes and why you're making them. If linked to an open
issue or a pull request on dbt Core, then link to them here! 

To learn more about the writing conventions used in the dbt Labs docs,
see the [Content style
guide](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/content-style-guide.md).
-->

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:
<img width="311" alt="Screenshot 2023-10-26 at 5 03 20 PM"
src="https://github.com/dbt-labs/docs.getdbt.com/assets/3207842/8ab7aeb1-3e8c-47fe-bffc-de76ad613ea6">
<img width="301" alt="Screenshot 2023-10-26 at 5 03 14 PM"
src="https://github.com/dbt-labs/docs.getdbt.com/assets/3207842/f64bf116-2016-4715-b3b8-5738e23d15c8">

Updated content fonts / codeblock colors:
<img width="1054" alt="Screenshot 2023-10-26 at 5 03 33 PM"
src="https://github.com/dbt-labs/docs.getdbt.com/assets/3207842/a4246e24-d348-4eb4-b3eb-e5ee8c15bf9b">
<img width="1051" alt="Screenshot 2023-10-26 at 5 03 43 PM"
src="https://github.com/dbt-labs/docs.getdbt.com/assets/3207842/e20c04a9-3de9-4f16-801a-0691bf2e6b41">


## Checklist
<!--
Uncomment if you're publishing docs for a prerelease version of dbt
(delete if not applicable):
- [ ] Add versioning components, as described in [Versioning
Docs](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#versioning-entire-pages)
- [ ] Add a note to the prerelease version [Migration
Guide](https://github.com/dbt-labs/docs.getdbt.com/tree/current/website/docs/guides/migration/versions)
-->
- [x] Review the [Content style
guide](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/content-style-guide.md)
and [About
versioning](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#adding-a-new-version)
so my content adheres to these guidelines.
- [x] Add a checklist item for anything that needs to happen before this
PR is merged, such as "needs technical review" or "change base branch."

website/src/components/stoplight/index.js

@@ -1,17 +1,16 @@
 import { API } from "@stoplight/elements";
 import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+
 export default function Stoplight({ version }) {
   if (!["v1", "v2", "v3", "private"].includes(version)) {
     return null;
   }
+
   return (
     <>
-      <link
-        href="https://unpkg.com/@stoplight/elements/styles.min.css"
-        type="text/css"
-        rel="stylesheet"
-      />
+      <link href="/css/stoplight-base.css" type="text/css" rel="stylesheet" />
+      <link href="/css/stoplight-custom.css" type="text/css" rel="stylesheet" />
       <API
         apiDescriptionUrl={
           "https://raw.githubusercontent.com/dbt-labs/dbt-cloud-openapi-spec/master/openapi-" +

website/static/css/stoplight-custom.css

@@ -0,0 +1,38 @@
+[data-theme="dark"] {
+    --stoplight-pre-background: #ebedf0;
+    --stoplight-pre-color: #333333;
+}
+
+[data-theme="light"] {
+    --stoplight-pre-background: var(--ifm-pre-background);
+    --stoplight-pre-color: var(--ifm-pre-color);
+}
+
+.sl-font-ui, .sl-font-prose, .sl-prose, .sl-button {
+    /* Ensure we use the same font in stoplight docs as in the rest of the docs site */
+    font-family: var(--ifm-font-family-base) !important;
+}
+
+.sl-text-base {
+    /* Bump font size to make up for slightly smaller font family (above) */
+    font-size: 13px !important;
+}
+
+.sl-font-ui {
+    /* Bump font size to make up for slightly smaller font family (above) */
+    font-size: 14px !important;
+
+    & a {
+        /* Ensure link colors aren't overriden by docusaurus css */
+        color: var(--color-text) !important;
+    }
+}
+
+/* Ensure codeblocks are legible when using darkmode */
+.sl-panel__content pre {
+    background-color: var(--stoplight-pre-background) !important;
+
+    & .plain, .sl-code-highlight__ln {
+        color: var(--stoplight-pre-color) !important;
+    }
+}