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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
mixin view-heading
+view('heading', 'Heading')
.c-box
h1.u-mt-0= 'H1 default'
h2= 'H2 default'
h3= 'H3 default'
h4= 'H4 default'
h5= 'H5 default'
h6= 'H6 default'
.c-box.s-headings
h1.u-mt-0= 'H1 styled'
h2= 'H2 styled'
h3= 'H3 styled'
h4= 'H4 styled'
h5= 'H5 styled'
h6= 'H6 styled'
.c-box.s-headings.s-headings--display
h1.u-mt-0= 'H1 display styled'
h2= 'H2 display styled'
h3= 'H3 display styled'
h4= 'H4 display styled'
h5= 'H5 display styled'
h6= 'H6 display styled'
.c-box
+div-heading('xxl')(class='u-mt-0')= 'XXL Heading'
+div-heading('xl')= 'XL Heading'
+div-heading('lg')= 'LG Heading'
+div-heading('md')= 'MD Heading'
+div-heading('sm')= 'SM Heading'
+div-heading('xs')= 'XS Heading'
.c-box
+div-heading('xxl', true)(class='u-mt-0')= 'XXL display Heading'
+div-heading('xl', true)= 'XL display Heading'
+div-heading('lg', true)= 'LG display Heading'
+div-heading('md', true)= 'MD display Heading'
+div-heading('sm', true)= 'SM display Heading'
+div-heading('xs', true)= 'XS display Heading'
each theme in ['static-black', 'static-white']
-
const bg = theme.startsWith('static-black') ? 500 : 1000;
.c-box(style=`background-color: var(--colors--blue-static--${bg});`)
h1.u-mt-0= 'H1 default'
h2= 'H2 default'
h3= 'H3 default'
h4= 'H4 default'
h5= 'H5 default'
h6= 'H6 default'
.c-box.s-headings(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
h1.u-mt-0= 'H1 styled'
h2= 'H2 styled'
h3= 'H3 styled'
h4= 'H4 styled'
h5= 'H5 styled'
h6= 'H6 styled'
.c-box.s-headings.s-headings--display(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
h1.u-mt-0= 'H1 display styled'
h2= 'H2 display styled'
h3= 'H3 display styled'
h4= 'H4 display styled'
h5= 'H5 display styled'
h6= 'H6 display styled'
.c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+div-heading('xxl')(color=theme class='u-mt-0')= 'XXL Heading'
+div-heading('xl')(color=theme)= 'XL Heading'
+div-heading('lg')(color=theme)= 'LG Heading'
+div-heading('md')(color=theme)= 'MD Heading'
+div-heading('sm')(color=theme)= 'SM Heading'
+div-heading('xs')(color=theme)= 'XS Heading'
.c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+div-heading('xxl', true)(color=theme class='u-mt-0')= 'XXL display Heading'
+div-heading('xl', true)(color=theme)= 'XL display Heading'
+div-heading('lg', true)(color=theme)= 'LG display Heading'
+div-heading('md', true)(color=theme)= 'MD display Heading'
+div-heading('sm', true)(color=theme)= 'SM display Heading'
+div-heading('xs', true)(color=theme)= 'XS display Heading'
|
