bylapidist/components

@import '../global.module';

.this {
    --size-small: var(--font-size-200);
    --size-medium: var(--font-size-300);
    --size-large: var(--font-size-400);
    --family-body: var(--font-family-body);
    --family-heading: var(--font-family-heading);
    --family-serif: var(--font-family-serif);
    --family-mono: var(--font-family-mono);
    --weight-regular: var(--font-weight-400);
    --weight-medium: var(--font-weight-500);
    --weight-bold: var(--font-weight-700);

    color: var(--colour-neutral-darkest);
    line-height: var(--line-height-looser);
    letter-spacing: var(--letter-spacing-looser);

    @each $size in $sizes {
        &.size-#{$size} {
            font-size: var(--size-#{$size});
        }
    }

    @each $family in $families {
        &.family-#{$family} {
            font-family: var(--family-#{$family});
        }
    }

    @each $weight in $weights {
        &.weight-#{$weight} {
            font-weight: var(--weight-#{$weight});
        }
    }
}