Add placeholder material theme

apps/web/app/page.tsx

@@ -14,6 +14,7 @@ import {
 import Canvas from "@ui/components/canvas";
 import IconLabel from "@ui/components/icon-label";
 import NextJsIcon from "@ui/icons/nextjs";
+import material from "@ui/themes/codeblocks/material";
 import clsx from "clsx";
 import { GitBranchIcon, GithubIcon } from "lucide-react";
 import { useState } from "react";
@@ -82,16 +83,20 @@ export default function IndexPage() {
                   <iframe className="h-full w-full" srcDoc={standaloneCode} />
                 </TabsContent>
                 <TabsContent value="code_standalone" className="h-full">
-                  <CopyBlock
-                    codeBlock
-                    text={standaloneCode}
-                    language="html"
-                    theme={nord}
-                    showLineNumbers
-                    customStyle={{
-                      fontFamily: "var(--font-mono)",
-                    }}
-                  />
+                  {standaloneCode?.length && (
+                    <CopyBlock
+                      codeBlock
+                      text={standaloneCode}
+                      language="html"
+                      theme={material}
+                      showLineNumbers
+                      customStyle={{
+                        fontFamily: "var(--font-mono)",
+                        overflowY: "auto",
+                        height: "100%",
+                      }}
+                    />
+                  )}
                 </TabsContent>
               </>
             )}

packages/ui/src/index.tsx

@@ -1,3 +1,4 @@
 export * from "./components";
 export * from "./lib";
-export * from "./icons";
+export * from "./icons";
+export * from "./themes";

packages/ui/src/themes/codeblocks/material/index.ts

@@ -0,0 +1,41 @@
+import MaterialTheme from "./vsc-material"
+
+const { scheme: theme } = MaterialTheme
+// Check out https://github.com/material-theme/vsc-material-theme/blob/main/scripts/generator/color-set.ts
+
+export default {
+  lineNumberColor: theme.lineNumbers,
+  lineNumberBgColor: theme.background,
+  backgroundColor: theme.background,
+  textColor: `#FFFFFF`,
+  substringColor: `#D8DEE9`,
+  keywordColor: `#81A1C1`,
+  attributeColor: `#D8DEE9`,
+  selectorAttributeColor: `#81A1C1`,
+  docTagColor: `#8FBCBB`,
+  nameColor: `#81A1C1`,
+  builtInColor: `#8FBCBB`,
+  literalColor: `#81A1C1`,
+  bulletColor: `#81A1C1`,
+  codeColor: `#8FBCBB`,
+  additionColor: `#a3be8c`,
+  regexpColor: `#EBCB8B`,
+  symbolColor: `#81A1C1`,
+  variableColor: `#D8DEE9`,
+  templateVariableColor: `#D8DEE9`,
+  linkColor: `#D8DEE9`,
+  selectorClassColor: `#8FBCBB`,
+  typeColor: `#8FBCBB`,
+  stringColor: theme.base.green,
+  selectorIdColor: `#8FBCBB`,
+  quoteColor: `#FFFFFF`,
+  templateTagColor: `#5E81AC`,
+  deletionColor: `#bf616a`,
+  titleColor: `#8FBCBB`,
+  sectionColor: `#88C0D0`,
+  commentColor: `#4C566A`,
+  metaKeywordColor: `#5E81AC`,
+  metaColor: `#5E81AC`,
+  functionColor: `#88C0D0`,
+  numberColor: `#B48EAD`,
+}

packages/ui/src/themes/codeblocks/material/vsc-material.ts

@@ -0,0 +1,54 @@
+/**
+ * Material Theme Darker High Contrast
+ * @url https://github.com/material-theme/vsc-material-theme/blob/main/scripts/generator/settings/specific/darker-hc.ts
+ */
+export default {
+  id: 'material.theme.darker.hc',
+  name: 'Material-Theme-Darker-High-Contrast',
+  type: 'dark',
+  scheme: {
+    defaultAccent: '#80CBC4',
+    background: '#212121',
+    backgroundAlt: '#1a1a1a',
+    contrastBorder: '#444444',
+    sidebarForeground: '#848484',
+    scrollbars: '#EEFFFF20',
+    comments: '#4A4A4A',
+    caret: '#FFCC00',
+    findHighlight: '#FFCC00',
+    foreground: '#EEFFFF',
+    focusBorder: '#FFFFFF',
+    guides: '#424242',
+    lineNumbers: '#424242',
+    invisibles: '#65737E',
+    lineHighlight: '#000000',
+    selection: '#61616150',
+    shadow: '#00000030',
+    inputBackground: '#2B2B2B',
+    inputForeground: '#EEFFFF',
+    inputBorder: '#FFFFFF10',
+    scrollbarsHover: '#EEFFFF10',
+    statusbarForeground: '#616161',
+    listHoverForeground: '#FFFFFF',
+    tabActiveForeground: '#FFFFFF',
+    inactiveSelectionBackground: '#00000030',
+    findMatchBackground: '#000000',
+    findMatchHighlightBackground: '#00000050',
+    findMatchHighlightBorder: '#ffffff50',
+    base: {
+      white: '#ffffff',
+      black: '#000000',
+      red: '#f07178',
+      orange: '#F78C6C',
+      yellow: '#FFCB6B',
+      green: '#C3E88D',
+      cyan: '#89DDFF',
+      blue: '#82AAFF',
+      paleblue: '#B2CCD6',
+      purple: '#C792EA',
+      brown: '#916b53',
+      pink: '#ff9cac',
+      violet: '#bb80b3'
+    }
+  }
+};

packages/ui/src/themes/index.ts

@@ -0,0 +1 @@
+export * from "./codeblocks/material";