chore: update background colors

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

@@ -63,13 +63,13 @@ export const MentionList = forwardRef((props: MentionListProps, ref) => {
   }));
 
   return props.items && props.items.length !== 0 ? (
-    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-custom-background-100 p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
+    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-neutral-component-surface-light p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
       {props.items.length ? (
         props.items.map((item, index) => (
           <div
             key={item.id}
-            className={`flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-custom-background-80 ${
+            className={`flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-neutral-component-surface-dark ${
-              index === selectedIndex ? "bg-custom-background-80" : ""
+              index === selectedIndex ? "bg-neutral-component-surface-dark" : ""
             }`}
             onClick={() => selectItem(index)}
           >

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

@@ -62,7 +62,7 @@ export const EditorHeader = (props: IEditorHeader) => {
         {isLocked && (
           <AlertLabel
             Icon={Lock}
-            backgroundColor="bg-custom-background-80"
+            backgroundColor="bg-neutral-component-surface-dark"
             textColor="text-custom-text-300"
             label="Locked"
           />

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-neutral-border-medium 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-neutral-component-surface-light 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

@@ -22,7 +22,7 @@ const InputView = ({
       onClick={(e) => {
         e.stopPropagation();
       }}
-      className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm"
+      className="w-[280px] outline-none bg-neutral-component-surface-medium text-custom-text-900 text-sm"
       defaultValue={defaultValue}
       onChange={onChange}
     />
@@ -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-neutral-border-subtle border-2"
+      className="shadow-md rounded p-2 flex flex-col gap-3 bg-neutral-component-surface-medium 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-neutral-border-subtle border-2 text-custom-text-300 text-xs">
+      <div className="shadow-md items-center rounded p-2 flex gap-3 bg-neutral-component-surface-medium border-neutral-border-subtle border-2 text-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-neutral-border-medium 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-neutral-component-surface-light p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
           ref={setPopperElement}
           style={summaryPopoverStyles.popper}
           {...summaryPopoverAttributes.popper}

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-neutral-border-subtle 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-neutral-component-surface-light px-1 shadow-custom-shadow-xs transition-all"
     >
       {sections.map((section) => {
         const sectionItems = displayedItems[section];
@@ -155,7 +155,7 @@ const IssueSuggestionList = ({
             <div className={"flex h-full w-full flex-col"} key={`${section}-container`} id={`${section}-container`}>
               <h6
                 className={
-                  "sticky top-0 z-[10] bg-custom-background-100 px-2 py-1 text-xs font-medium text-custom-text-400"
+                  "sticky top-0 z-[10] bg-neutral-component-surface-light px-2 py-1 text-xs font-medium text-custom-text-400"
                 }
               >
                 {section}

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

@@ -14,7 +14,7 @@ export const IssueWidgetCard = (props) => (
         {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id}
       </h5>
       <div className="relative h-[71%]">
-        <div className="h-full backdrop-filter backdrop-blur-[30px] bg-custom-background-80 bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative">
+        <div className="h-full backdrop-filter backdrop-blur-[30px] bg-neutral-component-surface-dark bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative">
           <div className="flex gap-2 items-center">
             <div className="rounded">
               <Crown className="m-2" size={16} color="#FFBA18" />

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

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

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

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

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-neutral-border-medium bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-neutral-component-surface-light"
 />
 ```

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-neutral-border-medium 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-neutral-component-surface-light 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-neutral-border-medium bg-custom-background-100"
+  customClassName="text-xs border border-neutral-border-medium bg-neutral-component-surface-light"
 />
 ```

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

@@ -101,8 +101,8 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
               <button
                 type="button"
                 onClick={() => handleAccessChange(access.key)}
-                className={`grid aspect-square place-items-center rounded-sm p-1 hover:bg-custom-background-90 ${
+                className={`grid aspect-square place-items-center rounded-sm p-1 hover:bg-neutral-component-surface-medium ${
-                  props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-90" : ""
+                  props.commentAccessSpecifier?.accessValue === access.key ? "bg-neutral-component-surface-medium" : ""
                 }`}
               >
                 <access.icon
@@ -118,7 +118,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
           ))}
         </div>
       )}
-      <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 w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium p-1">
         <div className="flex items-stretch">
           <div className="flex items-stretch gap-0.5 border-r border-neutral-border-medium pr-2.5">
             {basicTextFormattingItems.map((item) => (
@@ -127,9 +127,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
                     }
                   )}
                 >
@@ -150,9 +150,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
                     }
                   )}
                 >
@@ -173,9 +173,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
                     }
                   )}
                 >
