Skip to content

Fonts mixins

A collection of LESS mixins for creating consistent typography styles across the storefront. These mixins provide utilities for managing font sizes, line heights, weights, and colors.

Font size and line height mixins

.font-size()

Converts pixel-based font sizes to rem units.

Parameters: - @fontSize - Font size in pixels - @unit - Output unit (default: 'rem')

Example:

.my-heading {
    .font-size(24); // Outputs: font-size: 1.5rem
}

.my-text {
    .font-size(18, 'px'); // Outputs: font-size: 1.125px
}

.line-height()

Converts pixel-based line heights to rem units.

Parameters: - @lineHeight - Line height in pixels - @unit - Output unit (default: 'rem')

Example:

.my-paragraph {
    .line-height(28); // Outputs: line-height: 1.75rem
}

Predefined size mixins

These mixins apply both font size and line height in one declaration.

.size-xl()

Extra large text size.

.hero-title {
    .size-xl();
}

.size-l()

Large text size.

.section-heading {
    .size-l();
}

.size-m()

Medium text size (base size).

.body-text {
    .size-m();
}

.size-s()

Small text size.

Parameters: - @fontSize - Optional override (default: @fontSizeInPxS) - @lineHeight - Optional override (default: @lineHeightInPxS)

.caption {
    .size-s();
}

.size-xs()

Extra small text size.

.footnote {
    .size-xs();
}

Font weight mixins

.weight-extrabold()

Applies extra bold weight (800).

.important-heading {
    .weight-extrabold();
}

.weight-bold()

Applies bold weight (700).

.heading {
    .weight-bold();
}

.weight-semibold()

Applies semi-bold weight (600).

.subheading {
    .weight-semibold();
}

.weight-medium()

Applies medium weight (500).

.emphasized-text {
    .weight-medium();
}

.weight-normal()

Applies normal weight (400).

.body-text {
    .weight-normal();
}

Font color generator mixin

.generate-font-color-modifier()

Generates CSS color utility classes for a color palette.

Parameters: - @colorName - Base color variable name (e.g., 'primary', 'neutral')

Generated classes: - .color_[colorName]-50 to .color_[colorName]-900 - .color_main - .color_secondary - .color_tertiary

Example:

.generate-font-color-modifier('primary');

Combining mixins

Create complete text styles by combining multiple mixins:

.product-title {
    .size-l();
    .weight-bold();
    color: @primaryColor;
}

.product-description {
    .size-s();
    .weight-normal();
    line-height: 1.6;
}

LESS

You can modify any font mixin variable in your User Less section.

Font mixins variables

Variables used by the font mixins:

@baseFontFamilyName: 'Inter';
@baseFontSize: 16;

@fontSizeInPxXxl: @baseFontSize + 8;
@fontSizeInPxXl: @baseFontSize + 4;
@fontSizeInPxL: @baseFontSize + 2;
@fontSizeInPxM: @baseFontSize;
@fontSizeInPxS: @baseFontSize - 2;
@fontSizeInPxXS: @baseFontSize - 4;

@baseLineHeight: @baseFontSize + 8;

@lineHeightInPxXl: @baseLineHeight + 8;
@lineHeightInPxL: @baseLineHeight + 4;
@lineHeightInPxM: @baseLineHeight;
@lineHeightInPxS: @baseLineHeight - 4;
@lineHeightInPxXS: @baseLineHeight - 4;
@lineHeightInPxXxs: @baseLineHeight - 8;

@fontWeightNormal: 400;
@fontWeightMedium: 500;
@fontWeightSemibold: 600;
@fontWeightBold: 700;
@fontWeightExtrabold: 800;

@overlineFontSize: @fontSizeInPxS;
@overlineFontWeight: @fontWeightSemibold;
@overlineFontSizeS: @fontSizeInPxXS;

For example, to change the base font size:

@baseFontSize: 18; // Changes from default 16px

Font mixins styles

Here are standard font mixins:

.font-size (@fontSize, @unit: 'rem') {
    @rem: (@fontSize / @baseFontSize);
    font-size: ~'@{rem}@{unit}';
}

.line-height (@lineHeight, @unit: 'rem') {
    @rem: (@lineHeight / @baseFontSize);
    line-height: ~'@{rem}@{unit}';
}

.size-xl () {
    .font-size(@fontSizeInPxXl);
    .line-height(@lineHeightInPxXl);
}

.size-l () {
    .font-size(@fontSizeInPxL);
    .line-height(@lineHeightInPxL);
}

.size-m () {
    .font-size(@fontSizeInPxM);
    .line-height(@lineHeightInPxM);
}

.size-s (@fontSize: @fontSizeInPxS, @lineHeight: @lineHeightInPxS) {
    .font-size(@fontSizeInPxS);
    .line-height(@lineHeightInPxS);
}

.size-xs () {
    .font-size(@fontSizeInPxXS);
    .line-height(@lineHeightInPxXS);
}

.weight-extrabold () {
    font-weight: @fontWeightExtrabold;
}

.weight-bold () {
    font-weight: @fontWeightBold;
}

.weight-semibold () {
    font-weight: @fontWeightSemibold;
}

.weight-medium () {
    font-weight: @fontWeightMedium;
}

.weight-normal () {
    font-weight: @fontWeightNormal;
}

.generate-font-color-modifier(@colorName) {
    // manually generate lightest color, value 50
    @lightestColorValue: 50;
    @lightestColorVariableName: ~'@{colorName}Colors@{lightestColorValue}';

    .color_@{colorName}-@{lightestColorValue} {
        color: @@lightestColorVariableName;
    }

    // loop 9 times to generate color values 900-100
    .iterate (@index) when (@index > 0) {
        @iterationColorVariableName: ~'@{colorName}Colors@{index}';

        .color_@{colorName}-@{index} {
            color: @@iterationColorVariableName;
        }

        .iterate(@index - 100);
    }
    .iterate(900);

    .color_main {
        color: @globalFontColor;
    }

    .color_secondary {
        color: @globalFontColorSecondary;
    }

    .color_tertiary {
        color: @globalFontColorTertiary;
    }
}

Styles reference