refactor(typography): ts

src/typography/demos/enUS/index.demo-entry.md

@@ -14,11 +14,6 @@ text
 
 ## Props
 
-### All Typography Components Props
-
-| Name | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-
 ### Text Props
 
 | Name | Type | Default | Description |

src/typography/demos/zhCN/index.demo-entry.md

@@ -14,11 +14,6 @@ text
 
 ## Props
 
-### 全部排版组件
-
-| 名称 | 类型 | 默认值 | 说明 |
-| ---- | ---- | ------ | ---- |
-
 ### Text Props
 
 | 名称 | 类型 | 默认值 | 说明 |

src/typography/index.js

@@ -1,9 +0,0 @@
-export { NH1, NH2, NH3, NH4, NH5, NH6 } from './src/headers.js'
-export { default as A } from './src/a.vue'
-export { default as P } from './src/p.vue'
-export { default as NBlockquote } from './src/blockquote.vue'
-export { default as NHr } from './src/hr.vue'
-export { default as NUl } from './src/ul.vue'
-export { default as NOl } from './src/ol.vue'
-export { default as NLi } from './src/li.vue'
-export { default as NText } from './src/text.vue'

src/typography/index.ts

@@ -0,0 +1,9 @@
+export { NH1, NH2, NH3, NH4, NH5, NH6 } from './src/headers'
+export { default as A } from './src/a'
+export { default as P } from './src/p'
+export { default as NBlockquote } from './src/blockquote'
+export { default as NHr } from './src/hr'
+export { default as NUl } from './src/ul'
+export { default as NOl } from './src/ol'
+export { default as NLi } from './src/li'
+export { default as NText } from './src/text'

src/typography/src/a.tsx

@@ -0,0 +1,58 @@
+import {
+  h,
+  defineComponent,
+  computed,
+  resolveComponent,
+  renderSlot,
+  CSSProperties
+} from 'vue'
+import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
+import { typographyLight } from '../styles'
+import type { TypographyTheme } from '../styles'
+import style from './styles/a.cssr'
+
+export default defineComponent({
+  name: 'A',
+  props: {
+    ...(useTheme.props as ThemeProps<TypographyTheme>),
+    to: {
+      type: [String, Object],
+      default: null
+    }
+  },
+  setup (props) {
+    const themeRef = useTheme('Typography', 'A', style, typographyLight, props)
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { aTextColor }
+        } = themeRef.value
+        return {
+          '--text-color': aTextColor,
+          '--bezier': cubicBezierEaseInOut
+        }
+      })
+    }
+  },
+  render () {
+    const RouterLink = resolveComponent('router-link')
+    if (RouterLink && this.to) {
+      return h(
+        RouterLink,
+        {
+          class: 'n-a',
+          to: this.to,
+          style: this.cssVars
+        },
+        renderSlot(this.$slots, 'default')
+      )
+    }
+    return (
+      <a class="n-a" style={this.cssVars as CSSProperties}>
+        {renderSlot(this.$slots, 'default')}
+      </a>
+    )
+  }
+})

src/typography/src/a.vue

@@ -1,39 +0,0 @@
-<template>
-  <router-link v-if="to" class="n-a" :to="to" :style="cssVars">
-    <slot />
-  </router-link>
-  <a v-else class="n-a" :style="cssVars"><slot /></a>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-import { useTheme } from '../../_mixins'
-import { typographyLight } from '../styles'
-import style from './styles/a.cssr.js'
-
-export default defineComponent({
-  name: 'A',
-  props: {
-    ...useTheme.props,
-    to: {
-      type: [String, Object],
-      default: null
-    }
-  },
-  setup (props) {
-    const themeRef = useTheme('Typography', 'A', style, typographyLight, props)
-    return {
-      cssVars: computed(() => {
-        const {
-          common: { cubicBezierEaseInOut },
-          self: { aTextColor }
-        } = themeRef.value
-        return {
-          '--text-color': aTextColor,
-          '--bezier': cubicBezierEaseInOut
-        }
-      })
-    }
-  }
-})
-</script>

src/typography/src/blockquote.tsx

@@ -1,25 +1,14 @@
-<template>
-  <blockquote
-    class="n-blockquote"
-    :class="{
-      'n-blockquote--align-text': alignText
-    }"
-    :style="cssVars"
-  >
-    <slot />
-  </blockquote>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+import { h, renderSlot, defineComponent, computed, CSSProperties } from 'vue'
 import { useTheme } from '../../_mixins'
