@utrecht/component-library-css 1.0.0-alpha.310 → 1.0.0-alpha.311

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 (3) hide show
  1. package/dist/html.css +42 -47
  2. package/dist/index.css +77 -70
  3. package/package.json +3 -3
package/dist/html.css CHANGED
@@ -11,6 +11,7 @@
11
11
  /* Collection of all semantic HTML styles in the component library */
12
12
  /* stylelint-disable no-invalid-position-at-import-rule */
13
13
  .utrecht-html {
14
+ --utrecht-space-around: 1;
14
15
  /**
15
16
  * @license EUPL-1.2
16
17
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -85,7 +86,6 @@
85
86
  * @license EUPL-1.2
86
87
  * Copyright (c) 2021 Robbert Broersma
87
88
  */
88
- /* stylelint-disable-next-line block-no-empty */
89
89
  /**
90
90
  * @license EUPL-1.2
91
91
  * Copyright (c) 2021 Robbert Broersma
@@ -366,14 +366,15 @@
366
366
  .utrecht-html blockquote {
367
367
  font-family: var(--utrecht-document-font-family);
368
368
  font-size: var(--utrecht-blockquote-font-size);
369
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
370
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
369
371
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
370
372
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
371
373
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
372
374
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
373
375
  color: var(--utrecht-blockquote-content-color, inherit);
374
376
  font-size: var(--utrecht-blockquote-content-font-size, inherit);
375
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
376
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
377
+ --utrecht-space-around: 1;
377
378
  }
378
379
  .utrecht-html input[type=button i],
379
380
  .utrecht-html input[type=reset i],
@@ -533,6 +534,8 @@
533
534
  font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
534
535
  }
535
536
  .utrecht-html fieldset {
537
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
538
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
536
539
  border: 0;
537
540
  margin-inline-end: 0;
538
541
  margin-inline-start: 0;
@@ -541,8 +544,7 @@
541
544
  padding-block-start: 0.01em;
542
545
  padding-inline-end: 0;
543
546
  padding-inline-start: 0;
544
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
545
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
547
+ --utrecht-space-around: 1;
546
548
  }
547
549
  .utrecht-html legend {
548
550
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
@@ -555,8 +557,8 @@
555
557
  text-transform: var(--utrecht-form-fieldset-legend-text-transform);
556
558
  padding-inline-end: 0;
557
559
  padding-inline-start: 0;
558
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
559
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
560
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
561
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
560
562
  }
561
563
  .utrecht-html label {
562
564
  color: var(--utrecht-form-label-color);
@@ -580,11 +582,10 @@
580
582
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
581
583
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
582
584
  line-height: var(--utrecht-heading-1-line-height);
583
- margin-block-end: 0;
584
- margin-block-start: 0;
585
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
586
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
585
587
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
586
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
587
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
588
+ --utrecht-space-around: 1;
588
589
  }
589
590
  .utrecht-html h2 {
590
591
  page-break-after: avoid;
@@ -595,11 +596,10 @@
595
596
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
596
597
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
597
598
  line-height: var(--utrecht-heading-2-line-height);
598
- margin-block-end: 0;
599
- margin-block-start: 0;
599
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
600
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
600
601
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
601
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
602
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
602
+ --utrecht-space-around: 1;
603
603
  }
604
604
  .utrecht-html h3 {
605
605
  page-break-after: avoid;
@@ -610,11 +610,10 @@
610
610
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
611
611
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
612
612
  line-height: var(--utrecht-heading-3-line-height);
613
- margin-block-end: 0;
614
- margin-block-start: 0;
613
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
614
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
615
615
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
616
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
617
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
616
+ --utrecht-space-around: 1;
618
617
  }
619
618
  .utrecht-html h4 {
620
619
  page-break-after: avoid;
@@ -625,11 +624,10 @@
625
624
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
626
625
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
627
626
  line-height: var(--utrecht-heading-4-line-height);
628
- margin-block-end: 0;
629
- margin-block-start: 0;
627
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
628
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
630
629
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
631
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
632
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
630
+ --utrecht-space-around: 1;
633
631
  }
634
632
  .utrecht-html h5 {
635
633
  page-break-after: avoid;
@@ -640,11 +638,10 @@
640
638
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
641
639
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
642
640
  line-height: var(--utrecht-heading-5-line-height);
643
- margin-block-end: 0;
644
- margin-block-start: 0;
641
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
642
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
645
643
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
646
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
647
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
644
+ --utrecht-space-around: 1;
648
645
  }
649
646
  .utrecht-html h6 {
650
647
  page-break-after: avoid;
@@ -655,11 +652,10 @@
655
652
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
656
653
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
657
654
  line-height: var(--utrecht-heading-6-line-height);
658
- margin-block-end: 0;
659
- margin-block-start: 0;
655
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
656
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
660
657
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
661
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
662
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
658
+ --utrecht-space-around: 1;
663
659
  }
664
660
  .utrecht-html a:link {
665
661
  color: var(--utrecht-link-color, blue);
@@ -704,11 +700,10 @@
704
700
  }
705
701
  .utrecht-html ol {
706
702
  font-family: var(--utrecht-document-font-family, inherit);
707
- margin-block-end: 0;
708
- margin-block-start: 0;
703
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
704
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
709
705
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
710
- margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
711
- margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
706
+ --utrecht-space-around: 1;
712
707
  }
713
708
  .utrecht-html ol > li {
714
709
  margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
@@ -724,8 +719,8 @@
724
719
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
725
720
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
726
721
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
727
- margin-block-end: 0;
728
- margin-block-start: 0;
722
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
723
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
729
724
  }
730
725
  .utrecht-html p.lead {
731
726
  color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
@@ -734,8 +729,7 @@
734
729
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
735
730
  }
736
731
  .utrecht-html * ~ p {
737
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
738
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
732
+ --utrecht-space-around: 1;
739
733
  }
740
734
  .utrecht-html input[type=radio i] {
741
735
  /* reset native margin for input[type="radio" i] */
@@ -816,8 +810,9 @@
816
810
  border-color: var(--utrecht-separator-color);
817
811
  border-style: solid;
818
812
  border-width: 0 0 var(--utrecht-separator-block-size) 0;
819
- margin-block-end: var(--utrecht-separator-margin-block-end);
820
- margin-block-start: var(--utrecht-separator-margin-block-start);
813
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
814
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
815
+ --utrecht-space-around: 1;
821
816
  }
