_typography.scss

@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";

@mixin link {
    color: $font-color-progressive;
    text-decoration: none;

    &:focus-visible { // for chrome
        outline: dotted;
        outline-width: 1px;
        outline-color: gray;
    }
}

@mixin body-M {
    font-family: $font-family-system-sans;
    font-size: $font-size-medium;
    font-weight: $font-weight-normal;
    line-height: $line-height-medium;
    color: $color-base;
}

@mixin body-S {
    font-family: $font-family-system-sans;
    font-size: $font-size-small;
    font-weight: $font-weight-normal;
    line-height: $line-height-medium;
    color: $color-base;
}

@mixin ui-text-M ($font-weight: $font-weight-normal){
    font-family: $font-family-system-sans;
    font-size: $font-size-medium;
    font-weight: $font-weight;
    line-height: $line-height-xx-small;
    color: $color-base;
}

@mixin heading-1 {
    font-family: $font-family-serif;
    font-size: $font-size-xxx-large;
    font-weight: $font-weight-normal;
    line-height: $line-height-xxx-small;
    color: $color-emphasized;
}

@mixin heading-4 {
    font-family: $font-family-system-sans;
    font-size: $font-size-large;
    font-weight: $font-weight-bold;
    line-height: $line-height-xxx-small;
    color: $color-emphasized;
}

@mixin heading-5 {
    font-family: $font-family-system-sans;
    font-size: $font-size-medium;
    font-weight: $font-weight-bold;
    line-height: $line-height-xxx-small;
    color: $color-emphasized;
}