chore: update custom css variables

apps/app/components/tiptap/bubble-menu/index.tsx

@@ -1,16 +1,10 @@
 import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
 import { FC, useState } from "react";
-import {
-  BoldIcon,
-  ItalicIcon,
-  UnderlineIcon,
-  StrikethroughIcon,
-  CodeIcon,
-} from "lucide-react";
+import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
 
 import { NodeSelector } from "./node-selector";
 import { LinkSelector } from "./link-selector";
-import { cn } from "../utils"
+import { cn } from "../utils";
 
 export interface BubbleMenuItem {
   name: string;
@@ -81,7 +75,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-400 rounded border border-custom-text-200 bg-custom-background-100 shadow-xl"
+      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
     >
       <NodeSelector
         editor={props.editor}
@@ -108,7 +102,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-blue-500": item.isActive(),
+                "text-custom-primary-100": item.isActive(),
               })}
             />
           </button>

apps/app/components/tiptap/bubble-menu/link-selector.tsx

@@ -1,7 +1,7 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
 import { Dispatch, FC, SetStateAction, useEffect, useRef } from "react";
-import { cn } from '../utils';
+import { cn } from "../utils";
 
 interface LinkSelectorProps {
   editor: Editor;
@@ -9,11 +9,7 @@ interface LinkSelectorProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const LinkSelector: FC<LinkSelectorProps> = ({
-  editor,
-  isOpen,
-  setIsOpen,
-}) => {
+export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -46,13 +42,13 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
             editor.chain().focus().setLink({ href: input.value }).run();
             setIsOpen(false);
           }}
-          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-100 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
+          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
         >
           <input
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
-            className="flex-1 bg-custom-background-100 border border-blue-900 p-1 text-sm outline-none"
+            className="flex-1 bg-custom-background-100 border border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (
@@ -66,7 +62,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
               <Trash className="h-4 w-4" />
             </button>
           ) : (
-            <button className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-stone-100">
+            <button className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90">
               <Check className="h-4 w-4" />
             </button>
           )}
@@ -75,4 +71,3 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
     </div>
   );
 };
-

apps/app/components/tiptap/bubble-menu/node-selector.tsx

@@ -22,17 +22,12 @@ interface NodeSelectorProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const NodeSelector: FC<NodeSelectorProps> = ({
-  editor,
-  isOpen,
-  setIsOpen,
-}) => {
+export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
   const items: BubbleMenuItem[] = [
     {
       name: "Text",
       icon: TextIcon,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
       isActive: () =>
         editor.isActive("paragraph") &&
         !editor.isActive("bulletList") &&
@@ -78,12 +73,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       name: "Quote",
       icon: TextQuote,
       command: () =>
-        editor
-          .chain()
-          .focus()
-          .toggleNode("paragraph", "paragraph")
-          .toggleBlockquote()
-          .run(),
+        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
       isActive: () => editor.isActive("blockquote"),
     },
     {
@@ -117,10 +107,13 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
                 item.command();
                 setIsOpen(false);
               }}
-              className={cn("flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-gray-800 hover:text-custom-text-100", { "bg-gray-800": activeItem.name === item.name })}
+              className={cn(
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-background-100/5 hover:text-custom-text-100",
+                { "bg-custom-primary-100/5": activeItem.name === item.name }
+              )}
             >
               <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1" >
+                <div className="rounded-sm border border-custom-border-300 p-1">
                   <item.icon className="h-3 w-3" />
                 </div>
                 <span>{item.name}</span>
@@ -129,8 +122,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
             </button>
           ))}
         </section>
-      )
-      }
-    </div >
+      )}
+    </div>
   );
 };

apps/app/components/tiptap/extensions/index.tsx

@@ -11,18 +11,18 @@ import TaskList from "@tiptap/extension-task-list";
 import { Markdown } from "tiptap-markdown";
 import Highlight from "@tiptap/extension-highlight";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { lowlight } from 'lowlight/lib/core'
+import { lowlight } from "lowlight/lib/core";
 import SlashCommand from "../slash-command";
 import { InputRule } from "@tiptap/core";
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 
-import ts from 'highlight.js/lib/languages/typescript'
+import ts from "highlight.js/lib/languages/typescript";
 
-import 'highlight.js/styles/github-dark.css';
+import "highlight.js/styles/github-dark.css";
 import UploadImagesPlugin from "../plugins/upload-image";
 import UniqueID from "@tiptap-pro/extension-unique-id";
 
