@czi-sds/components 21.6.2 → 21.7.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 (9) hide show
  1. package/dist/index.cjs.d.ts +93 -76
  2. package/dist/index.cjs.js +376 -64
  3. package/dist/index.esm.d.ts +93 -76
  4. package/dist/index.esm.js +376 -65
  5. package/dist/tailwind.json +235 -105
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +161 -8
  8. package/dist/variables.scss +81 -107
  9. package/package.json +2 -2
package/dist/variables.css CHANGED
@@ -33,6 +33,9 @@
33
33
  --sds-border-positive-default: 1px solid #105b2b;
34
34
  --sds-border-positive-extra-thick: 4px solid #105b2b;
35
35
  --sds-border-positive-thick: 2px solid #105b2b;
36
+ --sds-breakpoint-sm: 0px;
37
+ --sds-breakpoint-md: 512px;
38
+ --sds-breakpoint-lg: 1024px;
36
39
  --sds-color-primitive-blue-100: #e2eeff;
37
40
  --sds-color-primitive-blue-200: #cce1ff;
38
41
  --sds-color-primitive-blue-300: #9dc6ff;
@@ -198,81 +201,154 @@
198
201
  --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
199
202
  --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
200
203
  --sds-drop-shadow-none: none;
201
- --sds-font-color: black;
202
204
  --sds-font-font-family-body: "Inter", sans-serif;
205
+ --sds-font-font-family-body-narrow: "Inter", sans-serif;
203
206
  --sds-font-font-family-caps: "Inter", sans-serif;
207
+ --sds-font-font-family-caps-narrow: "Inter", sans-serif;
204
208
  --sds-font-font-family-code: "IBM Plex Mono", monospace;
209
+ --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace;
205
210
  --sds-font-font-family-header: "Inter", sans-serif;
211
+ --sds-font-font-family-header-narrow: "Inter", sans-serif;
206
212
  --sds-font-font-family-tabular: "Inter", sans-serif;
213
+ --sds-font-font-family-tabular-narrow: "Inter", sans-serif;
207
214
  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
215
+ --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
208
216
  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
217
+ --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px;
209
218
  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
219
+ --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
210
220
  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
221
+ --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px;
211
222
  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
223
+ --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
212
224
  --sds-font-body-xxs-400-letter-spacing: 0.1px;
225
+ --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px;
213
226
  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
227
+ --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
214
228
  --sds-font-body-xxs-600-letter-spacing: 0.1px;
229
+ --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px;
215
230
  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
231
+ --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
216
232
  --sds-font-body-xs-400-letter-spacing: 0.08px;
233
+ --sds-font-body-xs-400-letter-spacing-narrow: 0.08px;
217
234
  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
235
+ --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
218
236
  --sds-font-body-xs-600-letter-spacing: 0.08px;
237
+ --sds-font-body-xs-600-letter-spacing-narrow: 0.08px;
219
238
  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
239
+ --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
220
240
  --sds-font-body-s-400-letter-spacing: 0.08px;
241
+ --sds-font-body-s-400-letter-spacing-narrow: 0.08px;
221
242
  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
243
+ --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
222
244
  --sds-font-body-s-600-letter-spacing: 0.08px;
245
+ --sds-font-body-s-600-letter-spacing-narrow: 0.08px;
223
246
  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
247
+ --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif;
224
248
  --sds-font-body-m-400-letter-spacing: 0px;
249
+ --sds-font-body-m-400-letter-spacing-narrow: 0px;
225
250
  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
251
+ --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif;
226
252
  --sds-font-body-m-600-letter-spacing: 0px;
253
+ --sds-font-body-m-600-letter-spacing-narrow: 0px;
227
254
  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
255
+ --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif;
228
256
  --sds-font-body-l-400-letter-spacing: 0px;
257
+ --sds-font-body-l-400-letter-spacing-narrow: 0px;
229
258
  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
259
+ --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif;
230
260
  --sds-font-body-l-600-letter-spacing: 0px;
261
+ --sds-font-body-l-600-letter-spacing-narrow: 0px;
231
262
  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
263
+ --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
232
264
  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
233
- --sds-font-caps-xxxxs-600-text-transform: uppercase;
265
+ --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px;
266
+ --sds-font-caps-xxxxs-600-text-transform: uppercase;
267
+ --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase;
234
268
  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
