From dbfe7ca6e61e3a93baabc378f52835af9e53fd38 Mon Sep 17 00:00:00 2001
From: Jessica Boezwinkle <jessica@trbl.design>
Date: Mon, 28 Nov 2022 16:22:13 +0000
Subject: [PATCH] fix: updates syntax colors for light theme

---
 .../forms/field-types/Code/Code.tsx           |   5 +
 .../forms/field-types/Code/index.scss         | 268 ++++++++++++------
 2 files changed, 184 insertions(+), 89 deletions(-)

diff --git a/src/admin/components/forms/field-types/Code/Code.tsx b/src/admin/components/forms/field-types/Code/Code.tsx
index 4e78dac826..9c3445e106 100644
--- a/src/admin/components/forms/field-types/Code/Code.tsx
+++ b/src/admin/components/forms/field-types/Code/Code.tsx
@@ -17,6 +17,7 @@ import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
 import { code } from '../../../../../fields/validations';
 import { Props } from './types';
+import { useTheme } from '../../../utilities/Theme';
 
 import './index.scss';
 
@@ -63,12 +64,16 @@ const Code: React.FC<Props> = (props) => {
     condition,
   });
 
+
+  const { theme } = useTheme();
+
   const classes = [
     'field-type',
     'code',
     className,
     showError && 'error',
     readOnly && 'read-only',
+    theme && theme,
   ].filter(Boolean).join(' ');
 
   return (
diff --git a/src/admin/components/forms/field-types/Code/index.scss b/src/admin/components/forms/field-types/Code/index.scss
index 5eb017d6b5..fe1bfa4a51 100644
--- a/src/admin/components/forms/field-types/Code/index.scss
+++ b/src/admin/components/forms/field-types/Code/index.scss
@@ -47,105 +47,16 @@ pre[class*="language-"] {
   border-radius: 0.3em;
 }
 
-:not(pre)>code[class*="language-"],
-pre[class*="language-"] {
-  background: var(--theme-base-100);
-}
-
 /* Inline code */
 :not(pre)>code[class*="language-"] {
   padding: 0.1em;
   border-radius: 0.3em;
 }
 
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #7c7c7c;
-}
-
-.token.punctuation {
-  color: #c5c8c6;
-}
-
 .namespace {
   opacity: 0.7;
 }
 
-.token.property,
-.token.keyword,
-.token.tag {
-  color: #96cbfe;
-}
-
-.token.class-name {
-  color: #ffffb6;
-  text-decoration: underline;
-}
-
-.token.boolean,
-.token.constant {
-  color: #99cc99;
-}
-
-.token.symbol,
-.token.deleted {
-  color: #f92672;
-}
-
-.token.number {
-  color: #ff73fd;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #a8ff60;
-}
-
-.token.variable {
-  color: #c6c5fe;
-}
-
-.token.operator {
-  color: #ededed;
-}
-
-.token.entity {
-  color: #ffffb6;
-  cursor: help;
-}
-
-.token.url {
-  color: #96cbfe;
-}
-
-.language-css .token.string,
-.style .token.string {
-  color: #87c38a;
-}
-
-.token.atrule,
-.token.attr-value {
-  color: #f9ee98;
-}
-
-.token.function {
-  color: #dad085;
-}
-
-.token.regex {
-  color: #e9c062;
-}
-
-.token.important {
-  color: #fd971f;
-}
-
 .token.important,
 .token.bold {
   font-weight: bold;
@@ -154,3 +65,182 @@ pre[class*="language-"] {
 .token.italic {
   font-style: italic;
 }
+
+.dark {
+
+  :not(pre)>code[class*="language-"],
+  pre[class*="language-"] {
+    background: var(--theme-base-100);
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7c7c7c;
+  }
+
+  .token.punctuation {
+    color: #c5c8c6;
+  }
+
+  .token.property,
+  .token.keyword,
+  .token.tag {
+    color: #96cbfe;
+  }
+
+  .token.class-name {
+    color: #ffffb6;
+    text-decoration: underline;
+  }
+
+  .token.boolean,
+  .token.constant {
+    color: #99cc99;
+  }
+
+  .token.symbol,
+  .token.deleted {
+    color: #f92672;
+  }
+
+  .token.number {
+    color: #ff73fd;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a8ff60;
+  }
+
+  .token.variable {
+    color: #c6c5fe;
+  }
+
+  .token.operator {
+    color: #ededed;
+  }
+
+  .token.entity {
+    color: #ffffb6;
+    cursor: help;
+  }
+
+  .token.url {
+    color: #96cbfe;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #87c38a;
+  }
+
+  .token.atrule,
+  .token.attr-value {
+    color: #f9ee98;
+  }
+
+  .token.function {
+    color: #dad085;
+  }
+
+  .token.regex {
+    color: #e9c062;
+  }
+
+  .token.important {
+    color: #fd971f;
+  }
+}
+
+.light {
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #666666;
+  }
+
+  .token.punctuation {
+    color: #797979;
+  }
+
+  .token.property,
+  .token.keyword,
+  .token.tag {
+    color: #0167c5;
+  }
+
+  .token.class-name {
+    color: #b2ac00;
+    text-decoration: underline;
+  }
+
+  .token.boolean,
+  .token.constant {
+    color: #008600;
+  }
+
+  .token.symbol,
+  .token.deleted {
+    color: #ab003f;
+  }
+
+  .token.number {
+    color: #970195;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #418c03;
+  }
+
+  .token.variable {
+    color: #4643e3;
+  }
+
+  .token.operator {
+    color: #3c3c3c;
+  }
+
+  .token.entity {
+    color: #b2ac00;
+    cursor: help;
+  }
+
+  .token.url {
+    color: #0084ff;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #386b3a;
+  }
+
+  .token.atrule,
+  .token.attr-value {
+    color: #b5a108;
+  }
+
+  .token.function {
+    color: #8c1aea;
+  }
+
+  .token.regex {
+    color: #e5a205;
+  }
+
+  .token.important {
+    color: #ac0900;
+  }
+}