landing-pages/site/assets/scss/_typography.scss

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import "colors";
@import "fonts";

$font-weights: (
        normal: 400,
        "500": 500,
        bold: bold,
);


$header-styles: (
        "font-family": $header-font,
        "font-weight": 500,
        "sizes": (
                "large": ("size": 72px, "line-height": 1.17),
                "medium": ("size": 60px, "line-height": 1.23),
                "small": ("size": 48px, "line-height": 1.25),
                "xsmall": ("size": 36px, "line-height": 1.22)
        )
);

$subtitle-styles: (
        "font-family": $primary-font,
        "font-weight": 500,
        "sizes": (
                "large": ("size": 24px, "line-height": 1.5),
                "medium": ("size": 18px, "line-height": 1.33)
        )
);

$bodytext-styles: (
        "font-family": $primary-font,
        "font-weight": 400,
        "sizes": (
                "medium": ("size": 16px, "line-height": 1.63),
                "mobile": ("size": 14px, "line-height": 1.57),
                "small": ("size": 12px, "line-height": 1.33),
                "xsmall": ("size": 10px, "line-height": 2.6)
        )
);

@mixin generate-styles($styles-map) {
  @each $size-name, $size-props in map-get($styles-map, "sizes") {
    @each $color-name, $color in $colors {
      &__#{$size-name}--#{$color-name} {
        font-family: map-get($styles-map, "font-family");
        font-weight: map-get($styles-map, "font-weight");
        font-size: map-get($size-props, "size");
        line-height: map-get($size-props, "line-height");
        color: $color;
      }
    }
  }
}


.header {
  @include generate-styles($header-styles);
}

.subtitle {
  @include generate-styles($subtitle-styles);
}

.bodytext {
  @include generate-styles($bodytext-styles);
}

.monotext {
  @each $color-name, $color in $colors {
    &--#{$color-name} {
      font-family: $monospace-font;
      color: $color;
      font-size: 14px;
      line-height: 1.71;
    }
  }
}

.font-weight {
  @each $weight-name, $weight in $font-weights {
    &-#{$weight-name} {
      font-weight: $weight !important;
    }
  }
}