From 5486ec46fe44f12d0dcd4648724a9bfc0f799df8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 27 Mar 2024 11:30:38 +0300
Subject: [PATCH] Migrated css variables used in demos

---
 doc/animateonscroll/BasicDoc.vue  |  18 +--
 doc/button/TemplateDoc.vue        |   8 +-
 doc/contextmenu/RouterDoc.vue     |   8 +-
 doc/dialog/HeadlessDoc.vue        |  24 +--
 doc/iconfield/TemplateDoc.vue     |   8 +-
 doc/icons/ColorDoc.vue            |   4 +-
 doc/inputotp/SampleDoc.vue        |  24 +--
 doc/inputotp/TemplateDoc.vue      |  12 +-
 doc/megamenu/TemplateDoc.vue      |   8 +-
 doc/menu/TemplateDoc.vue          |   8 +-
 doc/menubar/TemplateDoc.vue       |   8 +-
 doc/progressspinner/CustomDoc.vue |   8 +-
 doc/ripple/CustomDoc.vue          |   3 -
 doc/scrollpanel/CustomDoc.vue     | 234 +++++++++---------------------
 doc/sidebar/HeadlessDoc.vue       |   8 +-
 doc/steps/TemplateDoc.vue         |  21 ++-
 doc/styleclass/AnimationDoc.vue   |  84 +++--------
 doc/tag/TemplateDoc.vue           |   8 +-
 doc/theming/ScopedCSSDoc.vue      |  12 +-
 doc/toolbar/CustomDoc.vue         |   8 +-
 doc/tooltip/CustomDoc.vue         |   8 +-
 21 files changed, 200 insertions(+), 324 deletions(-)

diff --git a/doc/animateonscroll/BasicDoc.vue b/doc/animateonscroll/BasicDoc.vue
index c4abab8ed..4961b4903 100644
--- a/doc/animateonscroll/BasicDoc.vue
+++ b/doc/animateonscroll/BasicDoc.vue
@@ -143,9 +143,9 @@ export default {
 }
 
 .box {
-    background-image: radial-gradient(var(--primary-300), var(--primary-600));
-    border-radius: 50% !important;
-    color: var(--primary-color-text);
+    background: var(--p-primary-color);
+    border-radius: 12px !important;
+    color: var(--p-primary-inverse-color);
 }
 </style>
 `,
@@ -211,9 +211,9 @@ export default {
 }
 
 .box {
-    background-image: radial-gradient(var(--primary-300), var(--primary-600));
-    border-radius: 50% !important;
-    color: var(--primary-color-text);
+    background: var(--p-primary-color);
+    border-radius: 12px !important;
+    color: var(--p-primary-inverse-color);
 }
 </style>
 `
@@ -245,8 +245,8 @@ export default {
 }
 
 .box {
-    background-image: radial-gradient(var(--primary-300), var(--primary-600));
-    border-radius: 50% !important;
-    color: var(--primary-color-text);
+    background: var(--p-primary-color);
+    border-radius: 12px !important;
+    color: var(--p-primary-inverse-color);
 }
 </style>
diff --git a/doc/button/TemplateDoc.vue b/doc/button/TemplateDoc.vue
index a13892ba7..89bb86b79 100644
--- a/doc/button/TemplateDoc.vue
+++ b/doc/button/TemplateDoc.vue
@@ -7,7 +7,7 @@
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-color)"
+                    fill="var(--p-primary-color)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -27,7 +27,7 @@ export default {
                 basic: `
 <Button outlined class="border-2">
     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="..." fill="var(--primary-color)" />
+        <path d="..." fill="var(--p-primary-color)" />
         <path d="..." fill="var(--text-color)" />
     </svg>
 </Button>
@@ -39,7 +39,7 @@ export default {
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-color)"
+                    fill="var(--p-primary-color)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -60,7 +60,7 @@ export default {
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-color)"
+                    fill="var(--p-primary-color)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index e5fdabfd7..69996d01e 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -7,7 +7,7 @@
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-color)"
+                    fill="var(--p-primary-color)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -60,7 +60,7 @@ export default {
                 basic: `
 <span class="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" @contextmenu="onRightClick" aria-haspopup="true">
     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="..." fill="var(--primary-color)" />
