chore: update main content border colors

packages/editor/core/src/lib/utils.ts

@@ -9,8 +9,8 @@ interface EditorClassNames {
 export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) =>
   cn(
     "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
-    noBorder ? "" : "border border-custom-border-200",
-    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
+    noBorder ? "" : "border border-neutral-border-medium",
+    borderOnFocus ? "focus:border border-neutral-border-medium" : "focus:border-0",
     customClassName
   );
 

packages/editor/core/src/ui/extensions/index.tsx

@@ -63,7 +63,7 @@ export const CoreEditorExtensions = (
     },
   }),
   CustomQuoteExtension.configure({
-    HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
+    HTMLAttributes: { className: "border-l-4 border-neutral-border-medium" },
   }),
   CustomKeymap,
   ListKeymap,
@@ -80,7 +80,7 @@ export const CoreEditorExtensions = (
   }),
   ImageExtension(deleteFile, restoreFile, cancelUploadImage).configure({
     HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
+      class: "rounded-lg border border-neutral-border-medium",
     },
   }),
   TiptapUnderline,

packages/editor/core/src/ui/plugins/upload-image.tsx

@@ -21,7 +21,7 @@ export const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
           const placeholder = document.createElement("div");
           placeholder.setAttribute("class", "img-placeholder");
           const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+          image.setAttribute("class", "opacity-10 rounded-lg border border-neutral-border-medium");
           image.src = src;
           placeholder.appendChild(image);
 

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

@@ -41,7 +41,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     },
     blockquote: {
       HTMLAttributes: {
-        class: "border-l-4 border-custom-border-300",
+        class: "border-l-4 border-neutral-border-medium",
       },
     },
     code: {
@@ -69,7 +69,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   }),
   ReadOnlyImageExtension.configure({
     HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
+      class: "rounded-lg border border-neutral-border-medium",
     },
   }),
   HorizontalRule,

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

