fix: [pfe-badge] adds dark variant

elements/pfe-badge/demo/index.html

@@ -43,6 +43,7 @@
     <h4 slot="pfe-band--header">&lt;pfe-badge&gt; quick preview</h4>
     <section>
       <pfe-badge number="1">1</pfe-badge>
+      <pfe-badge number="15" state="dark">15</pfe-badge>
       <pfe-badge number="17" state="info">17</pfe-badge>
       <pfe-badge threshold="100" number="900" state="success">900</pfe-badge>
       <pfe-badge threshold="50" number="900" state="important">900</pfe-badge>
@@ -60,6 +61,15 @@ <h4 slot="pfe-band--header">&lt;pfe-badge&gt; with [state="default"]</h4>
     </section>
   </pfe-band>
 
+  <pfe-band color="lightest" size="small">
+    <h4>&lt;pfe-badge&gt; with [state="dark"]</h4>
+    <section>
+      <pfe-badge state="dark" number="1">1</pfe-badge>
+      <pfe-badge state="dark" threshold="10" number="17">17</pfe-badge>
+      <pfe-badge state="dark" number="900">900</pfe-badge>
+    </section>
+  </pfe-band>
+
   <pfe-band color="lightest" size="small">
     <h4>&lt;pfe-badge&gt; with [state="info"]</h4>
     <section>

elements/pfe-badge/docs/index.md

@@ -19,6 +19,7 @@ The badge component provides a way to have small numerical descriptors for UI el
 
 <pfe-badge number="17">17</pfe-badge>
 <pfe-badge number="900" threshold="100">900</pfe-badge> 
+<pfe-badge state="dark" number="5">5</pfe-badge>
 <pfe-badge state="info" number="10">10</pfe-badge>
 <pfe-badge state="success" number="20">20</pfe-badge>
 <pfe-badge state="moderate" number="30">30</pfe-badge>
@@ -56,13 +57,15 @@ This adds a "+" next to the number once the threshold value has been passed.
 ### With a state
 This adds a background color to the badge based on the state.
 
+<pfe-badge state="dark" number="5">5</pfe-badge>
 <pfe-badge state="info" number="10">10</pfe-badge>
 <pfe-badge state="success" number="20">20</pfe-badge>
 <pfe-badge state="moderate" number="30">30</pfe-badge>
 <pfe-badge state="important" number="40">40</pfe-badge>
 <pfe-badge state="critical" number="50">50</pfe-badge>
 
 ```html
+<pfe-badge state="dark" number="5">5</pfe-badge>
 <pfe-badge state="info" number="10">10</pfe-badge>
 <pfe-badge state="success" number="20">20</pfe-badge>
 <pfe-badge state="moderate" number="30">30</pfe-badge>
@@ -85,7 +88,7 @@ Sets a numeric value for a badge. You can pair it with `threshold` attribute to
 Sets a threshold for the numeric value and adds `+` sign if the numeric value exceeds the threshold value.
 
 ### state
-Options include moderate, important, critical, success, info. 
+Options include moderate, important, critical, success, info, dark. 
 :::
 
 ::: section

elements/pfe-badge/src/pfe-badge.js

@@ -18,7 +18,7 @@ class PfeBadge extends PFElement {
       state: {
         title: "State",
         type: String,
-        values: ["default", "moderate", "important", "critical", "success", "info"],
+        values: ["default", "dark", "moderate", "important", "critical", "success", "info"],
         default: "default",
       },
       // @TODO: Deprecated property in 1.0

elements/pfe-badge/src/pfe-badge.scss

@@ -24,7 +24,7 @@ $LOCAL-VARIABLES: (
 }
 
 span {
-  background-color: pfe-local(BackgroundColor);
+  background-color: pfe-local(BackgroundColor);  
   border-radius:    pfe-local(BorderRadius);
   color:            pfe-local(Color);
   font-size:        pfe-local(FontSize);
@@ -52,6 +52,13 @@ span {
   }
 }
 
+// creating dark variant
+:host([state="dark"]) {
+  span {
+    background-color: #D2D2D2;
+  }
+}
+
 :host([hidden]) {
   display: none;
 }