fix(badge): dpo tokens (#1912)

* fix(badge): dpo tokens

* test(badge): update test cases for DPO tokens

* chore: update deps

* test(badge): update specs for DPO tokens

* fix(badge) status states for docs and changeset update

* docs(badge): align variant names on the Guidelines page and update `state` attributes on Overview page

* docs(badge): update changeset + improve formatting

* fix(badge): update deprecated aliases per guidance

* docs(badge): make `deprecated` visible for legacy `critical` state

* docs(badge): update images that had old badge colors

* feat(badge): add back the minimum width

* fix(badge): corrected states in caution badge demo

* fix(badge): corrected states in color-context demo

---------

Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>

.changeset/tall-bags-pipe.md

@@ -0,0 +1,17 @@
+---
+"@rhds/elements": minor
+---
+`<rh-badge>`: added new states: 
+
+  * `danger`
+  * `warning`
+  * `caution`
+  * `neutral`
+  * `info`
+
+We deprecated:
+
+  * `critical` (now an alias to `danger`)
+  * `important` (now an alias to `caution`)
+  * `moderate` (now an alias to `warning`)
+  * `note` (now an alias to `info`)

elements/rh-badge/demo/caution.html

@@ -0,0 +1,8 @@
+<rh-badge number="7" state="caution">7</rh-badge>
+<rh-badge number="24" state="caution">24</rh-badge>
+<rh-badge number="240" state="caution">240</rh-badge>
+<rh-badge threshold="900" number="999" state="caution">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>

elements/rh-badge/demo/color-context.html

@@ -1,8 +1,8 @@
 <rh-context-demo>
   <rh-badge number="1">1</rh-badge>
-  <rh-badge number="1" state="critical">1</rh-badge>
-  <rh-badge number="2" state="important">2</rh-badge>
-  <rh-badge number="3" state="moderate">3</rh-badge>
+  <rh-badge number="1" state="danger">1</rh-badge>
+  <rh-badge number="2" state="caution">2</rh-badge>
+  <rh-badge number="3" state="warning">3</rh-badge>
   <rh-badge number="5" state="info">5</rh-badge>
   <rh-badge number="8" state="success">8</rh-badge>
   <rh-badge number="1000" threshold="999" state="success">1000</rh-badge>

elements/rh-badge/demo/danger.html

@@ -0,0 +1,8 @@
+<rh-badge number="7" state="danger">7</rh-badge>
+<rh-badge number="24" state="danger">24</rh-badge>
+<rh-badge number="240" state="danger">240</rh-badge>
+<rh-badge threshold="900" number="999" state="danger">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>

elements/rh-badge/demo/deprecated-states.html

@@ -0,0 +1,8 @@
+<rh-badge state="moderate" number="900">900</rh-badge>
+<rh-badge state="important" number="900">900</rh-badge>
+<rh-badge state="critical" number="900">900</rh-badge>
+<rh-badge state="note" number="900">900</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>

elements/rh-badge/demo/neutral.html

@@ -0,0 +1,8 @@
+<rh-badge number="7" state="neutral">7</rh-badge>
+<rh-badge number="24" state="neutral">24</rh-badge>
+<rh-badge number="240" state="neutral">240</rh-badge>
+<rh-badge threshold="900" number="999" state="neutral">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>

elements/rh-badge/demo/warning.html

@@ -0,0 +1,8 @@
+<rh-badge number="7" state="warning">7</rh-badge>
+<rh-badge number="24" state="warning">24</rh-badge>
+<rh-badge number="240" state="warning">240</rh-badge>
+<rh-badge threshold="900" number="999" state="warning">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>

elements/rh-badge/docs/00-overview.md

@@ -2,8 +2,8 @@
 
 {{ tagName | getElementDescription }}
 
-<uxdot-example width-adjustment="72px">
-  <img src="./badge-sample-element.png" alt="Two badges; from left to right, one badge has a light gray background with a dark gray counter number and the other badge has a blue background with a white counter number">
+<uxdot-example width-adjustment="80px">
+  <img src="./badge-sample-element.svg" alt="Two badges; from left to right, one badge has a dark gray background with a white counter number and the other badge has a purple background with a white counter number.">
 </uxdot-example>
 
 {% repoStatusList repoStatus=repoStatus %}
@@ -13,10 +13,10 @@
 
 <rh-badge number="1" aria-label="1 new message">1</rh-badge>
 <rh-badge number="99" state="info" aria-label="99 details">99</rh-badge>
-<rh-badge number="100" threshold="99" state="moderate" aria-label="99+ details">100</rh-badge>
 <rh-badge number="11" threshold="10" state="success" aria-label="10+ items">11</rh-badge>
-<rh-badge number="6" state="important" aria-label="6 overdue tasks">6</rh-badge>
-<rh-badge number="2" state="critical" aria-label="2 errors">2</rh-badge>
+<rh-badge number="100" threshold="99" state="warning" aria-label="99+ details">100</rh-badge>
+<rh-badge number="6" state="caution" aria-label="6 overdue tasks">6</rh-badge>
+<rh-badge number="2" state="danger" aria-label="2 errors">2</rh-badge>
 
 ## When to use
 

elements/rh-badge/docs/10-style.md

@@ -5,7 +5,7 @@ A badge is number text on a pill background used to reflect the count of somethi
 
 <figure>
   <uxdot-example width-adjustment="102px">
-    <img src="../badge-anatomy.png" alt="Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number">
+    <img src="../badge-anatomy.svg" alt="Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number">
   </uxdot-example>
   <figcaption>
     <ol>
@@ -17,25 +17,33 @@ A badge is number text on a pill background used to reflect the count of somethi
 
 ## Theme 
 
-A badge is available in the light theme only.
+A badge is available in light and dark theme.
 
-<uxdot-example width-adjustment="72px">
-  <img src="../badge-theme-light.png" alt="Light theme badges">
+### Light theme
+
+<uxdot-example width-adjustment="272px">
+  <img src="../badge-theme-light.svg" alt="Light theme badges">
+</uxdot-example>
+
+### Dark theme
+
+<uxdot-example width-adjustment="272px" color-palette="darkest">
+  <img src="../badge-theme-dark.svg" alt="Dark theme badges">
 </uxdot-example>
 
 ## Configuration 
 
 All badges have the same height and border radius.
 
-<uxdot-example width-adjustment="249px">
-  <img src="../badge-configuration.png" alt="How a badge is constructed showing border radius and height details">  
+<uxdot-example width-adjustment="350px">
+  <img src="../badge-configuration.svg" alt="How a badge is constructed showing border radius and height details">
 </uxdot-example>
 
 
 ## Space and width 
 
-<uxdot-example width-adjustment="199px">
-  <img src="../badge-space-and-width.png" alt="Badge spacing and minimum width">
+<uxdot-example width-adjustment="238px">
+  <img src="../badge-space-and-width.svg" alt="Badge spacing and minimum width">
 </uxdot-example>
 
 <rh-table>
@@ -58,7 +66,7 @@ All badges have the same height and border radius.
     <tbody>
       <tr>
         <td data-label="Property">Minimum width</td>
-        <td data-label="Current value">32px<br>2.0rem</td>
+        <td data-label="Current value">--rh-length-2xl</td>
       </tr>
     </tbody>
   </table>

elements/rh-badge/docs/20-guidelines.md

@@ -12,10 +12,6 @@ meanings.
   for many readers. Go to the <a href="../accessibility/">Accessibility</a> page to learn more.</p>
 </rh-alert>
 
-<uxdot-example width-adjustment="202px">
-  <img src="../badge-variants.png" alt="Image of neutral, default, success, warning, error, and danger badges in a row">
-</uxdot-example>
-
 <rh-table>
   <table>
     <thead>
@@ -42,19 +38,19 @@ meanings.
         <td data-label="Use case">Indicates stability or completion</td>
       </tr>
       <tr>
-        <td data-label="Badge"><rh-badge state="moderate">17<rh-badge></td>
-        <td data-label="Name">Moderate</td>
-        <td data-label="Use case">Indicates caution</td>
+        <td data-label="Badge"><rh-badge state="warning">17<rh-badge></td>
+        <td data-label="Name">Warning</td>
+        <td data-label="Use case">Indicates a warning</td>
       </tr>
       <tr>
-        <td data-label="Badge"><rh-badge state="important">17<rh-badge></td>
-        <td data-label="Name">Important</td>
-        <td data-label="Use case">Indicates an error</td>
+        <td data-label="Badge"><rh-badge state="caution">17<rh-badge></td>
+        <td data-label="Name">Caution</td>
+        <td data-label="Use case">Indicates an increased need for caution or attention</td>
       </tr>
       <tr>
-        <td data-label="Badge"><rh-badge state="critical">17<rh-badge></td>
-        <td data-label="Name">Critical</td>
-        <td data-label="Use case">Indicates danger or something critical</td>
+        <td data-label="Badge"><rh-badge state="danger">17<rh-badge></td>
+        <td data-label="Name">Danger</td>
+        <td data-label="Use case">Indicates an error</td>
       </tr>
     </tbody>
   </table>
@@ -73,8 +69,8 @@ The width of a badge varies based on the counter number. Using a number larger
 than the threshold will display a + at the end. For example, if `999` is the 
 threshold, using `1,000` or larger will display `999+`.
 
-<uxdot-example width-adjustment="174px">
-  <img src="../badge-counter-number.png" alt="Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+">
+<uxdot-example width-adjustment="198px">
+  <img src="../badge-counter-number.svg" alt="Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+">
 </uxdot-example>
 
 
@@ -94,8 +90,8 @@ that are made in a toolbar filter or select list.
 
 Do not allow a badge to display a count over 999.
 
-<uxdot-example danger width-adjustment="75px">
-  <img src="../badge-best-practice-1.png" alt="A badge counting to 1,00,000 which is incorrect usage">
+<uxdot-example danger width-adjustment="74px">
+  <img src="../badge-best-practice-large-number-dont.svg" alt="A badge counting to 1,00,000 which is incorrect usage">
 </uxdot-example>
 
 ### Two badges
@@ -104,7 +100,7 @@ Be careful using two badges. Using color only and the lack of other visual cues
 might make it difficult to differentiate unread or actionable items associated 
 with the badges.
 
-<uxdot-example danger width-adjustment="77px">
-  <img src="../badge-best-practice-2.png" alt="Two badges with the same counter number, but with different background colors and no other unique visual cues which is incorrect usage">
+<uxdot-example danger width-adjustment="85px">
+  <img src="../badge-best-practice-two-badges-dont.svg" alt="Two badges with different background colors and no other unique visual cues which is incorrect usage">
 </uxdot-example>