[WEB-5614] fix: new design system consistency (#8351)

* chore: tooltip enhancements * chore: project card enhancements * chore: work item card enhancements * chore: update component styles and class names for consistency across the application --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
2025-12-17 13:32:29 +05:30 · 2025-12-17 13:32:29 +05:30 · 88f5a063d6
commit 88f5a063d6
parent df710e00dc
23 changed files with 98 additions and 61 deletions
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@ -105,7 +105,7 @@ ul[data-type="taskList"] li > div {
 }

 ul[data-type="taskList"] li > label input[type="checkbox"] {
-  @apply border! border-strong/20!;
+  @apply border! border-strong!;
  outline: none;
  border-radius: 2px;
  transform: scale(1.05);
--- a/packages/propel/src/dialog/root.tsx
+++ b/packages/propel/src/dialog/root.tsx
@ -36,7 +36,7 @@ export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog

 // Constants
 const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-backdrop");
-const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-modal";
+const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-modal border border-subtle";

 // Utility functions
 const getPositionClassNames = (position: DialogPosition) =>
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@ -29,10 +29,10 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
      type={type}
      name={name}
      className={cn(
-        "block rounded-md bg-transparent text-13 placeholder-custom-text-400 focus:outline-none",
+        "block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
        {
-          "rounded-md border-[0.5px] border-subtle": mode === "primary",
-          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
+          "rounded-md border-[0.5px]": mode === "primary",
+          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
            mode === "transparent",
          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
          "border-red-500": hasError,
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@ -40,7 +40,7 @@ const TabsRoot = React.forwardRef(function TabsRoot(
 const TabsList = React.forwardRef(function TabsList(
  {
    className,
-    background = "layer-1",
+    background = "layer-2",
    ...props
  }: React.ComponentProps<typeof TabsPrimitive.List> & {
    background?: BackgroundVariant;
--- a/packages/propel/src/tooltip/root.tsx
+++ b/packages/propel/src/tooltip/root.tsx
@ -61,8 +61,16 @@ export function Tooltip(props: ITooltipProps) {
            align={finalAlign}
            render={
              <BaseTooltip.Popup>
-                {tooltipHeading && <div className="text-caption-md-medium text-primary">{tooltipHeading}</div>}
-                {tooltipContent && <div className="mt-1 text-caption-sm-regular text-secondary">{tooltipContent}</div>}
+                {tooltipHeading && <p className="text-caption-md-medium text-primary">{tooltipHeading}</p>}
+                {tooltipContent && (
+                  <p
+                    className={cn("text-caption-sm-regular text-secondary", {
+                      "mt-1": tooltipHeading && tooltipHeading !== "",
+                    })}
+                  >
+                    {tooltipContent}
+                  </p>
+                )}
              </BaseTooltip.Popup>
            }
          />
--- a/packages/tailwind-config/variables.css
+++ b/packages/tailwind-config/variables.css
@ -351,7 +351,7 @@
  --background-color-danger-transparent-hover: var(--color-red-100);
  --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-400);
+  --background-color-backdrop: var(--color-alpha-black-500);

  /* Border colors */
  --border-color-subtle: var(--color-neutral-400);
@ -674,7 +674,7 @@
      --background-color-danger-transparent-hover: var(--color-red-100);
      --background-color-danger-transparent-active: var(--color-red-100);
      --background-color-danger-transparent-selected: var(--color-red-100);
-      --background-color-backdrop: var(--color-alpha-white-200);
+      --background-color-backdrop: var(--color-alpha-black-1000);

      /* Border colors */
      --border-color-subtle: var(--color-neutral-400);
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@ -30,9 +30,9 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
      type={type}
      name={name}
      className={cn(
-        "block rounded-md bg-transparent text-13 placeholder-custom-text-400 focus:outline-none",
+        "block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
        {
-          "rounded-md border-[0.5px] border-subtle": mode === "primary",
+          "rounded-md border-[0.5px]": mode === "primary",
          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
            mode === "transparent",
          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
--- a/packages/ui/src/progress/circular-progress-indicator.tsx
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@ -9,7 +9,7 @@ interface ICircularProgressIndicator {
 }

 export function CircularProgressIndicator(props: ICircularProgressIndicator) {
-  const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-accent-primary", children } = props;
+  const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-success", children } = props;

  const sqSize = size;
  const radius = (size - strokeWidth) / 2;
--- a/packages/ui/src/tabs/tab-list.tsx
+++ b/packages/ui/src/tabs/tab-list.tsx
@ -19,22 +19,26 @@ type TTabListProps = {
  tabClassName?: string;
  size?: "sm" | "md" | "lg";
  selectedTab?: string;
+  autoWrap?: boolean;
  onTabChange?: (key: string) => void;
 };

-export function TabList({
-  tabs,
-  tabListClassName,
-  tabClassName,
-  size = "md",
-  selectedTab,
-  onTabChange,
-}: TTabListProps) {
+export function TabList({ autoWrap = true, ...props }: TTabListProps) {
+  return autoWrap ? (
+    <Tab.Group>
+      <TabListInner {...props} />
+    </Tab.Group>
+  ) : (
+    <TabListInner {...props} />
+  );
+}
+
+function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selectedTab, onTabChange }: TTabListProps) {
  return (
    <Tab.List
      as="div"
      className={cn(
-        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1/60",
+        "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1",
        tabListClassName
      )}
    >
@ -65,7 +69,9 @@ export function TabList({
          }}
          disabled={tab.disabled}
        >
-          {tab.icon && <tab.icon className="size-4" />}
+          {tab.icon && (
+            <tab.icon className={cn({ "size-3": size === "sm", "size-4": size === "md", "size-5": size === "lg" })} />
+          )}
          {tab.label}
        </Tab>
      ))}