diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_heading.scss | 67 |
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 | } |