@lux-design-system/design-tokens 1.0.0 → 1.1.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 (227) hide show
  1. package/dist/digid/dark/lg-theme.css +97 -59
  2. package/dist/digid/dark/lg.css +97 -59
  3. package/dist/digid/dark/md-theme.css +97 -59
  4. package/dist/digid/dark/md.css +97 -59
  5. package/dist/digid/dark/sm-theme.css +97 -59
  6. package/dist/digid/dark/sm.css +97 -59
  7. package/dist/digid/dark/xl-theme.css +97 -59
  8. package/dist/digid/dark/xl.css +97 -59
  9. package/dist/digid/dark/xs-theme.css +97 -59
  10. package/dist/digid/dark/xs.css +97 -59
  11. package/dist/digid/light/lg-theme.css +97 -59
  12. package/dist/digid/light/lg.css +97 -59
  13. package/dist/digid/light/md-theme.css +97 -59
  14. package/dist/digid/light/md.css +97 -59
  15. package/dist/digid/light/sm-theme.css +97 -59
  16. package/dist/digid/light/sm.css +97 -59
  17. package/dist/digid/light/xl-theme.css +97 -59
  18. package/dist/digid/light/xl.css +97 -59
  19. package/dist/digid/light/xs-theme.css +97 -59
  20. package/dist/digid/light/xs.css +97 -59
  21. package/dist/digitoegankelijk/dark/lg-theme.css +97 -59
  22. package/dist/digitoegankelijk/dark/lg.css +97 -59
  23. package/dist/digitoegankelijk/dark/md-theme.css +97 -59
  24. package/dist/digitoegankelijk/dark/md.css +97 -59
  25. package/dist/digitoegankelijk/dark/sm-theme.css +97 -59
  26. package/dist/digitoegankelijk/dark/sm.css +97 -59
  27. package/dist/digitoegankelijk/dark/xl-theme.css +97 -59
  28. package/dist/digitoegankelijk/dark/xl.css +97 -59
  29. package/dist/digitoegankelijk/dark/xs-theme.css +97 -59
  30. package/dist/digitoegankelijk/dark/xs.css +97 -59
  31. package/dist/digitoegankelijk/light/lg-theme.css +97 -59
  32. package/dist/digitoegankelijk/light/lg.css +97 -59
  33. package/dist/digitoegankelijk/light/md-theme.css +97 -59
  34. package/dist/digitoegankelijk/light/md.css +97 -59
  35. package/dist/digitoegankelijk/light/sm-theme.css +97 -59
  36. package/dist/digitoegankelijk/light/sm.css +97 -59
  37. package/dist/digitoegankelijk/light/xl-theme.css +97 -59
  38. package/dist/digitoegankelijk/light/xl.css +97 -59
  39. package/dist/digitoegankelijk/light/xs-theme.css +97 -59
  40. package/dist/digitoegankelijk/light/xs.css +97 -59
  41. package/dist/{elia → eva}/dark/lg-theme.css +102 -64
  42. package/dist/{elia → eva}/dark/lg.css +100 -62
  43. package/dist/{elia → eva}/dark/md-theme.css +102 -64
  44. package/dist/{elia → eva}/dark/md.css +100 -62
  45. package/dist/{elia → eva}/dark/sm-theme.css +102 -64
  46. package/dist/{elia → eva}/dark/sm.css +100 -62
  47. package/dist/{elia → eva}/dark/xl-theme.css +102 -64
  48. package/dist/{elia → eva}/dark/xl.css +100 -62
  49. package/dist/{elia → eva}/dark/xs-theme.css +102 -64
  50. package/dist/{elia → eva}/dark/xs.css +100 -62
  51. package/dist/{elia → eva}/light/lg-theme.css +102 -64
  52. package/dist/{elia → eva}/light/lg.css +100 -62
  53. package/dist/{elia → eva}/light/md-theme.css +102 -64
  54. package/dist/{elia → eva}/light/md.css +100 -62
  55. package/dist/{elia → eva}/light/sm-theme.css +102 -64
  56. package/dist/{elia → eva}/light/sm.css +100 -62
  57. package/dist/{elia → eva}/light/xl-theme.css +102 -64
  58. package/dist/{elia → eva}/light/xl.css +100 -62
  59. package/dist/{elia → eva}/light/xs-theme.css +102 -64
  60. package/dist/{elia → eva}/light/xs.css +100 -62
  61. package/dist/figma-tokens.json +2986 -2182
  62. package/dist/index.json +1208 -545
  63. package/dist/logius/dark/lg-theme.css +97 -59
  64. package/dist/logius/dark/lg.css +97 -59
  65. package/dist/logius/dark/md-theme.css +97 -59
  66. package/dist/logius/dark/md.css +97 -59
  67. package/dist/logius/dark/sm-theme.css +97 -59
  68. package/dist/logius/dark/sm.css +97 -59
  69. package/dist/logius/dark/xl-theme.css +97 -59
  70. package/dist/logius/dark/xl.css +97 -59
  71. package/dist/logius/dark/xs-theme.css +97 -59
  72. package/dist/logius/dark/xs.css +97 -59
  73. package/dist/logius/light/lg-theme.css +97 -59
  74. package/dist/logius/light/lg.css +97 -59
  75. package/dist/logius/light/md-theme.css +97 -59
  76. package/dist/logius/light/md.css +97 -59
  77. package/dist/logius/light/sm-theme.css +97 -59
  78. package/dist/logius/light/sm.css +97 -59
  79. package/dist/logius/light/xl-theme.css +97 -59
  80. package/dist/logius/light/xl.css +97 -59
  81. package/dist/logius/light/xs-theme.css +97 -59
  82. package/dist/logius/light/xs.css +97 -59
  83. package/dist/logius-blauw/dark/lg-theme.css +97 -59
  84. package/dist/logius-blauw/dark/lg.css +97 -59
  85. package/dist/logius-blauw/dark/md-theme.css +97 -59
  86. package/dist/logius-blauw/dark/md.css +97 -59
  87. package/dist/logius-blauw/dark/sm-theme.css +97 -59
  88. package/dist/logius-blauw/dark/sm.css +97 -59
  89. package/dist/logius-blauw/dark/xl-theme.css +97 -59
  90. package/dist/logius-blauw/dark/xl.css +97 -59
  91. package/dist/logius-blauw/dark/xs-theme.css +97 -59
  92. package/dist/logius-blauw/dark/xs.css +97 -59
  93. package/dist/logius-blauw/light/lg-theme.css +97 -59
  94. package/dist/logius-blauw/light/lg.css +97 -59
  95. package/dist/logius-blauw/light/md-theme.css +97 -59
  96. package/dist/logius-blauw/light/md.css +97 -59
  97. package/dist/logius-blauw/light/sm-theme.css +97 -59
  98. package/dist/logius-blauw/light/sm.css +97 -59
  99. package/dist/logius-blauw/light/xl-theme.css +97 -59
  100. package/dist/logius-blauw/light/xl.css +97 -59
  101. package/dist/logius-blauw/light/xs-theme.css +97 -59
  102. package/dist/logius-blauw/light/xs.css +97 -59
  103. package/dist/mijnoverheid/dark/lg-theme.css +97 -59
  104. package/dist/mijnoverheid/dark/lg.css +97 -59
  105. package/dist/mijnoverheid/dark/md-theme.css +97 -59
  106. package/dist/mijnoverheid/dark/md.css +97 -59
  107. package/dist/mijnoverheid/dark/sm-theme.css +97 -59
  108. package/dist/mijnoverheid/dark/sm.css +97 -59
  109. package/dist/mijnoverheid/dark/xl-theme.css +97 -59
  110. package/dist/mijnoverheid/dark/xl.css +97 -59
  111. package/dist/mijnoverheid/dark/xs-theme.css +97 -59
  112. package/dist/mijnoverheid/dark/xs.css +97 -59
  113. package/dist/mijnoverheid/light/lg-theme.css +97 -59
  114. package/dist/mijnoverheid/light/lg.css +97 -59
  115. package/dist/mijnoverheid/light/md-theme.css +97 -59
  116. package/dist/mijnoverheid/light/md.css +97 -59
  117. package/dist/mijnoverheid/light/sm-theme.css +97 -59
  118. package/dist/mijnoverheid/light/sm.css +97 -59
  119. package/dist/mijnoverheid/light/xl-theme.css +97 -59
  120. package/dist/mijnoverheid/light/xl.css +97 -59
  121. package/dist/mijnoverheid/light/xs-theme.css +97 -59
  122. package/dist/mijnoverheid/light/xs.css +97 -59
  123. package/dist/nldoc/dark/lg-theme.css +101 -63
  124. package/dist/nldoc/dark/lg.css +101 -63
  125. package/dist/nldoc/dark/md-theme.css +101 -63
  126. package/dist/nldoc/dark/md.css +101 -63
  127. package/dist/nldoc/dark/sm-theme.css +101 -63
  128. package/dist/nldoc/dark/sm.css +101 -63
  129. package/dist/nldoc/dark/xl-theme.css +101 -63
  130. package/dist/nldoc/dark/xl.css +101 -63
  131. package/dist/nldoc/dark/xs-theme.css +101 -63
  132. package/dist/nldoc/dark/xs.css +101 -63
  133. package/dist/nldoc/light/lg-theme.css +101 -63
  134. package/dist/nldoc/light/lg.css +101 -63
  135. package/dist/nldoc/light/md-theme.css +101 -63
  136. package/dist/nldoc/light/md.css +101 -63
  137. package/dist/nldoc/light/sm-theme.css +101 -63
  138. package/dist/nldoc/light/sm.css +101 -63
  139. package/dist/nldoc/light/xl-theme.css +101 -63
  140. package/dist/nldoc/light/xl.css +101 -63
  141. package/dist/nldoc/light/xs-theme.css +101 -63
  142. package/dist/nldoc/light/xs.css +101 -63
  143. package/dist/nldoc/ridderkerk/dark/lg-theme.css +101 -63
  144. package/dist/nldoc/ridderkerk/dark/lg.css +101 -63
  145. package/dist/nldoc/ridderkerk/dark/md-theme.css +101 -63
  146. package/dist/nldoc/ridderkerk/dark/md.css +101 -63
  147. package/dist/nldoc/ridderkerk/dark/sm-theme.css +101 -63
  148. package/dist/nldoc/ridderkerk/dark/sm.css +101 -63
  149. package/dist/nldoc/ridderkerk/dark/xl-theme.css +101 -63
  150. package/dist/nldoc/ridderkerk/dark/xl.css +101 -63
  151. package/dist/nldoc/ridderkerk/dark/xs-theme.css +101 -63
  152. package/dist/nldoc/ridderkerk/dark/xs.css +101 -63
  153. package/dist/nldoc/ridderkerk/light/lg-theme.css +101 -63
  154. package/dist/nldoc/ridderkerk/light/lg.css +101 -63
  155. package/dist/nldoc/ridderkerk/light/md-theme.css +101 -63
  156. package/dist/nldoc/ridderkerk/light/md.css +101 -63
  157. package/dist/nldoc/ridderkerk/light/sm-theme.css +101 -63
  158. package/dist/nldoc/ridderkerk/light/sm.css +101 -63
  159. package/dist/nldoc/ridderkerk/light/xl-theme.css +101 -63
  160. package/dist/nldoc/ridderkerk/light/xl.css +101 -63
  161. package/dist/nldoc/ridderkerk/light/xs-theme.css +101 -63
  162. package/dist/nldoc/ridderkerk/light/xs.css +101 -63
  163. package/dist/nldoc/rijksoverheid/dark/lg-theme.css +101 -63
  164. package/dist/nldoc/rijksoverheid/dark/lg.css +101 -63
  165. package/dist/nldoc/rijksoverheid/dark/md-theme.css +101 -63
  166. package/dist/nldoc/rijksoverheid/dark/md.css +101 -63
  167. package/dist/nldoc/rijksoverheid/dark/sm-theme.css +101 -63
  168. package/dist/nldoc/rijksoverheid/dark/sm.css +101 -63
  169. package/dist/nldoc/rijksoverheid/dark/xl-theme.css +101 -63
  170. package/dist/nldoc/rijksoverheid/dark/xl.css +101 -63
  171. package/dist/nldoc/rijksoverheid/dark/xs-theme.css +101 -63
  172. package/dist/nldoc/rijksoverheid/dark/xs.css +101 -63
  173. package/dist/nldoc/rijksoverheid/light/lg-theme.css +101 -63
  174. package/dist/nldoc/rijksoverheid/light/lg.css +101 -63
  175. package/dist/nldoc/rijksoverheid/light/md-theme.css +101 -63
  176. package/dist/nldoc/rijksoverheid/light/md.css +101 -63
  177. package/dist/nldoc/rijksoverheid/light/sm-theme.css +101 -63
  178. package/dist/nldoc/rijksoverheid/light/sm.css +101 -63
  179. package/dist/nldoc/rijksoverheid/light/xl-theme.css +101 -63
  180. package/dist/nldoc/rijksoverheid/light/xl.css +101 -63
  181. package/dist/nldoc/rijksoverheid/light/xs-theme.css +101 -63
  182. package/dist/nldoc/rijksoverheid/light/xs.css +101 -63
  183. package/dist/nldoc/waterschap-hollandse-delta/dark/lg-theme.css +101 -63
  184. package/dist/nldoc/waterschap-hollandse-delta/dark/lg.css +101 -63
  185. package/dist/nldoc/waterschap-hollandse-delta/dark/md-theme.css +101 -63
  186. package/dist/nldoc/waterschap-hollandse-delta/dark/md.css +101 -63
  187. package/dist/nldoc/waterschap-hollandse-delta/dark/sm-theme.css +101 -63
  188. package/dist/nldoc/waterschap-hollandse-delta/dark/sm.css +101 -63
  189. package/dist/nldoc/waterschap-hollandse-delta/dark/xl-theme.css +101 -63
  190. package/dist/nldoc/waterschap-hollandse-delta/dark/xl.css +101 -63
  191. package/dist/nldoc/waterschap-hollandse-delta/dark/xs-theme.css +101 -63
  192. package/dist/nldoc/waterschap-hollandse-delta/dark/xs.css +101 -63
  193. package/dist/nldoc/waterschap-hollandse-delta/light/lg-theme.css +101 -63
  194. package/dist/nldoc/waterschap-hollandse-delta/light/lg.css +101 -63
  195. package/dist/nldoc/waterschap-hollandse-delta/light/md-theme.css +101 -63
  196. package/dist/nldoc/waterschap-hollandse-delta/light/md.css +101 -63
  197. package/dist/nldoc/waterschap-hollandse-delta/light/sm-theme.css +101 -63
  198. package/dist/nldoc/waterschap-hollandse-delta/light/sm.css +101 -63
  199. package/dist/nldoc/waterschap-hollandse-delta/light/xl-theme.css +101 -63
  200. package/dist/nldoc/waterschap-hollandse-delta/light/xl.css +101 -63
  201. package/dist/nldoc/waterschap-hollandse-delta/light/xs-theme.css +101 -63
  202. package/dist/nldoc/waterschap-hollandse-delta/light/xs.css +101 -63
  203. package/lib/tokens/$metadata.json +5 -2
  204. package/lib/tokens/$themes.json +34 -55
  205. package/lib/tokens/component/alert.json +11 -32
  206. package/lib/tokens/component/link.json +2 -2
  207. package/lib/tokens/component/{button login.json → login link.json } +41 -22
  208. package/lib/tokens/component/paragraph.json +48 -0
  209. package/lib/tokens/mode/dark.json +1 -1
  210. package/lib/tokens/mode/light.json +1 -1
  211. package/lib/tokens/nl/utrecht-alert.json +7 -34
  212. package/lib/tokens/nl/utrecht-document.json +26 -0
  213. package/lib/tokens/nl/utrecht-heading.json +136 -0
  214. package/lib/tokens/nl/utrecht-link.json +3 -3
  215. package/lib/tokens/nl/utrecht-paragraph.json +13 -13
  216. package/lib/tokens/product/DigiD.json +8 -0
  217. package/lib/tokens/product/Digitoegankelijk.json +8 -0
  218. package/lib/tokens/product/{Elia.json → EVA.json} +21 -4
  219. package/lib/tokens/product/Logius Blauw.json +8 -0
  220. package/lib/tokens/product/Logius.json +8 -0
  221. package/lib/tokens/product/MijnOverheid.json +8 -0
  222. package/lib/tokens/product/NLdoc-mapping.json +12 -4
  223. package/lib/tokens/viewport/xs.json +8 -10
  224. package/package.json +1 -1
  225. /package/dist/{elia → eva}/index-theme.css +0 -0
  226. /package/dist/{elia → eva}/index.css +0 -0
  227. /package/dist/{elia → eva}/lightdark.css +0 -0