269
+ --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
235
270
  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
236
- --sds-font-caps-xxxs-600-text-transform: uppercase;
271
+ --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px;
272
+ --sds-font-caps-xxxs-600-text-transform: uppercase;
273
+ --sds-font-caps-xxxs-600-text-transform-narrow: uppercase;
237
274
  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
275
+ --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
238
276
  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
239
- --sds-font-caps-xxs-600-text-transform: uppercase;
277
+ --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px;
278
+ --sds-font-caps-xxs-600-text-transform: uppercase;
279
+ --sds-font-caps-xxs-600-text-transform-narrow: uppercase;
240
280
  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
281
+ --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
241
282
  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
283
+ --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px;
242
284
  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
285
+ --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
243
286
  --sds-font-header-xxs-600-letter-spacing: 0.1px;
287
+ --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px;
244
288
  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
289
+ --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif;
245
290
  --sds-font-header-xs-600-letter-spacing: 0.08px;
291
+ --sds-font-header-xs-600-letter-spacing-narrow: 0.08px;
246
292
  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
293
+ --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif;
247
294
  --sds-font-header-s-600-letter-spacing: 0.08px;
295
+ --sds-font-header-s-600-letter-spacing-narrow: 0.08px;
248
296
  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
297
+ --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif;
249
298
  --sds-font-header-m-600-letter-spacing: 0px;
299
+ --sds-font-header-m-600-letter-spacing-narrow: 0.08px;
250
300
  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
301
+ --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif;
251
302
  --sds-font-header-l-600-letter-spacing: 0px;
303
+ --sds-font-header-l-600-letter-spacing-narrow: 0px;
252
304
  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
305
+ --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif;
253
306
  --sds-font-header-xl-600-letter-spacing: 0px;
307
+ --sds-font-header-xl-600-letter-spacing-narrow: 0px;
254
308
  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
309
+ --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif;
255
310
  --sds-font-header-xxl-600-letter-spacing: 0px;
311
+ --sds-font-header-xxl-600-letter-spacing-narrow: 0px;
256
312
  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
313
+ --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
257
314
  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
315
+ --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums;
258
316
  --sds-font-tabular-xs-400-letter-spacing: 0px;
317
+ --sds-font-tabular-xs-400-letter-spacing-narrow: 0px;
259
318
  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
319
+ --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
260
320
  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
321
+ --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums;
261
322
  --sds-font-tabular-xs-600-letter-spacing: 0px;
323
+ --sds-font-tabular-xs-600-letter-spacing-narrow: 0px;
262
324
  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
325
+ --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
263
326
  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
327
+ --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums;
264
328
  --sds-font-tabular-s-400-letter-spacing: 0px;
329
+ --sds-font-tabular-s-400-letter-spacing-narrow: 0px;
265
330
  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
331
+ --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
266
332
  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
333
+ --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums;
267
334
  --sds-font-tabular-s-600-letter-spacing: 0px;
335
+ --sds-font-tabular-s-600-letter-spacing-narrow: 0px;
268
336
  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
337
+ --sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace;
269
338
  --sds-font-code-xs-400-letter-spacing: 0px;
339
+ --sds-font-code-xs-400-letter-spacing-narrow: 0px;
270
340
  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
341
+ --sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace;
271
342
  --sds-font-code-xs-600-letter-spacing: 0px;
343
+ --sds-font-code-xs-600-letter-spacing-narrow: 0px;
272
344
  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
345
+ --sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace;
273
346
  --sds-font-code-s-400-letter-spacing: 0px;
347
+ --sds-font-code-s-400-letter-spacing-narrow: 0px;
274
348
  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
349
+ --sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace;
275
350
  --sds-font-code-s-600-letter-spacing: 0px;
351
+ --sds-font-code-s-600-letter-spacing-narrow: 0px;
276
352
  --sds-icon-size-input-height: 16px;
277
353
  --sds-icon-size-input-width: 16px;
278
354
  --sds-icon-size-xs-height: 12px;
@@ -330,6 +406,9 @@
330
406
  --sds-border-positive-default: 1px solid #bcecc5;
331
407
  --sds-border-positive-extra-thick: 4px solid #bcecc5;
332
408
  --sds-border-positive-thick: 2px solid #bcecc5;