@@ -42,7 +42,7 @@ export const EditorHeader = (props: IEditorHeader) => {
   } = props;
 
   return (
-    <div className="flex items-center border-b border-custom-border-200 px-5 py-2">
+    <div className="flex items-center border-b border-neutral-border-medium px-5 py-2">
       <div className="w-56 flex-shrink-0 lg:w-72">
         <SummaryPopover
           editor={editor}

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

@@ -43,7 +43,7 @@ export const InfoPopover: React.FC<Props> = (props) => {
       </button>
       {isPopoverOpen && (
         <div
-          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 p-3 shadow-custom-shadow-rg"
           ref={setPopperElement}
           style={infoPopoverStyles.popper}
           {...infoPopoverAttributes.popper}

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

@@ -122,7 +122,7 @@ export const LinkEditView = ({
   return (
     <div
       onKeyDown={(e) => e.key === "Enter" && viewProps.closeLinkView()}
-      className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2"
+      className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-neutral-border-subtle border-2"
     >
       <InputView
         label={"URL"}

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-custom-background-90 border-custom-border-100 border-2 text-custom-text-300 text-xs">
+      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-custom-background-90 border-neutral-border-subtle border-2 text-custom-text-300 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

@@ -42,7 +42,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       </button>
       {!sidePeekVisible && (
         <div
-          className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
+          className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
           ref={setPopperElement}
           style={summaryPopoverStyles.popper}
           {...summaryPopoverAttributes.popper}

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

@@ -36,7 +36,7 @@ export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => (
     maxHeight={"md"}
     className={"h-4.5 mt-1"}
     placement={"bottom-start"}
-    optionsClassName={"border-custom-border border-r border-solid transition-all duration-200 ease-in-out "}
+    optionsClassName="border-neutral-border-medium border-r border-solid transition-all duration-200 ease-in-out"
     customButton={<MoreVertical size={14} />}
   >
     {items.map((item) => (

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

@@ -145,7 +145,7 @@ const IssueSuggestionList = ({
     <div
       id="issue-list-container"
       ref={commandListContainer}
-      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
+      className=" fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-neutral-border-subtle bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
     >
       {sections.map((section) => {
         const sectionItems = displayedItems[section];

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

@@ -8,7 +8,7 @@ export const IssueWidgetCard = (props) => (
     <div
       className={`${
         props.selected ? "border-custom-primary-200 border-[2px]" : ""
-      } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
+      } 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">
         {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}

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

@@ -77,7 +77,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   }
 
   return (
-    <div className="flex items-center divide-x divide-custom-border-200">
+    <div className="flex items-center divide-x divide-neutral-border-medium">
       <div className="flex items-center gap-0.5 pr-2">
         {basicMarkItems.map((item) => (
           <button

packages/editor/extensions/Readme.md

@@ -92,6 +92,6 @@ Here is an example of how to use the `RichReadOnlyEditor` component
 ```tsx
 <LiteReadOnlyEditor
   value={comment.comment_html}
-  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
 />
 ```

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

@@ -291,7 +291,7 @@ const CommandList = ({ items, command }: { items: CommandItemProps[]; command: a
     <div
       id="slash-command"
       ref={commandListContainer}
-      className="fixed z-50 h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+      className="fixed z-50 h-auto max-h-[330px] w-52 overflow-y-auto rounded-md border border-neutral-border-medium bg-custom-background-100 px-1 py-2 shadow-md transition-all"
     >
       {items.map((item, index) => (
         <button

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

@@ -92,6 +92,6 @@ Here is an example of how to use the `RichReadOnlyEditor` component
 ```tsx
 <LiteReadOnlyEditor
   value={comment.comment_html}
-  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
 />
 ```

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

@@ -95,7 +95,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   return (
     <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll">
       {props.commentAccessSpecifier && (
-        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
+        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-neutral-border-medium p-1">
           {props?.commentAccessSpecifier.commentAccess?.map((access) => (
             <Tooltip key={access.key} tooltipContent={access.label}>
               <button
@@ -118,9 +118,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
           ))}
         </div>
       )}
-      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 p-1">
+      <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 p-1">
         <div className="flex items-stretch">
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 pr-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium pr-2.5">
             {basicTextFormattingItems.map((item) => (
               <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                 <button
@@ -143,7 +143,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
               </Tooltip>
             ))}
           </div>
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium px-2.5">
             {listFormattingItems.map((item) => (
               <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                 <button
@@ -166,7 +166,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
               </Tooltip>
             ))}
           </div>
-          <div className="flex items-stretch gap-0.5 border-r border-custom-border-200 px-2.5">
+          <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium px-2.5">
             {userActionItems.map((item) => (
               <Tooltip key={item.name} tooltipContent={<span className="capitalize">{item.name}</span>}>
                 <button

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

@@ -94,7 +94,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+      className="flex w-fit divide-x divide-neutral-border-medium rounded border border-neutral-border-medium bg-custom-background-100 shadow-xl"
     >
       {isSelecting ? null : (
         <>

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

@@ -48,7 +48,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
       </button>
       {isOpen && (
         <div
-          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
+          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
           onKeyDown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -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-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 border-r border-neutral-border-medium bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (

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

@@ -55,7 +55,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
       </button>
 
       {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
           {items.map((item) => (
             <button
               key={item.name}
@@ -72,7 +72,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
               )}
             >
               <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1">
+                <div className="rounded-sm border border-neutral-border-medium p-1">
                   <item.icon className="h-3 w-3" />
                 </div>
                 <span>{item.name}</span>

packages/ui/src/badge/helper.tsx

@@ -57,7 +57,7 @@ export const badgeStyling: IBadgeStyling = {
   },
 
   neutral: {
-    default: `text-custom-background-100 bg-custom-text-100 border border-custom-border-200`,
+    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`,
   },
@@ -67,7 +67,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },
   "outline-neutral": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    default: `text-custom-text-200 bg-custom-background-100 border border-neutral-border-medium`,
     hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },

packages/ui/src/button/helper.tsx

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

packages/ui/src/button/toggle-switch.tsx

@@ -21,7 +21,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
       onChange={onChange}
       className={`relative inline-flex flex-shrink-0 ${
         size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
-      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
+      } flex-shrink-0 cursor-pointer rounded-full border border-neutral-border-medium transition-colors duration-200 ease-in-out focus:outline-none ${
         value ? "bg-custom-primary-100" : "bg-gray-700"
       } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
     >

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

@@ -61,7 +61,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     >
       <div
         className={cn(
-          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
           {
             "max-h-60": maxHeight === "lg",
             "max-h-48": maxHeight === "md",
@@ -133,7 +133,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     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-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
+                    } ${noBorder ? "" : "border border-neutral-border-medium shadow-sm focus:outline-none"} ${
                       disabled
                         ? "cursor-not-allowed text-custom-text-200"
                         : "cursor-pointer hover:bg-custom-background-80"

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

@@ -100,7 +100,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <button
                   ref={setReferenceElement}
                   type="button"
-                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
+                  className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium ${
                     input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
                   } ${
                     disabled
@@ -118,14 +118,14 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
               <Combobox.Options className="fixed z-10" static>
                 <div
                   className={cn(
-                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
                     optionsClassName
                   )}
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
                 >
-                  <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+                  <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-custom-background-90 px-2">
                     <Search className="h-3.5 w-3.5 text-custom-text-400" 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"

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

@@ -77,7 +77,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
+              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-neutral-border-medium ${
                 input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
               } ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
@@ -94,7 +94,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
         <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
           <div
             className={cn(
-              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
               {
                 "max-h-60": maxHeight === "lg",
                 "max-h-48": maxHeight === "md",

packages/ui/src/form-fields/input-color-picker.tsx

@@ -45,7 +45,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
         onChange={handleInputChange}
         hasError={hasError}
         placeholder={placeholder}
-        className={`border-[0.5px] border-custom-border-200 ${className}`}
+        className={`border-[0.5px] border-neutral-border-medium ${className}`}
         style={style}
       />
 
@@ -93,7 +93,7 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
               >
                 <Popover.Panel>
                   <div
-                    className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                    className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-rg"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}

packages/ui/src/form-fields/input.tsx

@@ -18,7 +18,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       name={name}
       className={`block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none ${
         mode === "primary"
-          ? "rounded-md border-[0.5px] border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-neutral-border-medium"
           : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
             : mode === "true-transparent"

packages/ui/src/form-fields/textarea.tsx

@@ -48,7 +48,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
       cols={cols}
       className={`no-scrollbar w-full bg-transparent px-3 py-2 placeholder-custom-text-400 outline-none ${
         mode === "primary"
-          ? "rounded-md border-[0.5px] border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-neutral-border-medium"
           : mode === "transparent"
             ? "focus:ring-theme rounded border-none bg-transparent ring-0 transition-all focus:ring-1"
             : ""

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

@@ -20,7 +20,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
     high: "bg-orange-500/20 text-orange-500 border-orange-500",
     medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
     low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
-    none: "bg-custom-background-80 text-custom-text-200 border-custom-border-300",
+    none: "bg-custom-background-80 text-custom-text-200 border-neutral-border-medium",
   };
 
   // get priority icon

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-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80">
+        <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-custom-background-80">
           <Image
             src={theme === "dark" ? githubWhiteImage : githubBlackImage}
             height={20}

space/components/accounts/onboarding-form.tsx

@@ -125,7 +125,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                 <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
                   <Listbox.Button
                     type="button"
-                    className={`flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-300 px-3 py-2 text-sm shadow-sm duration-300 focus:outline-none`}
+                    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>
                     <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
@@ -141,7 +141,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                     leaveTo="transform opacity-0 scale-95"
                   >
                     <Listbox.Options
-                      className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none`}
+                      className={`absolute left-0 z-10 mt-1 max-h-36 w-full origin-top-left overflow-y-auto rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none`}
                     >
                       <div className="space-y-1 p-2">
                         {USER_ROLES.map((role) => (

space/components/accounts/user-logged-in.tsx

@@ -14,11 +14,11 @@ export const UserLoggedIn = () => {
 
   return (
     <div className="flex h-screen w-screen flex-col">
-      <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
+      <div className="relative flex w-full items-center justify-between gap-4 border-b border-neutral-border-medium px-6 py-5">
         <div>
           <Image src={PlaneLogo} alt="User already logged in" />
         </div>
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <div className="flex items-center gap-2 rounded border border-neutral-border-medium p-2">
           {user.avatar && user.avatar !== "" ? (
             <div className="h-5 w-5 rounded-full">
               {/* eslint-disable-next-line @next/next/no-img-element */}

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

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

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-custom-border-300 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-custom-text-100">
       <span className={`material-symbols-rounded -my-0.5 text-sm ${iconDetails.className}`}>
         {iconDetails.iconName}
       </span>

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

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

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

@@ -8,7 +8,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-custom-border-300 px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
+    <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">
         <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>

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

@@ -1,7 +1,7 @@
 "use client";
 
 export const IssueBlockUpVotes = ({ number }: { number: number }) => (
-  <div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 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-custom-text-300">
     <span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
     {number}
   </div>

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

@@ -44,7 +44,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-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
+    <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
       {/* id */}
       <div className="break-words text-xs text-custom-text-300">
         {projectStore?.project?.identifier}-{issue?.sequence_id}

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

@@ -21,7 +21,7 @@ export const IssueListView = observer(() => {
             <IssueListHeader state={_state} />
             {issueStore.getFilteredIssuesByState(_state.id) &&
             issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="divide-y divide-custom-border-200">
+              <div className="divide-y divide-neutral-border-medium">
                 {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
                   <IssueListBlock key={_issue.id} issue={_issue} />
                 ))}

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

@@ -31,7 +31,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            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>
             <div className="flex flex-wrap items-center gap-1">
@@ -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-custom-border-200 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-custom-text-300 hover:text-custom-text-200"
       >
         Clear all
         <X size={12} strokeWidth={2} />

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

@@ -77,7 +77,7 @@ export const IssueAppliedFilters: FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="border-b border-custom-border-200 p-5 py-3">
+    <div className="border-b border-neutral-border-medium p-5 py-3">
       <AppliedFiltersList
         appliedFilters={appliedFilters || {}}
         handleRemoveFilter={handleRemoveFilter}

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

@@ -46,7 +46,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-rg"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}

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

@@ -21,7 +21,7 @@ export const FilterOption: React.FC<Props> = (props) => {
     >
       <div
         className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
-          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
+          isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-neutral-border-medium"
         } ${multiple ? "rounded-sm" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}

space/components/issues/filters/selection.tsx

@@ -28,7 +28,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="bg-custom-background-100 p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-1.5 py-1 text-xs">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input
             type="text"
@@ -45,7 +45,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-neutral-border-medium overflow-y-auto px-2.5">
         {/* priority */}
         {isFilterEnabled("priority") && (
           <div className="py-2">

space/components/issues/navbar/index.tsx

@@ -168,7 +168,7 @@ const IssueNavbar = observer(() => {
       </div>
 
       {user ? (
-        <div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
+        <div className="flex items-center gap-2 rounded border border-neutral-border-medium p-2">
           <Avatar name={user?.display_name} src={user?.avatar} shape="square" size="sm" />
           <h6 className="text-xs font-medium">{user.display_name}</h6>
         </div>

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

@@ -72,7 +72,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             }
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-neutral-border-medium"
           />
         ) : (
           <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
@@ -143,7 +143,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
               value={comment.comment_html}
-              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
               mentionHighlights={mentionsConfig.mentionHighlights}
             />
             <CommentReactions commentId={comment.id} projectId={comment.project} />
@@ -170,7 +170,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">

space/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -19,7 +19,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
   const { handleClose, issueDetails } = props;
 
   return (
-    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-neutral-border-medium overflow-hidden">
       <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
         <div className="w-full p-5">
           <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
@@ -31,7 +31,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
               <PeekOverviewIssueDetails issueDetails={issueDetails} />
             </div>
             {/* divider */}
-            <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+            <div className="my-5 h-[1] w-full border-t border-neutral-border-medium" />
             {/* issue activity/comments */}
             <div className="w-full pb-5">
               <PeekOverviewIssueActivity issueDetails={issueDetails} />

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

@@ -88,7 +88,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[8rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none">
                 <div className="space-y-1 p-2">
                   {peekModes.map((mode) => (
                     <Listbox.Option

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

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

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

@@ -42,7 +42,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
   };
 
   return (
-    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+    <div className={mode === "full" ? "divide-y divide-neutral-border-medium" : ""}>
       {mode === "full" && (
         <div className="flex justify-between gap-2 pb-3">
           <h6 className="flex items-center gap-2 font-medium">
@@ -89,7 +89,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
                       ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                       : priority?.key === "low"
                         ? "border-green-500/20 bg-green-500/20 text-green-500"
-                        : "border-custom-border-200 bg-custom-background-80"
+                        : "border-neutral-border-medium bg-custom-background-80"
               }`}
             >
               {priority && (
@@ -108,7 +108,7 @@ 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-custom-border-100 bg-custom-background-80 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-custom-background-80 px-2.5 py-1 text-xs text-custom-text-100">
                 <span className={`material-symbols-rounded -my-0.5 text-sm ${dueDateIcon.className}`}>
                   {dueDateIcon.iconName}
                 </span>

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

@@ -83,7 +83,7 @@ export const IssueVotes: React.FC = observer(() => {
             });
           }}
           className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
-            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
+            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-neutral-border-medium"
           }`}
         >
           <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_upward_alt</span>
@@ -118,7 +118,7 @@ export const IssueVotes: React.FC = observer(() => {
             });
           }}
           className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
-            isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
+            isDownVotedByUser ? "border-red-600 text-red-600" : "border-neutral-border-medium"
           }`}
         >
           <span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_downward_alt</span>

space/components/issues/peek-overview/side-peek-view.tsx

@@ -34,7 +34,7 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
             <PeekOverviewIssueProperties issueDetails={issueDetails} />
           </div>
           {/* divider */}
-          <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+          <div className="my-5 h-[1] w-full border-t border-neutral-border-medium" />
           {/* issue activity/comments */}
           <div className="w-full pb-5">
             <PeekOverviewIssueActivity issueDetails={issueDetails} />

space/components/ui/dropdown.tsx

@@ -52,7 +52,7 @@ const DropdownList: React.FC<DropDownListProps> = (props) => {
       >
         <Popover.Panel
           ref={ref}
-          className="absolute left-1/2 z-10 mt-1 max-w-[9rem] origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none"
+          className="absolute left-1/2 z-10 mt-1 max-w-[9rem] origin-top-right -translate-x-full select-none rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none"
         >
           <div className="w-full rounded-md text-sm shadow-lg">
             {items.map((item, index) => (
@@ -109,7 +109,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-custom-background-90 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-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
               open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
             }`}
           >
@@ -125,7 +125,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="absolute left-full z-10 mt-1 w-36 origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+            <Popover.Panel className="absolute left-full z-10 mt-1 w-36 origin-top-right -translate-x-full select-none rounded-md border border-neutral-border-medium bg-custom-background-90 text-xs shadow-lg focus:outline-none">
               <div className="w-full">
                 {items.map((item, index) => (
                   <DropdownItem key={index} item={item} />

space/components/ui/reaction-selector.tsx

@@ -52,7 +52,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 position === "top" ? "-top-12" : "-bottom-12"
               }`}
             >
-              <div className="rounded-md border border-custom-border-200 bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
+              <div className="rounded-md border border-neutral-border-medium bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
                 <div className="flex gap-x-1">
                   {reactionEmojis.map((emoji) => (
                     <button

space/components/views/login.tsx

@@ -32,7 +32,7 @@ export const LoginView = observer(() => {
                 </div>
               </div>
 
-              <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+              <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
                 <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
                   {!true ? (
                     <div className="mx-auto flex justify-center pt-10">

space/constants/data.ts

@@ -33,25 +33,25 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
   {
     key: "high",
     title: "High",
-    className: "text-orange-500 border-custom-border-300",
+    className: "text-orange-500 border-neutral-border-medium",
     icon: "signal_cellular_alt",
   },
   {
     key: "medium",
     title: "Medium",
-    className: "text-yellow-500 border-custom-border-300",
+    className: "text-yellow-500 border-neutral-border-medium",
     icon: "signal_cellular_alt_2_bar",
   },
   {
     key: "low",
     title: "Low",
-    className: "text-green-500 border-custom-border-300",
+    className: "text-green-500 border-neutral-border-medium",
     icon: "signal_cellular_alt_1_bar",
   },
   {
     key: "none",
     title: "None",
-    className: "text-gray-500 border-custom-border-300",
+    className: "text-gray-500 border-neutral-border-medium",
     icon: "block",
   },
 ];

space/layouts/project-layout.tsx

@@ -8,14 +8,14 @@ import IssueNavbar from "components/issues/navbar";
 
 const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
   <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-    <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+    <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-neutral-border-medium bg-custom-sidebar-background-100">
       <IssueNavbar />
     </div>
     <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
 
     <a
       href="https://plane.so"
-      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-neutral-border-medium bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
       target="_blank"
       rel="noreferrer noopener"
     >

space/pages/accounts/password.tsx

@@ -81,9 +81,9 @@ const HomePage: NextPage = () => {
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-neutral-border-medium bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          <div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
+          <div className="mx-auto flex flex-col divide-y divide-neutral-border-medium sm:w-96">
             <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
               Let{"'"}s get a new password
             </h1>

space/pages/onboarding/index.tsx

@@ -24,7 +24,7 @@ const OnBoardingPage = () => {
     <div className="h-screen w-full overflow-hidden bg-custom-background-100">
       <div className="flex h-full w-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
         <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute left-0 top-1/2 z-10 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
+          <div className="absolute left-0 top-1/2 z-10 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-neutral-border-medium sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <div className="absolute left-2 top-1/2 z-10 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 py-5 sm:left-1/2 sm:top-12 sm:-translate-x-1/2 sm:translate-y-0 sm:px-0 md:left-1/3">
             <div className="h-[30px] w-[30px]">
               <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />

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

@@ -46,7 +46,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{

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

@@ -142,7 +142,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
     <div
       className={`flex items-center justify-between space-y-2 px-5 py-2.5 ${
         fullScreen
-          ? "overflow-hidden border-l border-custom-border-200 md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-custom-border-200 md:py-5"
+          ? "overflow-hidden border-l border-neutral-border-medium md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-neutral-border-medium md:py-5"
           : ""
       }`}
     >

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

@@ -23,9 +23,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
   <div className="flow-root">
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full align-middle">
-        <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
+        <table className="min-w-full divide-y divide-neutral-border-medium whitespace-nowrap border-y border-neutral-border-medium">
           <thead className="bg-custom-background-80">
-            <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
+            <tr className="divide-x divide-neutral-border-medium text-sm text-custom-text-100">
               <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>
@@ -60,9 +60,12 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
               )}
             </tr>
           </thead>
-          <tbody className="divide-y divide-custom-border-200">
+          <tbody className="divide-y divide-neutral-border-medium">
             {barGraphData.data.map((item, index) => (
-              <tr key={`table-row-${index}`} className="divide-x divide-custom-border-200 text-xs text-custom-text-200">
+              <tr
+                key={`table-row-${index}`}
+                className="divide-x divide-neutral-border-medium text-xs text-custom-text-200"
+              >
                 <td
                   className={`flex items-center gap-2 whitespace-nowrap px-2.5 py-2 font-medium ${
                     params.x_axis === "priority" || params.x_axis === "state__group" ? "capitalize" : ""

web/components/analytics/project-modal/main-content.tsx

@@ -20,12 +20,12 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
 
   return (
     <Tab.Group as={React.Fragment}>
-      <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
+      <Tab.List as="div" className="space-x-2 border-b border-neutral-border-medium p-5 pt-0">
         {ANALYTICS_TABS.map((tab) => (
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+              `rounded-3xl border border-neutral-border-medium px-4 py-2 text-xs hover:bg-custom-background-80 ${
                 selected ? "bg-custom-background-80" : ""
               }`
             }

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

@@ -43,7 +43,7 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
               }`}
             >
               <div
-                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                className={`flex h-full flex-col overflow-hidden border-neutral-border-medium bg-custom-background-100 text-left ${
                   fullScreen ? "rounded-lg border" : "border-l"
                 }`}
               >

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

@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
+  <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>
@@ -50,7 +50,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-custom-border-200 bg-custom-background-80 p-2 text-xs">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
         <Triangle className="h-4 w-4" />
         <span>Estimate Demand:</span>

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

@@ -18,7 +18,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
-  <div className="rounded-[10px] border border-custom-border-200 p-3">
+  <div className="rounded-[10px] border border-neutral-border-medium p-3">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">

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

@@ -10,9 +10,9 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200">
+  <div className="rounded-[10px] border border-neutral-border-medium">
     <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-    <div className="divide-y divide-custom-border-200">
+    <div className="divide-y divide-neutral-border-medium">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
         {defaultAnalytics.pending_issue_user && defaultAnalytics.pending_issue_user.length > 0 ? (
@@ -29,7 +29,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               );
 
               return (
-                <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
                   <span className="font-medium text-custom-text-200">
                     {assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
                   </span>

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

@@ -12,7 +12,7 @@ type Props = {
 };
 
 export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200 py-3">
+  <div className="rounded-[10px] border border-neutral-border-medium py-3">
     <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
     {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
       <LineGraph
@@ -35,7 +35,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         margin={{ top: 20 }}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues closed in </span>
             {datum.slice.points[0].data.xFormatted}

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

@@ -94,7 +94,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-neutral-border-medium bg-custom-background-100 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">

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

@@ -14,7 +14,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
 
   return (
     <div
-      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
+      className={`mx-auto flex w-full items-center justify-center rounded-sm border border-neutral-border-medium bg-custom-background-90 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
         <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />

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

@@ -167,7 +167,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                     <CustomSelect
                       customButton={
                         <div
-                          className={`flex items-center gap-2 rounded border-[0.5px] border-custom-border-200 px-2 py-1 ${
+                          className={`flex items-center gap-2 rounded border-[0.5px] border-neutral-border-medium px-2 py-1 ${
                             neverExpires ? "text-custom-text-400" : ""
                           }`}
                         >
@@ -200,7 +200,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                   minDate={tomorrow}
                   customInput={
                     <div
-                      className={`flex cursor-pointer items-center gap-2 !rounded border-[0.5px] border-custom-border-200 px-2 py-1 text-xs !shadow-none !duration-0 ${
+                      className={`flex cursor-pointer items-center gap-2 !rounded border-[0.5px] border-neutral-border-medium px-2 py-1 text-xs !shadow-none !duration-0 ${
                         customDate ? "w-[7.5rem]" : ""
                       } ${neverExpires ? "!cursor-not-allowed text-custom-text-400" : "hover:bg-custom-background-80"}`}
                     >

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

@@ -41,7 +41,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
       <button
         type="button"
         onClick={() => copyApiToken(tokenDetails.token ?? "")}
-        className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
+        className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-neutral-border-medium px-3 py-2 text-sm font-medium outline-none"
       >
         {tokenDetails.token}
         <Tooltip tooltipContent="Copy secret key">

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

@@ -21,7 +21,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
   return (
     <>
       <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
-      <div className="group relative flex flex-col justify-center border-b border-custom-border-200 px-4 py-3">
+      <div className="group relative flex flex-col justify-center border-b border-neutral-border-medium px-4 py-3">
         <Tooltip tooltipContent="Delete token">
           <button
             onClick={() => setDeleteModalOpen(true)}

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

@@ -39,7 +39,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-neutral-border-subtle px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
@@ -67,7 +67,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         {currentProjectDetails ? (
           currentProjectDetails.archive_in !== 0 && (
             <div className="ml-12">
-              <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
+              <div className="flex w-full items-center justify-between gap-2 rounded border border-neutral-border-medium bg-custom-background-90 px-5 py-4">
                 <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
                 <div className="w-1/2">
                   <CustomSelect

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

@@ -65,7 +65,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-neutral-border-medium px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">
@@ -93,7 +93,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
         {currentProjectDetails ? (
           currentProjectDetails.close_in !== 0 && (
             <div className="ml-12">
-              <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
+              <div className="flex flex-col rounded border border-neutral-border-medium bg-custom-background-90">
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
                   <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
                   <div className="w-1/2">

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

@@ -97,7 +97,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     ref={ref}
                                     hasError={Boolean(errors.close_in)}
                                     placeholder="Enter Months"
-                                    className="w-full border-custom-border-200"
+                                    className="w-full border-neutral-border-medium"
                                   />
                                   <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
@@ -129,7 +129,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     ref={ref}
                                     hasError={Boolean(errors.archive_in)}
                                     placeholder="Enter Months"
-                                    className="w-full border-custom-border-200"
+                                    className="w-full border-neutral-border-medium"
                                   />
                                   <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>

web/components/command-palette/command-modal.tsx

@@ -165,7 +165,7 @@ export const CommandModal: React.FC = observer(() => {
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <div className="w-full max-w-2xl transform divide-y divide-neutral-border-medium divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -220,7 +220,7 @@ export const CommandModal: React.FC = observer(() => {
                       strokeWidth={2}
                     />
                     <Command.Input
-                      className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                      className="w-full border-0 border-b border-neutral-border-medium bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
                       placeholder={placeholder}
                       value={searchTerm}
                       onValueChange={(e) => setSearchTerm(e)}

web/components/command-palette/shortcuts-modal/commands-list.tsx

@@ -65,11 +65,11 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
                         {shortcut.keys.split(",").map((key) => (
                           <div key={key} className="flex items-center gap-1">
                             {key === "Ctrl" ? (
-                              <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5">
+                              <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-1.5">
                                 <Command className="h-2.5 w-2.5 text-custom-text-200" />
                               </div>
                             ) : (
-                              <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
+                              <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
                                 {key}
                               </kbd>
                             )}

web/components/command-palette/shortcuts-modal/modal.tsx

@@ -55,7 +55,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
                       <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                     </button>
                   </Dialog.Title>
-                  <div className="flex w-full items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <div className="flex w-full items-center rounded border-[0.5px] border-neutral-border-medium bg-custom-background-90 px-2">
                     <Search className="h-3.5 w-3.5 text-custom-text-200" />
                     <Input
                       id="search"

web/components/common/new-empty-state.tsx

@@ -43,7 +43,7 @@ export const NewEmptyState: React.FC<Props> = ({
   return (
     <div className="flex items-center justify-center overflow-y-auto">
       <div className=" flex h-full w-full flex-col items-center justify-center ">
-        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-8">
+        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-neutral-border-medium px-10 py-7 shadow-sm md:m-8">
           <h3 className="text-2xl font-semibold">{title}</h3>
           {description && <p className=" text-lg">{description}</p>}
           <div className="relative w-full max-w-6xl">
@@ -82,10 +82,10 @@ export const NewEmptyState: React.FC<Props> = ({
                     comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
                   } pb-5`}
                 >
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-neutral-border-medium border-y-transparent">
                     <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                   </div>
-                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                  <div className="rounded-md border border-neutral-border-medium bg-custom-background-100">
                     <h1 className="p-5">
                       <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                       <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
@@ -94,10 +94,10 @@ export const NewEmptyState: React.FC<Props> = ({
                 </div>
               ) : (
                 <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
-                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-neutral-border-medium border-y-transparent">
                     <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
                   </div>
-                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                  <div className="rounded-md border border-neutral-border-medium bg-custom-background-100">
                     <h1 className="p-5">
                       <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                       <h4 className="mt-1 text-sm">{comicBox?.description}</h4>

web/components/common/product-updates-modal.tsx

@@ -64,12 +64,12 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       {updates.map((item, index) => (
                         <React.Fragment key={item.id}>
                           <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                            <span className="flex items-center rounded-full border border-neutral-border-medium bg-custom-background-90 px-3 py-1.5 text-xs">
                               {item.tag_name}
                             </span>
                             <span>{renderFormattedDate(item.published_at)}</span>
                             {index === 0 && (
-                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                              <span className="flex items-center rounded-full border border-neutral-border-medium bg-custom-primary px-3 py-1.5 text-xs text-white">
                                 New
                               </span>
                             )}

web/components/core/activity.tsx

@@ -262,7 +262,7 @@ const activityDetails: {
         return (
           <>
             added a new label{" "}
-            <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-neutral-border-medium px-2 py-0.5 text-xs">
               <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
               <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.new_value}</span>
             </span>
@@ -278,7 +278,7 @@ const activityDetails: {
         return (
           <>
             removed the label{" "}
-            <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+            <span className="inline-flex w-min items-center gap-2 truncate whitespace-nowrap rounded-full border border-neutral-border-medium px-2 py-0.5 text-xs">
               <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
               <span className="flex-shrink truncate font-medium text-custom-text-100">{activity.old_value}</span>
             </span>

web/components/core/image-picker-popover.tsx

@@ -139,7 +139,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
   return (
     <Popover className="relative z-[2]" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
       <Popover.Button
-        className="rounded border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        className="rounded border border-neutral-border-medium bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={openDropdown}
         disabled={disabled}
       >
@@ -148,12 +148,12 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
       {isOpen && (
         <Popover.Panel
-          className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm"
+          className="absolute right-0 z-10 mt-2 rounded-md border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-sm"
           static
         >
           <div
             ref={imagePickerRef}
-            className="flex h-96 w-80 flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
+            className="flex h-96 w-80 flex-col overflow-auto rounded border border-neutral-border-medium bg-custom-background-100 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
           >
             <Tab.Group>
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
@@ -282,7 +282,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                         {...getRootProps()}
                         className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-custom-background-90"
                             : ""
                         }`}
                       >

web/components/core/modals/bulk-delete-issues-modal.tsx

@@ -130,7 +130,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
             leaveTo="opacity-0 scale-95"
           >
             <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <div className="w-full max-w-2xl transform divide-y divide-neutral-border-medium divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <form>
                   <Combobox
                     onChange={(val: string) => {
@@ -158,7 +158,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
 
                     <Combobox.Options
                       static
-                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
+                      className="max-h-80 scroll-py-2 divide-y divide-neutral-border-medium overflow-y-auto"
                     >
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">

web/components/core/modals/existing-issues-list-modal.tsx

@@ -153,7 +153,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
+                            className="flex items-center gap-1 whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-80 py-1 pl-2 text-xs text-custom-text-100"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -167,7 +167,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         ))}
                       </div>
                     ) : (
-                      <div className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                      <div className="w-min whitespace-nowrap rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
                         No issues selected
                       </div>
                     )}

web/components/core/modals/gpt-assistant-popover.tsx

@@ -194,7 +194,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
       >
         <Popover.Panel
           as="div"
-          className={`fixed z-10 flex flex-col w-full max-w-full min-w-[50rem] space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
+          className={`fixed z-10 flex flex-col w-full max-w-full min-w-[50rem] space-y-4 overflow-hidden rounded-[10px] border border-neutral-border-medium bg-custom-background-100 p-4 shadow ${className}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}

web/components/core/modals/user-image-upload-modal.tsx

@@ -122,7 +122,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                         {...getRootProps()}
                         className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-custom-background-90"
                             : ""
                         }`}
                       >

web/components/core/modals/workspace-image-upload-modal.tsx

@@ -129,7 +129,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                         {...getRootProps()}
                         className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-custom-background-90"
                             : ""
                         }`}
                       >

web/components/core/sidebar/progress-chart.tsx

@@ -124,7 +124,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -87,7 +87,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full  ${
-              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+              roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected
                 ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
@@ -100,7 +100,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+              roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected
                 ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
@@ -113,7 +113,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+              roundedTab ? "rounded-3xl border border-neutral-border-medium" : "rounded"
             } px-3 py-1  text-custom-text-100 ${
               selected
                 ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
@@ -162,7 +162,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                        <div className="h-4 w-4 rounded-full border-2 border-neutral-border-medium bg-custom-background-80">
                           <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>

web/components/core/theme/color-picker-input.tsx

@@ -92,7 +92,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
               >
                 {watch(name) && watch(name) !== "" ? (
                   <span
-                    className="h-4 w-4 rounded border border-custom-border-200"
+                    className="h-4 w-4 rounded border border-neutral-border-medium"
                     style={{
                       backgroundColor: `${watch(name)}`,
                     }}

web/components/cycles/active-cycle-details.tsx

@@ -147,8 +147,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
   const daysLeft = findHowManyDaysLeft(activeCycle.end_date ?? new Date());
 
   return (
-    <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
+    <div className="grid-row-2 grid divide-y rounded-[10px] border border-neutral-border-medium bg-custom-background-100 shadow">
+      <div className="grid grid-cols-1 divide-y border-neutral-border-medium lg:grid-cols-3 lg:divide-x lg:divide-y-0">
         <div className="flex flex-col text-xs">
           <div className="h-full w-full">
             <div className="flex h-60 flex-col justify-between gap-5 rounded-b-[10px] p-4">
@@ -246,8 +246,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             </div>
           </div>
         </div>
-        <div className="col-span-2 grid grid-cols-1 divide-y border-custom-border-200 md:grid-cols-2 md:divide-x md:divide-y-0">
-          <div className="flex h-60 flex-col border-custom-border-200">
+        <div className="col-span-2 grid grid-cols-1 divide-y border-neutral-border-medium md:grid-cols-2 md:divide-x md:divide-y-0">
+          <div className="flex h-60 flex-col border-neutral-border-medium">
             <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
@@ -275,12 +275,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
               </div>
             </div>
           </div>
-          <div className="h-60 overflow-y-scroll border-custom-border-200">
+          <div className="h-60 overflow-y-scroll border-neutral-border-medium">
             <ActiveCycleProgressStats cycle={activeCycle} />
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
+      <div className="grid grid-cols-1 divide-y border-neutral-border-medium lg:grid-cols-2 lg:divide-x lg:divide-y-0">
         <div className="flex flex-col gap-3 p-4 max-h-60 overflow-hidden">
           <div className="text-custom-primary">High Priority Issues</div>
           <div className="flex flex-col h-full gap-2.5 overflow-y-scroll rounded-md">
@@ -290,7 +290,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                   <Link
                     key={issue.id}
                     href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-                    className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200  px-3 py-1.5"
+                    className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-neutral-border-medium  px-3 py-1.5"
                   >
                     <div className="flex items-center gap-1.5">
                       <PriorityIcon priority={issue.priority} withContainer size={12} />
@@ -340,7 +340,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             )}
           </div>
         </div>
-        <div className="flex flex-col  border-custom-border-200 p-4 max-h-60">
+        <div className="flex flex-col  border-neutral-border-medium p-4 max-h-60">
           <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
             <div className="flex items-center gap-3 text-custom-text-100">
               <div className="flex items-center justify-center gap-1">

web/components/cycles/active-cycle-stats.tsx

@@ -50,7 +50,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       >
         <Tab
           className={({ selected }) =>
-            `rounded-3xl border border-custom-border-200 px-3 py-1 text-custom-text-100 ${
+            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
@@ -59,7 +59,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab>
         <Tab
           className={({ selected }) =>
-            `rounded-3xl border border-custom-border-200 px-3 py-1 text-custom-text-100 ${
+            `rounded-3xl border border-neutral-border-medium px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
           }
@@ -92,7 +92,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={`unassigned-${index}`}
                     title={
                       <div className="flex items-center gap-2">
-                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                        <div className="h-5 w-5 rounded-full border-2 border-neutral-border-medium bg-custom-background-80">
                           <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>

web/components/cycles/cycle-peek-overview.tsx

@@ -38,7 +38,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
       {peekCycle && (
         <div
           ref={ref}
-          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-neutral-border-subtle bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

web/components/cycles/cycles-board-card.tsx

@@ -159,7 +159,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
       />
 
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-neutral-border-subtle bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-3 truncate">
               <span className="flex-shrink-0">

web/components/cycles/cycles-list-item.tsx

@@ -160,7 +160,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
           <div className="flex w-full items-center gap-3 truncate">
             <div className="flex items-center gap-4 truncate">
               <span className="flex-shrink-0">

web/components/cycles/form.tsx

@@ -154,7 +154,7 @@ export const CycleForm: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-100 pt-5 ">
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-neutral-border-subtle pt-5 ">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={5}>
           Cancel
         </Button>

web/components/cycles/transfer-issues-modal.tsx

@@ -104,7 +104,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                       <X className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
+                  <div className="flex items-center gap-2 border-b border-neutral-border-medium px-5 pb-3">
                     <Search className="h-4 w-4 text-custom-text-200" />
                     <input
                       className="bg-custom-background-90 outline-none"

web/components/dashboard/widgets/assigned-issues.tsx

@@ -66,7 +66,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
       <div className="flex items-start justify-between gap-2 p-6 pl-7">
         <div>
           <Link
@@ -77,7 +77,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           </Link>
           <p className="mt-3 text-xs font-medium text-custom-text-300">
             Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+            <span className="border-[0.5px] border-neutral-border-medium rounded py-1 px-2 ml-0.5">Due date</span>
           </p>
         </div>
         <DurationFilterDropdown