diff --git a/components/demo/DeferredDemo.vue b/components/demo/DeferredDemo.vue
index 243f4b80b..297d28730 100644
--- a/components/demo/DeferredDemo.vue
+++ b/components/demo/DeferredDemo.vue
@@ -64,7 +64,7 @@ export default {
     transform: translateX(-100%);
     z-index: 1;
     border-radius: 10px;
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface-100), rgba(255, 255, 255, 0));
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--hover-background), rgba(255, 255, 255, 0));
 }
 
 @keyframes deferred-demo-loading {
diff --git a/components/lib/themes/primeone/base/datatable/index.js b/components/lib/themes/primeone/base/datatable/index.js
index 213256fdf..5f64dc82c 100644
--- a/components/lib/themes/primeone/base/datatable/index.js
+++ b/components/lib/themes/primeone/base/datatable/index.js
@@ -354,7 +354,7 @@ export default {
 }
 
 .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
-    outline: 1px solid var(--p-focus-ring-color);
+    outline: 1px solid ${dt('focus.ring.color')};
     outline-offset: 2px;
     box-shadow: 0 none;
 }
diff --git a/doc/setup/GuidesDoc.vue b/doc/setup/GuidesDoc.vue
index 6b1d4c22c..630e630ca 100644
--- a/doc/setup/GuidesDoc.vue
+++ b/doc/setup/GuidesDoc.vue
@@ -10,12 +10,12 @@
                                 <path
                                     id="Vector"
                                     d="M32.0549 12.9123L32.0549 12.9123L59.3263 7.86786C60.152 7.71512 60.8175 8.61497 60.3885 9.39371C60.3885 9.39372 60.3885 9.39373 60.3885 9.39375L32.5644 59.887C32.1791 60.5862 31.1958 60.5902 30.8048 59.8945C30.8048 59.8945 30.8048 59.8945 30.8047 59.8945L2.42899 9.39495C1.99227 8.61774 2.655 7.71063 3.48355 7.86092C3.48355 7.86092 3.48355 7.86092 3.48355 7.86092L31.3374 12.9136L31.4267 12.4216L31.3374 12.9136C31.5747 12.9566 31.8176 12.9562 32.0549 12.9123Z"
-                                    stroke="var(--text-color-secondary)"
+                                    stroke="var(--text-secondary-color)"
                                 />
                                 <path
                                     id="Vector_2"
                                     d="M24.2017 5.3266L24.2017 5.3266C24.0911 5.34859 24.0014 5.44626 23.9939 5.57298L24.2017 5.3266ZM24.2017 5.3266L44.7924 1.23202C44.9675 1.19721 45.1441 1.36539 45.0858 1.57068L41.2344 15.1203C40.9796 16.0167 41.7473 16.8966 42.6812 16.7138L42.6813 16.7138L48.5822 15.558C48.775 15.5203 48.9623 15.7301 48.8571 15.9431L48.8571 15.9432L32.0907 49.9002L31.8017 50.3534L31.8017 50.3535C31.7534 50.4293 31.7021 50.4571 31.6608 50.4683C31.6134 50.4813 31.5538 50.4788 31.4938 50.4538C31.4338 50.4288 31.3876 50.3873 31.3609 50.341C31.3371 50.2998 31.3197 50.24 31.3381 50.1499L31.3381 50.1499L34.0448 36.8548C34.2339 35.9264 33.3724 35.1027 32.4474 35.3876L32.4472 35.3877L28.9065 36.4794C28.7341 36.5325 28.5407 36.38 28.5834 36.1681L30.2866 27.7041C30.2866 27.704 30.2866 27.704 30.2866 27.704C30.4661 26.8122 29.6748 26.0058 28.7717 26.2172L28.7716 26.2172L23.0389 27.5599C23.0389 27.5599 23.0389 27.5599 23.0389 27.5599C22.8827 27.5964 22.7164 27.4709 22.7273 27.2827C22.7273 27.2827 22.7273 27.2827 22.7273 27.2827L23.9939 5.57303L24.2017 5.3266Z"
