@utrecht/component-library-css 1.0.0-alpha.91 → 1.0.0-alpha.95

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 (7) hide show
  1. package/dist/bem.css +177 -1
  2. package/dist/html.css +89 -2
  3. package/dist/index.css +288 -7
  4. package/dist/root-theme.css +22 -4
  5. package/package.json +3 -3
  6. package/src/bem.scss +2 -0
  7. package/src/html.scss +1 -0
package/dist/bem.css CHANGED
@@ -347,11 +347,13 @@ ol.utrecht-breadcrumb__list {
347
347
  font-weight: var(--utrecht-button-font-weight);
348
348
  inline-size: var(--utrecht-button-inline-size, auto);
349
349
  letter-spacing: var(--utrecht-button-letter-spacing);
350
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
350
351
  padding-block-end: var(--utrecht-button-padding-block-end);
351
352
  padding-block-start: var(--utrecht-button-padding-block-start);
352
353
  padding-inline-end: var(--utrecht-button-padding-inline-end);
353
354
  padding-inline-start: var(--utrecht-button-padding-inline-start);
354
355
  text-transform: var(--utrecht-button-text-transform);
356
+ user-select: none;
355
357
  }
356
358
 
357
359
  .utrecht-button--distanced {
@@ -569,6 +571,110 @@ ol.utrecht-breadcrumb__list {
569
571
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
570
572
  }
571
573
 
574
+ /**
575
+ * @license EUPL-1.2
576
+ * Copyright (c) 2021 Robbert Broersma
577
+ */
578
+ .utrecht-form-toggle {
579
+ align-items: center;
580
+ border-color: var(--utrecht-form-toggle-border-color, currentColor);
581
+ border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
582
+ border-style: var(--utrecht-form-toggle-border-style, solid);
583
+ border-width: var(--utrecht-form-toggle-border-width, 1px);
584
+ color: var(--utrecht-form-toggle-color);
585
+ display: flex;
586
+ height: var(--utrecht-form-toggle-height, 2em);
587
+ padding-block-end: var(--utrecht-form-toggle-padding-block-end);
588
+ padding-block-start: var(--utrecht-form-toggle-padding-block-start);
589
+ padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
590
+ padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
591
+ position: relative;
592
+ user-select: none;
593
+ width: var(--utrecht-form-toggle-width, 6em);
594
+ }
595
+
596
+ .utrecht-form-toggle--focus {
597
+ border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
598
+ border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
599
+ border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
600
+ }
601
+
602
+ .utrecht-form-toggle--hover {
603
+ background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
604
+ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
605
+ }
606
+
607
+ .utrecht-form-toggle--disabled {
608
+ border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
609
+ border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
610
+ border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
611
+ cursor: var(--utrecht-action-disabled-cursor);
612
+ }
613
+
614
+ .utrecht-form-toggle__thumb {
615
+ /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
616
+ background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
617
+ border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
618
+ box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
619
+ margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
620
+ margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
621
+ min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
622
+ min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
623
+ z-index: 20;
624
+ }
625
+
626
+ .utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
627
+ margin-inline-start: auto;
628
+ }
629
+
630
+ .utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
631
+ margin-inline-end: auto;
632
+ }
633
+
634
+ .utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
635
+ background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
636
+ box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
637
+ }
638
+
639
+ .utrecht-form-toggle__track {
640
+ align-items: center;
641
+ background-color: var(--utrecht-form-toggle-accent-color);
642
+ border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
643
+ display: flex;
644
+ height: 100%;
645
+ width: 100%;
646
+ }
647
+
648
+ .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
649
+ background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
650
+ }
651
+
652
+ .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
653
+ background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
654
+ color: var(--utrecht-form-toggle-disabled-color, black);
655
+ }
656
+
657
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
658
+ /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
659
+ border: 0 !important;
660
+ clip: rect(1px, 1px, 1px, 1px) !important;
661
+ -webkit-clip-path: inset(50%) !important;
662
+ clip-path: inset(50%) !important;
663
+ height: 1px !important;
664
+ /* stylelint-disable-next-line property-disallowed-list */
665
+ margin: -1px !important;
666
+ overflow: hidden !important;
667
+ /* stylelint-disable-next-line property-disallowed-list */
668
+ padding: 0 !important;
669
+ position: absolute !important;
670
+ white-space: nowrap !important;
671
+ width: 1px !important;
672
+ }
673
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
674
+ outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
675
+ outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
676
+ outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
677
+ }
572
678
  /**
573
679
  * @license EUPL-1.2
574
680
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1291,6 +1397,7 @@ ol.utrecht-breadcrumb__list {
1291
1397
  }
1292
1398
 
1293
1399
  .utrecht-paragraph--lead {
1400
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1294
1401
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1295
1402
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1296
1403
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -1348,6 +1455,67 @@ ol.utrecht-breadcrumb__list {
1348
1455
  background-size: var(--utrecht-search-bar-textbox-background-size);
1349
1456
  }
1350
1457
 
1458
+ /**
1459
+ * @license EUPL-1.2
1460
+ * Copyright (c) 2021 Robbert Broersma
1461
+ */
1462
+ .utrecht-select {
1463
+ -moz-appearance: none;
1464
+ -webkit-appearance: none;
1465
+ appearance: none;
1466
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1467
+ background-image: var(--utrecht-select-background-image);
1468
+ background-position: 100%;
1469
+ background-repeat: no-repeat;
1470
+ background-size: 1.4em;
1471
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1472
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1473
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1474
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1475
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1476
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1477
+ border-style: solid;
1478
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1479
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1480
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1481
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1482
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1483
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1484
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1485
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1486
+ width: 100%;
1487
+ }
1488
+
1489
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled {
1490
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1491
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1492
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1493
+ cursor: var(--utrecht-action-disabled-cursor);
1494
+ }
1495
+
1496
+ .utrecht-select--focus, .utrecht-select--html-select:focus {
1497
+ background-color: var(--utrecht-focus-background-color);
1498
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1499
+ color: var(--utrecht-focus-color, inherit);
1500
+ outline-color: var(--utrecht-focus-outline-color, transparent);
1501
+ outline-offset: 0;
1502
+ outline-style: var(--utrecht-focus-outline-style, solid);
1503
+ outline-width: var(--utrecht-focus-outline-width, 0);
1504
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1505
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1506
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1507
+ }
1508
+
1509
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-select--html-select[aria-invalid=true] {
1510
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1511
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1512
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1513
+ }
1514
+
1515
+ /* stylelint-disable-next-line block-no-empty */
1516
+ .utrecht-select--html-select {
1517
+ /* <select> does not support :read-only */
1518
+ }
1351
1519
  /**
1352
1520
  * @license EUPL-1.2
1353
1521
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1357,7 +1525,7 @@ ol.utrecht-breadcrumb__list {
1357
1525
  .utrecht-separator {
1358
1526
  border-color: var(--utrecht-separator-color);
1359
1527
  border-style: solid;
1360
- border-width: 0 0 var(--utrecht-separator-width) 0;
1528
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1361
1529
  }
1362
1530
 
1363
1531
  .utrecht-separator--distanced {
@@ -1468,10 +1636,12 @@ ol.utrecht-breadcrumb__list {
1468
1636
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1469
1637
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1470
1638
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1639
+ min-block-size: var(--utrecht-textarea-min-block-size);
1471
1640
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1472
1641
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1473
1642
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1474
1643
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1644
+ resize: vertical;
1475
1645
  width: 100%;
1476
1646
  }
1477
1647
 
@@ -1496,6 +1666,9 @@ ol.utrecht-breadcrumb__list {
1496
1666
  outline-offset: 0;
1497
1667
  outline-style: var(--utrecht-focus-outline-style, solid);
1498
1668
  outline-width: var(--utrecht-focus-outline-width, 0);
1669
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1670
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1671
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1499
1672
  }
1500
1673
 
1501
1674
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only {
@@ -1552,6 +1725,9 @@ ol.utrecht-breadcrumb__list {
1552
1725
  outline-offset: 0;
1553
1726
  outline-style: var(--utrecht-focus-outline-style, solid);
1554
1727
  outline-width: var(--utrecht-focus-outline-width, 0);
1728
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1729
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1730
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1555
1731
  }
1556
1732
 
1557
1733
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only {
package/dist/html.css CHANGED
@@ -78,11 +78,13 @@
78
78
  font-weight: var(--utrecht-button-font-weight);
79
79
  inline-size: var(--utrecht-button-inline-size, auto);
80
80
  letter-spacing: var(--utrecht-button-letter-spacing);
81
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
81
82
  padding-block-end: var(--utrecht-button-padding-block-end);
82
83
  padding-block-start: var(--utrecht-button-padding-block-start);
83
84
  padding-inline-end: var(--utrecht-button-padding-inline-end);
84
85
  padding-inline-start: var(--utrecht-button-padding-inline-start);
85
86
  text-transform: var(--utrecht-button-text-transform);
87
+ user-select: none;
86
88
  }
87
89
 
88
90
  .utrecht-button--distanced, .utrecht-html button {
@@ -487,11 +489,13 @@
487
489
  font-weight: var(--utrecht-button-font-weight);
488
490
  inline-size: var(--utrecht-button-inline-size, auto);
489
491
  letter-spacing: var(--utrecht-button-letter-spacing);
492
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
490
493
  padding-block-end: var(--utrecht-button-padding-block-end);
491
494
  padding-block-start: var(--utrecht-button-padding-block-start);
492
495
  padding-inline-end: var(--utrecht-button-padding-inline-end);
493
496
  padding-inline-start: var(--utrecht-button-padding-inline-start);
494
497
  text-transform: var(--utrecht-button-text-transform);
498
+ user-select: none;
495
499
  }
496
500
 
497
501
  .utrecht-button--distanced, .utrecht-html button {
@@ -915,6 +919,7 @@
915
919
  }
916
920
 
917
921
  .utrecht-paragraph--lead, .utrecht-html p.lead {
922
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
918
923
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
919
924
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
920
925
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -960,7 +965,7 @@
960
965
  .utrecht-separator, .utrecht-html hr {
961
966
  border-color: var(--utrecht-separator-color);
962
967
  border-style: solid;
963
- border-width: 0 0 var(--utrecht-separator-width) 0;
968
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
964
969
  }
965
970
 
966
971
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -1084,10 +1089,12 @@
1084
1089
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1085
1090
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1086
1091
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1092
+ min-block-size: var(--utrecht-textarea-min-block-size);
1087
1093
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1088
1094
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1089
1095
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1090
1096
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1097
+ resize: vertical;
1091
1098
  width: 100%;
1092
1099
  }
1093
1100
 
@@ -1112,6 +1119,9 @@
1112
1119
  outline-offset: 0;
1113
1120
  outline-style: var(--utrecht-focus-outline-style, solid);
1114
1121
  outline-width: var(--utrecht-focus-outline-width, 0);
1122
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1123
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1124
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1115
1125
  }
1116
1126
 
1117
1127
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -1207,6 +1217,9 @@
1207
1217
  outline-offset: 0;
1208
1218
  outline-style: var(--utrecht-focus-outline-style, solid);
1209
1219
  outline-width: var(--utrecht-focus-outline-width, 0);
1220
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1221
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1222
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1210
1223
  }
1211
1224
 
1212
1225
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -1371,6 +1384,7 @@
1371
1384
  }
1372
1385
 
1373
1386
  .utrecht-paragraph--lead, .utrecht-html p.lead {
1387
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1374
1388
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1375
1389
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1376
1390
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -1403,6 +1417,71 @@
1403
1417
  cursor: var(--utrecht-action-disabled-cursor);
1404
1418
  }
1405
1419
 
1420
+ /**
1421
+ * @license EUPL-1.2
1422
+ * Copyright (c) 2021 Robbert Broersma
1423
+ */
1424
+ /**
1425
+ * @license EUPL-1.2
1426
+ * Copyright (c) 2021 Robbert Broersma
1427
+ */
1428
+ .utrecht-select, .utrecht-html select {
1429
+ -moz-appearance: none;
1430
+ -webkit-appearance: none;
1431
+ appearance: none;
1432
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1433
+ background-image: var(--utrecht-select-background-image);
1434
+ background-position: 100%;
1435
+ background-repeat: no-repeat;
1436
+ background-size: 1.4em;
1437
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1438
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1439
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1440
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1441
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1442
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1443
+ border-style: solid;
1444
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1445
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1446
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1447
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1448
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1449
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1450
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1451
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1452
+ width: 100%;
1453
+ }
1454
+
1455
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
1456
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1457
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1458
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1459
+ cursor: var(--utrecht-action-disabled-cursor);
1460
+ }
1461
+
1462
+ .utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
1463
+ background-color: var(--utrecht-focus-background-color);
1464
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1465
+ color: var(--utrecht-focus-color, inherit);
1466
+ outline-color: var(--utrecht-focus-outline-color, transparent);
1467
+ outline-offset: 0;
1468
+ outline-style: var(--utrecht-focus-outline-style, solid);
1469
+ outline-width: var(--utrecht-focus-outline-width, 0);
1470
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1471
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1472
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1473
+ }
1474
+
1475
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
1476
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1477
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1478
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1479
+ }
1480
+
1481
+ /* stylelint-disable-next-line block-no-empty */
1482
+ .utrecht-select--html-select, .utrecht-html select {
1483
+ /* <select> does not support :read-only */
1484
+ }
1406
1485
  /**
1407
1486
  * @license EUPL-1.2
1408
1487
  * Copyright (c) 2021 Robbert Broersma
@@ -1416,7 +1495,7 @@
1416
1495
  .utrecht-separator, .utrecht-html hr {
1417
1496
  border-color: var(--utrecht-separator-color);
1418
1497
  border-style: solid;
1419
- border-width: 0 0 var(--utrecht-separator-width) 0;
1498
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1420
1499
  }
1421
1500
 
1422
1501
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -1540,10 +1619,12 @@
1540
1619
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1541
1620
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1542
1621
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1622
+ min-block-size: var(--utrecht-textarea-min-block-size);
1543
1623
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1544
1624
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1545
1625
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1546
1626
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1627
+ resize: vertical;
1547
1628
  width: 100%;
1548
1629
  }
1549
1630
 
@@ -1568,6 +1649,9 @@
1568
1649
  outline-offset: 0;
1569
1650
  outline-style: var(--utrecht-focus-outline-style, solid);
1570
1651
  outline-width: var(--utrecht-focus-outline-width, 0);
1652
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1653
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1654
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1571
1655
  }
1572
1656
 
1573
1657
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -1663,6 +1747,9 @@
1663
1747
  outline-offset: 0;
1664
1748
  outline-style: var(--utrecht-focus-outline-style, solid);
1665
1749
  outline-width: var(--utrecht-focus-outline-width, 0);
1750
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1751
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1752
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1666
1753
  }
1667
1754
 
1668
1755
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
package/dist/index.css CHANGED
@@ -356,11 +356,13 @@ ol.utrecht-breadcrumb__list {
356
356
  font-weight: var(--utrecht-button-font-weight);
357
357
  inline-size: var(--utrecht-button-inline-size, auto);
358
358
  letter-spacing: var(--utrecht-button-letter-spacing);
359
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
359
360
  padding-block-end: var(--utrecht-button-padding-block-end);
360
361
  padding-block-start: var(--utrecht-button-padding-block-start);
361
362
  padding-inline-end: var(--utrecht-button-padding-inline-end);
362
363
  padding-inline-start: var(--utrecht-button-padding-inline-start);
363
364
  text-transform: var(--utrecht-button-text-transform);
365
+ user-select: none;
364
366
  }
365
367
 
366
368
  .utrecht-button--distanced, .utrecht-html button {
@@ -578,6 +580,110 @@ ol.utrecht-breadcrumb__list {
578
580
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
579
581
  }
580
582
 
583
+ /**
584
+ * @license EUPL-1.2
585
+ * Copyright (c) 2021 Robbert Broersma
586
+ */
587
+ .utrecht-form-toggle {
588
+ align-items: center;
589
+ border-color: var(--utrecht-form-toggle-border-color, currentColor);
590
+ border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
591
+ border-style: var(--utrecht-form-toggle-border-style, solid);
592
+ border-width: var(--utrecht-form-toggle-border-width, 1px);
593
+ color: var(--utrecht-form-toggle-color);
594
+ display: flex;
595
+ height: var(--utrecht-form-toggle-height, 2em);
596
+ padding-block-end: var(--utrecht-form-toggle-padding-block-end);
597
+ padding-block-start: var(--utrecht-form-toggle-padding-block-start);
598
+ padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
599
+ padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
600
+ position: relative;
601
+ user-select: none;
602
+ width: var(--utrecht-form-toggle-width, 6em);
603
+ }
604
+
605
+ .utrecht-form-toggle--focus {
606
+ border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
607
+ border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
608
+ border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
609
+ }
610
+
611
+ .utrecht-form-toggle--hover {
612
+ background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
613
+ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
614
+ }
615
+
616
+ .utrecht-form-toggle--disabled {
617
+ border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
618
+ border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
619
+ border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
620
+ cursor: var(--utrecht-action-disabled-cursor);
621
+ }
622
+
623
+ .utrecht-form-toggle__thumb {
624
+ /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
625
+ background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
626
+ border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
627
+ box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
628
+ margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
629
+ margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
630
+ min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
631
+ min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
632
+ z-index: 20;
633
+ }
634
+
635
+ .utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
636
+ margin-inline-start: auto;
637
+ }
638
+
639
+ .utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
640
+ margin-inline-end: auto;
641
+ }
642
+
643
+ .utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
644
+ background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
645
+ box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
646
+ }
647
+
648
+ .utrecht-form-toggle__track {
649
+ align-items: center;
650
+ background-color: var(--utrecht-form-toggle-accent-color);
651
+ border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
652
+ display: flex;
653
+ height: 100%;
654
+ width: 100%;
655
+ }
656
+
657
+ .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
658
+ background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
659
+ }
660
+
661
+ .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
662
+ background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
663
+ color: var(--utrecht-form-toggle-disabled-color, black);
664
+ }
665
+
666
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
667
+ /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
668
+ border: 0 !important;
669
+ clip: rect(1px, 1px, 1px, 1px) !important;
670
+ -webkit-clip-path: inset(50%) !important;
671
+ clip-path: inset(50%) !important;
672
+ height: 1px !important;
673
+ /* stylelint-disable-next-line property-disallowed-list */
674
+ margin: -1px !important;
675
+ overflow: hidden !important;
676
+ /* stylelint-disable-next-line property-disallowed-list */
677
+ padding: 0 !important;
678
+ position: absolute !important;
679
+ white-space: nowrap !important;
680
+ width: 1px !important;
681
+ }
682
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus ~ .utrecht-form-toggle__track {
683
+ outline-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
684
+ outline-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
685
+ outline-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
686
+ }
581
687
  /**
582
688
  * @license EUPL-1.2
583
689
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1304,6 +1410,7 @@ ol.utrecht-breadcrumb__list {
1304
1410
  }
1305
1411
 
1306
1412
  .utrecht-paragraph--lead, .utrecht-html p.lead {
1413
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
1307
1414
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
1308
1415
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
1309
1416
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -1361,6 +1468,67 @@ ol.utrecht-breadcrumb__list {
1361
1468
  background-size: var(--utrecht-search-bar-textbox-background-size);
1362
1469
  }
1363
1470
 
1471
+ /**
1472
+ * @license EUPL-1.2
1473
+ * Copyright (c) 2021 Robbert Broersma
1474
+ */
1475
+ .utrecht-select, .utrecht-html select {
1476
+ -moz-appearance: none;
1477
+ -webkit-appearance: none;
1478
+ appearance: none;
1479
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
1480
+ background-image: var(--utrecht-select-background-image);
1481
+ background-position: 100%;
1482
+ background-repeat: no-repeat;
1483
+ background-size: 1.4em;
1484
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
1485
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1486
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
1487
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1488
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
1489
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
1490
+ border-style: solid;
1491
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
1492
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
1493
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
1494
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
1495
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
1496
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
1497
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1498
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1499
+ width: 100%;
1500
+ }
1501
+
1502
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
1503
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1504
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1505
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1506
+ cursor: var(--utrecht-action-disabled-cursor);
1507
+ }
1508
+
1509
+ .utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
1510
+ background-color: var(--utrecht-focus-background-color);
1511
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
1512
+ color: var(--utrecht-focus-color, inherit);
1513
+ outline-color: var(--utrecht-focus-outline-color, transparent);
1514
+ outline-offset: 0;
1515
+ outline-style: var(--utrecht-focus-outline-style, solid);
1516
+ outline-width: var(--utrecht-focus-outline-width, 0);
1517
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1518
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1519
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
1520
+ }
1521
+
1522
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
1523
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
1524
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
1525
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
1526
+ }
1527
+
1528
+ /* stylelint-disable-next-line block-no-empty */
1529
+ .utrecht-select--html-select, .utrecht-html select {
1530
+ /* <select> does not support :read-only */
1531
+ }
1364
1532
  /**
1365
1533
  * @license EUPL-1.2
1366
1534
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1370,7 +1538,7 @@ ol.utrecht-breadcrumb__list {
1370
1538
  .utrecht-separator, .utrecht-html hr {
1371
1539
  border-color: var(--utrecht-separator-color);
1372
1540
  border-style: solid;
1373
- border-width: 0 0 var(--utrecht-separator-width) 0;
1541
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
1374
1542
  }
1375
1543
 
1376
1544
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -1485,10 +1653,12 @@ ol.utrecht-breadcrumb__list {
1485
1653
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
1486
1654
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
1487
1655
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
1656
+ min-block-size: var(--utrecht-textarea-min-block-size);
1488
1657
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
1489
1658
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
1490
1659
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
1491
1660
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
1661
+ resize: vertical;
1492
1662
  width: 100%;
1493
1663
  }
1494
1664
 
@@ -1513,6 +1683,9 @@ ol.utrecht-breadcrumb__list {
1513
1683
  outline-offset: 0;
1514
1684
  outline-style: var(--utrecht-focus-outline-style, solid);
1515
1685
  outline-width: var(--utrecht-focus-outline-width, 0);
1686
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1687
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1688
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1516
1689
  }
1517
1690
 
1518
1691
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -1604,6 +1777,9 @@ ol.utrecht-breadcrumb__list {
1604
1777
  outline-offset: 0;
1605
1778
  outline-style: var(--utrecht-focus-outline-style, solid);
1606
1779
  outline-width: var(--utrecht-focus-outline-width, 0);
1780
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
1781
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
1782
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
1607
1783
  }
1608
1784
 
1609
1785
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -1745,11 +1921,13 @@ ol.utrecht-breadcrumb__list {
1745
1921
  font-weight: var(--utrecht-button-font-weight);
1746
1922
  inline-size: var(--utrecht-button-inline-size, auto);
1747
1923
  letter-spacing: var(--utrecht-button-letter-spacing);
1924
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
1748
1925
  padding-block-end: var(--utrecht-button-padding-block-end);
1749
1926
  padding-block-start: var(--utrecht-button-padding-block-start);
1750
1927
  padding-inline-end: var(--utrecht-button-padding-inline-end);
1751
1928
  padding-inline-start: var(--utrecht-button-padding-inline-start);
1752
1929
  text-transform: var(--utrecht-button-text-transform);
1930
+ user-select: none;
1753
1931
  }
1754
1932
 
1755
1933
  .utrecht-button--distanced, .utrecht-html button {
@@ -2154,11 +2332,13 @@ ol.utrecht-breadcrumb__list {
2154
2332
  font-weight: var(--utrecht-button-font-weight);
2155
2333
  inline-size: var(--utrecht-button-inline-size, auto);
2156
2334
  letter-spacing: var(--utrecht-button-letter-spacing);
2335
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
2157
2336
  padding-block-end: var(--utrecht-button-padding-block-end);
2158
2337
  padding-block-start: var(--utrecht-button-padding-block-start);
2159
2338
  padding-inline-end: var(--utrecht-button-padding-inline-end);
2160
2339
  padding-inline-start: var(--utrecht-button-padding-inline-start);
2161
2340
  text-transform: var(--utrecht-button-text-transform);
2341
+ user-select: none;
2162
2342
  }
2163
2343
 
2164
2344
  .utrecht-button--distanced, .utrecht-html button {
@@ -2582,6 +2762,7 @@ ol.utrecht-breadcrumb__list {
2582
2762
  }
2583
2763
 
2584
2764
  .utrecht-paragraph--lead, .utrecht-html p.lead {
2765
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
2585
2766
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
2586
2767
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
2587
2768
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -2627,7 +2808,7 @@ ol.utrecht-breadcrumb__list {
2627
2808
  .utrecht-separator, .utrecht-html hr {
2628
2809
  border-color: var(--utrecht-separator-color);
2629
2810
  border-style: solid;
2630
- border-width: 0 0 var(--utrecht-separator-width) 0;
2811
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
2631
2812
  }
2632
2813
 
2633
2814
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -2751,10 +2932,12 @@ ol.utrecht-breadcrumb__list {
2751
2932
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
2752
2933
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
2753
2934
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
2935
+ min-block-size: var(--utrecht-textarea-min-block-size);
2754
2936
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
2755
2937
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
2756
2938
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
2757
2939
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
2940
+ resize: vertical;
2758
2941
  width: 100%;
2759
2942
  }
2760
2943
 
@@ -2779,6 +2962,9 @@ ol.utrecht-breadcrumb__list {
2779
2962
  outline-offset: 0;
2780
2963
  outline-style: var(--utrecht-focus-outline-style, solid);
2781
2964
  outline-width: var(--utrecht-focus-outline-width, 0);
2965
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
2966
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
2967
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2782
2968
  }
2783
2969
 
2784
2970
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -2874,6 +3060,9 @@ ol.utrecht-breadcrumb__list {
2874
3060
  outline-offset: 0;
2875
3061
  outline-style: var(--utrecht-focus-outline-style, solid);
2876
3062
  outline-width: var(--utrecht-focus-outline-width, 0);
3063
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
3064
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
3065
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
2877
3066
  }
2878
3067
 
2879
3068
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -3038,6 +3227,7 @@ ol.utrecht-breadcrumb__list {
3038
3227
  }
3039
3228
 
3040
3229
  .utrecht-paragraph--lead, .utrecht-html p.lead {
3230
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
3041
3231
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
3042
3232
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
3043
3233
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
@@ -3070,6 +3260,71 @@ ol.utrecht-breadcrumb__list {
3070
3260
  cursor: var(--utrecht-action-disabled-cursor);
3071
3261
  }
3072
3262
 
3263
+ /**
3264
+ * @license EUPL-1.2
3265
+ * Copyright (c) 2021 Robbert Broersma
3266
+ */
3267
+ /**
3268
+ * @license EUPL-1.2
3269
+ * Copyright (c) 2021 Robbert Broersma
3270
+ */
3271
+ .utrecht-select, .utrecht-html select {
3272
+ -moz-appearance: none;
3273
+ -webkit-appearance: none;
3274
+ appearance: none;
3275
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-input-background-color));
3276
+ background-image: var(--utrecht-select-background-image);
3277
+ background-position: 100%;
3278
+ background-repeat: no-repeat;
3279
+ background-size: 1.4em;
3280
+ border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width)));
3281
+ border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
3282
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-input-border-color));
3283
+ border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
3284
+ border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-input-border-width));
3285
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-input-border-radius, 0));
3286
+ border-style: solid;
3287
+ color: var(--utrecht-select-color, var(--utrecht-form-input-color));
3288
+ font-family: var(--utrecht-select-font-family, var(--utrecht-form-input-font-family));
3289
+ font-size: var(--utrecht-select-font-size, var(--utrecht-form-input-font-size));
3290
+ max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-input-max-inline-size));
3291
+ padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-input-padding-block-end));
3292
+ padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-input-padding-block-start));
3293
+ padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
3294
+ padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
3295
+ width: 100%;
3296
+ }
3297
+
3298
+ .utrecht-select--disabled, .utrecht-select--html-select:disabled, .utrecht-html select:disabled {
3299
+ background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
3300
+ border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
3301
+ color: var(--utrecht-select-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
3302
+ cursor: var(--utrecht-action-disabled-cursor);
3303
+ }
3304
+
3305
+ .utrecht-select--focus, .utrecht-select--html-select:focus, .utrecht-html select:focus {
3306
+ background-color: var(--utrecht-focus-background-color);
3307
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
3308
+ color: var(--utrecht-focus-color, inherit);
3309
+ outline-color: var(--utrecht-focus-outline-color, transparent);
3310
+ outline-offset: 0;
3311
+ outline-style: var(--utrecht-focus-outline-style, solid);
3312
+ outline-width: var(--utrecht-focus-outline-width, 0);
3313
+ background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
3314
+ border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
3315
+ color: var(--utrecht-select-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-select-color, var(--utrecht-form-input-color))));
3316
+ }
3317
+
3318
+ .utrecht-select--invalid, .utrecht-select--html-select:invalid, .utrecht-html select:invalid, .utrecht-select--html-select[aria-invalid=true], .utrecht-html select[aria-invalid=true] {
3319
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-input-background-color))));
3320
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-input-border-color))));
3321
+ border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-input-border-width))));
3322
+ }
3323
+
3324
+ /* stylelint-disable-next-line block-no-empty */
3325
+ .utrecht-select--html-select, .utrecht-html select {
3326
+ /* <select> does not support :read-only */
3327
+ }
3073
3328
  /**
3074
3329
  * @license EUPL-1.2
3075
3330
  * Copyright (c) 2021 Robbert Broersma
@@ -3083,7 +3338,7 @@ ol.utrecht-breadcrumb__list {
3083
3338
  .utrecht-separator, .utrecht-html hr {
3084
3339
  border-color: var(--utrecht-separator-color);
3085
3340
  border-style: solid;
3086
- border-width: 0 0 var(--utrecht-separator-width) 0;
3341
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
3087
3342
  }
3088
3343
 
3089
3344
  .utrecht-separator--distanced, .utrecht-html hr {
@@ -3207,10 +3462,12 @@ ol.utrecht-breadcrumb__list {
3207
3462
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
3208
3463
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
3209
3464
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
3465
+ min-block-size: var(--utrecht-textarea-min-block-size);
3210
3466
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
3211
3467
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
3212
3468
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
3213
3469
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
3470
+ resize: vertical;
3214
3471
  width: 100%;
3215
3472
  }
3216
3473
 
@@ -3235,6 +3492,9 @@ ol.utrecht-breadcrumb__list {
3235
3492
  outline-offset: 0;
3236
3493
  outline-style: var(--utrecht-focus-outline-style, solid);
3237
3494
  outline-width: var(--utrecht-focus-outline-width, 0);
3495
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
3496
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
3497
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
3238
3498
  }
3239
3499
 
3240
3500
  .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
@@ -3330,6 +3590,9 @@ ol.utrecht-breadcrumb__list {
3330
3590
  outline-offset: 0;
3331
3591
  outline-style: var(--utrecht-focus-outline-style, solid);
3332
3592
  outline-width: var(--utrecht-focus-outline-width, 0);
3593
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
3594
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
3595
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
3333
3596
  }
3334
3597
 
3335
3598
  .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
@@ -3403,7 +3666,7 @@ ol.utrecht-breadcrumb__list {
3403
3666
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
3404
3667
  /**
3405
3668
  * Do not edit directly
3406
- * Generated on Sun, 19 Sep 2021 15:47:01 GMT
3669
+ * Generated on Sat, 25 Sep 2021 19:06:23 GMT
3407
3670
  */
