naive-ui/styles/Typography.scss

@import './mixins/mixins.scss';

$--header-font-size: (
  '1': 32px,
  '2': 26px,
  '3': 18px,
  '4': 16px,
  '5': 14px,
  '6': 14px
);

$--header-margin: (
  '1': 24px 0 18px 0,
  '2': 24px 0 18px 0,
  '3': 18px 0 12px 0,
  '4': 18px 0 12px 0,
  '5': 18px 0 12px 0,
  '6': 18px 0 12px 0
);

$--header-prefix-width: (
  '1': 16px,
  '2': 16px,
  '3': 12px,
  '4': 12px,
  '5': 12px,
  '6': 12px
);

$--header-bar-width: (
  '1': 4px,
  '2': 4px,
  '3': 3px,
  '4': 3px,
  '5': 3px,
  '6': 3px
);

@mixin header-mixin($level) {
  @include b('h' + $level) {
    font-size: map-get($--header-font-size, $level);
    font-weight: 500;
    color: $--n-primary-text-color;
    &:first-child {
      margin-top: 0
    }
    margin: map-get($--header-margin, $level);
    transition: color .3s $--n-ease-in-out-cubic-bezier;
    @include m(prefix-bar) {
      position: relative;
      padding-left: map-get($--header-prefix-width, $level);
      &::before {
        content: '';
        width: map-get($--header-bar-width, $level);
        border-radius:  map-get($--header-bar-width, $level) / 2;
        background-color: $--n-primary-color;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier;
        left: 0;
        top: 0;
        bottom: 0;
        position: absolute;
      }
      @include m(align-text) {
        padding-left: 0;
        &::before {
          left: -(map-get($--header-prefix-width, $level));
        }
      }
      @include m(default-type) {
        &::before {
          background-color: $--primary-6;
        }
      }
      @include m(primary-type) {
        &::before {
          background-color: $--primary-6;
        }
      }
      @include m(info-type) {
        &::before {
          background-color: $--info-6;
        }
      }
      @include m(success-type) {
        &::before {
          background-color: $--success-6;
        }
      }
      @include m(warning-type) {
        &::before {
          background-color: $--warning-6;
        }
      }
      @include m(error-type) {
        &::before {
          background-color: $--error-6;
        }
      }
    }
  }
}

@include themes-mixin {
  @include header-mixin('1');
  @include header-mixin('2');
  @include header-mixin('3');
  @include header-mixin('4');
  @include header-mixin('5');
  @include header-mixin('6');
  @include b(p) {
    @include m(primary-depth) {
      color: $--n-primary-text-color;
    }
    @include m(secondary-depth) {
      color: $--n-secondary-text-color;
    }
    @include m(tertiary-depth) {
      color: $--n-tertiary-text-color;
    }
    &:first-child {
      margin-top: 0;
    }
    transition: color .3s $--n-ease-in-out-cubic-bezier;
    margin: 12px 0 16px 0;
    font-size: 14px;
    line-height: 1.75;
    color: $--n-secondary-text-color;
  }
  @include b(ul) {
    margin: 12px 0;
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
    padding-left: 1.625em;
    @include m(align-text) {
      padding-left: 0;
    }
  }
  @include b(ol) {
    margin: 12px 0;
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
    padding-left: 1.625em;
    @include m(align-text) {
      padding-left: 0;
    }
  }
  @include b(li) {
    transition: color .3s $--n-ease-in-out-cubic-bezier;
    line-height: 1.625em;
    margin-bottom: 0px;
    font-size: 14px;
    color: $--n-secondary-text-color;
  }
  @include b(a) {
    transition: color .3s $--n-ease-in-out-cubic-bezier;
    color: $--n-primary-color;
    cursor: pointer;
    text-decoration: underline;
  }
  @include b(text) {
    display: inline-block;
    transition: color .3s $--n-ease-in-out-cubic-bezier;
    color: $--n-secondary-text-color;
    @include m(code) {
      line-height: 1.4;
      font-family: $--n-mono-font-family;
      transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
      box-sizing: border-box;
      background-clip: padding-box;
      color: $--n-secondary-text-color;
      padding: .15em .45em 0 .45em;
      border-radius: 3px;
      font-size: .9em;
      background-color: $--typography-code-background-color;
      border: 1px solid $--n-border-color;
    }
    @include m(primary-depth) {
      color: $--n-primary-text-color;
    }
    @include m(secondary-depth) {
      color: $--n-secondary-text-color;
    }
    @include m(tertiary-depth) {
      color: $--n-tertiary-text-color;
    }
    @include m(strong) {
      font-weight: 500;
    }
    @include m(italic) {
      font-style: italic;
    }
    @include m(underline) {
      text-decoration: underline;
    }
    @include m(primary-type) {
      color: $--primary-6;
    }
    @include m(info-type) {
      color: $--info-6;
    }
    @include m(success-type) {
      color: $--success-6;
    }
    @include m(warning-type) {
      color: $--warning-6;
    }
    @include m(error-type) {
      color: $--error-6;
    }
  }
  @include b(hr) {
    margin: 12px 0;
    transition: border-color .3s $--n-ease-in-out-cubic-bezier;
    border-top: 1px solid $--n-divider-color;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  @include b(blockquote) {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
    line-height: 1.625;
    margin: 0;
    margin-top: 12px;
    margin-bottom: 12px;
    transition: color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
    border-left: 4px solid $--n-border-color;
    padding-left: 12px;
    color: $--n-secondary-text-color;
    @include m(align-text) {
      margin-left: -16px;
    }
  }
}