chore: update text colors

packages/editor/core/src/ui/extensions/code-inline/index.tsx

@@ -32,7 +32,7 @@ export const CustomCodeInlineExtension = Mark.create<CodeOptions>({
   addOptions() {
     return {
       HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-custom-text-1000",
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-neutral-text-strong0",
         spellcheck: "false",
       },
     };

packages/editor/core/src/ui/mentions/mention-list.tsx

@@ -63,7 +63,7 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
   }));
 
   return props.items && props.items.length !== 0 ? (
-    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
+    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-neutral-text-medium shadow-custom-shadow-sm">
       {props.items.length ? (
         props.items.map((item, index) => (
           <div

packages/editor/core/src/ui/read-only/extensions.tsx

@@ -45,7 +45,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     },
     code: {
       HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-neutral-text-strong0",
         spellcheck: "false",
       },
     },

packages/editor/document-editor/src/ui/components/content-browser.tsx

@@ -26,7 +26,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
             )
           )
         ) : (
-          <p className="mt-3 text-xs text-custom-text-400">Headings will be displayed here for navigation</p>
+          <p className="mt-3 text-xs text-neutral-text-subtle">Headings will be displayed here for navigation</p>
         )}
       </div>
     </div>

packages/editor/document-editor/src/ui/components/editor-header.tsx

@@ -63,7 +63,7 @@ export const EditorHeader = (props: IEditorHeader) => {
           <AlertLabel
             Icon={Lock}
             backgroundColor="bg-neutral-component-surface-dark"
-            textColor="text-custom-text-300"
+            textColor="text-neutral-text-medium"
             label="Locked"
           />
         )}
@@ -85,7 +85,7 @@ export const EditorHeader = (props: IEditorHeader) => {
             {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
               <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
             )}
-            <span className="text-sm text-custom-text-300">
+            <span className="text-sm text-neutral-text-medium">
               {isSubmitting === "submitting" ? "Saving..." : "Saved"}
             </span>
           </div>

packages/editor/document-editor/src/ui/components/info-popover.tsx

