👌 IMPROVE: Styling for tabs (#21)

- Introduce "hover" state styling for tabs: The lifecycle of a tab is now "inactive -> hover -> active". - Completely un-mix styling for different states of a tab. - Use a higher contrast color for inactive tabs. - Convert tab underline and overline to greys: A more neutral colour to fit in better with the rest of the content. Co-authored-by: Pradyun Gedam <[email protected]>
executablebooks · Oct 19, 2021 · fab8233 · fab8233
1 parent c79d9d6
commit fab8233
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/docs/css_variables.md b/docs/css_variables.md
@@ -56,9 +56,13 @@ The defaults are:
     --sd-color-card-header: transparent;
     --sd-color-card-footer: transparent;
     --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1);
-    --sd-color-tabs-label-inactive: rgba(178, 206, 245, 0.62);
-    --sd-color-tabs-overline: rgb(207, 236, 238);
-    --sd-color-tabs-underline: rgb(207, 236, 238);
+    --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1);
+    --sd-color-tabs-label-inactive: hsl(0, 0%, 66%);
+    --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1);
+    --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62);
+    --sd-color-tabs-underline-inactive: transparent;
+    --sd-color-tabs-overline: rgb(222, 222, 222);
+    --sd-color-tabs-underline: rgb(222, 222, 222);
     --sd-fontsize-tabs-label: 1rem
 }
 ```
diff --git a/sphinx_design/compiled/style.min.css b/sphinx_design/compiled/style.min.css
diff --git a/style/_tabs.scss b/style/_tabs.scss
@@ -13,7 +13,7 @@
 
     // Active tab label
     &:checked + label {
-      border-color: var(--sd-color-tabs-label-active);
+      border-color: var(--sd-color-tabs-underline-active);
       color: var(--sd-color-tabs-label-active);
 
       // Show tabbed block content
@@ -23,7 +23,8 @@
     }
 
     &:not(:checked) + label:hover {
-        border-color: var(--sd-color-tabs-label-inactive);
+      color: var(--sd-color-tabs-label-hover);
+      border-color: var(--sd-color-tabs-underline-hover);
     }
 
     // Focused tab label
@@ -43,6 +44,7 @@
     border-bottom: 0.125rem solid transparent;
     margin-bottom: 0;
     color: var(--sd-color-tabs-label-inactive);
+    border-color: var(--sd-color-tabs-underline-inactive);
     cursor: pointer;
     font-size: var(--sd-fontsize-tabs-label);
     font-weight: 700;

diff --git a/style/_variables.scss b/style/_variables.scss
@@ -22,8 +22,12 @@
   --sd-color-card-footer: transparent;
   // tabs
   --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1);
-  --sd-color-tabs-label-inactive: rgba(178, 206, 245, 0.62);
-  --sd-color-tabs-overline: rgb(207, 236, 238);
-  --sd-color-tabs-underline: rgb(207, 236, 238);
+  --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1);
+  --sd-color-tabs-label-inactive: hsl(0, 0%, 66%);
+  --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1);
+  --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62);
+  --sd-color-tabs-underline-inactive: transparent;
+  --sd-color-tabs-overline: rgb(222, 222, 222);
+  --sd-color-tabs-underline: rgb(222, 222, 222);
   --sd-fontsize-tabs-label: 1rem;
 }