@magnesium/typography v1.16.0

@magnesium/typography

The Magnesium Design typography system help you to define your typographic styles.

Installing

npm install @magnesium/typography

Usage

Styles

@use "@magnesium/typography/styles";

This will generate the default typography classes, see CSS Classes section for more.

Configuration

You can define the typography style variables before importing any Magnesium components:

@use "@magnesium/typography" with (
    $styles: (
        body: (
            font-size: 20px
        )
    )
);

Options

Scales

You can also define new styles for typography:

@use "@magnesium/typography" with (
    $styles: (
        body-2: (
            font-size: 16px
        )
    )
);

The new key named body-2 is now available with any other default typography keys.

Customization

CSS custom properties

The variable {style} correspond with the list of $styles keys, do not hesitate to check it for more examples!

CSS classes

API

Sass mixins

Typography rule with typography.base()

The following Sass...

@use "@magnesium/typography";

.foo {
    @include typography.base;
}

...will produce the following CSS...

.foo {
    font-family: var(--mg-typography-font-family, 'Open Sans', sans-serif);
    font-size: 100%;
}

Typography rule with typography.typography()

The following Sass...

@use "@magnesium/typography";

.foo {
    @include typography.typography(body);
}

.bar {
    // With excluded properties options.
    @include typography.typography(body, font-size, line-height, text-decoration, text-transform);
}

...will produce the following CSS...

.foo {
    line-height: var(--mg-typography-body-line-height, 1.25rem);
    font-family: var(--mg-typography-body-font-family, var(--mg-typography-font-family, 'Open Sans', sans-serif));
    font-size: var(--mg-typography-body-font-size, 1rem);
    font-weight: var(--mg-typography-body-font-weight, 400);
    letter-spacing: var(--mg-typography-body-letter-spacing, normal);
    text-decoration: var(--mg-typography-body-text-decoration, inherit);
    text-transform: var(--mg-typography-body-text-transform, inherit);
}

.bar {
    font-family: var(--mg-typography-body-font-family, var(--mg-typography-font-family, 'Open Sans', sans-serif));
    font-weight: var(--mg-typography-body-font-weight, 400);
    letter-spacing: var(--mg-typography-body-letter-spacing, normal);
}

Font smoothing with typography.font-smoothing()

The following Sass...

@use "@magnesium/typography";

.foo {
    @include typography.font-smoothing;
}

...will produce the following CSS...

.foo {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Ellipsis with typography.ellipsis()

The following Sass...

@use "@magnesium/typography";

.foo {
    @include typography.ellipsis;
}

...will produce the following CSS...

.foo {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Ellipsis multiline with typography.ellipsis-multiline()

The following Sass...

@use "@magnesium/typography";

.foo {
    @include typography.ellipsis-multiline(2, vertical);
}

...will produce the following CSS...

.foo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}