nve-designsystem 2.16.0 → 2.16.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 (10) hide show
  1. package/css/nve.css +268 -116
  2. package/css/nve_dark.css +16 -83
  3. package/css/rme.css +268 -116
  4. package/css/rme_dark.css +16 -83
  5. package/css/varsom.css +268 -116
  6. package/css/varsom_dark.css +16 -83
  7. package/custom-elements.json +479 -479
  8. package/package.json +2 -1
  9. package/vscode.css-custom-data.json +4 -4
  10. package/vscode.html-custom-data.json +49 -49
package/css/nve.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- @import './global.css';
5
+ @import './global.css';
6
6
  :root {
7
7
  --brand-100: #ff2b4e;
8
8
  --brand-150: #ff153b;
@@ -124,94 +124,27 @@
124
124
  --varsom-blue-999: #00131c;
125
125
  --varsom-blue-000: #eff8fc;
126
126
  --varsom-blue-050: #c8eaf9;
127
- --opacity-disabled: 38%;
128
- --dimension-025x: 0.0625rem;
129
- --dimension-05x: 0.125rem;
130
- --dimension-1x: 0.25rem;
131
- --dimension-2x: 0.5rem;
132
- --dimension-3x: 0.75rem;
133
- --dimension-3-5x: 0.875rem;
134
- --dimension-4x: 1rem;
135
- --dimension-4-5x: 1.125rem;
136
- --dimension-5x: 1.25rem;
137
- --dimension-6x: 1.5rem;
138
- --dimension-7x: 1.75rem;
139
- --dimension-8x: 2rem;
140
- --dimension-9x: 2.25rem;
141
- --dimension-10x: 2.5rem;
142
- --dimension-11x: 2.75rem;
143
- --dimension-12x: 3rem;
144
- --dimension-13x: 3.25rem;
145
- --dimension-14x: 3.5rem;
146
- --dimension-15x: 3.75rem;
147
- --dimension-16x: 4rem;
148
- --dimension-17x: 4.25rem;
149
- --dimension-18x: 4.5rem;
150
- --dimension-19x: 4.75rem;
151
- --dimension-20x: 5rem;
152
- --dimension-21x: 5.25rem;
153
- --dimension-22x: 5.5rem;
154
- --dimension-23x: 5.75rem;
155
- --dimension-24x: 6rem;
156
- --dimension-25x: 6.25rem;
157
- --dimension-26x: 6.5rem;
158
- --dimension-27x: 6.75rem;
159
- --dimension-28x: 7rem;
160
- --dimension-29x: 7.25rem;
161
- --dimension-30x: 7.5rem;
127
+ --opacity-disabled: 0.38;
162
128
  --font-families-source-sans-pro: 'Source Sans Pro';
163
- --line-heights-zero: 115%;
164
- --line-heights-1: 120%;
165
- --line-heights-2: 125%;
166
- --line-heights-3: 130%;
167
- --line-heights-4: 140%;
168
- --line-heights-5: 150%;
169
- --line-heights-6: 110%;
170
- --letter-spacing-zero: 0%;
171
- --letter-spacing-1: 5%;
172
- --paragraph-spacing-zero: 0;
173
- --paragraph-spacing-1: 12;
174
- --paragraph-spacing-2: 16;
175
- --paragraph-spacing-3: 24;
176
- --paragraph-spacing-4: 32;
177
- --paragraph-spacing-5: 40;
129
+ --line-heights-0: 1.15;
130
+ --line-heights-1: 1.20;
131
+ --line-heights-2: 1.25;
132
+ --line-heights-3: 1.30;
133
+ --line-heights-4: 1.40;
134
+ --line-heights-5: 1.50;
135
+ --line-heights-6: 1.10;
178
136
  --text-case-capitalize: capitalize;
179
137
  --text-case-none: none;
180
138
  --text-case-uppercase: uppercase;
181
139
  --text-decoration-none: none;
182
140
  --text-decoration-underline: underline;
183
- --paragraph-indent-zero: 0px;
184
- --content-margin-top-bottom-mobile: 24px;
185
- --content-margin-top-bottom-desktop: 40px;
186
- --content-margin-top-bottom-desktop-small: 32px;
187
- --content-margin-top-bottom-desktop-large: 40px;
188
- --content-margin-left-right-mobile: 24px;
189
- --content-margin-left-right-desktop-small: 50px;
190
- --content-margin-left-right-desktop: 220px;
191
- --content-margin-left-right-desktop-large: 620px;
192
- --border-radius-none: 0px;
193
- --border-radius-small: 4px;
194
- --border-radius-large: 6px;
195
- --border-radius-circle: 50px;
196
- --border-radius-pill: 9999px;
197
- --border-width-none: 0px;
198
- --border-width-default: 1px;
199
- --border-width-strong: 2px;
200
141
  --font-weight-regular: 400;
201
142
  --font-weight-semibold: 600;
202
- --none: 0px 0px 0px 0px rgba(0,0,0,0);
203
- --soft: -59px 104px 33px 0px rgba(0,0,0,0.00), -38px 67px 31px 0px rgba(0,0,0,0.00), -21px 37px 26px 0px rgba(0,0,0,0.01), -9px 17px 19px 0px rgba(0,0,0,0.02), -2px 4px 11px 0px rgba(0,0,0,0.03);
204
- --hard: -45px 80px 26px 0px rgba(0,0,0,0.00), -29px 51px 23px 0px rgba(0,0,0,0.01), -16px 29px 20px 0px rgba(0,0,0,0.02), -7px 13px 15px 0px rgba(0,0,0,0.03), -2px 3px 8px 0px rgba(0,0,0,0.04);
205
- --header: 0px 4px 032px 0px rgba(0,0,0,0.02);
206
- --dropdown: 0px 54px 15px 0px rgba(0,0,0,0.00), 0px 35px 14px 0px rgba(0,0,0,0.00), 0px 19px 12px 0px rgba(0,0,0,0.02), 0px 9px 9px 0px rgba(0,0,0,0.03), 0px 2px 5px 0px rgba(0,0,0,0.03);
207
- --content-area-mobile: 366px;
208
- --content-area-desktop-small: 700px;
209
- --content-area-desktop: 1000px;
210
- --content-area-desktop-large: 1200px;
211
- --device-width-mobile: 390px;
212
- --device-width-desktop-small: 800px;
213
- --device-width-desktop: 1440px;
214
- --device-width-desktop-large: 2440px;
143
+ --none: 0 0 0 0 rgba(0,0,0,0);
144
+ --soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
145
+ --hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
146
+ --header: 0 4px 032px 0 rgba(0,0,0,0.02);
147
+ --dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
215
148
  --teal-100: #e2f3f9;
216
149
  --teal-150: #d3edf6;
217
150
  --teal-200: #c4e7f3;
@@ -342,7 +275,7 @@
342
275
  --feedback-background-default-error: var(--red-050);
343
276
  --feedback-background-default-warning: var(--yellow-200);
344
277
  --feedback-background-default-success: var(--green-150);
345
- --feedback-background-default-neutral: var(--neutralgrey-150);
278
+ --feedback-background-default-neutral: var(--neutralgrey-150); /** For neutral messages */
346
279
  --feedback-background-subtle-info: var(--blue-000);
347
280
  --feedback-background-subtle-error: var(--red-000);
348
281
  --feedback-background-subtle-warning: var(--yellow-100);
@@ -430,7 +363,50 @@
430
363
  --supplemental-emphasized-red-foreground: var(--grey-999);
431
364
  --supplemental-emphasized-blue-background: var(--blue-400);
432
365
  --supplemental-emphasized-blue-foreground: var(--grey-999);
433
- --spacing-none: 0;
366
+ --spacing-none: 0;
367
+ --dimension-025x: 0.0625rem; /** 1px */
368
+ --dimension-05x: 0.125rem; /** 2px */
369
+ --dimension-1x: 0.25rem; /** 4px */
370
+ --dimension-2x: 0.5rem; /** 8px */
371
+ --dimension-3x: 0.75rem; /** 12px */
372
+ --dimension-3-5x: 0.875rem; /** 14px */
373
+ --dimension-4x: 1rem; /** 16px */
374
+ --dimension-4-5x: 1.125rem; /** 18px */
375
+ --dimension-5x: 1.25rem; /** 20px */
376
+ --dimension-6x: 1.5rem; /** 24px */
377
+ --dimension-7x: 1.75rem; /** 28px */
378
+ --dimension-8x: 2rem; /** 32px */
379
+ --dimension-9x: 2.25rem; /** 36px */
380
+ --dimension-10x: 2.5rem; /** 40px */
381
+ --dimension-11x: 2.75rem; /** 44px */
382
+ --dimension-12x: 3rem; /** 48px */
383
+ --dimension-13x: 3.25rem; /** 52px */
384
+ --dimension-14x: 3.5rem; /** 56px */
385
+ --dimension-15x: 3.75rem; /** 60px */
386
+ --dimension-16x: 4rem; /** 64px */
387
+ --dimension-17x: 4.25rem; /** 68px */
388
+ --dimension-18x: 4.5rem; /** 72px */
389
+ --dimension-19x: 4.75rem; /** 76px */
390
+ --dimension-20x: 5rem; /** 80px */
391
+ --dimension-21x: 5.25rem; /** 84px */
392
+ --dimension-22x: 5.5rem; /** 88px */
393
+ --dimension-23x: 5.75rem; /** 92px */
394
+ --dimension-24x: 6rem; /** 96px */
395
+ --dimension-25x: 6.25rem; /** 100px */
396
+ --dimension-26x: 6.5rem; /** 104px */
397
+ --dimension-27x: 6.75rem; /** 108px */
398
+ --dimension-28x: 7rem; /** 112px */
399
+ --dimension-29x: 7.25rem; /** 116px */
400
+ --dimension-30x: 7.5rem; /** 120px */
401
+ --letter-spacing-0: 0em;
402
+ --letter-spacing-1: 0.05em;
403
+ --paragraph-spacing-0: 0;
404
+ --paragraph-spacing-1: 12px;
405
+ --paragraph-spacing-2: 16px;
406
+ --paragraph-spacing-3: 24px;
407
+ --paragraph-spacing-4: 32px;
408
+ --paragraph-spacing-5: 40px;
409
+ --paragraph-indent-0: 0px;
434
410
  --content-margin-top-bottom-mobile: 24px;
435
411
  --content-margin-top-bottom-desktop: 40px;
436
412
  --content-margin-top-bottom-desktop-small: 32px;
@@ -439,6 +415,14 @@
439
415
  --content-margin-left-right-desktop-small: 50px;
440
416
  --content-margin-left-right-desktop: 220px;
441
417
  --content-margin-left-right-desktop-large: 620px;
418
+ --border-radius-none: 0px;
419
+ --border-radius-small: 4px;
420
+ --border-radius-large: 6px;
421
+ --border-radius-circle: 50px;
422
+ --border-radius-pill: 9999px;
423
+ --border-width-none: 0px;
424
+ --border-width-default: 1px;
425
+ --border-width-strong: 2px;
442
426
  --content-area-mobile: 366px;
443
427
  --content-area-desktop-small: 700px;
444
428
  --content-area-desktop: 1000px;
@@ -447,7 +431,7 @@
447
431
  --device-width-desktop-small: 800px;
448
432
  --device-width-desktop: 1440px;
449
433
  --device-width-desktop-large: 2440px;
450
- --header-x-large: var(--font-weight-semibold) var(--font-size-3xlarge)/var(--line-heights-zero) var(--font-families-source-sans-pro);
434
+ --header-x-large: var(--font-weight-semibold) var(--font-size-3xlarge)/var(--line-heights-0) var(--font-families-source-sans-pro);
451
435
  --header-large: var(--font-weight-semibold) var(--font-size-2xlarge)/var(--line-heights-1) var(--font-families-source-sans-pro);
452
436
  --header-medium: var(--font-weight-semibold) var(--font-size-xlarge)/var(--line-heights-2) var(--font-families-source-sans-pro);
453
437
  --header-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-heights-3) var(--font-families-source-sans-pro);