-import style from './styles/blockquote.cssr.js'
+import type { ThemeProps } from '../../_mixins'
+import style from './styles/blockquote.cssr'
 import { typographyLight } from '../styles'
+import type { TypographyTheme } from '../styles'
 
 export default defineComponent({
   name: 'Blockquote',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<TypographyTheme>),
     alignText: {
       type: Boolean,
       default: false
@@ -53,6 +42,20 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    return (
+      <blockquote
+        class={[
+          'n-blockquote',
+          {
+            'n-blockquote--align-text': this.alignText
+          }
+        ]}
+        style={this.cssVars as CSSProperties}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </blockquote>
+    )
   }
 })
-</script>

src/typography/src/create-header.ts

@@ -1,16 +1,21 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, defineComponent, computed, PropType } from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { getSlot, createKey } from '../../_utils'
 import { typographyLight } from '../styles'
-import style from './styles/header.cssr.js'
+import type { TypographyTheme } from '../styles'
+import style from './styles/header.cssr'
 
-export default (level) =>
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export default (level: '1' | '2' | '3' | '4' | '5' | '6') =>
   defineComponent({
-    name: 'H' + level,
+    name: `H${level}`,
     props: {
-      ...useTheme.props,
+      ...(useTheme.props as ThemeProps<TypographyTheme>),
       type: {
-        type: String,
+        type: String as PropType<
+        'info' | 'success' | 'warning' | 'error' | 'default'
+        >,
         default: 'default'
       },
       prefix: {
@@ -38,10 +43,10 @@ export default (level) =>
             self: {
               headerFontWeight,
               headerTextColor,
-              [`headerPrefixWidth${level}`]: prefixWidth,
-              [`headerFontSize${level}`]: fontSize,
-              [`headerMargin${level}`]: margin,
-              [`headerBarWidth${level}`]: barWidth,
+              [createKey('headerPrefixWidth', level)]: prefixWidth,
+              [createKey('headerFontSize', level)]: fontSize,
+              [createKey('headerMargin', level)]: margin,
+              [createKey('headerBarWidth', level)]: barWidth,
               [createKey('headerBarColor', type)]: barColor
             }
           } = themeRef.value

src/typography/src/headers.js

@@ -1,8 +0,0 @@
-import createHeader from './create-header'
-
-export const NH1 = createHeader(1)
-export const NH2 = createHeader(2)
-export const NH3 = createHeader(3)
-export const NH4 = createHeader(4)
-export const NH5 = createHeader(5)
-export const NH6 = createHeader(6)

src/typography/src/headers.ts

@@ -0,0 +1,8 @@
+import createHeader from './create-header'
+
+export const NH1 = createHeader('1')
+export const NH2 = createHeader('2')
+export const NH3 = createHeader('3')
+export const NH4 = createHeader('4')
+export const NH5 = createHeader('5')
+export const NH6 = createHeader('6')

src/typography/src/hr.tsx

@@ -1,18 +1,15 @@
-<template>
-  <ul class="n-hr" :style="cssVars">
-    <slot />
-  </ul>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+import { h, defineComponent, computed, CSSProperties } from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
-import style from './styles/hr.cssr.js'
+import type { TypographyTheme } from '../styles'
+import style from './styles/hr.cssr'
 
 export default defineComponent({
   name: 'Hr',
-  props: useTheme.props,
+  props: {
+    ...(useTheme.props as ThemeProps<TypographyTheme>)
+  },
   setup (props) {
     const themeRef = useTheme('Typography', 'Hr', style, typographyLight, props)
     return {
@@ -22,6 +19,8 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    return <hr class="n-hr" style={this.cssVars as CSSProperties} />
   }
 })
-</script>

src/typography/src/li.tsx

@@ -0,0 +1,25 @@
+import { defineComponent, h, renderSlot } from 'vue'
+
+export default defineComponent({
+  name: 'Li',
+  props: {
+    alignText: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render () {
+    return (
+      <li
+        class={[
+          'n-li',
+          {
+            'n-li--align-text': this.alignText
+          }
+        ]}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </li>
+    )
+  }
+})

src/typography/src/li.vue

@@ -1,24 +0,0 @@
-<template>
-  <li
-    class="n-li"
-    :class="{
-      'n-li--align-text': alignText
-    }"
-  >
-    <slot />
-  </li>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Li',
-  props: {
-    alignText: {
-      type: Boolean,
-      default: false
-    }
-  }
-})
-</script>

src/typography/src/ol.tsx

@@ -1,25 +1,14 @@
-<template>
-  <ol
-    class="n-ol"
-    :class="{
-      'n-ol--align-text': alignText
-    }"
-    :style="cssVars"
-  >
-    <slot />
-  </ol>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+import { h, defineComponent, computed, renderSlot, CSSProperties } from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
-import style from './styles/list.cssr.js'
+import type { TypographyTheme } from '../styles'
+import style from './styles/list.cssr'
 
 export default defineComponent({
   name: 'Ol',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<TypographyTheme>),
     alignText: {
       type: Boolean,
       default: false
@@ -57,6 +46,20 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    return (
+      <ol
+        class={[
+          'n-ol',
+          {
+            'n-ol--align-text': this.alignText
+          }
+        ]}
+        style={this.cssVars as CSSProperties}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </ol>
+    )
   }
 })
