@utrecht/design-tokens 4.2.0 → 5.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 (55) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/_mixin-theme.scss +40 -4
  3. package/dist/_mixin.scss +40 -4
  4. package/dist/_variables.scss +40 -4
  5. package/dist/dark/_mixin-theme.scss +40 -4
  6. package/dist/dark/_mixin.scss +40 -4
  7. package/dist/dark/_variables.scss +40 -4
  8. package/dist/dark/index.cjs +40 -4
  9. package/dist/dark/index.css +40 -4
  10. package/dist/dark/index.d.ts +38 -2
  11. package/dist/dark/index.flat.json +40 -4
  12. package/dist/dark/index.json +655 -31
  13. package/dist/dark/index.mjs +40 -4
  14. package/dist/dark/index.tokens.json +95 -33
  15. package/dist/dark/list.json +655 -31
  16. package/dist/dark/list.mjs +655 -31
  17. package/dist/dark/property.css +4 -1
  18. package/dist/dark/root.css +40 -4
  19. package/dist/dark/theme-prince-xml.css +40 -4
  20. package/dist/dark/theme.css +40 -4
  21. package/dist/dark/tokens.cjs +752 -102
  22. package/dist/dark/tokens.d.ts +83 -21
  23. package/dist/dark/tokens.json +753 -103
  24. package/dist/dark/variables.cjs +40 -4
  25. package/dist/dark/variables.css +40 -4
  26. package/dist/dark/variables.d.ts +38 -2
  27. package/dist/dark/variables.json +40 -4
  28. package/dist/dark/variables.less +40 -4
  29. package/dist/dark/variables.mjs +40 -4
  30. package/dist/index.cjs +40 -4
  31. package/dist/index.css +80 -8
  32. package/dist/index.d.ts +38 -2
  33. package/dist/index.flat.json +40 -4
  34. package/dist/index.json +655 -31
  35. package/dist/index.mjs +40 -4
  36. package/dist/index.tokens.json +95 -33
  37. package/dist/list.json +655 -31
  38. package/dist/list.mjs +655 -31
  39. package/dist/property.css +4 -1
  40. package/dist/root.css +40 -4
  41. package/dist/theme-prince-xml.css +40 -4
  42. package/dist/theme.css +40 -4
  43. package/dist/tokens.cjs +752 -102
  44. package/dist/tokens.d.ts +83 -21
  45. package/dist/tokens.json +753 -103
  46. package/dist/variables.cjs +40 -4
  47. package/dist/variables.css +40 -4
  48. package/dist/variables.d.ts +38 -2
  49. package/dist/variables.json +40 -4
  50. package/dist/variables.less +40 -4
  51. package/dist/variables.mjs +40 -4
  52. package/package.json +1 -1
  53. package/src/component/utrecht/navigation.tokens.json +25 -6
  54. package/src/component/utrecht/status-badge.tokens.json +75 -0
  55. package/src/component/utrecht/badge-status.tokens.json +0 -8
