fix: continue tokenisation & prose cleanup (#505)

* ProseEm

* ProseH1

* ProseH2

* ProseH3

* ProseH4

* ProseHr

* ProseImg

* ProseLi

src/defaultTheme/components/atoms/prose/ProseEm.vue

@@ -6,15 +6,6 @@
 
 <style lang="postcss" scoped>
 em {
-  font-style: theme('fontStyle.italic');
-}
-a em {
-  color: inherit;
-}
-
-.dark {
-  a em {
-    color: inherit;
-  }
+  @apply italic text-current;
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseH1.vue

@@ -5,21 +5,12 @@
 <style lang="postcss" scoped>
 h1 {
   /* TODO */
+  /* extend.fontSize do not work in Windi */
   font-size: 2rem;
-  /* scroll-margin-block: var(--docs-scroll-margin-block); */
-  /* color: theme('colors.gray.900'); */
-  letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  line-height: theme('lineHeight.snug');
-  font-weight: theme('fontWeight.semibold');
+  @apply tracking-tight leading-snug font-semibold mt-[1em] mb-[0.5em];
 }
 
 h1 + * {
-  margin-top: 0;
-}
-
-.dark h1 {
-  color: theme('colors.gray.100');
+  @apply mt-0;
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseH2.vue

@@ -5,21 +5,12 @@
 <style lang="postcss" scoped>
 h2 {
   /* TODO */
+  /* extend.fontSize do not work in Windi */
   font-size: 1.5rem;
-  /* scroll-margin-block: var(--docs-scroll-margin-block); */
-  /* color: theme('colors.gray.900'); */
-  letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1.25em;
-  margin-bottom: 0.5em;
-  line-height: theme('lineHeight.snug');
-  font-weight: theme('fontWeight.semibold');
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
 }
 
 h2 + * {
-  margin-top: 0;
-}
-
-.dark h2 {
-  color: theme('colors.gray.100');
+  @apply mt-0;
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseH3.vue

@@ -5,21 +5,12 @@
 <style lang="postcss" scoped>
 h3 {
   /* TODO */
+  /* extend.fontSize do not work in Windi */
   font-size: 1.25rem;
-  /* scroll-margin-block: var(--docs-scroll-margin-block); */
-  /* color: theme('colors.gray.900'); */
-  letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1.25em;
-  margin-bottom: 0.5em;
-  line-height: theme('lineHeight.snug');
-  font-weight: theme('fontWeight.semibold');
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
 }
 
 h3 + * {
-  margin-top: 0;
-}
-
-.dark h3 {
-  color: theme('colors.gray.100');
+  @apply mt-0;
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseH4.vue

@@ -5,21 +5,12 @@
 <style lang="postcss" scoped>
 h4 {
   /* TODO */
+  /* extend.fontSize do not work in Windi */
   font-size: 1.125rem;
-  /* scroll-margin-block: var(--docs-scroll-margin-block); */
-  color: theme('colors.gray.900');
-  letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1.25em;
-  margin-bottom: 0.5em;
-  line-height: theme('lineHeight.snug');
-  font-weight: theme('fontWeight.semibold');
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
 }
 
 h4 + * {
-  margin-top: 0;
-}
-
-.dark h4 {
-  color: theme('colors.gray.100');
+  @apply mt-0;
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseHr.vue

@@ -4,16 +4,10 @@
 
 <style lang="postcss" scoped>
 hr {
-  border-top: 1px solid theme('colors.gray.100');
-  margin-top: theme('margin.8');
-  margin-bottom: theme('margin.8');
+  @apply d-prose-hr-border my-8;
 }
 
 hr + * {
-  margin-top: 0;
-}
-
-.dark hr {
-  border-color: theme('colors.gray.800');
+  @apply mt-0;
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseImg.vue

@@ -27,7 +27,6 @@ export default {
 
 <style lang="postcss" scoped>
 >>> img {
-  margin-top: 1em;
-  margin-bottom: 1em;
+  @apply my-[1em];
 }
 </style>

src/defaultTheme/components/atoms/prose/ProseLi.vue

@@ -3,69 +3,29 @@
 </template>
 
 <style lang="postcss" scoped>
+li {
+  @apply relative my-[0.25em] pl-4;
+  p {
+    @apply my-[0.75em];
+  }
+}
+
 ul li {
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
-  position: relative;
-  padding-left: 1.75em;
   &::before {
-    @apply d-secondary-bg;
+    @apply absolute left-0 top-[0.5em] d-prose-ul-li-bullet rounded-full w-1.5 h-1.5;
     content: '';
-    position: absolute;
-    /* background-color: theme('colors.gray.300'); */
-    border-radius: 50%;
-    width: 0.375em;
-    height: 0.375em;
-    top: calc(0.875em - 0.1875em);
-    left: 0.25em;
-  }
-  /* *:first-child {
-      margin-top: 1.25em;
-    } */
-  /* *:last-child {
-      margin-bottom: 0.5em;
-    } */
-  p {
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
   }
 }
 
-/* .dark ul li::before {
-  background-color: theme('colors.gray.600');
-} */
-
 ol li {
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
-  position: relative;
-  padding-left: 1.75em;
   &::before {
+    @apply absolute left-0 top-0 d-secondary-text;
     content: counter(list-item, decimal) '.';
     content: counter(list-item, var(--list-counter-style, decimal)) '.';
-    position: absolute;
-    font-weight: 500;
-    color: theme('colors.gray.600');
-    left: 0;
-  }
-  /* *:first-child {
-      margin-top: 1.25em;
-    } */
-  /* *:last-child {
-      margin-bottom: 0.5em;
-    } */
-  p {
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
   }
 }
 
 >>> .nuxt-content-highlight {
-  margin: 0;
-}
-
-ol li::before {
-  @apply d-secondary-text;
-  /* color: theme('colors.red.400'); */
+  @apply m-0;
 }
 </style>

src/defaultTheme/settings.ts

@@ -65,6 +65,8 @@ const defaultThemeSettings = {
     'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-gray-800',
     'd-prose-code-filename-text': 'text-gray-600 dark:text-gray-400',
     'd-prose-code-inline-in-heading-border-hover': 'border-gray-500 dark:border-gray-200',
+    'd-prose-hr-border': 'border-t border-gray-100 dark:border-gray-800',
+    'd-prose-ul-li-bullet': 'd-secondary-bg',
     // Icons
     'd-text-icon': 'd-secondary-text hover:d-secondary-text-hover',
     'd-icon': 'd-text-icon focus:outline-none',