diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_headings.scss | 73 |
1 files changed, 30 insertions, 43 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index fc4991a..5b05b45 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss | |||
@@ -20,65 +20,52 @@ | |||
20 | 20 | ||
21 | 21 | ||
22 | h1 { | 22 | h1 { |
23 | color: fn.foreign-color(--heading, --strong); | 23 | @include mx.heading-strong(fn.global-dim(--heading --lg)); |
24 | font-size: fn.global-dim(--font-size --400); | ||
25 | } | 24 | } |
26 | 25 | ||
27 | h2 { | 26 | h2 { |
28 | color: fn.foreign-color(--heading, --strong); | 27 | @include mx.heading-medium(fn.global-dim(--heading --md)); |
29 | font-size: fn.global-dim(--font-size --300); | ||
30 | } | ||
31 | |||
32 | h3 { | ||
33 | color: fn.foreign-color(--heading, --strong); | ||
34 | font-size: fn.global-dim(--font-size --200); | ||
35 | } | ||
36 | |||
37 | h4 { | ||
38 | color: fn.foreign-color(--heading, --strong); | ||
39 | font-size: fn.global-dim(--font-size --150); | ||
40 | } | ||
41 | |||
42 | h5 { | ||
43 | @include mx.set-font(--standard, ( | ||
44 | --line-height: null, | ||
45 | --size: fn.global-dim(--font-size --75), | ||
46 | --weight: bold, | ||
47 | --transform: uppercase, | ||
48 | --spacing: 1px | ||
49 | )); | ||
50 | |||
51 | transform: none; | ||
52 | color: fn.foreign-color(--heading, --strong); | ||
53 | } | 28 | } |
54 | 29 | ||
30 | h3, | ||
31 | h4, | ||
32 | h5, | ||
55 | h6 { | 33 | h6 { |
56 | @include mx.set-font(--standard, ( | 34 | @include mx.heading-faint(fn.global-dim(--heading --sm)); |
57 | --line-height: null, | ||
58 | --size: fn.global-dim(--font-size --50), | ||
59 | --weight: 500, | ||
60 | --transform: uppercase, | ||
61 | --spacing: 1px | ||
62 | )); | ||
63 | |||
64 | transform: none; | ||
65 | color: fn.foreign-color(--heading, --light); | ||
66 | } | 35 | } |
67 | 36 | ||
68 | @include iro.bem-modifier('display') { | 37 | @include iro.bem-modifier('display') { |
38 | h1, | ||
39 | h2, | ||
40 | h3, | ||
41 | h4, | ||
42 | h5, | ||
43 | h6 { | ||
44 | @include mx.set-font(--headline); | ||
45 | } | ||
46 | |||
69 | h1 { | 47 | h1 { |
70 | color: fn.foreign-color(--heading, --strong); | 48 | @include mx.heading-strong(fn.global-dim(--heading --display --xxl)); |
71 | font-size: fn.global-dim(--font-size --900); | ||
72 | } | 49 | } |
73 | 50 | ||
74 | h2 { | 51 | h2 { |
75 | color: fn.foreign-color(--heading, --strong); | 52 | @include mx.heading-strong(fn.global-dim(--heading --display --xl)); |
76 | font-size: fn.global-dim(--font-size --600); | ||
77 | } | 53 | } |
78 | 54 | ||
79 | h3 { | 55 | h3 { |
80 | color: fn.foreign-color(--heading, --strong); | 56 | @include mx.heading-strong(fn.global-dim(--heading --display --lg)); |
81 | font-size: fn.global-dim(--font-size --300); | 57 | } |
58 | |||
59 | h4 { | ||
60 | @include mx.heading-strong(fn.global-dim(--heading --display --md)); | ||
61 | } | ||
62 | |||
63 | h5 { | ||
64 | @include mx.heading-medium(fn.global-dim(--heading --display --sm)); | ||
65 | } | ||
66 | |||
67 | h6 { | ||
68 | @include mx.heading-faint(fn.global-dim(--heading --display --xs)); | ||
82 | } | 69 | } |
83 | } | 70 | } |
84 | } | 71 | } |