docs(accordion): update best practices (#2029)

* docs(accordion): update best practices

* docs(accordion): fix image and add color-palette to examples

* docs(accordion): add back width and height of images

* docs(accordion): fix width-adjustment value

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

@@ -166,35 +166,76 @@ smaller.
 </rh-table>
 
 ## Best practices
-### One panel
 
-Do not display one panel only, use an expandable section instead.
+### One panel
 
-<uxdot-example danger width-adjustment="872px">
-  <img alt="Accordion having only one panel is incorrect usage"
-      src="../accordion-best-practice-1.png" 
-      width="872"
-      height="61">
-</uxdot-example>
+<div class="grid sm-two-columns">
+  <uxdot-best-practice variant="do">
+    <uxdot-example width-adjustment="482px" slot="image">
+      <img src="../accordion-best-practices-one-panel-do.svg"
+            alt="Two accordion panels"
+            width="482"
+            height="117">
+    </uxdot-example>
+    <p>Use accordion in groups of two or more.</p>
+  </uxdot-best-practice>
+
+  <uxdot-best-practice variant="dont">
+    <uxdot-example width-adjustment="482px" slot="image">
+      <img src="../accordion-best-practices-one-panel-dont.svg"
+            alt="One accordion panel"
+            width="482"
+            height="117">
+    </uxdot-example>
+    <p>Do not display one panel only.</p>
+  </uxdot-best-practice>
+</div>
 
 ### Text readability
 
-Text within panels should not exceed `750px` to maintain optimal readability.
+<uxdot-best-practice variant="do">
+  <uxdot-example slot="image" width-adjustment="1012px">
+    <img src="../accordion-best-practices-text-readability-do.svg" 
+        alt="Text in an expanded accordion has a limited width and does not fill wide accordion"
+        width="1012"
+        height="280">
+  </uxdot-example>
 
-<uxdot-example danger width-adjustment="872px">
-  <img src="../accordion-best-practice-2.png" 
-      alt="Accordion with body text exceeding 750px wide which is incorrect usage"
-      width="872"
-      height="213">
-</uxdot-example>
+  <p>The text in a panel should be limited to a maximum width of 750px, which maintains optimal readability.</p>
+</uxdot-best-practice>
+
+<uxdot-best-practice variant="dont">
+  <uxdot-example slot="image" width-adjustment="1012px">
+    <img  src="../accordion-best-practices-text-readability-dont.svg" 
+        alt="Text in an expanded accordion fills wide accordion"
+        width="1012"
+        height="280">
+  </uxdot-example>
+
+  <p>Do not allow text within panels to fill the entire width of a panel, if the text would exceed a width of 750px.</p>
+</uxdot-best-practice>
 
 ### Mixing themes
 
-Do not use a dark theme accordion in a light theme environment and vice versa.
+<div class="grid sm-two-columns">
+  <uxdot-best-practice variant="do">
+    <uxdot-example slot="image" color-palette="darkest" width-adjustment="482px">
+      <img src="../accordion-best-practices-mixing-themes-do.svg"
+            alt="Dark theme accordion against a dark background"
+            width="482"
+            height="256">
+    </uxdot-example>
+    <p>An accordion group should match the theme of the container it’s in. This ensures that all of the text is visible and has adequate color contrast.</p>
+  </uxdot-best-practice>
+
+  <uxdot-best-practice variant="dont">
+    <uxdot-example slot="image" color-palette="darkest" width-adjustment="482px">
+      <img src="../accordion-best-practices-mixing-themes-dont.svg"
+            alt="Light theme accordion against a light background"
+            width="482"
+            height="256">
+    </uxdot-example>
+    <p>Do not use a light theme accordion in a dark theme environment and vice versa because it may cause accessibility and usability issues.</p>
+  </uxdot-best-practice>
+</div>
 
-<uxdot-example danger width-adjustment="872px">
-  <img alt="Do not use a dark theme accordion in a light theme environment and vice versa"
-      src="../accordion-best-practice-3.png"
-      width="872"
-      height="181">
-</uxdot-example>