@ebay/skin/dist/mixins/typography-mixins.less

Skin - CSS modules that represent the brand eBay

.typography-giant-3() {
    font-size: var(--font-size-giant-3);
    font-weight: var(--font-weight-bold);
    line-height: 52px;
}

.typography-giant-2() {
    font-size: var(--font-size-giant-2);
    font-weight: var(--font-weight-bold);
    line-height: 46px;
}

.typography-giant-1() {
    font-size: var(--font-size-giant-1);
    font-weight: var(--font-weight-bold);
    line-height: 40px;
}

.typography-large-2() {
    font-size: var(--font-size-large-2);
    font-weight: var(--font-weight-bold);
    line-height: 32px;
}

.typography-large-2-secondary() {
    .typography-large-2();

    color: var(--color-foreground-secondary);
}

.typography-large-1() {
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-bold);
    line-height: 28px;
}

.typography-large-1-secondary() {
    .typography-large-1();

    color: var(--color-foreground-secondary);
}

.typography-medium() {
    font-size: var(--font-size-medium);
    line-height: 24px;
}

.typography-medium-bold() {
    .typography-medium();

    font-weight: var(--font-weight-bold);
}

.typography-medium-secondary() {
    .typography-medium();

    color: var(--color-foreground-secondary);
}

.typography-regular() {
    font-size: var(--font-size-default);
    line-height: 20px;
}

.typography-regular-bold() {
    .typography-regular();

    font-weight: var(--font-weight-bold);
}

.typography-regular-secondary() {
    .typography-regular();

    color: var(--color-foreground-secondary);
}

.typography-small() {
    font-size: var(--font-size-small);
    line-height: 16px;
}

.typography-small-bold() {
    .typography-small();

    font-weight: var(--font-weight-bold);
}

.typography-small-secondary() {
    .typography-small();

    color: var(--color-foreground-secondary);
}

// large screen titles

.title-giant-screen-large() {
    font-size: var(--font-size-giant-1);
    line-height: 36px;
}

.title-large-screen-large() {
    font-size: var(--font-size-large-2);
    line-height: 30px;
}

.title-medium-screen-large() {
    font-size: var(--font-size-large-1);
    line-height: 24px;
}

.title-small-screen-large() {
    font-size: var(--font-size-medium);
    line-height: 20px;
}

// small screen titles

.title-giant-screen-small() {
    font-size: var(--font-size-large-2);
    line-height: 30px;
}

.title-large-screen-small() {
    font-size: var(--font-size-large-1);
    line-height: 24px;
}

.title-medium-screen-small() {
    font-size: var(--font-size-medium);
    line-height: 20px;
}

.title-small-screen-small() {
    font-size: var(--font-size-default);
    line-height: 16px;
}