chore: update component styles and class names for consistency across the application (#8376)

apps/web/core/components/core/image-picker-popover.tsx

@@ -9,7 +9,7 @@ import { Tab, Popover } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { Button } from "@plane/propel/button";
+import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { Input, Loader } from "@plane/ui";
@@ -180,11 +180,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
 
   return (
     <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
-      <Popover.Button
-        className="rounded-sm border border-strong bg-surface-1 px-2 py-1 text-11 text-secondary hover:text-primary"
-        onClick={handleOnClick}
-        disabled={disabled}
-      >
+      <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
         {label}
       </Popover.Button>
 

apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx

@@ -26,7 +26,7 @@ export function LayoutSelection(props: Props) {
   };
 
   return (
-    <div className="flex items-center gap-1 rounded-sm bg-layer-3 p-1">
+    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
         <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
           <button

apps/web/core/components/onboarding/create-workspace.tsx

@@ -266,7 +266,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
                       </span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-strong !shadow-none !rounded-md"
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (

apps/web/core/components/sidebar/add-button.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@plane/propel/button";
 import { cn } from "@plane/utils";
 
 type Props = React.ComponentProps<"button"> & {
@@ -8,17 +9,15 @@ type Props = React.ComponentProps<"button"> & {
 export function SidebarAddButton(props: Props) {
   const { label, onClick, disabled, ...rest } = props;
   return (
-    <button
-      type="button"
-      className={cn(
-        "flex-grow text-tertiary text-13 font-medium border-[0.5px] border-strong text-left rounded-md shadow-raised-100 h-8 px-2 flex items-center gap-1.5 transition-colors",
-        !disabled && "hover:bg-layer-transparent-hover"
-      )}
+    <Button
+      variant={"secondary"}
+      size={"xl"}
+      className="w-full justify-start"
       onClick={onClick}
       disabled={disabled}
       {...rest}
     >
       {label}
-    </button>
+    </Button>
   );
 }

apps/web/core/components/workspace/create-workspace-form.tsx

@@ -125,7 +125,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
       }}
     >
       <div className="space-y-6 sm:space-y-7">
-        <div className="space-y-1 text-13">
+        <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
             <span className="ml-0.5 text-red-500">*</span>
@@ -165,12 +165,12 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
             <span className="text-11 text-red-500">{errors?.name?.message}</span>
           </div>
         </div>
-        <div className="space-y-1 text-13">
+        <div className="flex flex-col gap-2 text-13">
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
             <span className="ml-0.5 text-red-500">*</span>
           </label>
-          <div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3 bg-layer-1">
+          <div className="flex w-full items-center rounded-md border border-subtle px-3 bg-layer-2">
             <span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
@@ -208,7 +208,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
           )}
           {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
         </div>
-        <div className="space-y-1 text-13">
+        <div className="flex flex-col gap-2 text-13">
           <span>
             {t("workspace_creation.form.organization_size.label")}
             <span className="ml-0.5 text-red-500">*</span>
@@ -229,7 +229,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                       </span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-subtle !shadow-none bg-layer-1 text-12"
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (

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

@@ -242,7 +242,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
                       ORGANIZATION_SIZE.find((c) => c === value) ??
                       t("workspace_settings.settings.general.errors.company_size.select_a_range")
                     }
-                    buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
+                    buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
                     input
                     disabled={!isAdmin}
                   >

apps/web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -16,6 +16,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -80,7 +81,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
   const isProjectListOpen = getIsProjectListOpen(projectId);
   const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
   // refs
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  const actionSectionRef = useRef<HTMLButtonElement | null>(null);
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router
@@ -341,15 +342,17 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                   </div>
                 )}
               </ControlLink>
+              <div className="flex items-center gap-1">
                 <CustomMenu
                   customButton={
-                  <span
+                    <IconButton
                       ref={actionSectionRef}
-                    className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
+                      variant="ghost"
+                      size="sm"
+                      icon={MoreHorizontal}
                       onClick={() => setIsMenuActive(!isMenuActive)}
-                  >
-                    <MoreHorizontal className="size-4" />
-                  </span>
+                      className="text-placeholder"
+                    />
                   }
                   className={cn(
                     "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
@@ -433,26 +436,23 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                   )}
                 </CustomMenu>
                 {isAccordionMode && (
-                <Disclosure.Button
-                  as="button"
-                  type="button"
-                  className={cn("hidden group-hover/project-item:inline-block p-0.5 rounded-sm hover:bg-layer-1", {
-                    "inline-block": isMenuActive,
-                  })}
+                  <IconButton
+                    variant="ghost"
+                    size="sm"
+                    icon={ChevronRightIcon}
                     onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                    className={cn("hidden group-hover/project-item:inline-flex text-placeholder transition-transform", {
+                      "inline-flex": isMenuActive,
+                      "rotate-90": isProjectListOpen,
+                    })}
                     aria-label={t(
                       isProjectListOpen
                         ? "aria_labels.projects_sidebar.close_project_menu"
                         : "aria_labels.projects_sidebar.open_project_menu"
                     )}
-                >
-                  <ChevronRightIcon
-                    className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
-                      "rotate-90": isProjectListOpen,
-                    })}
                   />
-                </Disclosure.Button>
                 )}
