[WEB-5652] fix: kanban quick add UI #8382

apps/web/core/components/editor/sticky-editor/color-palette.tsx

@@ -8,7 +8,7 @@ export const STICKY_COLORS_LIST: {
   {
     key: "gray",
     label: "Gray",
-    backgroundColor: "var(--background-color-layer-2)",
+    backgroundColor: "var(--editor-colors-gray-background)",
   },
   {
     key: "peach",

apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: Props) {
   return (
-    <div className="sticky top-0 flex items-center justify-between gap-2">
+    <div className="sticky top-0 flex items-center justify-between gap-2 bg-surface-1">
       <div className="flex-grow truncate text-caption-sm-medium text-placeholder">{title}</div>
       <button
         type="button"

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

@@ -7,8 +7,8 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
-    <div className="m-1 overflow-hidden rounded-sm shadow-raised-200">
+    <div className="m-1 overflow-hidden rounded-sm shadow-raised-200 bg-layer-2">
-      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-surface-1 p-3">
+      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 p-3">
         <div className="w-full">
           <h4 className="text-11 font-medium leading-5 text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
           <input
@@ -21,7 +21,7 @@ export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-11 italic text-secondary">
+      <div className="px-3 py-2 text-11 italic text-tertiary bg-layer-3">
         {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </div>
     </div>

packages/ui/src/button/helper.tsx

@@ -41,7 +41,7 @@ export const buttonStyling: IButtonStyling = {
     default: `text-on-color bg-accent-primary`,
     hover: `hover:bg-accent-primary/80`,
     pressed: `focus:text-custom-brand-40 focus:bg-accent-primary/80`,
-    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "accent-primary": {
     default: `bg-accent-primary/20 text-accent-primary`,
@@ -59,7 +59,7 @@ export const buttonStyling: IButtonStyling = {
     default: `text-secondary bg-surface-1 border border-subtle`,
     hover: `hover:bg-surface-2`,
     pressed: `focus:text-tertiary focus:bg-surface-2`,
-    disabled: `cursor-not-allowed !text-placeholder`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "link-primary": {
     default: `text-accent-primary bg-surface-1`,
@@ -67,42 +67,41 @@ export const buttonStyling: IButtonStyling = {
     pressed: `focus:text-accent-primary/80 `,
     disabled: `cursor-not-allowed !text-accent-primary/60`,
   },
-
   danger: {
-    default: `text-on-color bg-red-500`,
+    default: `bg-danger-primary text-on-color`,
-    hover: ` hover:bg-red-600`,
+    hover: ` hover:bg-danger-primary-hover`,
-    pressed: `focus:text-red-200 focus:bg-red-600`,
+    pressed: `focus:bg-danger-primary-active`,
-    disabled: `cursor-not-allowed !bg-red-300`,
+    disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
   },
   "accent-danger": {
     default: `text-red-500 bg-red-50`,
     hover: `hover:text-red-600 hover:bg-red-100`,
     pressed: `focus:text-red-500 focus:bg-red-100`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "outline-danger": {
-    default: `text-red-500 bg-transparent border border-red-500`,
+    default: `bg-layer-2 text-danger border border-danger-strong`,
-    hover: `hover:text-red-400 hover:border-red-400`,
+    hover: `hover:bg-danger-subtle`,
-    pressed: `focus:text-red-400 focus:border-red-400`,
+    pressed: `focus:bg-danger-subtle-hover`,
-    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
+    disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
   },
   "link-danger": {
     default: `text-red-500 bg-surface-1`,
     hover: `hover:text-red-400`,
     pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "tertiary-danger": {
     default: `text-red-500 bg-surface-1 border border-red-200`,
     hover: `hover:bg-red-50 hover:border-red-300`,
     pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "link-neutral": {
     default: `text-tertiary`,
     hover: `hover:text-secondary`,
     pressed: `focus:text-primary`,
-    disabled: `cursor-not-allowed !text-placeholder`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
 };