@@ -510,14 +494,14 @@
510
494
  --sizing-2x-large: var(--dimension-24x);
511
495
  --content-margin-top-bottom: var(--content-margin-top-bottom-desktop);
512
496
  --content-margin-left-right: var(--content-margin-left-right-desktop);
513
- --font-size-2xsmall: var(--dimension-3-5x);
514
- --font-size-xsmall: var(--dimension-4x);
515
- --font-size-small: var(--dimension-4-5x);
516
- --font-size-medium: var(--dimension-5x);
517
- --font-size-large: var(--dimension-6x);
518
- --font-size-xlarge: var(--dimension-8x);
519
- --font-size-2xlarge: var(--dimension-10x);
520
- --font-size-3xlarge: var(--dimension-12x);
497
+ --font-size-2xsmall: var(--dimension-3-5x); /** 12 px */
498
+ --font-size-xsmall: var(--dimension-4x); /** 14 px */
499
+ --font-size-small: var(--dimension-4-5x); /** 16 px */
500
+ --font-size-medium: var(--dimension-5x); /** 18 px */
501
+ --font-size-large: var(--dimension-6x); /** 20 px */
502
+ --font-size-xlarge: var(--dimension-8x); /** 24 px */
503
+ --font-size-2xlarge: var(--dimension-10x); /** 32 px */
504
+ --font-size-3xlarge: var(--dimension-12x); /** 40 px */
521
505
  --fixed-sizing-x-small: var(--dimension-5x);