-</script>

src/typography/src/p.tsx

@@ -0,0 +1,57 @@
+import {
+  h,
+  defineComponent,
+  computed,
+  renderSlot,
+  PropType,
+  CSSProperties
+} from 'vue'
+import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
+import { typographyLight } from '../styles'
+import type { TypographyTheme } from '../styles'
+import style from './styles/p.cssr'
+
+export default defineComponent({
+  name: 'P',
+  props: {
+    ...(useTheme.props as ThemeProps<TypographyTheme>),
+    depth: {
+      type: String as PropType<1 | 2 | 3 | '1' | '2' | '3' | undefined>,
+      default: undefined
+    }
+  },
+  setup (props) {
+    const themeRef = useTheme('Typography', 'P', style, typographyLight, props)
+    return {
+      cssVars: computed(() => {
+        const { depth } = props
+        const typeSafeDepth = depth || '1'
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            pFontSize,
+            pLineHeight,
+            pMargin,
+            pTextColor,
+            [`pTextColor${typeSafeDepth}Depth` as `pTextColor${typeof typeSafeDepth}Depth`]: depthTextColor
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--font-size': pFontSize,
+          '--line-height': pLineHeight,
+          '--margin': pMargin,
+          '--text-color': depth === undefined ? pTextColor : depthTextColor
+        }
+      })
+    }
+  },
+  render () {
+    return (
+      <p class="n-p" style={this.cssVars as CSSProperties}>
+        {renderSlot(this.$slots, 'default')}
+      </p>
+    )
+  }
+})

src/typography/src/p.vue

@@ -1,49 +0,0 @@
-<template>
-  <p class="n-p" :style="cssVars">
-    <slot />
-  </p>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-import { useTheme } from '../../_mixins'
-import style from './styles/p.cssr.js'
-import { typographyLight } from '../styles'
-
-export default defineComponent({
-  name: 'P',
-  props: {
-    ...useTheme.props,
-    depth: {
-      validator (value) {
-        return [1, 2, 3, '1', '2', '3'].includes(value)
-      },
-      default: undefined
-    }
-  },
-  setup (props) {
-    const themeRef = useTheme('Typography', 'P', style, typographyLight, props)
-    return {
-      cssVars: computed(() => {
-        const { depth } = props
-        const {
-          common: { cubicBezierEaseInOut },
-          self: {
-            pFontSize,
-            pLineHeight,
-            pMargin,
-            [depth ? `pTextColor${depth}Depth` : 'pTextColor']: textColor
-          }
-        } = themeRef.value
-        return {
-          '--bezier': cubicBezierEaseInOut,
-          '--font-size': pFontSize,
-          '--line-height': pLineHeight,
-          '--margin': pMargin,
-          '--text-color': textColor
-        }
-      })
-    }
-  }
-})
-</script>

src/typography/src/styles/hr.cssr.ts

@@ -5,8 +5,8 @@ import { cB } from '../../../_utils/cssr'
 export default cB('hr', `
   margin: 12px 0;
   transition: border-color .3s var(--bezier);
-  borderLeft: none;
-  borderRight: none;
-  borderBottom: none;
-  borderTop: 1px solid var(--color);
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  border-top: 1px solid var(--color);
 `)

src/typography/src/text.tsx