+        <path d="..." fill="var(--p-primary-color)" />
         <path d="..." fill="var(--text-color)" />
     </svg>
 </span>
@@ -86,7 +86,7 @@ export default {
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-color)"
+                    fill="var(--p-primary-color)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -151,7 +151,7 @@ export default {
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-color)"
+                    fill="var(--p-primary-color)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
diff --git a/doc/dialog/HeadlessDoc.vue b/doc/dialog/HeadlessDoc.vue
index bacc74356..b450033f2 100644
--- a/doc/dialog/HeadlessDoc.vue
+++ b/doc/dialog/HeadlessDoc.vue
@@ -16,15 +16,15 @@
             }"
         >
             <template #container="{ closeCallback }">
-                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
+                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-700)"
+                            fill="var(--p-primary-700)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--primary-200)"
+                            fill="var(--p-primary-200)"
                         />
                     </svg>
                     <div class="inline-flex flex-column gap-2">
@@ -66,15 +66,15 @@ export default {
     }"
 >
     <template #container="{ closeCallback }">
-        <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
+        <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                    fill="var(--primary-700)"
+                    fill="var(--p-primary-700)"
                 />
                 <path
                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                    fill="var(--primary-200)"
+                    fill="var(--p-primary-200)"
                 />
             </svg>
             <div class="inline-flex flex-column gap-2">
@@ -109,15 +109,15 @@ export default {
             }"
         >
             <template #container="{ closeCallback }">
-                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
+                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-700)"
+                            fill="var(--p-primary-700)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--primary-200)"
+                            fill="var(--p-primary-200)"
                         />
                     </svg>
                     <div class="inline-flex flex-column gap-2">
@@ -164,15 +164,15 @@ export default {
             }"
         >
             <template #container="{ closeCallback }">
-                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
+                <div class="flex flex-column px-5 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-700)"
+                            fill="var(--p-primary-700)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--primary-200)"
+                            fill="var(--p-primary-200)"
                         />
                     </svg>
                     <div class="inline-flex flex-column gap-2">
diff --git a/doc/iconfield/TemplateDoc.vue b/doc/iconfield/TemplateDoc.vue
index 3f371e61c..2b87a55fd 100644
--- a/doc/iconfield/TemplateDoc.vue
+++ b/doc/iconfield/TemplateDoc.vue
@@ -8,7 +8,7 @@
                 <svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -32,7 +32,7 @@ export default {
 <IconField iconPosition="left">
     <InputIcon>
         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--p-primary-color)" />
             <path d="..." fill="var(--text-color)" />
         </svg>
     </InputIcon>
@@ -45,7 +45,7 @@ export default {
         <IconField iconPosition="left">
             <InputIcon>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--p-primary-color)" />
                     <path d="..." fill="var(--text-color)" />
                 </svg>
             </InputIcon>
@@ -70,7 +70,7 @@ export default {
         <IconField iconPosition="left">
             <InputIcon>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--p-primary-color)" />
                     <path d="..." fill="var(--text-color)" />
                 </svg>
             </InputIcon>
diff --git a/doc/icons/ColorDoc.vue b/doc/icons/ColorDoc.vue
index e14ea2a06..701ad5a7b 100644
--- a/doc/icons/ColorDoc.vue
+++ b/doc/icons/ColorDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center align-items-center gap-3">
         <i class="pi pi-check" style="color: slateblue"></i>
         <i class="pi pi-times" style="color: green"></i>
-        <i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
+        <i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
         <i class="pi pi-user" style="color: #708090"></i>
     </div>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
@@ -19,7 +19,7 @@ export default {
                 basic: `
 <i class="pi pi-check" style="color: slateblue"></i>
 <i class="pi pi-times" style="color: green"></i>
-<i class="pi pi-search" style="color: 'var(--primary-color)'"></i>
+<i class="pi pi-search" style="color: 'var(--p-primary-color)'"></i>
 <i class="pi pi-user" style="color: #708090"></i>
 `
             }
