fix: improve ul and ol list for nesting

Resolves #17
nuxt-themes · Dec 6, 2022 · 69d1e4f · 69d1e4f · vercel · Dec 6, 2022
1 parent 56eefbf
commit 69d1e4f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/.demo/content/example.md b/.demo/content/example.md
@@ -21,6 +21,11 @@
   I often have two or three paragraphs in these list items, too, so the hard part is getting the spacing between the paragraphs, list item heading, and separate list items to all make sense. Pretty tough honestly, you could make a strong argument that you just shouldn't write this way.
 - Last item
 
+
+- test
+  1. test
+  2. ok
+- test
 ```ts [filename.ts]
 const { data } = useNuxtApp() // This is a super long command that goes over the filename
 ```
diff --git a/components/global/ProseOl.vue b/components/global/ProseOl.vue
@@ -8,13 +8,17 @@
 css({
   ol: {
     listStyleType: '{prose.ol.listStyleType}',
+    padding: '{prose.ol.padding}',
     margin: '{prose.ol.margin}',
     "& > :deep(li)": {
       "&::marker": {
         color: '{prose.ol.li.markerColor.light}',
         "@dark": {
           color: '{prose.ol.li.markerColor.dark}'
         }
+      },
+      'ul, ol': {
+        margin: 0
       }
     }
   }

diff --git a/components/global/ProseUl.vue b/components/global/ProseUl.vue
@@ -8,13 +8,17 @@
 css({
   ul: {
     listStyleType: '{prose.ul.listStyleType}',
+    padding: '{prose.ul.padding}',
     margin: '{prose.ul.margin}',
     "& > :deep(li)": {
       "&::marker": {
         color: '{prose.ul.li.markerColor.light}',
         "@dark": {
           color: '{prose.ul.li.markerColor.dark}'
         }
+      },
+      'ul, ol': {
+        margin: 0
       }
     }
   }

diff --git a/tokens.config.ts b/tokens.config.ts
@@ -212,6 +212,7 @@ export default defineTheme({
     ul: {
       listStyleType: 'disc',
       margin: '{typography.verticalMargin.base} 0',
+      padding: '0 0 0 21px',
       li: {
         markerColor: {
           light: '{typography.color.secondary.300}',
@@ -222,6 +223,7 @@ export default defineTheme({
     ol: {
       listStyleType: 'decimal',
       margin: '{typography.verticalMargin.base} 0',
+      padding: '0 0 0 21px',
       li: {
         markerColor: {
           light: '{typography.color.secondary.500}',
@@ -231,7 +233,7 @@ export default defineTheme({
     },
     li: {
       margin: '{typography.verticalMargin.sm} 0',
-      listStylePosition: 'inside'
+      listStylePosition: 'outside'
     },
     hr: {
       margin: '{typography.verticalMargin.base} 0',