style.scss

@use './../src' as lui;
@use './../src/typo' as typo;
@use './../src/color' as color;
@use './../src/var' as var;

$colors: (
    background: white,
    primary: yellow,
    secondary: blueviolet,
    'primary-20%': rgba(255, 255, 0, .2),
    text: (
        primary: black,
        secondary: blue,
    )
);

$measures: (
    size: (
        '1x': 100px,
        '2x': 200px,
        '3x': 300px,
        '4x': 400px,
        '5x': 500px,
        '6x': 600px,
        '6.5x': 650px,                   
    )
);

$typographies: (
    heading: (
        // avoid creating css variables for root properties
        __include-root__: false,
        family: 'Outfit',
        weight: 600,
        
        display: ( size: 5rem,     line-height: 5.5rem,   letter-spacing: -0.125rem),
        h1:      ( size: 3.5rem,   line-height: 4.375rem, letter-spacing: -0.063rem),
        h2:      ( size: 2.813rem, line-height: 3.25rem,  letter-spacing: normal, weight: 700,),
        // ...
    ),
    text: (
        family: 'Inter',
        size: 16px,
        weight: 400,
        line-height: 1.5rem,
        letter-spacing: 0.031rem,
        bold: ( weight: 600 ),
        xl: (
            size: 1.5rem,
            line-height: 1.875rem,
            letter-spacing: 0rem,
            bold: ( weight: 600, )
        ),
        sm: (
            size: 0.875rem,
        )
    )
);

@include lui.init(
    $theme: (
        colors: $colors,
        variables: ( m: $measures ),
        typographies: $typographies,
    ),
    $breakpoints: ( xs: 0, sm: 22px ),
    $options: (
        reboot: true,
        common: true,
        theme: true,
        color-utilities: true,
        utilities: false,
        fg-var-name: 'text/secondary',
    )
);

.typo-module-test {
    @include typo.typography('heading/h1');
}

.color-module-test {
    background-color: color.get('primary', 'rgb', #fff);
    background-color: color.get('primary', 'contrast');
    background-color: color.get('primary', 'contrast-rgb');
    background-color: color.get('primary');
    background-color: color.get('text.primary');
    background-color: color.get('primary-20%');
}

.var-module-test {
    width: var.get('m/1x');
    height: var.get('m/6.5x');

    font-size: var.get('m.4x');
}