package/dist/digid/dark/lg-theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 20 Aug 2024 08:51:42 GMT
3
+ * Generated on Thu, 03 Oct 2024 13:09:47 GMT
4
4
  */
5
5
 
6
6
  .lux-theme--digid-dark {
@@ -23,20 +23,18 @@
23
23
  --utrecht-link-text-underline-offset: auto;
24
24
  --utrecht-link-text-decoration-thickness: auto;
25
25
  --utrecht-focus-inverse-outline-color: transparant;
26
- --utrecht-alert-icon-size: 1.5rem;
27
26
  --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
28
27
  --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
29
28
  --no-token: /* */; /* Discussie nodig */
29
+ --lux-login-link-border-style: solid;
30
+ --lux-login-link-icon-size: 2.5rem;
31
+ --lux-login-link-min-block-size: 48px;
32
+ --lux-login-link-min-inline-size: 48px;
30
33
  --lux-link-focus-text-decoration: none;
31
34
  --lux-link-text-decoration: underline;
32
- --lux-link-active-tex-decoration: none;
35
+ --lux-link-active-text-decoration: none;
33
36
  --lux-link-hover-text-decoration: none;
34
- --lux-button-login-border-style: solid;
35
- --lux-button-login-icon-size: 2.5rem;
36
- --lux-button-login-min-block-size: 48px;
37
- --lux-button-login-min-inline-size: 48px;
38
- --lux-alert-min-inline-size: 160px;
39
- --lux-alert-icon-start-size: 24px;
37
+ --lux-alert-icon-size: 24px;
40
38
  --lux-grid-margin: 2.5rem;
41
39
  --lux-grid-gutter: 2rem;
42
40
  --lux-grid-max-inline: 77.5rem;
@@ -225,7 +223,7 @@
225
223
  --viewport-font-size-heading-level-2: var(--lux-font-size-large-scale-lg);
226
224
  --viewport-font-size-heading-level-1: var(--lux-font-size-large-scale-xl);
227
225
  --mode-rijkslogo-color: var(--lux-color-wit);
228
- --mode-button-login-active-background-color: var(--lux-color-grijs-500);
226
+ --mode-login-link-active-background-color: var(--lux-color-grijs-500);
229
227
  --mode-button-secondary-background-color: var(--lux-color-none);
230
228
  --mode-link-active-color: var(--lux-color-paars-100);
231
229
  --mode-link-hover-color: var(--lux-color-lichtblauw-500); /* Gebruik deze kleur voor de hover van link tekst */
@@ -234,17 +232,21 @@
234
232
  --product-button-font-size: var(--lux-font-size-large-scale-sm);
235
233
  --product-button-secondary-background-color: var(--lux-color-none);
236
234
  --figma-size-icon-wrapper-height: var(--figma-viewport-size-icon-wrapper-height);
237
- --utrecht-paragraph-small-font-weight: var(--lux-font-weight-regular);
238
- --utrecht-paragraph-lead-font-weight: var(--lux-font-weight-regular);
239
235
  --utrecht-paragraph-margin-block-start: var(--lux-space-0);
240
236
  --utrecht-paragraph-margin-block-end: var(--lux-space-0);
241
- --utrecht-paragraph-font-weight: var(--lux-font-weight-regular);
242
237
  --utrecht-link-text-decoration: var(--lux-link-text-decoration);
243
238
  --utrecht-link-hover-text-decoration: var(--lux-link-hover-text-decoration);
244
239
  --utrecht-link-focus-text-decoration: var(--lux-link-focus-text-decoration);
245
- --utrecht-link-active-tex-decoration: var(--lux-link-active-tex-decoration);
240
+ --utrecht-link-active-text-decoration: var(--lux-link-active-text-decoration);
241
+ --utrecht-heading-6-font-weight: var(--lux-font-weight-bold);
242
+ --utrecht-heading-5-font-weight: var(--lux-font-weight-bold);
243
+ --utrecht-heading-4-font-weight: var(--lux-font-weight-bold);
244
+ --utrecht-heading-3-font-weight: var(--lux-font-weight-bold);
245
+ --utrecht-heading-2-font-weight: var(--lux-font-weight-bold);
246
+ --utrecht-heading-1-font-weight: var(--lux-font-weight-bold);
246
247
  --utrecht-focus-outline-width: var(--lux-focus-outline-width);
247
248
  --utrecht-focus-outline-style: var(--lux-focus-outline-style);
249
+ --utrecht-document-font-weight: var(--lux-font-weight-regular);
248
250
  --utrecht-button-subtle-hover-scale: var(--no-token);
249
251
  --utrecht-button-secondary-action-hover-scale: var(--no-token);
250
252
  --utrecht-button-primary-action-hover-scale: var(--no-token);
@@ -256,12 +258,21 @@
256
258
  --utrecht-button-color: var(--lux-color-paars-500);
257
259
  --utrecht-button-border-color: var(--lux-color-paars-500);
258
260
  --utrecht-button-background-color: var(--lux-color-paars-100);
259
- --utrecht-alert-heading-font-weight: var(--lux-font-weight-bold);
260
261
  --utrecht-alert-message-row-gap: var(--lux-space-0);
261
- --utrecht-alert-icon-inset-block-start: var(--lux-space-25);
262
- --utrecht-alert-margin-block-end: var(--no-token);
263
- --utrecht-alert-margin-block-start: var(--no-token);
262
+ --utrecht-alert-icon-size: var(--lux-alert-icon-size);
263
+ --utrecht-alert-icon-color: var(--lux-color-grijs-700);
264
264
  --lux-font-family-primary: var(--ro-font-family-primary);
265
+ --lux-paragraph-font-weight: var(--lux-font-weight-regular);
266
+ --lux-login-link-font-weight: var(--lux-font-weight-regular);
267
+ --lux-login-link-line-height: var(--lux-line-height-large-scale-sm);
268
+ --lux-login-link-border-width: var(--lux-border-width-default);
269
+ --lux-login-link-border-radius: var(--lux-border-radius-default);
270
+ --lux-login-link-column-gap: var(--lux-space-100);
271
+ --lux-login-link-padding-inline-end: var(--lux-space-200);
272
+ --lux-login-link-padding-inline-start: var(--lux-space-50);
273
+ --lux-login-link-font-size: var(--lux-font-size-large-scale-sm);
274
+ --lux-login-link-padding-block-end: var(--lux-space-50);
275
+ --lux-login-link-padding-block-start: var(--lux-space-50);
265
276
  --lux-link-focus-background-color: var(--lux-color-none);
266
277
  --lux-link-font-weight: var(--lux-font-weight-regular);
267
278
  --lux-link-icon-size: var(--lux-size-icon);
@@ -298,20 +309,9 @@
298
309
  --lux-button-primary-hover-border-color: var(--lux-color-none);
299
310
  --lux-button-primary-border-color: var(--lux-color-none);
300
311
  --lux-button-primary-font-size: var(--product-button-primary-font-size);
301
- --lux-button-login-font-weight: var(--lux-font-weight-regular);
302
- --lux-button-login-line-height: var(--lux-line-height-large-scale-sm);
303
- --lux-button-login-border-width: var(--lux-border-width-default);
304
- --lux-button-login-border-radius: var(--lux-border-radius-default);
305
- --lux-button-login-column-gap: var(--lux-space-100);
306
- --lux-button-login-padding-inline-end: var(--lux-space-200);
307
- --lux-button-login-padding-inline-start: var(--lux-space-50);
308
- --lux-button-login-font-size: var(--lux-font-size-large-scale-sm);
309
- --lux-button-login-padding-block-end: var(--lux-space-50);
310
- --lux-button-login-padding-block-start: var(--lux-space-50);
311
- --lux-alert-heading-font-weight: var(--lux-font-weight-regular);
312
- --lux-alert-paragraph-font-weight: var(--lux-font-weight-regular);
313
312
  --lux-alert-message-row-gap: var(--lux-space-0);
314
- --lux-alert-close-button-size: var(--lux-size-icon);
313
+ --lux-alert-close-button-size: var(--lux-size-icon); /* Mist in utrecht alert, wat gaan we hiermee doen? */
314
+ --lux-alert-icon-inset-block-start: var(--lux-space-25);
315
315
  --lux-alert-padding-inline-start: var(--lux-space-150);
316
316
  --lux-alert-padding-inline-end: var(--lux-space-150);
317
317
  --lux-alert-padding-block-start: var(--lux-space-150);
@@ -359,15 +359,29 @@
359
359
  --product-button-secondary-hover-border-color: var(--lux-color-border-default);
360
360
  --product-button-secondary-color: var(--lux-color-foreground-default);
361
361
  --product-button-secondary-border-color: var(--lux-color-border-default);
362
- --utrecht-paragraph-small-color: var(--lux-color-foreground-default);
363
- --utrecht-paragraph-lead-color: var(--lux-color-foreground-default);
364
- --utrecht-paragraph-font-family: var(--lux-font-family-primary);
365
- --utrecht-paragraph-color: var(--lux-color-foreground-default);
362
+ --utrecht-paragraph-small-font-weight: var(--lux-paragraph-font-weight);
363
+ --utrecht-paragraph-lead-font-weight: var(--lux-paragraph-font-weight);
364
+ --utrecht-paragraph-font-weight: var(--lux-paragraph-font-weight);
366
365
  --utrecht-link-column-gap: var(--lux-link-column-gap);
367
366
  --utrecht-link-icon-size: var(--lux-link-icon-size);
368
367
  --utrecht-link-font-weight: var(--lux-link-font-weight);
369
368
  --utrecht-link-focus-background-color: var(--lux-link-focus-background-color);
369
+ --utrecht-heading-6-font-family: var(--lux-font-family-primary);
370
+ --utrecht-heading-6-color: var(--lux-color-brand-default);
371
+ --utrecht-heading-5-font-family: var(--lux-font-family-primary);
372
+ --utrecht-heading-5-color: var(--lux-color-brand-default);
373
+ --utrecht-heading-4-font-family: var(--lux-font-family-primary);
374
+ --utrecht-heading-4-color: var(--lux-color-brand-default);
375
+ --utrecht-heading-3-font-size: var(--viewport-font-size-heading-level-3);
376
+ --utrecht-heading-3-font-family: var(--lux-font-family-primary);
377
+ --utrecht-heading-3-color: var(--lux-color-brand-default);
378
+ --utrecht-heading-2-font-family: var(--lux-font-family-primary);
379
+ --utrecht-heading-2-color: var(--lux-color-brand-default);
380
+ --utrecht-heading-1-font-family: var(--lux-font-family-primary);
381
+ --utrecht-heading-1-color: var(--lux-color-brand-default);
370
382
  --utrecht-focus-outline-offset: var(--lux-focus-outline-offset);
383
+ --utrecht-document-color: var(--lux-color-foreground-default);
384
+ --utrecht-document-font-family: var(--lux-font-family-primary);
371
385
  --utrecht-button-subtle-pressed-border-color: var(--lux-button-tertiary-hover-border-color);
372
386
  --utrecht-button-subtle-focus-border-color: var(--lux-button-tertiary-border-color);
373
387
  --utrecht-button-subtle-focus-background-color: var(--lux-button-tertiary-background-color);
@@ -421,12 +435,11 @@
421
435
  --utrecht-button-border-radius: var(--lux-button-border-radius);
422
436
  --utrecht-alert-info-border-color: var(--lux-alert-border-color);
423
437
  --utrecht-alert-info-color: var(--lux-alert-color);
424
- --utrecht-alert-column-gap: var(--lux-alert-column-gap);
425
438
  --utrecht-alert-icon-info-color: var(--lux-color-feedback-info-default);
439
+ --utrecht-alert-icon-inset-block-start: var(--lux-alert-icon-inset-block-start);
426
440
  --utrecht-alert-icon-ok-color: var(--lux-color-feedback-success-default);
427
441
  --utrecht-alert-icon-warning-color: var(--lux-color-feedback-warning-default);
428
442
  --utrecht-alert-icon-error-color: var(--lux-color-feedback-error-default);
429
- --utrecht-alert-icon-color: var(--lux-color-foreground-default); /* Deze token mist (nog) in utrecht component */
430
443
  --utrecht-alert-ok-border-color: var(--lux-alert-border-color);
431
444
  --utrecht-alert-ok-color: var(--lux-alert-color);
432
445
  --utrecht-alert-error-border-color: var(--lux-alert-border-color);
@@ -437,11 +450,26 @@
437
450
  --utrecht-alert-padding-inline-start: var(--lux-alert-padding-inline-start);
438
451
  --utrecht-alert-padding-block-end: var(--lux-alert-padding-block-end);
439
452
  --utrecht-alert-padding-block-start: var(--lux-alert-padding-block-start);
453
+ --utrecht-alert-column-gap: var(--lux-alert-column-gap);
440
454
  --utrecht-alert-color: var(--lux-alert-color);
441
455
  --utrecht-alert-border-width: var(--lux-alert-border-width);
442
456
  --utrecht-alert-border-radius: var(--lux-alert-border-radius);
443
457
  --utrecht-alert-border-color: var(--lux-alert-border-color);
444
458
  --utrecht-alert-background-color: var(--lux-color-background-subdued);
459
+ --lux-paragraph-font-family: var(--lux-font-family-primary);
460
+ --lux-paragraph-color: var(--lux-color-foreground-default);
461
+ --lux-login-link-focus-border-color: var(--lux-color-border-default);
462
+ --lux-login-link-focus-background-color: var(--lux-color-background-default);
463
+ --lux-login-link-focus-color: var(--lux-color-foreground-default);
464
+ --lux-login-link-font-family: var(--lux-font-family-primary);
465
+ --lux-login-link-active-background-color: var(--mode-login-link-active-background-color);
466
+ --lux-login-link-active-color: var(--lux-color-foreground-default);
467
+ --lux-login-link-hover-border-color: var(--lux-color-border-default);
468
+ --lux-login-link-hover-background-color: var(--lux-color-background-hover);
469
+ --lux-login-link-hover-color: var(--lux-color-foreground-default);
470
+ --lux-login-link-border-color: var(--lux-color-border-default);
471
+ --lux-login-link-background-color: var(--lux-color-background-default);
472
+ --lux-login-link-color: var(--lux-color-foreground-default);
445
473
  --lux-link-focus-color: var(--lux-color-foreground-link);
446
474
  --lux-link-font-family: var(--lux-font-family-primary);
447
475
  --lux-link-visited-color: var(--mode-link-visited-color);
@@ -462,20 +490,11 @@
462
490
  --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
463
491
  --lux-button-primary-background-color: var(--lux-color-brand-default);
464
492
  --lux-button-font-size: var(--product-button-font-size);
465
- --lux-button-login-font-family: var(--lux-font-family-primary);
466
- --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
467
- --lux-button-login-active-color: var(--lux-color-foreground-default);
468
- --lux-button-login-hover-border-color: var(--lux-color-border-default);
469
- --lux-button-login-hover-background-color: var(--lux-color-background-hover);
470
- --lux-button-login-hover-color: var(--lux-color-foreground-default);
471
- --lux-button-login-border-color: var(--lux-color-border-default);
472
- --lux-button-login-background-color: var(--lux-color-background-default);
473
- --lux-button-login-color: var(--lux-color-foreground-default);
474
- --lux-alert-font-family: var(--lux-font-family-primary);
475
493
  --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
476
494
  --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
477
495
  --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
478
496
  --lux-alert-info-background-color: var(--lux-color-feedback-info-subdued);
497
+ --lux-font-size-heading-level-5: var(--viewport-font-size-heading-level-4);
479
498
  --lux-font-size-heading-level-4: var(--viewport-font-size-heading-level-4);
480
499
  --lux-font-size-heading-level-3: var(--viewport-font-size-heading-level-3);
481
500
  --lux-font-size-heading-level-2: var(--viewport-font-size-heading-level-2);
@@ -483,6 +502,7 @@
483
502
  --lux-font-size-body-large: var(--viewport-font-size-body-large);
484
503
  --lux-font-size-body-default: var(--viewport-font-size-body-default);
485
504
  --lux-font-size-body-small: var(--viewport-font-size-body-small);
505
+ --lux-line-height-heading-level-5: var(--viewport-line-height-heading-level-4);
486
506
  --lux-line-height-heading-level-4: var(--viewport-line-height-heading-level-4);
487
507
  --lux-line-height-heading-level-3: var(--viewport-line-height-heading-level-3);
488
508
  --lux-line-height-heading-level-2: var(--viewport-line-height-heading-level-2);
@@ -491,12 +511,10 @@
491
511
  --lux-line-height-body-default: var(--viewport-line-height-body-default);
492
512
  --lux-line-height-body-small: var(--viewport-line-height-body-small);
493
513
  --lux-color-border-strong: var(--lux-color-foreground-default);
494
- --utrecht-paragraph-small-line-height: var(--lux-line-height-body-small);
495
- --utrecht-paragraph-small-font-size: var(--lux-font-size-body-small);
496
- --utrecht-paragraph-lead-line-height: var(--lux-line-height-body-large);
497
- --utrecht-paragraph-lead-font-size: var(--lux-font-size-body-large);
498
- --utrecht-paragraph-line-height: var(--lux-line-height-body-default);
499
- --utrecht-paragraph-font-size: var(--lux-font-size-body-default);
514
+ --utrecht-paragraph-small-color: var(--lux-paragraph-color);
515
+ --utrecht-paragraph-lead-color: var(--lux-paragraph-color);
516
+ --utrecht-paragraph-font-family: var(--lux-paragraph-font-family);
517
+ --utrecht-paragraph-color: var(--lux-paragraph-color);
500
518
  --utrecht-link-font-family: var(--lux-link-font-family);
501
519
  --utrecht-link-visited-color: var(--lux-link-visited-color);
502
520
  --utrecht-link-hover-color: var(--lux-link-hover-color);
@@ -504,6 +522,19 @@
504
522
  --utrecht-link-active-color: var(--lux-link-active-color);
505
523
  --utrecht-link-text-decoration-color: var(--lux-link-color);
506
524
  --utrecht-link-color: var(--lux-link-color);
525
+ --utrecht-heading-6-font-size: var(--lux-font-size-heading-level-5);
526
+ --utrecht-heading-6-line-height: var(--lux-line-height-heading-level-5);
527
+ --utrecht-heading-5-font-size: var(--lux-font-size-heading-level-5);
528
+ --utrecht-heading-5-line-height: var(--lux-line-height-heading-level-5);
529
+ --utrecht-heading-4-font-size: var(--lux-font-size-heading-level-4);
530
+ --utrecht-heading-4-line-height: var(--lux-line-height-heading-level-4);
531
+ --utrecht-heading-3-line-height: var(--lux-line-height-heading-level-3);
532
+ --utrecht-heading-2-font-size: var(--lux-font-size-heading-level-2);
533
+ --utrecht-heading-2-line-height: var(--lux-line-height-heading-level-2);
534
+ --utrecht-heading-1-font-size: var(--lux-font-size-heading-level-1);
535
+ --utrecht-heading-1-line-height: var(--lux-line-height-heading-level-1);
536
+ --utrecht-document-font-size: var(--lux-font-size-body-default);
537
+ --utrecht-document-line-height: var(--lux-line-height-body-default);
507
538
  --utrecht-button-subtle-disabled-color: var(--lux-button-tertiary-disabled-color);
508
539
  --utrecht-button-subtle-disabled-background-color: var(--lux-button-tertiary-disabled-background-color);
509
540
  --utrecht-button-secondary-action-disabled-color: var(--lux-button-secondary-disabled-color);
@@ -523,11 +554,17 @@
523
554
  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
524
555
  --utrecht-button-font-size: var(--lux-button-font-size);
525
556
  --utrecht-button-font-family: var(--lux-button-font-family);
526
- --utrecht-alert-heading-font-family: var(--lux-alert-font-family);
527
557
  --utrecht-alert-info-background-color: var(--lux-alert-info-background-color);
528
558
  --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
529
559
  --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
530
560
  --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
561
+ --lux-paragraph-small-line-height: var(--lux-line-height-body-small);
562
+ --lux-paragraph-small-font-size: var(--lux-font-size-body-small);
563
+ --lux-paragraph-lead-line-height: var(--lux-line-height-body-large);
564
+ --lux-paragraph-lead-font-size: var(--lux-font-size-body-large);
565
+ --lux-paragraph-default-line-height: var(--lux-line-height-body-default);
566
+ --lux-paragraph-default-font-size: var(--lux-font-size-body-default);
567
+ --lux-login-link-active-border-color: var(--lux-color-border-strong);
531
568
  --lux-link-font-size: var(--lux-font-size-body-default);
532
569
  --lux-link-line-height: var(--lux-line-height-body-default);
533
570
  --lux-button-tertiary-active-color: var(--mode-button-tertiary-color);
@@ -541,10 +578,13 @@
541
578
  --lux-button-secondary-hover-background-color: var(--mode-button-secondary-hover-background-color);
542
579
  --lux-button-secondary-color: var(--mode-button-secondary-color);
543
580
  --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
544
- --lux-button-login-active-border-color: var(--lux-color-border-strong);
545
- --lux-alert-font-size: var(--lux-font-size-body-default);
546
- --lux-alert-line-height: var(--lux-line-height-body-default);
547
581
  --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
582
+ --utrecht-paragraph-small-line-height: var(--lux-paragraph-small-line-height);
583
+ --utrecht-paragraph-small-font-size: var(--lux-paragraph-small-font-size);
584
+ --utrecht-paragraph-lead-line-height: var(--lux-paragraph-lead-line-height);
585
+ --utrecht-paragraph-lead-font-size: var(--lux-paragraph-lead-font-size);
586
+ --utrecht-paragraph-line-height: var(--lux-paragraph-default-line-height);
587
+ --utrecht-paragraph-font-size: var(--lux-paragraph-default-font-size);
548
588
  --utrecht-link-font-size: var(--lux-link-font-size);
549
589
  --utrecht-link-line-height: var(--lux-link-line-height);
550
590
  --utrecht-focus-outline-color: var(--lux-color-focus-outline);
@@ -567,6 +607,4 @@
567
607
  --utrecht-button-secondary-action-active-border-color: var(--lux-button-secondary-active-border-color);
568
608
  --utrecht-button-secondary-action-color: var(--lux-button-secondary-color);
569
609
  --utrecht-button-secondary-action-border-color: var(--lux-button-secondary-border-color);
570
- --utrecht-alert-heading-font-size: var(--lux-alert-font-size);
571
- --utrecht-alert-heading-line-height: var(--lux-alert-line-height);
572
610
  }
