More cleanup to use CSS variables

assets/styles/layout/_doc.scss

@@ -107,6 +107,8 @@
             font-size: 1rem;
             font-weight: 600;
             font-style: normal;
+            background-color: var(--doc-highlight-text-bg);
+            color: var(---doc-highlight-text-color);
         }
 
         a {
@@ -120,28 +122,6 @@
     }
 }
 
-.layout-light {
-    .doc-section-description {
-        > p {
-            i {
-                background-color: var(--primary-100);
-                color: var(--primary-900);
-            }
-        }
-    }
-}
-
-.layout-dark {
-    .doc-section-description {
-        > p {
-            i {
-                background-color: var(--highlight-bg);
-                color: var(--highlight-text-color);
-            }
-        }
-    }
-}
-
 .doc-section-nav {
     position: sticky;
     top: 6rem;

assets/styles/layout/_responsive.scss

@@ -46,22 +46,6 @@
         }
     }
 
-    .layout-light,
-    .layout-dark {
-        .DocSearch-Button {
-            background: var(--surface-card);
-            border-color: var(--surface-border);
-
-            &:hover {
-                border-color: var(--primary-color);
-            }
-
-            .DocSearch-Search-Icon {
-                color: var(--text-700);
-            }
-        }
-    }
-
     .layout-sidebar {
         top: 0;
         left: 0;

assets/styles/layout/_topbar.scss

@@ -8,6 +8,7 @@
     border-bottom: 1px solid var(--topbar-border);
 
     &.layout-topbar-sticky {
+        background-color: var(--topbar-sticky-bg);
         backdrop-filter: blur(8px);
     }
 }
@@ -53,20 +54,4 @@
     .menu-button {
         display: none;
     }
-}
+}
-
-.layout-light {
-    .layout-topbar {
-        &.layout-topbar-sticky {
-            background-color: rgba(255,255,255,.7);
-        }
-    }
-}
-
-.layout-dark {
-    .layout-topbar {
-        &.layout-topbar-sticky {
-            background-color: rgba(0,0,0,.3);
-        }
-    }
-}

assets/styles/layout/variables/main/_dark.scss

@@ -1,4 +1,5 @@
 .layout-wrapper.layout-dark {
+    --topbar-sticky-bg:rgba(0,0,0,.3);
     --card-border: 0 none;
     --card-bg: var(--surface-card);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
@@ -8,4 +9,6 @@
     --demo-code-button-color: var(--surface-400);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
     --demo-code-button-hover-color: var(--surface-500);
+    --doc-highlight-text-bg: var(--highlight-bg);
+    --doc-highlight-text-color: var(--highlight-text-color);
 }

assets/styles/layout/variables/main/_light.scss

@@ -1,4 +1,5 @@
 .layout-wrapper.layout-light {
+    --topbar-sticky-bg:rgba(255,255,255,.7);
     --card-border: 1px solid var(--surface-border);
     --card-bg: var(--surface-card);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
@@ -8,4 +9,6 @@
     --demo-code-button-color: var(--surface-400);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
     --demo-code-button-hover-color: var(--surface-300);
+    --doc-highlight-text-bg: var(--primary-100);
+    --doc-highlight-text-color: var(--primary-900);
 }