Markdown table styling (#32)

docs/.vitepress/config.js

@@ -38,7 +38,7 @@ export default {
           { text: 'Search Filter', link: '/components/search-filter' },
           { text: 'Toggle', link: '/components/toggle' },
           { text: 'Promotion', link: '/components/promotion' },
-          { text: 'Navigation Row', link: '/components/nav-row' },
+          { text: 'Markdown', link: '/components/markdown' },
         ],
       },
     ],

docs/components/markdown.md

@@ -0,0 +1,38 @@
+# Markdown
+
+<script setup>
+import { renderHighlightedString } from 'omorphia';
+import { ref } from 'vue';
+
+const b = '`';
+const body = ref('');
+
+fetch('https://raw.githubusercontent.com/joeyespo/grip/master/tests/input/gfm-test.md')
+        .then((response) => response.text())
+        .then((response) => body.value = response)
+</script>
+
+:::raw
+<DemoContainer>
+<div style="width: 100%" class="markdown-body" v-html="renderHighlightedString(body)" />
+</DemoContainer>
+:::
+
+<style lang="scss">
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.15;
+  font-weight: revert;
+  font-size: revert;
+  margin: revert;
+}
+
+ul, ol {
+  list-style: revert;
+  margin: revert;
+  padding: revert;
+}
+
+blockquote {
+  margin: revert;
+}
+</style>

docs/components/nav-row.md

@@ -1,47 +0,0 @@
-# NavRow
-
-Note: the links and animation do not work in the documentation as Vue Router is not used for routing
-
-<DemoContainer>
-  <NavRow :links="[
-        {
-          label: 'Avatar',
-          href: '/components/avatar.html',
-        },
-        {
-          label: 'Badge',
-          href: '/components/nav-row.html',
-        },
-        {
-          label: 'Pagination',
-          href: '/components/Pagination.html',
-        },
-        {
-          label: 'NavRow',
-          href: '/components/nav-row.html',
-        }
-      ]" 
-/>
-</DemoContainer>
-
-```vue
-  <NavRow :links="[
-        {
-          label: 'Avatar',
-          href: '/components/avatar.html',
-        },
-        {
-          label: 'Badge',
-          href: '/components/nav-row.html',
-        },
-        {
-          label: 'Pagination',
-          href: '/components/Pagination.html',
-        },
-        {
-          label: 'NavRow',
-          href: '/components/nav-row.html',
-        }
-      ]" 
-/>
-```

lib/assets/styles/classes.scss

@@ -587,7 +587,7 @@ a,
   h1,
   h2 {
     padding: 10px 0 5px;
-    border-bottom: 1px solid var(--color-header-underline);
+    border-bottom: 1px solid var(--color-gray);
   }
 
   h1,
@@ -604,21 +604,23 @@ a,
 
   blockquote {
     padding: 0 1em;
-    color: var(--color-text);
+    color: var(--color-base);
-    border-left: 0.25em solid var(--color-block-quote);
+    border-left: 0.25em solid var(--color-button-bg);
   }
 
   a {
     cursor: pointer;
-    color: var(--color-link);
+    color: var(--color-blue);
 
     &:focus-visible,
     &:hover {
-      color: var(--color-link-hover);
+      filter: brightness(1.2);
+      text-decoration: none;
     }
 
     &:active {
-      color: var(--color-link-active);
+      filter: brightness(1.1);
+      text-decoration: none;
     }
   }
 
@@ -638,8 +640,8 @@ a,
   pre {
     margin-top: 1rem;
     padding: 14px;
-    border-radius: var(--size-rounded-sm);
+    border-radius: var(--radius-sm);
-    background-color: var(--color-code-bg);
+    background-color: var(--color-button-bg);
     overflow-x: auto;
 
     code {
@@ -652,14 +654,14 @@ a,
   code {
     padding: 0.2em 0.4em;
     font-size: 80%;
-    border-radius: var(--size-rounded-sm);
+    border-radius: var(--radius-sm);
-    background-color: var(--color-code-bg);
+    background-color: var(--color-button-bg);
-    color: var(--color-code-text);
+    color: var(--color-contrast);
   }
 
   hr {
     margin: 20px 0;
-    color: var(--color-divider);
+    color: var(--color-button-bg);
   }
 
   table {
@@ -670,8 +672,8 @@ a,
     border-collapse: separate;
     border-spacing: 0;
     line-height: 1.5;
-    border: 0.05rem solid var(--color-table-border);
+    border: 0.05rem solid var(--color-button-bg);
-    border-radius: var(--size-rounded-sm);
+    border-radius: var(--radius-sm);
 
     th {
       font-weight: 600;
@@ -680,33 +682,33 @@ a,
     td,
     th {
       padding: 0.4rem 0.85rem;
-      border: 0.05rem solid var(--color-table-border);
+      border: 0.05rem solid var(--color-button-bg);
     }
 
     tr:nth-child(2n) {
-      background-color: var(--color-table-alternate-row);
+      background-color: var(--color-accent-contrast);
     }
 
     th:first-of-type {
-      border-top-left-radius: var(--size-rounded-sm);
+      border-top-left-radius: var(--radius-sm);
     }
 
     th:last-of-type {
-      border-top-right-radius: var(--size-rounded-sm);
+      border-top-right-radius: var(--radius-sm);
     }
 
     tr:last-of-type td:first-of-type {
-      border-bottom-left-radius: var(--size-rounded-sm);
+      border-bottom-left-radius: var(--radius-sm);
     }
 
     tr:last-of-type td:last-of-type {
-      border-bottom-right-radius: var(--size-rounded-sm);
+      border-bottom-right-radius: var(--radius-sm);
     }
   }
 
   details {
     border: 0.15rem solid var(--color-button-bg);
-    border-radius: var(--size-rounded-sm);
+    border-radius: var(--radius-sm);
     padding: 0.5rem 0.5rem 0;
 
     summary {
@@ -715,10 +717,10 @@ a,
       padding: 0.5rem 0.8rem;
       cursor: pointer;
       background-color: var(--color-button-bg);
-      border-radius: var(--size-rounded-xs);
+      border-radius: var(--radius-xs);
 
       &:hover {
-        background-color: var(--color-button-bg-hover);
+        filter: brightness(0.85);
       }
     }
 
@@ -727,7 +729,7 @@ a,
 
       summary {
         margin-bottom: 0.5rem;
-        border-radius: var(--size-rounded-xs) var(--size-rounded-xs) 0 0;
+        border-radius: var(--radius-xs) var(--radius-xs) 0 0;
       }
 
       > :last-child:not(summary) {
@@ -763,9 +765,7 @@ select {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
-  background: url(http://dropdown/arrow/url/) no-repeat;
+  background: #cccccc url(http://dropdown/arrow/url/) no-repeat right center;
-  background-position: right center;
-  background-color: #cccccc;
   color: #000000;
   border: 1px solid #000000;
 }

lib/assets/styles/defaults.scss

@@ -172,3 +172,18 @@ button {
     transform: none !important;
   }
 }
+
+h1 {
+  color: var(--color-contrast);
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--color-contrast);
+}
+
+h3 {
+  margin-block: var(--gap-md) var(--gap-md);
+  color: var(--color-contrast);
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "files": [
     "dist"
   ],