Revert "added missing properties to the list and added docs"

This reverts commit ecbe1a8.

Author: JesmoDev

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

@@ -86,14 +86,7 @@ const propertySizeTemplate = (property: any) => html` <uui-table-row>
 </uui-table-row>`;
 
 export const InterfaceColors = () => {
-  const surface = [
-    'surface',
-    'background',
-    'text',
-    'color-border',
-    'divider',
-    'interactive',
-  ];
+  const surface = ['surface', 'background', 'text', 'color-border', 'divider'];
   const state = ['selected', 'current', 'disabled'];
   const color = ['primary', 'positive', 'warning', 'danger', 'disabled'];
   const universal = ['header', 'focus', 'hover'];
@@ -105,68 +98,6 @@ 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>