summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_heading.scss')
-rw-r--r--src/objects/_heading.scss44
1 files changed, 24 insertions, 20 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index a0ce052..393fe14 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,4 +1,5 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2@use '../vars'; 3@use '../vars';
3@use '../mixins/typography'; 4@use '../mixins/typography';
4 5
@@ -6,61 +7,64 @@
6 @include iro.props-store(( 7 @include iro.props-store((
7 --dims: ( 8 --dims: (
8 --in-page-margin: ( 9 --in-page-margin: (
9 --top: iro.props-get(--dims --spacing --y --lg, $global: true), 10 --top: fn.dim(--spacing --y --lg, $global: true),
10 --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true), 11 --top-sibling: fn.dim(--spacing --y --md, $global: true),
11 --bottom: iro.props-get(--dims --spacing --y --sm, $global: true), 12 --bottom: fn.dim(--spacing --y --sm, $global: true),
12 ), 13 ),
13 ), 14 ),
15 ), 'dims');
16
17 @include iro.props-store((
14 --colors: ( 18 --colors: (
15 --light: iro.props-get(--colors --fg-hi, $global: true), 19 --light: fn.color(--fg-hi, $global: true),
16 --strong: iro.props-get(--colors --fg-lo, $global: true), 20 --strong: fn.color(--fg-lo, $global: true),
17 ), 21 ),
18 )); 22 ), 'colors');
19 23
20 @include iro.bem-object(iro.props-namespace()) { 24 @include iro.bem-object(iro.props-namespace()) {
21 @include typography.set-font(vars.$font--headline); 25 @include typography.set-font(vars.$font--headline);
22 26
23 display: block; 27 display: block;
24 margin-top: iro.props-get(--dims --in-page-margin --top); 28 margin-top: fn.dim(--in-page-margin --top);
25 margin-bottom: 0; 29 margin-bottom: 0;
26 30
27 & + & { 31 & + & {
28 margin-top: iro.props-get(--dims --in-page-margin --top-sibling); 32 margin-top: fn.dim(--in-page-margin --top-sibling);
29 } 33 }
30 34
31 @include iro.bem-modifier('xxl') { 35 @include iro.bem-modifier('xxl') {
32 color: iro.props-get(--colors --strong); 36 color: fn.color(--strong);
33 font-size: iro.props-get(--dims --font-size --xxxl, $global: true); 37 font-size: fn.dim(--font-size --xxxl, $global: true);
34 } 38 }
35 39
36 @include iro.bem-modifier('xl') { 40 @include iro.bem-modifier('xl') {
37 color: iro.props-get(--colors --strong); 41 color: fn.color(--strong);
38 font-size: iro.props-get(--dims --font-size --xxl, $global: true); 42 font-size: fn.dim(--font-size --xxl, $global: true);
39 } 43 }
40 44
41 @include iro.bem-modifier('lg') { 45 @include iro.bem-modifier('lg') {
42 color: iro.props-get(--colors --strong); 46 color: fn.color(--strong);
43 font-size: iro.props-get(--dims --font-size --xl, $global: true); 47 font-size: fn.dim(--font-size --xl, $global: true);
44 } 48 }
45 49
46 @include iro.bem-modifier('md') { 50 @include iro.bem-modifier('md') {
47 color: iro.props-get(--colors --strong); 51 color: fn.color(--strong);
48 font-size: iro.props-get(--dims --font-size --lg, $global: true); 52 font-size: fn.dim(--font-size --lg, $global: true);
49 } 53 }
50 54
51 @include iro.bem-modifier('sm') { 55 @include iro.bem-modifier('sm') {
52 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); 56 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
53 57
54 color: iro.props-get(--colors --strong); 58 color: fn.color(--strong);
55 font-size: iro.props-get(--dims --font-size --md, $global: true); 59 font-size: fn.dim(--font-size --md, $global: true);
56 font-weight: 500; 60 font-weight: 500;
57 } 61 }
58 62
59 @include iro.bem-modifier('xs') { 63 @include iro.bem-modifier('xs') {
60 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); 64 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
61 65
62 color: iro.props-get(--colors --light); 66 color: fn.color(--light);
63 font-size: iro.props-get(--dims --font-size --xs, $global: true); 67 font-size: fn.dim(--font-size --xs, $global: true);
64 font-weight: 500; 68 font-weight: 500;
65 text-transform: uppercase; 69 text-transform: uppercase;
66 } 70 }