@@ -196,9 +196,9 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
                   type="button"
                   onClick={item.command}
                   className={cn(
-                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-custom-background-80",
+                    "grid aspect-square place-items-center rounded-sm p-1 text-custom-text-400 hover:bg-neutral-component-surface-dark",
                     {
-                      "bg-custom-background-80 text-custom-text-100": item.isActive(),
+                      "bg-neutral-component-surface-dark text-custom-text-100": item.isActive(),
                     }
                   )}
                 >

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-neutral-border-medium rounded border border-neutral-border-medium bg-custom-background-100 shadow-xl"
+      className="flex w-fit divide-x divide-neutral-border-medium rounded border border-neutral-border-medium bg-neutral-component-surface-light shadow-xl"
     >
       {isSelecting ? null : (
         <>

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

@@ -30,8 +30,8 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
       <button
         type="button"
         className={cn(
-          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-neutral-component-surface-light active:bg-neutral-component-surface-light",
-          { "bg-custom-background-100": isOpen }
+          { "bg-neutral-component-surface-light": isOpen }
         )}
         onClick={() => {
           setIsOpen(!isOpen);
@@ -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-neutral-border-medium 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-neutral-component-surface-light 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-neutral-border-medium 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-neutral-component-surface-light p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (
@@ -76,7 +76,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             </button>
           ) : (
             <button
-              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
+              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-neutral-component-surface-medium"
               type="button"
               onClick={() => {
                 onLinkSubmit();

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

@@ -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-neutral-border-medium 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-neutral-component-surface-light p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
           {items.map((item) => (
             <button
               key={item.name}

packages/tailwind-config-custom/tailwind.config.js

@@ -41,11 +41,13 @@ export const theme = {
     "onboarding-shadow-sm": "var(--color-onboarding-shadow-sm)",
   },
   colors: {
-    white: colors.white,
+    inherit: colors.inherit,
+    current: colors.current,
+    transparent: colors.transparent,
     black: colors.black,
+    white: colors.white,
     primary: {
       page: {
-        "surface-default": "var(--color-primary-0)",
         "surface-light": "var(--color-primary-10)",
         "surface-medium": "var(--color-primary-20)",
       },
@@ -117,7 +119,6 @@ export const theme = {
     },
     success: {
       page: {
-        "surface-default": "var(--color-success-0)",
         "surface-light": "var(--color-success-10)",
         "surface-medium": "var(--color-success-20)",
       },
@@ -153,7 +154,6 @@ export const theme = {
     },
     warning: {
       page: {
-        "surface-default": "var(--color-warning-0)",
         "surface-light": "var(--color-warning-10)",
         "surface-medium": "var(--color-warning-20)",
       },
@@ -189,7 +189,6 @@ export const theme = {
     },
     danger: {
       page: {
-        "surface-default": "var(--color-danger-0)",
         "surface-light": "var(--color-danger-10)",
         "surface-medium": "var(--color-danger-20)",
       },
@@ -225,7 +224,6 @@ export const theme = {
     },
     info: {
       page: {
-        "surface-default": "var(--color-info-0)",
         "surface-light": "var(--color-info-10)",
         "surface-medium": "var(--color-info-20)",
       },

packages/ui/src/badge/helper.tsx

@@ -51,7 +51,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-custom-primary-60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    default: `text-custom-primary-100 bg-neutral-component-surface-light border border-custom-primary-100`,
     hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
@@ -62,12 +62,12 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed bg-custom-border-200 !text-custom-text-400`,
   },
   "accent-neutral": {
-    default: `text-custom-text-200 bg-custom-background-80`,
+    default: `text-custom-text-200 bg-neutral-component-surface-dark`,
     hover: `hover:bg-custom-border-200 hover:text-custom-text-100`,
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },
   "outline-neutral": {
-    default: `text-custom-text-200 bg-custom-background-100 border border-neutral-border-medium`,
+    default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
     hover: `hover:text-custom-text-100 hover:bg-custom-border-200`,
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },
@@ -83,7 +83,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-green-300`,
   },
   "outline-success": {
-    default: `text-green-500 bg-custom-background-100 border border-green-500`,
+    default: `text-green-500 bg-neutral-component-surface-light border border-green-500`,
     hover: `hover:text-green-600 hover:bg-green-50`,
     disabled: `cursor-not-allowed !text-green-300 border-green-300`,
   },
@@ -99,7 +99,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-amber-300`,
   },
   "outline-warning": {
-    default: `text-amber-500 bg-custom-background-100 border border-amber-500`,
+    default: `text-amber-500 bg-neutral-component-surface-light border border-amber-500`,
     hover: `hover:text-amber-600 hover:bg-amber-50`,
     disabled: `cursor-not-allowed !text-amber-300 border-amber-300`,
   },
@@ -115,7 +115,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-red-300`,
   },
   "outline-destructive": {
-    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    default: `text-red-500 bg-neutral-component-surface-light border border-red-500`,
     hover: `hover:text-red-600 hover:bg-red-50`,
     disabled: `cursor-not-allowed !text-red-300 border-red-300`,
   },

packages/ui/src/button/helper.tsx

@@ -55,13 +55,13 @@ 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-neutral-border-medium`,
+    default: `text-custom-text-200 bg-neutral-component-surface-light border border-neutral-border-medium`,
-    hover: `hover:bg-custom-background-90`,
+    hover: `hover:bg-neutral-component-surface-medium`,
-    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
+    pressed: `focus:text-custom-text-300 focus:bg-neutral-component-surface-medium`,
     disabled: `cursor-not-allowed !text-custom-text-400`,
   },
   "link-primary": {
-    default: `text-custom-primary-100 bg-custom-background-100`,
+    default: `text-custom-primary-100 bg-neutral-component-surface-light`,
     hover: `hover:text-custom-primary-200`,
     pressed: `focus:text-custom-primary-80 `,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
@@ -86,13 +86,13 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
   },
   "link-danger": {
-    default: `text-red-500 bg-custom-background-100`,
+    default: `text-red-500 bg-neutral-component-surface-light`,
     hover: `hover:text-red-400`,
     pressed: `focus:text-red-400`,
     disabled: `cursor-not-allowed !text-red-300`,
   },
   "tertiary-danger": {
-    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    default: `text-red-500 bg-neutral-component-surface-light border border-red-200`,
     hover: `hover:bg-red-50 hover:border-red-300`,
     pressed: `focus:text-red-400`,
     disabled: `cursor-not-allowed !text-red-300`,

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

@@ -33,7 +33,7 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
         } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
           value
             ? (size === "sm" ? "translate-x-3" : size === "md" ? "translate-x-4" : "translate-x-5") + " bg-white"
-            : "translate-x-0.5 bg-custom-background-90"
+            : "translate-x-0.5 bg-neutral-component-surface-medium"
         } ${disabled ? "cursor-not-allowed" : ""}`}
       />
     </Switch>

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-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",
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light 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",
@@ -120,7 +120,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     }}
                     disabled={disabled}
                     className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
-                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-neutral-component-surface-dark"
                     } ${buttonClassName}`}
                   >
                     <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
@@ -132,11 +132,11 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     ref={setReferenceElement}
                     type="button"
                     className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
-                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+                      open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
                     } ${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"
+                        : "cursor-pointer hover:bg-neutral-component-surface-dark"
                     } ${buttonClassName}`}
                     onClick={() => {
                       openDropdown();
@@ -167,7 +167,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
           className={cn(
             "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
             {
-              "bg-custom-background-80": active,
+              "bg-neutral-component-surface-dark": active,
             },
             className
           )}

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

@@ -88,7 +88,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                   className={`flex w-full items-center justify-between gap-1 text-xs ${
                     disabled
                       ? "cursor-not-allowed text-custom-text-200"
-                      : "cursor-pointer hover:bg-custom-background-80"
+                      : "cursor-pointer hover:bg-neutral-component-surface-dark"
                   }  ${customButtonClassName}`}
                   onClick={openDropdown}
                 >
@@ -105,7 +105,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                   } ${
                     disabled
                       ? "cursor-not-allowed text-custom-text-200"
-                      : "cursor-pointer hover:bg-custom-background-80"
+                      : "cursor-pointer hover:bg-neutral-component-surface-dark"
                   } ${buttonClassName}`}
                   onClick={openDropdown}
                 >
@@ -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-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",
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light 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-neutral-border-subtle bg-custom-background-90 px-2">
+                  <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
                     <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
                     <Combobox.Input
                       className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
@@ -153,7 +153,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                               cn(
                                 "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
                                 {
-                                  "bg-custom-background-80": active,
+                                  "bg-neutral-component-surface-dark": active,
                                 }
                               )
                             }

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

@@ -65,7 +65,9 @@ const CustomSelect = (props: ICustomSelectProps) => {
               ref={setReferenceElement}
               type="button"
               className={`flex items-center justify-between gap-1 text-xs ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-neutral-component-surface-dark"
               } ${customButtonClassName}`}
               onClick={openDropdown}
             >
@@ -80,7 +82,9 @@ const CustomSelect = (props: ICustomSelectProps) => {
               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"
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-neutral-component-surface-dark"
               } ${buttonClassName}`}
               onClick={openDropdown}
             >
@@ -94,7 +98,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-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",
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light 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",
@@ -124,7 +128,7 @@ const Option = (props: ICustomSelectItemProps) => {
         cn(
           "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
           {
-            "bg-custom-background-80": active,
+            "bg-neutral-component-surface-dark": active,
           },
           className
         )

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

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

packages/ui/src/loader.tsx

@@ -17,7 +17,7 @@ type ItemProps = {
 };
 
 const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
-  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
+  <div className="rounded-md bg-neutral-component-surface-dark" style={{ height: height, width: width }} />
 );
 
 Loader.Item = Item;

packages/ui/src/spinners/circular-spinner.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+// helpers
+import { cn } from "../../helpers";
 
 export interface ISpinner extends React.SVGAttributes<SVGElement> {
   height?: string;
@@ -12,7 +14,7 @@ export const Spinner: React.FC<ISpinner> = ({ height = "32px", width = "32px", c
       aria-hidden="true"
       height={height}
       width={width}
-      className={`animate-spin fill-blue-600 text-custom-text-200 ${className}`}
+      className={cn("animate-spin fill-primary-solid text-neutral-text-subtle", className)}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

packages/ui/src/tooltip/tooltip.tsx

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

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

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

space/components/accounts/onboarding-form.tsx

@@ -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-neutral-border-medium 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-neutral-component-surface-medium text-xs shadow-lg focus:outline-none`}
                     >
                       <div className="space-y-1 p-2">
                         {USER_ROLES.map((role) => (
@@ -150,7 +150,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                             value={role.value}
                             className={({ active, selected }) =>
                               `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                                active || selected ? "bg-custom-background-80" : ""
+                                active || selected ? "bg-neutral-component-surface-dark" : ""
                               } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                             }
                           >

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

@@ -25,7 +25,7 @@ export const UserLoggedIn = () => {
               <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
             </div>
           ) : (
-            <div className="grid h-5 w-5 place-items-center rounded-full bg-custom-background-80 text-[10px] capitalize">
+            <div className="grid h-5 w-5 place-items-center rounded-full bg-neutral-component-surface-dark text-[10px] capitalize">
               {(user.display_name ?? "U")[0]}
             </div>
           )}
@@ -35,7 +35,7 @@ export const UserLoggedIn = () => {
 
       <div className="grid h-full w-full place-items-center p-6">
         <div className="text-center">
-          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+          <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-neutral-component-surface-dark">
             <div className="h-32 w-32">
               <Image src={UserLoggedInImage} alt="User already logged in" />
             </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-neutral-border-medium 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-neutral-component-surface-light px-3 py-2 text-sm shadow-custom-shadow-2xs">
       {/* id */}
       <div className="break-words text-xs text-custom-text-300">
         {projectStore?.project?.identifier}-{issue?.sequence_id}

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

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

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

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

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

@@ -22,7 +22,7 @@ export const AppliedFiltersList: React.FC<Props> = (props) => {
   const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, states } = props;
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2 bg-neutral-component-surface-light">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof IIssueFilterOptions;
 

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

@@ -19,7 +19,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
         if (!labelDetails) return null;
 
         return (
-          <div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={labelId} className="flex items-center gap-1 rounded bg-neutral-component-surface-dark p-1 text-xs">
             <span
               className="h-1.5 w-1.5 rounded-full"
               style={{

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

@@ -14,7 +14,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
       {values &&
         values.length > 0 &&
         values.map((priority) => (
-          <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={priority} className="flex items-center gap-1 rounded bg-neutral-component-surface-dark p-1 text-xs">
             <PriorityIcon priority={priority as any} className={`h-3 w-3`} />
             {priority}
             <button

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

@@ -21,7 +21,7 @@ export const AppliedStateFilters: React.FC<Props> = (props) => {
         if (!stateDetails) return null;
 
         return (
-          <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={stateId} className="flex items-center gap-1 rounded bg-neutral-component-surface-dark p-1 text-xs">
             <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
             {stateDetails.name}
             <button

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-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded border border-neutral-border-medium bg-neutral-component-surface-light shadow-custom-shadow-rg"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}

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

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

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

@@ -16,11 +16,11 @@ export const FilterOption: React.FC<Props> = (props) => {
   return (
     <button
       type="button"
-      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
+      className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-neutral-component-surface-dark"
       onClick={onClick}
     >
       <div
-        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
+        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-neutral-component-surface-medium ${
           isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-neutral-border-medium"
         } ${multiple ? "rounded-sm" : "rounded-full"}`}
       >

space/components/issues/filters/selection.tsx

@@ -27,12 +27,12 @@ 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="bg-neutral-component-surface-light p-2.5 pb-0">
-        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-neutral-border-medium bg-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-neutral-component-surface-medium px-1.5 py-1 text-xs">
           <Search className="text-custom-text-400" size={12} strokeWidth={2} />
           <input
             type="text"
-            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            className="w-full bg-neutral-component-surface-medium outline-none placeholder:text-custom-text-400"
             placeholder="Search"
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}

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

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

space/components/issues/navbar/theme.tsx

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

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

@@ -82,7 +82,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           </div>
         )}
 
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-neutral-component-surface-dark px-0.5 py-px">
           <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
@@ -143,7 +143,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
               value={comment.comment_html}
-              customClassName="text-xs border border-neutral-border-medium bg-custom-background-100"
+              customClassName="text-xs border border-neutral-border-medium bg-neutral-component-surface-light"
               mentionHighlights={mentionsConfig.mentionHighlights}
             />
             <CommentReactions commentId={comment.id} projectId={comment.project} />
@@ -156,7 +156,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <Menu.Button
             type="button"
             onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-neutral-component-surface-dark hover:text-custom-text-100"
           >
             <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
           </Menu.Button>
@@ -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-neutral-border-medium 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-neutral-component-surface-medium p-1 text-xs shadow-lg focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">
@@ -179,8 +179,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
-                        active ? "bg-custom-background-80" : ""
+                        active ? "bg-neutral-component-surface-dark" : ""
                       }`}
                     >
                       Edit
@@ -194,8 +194,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-neutral-component-surface-dark ${
-                        active ? "bg-custom-background-80" : ""
+                        active ? "bg-neutral-component-surface-dark" : ""
                       }`}
                     >
                       Delete

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

@@ -108,7 +108,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                     (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
                   )
                     ? "bg-custom-primary-100/10"
-                    : "bg-custom-background-80"
+                    : "bg-neutral-component-surface-dark"
                 }`}
               >
                 <span>{renderEmoji(reaction)}</span>

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-neutral-border-medium 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-neutral-component-surface-medium text-xs shadow-lg focus:outline-none">
                 <div className="space-y-1 p-2">
                   {peekModes.map((mode) => (
                     <Listbox.Option
@@ -96,7 +96,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
                       value={mode.key}
                       className={({ active, selected }) =>
                         `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                          active || selected ? "bg-custom-background-80" : ""
+                          active || selected ? "bg-neutral-component-surface-dark" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
                     >

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-neutral-border-medium 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-neutral-component-surface-dark 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-emoji-reactions.tsx

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

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

@@ -63,7 +63,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
           </div>
           <div className="w-3/4">
             {stateGroup && (
-              <div className="inline-flex rounded bg-custom-background-80 px-2.5 py-0.5 text-sm">
+              <div className="inline-flex rounded bg-neutral-component-surface-dark px-2.5 py-0.5 text-sm">
                 <div className="flex items-center gap-1.5 text-left text-custom-text-100">
                   <StateGroupIcon stateGroup={state.group} color={state.color} />
                   {addSpaceIfCamelCase(state?.name ?? "")}
@@ -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-neutral-border-medium bg-custom-background-80"
+                        : "border-neutral-border-medium bg-neutral-component-surface-dark"
               }`}
             >
               {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-neutral-border-subtle 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-neutral-component-surface-dark 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/layout.tsx

@@ -81,7 +81,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(() => {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
+            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-neutral-component-surface-light shadow-custom-shadow-sm">
               <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
             </Dialog.Panel>
           </Transition.Child>
@@ -111,7 +111,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(() => {
           >
             <Dialog.Panel>
               <div
-                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-custom-background-100 shadow-custom-shadow-xl transition-all duration-300 ${
+                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-neutral-component-surface-light shadow-custom-shadow-xl transition-all duration-300 ${
                   issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
                 }`}
               >

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-neutral-border-medium 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-neutral-component-surface-medium text-xs shadow-lg focus:outline-none"
         >
           <div className="w-full rounded-md text-sm shadow-lg">
             {items.map((item, index) => (
@@ -83,8 +83,8 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
             }
             setOpen((prev) => !prev);
           }}
-          className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
+          className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark ${
-            isSelected ? "bg-custom-background-80" : ""
+            isSelected ? "bg-neutral-component-surface-dark" : ""
           }`}
         >
           {children && <ChevronLeft className="h-4 w-4 transform transition-transform" strokeWidth={2} />}
@@ -109,8 +109,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`group flex items-center justify-between gap-2 rounded-md border border-neutral-border-medium px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-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-neutral-component-surface-medium hover:text-custom-text-100 focus:outline-none ${
-              open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+              open ? "bg-neutral-component-surface-medium text-custom-text-100" : "text-custom-text-200"
             }`}
           >
             {typeof button === "function" ? button() : button}
@@ -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-neutral-border-medium 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-neutral-component-surface-medium 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

@@ -28,7 +28,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
           <Popover.Button
             className={`${
               open ? "" : "text-opacity-90"
-            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+            } group inline-flex items-center rounded-md bg-neutral-component-surface-dark focus:outline-none`}
           >
             <span
               className={`flex items-center justify-center rounded-md px-2 ${
@@ -48,11 +48,11 @@ export const ReactionSelector: React.FC<Props> = (props) => {
             leaveTo="opacity-0 translate-y-1"
           >
             <Popover.Panel
-              className={`absolute -left-2 z-10 bg-custom-sidebar-background-100 ${
+              className={`absolute -left-2 z-10 bg-sidebar-neutral-component-surface-light ${
                 position === "top" ? "-top-12" : "-bottom-12"
               }`}
             >
-              <div className="rounded-md border border-neutral-border-medium bg-custom-sidebar-background-100 p-1 shadow-custom-shadow-sm">
+              <div className="rounded-md border border-neutral-border-medium bg-sidebar-neutral-component-surface-light p-1 shadow-custom-shadow-sm">
                 <div className="flex gap-x-1">
                   {reactionEmojis.map((emoji) => (
                     <button
@@ -63,7 +63,9 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                         closePopover();
                       }}
                       className={`grid select-none place-items-center rounded-md p-1 text-sm ${
-                        selected.includes(emoji) ? "bg-custom-primary-100/10" : "hover:bg-custom-sidebar-background-80"
+                        selected.includes(emoji)
+                          ? "bg-custom-primary-100/10"
+                          : "hover:bg-sidebar-neutral-component-surface-dark"
                       }`}
                     >
                       {renderEmoji(emoji)}

space/components/views/project-details.tsx

@@ -61,7 +61,7 @@ export const ProjectDetailsView = observer(() => {
           {issueStore?.error ? (
             <div className="grid h-full w-full place-items-center p-6">
               <div className="text-center">
-                <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+                <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-neutral-component-surface-dark">
                   <div className="grid h-32 w-32 place-items-center">
                     <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
                   </div>

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-neutral-border-medium 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-sidebar-neutral-component-surface-light">
       <IssueNavbar />
     </div>
-    <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
+    <div className="relative h-full w-full overflow-hidden bg-neutral-component-surface-medium">{children}</div>
 
     <a
       href="https://plane.so"
-      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"
+      className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-neutral-border-medium bg-neutral-component-surface-light px-2 py-1 shadow-custom-shadow-2xs"
       target="_blank"
       rel="noreferrer noopener"
     >

space/pages/_document.tsx

@@ -5,7 +5,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head />
-        <body className="w-100 bg-custom-background-100 antialiased">
+        <body className="w-100 bg-neutral-component-surface-light antialiased">
           <Main />
           <NextScript />
         </body>

space/pages/onboarding/index.tsx

@@ -21,11 +21,11 @@ const OnBoardingPage = () => {
   }, [userStore]);
 
   return (
-    <div className="h-screen w-full overflow-hidden bg-custom-background-100">
+    <div className="h-screen w-full overflow-hidden bg-neutral-component-surface-light">
       <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-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="absolute left-2 top-1/2 z-10 grid -translate-y-1/2 place-items-center bg-neutral-component-surface-light 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" />
             </div>

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

@@ -85,7 +85,7 @@ export const DeactivateAccountModal: React.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 bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">

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-neutral-border-medium bg-custom-background-80 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{

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

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

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

@@ -24,7 +24,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full align-middle">
         <table className="min-w-full divide-y divide-neutral-border-medium whitespace-nowrap border-y border-neutral-border-medium">
-          <thead className="bg-custom-background-80">
+          <thead className="bg-neutral-component-surface-dark">
             <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}

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

@@ -14,7 +14,7 @@ export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) =>
   const { fullScreen, handleClose, setFullScreen, title } = props;
 
   return (
-    <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
+    <div className="flex items-center justify-between gap-4 bg-neutral-component-surface-light px-5 py-4 text-sm">
       <h3 className="break-words">Analytics for {title}</h3>
       <div className="flex items-center gap-2">
         <button

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

@@ -25,8 +25,8 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-3xl border border-neutral-border-medium 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-neutral-component-surface-dark ${
-                selected ? "bg-custom-background-80" : ""
+                selected ? "bg-neutral-component-surface-dark" : ""
               }`
             }
             onClick={() => {}}

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

@@ -38,12 +38,12 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
         >
           <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
             <div
-              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+              className={`fixed right-0 top-0 z-20 h-full bg-neutral-component-surface-light shadow-custom-shadow-md ${
                 fullScreen ? "w-full p-2" : "w-1/2"
               }`}
             >
               <div
-                className={`flex h-full flex-col overflow-hidden border-neutral-border-medium bg-custom-background-100 text-left ${
+                className={`flex h-full flex-col overflow-hidden border-neutral-border-medium bg-neutral-component-surface-light text-left ${
                   fullScreen ? "rounded-lg border" : "border-l"
                 }`}
               >

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

@@ -31,13 +31,13 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
                   }}
                 />
                 <h6 className="capitalize">{group.state_group}</h6>
-                <span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
+                <span className="ml-1 rounded-3xl bg-neutral-component-surface-dark px-2 py-0.5 text-[0.65rem] text-custom-text-200">
                   {group.state_count}
                 </span>
               </div>
               <p className="text-custom-text-200">{percentage}%</p>
             </div>
-            <div className="bar relative h-1 w-full rounded bg-custom-background-80">
+            <div className="bar relative h-1 w-full rounded bg-neutral-component-surface-dark">
               <div
                 className="absolute left-0 top-0 h-1 rounded duration-300"
                 style={{
@@ -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-neutral-border-medium 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-neutral-component-surface-dark 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/scope.tsx

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

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

@@ -35,7 +35,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         margin={{ top: 20 }}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-neutral-border-medium bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues closed in </span>
             {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-neutral-border-medium 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-neutral-component-surface-light text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-3 p-4">
                   <div className="flex w-full items-center justify-start">
                     <h3 className="text-lg font-medium leading-6 text-custom-text-100">

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-neutral-border-medium 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-neutral-component-surface-medium 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/create-token-modal.tsx

@@ -112,7 +112,7 @@ export const CreateApiTokenModal: React.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 rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light p-5 px-4 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 {generatedToken ? (
                   <GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
                 ) : (

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

@@ -202,7 +202,11 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                     <div
                       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"}`}
+                      } ${
+                        neverExpires
+                          ? "!cursor-not-allowed text-custom-text-400"
+                          : "hover:bg-neutral-component-surface-dark"
+                      }`}
                     >
                       <Calendar className="h-3 w-3" />
                       {customDate ? renderFormattedDate(customDate) : "Set date"}

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

@@ -34,7 +34,9 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
           <h5 className="truncate text-sm font-medium">{token.label}</h5>
           <span
             className={`${
-              token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
+              token.is_active
+                ? "bg-green-500/10 text-green-500"
+                : "bg-neutral-component-surface-dark text-custom-text-400"
             } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}

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

@@ -24,7 +24,7 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
 
   return (
     <DefaultLayout>
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-neutral-component-surface-light text-center">
         <div className="h-44 w-72">
           <Image
             src={type === "project" ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg}

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

@@ -33,7 +33,7 @@ export const JoinProject: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-neutral-component-surface-light text-center">
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>

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

@@ -42,7 +42,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
       <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">
+            <div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
               <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
             </div>
             <div className="">
@@ -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-neutral-border-medium 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-neutral-component-surface-medium 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
@@ -90,7 +90,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
 
                       <button
                         type="button"
-                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80"
+                        className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-neutral-component-surface-dark"
                         onClick={() => setmonthModal(true)}
                       >
                         Customise Time Range

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

@@ -68,7 +68,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
       <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">
+            <div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
               <ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
             </div>
             <div className="">
@@ -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-neutral-border-medium bg-custom-background-90">
+              <div className="flex flex-col rounded border border-neutral-border-medium bg-neutral-component-surface-medium">
                 <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">
@@ -116,7 +116,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                         ))}
                         <button
                           type="button"
-                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                          className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-neutral-component-surface-dark"
                           onClick={() => setmonthModal(true)}
                         >
                           Customize Time Range

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

@@ -68,7 +68,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
               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 rounded-lg bg-custom-background-100 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-neutral-component-surface-light px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">

web/components/breadcrumbs/index.tsx

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

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-neutral-border-medium 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-neutral-component-surface-light shadow-custom-shadow-md transition-all">
                 <Command
                   filter={(value, search) => {
                     if (value.toLowerCase().includes(search.toLowerCase())) return 1;
@@ -191,7 +191,7 @@ export const CommandModal: React.FC = observer(() => {
                     }`}
                   >
                     {issueDetails && (
-                      <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
+                      <div className="overflow-hidden truncate rounded-md bg-neutral-component-surface-dark p-2 text-xs font-medium text-custom-text-200">
                         {projectDetails?.identifier}-{issueDetails.sequence_id} {issueDetails.name}
                       </div>
                     )}
@@ -281,7 +281,7 @@ export const CommandModal: React.FC = observer(() => {
                               setTrackElement("COMMAND_PALETTE");
                               toggleCreateIssueModal(true);
                             }}
-                            className="focus:bg-custom-background-80"
+                            className="focus:bg-neutral-component-surface-dark"
                           >
                             <div className="flex items-center gap-2 text-custom-text-200">
                               <LayersIcon className="h-3.5 w-3.5" />

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-neutral-border-medium 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-neutral-component-surface-medium 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-neutral-border-medium 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-neutral-component-surface-medium px-1.5 text-[10px] text-custom-text-200">
                                 {key}
                               </kbd>
                             )}

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

@@ -48,14 +48,14 @@ export const ShortcutsModal: FC<Props> = (props) => {
           >
             <Dialog.Panel className="h-full w-full">
               <div className="grid h-full w-full place-items-center p-5">
-                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
+                <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-neutral-component-surface-light p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-lg font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>
                       <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-neutral-border-medium bg-custom-background-90 px-2">
+                  <div className="flex w-full items-center rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-medium px-2">
                     <Search className="h-3.5 w-3.5 text-custom-text-200" />
                     <Input
                       id="search"

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

@@ -85,7 +85,7 @@ export const NewEmptyState: React.FC<Props> = ({
                   <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-neutral-border-medium bg-custom-background-100">
+                  <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-light">
                     <h1 className="p-5">
                       <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
                       <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
@@ -97,7 +97,7 @@ export const NewEmptyState: React.FC<Props> = ({
                   <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-neutral-border-medium bg-custom-background-100">
+                  <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-light">
                     <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

@@ -49,7 +49,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               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 min-w-[100%] overflow-hidden rounded-lg bg-custom-background-100 shadow-custom-shadow-md sm:min-w-[50%] sm:max-w-[50%]">
+              <Dialog.Panel className="relative min-w-[100%] overflow-hidden rounded-lg bg-neutral-component-surface-light shadow-custom-shadow-md sm:min-w-[50%] sm:max-w-[50%]">
                 <div className="flex max-h-[90vh] w-full flex-col p-4">
                   <Dialog.Title as="h3" className="flex items-center justify-between text-lg font-semibold">
                     <span>Product Updates</span>
@@ -64,7 +64,7 @@ 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-neutral-border-medium bg-custom-background-90 px-3 py-1.5 text-xs">
+                            <span className="flex items-center rounded-full border border-neutral-border-medium bg-neutral-component-surface-medium px-3 py-1.5 text-xs">
                               {item.tag_name}
                             </span>
                             <span>{renderFormattedDate(item.published_at)}</span>

web/components/core/filters/date-filter-modal.tsx

@@ -38,7 +38,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
+    if (filterType === "range")
+      onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
     else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]);
 
     handleClose();
@@ -74,7 +75,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
               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 flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4">
                   <div className="flex w-full justify-between">
                     <Controller

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-neutral-border-medium 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-neutral-component-surface-light px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={openDropdown}
         disabled={disabled}
       >
@@ -148,15 +148,15 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
       {isOpen && (
         <Popover.Panel
-          className="absolute right-0 z-10 mt-2 rounded-md border border-neutral-border-medium bg-custom-background-100 shadow-custom-shadow-sm"
+          className="absolute right-0 z-10 mt-2 rounded-md border border-neutral-border-medium bg-neutral-component-surface-light shadow-custom-shadow-sm"
           static
         >
           <div
             ref={imagePickerRef}
-            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]"
+            className="flex h-96 w-80 flex-col overflow-auto rounded border border-neutral-border-medium bg-neutral-component-surface-light 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">
+              <Tab.List as="span" className="inline-block rounded bg-neutral-component-surface-dark p-1">
                 {tabOptions.map((tab) => {
                   if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
                   if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") return null;
@@ -282,13 +282,13 @@ 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-neutral-border-medium hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-neutral-component-surface-medium"
                             : ""
                         }`}
                       >
                         <button
                           type="button"
-                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                          className="absolute right-0 top-0 z-40 -translate-y-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-custom-text-200"
                         >
                           Edit
                         </button>

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

@@ -16,7 +16,7 @@ export const BulkDeleteIssuesModalItem: React.FC<any> = observer((props) => {
       value={issue.id}
       className={({ active }) =>
         `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-          active ? "bg-custom-background-80 text-custom-text-100" : ""
+          active ? "bg-neutral-component-surface-dark text-custom-text-100" : ""
         }`
       }
     >

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-neutral-border-medium 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-neutral-component-surface-light shadow-custom-shadow-md transition-all">
                 <form>
                   <Combobox
                     onChange={(val: string) => {
@@ -183,7 +183,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                           <LayersIcon height="56" width="56" />
                           <h3 className="text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-neutral-component-surface-dark px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}

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

@@ -125,7 +125,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-neutral-component-surface-light shadow-custom-shadow-md transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {
@@ -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-neutral-border-medium 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-neutral-component-surface-dark 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-neutral-border-medium bg-custom-background-80 p-2 text-xs">
+                      <div className="w-min whitespace-nowrap rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
                         No issues selected
                       </div>
                     )}
@@ -212,7 +212,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                         <LayersIcon height="52" width="52" />
                         <h3 className="text-custom-text-200">
                           No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                          <pre className="inline rounded bg-neutral-component-surface-dark px-2 py-1 text-sm">C</pre>.
                         </h3>
                       </div>
                     )}
@@ -237,7 +237,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                               value={issue}
                               className={({ active }) =>
                                 `group flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                  active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                  active ? "bg-neutral-component-surface-dark text-custom-text-100" : ""
                                 } ${selected ? "text-custom-text-100" : ""}`
                               }
                             >

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-neutral-border-medium 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-neutral-component-surface-light p-4 shadow ${className}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}

web/components/core/modals/link-modal.tsx

@@ -90,7 +90,7 @@ export const LinkModal: 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 bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
                   <div>
                     <div className="space-y-5">

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

@@ -111,7 +111,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((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 bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                     Upload Image
@@ -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-neutral-border-medium hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-neutral-component-surface-medium"
                             : ""
                         }`}
                       >
@@ -130,7 +130,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                           <>
                             <button
                               type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-custom-text-200"
                             >
                               Edit
                             </button>

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

@@ -118,7 +118,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((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 bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                     Upload Image
@@ -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-neutral-border-medium hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-neutral-border-medium hover:bg-neutral-component-surface-medium"
                             : ""
                         }`}
                       >
@@ -137,7 +137,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                           <>
                             <button
                               type="button"
-                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                              className="absolute right-0 top-0 z-40 -translate-y-1/2 translate-x-1/2 rounded bg-neutral-component-surface-medium px-2 py-0.5 text-xs font-medium text-custom-text-200"
                             >
                               Edit
                             </button>

web/components/core/sidebar/links-list.tsx

@@ -34,7 +34,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
   return (
     <>
       {links.map((link) => (
-        <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+        <div key={link.id} className="relative flex flex-col rounded-md bg-neutral-component-surface-medium p-2.5">
           <div className="flex w-full items-start justify-between gap-2">
             <div className="flex items-start gap-2 truncate">
               <span className="py-1">
@@ -54,7 +54,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
               <div className="z-[1] flex flex-shrink-0 items-center gap-2">
                 <button
                   type="button"
-                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  className="flex items-center justify-center p-1 hover:bg-neutral-component-surface-dark"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -67,13 +67,13 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
                   href={link.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  className="flex items-center justify-center p-1 hover:bg-neutral-component-surface-dark"
                 >
                   <ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
                 </a>
                 <button
                   type="button"
-                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  className="flex items-center justify-center p-1 hover:bg-neutral-component-surface-dark"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();

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-neutral-border-medium bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-neutral-border-medium bg-neutral-component-surface-dark p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}

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

@@ -80,7 +80,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
       <Tab.List
         as="div"
         className={`flex w-full items-center justify-between gap-2 rounded-md ${
-          noBackground ? "" : "bg-custom-background-90"
+          noBackground ? "" : "bg-neutral-component-surface-medium"
         } p-0.5
         ${module ? "text-xs" : "text-sm"}`}
       >
@@ -90,7 +90,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
               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"
+                ? "bg-neutral-component-surface-light text-custom-text-300 shadow-custom-shadow-2xs"
                 : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
@@ -103,7 +103,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
               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"
+                ? "bg-neutral-component-surface-light text-custom-text-300 shadow-custom-shadow-2xs"
                 : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
@@ -116,7 +116,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
               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"
+                ? "bg-neutral-component-surface-light text-custom-text-300 shadow-custom-shadow-2xs"
                 : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
@@ -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-neutral-border-medium bg-custom-background-80">
+                        <div className="h-4 w-4 rounded-full border-2 border-neutral-border-medium bg-neutral-component-surface-dark">
                           <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>
@@ -175,7 +175,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
             })
           ) : (
             <div className="flex h-full flex-col items-center justify-center gap-2">
-              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
+              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-neutral-component-surface-dark">
                 <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
               </div>
               <h6 className="text-base text-custom-text-300">No assignees yet</h6>
@@ -215,7 +215,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
             ))
           ) : (
             <div className="flex h-full flex-col items-center justify-center gap-2">
-              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
+              <div className="flex h-20 w-20 items-center justify-center rounded-full bg-neutral-component-surface-dark">
                 <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
               </div>
               <h6 className="text-base text-custom-text-300">No labels yet</h6>

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

@@ -19,8 +19,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
 }) => (
   <div
     className={`flex w-full items-center justify-between gap-4 rounded-sm p-1 text-xs ${
-      onClick ? "cursor-pointer hover:bg-custom-background-90" : ""
+      onClick ? "cursor-pointer hover:bg-neutral-component-surface-medium" : ""
-    } ${selected ? "bg-custom-background-90" : ""}`}
+    } ${selected ? "bg-neutral-component-surface-medium" : ""}`}
     onClick={onClick}
   >
     <div className="w-1/2">{title}</div>

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

@@ -147,7 +147,7 @@ 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-neutral-border-medium bg-custom-background-100 shadow">
+    <div className="grid-row-2 grid divide-y rounded-[10px] border border-neutral-border-medium bg-neutral-component-surface-light 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">
@@ -208,7 +208,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                       alt={activeCycle.owned_by.display_name}
                     />
                   ) : (
-                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-component-surface-light capitalize">
                       {activeCycle.owned_by.display_name.charAt(0)}
                     </span>
                   )}
@@ -317,7 +317,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                       />
                       {issue.target_date && (
                         <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
-                          <div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 cursor-not-allowed">
+                          <div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-neutral-component-surface-dark cursor-not-allowed">
                             <CalendarCheck className="h-3 w-3 flex-shrink-0" />
                             <span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>
                           </div>

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

@@ -46,12 +46,12 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
     >
       <Tab.List
         as="div"
-        className="sticky top-0 z-10 flex w-full flex-wrap items-center justify-start gap-4 bg-custom-background-100 px-4 pb-1 pt-4 text-sm"
+        className="sticky top-0 z-10 flex w-full flex-wrap items-center justify-start gap-4 bg-neutral-component-surface-light px-4 pb-1 pt-4 text-sm"
       >
         <Tab
           className={({ selected }) =>
             `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"
+              selected ? " bg-custom-primary text-white" : "  hover:bg-neutral-component-surface-dark"
             }`
           }
         >
@@ -60,7 +60,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         <Tab
           className={({ selected }) =>
             `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"
+              selected ? " bg-custom-primary text-white" : "  hover:bg-neutral-component-surface-dark"
             }`
           }
         >
@@ -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-neutral-border-medium bg-custom-background-80">
+                        <div className="h-5 w-5 rounded-full border-2 border-neutral-border-medium bg-neutral-component-surface-dark">
                           <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-neutral-border-subtle 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-sidebar-neutral-component-surface-light 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-neutral-border-subtle 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-neutral-component-surface-light 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">
@@ -214,7 +214,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
             >
               <div className="flex w-full items-center">
                 <div
-                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  className="bar relative h-1.5 w-full rounded bg-neutral-component-surface-medium"
                   style={{
                     boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
                   }}