@esri/calcite-design-tokens 3.0.1 → 3.0.2-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/css/{breakpoint.css → breakpoints.css} +21 -21
  2. package/dist/css/classes.css +157 -157
  3. package/dist/css/core.css +313 -317
  4. package/dist/css/dark.css +40 -40
  5. package/dist/css/global.css +108 -111
  6. package/dist/css/index.css +5 -5
  7. package/dist/css/light.css +41 -41
  8. package/dist/css/semantic.css +137 -0
  9. package/dist/docs/core.json +3143 -5334
  10. package/dist/docs/global.json +2375 -3570
  11. package/dist/docs/semantic.json +3767 -0
  12. package/dist/es6/breakpoints.d.ts +50 -0
  13. package/dist/es6/breakpoints.js +17 -0
  14. package/dist/es6/core.d.ts +344 -333
  15. package/dist/es6/core.js +37 -7
  16. package/dist/es6/global.d.ts +472 -273
  17. package/dist/es6/global.js +392 -115
  18. package/dist/es6/semantic.d.ts +175 -0
  19. package/dist/es6/semantic.js +154 -0
  20. package/dist/js/core.d.ts +396 -402
  21. package/dist/js/core.js +2901 -5404
  22. package/dist/js/global.d.ts +338 -343
  23. package/dist/js/global.js +2324 -3676
  24. package/dist/js/semantic.d.ts +199 -0
  25. package/dist/js/semantic.js +6894 -0
  26. package/dist/scss/breakpoints.scss +23 -23
  27. package/dist/scss/core.scss +314 -316
  28. package/dist/scss/dark.scss +41 -42
  29. package/dist/scss/global.scss +110 -116
  30. package/dist/scss/index.scss +4 -4
  31. package/dist/scss/light.scss +42 -43
  32. package/dist/scss/mixins.scss +190 -151
  33. package/dist/scss/semantic.scss +134 -0
  34. package/package.json +8 -5
package/dist/css/{breakpoint.css → breakpoints.css} RENAMED
@@ -1,29 +1,29 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:08 GMT
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-container-size-width-xl-min: 1441px; /* Projectors and televisions */
8
- --calcite-container-size-width-lg-min: 1153px; /* Large laptops and desktop computers */
9
- --calcite-container-size-width-lg-max: 1440px; /* Large laptops and desktop computers */
10
- --calcite-container-size-width-md-min: 769px; /* Small laptops */
11
- --calcite-container-size-width-md-max: 1152px; /* Small laptops */
12
- --calcite-container-size-width-sm-min: 477px; /* Small tablets */
13
- --calcite-container-size-width-sm-max: 768px; /* Small tablets */
14
- --calcite-container-size-width-xs-min: 321px; /* Handheld devices */
15
- --calcite-container-size-width-xs-max: 476px; /* Handheld devices */
7
+ --calcite-container-size-height-xxs-min: 0; /* Small handheld devices and mini-windows */
16
8
  --calcite-container-size-width-xxs-min: 0; /* Small handheld devices and mini-windows */
17
- --calcite-container-size-width-xxs-max: 320px; /* Small handheld devices and mini-windows */
18
- --calcite-container-size-height-xl-min: 855px; /* Projectors and televisions */
19
- --calcite-container-size-height-lg-min: 679px; /* Large laptops and desktop computers */
20
- --calcite-container-size-height-lg-max: 854px; /* Large laptops and desktop computers */
21
- --calcite-container-size-height-md-min: 505px; /* Small laptops */
22
- --calcite-container-size-height-md-max: 678px; /* Small laptops */
23
- --calcite-container-size-height-sm-min: 329px; /* Small tablets */
24
- --calcite-container-size-height-sm-max: 504px; /* Small tablets */
9
+ --calcite-container-size-height-xxs-max: 154px; /* Small handheld devices and mini-windows */
25
10
  --calcite-container-size-height-xs-min: 155px; /* Handheld devices */