package/dist/digid/dark/lg.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 20 Aug 2024 08:51:42 GMT
3
+ * Generated on Thu, 03 Oct 2024 13:09:47 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -18,20 +18,18 @@
18
18
  --utrecht-link-text-underline-offset: auto;
19
19
  --utrecht-link-text-decoration-thickness: auto;
20
20
  --utrecht-focus-inverse-outline-color: transparant;
21
- --utrecht-alert-icon-size: 1.5rem;
22
21
  --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
23
22
  --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
24
23
  --no-token: /* */; /* Discussie nodig */
24
+ --lux-login-link-border-style: solid;
25
+ --lux-login-link-icon-size: 2.5rem;
26
+ --lux-login-link-min-block-size: 48px;
27
+ --lux-login-link-min-inline-size: 48px;
25
28
  --lux-link-focus-text-decoration: none;
26
29
  --lux-link-text-decoration: underline;
27
- --lux-link-active-tex-decoration: none;
30
+ --lux-link-active-text-decoration: none;
28
31
  --lux-link-hover-text-decoration: none;
29
- --lux-button-login-border-style: solid;
30
- --lux-button-login-icon-size: 2.5rem;
31
- --lux-button-login-min-block-size: 48px;
32
- --lux-button-login-min-inline-size: 48px;
33
- --lux-alert-min-inline-size: 160px;
34
- --lux-alert-icon-start-size: 24px;
32
+ --lux-alert-icon-size: 24px;
35
33
  --lux-grid-margin: 2.5rem;
