summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.vars.scss
blob: 7a441c68d05f73b4041099cf843286121063e624 (plain) (blame)
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
@use 'iro-sass/src/props';
@use '../core.vars' as core;

$offset:            props.def(--o-heading--offset, -.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');
$bg-color:   props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;

$font-family:      props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default;
$line-height:      props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default;
$font-weight:      props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default;
$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;

$font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
$line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--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, props.get(core.$font--headline--weight)) !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--headline--feature-settings)) !default;

$font-family--xl:      props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
$line-height--xl:      props.def(--o-heading--xl--line-height, props.get(core.$font--headline--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, props.get(core.$font--headline--weight)) !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--headline--feature-settings)) !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--headline--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;

$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--headline--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;

$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--headline--line-height)) !default;
$font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
$font-weight--sm:      props.def(--o-heading--sm--font-weight, 500) !default;
$letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 1px) !default;
$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !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--headline--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, 500) !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;

$sizes: (
    'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
    'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
    'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
    'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
    'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
    'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--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--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--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, 0) !default;
$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;

$display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
$display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--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, props.get(core.$font--headline--weight)) !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--headline--feature-settings)) !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--headline--line-height)) !default;
$display--font-size--sm:        props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !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--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--headline--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, 500) !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--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,
    '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,
    '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,
    '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,
    '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,
    '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,
) !default;