From ea02762fbd71e10282e1f6e8c5763515a016a220 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 21 May 2024 10:57:47 +0300
Subject: [PATCH] Refactored landing css

---
 assets/styles/layout/landing/_main.scss | 56 +++++++++++++------------
 components/landing/BlockSection.vue     | 10 ++---
 components/landing/FeaturesSection.vue  | 16 +++----
 components/landing/FooterSection.vue    | 40 +++++++++---------
 components/landing/HeroSection.vue      | 22 +++++-----
 components/landing/TemplateSection.vue  |  2 +-
 doc/dataview/BasicDoc.vue               |  8 ++--
 doc/dataview/LayoutDoc.vue              | 16 +++----
 doc/dataview/PaginationDoc.vue          |  8 ++--
 doc/dataview/SortingDoc.vue             |  8 ++--
 doc/metergroup/TemplateDoc.vue          |  8 ++--
 doc/orderlist/TemplateDoc.vue           | 16 +++----
 doc/picklist/TemplateDoc.vue            | 16 +++----
 doc/theming/styled/ColorsDoc.vue        |  2 +-
 doc/virtualscroller/BasicDoc.vue        |  8 ++--
 doc/virtualscroller/DelayDoc.vue        | 24 +++++------
 doc/virtualscroller/GridDoc.vue         |  8 ++--
 doc/virtualscroller/HorizontalDoc.vue   |  8 ++--
 doc/virtualscroller/LazyDoc.vue         |  8 ++--
 doc/virtualscroller/LoadingDoc.vue      | 24 +++++------
 pages/support/index.vue                 | 17 +++-----
 21 files changed, 162 insertions(+), 163 deletions(-)

diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 7fb29f301..be28cb087 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -38,40 +38,25 @@
         }
     }
 
-    @keyframes clippath {
-        0%,
-        100% {
-            clip-path: inset(0 0 98% 0);
-        }
-        
-        25% {
-            clip-path: inset(0 98% 0 0);
-        }
-        50% {
-            clip-path: inset(98% 0 0 0);
-        }
-        75% {
-            clip-path: inset(0 0 0 98%);
-        }
-    }
-
     .linkbox {
-        transition: background-color .2s, border-color .2s;
+        transition: background-color .2s, border-color .2s, outline-color .2s;
         display: inline-flex;
         align-items: center;
         color: var(--text-color);
         border: 1px solid var(--border-color);
         background-color: var(--card-background);
         border-radius: 10px;
-        cursor: pointer;
+        font-weight: 600;
+        padding: 1rem 1.5rem;
         
+        cursor: pointer;
         @include focus-visible();
 
         &:hover {
             background: var(--hover-background);
         }
 
-        &.active {
+        &.linkbox-primary {
             background: var(--primary-color);
             color: var(--primary-contrast-color);
 
@@ -79,6 +64,12 @@
                 background: var(--primary-hover-color);
             }
         }
+
+        &.linkbox-icon {
+            width: 3rem;
+            height: 3rem;
+            justify-content: center;
+        }
     }
 
     .section-header {
@@ -103,6 +94,7 @@
         height: 1px;
         border-bottom: 0 none;
         overflow: hidden;
+        margin-top: 5rem;
     }
 
     &.layout-news-active {
@@ -110,13 +102,6 @@
     }
 }
 
-.text-secondary {
-    color: var(--text-secondary-color);
-}
-
-.hover\:surface-hover:hover {
-    background-color: var(--hover-background);
-}
 
 .landing-footer-container {
     max-width: 1250px !important;
@@ -176,4 +161,21 @@
     100% {
         transform: translateX(calc(-100% - 3rem));
     }
+}
+
+@keyframes clippath {
+    0%,
+    100% {
+        clip-path: inset(0 0 98% 0);
+    }
+    
+    25% {
+        clip-path: inset(0 98% 0 0);
+    }
+    50% {
+        clip-path: inset(98% 0 0 0);
+    }
+    75% {
+        clip-path: inset(0 0 0 98%);
+    }
 }
\ No newline at end of file
diff --git a/components/landing/BlockSection.vue b/components/landing/BlockSection.vue
index 7e54a12df..6afe715cb 100644
--- a/components/landing/BlockSection.vue
+++ b/components/landing/BlockSection.vue
@@ -1,14 +1,14 @@
 <template>
     <section id="blocks-section" class="landing-blocks pt-20 overflow-hidden">