@@ -49,14 +49,14 @@ export const InfoPopover: React.FC<Props> = (props) => {
           {...infoPopoverAttributes.popper}
         >
           <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Last updated on</h6>
+            <h6 className="text-xs text-neutral-text-subtle">Last updated on</h6>
             <h5 className="flex items-center gap-1 text-sm">
               <History className="h-3 w-3" />
               {renderDate(new Date(documentDetails.last_updated_at))}
             </h5>
           </div>
           <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Created on</h6>
+            <h6 className="text-xs text-neutral-text-subtle">Created on</h6>
             <h5 className="flex items-center gap-1 text-sm">
               <Calendar className="h-3 w-3" />
               {renderDate(new Date(documentDetails.created_on))}

packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx

@@ -16,7 +16,7 @@ const InputView = ({
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => (
   <div className="flex flex-col gap-1">
-    <label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
+    <label className="inline-block font-semibold text-xs text-neutral-text-subtle">{label}</label>
     <input
       placeholder={placeholder}
       onClick={(e) => {

packages/editor/document-editor/src/ui/components/links/link-preview.tsx

@@ -32,7 +32,7 @@ export const LinkPreview = ({
 
   return (
     <div className="absolute left-0 top-0 max-w-max">
-      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-custom-text-300 text-xs">
+      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-neutral-text-medium text-xs">
         <GlobeIcon size={14} className="inline-block" />
         <p>{url.length > 40 ? url.slice(0, 40) + "..." : url}</p>
         <div className="flex gap-2">

packages/editor/document-editor/src/ui/components/summary-popover.tsx

@@ -34,7 +34,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
         type="button"
         ref={setReferenceElement}
         className={`grid h-7 w-7 place-items-center rounded ${
-          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-neutral-text-medium"
         }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >

packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx

@@ -27,7 +27,7 @@ export interface IVerticalDropdownMenuProps {
 const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => (
   <CustomMenu.MenuItem onClick={action} className="flex items-center gap-2">
     <Icon className="h-3 w-3" />
-    <div className="text-custom-text-300">{label}</div>
+    <div className="text-neutral-text-medium">{label}</div>
   </CustomMenu.MenuItem>
 );
 

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx

@@ -155,7 +155,7 @@ const IssueSuggestionList = ({
             <div className={"flex h-full w-full flex-col"} key={`${section}-container`} id={`${section}-container`}>
               <h6
                 className={
-                  "sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-custom-text-400"
+                  "sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-neutral-text-subtle"
                 }
               >
                 {section}
@@ -164,16 +164,16 @@ const IssueSuggestionList = ({
                 {sectionItems.map((item: IssueSuggestionProps, index: number) => (
                   <button
                     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`,
+                      `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong`,
                       {
-                        "bg-custom-primary-100/5  text-custom-text-100":
+                        "bg-custom-primary-100/5  text-neutral-text-strong":
                           section === currentSection && index === selectedIndex,
                       }
                     )}
                     key={item.identifier}
                     onClick={() => selectItem(section, index)}
                   >
-                    <h5 className="whitespace-nowrap text-xs text-custom-text-300">{item.identifier}</h5>
+                    <h5 className="whitespace-nowrap text-xs text-neutral-text-medium">{item.identifier}</h5>
                     <PriorityIcon priority={item.priority} />
                     <div>
                       <p className="flex-grow truncate text-xs">{item.title}</p>

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx

@@ -10,7 +10,7 @@ export const IssueWidgetCard = (props) => (
         props.selected ? "border-custom-primary-200 border-[2px]" : ""
       } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-neutral-border-medium shadow-custom-shadow-2xs`}
     >
-      <h5 className="h-[20%] text-xs text-custom-text-300 p-2">
+      <h5 className="h-[20%] text-xs text-neutral-text-medium p-2">
         {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}
       </h5>
       <div className="relative h-[71%]">

packages/editor/document-editor/src/ui/menu/fixed-menu.tsx

@@ -85,9 +85,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
@@ -102,15 +102,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
               })}
             />
           </button>
@@ -123,15 +123,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
               })}
             />
           </button>
@@ -144,15 +144,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
             type="button"
             onClick={item.command}
             className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-neutral-component-surface-dark",
+              "grid h-7 w-7 place-items-center rounded text-neutral-text-medium hover:bg-neutral-component-surface-dark",
               {
-                "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
               }
             )}
           >
             <item.icon
               className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
+                "text-neutral-text-strong": item.isActive(),
               })}
             />
           </button>

packages/editor/document-editor/src/ui/tooltip.tsx

@@ -51,11 +51,13 @@ export const Tooltip: React.FC<Props> = ({
       content={
         <div
           className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom" ? "bg-neutral-component-surface-light text-custom-text-200" : "bg-black text-gray-400"
+            theme === "custom"
+              ? "bg-neutral-component-surface-light text-neutral-text-medium"
+              : "bg-black text-gray-400"
           } overflow-hidden break-words ${className}`}
         >
           {tooltipHeading && (
-            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
+            <h5 className={`font-medium ${theme === "custom" ? "text-neutral-text-strong" : "text-white"}`}>
               {tooltipHeading}
             </h5>
           )}

packages/editor/extensions/src/extensions/slash-commands.tsx

@@ -297,7 +297,7 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
         <button
           key={item.key}
           className={cn(
-            `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-custom-text-100 hover:bg-custom-primary-100/5`,
+            `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-neutral-text-strong hover:bg-custom-primary-100/5`,
             {
               "bg-custom-primary-100/5": index === selectedIndex,
             }

packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx

@@ -108,8 +108,8 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                 <access.icon
                   className={`h-3.5 w-3.5 ${
                     props.commentAccessSpecifier?.accessValue === access.key
-                      ? "text-custom-text-100"
+                      ? "text-neutral-text-strong"
-                      : "text-custom-text-400"
+                      : "text-neutral-text-subtle"
                   }`}
                   strokeWidth={2}
                 />
@@ -127,15 +127,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
@@ -150,15 +150,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
@@ -173,15 +173,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />
@@ -196,15 +196,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-neutral-text-subtle hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-neutral-text-strong": item.isActive(),
                     }
                   )}
                 >
                   <item.icon
                     className={cn("h-3.5 w-3.5", {
-                      "text-custom-text-100": item.isActive(),
+                      "text-neutral-text-strong": item.isActive(),
                     })}
                     strokeWidth={2.5}
                   />

packages/editor/rich-text-editor/Readme.md

@@ -41,7 +41,7 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
   debouncedUpdatesEnabled={true}
   setShouldShowAlert={setShowAlert}
   setIsSubmitting={setIsSubmitting}
-  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-neutral-text-medium"}
   noBorder={!isAllowed}
   onChange={(description: Object, description_html: string) => {
     setShowAlert(true);

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx

@@ -123,15 +123,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                 type="button"
                 onClick={item.command}
                 className={cn(
-                  "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
+                  "p-2 text-neutral-text-medium transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
                   {
-                    "bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
+                    "bg-custom-primary-100/5 text-neutral-text-strong": item.isActive(),
                   }
                 )}
               >
                 <item.icon
                   className={cn("h-4 w-4", {
-                    "text-custom-text-100": item.isActive(),
+                    "text-neutral-text-strong": item.isActive(),
                   })}
                 />
               </button>

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx

@@ -30,7 +30,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
       <button
         type="button"
         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-neutral-component-surface-light active:bg-neutral-component-surface-light",
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
           { "bg-neutral-component-surface-light": isOpen }
         )}
         onClick={() => {
@@ -40,7 +40,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
         <p className="text-base">↗</p>
         <p
           className={cn("underline underline-offset-4", {
-            "text-custom-text-100": editor.isActive("link"),
+            "text-neutral-text-strong": editor.isActive("link"),
           })}
         >
           Link
@@ -60,7 +60,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
-            className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 border-r border-neutral-border-medium bg-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-neutral-text-subtle"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (
@@ -76,7 +76,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             </button>
           ) : (
             <button
-              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-neutral-component-surface-medium"
+              className="flex items-center rounded-sm p-1 text-neutral-text-medium transition-all hover:bg-neutral-component-surface-medium"
               type="button"
               onClick={() => {
                 onLinkSubmit();

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx

@@ -48,7 +48,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        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"
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-neutral-text-medium hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
       >
         <span>{activeItem?.name}</span>
         <ChevronDown className="h-4 w-4" />
@@ -65,9 +65,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
                 setIsOpen(false);
               }}
               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",
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-neutral-text-medium hover:bg-custom-primary-100/5 hover:text-neutral-text-strong",
                 {
-                  "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name,
+                  "bg-custom-primary-100/5 text-neutral-text-strong": activeItem.name === item.name,
                 }
               )}
             >

packages/ui/src/badge/helper.tsx

@@ -59,17 +59,17 @@ export const badgeStyling: IBadgeStyling = {
   neutral: {
     default: `text-custom-background-100 bg-custom-text-100 border border-neutral-border-medium`,
     hover: `hover:bg-custom-text-200`,
-    disabled: `cursor-not-allowed bg-custom-border-200 !text-custom-text-400`,
+    disabled: `cursor-not-allowed bg-custom-border-200 !text-neutral-text-subtle`,
   },
   "accent-neutral": {
-    default: `text-custom-text-200 bg-neutral-component-surface-dark`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-dark`,
-    hover: `hover:bg-custom-border-200 hover:text-custom-text-100`,
+    hover: `hover:bg-custom-border-200 hover:text-neutral-text-strong`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
   "outline-neutral": {
-    default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
-    hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
+    hover: `hover:text-neutral-text-strong hover:bg-custom-border-200`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
 
   success: {

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -13,7 +13,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
       <div key={index} className="flex flex-wrap items-center gap-2.5">
         {child}
         {index !== React.Children.count(children) - 1 && (
-          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
+          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-neutral-text-subtle" aria-hidden="true" />
         )}
       </div>
     ))}

packages/ui/src/button/helper.tsx

@@ -55,10 +55,10 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
   "neutral-primary": {
-    default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
+    default: `text-neutral-text-medium bg-neutral-component-surface-light border border-neutral-border-medium`,
     hover: `hover:bg-neutral-component-surface-medium`,
-    pressed: `focus:text-custom-text-300 focus:bg-neutral-component-surface-medium`,
+    pressed: `focus:text-neutral-text-medium focus:bg-neutral-component-surface-medium`,
-    disabled: `cursor-not-allowed !text-custom-text-400`,
+    disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
   "link-primary": {
     default: `text-custom-primary-100 bg-neutral-component-surface-light`,

packages/ui/src/dropdowns/custom-menu.tsx

@@ -132,7 +132,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
                     disabled={disabled}
-                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
+                    className={`relative grid place-items-center rounded p-1 text-neutral-text-medium outline-none hover:text-neutral-text-strong ${
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-neutral-component-surface-dark"
                     } ${buttonClassName}`}
                     tabIndex={customButtonTabIndex}
@@ -146,10 +146,10 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     ref={setReferenceElement}
                     type="button"
                     className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
-                      open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
+                      open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
                     } ${noBorder ? "" : "border border-neutral-border-medium shadow-sm focus:outline-none"} ${
                       disabled
-                        ? "cursor-not-allowed text-custom-text-200"
+                        ? "cursor-not-allowed text-neutral-text-medium"
                         : "cursor-pointer hover:bg-neutral-component-surface-dark"
                     } ${buttonClassName}`}
                     onClick={() => {
@@ -181,7 +181,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
         <button
           type="button"
           className={cn(
-            "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
+            "w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium",
             {
               "bg-neutral-component-surface-dark": active,
             },

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -87,7 +87,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                   type="button"
                   className={`flex w-full items-center justify-between gap-1 text-xs ${
                     disabled
-                      ? "cursor-not-allowed text-custom-text-200"
+                      ? "cursor-not-allowed text-neutral-text-medium"
                       : "cursor-pointer hover:bg-neutral-component-surface-dark"
                   }  ${customButtonClassName}`}
                   onClick={openDropdown}
@@ -104,7 +104,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                     input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                   } ${
                     disabled
-                      ? "cursor-not-allowed text-custom-text-200"
+                      ? "cursor-not-allowed text-neutral-text-medium"
                       : "cursor-pointer hover:bg-neutral-component-surface-dark"
                   } ${buttonClassName}`}
                   onClick={openDropdown}
@@ -126,9 +126,9 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                   {...attributes.popper}
                 >
                   <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
-                    <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+                    <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
                     <Combobox.Input
-                      className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                      className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
                       placeholder="Search"
@@ -170,10 +170,10 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                           </Combobox.Option>
                         ))
                       ) : (
-                        <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
+                        <p className="text-neutral-text-subtle italic py-1 px-1.5">No matches found</p>
                       )
                     ) : (
-                      <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                      <p className="text-neutral-text-subtle italic py-1 px-1.5">Loading...</p>
                     )}
                   </div>
                   {footerOption}

packages/ui/src/dropdowns/custom-select.tsx

@@ -66,7 +66,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
               type="button"
               className={`flex items-center justify-between gap-1 text-xs ${
                 disabled
-                  ? "cursor-not-allowed text-custom-text-200"
+                  ? "cursor-not-allowed text-neutral-text-medium"
                   : "cursor-pointer hover:bg-neutral-component-surface-dark"
               } ${customButtonClassName}`}
               onClick={openDropdown}
@@ -83,7 +83,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
                 input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
               } ${
                 disabled
-                  ? "cursor-not-allowed text-custom-text-200"
+                  ? "cursor-not-allowed text-neutral-text-medium"
                   : "cursor-pointer hover:bg-neutral-component-surface-dark"
               } ${buttonClassName}`}
               onClick={openDropdown}
@@ -126,7 +126,7 @@ const Option = (props: ICustomSelectItemProps) => {
       value={value}
       className={({ active }) =>
         cn(
-          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-neutral-text-medium",
           {
             "bg-neutral-component-surface-dark": active,
           },

packages/ui/src/icons/priority-icon.tsx

@@ -68,7 +68,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
               "text-orange-500": priority === "high",
               "text-yellow-500": priority === "medium",
               "text-custom-primary-100": priority === "low",
-              "text-custom-text-200": priority === "none",
+              "text-neutral-text-medium": priority === "none",
             },
             className
           )}

packages/ui/src/tooltip/tooltip.tsx

@@ -47,9 +47,9 @@ export const Tooltip: React.FC<ITooltipProps> = ({
     hoverCloseDelay={closeDelay}
     content={
       <div
-        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-custom-text-200 shadow-md ${className}`}
+        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-neutral-component-surface-light p-2 text-xs text-neutral-text-medium shadow-md ${className}`}
       >
-        {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
+        {tooltipHeading && <h5 className="font-medium text-neutral-text-strong">{tooltipHeading}</h5>}
         {tooltipContent}
       </div>
     }

space/components/accounts/github-sign-in.tsx

@@ -43,7 +43,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
         className="w-full"
         href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-neutral-component-surface-dark">
+        <button className="flex h-[46px] w-full items-center justify-center gap-2 rounded border border-neutral-border-medium p-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-neutral-component-surface-dark">
           <Image
             src={theme === "dark" ? githubWhiteImage : githubBlackImage}
             height={20}

space/components/accounts/onboarding-form.tsx

@@ -127,7 +127,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                     type="button"
                     className={`flex w-full items-center justify-between gap-1 rounded-md border border-neutral-border-medium px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
                   >
-                    <span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
+                    <span className={value ? "" : "text-neutral-text-subtle"}>{value || "Select your role..."}</span>
                     <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
                   </Listbox.Button>
 
@@ -151,7 +151,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                             className={({ active, selected }) =>
                               `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                                 active || selected ? "bg-neutral-component-surface-dark" : ""
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                              } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                             }
                           >
                             {({ selected }) => (

space/components/issues/board-views/block-downvotes.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 export const IssueBlockDownVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-custom-text-300">
+  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
-    <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
+    <span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-neutral-text-medium">
       arrow_upward_alt
     </span>
     {number}

space/components/issues/board-views/block-due-date.tsx

@@ -49,7 +49,7 @@ export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group
   const iconDetails = dueDateIconDetails(due_date, group);
 
   return (
-    <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-custom-text-100">
+    <div className="flex items-center gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs text-neutral-text-strong">
       <span className={`material-symbols-rounded -my-0.5 text-sm ${iconDetails.className}`}>
         {iconDetails.iconName}
       </span>

space/components/issues/board-views/block-labels.tsx

@@ -9,7 +9,7 @@ export const IssueBlockLabels = ({ labels }: any) => (
           key={_label?.id}
           className="flex flex-shrink-0 cursor-default items-center rounded-md border border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm"
         >
-          <div className="flex items-center gap-1.5 text-custom-text-200">
+          <div className="flex items-center gap-1.5 text-neutral-text-medium">
             <div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
             <div className="text-xs">{_label?.name}</div>
           </div>

space/components/issues/board-views/block-state.tsx

@@ -9,7 +9,7 @@ export const IssueBlockState = ({ state }: any) => {
   if (stateGroup === null) return <></>;
   return (
     <div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
-      <div className="flex w-full items-center gap-1.5 text-custom-text-200">
+      <div className="flex w-full items-center gap-1.5 text-neutral-text-medium">
         <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>
       </div>

space/components/issues/board-views/block-upvotes.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 export const IssueBlockUpVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-custom-text-300">
+  <div className="flex h-6 items-center rounded border-[0.5px] border-neutral-border-medium px-1.5 py-1 pl-1 text-xs text-neutral-text-medium">
-    <span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
+    <span className="material-symbols-rounded !m-0 !p-0 text-base text-neutral-text-medium">arrow_upward_alt</span>
     {number}
   </div>
 );

space/components/issues/board-views/kanban/block.tsx

@@ -46,7 +46,7 @@ export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
   return (
     <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 text-sm shadow-custom-shadow-2xs">
       {/* id */}
-      <div className="break-words text-xs text-custom-text-300">
+      <div className="break-words text-xs text-neutral-text-medium">
         {projectStore?.project?.identifier}-{issue?.sequence_id}
       </div>
 

space/components/issues/board-views/kanban/header.tsx

@@ -22,8 +22,8 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
       <div className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
         <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
-      <div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
+      <div className="mr-1 truncate font-semibold capitalize text-neutral-text-medium">{state?.name}</div>
-      <span className="flex-shrink-0 rounded-full text-custom-text-300">
+      <span className="flex-shrink-0 rounded-full text-neutral-text-medium">
         {store.issue.getCountOfIssuesByState(state.id)}
       </span>
     </div>

space/components/issues/board-views/kanban/index.tsx

@@ -34,7 +34,7 @@ export const IssueKanbanView = observer(() => {
                   ))}
                 </div>
               ) : (
-                <div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-custom-text-200">
+                <div className="flex items-center justify-center gap-2 pt-10 text-center text-sm font-medium text-neutral-text-medium">
                   <Icon iconName="stack" />
                   No issues in this state
                 </div>

space/components/issues/board-views/list/block.tsx

@@ -49,7 +49,7 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
     <div className="relative flex items-center gap-10 bg-neutral-component-surface-light p-3">
       <div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+        <div className="flex-shrink-0 text-xs font-medium text-neutral-text-medium">
           {projectStore?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}

space/components/issues/board-views/list/header.tsx

@@ -23,7 +23,9 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
         <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
       <div className="mr-1 font-medium capitalize">{state?.name}</div>
-      <div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="text-sm font-medium text-neutral-text-medium">
+        {store.issue.getCountOfIssuesByState(state.id)}
+      </div>
     </div>
   );
 });

space/components/issues/board-views/list/index.tsx

@@ -27,7 +27,7 @@ export const IssueListView = observer(() => {
                 ))}
               </div>
             ) : (
-              <div className="bg-neutral-component-surface-light p-3 text-sm text-custom-text-400">No issues.</div>
+              <div className="bg-neutral-component-surface-light p-3 text-sm text-neutral-text-subtle">No issues.</div>
             )}
           </div>
         ))}

space/components/issues/filters/applied-filters/filters-list.tsx

@@ -33,7 +33,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
             key={filterKey}
             className="flex flex-wrap items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 capitalize"
           >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <span className="text-xs text-neutral-text-medium">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
               {filterKey === "priority" && (
                 <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
@@ -57,7 +57,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
 
               <button
                 type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
                 <X size={12} strokeWidth={2} />
@@ -69,7 +69,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
       <button
         type="button"
         onClick={handleRemoveAllFilters}
-        className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        className="flex items-center gap-2 rounded-md border border-neutral-border-medium px-2 py-1 text-xs text-neutral-text-medium hover:text-neutral-text-medium"
       >
         Clear all
         <X size={12} strokeWidth={2} />

space/components/issues/filters/applied-filters/label.tsx

@@ -29,7 +29,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
             <span className="normal-case">{labelDetails.name}</span>
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(labelId)}
             >
               <X size={10} strokeWidth={2} />

space/components/issues/filters/applied-filters/priority.tsx

@@ -19,7 +19,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
             {priority}
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(priority)}
             >
               <X size={10} strokeWidth={2} />

space/components/issues/filters/applied-filters/state.tsx

@@ -26,7 +26,7 @@ export const AppliedStateFilters: React.FC<Props> = (props) => {
             {stateDetails.name}
             <button
               type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              className="grid place-items-center text-neutral-text-medium hover:text-neutral-text-medium"
               onClick={() => handleRemove(stateId)}
             >
               <X size={10} strokeWidth={2} />

space/components/issues/filters/helpers/dropdown.tsx

@@ -30,7 +30,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
           <>
             <Popover.Button as={React.Fragment}>
               <Button ref={setReferenceElement} variant="neutral-primary" size="sm">
-                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                <div className={`${open ? "text-neutral-text-strong" : "text-neutral-text-medium"}`}>
                   <span>{title}</span>
                 </div>
               </Button>

space/components/issues/filters/helpers/filter-header.tsx

@@ -10,7 +10,7 @@ interface IFilterHeader {
 
 export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
   <div className="sticky top-0 flex items-center justify-between gap-2 bg-neutral-component-surface-light">
-    <div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
+    <div className="flex-grow truncate text-xs font-medium text-neutral-text-medium">{title}</div>
     <button
       type="button"
       className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-neutral-component-surface-dark"

space/components/issues/filters/helpers/filter-option.tsx

@@ -28,7 +28,7 @@ export const FilterOption: React.FC<Props> = (props) => {
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
+        <div className="flex-grow truncate text-xs text-neutral-text-medium">{title}</div>
       </div>
     </button>
   );

space/components/issues/filters/labels.tsx

@@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">

space/components/issues/filters/priority.tsx

@@ -42,7 +42,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
           )}
         </div>
       )}

space/components/issues/filters/selection.tsx

@@ -29,10 +29,10 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-neutral-component-surface-light p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-1.5 py-1 text-xs">
-          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <Search className="text-neutral-text-subtle" size={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-custom-text-400"
+            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-neutral-text-subtle"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
@@ -40,7 +40,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <X className="text-neutral-text-medium" size={12} strokeWidth={2} />
             </button>
           )}
         </div>

space/components/issues/filters/state.tsx

@@ -62,7 +62,7 @@ export const FilterState: React.FC<Props> = (props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-xs italic text-neutral-text-subtle">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">

space/components/issues/navbar/issue-board-view.tsx

@@ -30,8 +30,8 @@ export const NavbarIssueBoardView = observer(() => {
                 key={viewKey}
                 className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
                   viewKey === activeBoard
-                    ? `bg-neutral-component-surface-dark text-custom-text-200`
+                    ? `bg-neutral-component-surface-dark text-neutral-text-medium`
-                    : `text-custom-text-300 hover:bg-neutral-component-surface-dark`
+                    : `text-neutral-text-medium hover:bg-neutral-component-surface-dark`
                 }`}
                 onClick={() => handleCurrentBoardView(viewKey)}
                 title={viewKey}

space/components/issues/navbar/theme.tsx

@@ -24,7 +24,7 @@ export const NavbarTheme = observer(() => {
     <button
       type="button"
       onClick={handleTheme}
-      className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-custom-text-100 hover:bg-neutral-component-surface-dark"
+      className="relative grid h-7 w-7 place-items-center rounded bg-neutral-component-surface-light text-neutral-text-strong hover:bg-neutral-component-surface-dark"
     >
       <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
     </button>

space/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -83,7 +83,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-neutral-component-surface-dark px-0.5 py-px">
-          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+          <MessageSquare className="h-3 w-3 text-neutral-text-medium" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -91,7 +91,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <div className="text-xs">
             {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
           </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
+          <p className="mt-0.5 text-xs text-neutral-text-medium">
             <>commented {timeAgo(comment.created_at)}</>
           </p>
         </div>
@@ -156,9 +156,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <Menu.Button
             type="button"
             onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-neutral-component-surface-dark hover:text-custom-text-100"
+            className="relative grid cursor-pointer place-items-center rounded p-1 text-neutral-text-medium outline-none hover:bg-neutral-component-surface-dark hover:text-neutral-text-strong"
           >
-            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+            <MoreVertical className="h-4 w-4 text-neutral-text-medium duration-300" strokeWidth={2} />
           </Menu.Button>
 
           <Transition
@@ -179,7 +179,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         active ? "bg-neutral-component-surface-dark" : ""
                       }`}
                     >
@@ -194,7 +194,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         active ? "bg-neutral-component-surface-dark" : ""
                       }`}
                     >

space/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -103,7 +103,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                     handleReactionClick(reaction);
                   });
                 }}
-                className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                   commentReactions?.some(
                     (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
                   )

space/components/issues/peek-overview/header.tsx

@@ -97,7 +97,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
                       className={({ active, selected }) =>
                         `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
                           active || selected ? "bg-neutral-component-surface-dark" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >
                       {({ selected }) => (

space/components/issues/peek-overview/issue-activity.tsx

@@ -51,7 +51,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
             </>
           ) : (
             <div className="mt-4 flex items-center justify-between gap-2 rounded border border-neutral-border-medium bg-neutral-component-surface-dark px-2 py-2.5">
-              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
+              <p className="flex gap-2 overflow-hidden break-words text-sm text-neutral-text-medium">
                 <Icon iconName="lock" className="!text-sm" />
                 Sign in to add your comment
               </p>

space/components/issues/peek-overview/issue-details.tsx

@@ -13,7 +13,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
 
   return (
     <div className="space-y-2">
-      <h6 className="font-medium text-custom-text-200">
+      <h6 className="font-medium text-neutral-text-medium">
         {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
       </h6>
       <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>

space/components/issues/peek-overview/issue-emoji-reactions.tsx

@@ -84,7 +84,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
                       handleReactionClick(reaction);
                     });
                   }}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-text-strong ${
                     reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
                       ? "bg-custom-primary-100/10"
                       : "bg-neutral-component-surface-dark"

space/components/issues/peek-overview/issue-properties.tsx

@@ -64,7 +64,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
           <div className="w-3/4">
             {stateGroup && (
               <div className="inline-flex rounded bg-neutral-component-surface-dark px-2.5 py-0.5 text-sm">
-                <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+                <div className="flex items-center gap-1.5 text-left text-neutral-text-strong">
                   <StateGroupIcon stateGroup={state.group} color={state.color} />
                   {addSpaceIfCamelCase(state?.name ?? "")}
                 </div>
@@ -108,14 +108,14 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
           </div>
           <div>
             {issueDetails.target_date ? (
-              <div className="flex h-6 items-center gap-1 rounded border border-neutral-border-subtle bg-neutral-component-surface-dark px-2.5 py-1 text-xs text-custom-text-100">
+              <div className="flex h-6 items-center gap-1 rounded border border-neutral-border-subtle bg-neutral-component-surface-dark px-2.5 py-1 text-xs text-neutral-text-strong">
                 <span className={`material-symbols-rounded -my-0.5 text-sm ${dueDateIcon.className}`}>
                   {dueDateIcon.iconName}
                 </span>
                 {renderFullDate(issueDetails.target_date)}
               </div>
             ) : (
-              <span className="text-custom-text-200">Empty</span>
+              <span className="text-neutral-text-medium">Empty</span>
             )}
           </div>
         </div>

space/components/ui/dropdown.tsx

@@ -83,7 +83,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
             }
             setOpen((prev) => !prev);
           }}
-          className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark ${
+          className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
             isSelected ? "bg-neutral-component-surface-dark" : ""
           }`}
         >
@@ -109,8 +109,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-custom-text-100 focus:outline-none ${
+            className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-neutral-component-surface-medium hover:text-neutral-text-strong focus:outline-none ${
-              open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
+              open ? "bg-neutral-component-surface-medium text-neutral-text-strong" : "text-neutral-text-medium"
             }`}
           >
             {typeof button === "function" ? button() : button}

space/components/ui/reaction-selector.tsx

@@ -35,7 +35,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 size === "sm" ? "h-6 w-6" : size === "md" ? "h-7 w-7" : "h-8 w-8"
               }`}
             >
-              <Icon iconName="add_reaction" className="scale-125 text-custom-text-100" />
+              <Icon iconName="add_reaction" className="scale-125 text-neutral-text-strong" />
             </span>
           </Popover.Button>
           <Transition

space/components/views/project-details.tsx

@@ -55,7 +55,7 @@ export const ProjectDetailsView = observer(() => {
       {workspace_slug && <IssuePeekOverview />}
 
       {issueStore?.loader && !issueStore.issues ? (
-        <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
+        <div className="py-10 text-center text-sm text-neutral-text-strong">Loading...</div>
       ) : (
         <>
           {issueStore?.error ? (
@@ -67,7 +67,7 @@ export const ProjectDetailsView = observer(() => {
                   </div>
                 </div>
                 <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
-                <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+                <p className="mt-4 text-neutral-text-medium">The public board does not exist. Please check the URL.</p>
               </div>
             </div>
           ) : (

space/pages/404.tsx

@@ -10,7 +10,7 @@ const Custom404Error = () => (
           <Image src={notFoundImage} layout="fill" alt="404- Page not found" />
         </div>
         <div className="text-xl font-medium">Oops! Something went wrong.</div>
-        <div className="text-sm text-custom-text-200">
+        <div className="text-sm text-neutral-text-medium">
           Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
           temporarily unavailable.
         </div>

space/pages/onboarding/index.tsx

@@ -30,7 +30,7 @@ const OnBoardingPage = () => {
               <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
             </div>
           </div>
-          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-custom-text-100 sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
+          <div className="absolute right-4 top-1/4 -translate-y-1/2 text-sm font-medium text-neutral-text-strong sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
             {user?.email}
           </div>
         </div>

space/pages/project-not-published/index.tsx

@@ -12,7 +12,7 @@ const CustomProjectNotPublishedError = () => (
         <div className="text-xl font-medium">
           Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
         </div>
-        <div className="text-sm text-custom-text-200">
+        <div className="text-sm text-neutral-text-medium">
           If this is your project, login to your workspace to adjust its visibility settings and make it public.
         </div>
       </div>

web/components/account/deactivate-account-modal.tsx

@@ -90,13 +90,16 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                   <div className="">
                     <div className="flex items-start gap-x-4">
                       <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
-                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
+                        <Trash2
+                          className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600"
+                          aria-hidden="true"
+                        />
                       </div>
                       <div>
-                        <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
+                        <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-neutral-text-strong">
                           Deactivate your account?
                         </Dialog.Title>
-                        <p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
+                        <p className="mt-6 list-disc pr-4 text-base font-normal text-neutral-text-medium">
                           Once deactivated, you can{"'"}t be assigned issues and be billed for your workspace.To
                           reactivate your account, you will need an invite to a workspace at this email address.
                         </p>

web/components/account/o-auth/github-sign-in.tsx

@@ -44,7 +44,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
         href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button
-          className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
+          className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-neutral-text-strong duration-300 hover:bg-onboarding-background-300 ${
             resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
           }`}
         >