diff --git a/doc/inputotp/SampleDoc.vue b/doc/inputotp/SampleDoc.vue
index e021bf824..d1e986429 100644
--- a/doc/inputotp/SampleDoc.vue
+++ b/doc/inputotp/SampleDoc.vue
@@ -88,17 +88,17 @@ export default {
     text-align: center;
     transition: all 0.2s;
     border-radius: 0;
-    border: 1px solid var(--surface-400);
+    border: 1px solid var(--p-inputtext-border-color);
     background: transparent;
     outline-offset: -2px;
     outline-color: transparent;
     border-right: 0 none;
     transition: outline-color 0.3s;
-    color: var(--text-color);
+    color: var(--p-inputtext-color);
 }
 
 .custom-otp-input:focus {
-    outline: 2px solid var(--primary-color);
+    outline: 2px solid var(--p-focus-ring-color);
 }
 
 .custom-otp-input:first-child,
@@ -113,7 +113,7 @@ export default {
     border-bottom-right-radius: 12px;
     border-right-width: 1px;
     border-right-style: solid;
-    border-color: var(--surface-400);
+    border-color: var(--p-inputtext-border-color);
 }
 <\/style>
 `,
@@ -154,17 +154,17 @@ const value = ref(null);
     text-align: center;
     transition: all 0.2s;
     border-radius: 0;
-    border: 1px solid var(--surface-400);
+    border: 1px solid var(--p-inputtext-border-color);
     background: transparent;
     outline-offset: -2px;
     outline-color: transparent;
     border-right: 0 none;
     transition: outline-color 0.3s;
-    color: var(--text-color);
+    color: var(--p-inputtext-color);
 }
 
 .custom-otp-input:focus {
-    outline: 2px solid var(--primary-color);
+    outline: 2px solid var(--p-focus-ring-color);
 }
 
 .custom-otp-input:first-child,
@@ -179,7 +179,7 @@ const value = ref(null);
     border-bottom-right-radius: 12px;
     border-right-width: 1px;
     border-right-style: solid;
-    border-color: var(--surface-400);
+    border-color: var(--p-inputtext-border-color);
 }
 <\/style>
 `
@@ -198,17 +198,17 @@ const value = ref(null);
     text-align: center;
     transition: all 0.2s;
     border-radius: 0;
-    border: 1px solid var(--surface-400);
+    border: 1px solid var(--p-inputtext-border-color);
     background: transparent;
     outline-offset: -2px;
     outline-color: transparent;
     border-right: 0 none;
     transition: outline-color 0.3s;
-    color: var(--text-color);
+    color: var(--p-inputtext-color);
 }
 
 .custom-otp-input:focus {
-    outline: 2px solid var(--primary-color);
+    outline: 2px solid var(--p-focus-ring-color);
 }
 
 .custom-otp-input:first-child,
@@ -223,6 +223,6 @@ const value = ref(null);
     border-bottom-right-radius: 12px;
     border-right-width: 1px;
     border-right-style: solid;
-    border-color: var(--surface-400);
+    border-color: var(--p-inputtext-border-color);
 }
 </style>
diff --git a/doc/inputotp/TemplateDoc.vue b/doc/inputotp/TemplateDoc.vue
index 2d201686d..36d7142a0 100644
--- a/doc/inputotp/TemplateDoc.vue
+++ b/doc/inputotp/TemplateDoc.vue
@@ -55,12 +55,12 @@ export default {
     text-align: center;
     transition: all 0.2s;
     background: transparent;
-    border-bottom: 2px solid var(--surface-500);
+    border-bottom: 2px solid var(--p-inputtext-border-color);
 }
 
 .custom-otp-input:focus {
     outline: 0 none;
-    border-bottom-color: var(--primary-color);
+    border-bottom-color: var(--p-primary-color);
 }
 <\/style>
 `,
@@ -90,12 +90,12 @@ const value = ref(null);
     text-align: center;
     transition: all 0.2s;
     background: transparent;
-    border-bottom: 2px solid var(--surface-500);
+    border-bottom: 2px solid var(--p-inputtext-border-color);
 }
 
 .custom-otp-input:focus {
     outline: 0 none;
-    border-bottom-color: var(--primary-color);
+    border-bottom-color: var(--p-primary-color);
 }
 <\/style>
 `
