matched theme colors

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

@@ -98,11 +98,13 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           <button
             key={index}
             onClick={item.command}
-            className="p-2 text-custom-text-200 hover:bg-custom-background-100 active:bg-custom-background-100 transition-colors"
+            className={cn("p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors", {
+              "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
+            })}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-primary-100": item.isActive(),
+                "text-custom-text-100": item.isActive(),
               })}
             />
           </button>

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

@@ -19,7 +19,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
   return (
     <div className="relative">
       <button
-        className="flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-200 hover:bg-custom-background-80 active:bg-custom-background-80"
+        className={cn("flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100", { "bg-custom-background-100": isOpen })}
         onClick={() => {
           setIsOpen(!isOpen);
         }}
@@ -27,7 +27,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
         <p className="text-base">↗</p>
         <p
           className={cn("underline underline-offset-4", {
-            "text-blue-500": editor.isActive("link"),
+            "text-custom-text-100": editor.isActive("link"),
           })}
         >
           Link
@@ -48,7 +48,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
-            className="flex-1 bg-custom-background-100 border border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 bg-custom-background-100 border border-custom-primary-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (

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

@@ -91,7 +91,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
   return (
     <div className="relative h-full">
       <button
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-200 hover:bg-custom-background-80 active:bg-custom-background-80"
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
         onClick={() => setIsOpen(!isOpen)}
       >
         <span>{activeItem?.name}</span>
@@ -99,7 +99,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
       </button>
 
       {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
           {items.map((item, index) => (
             <button
               key={index}
@@ -107,10 +107,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
                 item.command();
                 setIsOpen(false);
               }}
-              className={cn(
+              className={cn("flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100", { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name })}
-                "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">

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

@@ -14,7 +14,6 @@ import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 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 ts from "highlight.js/lib/languages/typescript";
 
@@ -54,7 +53,8 @@ export const TiptapExtensions = [
     },
     code: {
       HTMLAttributes: {
-        class: "rounded-md bg-custom-bg-1000 px-1 py-1 font-mono font-medium text-custom-text-200",
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
         spellcheck: "false",
       },
     },
@@ -95,7 +95,7 @@ export const TiptapExtensions = [
   TiptapLink.configure({
     HTMLAttributes: {
       class:
-        "text-custom-text-200 underline underline-offset-[3px] hover:text-custom-text-100 transition-colors cursor-pointer",
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
     },
   }),
   CustomImage.configure({

apps/app/components/tiptap/index.tsx

@@ -115,10 +115,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     }, 500);
   }, 1000);
 
-  const editorClassNames = `mt-2 p-3 relative focus:outline-none rounded-md focus:border-custom-border-200 
+  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:border sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? "" : "border border-custom-border-200"} ${
+      ${noBorder ? '' : 'border border-custom-border-200'
-    borderOnFocus ? "focus:border border-custom-border-200" : "focus:border-0"
+    } ${borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0'
-  } ${customClassName}`;
+    } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;
@@ -128,7 +128,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
       onClick={() => {
         editor?.chain().focus().run();
       }}
-      className={`tiptap-editor-container cursor-text relative ${editorClassNames}`}
+      className={`tiptap-editor-container ${editorClassNames}`}
     >
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className={`${editorContentCustomClassNames}`}>

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

@@ -22,7 +22,10 @@ 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-custom-border-300");
+          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, {

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

@@ -17,6 +17,7 @@ import {
   ImageIcon,
 } from "lucide-react";
 import { startImageUpload } from "../plugins/upload-image";
+import { cn } from "../utils";
 
 interface CommandItemProps {
   title: string;
@@ -197,8 +198,6 @@ export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
 const CommandList = ({
   items,
   command,
-  editor,
-  range,
 }: {
   items: CommandItemProps[];
   command: any;
@@ -261,19 +260,17 @@ 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-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+      className="z-50 fixed 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 hover:bg-custom-primary-100/5 ${
+          className={cn(`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`, { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex })}
-            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-custom-text-200">{item.description}</p>
+            <p className="text-xs text-custom-text-300">{item.description}</p>
           </div>
         </button>
       ))}

apps/app/styles/editor.css

@@ -115,83 +115,3 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
 }
-
-.ProseMirror pre {
-  background: #121212;
-  border-radius: 0.375rem;
-  border-color: rgba(var(--color-background-100));
-  border: 0.5px solid;
-  font-family: "JetBrainsMono", monospace;
-  padding: 0.75rem 1rem;
-}
-
-.ProseMirror pre code {
-  background: none;
-  color: inherit;
-  font-size: 0.8rem;
-  padding: 0;
-}
-
-.ProseMirror-icon {
-  display: inline-block;
-  line-height: 0.8;
-  vertical-align: -2px;
-  color: #666;
-  cursor: pointer;
-  margin: 0 3px;
-  padding: 3px 8px;
-  border-radius: 3px;
-  border: 1px solid transparent;
-  transition: background 50ms ease-in-out;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.ProseMirror-menu-disabled.ProseMirror-icon {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
-
-.ProseMirror-icon svg {
-  fill: currentColor;
-  height: 1em;
-}
-
-.ProseMirror-icon span {
-  vertical-align: text-top;
-}
-
-.remirror-editor-wrapper .remirror-editor {
-  min-height: 150px;
-}
-
-.issue-comments-section .remirror-editor-wrapper .remirror-editor,
-.page-block-section .remirror-editor-wrapper .remirror-editor {
-  min-height: 50px;
-}
-
-.remirror-section .remirror-editor-wrapper .remirror-editor {
-  min-height: 0 !important;
-}
-
-.remirror-editor-wrapper {
-  padding-top: 8px;
-}
-
-.MuiButtonBase-root {
-  border: none !important;
-  border-radius: 0.25rem !important;
-  padding: 0.25rem !important;
-}
-
-.MuiButtonBase-root svg {
-  fill: rgb(var(--color-text-100)) !important;
-}
-
-.MuiButtonBase-root.Mui-selected,
-.MuiButtonBase-root:hover {
-  background-color: rgb(var(--color-background-100)) !important;
-}