web/components/analytics/custom-analytics/graph/custom-tooltip.tsx

@@ -54,7 +54,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
         }}
       />
       <span
-        className={`font-medium text-custom-text-200 ${
+        className={`font-medium text-neutral-text-medium ${
           params.segment
             ? params.segment === "priority" || params.segment === "state__group"
               ? "capitalize"

web/components/analytics/custom-analytics/main-content.tsx

@@ -45,7 +45,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
             </div>
           ) : (
             <div className="grid h-full place-items-center p-5">
-              <div className="space-y-4 text-custom-text-200">
+              <div className="space-y-4 text-neutral-text-medium">
                 <p className="text-sm">No matching issues found. Try changing the parameters.</p>
               </div>
             </div>
@@ -63,7 +63,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
         )
       ) : (
         <div className="grid h-full place-items-center p-5">
-          <div className="space-y-4 text-custom-text-200">
+          <div className="space-y-4 text-neutral-text-medium">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
               <Button

web/components/analytics/custom-analytics/select-bar.tsx

@@ -28,7 +28,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
     >
       {!isProjectLevel && (
         <div>
-          <h6 className="text-xs text-custom-text-200">Project</h6>
+          <h6 className="text-xs text-neutral-text-medium">Project</h6>
           <Controller
             name="project"
             control={control}
@@ -43,7 +43,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         </div>
       )}
       <div>
-        <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
+        <h6 className="text-xs text-neutral-text-medium">Measure (y-axis)</h6>
         <Controller
           name="y_axis"
           control={control}
@@ -51,7 +51,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         />
       </div>
       <div>
-        <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
+        <h6 className="text-xs text-neutral-text-medium">Dimension (x-axis)</h6>
         <Controller
           name="x_axis"
           control={control}
@@ -69,7 +69,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         />
       </div>
       <div>
-        <h6 className="text-xs text-custom-text-200">Group</h6>
+        <h6 className="text-xs text-neutral-text-medium">Group</h6>
         <Controller
           name="segment"
           control={control}

web/components/analytics/custom-analytics/select/project.tsx

@@ -22,7 +22,7 @@ export const SelectProject: React.FC<Props> = observer((props) => {
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
         <div className="flex items-center gap-2 truncate">
-          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="text-[0.65rem] text-neutral-text-medium flex-shrink-0">{projectDetails?.identifier}</span>
           <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
       ),

web/components/analytics/custom-analytics/select/segment.tsx

@@ -23,7 +23,7 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       label={
         <span>
           {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
-            <span className="text-custom-text-200">No value</span>
+            <span className="text-neutral-text-medium">No value</span>
           )}
         </span>
       }

web/components/analytics/custom-analytics/sidebar/projects-list.tsx

@@ -39,30 +39,30 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
                 )}
                 <h5 className="flex items-center gap-1">
                   <p className="break-words">{truncateText(project.name, 20)}</p>