-lowlight.registerLanguage('ts', ts)
+lowlight.registerLanguage("ts", ts);
 
 const CustomImage = TiptapImage.extend({
   addProseMirrorPlugins() {
@@ -49,13 +49,12 @@ export const TiptapExtensions = [
     },
     blockquote: {
       HTMLAttributes: {
-        class: "border-l-4 border-stone-700",
+        class: "border-l-4 border-custom-border-300",
       },
     },
     code: {
       HTMLAttributes: {
-        class:
-          "rounded-md bg-custom-bg-1000 px-1 py-1 font-mono font-medium text-stone-900",
+        class: "rounded-md bg-custom-bg-1000 px-1 py-1 font-mono font-medium text-custom-text-200",
         spellcheck: "false",
       },
     },
@@ -84,25 +83,25 @@ export const TiptapExtensions = [
             const end = range.to;
             // @ts-ignore
             tr.replaceWith(start - 1, end, this.type.create(attributes));
-          }
+          },
         }),
       ];
     },
   }).configure({
     HTMLAttributes: {
-      class: "mb-6 border-t border-custom-border-400",
+      class: "mb-6 border-t border-custom-border-300",
     },
   }),
   TiptapLink.configure({
     HTMLAttributes: {
       class:
-        "text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer",
+        "text-custom-text-200 underline underline-offset-[3px] hover:text-custom-text-100 transition-colors cursor-pointer",
     },
   }),
   CustomImage.configure({
     allowBase64: true,
     HTMLAttributes: {
-      class: "rounded-lg border border-stone-200",
+      class: "rounded-lg border border-custom-border-300",
     },
   }),
   Placeholder.configure({
@@ -116,7 +115,7 @@ export const TiptapExtensions = [
     includeChildren: true,
   }),
   UniqueID.configure({
-    types: ['image'],
+    types: ["image"],
   }),
   SlashCommand,
   TiptapUnderline,

apps/app/components/tiptap/plugins/upload-image.tsx

@@ -22,10 +22,7 @@ const UploadImagesPlugin = () =>
           const placeholder = document.createElement("div");
           placeholder.setAttribute("class", "img-placeholder");
           const image = document.createElement("img");
-          image.setAttribute(
-            "class",
-            "opacity-10 rounded-lg border border-stone-200",
-          );
+          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
           image.src = src;
           placeholder.appendChild(image);
           const deco = Decoration.widget(pos + 1, placeholder, {
@@ -33,9 +30,7 @@ const UploadImagesPlugin = () =>
           });
           set = set.add(tr.doc, [deco]);
         } else if (action && action.remove) {
-          set = set.remove(
-            set.find(undefined, undefined, (spec) => spec.id == action.remove.id),
-          );
+          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
         }
         return set;
       },
@@ -43,7 +38,7 @@ const UploadImagesPlugin = () =>
     props: {
       decorations(state) {
         return this.getState(state);
-      }
+      },
     },
   });
 
@@ -51,7 +46,11 @@ export default UploadImagesPlugin;
 
 function findPlaceholder(state: EditorState, id: {}) {
   const decos = uploadKey.getState(state);
-  const found = decos.find(undefined, undefined, (spec: { id: number | undefined }) => spec.id == id);
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: number | undefined }) => spec.id == id
+  );
   return found.length ? found[0].from : null;
 }
 
@@ -81,7 +80,7 @@ export async function startImageUpload(file: File, view: EditorView, pos: number
   };
 
   const src = await UploadImageHandler(file);
-  console.log(src, "src")
+  console.log(src, "src");
   const { schema } = view.state;
   pos = findPlaceholder(view.state, id);
 
@@ -111,10 +110,9 @@ const UploadImageHandler = (file: File): Promise<string> => {
       image.onload = () => {
         resolve(imageUrl);
       };
-    })
-  }
-  catch (error) {
-    console.log(error)
+    });
+  } catch (error) {
+    console.log(error);
     return Promise.reject(error);
   }
 };

apps/app/components/tiptap/slash-command/index.tsx

@@ -261,19 +261,19 @@ const CommandList = ({
     <div
       id="slash-command"
       ref={commandListContainer}
-      className="z-20 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-200 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+      className="z-20 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
     >
       {items.map((item: CommandItemProps, index: number) => (
         <button
-          className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-90 hover:text-custom-text-100 ${
-            index === selectedIndex ? "bg-gray-800 text-custom-text-90" : ""
+          className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-custom-primary-100/5 ${
+            index === selectedIndex ? "bg-custom-primary-100/5" : ""
           }`}
           key={index}
           onClick={() => selectItem(index)}
         >
           <div>
             <p className="font-medium">{item.title}</p>
-            <p className="text-xs text-stone-500">{item.description}</p>
+            <p className="text-xs text-custom-text-200">{item.description}</p>
           </div>
         </button>
       ))}