@alifd/meet-react/es/typography/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component typography
  @display Typography
  @chinese 排版
  @family data-display
*/
:root {
  /*
    @desc mark-color
    @namespace style/mark
    @semantic 颜色
  */
  --typography-mark-color: var(--color-text1-4);
  /*
    @desc mark-bg-color
    @namespace style/mark
    @semantic 背景颜色
  */
  --typography-mark-background-color: var(--color-warning-2);
  /*
    @desc code-corner
    @namespace style/code
    @semantic 代码圆角尺寸
  */
  --typography-code-corner: var(--corner-1);
  /*
    @desc color
    @namespace style/code
    @semantic 代码字体颜色
  */
  --typography-code-color: var(--color-text1-4);
  /*
    @desc code-bg-color
    @namespace style/code
    @semantic 代码背景颜色
  */
  --typography-code-background-color: var(--color-fill1-2);
  /*
    @desc code-border-color
    @namespace style/code
    @semantic 代码边框颜色
  */
  --typography-code-border-color: var(--color-line1-1);
}

.mt-typography--body-1 {
  font-size: var(--p-body-1-font-size);
  font-weight: var(--p-body-1-font-weight);
  line-height: var(--p-body-1-line-height);
}
.mt-typography--body-1-indented {
  text-indent: var(--p-body-1-indent-size);
}
.mt-typography--body-2 {
  font-size: var(--p-body-2-font-size);
  font-weight: var(--p-body-2-font-weight);
  line-height: var(--p-body-2-line-height);
}
.mt-typography--body-2-indented {
  text-indent: var(--p-body-2-indent-size);
}
.mt-typography--title {
  font-size: var(--p-title-font-size);
  font-weight: var(--p-title-font-weight);
  line-height: var(--p-title-line-height);
}
.mt-typography--title-indented {
  text-indent: var(--p-title-indent-size);
}
.mt-typography--subhead {
  font-size: var(--p-subhead-font-size);
  font-weight: var(--p-subhead-font-weight);
  line-height: var(--p-subhead-line-height);
}
.mt-typography--subhead-indented {
  text-indent: var(--p-subhead-indent-size);
}
.mt-typography--display-1 {
  font-size: var(--p-display-1-font-size);
  font-weight: var(--p-display-1-font-weight);
  line-height: var(--p-display-1-line-height);
}
.mt-typography--display-1-indented {
  text-indent: var(--p-display-1-indent-size);
}
.mt-typography--display-2 {
  font-size: var(--p-display-2-font-size);
  font-weight: var(--p-display-2-font-weight);
  line-height: var(--p-display-2-line-height);
}
.mt-typography--display-2-indented {
  text-indent: var(--p-display-2-indent-size);
}
.mt-typography--display-3 {
  font-size: var(--p-display-3-font-size);
  font-weight: var(--p-display-3-font-weight);
  line-height: var(--p-display-3-line-height);
}
.mt-typography--display-3-indented {
  text-indent: var(--p-display-3-indent-size);
}
.mt-typography--headline {
  font-size: var(--p-headline-font-size);
  font-weight: var(--p-headline-font-weight);
  line-height: var(--p-headline-line-height);
}
.mt-typography--headline-indented {
  text-indent: var(--p-headline-indent-size);
}
.mt-typography--caption {
  font-size: var(--p-caption-font-size);
  font-weight: var(--p-caption-font-weight);
  line-height: var(--p-caption-line-height);
}
.mt-typography--caption-indented {
  text-indent: var(--p-caption-indent-size);
}
.mt-typography--overline {
  font-size: var(--p-overline-font-size);
  font-weight: var(--p-overline-font-weight);
  line-height: var(--p-overline-line-height);
}
.mt-typography--overline-indented {
  text-indent: var(--p-overline-indent-size);
}
.mt-typography--code {
  display: inline-block;
  border: var(--line-1) solid var(--typography-code-border-color);
  border-radius: var(--typography-code-corner);
  padding: 0 var(--s-1);
  background-color: var(--typography-code-background-color);
  color: var(--typography-code-color);
}
.mt-typography--strong {
  font-weight: bold;
}
.mt-typography--underline {
  text-decoration: underline;
}
.mt-typography--delete {
  text-decoration: line-through;
}
.mt-typography--mark {
  padding: 0 var(--s-1);
  color: var(--typography-mark-color);
  background-color: var(--typography-mark-background-color);
}