-                  <span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
+                  <span className="ml-1 text-xs text-neutral-text-medium">({project.identifier})</span>
                 </h5>
               </div>
               <div className="mt-4 w-full space-y-3 pl-2">
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
-                    <Users className="text-custom-text-200" size={14} strokeWidth={2} />
+                    <Users className="text-neutral-text-medium" size={14} strokeWidth={2} />
                     <h6>Total members</h6>
                   </div>
-                  <span className="text-custom-text-200">{project.total_members}</span>
+                  <span className="text-neutral-text-medium">{project.total_members}</span>
                 </div>
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
-                    <Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
+                    <Contrast className="text-neutral-text-medium" size={14} strokeWidth={2} />
                     <h6>Total cycles</h6>
                   </div>
-                  <span className="text-custom-text-200">{project.total_cycles}</span>
+                  <span className="text-neutral-text-medium">{project.total_cycles}</span>
                 </div>
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
-                    <LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
+                    <LayoutGrid className="text-neutral-text-medium" size={14} strokeWidth={2} />
                     <h6>Total modules</h6>
                   </div>
-                  <span className="text-custom-text-200">{project.total_modules}</span>
+                  <span className="text-neutral-text-medium">{project.total_modules}</span>
                 </div>
               </div>
             </div>

web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx

@@ -30,11 +30,11 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             <h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Lead</h6>
+                <h6 className="text-neutral-text-medium">Lead</h6>
                 <span>{cycleOwnerDetails?.display_name}</span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Start Date</h6>