409
+ --sds-breakpoint-sm: 0px;
410
+ --sds-breakpoint-md: 512px;
411
+ --sds-breakpoint-lg: 1024px;
333
412
  --sds-color-primitive-blue-100: #002573;
334
413
  --sds-color-primitive-blue-200: #0048c5;
335
414
  --sds-color-primitive-blue-300: #2573f4;
@@ -495,81 +574,154 @@
495
574
  --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
496
575
  --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
497
576
  --sds-drop-shadow-none: none;
498
- --sds-font-color: black;
499
577
  --sds-font-font-family-body: "Inter", sans-serif;
578
+ --sds-font-font-family-body-narrow: "Inter", sans-serif;
500
579
  --sds-font-font-family-caps: "Inter", sans-serif;
580
+ --sds-font-font-family-caps-narrow: "Inter", sans-serif;
501
581
  --sds-font-font-family-code: "IBM Plex Mono", monospace;
582
+ --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace;
502
583
  --sds-font-font-family-header: "Inter", sans-serif;
584
+ --sds-font-font-family-header-narrow: "Inter", sans-serif;
503
585
  --sds-font-font-family-tabular: "Inter", sans-serif;
586
+ --sds-font-font-family-tabular-narrow: "Inter", sans-serif;
504
587
  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
588
+ --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
505
589
  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
590
+ --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px;
506
591
  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
592
+ --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
507
593
  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
594
+ --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px;
508
595
  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
596
+ --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
509
597
  --sds-font-body-xxs-400-letter-spacing: 0.1px;
598
+ --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px;
510
599
  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
600
+ --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
511
601
  --sds-font-body-xxs-600-letter-spacing: 0.1px;
602
+ --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px;
512
603
  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
604
+ --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
513
605
  --sds-font-body-xs-400-letter-spacing: 0.08px;
606
+ --sds-font-body-xs-400-letter-spacing-narrow: 0.08px;
514
607
  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
608
+ --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
515
609
  --sds-font-body-xs-600-letter-spacing: 0.08px;
610
+ --sds-font-body-xs-600-letter-spacing-narrow: 0.08px;
516
611
  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
612
+ --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
517
613
  --sds-font-body-s-400-letter-spacing: 0.08px;
614
+ --sds-font-body-s-400-letter-spacing-narrow: 0.08px;
518
615
  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
616
+ --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
519
617
  --sds-font-body-s-600-letter-spacing: 0.08px;
618
+ --sds-font-body-s-600-letter-spacing-narrow: 0.08px;
520
619
  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
620
+ --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif;
521
621
  --sds-font-body-m-400-letter-spacing: 0px;
622
+ --sds-font-body-m-400-letter-spacing-narrow: 0px;
522
623
  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
624
+ --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif;
523
625
  --sds-font-body-m-600-letter-spacing: 0px;
626
+ --sds-font-body-m-600-letter-spacing-narrow: 0px;
524
627
  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
628
+ --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif;
525
629
  --sds-font-body-l-400-letter-spacing: 0px;
630
+ --sds-font-body-l-400-letter-spacing-narrow: 0px;
526
631
  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
632
+ --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif;
527
633
  --sds-font-body-l-600-letter-spacing: 0px;
634
+ --sds-font-body-l-600-letter-spacing-narrow: 0px;
528
635
  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
636
+ --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
529
637
  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
530
- --sds-font-caps-xxxxs-600-text-transform: uppercase;
638
+ --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px;
639
+ --sds-font-caps-xxxxs-600-text-transform: uppercase;
640
+ --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase;
531
641
  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
642
+ --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
532
643
  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
533
- --sds-font-caps-xxxs-600-text-transform: uppercase;
644
+ --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px;
645
+ --sds-font-caps-xxxs-600-text-transform: uppercase;
646
+ --sds-font-caps-xxxs-600-text-transform-narrow: uppercase;
534
647
  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
648
+ --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
535
649
  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
536
- --sds-font-caps-xxs-600-text-transform: uppercase;
650
+ --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px;
651
+ --sds-font-caps-xxs-600-text-transform: uppercase;
652
+ --sds-font-caps-xxs-600-text-transform-narrow: uppercase;
537
653
  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
654
+ --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
538
655
  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
656
+ --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px;
539
657
  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
658
+ --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
540
659
  --sds-font-header-xxs-600-letter-spacing: 0.1px;
