feat(typography): li & p line-height & font-size config

src/typography/src/styles/themed-list.cssr.js

@@ -6,11 +6,17 @@ export default c([
       cubicBezierEaseInOut
     } = props.$base
     const {
+      olPadding,
+      ulPadding,
+      liFontSize,
+      liMargin,
+      liLineHeight,
       liTextColor
     } = props.$local
     return [
       cTB('ol', {
-        paddingLeft: '1.75em'
+        fontSize: liFontSize,
+        padding: olPadding
       }, [
         cM('align-text', {
           paddingLeft: 0
@@ -20,20 +26,21 @@ export default c([
         })
       ]),
       cTB('ul', {
-        paddingLeft: '1.75em'
+        fontSize: liFontSize,
+        padding: ulPadding
       }, [
         cM('align-text', {
           paddingLeft: 0
         }),
         cB('li', {
+          margin: liMargin,
           color: liTextColor
         })
       ]),
       cB('li', {
         transition: `color .3s ${cubicBezierEaseInOut}`,
-        lineHeight: '1.75em',
-        marginBottom: 0,
-        fontSize: '14px'
+        lineHeight: liLineHeight,
+        marginBottom: 0
       })
     ]
   }

src/typography/src/styles/themed-p.cssr.js

@@ -6,6 +6,9 @@ export default c([
       cubicBezierEaseInOut
     } = props.$base
     const {
+      pFontSize,
+      pLineHeight,
+      pMargin,
       pTextColor,
       pTextColor1Depth,
       pTextColor2Depth,
@@ -15,9 +18,9 @@ export default c([
       raw: `
         box-sizing: border-box;
         transition: color .3s ${cubicBezierEaseInOut};
-        margin: 12px 0 16px 0;
-        font-size: 14px;
-        line-height: 1.75;
+        margin: ${pMargin};
+        font-size: ${pFontSize};
+        line-height: ${pLineHeight};
       `,
       color: pTextColor
     }, [

src/typography/styles/_common.js

@@ -1,16 +1,16 @@
 export default {
   headerFontSize1: '30px',
-  headerFontSize2: '24px',
+  headerFontSize2: '22px',
   headerFontSize3: '18px',
   headerFontSize4: '16px',
-  headerFontSize5: '14px',
-  headerFontSize6: '14px',
-  headerMargin1: '1.6em 0 .8em 0',
-  headerMargin2: '1.5em 0 .8em 0',
-  headerMargin3: '1.5em 0 1.2em 0',
-  headerMargin4: '1.4em 0 1.2em 0',
-  headerMargin5: '1.4em 0 1.2em 0',
-  headerMargin6: '1.4em 0 1.2em 0',
+  headerFontSize5: '16px',
+  headerFontSize6: '16px',
+  headerMargin1: '24px 0 16px 0',
+  headerMargin2: '24px 0 16px 0',
+  headerMargin3: '24px 0 16px 0',
+  headerMargin4: '24px 0 16px 0',
+  headerMargin5: '24px 0 16px 0',
+  headerMargin6: '24px 0 16px 0',
   headerPrefixWidth1: '16px',
   headerPrefixWidth2: '16px',
   headerPrefixWidth3: '12px',
@@ -22,5 +22,13 @@ export default {
   headerBarWidth3: '3px',
   headerBarWidth4: '3px',
   headerBarWidth5: '3px',
-  headerBarWidth6: '3px'
+  headerBarWidth6: '3px',
+  pFontSize: '14px',
+  pLineHeight: '1.6',
+  pMargin: '0 0 16px 0',
+  liMargin: '.25em 0 0 0',
+  liLineHeight: '1.6',
+  liFontSize: '14px',
+  olPadding: '0 0 0 2em',
+  ulPadding: '0 0 0 2em'
 }