522
506
  --fixed-sizing-small: var(--dimension-6x);
523
507
  --fixed-sizing-xx-small: var(--dimension-4x);
@@ -527,8 +511,55 @@
527
511
  --fixed-sizing-2x-large: var(--dimension-14x);
528
512
  --fixed-sizing-3x-large: var(--dimension-16x); }
529
513
  @media (min-width: 1400px) {
514
+ /**
515
+ * Do not edit directly, this file was auto-generated.
516
+ */
517
+
530
518
  :root {
531
519
  --spacing-none: 0;
520
+ --dimension-025x: 0.0625rem; /** 1px */
521
+ --dimension-05x: 0.125rem; /** 2px */
522
+ --dimension-1x: 0.25rem; /** 4px */
523
+ --dimension-2x: 0.5rem; /** 8px */
524
+ --dimension-3x: 0.75rem; /** 12px */
525
+ --dimension-3-5x: 0.875rem; /** 14px */
526
+ --dimension-4x: 1rem; /** 16px */
527
+ --dimension-4-5x: 1.125rem; /** 18px */
528
+ --dimension-5x: 1.25rem; /** 20px */
529
+ --dimension-6x: 1.5rem; /** 24px */
530
+ --dimension-7x: 1.75rem; /** 28px */
531
+ --dimension-8x: 2rem; /** 32px */
532
+ --dimension-9x: 2.25rem; /** 36px */
533
+ --dimension-10x: 2.5rem; /** 40px */
534
+ --dimension-11x: 2.75rem; /** 44px */
535
+ --dimension-12x: 3rem; /** 48px */
536
+ --dimension-13x: 3.25rem; /** 52px */
537
+ --dimension-14x: 3.5rem; /** 56px */
538
+ --dimension-15x: 3.75rem; /** 60px */
539
+ --dimension-16x: 4rem; /** 64px */
540
+ --dimension-17x: 4.25rem; /** 68px */
541
+ --dimension-18x: 4.5rem; /** 72px */
542
+ --dimension-19x: 4.75rem; /** 76px */
543
+ --dimension-20x: 5rem; /** 80px */
544
+ --dimension-21x: 5.25rem; /** 84px */
545
+ --dimension-22x: 5.5rem; /** 88px */
546
+ --dimension-23x: 5.75rem; /** 92px */
547
+ --dimension-24x: 6rem; /** 96px */
548
+ --dimension-25x: 6.25rem; /** 100px */
549
+ --dimension-26x: 6.5rem; /** 104px */
550
+ --dimension-27x: 6.75rem; /** 108px */
551
+ --dimension-28x: 7rem; /** 112px */
552
+ --dimension-29x: 7.25rem; /** 116px */
553
+ --dimension-30x: 7.5rem; /** 120px */
554
+ --letter-spacing-0: 0em;
555
+ --letter-spacing-1: 0.05em;
556
+ --paragraph-spacing-0: 0;
557
+ --paragraph-spacing-1: 12px;
558
+ --paragraph-spacing-2: 16px;
559
+ --paragraph-spacing-3: 24px;
560
+ --paragraph-spacing-4: 32px;
561
+ --paragraph-spacing-5: 40px;
562
+ --paragraph-indent-0: 0px;
532
563
  --content-margin-top-bottom-mobile: 24px;
533
564
  --content-margin-top-bottom-desktop: 40px;
534
565
  --content-margin-top-bottom-desktop-small: 32px;
@@ -537,6 +568,14 @@
537
568
  --content-margin-left-right-desktop-small: 50px;
538
569
  --content-margin-left-right-desktop: 220px;
539
570
  --content-margin-left-right-desktop-large: 620px;
571
+ --border-radius-none: 0px;
572
+ --border-radius-small: 4px;
573
+ --border-radius-large: 6px;
574
+ --border-radius-circle: 50px;
575
+ --border-radius-pill: 9999px;
576
+ --border-width-none: 0px;
577
+ --border-width-default: 1px;
578
+ --border-width-strong: 2px;
540
579
  --content-area-mobile: 366px;
541
580
  --content-area-desktop-small: 700px;
542
581
  --content-area-desktop: 1000px;
@@ -568,19 +607,67 @@
568
607
  --sizing-2x-large: var(--dimension-24x);
569
608
  --content-margin-top-bottom: var(--content-margin-top-bottom-desktop-large);
570
609
  --content-margin-left-right: var(--content-margin-left-right-desktop-large);
571
- --font-size-2xsmall: var(--dimension-3-5x);
572
- --font-size-xsmall: var(--dimension-4x);
573
- --font-size-small: var(--dimension-4-5x);
574
- --font-size-medium: var(--dimension-5x);
575
- --font-size-large: var(--dimension-6x);
576
- --font-size-xlarge: var(--dimension-8x);
577
- --font-size-2xlarge: var(--dimension-10x);
578
- --font-size-3xlarge: var(--dimension-12x);
610
+ --font-size-2xsmall: var(--dimension-3-5x); /** 12 px */
611
+ --font-size-xsmall: var(--dimension-4x); /** 14 px */
612
+ --font-size-small: var(--dimension-4-5x); /** 16 px */
613
+ --font-size-medium: var(--dimension-5x); /** 18 px */
614
+ --font-size-large: var(--dimension-6x); /** 20 px */
615
+ --font-size-xlarge: var(--dimension-8x); /** 24 px */
616
+ --font-size-2xlarge: var(--dimension-10x); /** 32 px */
617
+ --font-size-3xlarge: var(--dimension-12x); /** 40 px */
579
618
  }
619
+
580
620
  }
