diff --git a/packages/primevue/src/classic/accordion/index.ts b/packages/primevue/src/classic/accordion/index.ts
index c9f0e88..8726042 100644
--- a/packages/primevue/src/classic/accordion/index.ts
+++ b/packages/primevue/src/classic/accordion/index.ts
@@ -33,7 +33,7 @@ export default {
 
         // Color
         "bg-surface-0 dark:bg-surface-900",
-        "text-surface-600 dark:text-surface-0/80",
+        "text-surface-900 dark:text-surface-0/80",
 
         // Transition
         "transition duration-200 ease-in-out",
@@ -49,7 +49,7 @@ export default {
     headerIcon: ({ context }) => ({
       class: [
         "inline-block ml-2",
-        { "text-surface-900 dark:text-surface-0": context.active },
+        { "text-surface-700 dark:text-surface-0": context.active },
       ],
     }),
     headerTitle: {
@@ -65,7 +65,7 @@ export default {
 
         // Color
         "bg-surface-0 dark:bg-surface-900",
-        "text-surface-600 dark:text-surface-0/70",
+        "text-surface-900 dark:text-surface-0/70",
       ],
     },
     transition: {
diff --git a/packages/primevue/src/classic/accordionheader/index.ts b/packages/primevue/src/classic/accordionheader/index.ts
index baf0ddb..25ea4d8 100644
--- a/packages/primevue/src/classic/accordionheader/index.ts
+++ b/packages/primevue/src/classic/accordionheader/index.ts
@@ -11,5 +11,5 @@ export default {
       },
     ],
   }),
-  toggleIcon: "inline-block text-surface-900 dark:text-surface-0 w-4 h-4",
+  toggleIcon: "inline-block text-surface-700 dark:text-surface-0 w-4 h-4",
 };
diff --git a/packages/primevue/src/classic/avatar/index.ts b/packages/primevue/src/classic/avatar/index.ts
index cb0c660..f471751 100644
--- a/packages/primevue/src/classic/avatar/index.ts
+++ b/packages/primevue/src/classic/avatar/index.ts
@@ -27,7 +27,7 @@ export default {
       { "border-2": parent.instance.$style?.name == "avatargroup" },
 
       // Colors
-      "bg-surface-300 dark:bg-surface-700",
+      "bg-surface-500 dark:bg-surface-700",
       {
         "border-white dark:border-surface-800":
           parent.instance.$style?.name == "avatargroup",
diff --git a/packages/primevue/src/classic/card/index.ts b/packages/primevue/src/classic/card/index.ts
index 08bbad1..d6e7854 100644
--- a/packages/primevue/src/classic/card/index.ts
+++ b/packages/primevue/src/classic/card/index.ts
@@ -9,7 +9,7 @@ export default {
       "shadow-md",
 
       //Color
-      "bg-surface-0 dark:bg-surface-800",
+      "bg-surface-200 dark:bg-surface-800",
       "text-surface-700 dark:text-surface-0",
     ],
   },
diff --git a/packages/primevue/src/classic/carousel/index.ts b/packages/primevue/src/classic/carousel/index.ts
index 67efbce..1a40782 100644
--- a/packages/primevue/src/classic/carousel/index.ts
+++ b/packages/primevue/src/classic/carousel/index.ts
@@ -96,7 +96,7 @@ export default {
 
       // Color & Background
       {
-        "bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600":
+        "bg-surface-300 hover:bg-surface-400 dark:bg-surface-700 dark:hover:bg-surface-600":
           !context.highlighted,
         "bg-primary hover:bg-primary-emphasis": context.highlighted,
       },
diff --git a/packages/primevue/src/classic/cascadeselect/index.ts b/packages/primevue/src/classic/cascadeselect/index.ts
index 78e4919..d52e452 100644
--- a/packages/primevue/src/classic/cascadeselect/index.ts
+++ b/packages/primevue/src/classic/cascadeselect/index.ts
@@ -40,7 +40,7 @@ export default {
       "cursor-pointer",
       "select-none",
       {
-        "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+        "bg-surface-100 dark:bg-surface-700 select-none pointer-events-none cursor-default":
           props.disabled,
       },
     ],
@@ -58,8 +58,8 @@ export default {
       "bg-transparent",
       "border-0",
       {
-        "text-surface-800 dark:text-white/80": props.modelValue != undefined,
-        "text-surface-400 dark:text-surface-500": props.modelValue == undefined,
+        "text-surface-700 dark:text-white/80": props.modelValue != undefined,
+        "text-surface-500 dark:text-surface-500": props.modelValue == undefined,
       },
       {
         "placeholder:text-transparent dark:placeholder:text-transparent":
@@ -157,7 +157,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.active,
         "hover:bg-highlight-emphasis": context.active,
       },
diff --git a/packages/primevue/src/classic/chip/index.ts b/packages/primevue/src/classic/chip/index.ts
index ac73d0c..cbac748 100644
--- a/packages/primevue/src/classic/chip/index.ts
+++ b/packages/primevue/src/classic/chip/index.ts
@@ -12,7 +12,7 @@ export default {
 
       // Colors
       "text-surface-700 dark:text-white",
-      "bg-surface-100 dark:bg-surface-700",
+      "bg-surface-300 dark:bg-surface-700",
     ],
   },
   label: {
diff --git a/packages/primevue/src/classic/colorpicker/index.ts b/packages/primevue/src/classic/colorpicker/index.ts
index 16d924e..b443c5b 100644
--- a/packages/primevue/src/classic/colorpicker/index.ts
+++ b/packages/primevue/src/classic/colorpicker/index.ts
@@ -53,7 +53,7 @@ export default {
       "shadow-md border",
 
       // Colors
-      "bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700",
+      "bg-surface-100 dark:bg-surface-900 border-surface-300 dark:border-surface-700",
     ],
   }),
   colorSelector: {
diff --git a/packages/primevue/src/classic/contextmenu/index.ts b/packages/primevue/src/classic/contextmenu/index.ts
index c2cd687..683c341 100644
--- a/packages/primevue/src/classic/contextmenu/index.ts
+++ b/packages/primevue/src/classic/contextmenu/index.ts
@@ -51,7 +51,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.active,
         "hover:bg-highlight-emphasis": context.active,
       },
diff --git a/packages/primevue/src/classic/dataview/index.ts b/packages/primevue/src/classic/dataview/index.ts
index 96088f6..9169e31 100644
--- a/packages/primevue/src/classic/dataview/index.ts
+++ b/packages/primevue/src/classic/dataview/index.ts
@@ -20,8 +20,8 @@ export default {
       "py-3 px-4",
 
       // Color
-      "text-surface-800 dark:text-white/80",
-      "bg-surface-00 dark:bg-surface-900",
+      "text-surface-700 dark:text-white/80",
+      "bg-surface-200 dark:bg-surface-900",
       "border-b border-surface-200 dark:border-surface-700",
     ],
   },
