refactor(typography): use global line-height

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

@@ -3,11 +3,13 @@ import { c, cTB } from '../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      aTextColor
-    } = props.$local
+      $global: {
+        cubicBezierEaseInOut
+      },
+      $local: {
+        aTextColor
+      }
+    } = props
     return cTB('a', {
       cursor: 'pointer',
       transition: `

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

@@ -2,14 +2,17 @@ import { c, cTB, cM } from '../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
-    const { cubicBezierEaseInOut } = props.$global
     const {
-      blockquotePrefixColor,
-      blockquoteTextColor
-    } = props.$local
+      $global: { cubicBezierEaseInOut },
+      $local: {
+        blockquotePrefixColor,
+        blockquoteTextColor,
+        blockquoteLineHeight
+      }
+    } = props
     return cTB('blockquote', {
       raw: `
-        line-height: 1.75;
+        line-height: ${blockquoteLineHeight};
         margin: 0;
         margin-top: 12px;
         margin-bottom: 12px;

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

@@ -11,21 +11,24 @@ export default c([
 
 function headerStyle (level, props) {
   const {
-    $local
+    $local,
+    $global: {
+      cubicBezierEaseInOut
+    }
   } = props
-  const {
-    cubicBezierEaseInOut
-  } = props.$global
   const {
     headerTextColor,
-    headerFontWeight
+    headerFontWeight,
+    [createKey('headerBarWidth', level)]: barWidth,
+    [createKey('headerFontSize', level)]: fontSize,
+    [createKey('headerMargin', level)]: margin,
+    [createKey('headerPrefixWidth', level)]: prefixWidth
   } = $local
-  const barWidth = $local[createKey('headerBarWidth', level)]
   const barRadius = pxfy(depx(barWidth) / 2)
   return cTB('h' + level, {
-    fontSize: $local[createKey('headerFontSize', level)],
+    fontSize,
     fontWeight: headerFontWeight,
-    margin: $local[createKey('headerMargin', level)],
+    margin,
     transition: `color .3s ${cubicBezierEaseInOut}`,
     color: headerTextColor
   }, [
@@ -34,13 +37,13 @@ function headerStyle (level, props) {
     }),
     cM('prefix-bar', {
       position: 'relative',
-      paddingLeft: $local[createKey('headerPrefixWidth', level)]
+      paddingLeft: prefixWidth
     }, [
       cM('align-text', {
         paddingLeft: 0
       }, [
         c('&::before', {
-          left: '-' + $local[createKey('headerPrefixWidth', level)]
+          left: '-' + prefixWidth
         })
       ]),
       c('&::before', {

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

@@ -3,11 +3,13 @@ import { c, cTB } from '../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      hrColor
-    } = props.$local
+      $global: {
+        cubicBezierEaseInOut
+      },
+      $local: {
+        hrColor
+      }
+    } = props
     return cTB('hr', {
       margin: '12px 0',
       transition: `border-color .3s ${cubicBezierEaseInOut}`,

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

@@ -3,16 +3,18 @@ import { c, cTB, cB, cM } from '../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      olPadding,
-      ulPadding,
-      liFontSize,
-      liMargin,
-      liLineHeight,
-      liTextColor
-    } = props.$local
+      $local: {
+        olPadding,
+        ulPadding,
+        liFontSize,
+        liMargin,
+        liLineHeight,
+        liTextColor
+      },
+      $global: {
+        cubicBezierEaseInOut
+      }
+    } = props
     return [
       cTB('ol', {
         fontSize: liFontSize,

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

@@ -3,17 +3,19 @@ import { c, cTB, cM } from '../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut
-    } = props.$global
-    const {
-      pFontSize,
-      pLineHeight,
-      pMargin,
-      pTextColor,
-      pTextColor1Depth,
-      pTextColor2Depth,
-      pTextColor3Depth
-    } = props.$local
+      $local: {
+        pFontSize,
+        pLineHeight,
+        pMargin,
+        pTextColor,
+        pTextColor1Depth,
+        pTextColor2Depth,
+        pTextColor3Depth
+      },
+      $global: {
+        cubicBezierEaseInOut
+      }
+    } = props
     return cTB('p', {
       raw: `
         box-sizing: border-box;

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

@@ -3,26 +3,28 @@ import { c, cTB, cM } from '../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      cubicBezierEaseInOut,
-      fontWeightStrong,
-      fontFamilyMono
-    } = props.$global
-    const {
-      textColor,
-      textColorStrong,
-      textColor1Depth,
-      textColor2Depth,
-      textColor3Depth,
-      textColor1,
-      textColorInfo,
-      textColorSuccess,
-      textColorWarning,
-      textColorError,
-      codeBorderRadius,
-      codeTextColor,
-      codeColor,
-      codeBorderColor
-    } = props.$local
+      $global: {
+        cubicBezierEaseInOut,
+        fontWeightStrong,
+        fontFamilyMono
+      },
+      $local: {
+        textColor,
+        textColorStrong,
+        textColor1Depth,
+        textColor2Depth,
+        textColor3Depth,
+        textColor1,
+        textColorInfo,
+        textColorSuccess,
+        textColorWarning,
+        textColorError,
+        codeBorderRadius,
+        codeTextColor,
+        codeColor,
+        codeBorderColor
+      }
+    } = props
     return cTB('text', {
       transition: `color .3s ${cubicBezierEaseInOut}`,
       color: textColor

src/typography/styles/_common.js

@@ -24,10 +24,8 @@ export default {
   headerBarWidth5: '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'

src/typography/styles/dark.js

@@ -12,8 +12,10 @@ export default create({
       aTextColor: vars.primaryColor,
       blockquoteTextColor: vars.textColor2Overlay,
       blockquotePrefixColor: vars.borderColorOverlay,
+      blockquoteLineHeight: vars.lineHeight,
       codeBorderRadius: vars.borderRadiusSmall,
       liTextColor: vars.textColor2Overlay,
+      liLineHeight: vars.lineHeight,
       hrColor: vars.dividerColorOverlay,
       headerFontWeight: vars.fontWeightStrong,
       headerTextColor: vars.textColor1Overlay,
@@ -21,6 +23,7 @@ export default create({
       pTextColor1Depth: vars.textColor1Overlay,
       pTextColor2Depth: vars.textColor2Overlay,
       pTextColor3Depth: vars.textColor3Overlay,
+      pLineHeight: vars.lineHeight,
       headerBarColor: vars.primaryColor,
       headerBarColorPrimary: vars.primaryColor,
       headerBarColorInfo: vars.infoColor,

src/typography/styles/light.js

@@ -12,8 +12,10 @@ export default create({
       aTextColor: vars.primaryColor,
       blockquoteTextColor: vars.textColor2,
       blockquotePrefixColor: vars.borderColor,
+      blockquoteLineHeight: vars.lineHeight,
       codeBorderRadius: vars.borderRadiusSmall,
       liTextColor: vars.textColor2,
+      liLineHeight: vars.lineHeight,
       hrColor: vars.dividerColor,
       headerFontWeight: vars.fontWeightStrong,
       headerTextColor: vars.textColor1,
@@ -21,6 +23,7 @@ export default create({
       pTextColor1Depth: vars.textColor1,
       pTextColor2Depth: vars.textColor2,
       pTextColor3Depth: vars.textColor3,
+      pLineHeight: vars.lineHeight,
       headerBarColor: vars.primaryColor,
       headerBarColorPrimary: vars.primaryColor,
       headerBarColorInfo: vars.infoColor,