_typography.scss

@use 'sass:map';
@use 'variables';
@use 'functions';
@use 'mixins';

// RFS Config (Defines from which resolution the fonts should not scale further)
$rfs-breakpoint: 1200px !default;
@import 'vendor/rfs'; // https://github.com/twbs/rfs/blob/main/scss.scss

// Defines which breakpoints should be created for typographies
$breakpoints: (
  'xs': variables.$res-xs,
  'sm': variables.$res-sm,
  'md': variables.$res-md,
  'lg': variables.$res-lg,
  'xl': variables.$res-xl,
) !default;

// Defines Headlines
$headline-variants: (
  'h1': ('font-size': 64px, 'font-weight': 700, 'line-height': 92px,),
  'h2': ('font-size': 48px, 'font-weight': 700, 'line-height': 72px,),
  'h3': ('font-size': 40px, 'font-weight': 700, 'line-height': 58px,),
  'h4': ('font-size': 32px, 'font-weight': 700, 'line-height': 46px,),
  'h5': ('font-size': 24px, 'font-weight': 700, 'line-height': 36px,),
  'h6': ('font-size': 20px, 'font-weight': 700, 'line-height': 30px,),
) !default;

// Defines Paragraphs
$paragraph-variants: (
  'ultra-small':  ('font-size': 8px,  'font-weight': 400, 'line-height': 12px,),
  'very-small':   ('font-size': 10px, 'font-weight': 400, 'line-height': 16px,),
  'small':        ('font-size': 12px, 'font-weight': 400, 'line-height': 20px,),
  'default':      ('font-size': 16px, 'font-weight': 400, 'line-height': 24px,),
  'large':        ('font-size': 20px, 'font-weight': 400, 'line-height': 30px,),
  'very-large':   ('font-size': 24px, 'font-weight': 400, 'line-height': 36px,),
  'ultra-large':  ('font-size': 32px, 'font-weight': 400, 'line-height': 46px,),
) !default;

// Configure Utilities Typography Headline Styles
$headline-styles: false !default;
$headline-styles-min: false !default;
$headline-styles-max: false !default;
$headline-styles-from-to: false !default;
// Configure Utilities Typography Paragraph Styles
$paragraph-styles: false !default;
$paragraph-styles-min: false !default;
$paragraph-styles-max: false !default;
$paragraph-styles-from-to: false !default;

:root {
  @if $headline-styles or $headline-styles-min or $headline-styles-max or $headline-styles-from-to {
    @each $variant, $variantObject in $headline-variants {
      --#{$variant}-font-size-rem: #{functions.rem(map.get($variantObject, 'font-size'))};
      --#{$variant}-font-size-rfs: #{rfs-fluid-value(functions.rem(map.get($variantObject, 'font-size')))};
      --#{$variant}-font-weight: #{map.get($variantObject, 'font-weight')};
      --#{$variant}-line-height: #{functions.em(map.get($variantObject, 'line-height'), map.get($variantObject, 'font-size'))};
    }
  }

  @if $paragraph-styles {
    @each $variant, $variantObject in $paragraph-variants {
      --paragraph-#{$variant}-font-size-rem: #{functions.rem(map.get($variantObject, 'font-size'))};
      --paragraph-#{$variant}-font-size-rfs: #{rfs-fluid-value(functions.rem(map.get($variantObject, 'font-size')))};
      --paragraph-#{$variant}-font-weight: #{map.get($variantObject, 'font-weight')};
      --paragraph-#{$variant}-line-height: #{functions.em(map.get($variantObject, 'line-height'), map.get($variantObject, 'font-size'))};
    }
  }
}

