regression: red and green color backgrounds (#8456)

Author: aaryan610

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">

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="[email protected]"
-            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}

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>

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",
   },

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}

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

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"

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;
 

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"}

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>