From 10fb57cc1af45badca1fc4e9f91562fffc7ac0c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 10 Jul 2023 17:42:43 +0300
Subject: [PATCH] Convert p-link to px-link

---
 assets/styles/layout/_core.scss   | 23 +++++++++
 assets/styles/layout/_doc.scss    |  4 +-
 components/doc/DocSectionNav.vue  |  4 +-
 layouts/AppConfigurator.vue       | 80 +++++++++++++++----------------
 layouts/AppMenuItem.vue           |  2 +-
 layouts/AppTopBar.vue             |  8 ++--
 pages/landing/DesignerSection.vue |  8 ++--
 pages/landing/ThemeSection.vue    |  2 +-
 8 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index e35431d8c..ba0147d94 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -73,4 +73,27 @@ input[type="number"] {
 .p-toast.p-toast-top-right,
 .p-toast.p-toast-top-left {
     top: 7rem;
+}
+
+.px-link {
+    font-size: 1rem;
+    font-family: var(--font-family);
+    border-radius: var(--border-radius);
+    text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.px-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: var(--focus-ring);
+}
+
+.px-link:disabled {
+	cursor: default;
 }
\ No newline at end of file
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index f9f1d9950..24186eb9e 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -160,7 +160,7 @@
         > .navbar-item-content {
             display: flex;
 
-            .p-link {
+            .px-link {
                 padding: 0.25rem 1rem 0.25rem 1rem;
                 color: var(--text-color);
                 white-space: nowrap;
@@ -178,7 +178,7 @@
             > .navbar-item-content {
                 border-color: var(--primary-color);
 
-                .p-link {
+                .px-link {
                     font-weight: 700;
                     color: var(--primary-color);
                 }
diff --git a/components/doc/DocSectionNav.vue b/components/doc/DocSectionNav.vue
index 0f0b8a57f..2683171f3 100644
--- a/components/doc/DocSectionNav.vue
+++ b/components/doc/DocSectionNav.vue
@@ -2,14 +2,14 @@
     <ul ref="nav" class="doc-section-nav">
         <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
             <div class="navbar-item-content">
-                <button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
+                <button class="px-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
             </div>
 
             <template v-if="doc.children">
                 <ul>
                     <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
                         <div class="navbar-item-content">
-                            <button class="p-link" @click="onButtonClick(child)">
+                            <button class="px-link" @click="onButtonClick(child)">
                                 {{ child.label }}
                             </button>
                         </div>
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index d6deeed04..a732630b3 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -35,25 +35,25 @@
                 <h4>Bootstrap</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
+                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
+                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Purple</span>
@@ -63,25 +63,25 @@
                 <h4>Material Design</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
+                        <button class="px-link h-3rem" @click="changeTheme('md-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('md-light-deeppurple')">
+                        <button class="px-link h-3rem" @click="changeTheme('md-light-deeppurple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('md-dark-purple', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('md-dark-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
@@ -91,25 +91,25 @@
                 <h4>Material Design Compact</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
+                        <button class="px-link h-3rem" @click="changeTheme('md-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
+                        <button class="px-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Deep Purple</span>
@@ -119,7 +119,7 @@
                 <h4>Tailwind</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('tailwind-light')">
+                        <button class="px-link h-3rem" @click="changeTheme('tailwind-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Tailwind Light</span>
@@ -129,7 +129,7 @@
                 <h4>Fluent UI</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('fluent-light')">
+                        <button class="px-link h-3rem" @click="changeTheme('fluent-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Blue</span>
@@ -139,49 +139,49 @@
                 <h4>PrimeOne Design</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-light-indigo')">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-light-indigo')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-light-blue')">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-light-blue')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-light-purple')">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-light-purple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-light-teal')">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-light-teal')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Teal</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Indigo</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Lara Teal</span>
@@ -191,37 +191,37 @@
                 <h4>Misc</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('soho-light')">
+                        <button class="px-link h-3rem" @click="changeTheme('soho-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Soho Light</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('soho-dark', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('soho-dark', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Soho Dark</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('viva-light')">
+                        <button class="px-link h-3rem" @click="changeTheme('viva-light')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Viva Light</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('viva-dark', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('viva-dark', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Viva Dark</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('mira')">
+                        <button class="px-link h-3rem" @click="changeTheme('mira')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Mira</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('nano')">
+                        <button class="px-link h-3rem" @click="changeTheme('nano')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Nano</span>
@@ -231,73 +231,73 @@
                 <h4>PrimeOne Design - Legacy</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('saga-blue')">
+                        <button class="px-link h-3rem" @click="changeTheme('saga-blue')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-blue.png" alt="Saga Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('saga-green')">
+                        <button class="px-link h-3rem" @click="changeTheme('saga-green')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Green</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('saga-orange')">
+                        <button class="px-link h-3rem" @click="changeTheme('saga-orange')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-orange.png" alt="Saga Orange" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Orange</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('saga-purple')">
+                        <button class="px-link h-3rem" @click="changeTheme('saga-purple')">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/saga-purple.png" alt="Saga Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Saga Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('vela-blue', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('vela-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-blue.png" alt="Vela Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('vela-green', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('vela-green', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-green.png" alt="Vela Green" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Green</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('vela-orange', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('vela-orange', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-orange.png" alt="Vela Orange" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Orange</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('vela-purple', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('vela-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/vela-purple.png" alt="Vela Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Vela Purple</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('arya-blue', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('arya-blue', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-blue.png" alt="Arya Blue" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Blue</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('arya-green', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('arya-green', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-green.png" alt="Arya Green" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Green</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('arya-orange', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('arya-orange', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-orange.png" alt="Arya Orange" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Orange</span>
                     </div>
                     <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="p-link h-3rem" @click="changeTheme('arya-purple', true)">
+                        <button class="px-link h-3rem" @click="changeTheme('arya-purple', true)">
                             <img src="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" class="w-3rem border-round" />
                         </button>
                         <span class="white-space-nowrap">Arya Purple</span>
diff --git a/layouts/AppMenuItem.vue b/layouts/AppMenuItem.vue
index 3b6b455e2..d6763e849 100644
--- a/layouts/AppMenuItem.vue
+++ b/layouts/AppMenuItem.vue
@@ -1,6 +1,6 @@
 <template>
     <li v-for="(menuitem, index) in menu" :key="`_root${index}`">
-        <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="p-link">
+        <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="px-link">
             <div class="menu-icon">
                 <i :class="menuitem.icon"></i>
             </div>
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index 039515a7c..743420b24 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -1,7 +1,7 @@
 <template>
     <div :ref="containerRef" class="layout-topbar">
         <div class="layout-topbar-inner">
-            <button type="button" class="p-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
+            <button type="button" class="px-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
                 <i class="pi pi-bars"></i>
             </button>
 
@@ -11,13 +11,13 @@
                 <li>
                     <a
                         href="https://github.com/primefaces/primevue"
-                        class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+                        class="flex px-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
                     >
                         <i class="pi pi-github text-700"></i>
                     </a>
                 </li>
                 <li>
-                    <a href="https://discord.gg/gzKFYnpmCY" class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
+                    <a href="https://discord.gg/gzKFYnpmCY" class="flex px-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
                         <i class="pi pi-discord text-700"></i>
                     </a>
                 </li>
@@ -31,7 +31,7 @@
                     <button
                         v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
                         type="button"
-                        class="p-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
+                        class="px-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
                     >
                         <span class="text-900"> {{ versions[0].version }}</span>
                         <span class="ml-2 pi pi-angle-down text-600"></span>
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 923ebb7f5..b36844b53 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -11,10 +11,10 @@
                     <div class="p-fluid">
                         <span class="font-semibold block mb-3">Primary</span>
                         <div>
-                            <button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
-                            <button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
-                            <button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
-                            <button type="button" class="border-circle w-2rem h-2rem p-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
+                            <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
+                            <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
+                            <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
+                            <button type="button" class="border-circle w-2rem h-2rem px-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
                         </div>
 
                         <span class="font-semibold block mt-4 mb-3">Font</span>
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 1f4b2c526..57bd1f08e 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -6,7 +6,7 @@
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
-            <a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
+            <a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
         </div>
         <div
             class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"