@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

| Name | Default | Description | |-------------------|---------------------------|------------------------------------------| | $styles | See Scales section. | Sets a list of theme scales. | | $font-family | "Open Sans", sans-serif | Sets the font family styles. | | $font-baseline | 16px | Sets the font baseline for rem styles. | | $font-smoothing | true | Sets the font smoothing default styles. |

Scales

| Name | Description | |--------------|-----------------------------------| | body | Sets the "body" properties. | | headline-1 | Sets the "headline 1" properties. | | headline-2 | Sets the "headline 2" properties. | | headline-3 | Sets the "headline 3" properties. | | headline-4 | Sets the "headline 4" properties. | | headline-5 | Sets the "headline 5" properties. | | headline-6 | Sets the "headline 6" properties. |

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 custom property | Description | |---------------------------|------------------------------| | --mg-typography-{style} | Override the selected style. |

CSS classes

| CSS Class | Description | |--------------------------|--------------------------------------------| | mg-typography--{style} | Sets the typography to the selected style. |

API

Sass mixins

| Mixin | Description | |-----------------------------------------|-----------------------------------------------------------------------| | base | Sets base styles. | | typography($style, $exclude-props...) | Sets the selected style on selector, with excluded properties option. | | font-smoothing | Sets the font smoothing rules. | | ellipsis | Sets the ellipsis rules. | | ellipsis-multiline($line, $orient) | Sets the ellipsis-multiline rules. |

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;
}