36
34
  --lux-grid-gutter: 2rem;
37
35
  --lux-grid-max-inline: 77.5rem;
@@ -220,7 +218,7 @@
220
218
  --viewport-font-size-heading-level-2: var(--lux-font-size-large-scale-lg);
221
219
  --viewport-font-size-heading-level-1: var(--lux-font-size-large-scale-xl);
222
220
  --mode-rijkslogo-color: var(--lux-color-wit);
223
- --mode-button-login-active-background-color: var(--lux-color-grijs-500);
221
+ --mode-login-link-active-background-color: var(--lux-color-grijs-500);
224
222
  --mode-button-secondary-background-color: var(--lux-color-none);
225
223
  --mode-link-active-color: var(--lux-color-paars-100);
226
224
  --mode-link-hover-color: var(--lux-color-lichtblauw-500); /* Gebruik deze kleur voor de hover van link tekst */
@@ -228,17 +226,21 @@
228
226
  --mode-link-color: var(--lux-color-lichtblauw-100); /* Gebruik deze kleur voor link tekst */
229
227
  --product-button-font-size: var(--lux-font-size-large-scale-sm);
230
228
  --product-button-secondary-background-color: var(--lux-color-none);
231
- --utrecht-paragraph-small-font-weight: var(--lux-font-weight-regular);
232
- --utrecht-paragraph-lead-font-weight: var(--lux-font-weight-regular);
233
229
  --utrecht-paragraph-margin-block-start: var(--lux-space-0);
