@mussonindustrial/pyro-mui-joy/src/common/typography.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

$levels: (
    h1,
    h2,
    h3,
    h4,
    title-lg,
    title-md,
    title-sm,
    body-lg,
    body-md,
    body-sm,
    body-xs
);

/*Typography*/
@each $level in $levels {
    [psc='Joy/Typography/$(level)'] {
        @include variant-support(Typography);

        /* Variant */
        /* Apply component properties */
        color: var(
            --joy-Typography-Color,
            rgba(
                var(
                        --joy-palette-mainChannel,
                        var(
                            --joy-palette-text-primary,
                            var(--joy-palette-neutral-800, #25252d)
                        )
                    ) /
                    1
            )
        );
        background-color: var(--joy-Typography-Bg);
        border-color: var(--joy-Typography-Border);
        border-width: var(--joy-Typography-borderWidth);
        border-style: var(--joy-Typography-borderStyle);
        border-radius: var(--joy-Typography-radius, var(--joy-radius-xs));

        font-family: var(
            --joy-fontFamily-body,
            'Inter',
            var(
                --joy-fontFamily-fallback,
                -apple-system,
                BlinkMacSystemFont,
                'Segoe UI',
                Roboto,
                Helvetica,
                Arial,
                sans-serif,
                'Apple Color Emoji',
                'Segoe UI Emoji',
                'Segoe UI Symbol'
            )
        );
        margin: var(--joy-Typography-margin, 0px);

        /*Remove outline unless specifically assigned.*/
        &:not([psc='Joy/Variant/outlined']) {
            border-style: unset;
        }
    }
}

[psc='Joy/Typography/h1'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-xs, 1.33334));

    font-family: var(
        --joy-fontFamily-display,
        'Inter',
        var(
            --joy-fontFamily-fallback,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol'
        )
    );
    font-weight: var(--joy-fontWeight-xl, 700);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xl4, 2.25rem));
    line-height: var(--joy-lineHeight-xs, 1.33334);
    letter-spacing: -0.025em;
}

[psc='Joy/Typography/h2'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-xs, 1.33334));

    font-family: var(
        --joy-fontFamily-display,
        'Inter',
        var(
            --joy-fontFamily-fallback,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol'
        )
    );
    font-weight: var(--joy-fontWeight-xl, 700);
    font-size: var(
        --joy-Typography-fontSize,
        var(--joy-fontSize-xl3, 1.875rem)
    );
    line-height: var(--joy-lineHeight-xs, 1.33334);
    letter-spacing: -0.025em;
}

[psc='Joy/Typography/h3'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-xs, 1.33334));

    font-family: var(
        --joy-fontFamily-display,
        'Inter',
        var(
            --joy-fontFamily-fallback,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol'
        )
    );
    font-weight: var(--joy-fontWeight-lg, 600);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xl2, 1.5rem));
    line-height: var(--joy-lineHeight-xs, 1.33334);
    letter-spacing: -0.025em;
}

[psc='Joy/Typography/h4'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5));

    font-family: var(
        --joy-fontFamily-display,
        'Inter',
        var(
            --joy-fontFamily-fallback,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol'
        )
    );
    font-weight: var(--joy-fontWeight-lg, 600);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xl, 1.25rem));
    line-height: var(--joy-lineHeight-md, 1.5);
    letter-spacing: -0.025em;
}

[psc='Joy/Typography/title-lg'] {
    font-weight: var(--joy-fontWeight-lg, 600);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-lg, 1.125rem));
    line-height: var(--joy-lineHeight-xs, 1.33334);
}

[psc='Joy/Typography/title-md'] {
    font-weight: var(--joy-fontWeight-md, 500);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-md, 1rem));
    line-height: var(--joy-lineHeight-md, 1.5);
}

[psc='Joy/Typography/title-sm'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-sm, 1.42858));
    font-weight: var(--joy-fontWeight-md, 500);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-sm, 0.875rem));
    line-height: var(--joy-lineHeight-sm, 1.42858);
}

[psc='Joy/Typography/body-lg'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5));
    color: var(
        --joy-Typography-Color,
        rgba(
            var(
                    --joy-palette-mainChannel,
                    var(
                        --joy-palette-text-secondary,
                        var(--joy-palette-neutral-800, #25252d)
                    )
                ) / 1
        )
    );
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-lg, 1.125rem));
    line-height: var(--joy-lineHeight-md, 1.5);
}

[psc='Joy/Typography/body-md'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5));
    color: var(
        --joy-Typography-Color,
        rgba(
            var(
                    --joy-palette-mainChannel,
                    var(
                        --joy-palette-text-secondary,
                        var(--joy-palette-neutral-800, #25252d)
                    )
                ) / 1
        )
    );
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-md, 1rem));
    line-height: var(--joy-lineHeight-md, 1.5);
}

[psc='Joy/Typography/body-sm'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5));
    color: var(
        --joy-Typography-Color,
        rgba(
            var(
                    --joy-palette-mainChannel,
                    var(
                        --joy-palette-text-tertiary,
                        var(--joy-palette-neutral-800, #25252d)
                    )
                ) / 1
        )
    );
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-sm, 0.875rem));
    line-height: var(--joy-lineHeight-md, 1.5);
}

[psc='Joy/Typography/body-xs'] {
    --joy-Icon-fontSize: calc(1em * var(--joy-lineHeight-md, 1.5));
    color: var(
        --joy-Typography-Color,
        rgba(
            var(
                    --joy-palette-mainChannel,
                    var(
                        --joy-palette-text-tertiary,
                        var(--joy-palette-neutral-800, #25252d)
                    )
                ) / 1
        )
    );
    font-weight: var(--joy-fontWeight-md, 500);
    font-size: var(--joy-Typography-fontSize, var(--joy-fontSize-xs, 0.75rem));
    line-height: var(--joy-lineHeight-md, 1.5);
}