chore: update primary text color

packages/editor/core/src/ui/mentions/mention-node-view.tsx

@@ -19,7 +19,7 @@ export const MentionNodeView = (props) => {
   return (
     <NodeViewWrapper className="mention-component inline w-fit">
       <span
-        className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-custom-primary-100", {
+        className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-primary-text-subtle", {
           "bg-yellow-500/20 text-yellow-500": highlights ? highlights.includes(props.node.attrs.id) : false,
           "cursor-pointer": !props.extension.options.readonly,
           // "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)

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

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

packages/ui/src/avatar/avatar-group.tsx

@@ -66,7 +66,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
           <div
             className={`${
               !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-custom-primary-100 ring-1 ring-custom-background-100`}
+            } grid place-items-center rounded-full bg-custom-primary-10 text-[9px] text-primary-text-subtle ring-1 ring-custom-background-100`}
             style={
               isAValidNumber(size)
                 ? {

packages/ui/src/badge/helper.tsx

@@ -46,12 +46,12 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-10 text-custom-primary-100`,
+    default: `bg-custom-primary-10 text-primary-text-subtle`,
     hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-neutral-component-surface-light border border-custom-primary-100`,
+    default: `text-primary-text-subtle 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 `,
   },

packages/ui/src/button/helper.tsx

@@ -43,15 +43,15 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
-    default: `bg-custom-primary-10 text-custom-primary-100`,
+    default: `bg-custom-primary-10 text-primary-text-subtle`,
     hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
     pressed: `focus:bg-custom-primary-20`,
     disabled: `cursor-not-allowed !text-custom-primary-60`,
   },
   "outline-primary": {
-    default: `text-custom-primary-100 bg-transparent border border-custom-primary-100`,
+    default: `text-primary-text-subtle bg-transparent border border-custom-primary-100`,
     hover: `hover:bg-custom-primary-100/20`,
-    pressed: `focus:text-custom-primary-100 focus:bg-custom-primary-100/30`,
+    pressed: `focus:text-primary-text-subtle focus:bg-custom-primary-100/30`,
     disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
   },
   "neutral-primary": {
@@ -61,7 +61,7 @@ export const buttonStyling: IButtonStyling = {
     disabled: `cursor-not-allowed !text-neutral-text-subtle`,
   },
   "link-primary": {
-    default: `text-custom-primary-100 bg-neutral-component-surface-light`,
+    default: `text-primary-text-subtle 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`,

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

@@ -16,7 +16,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
   const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
 
   const priorityClasses = {
-    urgent: "bg-danger-110 text-red-500 border-danger-110",
+    urgent: "bg-danger-90 text-red-500 border-danger-90",
     high: "bg-orange-30 text-orange-80 border-orange-80",
     medium: "bg-warning-20 text-warning-80 border-warning-80",
     low: "bg-primary-30 text-primary-90 border-primary-90",
@@ -67,7 +67,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
               "text-red-500": priority === "urgent",
               "text-orange-500": priority === "high",
               "text-yellow-500": priority === "medium",
-              "text-custom-primary-100": priority === "low",
+              "text-primary-text-subtle": priority === "low",
               "text-neutral-text-medium": priority === "none",
             },
             className

space/components/accounts/sign-in-forms/optional-set-password.tsx

@@ -92,7 +92,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
         </div>
         <p className="text-xs text-onboarding-text-200">
           When you click{" "}
-          <span className="text-custom-primary-100">{isOnboarded ? "Go to board" : "Set up profile"}</span> above, you
+          <span className="text-primary-text-subtle">{isOnboarded ? "Go to board" : "Set up profile"}</span> above, you
           agree with our{" "}
           <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
             <span className="font-semibold underline">terms and conditions of service.</span>

space/components/accounts/sign-in-forms/password.tsx

@@ -191,7 +191,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
               type="button"
               onClick={handleForgotPassword}
               className={`text-xs font-medium ${
-                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
+                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-primary-text-subtle"
               }`}
               disabled={isSendingResetPasswordLink}
             >
@@ -222,7 +222,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
           </Button>
         </div>
         <p className="text-xs text-onboarding-text-200">
-          When you click <span className="text-custom-primary-100">Go to board</span> above, you agree with our{" "}
+          When you click <span className="text-primary-text-subtle">Go to board</span> above, you agree with our{" "}
           <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
             <span className="font-semibold underline">terms and conditions of service.</span>
           </Link>

space/components/accounts/sign-in-forms/set-password-link.tsx

@@ -66,7 +66,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
         Get on your flight deck
       </h1>
       <p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
-        We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
+        We have sent a link to <span className="font-semibold text-primary-text-subtle">{email},</span> so you can set a
         password
       </p>
 

space/components/accounts/sign-in-forms/unique-code.tsx

@@ -157,7 +157,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
         Get on your flight deck
       </h1>
       <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
-        Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
+        Paste the code you got at <span className="font-semibold text-primary-text-subtle">{email}</span> below.
       </p>
 
       <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
@@ -227,7 +227,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
               className={`text-xs ${
                 isRequestNewCodeDisabled
                   ? "text-onboarding-text-300"
-                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+                  : "text-onboarding-text-200 hover:text-primary-text-subtle"
               }`}
               disabled={isRequestNewCodeDisabled}
             >

space/components/issues/filters/labels.tsx

@@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

space/components/issues/filters/state.tsx

@@ -54,7 +54,7 @@ export const FilterState: React.FC<Props> = (props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

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

@@ -117,7 +117,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                     commentReactions?.some(
                       (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
                     )
-                      ? "text-custom-primary-100"
+                      ? "text-primary-text-subtle"
                       : ""
                   }
                 >

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

@@ -94,7 +94,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
                   <span
                     className={
                       reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
-                        ? "text-custom-primary-100"
+                        ? "text-primary-text-subtle"
                         : ""
                     }
                   >

web/components/account/sign-in-forms/forgot-password-popover.tsx

@@ -26,7 +26,7 @@ export const ForgotPasswordPopover = () => {
         <button
           type="button"
           ref={setReferenceElement}
-          className="text-xs font-medium text-custom-primary-100 outline-none"
+          className="text-xs font-medium text-primary-text-subtle outline-none"
         >
           Forgot your password?
         </button>

web/components/account/sign-in-forms/password.tsx

@@ -186,7 +186,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
             {isSmtpConfigured ? (
               <Link
                 href={`/accounts/forgot-password?email=${email}`}
-                className="text-xs font-medium text-custom-primary-100"
+                className="text-xs font-medium text-primary-text-subtle"
               >
                 Forgot your password?
               </Link>

web/components/account/sign-in-forms/root.tsx

@@ -110,7 +110,7 @@ export const SignInRoot = observer(() => {
             <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_in" />
             <p className="text-xs text-onboarding-text-300 text-center mt-6">
               Don{"'"}t have an account?{" "}
-              <Link href="/accounts/sign-up" className="text-custom-primary-100 font-medium underline">
+              <Link href="/accounts/sign-up" className="text-primary-text-subtle font-medium underline">
                 Sign up
               </Link>
             </p>

web/components/account/sign-in-forms/unique-code.tsx

@@ -127,7 +127,7 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
       <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
         Paste the code you got at
         <br />
-        <span className="font-semibold text-custom-primary-100">{email}</span> below.
+        <span className="font-semibold text-primary-text-subtle">{email}</span> below.
       </p>
       <form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
         <div>
@@ -187,7 +187,7 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
               className={`text-xs ${
                 isRequestNewCodeDisabled
                   ? "text-onboarding-text-300"
-                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+                  : "text-onboarding-text-200 hover:text-primary-text-subtle"
               }`}
               disabled={isRequestNewCodeDisabled}
             >

web/components/account/sign-up-forms/root.tsx

@@ -86,7 +86,7 @@ export const SignUpRoot = observer(() => {
           <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_up" />
           <p className="text-xs text-onboarding-text-300 text-center mt-6">
             Already using Plane?{" "}
-            <Link href="/" className="text-custom-primary-100 font-medium underline">
+            <Link href="/" className="text-primary-text-subtle font-medium underline">
               Sign in
             </Link>
           </p>

web/components/account/sign-up-forms/unique-code.tsx

@@ -127,7 +127,7 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
       <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
         Paste the code you got at
         <br />
-        <span className="font-semibold text-custom-primary-100">{email}</span> below.
+        <span className="font-semibold text-primary-text-subtle">{email}</span> below.
       </p>
 
       <form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
@@ -188,7 +188,7 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
               className={`text-xs ${
                 isRequestNewCodeDisabled
                   ? "text-onboarding-text-300"
-                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+                  : "text-onboarding-text-200 hover:text-primary-text-subtle"
               }`}
               disabled={isRequestNewCodeDisabled}
             >

web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx

@@ -7,7 +7,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
   const { theme: themStore } = useApplication();
   return (
     <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      className="w-7 h-7 rounded flex justify-center items-center bg-neutral-component-surface-dark transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
       onClick={() => themStore.toggleSidebar()}
     >
       <Menu size={14} className="text-neutral-text-medium group-hover:text-neutral-text-strong transition-all" />

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

@@ -166,12 +166,12 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {isCompleted ? (
                     progress === 100 ? (
-                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                      <Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
                     ) : (
-                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                      <span className="text-sm text-primary-text-subtle">{`!`}</span>
                     )
                   ) : progress === 100 ? (
-                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                    <Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
                   ) : (
                     <span className="text-xs text-neutral-text-medium">{`${progress}%`}</span>
                   )}
@@ -221,7 +221,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                       ))}
                     </AvatarGroup>
                   ) : (
-                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-neutral-component-surface-dark">
                       <User2 className="h-4 w-4 text-neutral-text-subtle" />
                     </span>
                   )}

web/components/cycles/sidebar.tsx

@@ -403,7 +403,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={startDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={isCompleted || !isEditingAllowed}
@@ -460,7 +460,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={endDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={isCompleted || !isEditingAllowed}

web/components/dashboard/widgets/issue-panels/issues-list.tsx

@@ -74,7 +74,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                 })}
               >
                 Issues
-                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
+                <span className="flex-shrink-0 bg-custom-primary-100/20 text-primary-text-subtle text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
                   {totalIssues}
                 </span>
               </h6>

web/components/dashboard/widgets/issue-panels/tabs-list.tsx

@@ -21,7 +21,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
   return (
     <Tab.List
       as="div"
-      className="relative border-[0.5px] border-neutral-border-medium rounded bg-custom-background-80 grid"
+      className="relative border-[0.5px] border-neutral-border-medium rounded bg-neutral-component-surface-dark grid"
       style={{
         gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
       }}

web/components/dashboard/widgets/overview-stats.tsx

@@ -75,7 +75,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
       {STATS_LIST.map((stat, index) => (
         <div
           className={cn(
-            `w-full flex flex-col gap-2 hover:bg-custom-background-80`,
+            `w-full flex flex-col gap-2 hover:bg-neutral-component-surface-dark`,
             index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
             index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
             index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",

web/components/dashboard/widgets/recent-projects.tsx

@@ -110,7 +110,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
               toggleCreateProjectModal(true);
             }}
           >
-            <div className="h-[3.375rem] w-[3.375rem] bg-custom-primary-100/20 text-custom-primary-100 grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0">
+            <div className="h-[3.375rem] w-[3.375rem] bg-custom-primary-100/20 text-primary-text-subtle grid place-items-center rounded border border-dashed border-custom-primary-60 flex-shrink-0">
               <Plus className="h-6 w-6" />
             </div>
             <p className="text-sm text-neutral-text-medium font-medium group-hover:underline group-hover:text-neutral-text-strong">

web/components/dropdowns/buttons.tsx

@@ -54,8 +54,8 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
     <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          "h-full flex items-center gap-1.5 border-[0.5px] border-neutral-border-medium hover:bg-neutral-component-surface-dark rounded text-xs px-2 py-0.5",
-          { "bg-custom-background-80": isActive },
+          { "bg-neutral-component-surface-dark": isActive },
           className
         )}
       >
@@ -72,7 +72,7 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
     <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-neutral-component-surface-dark",
           className
         )}
       >
@@ -89,8 +89,8 @@ const TransparentButton: React.FC<ButtonProps> = (props) => {
     <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
       <div
         className={cn(
-          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-neutral-component-surface-dark",
-          { "bg-custom-background-80": isActive },
+          { "bg-neutral-component-surface-dark": isActive },
           className
         )}
       >

web/components/dropdowns/member/workspace-member.tsx

@@ -208,7 +208,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                       value={option.value}
                       className={({ active, selected }) =>
                         `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
-                          active ? "bg-custom-background-80" : ""
+                          active ? "bg-neutral-component-surface-dark" : ""
                         } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                       }
                     >

