Fixup API docs styling

website/docusaurus.config.js

@@ -266,7 +266,9 @@ var siteSettings = {
     "/css/fonts.css",
     "/css/entypo.css",
     "/css/search.css",
-    "/css/api.css",
+    "/css/redoc.css",
+    "/css/stoplight-base.css",
+    "/css/stoplight-custom.css",
     "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600;700&display=swap",
     "https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap",
     {

website/src/components/stoplight/index.js

@@ -6,22 +6,15 @@ export default function Stoplight({ version }) {
     return null;
   }
   return (
-    <>
-      <link
-        href="https://unpkg.com/@stoplight/elements/styles.min.css"
-        type="text/css"
-        rel="stylesheet"
-      />
-      <API
-        apiDescriptionUrl={
-          "https://raw.githubusercontent.com/dbt-labs/dbt-cloud-openapi-spec/master/openapi-" +
-          version +
-          ".yaml"
-        }
-        platformUrl={useBaseUrl("/")}
-        basePath={useBaseUrl("/dbt-cloud/api-" + version) + "#"}
-        hideSchemas
-      />
-    </>
+    <API
+      apiDescriptionUrl={
+        "https://raw.githubusercontent.com/dbt-labs/dbt-cloud-openapi-spec/master/openapi-" +
+        version +
+        ".yaml"
+      }
+      platformUrl={useBaseUrl("/")}
+      basePath={useBaseUrl("/dbt-cloud/api-" + version) + "#"}
+      hideSchemas
+    />
   );
 }

website/static/css/api.css → website/static/css/redoc.css

@@ -5,5 +5,4 @@ div.redoc-json code  span.token {
 
 div.redoc-json code {
     background-color: #11171b;
-
 }

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;
+    }
+}