Tinybird theme

app/(navigation)/(code)/components/Editor.module.css

@@ -158,3 +158,8 @@
   font-family: var(--font-soehne-mono), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", monospace;
   font-weight: 400;
 }
+
+.iaWriterMono {
+  font-family: var(--font-ia-writer-mono), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", monospace;
+  font-weight: 400;
+}

app/(navigation)/(code)/components/Editor.tsx

@@ -250,7 +250,9 @@ function Editor() {
               ? styles.firaCode
               : themeFont === "soehne-mono"
                 ? styles.soehneMono
-                : styles.jetBrainsMono,
+                : themeFont === "ia-writer-mono"
+                  ? styles.iaWriterMono
+                  : styles.jetBrainsMono,
         isHighlightingLines && styles.isHighlightingLines,
         showLineNumbers &&
           selectedLanguage !== LANGUAGES.plaintext && [

app/(navigation)/(code)/components/Frame.module.css

@@ -913,3 +913,129 @@
     display: none;
   }
 }
+
+.tinybirdFrame {
+  position: relative;
+  overflow: hidden;
+  background: #151515;
+  font-family: var(--font-ia-writer-mono);
+}
+
+.tinybirdWindow {
+  position: relative;
+  z-index: 1;
+  border: 1px solid #c2c2c2;
+  border-bottom: none;
+  background: #151515;
+  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
+}
+
+.tinybirdWindow {
+  mask-image: linear-gradient(to bottom, #151515 70%, transparent 100%);
+}
+
+.tinybirdWindow::after {
+  position: absolute;
+  z-index: 100;
+  top: -4px;
+  right: -28px;
+  width: 59px;
+  height: 5px;
+  background: #c2c2c2;
+  content: "";
+  transform: rotate(45deg);
+  transform-origin: left;
+}
+
+.tinybirdHeader {
+  position: relative;
+  display: flex;
+  height: 32px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 12px;
+  background: #151515;
+  gap: 8px;
+}
+
+.tinybirdHeader::before {
+  position: absolute;
+  right: -2px;
+  bottom: 0px;
+  left: 0px;
+  height: 1px;
+  background-image: linear-gradient(to right, transparent 0%, #27f795 10%, #27f795 100%);
+  content: "";
+  mask-image: linear-gradient(to left, transparent 50%, #151515 99%, #151515 100%);
+}
+
+.tinybirdCircle {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #c2c2c2;
+  border-radius: 50%;
+  margin-right: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.tinybirdCircleText {
+  color: #27f795;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tinybirdFileName {
+  position: relative;
+  display: grid;
+  align-items: center;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+
+  > input {
+    color: rgba(0, 0, 0, 0);
+  }
+
+  > input:focus + span {
+    display: block;
+  }
+}
+
+.tinybirdFrameLightMode {
+  background: #ffffff;
+
+  .tinybirdWindow {
+    background: #ffffff;
+  }
+
+  .tinybirdHeader {
+    background: #ffffff;
+  }
+
+  .tinybirdCircleText {
+    color: #151515;
+  }
+
+  .tinybirdFileName {
+    color: #151515;
+  }
+
+  .tinybirdHeader::before {
+    background-image: none;
+  }
+
+  .tinybirdWindow {
+    border: 1px solid #151515;
+  }
+
+  .tinybirdWindow::after {
+    background: #151515;
+  }
+
+  .tinybirdHeader::before {
+    background-image: linear-gradient(to right, transparent 0%, #151515 10%, #151515 100%);
+    mask-image: linear-gradient(to left, transparent 50%, #151515 99%, #151515 100%);
+  }
+}

app/(navigation)/(code)/components/Frame.tsx

@@ -254,6 +254,45 @@ const OpenAIFrame = () => {
   );
 };
 
+const TinybirdFrame = () => {
+  const [darkMode] = useAtom(darkModeAtom);
+  const [padding] = useAtom(paddingAtom);
+  const [showBackground] = useAtom(showBackgroundAtom);
+  const [fileName, setFileName] = useAtom(fileNameAtom);
+
+  return (
+    <div
+      className={classNames(
+        styles.frame,
+        showBackground && styles.tinybirdFrame,
+        !darkMode && styles.tinybirdFrameLightMode,
+        !showBackground && styles.noBackground,
+      )}
+      style={{ padding }}
+    >
+      {!showBackground && <div data-ignore-in-export className={styles.transparentPattern}></div>}
+      <div className={styles.tinybirdWindow}>
+        <div className={styles.tinybirdHeader}>
+          <div className={styles.tinybirdCircleText}>tb {">"}</div>
+          <div className={classNames(styles.fileName, styles.tinybirdFileName)} data-value={fileName}>
+            <input
+              type="text"
+              value={fileName}
+              onChange={(event) => setFileName(event.target.value)}
+              spellCheck={false}
+              tabIndex={-1}
+              size={1}
+            />
+            <span>{fileName || "Untitled-1"}</span>
+          </div>
+        </div>
+        <Editor />
+        <div className={styles.tinybirdWindowBorder} />
+      </div>
+    </div>
+  );
+};
+
 const DefaultFrame = () => {
   const [padding] = useAtom(paddingAtom);
   const isSafari = useIsSafari();
@@ -325,6 +364,8 @@ const Frame = ({ resize = true }: { resize?: boolean }) => {
         return <OpenAIFrame />;
       case THEMES.prisma.id:
         return <PrismaFrame />;
+      case THEMES.tinybird.id:
+        return <TinybirdFrame />;
       default:
         return <DefaultFrame />;
     }

app/(navigation)/(code)/store/font.ts

@@ -1,6 +1,13 @@
 import { atomWithHash } from "jotai-location";
 
-export const FONTS = ["jetbrains-mono", "geist-mono", "ibm-plex-mono", "fira-code", "soehne-mono"] as const;
+export const FONTS = [
+  "jetbrains-mono",
+  "geist-mono",
+  "ibm-plex-mono",
+  "fira-code",
+  "soehne-mono",
+  "ia-writer-mono",
+] as const;
 
 export type Font = (typeof FONTS)[number];
 

app/(navigation)/(code)/store/themes.ts

@@ -22,6 +22,8 @@ import MintlifyLogoUrl from "../assets/mintlify.svg?url";
 import { showLineNumbersAtom } from ".";
 import { createCssVariablesTheme } from "../util/theme-css-variables";
 import { BASE_URL } from "@/utils/common";
+import TinybirdLogo from "../assets/tinybird.svg";
+import TinybirdLogoUrl from "../assets/tinybird.svg?url";
 
 export const shikiTheme = createCssVariablesTheme({
   name: "css-variables",
@@ -1007,6 +1009,53 @@ export const THEMES: { [index: string]: Theme } = {
       }),
     },
   },
+  tinybird: {
+    id: "tinybird",
+    name: "Tinybird",
+    background: {
+      from: "#27F795",
+      to: "#27F795",
+    },
+    icon: TinybirdLogo,
+    iconUrl: `${BASE_URL}${TinybirdLogoUrl.src}`,
+    partner: true,
+    lineNumbers: false,
+    font: "ia-writer-mono",
+    syntax: {
+      light: convertToShikiTheme({
+        foreground: "#151515",
+        constant: "#151515",
+        string: "#151515",
+        comment: "#151515",
+        keyword: "#151515",
+        parameter: "#151515",
+        function: "#151515",
+        stringExpression: "#151515",
+        punctuation: "#151515",
+        link: "#151515",
+        number: "#151515",
+        property: "#151515",
+        highlight: "rgba(0, 0, 0, 0.05)",
+        highlightHover: "rgba(0, 0, 0, 0.1)",
+      }),
+      dark: convertToShikiTheme({
+        foreground: "#FFFFFF",
+        constant: "#FFFFFF",
+        string: "#FFFFFF",
+        comment: "#A5A7B4",
+        keyword: "#27F795",
+        parameter: "#A5A7B4",
+        function: "#27F795",
+        stringExpression: "#A5A7B4",
+        punctuation: "#FFFFFF",
+        link: "#A5A7B4",
+        number: "#A5A7B4",
+        property: "#FFFFFF",
+        highlight: "rgba(0, 0, 0, 0.05)",
+        highlightHover: "rgba(0, 0, 0, 0.1)",
+      }),
+    },
+  },
 };
 
 const themeAtom = atomWithHash<Theme>(

app/(navigation)/layout.tsx

@@ -22,6 +22,10 @@ const soehneMono = localFont({
   src: "../assets/soehne-mono-buch.woff2",
   variable: "--font-soehne-mono",
 });
+const writerMono = localFont({
+  src: "../assets/iAWriterMonoS-Regular.woff2",
+  variable: "--font-ia-writer-mono",
+});
 
 /**
  * We can't adjust the fallback stack of the font so instead we just extract the
@@ -33,7 +37,14 @@ const geistMonoFontName = GeistMono.style.fontFamily.split(",")[0];
 export default function NavigationLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
-      className={cn("h-full", jetBrainsMono.variable, ibmPlexMono.variable, firaCode.variable, soehneMono.variable)}
+      className={cn(
+        "h-full",
+        jetBrainsMono.variable,
+        ibmPlexMono.variable,
+        firaCode.variable,
+        soehneMono.variable,
+        writerMono.variable,
+      )}
       style={
         {
           "--font-geist-mono": geistMonoFontName,