From 6cc5c1946a4cbb8d0b7c512b771182d884dca9ee Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 26 Dec 2025 19:17:03 +0530
Subject: [PATCH] regression: red and green color backgrounds (#8456)

---
 apps/admin/core/components/common/banner.tsx  |  2 +-
 .../components/account/auth-forms/email.tsx   |  2 +-
 .../comment/comment-detail-card.tsx           | 12 +--
 apps/web/ce/components/relations/index.tsx    |  2 +-
 .../components/account/auth-forms/email.tsx   |  2 +-
 .../account/auth-forms/password.tsx           | 13 +--
 .../account/deactivate-account-modal.tsx      |  2 +-
 .../core/components/analytics/trend-piece.tsx |  4 +-
 .../components/api-token/token-list-item.tsx  |  2 +-
 .../components/comments/card/edit-form.tsx    | 28 ++-----
 apps/web/core/components/exporter/column.tsx  |  4 +-
 .../components/exporter/single-export.tsx     |  4 +-
 .../inbox/content/inbox-issue-header.tsx      | 10 +--
 .../components/inbox/inbox-status-icon.tsx    |  2 +-
 .../integration/delete-import-modal.tsx       |  2 +-
 .../components/integration/single-import.tsx  |  4 +-
 .../issue-detail/label/create-label.tsx       |  8 +-
 .../issue-layouts/group-drag-overlay.tsx      |  4 +-
 .../issue-layouts/kanban/base-kanban-root.tsx |  2 +-
 .../issue-layouts/quick-add/form/gantt.tsx    |  2 +-
 .../issues/issue-layouts/quick-add/root.tsx   |  2 +-
 .../components/onboarding/step-indicator.tsx  |  2 +-
 .../onboarding/switch-account-dropdown.tsx    |  2 +-
 apps/web/core/components/profile/sidebar.tsx  |  4 +-
 .../project/confirm-project-member-remove.tsx |  2 +-
 .../project/delete-project-modal.tsx          |  2 +-
 .../project/leave-project-modal.tsx           |  2 +-
 .../views/view-list-item-action.tsx           |  4 +-
 .../ConfirmWorkspaceMemberRemove.tsx          |  2 +-
 packages/constants/src/cycle.ts               |  2 +-
 packages/constants/src/dashboard.ts           |  4 +-
 packages/constants/src/module.ts              |  4 +-
 .../menus/bubble-menu/link-selector.tsx       |  2 +-
 .../extensions/code/code-block-node-view.tsx  |  2 +-
 .../custom-image/components/uploader.tsx      | 15 ++--
 packages/propel/src/banner/helper.tsx         |  4 +-
 packages/propel/src/toolbar/toolbar.tsx       |  2 +-
 packages/types/src/issues.ts                  | 83 +------------------
 packages/types/src/issues/issue.ts            |  4 +-
 .../ui/src/form-fields/password/helper.tsx    |  4 +-
 packages/ui/src/form-fields/textarea.tsx      |  2 +-
 packages/ui/src/modals/alert-modal.tsx        |  2 +-
 42 files changed, 86 insertions(+), 177 deletions(-)

diff --git a/apps/admin/core/components/common/banner.tsx b/apps/admin/core/components/common/banner.tsx
index 292d3bc5c..81fe753cc 100644
--- a/apps/admin/core/components/common/banner.tsx
+++ b/apps/admin/core/components/common/banner.tsx
@@ -10,7 +10,7 @@ export function Banner(props: TBanner) {
 
   return (
     <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-primary border-danger-strong" : "bg-success-primary border-success-strong"}`}
+      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-subtle border-danger-strong" : "bg-success-subtle border-success-strong"}`}
     >
       <div className="flex items-center justify-center">
         <div className="flex-shrink-0">
diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx
index 63c3c6bcc..00ef886c6 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/apps/space/core/components/account/auth-forms/email.tsx
@@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index a1715e2a8..2351df40b 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -132,22 +132,16 @@ export const CommentCard = observer(function CommentCard(props: Props) {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-green-500"
+                className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-success-primary"
               >
-                <CheckIcon
-                  className="h-3 w-3 text-success-primary duration-300 group-hover:text-on-color"
-                  strokeWidth={2}
-                />
+                <CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
               </button>
               <button
                 type="button"
                 className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
-                <CloseIcon
-                  className="h-3 w-3 text-danger-primary duration-300 group-hover:text-on-color"
-                  strokeWidth={2}
-                />
+                <CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
               </button>
             </div>
           </form>
diff --git a/apps/web/ce/components/relations/index.tsx b/apps/web/ce/components/relations/index.tsx
index 1752fa226..956bf5acd 100644
--- a/apps/web/ce/components/relations/index.tsx
+++ b/apps/web/ce/components/relations/index.tsx
@@ -23,7 +23,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
   blocked_by: {
     key: "blocked_by",
     i18n_label: "issue.relation.blocked_by",
-    className: "bg-danger-primary text-danger-primary",
+    className: "bg-danger-subtle text-danger-primary",
     icon: (size) => <CircleDot size={size} className="text-secondary" />,
     placeholder: "None",
   },
diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx
index 27a975c75..649824a0b 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -67,7 +67,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder={t("auth.common.email.placeholder")}
-            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 4d2276f1a..b7b1cad89 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -124,19 +124,20 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
   return (
     <>
       {isBannerMessage && mode === EAuthModes.SIGN_UP && (
-        <div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-primary">
-          <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-subtle">
+          <div className="w-4 h-4 shrink-0 relative flex justify-center items-center">
             <Info size={16} className="text-danger-primary" />
           </div>
           <div className="w-full text-13 font-medium text-danger-primary">
             {t("auth.sign_up.errors.password.strength")}
           </div>
-          <div
-            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-primary text-accent-primary/80"
+          <button
+            type="button"
+            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-subtle-hover text-accent-primary/80"
             onClick={() => setBannerMessage(false)}
           >
-            <CloseIcon className="w-4 h-4 flex-shrink-0 text-danger-primary" />
-          </div>
+            <CloseIcon className="w-4 h-4 shrink-0 text-danger-primary" />
+          </button>
         </div>
       )}
       <form
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index 42fd21b06..b7d1952de 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -67,7 +67,7 @@ export function DeactivateAccountModal(props: Props) {
       <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
         <div className="">
           <div className="flex items-start gap-x-4">
-            <div className="mt-3 grid place-items-center rounded-full bg-danger-primary p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
+            <div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
               <TrashIcon
                 className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
                 aria-hidden="true"
diff --git a/apps/web/core/components/analytics/trend-piece.tsx b/apps/web/core/components/analytics/trend-piece.tsx
index 691292c99..176c5b4c9 100644
--- a/apps/web/core/components/analytics/trend-piece.tsx
+++ b/apps/web/core/components/analytics/trend-piece.tsx
@@ -43,9 +43,9 @@ const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtra
     atrisk: "text-danger-primary border border-danger-strong",
   },
   tinted: {
-    ontrack: "text-success-primary bg-success-primary",
+    ontrack: "text-success-primary bg-success-subtle",
     offtrack: "text-yellow-500 bg-yellow-500/10",
-    atrisk: "text-danger-primary bg-danger-primary",
+    atrisk: "text-danger-primary bg-danger-subtle",
   },
 } as const;
 
diff --git a/apps/web/core/components/api-token/token-list-item.tsx b/apps/web/core/components/api-token/token-list-item.tsx
index 56ee64a33..7bdc81fb5 100644
--- a/apps/web/core/components/api-token/token-list-item.tsx
+++ b/apps/web/core/components/api-token/token-list-item.tsx
@@ -38,7 +38,7 @@ export function ApiTokenListItem(props: Props) {
           <h5 className="truncate text-13 font-medium">{token.label}</h5>
           <span
             className={`${
-              token.is_active ? "bg-success-primary text-success-primary" : "bg-layer-1 text-placeholder"
+              token.is_active ? "bg-success-subtle text-success-primary" : "bg-layer-1 text-placeholder"
             } ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
diff --git a/apps/web/core/components/comments/card/edit-form.tsx b/apps/web/core/components/comments/card/edit-form.tsx
index e8c9406c9..6747df123 100644
--- a/apps/web/core/components/comments/card/edit-form.tsx
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 import type { EditorRefApi } from "@plane/editor";
@@ -111,40 +111,26 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
             onClick={handleSubmit(onEnter)}
             disabled={isDisabled}
             className={cn(
-              "group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
-              isDisabled
-                ? "cursor-not-allowed border-success-strong/50 bg-success-primary"
-                : "border-success-strong bg-success-primary hover:bg-green-500"
+              "group rounded-lg border border-success-subtle size-7 grid place-items-center shadow-raised-100 bg-success-subtle duration-300",
+              isDisabled ? "" : "hover:bg-success-subtle-1"
             )}
           >
-            <CheckIcon
-              className={cn(
-                "size-4 duration-300",
-                isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"
-              )}
-            />
+            <CheckIcon className="size-4 text-success-primary" />
           </button>
         )}
         <button
           type="button"
           disabled={isSubmitting}
           className={cn(
-            "group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
-            isSubmitting
-              ? "cursor-not-allowed border-danger-strong/50 bg-danger-primary"
-              : "border-danger-strong bg-danger-primary hover:bg-red-500"
+            "group rounded-lg border border-danger-subtle size-7 grid place-items-center shadow-raised-100 bg-danger-subtle duration-300",
+            isSubmitting ? "" : "hover:bg-danger-subtle-hover"
           )}
           onClick={() => {
             setIsEditing(false);
             editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
           }}
         >
-          <CloseIcon
-            className={cn(
-              "size-5 duration-300",
-              isSubmitting ? "text-danger-primary/50" : "text-danger-primary group-hover:text-on-color"
-            )}
-          />
+          <CloseIcon className="size-4 text-danger-primary" />
         </button>
       </div>
     </form>
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
index 6e10650ca..a1d25cd9e 100644
--- a/apps/web/core/components/exporter/column.tsx
+++ b/apps/web/core/components/exporter/column.tsx
@@ -72,11 +72,11 @@ export const useExportColumns = () => {
         <span
           className={`rounded-sm text-11 px-2 py-1 capitalize ${
             rowData.status === "completed"
-              ? "bg-success-primary text-success-primary"
+              ? "bg-success-subtle text-success-primary"
               : rowData.status === "processing"
                 ? "bg-yellow-500/20 text-yellow-500"
                 : rowData.status === "failed"
-                  ? "bg-danger-primary text-danger-primary"
+                  ? "bg-danger-subtle text-danger-primary"
                   : rowData.status === "expired"
                     ? "bg-orange-500/20 text-orange-500"
                     : "bg-gray-500/20 text-gray-500"
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
index a86f1ed12..e536e9daf 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -38,11 +38,11 @@ export function SingleExport({ service, refreshing }: Props) {
           <span
             className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
               service.status === "completed"
-                ? "bg-success-primary text-success-primary"
+                ? "bg-success-subtle text-success-primary"
                 : service.status === "processing"
                   ? "bg-yellow-500/20 text-yellow-500"
                   : service.status === "failed"
-                    ? "bg-danger-primary text-danger-primary"
+                    ? "bg-danger-subtle text-danger-primary"
                     : service.status === "expired"
                       ? "bg-orange-500/20 text-orange-500"
                       : ""
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index 2170259b4..f326186f1 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -270,7 +270,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
         />
       </>
 
-      <Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-[15] border-b border-subtle">
+      <Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-15 border-b border-subtle">
         <div className="flex items-center gap-4">
           {isNotificationEmbed && (
             <button onClick={embedRemoveCurrentNotification}>
@@ -310,11 +310,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
 
           <div className="flex flex-wrap items-center gap-2">
             {canMarkAsAccepted && (
-              <div className="flex-shrink-0">
+              <div className="shrink-0">
                 <Button
                   variant="secondary"
                   prependIcon={<CircleCheck className="w-3 h-3" />}
-                  className="text-success-primary border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
+                  className="text-on-color border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
@@ -329,11 +329,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
             )}
 
             {canMarkAsDeclined && (
-              <div className="flex-shrink-0">
+              <div className="shrink-0">
                 <Button
                   variant="secondary"
                   prependIcon={<CircleX className="w-3 h-3" />}
-                  className="text-danger-primary border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
+                  className="text-on-color border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
                   onClick={() =>
                     handleActionWithPermission(
                       isProjectAdmin,
diff --git a/apps/web/core/components/inbox/inbox-status-icon.tsx b/apps/web/core/components/inbox/inbox-status-icon.tsx
index 11d615b7a..61450b608 100644
--- a/apps/web/core/components/inbox/inbox-status-icon.tsx
+++ b/apps/web/core/components/inbox/inbox-status-icon.tsx
@@ -18,7 +18,7 @@ export const ICON_PROPERTIES = {
   [EInboxIssueStatus.SNOOZED]: {
     icon: Clock,
     textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-primary" : "bg-[#E0E1E6]"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-[#E0E1E6]"),
   },
   [EInboxIssueStatus.ACCEPTED]: {
     icon: CheckCircle2,
diff --git a/apps/web/core/components/integration/delete-import-modal.tsx b/apps/web/core/components/integration/delete-import-modal.tsx
index 7ca547657..c09b0feac 100644
--- a/apps/web/core/components/integration/delete-import-modal.tsx
+++ b/apps/web/core/components/integration/delete-import-modal.tsx
@@ -59,7 +59,7 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <div className="flex flex-col gap-6 p-6">
         <div className="flex w-full items-center justify-start gap-6">
-          <span className="place-items-center rounded-full bg-danger-primary p-4">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
             <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </span>
           <span className="flex items-center justify-start">
diff --git a/apps/web/core/components/integration/single-import.tsx b/apps/web/core/components/integration/single-import.tsx
index 27aab66a7..43241ed2d 100644
--- a/apps/web/core/components/integration/single-import.tsx
+++ b/apps/web/core/components/integration/single-import.tsx
@@ -36,11 +36,11 @@ export const SingleImport = observer(function SingleImport({ service, refreshing
           <span
             className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
               service.status === "completed"
-                ? "bg-success-primary text-success-primary"
+                ? "bg-success-subtle text-success-primary"
                 : service.status === "processing"
                   ? "bg-yellow-500/20 text-yellow-500"
                   : service.status === "failed"
-                    ? "bg-danger-primary text-danger-primary"
+                    ? "bg-danger-subtle text-danger-primary"
                     : ""
             }`}
           >
diff --git a/apps/web/core/components/issues/issue-detail/label/create-label.tsx b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
index 3fb070693..bc9fec02a 100644
--- a/apps/web/core/components/issues/issue-detail/label/create-label.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
@@ -144,13 +144,17 @@ export function LabelCreate(props: ILabelCreate) {
           />
           <button
             type="button"
-            className="grid place-items-center rounded-sm bg-red-500 p-1"
+            className="grid place-items-center rounded-sm bg-danger-primary p-1"
             onClick={() => setIsCreateToggle(false)}
             disabled={disabled}
           >
             <CloseIcon className="h-3.5 w-3.5 text-on-color" />
           </button>
-          <button type="submit" className="grid place-items-center rounded-sm bg-green-500 p-1" disabled={isSubmitting}>
+          <button
+            type="submit"
+            className="grid place-items-center rounded-sm bg-success-primary p-1"
+            disabled={isSubmitting}
+          >
             {isSubmitting ? (
               <Loader className="spin h-3.5 w-3.5 text-on-color" />
             ) : (
diff --git a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index dfa754489..26f5b1b32 100644
--- a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
+++ b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -47,8 +47,8 @@ export function GroupDragOverlay(props: Props) {
       className={cn(
         `absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
         {
-          "flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible,
-          "bg-danger-primary": workflowDisabledSource && isDropDisabled,
+          "flex flex-col border-[1px] border-strong z-2": shouldOverlayBeVisible,
+          "bg-danger-subtle": workflowDisabledSource && isDropDisabled,
         },
         { hidden: !shouldOverlayBeVisible }
       )}
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 2b864a04d..0fc8f2131 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -258,7 +258,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
           className={`${
             isDragging ? `opacity-100` : `opacity-0`
           } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${
-            isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
+            isDragOverDelete ? "bg-danger-primary blur-2xl" : ""
           } transition duration-300`}
         >
           Drop here to delete the work item.
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index faf3d20b1..3802b775e 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
   const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-primary")}>
+    <div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-subtle")}>
       <form
         ref={ref}
         onSubmit={onSubmit}
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
index dacb8d64a..33238b67e 100644
--- a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -151,7 +151,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
     <div
       className={cn(
         containerClassName,
-        errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-primary` : ``
+        errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-subtle` : ``
       )}
     >
       {isOpen ? (
diff --git a/apps/web/core/components/onboarding/step-indicator.tsx b/apps/web/core/components/onboarding/step-indicator.tsx
index 1e38daf8b..543614a5b 100644
--- a/apps/web/core/components/onboarding/step-indicator.tsx
+++ b/apps/web/core/components/onboarding/step-indicator.tsx
@@ -21,7 +21,7 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
         <div
           key={`line-${i}`}
           className={cn("h-1.5 -ml-0.5 w-full", {
-            "bg-green-700": isCompleted,
+            "bg-success-primary": isCompleted,
             "bg-surface-1": !isCompleted,
             "rounded-l-full": isFirstStep,
             "rounded-r-full": isLastStep || isActive,
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
index 5d395bce8..a909efb45 100644
--- a/apps/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -34,7 +34,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
       <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
       <Menu as="div" className="relative">
         <Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-layer-1 z-10">
-          <div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-on-color font-semibold text-13 capitalize">
+          <div className="size-6 rounded-full bg-success-primary flex items-center justify-center text-on-color font-semibold text-13 capitalize">
             {user?.avatar_url ? (
               <img
                 src={getFileURL(user?.avatar_url)}
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 5530a42dc..611fd6e53 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -167,10 +167,10 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
                                 <div
                                   className={`rounded-sm px-1 py-0.5 text-11 font-medium ${
                                     completedIssuePercentage <= 35
-                                      ? "bg-danger-primary text-danger-primary"
+                                      ? "bg-danger-subtle text-danger-primary"
                                       : completedIssuePercentage <= 70
                                         ? "bg-yellow-500/10 text-yellow-500"
-                                        : "bg-success-primary text-success-primary"
+                                        : "bg-success-subtle text-success-primary"
                                   }`}
                                 >
                                   {completedIssuePercentage}%
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
index da06e7623..d8f2b5648 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -50,7 +50,7 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
         <div className="sm:flex sm:items-start">
-          <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-primary sm:mx-0 sm:h-10 sm:w-10">
+          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
             <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </div>
           <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index 7d8541ea0..8b4f33f39 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -91,7 +91,7 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
         <div className="flex w-full items-center justify-start gap-6">
-          <span className="place-items-center rounded-full bg-danger-primary p-4">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
             <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </span>
           <span className="flex items-center justify-start">
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
index 19a6d22ee..20a81e9f6 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -110,7 +110,7 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
         <div className="flex w-full items-center justify-start gap-6">
-          <span className="place-items-center rounded-full bg-danger-primary p-4">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
             <AlertTriangleIcon className="h-6 w-6 text-danger-primary" aria-hidden="true" />
           </span>
           <span className="flex items-center justify-start">
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
index 8a0a3726f..1291643ae 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -96,10 +96,10 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
 
       {view?.anchor && publishLink ? (
         <div
-          className="px-3 py-1.5 bg-success-primary text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
+          className="px-3 py-1.5 bg-success-subtle text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
           onClick={() => setPublishModalOpen(true)}
         >
-          <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
+          <span className="flex-shrink-0 rounded-full size-1.5 bg-success-primary" />
           Live
         </div>
       ) : (
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index 25c8003cb..5309a8d85 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -55,7 +55,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
                       <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
diff --git a/packages/constants/src/cycle.ts b/packages/constants/src/cycle.ts
index 046fb8a85..7509ca9c6 100644
--- a/packages/constants/src/cycle.ts
+++ b/packages/constants/src/cycle.ts
@@ -29,7 +29,7 @@ export const CYCLE_STATUS: {
     i18n_title: "project_cycles.status.completed",
     color: "#16A34A",
     textColor: "text-success-primary",
-    bgColor: "bg-green-50",
+    bgColor: "bg-success-subtle",
   },
   {
     i18n_label: "project_cycles.status.draft",
diff --git a/packages/constants/src/dashboard.ts b/packages/constants/src/dashboard.ts
index f35fa6175..713b31787 100644
--- a/packages/constants/src/dashboard.ts
+++ b/packages/constants/src/dashboard.ts
@@ -44,8 +44,8 @@ export const DURATION_FILTER_OPTIONS: {
 // random background colors for project cards
 export const PROJECT_BACKGROUND_COLORS = [
   "bg-gray-500/20",
-  "bg-success-primary",
-  "bg-danger-primary",
+  "bg-success-subtle",
+  "bg-danger-subtle",
   "bg-orange-500/20",
   "bg-blue-500/20",
   "bg-yellow-500/20",
diff --git a/packages/constants/src/module.ts b/packages/constants/src/module.ts
index 48c2aa761..6c2ef6ed1 100644
--- a/packages/constants/src/module.ts
+++ b/packages/constants/src/module.ts
@@ -52,14 +52,14 @@ export const MODULE_STATUS: {
     value: "completed",
     color: MODULE_STATUS_COLORS.completed,
     textColor: "text-success-primary",
-    bgColor: "bg-green-100",
+    bgColor: "bg-success-subtle",
   },
   {
     i18n_label: "project_modules.status.cancelled",
     value: "cancelled",
     color: MODULE_STATUS_COLORS.cancelled,
     textColor: "text-danger-primary",
-    bgColor: "bg-red-50",
+    bgColor: "bg-danger-subtle",
   },
 ];
 
diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
index 473bcfc9d..103a78264 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@@ -90,7 +90,7 @@ export function BubbleMenuLinkSelector(props: Props) {
           {editor.getAttributes("link").href ? (
             <button
               type="button"
-              className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-primary transition-all"
+              className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-subtle-hover transition-all"
               onClick={(e) => {
                 unsetLinkEditor(editor);
                 e.stopPropagation();
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 0f1650ccb..5060a474f 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -41,7 +41,7 @@ export function CodeBlockComponent({ node }: Props) {
           className={cn(
             "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
             {
-              "bg-success-primary hover:bg-success-primary active:bg-success-primary": copied,
+              "bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
             }
           )}
           onClick={copyToClipboard}
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index 969945957..ccd67ad09 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -168,7 +168,8 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
     [uploadFile, editor, getPos]
   );
 
-  const isErrorState = failedToLoadImage || hasDuplicationFailed;
+  // const isErrorState = failedToLoadImage || hasDuplicationFailed;
+  const isErrorState = true;
 
   const borderColor =
     selected && editor.isEditable && !isErrorState
@@ -212,10 +213,10 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
           "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
           "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
             selected && editor.isEditable && !isErrorState,
-          "text-danger-primary cursor-default": isErrorState,
-          "hover:text-danger-primary hover:bg-danger-primary": isErrorState && editor.isEditable,
-          "bg-danger-primary": isErrorState && selected,
-          "hover:bg-danger-primary": isErrorState && selected && editor.isEditable,
+          "text-danger-primary bg-danger-subtle cursor-default": isErrorState,
+          "hover:text-danger-primary hover:bg-danger-subtle-hover": isErrorState && editor.isEditable,
+          "bg-danger-subtle-selected": isErrorState && selected,
+          "hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
         }
       )}
       style={borderColor ? { borderColor } : undefined}
@@ -236,9 +237,9 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
           type="button"
           onClick={handleRetryClick}
           className={cn(
-            "flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-primary hover:text-danger-primary",
+            "flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
             {
-              "hover:bg-danger-primary": selected,
+              "hover:bg-danger-subtle-hover": selected,
             }
           )}
           title="Retry duplication"
diff --git a/packages/propel/src/banner/helper.tsx b/packages/propel/src/banner/helper.tsx
index 19041c13c..8594bad1d 100644
--- a/packages/propel/src/banner/helper.tsx
+++ b/packages/propel/src/banner/helper.tsx
@@ -14,8 +14,8 @@ export const bannerSizeStyling = {
 // TODO: update this with new color once its implemented
 // Banner variant styling
 export const bannerStyling: IBannerStyling = {
-  success: "bg-success-primary",
-  error: "bg-danger-primary",
+  success: "bg-success-subtle",
+  error: "bg-danger-subtle",
   warning: "bg-yellow-500/10",
   info: "bg-blue-500/10",
 };
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
index 9b3ac7e4d..5f1c4d6bd 100644
--- a/packages/propel/src/toolbar/toolbar.tsx
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -129,7 +129,7 @@ const buttonVariants = {
   outline:
     "border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
   ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
-  destructive: "bg-red-500 text-on-color hover:bg-red-600 focus:bg-red-600",
+  destructive: "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-selected",
 };
 
 const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
diff --git a/packages/types/src/issues.ts b/packages/types/src/issues.ts
index 7d7aba3d5..baea50dd1 100644
--- a/packages/types/src/issues.ts
+++ b/packages/types/src/issues.ts
@@ -2,7 +2,7 @@ import type { ICycle } from "./cycle";
 import type { TIssue } from "./issues/issue";
 import type { IModule } from "./module";
 import type { IProjectLite } from "./project";
-import type { IStateLite } from "./state";
+import type { TStateGroups } from "./state";
 import type { IUserLite } from "./users";
 import type {
   IIssueDisplayProperties,
@@ -11,7 +11,7 @@ import type {
   TIssueGroupingFilters,
   TIssueOrderByOptions,
 } from "./view-props";
-import type { IWorkspaceLite, Properties } from "./workspace";
+import type { IWorkspaceLite } from "./workspace";
 
 export interface IIssueCycle {
   id: string;
@@ -39,23 +39,6 @@ export interface IIssueModule {
   workspace: string;
 }
 
-export interface IIssueParent {
-  description: any;
-  id: string;
-  name: string;
-  priority: string | null;
-  project_detail: IProjectLite;
-  sequence_id: number;
-  start_date: string | null;
-  state_detail: IStateLite;
-  target_date: string | null;
-}
-
-export interface IIssueLink {
-  title: string;
-  url: string;
-}
-
 export interface ILinkDetails {
   created_at: Date;
   created_by: string;
@@ -65,37 +48,11 @@ export interface ILinkDetails {
   url: string;
 }
 
-export interface ISubIssuesState {
-  backlog: number;
-  unstarted: number;
-  started: number;
-  completed: number;
-  cancelled: number;
-}
-
 export interface ISubIssueResponse {
-  state_distribution: ISubIssuesState;
+  state_distribution: Record<TStateGroups, number>;
   sub_issues: TIssue[];
 }
 
-export interface BlockeIssueDetail {
-  id: string;
-  name: string;
-  sequence_id: number;
-  project_detail: IProjectLite;
-}
-
-export type IssuePriorities = {
-  id: string;
-  created_at: Date;
-  updated_at: Date;
-  uuid: string;
-  properties: Properties;
-  created_by: number;
-  updated_by: number;
-  user: string;
-};
-
 export interface IIssueLabel {
   id: string;
   name: string;
@@ -145,31 +102,6 @@ export interface IIssueActivity {
   workspace_detail?: IWorkspaceLite;
 }
 
-export interface IIssueLite {
-  id: string;
-  name: string;
-  project_id: string;
-  start_date?: string | null;
-  target_date?: string | null;
-  workspace__slug: string;
-}
-
-export interface IIssueAttachment {
-  asset: string;
-  attributes: {
-    name: string;
-    size: number;
-  };
-  created_at: string;
-  created_by: string;
-  id: string;
-  issue: string;
-  project: string;
-  updated_at: string;
-  updated_by: string;
-  workspace: string;
-}
-
 export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
 
 export interface ViewFlags {
@@ -208,15 +140,6 @@ export interface IIssueMap {
   [key: string]: TIssue;
 }
 
-export interface IIssueListRow {
-  id: string;
-  groupId: string;
-  type: "HEADER" | "NO_ISSUES" | "QUICK_ADD" | "ISSUE";
-  name?: string;
-  icon?: React.ReactElement | undefined;
-  payload?: Partial<TIssue>;
-}
-
 export interface ILayoutDisplayFiltersOptions {
   display_properties: (keyof IIssueDisplayProperties)[];
   display_filters: {
diff --git a/packages/types/src/issues/issue.ts b/packages/types/src/issues/issue.ts
index 9a6aa5d5a..f44c73f78 100644
--- a/packages/types/src/issues/issue.ts
+++ b/packages/types/src/issues/issue.ts
@@ -73,7 +73,7 @@ export type TBaseIssue = {
   is_intake?: boolean;
 };
 
-export type IssueRelation = {
+type IssueRelation = {
   id: string;
   name: string;
   project_id: string;
@@ -182,7 +182,7 @@ export interface IPublicIssue extends Pick<
   vote_items: IPublicVote[];
 }
 
-export type TPublicIssueResponseResults =
+type TPublicIssueResponseResults =
   | IPublicIssue[]
   | {
       [key: string]: {
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/ui/src/form-fields/password/helper.tsx
index 3af639e61..8dad95cdf 100644
--- a/packages/ui/src/form-fields/password/helper.tsx
+++ b/packages/ui/src/form-fields/password/helper.tsx
@@ -54,11 +54,11 @@ export const getFragmentColor = (fragmentIndex: number, activeFragments: number)
 
   switch (activeFragments) {
     case 1:
-      return "bg-red-500";
+      return "bg-danger-primary";
     case 2:
       return "bg-orange-500";
     case 3:
-      return "bg-green-500";
+      return "bg-success-primary";
     default:
       return "bg-layer-1";
   }
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index a38300e94..dd39746eb 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -47,7 +47,7 @@ const TextArea = React.forwardRef(function TextArea(
           "px-3 py-2": textAreaSize === "sm",
           "p-3": textAreaSize === "md",
           "border-danger-strong": hasError,
-          "bg-red-100": hasError && mode === "primary",
+          "bg-danger-subtle": hasError && mode === "primary",
         },
         className
       )}
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index 2b7b534d0..2d92c4643 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
 };
 
 const VARIANT_CLASSES: Record<TModalVariant, string> = {
-  danger: "bg-danger-primary text-danger-primary",
+  danger: "bg-danger-subtle text-danger-primary",
   primary: "bg-accent-primary/20 text-accent-primary",
 };