Skip to content

Commit 5280482

Browse files
harish-sethuramanharish-sethuraman
authored
feat: use playground themes (#63)
1 parent 24d7786 commit 5280482

14 files changed

+259
-31
lines changed

‎package-lock.json

Lines changed: 5 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@
3434
"@codemirror/lang-javascript": "^6.2.2",
3535
"@codemirror/lang-json": "^6.0.1",
3636
"@codemirror/lang-markdown": "^6.2.5",
37+
"@codemirror/language": "^6.10.3",
3738
"@eslint/js": "^9.9.0",
3839
"@eslint/json": "^0.4.1",
3940
"@eslint/markdown": "^6.1.1",
41+
"@lezer/highlight": "^1.2.1",
4042
"@radix-ui/react-accordion": "^1.2.0",
4143
"@radix-ui/react-dialog": "^1.1.1",
4244
"@radix-ui/react-dropdown-menu": "^2.1.1",

‎src/App.css

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "./codemirror-themes.css";
12
@tailwind base;
23
@tailwind components;
34
@tailwind utilities;
@@ -41,18 +42,16 @@
4142
--scrollbar-track: 0deg 0% 93.33%;
4243
--scrollbar-thumb: 0deg 0% 53.33%;
4344
--scrollbar-thumb-hover: 0deg 0% 33.33%;
44-
45-
--editor-background: 0deg 0% 100%;
4645
}
4746

4847
.dark {
49-
--background: 224 71.4% 4.1%;
48+
--background: 220deg 42.86% 10.98%;
5049
--foreground: 210 20% 98%;
5150

52-
--card: 224 71.4% 4.1%;
51+
--card: 216.36deg 24.44% 26.47%;
5352
--card-foreground: 210 20% 98%;
5453

55-
--popover: 224 71.4% 4.1%;
54+
--popover: 220deg 42.86% 10.98%;
5655
--popover-foreground: 210 20% 98%;
5756

5857
--primary: 240 100% 86%;
@@ -61,7 +60,7 @@
6160
--secondary: 215 27.9% 16.9%;
6261
--secondary-foreground: 210 20% 98%;
6362

64-
--muted: 215 27.9% 16.9%;
63+
--muted: 214.29deg 32.56% 16.86%;
6564
--muted-foreground: 217.9 10.6% 64.9%;
6665

6766
--accent: 215 27.9% 16.9%;
@@ -71,7 +70,7 @@
7170
--destructive-foreground: 210 20% 98%;
7271

7372
--border: 215 27.9% 16.9%;
74-
--input: 215 27.9% 16.9%;
73+
--input: 216.36deg 24.44% 26.47%;
7574
--ring: 216 12.2% 83.9%;
7675

7776
--drop-container-bg-color: 0deg 0% 24.71% / 67%;
@@ -80,8 +79,6 @@
8079
--scrollbar-track: 0deg 0% 18.04%;
8180
--scrollbar-thumb: 0deg 0% 53.33%;
8281
--scrollbar-thumb-hover: 0deg 0% 33.33%;
83-
84-
--editor-background: 223.64deg 47.83% 4.51%;
8582
}
8683
}
8784

@@ -109,3 +106,23 @@
109106
outline: none;
110107
}
111108
}
109+
110+
.cm-theme-light {
111+
min-width: 100%;
112+
}
113+
114+
.cm-focused .cm-selectionBackground,
115+
.cm-selectionBackground,
116+
.cm-content ::selection {
117+
background-color: var(--color-primary-800) !important;
118+
}
119+
120+
.cm-completionMatchedText {
121+
text-decoration: none !important;
122+
font-weight: bold;
123+
}
124+
125+
.cm-tooltip.cm-tooltip-autocomplete,
126+
.cm-tooltip.cm-tooltip-autocomplete > ul {
127+
border-radius: 0.125rem;
128+
}

‎src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function App() {
2222
setCode({ ...code, [language]: value });
2323
}}
2424
/>
25-
<div className="bg-foreground/5 overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
25+
<div className="bg-muted overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
2626
<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">
2727
<ToolSelector />
2828
<div className="flex items-center gap-1">

