docs(hx-pill): implement and document attributes and variables

Author: badejayayesubabu

src/elements/hx-pill/_shadow.scss

@@ -20,7 +20,6 @@
     align-items: center;
     color: var(--hxDismiss-color, $gray-600);
     display: inline-flex;
-    height: 1.5em;
     justify-content: center;
     margin: 0 -0.5rem 0 0;
     width: 1.5em;

src/scss/components/pill/_index.scss

@@ -1,16 +1,20 @@
 hx-pill {
   background-color: $gray-400;
+  background-color: var(--hxPill-bgcolor, $gray-400);
   border-radius: 1em;
   color: $gray-900;
+  color: var(--hxPill-color, $gray-900);
   display: inline-block;
   line-height: 1.5;
 }
 
 hx-status {
   background-color: transparent;
   border: 1px solid $gray-750;
+  border: 1px solid var(--hxStatus-border, $gray-750);
   border-radius: 1em; // 10px
   color: $gray-750;
+  color: var(--hxStatus-color, $gray-750);
   display: inline-block;
   font-size: 0.625rem; // 10px
   height: 1rem;
@@ -25,42 +29,60 @@ hx-status {
 
   &.hxEmphasisGray {
     border-color: $gray-900;
+    border-color: var(--hxStatus-hxEmphasisGray-border-color, $gray-900);
     color: $gray-900;
+    color: var(--hxStatus-hxEmphasisGray-color, $gray-900);
   }
 
   &.hxEmphasisPurple {
     border-color: $purple-500;
+    border-color: var(--hxStatus-hxEmphasisPurple-border-color, $purple-500);
     color: $purple-500;
+    color: var(--hxStatus-hxEmphasisPurple-color, $purple-500);
   }
 
   &.hxSubdued {
     border-color: $gray-600;
+    border-color: var(--hxStatus-hxSubdued-border-color, $gray-600);
     color: $gray-600;
+    color: var(--hxStatus-hxSubdued-color, $gray-600);
     font-size: 0.625rem;
     line-height: 0.5rem;
   }
 
   &.hxFill {
     background-color: $gray-750;
+    background-color: var(--hxStatus-hxFill-bgcolor, $gray-750);
     border-color: $gray-750;
+    border-color: var(--hxStatus-hxFill-border-color, $gray-750);
     color: $gray-0;
+    color: var(--hxStatus-hxFill-color, $gray-0);
 
     &.hxEmphasisGray {
       background-color: $gray-900;
+      background-color: var(--hxStatus-hxFill-hxEmphasisGray-bgcolor, $gray-900);
       border-color: $gray-900;
+      border-color: var(--hxStatus-hxFill-hxEmphasisGray-border-color, $gray-900);
       color: $gray-0;
+      color: var(--hxStatus-hxFill-hxEmphasisGray-color, $gray-0);
     }
 
     &.hxEmphasisPurple {
       background-color: $purple-500;
+      background-color: var(--hxStatus-hxFill-hxEmphasisPurple-bgcolor, $purple-500);
       border-color: $purple-500;
+      border-color: var(--hxStatus-hxFill-hxEmphasisPurple-border-color, $purple-500);
       color: $gray-0;
+      color: var(--hxStatus-hxFill-hxEmphasisPurple-color, $gray-0);
     }
 
     &.hxSubdued {
       background-color: $gray-600;
+      background-color: var(--hxStatus-hxFill-hxSubdued-bgcolor, $gray-600);
       border-color: $gray-600;
+      border-color: var(--hxStatus-hxFill-hxSubdued-border-color, $gray-600);
       color: $gray-0;
+      color: var(--hxStatus-hxFill-hxSubdued-color, $gray-0);
     }
   }
 }