+              </div>
             </>
           </div>
           {isAccordionMode && (

packages/propel/src/button/helper.tsx

@@ -7,15 +7,15 @@ export const buttonVariants = 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 disabled:bg-layer-disabled text-on-color disabled:text-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",
+          "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":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
         secondary:
-          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active  disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
         tertiary:
-          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         ghost:
           "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
         link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",

packages/propel/src/charts/radar-chart/root.tsx

@@ -37,7 +37,7 @@ function RadarChart<T extends string, K extends string>(props: TRadarChartProps<
     <div className={className}>
       <ResponsiveContainer width="100%" height="100%">
         <CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
-          <PolarGrid stroke="--alpha(var(--border-color-subtle) / 90%)" />
+          <PolarGrid stroke="var(--border-color-subtle)" />
           <PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
           {showTooltip && (
             <Tooltip

packages/propel/src/input/input.tsx

@@ -29,7 +29,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
+        "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
         {
           "rounded-md border-[0.5px]": mode === "primary",
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":

packages/tailwind-config/variables.css

@@ -311,17 +311,17 @@
   --background-color-surface-1: var(--color-neutral-white);
   --background-color-surface-2: var(--color-neutral-100);
   --background-color-layer-1: var(--color-neutral-200);
-  --background-color-layer-1-hover: var(--color-alpha-black-100);
-  --background-color-layer-1-active: var(--color-alpha-black-200);
-  --background-color-layer-1-selected: var(--color-alpha-black-300);
+  --background-color-layer-1-hover: var(--color-neutral-300);
+  --background-color-layer-1-active: var(--color-neutral-400);
+  --background-color-layer-1-selected: var(--color-neutral-400);
   --background-color-layer-2: var(--color-neutral-white);
-  --background-color-layer-2-hover: var(--color-alpha-black-100);
-  --background-color-layer-2-active: var(--color-alpha-black-200);
-  --background-color-layer-2-selected: var(--color-alpha-black-300);
+  --background-color-layer-2-hover: var(--color-neutral-100);
+  --background-color-layer-2-active: var(--color-neutral-200);
+  --background-color-layer-2-selected: var(--color-neutral-200);
   --background-color-layer-3: var(--color-neutral-300);
-  --background-color-layer-3-hover: var(--color-alpha-black-100);
-  --background-color-layer-3-active: var(--color-alpha-black-200);
-  --background-color-layer-3-selected: var(--color-alpha-black-300);
+  --background-color-layer-3-hover: var(--color-neutral-400);
+  --background-color-layer-3-active: var(--color-neutral-500);
+  --background-color-layer-3-selected: var(--color-neutral-500);
   --background-color-layer-transparent: var(--color-alpha-white-0);
   --background-color-layer-transparent-hover: var(--color-alpha-black-100);
   --background-color-layer-transparent-active: var(--color-alpha-black-200);
@@ -351,6 +351,7 @@
   --background-color-danger-transparent-active: var(--color-red-100);
   --background-color-danger-transparent-selected: var(--color-red-100);
   --background-color-backdrop: var(--color-alpha-black-500);
+  --background-color-inverse: var(--color-alpha-black-1000);
 
   /* Border colors */
   --border-color-subtle: var(--color-neutral-400);
@@ -634,17 +635,17 @@
       --background-color-surface-1: var(--color-neutral-100);
       --background-color-surface-2: var(--color-neutral-100);
       --background-color-layer-1: var(--color-neutral-200);
-      --background-color-layer-1-hover: var(--color-alpha-white-100);
-      --background-color-layer-1-active: var(--color-alpha-white-200);
-      --background-color-layer-1-selected: var(--color-alpha-white-300);
+      --background-color-layer-1-hover: var(--color-neutral-300);
+      --background-color-layer-1-active: var(--color-neutral-400);
+      --background-color-layer-1-selected: var(--color-neutral-400);
       --background-color-layer-2: var(--color-neutral-300);
-      --background-color-layer-2-hover: var(--color-alpha-white-100);
-      --background-color-layer-2-active: var(--color-alpha-white-200);
-      --background-color-layer-2-selected: var(--color-alpha-white-300);
+      --background-color-layer-2-hover: var(--color-neutral-400);
+      --background-color-layer-2-active: var(--color-neutral-500);
+      --background-color-layer-2-selected: var(--color-neutral-500);
       --background-color-layer-3: var(--color-neutral-400);
-      --background-color-layer-3-hover: var(--color-alpha-white-100);
-      --background-color-layer-3-active: var(--color-alpha-white-200);
-      --background-color-layer-3-selected: var(--color-alpha-white-300);
+      --background-color-layer-3-hover: var(---color-neutral-500);
+      --background-color-layer-3-active: var(--color-neutral-600);
+      --background-color-layer-3-selected: var(--color-neutral-600);
       --background-color-layer-transparent: var(--color-alpha-black-0);
       --background-color-layer-transparent-hover: var(--color-alpha-white-100);
       --background-color-layer-transparent-active: var(--color-alpha-white-200);
@@ -674,6 +675,8 @@
       --background-color-danger-transparent-active: var(--color-red-100);
       --background-color-danger-transparent-selected: var(--color-red-100);
       --background-color-backdrop: var(--color-alpha-black-1000);
+      --background-color-inverse: var(--color-alpha-white-1000);
+
 
       /* Border colors */
       --border-color-subtle: var(--color-neutral-400);

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -170,9 +170,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
     <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
       <div
         className={cn(
-          "group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium text-tertiary cursor-default",
+          "group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
           {
-            "hover:text-primary hover:bg-surface-2 cursor-pointer": type === "link" && !isLast,
+            "text-primary": isLast,
+            "text-tertiary": !isLast,
+            "hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
           },
           className
         )}

packages/ui/src/dropdowns/custom-select.tsx

@@ -94,7 +94,7 @@ function CustomSelect(props: ICustomSelectProps) {
                 ref={setReferenceElement}
                 type="button"
                 className={cn(
-                  "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-strong",
+                  "flex w-full items-center justify-between gap-1 rounded border border-strong",
                   {
                     "px-3 py-2 text-13": input,
                     "px-2 py-1 text-11": !input,