‎src/codemirror-themes.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
:root {
2+
/* theme colors from playground */
3+
--color-neutral-25: #fcfcfd;
4+
--color-neutral-50: #f9fafb;
5+
--color-neutral-100: #f2f4f7;
6+
--color-neutral-200: #e4e7ec;
7+
--color-neutral-300: #d0d5dd;
8+
--color-neutral-400: #98a2b3;
9+
--color-neutral-500: #667085;
10+
--color-neutral-600: #475467;
11+
--color-neutral-700: #344054;
12+
--color-neutral-800: #1d2939;
13+
--color-neutral-900: #101828;
14+
15+
--color-primary-25: #fbfbff;
16+
--color-primary-50: #f6f6fe;
17+
--color-primary-100: #ececfd;
18+
--color-primary-200: #dedeff;
19+
--color-primary-300: #ccccfa;
20+
--color-primary-400: #b7b7ff;
21+
--color-primary-500: #a0a0f5;
22+
--color-primary-600: #8080f2;
23+
--color-primary-700: #6358d4;
24+
--color-primary-800: #4b32c3;
25+
--color-primary-900: #341bab;
26+
27+
--color-warning-25: #fffcf5;
28+
--color-warning-50: #fffaeb;
29+
--color-warning-100: #fef0c7;
30+
--color-warning-200: #fedf89;
31+
--color-warning-300: #fec84b;
32+
--color-warning-400: #fdb022;
33+
--color-warning-500: #f79009;
34+
--color-warning-600: #dc6803;
35+
--color-warning-700: #b54708;
36+
--color-warning-800: #93370d;
37+
--color-warning-900: #7a2e0e;
38+
39+
--color-success-25: #f6fef9;
40+
--color-success-50: #ecfdf3;
41+
--color-success-100: #d1fadf;
42+
--color-success-200: #a6f4c5;
43+
--color-success-300: #6ce9a6;
44+
--color-success-400: #32d583;
45+
--color-success-500: #12b76a;
46+
--color-success-600: #039855;
47+
--color-success-700: #027a48;
48+
--color-success-800: #05603a;
49+
--color-success-900: #054f31;
50+
51+
--color-rose-25: #fff5f6;
52+
--color-rose-50: #fff1f3;
53+
--color-rose-100: #ffe4e8;
54+
--color-rose-200: #fecdd6;
55+
--color-rose-300: #fea3b4;
56+
--color-rose-400: #fd6f8e;
57+
--color-rose-500: #f63d68;
58+
--color-rose-600: #e31b54;
59+
--color-rose-700: #c01048;
60+
--color-rose-800: #a11043;
61+
--color-rose-900: #89123e;
62+
63+
--editor-bracket-no-match-background-color: none;
64+
--editor-bracket-no-match-color: none;
65+
--editor-bracket-no-match-outline-color: var(--color-rose-500);
66+
}
67+
68+
:root,
69+
.light {
70+
--editor-background: 0deg 0% 100%;
71+
72+
--body-text-color: var(--color-neutral-500);
73+
--body-background-color: #fff;
74+
--link-color: var(--color-primary-800);
75+
--headings-color: var(--color-neutral-900);
76+
--editor-string-color: var(--color-warning-800);
77+
--editor-comment-color: var(--color-success-700);
78+
--editor-keyword-color: var(--color-primary-900);
79+
--editor-name-color: var(--color-primary-700);
80+
--editor-bracket-match-outline-color: var(--color-neutral-200);
81+
--editor-bracket-match-background-color: var(--color-neutral-100);
82+
--editor-bracket-match-color: none;
83+
}
84+
85+
.dark {
86+
--body-text-color: var(--color-neutral-300);
87+
--body-background-color: var(--color-neutral-900);
88+
--link-color: var(--color-primary-400);
89+
--headings-color: #fff;
90+
--editor-string-color: var(--color-warning-300);
91+
--editor-comment-color: var(--color-success-500);
92+
--editor-keyword-color: var(--color-primary-500);
93+
--editor-name-color: var(--color-primary-300);
94+
--editor-bracket-match-outline-color: var(--color-neutral-600);
95+
--editor-bracket-match-background-color: var(--color-neutral-700);
96+
--editor-bracket-match-color: var(--color-neutral-25);
97+
}