@@ -1,57 +1,23 @@
-<template>
-  <code
-    v-if="code"
-    class="n-text"
-    :class="{
-      'n-text--code': code,
-      'n-text--delete': $props.delete,
-      'n-text--strong': strong,
-      'n-text--italic': italic,
-      'n-text--underline': underline
-    }"
-    :style="cssVars"
-  ><template v-if="!$props.delete"><slot /></template><del v-else><slot /></del></code>
-  <del
-    v-else-if="$props.delete"
-    class="n-text"
-    :class="{
-      'n-text--code': code,
-      'n-text--delete': $props.delete,
-      'n-text--strong': strong,
-      'n-text--italic': italic,
-      'n-text--underline': underline
-    }"
-    :style="cssVars"
-  ><slot /></del>
-  <component
-    :is="compitableTag || 'span'"
-    v-else
-    class="n-text"
-    :class="{
-      'n-text--code': code,
-      'n-text--delete': $props.delete,
-      'n-text--strong': strong,
-      'n-text--italic': italic,
-      'n-text--underline': underline
-    }"
-    :style="cssVars"
-  >
-    <slot />
-  </component>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+import {
+  h,
+  renderSlot,
+  defineComponent,
+  computed,
+  PropType,
+  CSSProperties
+} from 'vue'
 import { useCompitable } from 'vooks'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { warn, createKey } from '../../_utils'
 import { typographyLight } from '../styles'
