From 0cf9c1721e66a87c0d09628edd191496311446e5 Mon Sep 17 00:00:00 2001
From: Timur Carpeev <timuric@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:16:47 +0200
Subject: [PATCH] Overwrite variables for GraphQL playground (#3504)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Bartłomiej Wiaduch <tukan2can@gmail.com>
---
 src/components/DevModePanel/DevModePanel.tsx | 15 +++++++++++++++
 src/components/GraphiQL/GraphiQL.tsx         | 13 +++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 6a26d8e53..290526faa 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -1,3 +1,4 @@
+import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
 import { createGraphiQLFetcher } from "@graphiql/toolkit";
 import { Dialog, DialogContent } from "@material-ui/core";
 import { DialogHeader } from "@saleor/macaw-ui";
@@ -26,9 +27,22 @@ export const DevModePanel: React.FC<DevModePanelProps> = ({
   });
 
   const intl = useIntl();
+  const { rootStyle } = useDashboardTheme();
 
   const { devModeContent, variables } = useDevModeContext();
 
+  const overwriteCodeMirrorCSSVariables = {
+    __html: `
+      .graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal{
+        --font-size-hint: ${rootStyle["--font-size-hint"]} !important;
+        --font-size-inline-code: ${rootStyle["--font-size-inline-code"]} !important;
+        --font-size-body: ${rootStyle["--font-size-body"]} !important;
+        --font-size-h4: ${rootStyle["--font-size-h4"]} !important;
+        --font-size-h3: ${rootStyle["--font-size-h3"]} !important;
+        --font-size-h2: ${rootStyle["--font-size-h2"]} !important;
+    `,
+  };
+
   return (
     <Dialog
       maxWidth="xl"
@@ -37,6 +51,7 @@ export const DevModePanel: React.FC<DevModePanelProps> = ({
       style={{ zIndex: 5 }}
       PaperProps={{ style: { height: "100%" } }}
     >
+      <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
       <DialogHeader onClose={() => setDevModeVisibility(false)}>
         {intl.formatMessage(messages.title)}
       </DialogHeader>
diff --git a/src/components/GraphiQL/GraphiQL.tsx b/src/components/GraphiQL/GraphiQL.tsx
index 042d89211..ab40ed4e2 100644
--- a/src/components/GraphiQL/GraphiQL.tsx
+++ b/src/components/GraphiQL/GraphiQL.tsx
@@ -205,12 +205,25 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
     }
   };
 
+  const overwriteCodeMirrorCSSVariables = {
+    __html: `
+      .graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal{
+        --font-size-hint: ${rootStyle["--font-size-hint"]} !important;
+        --font-size-inline-code: ${rootStyle["--font-size-inline-code"]} !important;
+        --font-size-body: ${rootStyle["--font-size-body"]} !important;
+        --font-size-h4: ${rootStyle["--font-size-h4"]} !important;
+        --font-size-h3: ${rootStyle["--font-size-h3"]} !important;
+        --font-size-h2: ${rootStyle["--font-size-h2"]} !important;
+    `,
+  };
+
   return (
     <div
       data-test-id="graphiql-container"
       className="graphiql-container"
       style={rootStyle}
     >
+      <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
       <div className="graphiql-sidebar">
         <div className="graphiql-sidebar-section">
           {pluginContext?.plugins.map(plugin => {