660
+ --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px;
541
661
  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
662
+ --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif;
542
663
  --sds-font-header-xs-600-letter-spacing: 0.08px;
664
+ --sds-font-header-xs-600-letter-spacing-narrow: 0.08px;
543
665
  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
666
+ --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif;
544
667
  --sds-font-header-s-600-letter-spacing: 0.08px;
668
+ --sds-font-header-s-600-letter-spacing-narrow: 0.08px;
545
669
  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
670
+ --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif;
546
671
  --sds-font-header-m-600-letter-spacing: 0px;
672
+ --sds-font-header-m-600-letter-spacing-narrow: 0.08px;
547
673
  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
674
+ --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif;
548
675
  --sds-font-header-l-600-letter-spacing: 0px;
676
+ --sds-font-header-l-600-letter-spacing-narrow: 0px;
549
677
  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
678
+ --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif;
550
679
  --sds-font-header-xl-600-letter-spacing: 0px;
680
+ --sds-font-header-xl-600-letter-spacing-narrow: 0px;
551
681
  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
682
+ --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif;
552
683
  --sds-font-header-xxl-600-letter-spacing: 0px;
684
+ --sds-font-header-xxl-600-letter-spacing-narrow: 0px;
553
685
  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
686
+ --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
554
687
  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
688
+ --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums;
555
689
  --sds-font-tabular-xs-400-letter-spacing: 0px;
690
+ --sds-font-tabular-xs-400-letter-spacing-narrow: 0px;
556
691
  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
692
+ --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
557
693
  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
694
+ --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums;
558
695
  --sds-font-tabular-xs-600-letter-spacing: 0px;
696
+ --sds-font-tabular-xs-600-letter-spacing-narrow: 0px;
559
697
  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
698
+ --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
560
699
  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
700
+ --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums;
561
701
  --sds-font-tabular-s-400-letter-spacing: 0px;
702
+ --sds-font-tabular-s-400-letter-spacing-narrow: 0px;
562
703
  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
704
+ --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
563
705
  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
706
+ --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums;
564
707
  --sds-font-tabular-s-600-letter-spacing: 0px;
708
+ --sds-font-tabular-s-600-letter-spacing-narrow: 0px;
565
709
  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
710
+ --sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace;
566
711
  --sds-font-code-xs-400-letter-spacing: 0px;
712
+ --sds-font-code-xs-400-letter-spacing-narrow: 0px;
567
713
  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
714
+ --sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace;
568
715
  --sds-font-code-xs-600-letter-spacing: 0px;
716
+ --sds-font-code-xs-600-letter-spacing-narrow: 0px;
569
717
  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
718
+ --sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace;
570
719
  --sds-font-code-s-400-letter-spacing: 0px;
720
+ --sds-font-code-s-400-letter-spacing-narrow: 0px;
571
721
  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
722
+ --sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace;
572
723
  --sds-font-code-s-600-letter-spacing: 0px;
724
+ --sds-font-code-s-600-letter-spacing-narrow: 0px;
573
725
  --sds-icon-size-input-height: 16px;
574
726
  --sds-icon-size-input-width: 16px;
575
727
  --sds-icon-size-xs-height: 12px;
@@ -591,3 +743,4 @@
591
743
  --sds-space-xxl: 40px;
592
744
  }
593
745
  }
746
+
package/dist/variables.scss CHANGED
@@ -64,6 +64,9 @@ $sds-border-positive-extra-thick: 4px solid #105b2b;
64
64
  $sds-border-positive-extra-thick-dark: 4px solid #bcecc5;
65
65
  $sds-border-positive-thick: 2px solid #105b2b;
66
66
  $sds-border-positive-thick-dark: 2px solid #bcecc5;
67
+ $sds-breakpoint-sm: 0px;
68
+ $sds-breakpoint-md: 512px;
69
+ $sds-breakpoint-lg: 1024px;
67
70
  $sds-color-primitive-blue-100: #e2eeff;
68
71
  $sds-color-primitive-blue-100-dark: #002573;
69
72
  $sds-color-primitive-blue-200: #cce1ff;
@@ -379,206 +382,177 @@ $sds-color-semantic-positive-surface-secondary-dark: #85d898;
379
382
  $sds-color-semantic-positive-text: #105b2b;