-import style from './styles/text.cssr.js'
+import type { TypographyTheme } from '../styles'
+import style from './styles/text.cssr'
 
 export default defineComponent({
   name: 'Text',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<TypographyTheme>),
     code: {
       type: Boolean,
       default: false
@@ -77,9 +43,9 @@ export default defineComponent({
       default: false
     },
     depth: {
-      validator (value) {
-        return [1, 2, 3, '1', '2', '3'].includes(value)
-      },
+      type: [String, Number] as PropType<
+      1 | 2 | 3 | '1' | '2' | '3' | undefined
+      >,
       default: undefined
     },
     tag: {
@@ -88,7 +54,8 @@ export default defineComponent({
     },
     // deprecated
     as: {
-      validator () {
+      type: String,
+      validator: () => {
         if (__DEV__) {
           warn('text', '`as` is deprecated, please use `tag` instead.')
         }
@@ -122,7 +89,7 @@ export default defineComponent({
             codeBorderRadius,
             codeColor,
             codeBorder,
-            [textColorKey]: textColor
+            [textColorKey as 'textColor']: textColor
           }
         } = themeRef.value
         return {
@@ -136,6 +103,33 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    const textClass = [
+      'n-text',
+      {
+        'n-text--code': this.code,
+        'n-text--delete': this.delete,
+        'n-text--strong': this.strong,
+        'n-text--italic': this.italic,
+        'n-text--underline': this.underline
+      }
+    ]
+    const defaultSlot = renderSlot(this.$slots, 'default')
+    return this.code ? (
+      <code class={textClass} style={this.cssVars as CSSProperties}>
+        {this.delete ? <del>{defaultSlot}</del> : defaultSlot}
+      </code>
+    ) : this.delete ? (
+      <del class={textClass} style={this.cssVars as CSSProperties}>
+        {defaultSlot}
+      </del>
+    ) : (
+      h(
+        this.compitableTag || 'span',
+        { class: textClass, style: this.cssVars },
+        defaultSlot
+      )
+    )
   }
 })
-</script>

src/typography/src/ul.tsx

@@ -1,25 +1,14 @@
-<template>
-  <ul
-    class="n-ul"
-    :class="{
-      'n-ul--align-text': alignText
-    }"
-    :style="cssVars"
-  >
-    <slot />
-  </ul>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
+import { h, defineComponent, computed, renderSlot, CSSProperties } from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { typographyLight } from '../styles'
-import style from './styles/list.cssr.js'
+import type { TypographyTheme } from '../styles'
+import style from './styles/list.cssr'
 
 export default defineComponent({
   name: 'Ul',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<TypographyTheme>),
     alignText: {
       type: Boolean,
       default: false
@@ -57,6 +46,20 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    return (
+      <ul
+        class={[
+          'n-ul',
+          {
+            'n-ul--align-text': this.alignText
+          }
+        ]}
+        style={this.cssVars as CSSProperties}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </ul>
+    )
   }
 })
-</script>

src/typography/styles/dark.ts

@@ -1,7 +1,8 @@
 import commonVars from './_common'
 import { commonDark } from '../../_styles/new-common'
+import type { TypographyTheme } from './light'
 
-export default {
+const typographyDark: TypographyTheme = {
   name: 'Typography',
   common: commonDark,
   self (vars) {
@@ -63,3 +64,5 @@ export default {
     }
   }
 }
+
+export default typographyDark

src/typography/styles/index.js

@@ -1,2 +0,0 @@
-export { default as typographyDark } from './dark.js'
-export { default as typographyLight } from './light.js'

src/typography/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as typographyDark } from './dark'
+export { default as typographyLight } from './light'
+export type { TypographyThemeVars, TypographyTheme } from './light'

src/typography/styles/light.js

@@ -1,65 +0,0 @@
-import commonVars from './_common'
-import { commonLight } from '../../_styles/new-common'
-
-export default {
-  name: 'Typography',
-  common: commonLight,
-  self (vars) {
-    const {
-      primaryColor,
-      textColor2,
-      borderColor,
-      lineHeight,
-      fontSize,
-      borderRadiusSmall,
-      dividerColor,
-      fontWeightStrong,
-      textColor1,
-      textColor3,
-      infoColor,
-      warningColor,
-      errorColor,
-      successColor,
-      codeColorOverlay
-    } = vars
-    return {
-      ...commonVars,
-      aTextColor: primaryColor,
-      blockquoteTextColor: textColor2,
-      blockquotePrefixColor: borderColor,
-      blockquoteLineHeight: lineHeight,
-      blockquoteFontSize: fontSize,
-      codeBorderRadius: borderRadiusSmall,
-      liTextColor: textColor2,
-      liLineHeight: lineHeight,
-      liFontSize: fontSize,
-      hrColor: dividerColor,
-      headerFontWeight: fontWeightStrong,
-      headerTextColor: textColor1,
-      pTextColor: textColor2,
-      pTextColor1Depth: textColor1,
-      pTextColor2Depth: textColor2,
-      pTextColor3Depth: textColor3,
-      pLineHeight: lineHeight,
-      pFontSize: fontSize,
-      headerBarColor: primaryColor,
-      headerBarColorPrimary: primaryColor,
-      headerBarColorInfo: infoColor,
-      headerBarColorError: errorColor,
-      headerBarColorWarning: warningColor,
-      headerBarColorSuccess: successColor,
-      textColor: textColor2,
-      textColor1Depth: textColor1,
-      textColor2Depth: textColor2,
-      textColor3Depth: textColor3,
-      textColorPrimary: primaryColor,
-      textColorInfo: infoColor,
-      textColorSuccess: successColor,
-      textColorWarning: warningColor,
-      textColorError: errorColor,
-      codeTextColor: textColor2,
-      codeColor: codeColorOverlay,
-      codeBorder: '1px solid transparent'
-    }
-  }
-}

src/typography/styles/light.ts

@@ -0,0 +1,74 @@
+import commonVars from './_common'
+import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+import type { Theme } from '../../_mixins'
+
+const self = (vars: ThemeCommonVars) => {
+  const {
+    primaryColor,
+    textColor2,
+    borderColor,
+    lineHeight,
+    fontSize,
+    borderRadiusSmall,
+    dividerColor,
+    fontWeightStrong,
+    textColor1,
+    textColor3,
+    infoColor,
+    warningColor,
+    errorColor,
+    successColor,
+    codeColorOverlay
+  } = vars
+  return {
+    ...commonVars,
+    aTextColor: primaryColor,
+    blockquoteTextColor: textColor2,
+    blockquotePrefixColor: borderColor,
+    blockquoteLineHeight: lineHeight,
+    blockquoteFontSize: fontSize,
+    codeBorderRadius: borderRadiusSmall,
+    liTextColor: textColor2,
+    liLineHeight: lineHeight,
+    liFontSize: fontSize,
+    hrColor: dividerColor,
+    headerFontWeight: fontWeightStrong,
+    headerTextColor: textColor1,
+    pTextColor: textColor2,
+    pTextColor1Depth: textColor1,
+    pTextColor2Depth: textColor2,
+    pTextColor3Depth: textColor3,
+    pLineHeight: lineHeight,
+    pFontSize: fontSize,
+    headerBarColor: primaryColor,
+    headerBarColorPrimary: primaryColor,
+    headerBarColorInfo: infoColor,
+    headerBarColorError: errorColor,
+    headerBarColorWarning: warningColor,
+    headerBarColorSuccess: successColor,
+    textColor: textColor2,
+    textColor1Depth: textColor1,
+    textColor2Depth: textColor2,
+    textColor3Depth: textColor3,
+    textColorPrimary: primaryColor,
+    textColorInfo: infoColor,
+    textColorSuccess: successColor,
+    textColorWarning: warningColor,
+    textColorError: errorColor,
+    codeTextColor: textColor2,
+    codeColor: codeColorOverlay,
+    codeBorder: '1px solid transparent'
+  }
+}
+
+export type TypographyThemeVars = ReturnType<typeof self>
+
+const typographyLight: Theme<TypographyThemeVars> = {
+  name: 'Typography',
+  common: commonLight,
+  self
+}
+
+export default typographyLight
+export type TypographyTheme = typeof typographyLight