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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
|
@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/props";
@use "../core.vars" as core;
$offset: props.def(--o-heading--offset, -0.02em) !default;
$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
$text-color: props.def(
--o-heading--text-color,
props.get(core.$theme, --heading),
"color"
) !default;
$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), "color") !default;
$text-color--xxl: props.def(
--o-heading--xxl--text-color,
props.get(core.$theme, --heading),
"color"
) !default;
$text-color--xl: props.def(
--o-heading--xl--text-color,
props.get($text-color--xxl),
"color"
) !default;
$text-color--lg: props.def(
--o-heading--lg--text-color,
props.get($text-color--xxl),
"color"
) !default;
$text-color--md: props.def(
--o-heading--md--text-color,
props.get($text-color--xxl),
"color"
) !default;
$text-color--sm: props.def(
--o-heading--sm--text-color,
props.get(core.$theme, --text-mute-more),
"color"
) !default;
$text-color--xs: props.def(
--o-heading--xs--text-color,
props.get($text-color--sm),
"color"
) !default;
$display--text-color--xxl: props.def(
--o-heading--display--xxl--text-color,
props.get(core.$theme, --heading),
"color"
) !default;
$display--text-color--xl: props.def(
--o-heading--display--xl--text-color,
props.get($display--text-color--xxl),
"color"
) !default;
$display--text-color--lg: props.def(
--o-heading--display--lg--text-color,
props.get($display--text-color--xxl),
"color"
) !default;
$display--text-color--md: props.def(
--o-heading--display--md--text-color,
props.get($display--text-color--xxl),
"color"
) !default;
$display--text-color--sm: props.def(
--o-heading--display--sm--text-color,
props.get($display--text-color--xxl),
"color"
) !default;
$display--text-color--xs: props.def(
--o-heading--display--xs--text-color,
props.get(core.$theme, --text-mute-more),
"color"
) !default;
$bg-start: props.def(--o-heading--bg-start, 0.05em) !default;
$bg-end: props.def(--o-heading--bg-end, 0.5em) !default;
$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
$line-height: props.def(
--o-heading--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-weight: props.def(--o-heading--font-weight, bold) !default;
$feature-settings: props.def(
--o-heading--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform: props.def(--o-heading--text-transform, none) !default;
$font-family--xxl: props.def(
--o-heading--xxl--font-family,
props.get(core.$font--standard--family)
) !default;
$line-height--xxl: props.def(
--o-heading--xxl--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default;
$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
$feature-settings--xxl: props.def(
--o-heading--xxl--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default;
$font-family--xl: props.def(
--o-heading--xl--font-family,
props.get(core.$font--standard--family)
) !default;
$line-height--xl: props.def(
--o-heading--xl--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default;
$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
$feature-settings--xl: props.def(
--o-heading--xl--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default;
$font-family--lg: props.def(
--o-heading--lg--font-family,
props.get(core.$font--standard--family)
) !default;
$line-height--lg: props.def(
--o-heading--lg--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
$feature-settings--lg: props.def(
--o-heading--lg--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default;
$font-family--md: props.def(
--o-heading--md--font-family,
props.get(core.$font--standard--family)
) !default;
$line-height--md: props.def(
--o-heading--md--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
$feature-settings--md: props.def(
--o-heading--md--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform--md: props.def(--o-heading--md--text-transform, none) !default;
$font-family--sm: props.def(
--o-heading--sm--font-family,
props.get(core.$font--standard--family)
) !default;
$line-height--sm: props.def(
--o-heading--sm--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default;
$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default;
$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default;
$feature-settings--sm: props.def(
--o-heading--sm--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default;
$font-family--xs: props.def(
--o-heading--xs--font-family,
props.get(core.$font--standard--family)
) !default;
$line-height--xs: props.def(
--o-heading--xs--line-height,
props.get(core.$font--standard--line-height)
) !default;
$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default;
$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
$feature-settings--xs: props.def(
--o-heading--xs--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default;
$sizes: (
"xs" $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs
$feature-settings--xs $text-transform--xs $text-color--xs,
"sm" $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm
$feature-settings--sm $text-transform--sm $text-color--sm,
"md" $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md
$feature-settings--md $text-transform--md $text-color--md,
"lg" $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg
$feature-settings--lg $text-transform--lg $text-color--lg,
"xl" $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl
$feature-settings--xl $text-transform--xl $text-color--xl,
"xxl" $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl
$feature-settings--xxl $text-transform--xxl $text-color--xxl
) !default;
$display--font-family--xxl: props.def(
--o-heading--display--xxl--font-family,
props.get(core.$font--headline--family)
) !default;
$display--line-height--xxl: props.def(
--o-heading--display--xxl--line-height,
props.get(core.$font--headline--line-height)
) !default;
$display--font-size--xxl: props.def(
--o-heading--display--xxl--font-size,
props.get(core.$font-size--1100)
) !default;
$display--font-weight--xxl: props.def(
--o-heading--display--xxl--font-weight,
props.get(core.$font--headline--weight)
) !default;
$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
$display--feature-settings--xxl: props.def(
--o-heading--display--xxl--feature-settings,
props.get(core.$font--headline--feature-settings)
) !default;
$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default;
$display--font-family--xl: props.def(
--o-heading--display--xl--font-family,
props.get(core.$font--headline--family)
) !default;
$display--line-height--xl: props.def(
--o-heading--display--xl--line-height,
props.get(core.$font--headline--line-height)
) !default;
$display--font-size--xl: props.def(
--o-heading--display--xl--font-size,
props.get(core.$font-size--700)
) !default;
$display--font-weight--xl: props.def(
--o-heading--display--xl--font-weight,
props.get(core.$font--headline--weight)
) !default;
$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default;
$display--feature-settings--xl: props.def(
--o-heading--display--xl--feature-settings,
props.get(core.$font--headline--feature-settings)
) !default;
$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default;
$display--font-family--lg: props.def(
--o-heading--display--lg--font-family,
props.get(core.$font--headline--family)
) !default;
$display--line-height--lg: props.def(
--o-heading--display--lg--line-height,
props.get(core.$font--headline--line-height)
) !default;
$display--font-size--lg: props.def(
--o-heading--display--lg--font-size,
props.get(core.$font-size--300)
) !default;
$display--font-weight--lg: props.def(
--o-heading--display--lg--font-weight,
props.get(core.$font--headline--weight)
) !default;
$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 1px) !default;
$display--feature-settings--lg: props.def(
--o-heading--display--lg--feature-settings,
props.get(core.$font--headline--feature-settings)
) !default;
$display--text-transform--lg: props.def(
--o-heading--display--lg--text-transform,
uppercase
) !default;
$display--font-family--md: props.def(
--o-heading--display--md--font-family,
props.get(core.$font--standard--family)
) !default;
$display--line-height--md: props.def(
--o-heading--display--md--line-height,
props.get(core.$font--standard--line-height)
) !default;
$display--font-size--md: props.def(
--o-heading--display--md--font-size,
props.get(core.$font-size--150)
) !default;
$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default;
$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
$display--feature-settings--md: props.def(
--o-heading--display--md--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default;
$display--font-family--sm: props.def(
--o-heading--display--sm--font-family,
props.get(core.$font--standard--family)
) !default;
$display--line-height--sm: props.def(
--o-heading--display--sm--line-height,
props.get(core.$font--standard--line-height)
) !default;
$display--font-size--sm: props.def(
--o-heading--display--sm--font-size,
props.get(core.$font-size--100)
) !default;
$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
$display--feature-settings--sm: props.def(
--o-heading--display--sm--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default;
$display--font-family--xs: props.def(
--o-heading--display--xs--font-family,
props.get(core.$font--standard--family)
) !default;
$display--line-height--xs: props.def(
--o-heading--display--xs--line-height,
props.get(core.$font--standard--line-height)
) !default;
$display--font-size--xs: props.def(
--o-heading--display--xs--font-size,
props.get(core.$font-size--50)
) !default;
$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default;
$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
$display--feature-settings--xs: props.def(
--o-heading--display--xs--feature-settings,
props.get(core.$font--standard--feature-settings)
) !default;
$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default;
$display--font-size--xxl--md: props.def(
--o-heading--display--xxl--font-size,
props.get(core.$font-size--900),
"md"
) !default;
$display--font-size--xl--md: props.def(
--o-heading--display--xl--font-size,
props.get(core.$font-size--600),
"md"
) !default;
$display--font-size--lg--md: props.def(
--o-heading--display--lg--font-size,
props.get(core.$font-size--200),
"md"
) !default;
$display--font-size--md--md: props.def(
--o-heading--display--md--font-size,
props.get(core.$font-size--100),
"md"
) !default;
$display--font-size--sm--md: props.def(
--o-heading--display--sm--font-size,
props.get(core.$font-size--75),
"md"
) !default;
$display--font-size--xs--md: props.def(
--o-heading--display--xs--font-size,
props.get(core.$font-size--50),
"md"
) !default;
$display--sizes: (
"xs" $display--font-family--xs $display--line-height--xs $display--font-size--xs
$display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs
$display--text-transform--xs $display--text-color--xs,
"sm" $display--font-family--sm $display--line-height--sm $display--font-size--sm
$display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm
$display--text-transform--sm $display--text-color--sm,
"md" $display--font-family--md $display--line-height--md $display--font-size--md
$display--font-weight--md $display--letter-spacing--md $display--feature-settings--md
$display--text-transform--md $display--text-color--md,
"lg" $display--font-family--lg $display--line-height--lg $display--font-size--lg
$display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg
$display--text-transform--lg $display--text-color--lg,
"xl" $display--font-family--xl $display--line-height--xl $display--font-size--xl
$display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl
$display--text-transform--xl $display--text-color--xl,
"xxl" $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl
$display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl
$display--text-transform--xxl $display--text-color--xxl
) !default;
$static-themes: props.def(--o-heading, (), "color");
@each $theme in map.keys(props.get(core.$transparent-colors)) {
$heading-theme: --static-#{string.slice($theme, 3)};
$static-themes: props.merge(
$static-themes,
(
$heading-theme: (
--bg-color: props.get(core.$transparent-colors, $theme, --200),
--text-color: props.get(core.$transparent-colors, $theme, --900),
--xxl: (
--text-color: props.get(core.$transparent-colors, $theme, --900),
),
--xl: (
--text-color: props.get(core.$transparent-colors, $theme, --900),
),
--lg: (
--text-color: props.get(core.$transparent-colors, $theme, --900),
),
--md: (
--text-color: props.get(core.$transparent-colors, $theme, --900),
),
--sm: (
--text-color: props.get(core.$transparent-colors, $theme, --500),
),
--xs: (
--text-color: props.get(core.$transparent-colors, $theme, --500),
),
--display: (
--xxl: (
--text-color: props.get(
core.$transparent-colors,
$theme,
--900
),
),
--xl: (
--text-color: props.get(
core.$transparent-colors,
$theme,
--900
),
),
--lg: (
--text-color: props.get(
core.$transparent-colors,
$theme,
--900
),
),
--md: (
--text-color: props.get(
core.$transparent-colors,
$theme,
--900
),
),
--sm: (
--text-color: props.get(
core.$transparent-colors,
$theme,
--900
),
),
--xs: (
--text-color: props.get(
core.$transparent-colors,
$theme,
--500
),
),
),
),
)
);
}
|