-                                    stroke="var(--text-color-secondary)"
+                                    stroke="var(--text-secondary-color)"
                                 />
                             </g>
                             <defs>
@@ -64,7 +64,7 @@
                         <svg width="95" height="63" viewBox="0 0 95 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M52.9726 62.5H87.3826C88.4807 62.5001 89.5316 62.1142 90.4826 61.57C91.4335 61.0258 92.4138 60.3426 92.9626 59.4C93.5114 58.4574 93.8931 57.388 93.8926 56.2997C93.8921 55.2114 93.5122 54.1424 92.9626 53.2002L69.7126 13.21C69.1638 12.2676 68.4933 11.5841 67.5426 11.04C66.5918 10.4959 65.2305 10.11 64.1326 10.11C63.0347 10.11 61.9833 10.4959 61.0326 11.04C60.0818 11.5841 59.4114 12.2676 58.8626 13.21L52.9726 23.44L41.1926 3.59927C40.6433 2.65693 39.9736 1.66402 39.0226 1.12C38.0716 0.575977 37.0206 0.5 35.9226 0.5C34.8245 0.5 33.7736 0.575977 32.8226 1.12C31.8716 1.66402 30.8918 2.65693 30.3426 3.59927L1.51258 53.2002C0.962942 54.1424 0.893056 55.2114 0.892579 56.2997C0.892101 57.388 0.963769 58.4572 1.51258 59.3999C2.06139 60.3425 3.04164 61.0258 3.99258 61.57C4.94352 62.1142 5.99449 62.5001 7.09258 62.5H28.7926C37.3909 62.5 43.6494 58.6429 48.0126 51.34L58.5526 33.05L64.1326 23.44L81.1826 52.58H58.5526L52.9726 62.5ZM28.4826 52.58H13.2926L35.9226 13.52L47.3926 33.05L39.7949 46.2947C36.8973 51.0331 33.5938 52.58 28.4826 52.58Z"
-                                stroke="var(--text-color-secondary)"
+                                stroke="var(--text-secondary-color)"
                             />
                         </svg>
                         <svg width="94" height="63" viewBox="0 0 94 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
@@ -90,7 +90,7 @@
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M0.59082 0.0688477H54.3064L49.3794 53.166L27.1685 59.2714L5.51761 53.6348L0.59082 0.0688477ZM1.68702 1.06885L6.44909 52.844L27.1614 58.2362L48.4475 52.3851L53.2093 1.06885H1.68702ZM9.62573 10.0733H45.1308L44.3146 17.6229H18.3298L18.8344 23.5266H43.8817L41.9722 44.7773L27.4625 48.6181L12.8914 44.7772L11.9306 33.4396H19.7175L20.1987 38.7929L27.4612 40.6224L34.6048 38.795L35.2392 31.0762H11.5463L9.62573 10.0733ZM10.7213 11.0733L12.4591 30.0762H36.3248L35.5431 39.5872L27.4631 41.6541L19.2662 39.5892L18.8033 34.4396H13.0189L13.8283 43.99L27.4619 47.5838L41.0389 43.9899L42.7878 24.5266H17.9162L17.2407 16.6229H43.4169L44.0169 11.0733H10.7213Z"
-                                fill="var(--text-color-secondary)"
+                                fill="var(--text-secondary-color)"
                             />
                         </svg>
                         <svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
@@ -136,7 +136,7 @@
 .card .title {
     font-size: 1rem;
     font-weight: 500;
-    color: var(--text-color-secondary);
+    color: var(--text-secondary-color);
     transition: all 0.5s;
 }
 
diff --git a/pages/skeleton/index.vue b/pages/skeleton/index.vue
index 13e814fb5..d96449ba5 100644
--- a/pages/skeleton/index.vue
+++ b/pages/skeleton/index.vue
@@ -61,14 +61,3 @@ export default {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-.custom-skeleton {
-    border: 1px solid var(--surface-border);
-    border-radius: 4px;
-
-    ul {
-        list-style: none;
-    }
-}
-</style>