234
230
  --utrecht-paragraph-margin-block-end: var(--lux-space-0);
235
- --utrecht-paragraph-font-weight: var(--lux-font-weight-regular);
236
231
  --utrecht-link-text-decoration: var(--lux-link-text-decoration);
237
232
  --utrecht-link-hover-text-decoration: var(--lux-link-hover-text-decoration);
238
233
  --utrecht-link-focus-text-decoration: var(--lux-link-focus-text-decoration);
239
- --utrecht-link-active-tex-decoration: var(--lux-link-active-tex-decoration);
234
+ --utrecht-link-active-text-decoration: var(--lux-link-active-text-decoration);
235
+ --utrecht-heading-6-font-weight: var(--lux-font-weight-bold);
236
+ --utrecht-heading-5-font-weight: var(--lux-font-weight-bold);
237
+ --utrecht-heading-4-font-weight: var(--lux-font-weight-bold);
238
+ --utrecht-heading-3-font-weight: var(--lux-font-weight-bold);
239
+ --utrecht-heading-2-font-weight: var(--lux-font-weight-bold);
240
+ --utrecht-heading-1-font-weight: var(--lux-font-weight-bold);
240
241
  --utrecht-focus-outline-width: var(--lux-focus-outline-width);
241
242
  --utrecht-focus-outline-style: var(--lux-focus-outline-style);
