Challenge from Specify - Text styles as SCSS mixins

[ChucKN0risK]

Design to code process

On the design side, our tokens are defined as Figma Styles and Figma Variables. We have a light and a dark theme.

On the frontend side, we expect the design tokens to be delivered in CSS. We want to generate text-styles as SCSS mixins.

Output file extension

.scss

Output file content

@mixin text-title-text {
    font-family: 'Inter', serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
}
    
@mixin text-body-text {
    font-family: 'Inter', serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
}