Merge pull request #820 from BY00565233/SURF-2160

docs(tabset): implement and document attrs and vars

Author: 100stacks

src/scss/components/tabset/_index.scss

@@ -2,13 +2,13 @@
 hx-tab {
   border-radius: 2px 2px 0 0;
   border: 1px solid transparent;
-  color: $gray-700;
+  color: var(--hxTabset-hxTab-color, $gray-700);
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
 
   &:hover {
-    color: $gray-950;
+    color: var(--hxTabset-hxTab-hover-color, $gray-950);
   }
 
   &:focus {
@@ -17,8 +17,8 @@ hx-tab {
 
   &[current] {
     background-color: inherit;
-    border-bottom: 2px solid $teal-300;
-    color: $gray-950;
+    border-bottom: 2px solid var(--hxTabset-hxTab-current-border-bottom, $teal-300);
+    color: var(--hxTabset-hxTab-current-color, $gray-950);
     font-weight: 600;
     outline: none;
   }
@@ -101,7 +101,7 @@ hx-tabset {
 // before <hx-tabset> upgrades.
 hx-tabset:not([hx-defined]) {
   hx-tab:first-of-type {
-    background-color: $gray-0;
+    background-color: var(--hxTabset-hxTab-first-of-type-bgcolor, $gray-0);
   }
 
   hx-tabpanel:first-of-type {
@@ -113,11 +113,11 @@ hx-tabset:not([hx-defined]) {
 
 hx-tabset.beta-hxBound {
   hx-tab[current] {
-    background-color: $gray-0;
+    background-color: var(--hxTabset-hxTab-current-bgcolor, $gray-0);
   }
 
   hx-tabcontent {
-    background-color: $gray-0;
-    border-color: $gray-300;
+    background-color: var(--hxTabset-hxTabcontent-bgcolor, $gray-0);
+    border-color: var(--hxTabset-hxTabcontent-border-color, $gray-300);
   }
 }