From 79d0c85220079a38b482c2e6e0e1fa7fe8355764 Mon Sep 17 00:00:00 2001
From: Aral Roca <aral-rg@hotmail.com>
Date: Tue, 1 Oct 2024 00:09:40 +0200
Subject: [PATCH 1/2] feat: add playground styles

---
 packages/www/src/pages/playground/index.tsx | 13 +++--
 packages/www/src/styles/playground.css      | 62 +++++++++++++++++++++
 2 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 packages/www/src/styles/playground.css

diff --git a/packages/www/src/pages/playground/index.tsx b/packages/www/src/pages/playground/index.tsx
index 4771098ea..43766c65c 100644
--- a/packages/www/src/pages/playground/index.tsx
+++ b/packages/www/src/pages/playground/index.tsx
@@ -1,6 +1,8 @@
-import { dangerHTML } from 'brisa';
+import { dangerHTML as esm } from 'brisa';
 import getMonacoEditorExtraLibs from '@/helpers/monaco-extra-libs';
 
+import '@/styles/playground.css';
+
 const defaultValue = `// src/web-components/wc-counter.tsx
 import type { WebContext } from 'brisa';
 
@@ -22,6 +24,7 @@ export default function Playground() {
       <play-ground skipSSR defaultValue={defaultValue}>
         <div
           slot="code-editor"
+          class="editor"
           style={{
             height: '100%',
             width: '100%',
@@ -30,7 +33,7 @@ export default function Playground() {
           id="code-editor"
         >
           <script type="module">
-            {dangerHTML(`
+            {esm(`
               import * as monaco from 'https://esm.sh/monaco-editor';
               import tsWorker from 'https://esm.sh/monaco-editor/esm/vs/language/typescript/ts.worker?worker';
               import { MonacoJsxSyntaxHighlight, getWorker } from 'https://esm.sh/monaco-jsx-syntax-highlight'
@@ -47,7 +50,6 @@ export default function Playground() {
               const existingModel = monaco.editor.getModels().find(m => m.uri.toString() === modelUri.toString());
               const codeModel = existingModel ?? monaco.editor.createModel(\`${defaultValue}\`, "typescript", modelUri);
 
-
               monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                 jsx: monaco.languages.typescript.JsxEmit.Preserve,
                 target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -73,8 +75,9 @@ export default function Playground() {
               const { highlighter } = monacoJsxSyntaxHighlight.highlighterBuilder({
                 editor,
                 filePath: modelUri?.toString() ?? modelUri?.path,
-              })
-              highlighter()
+              });
+
+              highlighter();
 
               editor.setModel(codeModel);
 
diff --git a/packages/www/src/styles/playground.css b/packages/www/src/styles/playground.css
new file mode 100644
index 000000000..fbf49d98c
--- /dev/null
+++ b/packages/www/src/styles/playground.css
@@ -0,0 +1,62 @@
+/* Base styles */
+.jsx-expression-braces,
+.bracket-highlighting-0,
+.bracket-highlighting-4 {
+  color: #000000;
+}
+
+/* Dark mode styles */
+body.dark .jsx-expression-braces,
+body.dark .bracket-highlighting-0,
+body.dark .bracket-highlighting-4 {
+  color: #A89984 !important;
+}
+
+.bracket-highlighting-1,
+.bracket-highlighting-3 {
+  color: #000000;
+}
+
+/* Dark mode styles */
+body.dark .bracket-highlighting-1,
+body.dark .bracket-highlighting-3 {
+  color: #EBDBB2 !important;
+}
+
+.jsx-tag-angle-bracket {
+  color: #000000;
+}
+
+/* Dark mode styles */
+body.dark .jsx-tag-angle-bracket {
+  color: #83A598 !important;
+}
+
+.jsx-tag-name {
+  color: #22863a;
+}
+
+/* Dark mode styles */
+body.dark .jsx-tag-name {
+  color: #8EC07C !important;
+}
+
+.jsx-tag-attribute-key,
+.jsx-expression-braces + :not(.jsx-tag-angle-bracket):not(.bracket-highlighting-3) {
+  color: #6f42c1;
+}
+
+/* Dark mode styles */
+body.dark .jsx-tag-attribute-key,
+body.dark .jsx-expression-braces + :not(.jsx-tag-angle-bracket):not(.bracket-highlighting-3) {
+  color: #FABD2F !important;
+}
+
+.jsx-text {
+  color: #000000;
+}
+
+/* Dark mode styles */
+body.dark .jsx-text {
+  color: #EBDBB2 !important;
+}

From 8862218cf604d1460514fd9884d7f90345e9345f Mon Sep 17 00:00:00 2001
From: Aral Roca <aral-rg@hotmail.com>
Date: Tue, 1 Oct 2024 00:22:19 +0200
Subject: [PATCH 2/2] fix: fix light mode

---
 packages/www/src/styles/playground.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/www/src/styles/playground.css b/packages/www/src/styles/playground.css
index fbf49d98c..3b8077c79 100644
--- a/packages/www/src/styles/playground.css
+++ b/packages/www/src/styles/playground.css
@@ -14,7 +14,7 @@ body.dark .bracket-highlighting-4 {
 
 .bracket-highlighting-1,
 .bracket-highlighting-3 {
-  color: #000000;
+  color: #A89984;
 }
 
 /* Dark mode styles */
@@ -24,7 +24,7 @@ body.dark .bracket-highlighting-3 {
 }
 
 .jsx-tag-angle-bracket {
-  color: #000000;
+  color: #694003 !important;
 }
 
 /* Dark mode styles */
@@ -33,7 +33,7 @@ body.dark .jsx-tag-angle-bracket {
 }
 
 .jsx-tag-name {
-  color: #22863a;
+  color: #22863a !important;
 }
 
 /* Dark mode styles */
@@ -43,7 +43,7 @@ body.dark .jsx-tag-name {
 
 .jsx-tag-attribute-key,
 .jsx-expression-braces + :not(.jsx-tag-angle-bracket):not(.bracket-highlighting-3) {
-  color: #6f42c1;
+  color: #6f42c1 !important;
 }
 
 /* Dark mode styles */
@@ -53,7 +53,7 @@ body.dark .jsx-expression-braces + :not(.jsx-tag-angle-bracket):not(.bracket-hig
 }
 
 .jsx-text {
-  color: #000000;
+  color: #951616 !important;
 }
 
 /* Dark mode styles */