26
11
  --calcite-container-size-height-xs-max: 328px; /* Handheld devices */
27
- --calcite-container-size-height-xxs-min: 0; /* Small handheld devices and mini-windows */
28
- --calcite-container-size-height-xxs-max: 154px; /* Small handheld devices and mini-windows */
12
+ --calcite-container-size-height-sm-min: 329px; /* Small tablets */
13
+ --calcite-container-size-height-sm-max: 504px; /* Small tablets */
14
+ --calcite-container-size-height-md-min: 505px; /* Small laptops */
15
+ --calcite-container-size-height-md-max: 678px; /* Small laptops */
16
+ --calcite-container-size-height-lg-min: 679px; /* Large laptops and desktop computers */
17
+ --calcite-container-size-height-lg-max: 854px; /* Large laptops and desktop computers */
18
+ --calcite-container-size-height-xl-min: 855px; /* Projectors and televisions */
19
+ --calcite-container-size-width-xxs-max: 320px; /* Small handheld devices and mini-windows */
20
+ --calcite-container-size-width-xs-min: 321px; /* Handheld devices */
21
+ --calcite-container-size-width-xs-max: 476px; /* Handheld devices */
22
+ --calcite-container-size-width-sm-min: 477px; /* Small tablets */
23
+ --calcite-container-size-width-sm-max: 768px; /* Small tablets */
24
+ --calcite-container-size-width-md-min: 769px; /* Small laptops */
25
+ --calcite-container-size-width-md-max: 1152px; /* Small laptops */
26
+ --calcite-container-size-width-lg-min: 1153px; /* Large laptops and desktop computers */
27
+ --calcite-container-size-width-lg-max: 1440px; /* Large laptops and desktop computers */
28
+ --calcite-container-size-width-xl-min: 1441px; /* Projectors and televisions */
29
29
  }