@@ -114,11 +114,11 @@ const value = ref(null);
     text-align: center;
     transition: all 0.2s;
     background: transparent;
-    border-bottom: 2px solid var(--surface-500);
+    border-bottom: 2px solid var(--p-inputtext-border-color);
 }
 
 .custom-otp-input:focus {
     outline: 0 none;
-    border-bottom-color: var(--primary-color);
+    border-bottom-color: var(--p-primary-color);
 }
 </style>
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 92d7e70d2..30a93ca93 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -10,7 +10,7 @@
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -103,7 +103,7 @@ export default {
 <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
     <template #start>
         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
-            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--p-primary-color)" />
             <path d="..." fill="var(--text-color)" />
         </svg>
     </template>
@@ -140,7 +140,7 @@ export default {
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -240,7 +240,7 @@ export default {
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 0957d8cc3..b6232b56f 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -12,7 +12,7 @@
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -100,7 +100,7 @@ export default {
     <template #start>
         <span class="inline-flex align-items-center gap-1 px-2 py-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
-                <path d="..." fill="var(--primary-color)" />
+                <path d="..." fill="var(--p-primary-color)" />
                 <path d="..." fill="var(--text-color)" />
             </svg>
             <span class="font-medium text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
@@ -137,7 +137,7 @@ export default {
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -232,7 +232,7 @@ export default {
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                         <path
                             d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                            fill="var(--primary-color)"
+                            fill="var(--p-primary-color)"
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 9066487d5..66e850cef 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -10,7 +10,7 @@
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -102,7 +102,7 @@ export default {
 <Menubar :model="items">
     <template #start>
         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
-            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--p-primary-color)" />
             <path d="..." fill="var(--text-color)" />
         </svg>
     </template>
@@ -131,7 +131,7 @@ export default {
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -230,7 +230,7 @@ export default {
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
                         d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        fill="var(--primary-color)"
+                        fill="var(--p-primary-color)"
                     />
                     <path
                         d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
diff --git a/doc/progressspinner/CustomDoc.vue b/doc/progressspinner/CustomDoc.vue
index fc4b56204..eb7b32194 100644
--- a/doc/progressspinner/CustomDoc.vue
+++ b/doc/progressspinner/CustomDoc.vue
@@ -3,7 +3,7 @@
         <p>ProgressSpinner can be customized with styling property like <i>style</i>, <i>strokeWidth</i> <i>fill</i> and <i>animationDuration</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,13 +14,13 @@ export default {
         return {
             code: {
                 basic: `
-<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
+<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
     animationDuration=".5s" aria-label="Custom ProgressSpinner" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
+        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
     </div>
 </template>
@@ -31,7 +31,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
+        <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
             animationDuration=".5s" aria-label="Custom ProgressSpinner" />
     </div>
 </template>
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 1d17ed582..45d533c5a 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -121,7 +121,6 @@ export default {
 
 <style scoped>
 .box {
-    background: var(--surface-card);
     padding: 2rem;
     border-radius: 10px;
     width: 110px;
@@ -170,7 +169,6 @@ export default {
 
 <style scoped>
 .box {
-    background: var(--surface-card);
     padding: 2rem;
     border-radius: 10px;
     width: 110px;
@@ -186,7 +184,6 @@ export default {
 
 <style scoped>
 .box {
-    background: var(--surface-card);
     padding: 2rem;
     border-radius: 10px;
     width: 110px;
diff --git a/doc/scrollpanel/CustomDoc.vue b/doc/scrollpanel/CustomDoc.vue
index 962b1f5b3..598e4205e 100644
--- a/doc/scrollpanel/CustomDoc.vue
+++ b/doc/scrollpanel/CustomDoc.vue
@@ -3,56 +3,40 @@
         <p>Scrollbar visuals can be styled for a unified look across different platforms.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-column md:flex-row gap-5">
-            <div class="flex-auto">
-                <ScrollPanel
-                    style="width: 100%; height: 200px"
-                    :pt="{
-                        wrapper: {
-                            style: { 'border-right': '10px solid var(--surface-ground)' }
-                        },
-                        bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
-                    }"
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-            <div class="flex-auto">
-                <ScrollPanel
-                    style="width: 100%; height: 200px"
-                    :pt="{
-                        wrapper: {
-                            style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
-                        },
-                        bary: 'surface-300 opacity-100 border-noround'
-                    }"
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-        </div>
+        <ScrollPanel
+            style="width: 100%; height: 200px"
+            :pt="{
+                wrapper: {
+                    style: { 'border-right': '9px solid var(--border-color)' }
+                },
+                barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </ScrollPanel>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -67,141 +51,53 @@ export default {
     style="width: 100%; height: 200px"
     :pt="{
         wrapper: {
-            style: { 'border-right': '10px solid var(--surface-ground)' }
+            style: { 'border-right': '9px solid var(--border-color)' }
         },
-        bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
+        barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
     }"
 >
-    <p>
-        Lorem ipsum dolor sit amet...
-    </p>
-</ScrollPanel>
-
-<ScrollPanel
-    style="width: 100%; height: 200px"
-    :pt="{
-        wrapper: {
-            style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
-        },
-        bary: 'surface-300 opacity-100 border-noround'
-    }"
->
-    <p>
-        Lorem ipsum dolor sit amet...
-    </p>
+    ...
 </ScrollPanel>
 `,
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-column md:flex-row gap-5">
-            <div class="flex-auto">
-                <ScrollPanel
-                    style="width: 100%; height: 200px"
-                    :pt="{
-                        wrapper: {
-                            style: { 'border-right': '10px solid var(--surface-ground)' }
-                        },
-                        bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
-                    }"
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-            <div class="flex-auto">
-                <ScrollPanel
-                    style="width: 100%; height: 200px"
-                    :pt="{
-                        wrapper: {
-                            style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
-                        },
-                        bary: 'surface-300 opacity-100 border-noround'
-                    }"
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-        </div>
+        <ScrollPanel
+            style="width: 100%; height: 200px"
+            :pt="{
+                wrapper: {
+                    style: { 'border-right': '9px solid var(--border-color)' }
+                },
+                barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
+            }"
+        >
+            ...
+        </ScrollPanel>
     </div>
 </template>
+
+<script>
+<\/script>
 `,
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-column md:flex-row gap-5">
-            <div class="flex-auto">
-                <ScrollPanel
-                    style="width: 100%; height: 200px"
-                    :pt="{
-                        wrapper: {
-                            style: { 'border-right': '10px solid var(--surface-ground)' }
-                        },
-                        bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
-                    }"
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-            <div class="flex-auto">
-                <ScrollPanel
-                    style="width: 100%; height: 200px"
-                    :pt="{
-                        wrapper: {
-                            style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
-                        },
-                        bary: 'surface-300 opacity-100 border-noround'
-                    }"
-                >
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <p>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                    </p>
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                    </p>
-                </ScrollPanel>
-            </div>
-        </div>
+        <ScrollPanel
+            style="width: 100%; height: 200px"
+            :pt="{
+                wrapper: {
+                    style: { 'border-right': '9px solid var(--border-color)' }
+                },
+                barY: 'hover:bg-primary-400 bg-primary-300 opacity-100'
+            }"
+        >
+            ...
+        </ScrollPanel>
     </div>
 </template>
+
+<script setup>
+<\/script>
 `
             }
         };
diff --git a/doc/sidebar/HeadlessDoc.vue b/doc/sidebar/HeadlessDoc.vue
index 9aa7d63d1..2f1b27927 100644
--- a/doc/sidebar/HeadlessDoc.vue
+++ b/doc/sidebar/HeadlessDoc.vue
@@ -11,7 +11,7 @@
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                    fill="var(--primary-color)"
+                                    fill="var(--p-primary-color)"
                                 />
                                 <path
                                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -205,7 +205,7 @@ export default {
             <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                 <span class="inline-flex align-items-center gap-2">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="..." fill="var(--primary-color-color)" />
+                        <path d="..." fill="var(--p-primary-color)" />
                         <path d="..." fill="var(--text-color)" />
                     </svg>
                     <span class="font-semibold text-2xl text-primary">Your Logo</span>
@@ -390,7 +390,7 @@ export default {
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                    fill="var(--primary-color)"
+                                    fill="var(--p-primary-color)"
                                 />
                                 <path
                                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
@@ -591,7 +591,7 @@ export default {
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                                    fill="var(--primary-color)"
+                                    fill="var(--p-primary-color)"
                                 />
                                 <path
                                     d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
diff --git a/doc/steps/TemplateDoc.vue b/doc/steps/TemplateDoc.vue
index ac104f727..c94e4590f 100644
--- a/doc/steps/TemplateDoc.vue
+++ b/doc/steps/TemplateDoc.vue
@@ -71,6 +71,15 @@ export default {
     }
 }
 <\/script>
+
+<style lang="scss" scoped>
+::v-deep(.custom-steps) {
+    .p-steps-item:before {
+        margin-top: 0;
+        border-color: var(--p-primary-color);
+    }
+}
+<\/style>
 `,
                 composition: `
 <template>
@@ -101,18 +110,28 @@ const items = ref([
 ]);
 
 <\/script>
+
+<style lang="scss" scoped>
+::v-deep(.custom-steps) {
+    .p-steps-item:before {
+        margin-top: 0;
+        border-color: var(--p-primary-color);
+    }
+}
+<\/style>
 `
             }
         };
     }
 };
+
 </script>
 
 <style lang="scss" scoped>
 ::v-deep(.custom-steps) {
     .p-steps-item:before {
         margin-top: 0;
-        border-color: var(--primary-color);
+        border-color: var(--p-primary-color);
     }
 }
 </style>
diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index 257f21b1f..bfca9696d 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -7,10 +7,10 @@
     </DocSectionText>
     <div class="card flex flex-column align-items-center">
         <div>
-            <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
+            <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
         </div>
-        <div class="hidden animation-duration-500 box">
+        <div class="my-hidden animation-duration-500 box">
             <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
         </div>
     </div>
@@ -23,9 +23,9 @@ export default {
         return {
             code: {
                 basic: `
-<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
-<div class="hidden animation-duration-500 box">
+<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
+<div class="my-hidden animation-duration-500 box">
     <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
 </div>
 `,
@@ -33,10 +33,10 @@ export default {
 <template>
     <div class="card flex flex-column align-items-center">
         <div>
-            <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
+            <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
         </div>
-        <div class="hidden animation-duration-500 box">
+        <div class="my-hidden animation-duration-500 box">
             <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
         </div>
     </div>
@@ -46,22 +46,6 @@ export default {
 <\/script>
 
 <style scoped>
-.box {
-    background-color: var(--green-500);
-    color: #ffffff;
-    width: 100px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    border-radius: 4px;
-    margin-top: 1rem;
-    font-weight: bold;
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-}
-
 @keyframes my-fadein {
     0% {
         opacity: 0;
@@ -80,6 +64,10 @@ export default {
     }
 }
 
+.my-hidden {
+    display: none;
+}
+
 .my-fadein {
     animation: my-fadein 150ms linear;
 }
@@ -93,10 +81,10 @@ export default {
 <template>
     <div class="card flex flex-column align-items-center">
         <div>
-            <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
+            <Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
         </div>
-        <div class="hidden animation-duration-500 box">
+        <div class="my-hidden animation-duration-500 box">
             <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
         </div>
     </div>
@@ -106,22 +94,6 @@ export default {
 <\/script>
 
 <style scoped>
-.box {
-    background-color: var(--green-500);
-    color: #ffffff;
-    width: 100px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    border-radius: 4px;
-    margin-top: 1rem;
-    font-weight: bold;
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-}
-
 @keyframes my-fadein {
     0% {
         opacity: 0;
@@ -140,6 +112,10 @@ export default {
     }
 }
 
+.my-hidden {
+    display: none;
+}
+
 .my-fadein {
     animation: my-fadein 150ms linear;
 }
@@ -156,22 +132,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
-    background-color: var(--green-500);
-    color: #ffffff;
-    width: 100px;
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    border-radius: 4px;
-    margin-top: 1rem;
-    font-weight: bold;
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-}
-
 @keyframes my-fadein {
     0% {
         opacity: 0;
@@ -190,6 +150,10 @@ export default {
     }
 }
 
+.my-hidden {
+    display: none;
+}
+
 .my-fadein {
     animation: my-fadein 150ms linear;
 }
diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index 66d36e49b..bdb291f57 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>Children of the component are passed as the content for templating.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
             <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
@@ -19,7 +19,7 @@ export default {
         return {
             code: {
                 basic: `
-<Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
     <div class="flex align-items-center gap-2 px-1">
         <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
         <span class="text-base">Italy</span>
@@ -29,7 +29,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
             <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
@@ -44,7 +44,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+        <Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
             <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
diff --git a/doc/theming/ScopedCSSDoc.vue b/doc/theming/ScopedCSSDoc.vue
index f375fc853..78c184d83 100644
--- a/doc/theming/ScopedCSSDoc.vue
+++ b/doc/theming/ScopedCSSDoc.vue
@@ -22,13 +22,13 @@ export default {
                 basic: `
 <style scoped>
 :deep(.p-panel .p-panel-header) {
-    background-color: var(--teal-500);
-    border-color: var(--teal-500);
+    background-color: var(--p-teal-500);
+    border-color: var(--p-teal-500);
     color: #ffffff;
 }
 
 :deep(.p-panel .p-panel-content) {
-    border-color: var(--teal-500);
+    border-color: var(--p-teal-500);
 }
 </style>
 `
@@ -52,12 +52,12 @@ export default {
 
 <style scoped>
 :deep(.p-panel .p-panel-header) {
-    background-color: var(--teal-500);
-    border-color: var(--teal-500);
+    background-color: var(--p-teal-500);
+    border-color: var(--p-teal-500);
     color: #ffffff;
 }
 
 :deep(.p-panel .p-panel-content) {
-    border-color: var(--teal-500);
+    border-color: var(--p-teal-500);
 }
 </style>
diff --git a/doc/toolbar/CustomDoc.vue b/doc/toolbar/CustomDoc.vue
index 0d8f52838..51d1a15d6 100644
--- a/doc/toolbar/CustomDoc.vue
+++ b/doc/toolbar/CustomDoc.vue
@@ -13,7 +13,7 @@
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--surface-card)"
+                            fill="transparent"
                         />
                     </svg>
                     <Button label="Files" text plain />
@@ -44,7 +44,7 @@ export default {
         <div class="flex align-items-center gap-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="..." fill="var(--text-color)" />
-                <path d="..." fill="var(--surface-card)" />
+                <path d="..." fill="transparent" />
             </svg>
             <Button label="Files" text plain />
             <Button label="Edit" text plain />
@@ -73,7 +73,7 @@ export default {
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--surface-card)"
+                            fill="transparent"
                         />
                     </svg>
                     <Button label="Files" text plain />
@@ -108,7 +108,7 @@ export default {
                         />
                         <path
                             d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                            fill="var(--surface-card)"
+                            fill="transparent"
                         />
                     </svg>
                     <Button label="Files" text plain />
diff --git a/doc/tooltip/CustomDoc.vue b/doc/tooltip/CustomDoc.vue
index dd2f862e9..45d34dabd 100644
--- a/doc/tooltip/CustomDoc.vue
+++ b/doc/tooltip/CustomDoc.vue
@@ -9,7 +9,7 @@
                 pt: {
                     arrow: {
                         style: {
-                            borderBottomColor: 'var(--primary-color)'
+                            borderBottomColor: 'var(--p-primary-color)'
                         }
                     },
                     text: 'bg-primary font-medium'
@@ -34,7 +34,7 @@ export default {
         pt: {
             arrow: {
                 style: {
-                    borderBottomColor: 'var(--primary-color)'
+                    borderBottomColor: 'var(--p-primary-color)'
                 }
             },
             text: 'bg-primary font-medium'
@@ -52,7 +52,7 @@ export default {
                 pt: {
                     arrow: {
                         style: {
-                            borderBottomColor: 'var(--primary-color)'
+                            borderBottomColor: 'var(--p-primary-color)'
                         }
                     },
                     text: 'bg-primary font-medium'
@@ -73,7 +73,7 @@ export default {
                 pt: {
                     arrow: {
                         style: {
-                            borderBottomColor: 'var(--primary-color)'
+                            borderBottomColor: 'var(--p-primary-color)'
                         }
                     },
                     text: 'bg-primary font-medium'