This branch was auto-updated!

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