From 45c4fe79bba7f01ecc902eaf92f4d666e5c64fcb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 May 2024 17:02:20 +0300
Subject: [PATCH] Fixed #5727 - Removed utility classes

---
 .../styles/layout/variables/main/_dark.scss   |   4 +-
 .../styles/layout/variables/main/_light.scss  |   4 +-
 .../lib/badgedirective/BadgeDirective.spec.js |   2 +-
 components/lib/base/style/BaseStyle.js        | 119 ++++--------------
 components/lib/blockui/BlockUI.vue            |   4 +-
 components/lib/blockui/style/BlockUIStyle.js  |   4 +-
 .../lib/datatable/style/DataTableStyle.js     |   2 +-
 components/lib/dialog/Dialog.vue              |   2 +-
 components/lib/dialog/style/DialogStyle.js    |   2 +-
 components/lib/drawer/Drawer.vue              |   2 +-
 components/lib/drawer/style/DrawerStyle.js    |   2 +-
 components/lib/galleria/Galleria.vue          |   2 +-
 .../lib/galleria/style/GalleriaStyle.js       |   2 +-
 components/lib/image/Image.vue                |   2 +-
 components/lib/image/style/ImageStyle.js      |   2 +-
 components/lib/themes/aura/index.js           |   1 +
 components/lib/themes/lara/index.js           |   1 +
 components/lib/timeline/Timeline.spec.js      |   3 +-
 components/lib/tree/style/TreeStyle.js        |   2 +-
 .../lib/treetable/style/TreeTableStyle.js     |   2 +-
 .../lib/virtualscroller/VirtualScroller.vue   |   2 +-
 .../style/VirtualScrollerStyle.js             |   2 +-
 doc/datatable/samples/ProductsDoc.vue         |   6 +-
 doc/dialog/BasicDoc.vue                       |   8 +-
 doc/dialog/PositionDoc.vue                    |   8 +-
 doc/dialog/TemplateDoc.vue                    |   8 +-
 doc/dialog/WithoutModalDoc.vue                |   8 +-
 doc/guides/accessibility/WAIAriaDoc.vue       |   4 +-
 doc/inlinemessage/FormDoc.vue                 |  24 ++--
 doc/menu/TemplateDoc.vue                      |  18 +--
 doc/panel/TemplateDoc.vue                     |   8 +-
 doc/timeline/OppositeDoc.vue                  |   8 +-
 32 files changed, 93 insertions(+), 175 deletions(-)

diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index 6ae4998ba..9afd995f5 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -3,8 +3,8 @@
     --primary-color: var(--p-primary-color);
     --primary-inverse-color:var(--p-primary-inverse-color);
     --primary-hover-color: var(--p-primary-hover-color);
-    --text-color: var(--p-surface-0);
-    --text-secondary-color: var(--p-surface-400);
+    --text-color: var(--p-text-color);
+    --text-secondary-color: var(--p-text-muted-color);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
     --topbar-sticky-background:rgba(0,0,0,.3);
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index 58ab5eecb..612b0f41a 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -3,8 +3,8 @@
     --primary-color: var(--p-primary-color);
     --primary-inverse-color:var(--p-primary-inverse-color);
     --primary-hover-color: var(--p-primary-hover-color);
-    --text-color: var(--p-surface-700);
-    --text-secondary-color: var(--p-surface-500);
+    --text-color: var(--p-text-color);
+    --text-secondary-color: var(--p-text-muted-color);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
     --glow-blend: hard-light, multiply;
     --topbar-sticky-background:rgba(255,255,255,.7);
