minor markdown table style improvements

Author: mrin9

src/components/schema-table.js

@@ -82,7 +82,7 @@ export default class SchemaTable extends LitElement {
             ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
           </div>
         </div>
-          <div style='padding: 5px 0; color:var(--fg3)'> 
+          <div style='padding: 5px 0; color:var(--fg2)'> 
             <span class='bold-text upper'> ${this.data ? this.data['::type'] : ''}</span> 
             <span class='m-markdown' >${this.data ? unsafeHTML(marked(this.data['::description'] || '')) : ''}</span>
           </div>

src/components/schema-tree.js

@@ -83,7 +83,7 @@ export default class SchemaTree extends LitElement {
     return html`
       <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
         <div class='toolbar'>
-          <div class='toolbar-item bold-text upper' style='cursor:auto; color:var(--fg3)'> ${this.data ? this.data['::type'] : ''} </div>
+          <div class='toolbar-item bold-text upper' style='cursor:auto; color:var(--fg2)'> ${this.data ? this.data['::type'] : ''} </div>
           <div style="flex:1"></div>
           <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
             ${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}

src/styles/font-styles.js

@@ -140,7 +140,7 @@ export default css`
     margin-top: 4px;
     padding: 2px 4px;
     background-color: var(--bg3);
-    color: var(--fg3);
+    color: var(--fg2);
   }
 
   .m-markdown-small pre code,
@@ -205,6 +205,7 @@ export default css`
   .m-markdown th {
     vertical-align: top;
     border-top: 1px solid var(--border-color);
+    line-height: calc(var(--font-size-small) + 4px);
   }
 
   .m-markdown-small tr:first-child th,

src/styles/table-styles.js

@@ -27,7 +27,7 @@ export default css`
 }
 
 .m-table th {
-  color: var(--fg3);
+  color: var(--fg2);
   font-size: var(--font-size-small);
   line-height: calc(var(--font-size-small) + 18px);
   font-weight: 600;

src/templates/components-template.js

@@ -13,7 +13,7 @@ function componentBodyTemplate(sComponent) {
       <h1> ${sComponent.name} </h1>
       ${sComponent.component
     ? html`
-      <div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg3)'> 
+      <div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg2)'> 
         
       <json-tree
         class="border tree"