libs/barista-components/style/_font-mixins.scss
/*
 * mixins for setting font-styles
 */

@import '../core/src/style/variables';
@import '../core/src/style/deprecated';

@mixin dt-text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin dt-custom-font-styles(
  $custom-color: false,
  $custom-font-weight: false,
  $custom-font-size: false,
  $custom-line-height: false
) {
  @if $custom-color {
    color: $custom-color;
  }
  @if $custom-font-weight {
    font-weight: $custom-font-weight;
  }
  @if $custom-font-size {
    font-size: $custom-font-size;
  }
  @if $custom-line-height {
    line-height: $custom-line-height;
  }
}

@mixin dt-default-font(
  $custom-font-size: $default-font-size,
  $custom-line-height: $default-line-height,
  $custom-font-weight: $default-font-weight,
  $custom-color: $default-font-color
) {
  font-family: $default-font-family;
  @include dt-custom-font-styles(
    $custom-color,
    $custom-font-weight,
    $custom-font-size,
    $custom-line-height
  );
}

@mixin dt-monospace-font(
  $custom-font-size: $default-font-size,
  $custom-line-height: $default-line-height,
  $custom-font-weight: $default-font-weight,
  $custom-color: $default-font-color
) {
  font-family: $monospace-font-family;
  @include dt-custom-font-styles(
    $custom-color,
    $custom-font-weight,
    $custom-font-size,
    $custom-line-height
  );
}

@mixin dt-main-font($line-height: $default-line-height) {
  @include dt-default-font($custom-line-height: $line-height);
}

@mixin dt-fluid-font-size(
  $min-font-size,
  $max-font-size,
  $min-screen-size,
  $max-screen-size
) {
  font-size: calc(
    #{$min-font-size + 'px'} + (#{$max-font-size} - #{$min-font-size}) * (
        100vw - #{$min-screen-size + 'px'}
      ) / (#{$max-screen-size} - #{$min-screen-size})
  );

  @media (min-width: $max-screen-size + 'px') {
    font-size: $max-font-size * 1px;
  }
}

@mixin dt-h1-font($line-height: $default-line-height) {
  @include dt-default-font(24px, $line-height, 600);
  @include dt-fluid-font-size(24, 28, 360, 1920);
}

@mixin dt-h2-font($line-height: $default-line-height) {
  @include dt-default-font(20px, $line-height, 600);
}

@mixin dt-h3-font($line-height: $default-line-height) {
  @include dt-default-font(18px, $line-height);
}

@mixin dt-code-font {
  @include dt-monospace-font();
}

@mixin dt-label-font($line-height: $default-line-height) {
  @include dt-default-font(12px, $line-height);
}
