@esri/calcite-design-tokens 3.0.2-next.0 → 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/scss/mixins.scss CHANGED
@@ -1,122 +1,146 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Fri, 28 Mar 2025 22:09:10 GMT
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
- @mixin 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
+ @mixin calcite-typography {
7
+ font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
8
+ font-size: 14px;
9
+ font-weight: 400;
10
+ letter-spacing: 0;
11
+ line-height: 16px;
12
+ paragraph-spacing: 4px;
13
+ text-case: none;
14
+ text-decoration: none;
10
15
  }
11
- @mixin calcite-typography-wrap-bold-minus-1 {
16
+ @mixin calcite-typography-light-minus-3h {
12
17
  @include calcite-typography;
13
- font-weight: var(--calcite-font-weight-semibold);
14
- line-height: var(--calcite-font-line-height-relative-snug);
18
+ font-size: var(--calcite-font-size-xs);
19
+ font-weight: var(--calcite-font-weight-light);
20
+ line-height: var(--calcite-font-line-height-fixed-sm);
15
21
  }
16
- @mixin calcite-typography-wrap-bold-minus-2 {
22
+ @mixin calcite-typography-light-minus-2h {
17
23
  @include calcite-typography;
18
- font-weight: var(--calcite-font-weight-semibold);
19
- line-height: var(--calcite-font-line-height-relative-snug);
20
24
  font-size: var(--calcite-font-size-sm);
25
+ font-weight: var(--calcite-font-weight-light);
21
26
  }
22
- @mixin calcite-typography-wrap-bold-3 {
27
+ @mixin calcite-typography-light-minus-1h {
23
28
  @include calcite-typography;
24
- font-weight: var(--calcite-font-weight-semibold);
25
- line-height: var(--calcite-font-line-height-relative-snug);
26
- font-size: var(--calcite-font-size-xxl);
29
+ font-weight: var(--calcite-font-weight-light);
27
30
  }
28
- @mixin calcite-typography-wrap-bold-2 {
31
+ @mixin calcite-typography-light-0h {
29
32
  @include calcite-typography;
30
- font-weight: var(--calcite-font-weight-semibold);
31
- line-height: var(--calcite-font-line-height-relative-snug);
32
- font-size: var(--calcite-font-size-xl);
33
+ font-size: var(--calcite-font-size-md);
34
+ font-weight: var(--calcite-font-weight-light);
35
+ line-height: var(--calcite-font-line-height-fixed-lg);
33
36
  }
34
- @mixin calcite-typography-wrap-bold-1 {
37
+ @mixin calcite-typography-light-1h {
35
38
  @include calcite-typography;
36
- font-weight: var(--calcite-font-weight-semibold);
37
- line-height: var(--calcite-font-line-height-relative-snug);
38
39
  font-size: var(--calcite-font-size-lg);
40
+ font-weight: var(--calcite-font-weight-light);
41
+ line-height: var(--calcite-font-line-height-fixed-xl);
39
42
  }
40
- @mixin calcite-typography-wrap-bold-0 {
43
+ @mixin calcite-typography-regular-minus-3h {
41
44
  @include calcite-typography;
42
- font-weight: var(--calcite-font-weight-semibold);
43
- line-height: var(--calcite-font-line-height-relative-snug);
45
+ line-height: var(--calcite-font-line-height-fixed-sm);
46
+ font-size: var(--calcite-font-size-xs);
47
+ }
48
+ @mixin calcite-typography-regular-minus-2h {
49
+ @include calcite-typography;
50
+ font-size: var(--calcite-font-size-sm);
51
+ }
52
+ @mixin calcite-typography-regular-minus-1h {
53
+ @include calcite-typography;
54
+ font-family: var(--calcite-font-family);
55
+ font-size: var(--calcite-font-size);
56
+ font-weight: var(--calcite-font-weight-regular);
57
+ letter-spacing: var(--calcite-font-letter-spacing-normal);
58
+ line-height: var(--calcite-font-line-height-fixed-base);
59
+ paragraph-spacing: var(--calcite-font-paragraph-spacing-normal);
60
+ text-case: var(--calcite-font-text-case-none);
61
+ text-decoration: var(--calcite-font-text-decoration-none);
62
+ }
63
+ @mixin calcite-typography-regular-0h {
64
+ @include calcite-typography;
65
+ line-height: var(--calcite-font-line-height-fixed-lg);
44
66
  font-size: var(--calcite-font-size-md);
45
67
  }
46
- @mixin calcite-typography-wrap-medium-minus-1 {
68
+ @mixin calcite-typography-regular-1h {
47
69
  @include calcite-typography;
48
- font-weight: var(--calcite-font-weight-medium);
49
- line-height: var(--calcite-font-line-height-relative-snug);
70
+ line-height: var(--calcite-font-line-height-fixed-xl);
71
+ font-size: var(--calcite-font-size-lg);
50
72
  }
51
- @mixin calcite-typography-wrap-medium-minus-2 {
73
+ @mixin calcite-typography-medium-minus-3h {
52
74
  @include calcite-typography;
53
75
  font-weight: var(--calcite-font-weight-medium);
54
- line-height: var(--calcite-font-line-height-relative-snug);
55
- font-size: var(--calcite-font-size-sm);
76
+ line-height: var(--calcite-font-line-height-fixed-sm);
77
+ font-size: var(--calcite-font-size-xs);
56
78
  }
57
- @mixin calcite-typography-wrap-medium-3 {
79
+ @mixin calcite-typography-medium-minus-2h {
58
80
  @include calcite-typography;
59
81
  font-weight: var(--calcite-font-weight-medium);
60
- line-height: var(--calcite-font-line-height-relative-snug);
61
- font-size: var(--calcite-font-size-xxl);
82
+ font-size: var(--calcite-font-size-sm);
62
83
  }
63
- @mixin calcite-typography-wrap-medium-2 {
84
+ @mixin calcite-typography-medium-minus-1h {
64
85
  @include calcite-typography;
65
86
  font-weight: var(--calcite-font-weight-medium);
66
- line-height: var(--calcite-font-line-height-relative-snug);
67
- font-size: var(--calcite-font-size-xl);
68
87
  }
69
- @mixin calcite-typography-wrap-medium-1 {
88
+ @mixin calcite-typography-medium-0h {
70
89
  @include calcite-typography;
71
90
  font-weight: var(--calcite-font-weight-medium);
72
- line-height: var(--calcite-font-line-height-relative-snug);
73
- font-size: var(--calcite-font-size-lg);
91
+ line-height: var(--calcite-font-line-height-fixed-lg);
92
+ font-size: var(--calcite-font-size-md);
74
93
  }
75
- @mixin calcite-typography-wrap-medium-0 {
94
+ @mixin calcite-typography-medium-1h {
76
95
  @include calcite-typography;
77
96
  font-weight: var(--calcite-font-weight-medium);
78
- line-height: var(--calcite-font-line-height-relative-snug);
79
- font-size: var(--calcite-font-size-md);
97
+ line-height: var(--calcite-font-line-height-fixed-xl);
98
+ font-size: var(--calcite-font-size-lg);
80
99
  }
81
- @mixin calcite-typography-wrap-regular-minus-1 {
100
+ @mixin calcite-typography-bold-minus-3h {
82
101
  @include calcite-typography;
83
- line-height: var(--calcite-font-line-height-relative-snug);
102
+ font-weight: var(--calcite-font-weight-semibold);
103
+ line-height: var(--calcite-font-line-height-fixed-sm);
104
+ font-size: var(--calcite-font-size-xs);
84
105
  }
85
- @mixin calcite-typography-wrap-regular-minus-2 {
106
+ @mixin calcite-typography-bold-minus-2h {
86
107
  @include calcite-typography;
87
- line-height: var(--calcite-font-line-height-relative-snug);
108
+ font-weight: var(--calcite-font-weight-semibold);
88
109
  font-size: var(--calcite-font-size-sm);
89
110
  }
90
- @mixin calcite-typography-wrap-regular-3 {
111
+ @mixin calcite-typography-bold-minus-1h {
91
112
  @include calcite-typography;
92
- line-height: var(--calcite-font-line-height-relative-snug);
93
- font-size: var(--calcite-font-size-xxl);
113
+ font-weight: var(--calcite-font-weight-semibold);
94
114
  }
95
- @mixin calcite-typography-wrap-regular-2 {
115
+ @mixin calcite-typography-bold-0h {
96
116
  @include calcite-typography;
97
- line-height: var(--calcite-font-line-height-relative-snug);
98
- font-size: var(--calcite-font-size-xl);
117
+ font-weight: var(--calcite-font-weight-semibold);
118
+ line-height: var(--calcite-font-line-height-fixed-lg);
119
+ font-size: var(--calcite-font-size-md);
99
120
  }
100
- @mixin calcite-typography-wrap-regular-1 {
121
+ @mixin calcite-typography-bold-1h {
101
122
  @include calcite-typography;
102
- line-height: var(--calcite-font-line-height-relative-snug);
123
+ font-weight: var(--calcite-font-weight-semibold);
124
+ line-height: var(--calcite-font-line-height-fixed-xl);
103
125
  font-size: var(--calcite-font-size-lg);
104
126
  }
105
- @mixin calcite-typography-wrap-regular-0 {
127
+ @mixin calcite-typography-wrap-light-0 {
106
128
  @include calcite-typography;
129
+ font-weight: var(--calcite-font-weight-light);
107
130
  line-height: var(--calcite-font-line-height-relative-snug);
108
131
  font-size: var(--calcite-font-size-md);
109
132
  }
110
- @mixin calcite-typography-wrap-light-minus-1 {
133
+ @mixin calcite-typography-wrap-light-1 {
111
134
  @include calcite-typography;
112
135
  font-weight: var(--calcite-font-weight-light);
113
136
  line-height: var(--calcite-font-line-height-relative-snug);
137
+ font-size: var(--calcite-font-size-lg);
114
138
  }
115
- @mixin calcite-typography-wrap-light-minus-2 {
139
+ @mixin calcite-typography-wrap-light-2 {
116
140
  @include calcite-typography;
117
141
  font-weight: var(--calcite-font-weight-light);
118
142
  line-height: var(--calcite-font-line-height-relative-snug);
119
- font-size: var(--calcite-font-size-sm);
143
+ font-size: var(--calcite-font-size-xl);
120
144
  }
121
145
  @mixin calcite-typography-wrap-light-3 {
122
146
  @include calcite-typography;
@@ -124,125 +148,163 @@
124
148
  line-height: var(--calcite-font-line-height-relative-tight);
125
149
  font-size: var(--calcite-font-size-xxl);
126
150
  }
127
- @mixin calcite-typography-wrap-light-2 {
151
+ @mixin calcite-typography-wrap-light-minus-2 {
128
152
  @include calcite-typography;
129
153
  font-weight: var(--calcite-font-weight-light);
130
154
  line-height: var(--calcite-font-line-height-relative-snug);
131
- font-size: var(--calcite-font-size-xl);
155
+ font-size: var(--calcite-font-size-sm);
132
156
  }
133
- @mixin calcite-typography-wrap-light-1 {
157
+ @mixin calcite-typography-wrap-light-minus-1 {
134
158
  @include calcite-typography;
135
159
  font-weight: var(--calcite-font-weight-light);
136
160
  line-height: var(--calcite-font-line-height-relative-snug);
137
- font-size: var(--calcite-font-size-lg);
138
161
  }
139
- @mixin calcite-typography-wrap-light-0 {
162
+ @mixin calcite-typography-wrap-regular-0 {
140
163
  @include calcite-typography;
141
- font-weight: var(--calcite-font-weight-light);
142
164
  line-height: var(--calcite-font-line-height-relative-snug);
143
165
  font-size: var(--calcite-font-size-md);
144
166
  }
145
- @mixin calcite-typography-bold-1h {
167
+ @mixin calcite-typography-wrap-regular-1 {
146
168
  @include calcite-typography;
147
- font-weight: var(--calcite-font-weight-semibold);
148
- line-height: var(--calcite-font-line-height-fixed-xl);
169
+ line-height: var(--calcite-font-line-height-relative-snug);
149
170
  font-size: var(--calcite-font-size-lg);
150
171
  }
151
- @mixin calcite-typography-bold-0h {
172
+ @mixin calcite-typography-wrap-regular-2 {
152
173
  @include calcite-typography;
153
- font-weight: var(--calcite-font-weight-semibold);
154
- line-height: var(--calcite-font-line-height-fixed-lg);
155
- font-size: var(--calcite-font-size-md);
174
+ line-height: var(--calcite-font-line-height-relative-snug);
175
+ font-size: var(--calcite-font-size-xl);
156
176
  }
157
- @mixin calcite-typography-bold-minus-1h {
177
+ @mixin calcite-typography-wrap-regular-3 {
158
178
  @include calcite-typography;
159
- font-weight: var(--calcite-font-weight-semibold);
179
+ line-height: var(--calcite-font-line-height-relative-snug);
180
+ font-size: var(--calcite-font-size-xxl);
160
181
  }
161
- @mixin calcite-typography-bold-minus-2h {
182
+ @mixin calcite-typography-wrap-regular-minus-2 {
162
183
  @include calcite-typography;
163
- font-weight: var(--calcite-font-weight-semibold);
184
+ line-height: var(--calcite-font-line-height-relative-snug);
164
185
  font-size: var(--calcite-font-size-sm);
165
186
  }
166
- @mixin calcite-typography-bold-minus-3h {
187
+ @mixin calcite-typography-wrap-regular-minus-1 {
167
188
  @include calcite-typography;
168
- font-weight: var(--calcite-font-weight-semibold);
169
- line-height: var(--calcite-font-line-height-fixed-sm);
170
- font-size: var(--calcite-font-size-xs);
189
+ line-height: var(--calcite-font-line-height-relative-snug);
171
190
  }
172
- @mixin calcite-typography-medium-1h {
191
+ @mixin calcite-typography-wrap-medium-0 {
173
192
  @include calcite-typography;
174
193
  font-weight: var(--calcite-font-weight-medium);
175
- line-height: var(--calcite-font-line-height-fixed-xl);
194
+ line-height: var(--calcite-font-line-height-relative-snug);
195
+ font-size: var(--calcite-font-size-md);
196
+ }
197
+ @mixin calcite-typography-wrap-medium-1 {
198
+ @include calcite-typography;
199
+ font-weight: var(--calcite-font-weight-medium);
200
+ line-height: var(--calcite-font-line-height-relative-snug);
176
201
  font-size: var(--calcite-font-size-lg);
177
202
  }
178
- @mixin calcite-typography-medium-0h {
203
+ @mixin calcite-typography-wrap-medium-2 {
179
204
  @include calcite-typography;
180
205
  font-weight: var(--calcite-font-weight-medium);
181
- line-height: var(--calcite-font-line-height-fixed-lg);
182
- font-size: var(--calcite-font-size-md);
206
+ line-height: var(--calcite-font-line-height-relative-snug);
207
+ font-size: var(--calcite-font-size-xl);
183
208
  }
184
- @mixin calcite-typography-medium-minus-1h {
209
+ @mixin calcite-typography-wrap-medium-3 {
185
210
  @include calcite-typography;
186
211
  font-weight: var(--calcite-font-weight-medium);
212
+ line-height: var(--calcite-font-line-height-relative-snug);
213
+ font-size: var(--calcite-font-size-xxl);
187
214
  }
188
- @mixin calcite-typography-medium-minus-2h {
215
+ @mixin calcite-typography-wrap-medium-minus-2 {
189
216
  @include calcite-typography;
190
217
  font-weight: var(--calcite-font-weight-medium);
218
+ line-height: var(--calcite-font-line-height-relative-snug);
191
219
  font-size: var(--calcite-font-size-sm);
192
220
  }
193
- @mixin calcite-typography-medium-minus-3h {
221
+ @mixin calcite-typography-wrap-medium-minus-1 {
194
222
  @include calcite-typography;
195
223
  font-weight: var(--calcite-font-weight-medium);
196
- line-height: var(--calcite-font-line-height-fixed-sm);
197
- font-size: var(--calcite-font-size-xs);
224
+ line-height: var(--calcite-font-line-height-relative-snug);
198
225
  }
199
- @mixin calcite-typography-regular-1h {
226
+ @mixin calcite-typography-wrap-bold-0 {
200
227
  @include calcite-typography;
201
- line-height: var(--calcite-font-line-height-fixed-xl);
228
+ font-weight: var(--calcite-font-weight-semibold);
229
+ line-height: var(--calcite-font-line-height-relative-snug);
230
+ font-size: var(--calcite-font-size-md);
231
+ }
232
+ @mixin calcite-typography-wrap-bold-1 {
233
+ @include calcite-typography;
234
+ font-weight: var(--calcite-font-weight-semibold);
235
+ line-height: var(--calcite-font-line-height-relative-snug);
202
236
  font-size: var(--calcite-font-size-lg);
203
237
  }
204
- @mixin calcite-typography-regular-0h {
238
+ @mixin calcite-typography-wrap-bold-2 {
205
239
  @include calcite-typography;
206
- line-height: var(--calcite-font-line-height-fixed-lg);
207
- font-size: var(--calcite-font-size-md);
240
+ font-weight: var(--calcite-font-weight-semibold);
241
+ line-height: var(--calcite-font-line-height-relative-snug);
242
+ font-size: var(--calcite-font-size-xl);
208
243
  }
209
- @mixin calcite-typography-regular-minus-2h {
244
+ @mixin calcite-typography-wrap-bold-3 {
210
245
  @include calcite-typography;
211
- font-size: var(--calcite-font-size-sm);
246
+ font-weight: var(--calcite-font-weight-semibold);
247
+ line-height: var(--calcite-font-line-height-relative-snug);
248
+ font-size: var(--calcite-font-size-xxl);
212
249
  }
213
- @mixin calcite-typography-regular-minus-3h {
250
+ @mixin calcite-typography-wrap-bold-minus-2 {
214
251
  @include calcite-typography;
215
- line-height: var(--calcite-font-line-height-fixed-sm);
216
- font-size: var(--calcite-font-size-xs);
252
+ font-weight: var(--calcite-font-weight-semibold);
253
+ line-height: var(--calcite-font-line-height-relative-snug);
254
+ font-size: var(--calcite-font-size-sm);
217
255
  }
218
- @mixin calcite-typography-light-1h {
256
+ @mixin calcite-typography-wrap-bold-minus-1 {
219
257
  @include calcite-typography;
258
+ font-weight: var(--calcite-font-weight-semibold);
259
+ line-height: var(--calcite-font-line-height-relative-snug);
260
+ }
261
+ @mixin calcite-typography-hierarchy-display-1 {
262
+ @include calcite-typography-wrap-bold-3;
263
+ font-weight: var(--calcite-font-weight-semibold);
264
+ line-height: var(--calcite-font-line-height-relative-snug);
265
+ font-size: var(--calcite-font-size-xxl);
266
+ }
267
+ @mixin calcite-typography-hierarchy-display-2 {
268
+ @include calcite-typography-wrap-bold-2;
269
+ font-weight: var(--calcite-font-weight-semibold);
270
+ line-height: var(--calcite-font-line-height-relative-snug);
271
+ font-size: var(--calcite-font-size-xl);
272
+ }
273
+ @mixin calcite-typography-hierarchy-heading-1 {
274
+ @include calcite-typography-wrap-medium-3;
275
+ font-weight: var(--calcite-font-weight-medium);
276
+ line-height: var(--calcite-font-line-height-relative-snug);
277
+ font-size: var(--calcite-font-size-xxl);
278
+ }
279
+ @mixin calcite-typography-hierarchy-heading-2 {
280
+ @include calcite-typography-wrap-medium-2;
281
+ font-weight: var(--calcite-font-weight-medium);
282
+ line-height: var(--calcite-font-line-height-relative-snug);
283
+ font-size: var(--calcite-font-size-xl);
284
+ }
285
+ @mixin calcite-typography-hierarchy-heading-3 {
286
+ @include calcite-typography-wrap-medium-1;
287
+ font-weight: var(--calcite-font-weight-medium);
288
+ line-height: var(--calcite-font-line-height-relative-snug);
220
289
  font-size: var(--calcite-font-size-lg);
221
- font-weight: var(--calcite-font-weight-light);
222
- line-height: var(--calcite-font-line-height-fixed-xl);
223
290
  }
224
- @mixin calcite-typography-light-0h {
225
- @include calcite-typography;
291
+ @mixin calcite-typography-hierarchy-heading-4 {
292
+ @include calcite-typography-wrap-medium-0;
293
+ font-weight: var(--calcite-font-weight-medium);
294
+ line-height: var(--calcite-font-line-height-relative-snug);
226
295
  font-size: var(--calcite-font-size-md);
227
- font-weight: var(--calcite-font-weight-light);
228
- line-height: var(--calcite-font-line-height-fixed-lg);
229
296
  }
230
- @mixin calcite-typography-light-minus-1h {
231
- @include calcite-typography;
232
- font-weight: var(--calcite-font-weight-light);
297
+ @mixin calcite-typography-hierarchy-heading-5 {
298
+ @include calcite-typography-wrap-medium-minus-1;
299
+ font-weight: var(--calcite-font-weight-medium);
300
+ line-height: var(--calcite-font-line-height-relative-snug);
233
301
  }
234
- @mixin calcite-typography-light-minus-2h {
235
- @include calcite-typography;
236
- font-size: var(--calcite-font-size-sm);
237
- font-weight: var(--calcite-font-weight-light);
302
+ @mixin calcite-typography-hierarchy-body-snug {
303
+ @include calcite-typography-wrap-regular-minus-1;
304
+ line-height: var(--calcite-font-line-height-relative-snug);
238
305
  }
239
- @mixin calcite-typography-light-minus-3h {
306
+ @mixin calcite-typography-hierarchy-body {
240
307
  @include calcite-typography;
241
- font-size: var(--calcite-font-size-xs);
242
- font-weight: var(--calcite-font-weight-light);
243
- line-height: var(--calcite-font-line-height-fixed-sm);
244
- }
245
- @mixin calcite-typography {
246
308
  font-family: var(--calcite-font-family);
247
309
  font-size: var(--calcite-font-size);
248
310
  font-weight: var(--calcite-font-weight-regular);
@@ -252,36 +314,13 @@
252
314
  text-case: var(--calcite-font-text-case-none);
253
315
  text-decoration: var(--calcite-font-text-decoration-none);
254
316
  }
317
+ @mixin calcite-typography-hierarchy-overline {
318
+ line-height: 12px;
319
+ text-case: uppercase;
320
+ font-weight: 600;
321
+ }
255
322
  @mixin calcite-typography-hierarchy-caption {
256
323
  @include calcite-typography-wrap-regular-minus-2;
257
- }
258
- @mixin calcite-typography-hierarchy-body {
259
- @include calcite-typography;
260
- }
261
- @mixin calcite-typography-hierarchy-body-snug {
262
- @include calcite-typography-wrap-regular-minus-1;
263
- }
264
- @mixin calcite-typography-hierarchy-heading-5 {
265
- @include calcite-typography-wrap-medium-minus-1;
266
- }
267
- @mixin calcite-typography-hierarchy-heading-4 {
268
- @include calcite-typography-wrap-medium-0;
269
- }
270
- @mixin calcite-typography-hierarchy-heading-3 {
271
- @include calcite-typography-wrap-medium-1;
272
- }
273
- @mixin calcite-typography-hierarchy-heading-2 {
274
- @include calcite-typography-wrap-medium-2;
275
- }
276
- @mixin calcite-typography-hierarchy-heading-1 {
277
- @include calcite-typography-wrap-medium-3;
278
- }
279
- @mixin calcite-typography-hierarchy-display-2 {
280
- @include calcite-typography-wrap-bold-2;
281
- }
282
- @mixin calcite-typography-hierarchy-display-1 {
283
- @include calcite-typography-wrap-bold-3;
284
- }
285
- @mixin calcite-typography-regular-minus-1h {
286
- @include calcite-typography;
324
+ line-height: var(--calcite-font-line-height-relative-snug);
325
+ font-size: var(--calcite-font-size-sm);
287
326
  }
package/dist/scss/semantic.scss ADDED
@@ -0,0 +1,134 @@
1
+
2
+ // Calcite Design System
3
+ // Do not edit directly, this file was auto-generated.
4
+
5
+ $calcite-container-size-height-xxs-min: 0; // Small handheld devices and mini-windows
6
+ $calcite-container-size-width-xxs-min: 0; // Small handheld devices and mini-windows
7
+ $calcite-border-width-none: 0;
8
+ $calcite-border-width-sm: 1px;
9
+ $calcite-border-width-md: 2px;
10
+ $calcite-border-width-lg: 4px;
11
+ $calcite-container-size-height-xxs-max: 154px; // Small handheld devices and mini-windows
12
+ $calcite-container-size-height-xs-min: 155px; // Handheld devices
13
+ $calcite-container-size-height-xs-max: 328px; // Handheld devices
14
+ $calcite-container-size-height-sm-min: 329px; // Small tablets
15
+ $calcite-container-size-height-sm-max: 504px; // Small tablets
16
+ $calcite-container-size-height-md-min: 505px; // Small laptops
17
+ $calcite-container-size-height-md-max: 678px; // Small laptops
18
+ $calcite-container-size-height-lg-min: 679px; // Large laptops and desktop computers
19
+ $calcite-container-size-height-lg-max: 854px; // Large laptops and desktop computers
20
+ $calcite-container-size-height-xl-min: 855px; // Projectors and televisions
21
+ $calcite-container-size-width-xxs-max: 320px; // Small handheld devices and mini-windows
22
+ $calcite-container-size-width-xs-min: 321px; // Handheld devices
23
+ $calcite-container-size-width-xs-max: 476px; // Handheld devices
24
+ $calcite-container-size-width-sm-min: 477px; // Small tablets
25
+ $calcite-container-size-width-sm-max: 768px; // Small tablets
26
+ $calcite-container-size-width-md-min: 769px; // Small laptops
27
+ $calcite-container-size-width-md-max: 1152px; // Small laptops
28
+ $calcite-container-size-width-lg-min: 1153px; // Large laptops and desktop computers
29
+ $calcite-container-size-width-lg-max: 1440px; // Large laptops and desktop computers
30
+ $calcite-container-size-width-xl-min: 1441px; // Projectors and televisions
31
+ $calcite-container-size-margin: 24px;
32
+ $calcite-container-size-gutter: 16px;
33
+ $calcite-container-size-content-fluid: 100%; // for fluid grid widths
34
+ $calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
35
+ $calcite-corner-radius-sharp: 0;
36
+ $calcite-corner-radius-round: 4px;
37
+ $calcite-corner-radius-pill: 100%;
38
+ $calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; // Primary font with fallbacks
39
+ $calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; // Font family for code with fallbacks
40
+ $calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
41
+ $calcite-font-weight-regular: 400;
42
+ $calcite-font-weight-normal: 400; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
43
+ $calcite-font-weight-medium: 500;
44
+ $calcite-font-weight-semibold: 600;
45
+ $calcite-font-weight-bold: 600;
46
+ $calcite-font-size-xs: 10px;
47
+ $calcite-font-size-sm: 12px;
48
+ $calcite-font-size: 14px;
49
+ $calcite-font-size-md: 16px;
50
+ $calcite-font-size-lg: 18px;
51
+ $calcite-font-size-xl: 20px;
52
+ $calcite-font-size-xxl: 24px;
53
+ $calcite-font-style-emphasis: italic; // used in ratings
54
+ $calcite-font-line-height-fixed-sm: 12px;
55
+ $calcite-font-line-height-fixed-base: 16px;
56
+ $calcite-font-line-height-fixed-lg: 20px;
57
+ $calcite-font-line-height-fixed-xl: 24px;
58
+ $calcite-font-line-height-relative: auto; // 1
59
+ $calcite-font-line-height-relative-tight: 1.25; // 1.25
60
+ $calcite-font-line-height-relative-snug: 1.375; // 1.375
61
+ $calcite-font-line-height-relative-normal: 1.5; // 1.5
62
+ $calcite-font-line-height-relative-relaxed: 1.625; // 1.625
63
+ $calcite-font-line-height-relative-loose: 2; // 2
64
+ $calcite-font-letter-spacing-tight: -0.4; // Deprecated
65
+ $calcite-font-letter-spacing-normal: 0; // Deprecated
66
+ $calcite-font-letter-spacing-wide: 0.4; // Deprecated
67
+ $calcite-font-paragraph-spacing-normal: 4px; // Deprecated
68
+ $calcite-font-text-decoration-none: none; // Deprecated
69
+ $calcite-font-text-decoration-underline: underline; // Deprecated
70
+ $calcite-font-text-case-none: none; // Deprecated
71
+ $calcite-font-text-case-uppercase: uppercase; // Deprecated
72
+ $calcite-font-text-case-lowercase: lowercase; // Deprecated
73
+ $calcite-font-text-case-capitalize: capitalize; // Deprecated
74
+ $calcite-opacity-light: 0.4;
75
+ $calcite-opacity-half: 0.5;
76
+ $calcite-opacity-dark: 0.85;
77
+ $calcite-opacity-full: 1;
78
+ $calcite-opacity-disabled: 0.5;
79
+ $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
80
+ $calcite-size-fixed-xxxs: 2px; // deprecated
81
+ $calcite-size-fixed-xxs: 4px; // deprecated
82
+ $calcite-size-fixed-xs: 6px; // deprecated
83
+ $calcite-size-fixed-sm: 8px; // deprecated
84
+ $calcite-size-fixed-sm-plus: 10px; // deprecated
85
+ $calcite-size-fixed-md: 12px; // deprecated
86
+ $calcite-size-fixed-md-plus: 14px; // deprecated
87
+ $calcite-size-fixed-lg: 16px; // deprecated
88
+ $calcite-size-fixed-xl: 20px; // deprecated
89
+ $calcite-size-fixed-xxl: 24px; // deprecated
90
+ $calcite-size-fixed-xxxl: 32px; // deprecated
91
+ $calcite-size-px: 1px;
92
+ $calcite-size-xxxs: 0.75rem;
93
+ $calcite-size-xxs: 0.875rem;
94
+ $calcite-size-xs: 1rem;
95
+ $calcite-size-sm: 1.5rem;
96
+ $calcite-size-md: 2rem;
97
+ $calcite-size-lg: 2.75rem;
98
+ $calcite-size-xl: 3rem;
99
+ $calcite-size-xxl: 4rem;
100
+ $calcite-size-xxxl: 6rem;
101
+ $calcite-spacing-fixed-xxs: 4px; // deprecated
102
+ $calcite-spacing-fixed-xs: 6px; // deprecated
103
+ $calcite-spacing-fixed-sm: 8px; // deprecated
104
+ $calcite-spacing-fixed-md: 12px; // deprecated
105
+ $calcite-spacing-fixed-lg: 14px; // deprecated
106
+ $calcite-spacing-fixed-xl: 16px; // deprecated
107
+ $calcite-spacing-fixed-xxl: 20px; // deprecated
108
+ $calcite-spacing-fixed-xxxl: 32px; // deprecated
109
+ $calcite-spacing-none: 0;
110
+ $calcite-spacing-px: 1px;
111
+ $calcite-spacing-base: 2px;
112
+ $calcite-spacing-xxs: 0.25rem;
113
+ $calcite-spacing-xs: 0.375rem;
114
+ $calcite-spacing-sm: 0.5rem;
115
+ $calcite-spacing-sm-plus: 0.625rem;
116
+ $calcite-spacing-md: 0.75rem;
117
+ $calcite-spacing-md-plus: 0.875rem;
118
+ $calcite-spacing-lg: 1rem;
119
+ $calcite-spacing-xl: 1.25rem;
120
+ $calcite-spacing-xxl: 1.5rem;
121
+ $calcite-spacing-xxxl: 2rem;
122
+ $calcite-z-index-deep: -999999;
123
+ $calcite-z-index: 1;
124
+ $calcite-z-index-sticky: 300;
125
+ $calcite-z-index-header: 400;
126
+ $calcite-z-index-toast: 500;
127
+ $calcite-z-index-dropdown: 600;
128
+ $calcite-z-index-overlay: 700;
129
+ $calcite-z-index-modal: 800;
130
+ $calcite-z-index-popup: 900;
131
+ $calcite-z-index-tooltip: 901;
132
+ $calcite-corner-radius: $calcite-corner-radius-sharp;
133
+ $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
134
+ $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "3.0.2-next.0",
3
+ "version": "3.0.2-next.1",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -28,9 +28,9 @@
28
28
  },
29
29
  "license": "SEE LICENSE.md",
30
30
  "scripts": {
31
- "build": "tsx support/run.ts",
32
- "build:watch": "tsx --watch support/run.ts",
33
- "clean": "rimraf dist",
31
+ "build": "tsx src/build-tokens.ts",
32
+ "build:watch": "tsx --watch src/build-tokens.ts",
33
+ "clean": "rimraf node_modules dist .turbo",
34
34
  "lint:json": "prettier --write \"**/*.json\" >/dev/null",
35
35
  "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path ../../.gitignore",
36
36
  "lint:ts": "eslint --fix . && prettier --write \"**/*.{ts,tsx,cjs,mjs}\" >/dev/null",
@@ -42,5 +42,8 @@
42
42
  "volta": {
43
43
  "extends": "../../package.json"
44
44
  },
45
- "gitHead": "ced136b19e3b75fecda8b5ddf06749fd13e93594"
45
+ "devDependencies": {
46
+ "type-fest": "4.37.0"
47
+ },
48
+ "gitHead": "866fdd35ecec7a0304c486474a35f3aa2b641857"
46
49
  }