diff --git a/packages/primevue/src/classic/datepicker/index.ts b/packages/primevue/src/classic/datepicker/index.ts
index 7792778..97eaf4e 100644
--- a/packages/primevue/src/classic/datepicker/index.ts
+++ b/packages/primevue/src/classic/datepicker/index.ts
@@ -20,7 +20,7 @@ export default {
         "leading-none",
 
         // Colors
-        "text-surface-600 dark:text-surface-200",
+        "text-surface-900 dark:text-surface-200",
         "placeholder:text-surface-400 dark:placeholder:text-surface-500",
         { "bg-surface-0 dark:bg-surface-950": !props.disabled },
         "border",
@@ -284,7 +284,7 @@ export default {
 
       // Colors
       {
-        "bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-white/70":
+        "bg-surface-200 dark:bg-surface-800 text-surface-600 dark:text-white/70":
           context.date.today && !context.selected && !context.disabled,
         "bg-transparent text-surface-600 dark:text-white/70":
           !context.selected && !context.disabled && !context.date.today,
@@ -294,7 +294,7 @@ export default {
       // States
       "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10",
       {
-        "hover:bg-surface-50 dark:hover:bg-surface-500/10":
+        "hover:bg-surface-100 dark:hover:bg-surface-500/10":
           !context.selected && !context.disabled,
       },
       {
@@ -331,7 +331,7 @@ export default {
       // States
       "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10",
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.selected && !context.disabled,
       },
 
@@ -367,7 +367,7 @@ export default {
       // States
       "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10",
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.selected && !context.disabled,
       },
 
@@ -383,7 +383,7 @@ export default {
 
       // Borders
       "border-t-1",
-      "border-solid border-surface-200",
+      "border-solid border-surface-200 dark:border-surface-700",
 
       // Spacing
       "pt-2 mt-2",
@@ -451,7 +451,8 @@ export default {
     ],
   },
   calendarContainer: "flex",
-  calendar: "flex-auto border-l first:border-l-0 border-surface-200",
+  calendar:
+    "flex-auto border-l first:border-l-0 border-surface-200 dark:border-surface-700",
   buttonbar: {
     class: [
       // Flexbox
diff --git a/packages/primevue/src/classic/dialog/index.ts b/packages/primevue/src/classic/dialog/index.ts
index ea63ed4..abf62bc 100644
--- a/packages/primevue/src/classic/dialog/index.ts
+++ b/packages/primevue/src/classic/dialog/index.ts
@@ -45,7 +45,7 @@ export default {
       "rounded-tr-lg",
 
       // Colors
-      "text-surface-700 dark:text-surface-0/80",
+      "text-surface-900 dark:text-surface-0/80",
       "border border-b-0",
       "border-surface-200 dark:border-surface-700",
     ],
@@ -71,7 +71,7 @@ export default {
       },
 
       // Colors
-      "text-surface-700 dark:text-surface-0/80",
+      "text-surface-900 dark:text-surface-0/80",
       "border border-t-0 border-b-0",
       "border-surface-200 dark:border-surface-700",
 
@@ -97,7 +97,7 @@ export default {
 
       // Colors
       "bg-surface-0 dark:bg-surface-900",
-      "text-surface-700 dark:text-surface-0/80",
+      "text-surface-900 dark:text-surface-0/80",
       "border border-t-0 border-b-0",
       "border-surface-200 dark:border-surface-700",
     ],
diff --git a/packages/primevue/src/classic/drawer/index.ts b/packages/primevue/src/classic/drawer/index.ts
index 7a439a3..ce64509 100644
--- a/packages/primevue/src/classic/drawer/index.ts
+++ b/packages/primevue/src/classic/drawer/index.ts
@@ -79,7 +79,7 @@ export default {
 
       // States
       "hover:text-surface-700 dark:hover:text-white/80",
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]",
       "focus:outline-none focus:outline-offset-0 focus:ring-1",
       "focus:ring-primary-500 dark:focus:ring-primary-400",
 
diff --git a/packages/primevue/src/classic/fieldset/index.ts b/packages/primevue/src/classic/fieldset/index.ts
index 971a33c..52502b9 100644
--- a/packages/primevue/src/classic/fieldset/index.ts
+++ b/packages/primevue/src/classic/fieldset/index.ts
@@ -33,7 +33,7 @@ export default {
       "transition-none",
 
       // States
-      { "hover:bg-surface-100 dark:hover:bg-surface-800": props.toggleable },
+      { "hover:bg-surface-200 dark:hover:bg-surface-800": props.toggleable },
     ],
   }),
   toggleButton: ({ props }) => ({
diff --git a/packages/primevue/src/classic/floatlabel/index.ts b/packages/primevue/src/classic/floatlabel/index.ts
index ef4242e..a951177 100644
--- a/packages/primevue/src/classic/floatlabel/index.ts
+++ b/packages/primevue/src/classic/floatlabel/index.ts
@@ -4,7 +4,7 @@ export default {
       "block relative",
 
       // Base Label Appearance
-      "[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60",
+      "[&>*:last-child]:text-surface-600 dark:[&>*:last-child]:text-white/60",
       "[&>*:last-child]:absolute",
       "[&>*:last-child]:left-3",
       "[&>*:last-child]:pointer-events-none",
diff --git a/packages/primevue/src/classic/galleria/index.ts b/packages/primevue/src/classic/galleria/index.ts
index 59f408d..b10763e 100644
--- a/packages/primevue/src/classic/galleria/index.ts
+++ b/packages/primevue/src/classic/galleria/index.ts
@@ -237,7 +237,7 @@ export default {
 
       // Conditional Appearance: Not Highlighted
       {
-        "bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600":
+        "bg-surface-300 hover:bg-surface-400 dark:bg-surface-700 dark:hover:bg-surface-600":
           !context.highlighted,
       },
 
diff --git a/packages/primevue/src/classic/iconfield/index.ts b/packages/primevue/src/classic/iconfield/index.ts
index 75cef16..35f6801 100644
--- a/packages/primevue/src/classic/iconfield/index.ts
+++ b/packages/primevue/src/classic/iconfield/index.ts
@@ -6,7 +6,7 @@ export default {
       "[&>[data-pc-name=inputicon]]:absolute",
       "[&>[data-pc-name=inputicon]]:top-1/2",
       "[&>[data-pc-name=inputicon]]:-mt-2",
-      "[&>[data-pc-name=inputicon]]:text-surface-900/60 dark:[&>[data-pc-name=inputicon]]:text-white/60",
+      "[&>[data-pc-name=inputicon]]:text-surface-600 dark:[&>[data-pc-name=inputicon]]:text-white/60",
 
       "[&>[data-pc-name=inputicon]:first-child]:left-3",
       "[&>[data-pc-name=inputicon]:last-child]:right-3",
@@ -18,7 +18,7 @@ export default {
       "[&>[data-pc-extend=inputicon]]:absolute",
       "[&>[data-pc-extend=inputicon]]:top-1/2",
       "[&>[data-pc-extend=inputicon]]:-mt-2",
-      "[&>[data-pc-extend=inputicon]]:text-surface-900/60 dark:[&>[data-pc-extend=inputicon]]:text-white/60",
+      "[&>[data-pc-extend=inputicon]]:text-surface-600 dark:[&>[data-pc-extend=inputicon]]:text-white/60",
 
       "[&>[data-pc-extend=inputicon]:first-child]:left-3",
       "[&>[data-pc-extend=inputicon]:last-child]:right-3",
diff --git a/packages/primevue/src/classic/inputgroupaddon/index.ts b/packages/primevue/src/classic/inputgroupaddon/index.ts
index d4a23b6..f939cab 100644
--- a/packages/primevue/src/classic/inputgroupaddon/index.ts
+++ b/packages/primevue/src/classic/inputgroupaddon/index.ts
@@ -20,8 +20,8 @@ export default {
       "min-w-[2.5rem]",
 
       // Color
-      "bg-transparent dark:bg-surface-900",
-      "text-surface-800 dark:text-white/80",
+      "bg-surface-50 dark:bg-surface-900",
+      "text-surface-700 dark:text-white/80",
       "border-surface-300 dark:border-surface-700",
     ],
   },
diff --git a/packages/primevue/src/classic/inputmask/index.ts b/packages/primevue/src/classic/inputmask/index.ts
index 0f30bcf..ffcb8a2 100644
--- a/packages/primevue/src/classic/inputmask/index.ts
+++ b/packages/primevue/src/classic/inputmask/index.ts
@@ -9,7 +9,7 @@ export default {
         "m-0 py-2 px-3",
 
         // Colors
-        "text-surface-800 dark:text-white/80",
+        "text-surface-700 dark:text-white/80",
         { "bg-surface-0 dark:bg-surface-950": !context.disabled },
 
         "border",
@@ -26,7 +26,7 @@ export default {
             !context.disabled && !props.invalid,
           "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10":
             !context.disabled,
-          "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+          "bg-surface-100 dark:bg-surface-700 select-none pointer-events-none cursor-default":
             context.disabled,
         },
 
diff --git a/packages/primevue/src/classic/inputnumber/index.ts b/packages/primevue/src/classic/inputnumber/index.ts
index 3b14e68..bd4282e 100644
--- a/packages/primevue/src/classic/inputnumber/index.ts
+++ b/packages/primevue/src/classic/inputnumber/index.ts
@@ -66,8 +66,8 @@ export default {
         },
 
         // Colors
-        "text-surface-800 dark:text-white/80",
-        "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+        "text-surface-900 dark:text-white/80",
+        "placeholder:text-surface-500 dark:placeholder:text-surface-500",
         { "bg-surface-0 dark:bg-surface-950": !context.disabled },
         "border",
         { "border-surface-300 dark:border-surface-700": !parent.props.invalid },
@@ -81,7 +81,7 @@ export default {
         { "hover:border-secondary-400": !parent.props.invalid },
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-secondary-500 dark:focus:ring-secondary-400 focus:z-10",
         {
-          "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+          "bg-surface-300 dark:bg-surface-700 select-none pointer-events-none cursor-default":
             context.disabled,
         },
 
@@ -140,10 +140,10 @@ export default {
       { "order-1": props.showButtons && props.buttonLayout === "vertical" },
 
       //Color
-      "text-surface-800 dark:text-surface-0",
+      "text-surface-700 dark:text-surface-0",
       "bg-transparent",
       {
-        "dark:bg-surface-900":
+        "bg-surface-50 dark:bg-surface-900":
           props.showButtons && props.buttonLayout !== "stacked",
       },
       "border border-surface-300 dark:border-surface-700",
@@ -180,7 +180,7 @@ export default {
       },
 
       //States
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]",
 
       //Misc
       "cursor-pointer overflow-hidden select-none",
@@ -209,10 +209,10 @@ export default {
       { "order-3": props.showButtons && props.buttonLayout === "vertical" },
 
       //Color
-      "text-surface-800 dark:text-surface-0",
+      "text-surface-700 dark:text-surface-0",
       "bg-transparent",
       {
-        "dark:bg-surface-900":
+        "bg-surface-50 dark:bg-surface-900":
           props.showButtons && props.buttonLayout !== "stacked",
       },
       "border border-surface-300 dark:border-surface-700",
@@ -252,7 +252,7 @@ export default {
       },
 
       //States
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]",
 
       //Misc
       "cursor-pointer overflow-hidden select-none",
diff --git a/packages/primevue/src/classic/inputtext/index.ts b/packages/primevue/src/classic/inputtext/index.ts
index 4e6f282..1d43c26 100644
--- a/packages/primevue/src/classic/inputtext/index.ts
+++ b/packages/primevue/src/classic/inputtext/index.ts
@@ -34,8 +34,8 @@ export default {
       },
 
       // Colors
-      "text-surface-800 dark:text-white/80",
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "text-surface-900 dark:text-white/80",
+      "placeholder:text-surface-500 dark:placeholder:text-surface-500",
       { "bg-surface-0 dark:bg-surface-950": !context.disabled },
       "border",
       { "border-surface-300 dark:border-surface-700": !props.invalid },
@@ -51,7 +51,7 @@ export default {
           !context.disabled && !props.invalid,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-secondary-500 dark:focus:ring-secondary-400 focus:z-10":
           !context.disabled,
-        "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+        "bg-surface-300 dark:bg-surface-700 select-none pointer-events-none cursor-default":
           context.disabled,
       },
 
diff --git a/packages/primevue/src/classic/knob/index.ts b/packages/primevue/src/classic/knob/index.ts
index 277be4a..3b5ade0 100644
--- a/packages/primevue/src/classic/knob/index.ts
+++ b/packages/primevue/src/classic/knob/index.ts
@@ -14,7 +14,7 @@ export default {
       "stroke-current",
 
       // Color
-      "stroke-surface-200 dark:stroke-surface-700",
+      "stroke-surface-300 dark:stroke-surface-700",
 
       // Fill
       "fill-none",
@@ -41,7 +41,7 @@ export default {
       "text-center text-xl",
 
       // Color
-      "fill-surface-600 dark:fill-surface-200",
+      "fill-surface-700 dark:fill-surface-200",
     ],
   },
 };
diff --git a/packages/primevue/src/classic/listbox/index.ts b/packages/primevue/src/classic/listbox/index.ts
index e7cd414..5c486dd 100644
--- a/packages/primevue/src/classic/listbox/index.ts
+++ b/packages/primevue/src/classic/listbox/index.ts
@@ -5,13 +5,13 @@ export default {
 
       // Colors
       { "bg-surface-0 dark:bg-surface-900": !props.disabled },
-      "text-surface-700 dark:text-white/80",
+      "text-surface-900 dark:text-white/80",
       "border",
       { "border-surface-300 dark:border-surface-700": !props.invalid },
 
       // Disabled State
       {
-        "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+        "bg-surface-300 dark:bg-surface-700 select-none pointer-events-none cursor-default":
           props.disabled,
       },
 
@@ -42,9 +42,9 @@ export default {
 
       // Colors
       {
-        "bg-surface-200 dark:bg-surface-600/60":
+        "bg-surface-300 dark:bg-surface-600/60":
           context.focused && !context.selected,
-        "text-surface-700 dark:text-white/80":
+        "text-surface-900 dark:text-white/80":
           context.focused && !context.selected,
         "bg-highlight": context.selected && !props.checkmark,
         "bg-surface-0 dark:bg-surface-900": props.checkmark && context.selected,
@@ -52,13 +52,13 @@ export default {
 
       //States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           (!context.focused && !context.selected) ||
           (props.checkmark && context.selected),
       },
       { "hover:bg-highlight-emphasis": context.selected && !props.checkmark },
       {
-        "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:text-surface-700 hover:bg-surface-200 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]":
           context.focused && !context.selected,
       },
 
@@ -84,7 +84,7 @@ export default {
     ],
   },
   optionCheckIcon:
-    "relative -ms-1.5 me-1.5 text-surface-700 dark:text-white/80 w-4 h-4",
+    "relative -ms-1.5 me-1.5 text-surface-900 dark:text-white/80 w-4 h-4",
   emptyMessage: {
     class: [
       // Font
@@ -110,7 +110,7 @@ export default {
       "rounded-tr-md",
 
       // Color
-      "text-surface-700 dark:text-white/80",
+      "text-surface-900 dark:text-white/80",
       "bg-surface-0 dark:bg-surface-900",
       "border-surface-300 dark:border-surface-700",
 
diff --git a/packages/primevue/src/classic/megamenu/index.ts b/packages/primevue/src/classic/megamenu/index.ts
index 4a15bbe..1ba8018 100644
--- a/packages/primevue/src/classic/megamenu/index.ts
+++ b/packages/primevue/src/classic/megamenu/index.ts
@@ -78,7 +78,7 @@ export default {
 
       // Hover States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.active,
         "hover:bg-highlight-emphasis": context.active,
       },
@@ -187,7 +187,7 @@ export default {
 
       // States
       "hover:text-surface-600 dark:hover:text-white/60",
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]",
       "focus:outline-none focus:outline-offset-0",
       "focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400",
 
diff --git a/packages/primevue/src/classic/menu/index.ts b/packages/primevue/src/classic/menu/index.ts
index 616c5e2..f16049c 100644
--- a/packages/primevue/src/classic/menu/index.ts
+++ b/packages/primevue/src/classic/menu/index.ts
@@ -10,7 +10,7 @@ export default {
 
       // Colors
       "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-white/80",
+      "text-surface-900 dark:text-white/80",
     ],
   },
   list: {
@@ -105,7 +105,7 @@ export default {
 
       // Colors
       "bg-surface-0 dark:bg-surface-800",
-      "text-surface-400 dark:text-surface-300",
+      "text-surface-600 dark:text-surface-300",
     ],
   }),
   transition: {
diff --git a/packages/primevue/src/classic/menubar/index.ts b/packages/primevue/src/classic/menubar/index.ts
index 8d3325e..9406e12 100644
--- a/packages/primevue/src/classic/menubar/index.ts
+++ b/packages/primevue/src/classic/menubar/index.ts
@@ -73,7 +73,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.active,
         "hover:bg-highlight-emphasis": context.active,
       },
@@ -168,7 +168,7 @@ export default {
 
       // States
       "hover:text-surface-600 dark:hover:text-white/60",
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]",
       "focus:outline-none focus:outline-offset-0",
       "focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400",
 
diff --git a/packages/primevue/src/classic/message/index.ts b/packages/primevue/src/classic/message/index.ts
index 468bb87..462b5f2 100644
--- a/packages/primevue/src/classic/message/index.ts
+++ b/packages/primevue/src/classic/message/index.ts
@@ -80,7 +80,7 @@ export default {
       "transition duration-200 ease-in-out",
 
       // States
-      "hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-100/30 dark:hover:bg-[rgba(255,255,255,0.03)]",
       "focus:outline-none focus:outline-offset-0 focus:ring-1",
       {
         "focus:ring-blue-500 dark:focus:ring-blue-400":
diff --git a/packages/primevue/src/classic/multiselect/index.ts b/packages/primevue/src/classic/multiselect/index.ts
index 83d7081..1000486 100644
--- a/packages/primevue/src/classic/multiselect/index.ts
+++ b/packages/primevue/src/classic/multiselect/index.ts
@@ -39,7 +39,7 @@ export default {
       "cursor-pointer",
       "select-none",
       {
-        "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+        "bg-surface-300 dark:bg-surface-700 select-none pointer-events-none cursor-default":
           props.disabled,
       },
     ],
@@ -59,8 +59,8 @@ export default {
 
       // Color
       {
-        "text-surface-800 dark:text-white/80": props.modelValue?.length,
-        "text-surface-400 dark:text-surface-500": !props.modelValue?.length,
+        "text-surface-900 dark:text-white/80": props.modelValue?.length,
+        "text-surface-500 dark:text-surface-500": !props.modelValue?.length,
       },
       {
         "placeholder:text-transparent dark:placeholder:text-transparent":
@@ -175,12 +175,12 @@ export default {
 
       //States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.focused && !context.selected,
       },
       { "hover:bg-highlight-emphasis": context.selected },
       {
-        "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:text-surface-700 hover:bg-surface-200 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]":
           context.focused && !context.selected,
       },
 
@@ -214,7 +214,7 @@ export default {
       "py-2 px-3",
 
       // Color
-      "text-surface-800 dark:text-white/80",
+      "text-surface-700 dark:text-white/80",
       "bg-transparent",
     ],
   },
diff --git a/packages/primevue/src/classic/organizationchart/index.ts b/packages/primevue/src/classic/organizationchart/index.ts
index 858e5ba..cb2304f 100644
--- a/packages/primevue/src/classic/organizationchart/index.ts
+++ b/packages/primevue/src/classic/organizationchart/index.ts
@@ -37,7 +37,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-100 dark:hover:bg-surface-800":
+        "hover:bg-surface-200 dark:hover:bg-surface-800":
           context?.selectable && !context?.selected,
         "hover:bg-highlight-emphasis": context?.selectable && context?.selected,
       },
diff --git a/packages/primevue/src/classic/paginator/index.ts b/packages/primevue/src/classic/paginator/index.ts
index e88d3c6..7692ec2 100644
--- a/packages/primevue/src/classic/paginator/index.ts
+++ b/packages/primevue/src/classic/paginator/index.ts
@@ -34,7 +34,7 @@ export default {
 
       // State
       {
-        "hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.disabled,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400":
           !context.disabled,
@@ -67,7 +67,7 @@ export default {
 
       // State
       {
-        "hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.disabled,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400":
           !context.disabled,
@@ -100,7 +100,7 @@ export default {
 
       // State
       {
-        "hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.disabled,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400":
           !context.disabled,
@@ -133,7 +133,7 @@ export default {
 
       // State
       {
-        "hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.disabled,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400":
           !context.disabled,
@@ -170,7 +170,7 @@ export default {
 
       // State
       {
-        "hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.disabled && !context.active,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400":
           !context.disabled,
diff --git a/packages/primevue/src/classic/panelmenu/index.ts b/packages/primevue/src/classic/panelmenu/index.ts
index e8ceadd..c0ddc9e 100644
--- a/packages/primevue/src/classic/panelmenu/index.ts
+++ b/packages/primevue/src/classic/panelmenu/index.ts
@@ -1,9 +1,9 @@
 export default {
   root: {
-    class: "bg-surface-800 rounded-md",
+    class: "bg-surface-200 dark:bg-surface-800 rounded-md",
   },
   panel: {
-    class: "p-1 overflow-hidden rounded-md bg-surface-800",
+    class: "p-1 overflow-hidden rounded-md bg-surface-200 dark:bg-surface-800",
   },
   header: {
     class: ["rounded-[4px]", "outline-none"],
@@ -18,7 +18,7 @@ export default {
       { "text-surface-900": context.active },
 
       // States
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.20)]",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.20)]",
 
       // Transition
       "transition duration-200 ease-in-out",
@@ -96,7 +96,7 @@ export default {
       "text-surface-300",
 
       // States
-      "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.20)] hover:text-surface-700 dark:hover:text-white/80",
+      "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.20)] hover:text-surface-700 dark:hover:text-white/80",
       {
         "bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10":
           context.focused,
diff --git a/packages/primevue/src/classic/password/index.ts b/packages/primevue/src/classic/password/index.ts
index d228ade..7c924d1 100644
--- a/packages/primevue/src/classic/password/index.ts
+++ b/packages/primevue/src/classic/password/index.ts
@@ -36,7 +36,7 @@ export default {
       "mb-3",
 
       // Colors
-      "bg-surface-100 dark:bg-surface-700",
+      "bg-surface-200 dark:bg-surface-700",
     ],
   },
   meterLabel: ({ instance }) => ({
diff --git a/packages/primevue/src/classic/progressbar/index.ts b/packages/primevue/src/classic/progressbar/index.ts
index cc8baa1..44d2466 100644
--- a/packages/primevue/src/classic/progressbar/index.ts
+++ b/packages/primevue/src/classic/progressbar/index.ts
@@ -11,7 +11,7 @@ export default {
       "rounded-md",
 
       // Colors
-      "bg-surface-100 dark:bg-surface-800",
+      "bg-surface-200 dark:bg-surface-800",
     ],
   },
   value: ({ props }) => ({
diff --git a/packages/primevue/src/classic/ripple/index.ts b/packages/primevue/src/classic/ripple/index.ts
index a63a70c..bc8e010 100644
--- a/packages/primevue/src/classic/ripple/index.ts
+++ b/packages/primevue/src/classic/ripple/index.ts
@@ -1,7 +1,7 @@
 export default {
   root: {
     class: [
-      "block absolute bg-surface-200 dark:bg-surface-700 rounded-full pointer-events-none",
+      "block absolute bg-surface-300 dark:bg-surface-700 rounded-full pointer-events-none",
     ],
     style: "transform: scale(0)",
   },
diff --git a/packages/primevue/src/classic/scrollpanel/index.ts b/packages/primevue/src/classic/scrollpanel/index.ts
index 328114e..a23395d 100644
--- a/packages/primevue/src/classic/scrollpanel/index.ts
+++ b/packages/primevue/src/classic/scrollpanel/index.ts
@@ -41,7 +41,7 @@ export default {
       "h-[9px] bottom-0",
 
       // Appearance
-      "bg-surface-100 dark:bg-surface-800 rounded",
+      "bg-surface-200 dark:bg-surface-800 rounded",
       "opacity-0",
 
       // Interactivity
@@ -66,7 +66,7 @@ export default {
       "w-[9px] top-0",
 
       // Appearance
-      "bg-surface-100 dark:bg-surface-800 rounded",
+      "bg-surface-200 dark:bg-surface-800 rounded",
       "opacity-0",
 
       // Interactivity
diff --git a/packages/primevue/src/classic/scrolltop/index.ts b/packages/primevue/src/classic/scrolltop/index.ts
index 80d683e..7401c5f 100644
--- a/packages/primevue/src/classic/scrolltop/index.ts
+++ b/packages/primevue/src/classic/scrolltop/index.ts
@@ -12,8 +12,8 @@ export default {
         },
         "bottom-[20px] right-[20px]",
         "h-10 w-10 rounded-full shadow-md",
-        "text-white dark:text-surface-900 bg-surface-600 dark:bg-surface-700",
-        "hover:bg-surface-600 dark:hover:bg-surface-300",
+        "text-white dark:text-surface-900 bg-surface-400 dark:bg-surface-700",
+        "hover:bg-surface-500 dark:hover:bg-surface-300",
       ],
     },
   }),
diff --git a/packages/primevue/src/classic/skeleton/index.ts b/packages/primevue/src/classic/skeleton/index.ts
index 805316f..6e43f0b 100644
--- a/packages/primevue/src/classic/skeleton/index.ts
+++ b/packages/primevue/src/classic/skeleton/index.ts
@@ -13,7 +13,7 @@ export default {
       },
 
       // Colors
-      "bg-surface-200 dark:bg-surface-700",
+      "bg-surface-300 dark:bg-surface-700",
     ],
   }),
 };
diff --git a/packages/primevue/src/classic/slider/index.ts b/packages/primevue/src/classic/slider/index.ts
index 39253d8..859faa0 100644
--- a/packages/primevue/src/classic/slider/index.ts
+++ b/packages/primevue/src/classic/slider/index.ts
@@ -14,7 +14,7 @@ export default {
       "rounded-md",
 
       // Colors
-      "bg-surface-200 dark:bg-surface-800",
+      "bg-surface-300 dark:bg-surface-800",
 
       // States
       {
@@ -63,7 +63,7 @@ export default {
       "before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md",
 
       // Colors
-      "bg-surface-200 dark:bg-surface-800",
+      "bg-surface-300 dark:bg-surface-800",
 
       // States
       "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1",
@@ -95,7 +95,7 @@ export default {
       "before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md",
 
       // Colors
-      "bg-surface-200 dark:bg-surface-800",
+      "bg-surface-300 dark:bg-surface-800",
 
       // States
       "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1",
@@ -127,7 +127,7 @@ export default {
       "before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md",
 
       // Colors
-      "bg-surface-200 dark:bg-surface-800",
+      "bg-surface-300 dark:bg-surface-800",
 
       // States
       "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1",
diff --git a/packages/primevue/src/classic/splitter/index.ts b/packages/primevue/src/classic/splitter/index.ts
index 3f3af83..37f84ff 100644
--- a/packages/primevue/src/classic/splitter/index.ts
+++ b/packages/primevue/src/classic/splitter/index.ts
@@ -41,7 +41,7 @@ export default {
     class: [
       "z-20",
       // Colors
-      "bg-surface-700",
+      "bg-surface-300 dark:bg-surface-700",
 
       // Shape
       "rounded-md",
diff --git a/packages/primevue/src/classic/step/index.ts b/packages/primevue/src/classic/step/index.ts
index e96360c..aed8947 100644
--- a/packages/primevue/src/classic/step/index.ts
+++ b/packages/primevue/src/classic/step/index.ts
@@ -25,7 +25,7 @@ export default {
       "justify-center",
 
       //Colors
-      "border-solid border-2 border-surface-200 dark:border-surface-700",
+      "border-solid border-2 border-surface-300 dark:border-surface-700",
 
       // Colors (Conditional)
       context.active
@@ -60,7 +60,7 @@ export default {
       // Text
       context.active
         ? "text-secondary-400"
-        : "text-surface-700 dark:text-surface-0/80",
+        : "text-surface-600 dark:text-surface-0/80",
       "font-medium",
 
       // Transitions
diff --git a/packages/primevue/src/classic/stepper/index.ts b/packages/primevue/src/classic/stepper/index.ts
index 05b5ace..2e94647 100644
--- a/packages/primevue/src/classic/stepper/index.ts
+++ b/packages/primevue/src/classic/stepper/index.ts
@@ -1,7 +1,7 @@
 export default {
   root: "has-[[data-pc-name=stepitem]]:flex has-[[data-pc-name=stepitem]]:flex-col",
   separator:
-    "flex-1 w-full h-[2px] bg-surface-200 dark:bg-surface-700 transition-shadow duration-200",
+    "flex-1 w-full h-[2px] bg-surface-300 dark:bg-surface-700 transition-shadow duration-200",
   transition: {
     class: [
       "flex flex-1",
diff --git a/packages/primevue/src/classic/tablist/index.ts b/packages/primevue/src/classic/tablist/index.ts
index 024cd7c..4b33910 100644
--- a/packages/primevue/src/classic/tablist/index.ts
+++ b/packages/primevue/src/classic/tablist/index.ts
@@ -1,12 +1,12 @@
 export default {
   root: "relative flex",
   content:
-    "overflow-x-auto overflow-y-hidden scroll-smooth overscroll-x-contain overscroll-y-auto [&::-webkit-scrollbar]:hidden grow dark:bg-surface-800",
+    "overflow-x-auto overflow-y-hidden scroll-smooth overscroll-x-contain overscroll-y-auto [&::-webkit-scrollbar]:hidden grow bg-surface-50 dark:bg-surface-800",
   tabList:
     "relative flex border-solid border-b border-surface-200 dark:border-surface-900",
   nextButton:
-    "!absolute top-0 right-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-0 dark:bg-surface-800 outline-transparent cursor-pointer shrink-0",
+    "!absolute top-0 right-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-50 dark:bg-surface-800 outline-transparent cursor-pointer shrink-0",
   prevButton:
-    "!absolute top-0 left-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-0 dark:bg-surface-800 outline-transparent cursor-pointer shrink-0",
+    "!absolute top-0 left-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-50 dark:bg-surface-800 outline-transparent cursor-pointer shrink-0",
   activeBar: "z-10 block absolute h-[1px] bottom-[-1px] bg-primary-400",
 };
diff --git a/packages/primevue/src/classic/tabmenu/index.ts b/packages/primevue/src/classic/tabmenu/index.ts
index 786b059..3fbca10 100644
--- a/packages/primevue/src/classic/tabmenu/index.ts
+++ b/packages/primevue/src/classic/tabmenu/index.ts
@@ -14,7 +14,7 @@ export default {
       // Colors
       "bg-surface-0 dark:bg-surface-900",
       "border-b-2 border-surface-200 dark:border-surface-700",
-      "text-surface-900 dark:text-surface-0/80",
+      "text-surface-700 dark:text-surface-0/80",
     ],
   },
   menuitem: {
@@ -54,7 +54,7 @@ export default {
       // States
       "focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300",
       {
-        "hover:text-surface-900 dark:hover:text-surface-0":
+        "hover:text-surface-800 dark:hover:text-surface-0":
           state.d_activeIndex !== context.index,
       },
 
diff --git a/packages/primevue/src/classic/tabpanels/index.ts b/packages/primevue/src/classic/tabpanels/index.ts
index d66856d..f3d13e1 100644
--- a/packages/primevue/src/classic/tabpanels/index.ts
+++ b/packages/primevue/src/classic/tabpanels/index.ts
@@ -1,3 +1,3 @@
 export default {
-  root: "bg-surface-0 dark:bg-surface-800 text-surface-900 dark:text-surface-0/80 outline-0 p-[1.125rem] pt-[0.875rem]",
+  root: "bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-surface-0/80 outline-0 p-[1.125rem] pt-[0.875rem]",
 };
diff --git a/packages/primevue/src/classic/tabview/index.ts b/packages/primevue/src/classic/tabview/index.ts
index 70d3631..787f320 100644
--- a/packages/primevue/src/classic/tabview/index.ts
+++ b/packages/primevue/src/classic/tabview/index.ts
@@ -70,7 +70,7 @@ export default {
       // Colors
       "bg-surface-0 dark:bg-surface-900",
       "border-b border-surface-200 dark:border-surface-700",
-      "text-surface-900 dark:text-surface-0/80",
+      "text-surface-700 dark:text-surface-0/80",
     ],
   },
   tabpanel: {
@@ -121,9 +121,9 @@ export default {
         // States
         "focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300",
         {
-          "hover:bg-surface-0 dark:hover:bg-surface-800/80":
+          "hover:bg-surface-50 dark:hover:bg-surface-800/80":
             parent.state.d_activeIndex !== context.index,
-          "hover:text-surface-900 dark:hover:text-surface-0":
+          "hover:text-surface-800 dark:hover:text-surface-0":
             parent.state.d_activeIndex !== context.index,
         },
 
@@ -155,7 +155,7 @@ export default {
 
       // Colors
       "bg-surface-0 dark:bg-surface-900",
-      "text-surface-900 dark:text-surface-0/80",
+      "text-surface-700 dark:text-surface-0/80",
     ],
   },
 };
diff --git a/packages/primevue/src/classic/tag/index.ts b/packages/primevue/src/classic/tag/index.ts
index 79a0012..30d778f 100644
--- a/packages/primevue/src/classic/tag/index.ts
+++ b/packages/primevue/src/classic/tag/index.ts
@@ -21,7 +21,7 @@ export default {
         "bg-highlight": props.severity === null || props.severity === "primary",
         "text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-500/20":
           props.severity === "success",
-        "text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20":
+        "text-surface-700 dark:text-surface-300 bg-surface-200 dark:bg-surface-500/20":
           props.severity === "secondary",
         "text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/20":
           props.severity === "info",
diff --git a/packages/primevue/src/classic/textarea/index.ts b/packages/primevue/src/classic/textarea/index.ts
index 93e1f66..5f7290b 100644
--- a/packages/primevue/src/classic/textarea/index.ts
+++ b/packages/primevue/src/classic/textarea/index.ts
@@ -12,8 +12,8 @@ export default {
       "rounded-md",
 
       // Colors
-      "text-surface-800 dark:text-white/80",
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "text-surface-900 dark:text-white/80",
+      "placeholder:text-surface-500 dark:placeholder:text-surface-500",
       { "bg-surface-0 dark:bg-surface-950": !context.disabled },
       "border",
       { "border-surface-300 dark:border-surface-600": !props.invalid },
@@ -29,7 +29,7 @@ export default {
           !context.disabled && !props.invalid,
         "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-secondary-500 dark:focus:ring-secondary-400 focus:z-10":
           !context.disabled,
-        "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+        "bg-surface-300 dark:bg-surface-700 select-none pointer-events-none cursor-default":
           context.disabled,
       },
 
diff --git a/packages/primevue/src/classic/tieredmenu/index.ts b/packages/primevue/src/classic/tieredmenu/index.ts
index 2a74c7d..87c0167 100644
--- a/packages/primevue/src/classic/tieredmenu/index.ts
+++ b/packages/primevue/src/classic/tieredmenu/index.ts
@@ -48,7 +48,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           !context.active,
         "hover:bg-highlight-emphasis": context.active,
       },
diff --git a/packages/primevue/src/classic/timeline/index.ts b/packages/primevue/src/classic/timeline/index.ts
index 482b4f5..6f31eb5 100644
--- a/packages/primevue/src/classic/timeline/index.ts
+++ b/packages/primevue/src/classic/timeline/index.ts
@@ -77,7 +77,7 @@ export default {
   },
   eventConnector: ({ props }) => ({
     class: [
-      "grow bg-surface-300 dark:bg-surface-700",
+      "grow bg-surface-200 dark:bg-surface-700",
       {
         "w-[2px]": props.layout === "vertical",
         "w-full h-[2px]": props.layout === "horizontal",
diff --git a/packages/primevue/src/classic/toast/index.ts b/packages/primevue/src/classic/toast/index.ts
index 367c97c..22880db 100644
--- a/packages/primevue/src/classic/toast/index.ts
+++ b/packages/primevue/src/classic/toast/index.ts
@@ -119,7 +119,7 @@ export default {
       "transition duration-200 ease-in-out",
 
       // States
-      "hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]",
+      "hover:bg-surface-100/30 dark:hover:bg-[rgba(255,255,255,0.03)]",
       "focus:outline-none focus:outline-offset-0 focus:ring-1",
       {
         "focus:ring-blue-500 dark:focus:ring-blue-400":
diff --git a/packages/primevue/src/classic/togglebutton/index.ts b/packages/primevue/src/classic/togglebutton/index.ts
index 1ad1c75..995924f 100644
--- a/packages/primevue/src/classic/togglebutton/index.ts
+++ b/packages/primevue/src/classic/togglebutton/index.ts
@@ -9,7 +9,7 @@ export default {
       "rounded-md border",
 
       // Color
-      "bg-surface-100 dark:bg-surface-950",
+      "bg-surface-50 dark:bg-surface-950",
       {
         "text-surface-600 dark:text-white/60 before:bg-transparent":
           !context.active,
@@ -28,7 +28,7 @@ export default {
       // Invalid State
       {
         "border-red-500 dark:border-red-400": props.invalid,
-        "border-surface-100 dark:border-surface-950": !props.invalid,
+        "border-surface-200 dark:border-surface-950": !props.invalid,
       },
 
       // Before
diff --git a/packages/primevue/src/classic/toggleswitch/index.ts b/packages/primevue/src/classic/toggleswitch/index.ts
index 77d02ab..131203b 100644
--- a/packages/primevue/src/classic/toggleswitch/index.ts
+++ b/packages/primevue/src/classic/toggleswitch/index.ts
@@ -33,7 +33,7 @@ export default {
       // Colors
       "border",
       {
-        "bg-surface-300 dark:bg-surface-700": !(
+        "bg-surface-200 dark:bg-surface-700": !(
           props.modelValue == props.trueValue
         ),
         "bg-secondary-400": props.modelValue == props.trueValue,
@@ -46,7 +46,7 @@ export default {
 
       // States
       {
-        "peer-hover:bg-surface-400 dark:peer-hover:bg-surface-600":
+        "peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600":
           !(props.modelValue == props.trueValue) &&
           !props.disabled &&
           !props.invalid,
diff --git a/packages/primevue/src/classic/tooltip/index.ts b/packages/primevue/src/classic/tooltip/index.ts
index a9282a8..7a30019 100644
--- a/packages/primevue/src/classic/tooltip/index.ts
+++ b/packages/primevue/src/classic/tooltip/index.ts
@@ -17,7 +17,7 @@ export default {
       },
 
       // Flipped Tooltip Arrow
-      '[&[data-p-position="top"]>[data-pc-section=arrow]]:border-x-[10px] [&[data-p-position="top"]>[data-pc-section=arrow]]:border-t-[10px] [&[data-p-position="top"]>[data-pc-section=arrow]]:border-b-0 [&[data-p-position="top"]>[data-pc-section=arrow]]:border-t-surface-700 [&[data-p-position="top"]>[data-pc-section=arrow]]:border-y-0 [&[data-p-position="top"]>[data-pc-section=arrow]]:border-x-transparent',
+      '[&[data-p-position="top"]>[data-pc-section=arrow]]:border-x-[10px] [&[data-p-position="top"]>[data-pc-section=arrow]]:border-t-[10px] [&[data-p-position="top"]>[data-pc-section=arrow]]:border-b-0 [&[data-p-position="top"]>[data-pc-section=arrow]]:border-t-surface-400 [&[data-p-position="top"]>[data-pc-section=arrow]]:border-y-0 [&[data-p-position="top"]>[data-pc-section=arrow]]:border-x-transparent',
 
       '[&[data-p-position="top"]>[data-pc-section=arrow]]:-ml-[10px] [&[data-p-position="top"]>[data-pc-section=arrow]]:left-1/2 [&[data-p-position="top"]>[data-pc-section=arrow]]:mt-auto [&[data-p-position="top"]>[data-pc-section=arrow]]:top-auto',
     ],
@@ -35,17 +35,17 @@ export default {
       "border-transparent",
       "border-solid",
       {
-        "border-y-[10px] border-r-[10px] border-l-0 border-r-surface-700":
+        "border-y-[10px] border-r-[10px] border-l-0 border-r-surface-400":
           context?.right ||
           (!context?.right &&
             !context?.left &&
             !context?.top &&
             !context?.bottom),
-        "border-y-[10px] border-l-[10px] border-r-0 border-l-surface-700":
+        "border-y-[10px] border-l-[10px] border-r-0 border-l-surface-400":
           context?.left,
-        "border-x-[10px] border-t-[10px] border-b-0 border-t-surface-700 ":
+        "border-x-[10px] border-t-[10px] border-b-0 border-t-surface-400 ":
           context?.top,
-        "border-x-[10px] border-b-[10px] border-t-0 border-b-surface-700":
+        "border-x-[10px] border-b-[10px] border-t-0 border-b-surface-400":
           context?.bottom,
       },
 
@@ -65,7 +65,7 @@ export default {
   text: {
     class: [
       "p-3",
-      "bg-surface-700",
+      "bg-surface-400",
       "text-white",
       "leading-none",
       "rounded-md",
diff --git a/packages/primevue/src/classic/tree/index.ts b/packages/primevue/src/classic/tree/index.ts
index 43b2084..fd4439e 100644
--- a/packages/primevue/src/classic/tree/index.ts
+++ b/packages/primevue/src/classic/tree/index.ts
@@ -51,7 +51,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]":
+        "hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)]":
           (props.selectionMode == "single" ||
             props.selectionMode == "multiple") &&
           !context.selected,
@@ -86,7 +86,7 @@ export default {
       },
 
       // States
-      "hover:bg-surface-200/20 dark:hover:bg-surface-500/20",
+      "hover:bg-surface-300/20 dark:hover:bg-surface-500/20",
       "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400",
 
       // Transition
diff --git a/packages/primevue/src/classic/treeselect/index.ts b/packages/primevue/src/classic/treeselect/index.ts
index 05bd427..bcd3157 100644
--- a/packages/primevue/src/classic/treeselect/index.ts
+++ b/packages/primevue/src/classic/treeselect/index.ts
@@ -36,7 +36,7 @@ export default {
       "cursor-pointer",
       "select-none",
       {
-        "bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default":
+        "bg-surface-100 dark:bg-surface-700 select-none pointer-events-none cursor-default":
           props.disabled,
       },
     ],
@@ -52,7 +52,7 @@ export default {
       "py-2 px-3",
 
       // Color
-      "text-surface-800 dark:text-white/80",
+      "text-surface-700 dark:text-white/80",
       {
         "placeholder:text-transparent dark:placeholder:text-transparent":
           parent.instance?.$name == "FloatLabel",
diff --git a/packages/primevue/src/classic/treetable/index.ts b/packages/primevue/src/classic/treetable/index.ts
index 9b968f6..4fb0234 100644
--- a/packages/primevue/src/classic/treetable/index.ts
+++ b/packages/primevue/src/classic/treetable/index.ts
@@ -21,7 +21,7 @@ export default {
       "w-full h-full",
 
       // Color
-      "bg-surface-100/40 dark:bg-surface-800/40",
+      "bg-surface-200/40 dark:bg-surface-800/40",
 
       // Transition
       "transition duration-200",
@@ -182,7 +182,7 @@ export default {
 
       // States
       {
-        "hover:bg-surface-100 dark:hover:bg-surface-80/50":
+        "hover:bg-surface-200 dark:hover:bg-surface-80/50":
           (props.sortable === "" || props.sortable) && !context?.sorted,
       },
       "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
@@ -240,8 +240,8 @@ export default {
 
         // States
         {
-          "hover:bg-surface-100 dark:hover:bg-surface-80/50":
-            (props.sortable === "" || props.sortable) && !context?.sorted,
+        "hover:bg-surface-200 dark:hover:bg-surface-80/50":
+          (props.sortable === "" || props.sortable) && !context?.sorted,
         },
         "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",