822
817
  .utrecht-html table {
823
818
  border-collapse: collapse;
@@ -826,9 +821,10 @@
826
821
  border-width: var(--utrecht-table-border-width, 0);
827
822
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
828
823
  font-size: var(--utrecht-table-font-size, inherit);
824
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
825
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
829
826
  width: 100%;
830
- margin-block-end: var(--utrecht-table-margin-block-end);
831
- margin-block-start: var(--utrecht-table-margin-block-start);
827
+ --utrecht-space-around: 1;
832
828
  }
833
829
  .utrecht-html caption {
834
830
  color: var(--utrecht-table-caption-color);
@@ -1154,11 +1150,10 @@
1154
1150
  font-family: var(--utrecht-document-font-family, inherit);
1155
1151
  font-size: var(--utrecht-document-font-size, inherit);
1156
1152
  line-height: var(--utrecht-document-line-height, inherit);
1157
- margin-block-end: 0;
1158
- margin-block-start: 0;
1153
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1154
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1159
1155
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
1160
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1161
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1156
+ --utrecht-space-around: 1;
1162
1157
  }
1163
1158
  .utrecht-html ul > li {
1164
1159
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
package/dist/index.css CHANGED
@@ -195,6 +195,8 @@
195
195
  .utrecht-blockquote {
196
196
  font-family: var(--utrecht-document-font-family);
197
197
  font-size: var(--utrecht-blockquote-font-size);
198
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-end, 0));
199
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-blockquote-margin-block-start, 0));
198
200
  margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
199
201
  margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
200
202
  }
@@ -212,8 +214,7 @@
212
214
  }
213
215
 
214
216
  .utrecht-blockquote--distanced {
215
- margin-block-end: var(--utrecht-blockquote-margin-block-end);
216
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
217
+ --utrecht-space-around: 1;
217
218
  }
218
219
 