+                <h6 className="text-neutral-text-medium">Start Date</h6>
                 <span>
                   {cycleDetails.start_date && cycleDetails.start_date !== ""
                     ? renderFormattedDate(cycleDetails.start_date)
@@ -42,7 +42,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                 </span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Target Date</h6>
+                <h6 className="text-neutral-text-medium">Target Date</h6>
                 <span>
                   {cycleDetails.end_date && cycleDetails.end_date !== ""
                     ? renderFormattedDate(cycleDetails.end_date)
@@ -56,11 +56,11 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             <h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Lead</h6>
+                <h6 className="text-neutral-text-medium">Lead</h6>
                 <span>{moduleDetails.lead_detail?.display_name}</span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Start Date</h6>
+                <h6 className="text-neutral-text-medium">Start Date</h6>
                 <span>
                   {moduleDetails.start_date && moduleDetails.start_date !== ""
                     ? renderFormattedDate(moduleDetails.start_date)
@@ -68,7 +68,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
                 </span>
               </div>
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Target Date</h6>
+                <h6 className="text-neutral-text-medium">Target Date</h6>
                 <span>
                   {moduleDetails.target_date && moduleDetails.target_date !== ""
                     ? renderFormattedDate(moduleDetails.target_date)
@@ -95,7 +95,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             </div>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
-                <h6 className="text-custom-text-200">Network</h6>
+                <h6 className="text-neutral-text-medium">Network</h6>
                 <span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
               </div>
             </div>

web/components/analytics/custom-analytics/sidebar/sidebar.tsx

@@ -147,12 +147,12 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
       }`}
     >
       <div className="flex flex-wrap items-center gap-2">
-        <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-custom-text-200">
+        <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-neutral-text-medium">
           <LayersIcon height={14} width={14} />
           {analytics ? analytics.total : "..."} Issues
         </div>
         {isProjectLevel && (
-          <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-custom-text-200">
+          <div className="flex items-center gap-1 rounded-md bg-neutral-component-surface-dark px-3 py-1 text-xs text-neutral-text-medium">
             <CalendarDays className="h-3.5 w-3.5" />
             {renderFormattedDate(
               (cycleId

web/components/analytics/custom-analytics/table.tsx

@@ -25,7 +25,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
       <div className="inline-block min-w-full align-middle">
         <table className="min-w-full divide-y divide-neutral-border-medium whitespace-nowrap border-y border-neutral-border-medium">
           <thead className="bg-neutral-component-surface-dark">
-            <tr className="divide-x divide-neutral-border-medium text-sm text-custom-text-100">
+            <tr className="divide-x divide-neutral-border-medium text-sm text-neutral-text-strong">
               <th scope="col" className="px-2.5 py-3 text-left font-medium">
                 {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
               </th>
@@ -64,7 +64,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
             {barGraphData.data.map((item, index) => (
               <tr
                 key={`table-row-${index}`}
-                className="divide-x divide-neutral-border-medium text-xs text-custom-text-200"
+                className="divide-x divide-neutral-border-medium text-xs text-neutral-text-medium"
               >
                 <td
                   className={`flex items-center gap-2 whitespace-nowrap px-2.5 py-2 font-medium ${

web/components/analytics/project-modal/header.tsx

@@ -19,14 +19,14 @@ export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) =>
       <div className="flex items-center gap-2">
         <button
           type="button"
-          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={() => setFullScreen((prevData) => !prevData)}
         >
           {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
         </button>
         <button
           type="button"
-          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
           onClick={handleClose}
         >
           <X size={14} strokeWidth={2} />

web/components/analytics/scope-and-demand/demand.tsx

@@ -13,7 +13,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
   <div className="space-y-3 rounded-[10px] border border-neutral-border-medium p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
-      <h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
+      <h4 className="text-base font-medium text-neutral-text-strong">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
     </div>
     <div className="space-y-6">
@@ -31,11 +31,11 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
                   }}
                 />
                 <h6 className="capitalize">{group.state_group}</h6>
-                <span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-custom-text-200">
+                <span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-neutral-text-medium">
                   {group.state_count}
                 </span>
               </div>
-              <p className="text-custom-text-200">{percentage}%</p>
+              <p className="text-neutral-text-medium">{percentage}%</p>
             </div>
             <div className="bar relative h-1 w-full rounded bg-neutral-component-surface-dark">
               <div
@@ -51,7 +51,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
       })}
     </div>
     <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
