@lux-design-system/design-tokens 1.0.0-alpha.3 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (272) hide show
  1. package/README.md +49 -5
  2. package/{lib/css → dist}/digid/dark/lg-theme.css +232 -165
  3. package/{lib/css → dist}/digid/dark/lg.css +229 -163
  4. package/{lib/css → dist}/digid/dark/md-theme.css +232 -165
  5. package/{lib/css → dist}/digid/dark/md.css +229 -163
  6. package/{lib/css → dist}/digid/dark/sm-theme.css +232 -165
  7. package/{lib/css → dist}/digid/dark/sm.css +229 -163
  8. package/{lib/css → dist}/digid/dark/xl-theme.css +232 -165
  9. package/{lib/css → dist}/digid/dark/xl.css +229 -163
  10. package/{lib/css → dist}/digid/dark/xs-theme.css +232 -165
  11. package/{lib/css → dist}/digid/dark/xs.css +229 -163
  12. package/{lib/css → dist}/digid/light/lg-theme.css +232 -165
  13. package/{lib/css → dist}/digid/light/lg.css +229 -163
  14. package/{lib/css → dist}/digid/light/md-theme.css +232 -165
  15. package/{lib/css → dist}/digid/light/md.css +229 -163
  16. package/{lib/css → dist}/digid/light/sm-theme.css +232 -165
  17. package/{lib/css → dist}/digid/light/sm.css +229 -163
  18. package/{lib/css → dist}/digid/light/xl-theme.css +232 -165
  19. package/{lib/css → dist}/digid/light/xl.css +229 -163
  20. package/{lib/css → dist}/digid/light/xs-theme.css +232 -165
  21. package/{lib/css → dist}/digid/light/xs.css +229 -163
  22. package/dist/digitoegankelijk/dark/lg-theme.css +572 -0
  23. package/dist/digitoegankelijk/dark/lg.css +566 -0
  24. package/dist/digitoegankelijk/dark/md-theme.css +572 -0
  25. package/dist/digitoegankelijk/dark/md.css +566 -0
  26. package/dist/digitoegankelijk/dark/sm-theme.css +572 -0
  27. package/dist/digitoegankelijk/dark/sm.css +566 -0
  28. package/dist/digitoegankelijk/dark/xl-theme.css +572 -0
  29. package/dist/digitoegankelijk/dark/xl.css +566 -0
  30. package/dist/digitoegankelijk/dark/xs-theme.css +572 -0
  31. package/dist/digitoegankelijk/dark/xs.css +566 -0
  32. package/dist/digitoegankelijk/light/lg-theme.css +572 -0
  33. package/dist/digitoegankelijk/light/lg.css +566 -0
  34. package/dist/digitoegankelijk/light/md-theme.css +572 -0
  35. package/dist/digitoegankelijk/light/md.css +566 -0
  36. package/dist/digitoegankelijk/light/sm-theme.css +572 -0
  37. package/dist/digitoegankelijk/light/sm.css +566 -0
  38. package/dist/digitoegankelijk/light/xl-theme.css +572 -0
  39. package/dist/digitoegankelijk/light/xl.css +566 -0
  40. package/dist/digitoegankelijk/light/xs-theme.css +572 -0
  41. package/dist/digitoegankelijk/light/xs.css +566 -0
  42. package/{lib/css → dist}/elia/dark/lg-theme.css +234 -167
  43. package/{lib/css → dist}/elia/dark/lg.css +231 -165
  44. package/{lib/css → dist}/elia/dark/md-theme.css +234 -167
  45. package/{lib/css → dist}/elia/dark/md.css +231 -165
  46. package/{lib/css → dist}/elia/dark/sm-theme.css +234 -167
  47. package/{lib/css → dist}/elia/dark/sm.css +231 -165
  48. package/{lib/css → dist}/elia/dark/xl-theme.css +234 -167
  49. package/{lib/css → dist}/elia/dark/xl.css +231 -165
  50. package/{lib/css → dist}/elia/dark/xs-theme.css +234 -167
  51. package/{lib/css → dist}/elia/dark/xs.css +231 -165
  52. package/{lib/css → dist}/elia/light/lg-theme.css +234 -167
  53. package/{lib/css → dist}/elia/light/lg.css +231 -165
  54. package/{lib/css → dist}/elia/light/md-theme.css +234 -167
  55. package/{lib/css → dist}/elia/light/md.css +231 -165
  56. package/{lib/css → dist}/elia/light/sm-theme.css +234 -167
  57. package/{lib/css → dist}/elia/light/sm.css +231 -165
  58. package/{lib/css → dist}/elia/light/xl-theme.css +234 -167
  59. package/{lib/css → dist}/elia/light/xl.css +231 -165
  60. package/{lib/css → dist}/elia/light/xs-theme.css +234 -167
  61. package/{lib/css → dist}/elia/light/xs.css +231 -165
  62. package/{lib/css → dist}/figma-tokens.json +3798 -2358
  63. package/{lib/css → dist}/index.json +2312 -1179
  64. package/{lib/css → dist}/logius/dark/lg-theme.css +234 -167
  65. package/{lib/css → dist}/logius/dark/lg.css +231 -165
  66. package/{lib/css → dist}/logius/dark/md-theme.css +234 -167
  67. package/{lib/css → dist}/logius/dark/md.css +231 -165
  68. package/{lib/css → dist}/logius/dark/sm-theme.css +234 -167
  69. package/{lib/css → dist}/logius/dark/sm.css +231 -165
  70. package/{lib/css → dist}/logius/dark/xl-theme.css +234 -167
  71. package/{lib/css → dist}/logius/dark/xl.css +231 -165
  72. package/{lib/css → dist}/logius/dark/xs-theme.css +234 -167
  73. package/{lib/css → dist}/logius/dark/xs.css +231 -165
  74. package/{lib/css → dist}/logius/light/lg-theme.css +234 -167
  75. package/{lib/css → dist}/logius/light/lg.css +231 -165
  76. package/{lib/css → dist}/logius/light/md-theme.css +234 -167
  77. package/{lib/css → dist}/logius/light/md.css +231 -165
  78. package/{lib/css → dist}/logius/light/sm-theme.css +234 -167
  79. package/{lib/css → dist}/logius/light/sm.css +231 -165
  80. package/{lib/css → dist}/logius/light/xl-theme.css +234 -167
  81. package/{lib/css → dist}/logius/light/xl.css +231 -165
  82. package/{lib/css → dist}/logius/light/xs-theme.css +234 -167
  83. package/{lib/css → dist}/logius/light/xs.css +231 -165
  84. package/{lib/css → dist}/logius-blauw/dark/lg-theme.css +234 -167
  85. package/{lib/css → dist}/logius-blauw/dark/lg.css +231 -165
  86. package/{lib/css → dist}/logius-blauw/dark/md-theme.css +234 -167
  87. package/{lib/css → dist}/logius-blauw/dark/md.css +231 -165
  88. package/{lib/css → dist}/logius-blauw/dark/sm-theme.css +234 -167
  89. package/{lib/css/mijnoverheid → dist/logius-blauw}/dark/sm.css +230 -164
  90. package/{lib/css → dist}/logius-blauw/dark/xl-theme.css +234 -167
  91. package/{lib/css → dist}/logius-blauw/dark/xl.css +231 -165
  92. package/{lib/css → dist}/logius-blauw/dark/xs-theme.css +234 -167
  93. package/{lib/css/mijnoverheid → dist/logius-blauw}/dark/xs.css +230 -164
  94. package/{lib/css → dist}/logius-blauw/light/lg-theme.css +234 -167
  95. package/{lib/css → dist}/logius-blauw/light/lg.css +231 -165
  96. package/{lib/css → dist}/logius-blauw/light/md-theme.css +234 -167
  97. package/{lib/css → dist}/logius-blauw/light/md.css +231 -165
  98. package/{lib/css → dist}/logius-blauw/light/sm-theme.css +234 -167
  99. package/{lib/css → dist}/logius-blauw/light/sm.css +231 -165
  100. package/{lib/css → dist}/logius-blauw/light/xl-theme.css +234 -167
  101. package/{lib/css → dist}/logius-blauw/light/xl.css +231 -165
  102. package/{lib/css → dist}/logius-blauw/light/xs-theme.css +234 -167
  103. package/{lib/css/mijnoverheid → dist/logius-blauw}/light/xs.css +230 -164
  104. package/{lib/css → dist}/mijnoverheid/dark/lg-theme.css +233 -166
  105. package/{lib/css → dist}/mijnoverheid/dark/lg.css +230 -164
  106. package/{lib/css → dist}/mijnoverheid/dark/md-theme.css +233 -166
  107. package/{lib/css → dist}/mijnoverheid/dark/md.css +230 -164
  108. package/{lib/css → dist}/mijnoverheid/dark/sm-theme.css +233 -166
  109. package/{lib/css/logius-blauw → dist/mijnoverheid}/dark/sm.css +231 -165
  110. package/{lib/css → dist}/mijnoverheid/dark/xl-theme.css +233 -166
  111. package/{lib/css → dist}/mijnoverheid/dark/xl.css +230 -164
  112. package/{lib/css → dist}/mijnoverheid/dark/xs-theme.css +233 -166
  113. package/{lib/css/logius-blauw → dist/mijnoverheid}/dark/xs.css +231 -165
  114. package/{lib/css → dist}/mijnoverheid/light/lg-theme.css +233 -166
  115. package/{lib/css → dist}/mijnoverheid/light/lg.css +230 -164
  116. package/{lib/css → dist}/mijnoverheid/light/md-theme.css +233 -166
  117. package/{lib/css → dist}/mijnoverheid/light/md.css +230 -164
  118. package/{lib/css → dist}/mijnoverheid/light/sm-theme.css +233 -166
  119. package/{lib/css → dist}/mijnoverheid/light/sm.css +230 -164
  120. package/{lib/css → dist}/mijnoverheid/light/xl-theme.css +233 -166
  121. package/{lib/css → dist}/mijnoverheid/light/xl.css +230 -164
  122. package/{lib/css → dist}/mijnoverheid/light/xs-theme.css +233 -166
  123. package/{lib/css/logius-blauw → dist/mijnoverheid}/light/xs.css +231 -165
  124. package/{lib/css → dist}/nldoc/dark/lg-theme.css +228 -162
  125. package/{lib/css → dist}/nldoc/dark/lg.css +226 -160
  126. package/{lib/css → dist}/nldoc/dark/md-theme.css +228 -162
  127. package/{lib/css → dist}/nldoc/dark/md.css +226 -160
  128. package/{lib/css → dist}/nldoc/dark/sm-theme.css +228 -162
  129. package/{lib/css → dist}/nldoc/dark/sm.css +226 -160
  130. package/{lib/css → dist}/nldoc/dark/xl-theme.css +228 -162
  131. package/{lib/css → dist}/nldoc/dark/xl.css +226 -160
  132. package/{lib/css → dist}/nldoc/dark/xs-theme.css +228 -162
  133. package/{lib/css → dist}/nldoc/dark/xs.css +226 -160
  134. package/{lib/css → dist}/nldoc/light/lg-theme.css +228 -162
  135. package/{lib/css → dist}/nldoc/light/lg.css +226 -160
  136. package/{lib/css → dist}/nldoc/light/md-theme.css +228 -162
  137. package/{lib/css → dist}/nldoc/light/md.css +226 -160
  138. package/{lib/css → dist}/nldoc/light/sm-theme.css +228 -162
  139. package/{lib/css → dist}/nldoc/light/sm.css +226 -160
  140. package/{lib/css → dist}/nldoc/light/xl-theme.css +228 -162
  141. package/{lib/css → dist}/nldoc/light/xl.css +226 -160
  142. package/{lib/css → dist}/nldoc/light/xs-theme.css +228 -162
  143. package/{lib/css → dist}/nldoc/light/xs.css +226 -160
  144. package/{lib/css → dist}/nldoc/ridderkerk/dark/lg-theme.css +227 -161
  145. package/{lib/css → dist}/nldoc/ridderkerk/dark/lg.css +225 -159
  146. package/{lib/css → dist}/nldoc/ridderkerk/dark/md-theme.css +227 -161
  147. package/{lib/css → dist}/nldoc/ridderkerk/dark/md.css +225 -159
  148. package/{lib/css → dist}/nldoc/ridderkerk/dark/sm-theme.css +227 -161
  149. package/{lib/css → dist}/nldoc/ridderkerk/dark/sm.css +225 -159
  150. package/{lib/css → dist}/nldoc/ridderkerk/dark/xl-theme.css +227 -161
  151. package/{lib/css → dist}/nldoc/ridderkerk/dark/xl.css +225 -159
  152. package/{lib/css → dist}/nldoc/ridderkerk/dark/xs-theme.css +227 -161
  153. package/{lib/css → dist}/nldoc/ridderkerk/dark/xs.css +225 -159
  154. package/{lib/css → dist}/nldoc/ridderkerk/light/lg-theme.css +227 -161
  155. package/{lib/css → dist}/nldoc/ridderkerk/light/lg.css +225 -159
  156. package/{lib/css → dist}/nldoc/ridderkerk/light/md-theme.css +227 -161
  157. package/{lib/css → dist}/nldoc/ridderkerk/light/md.css +225 -159
  158. package/{lib/css → dist}/nldoc/ridderkerk/light/sm-theme.css +227 -161
  159. package/{lib/css → dist}/nldoc/ridderkerk/light/sm.css +225 -159
  160. package/{lib/css → dist}/nldoc/ridderkerk/light/xl-theme.css +227 -161
  161. package/{lib/css → dist}/nldoc/ridderkerk/light/xl.css +225 -159
  162. package/{lib/css → dist}/nldoc/ridderkerk/light/xs-theme.css +227 -161
  163. package/{lib/css → dist}/nldoc/ridderkerk/light/xs.css +225 -159
  164. package/{lib/css → dist}/nldoc/rijksoverheid/dark/lg-theme.css +228 -162
  165. package/{lib/css → dist}/nldoc/rijksoverheid/dark/lg.css +226 -160
  166. package/{lib/css → dist}/nldoc/rijksoverheid/dark/md-theme.css +228 -162
  167. package/{lib/css → dist}/nldoc/rijksoverheid/dark/md.css +226 -160
  168. package/{lib/css → dist}/nldoc/rijksoverheid/dark/sm-theme.css +228 -162
  169. package/{lib/css → dist}/nldoc/rijksoverheid/dark/sm.css +226 -160
  170. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xl-theme.css +228 -162
  171. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xl.css +226 -160
  172. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xs-theme.css +228 -162
  173. package/{lib/css → dist}/nldoc/rijksoverheid/dark/xs.css +226 -160
  174. package/{lib/css → dist}/nldoc/rijksoverheid/light/lg-theme.css +228 -162
  175. package/{lib/css → dist}/nldoc/rijksoverheid/light/lg.css +226 -160
  176. package/{lib/css → dist}/nldoc/rijksoverheid/light/md-theme.css +228 -162
  177. package/{lib/css → dist}/nldoc/rijksoverheid/light/md.css +226 -160
  178. package/{lib/css → dist}/nldoc/rijksoverheid/light/sm-theme.css +228 -162
  179. package/{lib/css → dist}/nldoc/rijksoverheid/light/sm.css +226 -160
  180. package/{lib/css → dist}/nldoc/rijksoverheid/light/xl-theme.css +228 -162
  181. package/{lib/css → dist}/nldoc/rijksoverheid/light/xl.css +226 -160
  182. package/{lib/css → dist}/nldoc/rijksoverheid/light/xs-theme.css +228 -162
  183. package/{lib/css → dist}/nldoc/rijksoverheid/light/xs.css +226 -160
  184. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/lg-theme.css +227 -161
  185. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/lg.css +225 -159
  186. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/md-theme.css +227 -161
  187. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/md.css +225 -159
  188. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/sm-theme.css +227 -161
  189. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/sm.css +225 -159
  190. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xl-theme.css +227 -161
  191. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xl.css +225 -159
  192. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xs-theme.css +227 -161
  193. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/dark/xs.css +225 -159
  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 +227 -161
  197. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/lg.css +225 -159
  198. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/md-theme.css +227 -161
  199. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/md.css +225 -159
  200. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/sm-theme.css +227 -161
  201. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/sm.css +225 -159
  202. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xl-theme.css +227 -161
  203. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xl.css +225 -159
  204. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xs-theme.css +227 -161
  205. package/{lib/css → dist}/nldoc/waterschap-hollandse-delta/light/xs.css +225 -159
  206. package/dist/nldoc/waterschap-hollandse-delta/lightdark.css +3 -0
  207. package/lib/tokens/$metadata.json +15 -8
  208. package/lib/tokens/$themes.json +331 -166
  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 +20 -12
  215. package/lib/tokens/component/button login.json +7 -12
  216. package/lib/tokens/component/button.json +9 -14
  217. package/lib/tokens/component/link.json +29 -3
  218. package/lib/tokens/core/border.json +33 -0
  219. package/lib/tokens/core/{default.json → color.json} +0 -124
  220. package/lib/tokens/core/font.json +138 -0
  221. package/lib/tokens/core/other.json +7 -0
  222. package/lib/tokens/core/spacing.json +61 -0
  223. package/lib/tokens/nl/utrecht-alert.json +62 -21
  224. package/lib/tokens/nl/utrecht-button.json +52 -57
  225. package/lib/tokens/nl/utrecht-focus.json +28 -0
  226. package/lib/tokens/nl/utrecht-link.json +45 -27
  227. package/lib/tokens/nl/utrecht-paragraph.json +70 -0
  228. package/lib/tokens/product/DigiD.json +84 -7
  229. package/lib/tokens/product/Digitoegankelijk.json +234 -0
  230. package/lib/tokens/product/Elia.json +85 -8
  231. package/lib/tokens/product/Logius Blauw.json +73 -105
  232. package/lib/tokens/product/Logius.json +77 -49
  233. package/lib/tokens/product/MijnOverheid.json +79 -64
  234. package/lib/tokens/product/NLdoc-mapping.json +81 -63
  235. package/lib/tokens/viewport/lg.json +143 -0
  236. package/lib/tokens/viewport/md.json +143 -0
  237. package/lib/tokens/viewport/sm.json +143 -0
  238. package/lib/tokens/viewport/xl.json +143 -0
  239. package/lib/tokens/viewport/xs.json +153 -0
  240. package/package.json +19 -19
  241. package/lib/tokens/common/viewport/lg.json +0 -144
  242. package/lib/tokens/common/viewport/md.json +0 -144
  243. package/lib/tokens/common/viewport/sm.json +0 -144
  244. package/lib/tokens/common/viewport/xl.json +0 -138
  245. package/lib/tokens/common/viewport/xs.json +0 -144
  246. /package/{lib/css → dist}/digid/index-theme.css +0 -0
  247. /package/{lib/css → dist}/digid/index.css +0 -0
  248. /package/{lib/css → dist}/digid/lightdark.css +0 -0
  249. /package/{lib/css/elia → dist/digitoegankelijk}/index-theme.css +0 -0
  250. /package/{lib/css/elia → dist/digitoegankelijk}/index.css +0 -0
  251. /package/{lib/css/elia → dist/digitoegankelijk}/lightdark.css +0 -0
  252. /package/{lib/css/logius-blauw → dist/elia}/index-theme.css +0 -0
  253. /package/{lib/css/logius-blauw → dist/elia}/index.css +0 -0
  254. /package/{lib/css/logius-blauw → dist/elia}/lightdark.css +0 -0
  255. /package/{lib/css/mijnoverheid → dist/logius}/index-theme.css +0 -0
  256. /package/{lib/css/mijnoverheid → dist/logius}/index.css +0 -0
  257. /package/{lib/css/mijnoverheid → dist/logius}/lightdark.css +0 -0
  258. /package/{lib/css/logius → dist/logius-blauw}/index-theme.css +0 -0
  259. /package/{lib/css/logius → dist/logius-blauw}/index.css +0 -0
  260. /package/{lib/css/logius → dist/logius-blauw}/lightdark.css +0 -0
  261. /package/{lib/css/nldoc → dist/mijnoverheid}/index-theme.css +0 -0
  262. /package/{lib/css/nldoc → dist/mijnoverheid}/index.css +0 -0
  263. /package/{lib/css/nldoc → dist/mijnoverheid}/lightdark.css +0 -0
  264. /package/{lib/css/nldoc/ridderkerk → dist/nldoc}/index-theme.css +0 -0
  265. /package/{lib/css/nldoc/ridderkerk → dist/nldoc}/index.css +0 -0
  266. /package/{lib/css/nldoc/ridderkerk → dist/nldoc}/lightdark.css +0 -0
  267. /package/{lib/css/nldoc/rijksoverheid → dist/nldoc/ridderkerk}/index-theme.css +0 -0
  268. /package/{lib/css/nldoc/rijksoverheid → dist/nldoc/ridderkerk}/index.css +0 -0
  269. /package/{lib/css/nldoc/rijksoverheid → dist/nldoc/ridderkerk}/lightdark.css +0 -0
  270. /package/{lib/css/nldoc/waterschap-hollandse-delta → dist/nldoc/rijksoverheid}/index-theme.css +0 -0
  271. /package/{lib/css/nldoc/waterschap-hollandse-delta → dist/nldoc/rijksoverheid}/index.css +0 -0
  272. /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`.