package/dist/dark/variables.cjs CHANGED
@@ -731,14 +731,16 @@ module.exports = {
731
731
  "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
732
732
  "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
733
733
  "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
734
- "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
735
734
  "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
736
735
  "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
737
736
  "utrechtNavigationLinkBorderInlineEndWidth": "1px",
738
737
  "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
739
- "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
738
+ "utrechtNavigationLinkFocusColor": "hsl(0 0% 100%)",
739
+ "utrechtNavigationLinkFocusBackgroundColor": "hsl(0 0% 0%)",
740
740
  "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
741
- "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
741
+ "utrechtNavigationLinkFocusVisibleColor": "hsl(0 0% 0%)",
742
+ "utrechtNavigationLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
743
+ "utrechtNavigationLinkFocusVisibleTextDecorationThickness": "3px",
742
744
  "utrechtNavigationLinkFontWeight": "400",
743
745
  "utrechtNavigationLinkGap": "8px",
744
746
  "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
@@ -749,13 +751,16 @@ module.exports = {
749
751
  "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
750
752
  "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
751
753
  "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
752
- "utrechtNavigationLinkMobileHoverFontWeight": "700",
754
+ "utrechtNavigationLinkMobileHoverFontWeight": "400",
753
755
  "utrechtNavigationLinkMobileMinBlockSize": "44px",
754
756
  "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
755
757
  "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
756
758
  "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
757
759
  "utrechtNavigationLinkMobileTransitionDuration": "300ms",
758
760
  "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
761
+ "utrechtNavigationLinkMobileActiveColor": "hsl(211 60% 35%)",
762
+ "utrechtNavigationLinkMobileFocusBackgroundColor": "hsl(0 0% 100%)",
763
+ "utrechtNavigationLinkMobileFocusColor": "hsl(211 60% 35%)",
759
764
  "utrechtNavigationLinkPaddingBlockEnd": "16px",
760
765
  "utrechtNavigationLinkPaddingBlockStart": "16px",
761
766
  "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
@@ -954,6 +959,37 @@ module.exports = {
954
959
  "utrechtSpotlightSectionWarningColor": "hsl(0 0% 15%)",
955
960
  "utrechtSpotlightSectionErrorBackgroundColor": "hsl(0 100% 95%)",
956
961
  "utrechtSpotlightSectionOkBackgroundColor": "hsl(90 30% 90%)",
962
+ "utrechtStatusBadgeBackgroundColor": "hsl(0 0% 30%)",
963
+ "utrechtStatusBadgeBorderRadius": "0",
964
+ "utrechtStatusBadgeBorderWidth": "0px",
965
+ "utrechtStatusBadgeColor": "hsl(0 0% 100%)",
966
+ "utrechtStatusBadgeFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
967
+ "utrechtStatusBadgePaddingBlock": "8px",
968
+ "utrechtStatusBadgePaddingInline": "12px",
969
+ "utrechtStatusBadgeActiveBackgroundColor": "hsl(90 30% 50%)",
970
+ "utrechtStatusBadgeActiveBorderColor": "hsl(90 30% 50%)",
971
+ "utrechtStatusBadgeActiveColor": "hsl(0 0% 100%)",
972
+ "utrechtStatusBadgeDangerBackgroundColor": "hsl(0 100% 40%)",
973
+ "utrechtStatusBadgeDangerBorderColor": "hsl(0 100% 40%)",
974
+ "utrechtStatusBadgeDangerColor": "hsl(0 0% 100%)",
975
+ "utrechtStatusBadgeErrorBackgroundColor": "hsl(0 100% 40%)",
976
+ "utrechtStatusBadgeErrorBorderColor": "hsl(0 100% 40%)",
977
+ "utrechtStatusBadgeErrorColor": "hsl(0 0% 100%)",
978
+ "utrechtStatusBadgeInactiveBackgroundColor": "hsl(0 100% 40%)",
979
+ "utrechtStatusBadgeInactiveBorderColor": "hsl(0 100% 40%)",
980
+ "utrechtStatusBadgeInactiveColor": "hsl(0 0% 100%)",
981
+ "utrechtStatusBadgeInvalidBackgroundColor": "#990000",
982
+ "utrechtStatusBadgeInvalidBorderColor": "#990000",
983
+ "utrechtStatusBadgeInvalidColor": "hsl(0 0% 100%)",
984
+ "utrechtStatusBadgeSafeBackgroundColor": "hsl(90 30% 50%)",
985
+ "utrechtStatusBadgeSafeBorderColor": "hsl(90 30% 50%)",
986
+ "utrechtStatusBadgeSafeColor": "hsl(0 0% 100%)",
987
+ "utrechtStatusBadgeValidBackgroundColor": "hsl(90 30% 50%)",
988
+ "utrechtStatusBadgeValidBorderColor": "hsl(90 30% 50%)",
989
+ "utrechtStatusBadgeValidColor": "hsl(0 0% 100%)",
990
+ "utrechtStatusBadgeWarningBackgroundColor": "hsl(48 100% 50%)",
991
+ "utrechtStatusBadgeWarningBorderColor": "hsl(48 100% 50%)",
992
+ "utrechtStatusBadgeWarningColor": "hsl(0 0% 0%)",
957
993
  "utrechtSurfaceBackgroundColor": "hsl(0 0% 15%)",
958
994
  "utrechtSurfaceColor": "hsl(0 0% 95%)",
959
995
  "utrechtTableMarginBlockEnd": "0",
package/dist/dark/variables.css CHANGED
@@ -47,6 +47,7 @@
47
47
  --utrecht-table-cell-icon-size: 1em;
48
48
  --utrecht-table-caption-text-align: start;
49
49
  --utrecht-table-caption-margin-block-end: 1em;
50
+ --utrecht-status-badge-border-width: 0px;
50
51
  --utrecht-stack-focus-z-index: 1;
51
52
  --utrecht-space-text-xs: 0.5ch; /* Extra Small */
52
53
  --utrecht-space-text-xl: 1.75ch; /* Extra Large */
@@ -186,6 +187,7 @@
186
187
  --utrecht-navigation-link-mobile-min-block-size: 44px;
187
188
  --utrecht-navigation-link-hover-decoration-thickness: 3px;
188
189
  --utrecht-navigation-link-gap: 8px;
190
+ --utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
189
191
  --utrecht-navigation-link-focus-text-decoration-thickness: 3px;
190
192
  --utrecht-navigation-link-border-inline-end-width: 1px;
191
193
  --utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -489,6 +491,7 @@
489
491
  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
490
492
  --utrecht-surface-color: var(--utrecht-color-grey-95);
491
493
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
494
+ --utrecht-status-badge-font-family: var(--utrecht-typography-sans-serif-font-family);
492
495
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
493
496
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
494
497
  --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
@@ -597,21 +600,25 @@
597
600
  --utrecht-navigation-link-mobile-padding-inline-start: var(--utrecht-space-inline-md);
598
601
  --utrecht-navigation-link-mobile-padding-block-start: var(--utrecht-space-block-xs);
599
602
  --utrecht-navigation-link-mobile-padding-block-end: var(--utrecht-space-block-xs);
600
- --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
603
+ --utrecht-navigation-link-mobile-hover-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
601
604
  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
602
605
  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
606
+ --utrecht-navigation-link-mobile-focus-color: var(--utrecht-color-blue-35);
607
+ --utrecht-navigation-link-mobile-focus-background-color: var(--utrecht-color-white);
603
608
  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
604
609
  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
610
+ --utrecht-navigation-link-mobile-active-color: var(--utrecht-color-blue-35);
605
611
  --utrecht-navigation-link-is-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
606
612
  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
607
613
  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
608
614
  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
609
- --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
610
- --utrecht-navigation-link-focus-background-color: var(--utrecht-color-yellow-80);
615
+ --utrecht-navigation-link-focus-visible-color: var(--utrecht-color-black);
616
+ --utrecht-navigation-link-focus-visible-background-color: var(--utrecht-color-yellow-80);
617
+ --utrecht-navigation-link-focus-color: var(--utrecht-color-white);
618
+ --utrecht-navigation-link-focus-background-color: var(--utrecht-color-black);
611
619
  --utrecht-navigation-link-color: var(--utrecht-color-white);
612
620
  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
613
621
  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
614
- --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
615
622
  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
616
623
  --utrecht-navigation-item-mobile-border-block-start-color: var(--utrecht-color-grey-80);
617
624
  --utrecht-navigation-item-mobile-border-block-end-color: var(--utrecht-color-grey-80);
@@ -1074,6 +1081,15 @@
1074
1081
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1075
1082
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
1076
1083
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
1084
+ --utrecht-status-badge-warning-color: var(--utrecht-feedback-warning-fill-color);
1085
+ --utrecht-status-badge-valid-color: var(--utrecht-feedback-valid-fill-color);
1086
+ --utrecht-status-badge-safe-color: var(--utrecht-feedback-safe-fill-color);
1087
+ --utrecht-status-badge-invalid-color: var(--utrecht-feedback-invalid-fill-color);
1088
+ --utrecht-status-badge-inactive-color: var(--utrecht-feedback-inactive-fill-color);
1089
+ --utrecht-status-badge-error-color: var(--utrecht-feedback-error-fill-color);
1090
+ --utrecht-status-badge-danger-color: var(--utrecht-feedback-danger-fill-color);
1091
+ --utrecht-status-badge-border-radius: var(--utrecht-badge-border-radius);
1092
+ --utrecht-status-badge-active-color: var(--utrecht-feedback-active-fill-color);
1077
1093
  --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
1078
1094
  --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
1079
1095
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
@@ -1186,6 +1202,12 @@
1186
1202
  --nl-paragraph-lead-color: var(--utrecht-document-color);
1187
1203
  --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
1188
1204
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1205
+ --utrecht-status-badge-padding-inline: var(--utrecht-badge-padding-inline);
1206
+ --utrecht-status-badge-padding-block: var(--utrecht-badge-padding-block);
1207
+ --utrecht-status-badge-invalid-border-color: var(--utrecht-feedback-invalid-fill-background-color);
1208
+ --utrecht-status-badge-invalid-background-color: var(--utrecht-feedback-invalid-fill-background-color);
1209
+ --utrecht-status-badge-color: var(--utrecht-badge-color);
1210
+ --utrecht-status-badge-background-color: var(--utrecht-badge-background-color);
1189
1211
  --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1190
1212
  --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1191
1213
  --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
@@ -1213,9 +1235,23 @@
1213
1235
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1214
1236
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1215
1237
  --of-layout-bg: var(--of-layout-background);
1238
+ --utrecht-status-badge-warning-border-color: var(--utrecht-feedback-warning-fill-background-color);
1239
+ --utrecht-status-badge-warning-background-color: var(--utrecht-feedback-warning-fill-background-color);
1240
+ --utrecht-status-badge-safe-border-color: var(--utrecht-feedback-safe-fill-background-color);
1241
+ --utrecht-status-badge-safe-background-color: var(--utrecht-feedback-safe-fill-background-color);
1242
+ --utrecht-status-badge-danger-border-color: var(--utrecht-feedback-danger-fill-background-color);
1243
+ --utrecht-status-badge-danger-background-color: var(--utrecht-feedback-danger-fill-background-color);
1216
1244
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1217
1245
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1218
1246
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1219
1247
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1220
1248
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1249
+ --utrecht-status-badge-valid-border-color: var(--utrecht-feedback-valid-fill-background-color);
1250
+ --utrecht-status-badge-valid-background-color: var(--utrecht-feedback-valid-fill-background-color);
1251
+ --utrecht-status-badge-inactive-border-color: var(--utrecht-feedback-inactive-fill-background-color);
1252
+ --utrecht-status-badge-inactive-background-color: var(--utrecht-feedback-inactive-fill-background-color);
1253
+ --utrecht-status-badge-error-border-color: var(--utrecht-feedback-error-fill-background-color);
1254
+ --utrecht-status-badge-error-background-color: var(--utrecht-feedback-error-fill-background-color);
1255
+ --utrecht-status-badge-active-border-color: var(--utrecht-feedback-active-fill-background-color);
1256
+ --utrecht-status-badge-active-background-color: var(--utrecht-feedback-active-fill-background-color);
1221
1257
  }
package/dist/dark/variables.d.ts CHANGED
@@ -794,14 +794,16 @@ export const utrechtNavigationItemMobileBorderBlockEndWidth : string;
794
794
  export const utrechtNavigationItemMobileBorderBlockStartColor : string;
795
795
  export const utrechtNavigationItemMobileBorderBlockStartWidth : string;
796
796
  export const utrechtNavigationLinkActiveColor : string;
797
- export const utrechtNavigationLinkActiveFocusColor : string;
798
797
  export const utrechtNavigationLinkBackgroundColor : string;
799
798
  export const utrechtNavigationLinkBorderColor : string;
800
799
  export const utrechtNavigationLinkBorderInlineEndWidth : string;
801
800
  export const utrechtNavigationLinkColor : string;
802
801
  export const utrechtNavigationLinkFocusColor : string;
803
- export const utrechtNavigationLinkFocusTextDecorationThickness : string;
804
802
  export const utrechtNavigationLinkFocusBackgroundColor : string;
803
+ export const utrechtNavigationLinkFocusTextDecorationThickness : string;
804
+ export const utrechtNavigationLinkFocusVisibleColor : string;
805
+ export const utrechtNavigationLinkFocusVisibleBackgroundColor : string;
806
+ export const utrechtNavigationLinkFocusVisibleTextDecorationThickness : string;
805
807
  export const utrechtNavigationLinkFontWeight : string;
806
808
  export const utrechtNavigationLinkGap : string;
807
809
  export const utrechtNavigationLinkHoverBackgroundColor : string;
@@ -819,6 +821,9 @@ export const utrechtNavigationLinkMobilePaddingBlockStart : string;
819
821
  export const utrechtNavigationLinkMobilePaddingInlineStart : string;
820
822
  export const utrechtNavigationLinkMobileTransitionDuration : string;
821
823
  export const utrechtNavigationLinkMobileTransitionTimingFunction : string;
824
+ export const utrechtNavigationLinkMobileActiveColor : string;
825
+ export const utrechtNavigationLinkMobileFocusBackgroundColor : string;
826
+ export const utrechtNavigationLinkMobileFocusColor : string;
822
827
  export const utrechtNavigationLinkPaddingBlockEnd : string;
823
828
  export const utrechtNavigationLinkPaddingBlockStart : string;
824
829
  export const utrechtNavigationListMobileBackgroundColor : string;
@@ -1020,6 +1025,37 @@ export const utrechtSpotlightSectionWarningBackgroundColor : string;
1020
1025
  export const utrechtSpotlightSectionWarningColor : string;
1021
1026
  export const utrechtSpotlightSectionErrorBackgroundColor : string;
1022
1027
  export const utrechtSpotlightSectionOkBackgroundColor : string;
1028
+ export const utrechtStatusBadgeBackgroundColor : string;
1029
+ export const utrechtStatusBadgeBorderRadius : string;
1030
+ export const utrechtStatusBadgeBorderWidth : string;
1031
+ export const utrechtStatusBadgeColor : string;
1032
+ export const utrechtStatusBadgeFontFamily : string;
1033
+ export const utrechtStatusBadgePaddingBlock : string;
1034
+ export const utrechtStatusBadgePaddingInline : string;
1035
+ export const utrechtStatusBadgeActiveBackgroundColor : string;
1036
+ export const utrechtStatusBadgeActiveBorderColor : string;
1037
+ export const utrechtStatusBadgeActiveColor : string;
1038
+ export const utrechtStatusBadgeDangerBackgroundColor : string;
1039
+ export const utrechtStatusBadgeDangerBorderColor : string;
1040
+ export const utrechtStatusBadgeDangerColor : string;
1041
+ export const utrechtStatusBadgeErrorBackgroundColor : string;
1042
+ export const utrechtStatusBadgeErrorBorderColor : string;
1043
+ export const utrechtStatusBadgeErrorColor : string;
1044
+ export const utrechtStatusBadgeInactiveBackgroundColor : string;
1045
+ export const utrechtStatusBadgeInactiveBorderColor : string;
1046
+ export const utrechtStatusBadgeInactiveColor : string;
1047
+ export const utrechtStatusBadgeInvalidBackgroundColor : string;
1048
+ export const utrechtStatusBadgeInvalidBorderColor : string;
1049
+ export const utrechtStatusBadgeInvalidColor : string;
1050
+ export const utrechtStatusBadgeSafeBackgroundColor : string;
1051
+ export const utrechtStatusBadgeSafeBorderColor : string;
1052
+ export const utrechtStatusBadgeSafeColor : string;
1053
+ export const utrechtStatusBadgeValidBackgroundColor : string;
1054
+ export const utrechtStatusBadgeValidBorderColor : string;
1055
+ export const utrechtStatusBadgeValidColor : string;
1056
+ export const utrechtStatusBadgeWarningBackgroundColor : string;
1057
+ export const utrechtStatusBadgeWarningBorderColor : string;
1058
+ export const utrechtStatusBadgeWarningColor : string;
1023
1059
  export const utrechtSurfaceBackgroundColor : string;
1024
1060
  export const utrechtSurfaceColor : string;
1025
1061
  export const utrechtTableMarginBlockEnd : string;
package/dist/dark/variables.json CHANGED
@@ -831,25 +831,30 @@
831
831
  "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
832
832
  "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
833
833
  "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
834
- "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
835
834
  "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
836
835
  "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
837
836
  "utrechtNavigationLinkBorderInlineEndWidth": "1px",
838
837
  "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
839
- "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
840
- "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
838
+ "utrechtNavigationLinkFocusBackgroundColor": "hsl(0 0% 0%)",
839
+ "utrechtNavigationLinkFocusColor": "hsl(0 0% 100%)",
841
840
  "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
841
+ "utrechtNavigationLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
842
+ "utrechtNavigationLinkFocusVisibleColor": "hsl(0 0% 0%)",
843
+ "utrechtNavigationLinkFocusVisibleTextDecorationThickness": "3px",
842
844
  "utrechtNavigationLinkFontWeight": "400",
843
845
  "utrechtNavigationLinkGap": "8px",
844
846
  "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
845
847
  "utrechtNavigationLinkHoverColor": "hsl(0 0% 100%)",
846
848
  "utrechtNavigationLinkHoverDecorationThickness": "3px",
847
849
  "utrechtNavigationLinkIsCurrentFontWeight": "700",
850
+ "utrechtNavigationLinkMobileActiveColor": "hsl(211 60% 35%)",
848
851
  "utrechtNavigationLinkMobileBackgroundColor": "hsl(0 0% 100%)",
849
852
  "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
853
+ "utrechtNavigationLinkMobileFocusBackgroundColor": "hsl(0 0% 100%)",
854
+ "utrechtNavigationLinkMobileFocusColor": "hsl(211 60% 35%)",
850
855
  "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
851
856
  "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
852
- "utrechtNavigationLinkMobileHoverFontWeight": "700",
857
+ "utrechtNavigationLinkMobileHoverFontWeight": "400",
853
858
  "utrechtNavigationLinkMobileMinBlockSize": "44px",
854
859
  "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
855
860
  "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
@@ -1119,6 +1124,37 @@
1119
1124
  "utrechtSpotlightSectionWarningBackgroundColor": "hsl(48 100% 20%)",
1120
1125
  "utrechtSpotlightSectionWarningColor": "hsl(0 0% 15%)",
1121
1126
  "utrechtStackFocusZIndex": 1,
1127
+ "utrechtStatusBadgeActiveBackgroundColor": "hsl(90 30% 50%)",
1128
+ "utrechtStatusBadgeActiveBorderColor": "hsl(90 30% 50%)",
1129
+ "utrechtStatusBadgeActiveColor": "hsl(0 0% 100%)",
1130
+ "utrechtStatusBadgeBackgroundColor": "hsl(0 0% 30%)",
1131
+ "utrechtStatusBadgeBorderRadius": "0",
1132
+ "utrechtStatusBadgeBorderWidth": "0px",
1133
+ "utrechtStatusBadgeColor": "hsl(0 0% 100%)",
1134
+ "utrechtStatusBadgeDangerBackgroundColor": "hsl(0 100% 40%)",
1135
+ "utrechtStatusBadgeDangerBorderColor": "hsl(0 100% 40%)",
1136
+ "utrechtStatusBadgeDangerColor": "hsl(0 0% 100%)",
1137
+ "utrechtStatusBadgeErrorBackgroundColor": "hsl(0 100% 40%)",
1138
+ "utrechtStatusBadgeErrorBorderColor": "hsl(0 100% 40%)",
1139
+ "utrechtStatusBadgeErrorColor": "hsl(0 0% 100%)",
1140
+ "utrechtStatusBadgeFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
1141
+ "utrechtStatusBadgeInactiveBackgroundColor": "hsl(0 100% 40%)",
1142
+ "utrechtStatusBadgeInactiveBorderColor": "hsl(0 100% 40%)",
1143
+ "utrechtStatusBadgeInactiveColor": "hsl(0 0% 100%)",
1144
+ "utrechtStatusBadgeInvalidBackgroundColor": "#990000",
1145
+ "utrechtStatusBadgeInvalidBorderColor": "#990000",
1146
+ "utrechtStatusBadgeInvalidColor": "hsl(0 0% 100%)",
1147
+ "utrechtStatusBadgePaddingBlock": "8px",
1148
+ "utrechtStatusBadgePaddingInline": "12px",
1149
+ "utrechtStatusBadgeSafeBackgroundColor": "hsl(90 30% 50%)",
1150
+ "utrechtStatusBadgeSafeBorderColor": "hsl(90 30% 50%)",
1151
+ "utrechtStatusBadgeSafeColor": "hsl(0 0% 100%)",
1152
+ "utrechtStatusBadgeValidBackgroundColor": "hsl(90 30% 50%)",
1153
+ "utrechtStatusBadgeValidBorderColor": "hsl(90 30% 50%)",
1154
+ "utrechtStatusBadgeValidColor": "hsl(0 0% 100%)",
1155
+ "utrechtStatusBadgeWarningBackgroundColor": "hsl(48 100% 50%)",
1156
+ "utrechtStatusBadgeWarningBorderColor": "hsl(48 100% 50%)",
1157
+ "utrechtStatusBadgeWarningColor": "hsl(0 0% 0%)",
1122
1158
  "utrechtSurfaceBackgroundColor": "hsl(0 0% 15%)",
1123
1159
  "utrechtSurfaceColor": "hsl(0 0% 95%)",
1124
1160
  "utrechtTableCaptionFontSize": "1.125rem",
package/dist/dark/variables.less CHANGED
@@ -118,6 +118,7 @@
118
118
  @utrecht-table-caption-margin-block-end: 1em;
119
119
  @utrecht-table-caption-text-align: start;
120
120
  @utrecht-table-margin-block-end: 0;
121
+ @utrecht-status-badge-border-width: 0px;
121
122
  @utrecht-separator-block-size: 8px;
122
123
  @utrecht-select-border-block-end-width: 3px;
123
124
  @utrecht-search-bar-dropdown-max-block-size: 300px;
@@ -201,6 +202,7 @@
201
202
  @utrecht-navigation-link-mobile-min-block-size: 44px;
202
203
  @utrecht-navigation-link-hover-decoration-thickness: 3px;
203
204
  @utrecht-navigation-link-gap: 8px;
205
+ @utrecht-navigation-link-focus-visible-text-decoration-thickness: 3px;
204
206
  @utrecht-navigation-link-focus-text-decoration-thickness: 3px;
205
207
  @utrecht-navigation-link-border-inline-end-width: 1px;
206
208
  @utrecht-navigation-item-mobile-border-block-start-width: 1px;
@@ -567,6 +569,7 @@
567
569
  @utrecht-table-margin-block-start: @utrecht-space-block-md;
568
570
  @utrecht-surface-color: @utrecht-color-grey-95;
569
571
  @utrecht-surface-background-color: @utrecht-color-grey-15;
572
+ @utrecht-status-badge-font-family: @utrecht-typography-sans-serif-font-family;
570
573
  @utrecht-spotlight-section-ok-background-color: @utrecht-color-green-90;
571
574
  @utrecht-spotlight-section-error-background-color: @utrecht-color-red-95;
572
575
  @utrecht-spotlight-section-warning-color: @utrecht-color-grey-15;
@@ -663,10 +666,13 @@
663
666
  @utrecht-navigation-list-mobile-background-color: @utrecht-color-white;
664
667
  @utrecht-navigation-link-padding-block-start: @utrecht-space-block-md;
665
668
  @utrecht-navigation-link-padding-block-end: @utrecht-space-block-md;
669
+ @utrecht-navigation-link-mobile-focus-color: @utrecht-color-blue-35;
670
+ @utrecht-navigation-link-mobile-focus-background-color: @utrecht-color-white;
671
+ @utrecht-navigation-link-mobile-active-color: @utrecht-color-blue-35;
666
672
  @utrecht-navigation-link-mobile-padding-inline-start: @utrecht-space-inline-md;
667
673
  @utrecht-navigation-link-mobile-padding-block-start: @utrecht-space-block-xs;
668
674
  @utrecht-navigation-link-mobile-padding-block-end: @utrecht-space-block-xs;
669
- @utrecht-navigation-link-mobile-hover-font-weight: @utrecht-typography-weight-scale-bold-font-weight;
675
+ @utrecht-navigation-link-mobile-hover-font-weight: @utrecht-typography-weight-scale-normal-font-weight;
670
676
  @utrecht-navigation-link-mobile-hover-color: @utrecht-color-blue-35;
671
677
  @utrecht-navigation-link-mobile-hover-background-color: @utrecht-color-white;
672
678
  @utrecht-navigation-link-mobile-color: @utrecht-color-blue-35;
@@ -675,12 +681,13 @@
675
681
  @utrecht-navigation-link-hover-color: @utrecht-color-white;
676
682
  @utrecht-navigation-link-hover-background-color: @utrecht-color-black;
677
683
  @utrecht-navigation-link-font-weight: @utrecht-typography-weight-scale-normal-font-weight;
678
- @utrecht-navigation-link-focus-background-color: @utrecht-color-yellow-80;
679
- @utrecht-navigation-link-focus-color: @utrecht-color-black;
684
+ @utrecht-navigation-link-focus-visible-background-color: @utrecht-color-yellow-80;
685
+ @utrecht-navigation-link-focus-visible-color: @utrecht-color-black;
686
+ @utrecht-navigation-link-focus-background-color: @utrecht-color-black;
687
+ @utrecht-navigation-link-focus-color: @utrecht-color-white;
680
688
  @utrecht-navigation-link-color: @utrecht-color-white;
681
689
  @utrecht-navigation-link-border-color: @utrecht-color-grey-40;
682
690
  @utrecht-navigation-link-background-color: @utrecht-color-grey-15;
683
- @utrecht-navigation-link-active-focus-color: @utrecht-color-black;
684
691
  @utrecht-navigation-link-active-color: @utrecht-color-white;
685
692
  @utrecht-navigation-item-mobile-border-block-start-color: @utrecht-color-grey-80;
686
693
  @utrecht-navigation-item-mobile-border-block-end-color: @utrecht-color-grey-80;
@@ -1087,6 +1094,15 @@
1087
1094
  @utrecht-toptask-link-hover-background-color: @utrecht-button-primary-action-hover-background-color;
1088
1095
  @utrecht-toptask-link-color: @utrecht-button-primary-action-color;
1089
1096
  @utrecht-toptask-link-background-color: @utrecht-button-primary-action-background-color;
1097
+ @utrecht-status-badge-warning-color: @utrecht-feedback-warning-fill-color;
1098
+ @utrecht-status-badge-valid-color: @utrecht-feedback-valid-fill-color;
1099
+ @utrecht-status-badge-safe-color: @utrecht-feedback-safe-fill-color;
1100
+ @utrecht-status-badge-invalid-color: @utrecht-feedback-invalid-fill-color;
1101
+ @utrecht-status-badge-inactive-color: @utrecht-feedback-inactive-fill-color;
1102
+ @utrecht-status-badge-error-color: @utrecht-feedback-error-fill-color;
1103
+ @utrecht-status-badge-danger-color: @utrecht-feedback-danger-fill-color;
1104
+ @utrecht-status-badge-active-color: @utrecht-feedback-active-fill-color;
1105
+ @utrecht-status-badge-border-radius: @utrecht-badge-border-radius;
1090
1106
  @utrecht-skip-link-focus-visible-text-decoration: @nl-skip-link-focus-visible-text-decoration;
1091
1107
  @utrecht-skip-link-text-decoration: @nl-skip-link-text-decoration;
1092
1108
  @utrecht-radio-button-border-color: @utrecht-form-control-border-color;
@@ -1185,6 +1201,12 @@
1185
1201
  @utrecht-badge-background-color: @nl-data-badge-background-color; // Default background color for badge components
1186
1202
  @utrecht-badge-counter-border-radius: @utrecht-badge-counter-font-size; // Default corner radius for badge components
1187
1203
  @of-layout-bg: @of-layout-background;
1204
+ @utrecht-status-badge-invalid-border-color: @utrecht-feedback-invalid-fill-background-color;
1205
+ @utrecht-status-badge-invalid-background-color: @utrecht-feedback-invalid-fill-background-color;
1206
+ @utrecht-status-badge-padding-inline: @utrecht-badge-padding-inline;
1207
+ @utrecht-status-badge-padding-block: @utrecht-badge-padding-block;
1208
+ @utrecht-status-badge-color: @utrecht-badge-color;
1209
+ @utrecht-status-badge-background-color: @utrecht-badge-background-color;
1188
1210
  @utrecht-skip-link-focus-color: @nl-skip-link-focus-visible-color;
1189
1211
  @utrecht-skip-link-focus-background-color: @nl-skip-link-focus-visible-background-color;
1190
1212
  @utrecht-skip-link-padding-inline-end: @nl-skip-link-padding-inline;
@@ -1211,8 +1233,22 @@
1211
1233
  @utrecht-feedback-warning-fill-background-color: @utrecht-feedback-warning-background-color;
1212
1234
  @utrecht-feedback-danger-fill-background-color: @utrecht-feedback-danger-background-color;
1213
1235
  @utrecht-checkbox-invalid-border-color: @utrecht-form-control-invalid-border-color;
1236
+ @utrecht-status-badge-warning-border-color: @utrecht-feedback-warning-fill-background-color;
1237
+ @utrecht-status-badge-warning-background-color: @utrecht-feedback-warning-fill-background-color;
1238
+ @utrecht-status-badge-safe-border-color: @utrecht-feedback-safe-fill-background-color;
1239
+ @utrecht-status-badge-safe-background-color: @utrecht-feedback-safe-fill-background-color;
1240
+ @utrecht-status-badge-danger-border-color: @utrecht-feedback-danger-fill-background-color;
1241
+ @utrecht-status-badge-danger-background-color: @utrecht-feedback-danger-fill-background-color;
1214
1242
  @utrecht-feedback-active-fill-background-color: @utrecht-feedback-active-background-color;
1215
1243
  @utrecht-feedback-inactive-fill-background-color: @utrecht-feedback-inactive-background-color;
1216
1244
  @utrecht-feedback-success-fill-background-color: @utrecht-feedback-success-background-color;
1217
1245
  @utrecht-feedback-error-fill-background-color: @utrecht-feedback-error-background-color;
1218
1246
  @utrecht-feedback-valid-fill-background-color: @utrecht-feedback-valid-background-color;
1247
+ @utrecht-status-badge-valid-border-color: @utrecht-feedback-valid-fill-background-color;
1248
+ @utrecht-status-badge-valid-background-color: @utrecht-feedback-valid-fill-background-color;
1249
+ @utrecht-status-badge-inactive-border-color: @utrecht-feedback-inactive-fill-background-color;
1250
+ @utrecht-status-badge-inactive-background-color: @utrecht-feedback-inactive-fill-background-color;
1251
+ @utrecht-status-badge-error-border-color: @utrecht-feedback-error-fill-background-color;
1252
+ @utrecht-status-badge-error-background-color: @utrecht-feedback-error-fill-background-color;
1253
+ @utrecht-status-badge-active-border-color: @utrecht-feedback-active-fill-background-color;
1254
+ @utrecht-status-badge-active-background-color: @utrecht-feedback-active-fill-background-color;
package/dist/dark/variables.mjs CHANGED
@@ -730,14 +730,16 @@ export const utrechtNavigationItemMobileBorderBlockEndWidth = "1px";
730
730
  export const utrechtNavigationItemMobileBorderBlockStartColor = "hsl(0 0% 80%)";
731
731
  export const utrechtNavigationItemMobileBorderBlockStartWidth = "1px";
732
732
  export const utrechtNavigationLinkActiveColor = "hsl(0 0% 100%)";
733
- export const utrechtNavigationLinkActiveFocusColor = "hsl(0 0% 0%)";
734
733
  export const utrechtNavigationLinkBackgroundColor = "hsl(0 0% 15%)";
735
734
  export const utrechtNavigationLinkBorderColor = "hsl(0 0% 40%)";
736
735
  export const utrechtNavigationLinkBorderInlineEndWidth = "1px";
737
736
  export const utrechtNavigationLinkColor = "hsl(0 0% 100%)";
738
- export const utrechtNavigationLinkFocusColor = "hsl(0 0% 0%)";
737
+ export const utrechtNavigationLinkFocusColor = "hsl(0 0% 100%)";
738
+ export const utrechtNavigationLinkFocusBackgroundColor = "hsl(0 0% 0%)";
739
739
  export const utrechtNavigationLinkFocusTextDecorationThickness = "3px";
740
- export const utrechtNavigationLinkFocusBackgroundColor = "hsl(48 100% 80%)";
740
+ export const utrechtNavigationLinkFocusVisibleColor = "hsl(0 0% 0%)";
741
+ export const utrechtNavigationLinkFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
742
+ export const utrechtNavigationLinkFocusVisibleTextDecorationThickness = "3px";
741
743
  export const utrechtNavigationLinkFontWeight = "400";
742
744
  export const utrechtNavigationLinkGap = "8px";
743
745
  export const utrechtNavigationLinkHoverBackgroundColor = "hsl(0 0% 0%)";
@@ -748,13 +750,16 @@ export const utrechtNavigationLinkMobileBackgroundColor = "hsl(0 0% 100%)";
748
750
  export const utrechtNavigationLinkMobileColor = "hsl(211 60% 35%)";
749
751
  export const utrechtNavigationLinkMobileHoverBackgroundColor = "hsl(0 0% 100%)";
750
752
  export const utrechtNavigationLinkMobileHoverColor = "hsl(211 60% 35%)";
751
- export const utrechtNavigationLinkMobileHoverFontWeight = "700";
753
+ export const utrechtNavigationLinkMobileHoverFontWeight = "400";
752
754
  export const utrechtNavigationLinkMobileMinBlockSize = "44px";
753
755
  export const utrechtNavigationLinkMobilePaddingBlockEnd = "8px";
754
756
  export const utrechtNavigationLinkMobilePaddingBlockStart = "8px";
755
757
  export const utrechtNavigationLinkMobilePaddingInlineStart = "16px";
756
758
  export const utrechtNavigationLinkMobileTransitionDuration = "300ms";
757
759
  export const utrechtNavigationLinkMobileTransitionTimingFunction = "ease-in-out";
760
+ export const utrechtNavigationLinkMobileActiveColor = "hsl(211 60% 35%)";
761
+ export const utrechtNavigationLinkMobileFocusBackgroundColor = "hsl(0 0% 100%)";
762
+ export const utrechtNavigationLinkMobileFocusColor = "hsl(211 60% 35%)";
758
763
  export const utrechtNavigationLinkPaddingBlockEnd = "16px";
759
764
  export const utrechtNavigationLinkPaddingBlockStart = "16px";
760
765
  export const utrechtNavigationListMobileBackgroundColor = "hsl(0 0% 100%)";
@@ -953,6 +958,37 @@ export const utrechtSpotlightSectionWarningBackgroundColor = "hsl(48 100% 20%)";
953
958
  export const utrechtSpotlightSectionWarningColor = "hsl(0 0% 15%)";
954
959
  export const utrechtSpotlightSectionErrorBackgroundColor = "hsl(0 100% 95%)";
955
960
  export const utrechtSpotlightSectionOkBackgroundColor = "hsl(90 30% 90%)";
961
+ export const utrechtStatusBadgeBackgroundColor = "hsl(0 0% 30%)";
962
+ export const utrechtStatusBadgeBorderRadius = "0";
963
+ export const utrechtStatusBadgeBorderWidth = "0px";
964
+ export const utrechtStatusBadgeColor = "hsl(0 0% 100%)";
965
+ export const utrechtStatusBadgeFontFamily = "\"Noto Sans Variable\", \"Arial\", sans-serif";
966
+ export const utrechtStatusBadgePaddingBlock = "8px";
967
+ export const utrechtStatusBadgePaddingInline = "12px";
968
+ export const utrechtStatusBadgeActiveBackgroundColor = "hsl(90 30% 50%)";
969
+ export const utrechtStatusBadgeActiveBorderColor = "hsl(90 30% 50%)";
970
+ export const utrechtStatusBadgeActiveColor = "hsl(0 0% 100%)";
971
+ export const utrechtStatusBadgeDangerBackgroundColor = "hsl(0 100% 40%)";
972
+ export const utrechtStatusBadgeDangerBorderColor = "hsl(0 100% 40%)";
973
+ export const utrechtStatusBadgeDangerColor = "hsl(0 0% 100%)";
974
+ export const utrechtStatusBadgeErrorBackgroundColor = "hsl(0 100% 40%)";
975
+ export const utrechtStatusBadgeErrorBorderColor = "hsl(0 100% 40%)";
976
+ export const utrechtStatusBadgeErrorColor = "hsl(0 0% 100%)";
977
+ export const utrechtStatusBadgeInactiveBackgroundColor = "hsl(0 100% 40%)";
978
+ export const utrechtStatusBadgeInactiveBorderColor = "hsl(0 100% 40%)";
979
+ export const utrechtStatusBadgeInactiveColor = "hsl(0 0% 100%)";
980
+ export const utrechtStatusBadgeInvalidBackgroundColor = "#990000";
981
+ export const utrechtStatusBadgeInvalidBorderColor = "#990000";
982
+ export const utrechtStatusBadgeInvalidColor = "hsl(0 0% 100%)";
983
+ export const utrechtStatusBadgeSafeBackgroundColor = "hsl(90 30% 50%)";
984
+ export const utrechtStatusBadgeSafeBorderColor = "hsl(90 30% 50%)";
985
+ export const utrechtStatusBadgeSafeColor = "hsl(0 0% 100%)";
986
+ export const utrechtStatusBadgeValidBackgroundColor = "hsl(90 30% 50%)";
987
+ export const utrechtStatusBadgeValidBorderColor = "hsl(90 30% 50%)";
988
+ export const utrechtStatusBadgeValidColor = "hsl(0 0% 100%)";
989
+ export const utrechtStatusBadgeWarningBackgroundColor = "hsl(48 100% 50%)";
990
+ export const utrechtStatusBadgeWarningBorderColor = "hsl(48 100% 50%)";
991
+ export const utrechtStatusBadgeWarningColor = "hsl(0 0% 0%)";
956
992
  export const utrechtSurfaceBackgroundColor = "hsl(0 0% 15%)";
957
993
  export const utrechtSurfaceColor = "hsl(0 0% 95%)";
958
994
  export const utrechtTableMarginBlockEnd = "0";
package/dist/index.cjs CHANGED
@@ -722,14 +722,16 @@ module.exports = {
722
722
  "utrechtNavigationItemMobileBorderBlockStartColor": "hsl(0 0% 80%)",
723
723
  "utrechtNavigationItemMobileBorderBlockStartWidth": "1px",
724
724
  "utrechtNavigationLinkActiveColor": "hsl(0 0% 100%)",
725
- "utrechtNavigationLinkActiveFocusColor": "hsl(0 0% 0%)",
726
725
  "utrechtNavigationLinkBackgroundColor": "hsl(0 0% 15%)",
727
726
  "utrechtNavigationLinkBorderColor": "hsl(0 0% 40%)",
728
727
  "utrechtNavigationLinkBorderInlineEndWidth": "1px",
729
728
  "utrechtNavigationLinkColor": "hsl(0 0% 100%)",
730
- "utrechtNavigationLinkFocusColor": "hsl(0 0% 0%)",
729
+ "utrechtNavigationLinkFocusColor": "hsl(0 0% 100%)",
730
+ "utrechtNavigationLinkFocusBackgroundColor": "hsl(0 0% 0%)",
731
731
  "utrechtNavigationLinkFocusTextDecorationThickness": "3px",
732
- "utrechtNavigationLinkFocusBackgroundColor": "hsl(48 100% 80%)",
732
+ "utrechtNavigationLinkFocusVisibleColor": "hsl(0 0% 0%)",
733
+ "utrechtNavigationLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
734
+ "utrechtNavigationLinkFocusVisibleTextDecorationThickness": "3px",
733
735
  "utrechtNavigationLinkFontWeight": "400",
734
736
  "utrechtNavigationLinkGap": "8px",
735
737
  "utrechtNavigationLinkHoverBackgroundColor": "hsl(0 0% 0%)",
@@ -740,13 +742,16 @@ module.exports = {
740
742
  "utrechtNavigationLinkMobileColor": "hsl(211 60% 35%)",
741
743
  "utrechtNavigationLinkMobileHoverBackgroundColor": "hsl(0 0% 100%)",
742
744
  "utrechtNavigationLinkMobileHoverColor": "hsl(211 60% 35%)",
743
- "utrechtNavigationLinkMobileHoverFontWeight": "700",
745
+ "utrechtNavigationLinkMobileHoverFontWeight": "400",
744
746
  "utrechtNavigationLinkMobileMinBlockSize": "44px",
745
747
  "utrechtNavigationLinkMobilePaddingBlockEnd": "8px",
746
748
  "utrechtNavigationLinkMobilePaddingBlockStart": "8px",
747
749
  "utrechtNavigationLinkMobilePaddingInlineStart": "16px",
748
750
  "utrechtNavigationLinkMobileTransitionDuration": "300ms",
749
751
  "utrechtNavigationLinkMobileTransitionTimingFunction": "ease-in-out",
752
+ "utrechtNavigationLinkMobileActiveColor": "hsl(211 60% 35%)",
753
+ "utrechtNavigationLinkMobileFocusBackgroundColor": "hsl(0 0% 100%)",
754
+ "utrechtNavigationLinkMobileFocusColor": "hsl(211 60% 35%)",
750
755
  "utrechtNavigationLinkPaddingBlockEnd": "16px",
751
756
  "utrechtNavigationLinkPaddingBlockStart": "16px",
752
757
  "utrechtNavigationListMobileBackgroundColor": "hsl(0 0% 100%)",
@@ -943,6 +948,37 @@ module.exports = {
943
948
  "utrechtSpotlightSectionWarningBackgroundColor": "hsl(48 100% 80%)",
944
949
  "utrechtSpotlightSectionErrorBackgroundColor": "hsl(0 100% 95%)",
945
950
  "utrechtSpotlightSectionOkBackgroundColor": "hsl(90 30% 90%)",
951
+ "utrechtStatusBadgeBackgroundColor": "hsl(0 0% 30%)",
952
+ "utrechtStatusBadgeBorderRadius": "0",
953
+ "utrechtStatusBadgeBorderWidth": "0px",
954
+ "utrechtStatusBadgeColor": "hsl(0 0% 100%)",
955
+ "utrechtStatusBadgeFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
956
+ "utrechtStatusBadgePaddingBlock": "8px",
957
+ "utrechtStatusBadgePaddingInline": "12px",
958
+ "utrechtStatusBadgeActiveBackgroundColor": "hsl(90 30% 50%)",
959
+ "utrechtStatusBadgeActiveBorderColor": "hsl(90 30% 50%)",
960
+ "utrechtStatusBadgeActiveColor": "hsl(0 0% 100%)",
961
+ "utrechtStatusBadgeDangerBackgroundColor": "hsl(0 100% 40%)",
962
+ "utrechtStatusBadgeDangerBorderColor": "hsl(0 100% 40%)",
963
+ "utrechtStatusBadgeDangerColor": "hsl(0 0% 100%)",
964
+ "utrechtStatusBadgeErrorBackgroundColor": "hsl(0 100% 40%)",
965
+ "utrechtStatusBadgeErrorBorderColor": "hsl(0 100% 40%)",
966
+ "utrechtStatusBadgeErrorColor": "hsl(0 0% 100%)",
967
+ "utrechtStatusBadgeInactiveBackgroundColor": "hsl(0 100% 40%)",
968
+ "utrechtStatusBadgeInactiveBorderColor": "hsl(0 100% 40%)",
969
+ "utrechtStatusBadgeInactiveColor": "hsl(0 0% 100%)",
970
+ "utrechtStatusBadgeInvalidBackgroundColor": "#990000",
971
+ "utrechtStatusBadgeInvalidBorderColor": "#990000",
972
+ "utrechtStatusBadgeInvalidColor": "hsl(0 0% 100%)",
973
+ "utrechtStatusBadgeSafeBackgroundColor": "hsl(90 30% 50%)",
974
+ "utrechtStatusBadgeSafeBorderColor": "hsl(90 30% 50%)",
975
+ "utrechtStatusBadgeSafeColor": "hsl(0 0% 100%)",
976
+ "utrechtStatusBadgeValidBackgroundColor": "hsl(90 30% 50%)",
977
+ "utrechtStatusBadgeValidBorderColor": "hsl(90 30% 50%)",
978
+ "utrechtStatusBadgeValidColor": "hsl(0 0% 100%)",
979
+ "utrechtStatusBadgeWarningBackgroundColor": "hsl(48 100% 50%)",
980
+ "utrechtStatusBadgeWarningBorderColor": "hsl(48 100% 50%)",
981
+ "utrechtStatusBadgeWarningColor": "hsl(0 0% 0%)",
946
982
  "utrechtSurfaceBackgroundColor": "hsl(0 0% 95%)",
947
983
  "utrechtSurfaceColor": "hsl(0 0% 10%)",
948
984
  "utrechtTableMarginBlockEnd": "0",