@lux-design-system/design-tokens 1.0.0-alpha.13 → 1.0.0-alpha.15

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 (223) hide show
  1. package/dist/digid/dark/lg-theme.css +64 -36
  2. package/dist/digid/dark/lg.css +63 -36
  3. package/dist/digid/dark/md-theme.css +64 -36
  4. package/dist/digid/dark/md.css +63 -36
  5. package/dist/digid/dark/sm-theme.css +64 -36
  6. package/dist/digid/dark/sm.css +63 -36
  7. package/dist/digid/dark/xl-theme.css +64 -36
  8. package/dist/digid/dark/xl.css +63 -36
  9. package/dist/digid/dark/xs-theme.css +64 -36
  10. package/dist/digid/dark/xs.css +63 -36
  11. package/dist/digid/light/lg-theme.css +64 -36
  12. package/dist/digid/light/lg.css +63 -36
  13. package/dist/digid/light/md-theme.css +64 -36
  14. package/dist/digid/light/md.css +63 -36
  15. package/dist/digid/light/sm-theme.css +64 -36
  16. package/dist/digid/light/sm.css +63 -36
  17. package/dist/digid/light/xl-theme.css +64 -36
  18. package/dist/digid/light/xl.css +63 -36
  19. package/dist/digid/light/xs-theme.css +64 -36
  20. package/dist/digid/light/xs.css +63 -36
  21. package/dist/digitoegankelijk/dark/lg-theme.css +66 -38
  22. package/dist/digitoegankelijk/dark/lg.css +65 -38
  23. package/dist/digitoegankelijk/dark/md-theme.css +66 -38
  24. package/dist/digitoegankelijk/dark/md.css +65 -38
  25. package/dist/digitoegankelijk/dark/sm-theme.css +66 -38
  26. package/dist/digitoegankelijk/dark/sm.css +65 -38
  27. package/dist/digitoegankelijk/dark/xl-theme.css +66 -38
  28. package/dist/digitoegankelijk/dark/xl.css +65 -38
  29. package/dist/digitoegankelijk/dark/xs-theme.css +66 -38
  30. package/dist/digitoegankelijk/dark/xs.css +65 -38
  31. package/dist/digitoegankelijk/light/lg-theme.css +66 -38
  32. package/dist/digitoegankelijk/light/lg.css +65 -38
  33. package/dist/digitoegankelijk/light/md-theme.css +66 -38
  34. package/dist/digitoegankelijk/light/md.css +65 -38
  35. package/dist/digitoegankelijk/light/sm-theme.css +66 -38
  36. package/dist/digitoegankelijk/light/sm.css +65 -38
  37. package/dist/digitoegankelijk/light/xl-theme.css +66 -38
  38. package/dist/digitoegankelijk/light/xl.css +65 -38
  39. package/dist/digitoegankelijk/light/xs-theme.css +66 -38
  40. package/dist/digitoegankelijk/light/xs.css +65 -38
  41. package/dist/elia/dark/lg-theme.css +66 -38
  42. package/dist/elia/dark/lg.css +65 -38
  43. package/dist/elia/dark/md-theme.css +66 -38
  44. package/dist/elia/dark/md.css +65 -38
  45. package/dist/elia/dark/sm-theme.css +66 -38
  46. package/dist/elia/dark/sm.css +65 -38
  47. package/dist/elia/dark/xl-theme.css +66 -38
  48. package/dist/elia/dark/xl.css +65 -38
  49. package/dist/elia/dark/xs-theme.css +66 -38
  50. package/dist/elia/dark/xs.css +65 -38
  51. package/dist/elia/light/lg-theme.css +66 -38
  52. package/dist/elia/light/lg.css +65 -38
  53. package/dist/elia/light/md-theme.css +66 -38
  54. package/dist/elia/light/md.css +65 -38
  55. package/dist/elia/light/sm-theme.css +66 -38
  56. package/dist/elia/light/sm.css +65 -38
  57. package/dist/elia/light/xl-theme.css +66 -38
  58. package/dist/elia/light/xl.css +65 -38
  59. package/dist/elia/light/xs-theme.css +66 -38
  60. package/dist/elia/light/xs.css +65 -38
  61. package/dist/figma-tokens.json +3534 -2874
  62. package/dist/index.json +1085 -571
  63. package/dist/logius/dark/lg-theme.css +66 -38
  64. package/dist/logius/dark/lg.css +65 -38
  65. package/dist/logius/dark/md-theme.css +66 -38
  66. package/dist/logius/dark/md.css +65 -38
  67. package/dist/logius/dark/sm-theme.css +66 -38
  68. package/dist/logius/dark/sm.css +65 -38
  69. package/dist/logius/dark/xl-theme.css +66 -38
  70. package/dist/logius/dark/xl.css +65 -38
  71. package/dist/logius/dark/xs-theme.css +66 -38
  72. package/dist/logius/dark/xs.css +65 -38
  73. package/dist/logius/light/lg-theme.css +66 -38
  74. package/dist/logius/light/lg.css +65 -38
  75. package/dist/logius/light/md-theme.css +66 -38
  76. package/dist/logius/light/md.css +65 -38
  77. package/dist/logius/light/sm-theme.css +66 -38
  78. package/dist/logius/light/sm.css +65 -38
  79. package/dist/logius/light/xl-theme.css +66 -38
  80. package/dist/logius/light/xl.css +65 -38
  81. package/dist/logius/light/xs-theme.css +66 -38
  82. package/dist/logius/light/xs.css +65 -38
  83. package/dist/logius-blauw/dark/lg-theme.css +66 -38
  84. package/dist/logius-blauw/dark/lg.css +65 -38
  85. package/dist/logius-blauw/dark/md-theme.css +66 -38
  86. package/dist/logius-blauw/dark/md.css +65 -38
  87. package/dist/logius-blauw/dark/sm-theme.css +66 -38
  88. package/dist/logius-blauw/dark/sm.css +65 -38
  89. package/dist/logius-blauw/dark/xl-theme.css +66 -38
  90. package/dist/logius-blauw/dark/xl.css +65 -38
  91. package/dist/logius-blauw/dark/xs-theme.css +66 -38
  92. package/dist/logius-blauw/dark/xs.css +65 -38
  93. package/dist/logius-blauw/light/lg-theme.css +66 -38
  94. package/dist/logius-blauw/light/lg.css +65 -38
  95. package/dist/logius-blauw/light/md-theme.css +66 -38
  96. package/dist/logius-blauw/light/md.css +65 -38
  97. package/dist/logius-blauw/light/sm-theme.css +66 -38
  98. package/dist/logius-blauw/light/sm.css +65 -38
  99. package/dist/logius-blauw/light/xl-theme.css +66 -38
  100. package/dist/logius-blauw/light/xl.css +65 -38
  101. package/dist/logius-blauw/light/xs-theme.css +66 -38
  102. package/dist/logius-blauw/light/xs.css +65 -38
  103. package/dist/mijnoverheid/dark/lg-theme.css +65 -37
  104. package/dist/mijnoverheid/dark/lg.css +64 -37
  105. package/dist/mijnoverheid/dark/md-theme.css +65 -37
  106. package/dist/mijnoverheid/dark/md.css +64 -37
  107. package/dist/mijnoverheid/dark/sm-theme.css +65 -37
  108. package/dist/mijnoverheid/dark/sm.css +64 -37
  109. package/dist/mijnoverheid/dark/xl-theme.css +65 -37
  110. package/dist/mijnoverheid/dark/xl.css +64 -37
  111. package/dist/mijnoverheid/dark/xs-theme.css +65 -37
  112. package/dist/mijnoverheid/dark/xs.css +64 -37
  113. package/dist/mijnoverheid/light/lg-theme.css +65 -37
  114. package/dist/mijnoverheid/light/lg.css +64 -37
  115. package/dist/mijnoverheid/light/md-theme.css +65 -37
  116. package/dist/mijnoverheid/light/md.css +64 -37
  117. package/dist/mijnoverheid/light/sm-theme.css +65 -37
  118. package/dist/mijnoverheid/light/sm.css +64 -37
  119. package/dist/mijnoverheid/light/xl-theme.css +65 -37
  120. package/dist/mijnoverheid/light/xl.css +64 -37
  121. package/dist/mijnoverheid/light/xs-theme.css +65 -37
  122. package/dist/mijnoverheid/light/xs.css +64 -37
  123. package/dist/nldoc/dark/lg-theme.css +60 -33
  124. package/dist/nldoc/dark/lg.css +60 -33
  125. package/dist/nldoc/dark/md-theme.css +60 -33
  126. package/dist/nldoc/dark/md.css +60 -33
  127. package/dist/nldoc/dark/sm-theme.css +60 -33
  128. package/dist/nldoc/dark/sm.css +60 -33
  129. package/dist/nldoc/dark/xl-theme.css +60 -33
  130. package/dist/nldoc/dark/xl.css +60 -33
  131. package/dist/nldoc/dark/xs-theme.css +60 -33
  132. package/dist/nldoc/dark/xs.css +60 -33
  133. package/dist/nldoc/light/lg-theme.css +60 -33
  134. package/dist/nldoc/light/lg.css +60 -33
  135. package/dist/nldoc/light/md-theme.css +60 -33
  136. package/dist/nldoc/light/md.css +60 -33
  137. package/dist/nldoc/light/sm-theme.css +60 -33
  138. package/dist/nldoc/light/sm.css +60 -33
  139. package/dist/nldoc/light/xl-theme.css +60 -33
  140. package/dist/nldoc/light/xl.css +60 -33
  141. package/dist/nldoc/light/xs-theme.css +60 -33
  142. package/dist/nldoc/light/xs.css +60 -33
  143. package/dist/nldoc/ridderkerk/dark/lg-theme.css +59 -32
  144. package/dist/nldoc/ridderkerk/dark/lg.css +59 -32
  145. package/dist/nldoc/ridderkerk/dark/md-theme.css +59 -32
  146. package/dist/nldoc/ridderkerk/dark/md.css +59 -32
  147. package/dist/nldoc/ridderkerk/dark/sm-theme.css +59 -32
  148. package/dist/nldoc/ridderkerk/dark/sm.css +59 -32
  149. package/dist/nldoc/ridderkerk/dark/xl-theme.css +59 -32
  150. package/dist/nldoc/ridderkerk/dark/xl.css +59 -32
  151. package/dist/nldoc/ridderkerk/dark/xs-theme.css +59 -32
  152. package/dist/nldoc/ridderkerk/dark/xs.css +59 -32
  153. package/dist/nldoc/ridderkerk/light/lg-theme.css +59 -32
  154. package/dist/nldoc/ridderkerk/light/lg.css +59 -32
  155. package/dist/nldoc/ridderkerk/light/md-theme.css +59 -32
  156. package/dist/nldoc/ridderkerk/light/md.css +59 -32
  157. package/dist/nldoc/ridderkerk/light/sm-theme.css +59 -32
  158. package/dist/nldoc/ridderkerk/light/sm.css +59 -32
  159. package/dist/nldoc/ridderkerk/light/xl-theme.css +59 -32
  160. package/dist/nldoc/ridderkerk/light/xl.css +59 -32
  161. package/dist/nldoc/ridderkerk/light/xs-theme.css +59 -32
  162. package/dist/nldoc/ridderkerk/light/xs.css +59 -32
  163. package/dist/nldoc/rijksoverheid/dark/lg-theme.css +60 -33
  164. package/dist/nldoc/rijksoverheid/dark/lg.css +60 -33
  165. package/dist/nldoc/rijksoverheid/dark/md-theme.css +60 -33
  166. package/dist/nldoc/rijksoverheid/dark/md.css +60 -33
  167. package/dist/nldoc/rijksoverheid/dark/sm-theme.css +60 -33
  168. package/dist/nldoc/rijksoverheid/dark/sm.css +60 -33
  169. package/dist/nldoc/rijksoverheid/dark/xl-theme.css +60 -33
  170. package/dist/nldoc/rijksoverheid/dark/xl.css +60 -33
  171. package/dist/nldoc/rijksoverheid/dark/xs-theme.css +60 -33
  172. package/dist/nldoc/rijksoverheid/dark/xs.css +60 -33
  173. package/dist/nldoc/rijksoverheid/light/lg-theme.css +60 -33
  174. package/dist/nldoc/rijksoverheid/light/lg.css +60 -33
  175. package/dist/nldoc/rijksoverheid/light/md-theme.css +60 -33
  176. package/dist/nldoc/rijksoverheid/light/md.css +60 -33
  177. package/dist/nldoc/rijksoverheid/light/sm-theme.css +60 -33
  178. package/dist/nldoc/rijksoverheid/light/sm.css +60 -33
  179. package/dist/nldoc/rijksoverheid/light/xl-theme.css +60 -33
  180. package/dist/nldoc/rijksoverheid/light/xl.css +60 -33
  181. package/dist/nldoc/rijksoverheid/light/xs-theme.css +60 -33
  182. package/dist/nldoc/rijksoverheid/light/xs.css +60 -33
  183. package/dist/nldoc/waterschap-hollandse-delta/dark/lg-theme.css +59 -32
  184. package/dist/nldoc/waterschap-hollandse-delta/dark/lg.css +59 -32
  185. package/dist/nldoc/waterschap-hollandse-delta/dark/md-theme.css +59 -32
  186. package/dist/nldoc/waterschap-hollandse-delta/dark/md.css +59 -32
  187. package/dist/nldoc/waterschap-hollandse-delta/dark/sm-theme.css +59 -32
  188. package/dist/nldoc/waterschap-hollandse-delta/dark/sm.css +59 -32
  189. package/dist/nldoc/waterschap-hollandse-delta/dark/xl-theme.css +59 -32
  190. package/dist/nldoc/waterschap-hollandse-delta/dark/xl.css +59 -32
  191. package/dist/nldoc/waterschap-hollandse-delta/dark/xs-theme.css +59 -32
  192. package/dist/nldoc/waterschap-hollandse-delta/dark/xs.css +59 -32
  193. package/dist/nldoc/waterschap-hollandse-delta/light/lg-theme.css +59 -32
  194. package/dist/nldoc/waterschap-hollandse-delta/light/lg.css +59 -32
  195. package/dist/nldoc/waterschap-hollandse-delta/light/md-theme.css +59 -32
  196. package/dist/nldoc/waterschap-hollandse-delta/light/md.css +59 -32
  197. package/dist/nldoc/waterschap-hollandse-delta/light/sm-theme.css +59 -32
  198. package/dist/nldoc/waterschap-hollandse-delta/light/sm.css +59 -32
  199. package/dist/nldoc/waterschap-hollandse-delta/light/xl-theme.css +59 -32
  200. package/dist/nldoc/waterschap-hollandse-delta/light/xl.css +59 -32
  201. package/dist/nldoc/waterschap-hollandse-delta/light/xs-theme.css +59 -32
  202. package/dist/nldoc/waterschap-hollandse-delta/light/xs.css +59 -32
  203. package/lib/tokens/$themes.json +227 -148
  204. package/lib/tokens/NLdoc/Rijksoverheid.json +1 -1
  205. package/lib/tokens/NLdoc/default.json +1 -1
  206. package/lib/tokens/common/viewport/lg.json +76 -64
  207. package/lib/tokens/common/viewport/md.json +76 -64
  208. package/lib/tokens/common/viewport/sm.json +76 -64
  209. package/lib/tokens/common/viewport/xl.json +68 -55
  210. package/lib/tokens/common/viewport/xs.json +76 -64
  211. package/lib/tokens/component/alert.json +2 -2
  212. package/lib/tokens/component/button login.json +2 -2
  213. package/lib/tokens/component/button.json +1 -1
  214. package/lib/tokens/component/link.json +2 -2
  215. package/lib/tokens/core/default.json +115 -16
  216. package/lib/tokens/product/DigiD.json +84 -2
  217. package/lib/tokens/product/Digitoegankelijk.json +79 -51
  218. package/lib/tokens/product/Elia.json +85 -3
  219. package/lib/tokens/product/Logius Blauw.json +79 -51
  220. package/lib/tokens/product/Logius.json +77 -49
  221. package/lib/tokens/product/MijnOverheid.json +79 -59
  222. package/lib/tokens/product/NLdoc-mapping.json +74 -51
  223. package/package.json +3 -3