380
383
  $sds-color-semantic-positive-text-dark: #bcecc5;
381
384
  $sds-corner-l: 20px;
382
- $sds-corner-l-dark: 20px;
383
385
  $sds-corner-m: 4px;
384
- $sds-corner-m-dark: 4px;
385
386
  $sds-corner-s: 2px;
386
- $sds-corner-s-dark: 2px;
387
387
  $sds-corner-none: 0px;
388
- $sds-corner-none-dark: 0px;
389
388
  $sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
390
- $sds-drop-shadow-l-dark: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
391
389
  $sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
392
- $sds-drop-shadow-m-dark: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
393
390
  $sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
394
- $sds-drop-shadow-s-dark: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
395
391
  $sds-drop-shadow-none: none;
396
- $sds-drop-shadow-none-dark: none;
397
- $sds-font-color: black;
398
- $sds-font-color-dark: black;
399
392
  $sds-font-font-family-body: "Inter", sans-serif;
400
- $sds-font-font-family-body-dark: "Inter", sans-serif;
393
+ $sds-font-font-family-body-narrow: "Inter", sans-serif;
401
394
  $sds-font-font-family-caps: "Inter", sans-serif;
402
- $sds-font-font-family-caps-dark: "Inter", sans-serif;
395
+ $sds-font-font-family-caps-narrow: "Inter", sans-serif;
403
396
  $sds-font-font-family-code: "IBM Plex Mono", monospace;
404
- $sds-font-font-family-code-dark: "IBM Plex Mono", monospace;
397
+ $sds-font-font-family-code-narrow: "IBM Plex Mono", monospace;
405
398
  $sds-font-font-family-header: "Inter", sans-serif;
406
- $sds-font-font-family-header-dark: "Inter", sans-serif;
399
+ $sds-font-font-family-header-narrow: "Inter", sans-serif;
407
400
  $sds-font-font-family-tabular: "Inter", sans-serif;
408
- $sds-font-font-family-tabular-dark: "Inter", sans-serif;
401
+ $sds-font-font-family-tabular-narrow: "Inter", sans-serif;
409
402
  $sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
410
- $sds-font-body-xxxs-400-font-dark: 400 11px/16px "Inter", sans-serif;
403
+ $sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
411
404
  $sds-font-body-xxxs-400-letter-spacing: 0.1px;
412
- $sds-font-body-xxxs-400-letter-spacing-dark: 0.1px;
405
+ $sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px;
413
406
  $sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
414
- $sds-font-body-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif;
407
+ $sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
415
408
  $sds-font-body-xxxs-600-letter-spacing: 0.1px;
416
- $sds-font-body-xxxs-600-letter-spacing-dark: 0.1px;
409
+ $sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px;
417
410
  $sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
418
- $sds-font-body-xxs-400-font-dark: 400 12px/18px "Inter", sans-serif;
411
+ $sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
419
412
  $sds-font-body-xxs-400-letter-spacing: 0.1px;
420
- $sds-font-body-xxs-400-letter-spacing-dark: 0.1px;
413
+ $sds-font-body-xxs-400-letter-spacing-narrow: 0.1px;
421
414
  $sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
422
- $sds-font-body-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif;
415
+ $sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
423
416
  $sds-font-body-xxs-600-letter-spacing: 0.1px;
424
- $sds-font-body-xxs-600-letter-spacing-dark: 0.1px;
417
+ $sds-font-body-xxs-600-letter-spacing-narrow: 0.1px;
425
418
  $sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
426
- $sds-font-body-xs-400-font-dark: 400 13px/20px "Inter", sans-serif;
419
+ $sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
427
420
  $sds-font-body-xs-400-letter-spacing: 0.08px;
428
- $sds-font-body-xs-400-letter-spacing-dark: 0.08px;
421
+ $sds-font-body-xs-400-letter-spacing-narrow: 0.08px;
429
422
  $sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
430
- $sds-font-body-xs-600-font-dark: 600 13px/20px "Inter", sans-serif;
423
+ $sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
431
424
  $sds-font-body-xs-600-letter-spacing: 0.08px;
432
- $sds-font-body-xs-600-letter-spacing-dark: 0.08px;
425
+ $sds-font-body-xs-600-letter-spacing-narrow: 0.08px;
433
426
  $sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
