feat: Support tab font customization and fix hover style on disabled tabs (#907)

* Add support for customizing the tab font size and weight

* Do not apply hover style to disabled tabs

Author: rfgamaral

src/tabs/tabs.module.css

@@ -30,6 +30,8 @@
     --reactist-tab-border-width: 1px;
     --reactist-tab-padding-x: var(--reactist-spacing-medium);
     --reactist-tab-padding-y: var(--reactist-spacing-small);
+    --reactist-tab-font-size: var(--reactist-font-size-body);
+    --reactist-tab-font-weight: var(--reactist-font-weight-medium);
     --reactist-tab-line-height: 21px;
 }
 
@@ -39,8 +41,8 @@
     border: none;
     background: none;
     cursor: pointer;
-    font-size: var(--reactist-font-size-body);
-    font-weight: var(--reactist-font-weight-medium);
+    font-size: var(--reactist-tab-font-size);
+    font-weight: var(--reactist-tab-font-weight);
     line-height: var(--reactist-tab-line-height);
     z-index: 1;
     text-decoration: none;
@@ -88,19 +90,19 @@
     color: var(--reactist-tab-neutral-selected-tint);
 }
 
-.tab[aria-selected='false']:hover,
-.tab-neutral[aria-selected='false']:hover {
-    background-color: var(--reactist-tab-neutral-hover-fill);
-    color: var(--reactist-tab-neutral-hover-tint);
-}
-
 .tab[aria-disabled='true'],
 .tab-neutral[aria-disabled='true'] {
     background-color: var(--reactist-tab-neutral-disabled-fill);
     color: var(--reactist-tab-neutral-disabled-tint);
     cursor: not-allowed;
 }
 
+.tab[aria-selected='false']:not([aria-disabled='true']):hover,
+.tab-neutral[aria-selected='false']:not([aria-disabled='true']):hover {
+    background-color: var(--reactist-tab-neutral-hover-fill);
+    color: var(--reactist-tab-neutral-hover-tint);
+}
+
 .tab-themed {
     background-color: var(--reactist-tab-themed-unselected-fill);
     color: var(--reactist-tab-themed-unselected-tint);
@@ -110,16 +112,16 @@
     color: var(--reactist-tab-themed-selected-tint);
 }
 
-.tab-themed[aria-selected='false']:hover {
-    background-color: var(--reactist-tab-themed-hover-fill);
-    color: var(--reactist-tab-themed-hover-tint);
-}
-
 .tab-themed[aria-disabled='true'] {
     background-color: var(--reactist-tab-themed-disabled-fill);
     color: var(--reactist-tab-themed-disabled-tint);
 }
 
+.tab-themed[aria-selected='false']:not([aria-disabled='true']):hover {
+    background-color: var(--reactist-tab-themed-hover-fill);
+    color: var(--reactist-tab-themed-hover-tint);
+}
+
 .track,
 .track-neutral {
     background: var(--reactist-tab-neutral-track);