diff --git a/components/lib/badgedirective/BadgeDirective.spec.js b/components/lib/badgedirective/BadgeDirective.spec.js
index c5211a0db..a2a7a65fa 100644
--- a/components/lib/badgedirective/BadgeDirective.spec.js
+++ b/components/lib/badgedirective/BadgeDirective.spec.js
@@ -4,7 +4,7 @@ import BadgeDirective from './BadgeDirective';
 describe('directive badge should exist', () => {
     it('positioned badge', () => {
         const wrapper = mount({
-            template: '<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>',
+            template: '<i class="pi pi-bell mr-4" style="font-size: 2rem" v-badge="2"></i>',
             directives: {
                 badge: BadgeDirective
             }
diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 72bf23104..5f812832a 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -3,72 +3,14 @@ import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
 const theme = ({ dt }) => `
-.p-component,
-.p-component * {
+* {
     box-sizing: border-box;
 }
 
-.p-hidden-space {
-    visibility: hidden;
-}
-
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-
-.p-disabled,
-.p-disabled * {
-    cursor: default;
-    pointer-events: none;
-    user-select: none;
-}
-
-.p-component-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    color: ${dt('mask.color')};
-}
-
 .p-unselectable-text {
     user-select: none;
 }
 
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    word-wrap: normal;
-}
-
-.p-link {
-    text-align: left;
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    border: none;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-link:disabled {
-    cursor: default;
-}
-
 /* Non vue overlay animations */
 .p-connected-overlay {
     opacity: 0;
@@ -128,31 +70,16 @@ const theme = ({ dt }) => `
     transition: max-height 1s ease-in-out;
 }
 
-* {
-    box-sizing: border-box;
-}
-
-.p-component {
-    font-size: 1rem;
-    font-weight: normal;
-}
-
-.p-component-overlay {
-    background-color: rgba(0, 0, 0, 0.4);
-    transition-duration: ${dt('transition.duration')};
+.p-disabled,
+.p-disabled * {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
 }
 
 .p-disabled,
 .p-component:disabled {
-    opacity: 0.6;
-}
-
-.p-error {
-    color: #f87171;
-}
-
-.p-text-secondary {
-    color: ${dt('text.muted.color')};
+    opacity: ${dt('disabled.opacity')};
 }
 
 .pi {
@@ -164,28 +91,26 @@ const theme = ({ dt }) => `
     height: ${dt('icon.size')};
 }
 
-.p-link {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-size: 1rem;
-    border-radius: 6px;
-    outline-color: transparent;
-}
-.p-link:focus-visible {
-    outline: 1px solid ${dt('focus.ring.color')};
-    outline-offset: 2px;
-    box-shadow: none;
+.p-overlay-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: ${dt('transition.duration')};
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: ${dt('mask.color')};
 }
 
-.p-component-overlay-enter {
-    animation: p-component-overlay-enter-animation 150ms forwards;
+.p-overlay-mask-enter {
+    animation: p-overlay-mask-enter-animation 150ms forwards;
 }
 
-.p-component-overlay-leave {
-    animation: p-component-overlay-leave-animation 150ms forwards;
+.p-overlay-mask-leave {
+    animation: p-overlay-mask-leave-animation 150ms forwards;
 }
 
-@keyframes p-component-overlay-enter-animation {
+@keyframes p-overlay-mask-enter-animation {
     from {
         background: transparent;
     }
@@ -193,7 +118,7 @@ const theme = ({ dt }) => `
         background: ${dt('mask.background')};
     }
 }
-@keyframes p-component-overlay-leave-animation {
+@keyframes p-overlay-mask-leave-animation {
     from {
         background: ${dt('mask.background')};
     }
diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue
index bdf67c929..3239d1475 100755
--- a/components/lib/blockui/BlockUI.vue
+++ b/components/lib/blockui/BlockUI.vue
@@ -32,7 +32,7 @@ export default {
     },
     methods: {
         block() {
-            let styleClass = 'p-blockui-mask p-component-overlay p-component-overlay-enter';
+            let styleClass = 'p-blockui-mask p-overlay-mask p-overlay-mask-enter';
 
             if (this.fullScreen) {
                 styleClass += ' p-blockui-mask-document';
@@ -75,7 +75,7 @@ export default {
             this.$emit('block');
         },
         unblock() {
-            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
 
             if (DomHandler.hasCSSAnimation(this.mask) > 0) {
                 this.mask.addEventListener('animationend', () => {
diff --git a/components/lib/blockui/style/BlockUIStyle.js b/components/lib/blockui/style/BlockUIStyle.js
index 9f9d9027e..794fe32be 100644
--- a/components/lib/blockui/style/BlockUIStyle.js
+++ b/components/lib/blockui/style/BlockUIStyle.js
@@ -9,11 +9,11 @@ const theme = ({ dt }) => `
     border-radius: ${dt('blockui.border.radius')};
 }
 
-.p-blockui-mask.p-component-overlay {
+.p-blockui-mask.p-overlay-mask {
     position: absolute;
 }
 
-.p-blockui-mask-document.p-component-overlay {
+.p-blockui-mask-document.p-overlay-mask {
     position: fixed;
 }
 `;
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 6a5d0e699..02922f65a 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -589,7 +589,7 @@ const classes = {
             'p-datatable-lg': props.size === 'large'
         }
     ],
-    mask: 'p-datatable-mask p-component-overlay',
+    mask: 'p-datatable-mask p-overlay-mask',
     loadingIcon: 'p-datatable-loading-icon',
     header: 'p-datatable-header',
     pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index cb039f8c1..e7e5d0fd7 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -154,7 +154,7 @@ export default {
         },
         onBeforeLeave() {
             if (this.modal) {
-                !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
             }
         },
         onLeave() {
diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js
index 75f3a8ea8..3181a00ad 100644
--- a/components/lib/dialog/style/DialogStyle.js
+++ b/components/lib/dialog/style/DialogStyle.js
@@ -158,7 +158,7 @@ const classes = {
         return [
             'p-dialog-mask',
             {
-                'p-component-overlay p-component-overlay-enter': props.modal
+                'p-overlay-mask p-overlay-mask-enter': props.modal
             },
             pos ? `p-dialog-${pos}` : ''
         ];
diff --git a/components/lib/drawer/Drawer.vue b/components/lib/drawer/Drawer.vue
index 5d1c3629b..b69053033 100755
--- a/components/lib/drawer/Drawer.vue
+++ b/components/lib/drawer/Drawer.vue
@@ -100,7 +100,7 @@ export default {
         },
         onBeforeLeave() {
             if (this.modal) {
-                !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
             }
         },
         onLeave() {
diff --git a/components/lib/drawer/style/DrawerStyle.js b/components/lib/drawer/style/DrawerStyle.js
index abf0194ee..7162f3fb2 100644
--- a/components/lib/drawer/style/DrawerStyle.js
+++ b/components/lib/drawer/style/DrawerStyle.js
@@ -136,7 +136,7 @@ const classes = {
         return [
             'p-drawer-mask',
             {
-                'p-component-overlay p-component-overlay-enter': props.modal,
+                'p-overlay-mask p-overlay-mask-enter': props.modal,
                 'p-drawer-open': instance.containerVisible,
                 'p-drawer-full': instance.fullScreen
             },
diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue
index b04839093..e6e43deaf 100755
--- a/components/lib/galleria/Galleria.vue
+++ b/components/lib/galleria/Galleria.vue
@@ -55,7 +55,7 @@ export default {
             this.focus();
         },
         onBeforeLeave() {
-            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
         },
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js
index 64d91b693..74f53cdb4 100644
--- a/components/lib/galleria/style/GalleriaStyle.js
+++ b/components/lib/galleria/style/GalleriaStyle.js
@@ -415,7 +415,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    mask: 'p-galleria-mask p-component-overlay p-component-overlay-enter',
+    mask: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
     root: ({ instance }) => {
         const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
         const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index b3bd471f9..b84c7d3d3 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -158,7 +158,7 @@ export default {
             this.$emit('show');
         },
         onBeforeLeave() {
-            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+            !this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
         },
         onLeave() {
             DomHandler.unblockBodyScroll();
diff --git a/components/lib/image/style/ImageStyle.js b/components/lib/image/style/ImageStyle.js
index 6c65fea51..ffa025684 100644
--- a/components/lib/image/style/ImageStyle.js
+++ b/components/lib/image/style/ImageStyle.js
@@ -131,7 +131,7 @@ const classes = {
     ],
     previewMask: 'p-image-preview-mask',
     previewIcon: 'p-image-preview-icon',
-    mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
+    mask: 'p-image-mask p-overlay-mask p-overlay-mask-enter',
     toolbar: 'p-image-toolbar',
     rotateRightButton: 'p-image-action p-image-rotate-right-button',
     rotateLeftButton: 'p-image-action p-image-rotate-left-button',
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index 75a2897db..c76443625 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -127,6 +127,7 @@ export default {
             offset: '2px',
             shadow: 'none'
         },
+        disabledOpacity: '0.6',
         iconSize: '1rem',
         anchorGutter: '2px',
         primary: {
diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js
index ee5a2b41f..3236747fd 100644
--- a/components/lib/themes/lara/index.js
+++ b/components/lib/themes/lara/index.js
@@ -126,6 +126,7 @@ export default {
             color: 'transparent',
             offset: '0'
         },
+        disabledOpacity: '0.6',
         iconSize: '1rem',
         anchorGutter: '2px',
         primary: {
diff --git a/components/lib/timeline/Timeline.spec.js b/components/lib/timeline/Timeline.spec.js
index d8e99679b..722c2c85b 100644
--- a/components/lib/timeline/Timeline.spec.js
+++ b/components/lib/timeline/Timeline.spec.js
@@ -52,7 +52,7 @@ describe('customized timeline', () => {
             slots: {
                 opposite: `
                     <template #opposite="slotProps">
-                        <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                        <small>{{slotProps.item.date}}</small>
                     </template>
                 `,
                 marker: `
@@ -77,7 +77,6 @@ describe('customized timeline', () => {
     it('should have templating', () => {
         const firstItem = wrapper.findAll('.p-timeline-event')[0];
 
-        expect(firstItem.find('.p-text-secondary').text()).toBe('15/10/2020 10:30');
         expect(firstItem.find('.custom-marker').attributes().style.backgroundColor).not.toBe('');
     });
 });
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index f29761a5b..826b159a4 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@@ -160,7 +160,7 @@ const classes = {
             'p-tree-flex-scrollable': props.scrollHeight === 'flex'
         }
     ],
-    mask: 'p-tree-mask p-component-overlay',
+    mask: 'p-tree-mask p-overlay-mask',
     loadingIcon: 'p-tree-loading-icon',
     pcFilterInput: 'p-tree-filter-input',
     wrapper: 'p-tree-root', //TODO: discuss
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index bd35e7aa3..6a78fcf26 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -437,7 +437,7 @@ const classes = {
         }
     ],
     loading: 'p-treetable-loading', //TODO: required?
-    mask: 'p-treetable-mask p-component-overlay',
+    mask: 'p-treetable-mask p-overlay-mask',
     loadingIcon: 'p-treetable-loading-icon',
     header: 'p-treetable-header',
     paginator: ({ position }) => 'p-treetable-paginator-' + position,
diff --git a/components/lib/virtualscroller/VirtualScroller.vue b/components/lib/virtualscroller/VirtualScroller.vue
index 22ac43afd..afe06705d 100644
--- a/components/lib/virtualscroller/VirtualScroller.vue
+++ b/components/lib/virtualscroller/VirtualScroller.vue
@@ -657,7 +657,7 @@ export default {
             return [
                 'p-virtualscroller-loader',
                 {
-                    'p-component-overlay': !this.$slots.loader
+                    'p-overlay-mask': !this.$slots.loader
                 }
             ];
         },
diff --git a/components/lib/virtualscroller/style/VirtualScrollerStyle.js b/components/lib/virtualscroller/style/VirtualScrollerStyle.js
index e14b74b5a..6362e0ca3 100644
--- a/components/lib/virtualscroller/style/VirtualScrollerStyle.js
+++ b/components/lib/virtualscroller/style/VirtualScrollerStyle.js
@@ -38,7 +38,7 @@ const css = `
     height: 100%;
 }
 
-.p-virtualscroller-loader.p-component-overlay {
+.p-virtualscroller-loader.p-overlay-mask {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 47bccc6a4..580422936 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -79,7 +79,7 @@
         <div class="field">
             <label for="name">Name</label>
             <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
-            <small v-if="submitted && !product.name" class="p-error">Name is required.</small>
+            <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
         </div>
         <div class="field">
             <label for="description">Description</label>
@@ -318,7 +318,7 @@ export default {
             <div class="field">
                 <label for="name">Name</label>
                 <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
-                <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
+                <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
             </div>
             <div class="field">
                 <label for="description">Description</label>
@@ -609,7 +609,7 @@ export default {
             <div class="field">
                 <label for="name">Name</label>
                 <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
-                <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
+                <small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
             </div>
             <div class="field">
                 <label for="description">Description</label>
diff --git a/doc/dialog/BasicDoc.vue b/doc/dialog/BasicDoc.vue
index 4f8559655..779dc4f28 100644
--- a/doc/dialog/BasicDoc.vue
+++ b/doc/dialog/BasicDoc.vue
@@ -6,7 +6,7 @@
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -34,7 +34,7 @@ export default {
 <Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <span class="text-color-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
         <label for="username" class="font-semibold w-6rem">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -54,7 +54,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -86,7 +86,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index 4e9d4b3df..a8e660af9 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -19,7 +19,7 @@
         </div>
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -61,7 +61,7 @@ export default {
 </div>
 
 <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <span class="text-color-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
         <label for="username" class="font-semibold w-6rem">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -95,7 +95,7 @@ export default {
         </div>
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -148,7 +148,7 @@ export default {
         </div>
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
index 227c4c8e5..0f175d50e 100644
--- a/doc/dialog/TemplateDoc.vue
+++ b/doc/dialog/TemplateDoc.vue
@@ -12,7 +12,7 @@
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -46,7 +46,7 @@ export default {
             <span class="font-bold white-space-nowrap">Amy Elsner</span>
         </div>
     </template>
-    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <span class="text-color-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
         <label for="username" class="font-semibold w-6rem">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -72,7 +72,7 @@ export default {
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -110,7 +110,7 @@ export default {
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
diff --git a/doc/dialog/WithoutModalDoc.vue b/doc/dialog/WithoutModalDoc.vue
index 6aa708f08..b6b3307c6 100644
--- a/doc/dialog/WithoutModalDoc.vue
+++ b/doc/dialog/WithoutModalDoc.vue
@@ -6,7 +6,7 @@
         <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -34,7 +34,7 @@ export default {
 <Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <span class="text-color-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
         <label for="username" class="font-semibold w-6rem">Username</label>
         <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -54,7 +54,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
@@ -86,7 +86,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
-            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <span class="text-color-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
                 <label for="username" class="font-semibold w-6rem">Username</label>
                 <InputText id="username" class="flex-auto" autocomplete="off" />
diff --git a/doc/guides/accessibility/WAIAriaDoc.vue b/doc/guides/accessibility/WAIAriaDoc.vue
index 1d1649b3b..2d6548c0c 100644
--- a/doc/guides/accessibility/WAIAriaDoc.vue
+++ b/doc/guides/accessibility/WAIAriaDoc.vue
@@ -46,14 +46,14 @@
     <div class="doc-section-description mt-3">
         <p>
             However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of
-            <i>p-sr-only</i>
+            <i>p-hidden-accessible</i>
             that hides the elements from the user but not from the screen reader.
         </p>
     </div>
     <pre v-code><code>
 &lt;label for="chkbox"&gt;Remember Me&lt;/label&gt;
 &lt;div class="fancy-checkbox" @click="toggle"&gt;
-    &lt;input class="p-sr-only" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
+    &lt;input class="p-hidden-accessible" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
         @keydown="onKeyDown(event)"&gt;
     &lt;i class="checked-icon" v-if="checked"&gt;&lt;/i&gt;
 &lt;/div&gt;
diff --git a/doc/inlinemessage/FormDoc.vue b/doc/inlinemessage/FormDoc.vue
index bbfde8c8a..3e169a021 100644
--- a/doc/inlinemessage/FormDoc.vue
+++ b/doc/inlinemessage/FormDoc.vue
@@ -4,13 +4,11 @@
     </DocSectionText>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
-            <label for="username" class="p-sr-only">Username</label>
-            <InputText id="username" placeholder="Username" invalid />
+            <InputText placeholder="Username" aria-label="username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
         <div class="flex flex-wrap align-items-center gap-2">
-            <label for="email" class="p-sr-only">email</label>
-            <InputText id="email" placeholder="Email" invalid />
+            <InputText placeholder="Email" aria-label="email" invalid />
             <InlineMessage />
         </div>
     </div>
@@ -24,13 +22,11 @@ export default {
             code: {
                 basic: `
 <div class="flex flex-wrap align-items-center mb-3 gap-2">
-    <label for="username" class="p-sr-only">Username</label>
-    <InputText id="username" placeholder="Username" invalid />
+    <InputText placeholder="Username" aria-label="username" invalid />
     <InlineMessage>Username is required</InlineMessage>
 </div>
 <div class="flex flex-wrap align-items-center gap-2">
-    <label for="email" class="p-sr-only">email</label>
-    <InputText id="email" placeholder="Email" invalid />
+    <InputText placeholder="Email" aria-label="email" invalid />
     <InlineMessage />
 </div>
 `,
@@ -38,13 +34,11 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
-            <label for="username" class="p-sr-only">Username</label>
-            <InputText id="username" placeholder="Username" invalid />
+            <InputText placeholder="Username" aria-label="username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
         <div class="flex flex-wrap align-items-center gap-2">
-            <label for="email" class="p-sr-only">email</label>
-            <InputText id="email" placeholder="Email" invalid />
+            <InputText placeholder="Email" aria-label="email" invalid />
             <InlineMessage />
         </div>
     </div>
@@ -57,13 +51,11 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
-            <label for="username" class="p-sr-only">Username</label>
-            <InputText id="username" placeholder="Username" invalid />
+            <InputText placeholder="Username" aria-label="username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
         <div class="flex flex-wrap align-items-center gap-2">
-            <label for="email" class="p-sr-only">email</label>
-            <InputText id="email" placeholder="Email" invalid />
+            <InputText placeholder="Email" aria-label="email" invalid />
             <InlineMessage />
         </div>
     </div>
diff --git a/doc/menu/TemplateDoc.vue b/doc/menu/TemplateDoc.vue
index 3ac6f54b8..0917b799d 100644
--- a/doc/menu/TemplateDoc.vue
+++ b/doc/menu/TemplateDoc.vue
@@ -34,9 +34,9 @@
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround">
+                <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-column">
+                    <span class="inline-flex flex-column align-items-start">
                         <span class="font-bold">Amy Elsner</span>
                         <span class="text-sm">Admin</span>
                     </span>
@@ -118,9 +118,9 @@ export default {
         </a>
     </template>
     <template #end>
-        <button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround">
-            <Avatar image="/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-            <span class="inline-flex flex-column">
+        <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
+            <span class="inline-flex flex-column align-items-start">
                 <span class="font-bold">Amy Elsner</span>
                 <span class="text-sm">Admin</span>
             </span>
@@ -159,9 +159,9 @@ export default {
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround">
+                <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-column">
+                    <span class="inline-flex flex-column align-items-start">
                         <span class="font-bold">Amy Elsner</span>
                         <span class="text-sm">Admin</span>
                     </span>
@@ -254,9 +254,9 @@ export default {
                 </a>
             </template>
             <template #end>
-                <button v-ripple class="relative overflow-hidden w-full p-link flex align-items-center p-2 pl-3 text-color hover:surface-200 border-noround">
+                <button v-ripple class="relative overflow-hidden w-full border-none bg-transparent flex align-items-start p-2 pl-3 text-color hover:surface-100 border-noround cursor-pointer transition-colors transition-duration-200">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
-                    <span class="inline-flex flex-column">
+                    <span class="inline-flex flex-column align-items-start">
                         <span class="font-bold">Amy Elsner</span>
                         <span class="text-sm">Admin</span>
                     </span>
diff --git a/doc/panel/TemplateDoc.vue b/doc/panel/TemplateDoc.vue
index adbe24111..2709db192 100644
--- a/doc/panel/TemplateDoc.vue
+++ b/doc/panel/TemplateDoc.vue
@@ -16,7 +16,7 @@
                         <Button icon="pi pi-user" rounded text></Button>
                         <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
                     </div>
-                    <span class="p-text-secondary">Updated 2 hours ago</span>
+                    <span class="text-color-secondary">Updated 2 hours ago</span>
                 </div>
             </template>
             <template #icons>
@@ -68,7 +68,7 @@ export default {
                 <Button icon="pi pi-user" rounded text></Button>
                 <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
             </div>
-            <span class="p-text-secondary">Updated 2 hours ago</span>
+            <span class="text-color-secondary">Updated 2 hours ago</span>
         </div>
     </template>
     <template #icons>
@@ -98,7 +98,7 @@ export default {
                         <Button icon="pi pi-user" rounded text></Button>
                         <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
                     </div>
-                    <span class="p-text-secondary">Updated 2 hours ago</span>
+                    <span class="text-color-secondary">Updated 2 hours ago</span>
                 </div>
             </template>
             <template #icons>
@@ -164,7 +164,7 @@ export default {
                         <Button icon="pi pi-user" rounded text></Button>
                         <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
                     </div>
-                    <span class="p-text-secondary">Updated 2 hours ago</span>
+                    <span class="text-color-secondary">Updated 2 hours ago</span>
                 </div>
             </template>
             <template #icons>
diff --git a/doc/timeline/OppositeDoc.vue b/doc/timeline/OppositeDoc.vue
index e7bfbe50c..4c78351b0 100644
--- a/doc/timeline/OppositeDoc.vue
+++ b/doc/timeline/OppositeDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
-                <small class="p-text-secondary">{{ slotProps.item.date }}</small>
+                <small class="text-color-secondary">{{ slotProps.item.date }}</small>
             </template>
             <template #content="slotProps">
                 {{ slotProps.item.status }}
@@ -29,7 +29,7 @@ export default {
                 basic: `
 <Timeline :value="events">
     <template #opposite="slotProps">
-        <small class="p-text-secondary">{{slotProps.item.date}}</small>
+        <small class="text-color-secondary">{{slotProps.item.date}}</small>
     </template>
     <template #content="slotProps">
         {{slotProps.item.status}}
@@ -41,7 +41,7 @@ export default {
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
-                <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                <small class="text-color-secondary">{{slotProps.item.date}}</small>
             </template>
             <template #content="slotProps">
                 {{slotProps.item.status}}
@@ -70,7 +70,7 @@ export default {
     <div class="card">
         <Timeline :value="events">
             <template #opposite="slotProps">
-                <small class="p-text-secondary">{{slotProps.item.date}}</small>
+                <small class="text-color-secondary">{{slotProps.item.date}}</small>
             </template>
             <template #content="slotProps">
                 {{slotProps.item.status}}