243
+ --utrecht-document-font-weight: var(--lux-font-weight-regular);
242
244
  --utrecht-button-subtle-hover-scale: var(--no-token);
243
245
  --utrecht-button-secondary-action-hover-scale: var(--no-token);
244
246
  --utrecht-button-primary-action-hover-scale: var(--no-token);
@@ -250,12 +252,21 @@
250
252
  --utrecht-button-color: var(--lux-color-paars-500);
251
253
  --utrecht-button-border-color: var(--lux-color-paars-500);
252
254
  --utrecht-button-background-color: var(--lux-color-paars-100);
253
- --utrecht-alert-heading-font-weight: var(--lux-font-weight-bold);
254
255
  --utrecht-alert-message-row-gap: var(--lux-space-0);
255
- --utrecht-alert-icon-inset-block-start: var(--lux-space-25);
256
- --utrecht-alert-margin-block-end: var(--no-token);
257
- --utrecht-alert-margin-block-start: var(--no-token);
256
+ --utrecht-alert-icon-size: var(--lux-alert-icon-size);
257
+ --utrecht-alert-icon-color: var(--lux-color-grijs-700);
258
258
  --lux-font-family-primary: var(--ro-font-family-primary);
259
+ --lux-paragraph-font-weight: var(--lux-font-weight-regular);
260
+ --lux-login-link-font-weight: var(--lux-font-weight-regular);
261
+ --lux-login-link-line-height: var(--lux-line-height-large-scale-sm);
262
+ --lux-login-link-border-width: var(--lux-border-width-default);
263
+ --lux-login-link-border-radius: var(--lux-border-radius-default);
264
+ --lux-login-link-column-gap: var(--lux-space-100);
265
+ --lux-login-link-padding-inline-end: var(--lux-space-200);
266
+ --lux-login-link-padding-inline-start: var(--lux-space-50);
267
+ --lux-login-link-font-size: var(--lux-font-size-large-scale-sm);
268
+ --lux-login-link-padding-block-end: var(--lux-space-50);
269
+ --lux-login-link-padding-block-start: var(--lux-space-50);
259
270
  --lux-link-focus-background-color: var(--lux-color-none);
260
271
  --lux-link-font-weight: var(--lux-font-weight-regular);
261
272
  --lux-link-icon-size: var(--lux-size-icon);
@@ -292,20 +303,9 @@
292
303
  --lux-button-primary-hover-border-color: var(--lux-color-none);
293
304
  --lux-button-primary-border-color: var(--lux-color-none);
294
305
  --lux-button-primary-font-size: var(--product-button-primary-font-size);
