summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_heading.vars.scss')
-rw-r--r--src/objects/_heading.vars.scss122
1 files changed, 122 insertions, 0 deletions
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
new file mode 100644
index 0000000..31a2406
--- /dev/null
+++ b/src/objects/_heading.vars.scss
@@ -0,0 +1,122 @@
1@use '../props';
2@use '../core.vars' as core;
3
4$offset: props.def(--o-heading--offset, -.02em) !default;
5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
7
8$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default;
9
10$font-family: props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default;
11$line-height: props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default;
12$font-weight: props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default;
13$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
14
15$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
16$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
17$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
18$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
19$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
20$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
21
22$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
23$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
24$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
25$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
26$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
28
29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
35
36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
42
43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
49
50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
54$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
55$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
56
57$sizes: (
58 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
59 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
60 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
61 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
62 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
63 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
64) !default;
65
66$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
67$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
68$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default;
69$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
70$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
71$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
72
73$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
74$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
75$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default;
76$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
77$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default;
78$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
79
80$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
81$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
82$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default;
83$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
84$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default;
85$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
86
87$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
88$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
89$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
90$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
91$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
93
94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
100
101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
105$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
106$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
107
108$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
109$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
110$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default;
111$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default;
112$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default;
113$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
114
115$display--sizes: (
116 '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,
117 '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,
118 '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,
119 '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,
120 '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,
121 '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,
122) !default;