diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
index cbc1f87aa9..bce605da14 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -18,15 +18,15 @@
  */
 
 .bd-content .sd-card {
-  border: 1px solid var(--pst-color-preformatted-border);
+  border: 1px solid var(--pst-color-border);
 
   .sd-card-header {
     background-color: var(--pst-color-panel-background);
-    border-bottom: 1px solid var(--pst-color-preformatted-border);
+    border-bottom: 1px solid var(--pst-color-border);
   }
   .sd-card-footer {
     background-color: var(--pst-color-panel-background);
-    border-top: 1px solid var(--pst-color-preformatted-border);
+    border-top: 1px solid var(--pst-color-border);
   }
 
   .sd-card-body {
@@ -47,26 +47,26 @@
   > input {
     // Active tab label
     &:checked + label {
-      border-color: var(--pst-color-active-navigation);
-      color: var(--pst-color-active-navigation);
+      border-color: var(--pst-color-primary);
+      color: var(--pst-color-primary);
     }
 
     // hover label
     &:not(:checked) + label:hover {
-      border-color: var(--pst-color-active-navigation);
-      color: var(--pst-color-active-navigation);
+      border-color: var(--pst-color-primary);
+      color: var(--pst-color-primary);
       opacity: 0.5;
     }
   }
 
   // Tab label
   > label {
-    color: var(--pst-color-deactive-navigation);
+    color: var(--pst-color-text-muted);
 
     // Hovered label
     html &:hover {
-      color: var(--pst-color-active-navigation);
-      border-color: var(--pst-color-active-navigation);
+      color: var(--pst-color-primary);
+      border-color: var(--pst-color-primary);
       opacity: 0.5;
     }
   }
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_panels.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_panels.scss
index edd0f29fc3..acb8c9a976 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_panels.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_panels.scss
@@ -19,15 +19,15 @@
  */
 
 .sphinx-bs .card {
-  border: 1px solid var(--pst-color-preformatted-border);
+  border: 1px solid var(--pst-color-border);
   background-color: var(--pst-color-panel-background);
 
   .card-header {
-    border-bottom: 1px solid var(--pst-color-preformatted-border);
+    border-bottom: 1px solid var(--pst-color-border);
   }
 
   .card-footer {
-    border-top: 1px solid var(--pst-color-preformatted-border);
+    border-top: 1px solid var(--pst-color-border);
   }
 }
 
@@ -39,31 +39,31 @@
   > input {
     // Active tab label
     &:checked + label {
-      border-color: var(--pst-color-active-navigation);
-      color: var(--pst-color-active-navigation);
+      border-color: var(--pst-color-primary);
+      color: var(--pst-color-primary);
     }
 
     // hover label
     &:not(:checked) + label:hover {
-      border-color: var(--pst-color-active-navigation);
-      color: var(--pst-color-active-navigation);
+      border-color: var(--pst-color-primary);
+      color: var(--pst-color-primary);
       opacity: 0.5;
     }
   }
 
   // Tab label
   > label {
-    color: var(--pst-color-deactive-navigation);
+    color: var(--pst-color-text-muted);
 
     // Hovered label
     html &:hover {
-      color: var(--pst-color-active-navigation);
-      border-color: var(--pst-color-active-navigation);
+      color: var(--pst-color-primary);
+      border-color: var(--pst-color-primary);
       opacity: 0.5;
     }
   }
 
   > .tabbed-content {
-    border-color: var(pst-color-border);
+    border-color: var(--pst-color-border);
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
index 5b5aa9bb9c..7daa42840f 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -35,7 +35,7 @@ html[data-theme="light"] {
   * extentions
   */
 
-  --pst-color-panel-background: var(--pst-color-background);
+  --pst-color-panel-background: var(--pst-color-on-background);
 
   /*****************************************************************************
   * layout
@@ -94,7 +94,7 @@ html[data-theme="dark"] {
   * extentions
   */
 
-  --pst-color-panel-background: var(--pst-color-background-up);
+  --pst-color-panel-background: var(--pst-color-on-background);
 
   /*****************************************************************************
   * layout