summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_heading.scss67
1 files changed, 22 insertions, 45 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 56d4987..b6ae3a4 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -26,65 +26,42 @@
26 } 26 }
27 27
28 @include iro.bem-modifier('xxl') { 28 @include iro.bem-modifier('xxl') {
29 color: fn.color(--strong); 29 @include mx.heading-strong(fn.global-dim(--heading --lg));
30 font-size: fn.global-dim(--font-size --400);
31 } 30 }
32 31
33 @include iro.bem-modifier('xl') { 32 @include iro.bem-modifier('xl') {
34 color: fn.color(--strong); 33 @include mx.heading-medium(fn.global-dim(--heading --md));
35 font-size: fn.global-dim(--font-size --300);
36 } 34 }
37 35
38 @include iro.bem-modifier('lg') { 36 @include iro.bem-modifier('lg', 'md', 'sm', 'xs') {
39 color: fn.color(--strong); 37 @include mx.heading-faint(fn.global-dim(--heading --sm));
40 font-size: fn.global-dim(--font-size --200);
41 }
42
43 @include iro.bem-modifier('md') {
44 color: fn.color(--strong);
45 font-size: fn.global-dim(--font-size --150);
46 }
47
48 @include iro.bem-modifier('sm') {
49 @include mx.set-font(--standard, (
50 --line-height: null,
51 --size: fn.global-dim(--font-size --75),
52 --weight: bold,
53 --transform: uppercase,
54 --spacing: 1px
55 ));
56
57 transform: none;
58 color: fn.color(--strong);
59 }
60
61 @include iro.bem-modifier('xs') {
62 @include mx.set-font(--standard, (
63 --line-height: null,
64 --size: fn.global-dim(--font-size --50),
65 --weight: 500,
66 --transform: uppercase,
67 --spacing: 1px
68 ));
69
70 transform: none;
71 color: fn.color(--light);
72 } 38 }
73 39
74 @include iro.bem-modifier('display') { 40 @include iro.bem-modifier('display') {
41 @include mx.set-font(--headline);
42
75 @include iro.bem-modifier('xxl') { 43 @include iro.bem-modifier('xxl') {
76 color: fn.foreign-color(--heading, --strong); 44 @include mx.heading-strong(fn.global-dim(--heading --display --xxl));
77 font-size: fn.global-dim(--font-size --900);
78 } 45 }
79 46
80 @include iro.bem-modifier('xl') { 47 @include iro.bem-modifier('xl') {
81 color: fn.foreign-color(--heading, --strong); 48 @include mx.heading-strong(fn.global-dim(--heading --display --xl));
82 font-size: fn.global-dim(--font-size --600); 49 }
50
51 @include iro.bem-modifier('lg') {
52 @include mx.heading-strong(fn.global-dim(--heading --display --lg));
53 }
54
55 @include iro.bem-modifier('md') {
56 @include mx.heading-strong(fn.global-dim(--heading --display --md));
57 }
58
59 @include iro.bem-modifier('sm') {
60 @include mx.heading-medium(fn.global-dim(--heading --display --sm));
83 } 61 }
84 62
85 @include iro.bem-modifier('l') { 63 @include iro.bem-modifier('xs') {
86 color: fn.foreign-color(--heading, --strong); 64 @include mx.heading-faint(fn.global-dim(--heading --display --xs));
87 font-size: fn.global-dim(--font-size --300);
88 } 65 }
89 } 66 }
90 } 67 }