434
- $sds-font-body-s-400-font-dark: 400 14px/24px "Inter", sans-serif;
427
+ $sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
435
428
  $sds-font-body-s-400-letter-spacing: 0.08px;
436
- $sds-font-body-s-400-letter-spacing-dark: 0.08px;
429
+ $sds-font-body-s-400-letter-spacing-narrow: 0.08px;
437
430
  $sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
438
- $sds-font-body-s-600-font-dark: 600 14px/24px "Inter", sans-serif;
431
+ $sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
439
432
  $sds-font-body-s-600-letter-spacing: 0.08px;
440
- $sds-font-body-s-600-letter-spacing-dark: 0.08px;
433
+ $sds-font-body-s-600-letter-spacing-narrow: 0.08px;
441
434
  $sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
442
- $sds-font-body-m-400-font-dark: 400 16px/26px "Inter", sans-serif;
435
+ $sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif;
443
436
  $sds-font-body-m-400-letter-spacing: 0px;
444
- $sds-font-body-m-400-letter-spacing-dark: 0px;
437
+ $sds-font-body-m-400-letter-spacing-narrow: 0px;
445
438
  $sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
446
- $sds-font-body-m-600-font-dark: 600 16px/26px "Inter", sans-serif;
439
+ $sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif;
447
440
  $sds-font-body-m-600-letter-spacing: 0px;
448
- $sds-font-body-m-600-letter-spacing-dark: 0px;
441
+ $sds-font-body-m-600-letter-spacing-narrow: 0px;
449
442
  $sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
450
- $sds-font-body-l-400-font-dark: 400 18px/28px "Inter", sans-serif;
443
+ $sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif;
451
444
  $sds-font-body-l-400-letter-spacing: 0px;
452
- $sds-font-body-l-400-letter-spacing-dark: 0px;
445
+ $sds-font-body-l-400-letter-spacing-narrow: 0px;
453
446
  $sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
454
- $sds-font-body-l-600-font-dark: 600 18px/28px "Inter", sans-serif;
447
+ $sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif;
455
448
  $sds-font-body-l-600-letter-spacing: 0px;
456
- $sds-font-body-l-600-letter-spacing-dark: 0px;
449
+ $sds-font-body-l-600-letter-spacing-narrow: 0px;
457
450
  $sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
458
- $sds-font-caps-xxxxs-600-font-dark: 600 10px/14px "Inter", sans-serif;
451
+ $sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
459
452
  $sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
460
- $sds-font-caps-xxxxs-600-letter-spacing-dark: 0.5px;
461
- $sds-font-caps-xxxxs-600-text-transform: uppercase;
462
- $sds-font-caps-xxxxs-600-text-transform-dark: uppercase;
453
+ $sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px;
454
+ $sds-font-caps-xxxxs-600-text-transform: uppercase;
455
+ $sds-font-caps-xxxxs-600-text-transform-narrow: uppercase;
463
456
  $sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
464
- $sds-font-caps-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif;
457
+ $sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
465
458
  $sds-font-caps-xxxs-600-letter-spacing: 0.5px;
466
- $sds-font-caps-xxxs-600-letter-spacing-dark: 0.5px;
467
- $sds-font-caps-xxxs-600-text-transform: uppercase;
468
- $sds-font-caps-xxxs-600-text-transform-dark: uppercase;
459
+ $sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px;
460
+ $sds-font-caps-xxxs-600-text-transform: uppercase;
461
+ $sds-font-caps-xxxs-600-text-transform-narrow: uppercase;
469
462
  $sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
470
- $sds-font-caps-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif;
463
+ $sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
471
464
  $sds-font-caps-xxs-600-letter-spacing: 0.5px;
472
- $sds-font-caps-xxs-600-letter-spacing-dark: 0.5px;
473
- $sds-font-caps-xxs-600-text-transform: uppercase;
474
- $sds-font-caps-xxs-600-text-transform-dark: uppercase;
465
+ $sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px;
466
+ $sds-font-caps-xxs-600-text-transform: uppercase;
467
+ $sds-font-caps-xxs-600-text-transform-narrow: uppercase;
475
468
  $sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
476
- $sds-font-header-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif;
469
+ $sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
477
470
  $sds-font-header-xxxs-600-letter-spacing: 0.1px;
