dso-toolkit 95.1.0 → 96.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/dso.css +259 -95
  3. package/dist/dso.css.map +1 -1
  4. package/dist/dso.min.css +1 -1
  5. package/dist/dso.min.css.map +1 -1
  6. package/dist/index.js +0 -2
  7. package/package.json +1 -1
  8. package/src/dso.scss +0 -4
  9. package/src/global/mixins/set-colors.mixin.scss +18 -3
  10. package/src/components/attachments-counter/_index.scss +0 -1
  11. package/src/components/attachments-counter/attachments-counter.mixins.scss +0 -9
  12. package/src/components/attachments-counter/attachments-counter.scss +0 -14
  13. package/src/components/card-container/_index.scss +0 -1
  14. package/src/components/card-container/card-container.scss +0 -13
  15. package/src/components/card-container/card-container.variables.scss +0 -1
  16. package/src/components/card-grid/card-grid.scss +0 -25
  17. package/src/components/card-list/_index.scss +0 -1
  18. package/src/components/card-list/card-list.scss +0 -16
  19. package/src/components/card-list/card-list.variables.scss +0 -4
package/CHANGELOG.md CHANGED
@@ -5,6 +5,32 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
5
5
 
6
6
  ## Next
7
7
 
8
+ ## 🪁 Release 96.0.0 - 2026-06-01
9
+
10
+ ### Added
11
+ * Advanced Select: delegatesFocus ([#3683](https://github.com/dso-toolkit/dso-toolkit/issues/3683))
12
+ * Icon Button: Toggled state toevoegen ([#3658](https://github.com/dso-toolkit/dso-toolkit/issues/3658))
13
+
14
+ ### Changed
15
+ * Header: Eigen implementatie Dropdown Menu ([#3517](https://github.com/dso-toolkit/dso-toolkit/issues/3517))
16
+ * Map Layer: Visuele aanpassingen ([#3772](https://github.com/dso-toolkit/dso-toolkit/issues/3772))
17
+
18
+ ### Deprecated
19
+ * Info Button: Deprecate HTML/CSS implementatie ([#3678](https://github.com/dso-toolkit/dso-toolkit/issues/3678))
20
+
21
+ ### Fixed
22
+ * Modal: geen role="document" ([#3783](https://github.com/dso-toolkit/dso-toolkit/issues/3783))
23
+
24
+ ### Removed
25
+ * **BREAKING** Card Grid & Card List: Remove ([#3675](https://github.com/dso-toolkit/dso-toolkit/issues/3675))
26
+ * **BREAKING** Attachments Counter: Remove HTML/CSS implementatie ([#3671](https://github.com/dso-toolkit/dso-toolkit/issues/3671))
27
+
28
+ ## 🥕 Release 95.2.0 - 2026-05-19
29
+
30
+ ### Deprecated
31
+ * Alert: Deprecate HTML/CSS implementatie ([#3668](https://github.com/dso-toolkit/dso-toolkit/issues/3668))
32
+ * Attachments Counter: Deprecate HTML/CSS implementatie ([#3670](https://github.com/dso-toolkit/dso-toolkit/issues/3670))
33
+
8
34
  ## 🩵 Release 95.1.0 - 2026-05-18
9
35
 
10
36
  ### Changed
package/dist/dso.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --dso-toolkit-version: "95.1.0";
2
+ --dso-toolkit-version: "96.0.0";
3
3
  }
4
4
 
5
5
  @font-face {
@@ -246,9 +246,16 @@ dso-action-list .dso-rich-content .h5 {
246
246
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
247
247
  }
248
248
  .alert.alert-success {
249
+ --_dso-icon-button-secondary-active-color: #fff;
250
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
251
+ --_dso-icon-button-secondary-toggled-color: #fff;
252
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
253
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
249
254
  --_dso-icon-button-tertiary-color: #191919;
250
255
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
251
- --_dso-icon-button-tertiary-active-color: #173521;
256
+ --_dso-icon-button-tertiary-active-color: #1f472c;
257
+ --_dso-icon-button-tertiary-toggled-color: #275937;
258
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
252
259
  --_dso-icon-button-tertiary-disabled-color: #999;
253
260
  --_dso-button-tertiary-color: #191919;
254
261
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -279,9 +286,16 @@ dso-action-list .dso-rich-content .h5 {
279
286
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
280
287
  }
281
288
  .alert.alert-error {
289
+ --_dso-icon-button-secondary-active-color: #fff;
290
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
291
+ --_dso-icon-button-secondary-toggled-color: #fff;
292
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
293
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
282
294
  --_dso-icon-button-tertiary-color: #191919;
283
295
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
284
- --_dso-icon-button-tertiary-active-color: #173521;
296
+ --_dso-icon-button-tertiary-active-color: #1f472c;
297
+ --_dso-icon-button-tertiary-toggled-color: #275937;
298
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
285
299
  --_dso-icon-button-tertiary-disabled-color: #999;
286
300
  --_dso-button-tertiary-color: #191919;
287
301
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -312,9 +326,16 @@ dso-action-list .dso-rich-content .h5 {
312
326
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
313
327
  }
314
328
  .alert.alert-warning {
329
+ --_dso-icon-button-secondary-active-color: #fff;
330
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
331
+ --_dso-icon-button-secondary-toggled-color: #fff;
332
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
333
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
315
334
  --_dso-icon-button-tertiary-color: #191919;
316
335
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
317
- --_dso-icon-button-tertiary-active-color: #173521;
336
+ --_dso-icon-button-tertiary-active-color: #1f472c;
337
+ --_dso-icon-button-tertiary-toggled-color: #275937;
338
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
318
339
  --_dso-icon-button-tertiary-disabled-color: #999;
319
340
  --_dso-button-tertiary-color: #191919;
320
341
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -345,9 +366,16 @@ dso-action-list .dso-rich-content .h5 {
345
366
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
346
367
  }
347
368
  .alert.alert-info {
369
+ --_dso-icon-button-secondary-active-color: #fff;
370
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
371
+ --_dso-icon-button-secondary-toggled-color: #fff;
372
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
373
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
348
374
  --_dso-icon-button-tertiary-color: #191919;
349
375
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
350
- --_dso-icon-button-tertiary-active-color: #173521;
376
+ --_dso-icon-button-tertiary-active-color: #1f472c;
377
+ --_dso-icon-button-tertiary-toggled-color: #275937;
378
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
351
379
  --_dso-icon-button-tertiary-disabled-color: #999;
352
380
  --_dso-button-tertiary-color: #191919;
353
381
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -483,23 +511,6 @@ dso-action-list .dso-rich-content .h5 {
483
511
  text-align: end;
484
512
  }
485
513
 
486
- .dso-attachments {
487
- color: var(--dso-attachments-counter-color, #666);
488
- display: inline-block;
489
- font-weight: 400;
490
- text-decoration: none;
491
- white-space: nowrap;
492
- }
493
- .dso-attachments::after {
494
- background: url("./di.svg#paperclip-grijs") no-repeat center;
495
- background-size: cover;
496
- block-size: 24px;
497
- vertical-align: top;
498
- inline-size: 24px;
499
- content: "";
500
- display: inline-block;
501
- }
502
-
503
514
  .dso-banner {
504
515
  padding-block: 16px;
505
516
  padding-inline: 0;
@@ -626,9 +637,16 @@ dso-action-list .dso-rich-content .h5 {
626
637
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
627
638
  }
628
639
  .dso-banner.alert-success {
640
+ --_dso-icon-button-secondary-active-color: #fff;
641
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
642
+ --_dso-icon-button-secondary-toggled-color: #fff;
643
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
644
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
629
645
  --_dso-icon-button-tertiary-color: #191919;
630
646
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
631
- --_dso-icon-button-tertiary-active-color: #173521;
647
+ --_dso-icon-button-tertiary-active-color: #1f472c;
648
+ --_dso-icon-button-tertiary-toggled-color: #275937;
649
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
632
650
  --_dso-icon-button-tertiary-disabled-color: #999;
633
651
  --_dso-button-tertiary-color: #191919;
634
652
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -667,9 +685,16 @@ dso-action-list .dso-rich-content .h5 {
667
685
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
668
686
  }
669
687
  .dso-banner.alert-error {
688
+ --_dso-icon-button-secondary-active-color: #fff;
689
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
690
+ --_dso-icon-button-secondary-toggled-color: #fff;
691
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
692
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
670
693
  --_dso-icon-button-tertiary-color: #191919;
671
694
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
672
- --_dso-icon-button-tertiary-active-color: #173521;
695
+ --_dso-icon-button-tertiary-active-color: #1f472c;
696
+ --_dso-icon-button-tertiary-toggled-color: #275937;
697
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
673
698
  --_dso-icon-button-tertiary-disabled-color: #999;
674
699
  --_dso-button-tertiary-color: #191919;
675
700
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -708,9 +733,16 @@ dso-action-list .dso-rich-content .h5 {
708
733
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
709
734
  }
710
735
  .dso-banner.alert-info {
736
+ --_dso-icon-button-secondary-active-color: #fff;
737
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
738
+ --_dso-icon-button-secondary-toggled-color: #fff;
739
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
740
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
711
741
  --_dso-icon-button-tertiary-color: #191919;
712
742
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
713
- --_dso-icon-button-tertiary-active-color: #173521;
743
+ --_dso-icon-button-tertiary-active-color: #1f472c;
744
+ --_dso-icon-button-tertiary-toggled-color: #275937;
745
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
714
746
  --_dso-icon-button-tertiary-disabled-color: #999;
715
747
  --_dso-button-tertiary-color: #191919;
716
748
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -749,9 +781,16 @@ dso-action-list .dso-rich-content .h5 {
749
781
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
750
782
  }
751
783
  .dso-banner.alert-warning {
784
+ --_dso-icon-button-secondary-active-color: #fff;
785
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
786
+ --_dso-icon-button-secondary-toggled-color: #fff;
787
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
788
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
752
789
  --_dso-icon-button-tertiary-color: #191919;
753
790
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
754
- --_dso-icon-button-tertiary-active-color: #173521;
791
+ --_dso-icon-button-tertiary-active-color: #1f472c;
792
+ --_dso-icon-button-tertiary-toggled-color: #275937;
793
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
755
794
  --_dso-icon-button-tertiary-disabled-color: #999;
756
795
  --_dso-button-tertiary-color: #191919;
757
796
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -892,9 +931,16 @@ dso-banner[status=success] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is
892
931
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
893
932
  }
894
933
  dso-banner[status=success] {
934
+ --_dso-icon-button-secondary-active-color: #fff;
935
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
936
+ --_dso-icon-button-secondary-toggled-color: #fff;
937
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
938
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
895
939
  --_dso-icon-button-tertiary-color: #191919;
896
940
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
897
- --_dso-icon-button-tertiary-active-color: #173521;
941
+ --_dso-icon-button-tertiary-active-color: #1f472c;
942
+ --_dso-icon-button-tertiary-toggled-color: #275937;
943
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
898
944
  --_dso-icon-button-tertiary-disabled-color: #999;
899
945
  --_dso-button-tertiary-color: #191919;
900
946
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -933,9 +979,16 @@ dso-banner[status=error] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([
933
979
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
934
980
  }
935
981
  dso-banner[status=error] {
982
+ --_dso-icon-button-secondary-active-color: #fff;
983
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
984
+ --_dso-icon-button-secondary-toggled-color: #fff;
985
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
986
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
936
987
  --_dso-icon-button-tertiary-color: #191919;
937
988
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
938
- --_dso-icon-button-tertiary-active-color: #173521;
989
+ --_dso-icon-button-tertiary-active-color: #1f472c;
990
+ --_dso-icon-button-tertiary-toggled-color: #275937;
991
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
939
992
  --_dso-icon-button-tertiary-disabled-color: #999;
940
993
  --_dso-button-tertiary-color: #191919;
941
994
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -974,9 +1027,16 @@ dso-banner[status=info] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([h
974
1027
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
975
1028
  }
976
1029
  dso-banner[status=info] {
1030
+ --_dso-icon-button-secondary-active-color: #fff;
1031
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
1032
+ --_dso-icon-button-secondary-toggled-color: #fff;
1033
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
1034
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
977
1035
  --_dso-icon-button-tertiary-color: #191919;
978
1036
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
979
- --_dso-icon-button-tertiary-active-color: #173521;
1037
+ --_dso-icon-button-tertiary-active-color: #1f472c;
1038
+ --_dso-icon-button-tertiary-toggled-color: #275937;
1039
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
980
1040
  --_dso-icon-button-tertiary-disabled-color: #999;
981
1041
  --_dso-button-tertiary-color: #191919;
982
1042
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -1015,9 +1075,16 @@ dso-banner[status=warning] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is
1015
1075
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
1016
1076
  }
1017
1077
  dso-banner[status=warning] {
1078
+ --_dso-icon-button-secondary-active-color: #fff;
1079
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
1080
+ --_dso-icon-button-secondary-toggled-color: #fff;
1081
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
1082
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
1018
1083
  --_dso-icon-button-tertiary-color: #191919;
1019
1084
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
1020
- --_dso-icon-button-tertiary-active-color: #173521;
1085
+ --_dso-icon-button-tertiary-active-color: #1f472c;
1086
+ --_dso-icon-button-tertiary-toggled-color: #275937;
1087
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
1021
1088
  --_dso-icon-button-tertiary-disabled-color: #999;
1022
1089
  --_dso-button-tertiary-color: #191919;
1023
1090
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2209,50 +2276,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
2209
2276
  flex-wrap: nowrap;
2210
2277
  }
2211
2278
 
2212
- dso-card-container[mode=list] > li {
2213
- border-block-start: 1px solid #ccc;
2214
- }
2215
-
2216
- dso-card-container[mode=grid] dso-card {
2217
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
2218
- }
2219
-
2220
- .dso-card-grid {
2221
- display: grid;
2222
- gap: 32px;
2223
- grid-auto-rows: 1fr;
2224
- }
2225
- .dso-card-grid .dso-card {
2226
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
2227
- }
2228
- @media (max-width: 991px) {
2229
- .dso-card-grid {
2230
- grid-template-columns: repeat(1, 1fr);
2231
- }
2232
- }
2233
- @media (min-width: 992px) and (max-width: 1199px) {
2234
- .dso-card-grid {
2235
- grid-template-columns: repeat(2, 1fr);
2236
- }
2237
- }
2238
- @media (min-width: 1200px) {
2239
- .dso-card-grid {
2240
- grid-template-columns: repeat(3, 1fr);
2241
- }
2242
- }
2243
-
2244
- ul.dso-card-list,
2245
- ol.dso-card-list {
2246
- padding-inline-start: 0;
2247
- list-style: none;
2248
- border-block-end: 1px solid #ccc;
2249
- margin-block-start: -1px;
2250
- }
2251
- ul.dso-card-list > li,
2252
- ol.dso-card-list > li {
2253
- border-block-start: 1px solid #ccc;
2254
- }
2255
-
2256
2279
  code {
2257
2280
  background-color: #f9f2f4;
2258
2281
  border-radius: 4px;
@@ -2685,9 +2708,16 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
2685
2708
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
2686
2709
  }
2687
2710
  del {
2711
+ --_dso-icon-button-secondary-active-color: #fff;
2712
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
2713
+ --_dso-icon-button-secondary-toggled-color: #fff;
2714
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
2715
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
2688
2716
  --_dso-icon-button-tertiary-color: #191919;
2689
2717
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
2690
- --_dso-icon-button-tertiary-active-color: #173521;
2718
+ --_dso-icon-button-tertiary-active-color: #1f472c;
2719
+ --_dso-icon-button-tertiary-toggled-color: #275937;
2720
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
2691
2721
  --_dso-icon-button-tertiary-disabled-color: #999;
2692
2722
  --_dso-button-tertiary-color: #191919;
2693
2723
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2842,9 +2872,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
2842
2872
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
2843
2873
  }
2844
2874
  .dso-document-header {
2875
+ --_dso-icon-button-secondary-active-color: #fff;
2876
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
2877
+ --_dso-icon-button-secondary-toggled-color: #fff;
2878
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
2879
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
2845
2880
  --_dso-icon-button-tertiary-color: #191919;
2846
2881
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
2847
- --_dso-icon-button-tertiary-active-color: #173521;
2882
+ --_dso-icon-button-tertiary-active-color: #1f472c;
2883
+ --_dso-icon-button-tertiary-toggled-color: #275937;
2884
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
2848
2885
  --_dso-icon-button-tertiary-disabled-color: #999;
2849
2886
  --_dso-button-tertiary-color: #191919;
2850
2887
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2893,9 +2930,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
2893
2930
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
2894
2931
  }
2895
2932
  .dso-document-header.dso-variant-ontwerp .dso-document-header-status {
2933
+ --_dso-icon-button-secondary-active-color: #fff;
2934
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
2935
+ --_dso-icon-button-secondary-toggled-color: #fff;
2936
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
2937
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
2896
2938
  --_dso-icon-button-tertiary-color: #191919;
2897
2939
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
2898
- --_dso-icon-button-tertiary-active-color: #173521;
2940
+ --_dso-icon-button-tertiary-active-color: #1f472c;
2941
+ --_dso-icon-button-tertiary-toggled-color: #275937;
2942
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
2899
2943
  --_dso-icon-button-tertiary-disabled-color: #999;
2900
2944
  --_dso-button-tertiary-color: #191919;
2901
2945
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -2926,8 +2970,16 @@ dso-document-component[not-applicable] dso-document-component[not-applicable] {
2926
2970
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
2927
2971
  }
2928
2972
  .dso-document-header.dso-variant-besluitversie .dso-document-header-status {
2929
- --_dso-icon-button-tertiary-color: #fff;
2930
- --_dso-icon-button-tertiary-hover-color: #e5e5e5;
2973
+ --_dso-icon-button-secondary-active-color: #fff;
2974
+ --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
2975
+ --_dso-icon-button-secondary-toggled-color: #fff;
2976
+ --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);
2977
+ --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);
2978
+ --_dso-icon-button-tertiary-color: #f2f2f2;
2979
+ --_dso-icon-button-tertiary-hover-color: #fff;
2980
+ --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);
2981
+ --_dso-icon-button-tertiary-toggled-color: #fff;
2982
+ --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);
2931
2983
  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
2932
2984
  --_dso-button-primary-background-color: #fff;
2933
2985
  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
@@ -3728,9 +3780,16 @@ footer a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"],
3728
3780
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
3729
3781
  }
3730
3782
  footer {
3783
+ --_dso-icon-button-secondary-active-color: #fff;
3784
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
3785
+ --_dso-icon-button-secondary-toggled-color: #fff;
3786
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
3787
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
3731
3788
  --_dso-icon-button-tertiary-color: #191919;
3732
3789
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
3733
- --_dso-icon-button-tertiary-active-color: #173521;
3790
+ --_dso-icon-button-tertiary-active-color: #1f472c;
3791
+ --_dso-icon-button-tertiary-toggled-color: #275937;
3792
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
3734
3793
  --_dso-icon-button-tertiary-disabled-color: #999;
3735
3794
  --_dso-button-tertiary-color: #191919;
3736
3795
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5511,9 +5570,16 @@ h6,
5511
5570
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5512
5571
  }
5513
5572
  .dso-highlight-box:not(.dso-white, .dso-yellow, .dso-border, .dso-green) {
5573
+ --_dso-icon-button-secondary-active-color: #fff;
5574
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5575
+ --_dso-icon-button-secondary-toggled-color: #fff;
5576
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5577
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5514
5578
  --_dso-icon-button-tertiary-color: #191919;
5515
5579
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5516
- --_dso-icon-button-tertiary-active-color: #173521;
5580
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5581
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5582
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5517
5583
  --_dso-icon-button-tertiary-disabled-color: #999;
5518
5584
  --_dso-button-tertiary-color: #191919;
5519
5585
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5544,9 +5610,16 @@ h6,
5544
5610
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5545
5611
  }
5546
5612
  .dso-highlight-box.dso-grey {
5613
+ --_dso-icon-button-secondary-active-color: #fff;
5614
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5615
+ --_dso-icon-button-secondary-toggled-color: #fff;
5616
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5617
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5547
5618
  --_dso-icon-button-tertiary-color: #191919;
5548
5619
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5549
- --_dso-icon-button-tertiary-active-color: #173521;
5620
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5621
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5622
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5550
5623
  --_dso-icon-button-tertiary-disabled-color: #999;
5551
5624
  --_dso-button-tertiary-color: #191919;
5552
5625
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5585,9 +5658,16 @@ h6,
5585
5658
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5586
5659
  }
5587
5660
  .dso-highlight-box.dso-yellow {
5661
+ --_dso-icon-button-secondary-active-color: #fff;
5662
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5663
+ --_dso-icon-button-secondary-toggled-color: #fff;
5664
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5665
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5588
5666
  --_dso-icon-button-tertiary-color: #191919;
5589
5667
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5590
- --_dso-icon-button-tertiary-active-color: #173521;
5668
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5669
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5670
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5591
5671
  --_dso-icon-button-tertiary-disabled-color: #999;
5592
5672
  --_dso-button-tertiary-color: #191919;
5593
5673
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5618,9 +5698,16 @@ h6,
5618
5698
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5619
5699
  }
5620
5700
  .dso-highlight-box.dso-green {
5701
+ --_dso-icon-button-secondary-active-color: #fff;
5702
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5703
+ --_dso-icon-button-secondary-toggled-color: #fff;
5704
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5705
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5621
5706
  --_dso-icon-button-tertiary-color: #191919;
5622
5707
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5623
- --_dso-icon-button-tertiary-active-color: #173521;
5708
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5709
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5710
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5624
5711
  --_dso-icon-button-tertiary-disabled-color: #999;
5625
5712
  --_dso-button-tertiary-color: #191919;
5626
5713
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5768,9 +5855,16 @@ dso-highlight-box:not([white], [yellow], [border], [green]) a:not(.dso-primary,
5768
5855
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5769
5856
  }
5770
5857
  dso-highlight-box:not([white], [yellow], [border], [green]) {
5858
+ --_dso-icon-button-secondary-active-color: #fff;
5859
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5860
+ --_dso-icon-button-secondary-toggled-color: #fff;
5861
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5862
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5771
5863
  --_dso-icon-button-tertiary-color: #191919;
5772
5864
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5773
- --_dso-icon-button-tertiary-active-color: #173521;
5865
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5866
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5867
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5774
5868
  --_dso-icon-button-tertiary-disabled-color: #999;
5775
5869
  --_dso-button-tertiary-color: #191919;
5776
5870
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5801,9 +5895,16 @@ dso-highlight-box[grey] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([h
5801
5895
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5802
5896
  }
5803
5897
  dso-highlight-box[grey] {
5898
+ --_dso-icon-button-secondary-active-color: #fff;
5899
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5900
+ --_dso-icon-button-secondary-toggled-color: #fff;
5901
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5902
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5804
5903
  --_dso-icon-button-tertiary-color: #191919;
5805
5904
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5806
- --_dso-icon-button-tertiary-active-color: #173521;
5905
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5906
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5907
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5807
5908
  --_dso-icon-button-tertiary-disabled-color: #999;
5808
5909
  --_dso-button-tertiary-color: #191919;
5809
5910
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5842,9 +5943,16 @@ dso-highlight-box[yellow] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(
5842
5943
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5843
5944
  }
5844
5945
  dso-highlight-box[yellow] {
5946
+ --_dso-icon-button-secondary-active-color: #fff;
5947
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5948
+ --_dso-icon-button-secondary-toggled-color: #fff;
5949
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5950
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5845
5951
  --_dso-icon-button-tertiary-color: #191919;
5846
5952
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5847
- --_dso-icon-button-tertiary-active-color: #173521;
5953
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5954
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5955
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5848
5956
  --_dso-icon-button-tertiary-disabled-color: #999;
5849
5957
  --_dso-button-tertiary-color: #191919;
5850
5958
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -5875,9 +5983,16 @@ dso-highlight-box[green] a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([
5875
5983
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
5876
5984
  }
5877
5985
  dso-highlight-box[green] {
5986
+ --_dso-icon-button-secondary-active-color: #fff;
5987
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
5988
+ --_dso-icon-button-secondary-toggled-color: #fff;
5989
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
5990
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
5878
5991
  --_dso-icon-button-tertiary-color: #191919;
5879
5992
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
5880
- --_dso-icon-button-tertiary-active-color: #173521;
5993
+ --_dso-icon-button-tertiary-active-color: #1f472c;
5994
+ --_dso-icon-button-tertiary-toggled-color: #275937;
5995
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
5881
5996
  --_dso-icon-button-tertiary-disabled-color: #999;
5882
5997
  --_dso-button-tertiary-color: #191919;
5883
5998
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6049,9 +6164,16 @@ img {
6049
6164
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6050
6165
  }
6051
6166
  .dso-info:not(.dso-accordion-section) {
6167
+ --_dso-icon-button-secondary-active-color: #fff;
6168
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6169
+ --_dso-icon-button-secondary-toggled-color: #fff;
6170
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6171
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6052
6172
  --_dso-icon-button-tertiary-color: #191919;
6053
6173
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6054
- --_dso-icon-button-tertiary-active-color: #173521;
6174
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6175
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6176
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6055
6177
  --_dso-icon-button-tertiary-disabled-color: #999;
6056
6178
  --_dso-button-tertiary-color: #191919;
6057
6179
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6106,9 +6228,16 @@ img {
6106
6228
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6107
6229
  }
6108
6230
  .dso-info:not(.dso-accordion-section) {
6231
+ --_dso-icon-button-secondary-active-color: #fff;
6232
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6233
+ --_dso-icon-button-secondary-toggled-color: #fff;
6234
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6235
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6109
6236
  --_dso-icon-button-tertiary-color: #191919;
6110
6237
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6111
- --_dso-icon-button-tertiary-active-color: #173521;
6238
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6239
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6240
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6112
6241
  --_dso-icon-button-tertiary-disabled-color: #999;
6113
6242
  --_dso-button-tertiary-color: #191919;
6114
6243
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6181,9 +6310,16 @@ dso-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"]
6181
6310
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6182
6311
  }
6183
6312
  dso-info {
6313
+ --_dso-icon-button-secondary-active-color: #fff;
6314
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6315
+ --_dso-icon-button-secondary-toggled-color: #fff;
6316
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6317
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6184
6318
  --_dso-icon-button-tertiary-color: #191919;
6185
6319
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6186
- --_dso-icon-button-tertiary-active-color: #173521;
6320
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6321
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6322
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6187
6323
  --_dso-icon-button-tertiary-disabled-color: #999;
6188
6324
  --_dso-button-tertiary-color: #191919;
6189
6325
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -6294,9 +6430,16 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [hr
6294
6430
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
6295
6431
  }
6296
6432
  ins {
6433
+ --_dso-icon-button-secondary-active-color: #fff;
6434
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
6435
+ --_dso-icon-button-secondary-toggled-color: #fff;
6436
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
6437
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
6297
6438
  --_dso-icon-button-tertiary-color: #191919;
6298
6439
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
6299
- --_dso-icon-button-tertiary-active-color: #173521;
6440
+ --_dso-icon-button-tertiary-active-color: #1f472c;
6441
+ --_dso-icon-button-tertiary-toggled-color: #275937;
6442
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
6300
6443
  --_dso-icon-button-tertiary-disabled-color: #999;
6301
6444
  --_dso-button-tertiary-color: #191919;
6302
6445
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -7189,9 +7332,16 @@ optgroup {
7189
7332
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
7190
7333
  }
7191
7334
  .dso-shopping-cart .dso-status {
7335
+ --_dso-icon-button-secondary-active-color: #fff;
7336
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
7337
+ --_dso-icon-button-secondary-toggled-color: #fff;
7338
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
7339
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
7192
7340
  --_dso-icon-button-tertiary-color: #191919;
7193
7341
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7194
- --_dso-icon-button-tertiary-active-color: #173521;
7342
+ --_dso-icon-button-tertiary-active-color: #1f472c;
7343
+ --_dso-icon-button-tertiary-toggled-color: #275937;
7344
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
7195
7345
  --_dso-icon-button-tertiary-disabled-color: #999;
7196
7346
  --_dso-button-tertiary-color: #191919;
7197
7347
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -7251,9 +7401,16 @@ optgroup {
7251
7401
  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
7252
7402
  }
7253
7403
  .dso-shopping-cart .dso-contents {
7404
+ --_dso-icon-button-secondary-active-color: #fff;
7405
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
7406
+ --_dso-icon-button-secondary-toggled-color: #fff;
7407
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
7408
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
7254
7409
  --_dso-icon-button-tertiary-color: #191919;
7255
7410
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7256
- --_dso-icon-button-tertiary-active-color: #173521;
7411
+ --_dso-icon-button-tertiary-active-color: #1f472c;
7412
+ --_dso-icon-button-tertiary-toggled-color: #275937;
7413
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
7257
7414
  --_dso-icon-button-tertiary-disabled-color: #999;
7258
7415
  --_dso-button-tertiary-color: #191919;
7259
7416
  --_dso-button-tertiary-hover-color: #4c4c4c;
@@ -7306,9 +7463,16 @@ optgroup {
7306
7463
  }
7307
7464
  .dso-shopping-cart ul,
7308
7465
  .dso-shopping-cart ol {
7466
+ --_dso-icon-button-secondary-active-color: #fff;
7467
+ --_dso-icon-button-secondary-active-background-color: #1f472c;
7468
+ --_dso-icon-button-secondary-toggled-color: #fff;
7469
+ --_dso-icon-button-secondary-toggled-background-color: #275937;
7470
+ --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
7309
7471
  --_dso-icon-button-tertiary-color: #191919;
7310
7472
  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
7311
- --_dso-icon-button-tertiary-active-color: #173521;
7473
+ --_dso-icon-button-tertiary-active-color: #1f472c;
7474
+ --_dso-icon-button-tertiary-toggled-color: #275937;
7475
+ --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
7312
7476
  --_dso-icon-button-tertiary-disabled-color: #999;
7313
7477
  --_dso-button-tertiary-color: #191919;
7314
7478
  --_dso-button-tertiary-hover-color: #4c4c4c;