refactor folder

2024-04-16 17:18:51 -04:00
parent 213c6e4576
commit a838241ac3
749 changed files with 6 additions and 6 deletions
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -0,0 +1,146 @@
+"use client"
+
+import Editor, { OnMount } from "@monaco-editor/react"
+import monaco from "monaco-editor"
+import { useRef, useState } from "react"
+import theme from "./theme.json"
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import { Button } from "../ui/button"
+import {
+  ChevronLeft,
+  ChevronRight,
+  RotateCcw,
+  RotateCw,
+  Terminal,
+  TerminalSquare,
+  X,
+} from "lucide-react"
+import Tab from "../ui/tab"
+import Sidebar from "./sidebar"
+
+export default function CodeEditor() {
+  const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
+  const [code, setCode] = useState([
+    {
+      language: "css",
+      name: "style.css",
+      value: `body { background-color: #282c34; color: white; }`,
+    },
+    {
+      language: "html",
+      name: "index.html",
+      value: `<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Hello, world!</h1>
+  <script src="script.js"></script>
+</body>
+</html>`,
+    },
+    {
+      language: "javascript",
+      name: "script.js",
+      value: `console.log("Hello, world!")`,
+    },
+  ])
+
+  const handleEditorMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor
+
+    // import("monaco-themes/themes/Blackboard.json").then((data) => {
+    //   monaco.editor.defineTheme(
+    //     "Blackboard",
+    //     data as monaco.editor.IStandaloneThemeData
+    //   )
+    // })
+    // monaco.editor.setTheme("Blackboard")
+  }
+
+  return (
+    <>
+      <Sidebar />
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel
+          className="p-2 flex flex-col"
+          maxSize={75}
+          minSize={30}
+          defaultSize={60}
+        >
+          <div className="h-10 w-full flex gap-2">
+            <Tab>index.html</Tab>
+            <Tab>style.css</Tab>
+          </div>
+          <div className="grow w-full overflow-hidden rounded-md">
+            <Editor
+              height="100%"
+              defaultLanguage="typescript"
+              onMount={handleEditorMount}
+              options={{
+                minimap: {
+                  enabled: false,
+                },
+                padding: {
+                  bottom: 4,
+                  top: 4,
+                },
+                scrollBeyondLastLine: false,
+              }}
+              theme="vs-dark"
+            />
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={40}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel
+              defaultSize={50}
+              minSize={20}
+              className="p-2 flex flex-col"
+            >
+              <div className="h-10 select-none w-full flex gap-2">
+                <div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
+                  Preview
+                  <div className="flex space-x-1 translate-x-1">
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+                      <TerminalSquare className="w-4 h-4" />
+                    </div>
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+                      <ChevronLeft className="w-4 h-4" />
+                    </div>
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+                      <ChevronRight className="w-4 h-4" />
+                    </div>
+                    <div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+                      <RotateCw className="w-3 h-3" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="w-full grow rounded-md bg-foreground"></div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+              defaultSize={50}
+              minSize={20}
+              className="p-2 flex flex-col"
+            >
+              <div className="h-10 w-full flex gap-2">
+                <Tab>Node</Tab>
+                <Tab>Console</Tab>
+              </div>
+              <div className="w-full grow rounded-md bg-secondary"></div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </>
+  )
+}
--- a/frontend/components/editor/navbar/index.tsx
+++ b/frontend/components/editor/navbar/index.tsx
@ -0,0 +1,33 @@
+import Image from "next/image"
+import Logo from "@/assets/logo.svg"
+import { Pencil } from "lucide-react"
+import { UserButton } from "@clerk/nextjs"
+import Link from "next/link"
+import { dark } from "@clerk/themes"
+
+export default function Navbar() {
+  return (
+    <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
+      <div className="flex items-center space-x-4">
+        <Link
+          href="/"
+          className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
+        >
+          <Image src={Logo} alt="Logo" width={36} height={36} />
+        </Link>
+        <div className="text-sm font-medium flex items-center">
+          My React Project{" "}
+          <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
+            <Pencil className="w-4 h-4" />
+          </div>
+        </div>
+      </div>
+      <UserButton
+        appearance={{
+          baseTheme: dark,
+        }}
+        afterSignOutUrl="/"
+      />
+    </div>
+  )
+}
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/frontend/components/editor/sidebar/file.tsx
@ -0,0 +1,20 @@
+"use client"
+
+import Image from "next/image"
+import { getIconForFile } from "vscode-icons-js"
+import { TFile } from "./types"
+
+export default function SidebarFile({ data }: { data: TFile }) {
+  return (
+    <div className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer">
+      <Image
+        src={`/icons/${getIconForFile(data.name)}`}
+        alt="File Icon"
+        width={18}
+        height={18}
+        className="mr-2"
+      />
+      {data.name}
+    </div>
+  )
+}
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/frontend/components/editor/sidebar/folder.tsx
@ -0,0 +1,46 @@
+"use client"
+
+import Image from "next/image"
+import { useState } from "react"
+import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
+import { TFolder } from "./types"
+import SidebarFile from "./file"
+
+export default function SidebarFolder({ data }: { data: TFolder }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const folder = isOpen
+    ? getIconForOpenFolder(data.name)
+    : getIconForFolder(data.name)
+
+  return (
+    <>
+      <div
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer"
+      >
+        <Image
+          src={`/icons/${folder}`}
+          alt="Folder icon"
+          width={18}
+          height={18}
+          className="mr-2"
+        />
+        {data.name}
+      </div>
+      {isOpen ? (
+        <div className="flex w-full items-stretch">
+          <div className="w-[1px] bg-border mx-2 h-full"></div>
+          <div className="flex flex-col grow">
+            {data.children.map((child) =>
+              child.type === "file" ? (
+                <SidebarFile key={child.id} data={child} />
+              ) : (
+                <SidebarFolder key={child.id} data={child} />
+              )
+            )}
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@ -0,0 +1,95 @@
+import { FilePlus, FolderPlus, Search } from "lucide-react"
+import SidebarFile from "./file"
+import SidebarFolder from "./folder"
+import { TFile, TFolder } from "./types"
+
+const data: (TFile | TFolder)[] = [
+  {
+    id: "index.tsx",
+    type: "file",
+    name: "index.tsx",
+  },
+  {
+    id: "components",
+    type: "folder",
+    name: "components",
+    children: [
+      {
+        id: "navbar.tsx",
+        type: "file",
+        name: "navbar.tsx",
+      },
+      {
+        id: "ui",
+        type: "folder",
+        name: "ui",
+        children: [
+          {
+            id: "Button.tsx",
+            type: "file",
+            name: "Button.tsx",
+          },
+          {
+            id: "Input.tsx",
+            type: "file",
+            name: "Input.tsx",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "App.tsx",
+    type: "file",
+    name: "App.tsx",
+  },
+  {
+    id: "styles",
+    type: "folder",
+    name: "styles",
+    children: [
+      {
+        id: "style.css",
+        type: "file",
+        name: "style.css",
+      },
+      {
+        id: "index.css",
+        type: "file",
+        name: "index.css",
+      },
+    ],
+  },
+]
+
+export default function Sidebar() {
+  return (
+    <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
+      <div className="flex w-full items-center justify-between h-8 mb-1 ">
+        <div className="text-muted-foreground">EXPLORER</div>
+        <div className="flex space-x-1">
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <FilePlus className="w-4 h-4" />
+          </div>
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <FolderPlus className="w-4 h-4" />
+          </div>
+          <div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
+            <Search className="w-4 h-4" />
+          </div>
+        </div>
+      </div>
+      <div className="w-full mt-1 flex flex-col">
+        {/* <SidebarFile name="index.tsx" />
+        <SidebarFolder name="styles" /> */}
+        {data.map((child) =>
+          child.type === "file" ? (
+            <SidebarFile key={child.id} data={child} />
+          ) : (
+            <SidebarFolder key={child.id} data={child} />
+          )
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/components/editor/sidebar/types.ts
+++ b/frontend/components/editor/sidebar/types.ts
@ -0,0 +1,12 @@
+export type TFolder = {
+  id: string
+  type: "folder"
+  name: string
+  children: (TFile | TFolder)[]
+}
+
+export type TFile = {
+  id: string
+  type: "file"
+  name: string
+}
--- a/frontend/components/editor/theme.json
+++ b/frontend/components/editor/theme.json
@ -0,0 +1,697 @@
+{
+  "inherit": true,
+  "base": "vs-dark",
+  "colors": {
+    "editor.background": "101010",
+    "editor.foreground": "FFFFFF",
+    "editor.selectionBackground": "FFFFFF25",
+    "editor.selectionHighlightBackground": "FFFFFF25",
+    "editorLineNumber.foreground": "505050",
+    "editorWidget.background": "101010",
+    "editorWarning.foreground": "FFC799",
+    "editorError.foreground": "FF8080",
+    "editorOverviewRuler.border": "101010",
+    "editorGutter.addedBackground": "99FFE4",
+    "editorGutter.deletedBackground": "FF8080",
+    "editorGutter.modifiedBackground": "FFC799",
+    "diffEditor.insertedTextBackground": "99FFE440",
+    "diffEditor.insertedLineBackground": "99FFE440",
+    "diffEditor.removedTextBackground": "FF808040",
+    "diffEditor.removedLineBackground": "FF808040",
+    "sideBar.background": "101010",
+    "sideBarTitle.foreground": "A0A0A0",
+    "sideBarSectionHeader.foreground": "A0A0A0",
+    "sideBarSectionHeader.background": "101010",
+    "activityBar.background": "101010",
+    "activityBar.foreground": "A0A0A0",
+    "activityBarBadge.background": "FFC799",
+    "activityBarBadge.foreground": "000",
+    "titleBar.activeBackground": "101010",
+    "titleBar.inactiveBackground": "101010",
+    "titleBar.activeForeground": "7E7E7E",
+    "titleBar.inactiveForeground": "707070",
+    "tab.activeBorderTop": "FFC799",
+    "statusBar.debuggingForeground": "FFFFFF",
+    "statusBar.debuggingBackground": "FF7300",
+    "statusBar.background": "101010",
+    "statusBar.foreground": "A0A0A0",
+    "statusBarItem.remoteBackground": "FFC799",
+    "statusBarItem.remoteForeground": "000",
+    "list.activeSelectionForeground": "FFC799",
+    "list.inactiveSelectionBackground": "232323",
+    "badge.background": "FFC799",
+    "badge.foreground": "000",
+    "button.background": "FFC799",
+    "button.hoverBackground": "FFCFA8",
+    "button.foreground": "000",
+    "focusBorder": "FFC799",
+    "icon.foreground": "A0A0A0",
+    "input.background": "1C1C1C",
+    "list.activeSelectionBackground": "232323",
+    "list.hoverBackground": "282828",
+    "list.errorForeground": "FF8080",
+    "list.highlightForeground": "FFC799",
+    "selection.background": "666",
+    "editorBracketHighlight.foreground1": "A0A0A0",
+    "editorBracketHighlight.foreground2": "A0A0A0",
+    "editorBracketHighlight.foreground3": "A0A0A0",
+    "editorBracketHighlight.foreground4": "A0A0A0",
+    "editorBracketHighlight.foreground5": "A0A0A0",
+    "editorBracketHighlight.foreground6": "A0A0A0",
+    "editorBracketHighlight.unexpectedBracket.foreground": "FF8080",
+    "textLink.foreground": "FFC799",
+    "textLink.activeForeground": "FFCFA8",
+    "editorHoverWidget.background": "161616",
+    "editorHoverWidget.border": "282828",
+    "scrollbarSlider.background": "34343480",
+    "scrollbarSlider.hoverBackground": "343434",
+    "gitDecoration.addedResourceForeground": "99FFE4",
+    "gitDecoration.untrackedResourceForeground": "99FFE4",
+    "gitDecoration.modifiedResourceForeground": "FFC799",
+    "gitDecoration.deletedResourceForeground": "FF8080",
+    "gitDecoration.ignoredResourceForeground": "595959",
+    "gitDecoration.conflictingResourceForeground": "FF8080",
+    "gitDecoration.submoduleResourceForeground": "A0A0A0",
+    "settings.modifiedItemIndicator": "FFC799",
+    "terminal.ansiBlack": "101010",
+    "terminal.ansiBlue": "FFC799",
+    "terminal.ansiBrightBlack": "101010",
+    "terminal.ansiBrightBlue": "FFC799",
+    "terminal.ansiBrightCyan": "99FFE4",
+    "terminal.ansiBrightGreen": "99FFE4",
+    "terminal.ansiBrightMagenta": "FBADFF",
+    "terminal.ansiBrightRed": "FF8080",
+    "terminal.ansiBrightWhite": "f8f8f2",
+    "terminal.ansiBrightYellow": "FFC799",
+    "terminal.ansiCyan": "99FFE4",
+    "terminal.ansiGreen": "99FFE4",
+    "terminal.ansiMagenta": "FBADFF",
+    "terminal.ansiRed": "FF8080",
+    "terminal.ansiWhite": "e3e3dd",
+    "terminal.ansiYellow": "FFC799",
+    "terminal.background": "101010",
+    "editorGroup.border": "FFC799",
+    "editorGroupHeader.tabsBackground": "101010",
+    "tab.inactiveBackground": "1C1C1C",
+    "tab.border": "1C1C1C"
+  },
+  "rules": [
+    {
+      "foreground": "595959",
+      "token": "comment"
+    },
+    {
+      "foreground": "595959",
+      "token": "punctuation.definition.comment"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "string constant.other.placeholder"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "constant.other.color"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "invalid"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "storage.modifier"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.control"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "constant.other.color"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.separator.inheritance.php"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.definition.tag.html"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.definition.tag.begin.html"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.definition.tag.end.html"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.section.embedded"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.template"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.rust"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.fn.rust"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.substitution"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "storage.type"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.import.java"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "storage.modifier.import.java"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "meta.tag.sgml"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.deleted.git_gutter"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.name.function"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "variable.function"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.function"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "keyword.other.special-method"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.block variable.other"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "support.other.variable"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "string.other.link"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.numeric"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.character"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.escape"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "keyword.other.unit"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "keyword.other"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.language.boolean"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "string"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "constant.other.symbol"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "constant.other.key"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "keyword.other.fn.rust"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.name"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.type"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.class"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.other.namespace.use.php"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "meta.use.php"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.other.namespace.php"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.changed.git_gutter"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.type.sys-types"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.css support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.sass support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.scss support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.less support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.stylus support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.postcss support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.postcss support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "support.type.vendored.property-name.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.css.scss entity.name.tag"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.parameter.keyframe-list.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-name.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.parameter.url.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-value.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-value.css"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "entity.name.module.js"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "variable.import.parameter.js"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "variable.other.class.js"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "variable.other.constant"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.method.js"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.class-method.js entity.name.function.js"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.function.constructor"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.other.attribute-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-list.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.attribute-selector.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-value.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.other.keyframe-offset.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.selector.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.tag.reference.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.tag.nesting.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "punctuation.separator.key-value.css"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "text.html.basic entity.other.attribute-name.html"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "text.html.basic entity.other.attribute-name"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.other.attribute-name.class"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.other.attribute-name.id"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "meta.attribute-selector.scss"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "variable.parameter.misc.css"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "source.sass keyword.control"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "meta.attribute-selector.scss"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "markup.inserted"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "string.regexp"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "constant.character.escape"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "*url*"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "*link*"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "*uri*"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "tag.decorator.js entity.name.tag.js"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "tag.decorator.js punctuation.definition.tag.js"
+    },
+    {
+      "fontStyle": "italic",
+      "foreground": "FF8080",
+      "token": "source.js constant.other.object.key.js string.unquoted.label.js"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "text.html.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "punctuation.definition.list_item.markdown"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "text.html.markdown markup.inline.raw.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markdown.heading"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.heading | markup.heading entity.name"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.heading.markdown punctuation.definition.heading.markdown"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.inserted.git_gutter"
+    },
+    {
+      "fontStyle": "italic",
+      "foreground": "FFFFFF",
+      "token": "markup.italic"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold string"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold markup.italic"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.italic markup.bold"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.quote markup.bold"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold markup.italic string"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.italic markup.bold string"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.quote markup.bold string"
+    },
+    {
+      "fontStyle": "underline",
+      "foreground": "FFC799",
+      "token": "markup.underline"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "markup.quote punctuation.definition.blockquote.markdown"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "markup.quote"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "string.other.link.title.markdown"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "string.other.link.description.title.markdown"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.other.reference.link.markdown"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "markup.raw.block"
+    },
+    {
+      "foreground": "00000050",
+      "token": "markup.raw.block.fenced.markdown"
+    },
+    {
+      "foreground": "00000050",
+      "token": "punctuation.definition.fenced.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "markup.raw.block.fenced.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.language.fenced.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "punctuation.section.class.end"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.language.fenced.markdown"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "65737E",
+      "token": "meta.separator"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "markup.table"
+    }
+  ],
+  "encodedTokensColors": []
+}