@datum-cloud/datum-ui 0.1.0

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 (13) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +42 -0
  3. package/dist/index.d.mts +52 -0
  4. package/dist/index.d.ts +52 -0
  5. package/dist/index.js +3529 -0
  6. package/dist/index.mjs +3489 -0
  7. package/package.json +80 -0
  8. package/src/styles/custom.css +27 -0
  9. package/src/styles/fonts.css +51 -0
  10. package/src/styles/root.css +28 -0
  11. package/src/styles/themes/alpha.css +421 -0
  12. package/src/styles/tokens/brand-tokens.css +57 -0
  13. package/src/styles/tokens/figma-tokens.css +624 -0
package/src/styles/tokens/figma-tokens.css ADDED
@@ -0,0 +1,624 @@
1
+ :root {
2
+ /* Collection: Font Families */
3
+ --font-families-alliance: Alliance No.1;
4
+ --font-families-canela: Canela Text LC Web;
5
+ --font-families-frontliner: Frontliner;
6
+
7
+ /* Collection: Text Sizes */
8
+ --text-sizes-10px: 0.625rem;
9
+ --text-sizes-11px: 0.6875rem;
10
+ --text-sizes-12px: 0.75rem;
11
+ --text-sizes-13px: 0.8125rem;
12
+ --text-sizes-14px: 0.875rem;
13
+ --text-sizes-16px: 1rem;
14
+ --text-sizes-18px: 1.125rem;
15
+ --text-sizes-20px: 1.25rem;
16
+ --text-sizes-24px: 1.5rem;
17
+ --text-sizes-30px: 1.875rem;
18
+ --text-sizes-36px: 2.25rem;
19
+ --text-sizes-38px: 2.375rem;
20
+ --text-sizes-48px: 3rem;
21
+ --text-sizes-54px: 3.375rem;
22
+ --text-sizes-60px: 3.75rem;
23
+ --text-sizes-72px: 4.5rem;
24
+
25
+ /* Collection: Line Heights */
26
+ --line-heights-12px: 0.75rem;
27
+ --line-heights-14px: 0.875rem;
28
+ --line-heights-16px: 1rem;
29
+ --line-heights-18px: 1.125rem;
30
+ --line-heights-21px: 1.3125rem;
31
+ --line-heights-24px: 1.5rem;
32
+ --line-heights-26px: 1.625rem;
33
+ --line-heights-28px: 1.75rem;
34
+ --line-heights-34px: 2.125rem;
35
+ --line-heights-42px: 2.625rem;
36
+ --line-heights-44px: 2.75rem;
37
+ --line-heights-48px: 3rem;
38
+ --line-heights-58px: 3.625rem;
39
+ --line-heights-64px: 4rem;
40
+ --line-heights-68px: 4.25rem;
41
+ --line-heights-70px: 4.375rem;
42
+ --line-heights-80px: 5rem;
43
+
44
+ /* Collection: Letter Spacing */
45
+ --letter-spacing-l: -0.01875000074505806rem;
46
+ --letter-spacing-m: 0.02500000037252903rem;
47
+ --letter-spacing-s: -0.05000000074505806rem;
48
+ --letter-spacing-smallcaps: 0.02500000037252903rem;
49
+ --letter-spacing-xl: 0rem;
50
+ --letter-spacing-xs: -0.07500000298023224rem;
51
+ --letter-spacing-xxl: 0.0062500000931322575rem;
52
+ --letter-spacing-xxs: -0.09375rem;
53
+
54
+ /* Collection: Spacing Scale */
55
+ --spacing-scale-0px: 0rem;
56
+ --spacing-scale-1px: 0.0625rem;
57
+ --spacing-scale-2px: 0.125rem;
58
+ --spacing-scale-4px: 0.25rem;
59
+ --spacing-scale-6px: 0.375rem;
60
+ --spacing-scale-8px: 0.5rem;
61
+ --spacing-scale-10px: 0.625rem;
62
+ --spacing-scale-12px: 0.75rem;
63
+ --spacing-scale-14px: 0.875rem;
64
+ --spacing-scale-16px: 1rem;
65
+ --spacing-scale-20px: 1.25rem;
66
+ --spacing-scale-22px: 1.375rem;
67
+ --spacing-scale-24px: 1.5rem;
68
+ --spacing-scale-28px: 1.75rem;
69
+ --spacing-scale-32px: 2rem;
70
+ --spacing-scale-36px: 2.25rem;
71
+ --spacing-scale-40px: 2.5rem;
72
+ --spacing-scale-44px: 2.75rem;
73
+ --spacing-scale-48px: 3rem;
74
+ --spacing-scale-56px: 3.5rem;
75
+ --spacing-scale-64px: 4rem;
76
+ --spacing-scale-80px: 5rem;
77
+ --spacing-scale-96px: 6rem;
78
+ --spacing-scale-112px: 7rem;
79
+ --spacing-scale-128px: 8rem;
80
+ --spacing-scale-144px: 9rem;
81
+ --spacing-scale-160px: 10rem;
82
+ --spacing-scale-176px: 11rem;
83
+ --spacing-scale-192px: 12rem;
84
+ --spacing-scale-208px: 13rem;
85
+ --spacing-scale-224px: 14rem;
86
+ --spacing-scale-240px: 15rem;
87
+ --spacing-scale-256px: 16rem;
88
+ --spacing-scale-288px: 18rem;
89
+ --spacing-scale-320px: 20rem;
90
+ --spacing-scale-384px: 24rem;
91
+
92
+ /* Collection: Breakpoints */
93
+ --breakpoint-full: 96rem;
94
+ --breakpoint-internal: 76.5rem;
95
+
96
+ /* Collection: Font Weights */
97
+ --weight: Regular;
98
+
99
+ /* Collection: Radius */
100
+ --radius-none: 0rem;
101
+ --radius-sm: 0.1875rem;
102
+ --radius-md: 0.375rem;
103
+ --radius-lg: 0.5625rem;
104
+ }
105
+
106
+ @theme {
107
+ /* Collection: Color Palette */
108
+ --alert-red-dark: oklch(0.746 0.122 20.4); /* #bf2e24 */
109
+ --alert-red-light: oklch(0.621 0.151 22.5); /* #e15853 */
110
+ --app-dark-utility-1: oklch(0.308 0.038 253.5); /* #2c3454 */
111
+ --app-dark-utility-2: oklch(0.386 0.032 253.8); /* #394367 */
112
+ --app-dark-utility-3: oklch(0.544 0.021 250.7); /* #707ca7 */
113
+ --app-dark-utility-4: oklch(0.67 0.011 248); /* #aab4d2 */
114
+ --app-dark-utility-5: oklch(0.913 0.004 91.4); /* #e6ede0 */
115
+ --aurora-moss: oklch(0.94 0.11 116.6); /* #e6f59e */
116
+ --black: oklch(0 0 0); /* #000000 */
117
+ --blush-quartz: oklch(0.881 0.031 17.8); /* #f6e0dc */
118
+ --canyon-clay: oklch(0.709 0.051 18.4); /* #bf9595 */
119
+ --canyon-clay-links: oklch(0.61 0.044 18.4); /* #a46969 */
120
+ --glacier-mist-700: oklch(0.973 0.001 106.4); /* #fcfdf7 */
121
+ --glacier-mist-800: rgba(236, 235, 231, 0.6); /* #ecebe799 */
122
+ --glacier-mist-900: oklch(0.928 0.004 91.4); /* #eeefe6 */
123
+ --midnight-fjord: oklch(0.228 0.045 253.7); /* #0c1d31 */
124
+ --pine-forge: oklch(0.478 0.034 158.9); /* #446e3d */
125
+ --potted-olive: oklch(0.776 0.02 152.7); /* #c2ddb6 */
126
+ --white: oklch(1 0 0); /* #ffffff */
127
+
128
+ /* Collection: Typography */
129
+ --app-body-font-family: var(--font-families-alliance);
130
+ --app-body-font-size: var(--text-sizes-13px);
131
+ --app-body-letter-spacing: var(--letter-spacing-xl);
132
+ --app-body-line-height: var(--line-heights-18px);
133
+ --app-body-list-spacing: var(--spacing-scale-12px);
134
+ --app-body-paragraph-spacing: var(--spacing-scale-10px);
135
+
136
+ --docs-article-body-font-family: var(--font-families-alliance);
137
+ --docs-article-body-font-size: var(--text-sizes-16px);
138
+ --docs-article-body-letter-spacing: var(--letter-spacing-xl);
139
+ --docs-article-body-line-height: var(--line-heights-24px);
140
+ --docs-article-body-list-spacing: var(--spacing-scale-12px);
141
+ --docs-article-body-paragraph-spacing: var(--spacing-scale-10px);
142
+
143
+ --docs-sidebar-headings-font-family: var(--font-families-alliance);
144
+ --docs-sidebar-headings-font-size: 0.6875rem;
145
+ --docs-sidebar-headings-letter-spacing: 0.03125rem;
146
+ --docs-sidebar-headings-line-height: 1rem;
147
+
148
+ --docs-sidebar-links-font-family: var(--font-families-alliance);
149
+ --docs-sidebar-links-font-size: var(--text-sizes-13px);
150
+ --docs-sidebar-links-letter-spacing: var(--letter-spacing-xl);
151
+ --docs-sidebar-links-line-height: var(--line-heights-18px);
152
+
153
+ --text-10xl-canela-font-family: var(--font-families-canela);
154
+ --text-10xl-canela-font-size: var(--text-sizes-60px);
155
+ --text-10xl-canela-letter-spacing: var(--letter-spacing-xxs);
156
+ --text-10xl-canela-line-height: var(--line-heights-70px);
157
+
158
+ --text-11xl-canela-font-family: var(--font-families-canela);
159
+ --text-11xl-canela-font-size: var(--text-sizes-72px);
160
+ --text-11xl-canela-letter-spacing: var(--letter-spacing-xxs);
161
+ --text-11xl-canela-line-height: var(--line-heights-80px);
162
+
163
+ --text-2xl-font-family: var(--font-families-alliance);
164
+ --text-2xl-font-size: var(--text-sizes-24px);
165
+ --text-2xl-letter-spacing: var(--letter-spacing-xl);
166
+ --text-2xl-line-height: 1.875rem;
167
+
168
+ --text-3xl-font-family: var(--font-families-alliance);
169
+ --text-3xl-font-size: var(--text-sizes-30px);
170
+ --text-3xl-letter-spacing: var(--letter-spacing-xl);
171
+ --text-3xl-line-height: var(--line-heights-42px);
172
+
173
+ --text-4xl-font-family: var(--font-families-alliance);
174
+ --text-4xl-font-size: var(--text-sizes-36px);
175
+ --text-4xl-letter-spacing: var(--letter-spacing-l);
176
+ --text-4xl-line-height: var(--line-heights-44px);
177
+
178
+ --text-5xl-font-family: var(--font-families-alliance);
179
+ --text-5xl-font-size: var(--text-sizes-48px);
180
+ --text-5xl-letter-spacing: var(--letter-spacing-m);
181
+ --text-5xl-line-height: var(--line-heights-58px);
182
+
183
+ --text-6xl-font-family: var(--font-families-alliance);
184
+ --text-6xl-font-size: var(--text-sizes-60px);
185
+ --text-6xl-letter-spacing: var(--letter-spacing-m);
186
+ --text-6xl-line-height: var(--line-heights-68px);
187
+
188
+ --text-7xl-canela-font-family: var(--font-families-canela);
189
+ --text-7xl-canela-font-size: var(--text-sizes-38px);
190
+ --text-7xl-canela-letter-spacing: var(--letter-spacing-xs);
191
+ --text-7xl-canela-line-height: var(--line-heights-44px);
192
+
193
+ --text-8xl-canela-font-family: var(--font-families-canela);
194
+ --text-8xl-canela-font-size: var(--text-sizes-48px);
195
+ --text-8xl-canela-letter-spacing: var(--letter-spacing-xxs);
196
+ --text-8xl-canela-line-height: var(--line-heights-58px);
197
+
198
+ --text-9xl-canela-font-family: var(--font-families-canela);
199
+ --text-9xl-canela-font-size: var(--text-sizes-54px);
200
+ --text-9xl-canela-letter-spacing: var(--letter-spacing-xxs);
201
+ --text-9xl-canela-line-height: var(--line-heights-64px);
202
+
203
+ --text-article-body-font-family: var(--font-families-alliance);
204
+ --text-article-body-font-size: var(--text-sizes-18px);
205
+ --text-article-body-letter-spacing: var(--letter-spacing-xl);
206
+ --text-article-body-line-height: var(--line-heights-28px);
207
+ --text-article-body-list-spacing: var(--spacing-scale-10px);
208
+ --text-article-body-paragraph-spacing: var(--spacing-scale-10px);
209
+
210
+ --text-base-font-family: var(--font-families-alliance);
211
+ --text-base-font-size: var(--text-sizes-16px);
212
+ --text-base-letter-spacing: var(--letter-spacing-xl);
213
+ --text-base-line-height: var(--line-heights-24px);
214
+ --text-base-list-spacing: var(--spacing-scale-12px);
215
+ --text-base-paragraph-spacing: var(--spacing-scale-10px);
216
+
217
+ --text-lg-font-family: var(--font-families-alliance);
218
+ --text-lg-font-size: var(--text-sizes-18px);
219
+ --text-lg-letter-spacing: var(--letter-spacing-xl);
220
+ --text-lg-line-height: var(--line-heights-26px);
221
+ --text-lg-list-spacing: var(--spacing-scale-12px);
222
+ --text-lg-paragraph-spacing: var(--spacing-scale-10px);
223
+
224
+ --text-sm-font-family: var(--font-families-alliance);
225
+ --text-sm-font-size: var(--text-sizes-14px);
226
+ --text-sm-letter-spacing: var(--letter-spacing-xl);
227
+ --text-sm-line-height: var(--line-heights-21px);
228
+
229
+ --text-smallcaps-font-family: var(--font-families-alliance);
230
+ --text-smallcaps-font-size: var(--text-sizes-12px);
231
+ --text-smallcaps-letter-spacing: var(--letter-spacing-smallcaps);
232
+ --text-smallcaps-line-height: var(--line-heights-18px);
233
+
234
+ --text-xl-font-family: var(--font-families-alliance);
235
+ --text-xl-font-size: var(--text-sizes-20px);
236
+ --text-xl-letter-spacing: var(--letter-spacing-xl);
237
+ --text-xl-line-height: var(--line-heights-28px);
238
+
239
+ --text-xs-font-family: var(--font-families-alliance);
240
+ --text-xs-font-size: var(--text-sizes-12px);
241
+ --text-xs-letter-spacing: var(--letter-spacing-xl);
242
+ --text-xs-line-height: var(--line-heights-16px);
243
+ }
244
+
245
+ /* Mode Override */
246
+ .lg---1024px {
247
+ /* Collection: Breakpoints */
248
+ --breakpoint-full: 64rem;
249
+ --breakpoint-internal: 61rem;
250
+
251
+ /* Collection: Typography */
252
+ --app-body-font-family: var(--font-families-alliance);
253
+ --app-body-font-size: var(--text-sizes-13px);
254
+ --app-body-letter-spacing: var(--letter-spacing-xl);
255
+ --app-body-line-height: var(--line-heights-18px);
256
+ --app-body-list-spacing: var(--spacing-scale-10px);
257
+ --app-body-paragraph-spacing: var(--spacing-scale-8px);
258
+
259
+ --docs-article-body-font-family: var(--font-families-alliance);
260
+ --docs-article-body-font-size: var(--text-sizes-14px);
261
+ --docs-article-body-letter-spacing: var(--letter-spacing-xl);
262
+ --docs-article-body-line-height: var(--line-heights-21px);
263
+ --docs-article-body-list-spacing: var(--spacing-scale-10px);
264
+ --docs-article-body-paragraph-spacing: var(--spacing-scale-8px);
265
+
266
+ --docs-sidebar-headings-font-family: var(--font-families-alliance);
267
+ --docs-sidebar-headings-font-size: 0.625rem;
268
+ --docs-sidebar-headings-letter-spacing: 0.03125rem;
269
+ --docs-sidebar-headings-line-height: 1rem;
270
+
271
+ --docs-sidebar-links-font-family: var(--font-families-alliance);
272
+ --docs-sidebar-links-font-size: var(--text-sizes-12px);
273
+ --docs-sidebar-links-letter-spacing: var(--letter-spacing-xl);
274
+ --docs-sidebar-links-line-height: var(--line-heights-16px);
275
+
276
+ --text-10xl-canela-font-family: var(--font-families-canela);
277
+ --text-10xl-canela-font-size: var(--text-sizes-54px);
278
+ --text-10xl-canela-letter-spacing: var(--letter-spacing-xxs);
279
+ --text-10xl-canela-line-height: var(--line-heights-64px);
280
+
281
+ --text-11xl-canela-font-family: var(--font-families-canela);
282
+ --text-11xl-canela-font-size: var(--text-sizes-72px);
283
+ --text-11xl-canela-letter-spacing: var(--letter-spacing-xxs);
284
+ --text-11xl-canela-line-height: var(--line-heights-80px);
285
+
286
+ --text-2xl-font-family: var(--font-families-alliance);
287
+ --text-2xl-font-size: var(--text-sizes-20px);
288
+ --text-2xl-letter-spacing: var(--letter-spacing-xl);
289
+ --text-2xl-line-height: var(--line-heights-28px);
290
+
291
+ --text-3xl-font-family: var(--font-families-alliance);
292
+ --text-3xl-font-size: var(--text-sizes-24px);
293
+ --text-3xl-letter-spacing: var(--letter-spacing-xl);
294
+ --text-3xl-line-height: var(--line-heights-34px);
295
+
296
+ --text-4xl-font-family: var(--font-families-alliance);
297
+ --text-4xl-font-size: var(--text-sizes-36px);
298
+ --text-4xl-letter-spacing: var(--letter-spacing-l);
299
+ --text-4xl-line-height: var(--line-heights-44px);
300
+
301
+ --text-5xl-font-family: var(--font-families-alliance);
302
+ --text-5xl-font-size: var(--text-sizes-48px);
303
+ --text-5xl-letter-spacing: var(--letter-spacing-m);
304
+ --text-5xl-line-height: var(--line-heights-58px);
305
+
306
+ --text-6xl-font-family: var(--font-families-alliance);
307
+ --text-6xl-font-size: var(--text-sizes-60px);
308
+ --text-6xl-letter-spacing: var(--letter-spacing-m);
309
+ --text-6xl-line-height: var(--line-heights-68px);
310
+
311
+ --text-7xl-canela-font-family: var(--font-families-canela);
312
+ --text-7xl-canela-font-size: var(--text-sizes-30px);
313
+ --text-7xl-canela-letter-spacing: var(--letter-spacing-s);
314
+ --text-7xl-canela-line-height: var(--line-heights-42px);
315
+
316
+ --text-8xl-canela-font-family: var(--font-families-canela);
317
+ --text-8xl-canela-font-size: var(--text-sizes-38px);
318
+ --text-8xl-canela-letter-spacing: var(--letter-spacing-xs);
319
+ --text-8xl-canela-line-height: var(--line-heights-48px);
320
+
321
+ --text-9xl-canela-font-family: var(--font-families-canela);
322
+ --text-9xl-canela-font-size: var(--text-sizes-48px);
323
+ --text-9xl-canela-letter-spacing: var(--letter-spacing-xxs);
324
+ --text-9xl-canela-line-height: var(--line-heights-58px);
325
+
326
+ --text-article-body-font-family: var(--font-families-alliance);
327
+ --text-article-body-font-size: var(--text-sizes-16px);
328
+ --text-article-body-letter-spacing: var(--letter-spacing-xl);
329
+ --text-article-body-line-height: var(--line-heights-24px);
330
+ --text-article-body-list-spacing: var(--spacing-scale-10px);
331
+ --text-article-body-paragraph-spacing: var(--spacing-scale-8px);
332
+
333
+ --text-base-font-family: var(--font-families-alliance);
334
+ --text-base-font-size: var(--text-sizes-14px);
335
+ --text-base-letter-spacing: var(--letter-spacing-xl);
336
+ --text-base-line-height: var(--line-heights-21px);
337
+ --text-base-list-spacing: var(--spacing-scale-10px);
338
+ --text-base-paragraph-spacing: var(--spacing-scale-8px);
339
+
340
+ --text-lg-font-family: var(--font-families-alliance);
341
+ --text-lg-font-size: var(--text-sizes-16px);
342
+ --text-lg-letter-spacing: var(--letter-spacing-xl);
343
+ --text-lg-line-height: var(--line-heights-24px);
344
+ --text-lg-list-spacing: var(--spacing-scale-10px);
345
+ --text-lg-paragraph-spacing: var(--spacing-scale-8px);
346
+
347
+ --text-sm-font-family: var(--font-families-alliance);
348
+ --text-sm-font-size: var(--text-sizes-12px);
349
+ --text-sm-letter-spacing: var(--letter-spacing-xl);
350
+ --text-sm-line-height: var(--line-heights-18px);
351
+
352
+ --text-smallcaps-font-family: var(--font-families-alliance);
353
+ --text-smallcaps-font-size: var(--text-sizes-12px);
354
+ --text-smallcaps-letter-spacing: var(--letter-spacing-smallcaps);
355
+ --text-smallcaps-line-height: var(--line-heights-18px);
356
+
357
+ --text-xl-font-family: var(--font-families-alliance);
358
+ --text-xl-font-size: var(--text-sizes-18px);
359
+ --text-xl-letter-spacing: var(--letter-spacing-xl);
360
+ --text-xl-line-height: var(--line-heights-26px);
361
+
362
+ --text-xs-font-family: var(--font-families-alliance);
363
+ --text-xs-font-size: var(--text-sizes-10px);
364
+ --text-xs-letter-spacing: var(--letter-spacing-xl);
365
+ --text-xs-line-height: var(--line-heights-14px);
366
+ }
367
+
368
+ /* Mode Override */
369
+ .md---768px {
370
+ /* Collection: Breakpoints */
371
+ --breakpoint-full: 48rem;
372
+ --breakpoint-internal: 45.25rem;
373
+
374
+ /* Collection: Typography */
375
+ --app-body-font-family: var(--font-families-alliance);
376
+ --app-body-font-size: var(--text-sizes-13px);
377
+ --app-body-letter-spacing: var(--letter-spacing-xl);
378
+ --app-body-line-height: var(--line-heights-18px);
379
+ --app-body-list-spacing: var(--spacing-scale-8px);
380
+ --app-body-paragraph-spacing: var(--spacing-scale-6px);
381
+
382
+ --docs-article-body-font-family: var(--font-families-alliance);
383
+ --docs-article-body-font-size: var(--text-sizes-14px);
384
+ --docs-article-body-letter-spacing: var(--letter-spacing-xl);
385
+ --docs-article-body-line-height: var(--line-heights-21px);
386
+ --docs-article-body-list-spacing: var(--spacing-scale-8px);
387
+ --docs-article-body-paragraph-spacing: var(--spacing-scale-6px);
388
+
389
+ --docs-sidebar-headings-font-family: var(--font-families-alliance);
390
+ --docs-sidebar-headings-font-size: 0.6875rem;
391
+ --docs-sidebar-headings-letter-spacing: 0.03125rem;
392
+ --docs-sidebar-headings-line-height: 1rem;
393
+
394
+ --docs-sidebar-links-font-family: var(--font-families-alliance);
395
+ --docs-sidebar-links-font-size: var(--text-sizes-12px);
396
+ --docs-sidebar-links-letter-spacing: var(--letter-spacing-xl);
397
+ --docs-sidebar-links-line-height: var(--line-heights-14px);
398
+
399
+ --text-10xl-canela-font-family: var(--font-families-canela);
400
+ --text-10xl-canela-font-size: var(--text-sizes-48px);
401
+ --text-10xl-canela-letter-spacing: var(--letter-spacing-xxs);
402
+ --text-10xl-canela-line-height: var(--line-heights-58px);
403
+
404
+ --text-11xl-canela-font-family: var(--font-families-canela);
405
+ --text-11xl-canela-font-size: var(--text-sizes-72px);
406
+ --text-11xl-canela-letter-spacing: var(--letter-spacing-xxs);
407
+ --text-11xl-canela-line-height: var(--line-heights-80px);
408
+
409
+ --text-2xl-font-family: var(--font-families-alliance);
410
+ --text-2xl-font-size: var(--text-sizes-18px);
411
+ --text-2xl-letter-spacing: var(--letter-spacing-xl);
412
+ --text-2xl-line-height: var(--line-heights-26px);
413
+
414
+ --text-3xl-font-family: var(--font-families-alliance);
415
+ --text-3xl-font-size: var(--text-sizes-20px);
416
+ --text-3xl-letter-spacing: var(--letter-spacing-xl);
417
+ --text-3xl-line-height: var(--line-heights-28px);
418
+
419
+ --text-4xl-font-family: var(--font-families-alliance);
420
+ --text-4xl-font-size: var(--text-sizes-36px);
421
+ --text-4xl-letter-spacing: var(--letter-spacing-l);
422
+ --text-4xl-line-height: var(--line-heights-44px);
423
+
424
+ --text-5xl-font-family: var(--font-families-alliance);
425
+ --text-5xl-font-size: var(--text-sizes-48px);
426
+ --text-5xl-letter-spacing: var(--letter-spacing-m);
427
+ --text-5xl-line-height: var(--line-heights-58px);
428
+
429
+ --text-6xl-font-family: var(--font-families-alliance);
430
+ --text-6xl-font-size: var(--text-sizes-60px);
431
+ --text-6xl-letter-spacing: var(--letter-spacing-m);
432
+ --text-6xl-line-height: var(--line-heights-68px);
433
+
434
+ --text-7xl-canela-font-family: var(--font-families-canela);
435
+ --text-7xl-canela-font-size: var(--text-sizes-24px);
436
+ --text-7xl-canela-letter-spacing: var(--letter-spacing-s);
437
+ --text-7xl-canela-line-height: var(--line-heights-28px);
438
+
439
+ --text-8xl-canela-font-family: var(--font-families-canela);
440
+ --text-8xl-canela-font-size: var(--text-sizes-36px);
441
+ --text-8xl-canela-letter-spacing: var(--letter-spacing-xs);
442
+ --text-8xl-canela-line-height: var(--line-heights-44px);
443
+
444
+ --text-9xl-canela-font-family: var(--font-families-canela);
445
+ --text-9xl-canela-font-size: var(--text-sizes-48px);
446
+ --text-9xl-canela-letter-spacing: var(--letter-spacing-xxs);
447
+ --text-9xl-canela-line-height: var(--line-heights-58px);
448
+
449
+ --text-article-body-font-family: var(--font-families-alliance);
450
+ --text-article-body-font-size: var(--text-sizes-14px);
451
+ --text-article-body-letter-spacing: var(--letter-spacing-xl);
452
+ --text-article-body-line-height: var(--line-heights-21px);
453
+ --text-article-body-list-spacing: var(--spacing-scale-8px);
454
+ --text-article-body-paragraph-spacing: var(--spacing-scale-6px);
455
+
456
+ --text-base-font-family: var(--font-families-alliance);
457
+ --text-base-font-size: var(--text-sizes-14px);
458
+ --text-base-letter-spacing: var(--letter-spacing-xl);
459
+ --text-base-line-height: var(--line-heights-21px);
460
+ --text-base-list-spacing: var(--spacing-scale-8px);
461
+ --text-base-paragraph-spacing: var(--spacing-scale-6px);
462
+
463
+ --text-lg-font-family: var(--font-families-alliance);
464
+ --text-lg-font-size: var(--text-sizes-14px);
465
+ --text-lg-letter-spacing: var(--letter-spacing-xl);
466
+ --text-lg-line-height: var(--line-heights-21px);
467
+ --text-lg-list-spacing: var(--spacing-scale-8px);
468
+ --text-lg-paragraph-spacing: var(--spacing-scale-6px);
469
+
470
+ --text-sm-font-family: var(--font-families-alliance);
471
+ --text-sm-font-size: var(--text-sizes-10px);
472
+ --text-sm-letter-spacing: var(--letter-spacing-xl);
473
+ --text-sm-line-height: var(--line-heights-14px);
474
+
475
+ --text-smallcaps-font-family: var(--font-families-alliance);
476
+ --text-smallcaps-font-size: var(--text-sizes-12px);
477
+ --text-smallcaps-letter-spacing: var(--letter-spacing-smallcaps);
478
+ --text-smallcaps-line-height: var(--line-heights-18px);
479
+
480
+ --text-xl-font-family: var(--font-families-alliance);
481
+ --text-xl-font-size: var(--text-sizes-16px);
482
+ --text-xl-letter-spacing: var(--letter-spacing-xl);
483
+ --text-xl-line-height: var(--line-heights-24px);
484
+
485
+ --text-xs-font-family: var(--font-families-alliance);
486
+ --text-xs-font-size: var(--text-sizes-10px);
487
+ --text-xs-letter-spacing: var(--letter-spacing-xl);
488
+ --text-xs-line-height: var(--line-heights-14px);
489
+ }
490
+
491
+ /* Mode Override */
492
+ .sm---360px {
493
+ /* Collection: Breakpoints */
494
+ --breakpoint-full: 22.5rem;
495
+ --breakpoint-internal: 21rem;
496
+
497
+ /* Collection: Typography */
498
+ --app-body-font-family: var(--font-families-alliance);
499
+ --app-body-font-size: var(--text-sizes-13px);
500
+ --app-body-letter-spacing: var(--letter-spacing-xl);
501
+ --app-body-line-height: var(--line-heights-18px);
502
+ --app-body-list-spacing: var(--spacing-scale-6px);
503
+ --app-body-paragraph-spacing: var(--spacing-scale-4px);
504
+
505
+ --docs-article-body-font-family: var(--font-families-alliance);
506
+ --docs-article-body-font-size: var(--text-sizes-14px);
507
+ --docs-article-body-letter-spacing: var(--letter-spacing-xl);
508
+ --docs-article-body-line-height: var(--line-heights-21px);
509
+ --docs-article-body-list-spacing: var(--spacing-scale-6px);
510
+ --docs-article-body-paragraph-spacing: var(--spacing-scale-4px);
511
+
512
+ --docs-sidebar-headings-font-family: var(--font-families-alliance);
513
+ --docs-sidebar-headings-font-size: 0.6875rem;
514
+ --docs-sidebar-headings-letter-spacing: 0.03125rem;
515
+ --docs-sidebar-headings-line-height: 1rem;
516
+
517
+ --docs-sidebar-links-font-family: var(--font-families-alliance);
518
+ --docs-sidebar-links-font-size: var(--text-sizes-12px);
519
+ --docs-sidebar-links-letter-spacing: var(--letter-spacing-xl);
520
+ --docs-sidebar-links-line-height: var(--line-heights-14px);
521
+
522
+ --text-10xl-canela-font-family: var(--font-families-canela);
523
+ --text-10xl-canela-font-size: var(--text-sizes-36px);
524
+ --text-10xl-canela-letter-spacing: var(--letter-spacing-xs);
525
+ --text-10xl-canela-line-height: var(--line-heights-42px);
526
+
527
+ --text-11xl-canela-font-family: var(--font-families-canela);
528
+ --text-11xl-canela-font-size: var(--text-sizes-72px);
529
+ --text-11xl-canela-letter-spacing: var(--letter-spacing-xxs);
530
+ --text-11xl-canela-line-height: var(--line-heights-80px);
531
+
532
+ --text-2xl-font-family: var(--font-families-alliance);
533
+ --text-2xl-font-size: var(--text-sizes-16px);
534
+ --text-2xl-letter-spacing: var(--letter-spacing-xl);
535
+ --text-2xl-line-height: var(--line-heights-21px);
536
+
537
+ --text-3xl-font-family: var(--font-families-alliance);
538
+ --text-3xl-font-size: var(--text-sizes-18px);
539
+ --text-3xl-letter-spacing: var(--letter-spacing-xl);
540
+ --text-3xl-line-height: var(--line-heights-26px);
541
+
542
+ --text-4xl-font-family: var(--font-families-alliance);
543
+ --text-4xl-font-size: var(--text-sizes-36px);
544
+ --text-4xl-letter-spacing: var(--letter-spacing-l);
545
+ --text-4xl-line-height: var(--line-heights-44px);
546
+
547
+ --text-5xl-font-family: var(--font-families-alliance);
548
+ --text-5xl-font-size: var(--text-sizes-48px);
549
+ --text-5xl-letter-spacing: var(--letter-spacing-m);
550
+ --text-5xl-line-height: var(--line-heights-58px);
551
+
552
+ --text-6xl-font-family: var(--font-families-alliance);
553
+ --text-6xl-font-size: var(--text-sizes-60px);
554
+ --text-6xl-letter-spacing: var(--letter-spacing-m);
555
+ --text-6xl-line-height: var(--line-heights-68px);
556
+
557
+ --text-7xl-canela-font-family: var(--font-families-canela);
558
+ --text-7xl-canela-font-size: var(--text-sizes-24px);
559
+ --text-7xl-canela-letter-spacing: var(--letter-spacing-s);
560
+ --text-7xl-canela-line-height: 1.875rem;
561
+
562
+ --text-8xl-canela-font-family: var(--font-families-canela);
563
+ --text-8xl-canela-font-size: var(--text-sizes-30px);
564
+ --text-8xl-canela-letter-spacing: var(--letter-spacing-s);
565
+ --text-8xl-canela-line-height: var(--line-heights-34px);
566
+
567
+ --text-9xl-canela-font-family: var(--font-families-canela);
568
+ --text-9xl-canela-font-size: var(--text-sizes-48px);
569
+ --text-9xl-canela-letter-spacing: var(--letter-spacing-xxs);
570
+ --text-9xl-canela-line-height: var(--line-heights-58px);
571
+
572
+ --text-article-body-font-family: var(--font-families-alliance);
573
+ --text-article-body-font-size: var(--text-sizes-14px);
574
+ --text-article-body-letter-spacing: var(--letter-spacing-xl);
575
+ --text-article-body-line-height: var(--line-heights-21px);
576
+ --text-article-body-list-spacing: var(--spacing-scale-8px);
577
+ --text-article-body-paragraph-spacing: var(--spacing-scale-8px);
578
+
579
+ --text-base-font-family: var(--font-families-alliance);
580
+ --text-base-font-size: var(--text-sizes-14px);
581
+ --text-base-letter-spacing: var(--letter-spacing-xl);
582
+ --text-base-line-height: var(--line-heights-21px);
583
+ --text-base-list-spacing: var(--spacing-scale-6px);
584
+ --text-base-paragraph-spacing: var(--spacing-scale-4px);
585
+
586
+ --text-lg-font-family: var(--font-families-alliance);
587
+ --text-lg-font-size: var(--text-sizes-14px);
588
+ --text-lg-letter-spacing: var(--letter-spacing-xl);
589
+ --text-lg-line-height: var(--line-heights-21px);
590
+ --text-lg-list-spacing: var(--spacing-scale-6px);
591
+ --text-lg-paragraph-spacing: var(--spacing-scale-4px);
592
+
593
+ --text-sm-font-family: var(--font-families-alliance);
594
+ --text-sm-font-size: var(--text-sizes-10px);
595
+ --text-sm-letter-spacing: var(--letter-spacing-xl);
596
+ --text-sm-line-height: var(--line-heights-14px);
597
+
598
+ --text-smallcaps-font-family: var(--font-families-alliance);
599
+ --text-smallcaps-font-size: var(--text-sizes-12px);
600
+ --text-smallcaps-letter-spacing: var(--letter-spacing-smallcaps);
601
+ --text-smallcaps-line-height: var(--line-heights-18px);
602
+
603
+ --text-xl-font-family: var(--font-families-alliance);
604
+ --text-xl-font-size: var(--text-sizes-14px);
605
+ --text-xl-letter-spacing: var(--letter-spacing-xl);
606
+ --text-xl-line-height: 1.125rem;
607
+
608
+ --text-xs-font-family: var(--font-families-alliance);
609
+ --text-xs-font-size: var(--text-sizes-10px);
610
+ --text-xs-letter-spacing: var(--letter-spacing-xl);
611
+ --text-xs-line-height: var(--line-heights-14px);
612
+ }
613
+
614
+ /* Mode Override */
615
+ .medium {
616
+ /* Collection: Font Weights */
617
+ --weight: Medium;
618
+ }
619
+
620
+ /* Mode Override */
621
+ .semi-bold {
622
+ /* Collection: Font Weights */
623
+ --weight: SemiBold;
624
+ }