-        <div class="section-header">Blocks</div>
-        <p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
-        <div class="flex justify-center mt-6">
-            <a href="https://blocks.primevue.org" class="font-semibold py-4 px-6 rounded flex items-center linkbox active z-20">
+        <div class="section-header relative z-30">Blocks</div>
+        <p class="section-detail relative z-30">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
+        <div class="flex justify-center mt-6 relative z-30">
+            <a href="https://blocks.primevue.org" class="linkbox linkbox-primary">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
-        <section :class="['prime-blocks flex justify-center items-center flex-col z-1', { 'blocks-animation': setAnimation }]">
+        <section :class="['prime-blocks flex justify-center items-center flex-col', { 'blocks-animation': setAnimation }]">
             <div class="flex">
                 <div class="prime-block flex self-stretch p-1">
                     <div class="block-sidebar w-1/12 p-4">
diff --git a/components/landing/FeaturesSection.vue b/components/landing/FeaturesSection.vue
index 611c1a995..81461781f 100644
--- a/components/landing/FeaturesSection.vue
+++ b/components/landing/FeaturesSection.vue
@@ -9,56 +9,56 @@
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">80+ UI Components</div>
-                            <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Styled or Unstyled</div>
-                            <p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Community</div>
-                            <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Accessibility</div>
-                            <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Enterprise Support</div>
-                            <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Mobile</div>
-                            <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">First class support for responsive design led by touch optimized elements.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Blocks</div>
-                            <p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
                         <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Typescript</div>
-                            <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
+                            <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
                         </div>
                     </div>
                 </div>
diff --git a/components/landing/FooterSection.vue b/components/landing/FooterSection.vue
index 1bb499f33..eb292fb99 100644
--- a/components/landing/FooterSection.vue
+++ b/components/landing/FooterSection.vue
@@ -6,10 +6,12 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-8">General</li>
                         <li class="mb-6">
-                            <PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Get Started</PrimeVueNuxtLink>
+                            <PrimeVueNuxtLink to="/setup" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Get Started</PrimeVueNuxtLink>
                         </li>
                         <li class="mb-6">
-                            <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
+                            <a href="https://github.com/primefaces/primevue-examples" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer"
+                                >Examples</a
+                            >
                         </li>
                     </ul>
                 </div>
@@ -17,13 +19,13 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-8">Support</li>
                         <li class="mb-6">
-                            <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
+                            <a href="https://github.com/orgs/primefaces/discussions" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
                         </li>
                         <li class="mb-6">
-                            <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
+                            <a href="https://discord.gg/gzKFYnpmCY" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
                         </li>
                         <li class="mb-6">
-                            <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">PRO Support</PrimeVueNuxtLink>
+                            <PrimeVueNuxtLink to="/support" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">PRO Support</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
@@ -31,10 +33,10 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-8 lg:mt-0 mb-8">Theming</li>
                         <li class="mb-6">
-                            <PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Styled Mode</PrimeVueNuxtLink>
+                            <PrimeVueNuxtLink to="/theming/styled" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Styled Mode</PrimeVueNuxtLink>
                         </li>
                         <li class="mb-6">
-                            <PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink>
+                            <PrimeVueNuxtLink to="/theming/unstyled" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
@@ -42,33 +44,33 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-8 lg:mt-0 mb-8">Resources</li>
                         <li class="mb-6">
-                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer"
+                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer"
                                 >PrimeTV</a
                             >
                         </li>
                         <li class="mb-6">
-                            <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a>
+                            <a href="https://www.primefaces.org/store/" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a>
                         </li>
                         <li class="mb-6">
-                            <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
+                            <a href="https://github.com/primefaces/primevue" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
                         </li>
                         <li class="mb-6">
-                            <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
+                            <a href="https://twitter.com/primevue" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
                         </li>
                         <li class="mb-6">
-                            <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
+                            <a href="https://www.primefaces.org/newsletter" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
                         </li>
                         <li class="mb-6">
-                            <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
+                            <a href="https://gear.primefaces.org/" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
                         </li>
                         <li class="mb-6">