package/dist/css/classes.css CHANGED
@@ -1,266 +1,257 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:08 GMT
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
- .calcite-typography-hierarchy-overline {
7
- line-height: var(--calcite-font-line-height-fixed-sm);
8
- text-case: var(--calcite-font-text-case-uppercase);
9
- font-weight: var(--calcite-font-weight-bold);
6
+ .calcite-typography {
7
+ font-family: var(--calcite-font-family);
8
+ font-size: var(--calcite-font-size);
9
+ font-weight: var(--calcite-font-weight-regular);
10
+ letter-spacing: var(--calcite-font-letter-spacing-normal);
11
+ line-height: var(--calcite-font-line-height-fixed-base);
12
+ paragraph-spacing: var(--calcite-font-paragraph-spacing-normal);
13
+ text-case: var(--calcite-font-text-case-none);
14
+ text-decoration: var(--calcite-font-text-decoration-none);
10
15
  }
11
- .calcite-typography-wrap-bold-minus-1 {
12
- font-weight: var(--calcite-font-weight-semibold);
13
- line-height: var(--calcite-font-line-height-relative-snug);
16
+ .calcite-typography-light-minus-3h {
17
+ font-size: var(--calcite-font-size-xs);
18
+ font-weight: var(--calcite-font-weight-light);
19
+ line-height: var(--calcite-font-line-height-fixed-sm);
14
20
  }
15
- .calcite-typography-wrap-bold-minus-2 {
16
- font-weight: var(--calcite-font-weight-semibold);
17
- line-height: var(--calcite-font-line-height-relative-snug);
21
+ .calcite-typography-light-minus-2h {
18
22
  font-size: var(--calcite-font-size-sm);
23
+ font-weight: var(--calcite-font-weight-light);
19
24
  }
20
- .calcite-typography-wrap-bold-3 {
21
- font-weight: var(--calcite-font-weight-semibold);
22
- line-height: var(--calcite-font-line-height-relative-snug);
23
- font-size: var(--calcite-font-size-xxl);
25
+ .calcite-typography-light-minus-1h {
26
+ font-weight: var(--calcite-font-weight-light);
24
27
  }
25
- .calcite-typography-wrap-bold-2 {
26
- font-weight: var(--calcite-font-weight-semibold);
27
- line-height: var(--calcite-font-line-height-relative-snug);
28
- font-size: var(--calcite-font-size-xl);
28
+ .calcite-typography-light-0h {
29
+ font-size: var(--calcite-font-size-md);
30
+ font-weight: var(--calcite-font-weight-light);
31
+ line-height: var(--calcite-font-line-height-fixed-lg);
29
32
  }
30
- .calcite-typography-wrap-bold-1 {
31
- font-weight: var(--calcite-font-weight-semibold);
32
- line-height: var(--calcite-font-line-height-relative-snug);
33
+ .calcite-typography-light-1h {
33
34
  font-size: var(--calcite-font-size-lg);
35
+ font-weight: var(--calcite-font-weight-light);
36
+ line-height: var(--calcite-font-line-height-fixed-xl);
34
37
  }
35
- .calcite-typography-wrap-bold-0 {
36
- font-weight: var(--calcite-font-weight-semibold);
37
- line-height: var(--calcite-font-line-height-relative-snug);
38
+ .calcite-typography-regular-minus-3h {
39
+ line-height: var(--calcite-font-line-height-fixed-sm);
40
+ font-size: var(--calcite-font-size-xs);
41
+ }
42
+ .calcite-typography-regular-minus-2h {
43
+ font-size: var(--calcite-font-size-sm);
44
+ }
45
+ .calcite-typography-regular-minus-1h {
46
+ font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
47
+ font-size: 14px;
48
+ font-weight: 400;
49
+ letter-spacing: 0;
50
+ line-height: 16px;
51
+ paragraph-spacing: 4px;
52
+ text-case: none;
53
+ text-decoration: none;
54
+ }
55
+ .calcite-typography-regular-0h {
56
+ line-height: var(--calcite-font-line-height-fixed-lg);
38
57
  font-size: var(--calcite-font-size-md);
39
58
  }
40
- .calcite-typography-wrap-medium-minus-1 {
59
+ .calcite-typography-regular-1h {
60
+ line-height: var(--calcite-font-line-height-fixed-xl);
61
+ font-size: var(--calcite-font-size-lg);
62
+ }
63
+ .calcite-typography-medium-minus-3h {
41
64
  font-weight: var(--calcite-font-weight-medium);
42
- line-height: var(--calcite-font-line-height-relative-snug);
65
+ line-height: var(--calcite-font-line-height-fixed-sm);
66
+ font-size: var(--calcite-font-size-xs);
43
67
  }
44
- .calcite-typography-wrap-medium-minus-2 {
68
+ .calcite-typography-medium-minus-2h {
45
69
  font-weight: var(--calcite-font-weight-medium);
46
- line-height: var(--calcite-font-line-height-relative-snug);
47
70
  font-size: var(--calcite-font-size-sm);
48
71
  }
49
- .calcite-typography-wrap-medium-3 {
72
+ .calcite-typography-medium-minus-1h {
50
73
  font-weight: var(--calcite-font-weight-medium);
51
- line-height: var(--calcite-font-line-height-relative-snug);
52
- font-size: var(--calcite-font-size-xxl);
53
74
  }
54
- .calcite-typography-wrap-medium-2 {
75
+ .calcite-typography-medium-0h {
55
76
  font-weight: var(--calcite-font-weight-medium);
56
- line-height: var(--calcite-font-line-height-relative-snug);
57
- font-size: var(--calcite-font-size-xl);
77
+ line-height: var(--calcite-font-line-height-fixed-lg);
78
+ font-size: var(--calcite-font-size-md);
58
79
  }
59
- .calcite-typography-wrap-medium-1 {
80
+ .calcite-typography-medium-1h {
60
81
  font-weight: var(--calcite-font-weight-medium);
61
- line-height: var(--calcite-font-line-height-relative-snug);
82
+ line-height: var(--calcite-font-line-height-fixed-xl);
62
83
  font-size: var(--calcite-font-size-lg);
63
84
  }
64
- .calcite-typography-wrap-medium-0 {
65
- font-weight: var(--calcite-font-weight-medium);
66
- line-height: var(--calcite-font-line-height-relative-snug);
67
- font-size: var(--calcite-font-size-md);
68
- }
69
- .calcite-typography-wrap-regular-minus-1 {
70
- line-height: var(--calcite-font-line-height-relative-snug);
85
+ .calcite-typography-bold-minus-3h {
86
+ font-weight: var(--calcite-font-weight-semibold);
87
+ line-height: var(--calcite-font-line-height-fixed-sm);
88
+ font-size: var(--calcite-font-size-xs);
71
89
  }
72
- .calcite-typography-wrap-regular-minus-2 {
73
- line-height: var(--calcite-font-line-height-relative-snug);
90
+ .calcite-typography-bold-minus-2h {
91
+ font-weight: var(--calcite-font-weight-semibold);
74
92
  font-size: var(--calcite-font-size-sm);
75
93
  }
76
- .calcite-typography-wrap-regular-3 {
77
- line-height: var(--calcite-font-line-height-relative-snug);
78
- font-size: var(--calcite-font-size-xxl);
94
+ .calcite-typography-bold-minus-1h {
95
+ font-weight: var(--calcite-font-weight-semibold);
79
96
  }
80
- .calcite-typography-wrap-regular-2 {
81
- line-height: var(--calcite-font-line-height-relative-snug);
82
- font-size: var(--calcite-font-size-xl);
97
+ .calcite-typography-bold-0h {
98
+ font-weight: var(--calcite-font-weight-semibold);
99
+ line-height: var(--calcite-font-line-height-fixed-lg);
100
+ font-size: var(--calcite-font-size-md);
83
101
  }
84
- .calcite-typography-wrap-regular-1 {
85
- line-height: var(--calcite-font-line-height-relative-snug);
102
+ .calcite-typography-bold-1h {
103
+ font-weight: var(--calcite-font-weight-semibold);
104
+ line-height: var(--calcite-font-line-height-fixed-xl);
86
105
  font-size: var(--calcite-font-size-lg);
87
106
  }
88
- .calcite-typography-wrap-regular-0 {
107
+ .calcite-typography-wrap-light-0 {
108
+ font-weight: var(--calcite-font-weight-light);
89
109
  line-height: var(--calcite-font-line-height-relative-snug);
90
110
  font-size: var(--calcite-font-size-md);
91
111
  }
92
- .calcite-typography-wrap-light-minus-1 {
112
+ .calcite-typography-wrap-light-1 {
93
113
  font-weight: var(--calcite-font-weight-light);
94
114
  line-height: var(--calcite-font-line-height-relative-snug);
115
+ font-size: var(--calcite-font-size-lg);
95
116
  }
96
- .calcite-typography-wrap-light-minus-2 {
117
+ .calcite-typography-wrap-light-2 {
97
118
  font-weight: var(--calcite-font-weight-light);
98
119
  line-height: var(--calcite-font-line-height-relative-snug);
99
- font-size: var(--calcite-font-size-sm);
120
+ font-size: var(--calcite-font-size-xl);
100
121
  }
101
122
  .calcite-typography-wrap-light-3 {
102
123
  font-weight: var(--calcite-font-weight-light);
103
124
  line-height: var(--calcite-font-line-height-relative-tight);
104
125
  font-size: var(--calcite-font-size-xxl);
105
126
  }
106
- .calcite-typography-wrap-light-2 {
127
+ .calcite-typography-wrap-light-minus-2 {
107
128
  font-weight: var(--calcite-font-weight-light);
108
129
  line-height: var(--calcite-font-line-height-relative-snug);
109
- font-size: var(--calcite-font-size-xl);
130
+ font-size: var(--calcite-font-size-sm);
110
131
  }
111
- .calcite-typography-wrap-light-1 {
132
+ .calcite-typography-wrap-light-minus-1 {
112
133
  font-weight: var(--calcite-font-weight-light);
113
134
  line-height: var(--calcite-font-line-height-relative-snug);
114
- font-size: var(--calcite-font-size-lg);
115
135
  }
116
- .calcite-typography-wrap-light-0 {
117
- font-weight: var(--calcite-font-weight-light);
136
+ .calcite-typography-wrap-regular-0 {
118
137
  line-height: var(--calcite-font-line-height-relative-snug);
119
138
  font-size: var(--calcite-font-size-md);
120
139
  }
121
- .calcite-typography-bold-1h {
122
- font-weight: var(--calcite-font-weight-semibold);
123
- line-height: var(--calcite-font-line-height-fixed-xl);
140
+ .calcite-typography-wrap-regular-1 {
141
+ line-height: var(--calcite-font-line-height-relative-snug);
124
142
  font-size: var(--calcite-font-size-lg);
125
143
  }
126
- .calcite-typography-bold-0h {
127
- font-weight: var(--calcite-font-weight-semibold);
128
- line-height: var(--calcite-font-line-height-fixed-lg);
129
- font-size: var(--calcite-font-size-md);
144
+ .calcite-typography-wrap-regular-2 {
145
+ line-height: var(--calcite-font-line-height-relative-snug);
146
+ font-size: var(--calcite-font-size-xl);
130
147
  }
131
- .calcite-typography-bold-minus-1h {
132
- font-weight: var(--calcite-font-weight-semibold);
148
+ .calcite-typography-wrap-regular-3 {
149
+ line-height: var(--calcite-font-line-height-relative-snug);
150
+ font-size: var(--calcite-font-size-xxl);
133
151
  }
134
- .calcite-typography-bold-minus-2h {
135
- font-weight: var(--calcite-font-weight-semibold);
152
+ .calcite-typography-wrap-regular-minus-2 {
153
+ line-height: var(--calcite-font-line-height-relative-snug);
136
154
  font-size: var(--calcite-font-size-sm);
137
155
  }
138
- .calcite-typography-bold-minus-3h {
139
- font-weight: var(--calcite-font-weight-semibold);
140
- line-height: var(--calcite-font-line-height-fixed-sm);
141
- font-size: var(--calcite-font-size-xs);
156
+ .calcite-typography-wrap-regular-minus-1 {
157
+ line-height: var(--calcite-font-line-height-relative-snug);
142
158
  }
143
- .calcite-typography-medium-1h {
159
+ .calcite-typography-wrap-medium-0 {
144
160
  font-weight: var(--calcite-font-weight-medium);
145
- line-height: var(--calcite-font-line-height-fixed-xl);
161
+ line-height: var(--calcite-font-line-height-relative-snug);
162
+ font-size: var(--calcite-font-size-md);
163
+ }
164
+ .calcite-typography-wrap-medium-1 {
165
+ font-weight: var(--calcite-font-weight-medium);
166
+ line-height: var(--calcite-font-line-height-relative-snug);
146
167
  font-size: var(--calcite-font-size-lg);
147
168
  }
148
- .calcite-typography-medium-0h {
169
+ .calcite-typography-wrap-medium-2 {
149
170
  font-weight: var(--calcite-font-weight-medium);
150
- line-height: var(--calcite-font-line-height-fixed-lg);
151
- font-size: var(--calcite-font-size-md);
171
+ line-height: var(--calcite-font-line-height-relative-snug);
172
+ font-size: var(--calcite-font-size-xl);
152
173
  }
153
- .calcite-typography-medium-minus-1h {
174
+ .calcite-typography-wrap-medium-3 {
154
175
  font-weight: var(--calcite-font-weight-medium);
176
+ line-height: var(--calcite-font-line-height-relative-snug);
177
+ font-size: var(--calcite-font-size-xxl);
155
178
  }
156
- .calcite-typography-medium-minus-2h {
179
+ .calcite-typography-wrap-medium-minus-2 {
157
180
  font-weight: var(--calcite-font-weight-medium);
181
+ line-height: var(--calcite-font-line-height-relative-snug);
158
182
  font-size: var(--calcite-font-size-sm);
159
183
  }
160
- .calcite-typography-medium-minus-3h {
184
+ .calcite-typography-wrap-medium-minus-1 {
161
185
  font-weight: var(--calcite-font-weight-medium);
162
- line-height: var(--calcite-font-line-height-fixed-sm);
163
- font-size: var(--calcite-font-size-xs);
164
- }
165
- .calcite-typography-regular-1h {
166
- line-height: var(--calcite-font-line-height-fixed-xl);
167
- font-size: var(--calcite-font-size-lg);
186
+ line-height: var(--calcite-font-line-height-relative-snug);
168
187
  }
169
- .calcite-typography-regular-0h {
170
- line-height: var(--calcite-font-line-height-fixed-lg);
188
+ .calcite-typography-wrap-bold-0 {
189
+ font-weight: var(--calcite-font-weight-semibold);
190
+ line-height: var(--calcite-font-line-height-relative-snug);
171
191
  font-size: var(--calcite-font-size-md);
172
192
  }
173
- .calcite-typography-regular-minus-2h {
174
- font-size: var(--calcite-font-size-sm);
175
- }
176
- .calcite-typography-regular-minus-3h {
177
- line-height: var(--calcite-font-line-height-fixed-sm);
178
- font-size: var(--calcite-font-size-xs);
179
- }
180
- .calcite-typography-light-1h {
193
+ .calcite-typography-wrap-bold-1 {
194
+ font-weight: var(--calcite-font-weight-semibold);
195
+ line-height: var(--calcite-font-line-height-relative-snug);
181
196
  font-size: var(--calcite-font-size-lg);
182
- font-weight: var(--calcite-font-weight-light);
183
- line-height: var(--calcite-font-line-height-fixed-xl);
184
197
  }
185
- .calcite-typography-light-0h {
186
- font-size: var(--calcite-font-size-md);
187
- font-weight: var(--calcite-font-weight-light);
188
- line-height: var(--calcite-font-line-height-fixed-lg);
198
+ .calcite-typography-wrap-bold-2 {
199
+ font-weight: var(--calcite-font-weight-semibold);
200
+ line-height: var(--calcite-font-line-height-relative-snug);
201
+ font-size: var(--calcite-font-size-xl);
189
202
  }
190
- .calcite-typography-light-minus-1h {
191
- font-weight: var(--calcite-font-weight-light);
203
+ .calcite-typography-wrap-bold-3 {
204
+ font-weight: var(--calcite-font-weight-semibold);
205
+ line-height: var(--calcite-font-line-height-relative-snug);
206
+ font-size: var(--calcite-font-size-xxl);
192
207
  }
193
- .calcite-typography-light-minus-2h {
208
+ .calcite-typography-wrap-bold-minus-2 {
209
+ font-weight: var(--calcite-font-weight-semibold);
210
+ line-height: var(--calcite-font-line-height-relative-snug);
194
211
  font-size: var(--calcite-font-size-sm);
195
- font-weight: var(--calcite-font-weight-light);
196
- }
197
- .calcite-typography-light-minus-3h {
198
- font-size: var(--calcite-font-size-xs);
199
- font-weight: var(--calcite-font-weight-light);
200
- line-height: var(--calcite-font-line-height-fixed-sm);
201
212
  }
202
- .calcite-typography {
203
- font-family: var(--calcite-font-family);
204
- font-size: var(--calcite-font-size);
205
- font-weight: var(--calcite-font-weight-regular);
206
- letter-spacing: var(--calcite-font-letter-spacing-normal);
207
- line-height: var(--calcite-font-line-height-fixed-base);
208
- paragraph-spacing: var(--calcite-font-paragraph-spacing-normal);
209
- text-case: var(--calcite-font-text-case-none);
210
- text-decoration: var(--calcite-font-text-decoration-none);
213
+ .calcite-typography-wrap-bold-minus-1 {
214
+ font-weight: var(--calcite-font-weight-semibold);
215
+ line-height: var(--calcite-font-line-height-relative-snug);
211
216
  }
212
- .calcite-typography-hierarchy-caption {
217
+ .calcite-typography-hierarchy-display-1 {
218
+ font-weight: 600;
213
219
  line-height: 1.375;
214
- font-size: 12px;
215
- }
216
- .calcite-typography-hierarchy-body {
217
- font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
218
- font-size: 14px;
219
- font-weight: 400;
220
- letter-spacing: 0;
221
- line-height: 16px;
222
- paragraph-spacing: 4px;
223
- text-case: none;
224
- text-decoration: none;
220
+ font-size: 24px;
225
221
  }
226
- .calcite-typography-hierarchy-body-snug {
222
+ .calcite-typography-hierarchy-display-2 {
223
+ font-weight: 600;
227
224
  line-height: 1.375;
225
+ font-size: 20px;
228
226
  }
229
- .calcite-typography-hierarchy-heading-5 {
227
+ .calcite-typography-hierarchy-heading-1 {
230
228
  font-weight: 500;
231
229
  line-height: 1.375;
230
+ font-size: 24px;
232
231
  }
233
- .calcite-typography-hierarchy-heading-4 {
232
+ .calcite-typography-hierarchy-heading-2 {
234
233
  font-weight: 500;
235
234
  line-height: 1.375;
236
- font-size: 16px;
235
+ font-size: 20px;
237
236
  }
238
237
  .calcite-typography-hierarchy-heading-3 {
239
238
  font-weight: 500;
240
239
  line-height: 1.375;
241
240
  font-size: 18px;
242
241
  }
243
- .calcite-typography-hierarchy-heading-2 {
242
+ .calcite-typography-hierarchy-heading-4 {
244
243
  font-weight: 500;
245
244
  line-height: 1.375;
246
- font-size: 20px;
245
+ font-size: 16px;
247
246
  }
248
- .calcite-typography-hierarchy-heading-1 {
247
+ .calcite-typography-hierarchy-heading-5 {
249
248
  font-weight: 500;
250
249
  line-height: 1.375;
251
- font-size: 24px;
252
- }
253
- .calcite-typography-hierarchy-display-2 {
254
- font-weight: 600;
255
- line-height: 1.375;
256
- font-size: 20px;
257
250
  }
258
- .calcite-typography-hierarchy-display-1 {
259
- font-weight: 600;
251
+ .calcite-typography-hierarchy-body-snug {
260
252
  line-height: 1.375;
261
- font-size: 24px;
262
253
  }
263
- .calcite-typography-regular-minus-1h {
254
+ .calcite-typography-hierarchy-body {
264
255
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
265
256
  font-size: 14px;
266
257
  font-weight: 400;
@@ -270,3 +261,12 @@
270
261
  text-case: none;
271
262
  text-decoration: none;
272
263
  }
264
+ .calcite-typography-hierarchy-overline {
265
+ line-height: var(--calcite-font-line-height-fixed-sm);
266
+ text-case: var(--calcite-font-text-case-uppercase);
267
+ font-weight: var(--calcite-font-weight-bold);
268
+ }
269
+ .calcite-typography-hierarchy-caption {
270
+ line-height: 1.375;
271
+ font-size: 12px;
272
+ }