‎src/components/ast/javascript-ast-tree-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export const JavascriptAstTreeItem: FC<JavascriptAstTreeItemProperties> = ({
2020
}) => (
2121
<AccordionItem
2222
value={`${index}-${data.type}`}
23-
className="border rounded-lg overflow-hidden"
23+
className="border border-card rounded-lg overflow-hidden"
2424
>
25-
<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
25+
<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
2626
{data.type}
2727
</AccordionTrigger>
2828
<AccordionContent className="p-4 border-t">

‎src/components/ast/json-ast-tree-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ export const JsonAstTreeItem: FC<JsonAstTreeItemProperties> = ({
2222
}) => (
2323
<AccordionItem
2424
value={`${index}-${data.type}`}
25-
className="border rounded-lg overflow-hidden"
25+
className="border border-card rounded-lg overflow-hidden"
2626
>
27-
<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
27+
<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
2828
{data.type}
2929
</AccordionTrigger>
3030
<AccordionContent className="p-4 border-t">

‎src/components/ast/markdown-ast-tree-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ export const MarkdownAstTreeItem: FC<MarkdownAstTreeItemProperties> = ({
2222
}) => (
2323
<AccordionItem
2424
value={`${index}-${data.type}`}
25-
className="border rounded-lg overflow-hidden"
25+
className="border border-card rounded-lg overflow-hidden"
2626
>
27-
<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
27+
<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
2828
{data.type}
2929
</AccordionTrigger>
3030
<AccordionContent className="p-4 border-t">

‎src/components/cta.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ExternalLinkIcon } from "lucide-react";
1+
import { ExternalLink } from "lucide-react";
22
import { Button } from "./ui/button";
33
import type { FC } from "react";
44

@@ -11,8 +11,8 @@ export const CallToAction: FC = () => (
1111
rel="noreferrer"
1212
>
1313
<span className="hidden sm:block">GitHub</span>
14-
<span className="sm:hidden">
15-
<ExternalLinkIcon size={16} />
14+
<span className="sm:ml-2">
15+
<ExternalLink size={16} />
1616
</span>
1717
</a>
1818
</Button>

‎src/components/editor.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { useEffect, useRef, useState, FC, useCallback } from "react";
44
import { useExplorer } from "@/hooks/use-explorer";
5-
import { useTheme } from "./theme-provider";
65
import CodeMirror from "@uiw/react-codemirror";
76
import { json } from "@codemirror/lang-json";
87
import { javascript } from "@codemirror/lang-javascript";
@@ -11,7 +10,11 @@ import { EditorView } from "@codemirror/view";
1110
import { EditorState } from "@codemirror/state";
1211
import clsx from "clsx";
1312
import { LanguageSupport } from "@codemirror/language";
14-
import { debounce, getPreferredColorScheme } from "../lib/utils";
13+
import { debounce } from "../lib/utils";
14+
import {
15+
ESLintPlaygroundTheme,
16+
ESLintPlaygroundHighlightStyle,
17+
} from "@/utils/codemirror-themes";
1518

1619
const languageExtensions: Record<string, (isJSX?: boolean) => LanguageSupport> =
1720
{
@@ -27,7 +30,6 @@ type EditorProperties = {
2730
};
2831

2932
export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange }) => {
30-
const { theme } = useTheme();
3133
const { wrap, language, jsOptions } = useExplorer();
3234
const { isJSX } = jsOptions;
3335
const [isDragOver, setIsDragOver] = useState<boolean>(false);
@@ -44,6 +46,8 @@ export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange }) => {
4446
activeLanguageExtension,
4547
wrap ? EditorView.lineWrapping : [],
4648
readOnly ? EditorState.readOnly.of(true) : [],
49+
ESLintPlaygroundTheme,
50+
ESLintPlaygroundHighlightStyle,
4751
];
4852

4953
const debouncedOnChange = useCallback(
@@ -149,7 +153,6 @@ export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange }) => {
149153
value={value}
150154
extensions={editorExtensions}
151155
onChange={value => debouncedOnChange(value)}
152-
theme={theme === "system" ? getPreferredColorScheme() : theme}
153156
readOnly={readOnly}
154157
/>
155158
</div>

0 commit comments

Comments
 (0)