478
- $sds-font-header-xxxs-600-letter-spacing-dark: 0.1px;
471
+ $sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px;
479
472
  $sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
480
- $sds-font-header-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif;
473
+ $sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
481
474
  $sds-font-header-xxs-600-letter-spacing: 0.1px;
482
- $sds-font-header-xxs-600-letter-spacing-dark: 0.1px;
475
+ $sds-font-header-xxs-600-letter-spacing-narrow: 0.1px;
483
476
  $sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
484
- $sds-font-header-xs-600-font-dark: 600 13px/18px "Inter", sans-serif;
477
+ $sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif;
485
478
  $sds-font-header-xs-600-letter-spacing: 0.08px;
486
- $sds-font-header-xs-600-letter-spacing-dark: 0.08px;
479
+ $sds-font-header-xs-600-letter-spacing-narrow: 0.08px;
487
480
  $sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
488
- $sds-font-header-s-600-font-dark: 600 14px/20px "Inter", sans-serif;
481
+ $sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif;
489
482
  $sds-font-header-s-600-letter-spacing: 0.08px;
490
- $sds-font-header-s-600-letter-spacing-dark: 0.08px;
483
+ $sds-font-header-s-600-letter-spacing-narrow: 0.08px;
491
484
  $sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
492
- $sds-font-header-m-600-font-dark: 600 16px/22px "Inter", sans-serif;
485
+ $sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif;
493
486
  $sds-font-header-m-600-letter-spacing: 0px;
494
- $sds-font-header-m-600-letter-spacing-dark: 0px;
487
+ $sds-font-header-m-600-letter-spacing-narrow: 0.08px;
495
488
  $sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
496
- $sds-font-header-l-600-font-dark: 600 18px/24px "Inter", sans-serif;
489
+ $sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif;
497
490
  $sds-font-header-l-600-letter-spacing: 0px;
498
- $sds-font-header-l-600-letter-spacing-dark: 0px;
491
+ $sds-font-header-l-600-letter-spacing-narrow: 0px;
499
492
  $sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
500
- $sds-font-header-xl-600-font-dark: 600 22px/30px "Inter", sans-serif;
493
+ $sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif;
501
494
  $sds-font-header-xl-600-letter-spacing: 0px;
502
- $sds-font-header-xl-600-letter-spacing-dark: 0px;
495
+ $sds-font-header-xl-600-letter-spacing-narrow: 0px;
503
496
  $sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
504
- $sds-font-header-xxl-600-font-dark: 600 26px/34px "Inter", sans-serif;
497
+ $sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif;
505
498
  $sds-font-header-xxl-600-letter-spacing: 0px;
506
- $sds-font-header-xxl-600-letter-spacing-dark: 0px;
499
+ $sds-font-header-xxl-600-letter-spacing-narrow: 0px;
507
500
  $sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
508
- $sds-font-tabular-xs-400-font-dark: 400 13px/20px "Inter", sans-serif;
501
+ $sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
509
502
  $sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
510
- $sds-font-tabular-xs-400-font-variant-numeric-dark: tabular-nums;
503
+ $sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums;
511
504
  $sds-font-tabular-xs-400-letter-spacing: 0px;
512
- $sds-font-tabular-xs-400-letter-spacing-dark: 0px;
505
+ $sds-font-tabular-xs-400-letter-spacing-narrow: 0px;
513
506
  $sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
514
- $sds-font-tabular-xs-600-font-dark: 600 13px/20px "Inter", sans-serif;
507
+ $sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
515
508
  $sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
516
- $sds-font-tabular-xs-600-font-variant-numeric-dark: tabular-nums;
509
+ $sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums;
517
510
  $sds-font-tabular-xs-600-letter-spacing: 0px;
518
- $sds-font-tabular-xs-600-letter-spacing-dark: 0px;
511
+ $sds-font-tabular-xs-600-letter-spacing-narrow: 0px;
519
512
  $sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
520
- $sds-font-tabular-s-400-font-dark: 400 14px/24px "Inter", sans-serif;
513
+ $sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
521
514
  $sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
522
- $sds-font-tabular-s-400-font-variant-numeric-dark: tabular-nums;
515
+ $sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums;
523
516
  $sds-font-tabular-s-400-letter-spacing: 0px;
524
- $sds-font-tabular-s-400-letter-spacing-dark: 0px;
517
+ $sds-font-tabular-s-400-letter-spacing-narrow: 0px;
525
518
  $sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
