@lux-design-system/design-tokens 1.0.0-alpha.3 → 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 (277) hide show
  1. package/README.md +49 -5
  2. package/{lib/css → dist}/digid/dark/lg-theme.css +294 -189
  3. package/{lib/css → dist}/digid/dark/lg.css +291 -187
  4. package/{lib/css → dist}/digid/dark/md-theme.css +294 -189
  5. package/{lib/css → dist}/digid/dark/md.css +291 -187
  6. package/{lib/css → dist}/digid/dark/sm-theme.css +294 -189
  7. package/{lib/css → dist}/digid/dark/sm.css +291 -187
  8. package/{lib/css → dist}/digid/dark/xl-theme.css +294 -189
  9. package/{lib/css → dist}/digid/dark/xl.css +291 -187
  10. package/{lib/css → dist}/digid/dark/xs-theme.css +294 -189
  11. package/{lib/css → dist}/digid/dark/xs.css +291 -187
  12. package/{lib/css → dist}/digid/light/lg-theme.css +294 -189
  13. package/{lib/css → dist}/digid/light/lg.css +291 -187
  14. package/{lib/css → dist}/digid/light/md-theme.css +294 -189
  15. package/{lib/css → dist}/digid/light/md.css +291 -187
  16. package/{lib/css → dist}/digid/light/sm-theme.css +294 -189
  17. package/{lib/css → dist}/digid/light/sm.css +291 -187
  18. package/{lib/css → dist}/digid/light/xl-theme.css +294 -189
  19. package/{lib/css → dist}/digid/light/xl.css +291 -187
  20. package/{lib/css → dist}/digid/light/xs-theme.css +294 -189
  21. package/{lib/css → dist}/digid/light/xs.css +291 -187
  22. package/dist/digitoegankelijk/dark/lg-theme.css +610 -0
  23. package/dist/digitoegankelijk/dark/lg.css +604 -0
  24. package/dist/digitoegankelijk/dark/md-theme.css +610 -0
  25. package/dist/digitoegankelijk/dark/md.css +604 -0
  26. package/dist/digitoegankelijk/dark/sm-theme.css +610 -0
  27. package/dist/digitoegankelijk/dark/sm.css +604 -0
  28. package/dist/digitoegankelijk/dark/xl-theme.css +610 -0
  29. package/dist/digitoegankelijk/dark/xl.css +604 -0
  30. package/dist/digitoegankelijk/dark/xs-theme.css +610 -0
  31. package/dist/digitoegankelijk/dark/xs.css +604 -0
  32. package/dist/digitoegankelijk/light/lg-theme.css +610 -0
  33. package/dist/digitoegankelijk/light/lg.css +604 -0
  34. package/dist/digitoegankelijk/light/md-theme.css +610 -0
  35. package/dist/digitoegankelijk/light/md.css +604 -0
  36. package/dist/digitoegankelijk/light/sm-theme.css +610 -0
  37. package/dist/digitoegankelijk/light/sm.css +604 -0
  38. package/dist/digitoegankelijk/light/xl-theme.css +610 -0
  39. package/dist/digitoegankelijk/light/xl.css +604 -0
  40. package/dist/digitoegankelijk/light/xs-theme.css +610 -0
  41. package/dist/digitoegankelijk/light/xs.css +604 -0
  42. package/{lib/css/elia → dist/eva}/dark/lg-theme.css +300 -195
  43. package/{lib/css/elia → dist/eva}/dark/lg.css +296 -192
  44. package/{lib/css/elia → dist/eva}/dark/md-theme.css +300 -195
  45. package/{lib/css/elia → dist/eva}/dark/md.css +296 -192
  46. package/{lib/css/elia → dist/eva}/dark/sm-theme.css +300 -195
  47. package/{lib/css/elia → dist/eva}/dark/sm.css +296 -192
  48. package/{lib/css/elia → dist/eva}/dark/xl-theme.css +300 -195
  49. package/{lib/css/elia → dist/eva}/dark/xl.css +296 -192
  50. package/{lib/css/elia → dist/eva}/dark/xs-theme.css +300 -195
  51. package/{lib/css/elia → dist/eva}/dark/xs.css +296 -192
  52. package/{lib/css/elia → dist/eva}/light/lg-theme.css +300 -195
  53. package/{lib/css/elia → dist/eva}/light/lg.css +296 -192
  54. package/{lib/css/elia → dist/eva}/light/md-theme.css +300 -195
  55. package/{lib/css/elia → dist/eva}/light/md.css +296 -192
  56. package/{lib/css/elia → dist/eva}/light/sm-theme.css +300 -195
  57. package/{lib/css/elia → dist/eva}/light/sm.css +296 -192
  58. package/{lib/css/elia → dist/eva}/light/xl-theme.css +300 -195
  59. package/{lib/css/elia → dist/eva}/light/xl.css +296 -192
  60. package/{lib/css/elia → dist/eva}/light/xs-theme.css +300 -195
  61. package/{lib/css/elia → dist/eva}/light/xs.css +296 -192
  62. package/{lib/css → dist}/figma-tokens.json +5376 -3132
  63. package/{lib/css → dist}/index.json +3548 -1752
  64. package/{lib/css → dist}/logius/dark/lg-theme.css +296 -191
  65. package/{lib/css → dist}/logius/dark/lg.css +293 -189
  66. package/{lib/css → dist}/logius/dark/md-theme.css +296 -191
  67. package/{lib/css → dist}/logius/dark/md.css +293 -189
  68. package/{lib/css → dist}/logius/dark/sm-theme.css +296 -191
  69. package/{lib/css → dist}/logius/dark/sm.css +293 -189
  70. package/{lib/css → dist}/logius/dark/xl-theme.css +296 -191
  71. package/{lib/css → dist}/logius/dark/xl.css +293 -189
  72. package/{lib/css → dist}/logius/dark/xs-theme.css +296 -191
  73. package/{lib/css → dist}/logius/dark/xs.css +293 -189
  74. package/{lib/css → dist}/logius/light/lg-theme.css +296 -191
  75. package/{lib/css → dist}/logius/light/lg.css +293 -189
  76. package/{lib/css → dist}/logius/light/md-theme.css +296 -191
  77. package/{lib/css → dist}/logius/light/md.css +293 -189
  78. package/{lib/css → dist}/logius/light/sm-theme.css +296 -191
  79. package/{lib/css → dist}/logius/light/sm.css +293 -189
  80. package/{lib/css → dist}/logius/light/xl-theme.css +296 -191
  81. package/{lib/css → dist}/logius/light/xl.css +293 -189
  82. package/{lib/css → dist}/logius/light/xs-theme.css +296 -191
  83. package/{lib/css → dist}/logius/light/xs.css +293 -189
  84. package/{lib/css → dist}/logius-blauw/dark/lg-theme.css +296 -191
  85. package/{lib/css → dist}/logius-blauw/dark/lg.css +293 -189
  86. package/{lib/css → dist}/logius-blauw/dark/md-theme.css +296 -191
  87. package/{lib/css → dist}/logius-blauw/dark/md.css +293 -189
  88. package/{lib/css → dist}/logius-blauw/dark/sm-theme.css +296 -191
  89. package/{lib/css/mijnoverheid → dist/logius-blauw}/dark/sm.css +292 -188
  90. package/{lib/css → dist}/logius-blauw/dark/xl-theme.css +296 -191
  91. package/{lib/css → dist}/logius-blauw/dark/xl.css +293 -189
  92. package/{lib/css → dist}/logius-blauw/dark/xs-theme.css +296 -191
  93. package/{lib/css/mijnoverheid → dist/logius-blauw}/dark/xs.css +292 -188
  94. package/{lib/css → dist}/logius-blauw/light/lg-theme.css +296 -191
  95. package/{lib/css → dist}/logius-blauw/light/lg.css +293 -189
  96. package/{lib/css → dist}/logius-blauw/light/md-theme.css +296 -191
  97. package/{lib/css → dist}/logius-blauw/light/md.css +293 -189
  98. package/{lib/css → dist}/logius-blauw/light/sm-theme.css +296 -191
  99. package/{lib/css → dist}/logius-blauw/light/sm.css +293 -189
  100. package/{lib/css → dist}/logius-blauw/light/xl-theme.css +296 -191
  101. package/{lib/css → dist}/logius-blauw/light/xl.css +293 -189
  102. package/{lib/css → dist}/logius-blauw/light/xs-theme.css +296 -191
  103. package/{lib/css/mijnoverheid → dist/logius-blauw}/light/xs.css +292 -188
  104. package/{lib/css → dist}/mijnoverheid/dark/lg-theme.css +295 -190
  105. package/{lib/css → dist}/mijnoverheid/dark/lg.css +292 -188
  106. package/{lib/css → dist}/mijnoverheid/dark/md-theme.css +295 -190
  107. package/{lib/css → dist}/mijnoverheid/dark/md.css +292 -188
  108. package/{lib/css → dist}/mijnoverheid/dark/sm-theme.css +295 -190
  109. package/{lib/css/logius-blauw → dist/mijnoverheid}/dark/sm.css +293 -189
  110. package/{lib/css → dist}/mijnoverheid/dark/xl-theme.css +295 -190
  111. package/{lib/css → dist}/mijnoverheid/dark/xl.css +292 -188
  112. package/{lib/css → dist}/mijnoverheid/dark/xs-theme.css +295 -190
  113. package/{lib/css/logius-blauw → dist/mijnoverheid}/dark/xs.css +293 -189
  114. package/{lib/css → dist}/mijnoverheid/light/lg-theme.css +295 -190
  115. package/{lib/css → dist}/mijnoverheid/light/lg.css +292 -188
  116. package/{lib/css → dist}/mijnoverheid/light/md-theme.css +295 -190
  117. package/{lib/css → dist}/mijnoverheid/light/md.css +292 -188
  118. package/{lib/css → dist}/mijnoverheid/light/sm-theme.css +295 -190
  119. package/{lib/css → dist}/mijnoverheid/light/sm.css +292 -188
  120. package/{lib/css → dist}/mijnoverheid/light/xl-theme.css +295 -190
  121. package/{lib/css → dist}/mijnoverheid/light/xl.css +292 -188
  122. package/{lib/css → dist}/mijnoverheid/light/xs-theme.css +295 -190
  123. package/{lib/css/logius-blauw → dist/mijnoverheid}/light/xs.css +293 -189
  124. package/{lib/css → dist}/nldoc/dark/lg-theme.css +290 -186
  125. package/{lib/css → dist}/nldoc/dark/lg.css +288 -184
  126. package/{lib/css → dist}/nldoc/dark/md-theme.css +290 -186
  127. package/{lib/css → dist}/nldoc/dark/md.css +288 -184
  128. package/{lib/css → dist}/nldoc/dark/sm-theme.css +290 -186
  129. package/{lib/css → dist}/nldoc/dark/sm.css +288 -184
  130. package/{lib/css → dist}/nldoc/dark/xl-theme.css +290 -186
  131. package/{lib/css → dist}/nldoc/dark/xl.css +288 -184
  132. package/{lib/css → dist}/nldoc/dark/xs-theme.css +290 -186
  133. package/{lib/css → dist}/nldoc/dark/xs.css +288 -184
  134. package/{lib/css → dist}/nldoc/light/lg-theme.css +290 -186
  135. package/{lib/css → dist}/nldoc/light/lg.css +288 -184
  136. package/{lib/css → dist}/nldoc/light/md-theme.css +290 -186
  137. package/{lib/css → dist}/nldoc/light/md.css +288 -184
  138. package/{lib/css → dist}/nldoc/light/sm-theme.css +290 -186
  139. package/{lib/css → dist}/nldoc/light/sm.css +288 -184
  140. package/{lib/css → dist}/nldoc/light/xl-theme.css +290 -186
  141. package/{lib/css → dist}/nldoc/light/xl.css +288 -184
  142. package/{lib/css → dist}/nldoc/light/xs-theme.css +290 -186
  143. package/{lib/css → dist}/nldoc/light/xs.css +288 -184
  144. package/{lib/css → dist}/nldoc/ridderkerk/dark/lg-theme.css +289 -185
  145. package/{lib/css → dist}/nldoc/ridderkerk/dark/lg.css +287 -183
  146. package/{lib/css → dist}/nldoc/ridderkerk/dark/md-theme.css +289 -185
  147. package/{lib/css → dist}/nldoc/ridderkerk/dark/md.css +287 -183
  148. package/{lib/css → dist}/nldoc/ridderkerk/dark/sm-theme.css +289 -185
  149. package/{lib/css → dist}/nldoc/ridderkerk/dark/sm.css +287 -183
  150. package/{lib/css → dist}/nldoc/ridderkerk/dark/xl-theme.css +289 -185
  151. package/{lib/css → dist}/nldoc/ridderkerk/dark/xl.css +287 -183
  152. package/{lib/css → dist}/nldoc/ridderkerk/dark/xs-theme.css +289 -185
  153. package/{lib/css → dist}/nldoc/ridderkerk/dark/xs.css +287 -183
  154. package/{lib/css → dist}/nldoc/ridderkerk/light/lg-theme.css +289 -185
  155. package/{lib/css → dist}/nldoc/ridderkerk/light/lg.css +287 -183
  156. package/{lib/css → dist}/nldoc/ridderkerk/light/md-theme.css +289 -185
  157. package/{lib/css → dist}/nldoc/ridderkerk/light/md.css +287 -183
  158. package/{lib/css → dist}/nldoc/ridderkerk/light/sm-theme.css +289 -185
  159. package/{lib/css → dist}/nldoc/ridderkerk/light/sm.css +287 -183
  160. package/{lib/css → dist}/nldoc/ridderkerk/light/xl-theme.css +289 -185
  161. package/{lib/css → dist}/nldoc/ridderkerk/light/xl.css +287 -183
  162. package/{lib/css → dist}/nldoc/ridderkerk/light/xs-theme.css +289 -185
  163. package/{lib/css → dist}/nldoc/ridderkerk/light/xs.css +287 -183
  164. package/{lib/css → dist}/nldoc/rijksoverheid/dark/lg-theme.css +290 -186
  165. package/{lib/css → dist}/nldoc/rijksoverheid/dark/lg.css +288 -184
  166. package/{lib/css → dist}/nldoc/rijksoverheid/dark/md-theme.css +290 -186
  167. package/{lib/css → dist}/nldoc/rijksoverheid/dark/md.css +288 -184
  168. package/{lib/css → dist}/nldoc/rijksoverheid/dark/sm-theme.css +290 -186
  169. package/{lib/css → dist}/nldoc/rijksoverheid/dark/sm.css +288 -184
  170. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xl-theme.css +290 -186
  171. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xl.css +288 -184
  172. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xs-theme.css +290 -186
  173. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xs.css +288 -184
  174. package/{lib/css → dist}/nldoc/rijksoverheid/light/lg-theme.css +290 -186
  175. package/{lib/css → dist}/nldoc/rijksoverheid/light/lg.css +288 -184
  176. package/{lib/css → dist}/nldoc/rijksoverheid/light/md-theme.css +290 -186
  177. package/{lib/css → dist}/nldoc/rijksoverheid/light/md.css +288 -184
  178. package/{lib/css → dist}/nldoc/rijksoverheid/light/sm-theme.css +290 -186
  179. package/{lib/css → dist}/nldoc/rijksoverheid/light/sm.css +288 -184
  180. package/{lib/css → dist}/nldoc/rijksoverheid/light/xl-theme.css +290 -186
  181. package/{lib/css → dist}/nldoc/rijksoverheid/light/xl.css +288 -184
  182. package/{lib/css → dist}/nldoc/rijksoverheid/light/xs-theme.css +290 -186
  183. package/{lib/css → dist}/nldoc/rijksoverheid/light/xs.css +288 -184
  184. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/lg-theme.css +289 -185
  185. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/lg.css +287 -183
  186. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/md-theme.css +289 -185
  187. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/md.css +287 -183
  188. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/sm-theme.css +289 -185
  189. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/sm.css +287 -183
  190. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xl-theme.css +289 -185
  191. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xl.css +287 -183
  192. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xs-theme.css +289 -185
  193. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xs.css +287 -183
  194. package/dist/nldoc/waterschap-hollandse-delta/index-theme.css +4 -0
  195. package/dist/nldoc/waterschap-hollandse-delta/index.css +5 -0
  196. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/lg-theme.css +289 -185
  197. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/lg.css +287 -183
  198. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/md-theme.css +289 -185
  199. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/md.css +287 -183
  200. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/sm-theme.css +289 -185
  201. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/sm.css +287 -183
  202. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xl-theme.css +289 -185
  203. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xl.css +287 -183
  204. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xs-theme.css +289 -185
  205. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xs.css +287 -183
  206. package/dist/nldoc/waterschap-hollandse-delta/lightdark.css +3 -0
  207. package/lib/tokens/$metadata.json +20 -10
  208. package/lib/tokens/$themes.json +343 -199
  209. package/lib/tokens/NLdoc/Ridderkerk.json +0 -5
  210. package/lib/tokens/NLdoc/Rijksoverheid.json +1 -6
  211. package/lib/tokens/NLdoc/Waterschap Hollandse Delta.json +0 -5
  212. package/lib/tokens/NLdoc/default.json +1 -6
  213. package/lib/tokens/common/default.json +1 -1
  214. package/lib/tokens/component/alert.json +19 -32
  215. package/lib/tokens/component/button.json +9 -14
  216. package/lib/tokens/component/link.json +30 -4
  217. package/lib/tokens/component/{button login.json → login link.json } +48 -34
  218. package/lib/tokens/component/paragraph.json +48 -0
  219. package/lib/tokens/core/border.json +33 -0
  220. package/lib/tokens/core/{default.json → color.json} +0 -124
  221. package/lib/tokens/core/font.json +138 -0
  222. package/lib/tokens/core/other.json +7 -0
  223. package/lib/tokens/core/spacing.json +61 -0
  224. package/lib/tokens/mode/dark.json +1 -1
  225. package/lib/tokens/mode/light.json +1 -1
  226. package/lib/tokens/nl/utrecht-alert.json +43 -29
  227. package/lib/tokens/nl/utrecht-button.json +52 -57
  228. package/lib/tokens/nl/utrecht-document.json +26 -0
  229. package/lib/tokens/nl/utrecht-focus.json +28 -0
  230. package/lib/tokens/nl/utrecht-heading.json +136 -0
  231. package/lib/tokens/nl/utrecht-link.json +46 -28
  232. package/lib/tokens/nl/utrecht-paragraph.json +70 -0
  233. package/lib/tokens/product/DigiD.json +92 -7
  234. package/lib/tokens/product/Digitoegankelijk.json +242 -0
  235. package/lib/tokens/product/{Elia.json → EVA.json} +105 -11
  236. package/lib/tokens/product/Logius Blauw.json +81 -105
  237. package/lib/tokens/product/Logius.json +85 -49
  238. package/lib/tokens/product/MijnOverheid.json +87 -64
  239. package/lib/tokens/product/NLdoc-mapping.json +89 -63
  240. package/lib/tokens/viewport/lg.json +143 -0
  241. package/lib/tokens/viewport/md.json +143 -0
  242. package/lib/tokens/viewport/sm.json +143 -0
  243. package/lib/tokens/viewport/xl.json +143 -0
  244. package/lib/tokens/viewport/xs.json +151 -0
  245. package/package.json +19 -19
  246. package/lib/tokens/common/viewport/lg.json +0 -144
  247. package/lib/tokens/common/viewport/md.json +0 -144
  248. package/lib/tokens/common/viewport/sm.json +0 -144
  249. package/lib/tokens/common/viewport/xl.json +0 -138
  250. package/lib/tokens/common/viewport/xs.json +0 -144
  251. /package/{lib/css → dist}/digid/index-theme.css +0 -0
  252. /package/{lib/css → dist}/digid/index.css +0 -0
  253. /package/{lib/css → dist}/digid/lightdark.css +0 -0
  254. /package/{lib/css/elia → dist/digitoegankelijk}/index-theme.css +0 -0
  255. /package/{lib/css/elia → dist/digitoegankelijk}/index.css +0 -0
  256. /package/{lib/css/elia → dist/digitoegankelijk}/lightdark.css +0 -0
  257. /package/{lib/css/logius-blauw → dist/eva}/index-theme.css +0 -0
  258. /package/{lib/css/logius-blauw → dist/eva}/index.css +0 -0
  259. /package/{lib/css/logius-blauw → dist/eva}/lightdark.css +0 -0
  260. /package/{lib/css/mijnoverheid → dist/logius}/index-theme.css +0 -0
  261. /package/{lib/css/mijnoverheid → dist/logius}/index.css +0 -0
  262. /package/{lib/css/mijnoverheid → dist/logius}/lightdark.css +0 -0
  263. /package/{lib/css/logius → dist/logius-blauw}/index-theme.css +0 -0
  264. /package/{lib/css/logius → dist/logius-blauw}/index.css +0 -0
  265. /package/{lib/css/logius → dist/logius-blauw}/lightdark.css +0 -0
  266. /package/{lib/css/nldoc → dist/mijnoverheid}/index-theme.css +0 -0
  267. /package/{lib/css/nldoc → dist/mijnoverheid}/index.css +0 -0
  268. /package/{lib/css/nldoc → dist/mijnoverheid}/lightdark.css +0 -0
  269. /package/{lib/css/nldoc/ridderkerk → dist/nldoc}/index-theme.css +0 -0
  270. /package/{lib/css/nldoc/ridderkerk → dist/nldoc}/index.css +0 -0
  271. /package/{lib/css/nldoc/ridderkerk → dist/nldoc}/lightdark.css +0 -0
  272. /package/{lib/css/nldoc/rijksoverheid → dist/nldoc/ridderkerk}/index-theme.css +0 -0
  273. /package/{lib/css/nldoc/rijksoverheid → dist/nldoc/ridderkerk}/index.css +0 -0
  274. /package/{lib/css/nldoc/rijksoverheid → dist/nldoc/ridderkerk}/lightdark.css +0 -0
  275. /package/{lib/css/nldoc/waterschap-hollandse-delta → dist/nldoc/rijksoverheid}/index-theme.css +0 -0
  276. /package/{lib/css/nldoc/waterschap-hollandse-delta → dist/nldoc/rijksoverheid}/index.css +0 -0
  277. /package/{lib/css/nldoc/waterschap-hollandse-delta → dist/nldoc/rijksoverheid}/lightdark.css +0 -0
