metamask-extension/ui/components/ui/typography/typography.scss

@use "design-system";
@use "sass:map";

.typography {
  @include design-system.Paragraph;

  & b,
  & strong {
    font-weight: 700;
  }

  @each $variant in map.keys(design-system.$typography-variants) {
    &--#{$variant} {
      @include design-system.typography($variant);
    }
  }

  @each $variant, $color in design-system.$color-map {
    &--color-#{$variant} {
      color: $color;
    }
  }

  @each $weight in design-system.$font-weight {
    &--weight-#{$weight} {
      font-weight: $weight;
    }
  }

  @each $style in design-system.$font-style {
    &--style-#{$style} {
      font-style: $style;
    }
  }

  @each $size in design-system.$font-size {
    &--size-#{$size} {
      font-size: $size;
    }
  }

  @each $alignment in design-system.$text-align {
    &--align-#{$alignment} {
      text-align: $alignment;
    }
  }

  @each $overflow in design-system.$overflow-wrap {
    &--overflowwrap-#{$overflow} {
      overflow-wrap: $overflow;
    }
  }

  @for $i from 1 through 8 {
    &--spacing-#{$i} {
      margin: #{$i * 4}px auto;
    }
  }
}