src/_mixins.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

@use 'sass:list';
@use 'functions' as fn;

@mixin set-font($basis, $values: ()) {
    $values: fn.set-font($basis, $values);

    @each $prop, $value in $values {
        @if $value != null {
            #{$prop}: $value;
        }
    }
}

@mixin heading-strong($size) {
    color:     fn.global-color(--heading);
    font-size: fn.global-dim(list.join(--heading, $size));
}

@mixin heading-medium($size) {
    @include set-font(--standard, (
        --line-height: null,
        --size:        fn.global-dim(list.join(--heading, $size)),
        --weight:      bold
    ));

    color: fn.global-color(--heading);
}

@mixin heading-faint($size) {
    @include set-font(--standard, (
        --line-height: null,
        --size:        fn.global-dim(list.join(--heading, $size)),
        --weight:      500,
        --spacing:     1px
    ));

    color: fn.global-color(--text-mute);
}