3408
3671
  :root {
3409
3672
  --utrecht-searchbar-hover-transform: 1;
@@ -3459,8 +3722,10 @@ ol.utrecht-breadcrumb__list {
3459
3722
  /* basis geel #ffcc00 */
3460
3723
  --utrecht-color-yellow-40: hsl(48 100% 40%);
3461
3724
  /* donker geel */
3725
+ --utrecht-color-grey-95: hsl(0 0% 95%);
3726
+ /* grijs variant voor achtergrond accordion #f2f2f2 */
3462
3727
  --utrecht-color-grey-90: hsl(0 0% 90%);
3463
- /* grijs variant voor achtergrond templates #f2f2f2 */
3728
+ /* grijs variant voor achtergrond templates #e6e6e6 */
3464
3729
  --utrecht-color-grey-80: hsl(0 0% 80%);
3465
3730
  /* grijs variant voor achtergrond content #e5e5e5 */
3466
3731
  --utrecht-color-grey-40: hsl(0 0% 40%);
@@ -3480,7 +3745,7 @@ ol.utrecht-breadcrumb__list {
3480
3745
  --utrecht-color-blue-35: hsl(211 60% 35%);
3481
3746
  /* basis link en knoppen CTA donkerblauw */
3482
3747
  --utrecht-color-blue-30: hsl(211 60% 30%);
3483
- /* basis link en knoppen CTA donkerblauw */
3748
+ /* Deze kleur gebruiken we niet */
3484
3749
  --utrecht-color-blue-20: hsl(211 60% 20%);
3485
3750
  /* basis donkerblauw (OS focus) */
3486
3751
  --utrecht-color-red-40: hsl(0 100% 40%);
@@ -3608,7 +3873,7 @@ ol.utrecht-breadcrumb__list {
3608
3873
  /* Extra Small 2 */
3609
3874
  --utrecht-space-block-3xs: 2px;
3610
3875
  /* Extra Small 3 */
3611
- --utrecht-separator-width: 8px;
3876
+ --utrecht-separator-block-size: 8px;
3612
3877
  --utrecht-select-border-block-end-width: 3px;
3613
3878
  --utrecht-pre-heading-text-transform: uppercase;
3614
3879
  --utrecht-paragraph-line-height: 1.4;
@@ -3711,6 +3976,11 @@ ol.utrecht-breadcrumb__list {
3711
3976
  --utrecht-form-fieldset-legend-line-height: 1.4;
3712
3977
  --utrecht-form-fieldset-legend-font-size: 1rem;
3713
3978
  --utrecht-document-line-height: 1.4;
3979
+ --utrecht-custom-checkbox-focus-border-width: 3px;
3980
+ --utrecht-custom-checkbox-icon-size: 16px;
3981
+ --utrecht-custom-checkbox-size: 24px;
3982
+ --utrecht-custom-checkbox-border-width: 2px;
3983
+ --utrecht-custom-checkbox-border-radius: 2px;
3714
3984
  --utrecht-action-submit-cursor: pointer;
3715
3985
  --utrecht-action-disabled-cursor: not-allowed;
3716
3986
  --utrecht-action-busy-cursor: wait;
@@ -3873,6 +4143,13 @@ ol.utrecht-breadcrumb__list {
3873
4143
  --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
3874
4144
  --utrecht-document-color: var(--utrecht-color-black);
3875
4145
  --utrecht-document-background-color: var(--utrecht-color-white);
4146
+ --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
4147
+ --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-color-red-40);
4148
+ --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
4149
+ --utrecht-custom-checkbox-checked-background-color: var(--utrecht-color-blue-40);
4150
+ --utrecht-custom-checkbox-disabled-background-color: var(--utrecht-color-white);
4151
+ --utrecht-custom-checkbox-disabled-border-width: var(--utrecht-color-grey-40);
4152
+ --utrecht-custom-checkbox-disabled-border-color: var(--utrecht-color-grey-30);
3876
4153
  --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
3877
4154
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
3878
4155
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
@@ -3940,6 +4217,9 @@ ol.utrecht-breadcrumb__list {
3940
4217
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
3941
4218
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
3942
4219
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
4220
+ --utrecht-custom-checkbox-color: var(--utrecht-form-input-color);
4221
+ --utrecht-custom-checkbox-border-color: var(--utrecht-form-input-border-color);
4222
+ --utrecht-custom-checkbox-background-color: var(--utrecht-form-input-background-color);
3943
4223
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
3944
4224
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
3945
4225
  --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
@@ -3963,6 +4243,7 @@ ol.utrecht-breadcrumb__list {
3963
4243
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
3964
4244
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
3965
4245
  --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
4246
+ --utrecht-custom-checkbox-invalid-border-color: var(--utrecht-form-input-invalid-border-color);
3966
4247
  }
3967
4248
 
3968
4249
  .utrecht-page-footer {
package/dist/root-theme.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
6
6
  /**
7
7
  * Do not edit directly
8
- * Generated on Sun, 19 Sep 2021 15:47:01 GMT
8
+ * Generated on Sat, 25 Sep 2021 19:06:23 GMT
9
9
  */
10
10
  :root {
11
11
  --utrecht-searchbar-hover-transform: 1;
@@ -61,8 +61,10 @@
61
61
  /* basis geel #ffcc00 */
62
62
  --utrecht-color-yellow-40: hsl(48 100% 40%);
63
63
  /* donker geel */
64
+ --utrecht-color-grey-95: hsl(0 0% 95%);
65
+ /* grijs variant voor achtergrond accordion #f2f2f2 */
64
66
  --utrecht-color-grey-90: hsl(0 0% 90%);
65
- /* grijs variant voor achtergrond templates #f2f2f2 */
67
+ /* grijs variant voor achtergrond templates #e6e6e6 */
66
68
  --utrecht-color-grey-80: hsl(0 0% 80%);
67
69
  /* grijs variant voor achtergrond content #e5e5e5 */
68
70
  --utrecht-color-grey-40: hsl(0 0% 40%);
@@ -82,7 +84,7 @@
82
84
  --utrecht-color-blue-35: hsl(211 60% 35%);
83
85
  /* basis link en knoppen CTA donkerblauw */
84
86
  --utrecht-color-blue-30: hsl(211 60% 30%);
85
- /* basis link en knoppen CTA donkerblauw */
87
+ /* Deze kleur gebruiken we niet */
86
88
  --utrecht-color-blue-20: hsl(211 60% 20%);
87
89
  /* basis donkerblauw (OS focus) */
88
90
  --utrecht-color-red-40: hsl(0 100% 40%);
@@ -210,7 +212,7 @@
210
212
  /* Extra Small 2 */
211
213
  --utrecht-space-block-3xs: 2px;
212
214
  /* Extra Small 3 */
213
- --utrecht-separator-width: 8px;
215
+ --utrecht-separator-block-size: 8px;
214
216
  --utrecht-select-border-block-end-width: 3px;
215
217
  --utrecht-pre-heading-text-transform: uppercase;
216
218
  --utrecht-paragraph-line-height: 1.4;
@@ -313,6 +315,11 @@
313
315
  --utrecht-form-fieldset-legend-line-height: 1.4;
314
316
  --utrecht-form-fieldset-legend-font-size: 1rem;
315
317
  --utrecht-document-line-height: 1.4;
318
+ --utrecht-custom-checkbox-focus-border-width: 3px;
319
+ --utrecht-custom-checkbox-icon-size: 16px;
320
+ --utrecht-custom-checkbox-size: 24px;
321
+ --utrecht-custom-checkbox-border-width: 2px;
322
+ --utrecht-custom-checkbox-border-radius: 2px;
316
323
  --utrecht-action-submit-cursor: pointer;
317
324
  --utrecht-action-disabled-cursor: not-allowed;
318
325
  --utrecht-action-busy-cursor: wait;
@@ -475,6 +482,13 @@
475
482
  --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
476
483
  --utrecht-document-color: var(--utrecht-color-black);
477
484
  --utrecht-document-background-color: var(--utrecht-color-white);
485
+ --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
486
+ --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-color-red-40);
487
+ --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
488
+ --utrecht-custom-checkbox-checked-background-color: var(--utrecht-color-blue-40);
489
+ --utrecht-custom-checkbox-disabled-background-color: var(--utrecht-color-white);
490
+ --utrecht-custom-checkbox-disabled-border-width: var(--utrecht-color-grey-40);
491
+ --utrecht-custom-checkbox-disabled-border-color: var(--utrecht-color-grey-30);
478
492
  --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
479
493
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
480
494
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
@@ -542,6 +556,9 @@
542
556
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
543
557
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
544
558
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
559
+ --utrecht-custom-checkbox-color: var(--utrecht-form-input-color);
560
+ --utrecht-custom-checkbox-border-color: var(--utrecht-form-input-border-color);
561
+ --utrecht-custom-checkbox-background-color: var(--utrecht-form-input-background-color);
545
562
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
546
563
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
547
564
  --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
@@ -565,6 +582,7 @@
565
582
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
566
583
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
567
584
  --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
585
+ --utrecht-custom-checkbox-invalid-border-color: var(--utrecht-form-input-invalid-border-color);
568
586
  }
569
587
 
570
588
  .utrecht-page-footer {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.91",
2
+ "version": "1.0.0-alpha.95",
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.84",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.88",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.41.1"
@@ -26,5 +26,5 @@
26
26
  "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
27
27
  "clean": "rimraf dist/"
28
28
  },
29
- "gitHead": "c30456a1258b2878f8c9fbfed45d309b457492ba"
29
+ "gitHead": "377e050fe607e623cf0b4e22967530b1583b83b7"
30
30
  }
package/src/bem.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  @import "../../../components/form-field-radio-group/bem";
35
35
  @import "../../../components/form-fieldset/bem";
36
36
  @import "../../../components/form-label/bem";
37
+ @import "../../../components/form-toggle/bem";
37
38
  @import "../../../components/heading-1/bem";
38
39
  @import "../../../components/heading-2/bem";
39
40
  @import "../../../components/heading-3/bem";
@@ -51,6 +52,7 @@
51
52
  @import "../../../components/paragraph/bem";
52
53
  @import "../../../components/radio-button/bem";
53
54
  @import "../../../components/search-bar/bem";
55
+ @import "../../../components/select/bem";
54
56
  @import "../../../components/separator/bem";
55
57
  @import "../../../components/table/bem";
56
58
  @import "../../../components/textarea/bem";
package/src/html.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  @import "../../../components/ordered-list/html";
25
25
  @import "../../../components/paragraph/html";
26
26
  @import "../../../components/radio-button/html";
27
+ @import "../../../components/select/html";
27
28
  @import "../../../components/separator/html";
28
29
  @import "../../../components/table/html";
29
30
  @import "../../../components/textarea/html";