-                            <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Contact Us</a>
+                            <a href="mailto:contact@primetek.com.tr" class="text-surface-500 dark:text-surface-400 font-medium hover:text-primary rounded transition-all duration-300">Contact Us</a>
                         </li>
                     </ul>
                 </div>
             </div>
 
-            <hr class="section-divider mt-20" />
+            <hr class="section-divider" />
 
             <div class="flex flex-wrap justify-between py-12 gap-8">
                 <span>
@@ -116,16 +118,16 @@
                     </svg>
                 </span>
                 <div class="flex items-center gap-2">
-                    <a href="https://twitter.com/primevue" class="linkbox w-12 h-12 flex items-center justify-center">
+                    <a href="https://twitter.com/primevue" class="linkbox linkbox-icon">
                         <i class="pi pi-twitter"></i>
                     </a>
-                    <a href="https://github.com/primefaces/primevue" class="linkbox w-12 h-12 flex items-center justify-center">
+                    <a href="https://github.com/primefaces/primevue" class="linkbox linkbox-icon">
                         <i class="pi pi-github"></i>
                     </a>
-                    <a href="https://discord.gg/gzKFYnpmCY" class="linkbox w-12 h-12 flex items-center justify-center">
+                    <a href="https://discord.gg/gzKFYnpmCY" class="linkbox linkbox-icon">
                         <i class="pi pi-discord"></i>
                     </a>
-                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox w-12 h-12 flex items-center justify-center">
+                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox linkbox-icon">
                         <i class="pi pi-comments"></i>
                     </a>
                 </div>
diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index 0841d68ba..6210257ea 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -7,11 +7,11 @@
                     Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
                 </p>
                 <div class="flex items-center gap-4">
-                    <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-4 px-6">
+                    <PrimeVueNuxtLink to="/setup" class="linkbox linkbox-primary">
                         <span>Get Started</span>
                         <i class="pi pi-arrow-right ml-4"></i>
                     </PrimeVueNuxtLink>
-                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-4 px-6">
+                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox">
                         <span>Give a Star</span>
                         <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
                     </a>
@@ -23,11 +23,11 @@
                         <div class="box p-6 animate-fadein animate-duration-500">
                             <div class="flex gap-2">
                                 <div class="w-24 flex-shrink-0">
-                                    <span class="text-secondary font-medium block mb-4">Amount</span>
+                                    <span class="text-surface-500 dark:text-surface-400 font-medium block mb-4">Amount</span>
                                     <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
                                 </div>
                                 <div class="flex-auto" style="width: 1%">
-                                    <span class="text-secondary font-semibold block mb-4">Beneficiary</span>
+                                    <span class="text-surface-500 dark:text-surface-400 font-semibold block mb-4">Beneficiary</span>
                                     <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
                                         <template #option="slotProps">
                                             <div class="flex items-center gap-2">
@@ -38,7 +38,7 @@
                                     </Select>
                                 </div>
                             </div>
-                            <span class="text-secondary font-medium block mt-8 mb-4">Account</span>
+                            <span class="text-surface-500 dark:text-surface-400 font-medium block mt-8 mb-4">Account</span>
                             <div class="flex flex-wrap gap-4">
                                 <div class="flex items-center">
                                     <RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" />
@@ -49,7 +49,7 @@
                                     <label for="category2" class="ml-2 font-medium">Checking</label>
                                 </div>
                             </div>
-                            <span class="text-secondary font-medium block mt-8 mb-4">Date</span>
+                            <span class="text-surface-500 dark:text-surface-400 font-medium block mt-8 mb-4">Date</span>
                             <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
                         </div>
                         <div class="box p-6 animate-fadein animate-duration-500">
@@ -77,7 +77,7 @@
                             <div class="flex items-center mb-6">
                                 <div class="flex flex-col">
                                     <span class="block font-semibold mb-1">Sneaker</span>
-                                    <span class="text-secondary text-sm">Premium Quality</span>
+                                    <span class="text-surface-500 dark:text-surface-400 text-sm">Premium Quality</span>
                                 </div>
                                 <span class="font-medium text-xl ml-auto">$990</span>
                             </div>
@@ -91,7 +91,7 @@
                                     </span>
                                     <div class="flex flex-col">
                                         <span class="font-bold mb-1">Amanda Williams</span>