web/components/dropdowns/module.tsx

@@ -90,7 +90,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
               return (
                 <div
                   key={moduleId}
-                  className="flex items-center gap-1 bg-custom-background-80 text-neutral-text-medium rounded px-1.5 py-1"
+                  className="flex items-center gap-1 bg-neutral-component-surface-dark text-neutral-text-medium rounded px-1.5 py-1"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
@@ -349,7 +349,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                         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,
                             "text-neutral-text-strong": selected,
                             "text-neutral-text-medium": !selected,
                           }

web/components/dropdowns/priority.tsx

@@ -211,7 +211,7 @@ const TransparentButton = (props: ButtonProps) => {
             "px-0.5": hideText,
             // highlight the whole button if text is hidden and priority is urgent
             "bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
-            "bg-custom-background-80": isActive,
+            "bg-neutral-component-surface-dark": isActive,
           },
           className
         )}
@@ -350,7 +350,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       className={cn(
         "h-full",
         {
-          "bg-custom-background-80": isOpen,
+          "bg-neutral-component-surface-dark": isOpen,
         },
         className
       )}

web/components/exporter/guide.tsx

@@ -106,7 +106,7 @@ const IntegrationGuide = observer(() => {
                 <button
                   disabled={!exporterServices?.prev_page_results}
                   onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
-                  className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
+                  className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${
                     exporterServices?.prev_page_results
                       ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
                       : "cursor-not-allowed opacity-75"
@@ -118,7 +118,7 @@ const IntegrationGuide = observer(() => {
                 <button
                   disabled={!exporterServices?.next_page_results}
                   onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
-                  className={`flex items-center rounded border border-custom-primary-100 px-1 text-custom-primary-100 ${
+                  className={`flex items-center rounded border border-custom-primary-100 px-1 text-primary-text-subtle ${
                     exporterServices?.next_page_results
                       ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
                       : "cursor-not-allowed opacity-75"

web/components/gantt-chart/blocks/blocks-display.tsx

@@ -93,7 +93,7 @@ export const GanttChartBlocks: FC<GanttChartBlocksProps> = (props) => {
               key={`block-${block.id}`}
               className={cn(
                 "h-11",
-                { "rounded bg-custom-background-80": activeBlock?.id === block.id },
+                { "rounded bg-neutral-component-surface-dark": activeBlock?.id === block.id },
                 {
                   "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
                     peekIssue?.issueId === block.data.id,

web/components/gantt-chart/helpers/add-block.tsx

@@ -76,7 +76,7 @@ export const ChartAddBlock: React.FC<Props> = (props) => {
         <Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)}>
           <button
             type="button"
-            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-custom-background-80 p-1.5 rounded border border-neutral-border-medium grid place-items-center text-neutral-text-medium hover:text-neutral-text-strong"
+            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-neutral-component-surface-dark p-1.5 rounded border border-neutral-border-medium grid place-items-center text-neutral-text-medium hover:text-neutral-text-strong"
             style={{
               marginLeft: `${buttonXPosition}px`,
             }}

web/components/gantt-chart/sidebar/sidebar.tsx

@@ -132,7 +132,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                         <div
                           className={cn(
                             "h-11",
-                            { "rounded bg-custom-background-80": snapshot.isDragging },
+                            { "rounded bg-neutral-component-surface-dark": snapshot.isDragging },
                             {
                               "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
                                 peekIssue?.issueId === block.data.id,

web/components/headers/cycle-issues.tsx

@@ -264,7 +264,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             )}
             <button
               type="button"
-              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-sidebar-neutral-component-surface-dark"
               onClick={toggleSidebar}
             >
               <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
@@ -272,7 +272,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           </div>
           <button
             type="button"
-            className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-sidebar-neutral-component-surface-dark"
             onClick={toggleSidebar}
           >
             <PanelRight

web/components/headers/module-issues.tsx

@@ -274,7 +274,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             )}
             <button
               type="button"
-              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-sidebar-neutral-component-surface-dark"
               onClick={toggleSidebar}
             >
               <ArrowRight

web/components/headers/project-issues.tsx

@@ -163,7 +163,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             {currentProjectDetails?.is_deployed && deployUrl && (
               <a
                 href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
-                className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
+                className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-primary-text-subtle"
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -209,7 +209,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 <Button variant="neutral-primary" size="sm" className="relative">
                   Inbox
                   {inboxDetails?.pending_issue_count > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-custom-sidebar-background-80 text-neutral-text-strong">
+                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-dark text-neutral-text-strong">
                       {inboxDetails?.pending_issue_count}
                     </span>
                   )}

web/components/headers/workspace-dashboard.tsx

@@ -37,13 +37,13 @@ export const WorkspaceDashboardHeader = () => {
             href="https://plane.so/changelog"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-neutral-component-surface-dark px-3 py-1.5"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
             <span className="text-xs hidden sm:hidden md:block font-medium">{"What's new?"}</span>
           </a>
           <a
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 "
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-neutral-component-surface-dark px-3 py-1.5 "
             href="https://github.com/makeplane/plane"
             target="_blank"
             rel="noopener noreferrer"

web/components/instance/ai-form.tsx

@@ -80,7 +80,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
             <a
               href="https://platform.openai.com/docs/models/overview"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               Learn more
@@ -129,7 +129,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
             <a
               href="https://platform.openai.com/api-keys"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               here.

web/components/instance/github-config-form.tsx

@@ -82,7 +82,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             <a
               href="https://github.com/settings/applications/new"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               GitHub OAuth application settings.
@@ -131,7 +131,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             <a
               href="https://github.com/settings/applications/new"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               GitHub OAuth application settings.
@@ -160,7 +160,7 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             <a
               href="https://github.com/settings/applications/new"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               here.

web/components/instance/google-config-form.tsx

@@ -80,7 +80,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
             <a
               href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               Learn more
@@ -109,7 +109,7 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
             <a
               href="https://console.cloud.google.com/apis/credentials/oauthclient"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               here.

web/components/instance/image-config-form.tsx

@@ -95,7 +95,7 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
             <a
               href="https://unsplash.com/documentation#creating-a-developer-account"
               target="_blank"
-              className="text-custom-primary-100 hover:underline"
+              className="text-primary-text-subtle hover:underline"
               rel="noreferrer"
             >
               Learn more.

web/components/instance/instance-admin-restriction.tsx

@@ -55,7 +55,7 @@ export const InstanceAdminRestriction: FC<InstanceAdminRestrictionProps> = ({ re
               <a
                 href="https://discord.com/channels/1031547764020084846/1094927053867995176"
                 target="_blank"
-                className="font-medium text-custom-primary-100 hover:underline"
+                className="font-medium text-primary-text-subtle hover:underline"
                 rel="noreferrer"
               >
                 Talk to us.

web/components/instance/sidebar-dropdown.tsx

@@ -143,7 +143,7 @@ export const InstanceSidebarDropdown = observer(() => {
               <div className="p-2 pb-0">
                 <Menu.Item as="button" type="button" className="w-full">
                   <Link href={`/${redirectWorkspaceSlug}`}>
-                    <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                    <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
                       Exit God Mode
                     </span>
                   </Link>

web/components/instance/sidebar-menu.tsx

@@ -59,7 +59,7 @@ export const InstanceAdminSidebarMenu = () => {
                 <div
                   className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
                     isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      ? "bg-custom-primary-100/10 text-primary-text-subtle"
                       : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                   } ${sidebarCollapsed ? "justify-center" : ""}`}
                 >
@@ -68,7 +68,7 @@ export const InstanceAdminSidebarMenu = () => {
                     <div className="flex flex-col leading-snug">
                       <span
                         className={`text-sm font-medium ${
-                          isActive ? "text-custom-primary-100" : "text-sidebar-neutral-text-medium"
+                          isActive ? "text-primary-text-subtle" : "text-sidebar-neutral-text-medium"
                         }`}
                       >
                         {item.name}

web/components/issues/issue-detail/parent-select.tsx

@@ -63,8 +63,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
           "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
           {
             "cursor-not-allowed": disabled,
-            "hover:bg-custom-background-80": !disabled,
+            "hover:bg-neutral-component-surface-dark": !disabled,
-            "bg-custom-background-80": isParentIssueModalOpen,
+            "bg-neutral-component-surface-dark": isParentIssueModalOpen,
           },
           className
         )}

web/components/issues/issue-detail/reactions/issue-comment.tsx

@@ -106,7 +106,7 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
                   }`}
                 >
                   <span>{renderEmoji(reaction)}</span>
-                  <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
+                  <span className={userReactions.includes(reaction) ? "text-primary-text-subtle" : ""}>
                     {(reactionIds || {})[reaction].length}{" "}
                   </span>
                 </button>

web/components/issues/issue-detail/reactions/issue.tsx

@@ -91,7 +91,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
                   }`}
                 >
                   <span>{renderEmoji(reaction)}</span>
-                  <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
+                  <span className={userReactions.includes(reaction) ? "text-primary-text-subtle" : ""}>
                     {(reactionIds || {})[reaction].length}{" "}
                   </span>
                 </button>

web/components/issues/issue-detail/relation-select.tsx

@@ -105,8 +105,8 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
           "group flex items-center gap-2 px-2 py-0.5 rounded outline-none",
           {
             "cursor-not-allowed": disabled,
-            "hover:bg-custom-background-80": !disabled,
+            "hover:bg-neutral-component-surface-dark": !disabled,
-            "bg-custom-background-80": isRelationModalOpen === relationKey,
+            "bg-neutral-component-surface-dark": isRelationModalOpen === relationKey,
           },
           className
         )}

web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -181,11 +181,11 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
         <div className="hidden rounded border-[0.5px] border-neutral-border-medium group-hover:block">
           <button
             type="button"
-            className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100"
+            className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-primary-text-subtle"
             onClick={handleOpen}
           >
             <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+            <span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
           </button>
         </div>
       )}

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -64,7 +64,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -63,7 +63,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/filters/header/filters/labels.tsx

@@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/filters/header/filters/mentions.tsx

@@ -64,7 +64,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/filters/header/filters/project.tsx

@@ -72,7 +72,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/filters/header/filters/state-group.tsx

@@ -54,7 +54,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
               {filteredOptions.length > 5 && (
                 <button
                   type="button"
-                  className="ml-8 text-xs font-medium text-custom-primary-100"
+                  className="ml-8 text-xs font-medium text-primary-text-subtle"
                   onClick={handleViewToggle}
                 >
                   {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/filters/header/filters/state.tsx

@@ -55,7 +55,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
                 {filteredOptions.length > 5 && (
                   <button
                     type="button"
-                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    className="ml-8 text-xs font-medium text-primary-text-subtle"
                     onClick={handleViewToggle}
                   >
                     {itemsToRender === filteredOptions.length ? "View less" : "View all"}

web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx

@@ -152,11 +152,11 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
           </div>
         ) : (
           <div
-            className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
+            className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-primary-text-subtle"
             onClick={() => setIsOpen(true)}
           >
             <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+            <span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
           </div>
         )}
       </div>

web/components/issues/issue-layouts/kanban/block.tsx

@@ -62,7 +62,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           <div className="line-clamp-1 text-xs text-neutral-text-medium">
             {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
           </div>
-          <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
+          <div className="absolute top-0 -right-1 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
         </div>
       </WithDisplayPropertiesHOC>
 

web/components/issues/issue-layouts/kanban/default.tsx

@@ -98,7 +98,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
               }`}
             >
               {sub_group_by === null && (
-                <div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-neutral-component-surface-medium py-1">
+                <div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-neutral-page-surface-default py-1">
                   <HeaderGroupByCard
                     sub_group_by={sub_group_by}
                     group_by={group_by}

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -160,7 +160,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
             </CustomMenu>
           ) : (
             <div
-              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
+              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-neutral-component-surface-dark"
               onClick={() => {
                 setTrackElement("Kanban layout");
                 setIsOpen(true);

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -132,7 +132,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
             {provided.placeholder}
 
             {enableQuickIssueCreate && !disableIssueCreation && (
-              <div className="w-full bg-neutral-component-surface-medium py-0.5 sticky bottom-0">
+              <div className="w-full bg-neutral-page-surface-default py-0.5 sticky bottom-0">
                 <KanBanQuickAddIssueForm
                   formKey="name"
                   groupId={groupId}

web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx

@@ -146,11 +146,11 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
         </div>
       ) : (
         <div
-          className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
+          className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-primary-text-subtle"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          <span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
         </div>
       )}
     </>

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -117,8 +117,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
         list.length > 0 &&
         list.map((_list: any) => (
           <div className="flex flex-shrink-0 flex-col">
-            <div className="sticky top-[50px] z-[1] flex w-full items-center bg-neutral-component-surface-medium py-1">
+            <div className="sticky top-[50px] z-[1] flex w-full items-center bg-neutral-page-surface-default py-1">
-              <div className="sticky left-0 flex-shrink-0 bg-neutral-component-surface-medium pr-2">
+              <div className="sticky left-0 flex-shrink-0 pr-2">
                 <HeaderSubGroupByCard
                   column_id={_list.id}
                   icon={_list.Icon}
@@ -218,7 +218,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
 
   return (
     <div className="relative">
-      <div className="sticky top-0 z-[2] h-[50px] bg-neutral-component-surface-medium">
+      <div className="sticky top-0 z-[2] h-[50px] bg-neutral-page-surface-default">
         <SubGroupSwimlaneHeader
           issueIds={issueIds}
           group_by={group_by}

web/components/issues/issue-layouts/list/default.tsx

@@ -111,7 +111,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
           (_list: any) =>
             validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
               <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-neutral-border-medium bg-neutral-component-surface-medium px-3 py-1">
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-neutral-border-medium bg-neutral-page-surface-default px-3 py-1">
                   <HeaderGroupByCard
                     icon={_list.icon}
                     title={_list.name || ""}

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -99,7 +99,7 @@ export const HeaderGroupByCard = observer(
               </CustomMenu>
             ) : (
               <div
-                className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
+                className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-neutral-component-surface-dark"
                 onClick={() => {
                   setTrackElement("List layout");
                   setIsOpen(true);

web/components/issues/issue-layouts/list/quick-add-issue-form.tsx

@@ -146,11 +146,11 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
         </div>
       ) : (
         <div
-          className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
+          className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-primary-text-subtle"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          <span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
         </div>
       )}
     </div>

web/components/issues/issue-layouts/properties/labels.tsx

@@ -120,7 +120,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
                   <div
                     key={label?.id}
-                    className={`flex overflow-hidden hover:bg-custom-background-80 ${
+                    className={`flex overflow-hidden hover:bg-neutral-component-surface-dark ${
                       !disabled && "cursor-pointer"
                     } h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-neutral-border-medium px-2.5 py-1 text-xs`}
                   >
@@ -227,8 +227,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                   key={option.value}
                   value={option.value}
                   className={({ active, selected }) =>
-                    `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+                    `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-neutral-component-surface-dark ${
-                      active ? "bg-custom-background-80" : ""
+                      active ? "bg-neutral-component-surface-dark" : ""
                     } ${selected ? "text-neutral-text-strong" : "text-neutral-text-medium"}`
                   }
                 >

web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx

@@ -27,7 +27,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
       value={issue.label_ids}
       defaultOptions={defaultLabelOptions}
       onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
-      className="h-11 w-full border-b-[0.5px] border-neutral-border-medium hover:bg-custom-background-80"
+      className="h-11 w-full border-b-[0.5px] border-neutral-border-medium hover:bg-neutral-component-surface-dark"
       buttonClassName="px-2.5 h-full"
       hideDropdownArrow
       maxRender={1}

web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx

@@ -217,11 +217,11 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
         <div className="flex items-center">
           <button
             type="button"
-            className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-custom-primary-100"
+            className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-primary-text-subtle"
             onClick={() => setIsOpen(true)}
           >
             <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+            <span className="text-sm font-medium text-primary-text-subtle">New Issue</span>
           </button>
         </div>
       )}

web/components/issues/sub-issues/root.tsx

@@ -307,7 +307,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                 {!disabled && (
                   <div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
                     <div
-                      className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                      className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-neutral-component-surface-dark"
                       onClick={() => {
                         setTrackElement("Issue detail add sub-issue");
                         handleIssueCrudState("create", parentIssueId, null);
@@ -316,7 +316,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                       Add sub-issue
                     </div>
                     <div
-                      className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                      className="cursor-pointer rounded border border-neutral-border-subtle p-1.5 px-2 shadow transition-all hover:bg-neutral-component-surface-dark"
                       onClick={() => {
                         setTrackElement("Issue detail add sub-issue");
                         handleIssueCrudState("existing", parentIssueId, null);

web/components/modules/module-list-item.tsx

@@ -144,12 +144,12 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {completedModuleCheck ? (
                     progress === 100 ? (
-                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                      <Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
                     ) : (
-                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                      <span className="text-sm text-primary-text-subtle">{`!`}</span>
                     )
                   ) : progress === 100 ? (
-                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                    <Check className="h-3 w-3 stroke-[2] text-primary-text-subtle" />
                   ) : (
                     <span className="text-xs text-neutral-text-medium">{`${progress}%`}</span>
                   )}

web/components/modules/sidebar.tsx

@@ -349,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={startDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={!isEditingAllowed}
@@ -405,7 +405,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={endDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-custom-background-80 ${
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-neutral-text-medium hover:bg-neutral-component-surface-dark ${
                         isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       disabled={!isEditingAllowed}
@@ -629,7 +629,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                             {isEditingAllowed && (
                               <div className="flex w-full items-center justify-end">
                                 <button
-                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  className="flex items-center gap-1.5 text-sm font-medium text-primary-text-subtle"
                                   onClick={() => setModuleLinkModal(true)}
                                 >
                                   <Plus className="h-3 w-3" />
@@ -657,7 +657,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                               <span className="p-0.5 text-xs text-neutral-text-medium">No links added yet</span>
                             </div>
                             <button
-                              className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                              className="flex items-center gap-1.5 text-sm font-medium text-primary-text-subtle"
                               onClick={() => setModuleLinkModal(true)}
                             >
                               <Plus className="h-3 w-3" />

web/components/notifications/notification-header.tsx

@@ -165,7 +165,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 onClick={() => setSelectedTab(tab.value)}
                 className={`whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium outline-none ${
                   tab.value === selectedTab
-                    ? "border-custom-primary-100 text-custom-primary-100"
+                    ? "border-custom-primary-100 text-primary-text-subtle"
                     : "border-transparent text-neutral-text-medium"
                 }`}
               >

web/components/notifications/notification-popover.tsx

@@ -68,7 +68,7 @@ export const NotificationPopover = observer(() => {
                 <Popover.Button
                   className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                     isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      ? "bg-custom-primary-100/10 text-primary-text-subtle"
                       : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
                   } ${isSidebarCollapsed ? "justify-center" : ""}`}
                 >
@@ -156,7 +156,7 @@ export const NotificationPopover = observer(() => {
                         {hasMore && !isLoadingMore && (
                           <button
                             type="button"
-                            className="my-6 flex w-full items-center justify-center text-sm font-medium text-custom-primary-100"
+                            className="my-6 flex w-full items-center justify-center text-sm font-medium text-primary-text-subtle"
                             disabled={isLoadingMore}
                             onClick={() => {
                               setSize((prev) => prev + 1);

web/components/onboarding/invitations.tsx

@@ -118,7 +118,7 @@ export const Invitations: React.FC<Props> = (props) => {
                     <p className="text-xs text-neutral-text-medium">{ROLE[invitation.role]}</p>
                   </div>
                   <span
-                    className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-neutral-text-medium"}`}
+                    className={`flex-shrink-0 ${isSelected ? "text-primary-text-subtle" : "text-neutral-text-medium"}`}
                   >
                     <CheckCircle2 className="h-5 w-5" />
                   </span>

web/components/onboarding/invite-members.tsx

@@ -416,7 +416,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
             </div>
             <button
               type="button"
-              className="flex items-center gap-2 bg-transparent py-2 pr-3 text-sm font-semibold text-custom-primary-100 outline-custom-primary-100"
+              className="flex items-center gap-2 bg-transparent py-2 pr-3 text-sm font-semibold text-primary-text-subtle outline-custom-primary-100"
               onClick={appendField}
             >
               <Plus className="h-3 w-3" />

web/components/onboarding/tour/root.tsx

@@ -108,7 +108,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                   </Button>
                   <button
                     type="button"
-                    className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
+                    className="bg-transparent text-xs font-medium text-primary-text-subtle outline-custom-text-100"
                     onClick={onComplete}
                   >
                     No thanks, I will explore it myself

web/components/onboarding/tour/sidebar.tsx

@@ -48,7 +48,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
           key={option.key}
           className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
             step === option.key
-              ? "border-custom-primary-100 text-custom-primary-100"
+              ? "border-custom-primary-100 text-primary-text-subtle"
               : "border-transparent text-neutral-text-medium"
           }`}
           onClick={() => setStep(option.key)}

web/components/profile/navbar.tsx

@@ -29,7 +29,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
             <span
               className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
                 router.pathname === tab.selected
-                  ? "border-custom-primary-100 text-custom-primary-100"
+                  ? "border-custom-primary-100 text-primary-text-subtle"
                   : "border-transparent"
               }`}
             >

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

@@ -325,7 +325,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                               <CopyLinkToClipboard copy_link={`${plane_deploy_url}/${workspaceSlug}/${project.id}`} />
                             </div>
                           </div>
-                          <div className="mt-3 flex items-center gap-1 text-custom-primary-100">
+                          <div className="mt-3 flex items-center gap-1 text-primary-text-subtle">
                             <div className="flex h-5 w-5 items-center overflow-hidden">
                               <CircleDot className="h-5 w-5" />
                             </div>

web/components/states/project-setting-state-list.tsx

@@ -53,7 +53,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
                   <h4 className="text-base font-medium capitalize text-neutral-text-medium">{group}</h4>
                   <button
                     type="button"
-                    className="flex items-center gap-2 px-2 text-custom-primary-100 outline-none hover:text-custom-primary-200"
+                    className="flex items-center gap-2 px-2 text-primary-text-subtle outline-none hover:text-custom-primary-200"
                     onClick={() => {
                       setTrackElement("PROJECT_SETTINGS_STATES_PAGE");
                       setActiveGroup(group as keyof StateGroup);
@@ -122,7 +122,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
                     <h4 className="text-base font-medium text-neutral-text-medium capitalize">{key}</h4>
                     <button
                       type="button"
-                      className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
+                      className="flex items-center gap-2 text-primary-text-subtle px-2 hover:text-custom-primary-200 outline-none"
                       onClick={() => setActiveGroup(key as keyof StateGroup)}
                     >
                       <Plus className="h-4 w-4" />

web/components/ui/graphs/calendar-graph.tsx

@@ -1,34 +0,0 @@
-// nivo
-import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
-// types
-import { TGraph } from "./types";
-// constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
-
-export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" | "width">> = ({
-  height = "400px",
-  width = "100%",
-  margin,
-  theme,
-  ...rest
-}) => (
-  <div style={{ height, width }}>
-    <ResponsiveCalendar
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
-      colors={
-        rest.colors ?? [
-          "rgba(var(--color-primary-100), 0.2)",
-          "rgba(var(--color-primary-100), 0.4)",
-          "rgba(var(--color-primary-100), 0.8)",
-          "rgba(var(--color-primary-100), 1)",
-        ]
-      }
-      emptyColor={rest.emptyColor ?? "rgb(var(--color-background-80))"}
-      dayBorderColor={rest.dayBorderColor ?? "transparent"}
-      daySpacing={rest.daySpacing ?? 5}
-      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-background-100))"}
-      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      {...rest}
-    />
-  </div>
-);

web/components/ui/graphs/index.ts

@@ -1,5 +1,4 @@
 export * from "./bar-graph";
-export * from "./calendar-graph";
 export * from "./line-graph";
 export * from "./marimekko-graph";
 export * from "./pie-graph";

web/components/workspace/settings/workspace-details.tsx

@@ -194,7 +194,7 @@ export const WorkspaceDetails: FC = observer(() => {
             }/${currentWorkspace.slug}`}</button>
             {isAdmin && (
               <button
-                className="flex items-center gap-1.5 text-left text-xs font-medium text-custom-primary-100"
+                className="flex items-center gap-1.5 text-left text-xs font-medium text-primary-text-subtle"
                 onClick={() => setIsImageUploadModalOpen(true)}
               >
                 {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (

web/components/workspace/sidebar-dropdown.tsx

@@ -227,7 +227,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                     >
                       <Menu.Item
                         as="div"
-                        className="flex items-center gap-2 rounded px-2 py-1 text-sm text-sidebar-neutral-text-strong hover:bg-sidebar-neutral-component-surface-dark font-medium"
+                        className="flex items-center gap-2 rounded px-2 py-1 text-sm text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark font-medium"
                       >
                         <PlusSquare strokeWidth={1.75} className="h-4 w-4 flex-shrink-0" />
                         Create workspace
@@ -291,7 +291,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
           >
             <Menu.Items
               className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left  flex-col divide-y
-          divide-custom-sidebar-border-200 rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+          divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
@@ -330,7 +330,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                 <div className="p-2 pb-0">
                   <Link href="/god-mode">
                     <Menu.Item as="button" type="button" className="w-full">
-                      <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                      <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
                         Enter God Mode
                       </span>
                     </Menu.Item>

web/components/workspace/sidebar-menu.tsx

@@ -49,8 +49,8 @@ export const WorkspaceSidebarMenu = observer(() => {
                   <div
                     className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                       link.highlight(router.asPath, `/${workspaceSlug}`)
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        ? "bg-primary-component-surface-light text-primary-text-subtle"
-                        : "text-sidebar-neutral-text-medium hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                        : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                     } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                   >
                     {

web/components/workspace/views/header.tsx

@@ -28,7 +28,7 @@ const ViewTab = observer((props: { viewId: string }) => {
         id={`global-view-${viewId}`}
         className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
           viewId === globalViewId
-            ? "border-custom-primary-100 text-custom-primary-100"
+            ? "border-custom-primary-100 text-primary-text-subtle"
             : "border-transparent hover:border-neutral-border-medium hover:text-neutral-text-subtle"
         }`}
       >
@@ -71,7 +71,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
               <span
                 className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
                   tab.key === globalViewId
-                    ? "border-custom-primary-100 text-custom-primary-100"
+                    ? "border-custom-primary-100 text-primary-text-subtle"
                     : "border-transparent hover:border-neutral-border-medium hover:text-neutral-text-subtle"
                 }`}
               >

web/constants/graph.ts

@@ -3,7 +3,7 @@ import { Theme } from "@nivo/core";
 
 export const CHARTS_THEME: Theme = {
   background: "transparent",
-  textColor: "rgb(var(--color-text-200))",
+  textColor: "rgb(var(--color-neutral-110))",
   axis: {
     domain: {
       line: {
@@ -15,14 +15,14 @@ export const CHARTS_THEME: Theme = {
   tooltip: {
     container: {
       background: "rgb(var(--color-background-80))",
-      color: "rgb(var(--color-text-200))",
+      color: "rgb(var(--color-neutral-110))",
       fontSize: "0.8rem",
-      border: "1px solid rgb(var(--color-border-300))",
+      border: "1px solid rgb(var(--color-neutral-70))",
     },
   },
   grid: {
     line: {
-      stroke: "rgb(var(--color-border-100))",
+      stroke: "rgb(var(--color-neutral-60))",
     },
   },
 };

web/layouts/settings-layout/profile/preferences/sidebar.tsx

@@ -28,7 +28,7 @@ export const ProfilePreferenceSettingsSidebar = () => {
               <div
                 className={`rounded-md px-4 py-2 text-sm font-medium ${
                   (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
-                    ? "bg-custom-primary-100/10 text-custom-primary-100"
+                    ? "bg-custom-primary-100/10 text-primary-text-subtle"
                     : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                 }`}
               >

web/layouts/settings-layout/profile/sidebar.tsx

@@ -106,7 +106,7 @@ export const ProfileLayoutSidebar = observer(() => {
                     <div
                       className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                         link.highlight(router.pathname)
-                          ? "bg-custom-primary-100/10 text-custom-primary-100"
+                          ? "bg-custom-primary-100/10 text-primary-text-subtle"
                           : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
                       } ${sidebarCollapsed ? "justify-center" : ""}`}
                     >

web/layouts/settings-layout/project/sidebar.tsx

@@ -28,7 +28,7 @@ export const ProjectSettingsSidebar = () => {
                   <div
                     className={`rounded-md px-4 py-2 text-sm font-medium ${
                       link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        ? "bg-custom-primary-100/10 text-primary-text-subtle"
                         : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                     }`}
                   >

web/layouts/settings-layout/workspace/sidebar.tsx

@@ -30,7 +30,7 @@ export const WorkspaceSettingsSidebar = () => {
                     <div
                       className={`rounded-md px-4 py-2 text-sm font-medium ${
                         link.highlight(router.asPath, `/${workspaceSlug}`)
-                          ? "bg-custom-primary-100/10 text-custom-primary-100"
+                          ? "bg-custom-primary-100/10 text-primary-text-subtle"
                           : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                       }`}
                     >

web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -115,7 +115,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                   key={tab.key}
                   className={({ selected }) =>
                     `border-b-2 p-4 text-sm font-medium outline-none ${
-                      selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
+                      selected ? "border-custom-primary-100 text-primary-text-subtle" : "border-transparent"
                     }`
                   }
                 >
@@ -125,7 +125,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
             </Tab.List>
             <div className="hidden sm:block">
               {cycleTab !== "active" && (
-                <div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-custom-background-80 p-1">
+                <div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-neutral-component-surface-dark p-1">
                   {CYCLE_VIEW_LAYOUTS.map((layout) => {
                     if (layout.key === "gantt" && cycleTab === "draft") return null;
 

web/pages/god-mode/authorization.tsx

@@ -84,7 +84,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
                   <p>Slack-like emails for authentication.</p>
                   You need to have set up email{" "}
                   <Link href="email">
-                    <span className="text-custom-primary-100 hover:underline">here</span>
+                    <span className="text-primary-text-subtle hover:underline">here</span>
                   </Link>{" "}
                   to enable this.
                 </div>

web/pages/invitations/index.tsx

@@ -172,7 +172,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
                       </div>
                       <span
                         className={`flex-shrink-0 ${
-                          isSelected ? "text-custom-primary-100" : "text-neutral-text-medium"
+                          isSelected ? "text-primary-text-subtle" : "text-neutral-text-medium"
                         }`}
                       >
                         <CheckCircle2 className="h-5 w-5" />

web/pages/profile/index.tsx

@@ -213,7 +213,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
               </div>
 
               {/* <Link href={`/profile/${myProfile.id}`}>
-              <span className="flex item-center gap-1 text-sm text-custom-primary-100 underline font-medium">
+              <span className="flex item-center gap-1 text-sm text-primary-text-subtle underline font-medium">
                 <ExternalLink className="h-4 w-4" />
                 Activity Overview
               </span>

web/styles/globals.css

@@ -228,9 +228,9 @@
     --color-primary-110: #9eb1ff;
     --color-primary-120: #d6e1ff;
 
-    --color-neutral-0: #18191b;
+    --color-neutral-0: #1b1c1e;
-    --color-neutral-10: #111113;
+    --color-neutral-10: #1b1c1e;
-    --color-neutral-20: #18191b;
+    --color-neutral-20: #1e1f22;
     --color-neutral-30: #212225;
     --color-neutral-40: #272a2d;
     --color-neutral-50: #2e3135;