-      <p className="flex items-center gap-1 text-custom-text-200">
+      <p className="flex items-center gap-1 text-neutral-text-medium">
         <Triangle className="h-4 w-4" />
         <span>Estimate Demand:</span>
       </p>

web/components/analytics/scope-and-demand/leaderboard.tsx

@@ -44,7 +44,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
                   {user.display_name !== "" ? user?.display_name?.[0] : "?"}
                 </div>
               )}
-              <span className="break-words text-custom-text-200">
+              <span className="break-words text-neutral-text-medium">
                 {user.display_name !== "" ? `${user.display_name}` : "No assignee"}
               </span>
             </div>

web/components/analytics/scope-and-demand/scope-and-demand.tsx

@@ -92,7 +92,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
         )
       ) : (
         <div className="grid h-full place-items-center p-5">
-          <div className="space-y-4 text-custom-text-200">
+          <div className="space-y-4 text-neutral-text-medium">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
               <Button variant="primary" onClick={() => mutateDefaultAnalytics()}>

web/components/analytics/scope-and-demand/scope.tsx

@@ -30,7 +30,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
 
               return (
                 <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
-                  <span className="font-medium text-custom-text-200">
+                  <span className="font-medium text-neutral-text-medium">
                     {assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
                   </span>
                   {datum.value}

web/components/analytics/scope-and-demand/year-wise-issues.tsx

@@ -37,7 +37,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         sliceTooltip={(datum) => (
           <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
-            <span className="text-custom-text-200"> issues closed in </span>
+            <span className="text-neutral-text-medium"> issues closed in </span>
             {datum.slice.points[0].data.xFormatted}
           </div>
         )}

web/components/api-token/delete-token-modal.tsx

@@ -97,12 +97,12 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-neutral-component-surface-light text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-3 p-4">
                   <div className="flex w-full items-center justify-start">
-                    <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+                    <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Are you sure you want to delete the token?
                     </h3>
                   </div>
                   <span>
-                    <p className="text-sm text-custom-text-400">
+                    <p className="text-sm text-neutral-text-subtle">
                       Any application using this token will no longer have the access to Plane data. This action cannot
                       be undone.
                     </p>

web/components/api-token/empty-state.tsx

@@ -19,7 +19,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
       <div className="flex w-full flex-col items-center text-center">
         <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
         <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
-        <p className="mb-7 text-custom-text-300 sm:mb-8">
+        <p className="mb-7 text-neutral-text-medium sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
         </p>
         <Button className="flex items-center gap-1.5" onClick={onClick}>

web/components/api-token/modal/form.tsx

@@ -115,7 +115,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-4">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create token</h3>
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Create token</h3>
         <div className="space-y-3">
           <div>
             <Controller
@@ -168,7 +168,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                       customButton={
                         <div
                           className={`flex items-center gap-2 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 ${
-                            neverExpires ? "text-custom-text-400" : ""
+                            neverExpires ? "text-neutral-text-subtle" : ""
                           }`}
                         >
                           <Calendar className="h-3 w-3" />
@@ -204,7 +204,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                         customDate ? "w-[7.5rem]" : ""
                       } ${
                         neverExpires
-                          ? "!cursor-not-allowed text-custom-text-400"
+                          ? "!cursor-not-allowed text-neutral-text-subtle"
                           : "hover:bg-neutral-component-surface-dark"
                       }`}
                     >
@@ -217,7 +217,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
               )}
             </div>
             {!neverExpires && (
-              <span className="text-xs text-custom-text-400">
+              <span className="text-xs text-neutral-text-subtle">
                 {watch("expired_at") === "custom"
                   ? customDate
                     ? `Expires ${renderFormattedDate(customDate)}`

web/components/api-token/modal/generated-token-details.tsx

@@ -32,8 +32,8 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   return (
     <div>
       <div className="space-y-3">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
+        <h3 className="text-lg font-medium leading-6 text-neutral-text-strong">Key created</h3>
-        <p className="text-sm text-custom-text-400">
+        <p className="text-sm text-neutral-text-subtle">
           Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
           containing the key has been downloaded.
         </p>
@@ -45,11 +45,11 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
       >
         {tokenDetails.token}
         <Tooltip tooltipContent="Copy secret key">
-          <Copy className="h-4 w-4 text-custom-text-400" />
+          <Copy className="h-4 w-4 text-neutral-text-subtle" />
         </Tooltip>
       </button>
       <div className="mt-6 flex items-center justify-between">
-        <p className="text-xs text-custom-text-400">
+        <p className="text-xs text-neutral-text-subtle">
           {tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
         </p>
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>

web/components/api-token/token-list-item.tsx

@@ -36,7 +36,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
             className={`${
               token.is_active
                 ? "bg-green-500/10 text-green-500"
-                : "bg-neutral-component-surface-dark text-custom-text-400"
+                : "bg-neutral-component-surface-dark text-neutral-text-subtle"
             } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
@@ -46,7 +46,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
           {token.description.trim() !== "" && (
             <p className="mb-1 max-w-[70%] break-words text-sm">{token.description}</p>
           )}
-          <p className="mb-1 text-xs leading-6 text-custom-text-400">
+          <p className="mb-1 text-xs leading-6 text-neutral-text-subtle">
             {token.is_active
               ? token.expired_at
                 ? `Expires ${renderFormattedDate(token.expired_at!)}`

web/components/auth-screens/not-authorized-view.tsx

@@ -33,14 +33,14 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
+        <h1 className="text-xl font-medium text-neutral-text-strong">Oops! You are not authorized to view this page</h1>
 
-        <div className="w-full max-w-md text-base text-custom-text-200">
+        <div className="w-full max-w-md text-base text-neutral-text-medium">
           {currentUser ? (
             <p>
               You have signed in as {currentUser.email}. <br />
               <Link href={`/?next_path=${next_path}`}>
-                <span className="font-medium text-custom-text-100">Sign in</span>
+                <span className="font-medium text-neutral-text-strong">Sign in</span>
               </Link>{" "}
               with different account that has access to this page.
             </p>
@@ -48,7 +48,7 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
             <p>
               You need to{" "}
               <Link href={`/?next_path=${next_path}`}>
-                <span className="font-medium text-custom-text-100">Sign in</span>
+                <span className="font-medium text-neutral-text-strong">Sign in</span>
               </Link>{" "}
               with an account that has access to this page.
             </p>

web/components/auth-screens/project/join-project.tsx

@@ -37,9 +37,9 @@ export const JoinProject: React.FC = () => {
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium text-custom-text-100">You are not a member of this project</h1>
+      <h1 className="text-xl font-medium text-neutral-text-strong">You are not a member of this project</h1>
 
-      <div className="w-full max-w-md text-base text-custom-text-200">
+      <div className="w-full max-w-md text-base text-neutral-text-medium">
         <p className="mx-auto w-full text-sm md:w-3/4">
           You are not a member of this project, but you can join this project by clicking the button below.
         </p>

web/components/auth-screens/workspace/not-a-member.tsx

@@ -11,7 +11,7 @@ export const NotAWorkspaceMember = () => (
       <div className="space-y-8 text-center">
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Not Authorized!</h3>
-          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+          <p className="mx-auto w-1/2 text-sm text-neutral-text-medium">
             You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check
             your pending invitations.
           </p>

web/components/automation/auto-archive-automation.tsx

@@ -43,11 +43,11 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
-              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
+              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-neutral-text-strong" />
             </div>
             <div className="">
               <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">
+              <p className="text-sm tracking-tight text-neutral-text-medium">
                 Plane will auto archive issues that have been completed or cancelled.
               </p>
             </div>
@@ -90,7 +90,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
 
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-neutral-component-surface-dark"
+                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-neutral-text-medium hover:bg-neutral-component-surface-dark"
                         onClick={() => setmonthModal(true)}
                       >
                         Customise Time Range

web/components/automation/auto-close-automation.tsx

@@ -73,7 +73,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
             </div>
             <div className="">
               <h4 className="text-sm font-medium">Auto-close issues</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">
+              <p className="text-sm tracking-tight text-neutral-text-medium">
                 Plane will automatically close issue that haven{"'"}t been completed or cancelled.
               </p>
             </div>
@@ -116,7 +116,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                         ))}
                         <button
                           type="button"
-                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark"
+                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-neutral-text-medium hover:bg-neutral-component-surface-dark"
                           onClick={() => setmonthModal(true)}
                         >
                           Customize Time Range
@@ -148,11 +148,11 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                               width="16px"
                             />
                           ) : (
-                            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                            <DoubleCircleIcon className="h-3.5 w-3.5 text-neutral-text-medium" />
                           )}
                           {selectedOption?.name
                             ? selectedOption.name
-                            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+                            : currentDefaultState?.name ?? <span className="text-neutral-text-medium">State</span>}
                         </div>
                       }
                       onChange={(val: string) => {

web/components/automation/select-month-modal.tsx

@@ -71,7 +71,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
               <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
                       Customise Time Range
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -99,7 +99,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     placeholder="Enter Months"
                                     className="w-full border-neutral-border-medium"
                                   />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                  <span className="absolute right-8 top-2.5 text-sm text-neutral-text-medium">
+                                    Months
+                                  </span>
                                 </div>
                               )}
                             />
@@ -131,7 +133,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     placeholder="Enter Months"
                                     className="w-full border-neutral-border-medium"
                                   />
-                                  <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
+                                  <span className="absolute right-8 top-2.5 text-sm text-neutral-text-medium">
+                                    Months
+                                  </span>
                                 </div>
                               )}
                             />