581
621
  @media (max-width: 1200px) {
622
+ /**
623
+ * Do not edit directly, this file was auto-generated.
624
+ */
625
+
582
626
  :root {
583
627
  --spacing-none: 0;
628
+ --dimension-025x: 0.0625rem; /** 1px */
629
+ --dimension-05x: 0.125rem; /** 2px */
630
+ --dimension-1x: 0.25rem; /** 4px */
631
+ --dimension-2x: 0.5rem; /** 8px */
632
+ --dimension-3x: 0.75rem; /** 12px */
633
+ --dimension-3-5x: 0.875rem; /** 14px */
634
+ --dimension-4x: 1rem; /** 16px */
635
+ --dimension-4-5x: 1.125rem; /** 18px */
636
+ --dimension-5x: 1.25rem; /** 20px */
637
+ --dimension-6x: 1.5rem; /** 24px */
638
+ --dimension-7x: 1.75rem; /** 28px */
639
+ --dimension-8x: 2rem; /** 32px */
640
+ --dimension-9x: 2.25rem; /** 36px */
641
+ --dimension-10x: 2.5rem; /** 40px */
642
+ --dimension-11x: 2.75rem; /** 44px */
643
+ --dimension-12x: 3rem; /** 48px */
644
+ --dimension-13x: 3.25rem; /** 52px */
645
+ --dimension-14x: 3.5rem; /** 56px */
646
+ --dimension-15x: 3.75rem; /** 60px */
647
+ --dimension-16x: 4rem; /** 64px */
648
+ --dimension-17x: 4.25rem; /** 68px */
649
+ --dimension-18x: 4.5rem; /** 72px */
650
+ --dimension-19x: 4.75rem; /** 76px */
651
+ --dimension-20x: 5rem; /** 80px */
652
+ --dimension-21x: 5.25rem; /** 84px */
653
+ --dimension-22x: 5.5rem; /** 88px */
654
+ --dimension-23x: 5.75rem; /** 92px */
655
+ --dimension-24x: 6rem; /** 96px */
656
+ --dimension-25x: 6.25rem; /** 100px */
657
+ --dimension-26x: 6.5rem; /** 104px */
658
+ --dimension-27x: 6.75rem; /** 108px */
659
+ --dimension-28x: 7rem; /** 112px */
660
+ --dimension-29x: 7.25rem; /** 116px */
661
+ --dimension-30x: 7.5rem; /** 120px */
662
+ --letter-spacing-0: 0em;
663
+ --letter-spacing-1: 0.05em;
664
+ --paragraph-spacing-0: 0;
665
+ --paragraph-spacing-1: 12px;
666
+ --paragraph-spacing-2: 16px;
667
+ --paragraph-spacing-3: 24px;
668
+ --paragraph-spacing-4: 32px;
669
+ --paragraph-spacing-5: 40px;
670
+ --paragraph-indent-0: 0px;
584
671
  --content-margin-top-bottom-mobile: 24px;
585
672
  --content-margin-top-bottom-desktop: 40px;
586
673
  --content-margin-top-bottom-desktop-small: 32px;
@@ -589,6 +676,14 @@
589
676
  --content-margin-left-right-desktop-small: 50px;
590
677
  --content-margin-left-right-desktop: 220px;
591
678
  --content-margin-left-right-desktop-large: 620px;
679
+ --border-radius-none: 0px;
680
+ --border-radius-small: 4px;
681
+ --border-radius-large: 6px;
682
+ --border-radius-circle: 50px;
683
+ --border-radius-pill: 9999px;
684
+ --border-width-none: 0px;
685
+ --border-width-default: 1px;
686
+ --border-width-strong: 2px;
592
687
  --content-area-mobile: 366px;
593
688
  --content-area-desktop-small: 700px;
594
689
  --content-area-desktop: 1000px;
@@ -620,19 +715,67 @@
620
715
  --sizing-2x-large: var(--dimension-23x);
621
716
  --content-margin-top-bottom: var(--content-margin-top-bottom-desktop-small);
622
717
  --content-margin-left-right: var(--content-margin-left-right-desktop-small);
623
- --font-size-2xsmall: var(--dimension-3x);
624
- --font-size-xsmall: var(--dimension-3-5x);
625
- --font-size-small: var(--dimension-4x);
626
- --font-size-medium: var(--dimension-4-5x);
627
- --font-size-large: var(--dimension-5x);
628
- --font-size-xlarge: var(--dimension-7x);
629
- --font-size-2xlarge: var(--dimension-9x);
630
- --font-size-3xlarge: var(--dimension-11x);
718
+ --font-size-2xsmall: var(--dimension-3x); /** 12 px */
719
+ --font-size-xsmall: var(--dimension-3-5x); /** 14 px */
720
+ --font-size-small: var(--dimension-4x); /** 16 px */
721
+ --font-size-medium: var(--dimension-4-5x); /** 18 px */
722
+ --font-size-large: var(--dimension-5x); /** 20 px */
723
+ --font-size-xlarge: var(--dimension-7x); /** 24 px */
724
+ --font-size-2xlarge: var(--dimension-9x); /** 32 px */
725
+ --font-size-3xlarge: var(--dimension-11x); /** 40 px */
631
726
  }
727
+
632
728
  }