526
- $sds-font-tabular-s-600-font-dark: 600 14px/24px "Inter", sans-serif;
519
+ $sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
527
520
  $sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
528
- $sds-font-tabular-s-600-font-variant-numeric-dark: tabular-nums;
521
+ $sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums;
529
522
  $sds-font-tabular-s-600-letter-spacing: 0px;
530
- $sds-font-tabular-s-600-letter-spacing-dark: 0px;
523
+ $sds-font-tabular-s-600-letter-spacing-narrow: 0px;
531
524
  $sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
532
- $sds-font-code-xs-400-font-dark: 400 13px/20px "IBM Plex Mono", monospace;
525
+ $sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace;
533
526
  $sds-font-code-xs-400-letter-spacing: 0px;
534
- $sds-font-code-xs-400-letter-spacing-dark: 0px;
527
+ $sds-font-code-xs-400-letter-spacing-narrow: 0px;
535
528
  $sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
536
- $sds-font-code-xs-600-font-dark: 600 13px/20px "IBM Plex Mono", monospace;
529
+ $sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace;
537
530
  $sds-font-code-xs-600-letter-spacing: 0px;
538
- $sds-font-code-xs-600-letter-spacing-dark: 0px;
531
+ $sds-font-code-xs-600-letter-spacing-narrow: 0px;
539
532
  $sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
540
- $sds-font-code-s-400-font-dark: 400 14px/24px "IBM Plex Mono", monospace;
533
+ $sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace;
541
534
  $sds-font-code-s-400-letter-spacing: 0px;
542
- $sds-font-code-s-400-letter-spacing-dark: 0px;
535
+ $sds-font-code-s-400-letter-spacing-narrow: 0px;
543
536
  $sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
544
- $sds-font-code-s-600-font-dark: 600 14px/24px "IBM Plex Mono", monospace;
537
+ $sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace;
545
538
  $sds-font-code-s-600-letter-spacing: 0px;
546
- $sds-font-code-s-600-letter-spacing-dark: 0px;
539
+ $sds-font-code-s-600-letter-spacing-narrow: 0px;
547
540
  $sds-icon-size-input-height: 16px;
548
- $sds-icon-size-input-height-dark: 16px;
549
541
  $sds-icon-size-input-width: 16px;
550
- $sds-icon-size-input-width-dark: 16px;
551
542
  $sds-icon-size-xs-height: 12px;
552
- $sds-icon-size-xs-height-dark: 12px;
553
543
  $sds-icon-size-xs-width: 12px;
554
- $sds-icon-size-xs-width-dark: 12px;
555
544
  $sds-icon-size-s-height: 16px;
556
- $sds-icon-size-s-height-dark: 16px;
557
545
  $sds-icon-size-s-width: 16px;
558
- $sds-icon-size-s-width-dark: 16px;
559
546
  $sds-icon-size-l-height: 24px;
560
- $sds-icon-size-l-height-dark: 24px;
561
547
  $sds-icon-size-l-width: 24px;
562
- $sds-icon-size-l-width-dark: 24px;
563
548
  $sds-icon-size-xl-height: 32px;
564
- $sds-icon-size-xl-height-dark: 32px;
565
549
  $sds-icon-size-xl-width: 32px;
566
- $sds-icon-size-xl-width-dark: 32px;
567
550
  $sds-space-default: 12px;
568
- $sds-space-default-dark: 12px;
569
551
  $sds-space-xxxs: 2px;
570
- $sds-space-xxxs-dark: 2px;
571
552
  $sds-space-xxs: 4px;
572
- $sds-space-xxs-dark: 4px;
573
553
  $sds-space-xs: 6px;
574
- $sds-space-xs-dark: 6px;
575
554
  $sds-space-s: 8px;
576
- $sds-space-s-dark: 8px;
577
555
  $sds-space-m: 12px;
578
- $sds-space-m-dark: 12px;
579
556
  $sds-space-l: 16px;
580
- $sds-space-l-dark: 16px;
581
557
  $sds-space-xl: 24px;
582
- $sds-space-xl-dark: 24px;
583
- $sds-space-xxl: 40px;
584
- $sds-space-xxl-dark: 40px;
558
+ $sds-space-xxl: 40px;