web/components/breadcrumbs/index.tsx

@@ -19,7 +19,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
           className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-sidebar-neutral-border-medium text-center text-sm hover:bg-sidebar-neutral-component-surface-medium"
           onClick={() => router.back()}
         >
-          <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
+          <MoveLeft className="h-4 w-4 text-sidebar-neutral-text-medium group-hover:text-sidebar-neutral-text-strong" />
         </button>
         {children}
       </div>

web/components/command-palette/actions/help-actions.tsx

@@ -25,7 +25,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <Rocket className="h-3.5 w-3.5" />
           Open keyboard shortcuts
         </div>
@@ -37,7 +37,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <FileText className="h-3.5 w-3.5" />
           Open Plane documentation
         </div>
@@ -49,7 +49,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
           Join our Discord
         </div>
@@ -61,7 +61,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
           Report a bug
         </div>
@@ -73,7 +73,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <MessageSquare className="h-3.5 w-3.5" />
           Chat with us
         </div>

web/components/command-palette/actions/issue-actions/actions-list.tsx

@@ -94,7 +94,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <DoubleCircleIcon className="h-3.5 w-3.5" />
           Change state...
         </div>
@@ -107,7 +107,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <Signal className="h-3.5 w-3.5" />
           Change priority...
         </div>
@@ -120,7 +120,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <UserGroupIcon className="h-3.5 w-3.5" />
           Assign to...
         </div>