295
- --lux-button-login-font-weight: var(--lux-font-weight-regular);
296
- --lux-button-login-line-height: var(--lux-line-height-large-scale-sm);
297
- --lux-button-login-border-width: var(--lux-border-width-default);
298
- --lux-button-login-border-radius: var(--lux-border-radius-default);
299
- --lux-button-login-column-gap: var(--lux-space-100);
300
- --lux-button-login-padding-inline-end: var(--lux-space-200);
301
- --lux-button-login-padding-inline-start: var(--lux-space-50);
302
- --lux-button-login-font-size: var(--lux-font-size-large-scale-sm);
303
- --lux-button-login-padding-block-end: var(--lux-space-50);
304
- --lux-button-login-padding-block-start: var(--lux-space-50);
305
- --lux-alert-heading-font-weight: var(--lux-font-weight-regular);
306
- --lux-alert-paragraph-font-weight: var(--lux-font-weight-regular);
307
306
  --lux-alert-message-row-gap: var(--lux-space-0);
308
- --lux-alert-close-button-size: var(--lux-size-icon);
307
+ --lux-alert-close-button-size: var(--lux-size-icon); /* Mist in utrecht alert, wat gaan we hiermee doen? */
308
+ --lux-alert-icon-inset-block-start: var(--lux-space-25);
309
309
  --lux-alert-padding-inline-start: var(--lux-space-150);
310
310
  --lux-alert-padding-inline-end: var(--lux-space-150);
311
311
  --lux-alert-padding-block-start: var(--lux-space-150);
@@ -353,15 +353,29 @@
353
353
  --product-button-secondary-hover-border-color: var(--lux-color-border-default);
354
354
  --product-button-secondary-color: var(--lux-color-foreground-default);
355
355
  --product-button-secondary-border-color: var(--lux-color-border-default);
356
- --utrecht-paragraph-small-color: var(--lux-color-foreground-default);
357
- --utrecht-paragraph-lead-color: var(--lux-color-foreground-default);
358
- --utrecht-paragraph-font-family: var(--lux-font-family-primary);
359
- --utrecht-paragraph-color: var(--lux-color-foreground-default);
356
+ --utrecht-paragraph-small-font-weight: var(--lux-paragraph-font-weight);
357
+ --utrecht-paragraph-lead-font-weight: var(--lux-paragraph-font-weight);
358
+ --utrecht-paragraph-font-weight: var(--lux-paragraph-font-weight);
360
359
  --utrecht-link-column-gap: var(--lux-link-column-gap);
361
360
  --utrecht-link-icon-size: var(--lux-link-icon-size);
362
361
  --utrecht-link-font-weight: var(--lux-link-font-weight);
363
362
  --utrecht-link-focus-background-color: var(--lux-link-focus-background-color);
363
+ --utrecht-heading-6-font-family: var(--lux-font-family-primary);
364
+ --utrecht-heading-6-color: var(--lux-color-brand-default);
365
+ --utrecht-heading-5-font-family: var(--lux-font-family-primary);
366
+ --utrecht-heading-5-color: var(--lux-color-brand-default);
367
+ --utrecht-heading-4-font-family: var(--lux-font-family-primary);
368
+ --utrecht-heading-4-color: var(--lux-color-brand-default);
369
+ --utrecht-heading-3-font-size: var(--viewport-font-size-heading-level-3);
370
+ --utrecht-heading-3-font-family: var(--lux-font-family-primary);
371
+ --utrecht-heading-3-color: var(--lux-color-brand-default);
372
+ --utrecht-heading-2-font-family: var(--lux-font-family-primary);
373
+ --utrecht-heading-2-color: var(--lux-color-brand-default);
374
+ --utrecht-heading-1-font-family: var(--lux-font-family-primary);
375
+ --utrecht-heading-1-color: var(--lux-color-brand-default);
364
376
  --utrecht-focus-outline-offset: var(--lux-focus-outline-offset);
377
+ --utrecht-document-color: var(--lux-color-foreground-default);
378
+ --utrecht-document-font-family: var(--lux-font-family-primary);
365
379
  --utrecht-button-subtle-pressed-border-color: var(--lux-button-tertiary-hover-border-color);
366
380
  --utrecht-button-subtle-focus-border-color: var(--lux-button-tertiary-border-color);
367
381
  --utrecht-button-subtle-focus-background-color: var(--lux-button-tertiary-background-color);
@@ -415,12 +429,11 @@
415
429
  --utrecht-button-border-radius: var(--lux-button-border-radius);
416
430
  --utrecht-alert-info-border-color: var(--lux-alert-border-color);
417
431
  --utrecht-alert-info-color: var(--lux-alert-color);
418
- --utrecht-alert-column-gap: var(--lux-alert-column-gap);
419
432
  --utrecht-alert-icon-info-color: var(--lux-color-feedback-info-default);
433
+ --utrecht-alert-icon-inset-block-start: var(--lux-alert-icon-inset-block-start);
420
434
  --utrecht-alert-icon-ok-color: var(--lux-color-feedback-success-default);
421
435
  --utrecht-alert-icon-warning-color: var(--lux-color-feedback-warning-default);
422
436
  --utrecht-alert-icon-error-color: var(--lux-color-feedback-error-default);
423
- --utrecht-alert-icon-color: var(--lux-color-foreground-default); /* Deze token mist (nog) in utrecht component */
424
437
  --utrecht-alert-ok-border-color: var(--lux-alert-border-color);
425
438
  --utrecht-alert-ok-color: var(--lux-alert-color);
426
439
  --utrecht-alert-error-border-color: var(--lux-alert-border-color);
@@ -431,11 +444,26 @@
431
444
  --utrecht-alert-padding-inline-start: var(--lux-alert-padding-inline-start);
432
445
  --utrecht-alert-padding-block-end: var(--lux-alert-padding-block-end);
433
446
  --utrecht-alert-padding-block-start: var(--lux-alert-padding-block-start);
447
+ --utrecht-alert-column-gap: var(--lux-alert-column-gap);
434
448
  --utrecht-alert-color: var(--lux-alert-color);
435
449
  --utrecht-alert-border-width: var(--lux-alert-border-width);
436
450
  --utrecht-alert-border-radius: var(--lux-alert-border-radius);
437
451
  --utrecht-alert-border-color: var(--lux-alert-border-color);
438
452
  --utrecht-alert-background-color: var(--lux-color-background-subdued);
453
+ --lux-paragraph-font-family: var(--lux-font-family-primary);
454
+ --lux-paragraph-color: var(--lux-color-foreground-default);
455
+ --lux-login-link-focus-border-color: var(--lux-color-border-default);
456
+ --lux-login-link-focus-background-color: var(--lux-color-background-default);
457
+ --lux-login-link-focus-color: var(--lux-color-foreground-default);
458
+ --lux-login-link-font-family: var(--lux-font-family-primary);
459
+ --lux-login-link-active-background-color: var(--mode-login-link-active-background-color);
460
+ --lux-login-link-active-color: var(--lux-color-foreground-default);
461
+ --lux-login-link-hover-border-color: var(--lux-color-border-default);
462
+ --lux-login-link-hover-background-color: var(--lux-color-background-hover);
463
+ --lux-login-link-hover-color: var(--lux-color-foreground-default);
464
+ --lux-login-link-border-color: var(--lux-color-border-default);
465
+ --lux-login-link-background-color: var(--lux-color-background-default);
466
+ --lux-login-link-color: var(--lux-color-foreground-default);
439
467
  --lux-link-focus-color: var(--lux-color-foreground-link);
440
468
  --lux-link-font-family: var(--lux-font-family-primary);
441
469
  --lux-link-visited-color: var(--mode-link-visited-color);
@@ -456,20 +484,11 @@
456
484
  --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
457
485
  --lux-button-primary-background-color: var(--lux-color-brand-default);
458
486
  --lux-button-font-size: var(--product-button-font-size);