// Headline Styles
@if $headline-styles {
  @each $variant, $variantObject in $headline-variants {
    #{$variant} {
      font-size: var(--#{$variant}-font-size-rfs);
      font-weight: var(--#{$variant}-font-weight);
      line-height: var(--#{$variant}-line-height);
    }
    .typo-#{$variant} {
      font-size: var(--#{$variant}-font-size-rfs) !important;
      font-weight: var(--#{$variant}-font-weight) !important;
      line-height: var(--#{$variant}-line-height) !important;
    }
  }
  @include mixins.media-min(#{$rfs-breakpoint}px) {
    @each $variant, $variantObject in $headline-variants {
      #{$variant} {
        font-size: var(--#{$variant}-font-size-rem);
      }
      .typo-#{$variant} {
        font-size: var(--#{$variant}-font-size-rem) !important;
      }
    }
  }
}

// Headline Styles with Breakpoints - Min
@if $headline-styles-min {
  @each $breakpoint, $res in $breakpoints {
    @include mixins.media-min($res) {
      @each $variant, $variantObject in $headline-variants {
        .typo-#{$variant}-min-#{$breakpoint} {
          font-size: var(--#{$variant}-font-size-rfs) !important;
          font-weight: var(--#{$variant}-font-weight) !important;
          line-height: var(--#{$variant}-line-height) !important;
        }
      }
    }
    @include mixins.media-min(#{$rfs-breakpoint}px) {
      @each $variant, $variantObject in $headline-variants {
        .typo-#{$variant}-min-#{$breakpoint} {
          font-size: var(--#{$variant}-font-size-rem) !important;
        }
      }
    }
  }
}

// Headline Styles with Breakpoints - Max
@if $headline-styles-max {
  @each $breakpoint, $res in $breakpoints {
    @include mixins.media-max($res) {
      @each $variant, $variantObject in $headline-variants {
        .typo-#{$variant}-max-#{$breakpoint} {
          font-size: var(--#{$variant}-font-size-rfs) !important;
          font-weight: var(--#{$variant}-font-weight) !important;
          line-height: var(--#{$variant}-line-height) !important;
        }
      }
    }
  }
}

// Headline Styles with Breakpoints - FromTo
@if $headline-styles-from-to {
  @each $breakpointFrom, $resFrom in $breakpoints {
    $typo-breakpoint-keys: map-keys($breakpoints);
    $iFrom: index($typo-breakpoint-keys, $breakpointFrom);

    @each $breakpointTo, $resTo in $breakpoints {
      $iTo: index($typo-breakpoint-keys, $breakpointTo);

      @if $iTo > $iFrom {
        @include mixins.media-from-to($resFrom, $resTo) {
          @each $variant, $variantObject in $headline-variants {
            .typo-#{$variant}-from-#{$breakpointFrom}-to-#{$breakpointTo} {
              font-size: var(--#{$variant}-font-size-rfs) !important;
              font-weight: var(--#{$variant}-font-weight) !important;
              line-height: var(--#{$variant}-line-height) !important;
            }
          }
        }
      }
    }
  }
}

// Paragraph Styles
@if $paragraph-styles {
  @each $variant, $variantObject in $paragraph-variants {
    @if $variant == default {
      p {
        font-size: var(--paragraph-#{$variant}-font-size-rfs);
        font-weight: var(--paragraph-#{$variant}-font-weight);
        line-height: var(--paragraph-#{$variant}-line-height);
      }
    }
    .typo-#{$variant} {
      font-size: var(--paragraph-#{$variant}-font-size-rfs) !important;
      font-weight: var(--paragraph-#{$variant}-font-weight) !important;
      line-height: var(--paragraph-#{$variant}-line-height) !important;
    }
  }
  @include mixins.media-min(#{$rfs-breakpoint}px) {
    @each $variant, $variantObject in $paragraph-variants {
      @if $variant == default {
        p {
          font-size: var(--paragraph-#{$variant}-font-size-rem);
        }
      }
      .typo-#{$variant} {
        font-size: var(--paragraph-#{$variant}-font-size-rem) !important;
      }
    }
  }
}

// Paragraph Styles with Breakpoints - Min
@if $paragraph-styles-min {
  @each $breakpoint, $res in $breakpoints {
    @include mixins.media-min($res) {
      @each $variant, $variantObject in $paragraph-variants {
        .typo-#{$variant}-min-#{$breakpoint} {
          font-size: var(--paragraph-#{$variant}-font-size-rfs) !important;
          font-weight: var(--paragraph-#{$variant}-font-weight) !important;
          line-height: var(--paragraph-#{$variant}-line-height) !important;
        }
      }
    }
    @include mixins.media-min(#{$rfs-breakpoint}px) {
      @each $variant, $variantObject in $paragraph-variants {
        .typo-#{$variant}-min-#{$breakpoint} {
          font-size: var(--paragraph-#{$variant}-font-size-rem) !important;
        }
      }
    }
  }
}

// Paragraph Styles with Breakpoints - Max
@if $paragraph-styles-max {
  @each $breakpoint, $res in $breakpoints {
    @include mixins.media-max($res) {
      @each $variant, $variantObject in $paragraph-variants {
        .typo-#{$variant}-max-#{$breakpoint} {
          font-size: var(--paragraph-#{$variant}-font-size-rfs) !important;
          font-weight: var(--paragraph-#{$variant}-font-weight) !important;
          line-height: var(--paragraph-#{$variant}-line-height) !important;
        }
      }
    }
  }
}

// Paragraph Styles with Breakpoints - FromTo
@if $paragraph-styles-from-to {
  @each $breakpointFrom, $resFrom in $breakpoints {
    $typo-breakpoint-keys: map-keys($breakpoints);
    $iFrom: index($typo-breakpoint-keys, $breakpointFrom);

    @each $breakpointTo, $resTo in $breakpoints {
      $iTo: index($typo-breakpoint-keys, $breakpointTo);

      @if $iTo > $iFrom {
        @include mixins.media-from-to($resFrom, $resTo) {
          @each $variant, $variantObject in $paragraph-variants {
            .typo-#{$variant}-from-#{$breakpointFrom}-to-#{$breakpointTo} {
              font-size: var(--paragraph-#{$variant}-font-size-rfs) !important;
              font-weight: var(--paragraph-#{$variant}-font-weight) !important;
              line-height: var(--paragraph-#{$variant}-line-height) !important;
            }
          }
        }
      }
    }
  }
}