package/dist/digid/dark/lg-theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 09:32:06 GMT
3
+ * Generated on Wed, 07 Aug 2024 07:02:34 GMT
4
4
  */
5
5
 
6
6
  .lux-theme--digid-dark {
@@ -11,33 +11,20 @@
11
11
  --mode-icon-logo-eidas-stars-color: #ffffff;
12
12
  --mode-icon-logo-eherkenning-e-color: #ffffff;
13
13
  --product-button-primary-font-size: 1.1875rem;
14
- --product-button-font-size: 1.125rem;
15
14
  --viewport-rijkslint-wordmark-default-padding-block-start: 3.125rem;
16
15
  --viewport-rijkslint-wordmark-75-padding-block-start: 2.5rem;
17
- --viewport-line-height-2xl: 3.5rem;
18
- --viewport-line-height-xl: 2.25rem;
19
- --viewport-line-height-l: 2rem;
20
- --viewport-line-height-m: 1.75rem;
21
- --viewport-line-height-s: 1.5rem;
22
- --viewport-font-size-2xl: 2.5rem;
23
- --viewport-font-size-xl: 1.625rem;
24
- --viewport-font-size-l: 1.375rem;
25
- --viewport-font-size-m: 1.125rem;
26
- --viewport-font-size-s: 1rem;
16
+ --figma-product: DigiD;
27
17
  --figma-focus-outline-radius: 6px;
28
18
  --figma-viewport-size-icon-wrapper-height: 1.75rem;
29
19
  --figma-screen-size: 64rem;
30
20
  --figma-rijkslint-variant: default;
31
21
  --no-token: /* */; /* Discussie nodig */
32
- --rh-font-family-serif: RijksoverheidSerifWeb, 'Times New Roman', serif; /* Serif Web is vooral interessant voor de afwisseling in bijvoorbeeld digitale magazines. */
33
- --rh-font-family-sans: RijksoverheidSansWebText, Arial, Verdana, sans-serif; /* De Sans Web wordt toegepast voor langere (lees-)teksten. */
34
- --oud-lux-border-radius-default: 4px;
22
+ --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
23
+ --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
35
24
  --lux-button-login-border-style: solid;
36
- --lux-button-login-line-height: 1.75rem;
37
25
  --lux-button-login-icon-size: 2.5rem;
38
26
  --lux-button-login-min-block-size: 48px;
39
27
  --lux-button-login-min-inline-size: 48px;
40
- --lux-button-login-font-size: 1.125rem;
41
28
  --lux-alert-min-inline-size: 160px;
42
29
  --lux-alert-icon-start-size: 24px;
43
30
  --lux-size-target: 3rem; /* Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. */
@@ -47,6 +34,26 @@
47
34
  --lux-grid-max-inline: 77.5rem;
48
35
  --lux-grid-margin: 2.5rem;
49
36
  --lux-grid-gutter: 2rem;
37
+ --lux-font-size-small-scale-xl: 2.25rem;
38
+ --lux-font-size-small-scale-lg: 1.5rem;
39
+ --lux-font-size-small-scale-md: 1.25rem;
40
+ --lux-font-size-small-scale-sm: 1rem;
41
+ --lux-font-size-small-scale-xs: 0.875rem;
42
+ --lux-font-size-large-scale-xl: 2.5rem;
43
+ --lux-font-size-large-scale-lg: 1.625rem;
44
+ --lux-font-size-large-scale-md: 1.375rem;
45
+ --lux-font-size-large-scale-sm: 1.125rem;
46
+ --lux-font-size-large-scale-xs: 1rem;
47
+ --lux-line-height-small-scale-xl: 3.25rem;
48
+ --lux-line-height-small-scale-lg: 2rem;
49
+ --lux-line-height-small-scale-md: 1.75rem;
50
+ --lux-line-height-small-scale-sm: 1.5rem;
51
+ --lux-line-height-small-scale-xs: 1.5rem;
52
+ --lux-line-height-large-scale-xl: 3.5rem;
53
+ --lux-line-height-large-scale-lg: 2.25rem;
54
+ --lux-line-height-large-scale-md: 2rem;
55
+ --lux-line-height-large-scale-sm: 1.75rem;
56
+ --lux-line-height-large-scale-xs: 1.5rem;
50
57
  --lux-font-weight-bold: Bold;
51
58
  --lux-font-weight-regular: Regular;
52
59
  --lux-space-700: calc(7 * 0.5rem);
@@ -200,6 +207,7 @@
200
207
  --mode-link-hover-color: var(--lux-color-lichtblauw-500); /* Gebruik deze kleur voor de hover van link tekst */
201
208
  --mode-link-visited-color: var(--lux-color-paars-100);
202
209
  --mode-link-color: var(--lux-color-lichtblauw-100); /* Gebruik deze kleur voor link tekst */
210
+ --product-button-font-size: var(--lux-font-size-large-scale-sm);
203
211
  --product-button-secondary-background-color: var(--lux-color-none);
204
212
  --utrecht-link-placeholder-font-weight: var(--no-token);
205
213
  --utrecht-link-placeholder-color: var(--no-token);
@@ -260,18 +268,22 @@
260
268
  --utrecht-alert-icon-color: var(--no-token);
261
269
  --utrecht-alert-margin-block-end: var(--no-token);
262
270
  --utrecht-alert-margin-block-start: var(--no-token);
271
+ --viewport-font-size-body-small: var(--lux-font-size-large-scale-xs);
272
+ --viewport-font-size-body-large: var(--lux-font-size-large-scale-md);
273
+ --viewport-font-size-body-default: var(--lux-font-size-large-scale-sm);
274
+ --viewport-font-size-heading-level-4: var(--lux-font-size-large-scale-sm);
275
+ --viewport-font-size-heading-level-3: var(--lux-font-size-large-scale-md);
276
+ --viewport-font-size-heading-level-2: var(--lux-font-size-large-scale-lg);
277
+ --viewport-font-size-heading-level-1: var(--lux-font-size-large-scale-xl);
278
+ --viewport-line-height-body-small: var(--lux-line-height-large-scale-xs);
279
+ --viewport-line-height-body-large: var(--lux-line-height-large-scale-md);
280
+ --viewport-line-height-body-default: var(--lux-line-height-large-scale-sm);
281
+ --viewport-line-height-heading-level-4: var(--lux-line-height-large-scale-sm);
282
+ --viewport-line-height-heading-level-3: var(--lux-line-height-large-scale-md);
283
+ --viewport-line-height-heading-level-2: var(--lux-line-height-large-scale-lg);
284
+ --viewport-line-height-heading-level-1: var(--lux-line-height-large-scale-xl);
263
285
  --figma-size-icon-wrapper-height: var(--figma-viewport-size-icon-wrapper-height);
264
- --lux-font-size-2xl: var(--viewport-font-size-2xl);
265
- --lux-font-size-xl: var(--viewport-font-size-xl);
266
- --lux-font-size-l: var(--viewport-font-size-l);
267
- --lux-font-size-m: var(--viewport-font-size-m);
268
- --lux-font-size-s: var(--viewport-font-size-s);
269
- --lux-line-height-2xl: var(--viewport-line-height-2xl);
270
- --lux-line-height-xl: var(--viewport-line-height-xl);
271
- --lux-line-height-l: var(--viewport-line-height-l);
272
- --lux-line-height-m: var(--viewport-line-height-m);
273
- --lux-line-height-s: var(--viewport-line-height-s);
274
- --lux-font-family-primary: var(--rh-font-family-sans);
286
+ --lux-font-family-primary: var(--ro-font-family-primary);
275
287
  --lux-link-font-weight: var(--lux-font-weight-regular);
276
288
  --lux-link-icon-size: var(--lux-size-icon);
277
289
  --lux-link-column-gap: var(--lux-space-50);
@@ -301,18 +313,20 @@
301
313
  --lux-button-padding-inline-end: var(--lux-space-200);
302
314
  --lux-button-padding-block-start: var(--lux-space-100);
303
315
  --lux-button-padding-inline-start: var(--lux-space-200);
316
+ --lux-button-line-height: var(--lux-line-height-large-scale-sm);
304
317
  --lux-button-primary-disabled-border-color: var(--lux-color-none);
305
318
  --lux-button-primary-active-border-color: var(--lux-color-none);
306
319
  --lux-button-primary-hover-border-color: var(--lux-color-none);
307
320
  --lux-button-primary-border-color: var(--lux-color-none);
308
321
  --lux-button-primary-font-size: var(--product-button-primary-font-size);
309
- --lux-button-font-size: var(--product-button-font-size);
310
322
  --lux-button-login-font-weight: var(--lux-font-weight-regular);
323
+ --lux-button-login-line-height: var(--lux-line-height-large-scale-sm);
311
324
  --lux-button-login-border-width: var(--lux-border-width-default);
312
325
  --lux-button-login-border-radius: var(--lux-border-radius-default);
313
326
  --lux-button-login-column-gap: var(--lux-space-100);
314
327
  --lux-button-login-padding-inline-end: var(--lux-space-200);
315
328
  --lux-button-login-padding-inline-start: var(--lux-space-50);
329
+ --lux-button-login-font-size: var(--lux-font-size-large-scale-sm);
316
330
  --lux-button-login-padding-block-end: var(--lux-space-50);
317
331
  --lux-button-login-padding-block-start: var(--lux-space-50);
318
332
  --lux-alert-font-weight: var(--lux-font-weight-regular);
@@ -393,8 +407,8 @@
393
407
  --utrecht-button-column-gap: var(--lux-button-column-gap);
394
408
  --utrecht-button-min-inline-size: var(--lux-button-min-inline-size);
395
409
  --utrecht-button-min-block-size: var(--lux-button-min-block-size);
410
+ --utrecht-button-line-height: var(--lux-button-line-height);
396
411
  --utrecht-button-font-weight: var(--lux-button-font-weight);
397
- --utrecht-button-font-size: var(--lux-button-font-size);
398
412
  --utrecht-button-border-width: var(--lux-button-border-width);
399
413
  --utrecht-button-border-radius: var(--lux-button-border-radius);
400
414
  --utrecht-alert-icon-gap: var(--lux-alert-column-gap);
@@ -416,8 +430,6 @@
416
430
  --utrecht-alert-border-radius: var(--lux-alert-border-radius);
417
431
  --utrecht-alert-border-color: var(--lux-alert-border-color);
418
432
  --utrecht-alert-background-color: var(--lux-color-feedback-info-subdued);
419
- --lux-link-font-size: var(--lux-font-size-m);
420
- --lux-link-line-height: var(--lux-line-height-m);
421
433
  --lux-link-font-family: var(--lux-font-family-primary);
422
434
  --lux-link-visited-color: var(--mode-link-visited-color);
423
435
  --lux-link-active-color: var(--mode-link-active-color);
@@ -428,7 +440,6 @@
428
440
  --lux-button-tertiary-disabled-background-color: var(--lux-color-background-subdued);
429
441
  --lux-button-secondary-disabled-color: var(--lux-color-foreground-subdued);
430
442
  --lux-button-secondary-disabled-background-color: var(--lux-color-background-subdued);
431
- --lux-button-line-height: var(--lux-line-height-m);
432
443
  --lux-button-primary-disabled-color: var(--lux-color-foreground-subdued);
433
444
  --lux-button-primary-disabled-background-color: var(--lux-color-background-subdued);
434
445
  --lux-button-primary-active-color: var(--lux-color-foreground-on-emphasis);
@@ -437,6 +448,7 @@
437
448
  --lux-button-primary-hover-background-color: var(--lux-color-brand-hover);
438
449
  --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
439
450
  --lux-button-primary-background-color: var(--lux-color-brand-default);
451
+ --lux-button-font-size: var(--product-button-font-size);
440
452
  --lux-button-login-font-family: var(--lux-font-family-primary);
441
453
  --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
442
454
  --lux-button-login-active-color: var(--lux-color-foreground-default);
@@ -447,12 +459,24 @@
447
459
  --lux-button-login-background-color: var(--lux-color-background-default);
448
460
  --lux-button-login-color: var(--lux-color-foreground-default);
449
461
  --lux-alert-font-family: var(--lux-font-family-primary);
450
- --lux-alert-font-size: var(--lux-font-size-m);
451
- --lux-alert-line-height: var(--lux-line-height-m);
452
462
  --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
453
463
  --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
454
464
  --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
455
465
  --lux-alert-info-background-color: var(--lux-color-feedback-info-subdued);
466
+ --lux-font-size-heading-level-4: var(--viewport-font-size-heading-level-4);
467
+ --lux-font-size-heading-level-3: var(--viewport-font-size-heading-level-3);
468
+ --lux-font-size-heading-level-2: var(--viewport-font-size-heading-level-2);
469
+ --lux-font-size-heading-level-1: var(--viewport-font-size-heading-level-1);
470
+ --lux-font-size-body-large: var(--viewport-font-size-body-large);
471
+ --lux-font-size-body-default: var(--viewport-font-size-body-default);
472
+ --lux-font-size-body-small: var(--viewport-font-size-body-small);
473
+ --lux-line-height-heading-level-4: var(--viewport-line-height-heading-level-4);
474
+ --lux-line-height-heading-level-3: var(--viewport-line-height-heading-level-3);
475
+ --lux-line-height-heading-level-2: var(--viewport-line-height-heading-level-2);
476
+ --lux-line-height-heading-level-1: var(--viewport-line-height-heading-level-1);
477
+ --lux-line-height-body-large: var(--viewport-line-height-body-large);
478
+ --lux-line-height-body-default: var(--viewport-line-height-body-default);
479
+ --lux-line-height-body-small: var(--viewport-line-height-body-small);
456
480
  --lux-color-border-strong: var(--lux-color-foreground-default);
457
481
  --utrecht-link-visited-color: var(--lux-link-visited-color);
458
482
  --utrecht-link-hover-color: var(--lux-link-hover-color);
@@ -472,11 +496,13 @@
472
496
  --utrecht-button-primary-action-color: var(--lux-button-primary-color);
473
497
  --utrecht-button-primary-action-background-color: var(--lux-button-primary-background-color);
474
498
  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
475
- --utrecht-button-line-height: var(--lux-button-line-height);
499
+ --utrecht-button-font-size: var(--lux-button-font-size);
476
500
  --utrecht-button-font-family: var(--lux-button-font-family);
477
501
  --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
478
502
  --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
479
503
  --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
504
+ --lux-link-font-size: var(--lux-font-size-body-default);
505
+ --lux-link-line-height: var(--lux-line-height-body-default);
480
506
  --lux-button-tertiary-active-color: var(--mode-button-tertiary-color);
481
507
  --lux-button-tertiary-hover-color: var(--mode-button-tertiary-hover-color);
482
508
  --lux-button-tertiary-hover-background-color: var(--mode-button-tertiary-hover-background-color);
@@ -489,6 +515,8 @@
489
515
  --lux-button-secondary-color: var(--mode-button-secondary-color);
490
516
  --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
491
517
  --lux-button-login-active-border-color: var(--lux-color-border-strong);
518
+ --lux-alert-font-size: var(--lux-font-size-body-default);
519
+ --lux-alert-line-height: var(--lux-line-height-body-default);
492
520
  --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
493
521
  --utrecht-button-subtle-hover-color: var(--lux-button-tertiary-hover-color);
494
522
  --utrecht-button-subtle-hover-background-color: var(--lux-button-tertiary-hover-background-color);
package/dist/digid/dark/lg.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 09:32:06 GMT
3
+ * Generated on Wed, 07 Aug 2024 07:02:34 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -11,29 +11,15 @@
11
11
  --mode-icon-logo-eidas-stars-color: #ffffff;
12
12
  --mode-icon-logo-eherkenning-e-color: #ffffff;
13
13
  --product-button-primary-font-size: 1.1875rem;
14
- --product-button-font-size: 1.125rem;
15
14
  --viewport-rijkslint-wordmark-default-padding-block-start: 3.125rem;
16
15
  --viewport-rijkslint-wordmark-75-padding-block-start: 2.5rem;
17
- --viewport-line-height-2xl: 3.5rem;
18
- --viewport-line-height-xl: 2.25rem;
19
- --viewport-line-height-l: 2rem;
20
- --viewport-line-height-m: 1.75rem;
21
- --viewport-line-height-s: 1.5rem;
22
- --viewport-font-size-2xl: 2.5rem;
23
- --viewport-font-size-xl: 1.625rem;
24
- --viewport-font-size-l: 1.375rem;
25
- --viewport-font-size-m: 1.125rem;
26
- --viewport-font-size-s: 1rem;
27
16
  --no-token: /* */; /* Discussie nodig */
28
- --rh-font-family-serif: RijksoverheidSerifWeb, 'Times New Roman', serif; /* Serif Web is vooral interessant voor de afwisseling in bijvoorbeeld digitale magazines. */
29
- --rh-font-family-sans: RijksoverheidSansWebText, Arial, Verdana, sans-serif; /* De Sans Web wordt toegepast voor langere (lees-)teksten. */
30
- --oud-lux-border-radius-default: 4px;
17
+ --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
18
+ --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
31
19
  --lux-button-login-border-style: solid;
32
- --lux-button-login-line-height: 1.75rem;
33
20
  --lux-button-login-icon-size: 2.5rem;
34
21
  --lux-button-login-min-block-size: 48px;
35
22
  --lux-button-login-min-inline-size: 48px;
36
- --lux-button-login-font-size: 1.125rem;
37
23
  --lux-alert-min-inline-size: 160px;
38
24
  --lux-alert-icon-start-size: 24px;
39
25
  --lux-size-target: 3rem; /* Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. */
@@ -43,6 +29,26 @@
43
29
  --lux-grid-max-inline: 77.5rem;
44
30
  --lux-grid-margin: 2.5rem;
45
31
  --lux-grid-gutter: 2rem;
32
+ --lux-font-size-small-scale-xl: 2.25rem;
33
+ --lux-font-size-small-scale-lg: 1.5rem;
34
+ --lux-font-size-small-scale-md: 1.25rem;
35
+ --lux-font-size-small-scale-sm: 1rem;
36
+ --lux-font-size-small-scale-xs: 0.875rem;
37
+ --lux-font-size-large-scale-xl: 2.5rem;
38
+ --lux-font-size-large-scale-lg: 1.625rem;
39
+ --lux-font-size-large-scale-md: 1.375rem;
40
+ --lux-font-size-large-scale-sm: 1.125rem;
41
+ --lux-font-size-large-scale-xs: 1rem;
42
+ --lux-line-height-small-scale-xl: 3.25rem;
43
+ --lux-line-height-small-scale-lg: 2rem;
44
+ --lux-line-height-small-scale-md: 1.75rem;
45
+ --lux-line-height-small-scale-sm: 1.5rem;
46
+ --lux-line-height-small-scale-xs: 1.5rem;
47
+ --lux-line-height-large-scale-xl: 3.5rem;
48
+ --lux-line-height-large-scale-lg: 2.25rem;
49
+ --lux-line-height-large-scale-md: 2rem;
50
+ --lux-line-height-large-scale-sm: 1.75rem;
51
+ --lux-line-height-large-scale-xs: 1.5rem;
46
52
  --lux-font-weight-bold: Bold;
47
53
  --lux-font-weight-regular: Regular;
48
54
  --lux-space-700: calc(7 * 0.5rem);
@@ -196,6 +202,7 @@
196
202
  --mode-link-hover-color: var(--lux-color-lichtblauw-500); /* Gebruik deze kleur voor de hover van link tekst */
197
203
  --mode-link-visited-color: var(--lux-color-paars-100);
198
204
  --mode-link-color: var(--lux-color-lichtblauw-100); /* Gebruik deze kleur voor link tekst */
205
+ --product-button-font-size: var(--lux-font-size-large-scale-sm);
199
206
  --product-button-secondary-background-color: var(--lux-color-none);
200
207
  --utrecht-link-placeholder-font-weight: var(--no-token);
201
208
  --utrecht-link-placeholder-color: var(--no-token);
@@ -256,17 +263,21 @@
256
263
  --utrecht-alert-icon-color: var(--no-token);
257
264
  --utrecht-alert-margin-block-end: var(--no-token);
258
265
  --utrecht-alert-margin-block-start: var(--no-token);
259
- --lux-font-size-2xl: var(--viewport-font-size-2xl);
260
- --lux-font-size-xl: var(--viewport-font-size-xl);
261
- --lux-font-size-l: var(--viewport-font-size-l);
262
- --lux-font-size-m: var(--viewport-font-size-m);
263
- --lux-font-size-s: var(--viewport-font-size-s);
264
- --lux-line-height-2xl: var(--viewport-line-height-2xl);
265
- --lux-line-height-xl: var(--viewport-line-height-xl);
266
- --lux-line-height-l: var(--viewport-line-height-l);
267
- --lux-line-height-m: var(--viewport-line-height-m);
268
- --lux-line-height-s: var(--viewport-line-height-s);
269
- --lux-font-family-primary: var(--rh-font-family-sans);
266
+ --viewport-font-size-body-small: var(--lux-font-size-large-scale-xs);
267
+ --viewport-font-size-body-large: var(--lux-font-size-large-scale-md);
268
+ --viewport-font-size-body-default: var(--lux-font-size-large-scale-sm);
269
+ --viewport-font-size-heading-level-4: var(--lux-font-size-large-scale-sm);
270
+ --viewport-font-size-heading-level-3: var(--lux-font-size-large-scale-md);
271
+ --viewport-font-size-heading-level-2: var(--lux-font-size-large-scale-lg);
272
+ --viewport-font-size-heading-level-1: var(--lux-font-size-large-scale-xl);
273
+ --viewport-line-height-body-small: var(--lux-line-height-large-scale-xs);
274
+ --viewport-line-height-body-large: var(--lux-line-height-large-scale-md);
275
+ --viewport-line-height-body-default: var(--lux-line-height-large-scale-sm);
276
+ --viewport-line-height-heading-level-4: var(--lux-line-height-large-scale-sm);
277
+ --viewport-line-height-heading-level-3: var(--lux-line-height-large-scale-md);
278
+ --viewport-line-height-heading-level-2: var(--lux-line-height-large-scale-lg);
279
+ --viewport-line-height-heading-level-1: var(--lux-line-height-large-scale-xl);
280
+ --lux-font-family-primary: var(--ro-font-family-primary);
270
281
  --lux-link-font-weight: var(--lux-font-weight-regular);
271
282
  --lux-link-icon-size: var(--lux-size-icon);
272
283
  --lux-link-column-gap: var(--lux-space-50);
@@ -296,18 +307,20 @@
296
307
  --lux-button-padding-inline-end: var(--lux-space-200);
297
308
  --lux-button-padding-block-start: var(--lux-space-100);
298
309
  --lux-button-padding-inline-start: var(--lux-space-200);
310
+ --lux-button-line-height: var(--lux-line-height-large-scale-sm);
299
311
  --lux-button-primary-disabled-border-color: var(--lux-color-none);
300
312
  --lux-button-primary-active-border-color: var(--lux-color-none);
301
313
  --lux-button-primary-hover-border-color: var(--lux-color-none);
302
314
  --lux-button-primary-border-color: var(--lux-color-none);
303
315
  --lux-button-primary-font-size: var(--product-button-primary-font-size);
304
- --lux-button-font-size: var(--product-button-font-size);
305
316
  --lux-button-login-font-weight: var(--lux-font-weight-regular);
317
+ --lux-button-login-line-height: var(--lux-line-height-large-scale-sm);
306
318
  --lux-button-login-border-width: var(--lux-border-width-default);
307
319
  --lux-button-login-border-radius: var(--lux-border-radius-default);
308
320
  --lux-button-login-column-gap: var(--lux-space-100);
309
321
  --lux-button-login-padding-inline-end: var(--lux-space-200);
310
322
  --lux-button-login-padding-inline-start: var(--lux-space-50);
323
+ --lux-button-login-font-size: var(--lux-font-size-large-scale-sm);
311
324
  --lux-button-login-padding-block-end: var(--lux-space-50);
312
325
  --lux-button-login-padding-block-start: var(--lux-space-50);
313
326
  --lux-alert-font-weight: var(--lux-font-weight-regular);
@@ -388,8 +401,8 @@
388
401
  --utrecht-button-column-gap: var(--lux-button-column-gap);
389
402
  --utrecht-button-min-inline-size: var(--lux-button-min-inline-size);
390
403
  --utrecht-button-min-block-size: var(--lux-button-min-block-size);
404
+ --utrecht-button-line-height: var(--lux-button-line-height);
391
405
  --utrecht-button-font-weight: var(--lux-button-font-weight);
392
- --utrecht-button-font-size: var(--lux-button-font-size);
393
406
  --utrecht-button-border-width: var(--lux-button-border-width);
394
407
  --utrecht-button-border-radius: var(--lux-button-border-radius);
395
408
  --utrecht-alert-icon-gap: var(--lux-alert-column-gap);
@@ -411,8 +424,6 @@
411
424
  --utrecht-alert-border-radius: var(--lux-alert-border-radius);
412
425
  --utrecht-alert-border-color: var(--lux-alert-border-color);
413
426
  --utrecht-alert-background-color: var(--lux-color-feedback-info-subdued);
414
- --lux-link-font-size: var(--lux-font-size-m);
415
- --lux-link-line-height: var(--lux-line-height-m);
416
427
  --lux-link-font-family: var(--lux-font-family-primary);
417
428
  --lux-link-visited-color: var(--mode-link-visited-color);
418
429
  --lux-link-active-color: var(--mode-link-active-color);
@@ -423,7 +434,6 @@
423
434
  --lux-button-tertiary-disabled-background-color: var(--lux-color-background-subdued);
424
435
  --lux-button-secondary-disabled-color: var(--lux-color-foreground-subdued);
425
436
  --lux-button-secondary-disabled-background-color: var(--lux-color-background-subdued);
426
- --lux-button-line-height: var(--lux-line-height-m);
427
437
  --lux-button-primary-disabled-color: var(--lux-color-foreground-subdued);
428
438
  --lux-button-primary-disabled-background-color: var(--lux-color-background-subdued);
429
439
  --lux-button-primary-active-color: var(--lux-color-foreground-on-emphasis);
@@ -432,6 +442,7 @@
432
442
  --lux-button-primary-hover-background-color: var(--lux-color-brand-hover);
433
443
  --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
434
444
  --lux-button-primary-background-color: var(--lux-color-brand-default);
445
+ --lux-button-font-size: var(--product-button-font-size);
435
446
  --lux-button-login-font-family: var(--lux-font-family-primary);
436
447
  --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
437
448
  --lux-button-login-active-color: var(--lux-color-foreground-default);
@@ -442,12 +453,24 @@
442
453
  --lux-button-login-background-color: var(--lux-color-background-default);
443
454
  --lux-button-login-color: var(--lux-color-foreground-default);
444
455
  --lux-alert-font-family: var(--lux-font-family-primary);
445
- --lux-alert-font-size: var(--lux-font-size-m);
446
- --lux-alert-line-height: var(--lux-line-height-m);
447
456
  --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
448
457
  --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
449
458
  --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
450
459
  --lux-alert-info-background-color: var(--lux-color-feedback-info-subdued);
460
+ --lux-font-size-heading-level-4: var(--viewport-font-size-heading-level-4);
461
+ --lux-font-size-heading-level-3: var(--viewport-font-size-heading-level-3);
462
+ --lux-font-size-heading-level-2: var(--viewport-font-size-heading-level-2);
463
+ --lux-font-size-heading-level-1: var(--viewport-font-size-heading-level-1);
464
+ --lux-font-size-body-large: var(--viewport-font-size-body-large);
465
+ --lux-font-size-body-default: var(--viewport-font-size-body-default);
466
+ --lux-font-size-body-small: var(--viewport-font-size-body-small);
467
+ --lux-line-height-heading-level-4: var(--viewport-line-height-heading-level-4);
468
+ --lux-line-height-heading-level-3: var(--viewport-line-height-heading-level-3);
469
+ --lux-line-height-heading-level-2: var(--viewport-line-height-heading-level-2);
470
+ --lux-line-height-heading-level-1: var(--viewport-line-height-heading-level-1);
471
+ --lux-line-height-body-large: var(--viewport-line-height-body-large);
472
+ --lux-line-height-body-default: var(--viewport-line-height-body-default);
473
+ --lux-line-height-body-small: var(--viewport-line-height-body-small);
451
474
  --lux-color-border-strong: var(--lux-color-foreground-default);
452
475
  --utrecht-link-visited-color: var(--lux-link-visited-color);
453
476
  --utrecht-link-hover-color: var(--lux-link-hover-color);
@@ -467,11 +490,13 @@
467
490
  --utrecht-button-primary-action-color: var(--lux-button-primary-color);
468
491
  --utrecht-button-primary-action-background-color: var(--lux-button-primary-background-color);
469
492
  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
470
- --utrecht-button-line-height: var(--lux-button-line-height);
493
+ --utrecht-button-font-size: var(--lux-button-font-size);
471
494
  --utrecht-button-font-family: var(--lux-button-font-family);
472
495
  --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
473
496
  --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
474
497
  --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
498
+ --lux-link-font-size: var(--lux-font-size-body-default);
499
+ --lux-link-line-height: var(--lux-line-height-body-default);
475
500
  --lux-button-tertiary-active-color: var(--mode-button-tertiary-color);
476
501
  --lux-button-tertiary-hover-color: var(--mode-button-tertiary-hover-color);
477
502
  --lux-button-tertiary-hover-background-color: var(--mode-button-tertiary-hover-background-color);
@@ -484,6 +509,8 @@
484
509
  --lux-button-secondary-color: var(--mode-button-secondary-color);
485
510
  --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
486
511
  --lux-button-login-active-border-color: var(--lux-color-border-strong);
512
+ --lux-alert-font-size: var(--lux-font-size-body-default);
513
+ --lux-alert-line-height: var(--lux-line-height-body-default);
487
514
  --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
488
515
  --utrecht-button-subtle-hover-color: var(--lux-button-tertiary-hover-color);
489
516
  --utrecht-button-subtle-hover-background-color: var(--lux-button-tertiary-hover-background-color);
package/dist/digid/dark/md-theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 09:32:06 GMT
3
+ * Generated on Wed, 07 Aug 2024 07:02:34 GMT
4
4
  */
5
5
 
6
6
  .lux-theme--digid-dark {
@@ -11,33 +11,20 @@
11
11
  --mode-icon-logo-eidas-stars-color: #ffffff;
12
12
  --mode-icon-logo-eherkenning-e-color: #ffffff;
13
13
  --product-button-primary-font-size: 1.1875rem;
14
- --product-button-font-size: 1.125rem;
15
14
  --viewport-rijkslint-wordmark-default-padding-block-start: 3.125rem;
16
15
  --viewport-rijkslint-wordmark-75-padding-block-start: 2.5rem;
17
- --viewport-line-height-2xl: 3.5rem;
18
- --viewport-line-height-xl: 2.25rem;
19
- --viewport-line-height-l: 2rem;
20
- --viewport-line-height-m: 1.75rem;
21
- --viewport-line-height-s: 1.5rem;
22
- --viewport-font-size-2xl: 2.5rem;
23
- --viewport-font-size-xl: 1.625rem;
24
- --viewport-font-size-l: 1.375rem;
25
- --viewport-font-size-m: 1.125rem;
26
- --viewport-font-size-s: 1rem;
16
+ --figma-product: DigiD;
27
17
  --figma-focus-outline-radius: 6px;
28
18
  --figma-viewport-size-icon-wrapper-height: 1.75rem;
29
19
  --figma-screen-size: 48rem;
30
20
  --figma-rijkslint-variant: default;
31
21
  --no-token: /* */; /* Discussie nodig */
32
- --rh-font-family-serif: RijksoverheidSerifWeb, 'Times New Roman', serif; /* Serif Web is vooral interessant voor de afwisseling in bijvoorbeeld digitale magazines. */
33
- --rh-font-family-sans: RijksoverheidSansWebText, Arial, Verdana, sans-serif; /* De Sans Web wordt toegepast voor langere (lees-)teksten. */
34
- --oud-lux-border-radius-default: 4px;
22
+ --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
23
+ --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
35
24
  --lux-button-login-border-style: solid;
36
- --lux-button-login-line-height: 1.75rem;
37
25
  --lux-button-login-icon-size: 2.5rem;
38
26
  --lux-button-login-min-block-size: 48px;
39
27
  --lux-button-login-min-inline-size: 48px;
40
- --lux-button-login-font-size: 1.125rem;
41
28
  --lux-alert-min-inline-size: 160px;
42
29
  --lux-alert-icon-start-size: 24px;
43
30
  --lux-size-target: 3rem; /* Gebruik deze als minimale hit erea. Bijvoorbeeld als min-height en min-width bij de button. */
@@ -47,6 +34,26 @@
47
34
  --lux-grid-max-inline: 77.5rem;
48
35
  --lux-grid-margin: 2rem;
49
36
  --lux-grid-gutter: 1.5rem;
37
+ --lux-font-size-small-scale-xl: 2.25rem;
38
+ --lux-font-size-small-scale-lg: 1.5rem;
39
+ --lux-font-size-small-scale-md: 1.25rem;
40
+ --lux-font-size-small-scale-sm: 1rem;
41
+ --lux-font-size-small-scale-xs: 0.875rem;
42
+ --lux-font-size-large-scale-xl: 2.5rem;
43
+ --lux-font-size-large-scale-lg: 1.625rem;
44
+ --lux-font-size-large-scale-md: 1.375rem;
45
+ --lux-font-size-large-scale-sm: 1.125rem;
46
+ --lux-font-size-large-scale-xs: 1rem;
47
+ --lux-line-height-small-scale-xl: 3.25rem;
48
+ --lux-line-height-small-scale-lg: 2rem;
49
+ --lux-line-height-small-scale-md: 1.75rem;
50
+ --lux-line-height-small-scale-sm: 1.5rem;
51
+ --lux-line-height-small-scale-xs: 1.5rem;
52
+ --lux-line-height-large-scale-xl: 3.5rem;
53
+ --lux-line-height-large-scale-lg: 2.25rem;
54
+ --lux-line-height-large-scale-md: 2rem;
55
+ --lux-line-height-large-scale-sm: 1.75rem;
56
+ --lux-line-height-large-scale-xs: 1.5rem;
50
57
  --lux-font-weight-bold: Bold;
51
58
  --lux-font-weight-regular: Regular;
52
59
  --lux-space-700: calc(7 * 0.5rem);
@@ -200,6 +207,7 @@
200
207
  --mode-link-hover-color: var(--lux-color-lichtblauw-500); /* Gebruik deze kleur voor de hover van link tekst */
201
208
  --mode-link-visited-color: var(--lux-color-paars-100);
202
209
  --mode-link-color: var(--lux-color-lichtblauw-100); /* Gebruik deze kleur voor link tekst */
210
+ --product-button-font-size: var(--lux-font-size-large-scale-sm);
203
211
  --product-button-secondary-background-color: var(--lux-color-none);
204
212
  --utrecht-link-placeholder-font-weight: var(--no-token);
205
213
  --utrecht-link-placeholder-color: var(--no-token);
@@ -260,18 +268,22 @@
260
268
  --utrecht-alert-icon-color: var(--no-token);
261
269
  --utrecht-alert-margin-block-end: var(--no-token);
262
270
  --utrecht-alert-margin-block-start: var(--no-token);
271
+ --viewport-font-size-body-small: var(--lux-font-size-large-scale-xs);
272
+ --viewport-font-size-body-large: var(--lux-font-size-large-scale-md);
273
+ --viewport-font-size-body-default: var(--lux-font-size-large-scale-sm);
274
+ --viewport-font-size-heading-level-4: var(--lux-font-size-large-scale-sm);
275
+ --viewport-font-size-heading-level-3: var(--lux-font-size-large-scale-md);
276
+ --viewport-font-size-heading-level-2: var(--lux-font-size-large-scale-lg);
277
+ --viewport-font-size-heading-level-1: var(--lux-font-size-large-scale-xl);
278
+ --viewport-line-height-body-small: var(--lux-line-height-large-scale-xs);
279
+ --viewport-line-height-body-large: var(--lux-line-height-large-scale-md);
280
+ --viewport-line-height-body-default: var(--lux-line-height-large-scale-sm);
281
+ --viewport-line-height-heading-level-4: var(--lux-line-height-large-scale-sm);
282
+ --viewport-line-height-heading-level-3: var(--lux-line-height-large-scale-md);
283
+ --viewport-line-height-heading-level-2: var(--lux-line-height-large-scale-lg);
284
+ --viewport-line-height-heading-level-1: var(--lux-line-height-large-scale-xl);
263
285
  --figma-size-icon-wrapper-height: var(--figma-viewport-size-icon-wrapper-height);
264
- --lux-font-size-2xl: var(--viewport-font-size-2xl);
265
- --lux-font-size-xl: var(--viewport-font-size-xl);
266
- --lux-font-size-l: var(--viewport-font-size-l);
267
- --lux-font-size-m: var(--viewport-font-size-m);
268
- --lux-font-size-s: var(--viewport-font-size-s);
269
- --lux-line-height-2xl: var(--viewport-line-height-2xl);
270
- --lux-line-height-xl: var(--viewport-line-height-xl);
271
- --lux-line-height-l: var(--viewport-line-height-l);
272
- --lux-line-height-m: var(--viewport-line-height-m);
273
- --lux-line-height-s: var(--viewport-line-height-s);
274
- --lux-font-family-primary: var(--rh-font-family-sans);
286
+ --lux-font-family-primary: var(--ro-font-family-primary);
275
287
  --lux-link-font-weight: var(--lux-font-weight-regular);
276
288
  --lux-link-icon-size: var(--lux-size-icon);
277
289
  --lux-link-column-gap: var(--lux-space-50);
@@ -301,18 +313,20 @@
301
313
  --lux-button-padding-inline-end: var(--lux-space-200);
302
314
  --lux-button-padding-block-start: var(--lux-space-100);
303
315
  --lux-button-padding-inline-start: var(--lux-space-200);
316
+ --lux-button-line-height: var(--lux-line-height-large-scale-sm);
304
317
  --lux-button-primary-disabled-border-color: var(--lux-color-none);
305
318
  --lux-button-primary-active-border-color: var(--lux-color-none);
306
319
  --lux-button-primary-hover-border-color: var(--lux-color-none);
307
320
  --lux-button-primary-border-color: var(--lux-color-none);
308
321
  --lux-button-primary-font-size: var(--product-button-primary-font-size);
309
- --lux-button-font-size: var(--product-button-font-size);
310
322
  --lux-button-login-font-weight: var(--lux-font-weight-regular);
323
+ --lux-button-login-line-height: var(--lux-line-height-large-scale-sm);
311
324
  --lux-button-login-border-width: var(--lux-border-width-default);
312
325
  --lux-button-login-border-radius: var(--lux-border-radius-default);
313
326
  --lux-button-login-column-gap: var(--lux-space-100);
314
327
  --lux-button-login-padding-inline-end: var(--lux-space-200);
315
328
  --lux-button-login-padding-inline-start: var(--lux-space-50);
329
+ --lux-button-login-font-size: var(--lux-font-size-large-scale-sm);
316
330
  --lux-button-login-padding-block-end: var(--lux-space-50);
317
331
  --lux-button-login-padding-block-start: var(--lux-space-50);
318
332
  --lux-alert-font-weight: var(--lux-font-weight-regular);
@@ -393,8 +407,8 @@
393
407
  --utrecht-button-column-gap: var(--lux-button-column-gap);
394
408
  --utrecht-button-min-inline-size: var(--lux-button-min-inline-size);
395
409
  --utrecht-button-min-block-size: var(--lux-button-min-block-size);
410
+ --utrecht-button-line-height: var(--lux-button-line-height);
396
411
  --utrecht-button-font-weight: var(--lux-button-font-weight);
397
- --utrecht-button-font-size: var(--lux-button-font-size);
398
412
  --utrecht-button-border-width: var(--lux-button-border-width);
399
413
  --utrecht-button-border-radius: var(--lux-button-border-radius);
400
414
  --utrecht-alert-icon-gap: var(--lux-alert-column-gap);
@@ -416,8 +430,6 @@
416
430
  --utrecht-alert-border-radius: var(--lux-alert-border-radius);
417
431
  --utrecht-alert-border-color: var(--lux-alert-border-color);
418
432
  --utrecht-alert-background-color: var(--lux-color-feedback-info-subdued);
419
- --lux-link-font-size: var(--lux-font-size-m);
420
- --lux-link-line-height: var(--lux-line-height-m);
421
433
  --lux-link-font-family: var(--lux-font-family-primary);
422
434
  --lux-link-visited-color: var(--mode-link-visited-color);
423
435
  --lux-link-active-color: var(--mode-link-active-color);
@@ -428,7 +440,6 @@
428
440
  --lux-button-tertiary-disabled-background-color: var(--lux-color-background-subdued);
429
441
  --lux-button-secondary-disabled-color: var(--lux-color-foreground-subdued);
430
442
  --lux-button-secondary-disabled-background-color: var(--lux-color-background-subdued);
431
- --lux-button-line-height: var(--lux-line-height-m);
432
443
  --lux-button-primary-disabled-color: var(--lux-color-foreground-subdued);
433
444
  --lux-button-primary-disabled-background-color: var(--lux-color-background-subdued);
434
445
  --lux-button-primary-active-color: var(--lux-color-foreground-on-emphasis);
@@ -437,6 +448,7 @@
437
448
  --lux-button-primary-hover-background-color: var(--lux-color-brand-hover);
438
449
  --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
439
450
  --lux-button-primary-background-color: var(--lux-color-brand-default);
451
+ --lux-button-font-size: var(--product-button-font-size);
440
452
  --lux-button-login-font-family: var(--lux-font-family-primary);
441
453
  --lux-button-login-active-background-color: var(--mode-button-login-active-background-color);
442
454
  --lux-button-login-active-color: var(--lux-color-foreground-default);
@@ -447,12 +459,24 @@
447
459
  --lux-button-login-background-color: var(--lux-color-background-default);
448
460
  --lux-button-login-color: var(--lux-color-foreground-default);
449
461
  --lux-alert-font-family: var(--lux-font-family-primary);
450
- --lux-alert-font-size: var(--lux-font-size-m);
451
- --lux-alert-line-height: var(--lux-line-height-m);
452
462
  --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
453
463
  --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
454
464
  --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
455
465
  --lux-alert-info-background-color: var(--lux-color-feedback-info-subdued);
466
+ --lux-font-size-heading-level-4: var(--viewport-font-size-heading-level-4);
467
+ --lux-font-size-heading-level-3: var(--viewport-font-size-heading-level-3);
468
+ --lux-font-size-heading-level-2: var(--viewport-font-size-heading-level-2);
469
+ --lux-font-size-heading-level-1: var(--viewport-font-size-heading-level-1);
470
+ --lux-font-size-body-large: var(--viewport-font-size-body-large);
471
+ --lux-font-size-body-default: var(--viewport-font-size-body-default);
472
+ --lux-font-size-body-small: var(--viewport-font-size-body-small);
473
+ --lux-line-height-heading-level-4: var(--viewport-line-height-heading-level-4);
474
+ --lux-line-height-heading-level-3: var(--viewport-line-height-heading-level-3);
475
+ --lux-line-height-heading-level-2: var(--viewport-line-height-heading-level-2);
476
+ --lux-line-height-heading-level-1: var(--viewport-line-height-heading-level-1);
477
+ --lux-line-height-body-large: var(--viewport-line-height-body-large);
478
+ --lux-line-height-body-default: var(--viewport-line-height-body-default);
479
+ --lux-line-height-body-small: var(--viewport-line-height-body-small);
456
480
  --lux-color-border-strong: var(--lux-color-foreground-default);
457
481
  --utrecht-link-visited-color: var(--lux-link-visited-color);
458
482
  --utrecht-link-hover-color: var(--lux-link-hover-color);
@@ -472,11 +496,13 @@
472
496
  --utrecht-button-primary-action-color: var(--lux-button-primary-color);
473
497
  --utrecht-button-primary-action-background-color: var(--lux-button-primary-background-color);
474
498
  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
475
- --utrecht-button-line-height: var(--lux-button-line-height);
499
+ --utrecht-button-font-size: var(--lux-button-font-size);
476
500
  --utrecht-button-font-family: var(--lux-button-font-family);
477
501
  --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
478
502
  --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
479
503
  --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
504
+ --lux-link-font-size: var(--lux-font-size-body-default);
505
+ --lux-link-line-height: var(--lux-line-height-body-default);
480
506
  --lux-button-tertiary-active-color: var(--mode-button-tertiary-color);
481
507
  --lux-button-tertiary-hover-color: var(--mode-button-tertiary-hover-color);
482
508
  --lux-button-tertiary-hover-background-color: var(--mode-button-tertiary-hover-background-color);
@@ -489,6 +515,8 @@
489
515
  --lux-button-secondary-color: var(--mode-button-secondary-color);
490
516
  --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
491
517
  --lux-button-login-active-border-color: var(--lux-color-border-strong);
518
+ --lux-alert-font-size: var(--lux-font-size-body-default);
519
+ --lux-alert-line-height: var(--lux-line-height-body-default);
492
520
  --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
493
521
  --utrecht-button-subtle-hover-color: var(--lux-button-tertiary-hover-color);
494
522
  --utrecht-button-subtle-hover-background-color: var(--lux-button-tertiary-hover-background-color);