refactor: colors docs optimization (#99)

refactor: let's use a dl dt/dd here for semantics

Author: mfranzke

source/_patterns/colors/intro.hbs

@@ -6,19 +6,17 @@
         <p>Background colors define their own foreground color by so named on-colors. For using the DB Design System with SCSS, we provide a wide range of SCSS placeholders and utility 
             classes that automatically style e.g. text and links based on their current background color. For more information have a look at the usage section.</p>
 
-
         <h2>Color Scheme – Primary (Example)</h2>
         <p>The following example shows the available colors for the primary brand color. 
             Each defined color has an interactive mode which means that colors for hover and pressed states are defined.</p>
-        <ul>
-            <li><b>Primary</b> – base key color</li>
-            <li><b>On Primary</b> – is applied to content (icons, text, etc.) that sits on top of primary</li>
-            <li><b>Primary Background-Light</b> – background color for current key color. Only used for backrounds.</li>
-            <li><b>Primary Background-Transparent</b> – Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.</li>
-            <li><b>On Primary Background</b> – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).</li>
-            <li><b>On Primary Background Weak</b> – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.
-            </li>
-        </ul>
+        <dl class="DO-NOT-COPY-THIS-CLASS-example-docs-listing">
+            <dt>Primary</dt><dd>base key color</dd>
+            <dt>On Primary</dt><dd>is applied to content (icons, text, etc.) that sits on top of primary</dd>
+            <dt>Primary Background-Light</dt><dd>background color for current key color. Only used for backrounds.</dd>
+            <dt>Primary Background-Transparent</dt><dd>Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.</dd>
+            <dt>On Primary Background</dt><dd>is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).</dd>
+            <dt>On Primary Background Weak</dt><dd>is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.</dd>
+        </dl>
 
         <h3>Color Scheme Illustration</h3>
         <figure class="color-scheme-illustration">