219
220
  /**
@@ -605,6 +606,8 @@ ol.utrecht-breadcrumb__list {
605
606
  background-color: var(--utrecht-button-group-background-color);
606
607
  display: flex;
607
608
  gap: var(--utrecht-button-group-inline-gap, 1em);
609
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
610
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
608
611
  min-block-size: var(--utrecht-button-block-size);
609
612
  padding-block-end: var(--utrecht-button-group-padding-block-end);
610
613
  padding-block-start: var(--utrecht-button-group-padding-block-start);
@@ -614,6 +617,8 @@ ol.utrecht-breadcrumb__list {
614
617
  background-color: var(--utrecht-button-group-background-color);
615
618
  display: flex;
616
619
  gap: var(--utrecht-button-group-inline-gap, 1em);
620
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));
621
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));
617
622
  min-block-size: var(--utrecht-button-block-size);
618
623
  padding-block-end: var(--utrecht-button-group-padding-block-end);
619
624
  padding-block-start: var(--utrecht-button-group-padding-block-start);
@@ -1298,8 +1303,8 @@ ol.utrecht-breadcrumb__list {
1298
1303
  .utrecht-data-list {
1299
1304
  /* also set `margin-block` to reset browser styling of <dl> */
1300
1305
  display: block;
1301
- margin-block-end: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-end));
1302
- margin-block-start: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-start));
1306
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
1307
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
1303
1308
  }
1304
1309
 