package/README.md CHANGED
@@ -13,21 +13,65 @@ In design tokens worden de design beslissingen vastgelegd voor het design system
13
13
 
14
14
  `yarn add @lux-design-system/design-tokens --dev`
15
15
 
16
- Daarna zijn de volgende tokens beschikbaar:
16
+ ### PNPM
17
17
 
18
- ## PNPM
18
+ `pnpm add -D @lux-design-system/design-tokens --save-dev`
19
19
 
20
- `pnpm add -D @lux-design-system/design-tokens`
20
+ Daarna zijn de volgende tokens beschikbaar:
21
21
 
22
22
  ## JSON
23
23
 
24
24
  In de map `/lib/tokens/` staan de tokens die vanuit Tokens Studio en Figma gegenereerd worden.
25
25
  Deze tokens kunnen gebruikt worden in combinatie met je eigen tokens of om je eigen variabelen te bouwen.
26
26
  _Let op_: Sommige mapnamen bevatten nog `(beta)`, deze suffix zal in de toekomst verdwijnen, dus het wordt aangeraden deze uit je output te filteren.
27
- In de source code op Github kan je onze build script(s) inzien, deze worden niet meegeleverd in de package aangezien ze specifiek voor het LUX-project zijn.
27
+ In de [source code op Github](https://github.com/nl-design-system/lux) kan je onze build script(s) inzien, deze worden niet meegeleverd in de package aangezien ze specifiek voor het LUX-project zijn.
28
28
 
29
29
  Meer informatie over de LUX design tokens en de lagen vind je op de pagina [Design Tokens](https://nl-design-system.github.io/lux/?path=/docs/design-tokens-design-tokens--docs) van onze Storybook.
30
30
 
31
31
  ## CSS
32
32
 
33
- In de map `/lib/css/` staan de CSS-variabelen in bestanden per thema, mode (light, dark) en viewport.
33
+ In de map `/dist/` staan de CSS-variabelen in bestanden per thema[^1], mode (light, dark) en viewport (xs, sm, md, lg, xl). Bijvoorbeeld `/dist/logius/dark/lg.css`.
34
+ Naast de variabelen in de `:root` is er ook een versie waarbij de variabelen in een thema-mode-classname staan. Bijvoorbeeld `/dist/logius/dark/lg-theme.css`, met de selector `.lux-theme--logius-dark`.
35
+ Voor beide versies zijn er index-bestanden gemaakt per thema. Bij de `:root`-versie worden de mode-versies aan de hand van in de browser ingestelde color-scheme geïmporteerd. Bij de "theme"-versie worden beide mode-versies ingeladen.
36
+ Binnenkort komen nog de viewports bij de index-bestanden.
37
+
38
+ ### Gebruik
39
+
40
+ Om de design tokens als CSS-variabelen te gebruiken zijn er verschillende methoden. Een aantal voorbeelden.
41
+
42
+ In de `<head>` sectie van je HTML-pagina, vanaf de Unpkg CDN:
43
+
44
+ ```html
45
+ <!-- :root-versie -->
46
+ <link rel="stylesheet" href="https://unpkg.com/@lux-design-system/design-tokens/dist/logius/index.css" />
47
+ ```
48
+
49
+ ```html
50
+ <!-- theme-versie -->
51
+ <link rel="stylesheet" href="https://unpkg.com/@lux-design-system/design-tokens/dist/logius/index-theme.css" />
52
+ ```
53
+
54
+ ```html
55
+ <!-- theme -->
56
+ <div class="lux-theme--logius-dark">...</div>
57
+ ```
58
+
59
+ Via Webpack in Create React App en geïnstalleerd via een [package manager](#installeren):
60
+
61
+ ```javascript
62
+ import "@lux-design-system/design-tokens/dist/logius/index.css";
63
+ ```
64
+
65
+ ### Fonts
66
+
67
+ Een aantal tokens referen naar het fonts van de Rijksshuisstijl. Daarvoor installeer je het [`@lux-design-system/font`-package](https://www.npmjs.com/package/@lux-design-system/font).
68
+
69
+ Gebruik je een ander font? Voeg de volgende aanpassingen toe in je website of applicatie, bijvoorbeeld:
70
+
71
+ ```css
72
+ :root {
73
+ --lux-font-family-primary: "Cormorant Infant", "Times New Roman", serif;
74
+ }
75
+ ```
76
+
77
+ [^1]: NLdoc thema's staan in de map `nldoc`.