[WEB-5614] chore: package and layout enhancements #8403

Author: anmolsinghbhatia

apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -80,7 +80,7 @@ export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
                 }}
               />
             )}
-            <div className="relative h-full w-full overflow-auto bg-layer-2">
+            <div className="relative h-full w-full overflow-auto bg-surface-1">
               {/* mutation loader */}
               {issues?.getIssueLoader() === "mutation" && (
                 <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-layer-1 shadow-sm rounded-sm">

apps/web/core/components/rich-filters/filters-row.tsx

@@ -119,7 +119,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   );
 
   const mainContent = (
-    <div className="w-full flex items-start gap-2">
+    <div className="w-full flex items-start gap-2 bg-layer-1 px-4 py-2 rounded-lg">
       <div className="w-full flex flex-wrap items-center gap-2">{leftContent}</div>
       <div
         className={cn("flex items-center gap-2 border-l border-subtle pl-4", {
@@ -136,7 +136,7 @@ export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty
   );
 
   const HeaderVariant = (
-    <Header variant={EHeaderVariant.TERNARY} className="min-h-11 bg-layer-1">
+    <Header variant={EHeaderVariant.TERNARY} className="!px-3 min-h-11 bg-surface-1">
       {mainContent}
     </Header>
   );

packages/propel/src/button/helper.tsx

@@ -7,7 +7,7 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-on-color-disabled",
         "error-fill":
           "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
         "error-outline":

packages/propel/src/icon-button/helper.tsx

@@ -8,7 +8,7 @@ export const iconButtonVariants = cva(
     variants: {
       variant: {
         primary:
-          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-on-color-disabled",
         "error-fill":
           "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
         "error-outline":

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-layer-1 !text-placeholder`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-on-color-disabled`,
   },
   "accent-primary": {
     default: `bg-accent-primary/20 text-accent-primary`,