added missing properties to the list and added docs

Author: JesmoDev

packages/uui-css/lib/custom-properties.story.ts

@@ -86,7 +86,14 @@ const propertySizeTemplate = (property: any) => html` <uui-table-row>
 </uui-table-row>`;
 
 export const InterfaceColors = () => {
-  const surface = ['surface', 'background', 'text', 'color-border', 'divider'];
+  const surface = [
+    'surface',
+    'background',
+    'text',
+    'color-border',
+    'divider',
+    'interactive',
+  ];
   const state = ['selected', 'current', 'disabled'];
   const color = ['primary', 'positive', 'warning', 'danger', 'disabled'];
   const universal = ['header', 'focus', 'hover'];
@@ -98,6 +105,68 @@ export const InterfaceColors = () => {
       specific look.
     </p>
 
+    <h3>Naming convention</h3>
+    <p>Here's a description and examples of how to use the interface colors.</p>
+    <h4>Color variants</h4>
+    <p>Most colors has up to 3 variants.</p>
+    <ul>
+      <li>
+        <b>Contrast</b> - This color will stand out and be readable with the
+        main color as it's background. Mostly used for text and icons.
+      </li>
+      <li>
+        <b>Standalone</b> - This color will have a higher contrast to the
+        surface color than it's main variant. Example: if the surface color is
+        light, the standalone variant will be a darker variant of the main
+        color. Often used when thin or smaller items has to stand out on the
+        surface backgrounds. Items such as: text, icons and border.
+      </li>
+      <li>
+        <b>Emphasis</b> - Used when you want to emphasize an element, make it
+        stand out. Mostly used for hover and focus states.
+      </li>
+    </ul>
+    <h4>Text and interactables</h4>
+    <ul>
+      <li>
+        <b>Text</b> - Used for most text, or icons appearing together with text
+      </li>
+      <li>
+        <b>Interactable</b> - Used when the text or icon is interactable, such
+        as a link
+      </li>
+    </ul>
+    <h4>States</h4>
+    <ul>
+      <li>
+        <b>Selected</b> - Used to highlight the text or background color of
+        items that are currently selected.
+      </li>
+      <li>
+        <b>Current</b> - Only used to show navigation. Example: Background or
+        text color of the current tab or breadcrumb.
+      </li>
+      <li><b>Disabled</b> - For elements that are disabled.</li>
+    </ul>
+    <h4>Borders and dividers</h4>
+    <ul>
+      <li><b>Border</b> - Used when an element needs a border around it</li>
+      <li>
+        <b>Divider</b> - For elements that needs to be visually separated.
+        Example: a list of items
+      </li>
+    </ul>
+    <h4>Misc</h4>
+    <ul>
+      <li><b>Surface</b> - The main background color for elements</li>
+      <li><b>Background</b> - The main background color of the app</li>
+      <li><b>Header</b> - Background color of the header of the app</li>
+      <li>
+        <b>Focus</b> - Color for the focus outline on inputs, buttons, links and
+        so on
+      </li>
+    </ul>
+
     <h3>Surface</h3>
     <uui-table @click=${copyToClipboard}>
       <uui-table-head>