👌 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]>

Author: pradyunsg

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
 }
 ```

sphinx_design/compiled/style.min.css

@@ -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;

style/_tabs.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;
 }