633
729
  @media (max-width: 600px) {
730
+ /**
731
+ * Do not edit directly, this file was auto-generated.
732
+ */
733
+
634
734
  :root {
635
735
  --spacing-none: 0;
736
+ --dimension-025x: 0.0625rem; /** 1px */
737
+ --dimension-05x: 0.125rem; /** 2px */
738
+ --dimension-1x: 0.25rem; /** 4px */
739
+ --dimension-2x: 0.5rem; /** 8px */
740
+ --dimension-3x: 0.75rem; /** 12px */
741
+ --dimension-3-5x: 0.875rem; /** 14px */
742
+ --dimension-4x: 1rem; /** 16px */
743
+ --dimension-4-5x: 1.125rem; /** 18px */
744
+ --dimension-5x: 1.25rem; /** 20px */
745
+ --dimension-6x: 1.5rem; /** 24px */
746
+ --dimension-7x: 1.75rem; /** 28px */
747
+ --dimension-8x: 2rem; /** 32px */
748
+ --dimension-9x: 2.25rem; /** 36px */
749
+ --dimension-10x: 2.5rem; /** 40px */
750
+ --dimension-11x: 2.75rem; /** 44px */
751
+ --dimension-12x: 3rem; /** 48px */
752
+ --dimension-13x: 3.25rem; /** 52px */
753
+ --dimension-14x: 3.5rem; /** 56px */
754
+ --dimension-15x: 3.75rem; /** 60px */
755
+ --dimension-16x: 4rem; /** 64px */
756
+ --dimension-17x: 4.25rem; /** 68px */
757
+ --dimension-18x: 4.5rem; /** 72px */
758
+ --dimension-19x: 4.75rem; /** 76px */
759
+ --dimension-20x: 5rem; /** 80px */
760
+ --dimension-21x: 5.25rem; /** 84px */
761
+ --dimension-22x: 5.5rem; /** 88px */
762
+ --dimension-23x: 5.75rem; /** 92px */
763
+ --dimension-24x: 6rem; /** 96px */
764
+ --dimension-25x: 6.25rem; /** 100px */
765
+ --dimension-26x: 6.5rem; /** 104px */
766
+ --dimension-27x: 6.75rem; /** 108px */
767
+ --dimension-28x: 7rem; /** 112px */
768
+ --dimension-29x: 7.25rem; /** 116px */
769
+ --dimension-30x: 7.5rem; /** 120px */
770
+ --letter-spacing-0: 0em;
771
+ --letter-spacing-1: 0.05em;
772
+ --paragraph-spacing-0: 0;
773
+ --paragraph-spacing-1: 12px;
774
+ --paragraph-spacing-2: 16px;
775
+ --paragraph-spacing-3: 24px;
776
+ --paragraph-spacing-4: 32px;
777
+ --paragraph-spacing-5: 40px;
778
+ --paragraph-indent-0: 0px;
636
779
  --content-margin-top-bottom-mobile: 24px;
637
780
  --content-margin-top-bottom-desktop: 40px;
638
781
  --content-margin-top-bottom-desktop-small: 32px;
@@ -641,6 +784,14 @@
641
784
  --content-margin-left-right-desktop-small: 50px;
642
785
  --content-margin-left-right-desktop: 220px;
643
786
  --content-margin-left-right-desktop-large: 620px;
787
+ --border-radius-none: 0px;
788
+ --border-radius-small: 4px;
789
+ --border-radius-large: 6px;
790
+ --border-radius-circle: 50px;
791
+ --border-radius-pill: 9999px;
792
+ --border-width-none: 0px;
793
+ --border-width-default: 1px;
794
+ --border-width-strong: 2px;
644
795
  --content-area-mobile: 366px;
645
796
  --content-area-desktop-small: 700px;
646
797
  --content-area-desktop: 1000px;
@@ -672,13 +823,14 @@
672
823
  --sizing-2x-large: var(--dimension-22x);
673
824
  --content-margin-top-bottom: var(--content-margin-top-bottom-mobile);
674
825
  --content-margin-left-right: var(--content-margin-left-right-mobile);
675
- --font-size-2xsmall: var(--dimension-3x);
676
- --font-size-xsmall: var(--dimension-3-5x);
677
- --font-size-small: var(--dimension-4x);
678
- --font-size-medium: var(--dimension-4-5x);
679
- --font-size-large: var(--dimension-5x);
680
- --font-size-xlarge: var(--dimension-7x);
681
- --font-size-2xlarge: var(--dimension-9x);
682
- --font-size-3xlarge: var(--dimension-11x);
826
+ --font-size-2xsmall: var(--dimension-3x); /** 12 px */
827
+ --font-size-xsmall: var(--dimension-3-5x); /** 14 px */
828
+ --font-size-small: var(--dimension-4x); /** 16 px */
829
+ --font-size-medium: var(--dimension-4-5x); /** 18 px */
830
+ --font-size-large: var(--dimension-5x); /** 20 px */
831
+ --font-size-xlarge: var(--dimension-7x); /** 24 px */
832
+ --font-size-2xlarge: var(--dimension-9x); /** 32 px */
833
+ --font-size-3xlarge: var(--dimension-11x); /** 40 px */
683
834
  }
835
+
684
836
  }