-                                        <span class="text-secondary text-sm">Administrator</span>
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">Administrator</span>
                                     </div>
                                 </li>
                                 <li class="flex">
@@ -99,7 +99,7 @@
                                         <i class="pi pi-home text-xl mr-4"></i>
                                         <span class="flex flex-col">
                                             <span class="font-bold mb-1">Dashboard</span>
-                                            <span class="m-0 text-secondary text-sm">Control Panel</span>
+                                            <span class="m-0 text-surface-500 dark:text-surface-400 text-sm">Control Panel</span>
                                         </span>
                                     </a>
                                 </li>
@@ -108,7 +108,7 @@
                                         <i class="pi pi-envelope text-xl mr-4"></i>
                                         <span class="flex flex-col">
                                             <span class="font-bold mb-1">Inbox</span>
-                                            <span class="m-0 text-secondary text-sm">View Messages</span>
+                                            <span class="m-0 text-surface-500 dark:text-surface-400 text-sm">View Messages</span>
                                         </span>
                                         <Badge value="3" class="ml-auto"></Badge>
                                     </a>
@@ -245,7 +245,7 @@ export default {
         },
         setChartOptions() {
             const documentStyle = getComputedStyle(document.documentElement);
-            const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color');
+            const textColorSecondary = documentStyle.getPropertyValue('--text-surface-500 dark:text-surface-400-color');
             const surfaceBorder = documentStyle.getPropertyValue('--border-color');
 
             return {
diff --git a/components/landing/TemplateSection.vue b/components/landing/TemplateSection.vue
index 0cbe3c54f..b70cb9205 100644
--- a/components/landing/TemplateSection.vue
+++ b/components/landing/TemplateSection.vue
@@ -3,7 +3,7 @@
         <div class="section-header relative z-30">Templates</div>
         <p class="section-detail relative z-30">Professionally designed highly customizable application templates to get started in style.</p>
         <div class="flex justify-center mt-6 relative z-30">
-            <a href="https://www.primefaces.org/store" class="font-semibold py-4 px-6 rounded flex items-center linkbox active">
+            <a href="https://www.primefaces.org/store" class="linkbox linkbox-primary">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index c676ca03c..4cfa63686 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -15,7 +15,7 @@
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -63,7 +63,7 @@ export default {
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
-                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                 <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -102,7 +102,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -175,7 +175,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index 1ed2e784d..f23015b8d 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -25,7 +25,7 @@
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -61,7 +61,7 @@
                             <div class="pt-6">
                                 <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -121,7 +121,7 @@ export default {
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
-                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                 <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -157,7 +157,7 @@ export default {
                     <div class="pt-6">
                         <div class="flex flex-row justify-between items-start gap-2">
                             <div>
-                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                 <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -206,7 +206,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -242,7 +242,7 @@ export default {
                             <div class="pt-6">
                                 <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -327,7 +327,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -363,7 +363,7 @@ export default {
                             <div class="pt-6">
                                 <div class="flex flex-row justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-1">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index a609b16b5..c18136b9a 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -15,7 +15,7 @@
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -63,7 +63,7 @@ export default {
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
-                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                 <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -102,7 +102,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -175,7 +175,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index 75419d889..bb60bd381 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -18,7 +18,7 @@
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -76,7 +76,7 @@ export default {
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                             <div>
-                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                 <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                             </div>
                             <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -118,7 +118,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
@@ -215,7 +215,7 @@ export default {
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
                                     <div>
-                                        <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
                                         <div class="text-lg font-medium text-surface-900 mt-2">{{ item.name }}</div>
                                     </div>
                                     <div class="bg-surface-100 p-1" style="border-radius: 30px">
diff --git a/doc/metergroup/TemplateDoc.vue b/doc/metergroup/TemplateDoc.vue
index cc1cb3685..a0171cd3e 100644
--- a/doc/metergroup/TemplateDoc.vue
+++ b/doc/metergroup/TemplateDoc.vue
@@ -11,7 +11,7 @@
                             <template #content>
                                 <div class="flex justify-between gap-8">
                                     <div class="flex flex-col gap-1">
-                                        <span class="text-secondary text-sm">{{ val.label }}</span>
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
                                         <span class="font-bold text-lg">{{ val.value }}%</span>
                                     </div>
                                     <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
@@ -64,7 +64,7 @@ export default {
                     <template #content>
                         <div class="flex justify-between gap-8">
                             <div class="flex flex-col gap-1">
-                                <span class="text-secondary text-sm">{{ val.label }}</span>
+                                <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
                                 <span class="font-bold text-lg">{{ val.value }}%</span>
                             </div>
                             <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
@@ -105,7 +105,7 @@ export default {
                             <template #content>
                                 <div class="flex justify-between gap-8">
                                     <div class="flex flex-col gap-1">
-                                        <span class="text-secondary text-sm">{{ val.label }}</span>
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
                                         <span class="font-bold text-lg">{{ val.value }}%</span>
                                     </div>
                                     <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
@@ -163,7 +163,7 @@ export default {
                             <template #content>
                                 <div class="flex justify-between gap-8">
                                     <div class="flex flex-col gap-1">
-                                        <span class="text-secondary text-sm">{{ val.label }}</span>
+                                        <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
                                         <span class="font-bold text-lg">{{ val.value }}%</span>
                                     </div>
                                     <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
index 1c2232da4..71ef18cb1 100644
--- a/doc/orderlist/TemplateDoc.vue
+++ b/doc/orderlist/TemplateDoc.vue
@@ -10,8 +10,8 @@
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
-                            <i class="pi pi-tag text-sm text-secondary"></i>
-                            <span class="text-sm text-secondary">{{ item.category }}</span>
+                            <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">${{ item.price }}</span>
@@ -37,8 +37,8 @@ export default {
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
                 <div class="flex items-center gap-1">
-                    <i class="pi pi-tag text-sm text-secondary"></i>
-                    <span class="text-sm text-secondary">{{ item.category }}</span>
+                    <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                    <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                 </div>
             </div>
             <span class="font-bold">\${{ item.price }}</span>
@@ -56,8 +56,8 @@ export default {
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
-                            <i class="pi pi-tag text-sm text-secondary"></i>
-                            <span class="text-sm text-secondary">{{ item.category }}</span>
+                            <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">\${{ item.price }}</span>
@@ -91,8 +91,8 @@ export default {
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
-                            <i class="pi pi-tag text-sm text-secondary"></i>
-                            <span class="text-sm text-secondary">{{ item.category }}</span>
+                            <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">\${{ item.price }}</span>
diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
index 1ab272ae3..cc6b7256e 100644
--- a/doc/picklist/TemplateDoc.vue
+++ b/doc/picklist/TemplateDoc.vue
@@ -10,8 +10,8 @@
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
-                            <i class="pi pi-tag text-sm text-secondary"></i>
-                            <span class="text-sm text-secondary">{{ item.category }}</span>
+                            <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">${{ item.price }}</span>
@@ -38,8 +38,8 @@ export default {
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
                 <div class="flex items-center gap-1">
-                    <i class="pi pi-tag text-sm text-secondary"></i>
-                    <span class="text-sm text-secondary">{{ item.category }}</span>
+                    <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                    <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                 </div>
             </div>
             <span class="font-bold">\${{ item.price }}</span>
@@ -57,8 +57,8 @@ export default {
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
-                            <i class="pi pi-tag text-sm text-secondary"></i>
-                            <span class="text-sm text-secondary">{{ item.category }}</span>
+                            <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">\${{ item.price }}</span>
@@ -92,8 +92,8 @@ export default {
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
-                            <i class="pi pi-tag text-sm text-secondary"></i>
-                            <span class="text-sm text-secondary">{{ item.category }}</span>
+                            <i class="pi pi-tag text-sm text-surface-500 dark:text-surface-400"></i>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">{{ item.category }}</span>
                         </div>
                     </div>
                     <span class="font-bold">\${{ item.price }}</span>
diff --git a/doc/theming/styled/ColorsDoc.vue b/doc/theming/styled/ColorsDoc.vue
index c76884e3c..fa5545897 100644
--- a/doc/theming/styled/ColorsDoc.vue
+++ b/doc/theming/styled/ColorsDoc.vue
@@ -13,7 +13,7 @@
                 <div class="flex gap-4 flex-auto flex-col sm:flex-row">
                     <div v-for="(shade, j) of shades" :key="shade" class="flex flex-col items-center gap-1 flex-1">
                         <div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
-                        <span class="text-sm text-secondary font-medium">{{ shades[j] }}</span>
+                        <span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
                     </div>
                 </div>
             </li>
diff --git a/doc/virtualscroller/BasicDoc.vue b/doc/virtualscroller/BasicDoc.vue
index 029e4fbe1..a144d1bfa 100644
--- a/doc/virtualscroller/BasicDoc.vue
+++ b/doc/virtualscroller/BasicDoc.vue
@@ -8,7 +8,7 @@
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -24,7 +24,7 @@ export default {
                 basic: `
 <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
@@ -33,7 +33,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -57,7 +57,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
diff --git a/doc/virtualscroller/DelayDoc.vue b/doc/virtualscroller/DelayDoc.vue
index 1cefb11e1..70921ce5d 100644
--- a/doc/virtualscroller/DelayDoc.vue
+++ b/doc/virtualscroller/DelayDoc.vue
@@ -7,7 +7,7 @@
             <span class="font-bold block mb-2">No Delay</span>
             <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -15,7 +15,7 @@
             <span class="font-bold block mb-2">150ms</span>
             <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -23,7 +23,7 @@
             <span class="font-bold block mb-2">500ms</span>
             <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -40,19 +40,19 @@ export default {
                 basic: `
 <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 
 <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 
 <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
@@ -63,7 +63,7 @@ export default {
             <span class="font-bold block mb-2">No Delay</span>
             <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -71,7 +71,7 @@ export default {
             <span class="font-bold block mb-2">150ms</span>
             <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -79,7 +79,7 @@ export default {
             <span class="font-bold block mb-2">500ms</span>
             <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -106,7 +106,7 @@ export default {
             <span class="font-bold block mb-2">No Delay</span>
             <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -114,7 +114,7 @@ export default {
             <span class="font-bold block mb-2">150ms</span>
             <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -122,7 +122,7 @@ export default {
             <span class="font-bold block mb-2">500ms</span>
             <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
diff --git a/doc/virtualscroller/GridDoc.vue b/doc/virtualscroller/GridDoc.vue
index c1dea1d48..8255f56d6 100644
--- a/doc/virtualscroller/GridDoc.vue
+++ b/doc/virtualscroller/GridDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
                     <template v-for="(el, index) of item" :key="index">
                         <div style="width: 100px">{{ el }}</div>
                     </template>
@@ -25,7 +25,7 @@ export default {
                 basic: `
 <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
             <template v-for="(el, index) of item" :key="index">
                 <div style="width: 100px">{{ el }}</div>
             </template>
@@ -38,7 +38,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
                     <template v-for="(el, index) of item" :key="index">
                         <div style="width: 100px">{{ el }}</div>
                     </template>
@@ -66,7 +66,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
                     <template v-for="(el, index) of item" :key="index">
                         <div style="width: 100px">{{ el }}</div>
                     </template>
diff --git a/doc/virtualscroller/HorizontalDoc.vue b/doc/virtualscroller/HorizontalDoc.vue
index a2a46dbf2..1d09d6eff 100644
--- a/doc/virtualscroller/HorizontalDoc.vue
+++ b/doc/virtualscroller/HorizontalDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -21,7 +21,7 @@ export default {
                 basic: `
 <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
@@ -30,7 +30,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -54,7 +54,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
diff --git a/doc/virtualscroller/LazyDoc.vue b/doc/virtualscroller/LazyDoc.vue
index e3c3df15d..feb6d4815 100644
--- a/doc/virtualscroller/LazyDoc.vue
+++ b/doc/virtualscroller/LazyDoc.vue
@@ -8,7 +8,7 @@
     <div class="card flex justify-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -26,7 +26,7 @@ export default {
                 basic: `
 <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 `,
@@ -35,7 +35,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
@@ -84,7 +84,7 @@ export default {
     <div class="card flex justify-center">
         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
             <template v-slot:item="{ item, options }">
-                <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
diff --git a/doc/virtualscroller/LoadingDoc.vue b/doc/virtualscroller/LoadingDoc.vue
index 16b5e87e4..f8df4d6b5 100644
--- a/doc/virtualscroller/LoadingDoc.vue
+++ b/doc/virtualscroller/LoadingDoc.vue
@@ -10,7 +10,7 @@
             <span class="font-bold block mb-2">Modal</span>
             <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -18,10 +18,10 @@
             <span class="font-bold block mb-2">Skeleton</span>
             <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
                 <template v-slot:loader="{ options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
                         <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                     </div>
                 </template>
@@ -40,16 +40,16 @@ export default {
                 basic: `
 <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
 </VirtualScroller>
 
 <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
     <template v-slot:item="{ item, options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
     </template>
     <template v-slot:loader="{ options }">
-        <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+        <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
             <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
         </div>
     </template>
@@ -62,7 +62,7 @@ export default {
             <span class="font-bold block mb-2">Modal</span>
             <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -70,10 +70,10 @@ export default {
             <span class="font-bold block mb-2">Skeleton</span>
             <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
                 <template v-slot:loader="{ options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
                         <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                     </div>
                 </template>
@@ -102,7 +102,7 @@ export default {
             <span class="font-bold block mb-2">Modal</span>
             <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
             </VirtualScroller>
         </div>
@@ -110,10 +110,10 @@ export default {
             <span class="font-bold block mb-2">Skeleton</span>
             <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
                 <template v-slot:item="{ item, options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
                 </template>
                 <template v-slot:loader="{ options }">
-                    <div :class="['flex items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
                         <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                     </div>
                 </template>
diff --git a/pages/support/index.vue b/pages/support/index.vue
index df3323b19..cf5fb7ecd 100755
--- a/pages/support/index.vue
+++ b/pages/support/index.vue
@@ -25,14 +25,9 @@
             <div class="flex flex-wrap items-center justify-between gap-4">
                 <div>
                     <div class="text-2xl text-surface-900 font-semibold mb-4">Enterprise Support</div>
-                    <p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800">1 Year Subscription</p>
+                    <p class="m-0 leading-normal mb-8 text-surface-500 dark:text-surface-400 text-lg text-surface-800">1 Year Subscription</p>
                 </div>
-                <a
-                    href="mailto:contact@primetek.com.tr"
-                    class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"
-                >
-                    Get a Quote
-                </a>
+                <a href="mailto:contact@primetek.com.tr" class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"> Get a Quote </a>
             </div>
             <div class="flex flex-wrap -mt-4 gap-4 text-surface-800">
                 <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
@@ -86,7 +81,7 @@
 
         <div class="card mb-8">
             <div class="text-2xl text-surface-900 font-semibold mb-4">Enhancement Credits</div>
-            <p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800">
+            <p class="m-0 leading-normal mb-8 text-surface-500 dark:text-surface-400 text-lg text-surface-800">
                 New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have an enhancement request, initially our team will review your requirement to verify
                 if it is suitable to be included in the open source core library. We cannot guarantee that all requests can be accepted depending on the project roadmap, workload at the time and type of the requirement. After successful verification,
                 we prepare an initial estimate in terms of credits and once this estimate is confirmed by you, implementation will be delivered by our team within an estimated timeframe.
@@ -95,15 +90,15 @@
             <div class="flex flex-col md:flex-row gap-8">
                 <div class="flex-1">
                     <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Components</div>
-                    <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Brand new components you need that are not already available in the existing UI suite.</p>
+                    <p class="m-0 leading-normal mb-4 text-surface-500 dark:text-surface-400 text-lg text-surface-800">Brand new components you need that are not already available in the existing UI suite.</p>
                 </div>
                 <div class="flex-1">
                     <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Features</div>
-                    <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Enhancements to the components you need such as new properties, events and templating.</p>
+                    <p class="m-0 leading-normal mb-4 text-surface-500 dark:text-surface-400 text-lg text-surface-800">Enhancements to the components you need such as new properties, events and templating.</p>
                 </div>
                 <div class="flex-1">
                     <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">UX Customization</div>
-                    <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Behavioral changes to the existing components.</p>
+                    <p class="m-0 leading-normal mb-4 text-surface-500 dark:text-surface-400 text-lg text-surface-800">Behavioral changes to the existing components.</p>
                 </div>
             </div>
         </div>