Restyle Sphinx Design tabs (#1555)

* restyle sphinx design tabs * increase panel border radius * increase line height, zero padding-y * use shadow variable * Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss * Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
pydata · Dec 8, 2023 · de547eb · de547eb
1 parent 78c91c0
commit de547eb
Showing 1 changed file with 31 additions and 11 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -174,27 +174,47 @@ html[data-theme="light"] {
   > input {
     // Active tab label
     &:checked + label {
-      border-color: transparent transparent var(--pst-color-primary); // top LR bottom
+      border-style: solid solid none;
+      border-color: var(--pst-color-primary) var(--pst-color-primary)
+        transparent; // top LR bottom
+      border-width: 0.125rem 0.125rem 0;
+      border-radius: 0.125rem 0.125rem 0 0;
+      background-color: var(--pst-color-background);
+      transform: translateY(0.125rem);
       color: var(--pst-color-primary);
     }
 
+    &:focus-visible + label {
+      border: 0.125rem solid var(--pst-color-accent);
+      border-radius: 0.125rem;
+      background-color: var(--pst-color-accent-bg);
+      color: var(--pst-color-on-surface);
+    }
+
     // Hover label
-    &:not(:checked) + label:hover {
-      border-color: var(--pst-color-secondary);
+    &:not(:checked):not(:focus-visible) + label:hover {
+      border-color: transparent;
       color: var(--pst-color-secondary);
     }
   }
 
   // Tab label
   > label {
-    color: var(--pst-color-text-muted);
-    border-top: 0.125rem solid transparent; // so hover isn't just color change
-    padding-top: 0.5em; // same as bottom padding, so hover overline looks OK
-    // Hovered label
-    html &:hover {
-      color: var(--pst-color-secondary);
-      border-color: var(--pst-color-secondary);
-    }
+    color: var(--pst-color-on-surface);
+    border: 0.125rem solid transparent;
+    border-radius: 0.125rem 0.125rem 0px 0px;
+    background-color: var(--pst-color-surface);
+    padding: 0 0.75em;
+    margin-inline-end: 0.25rem;
+    line-height: 1.95;
+  }
+
+  // panel
+  .sd-tab-content {
+    border: 0.125rem solid var(--pst-color-primary);
+    border-radius: 0.1875rem;
+    box-shadow: unset;
+    padding: 0.625rem;
   }
 }