459
- --lux-button-login-font-family: var(--lux-font-family-primary);
460
- --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
461
- --lux-button-login-active-color: var(--lux-color-foreground-default);
462
- --lux-button-login-hover-border-color: var(--lux-color-border-default);
463
- --lux-button-login-hover-background-color: var(--lux-color-background-hover);
464
- --lux-button-login-hover-color: var(--lux-color-foreground-default);
465
- --lux-button-login-border-color: var(--lux-color-border-default);
466
- --lux-button-login-background-color: var(--lux-color-background-default);
467
- --lux-button-login-color: var(--lux-color-foreground-default);
468
- --lux-alert-font-family: var(--lux-font-family-primary);
469
487
  --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
470
488
  --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
471
489
  --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
472
490
  --lux-alert-info-background-color: var(--lux-color-feedback-info-subdued);
491
+ --lux-font-size-heading-level-5: var(--viewport-font-size-heading-level-4);
473
492
  --lux-font-size-heading-level-4: var(--viewport-font-size-heading-level-4);
474
493
  --lux-font-size-heading-level-3: var(--viewport-font-size-heading-level-3);
475
494
  --lux-font-size-heading-level-2: var(--viewport-font-size-heading-level-2);
@@ -477,6 +496,7 @@
477
496
  --lux-font-size-body-large: var(--viewport-font-size-body-large);
478
497
  --lux-font-size-body-default: var(--viewport-font-size-body-default);
479
498
  --lux-font-size-body-small: var(--viewport-font-size-body-small);
499
+ --lux-line-height-heading-level-5: var(--viewport-line-height-heading-level-4);
480
500
  --lux-line-height-heading-level-4: var(--viewport-line-height-heading-level-4);
481
501
  --lux-line-height-heading-level-3: var(--viewport-line-height-heading-level-3);
482
502
  --lux-line-height-heading-level-2: var(--viewport-line-height-heading-level-2);
@@ -485,12 +505,10 @@
485
505
  --lux-line-height-body-default: var(--viewport-line-height-body-default);
486
506
  --lux-line-height-body-small: var(--viewport-line-height-body-small);
487
507
  --lux-color-border-strong: var(--lux-color-foreground-default);
488
- --utrecht-paragraph-small-line-height: var(--lux-line-height-body-small);
489
- --utrecht-paragraph-small-font-size: var(--lux-font-size-body-small);
490
- --utrecht-paragraph-lead-line-height: var(--lux-line-height-body-large);
491
- --utrecht-paragraph-lead-font-size: var(--lux-font-size-body-large);
492
- --utrecht-paragraph-line-height: var(--lux-line-height-body-default);
493
- --utrecht-paragraph-font-size: var(--lux-font-size-body-default);
508
+ --utrecht-paragraph-small-color: var(--lux-paragraph-color);
509
+ --utrecht-paragraph-lead-color: var(--lux-paragraph-color);
510
+ --utrecht-paragraph-font-family: var(--lux-paragraph-font-family);
511
+ --utrecht-paragraph-color: var(--lux-paragraph-color);
494
512
  --utrecht-link-font-family: var(--lux-link-font-family);
495
513
  --utrecht-link-visited-color: var(--lux-link-visited-color);
496
514
  --utrecht-link-hover-color: var(--lux-link-hover-color);
@@ -498,6 +516,19 @@
498
516
  --utrecht-link-active-color: var(--lux-link-active-color);
499
517
  --utrecht-link-text-decoration-color: var(--lux-link-color);
500
518
  --utrecht-link-color: var(--lux-link-color);
519
+ --utrecht-heading-6-font-size: var(--lux-font-size-heading-level-5);
520
+ --utrecht-heading-6-line-height: var(--lux-line-height-heading-level-5);
521
+ --utrecht-heading-5-font-size: var(--lux-font-size-heading-level-5);
522
+ --utrecht-heading-5-line-height: var(--lux-line-height-heading-level-5);
523
+ --utrecht-heading-4-font-size: var(--lux-font-size-heading-level-4);
524
+ --utrecht-heading-4-line-height: var(--lux-line-height-heading-level-4);
525
+ --utrecht-heading-3-line-height: var(--lux-line-height-heading-level-3);
526
+ --utrecht-heading-2-font-size: var(--lux-font-size-heading-level-2);
527
+ --utrecht-heading-2-line-height: var(--lux-line-height-heading-level-2);
528
+ --utrecht-heading-1-font-size: var(--lux-font-size-heading-level-1);
529
+ --utrecht-heading-1-line-height: var(--lux-line-height-heading-level-1);
530
+ --utrecht-document-font-size: var(--lux-font-size-body-default);
531
+ --utrecht-document-line-height: var(--lux-line-height-body-default);
501
532
  --utrecht-button-subtle-disabled-color: var(--lux-button-tertiary-disabled-color);
502
533
  --utrecht-button-subtle-disabled-background-color: var(--lux-button-tertiary-disabled-background-color);
503
534
  --utrecht-button-secondary-action-disabled-color: var(--lux-button-secondary-disabled-color);
@@ -517,11 +548,17 @@
517
548
  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
518
549
  --utrecht-button-font-size: var(--lux-button-font-size);
519
550
  --utrecht-button-font-family: var(--lux-button-font-family);
520
- --utrecht-alert-heading-font-family: var(--lux-alert-font-family);
521
551
  --utrecht-alert-info-background-color: var(--lux-alert-info-background-color);
522
552
  --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
523
553
  --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
524
554
  --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
555
+ --lux-paragraph-small-line-height: var(--lux-line-height-body-small);
556
+ --lux-paragraph-small-font-size: var(--lux-font-size-body-small);
557
+ --lux-paragraph-lead-line-height: var(--lux-line-height-body-large);
558
+ --lux-paragraph-lead-font-size: var(--lux-font-size-body-large);
559
+ --lux-paragraph-default-line-height: var(--lux-line-height-body-default);
560
+ --lux-paragraph-default-font-size: var(--lux-font-size-body-default);
561
+ --lux-login-link-active-border-color: var(--lux-color-border-strong);
525
562
  --lux-link-font-size: var(--lux-font-size-body-default);
526
563
  --lux-link-line-height: var(--lux-line-height-body-default);
527
564
  --lux-button-tertiary-active-color: var(--mode-button-tertiary-color);
@@ -535,10 +572,13 @@
535
572
  --lux-button-secondary-hover-background-color: var(--mode-button-secondary-hover-background-color);
536
573
  --lux-button-secondary-color: var(--mode-button-secondary-color);
537
574
  --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
538
- --lux-button-login-active-border-color: var(--lux-color-border-strong);
539
- --lux-alert-font-size: var(--lux-font-size-body-default);
540
- --lux-alert-line-height: var(--lux-line-height-body-default);
541
575
  --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
576
+ --utrecht-paragraph-small-line-height: var(--lux-paragraph-small-line-height);
577
+ --utrecht-paragraph-small-font-size: var(--lux-paragraph-small-font-size);
578
+ --utrecht-paragraph-lead-line-height: var(--lux-paragraph-lead-line-height);
579
+ --utrecht-paragraph-lead-font-size: var(--lux-paragraph-lead-font-size);
580
+ --utrecht-paragraph-line-height: var(--lux-paragraph-default-line-height);
581
+ --utrecht-paragraph-font-size: var(--lux-paragraph-default-font-size);
542
582
  --utrecht-link-font-size: var(--lux-link-font-size);
543
583
  --utrecht-link-line-height: var(--lux-link-line-height);
544
584
  --utrecht-focus-outline-color: var(--lux-color-focus-outline);
@@ -561,6 +601,4 @@
561
601
  --utrecht-button-secondary-action-active-border-color: var(--lux-button-secondary-active-border-color);
562
602
  --utrecht-button-secondary-action-color: var(--lux-button-secondary-color);
563
603
  --utrecht-button-secondary-action-border-color: var(--lux-button-secondary-border-color);
564
- --utrecht-alert-heading-font-size: var(--lux-alert-font-size);
565
- --utrecht-alert-heading-line-height: var(--lux-alert-line-height);
566
604
  }