@@ -132,7 +132,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           {issueDetails?.assignee_ids.includes(currentUser?.id ?? "") ? (
             <>
               <UserMinus2 className="h-3.5 w-3.5" />
@@ -147,7 +147,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         </div>
       </Command.Item>
       <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <Trash2 className="h-3.5 w-3.5" />
           Delete issue
         </div>
@@ -159,7 +159,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         }}
         className="focus:outline-none"
       >
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 text-neutral-text-medium">
           <LinkIcon className="h-3.5 w-3.5" />
           Copy issue URL
         </div>

web/components/command-palette/actions/project-actions.tsx

@@ -28,7 +28,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <ContrastIcon className="h-3.5 w-3.5" />
             Create new cycle
           </div>
@@ -44,7 +44,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <DiceIcon className="h-3.5 w-3.5" />
             Create new module
           </div>
@@ -60,7 +60,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <PhotoFilterIcon className="h-3.5 w-3.5" />
             Create new view
           </div>
@@ -76,7 +76,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           }}
           className="focus:outline-none"
         >
-          <div className="flex items-center gap-2 text-custom-text-200">
+          <div className="flex items-center gap-2 text-neutral-text-medium">
             <FileText className="h-3.5 w-3.5" />
             Create new page
           </div>

web/components/command-palette/actions/search-results.tsx

@@ -34,7 +34,7 @@ export const CommandPaletteSearchResults: React.FC<Props> = (props) => {
                   value={`${key}-${item?.id}-${item.name}-${item.project__identifier ?? ""}-${item.sequence_id ?? ""}`}
                   className="focus:outline-none"
                 >
-                  <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
+                  <div className="flex items-center gap-2 overflow-hidden text-neutral-text-medium">
                     {currentSection.icon}
                     <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
                   </div>