From 4f5d0ae0ee4ef4ab84ff4b15a36646b05850806e Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Mon, 15 Dec 2025 13:32:11 +0530
Subject: [PATCH 1/2] refactor: update styling and class names according to new
 design system in charts

---
 .../(projects)/analytics/[tabId]/page.tsx     |  9 ++++-
 .../analytics/overview/project-insights.tsx   | 12 +++---
 packages/propel/src/charts/bar-chart/bar.tsx  | 12 ++++--
 packages/propel/src/charts/bar-chart/root.tsx | 10 ++---
 packages/propel/src/charts/pie-chart/root.tsx |  4 +-
 packages/propel/src/charts/tree-map/root.tsx  |  4 +-
 packages/propel/src/tabs/tabs.tsx             | 36 +++++++++++++-----
 packages/ui/src/badge/helper.tsx              | 38 +++++++++----------
 8 files changed, 75 insertions(+), 50 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index c6b225de8fd..c4d97924bcd 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -67,7 +67,7 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
       {workspaceProjectIds && (
         <>
           {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
-            <div className="flex h-full overflow-hidden bg-surface-1 ">
+            <div className="flex h-full overflow-hidden ">
               <Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
                 <div className={"flex flex-col w-full h-full"}>
                   <div
@@ -75,7 +75,7 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                       "px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between"
                     )}
                   >
-                    <Tabs.List className={"my-2 overflow-x-auto flex w-fit"}>
+                    <Tabs.List background="layer-2" className={"my-2 overflow-x-auto flex w-fit"}>
                       {ANALYTICS_TABS.map((tab) => (
                         <Tabs.Trigger
                           key={tab.key}
@@ -83,6 +83,11 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                           disabled={tab.isDisabled}
                           size="md"
                           className="px-3"
+                          onClick={() => {
+                            if (!tab.isDisabled) {
+                              handleTabChange(tab.key);
+                            }
+                          }}
                         >
                           {tab.label}
                         </Tabs.Trigger>
diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index 67da6f355f4..f777dab3f01 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -65,15 +65,15 @@ const ProjectInsights = observer(function ProjectInsights() {
           {projectInsightsData && (
             <Suspense fallback={<ProjectInsightsLoader />}>
               <RadarChart
-                className="h-[350px] w-full lg:w-3/5"
+                className="h-[350px] w-full lg:w-3/5 text-accent-primary"
                 data={projectInsightsData}
                 dataKey="key"
                 radars={[
                   {
                     key: "count",
                     name: "Count",
-                    fill: "rgba(var(--color-primary-300))",
-                    stroke: "rgba(var(--color-primary-300))",
+                    fill: "var(--color-brand-default)",
+                    stroke: "var(--color-brand-default)",
                     fillOpacity: 0.6,
                     dot: {
                       r: 4,
@@ -90,15 +90,15 @@ const ProjectInsights = observer(function ProjectInsights() {
             </Suspense>
           )}
           <div className="w-full lg:w-2/5">
-            <div className="text-13 text-tertiary">{t("workspace_analytics.summary_of_projects")}</div>
+            <div className="text-sm text-tertiary">{t("workspace_analytics.summary_of_projects")}</div>
             <div className=" mb-3 border-b border-subtle py-2">{t("workspace_analytics.all_projects")}</div>
             <div className="flex flex-col gap-4">
-              <div className="flex items-center justify-between text-13 text-tertiary">
+              <div className="flex items-center justify-between text-sm text-tertiary">
                 <div>{t("workspace_analytics.trend_on_charts")}</div>
                 <div>{t("common.work_items")}</div>
               </div>
               {projectInsightsData?.map((item) => (
-                <div key={item.key} className="flex items-center justify-between text-13 text-primary">
+                <div key={item.key} className="flex items-center justify-between text-sm text-primary">
                   <div>{item.name}</div>
                   <div className="flex items-center gap-1">
                     {/* <TrendPiece key={item.key} size='xs' /> */}
diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
index 424f5995751..d77e0bbe337 100644
--- a/packages/propel/src/charts/bar-chart/bar.tsx
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -10,6 +10,7 @@ const BAR_TOP_BORDER_RADIUS = 4; // Border radius for the top of bars
 const BAR_BOTTOM_BORDER_RADIUS = 4; // Border radius for the bottom of bars
 const DEFAULT_LOLLIPOP_LINE_WIDTH = 2; // Width of lollipop stick
 const DEFAULT_LOLLIPOP_CIRCLE_RADIUS = 8; // Radius of lollipop circle
+const DEFAULT_BAR_FILL_COLOR = "#000000"; // Default color when fill is a function - black
 
 // Types
 interface TShapeProps {
@@ -66,7 +67,7 @@ function PercentageText({
   className?: string;
 }) {
   return (
-    <text x={x} y={y} textAnchor="middle" className={cn("text-11 font-medium", className)} fill="currentColor">
+    <text x={x} y={y} textAnchor="middle" className={cn("text-xs font-medium", className)} fill="currentColor">
       {percentage}%
     </text>
   );
@@ -109,9 +110,12 @@ const CustomBar = React.memo(function CustomBar(props: TBarProps) {
     <g>
       <path
         d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
-        className="transition-opacity duration-200"
         fill={fill}
         opacity={opacity}
+        style={{
+          transition: "opacity 200ms",
+          fill: fill,
+        }}
       />
       {showText && (
         <PercentageText x={x + width / 2} y={textY} percentage={currentBarPercentage} className={textClassName} />
@@ -172,11 +176,13 @@ const createShapeVariant =
     );
   };
 
+export { DEFAULT_BAR_FILL_COLOR };
+
 export const barShapeVariants: Record<
   TBarChartShapeVariant,
   (props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
 > = {
-  bar: createShapeVariant(CustomBar), // Standard bar with rounded-sm corners
+  bar: createShapeVariant(CustomBar), // Standard bar with rounded corners
   lollipop: createShapeVariant(CustomBarLollipop), // Line with circle at top
   "lollipop-dotted": createShapeVariant(CustomBarLollipop, { dotted: true }), // Dotted line lollipop variant
 };
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 64885e58956..0e373203e7f 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -17,9 +17,7 @@ import type { TBarChartProps } from "@plane/types";
 import { getLegendProps } from "../components/legend";
 import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
-import { barShapeVariants } from "./bar";
-
-const DEFAULT_BAR_FILL_COLOR = "#000000";
+import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
 
 export const BarChart = React.memo(function BarChart<K extends string, T extends string>(props: TBarChartProps<K, T>) {
   const {
@@ -129,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
           barSize={barSize}
           className="recharts-wrapper"
         >
-          <CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
+          <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
             tick={(props) => {
@@ -176,8 +174,8 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
           {showTooltip && (
             <Tooltip
               cursor={{
-                fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                fill: "var(--color-alpha-black-300)",
+                className: "bg-layer-1 cursor-pointer",
               }}
               wrapperStyle={{
                 pointerEvents: "auto",
diff --git a/packages/propel/src/charts/pie-chart/root.tsx b/packages/propel/src/charts/pie-chart/root.tsx
index d21c885f157..fd1630985d6 100644
--- a/packages/propel/src/charts/pie-chart/root.tsx
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@@ -77,7 +77,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
               showLabel
                 ? ({ payload, ...props }) => (
                     <text
-                      className="text-13 font-medium transition-opacity duration-200"
+                      className="text-sm font-medium transition-opacity duration-200"
                       cx={props.cx}
                       cy={props.cy}
                       x={props.x}
@@ -123,7 +123,7 @@ export const PieChart = React.memo(function PieChart<K extends string, T extends
             <Tooltip
               cursor={{
                 fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                className: "bg-layer-1-hover cursor-pointer",
               }}
               wrapperStyle={{
                 pointerEvents: "none",
diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/propel/src/charts/tree-map/root.tsx
index 379f98df2d8..8267f891bbe 100644
--- a/packages/propel/src/charts/tree-map/root.tsx
+++ b/packages/propel/src/charts/tree-map/root.tsx
@@ -17,7 +17,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
           nameKey="name"
           dataKey="value"
           stroke="currentColor"
-          className="text-custom-background-100 bg-surface-1"
+          className="bg-layer-1 cursor-pointer"
           content={<CustomTreeMapContent />}
           animationEasing="ease-out"
           isUpdateAnimationActive={isAnimationActive}
@@ -29,7 +29,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
               content={({ active, payload }) => <TreeMapTooltip active={active} payload={payload} />}
               cursor={{
                 fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                className: "bg-layer-1 cursor-pointer",
               }}
               wrapperStyle={{
                 pointerEvents: "auto",
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
index 6790bbe4caf..e3408ed2631 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -2,11 +2,15 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
 import { cn } from "../utils/classname";
 
+type BackgroundVariant = "layer-1" | "layer-2" | "layer-3" | "layer-transparent";
+
 type TabsCompound = React.ForwardRefExoticComponent<
   React.ComponentProps<typeof TabsPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
 > & {
   List: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.List> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
+    React.ComponentProps<typeof TabsPrimitive.List> & {
+      background?: BackgroundVariant;
+    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
   >;
   Trigger: React.ForwardRefExoticComponent<
     React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" } & React.RefAttributes<
@@ -34,14 +38,26 @@ const TabsRoot = React.forwardRef(function TabsRoot(
 });
 
 const TabsList = React.forwardRef(function TabsList(
-  { className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>,
+  {
+    className,
+    background = "layer-1",
+    ...props
+  }: React.ComponentProps<typeof TabsPrimitive.List> & {
+    background?: BackgroundVariant;
+  },
   ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
 ) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1/60 relative overflow-auto",
+        "flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 relative overflow-auto",
+        {
+          "bg-layer-1": background === "layer-1",
+          "bg-layer-2": background === "layer-2",
+          "bg-layer-3": background === "layer-3",
+          "bg-layer-transparent": background === "layer-transparent",
+        },
         className
       )}
       {...props}
@@ -59,13 +75,13 @@ const TabsTrigger = React.forwardRef(function TabsTrigger(
       data-slot="tabs-trigger"
       className={cn(
         "flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded-sm",
-        "data-[selected]:bg-layer-transparent-active data-[selected]:text-primary data-[selected]:shadow-sm",
-        "text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
-        "disabled:text-placeholder disabled:cursor-not-allowed",
+        "hover:text-tertiary hover:bg-layer-transparent-hover",
+        "data-[selected]:!bg-layer-transparent-active data-[selected]:text-primary data-[selected]:shadow-sm data-[selected]:hover:bg-layer-transparent-active",
+        "text-placeholder disabled:text-placeholder disabled:cursor-not-allowed",
         {
-          "text-11": size === "sm",
-          "text-13": size === "md",
-          "text-14": size === "lg",
+          "text-xs": size === "sm",
+          "text-sm": size === "md",
+          "text-base": size === "lg",
         },
         className
       )}
@@ -95,7 +111,7 @@ const TabsIndicator = React.forwardRef(function TabsIndicator(
   return (
     <div
       className={cn(
-        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 shadow-sm transition-[width,transform] duration-200 ease-in-out",
+        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-sm bg-layer-transparent-active shadow-sm transition-[width,transform] duration-200 ease-in-out",
         className
       )}
       {...props}
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 73d1fee7fff..6758390adf3 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -45,33 +45,33 @@ enum badgeIconStyling {
 export const badgeStyling: IBadgeStyling = {
   primary: {
     default: `text-on-color bg-accent-primary`,
-    hover: `hover:bg-accent-primary/80`,
-    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+    hover: `hover:bg-accent-primary-hover`,
+    disabled: `cursor-not-allowed !bg-layer-disabled hover:!bg-layer-disabled`,
   },
   "accent-primary": {
     default: `bg-accent-subtle text-accent-primary`,
-    hover: `hover:bg-custom-primary-20 hover:text-accent-secondary`,
+    hover: `hover:bg-accent-subtle-hover hover:text-accent-secondary`,
     disabled: `cursor-not-allowed !text-accent-primary/60`,
   },
   "outline-primary": {
     default: `text-accent-primary bg-surface-1 border border-accent-strong`,
-    hover: `hover:border-accent-strong-80 hover:bg-accent-subtle`,
-    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong-60 `,
+    hover: `hover:border-accent-strong hover:bg-accent-subtle`,
+    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong/60`,
   },
 
   neutral: {
-    default: `text-custom-background-100 bg-layer-1 border border-subtle`,
-    hover: `hover:bg-layer-1`,
-    disabled: `cursor-not-allowed bg-subtle-1 !text-placeholder`,
+    default: `text-on-color bg-layer-1 border border-subtle`,
+    hover: `hover:bg-layer-1-hover`,
+    disabled: `cursor-not-allowed !bg-layer-disabled !text-placeholder`,
   },
   "accent-neutral": {
     default: `text-secondary bg-layer-1`,
-    hover: `hover:bg-subtle-1 hover:text-primary`,
+    hover: `hover:bg-layer-1-hover hover:text-primary`,
     disabled: `cursor-not-allowed !text-placeholder`,
   },
   "outline-neutral": {
     default: `text-secondary bg-surface-1 border border-subtle`,
-    hover: `hover:text-primary hover:bg-subtle-1`,
+    hover: `hover:text-primary hover:bg-layer-1-hover`,
     disabled: `cursor-not-allowed !text-placeholder`,
   },
 
@@ -81,13 +81,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-green-300`,
   },
   "accent-success": {
-    default: `text-green-500 bg-green-50`,
-    hover: `hover:bg-green-100 hover:text-green-600`,
+    default: `text-green-500 bg-success-subtle`,
+    hover: `hover:bg-success-subtle-1 hover:text-green-600`,
     disabled: `cursor-not-allowed !text-green-300`,
   },
   "outline-success": {
     default: `text-green-500 bg-surface-1 border border-green-500`,
-    hover: `hover:text-green-600 hover:bg-green-50`,
+    hover: `hover:text-green-600 hover:bg-success-subtle`,
     disabled: `cursor-not-allowed !text-green-300 border-green-300`,
   },
 
@@ -97,13 +97,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-amber-300`,
   },
   "accent-warning": {
-    default: `text-amber-500 bg-amber-50`,
-    hover: `hover:bg-amber-100 hover:text-amber-600`,
+    default: `text-amber-500 bg-warning-subtle`,
+    hover: `hover:bg-amber-200 hover:text-amber-600`,
     disabled: `cursor-not-allowed !text-amber-300`,
   },
   "outline-warning": {
     default: `text-amber-500 bg-surface-1 border border-amber-500`,
-    hover: `hover:text-amber-600 hover:bg-amber-50`,
+    hover: `hover:text-amber-600 hover:bg-warning-subtle`,
     disabled: `cursor-not-allowed !text-amber-300 border-amber-300`,
   },
 
@@ -113,13 +113,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-red-300`,
   },
   "accent-destructive": {
-    default: `text-red-500 bg-red-50`,
-    hover: `hover:bg-red-100 hover:text-red-600`,
+    default: `text-red-500 bg-danger-subtle`,
+    hover: `hover:bg-danger-subtle-hover hover:text-red-600`,
     disabled: `cursor-not-allowed !text-red-300`,
   },
   "outline-destructive": {
     default: `text-red-500 bg-surface-1 border border-red-500`,
-    hover: `hover:text-red-600 hover:bg-red-50`,
+    hover: `hover:text-red-600 hover:bg-danger-subtle`,
     disabled: `cursor-not-allowed !text-red-300 border-red-300`,
   },
 };

From af8c92293a57852c01a192345756ae4a84410164 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Mon, 15 Dec 2025 20:26:51 +0530
Subject: [PATCH 2/2] refactor: clean up

---
 .../analytics/overview/project-insights.tsx   |  6 +--
 packages/propel/src/tabs/tabs.tsx             | 14 +++----
 packages/ui/src/badge/helper.tsx              | 38 +++++++++----------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index f777dab3f01..c0fa6c6b1ad 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -90,15 +90,15 @@ const ProjectInsights = observer(function ProjectInsights() {
             </Suspense>
           )}
           <div className="w-full lg:w-2/5">
-            <div className="text-sm text-tertiary">{t("workspace_analytics.summary_of_projects")}</div>
+            <div className="text-13 text-tertiary">{t("workspace_analytics.summary_of_projects")}</div>
             <div className=" mb-3 border-b border-subtle py-2">{t("workspace_analytics.all_projects")}</div>
             <div className="flex flex-col gap-4">
-              <div className="flex items-center justify-between text-sm text-tertiary">
+              <div className="flex items-center justify-between text-13 text-tertiary">
                 <div>{t("workspace_analytics.trend_on_charts")}</div>
                 <div>{t("common.work_items")}</div>
               </div>
               {projectInsightsData?.map((item) => (
-                <div key={item.key} className="flex items-center justify-between text-sm text-primary">
+                <div key={item.key} className="flex items-center justify-between text-13 text-primary">
                   <div>{item.name}</div>
                   <div className="flex items-center gap-1">
                     {/* <TrendPiece key={item.key} size='xs' /> */}
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
index e3408ed2631..b6136731cbc 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -75,13 +75,13 @@ const TabsTrigger = React.forwardRef(function TabsTrigger(
       data-slot="tabs-trigger"
       className={cn(
         "flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded-sm",
-        "hover:text-tertiary hover:bg-layer-transparent-hover",
-        "data-[selected]:!bg-layer-transparent-active data-[selected]:text-primary data-[selected]:shadow-sm data-[selected]:hover:bg-layer-transparent-active",
-        "text-placeholder disabled:text-placeholder disabled:cursor-not-allowed",
+        "data-[selected]:bg-layer-transparent-active data-[selected]:text-primary data-[selected]:shadow-sm",
+        "text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
+        "disabled:text-placeholder disabled:cursor-not-allowed",
         {
-          "text-xs": size === "sm",
-          "text-sm": size === "md",
-          "text-base": size === "lg",
+          "text-11": size === "sm",
+          "text-13": size === "md",
+          "text-14": size === "lg",
         },
         className
       )}
@@ -111,7 +111,7 @@ const TabsIndicator = React.forwardRef(function TabsIndicator(
   return (
     <div
       className={cn(
-        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-sm bg-layer-transparent-active shadow-sm transition-[width,transform] duration-200 ease-in-out",
+        "absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 shadow-sm transition-[width,transform] duration-200 ease-in-out",
         className
       )}
       {...props}
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 6758390adf3..73d1fee7fff 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -45,33 +45,33 @@ enum badgeIconStyling {
 export const badgeStyling: IBadgeStyling = {
   primary: {
     default: `text-on-color bg-accent-primary`,
-    hover: `hover:bg-accent-primary-hover`,
-    disabled: `cursor-not-allowed !bg-layer-disabled hover:!bg-layer-disabled`,
+    hover: `hover:bg-accent-primary/80`,
+    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
   },
   "accent-primary": {
     default: `bg-accent-subtle text-accent-primary`,
-    hover: `hover:bg-accent-subtle-hover hover:text-accent-secondary`,
+    hover: `hover:bg-custom-primary-20 hover:text-accent-secondary`,
     disabled: `cursor-not-allowed !text-accent-primary/60`,
   },
   "outline-primary": {
     default: `text-accent-primary bg-surface-1 border border-accent-strong`,
-    hover: `hover:border-accent-strong hover:bg-accent-subtle`,
-    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong/60`,
+    hover: `hover:border-accent-strong-80 hover:bg-accent-subtle`,
+    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong-60 `,
   },
 
   neutral: {
-    default: `text-on-color bg-layer-1 border border-subtle`,
-    hover: `hover:bg-layer-1-hover`,
-    disabled: `cursor-not-allowed !bg-layer-disabled !text-placeholder`,
+    default: `text-custom-background-100 bg-layer-1 border border-subtle`,
+    hover: `hover:bg-layer-1`,
+    disabled: `cursor-not-allowed bg-subtle-1 !text-placeholder`,
   },
   "accent-neutral": {
     default: `text-secondary bg-layer-1`,
-    hover: `hover:bg-layer-1-hover hover:text-primary`,
+    hover: `hover:bg-subtle-1 hover:text-primary`,
     disabled: `cursor-not-allowed !text-placeholder`,
   },
   "outline-neutral": {
     default: `text-secondary bg-surface-1 border border-subtle`,
-    hover: `hover:text-primary hover:bg-layer-1-hover`,
+    hover: `hover:text-primary hover:bg-subtle-1`,
     disabled: `cursor-not-allowed !text-placeholder`,
   },
 
@@ -81,13 +81,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-green-300`,
   },
   "accent-success": {
-    default: `text-green-500 bg-success-subtle`,
-    hover: `hover:bg-success-subtle-1 hover:text-green-600`,
+    default: `text-green-500 bg-green-50`,
+    hover: `hover:bg-green-100 hover:text-green-600`,
     disabled: `cursor-not-allowed !text-green-300`,
   },
   "outline-success": {
     default: `text-green-500 bg-surface-1 border border-green-500`,
-    hover: `hover:text-green-600 hover:bg-success-subtle`,
+    hover: `hover:text-green-600 hover:bg-green-50`,
     disabled: `cursor-not-allowed !text-green-300 border-green-300`,
   },
 
@@ -97,13 +97,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-amber-300`,
   },
   "accent-warning": {
-    default: `text-amber-500 bg-warning-subtle`,
-    hover: `hover:bg-amber-200 hover:text-amber-600`,
+    default: `text-amber-500 bg-amber-50`,
+    hover: `hover:bg-amber-100 hover:text-amber-600`,
     disabled: `cursor-not-allowed !text-amber-300`,
   },
   "outline-warning": {
     default: `text-amber-500 bg-surface-1 border border-amber-500`,
-    hover: `hover:text-amber-600 hover:bg-warning-subtle`,
+    hover: `hover:text-amber-600 hover:bg-amber-50`,
     disabled: `cursor-not-allowed !text-amber-300 border-amber-300`,
   },
 
@@ -113,13 +113,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !bg-red-300`,
   },
   "accent-destructive": {
-    default: `text-red-500 bg-danger-subtle`,
-    hover: `hover:bg-danger-subtle-hover hover:text-red-600`,
+    default: `text-red-500 bg-red-50`,
+    hover: `hover:bg-red-100 hover:text-red-600`,
     disabled: `cursor-not-allowed !text-red-300`,
   },
   "outline-destructive": {
     default: `text-red-500 bg-surface-1 border border-red-500`,
-    hover: `hover:text-red-600 hover:bg-danger-subtle`,
+    hover: `hover:text-red-600 hover:bg-red-50`,
     disabled: `cursor-not-allowed !text-red-300 border-red-300`,
   },
 };