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) {
	font-size: fn.global-dim(list.join(--heading, $size));
	color:     fn.global-color(--heading);
}

@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);
}