package/css/nve_dark.css CHANGED
@@ -2,8 +2,8 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- @import './global.css';
6
- :root.darkmode {
5
+ @import './global.css';
6
+ :root.darkmode {
7
7
  --brand-100: #ff2b4e;
8
8
  --brand-150: #ff153b;
9
9
  --brand-200: #f71439;
@@ -124,94 +124,27 @@
124
124
  --varsom-blue-999: #00131c;
125
125
  --varsom-blue-000: #eff8fc;
126
126
  --varsom-blue-050: #c8eaf9;
127
- --opacity-disabled: 38%;
128
- --dimension-025x: 0.0625rem;
129
- --dimension-05x: 0.125rem;
130
- --dimension-1x: 0.25rem;
131
- --dimension-2x: 0.5rem;
132
- --dimension-3x: 0.75rem;
133
- --dimension-3-5x: 0.875rem;
134
- --dimension-4x: 1rem;
135
- --dimension-4-5x: 1.125rem;
136
- --dimension-5x: 1.25rem;
137
- --dimension-6x: 1.5rem;
138
- --dimension-7x: 1.75rem;
139
- --dimension-8x: 2rem;
140
- --dimension-9x: 2.25rem;
141
- --dimension-10x: 2.5rem;
142
- --dimension-11x: 2.75rem;
143
- --dimension-12x: 3rem;
144
- --dimension-13x: 3.25rem;
145
- --dimension-14x: 3.5rem;
146
- --dimension-15x: 3.75rem;
147
- --dimension-16x: 4rem;
148
- --dimension-17x: 4.25rem;
149
- --dimension-18x: 4.5rem;
150
- --dimension-19x: 4.75rem;
151
- --dimension-20x: 5rem;
152
- --dimension-21x: 5.25rem;
153
- --dimension-22x: 5.5rem;
154
- --dimension-23x: 5.75rem;
155
- --dimension-24x: 6rem;
156
- --dimension-25x: 6.25rem;
157
- --dimension-26x: 6.5rem;
158
- --dimension-27x: 6.75rem;
159
- --dimension-28x: 7rem;
160
- --dimension-29x: 7.25rem;
161
- --dimension-30x: 7.5rem;
127
+ --opacity-disabled: 0.38;
162
128
  --font-families-source-sans-pro: 'Source Sans Pro';
163
- --line-heights-zero: 115%;
164
- --line-heights-1: 120%;
165
- --line-heights-2: 125%;
166
- --line-heights-3: 130%;
167
- --line-heights-4: 140%;
168
- --line-heights-5: 150%;
169
- --line-heights-6: 110%;
170
- --letter-spacing-zero: 0%;
171
- --letter-spacing-1: 5%;
172
- --paragraph-spacing-zero: 0;
173
- --paragraph-spacing-1: 12;
174
- --paragraph-spacing-2: 16;
175
- --paragraph-spacing-3: 24;
176
- --paragraph-spacing-4: 32;
177
- --paragraph-spacing-5: 40;
129
+ --line-heights-0: 1.15;
130
+ --line-heights-1: 1.20;
131
+ --line-heights-2: 1.25;
132
+ --line-heights-3: 1.30;
133
+ --line-heights-4: 1.40;
134
+ --line-heights-5: 1.50;
135
+ --line-heights-6: 1.10;
178
136
  --text-case-capitalize: capitalize;
179
137
  --text-case-none: none;
180
138
  --text-case-uppercase: uppercase;
181
139
  --text-decoration-none: none;
182
140
  --text-decoration-underline: underline;
183
- --paragraph-indent-zero: 0px;
184
- --content-margin-top-bottom-mobile: 24px;
185
- --content-margin-top-bottom-desktop: 40px;
186
- --content-margin-top-bottom-desktop-small: 32px;
187
- --content-margin-top-bottom-desktop-large: 40px;
188
- --content-margin-left-right-mobile: 24px;
189
- --content-margin-left-right-desktop-small: 50px;
190
- --content-margin-left-right-desktop: 220px;
191
- --content-margin-left-right-desktop-large: 620px;
192
- --border-radius-none: 0px;
193
- --border-radius-small: 4px;
194
- --border-radius-large: 6px;
195
- --border-radius-circle: 50px;
196
- --border-radius-pill: 9999px;
197
- --border-width-none: 0px;
198
- --border-width-default: 1px;
199
- --border-width-strong: 2px;
200
141
  --font-weight-regular: 400;
201
142
  --font-weight-semibold: 600;
202
- --none: 0px 0px 0px 0px rgba(0,0,0,0);
203
- --soft: -59px 104px 33px 0px rgba(0,0,0,0.00), -38px 67px 31px 0px rgba(0,0,0,0.00), -21px 37px 26px 0px rgba(0,0,0,0.01), -9px 17px 19px 0px rgba(0,0,0,0.02), -2px 4px 11px 0px rgba(0,0,0,0.03);
204
- --hard: -45px 80px 26px 0px rgba(0,0,0,0.00), -29px 51px 23px 0px rgba(0,0,0,0.01), -16px 29px 20px 0px rgba(0,0,0,0.02), -7px 13px 15px 0px rgba(0,0,0,0.03), -2px 3px 8px 0px rgba(0,0,0,0.04);
205
- --header: 0px 4px 032px 0px rgba(0,0,0,0.02);
206
- --dropdown: 0px 54px 15px 0px rgba(0,0,0,0.00), 0px 35px 14px 0px rgba(0,0,0,0.00), 0px 19px 12px 0px rgba(0,0,0,0.02), 0px 9px 9px 0px rgba(0,0,0,0.03), 0px 2px 5px 0px rgba(0,0,0,0.03);
207
- --content-area-mobile: 366px;
208
- --content-area-desktop-small: 700px;
209
- --content-area-desktop: 1000px;
210
- --content-area-desktop-large: 1200px;
211
- --device-width-mobile: 390px;
212
- --device-width-desktop-small: 800px;
213
- --device-width-desktop: 1440px;
214
- --device-width-desktop-large: 2440px;
143
+ --none: 0 0 0 0 rgba(0,0,0,0);
144
+ --soft: -59px 104px 33px 0 rgba(0,0,0,0.00), -38px 67px 31px 0 rgba(0,0,0,0.00), -21px 37px 26px 0 rgba(0,0,0,0.01), -9px 17px 19px 0 rgba(0,0,0,0.02), -2px 4px 11px 0 rgba(0,0,0,0.03);
145
+ --hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
146
+ --header: 0 4px 032px 0 rgba(0,0,0,0.02);
147
+ --dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
215
148
  --teal-100: #e2f3f9;
216
149
  --teal-150: #d3edf6;
217
150
  --teal-200: #c4e7f3;
@@ -438,4 +371,4 @@
438
371
  --supplemental-emphasized-red-foreground: var(--neutralgrey-999);
439
372
  --supplemental-emphasized-blue-background: var(--blue-300);
440
373
  --supplemental-emphasized-blue-foreground: var(--grey-999);
441
- }
374
+ }