1305
1310
  .utrecht-data-list__item-key {
@@ -1423,11 +1428,12 @@ ol.utrecht-breadcrumb__list {
1423
1428
  .utrecht-form-field-checkbox-group {
1424
1429
  font-family: var(--utrecht-document-font-family, inherit);
1425
1430
  font-size: var(--utrecht-paragraph-font-size);
1431
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1432
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1426
1433
  }
1427
1434
 
1428
1435
  .utrecht-form-field-checkbox-group--distanced {
1429
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1430
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1436
+ --utrecht-space-around: 1;
1431
1437
  }
1432
1438
 
1433
1439
  .utrecht-form-field-checkbox-group__label {
@@ -1449,12 +1455,13 @@ ol.utrecht-breadcrumb__list {
1449
1455
  */
1450
1456
  .utrecht-form-field {
1451
1457
  font-family: var(--utrecht-document-font-family, inherit);
1458
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
1459
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
1452
1460
  max-inline-size: var(--utrecht-form-field-max-inline-size);
1453
1461
  }
1454
1462
 
1455
1463
  .utrecht-form-field--distanced {
1456
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1457
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1464
+ --utrecht-space-around: 1;
1458
1465
  }
1459
1466
 
1460
1467
  .utrecht-form-field__label--checkbox {
@@ -1474,11 +1481,12 @@ ol.utrecht-breadcrumb__list {
1474
1481
  font-family: var(--utrecht-document-font-family, inherit);
1475
1482
  font-size: var(--utrecht-form-field-description-font-size, inherit);
1476
1483
  font-style: var(--utrecht-form-field-description-font-style);
1484
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1485
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1477
1486
  }
1478
1487
 
1479
1488
  .utrecht-form-field-description--distanced {
1480
- margin-block-end: var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1481
- margin-block-start: var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1489
+ --utrecht-space-around: 1;
1482
1490
  }
1483
1491
 
1484
1492
  .utrecht-form-field-description--invalid {
@@ -1500,11 +1508,12 @@ ol.utrecht-breadcrumb__list {
1500
1508
  .utrecht-form-field-radio-group {
1501
1509
  font-family: var(--utrecht-document-font-family, inherit);
1502
1510
  font-size: var(--utrecht-paragraph-font-size);
1511
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1512
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1503
1513
  }
1504
1514
 
1505
1515
  .utrecht-form-field-radio-group--distanced {
1506
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1507
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1516
+ --utrecht-space-around: 1;
1508
1517
  }
1509
1518
 
1510
1519
  .utrecht-form-field-radio-group__label {
@@ -1519,11 +1528,12 @@ ol.utrecht-breadcrumb__list {
1519
1528
  .utrecht-form-field-radio {
1520
1529
  font-family: var(--utrecht-document-font-family, inherit);
1521
1530
  font-size: var(--utrecht-paragraph-font-size);
1531
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1532
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1522
1533
  }
1523
1534
 
1524
1535
  .utrecht-form-field-radio--distanced {
1525
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1526
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1536
+ --utrecht-space-around: 1;
1527
1537
  }
1528
1538
 
1529
1539
  .utrecht-form-field-radio__label {
@@ -1548,12 +1558,13 @@ ol.utrecht-breadcrumb__list {
1548
1558
  */
1549
1559
  .utrecht-form-field {
1550
1560
  font-family: var(--utrecht-document-font-family, inherit);
1561
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
1562
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
1551
1563
  max-inline-size: var(--utrecht-form-field-max-inline-size);
1552
1564
  }
1553
1565
 
1554
1566
  .utrecht-form-field--distanced {
1555
- margin-block-end: var(--utrecht-form-field-margin-block-end, var(--utrecht-paragraph-margin-block-end));
1556
- margin-block-start: var(--utrecht-form-field-margin-block-start, var(--utrecht-paragraph-margin-block-start));
1567
+ --utrecht-space-around: 1;
1557
1568
  }
1558
1569
 
1559
1570
  /**
@@ -1565,7 +1576,11 @@ ol.utrecht-breadcrumb__list {
1565
1576
  * Copyright (c) 2021 Robbert Broersma
1566
1577
  */
1567
1578
  /* stylelint-disable-next-line block-no-empty */
1568
- /* stylelint-disable-next-line block-no-empty */
1579
+ .utrecht-form-fieldset {
1580
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
1581
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
1582
+ }
1583
+
1569
1584
  .utrecht-form-fieldset--html-fieldset {
1570
1585
  border: 0;
1571
1586
  margin-inline-end: 0;
@@ -1583,8 +1598,7 @@ ol.utrecht-breadcrumb__list {
1583
1598
  }
1584
1599
 
1585
1600
  .utrecht-form-fieldset--distanced {
1586
- margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
1587
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
1601
+ --utrecht-space-around: 1;
1588
1602
  }
1589
1603
 
1590
1604
  .utrecht-form-fieldset__legend {
@@ -1599,8 +1613,8 @@ ol.utrecht-breadcrumb__list {
1599
1613
  }
1600
1614
 
1601
1615
  .utrecht-form-fieldset__legend--distanced {
1602
- margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
1603
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
1616
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
1617
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
1604
1618
  }
1605
1619
 
1606
1620
  /**
@@ -1765,14 +1779,13 @@ ol.utrecht-breadcrumb__list {
1765
1779
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
1766
1780
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
1767
1781
  line-height: var(--utrecht-heading-1-line-height);
1768
- margin-block-end: 0;
1769
- margin-block-start: 0;
1782
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
1783
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
1770
1784
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
1771
1785
  }
1772
1786
 
1773
1787
  .utrecht-heading-1--distanced {
1774
- margin-block-end: var(--utrecht-heading-1-margin-block-end);
1775
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
1788
+ --utrecht-space-around: 1;
1776
1789
  }
1777
1790
 
1778
1791
  /**
@@ -1800,14 +1813,13 @@ ol.utrecht-breadcrumb__list {
1800
1813
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
1801
1814
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
1802
1815
  line-height: var(--utrecht-heading-2-line-height);
1803
- margin-block-end: 0;
1804
- margin-block-start: 0;
1816
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
1817
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
1805
1818
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
1806
1819
  }
1807
1820
 
1808
1821
  .utrecht-heading-2--distanced {
1809
- margin-block-end: var(--utrecht-heading-2-margin-block-end);
1810
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
1822
+ --utrecht-space-around: 1;
1811
1823
  }
1812
1824
 
1813
1825
  /**
@@ -1835,14 +1847,13 @@ ol.utrecht-breadcrumb__list {
1835
1847
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
1836
1848
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
1837
1849
  line-height: var(--utrecht-heading-3-line-height);
1838
- margin-block-end: 0;
1839
- margin-block-start: 0;
1850
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
1851
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
1840
1852
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
1841
1853
  }
1842
1854
 
1843
1855
  .utrecht-heading-3--distanced {
1844
- margin-block-end: var(--utrecht-heading-3-margin-block-end);
1845
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
1856
+ --utrecht-space-around: 1;
1846
1857
  }
1847
1858
 
1848
1859
  /**
@@ -1870,14 +1881,13 @@ ol.utrecht-breadcrumb__list {
1870
1881
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
1871
1882
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
1872
1883
  line-height: var(--utrecht-heading-4-line-height);
1873
- margin-block-end: 0;
1874
- margin-block-start: 0;
1884
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
1885
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
1875
1886
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
1876
1887
  }
1877
1888
 
1878
1889
  .utrecht-heading-4--distanced {
1879
- margin-block-end: var(--utrecht-heading-4-margin-block-end);
1880
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
1890
+ --utrecht-space-around: 1;
1881
1891
  }
1882
1892
 
1883
1893
  /**
@@ -1905,14 +1915,13 @@ ol.utrecht-breadcrumb__list {
1905
1915
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
1906
1916
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
1907
1917
  line-height: var(--utrecht-heading-5-line-height);
1908
- margin-block-end: 0;
1909
- margin-block-start: 0;
1918
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
1919
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
1910
1920
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
1911
1921
  }
1912
1922
 
1913
1923
  .utrecht-heading-5--distanced {
1914
- margin-block-end: var(--utrecht-heading-5-margin-block-end);
1915
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
1924
+ --utrecht-space-around: 1;
1916
1925
  }
1917
1926
 
1918
1927
  /**
@@ -1940,14 +1949,13 @@ ol.utrecht-breadcrumb__list {
1940
1949
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
1941
1950
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
1942
1951
  line-height: var(--utrecht-heading-6-line-height);
1943
- margin-block-end: 0;
1944
- margin-block-start: 0;
1952
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
1953
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
1945
1954
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
1946
1955
  }
1947
1956
 
1948
1957
  .utrecht-heading-6--distanced {
1949
- margin-block-end: var(--utrecht-heading-6-margin-block-end);
1950
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
1958
+ --utrecht-space-around: 1;
1951
1959
  }
1952
1960
 
1953
1961
  /**
@@ -2018,11 +2026,12 @@ ol.utrecht-breadcrumb__list {
2018
2026
  --utrecht-link-text-decoration: none;
2019
2027
  --utrecht-link-hover-text-decoration: underline;
2020
2028
  --utrecht-link-focus-text-decoration: underline;
2029
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
2030
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
2021
2031
  }
2022
2032
 
2023
2033
  .utrecht-link-list--distanced {
2024
- margin-block-end: var(--utrecht-link-list-margin-block-end, 0);
2025
- margin-block-start: var(--utrecht-link-list-margin-block-start, 0);
2034
+ --utrecht-space-around: 1;
2026
2035
  }
2027
2036
 
2028
2037
  .utrecht-link-list__marker, .utrecht-link-list__item > a::before {
@@ -2849,14 +2858,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
2849
2858
  */
2850
2859
  .utrecht-ordered-list {
2851
2860
  font-family: var(--utrecht-document-font-family, inherit);
2852
- margin-block-end: 0;
2853
- margin-block-start: 0;
2861
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)));
2862
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
2854
2863
  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
2855
2864
  }
2856
2865
 
2857
2866
  .utrecht-ordered-list--distanced {
2858
- margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
2859
- margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
2867
+ --utrecht-space-around: 1;
2860
2868
  }
2861
2869
 
2862
2870
  .utrecht-ordered-list--arabic {
@@ -3019,11 +3027,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
3019
3027
  .utrecht-pagination {
3020
3028
  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
3021
3029
  font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
3030
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-end, 0));
3031
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-start, 0));
3022
3032
  }
3023
3033
 
3024
3034
  .utrecht-pagination--distanced {
3025
- margin-block-end: var(--utrecht-pagination-margin-block-end);
3026
- margin-block-start: var(--utrecht-pagination-margin-block-start);
3035
+ --utrecht-space-around: 1;
3027
3036
  }
3028
3037
 
3029
3038
  .utrecht-pagination__relative-link {
@@ -3085,7 +3094,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
3085
3094
  --utrecht-pagination-page-link-color: var(--utrecht-pagination-page-link-current-color);
3086
3095
  }
3087
3096
 
3088
- .utrecht-pagination__page-link--distanced,
3089
3097
  .utrecht-pagination__page-link ~ .utrecht-pagination__page-link {
3090
3098
  margin-inline-start: var(--utrecht-pagination-page-link-distanced-margin-inline-start);
3091
3099
  }
@@ -3127,8 +3135,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
3127
3135
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
3128
3136
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
3129
3137
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
3130
- margin-block-end: 0;
3131
- margin-block-start: 0;
3138
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
3139
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
3132
3140
  }
3133
3141
 
3134
3142
  .utrecht-paragraph--lead {
@@ -3139,8 +3147,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
3139
3147
  }
3140
3148
 
3141
3149
  .utrecht-paragraph--distanced {
3142
- margin-block-end: var(--utrecht-paragraph-margin-block-end);
3143
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
3150
+ --utrecht-space-around: 1;
3144
3151
  }
3145
3152
 
3146
3153
  /**
@@ -3155,14 +3162,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
3155
3162
  font-weight: var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold));
3156
3163
  letter-spacing: var(--utrecht-pre-heading-letter-spacing);
3157
3164
  line-height: var(--utrecht-pre-heading-line-height);
3158
- margin-block-end: 0;
3159
- margin-block-start: 0;
3165
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-end, 0));
3166
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-start, 0));
3160
3167
  text-transform: var(--utrecht-pre-heading-text-transform, inherit);
3161
3168
  }
3162
3169
 
3163
3170
  .utrecht-pre-heading--distanced {
3164
- margin-block-end: var(--utrecht-pre-heading-margin-block-end);
3165
- margin-block-start: var(--utrecht-pre-heading-margin-block-start);
3171
+ --utrecht-space-around: 1;
3166
3172
  }
3167
3173
 
3168
3174
  /**
@@ -3372,11 +3378,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
3372
3378
  border-color: var(--utrecht-separator-color);
3373
3379
  border-style: solid;
3374
3380
  border-width: 0 0 var(--utrecht-separator-block-size) 0;
3381
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-end, 0));
3382
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-separator-margin-block-start, 0));
3375
3383
  }
3376
3384
 
3377
3385
  .utrecht-separator--distanced {
3378
- margin-block-end: var(--utrecht-separator-margin-block-end);
3379
- margin-block-start: var(--utrecht-separator-margin-block-start);
3386
+ --utrecht-space-around: 1;
3380
3387
  }
3381
3388
 
3382
3389
  /**
@@ -3416,12 +3423,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
3416
3423
  border-width: var(--utrecht-table-border-width, 0);
3417
3424
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
3418
3425
  font-size: var(--utrecht-table-font-size, inherit);
3426
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
3427
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
3419
3428
  width: 100%;
3420
3429
  }
3421
3430
 
3422
3431
  .utrecht-table--distanced {
3423
- margin-block-end: var(--utrecht-table-margin-block-end);
3424
- margin-block-start: var(--utrecht-table-margin-block-start);
3432
+ --utrecht-space-around: 1;
3425
3433
  }
3426
3434
 
3427
3435
  .utrecht-table__caption {
@@ -3767,14 +3775,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
3767
3775
  font-family: var(--utrecht-document-font-family, inherit);
3768
3776
  font-size: var(--utrecht-document-font-size, inherit);
3769
3777
  line-height: var(--utrecht-document-line-height, inherit);
3770
- margin-block-end: 0;
3771
- margin-block-start: 0;
3778
+ margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
3779
+ margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
3772
3780
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
3773
3781
  }
3774
3782
 
3775
3783
  .utrecht-unordered-list--distanced {
3776
- margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
3777
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
3784
+ --utrecht-space-around: 1;
3778
3785
  }
3779
3786
 
3780
3787
  .utrecht-unordered-list--nested {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.310",
2
+ "version": "1.0.0-alpha.311",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.303",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.304",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.54.0"
@@ -27,5 +27,5 @@
27
27
  "clean": "rimraf dist/"
28
28
  },
29
29
  "main": "dist/index.css",
30
- "gitHead": "5dadd16977de9f7171083aaab7add3f81a23af00"
30
+ "gitHead": "a9108e95be0b4798d04a3256711cbe1b91a5f33c"
31
31
  }