@lux-design-system/design-tokens 1.0.0-alpha.2

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 (107) hide show
  1. package/LICENSE.md +7 -0
  2. package/README.md +29 -0
  3. package/lib/css/digid/dark/lg.css +236 -0
  4. package/lib/css/digid/dark/md.css +236 -0
  5. package/lib/css/digid/dark/sm.css +236 -0
  6. package/lib/css/digid/dark/xl.css +236 -0
  7. package/lib/css/digid/dark/xs.css +236 -0
  8. package/lib/css/digid/light/lg.css +236 -0
  9. package/lib/css/digid/light/md.css +236 -0
  10. package/lib/css/digid/light/sm.css +236 -0
  11. package/lib/css/digid/light/xl.css +236 -0
  12. package/lib/css/digid/light/xs.css +236 -0
  13. package/lib/css/logius/dark/lg.css +236 -0
  14. package/lib/css/logius/dark/md.css +236 -0
  15. package/lib/css/logius/dark/sm.css +236 -0
  16. package/lib/css/logius/dark/xl.css +236 -0
  17. package/lib/css/logius/dark/xs.css +236 -0
  18. package/lib/css/logius/light/lg.css +236 -0
  19. package/lib/css/logius/light/md.css +236 -0
  20. package/lib/css/logius/light/sm.css +236 -0
  21. package/lib/css/logius/light/xl.css +236 -0
  22. package/lib/css/logius/light/xs.css +236 -0
  23. package/lib/css/mijnoverheid/dark/lg.css +236 -0
  24. package/lib/css/mijnoverheid/dark/md.css +236 -0
  25. package/lib/css/mijnoverheid/dark/sm.css +236 -0
  26. package/lib/css/mijnoverheid/dark/xl.css +236 -0
  27. package/lib/css/mijnoverheid/dark/xs.css +236 -0
  28. package/lib/css/mijnoverheid/light/lg.css +236 -0
  29. package/lib/css/mijnoverheid/light/md.css +236 -0
  30. package/lib/css/mijnoverheid/light/sm.css +236 -0
  31. package/lib/css/mijnoverheid/light/xl.css +236 -0
  32. package/lib/css/mijnoverheid/light/xs.css +236 -0
  33. package/lib/css/nldoc/dark/lg.css +236 -0
  34. package/lib/css/nldoc/dark/md.css +236 -0
  35. package/lib/css/nldoc/dark/sm.css +236 -0
  36. package/lib/css/nldoc/dark/xl.css +236 -0
  37. package/lib/css/nldoc/dark/xs.css +236 -0
  38. package/lib/css/nldoc/light/lg.css +236 -0
  39. package/lib/css/nldoc/light/md.css +236 -0
  40. package/lib/css/nldoc/light/sm.css +236 -0
  41. package/lib/css/nldoc/light/xl.css +236 -0
  42. package/lib/css/nldoc/light/xs.css +236 -0
  43. package/lib/css/nldoc/ridderkerk/dark/lg.css +236 -0
  44. package/lib/css/nldoc/ridderkerk/dark/md.css +236 -0
  45. package/lib/css/nldoc/ridderkerk/dark/sm.css +236 -0
  46. package/lib/css/nldoc/ridderkerk/dark/xl.css +236 -0
  47. package/lib/css/nldoc/ridderkerk/dark/xs.css +236 -0
  48. package/lib/css/nldoc/ridderkerk/light/lg.css +236 -0
  49. package/lib/css/nldoc/ridderkerk/light/md.css +236 -0
  50. package/lib/css/nldoc/ridderkerk/light/sm.css +236 -0
  51. package/lib/css/nldoc/ridderkerk/light/xl.css +236 -0
  52. package/lib/css/nldoc/ridderkerk/light/xs.css +236 -0
  53. package/lib/css/nldoc/rijksoverheid/dark/lg.css +236 -0
  54. package/lib/css/nldoc/rijksoverheid/dark/md.css +236 -0
  55. package/lib/css/nldoc/rijksoverheid/dark/sm.css +236 -0
  56. package/lib/css/nldoc/rijksoverheid/dark/xl.css +236 -0
  57. package/lib/css/nldoc/rijksoverheid/dark/xs.css +236 -0
  58. package/lib/css/nldoc/rijksoverheid/light/lg.css +236 -0
  59. package/lib/css/nldoc/rijksoverheid/light/md.css +236 -0
  60. package/lib/css/nldoc/rijksoverheid/light/sm.css +236 -0
  61. package/lib/css/nldoc/rijksoverheid/light/xl.css +236 -0
  62. package/lib/css/nldoc/rijksoverheid/light/xs.css +236 -0
  63. package/lib/css/nldoc/whd/dark/lg.css +236 -0
  64. package/lib/css/nldoc/whd/dark/md.css +236 -0
  65. package/lib/css/nldoc/whd/dark/sm.css +236 -0
  66. package/lib/css/nldoc/whd/dark/xl.css +236 -0
  67. package/lib/css/nldoc/whd/dark/xs.css +236 -0
  68. package/lib/css/nldoc/whd/light/lg.css +236 -0
  69. package/lib/css/nldoc/whd/light/md.css +236 -0
  70. package/lib/css/nldoc/whd/light/sm.css +236 -0
  71. package/lib/css/nldoc/whd/light/xl.css +236 -0
  72. package/lib/css/nldoc/whd/light/xs.css +236 -0
  73. package/lib/tokens/$metadata.json +36 -0
  74. package/lib/tokens/$themes.json +166 -0
  75. package/lib/tokens/common/default.json +34 -0
  76. package/lib/tokens/component/alert/closable/false.json +18 -0
  77. package/lib/tokens/component/alert/closable/true.json +18 -0
  78. package/lib/tokens/component/alert/default.json +60 -0
  79. package/lib/tokens/component/alert/variant/error.json +18 -0
  80. package/lib/tokens/component/alert/variant/info.json +18 -0
  81. package/lib/tokens/component/alert/variant/success.json +18 -0
  82. package/lib/tokens/component/alert/variant/warning.json +18 -0
  83. package/lib/tokens/component/button/default.json +62 -0
  84. package/lib/tokens/component/button/icon/end.json +28 -0
  85. package/lib/tokens/component/button/icon/none.json +28 -0
  86. package/lib/tokens/component/button/icon/start.json +28 -0
  87. package/lib/tokens/component/button/variant/primary.json +46 -0
  88. package/lib/tokens/component/button/variant/secondary.json +46 -0
  89. package/lib/tokens/component/button/variant/tertairy.json +46 -0
  90. package/lib/tokens/component/button-login/default.json +88 -0
  91. package/lib/tokens/component/link/default.json +38 -0
  92. package/lib/tokens/core/default.json +584 -0
  93. package/lib/tokens/mode/dark (beta).json +296 -0
  94. package/lib/tokens/mode/light.json +295 -0
  95. package/lib/tokens/product/DigiD.json +114 -0
  96. package/lib/tokens/product/Logius.json +114 -0
  97. package/lib/tokens/product/MijnOverheid.json +114 -0
  98. package/lib/tokens/product/NLdoc - Ridderkerk.json +106 -0
  99. package/lib/tokens/product/NLdoc - Rijksoverheid.json +106 -0
  100. package/lib/tokens/product/NLdoc - WHD.json +106 -0
  101. package/lib/tokens/product/NLdoc - default.json +106 -0
  102. package/lib/tokens/viewport (beta)/lg.json +66 -0
  103. package/lib/tokens/viewport (beta)/md.json +66 -0
  104. package/lib/tokens/viewport (beta)/sm.json +66 -0
  105. package/lib/tokens/viewport (beta)/xl.json +66 -0
  106. package/lib/tokens/viewport (beta)/xs.json +66 -0
  107. package/package.json +47 -0
package/lib/tokens/common/default.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "lux": {
3
+ "focus": {
4
+ "border-width [oud]": {
5
+ "value": "{lux.border-width.m}",
6
+ "type": "dimension",
7
+ "parent": "common/Mode 1",
8
+ "description": "vervangen met product collectie"
9
+ }
10
+ },
11
+ "size": {
12
+ "target": {
13
+ "value": "3rem",
14
+ "type": "dimension",
15
+ "parent": "common/Mode 1",
16
+ "description": ""
17
+ },
18
+ "icon": {
19
+ "value": "1rem",
20
+ "type": "dimension",
21
+ "parent": "common/Mode 1",
22
+ "description": ""
23
+ }
24
+ },
25
+ "grid": {
26
+ "max-inline": {
27
+ "value": "77.5rem",
28
+ "type": "dimension",
29
+ "parent": "common/Mode 1",
30
+ "description": ""
31
+ }
32
+ }
33
+ }
34
+ }
package/lib/tokens/component/alert/closable/false.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "figma": {
3
+ "alert": {
4
+ "close-button": {
5
+ "value": "false",
6
+ "type": "boolean"
7
+ }
8
+ }
9
+ },
10
+ "lux": {
11
+ "alert": {
12
+ "padding-inline-end": {
13
+ "value": "{lux.space.2-x}",
14
+ "type": "dimension"
15
+ }
16
+ }
17
+ }
18
+ }
package/lib/tokens/component/alert/closable/true.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "figma": {
3
+ "alert": {
4
+ "close-button": {
5
+ "value": "true",
6
+ "type": "boolean"
7
+ }
8
+ }
9
+ },
10
+ "lux": {
11
+ "alert": {
12
+ "padding-inline-end": {
13
+ "value": "{lux.space.105-x}",
14
+ "type": "dimension"
15
+ }
16
+ }
17
+ }
18
+ }
package/lib/tokens/component/alert/default.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "lux": {
3
+ "alert": {
4
+ "color": {
5
+ "value": "{lux.color.grijs.700}",
6
+ "type": "color"
7
+ },
8
+ "border-color": {
9
+ "value": "{lux.color.none}",
10
+ "type": "color"
11
+ },
12
+ "border-radius": {
13
+ "value": "{lux.border-radius.default}",
14
+ "type": "dimension"
15
+ },
16
+ "border-width": {
17
+ "value": "{lux.border-width.default}",
18
+ "type": "dimension"
19
+ },
20
+ "column-gap": {
21
+ "value": "{lux.space.1-x}",
22
+ "type": "dimension"
23
+ },
24
+ "padding-block-end": {
25
+ "value": "{lux.space.105-x}",
26
+ "type": "dimension"
27
+ },
28
+ "padding-block-start": {
29
+ "value": "{lux.space.105-x}",
30
+ "type": "dimension"
31
+ },
32
+ "padding-inline-end": {
33
+ "value": "{lux.space.105-x}",
34
+ "type": "dimension"
35
+ },
36
+ "padding-inline-start": {
37
+ "value": "{lux.space.105-x}",
38
+ "type": "dimension"
39
+ },
40
+ "icon-start-size": {
41
+ "value": "24px",
42
+ "type": "dimension"
43
+ },
44
+ "min-inline-size": {
45
+ "value": "160px",
46
+ "type": "dimension"
47
+ },
48
+ "close-button-size": {
49
+ "value": "{lux.size.icon}",
50
+ "type": "dimension"
51
+ },
52
+ "content": {
53
+ "row-gap": {
54
+ "value": "{lux.space.0-x}",
55
+ "type": "dimension"
56
+ }
57
+ }
58
+ }
59
+ }
60
+ }
package/lib/tokens/component/alert/variant/error.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "figma": {
3
+ "icon": {
4
+ "variant": {
5
+ "value": "error",
6
+ "type": "text"
7
+ }
8
+ }
9
+ },
10
+ "lux": {
11
+ "alert": {
12
+ "background-color": {
13
+ "value": "{lux.color.feedback.error.subdued}",
14
+ "type": "color"
15
+ }
16
+ }
17
+ }
18
+ }
package/lib/tokens/component/alert/variant/info.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "figma": {
3
+ "icon": {
4
+ "variant": {
5
+ "value": "info",
6
+ "type": "text"
7
+ }
8
+ }
9
+ },
10
+ "lux": {
11
+ "alert": {
12
+ "background-color": {
13
+ "value": "{lux.color.feedback.info.subdued}",
14
+ "type": "color"
15
+ }
16
+ }
17
+ }
18
+ }
package/lib/tokens/component/alert/variant/success.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "figma": {
3
+ "icon": {
4
+ "variant": {
5
+ "value": "success",
6
+ "type": "text"
7
+ }
8
+ }
9
+ },
10
+ "lux": {
11
+ "alert": {
12
+ "background-color": {
13
+ "value": "{lux.color.feedback.success.subdued}",
14
+ "type": "color"
15
+ }
16
+ }
17
+ }
18
+ }
package/lib/tokens/component/alert/variant/warning.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "figma": {
3
+ "icon": {
4
+ "variant": {
5
+ "value": "warning",
6
+ "type": "text"
7
+ }
8
+ }
9
+ },
10
+ "lux": {
11
+ "alert": {
12
+ "background-color": {
13
+ "value": "{lux.color.feedback.warning.subdued}",
14
+ "type": "color"
15
+ }
16
+ }
17
+ }
18
+ }
package/lib/tokens/component/button/default.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "disabled": {
5
+ "background-color": {
6
+ "value": "{lux.color.background.subdued}",
7
+ "type": "color"
8
+ },
9
+ "border-color": {
10
+ "value": "{lux.color.none}",
11
+ "type": "color"
12
+ },
13
+ "color": {
14
+ "value": "{lux.color.foreground.subdued}",
15
+ "type": "color"
16
+ }
17
+ },
18
+ "padding-inline-start": {
19
+ "value": "{lux.space.2-x}",
20
+ "type": "dimension"
21
+ },
22
+ "padding-block-start": {
23
+ "value": "{lux.space.1-x}",
24
+ "type": "dimension"
25
+ },
26
+ "padding-inline-end": {
27
+ "value": "{lux.space.2-x}",
28
+ "type": "dimension"
29
+ },
30
+ "padding-block-end": {
31
+ "value": "{lux.space.1-x}",
32
+ "type": "dimension"
33
+ },
34
+ "margin-inline": {
35
+ "value": "{lux.space.1-x}",
36
+ "type": "dimension"
37
+ },
38
+ "min-inline-size": {
39
+ "type": "dimension",
40
+ "value": "{lux.size.target}"
41
+ },
42
+ "min-block-size": {
43
+ "type": "dimension",
44
+ "value": "{lux.size.target}"
45
+ },
46
+ "border-radius": {
47
+ "type": "dimension",
48
+ "value": "{lux.border-radius.default}"
49
+ },
50
+ "border-width": {
51
+ "type": "dimension",
52
+ "value": "{lux.border-width.default}"
53
+ },
54
+ "icon": {
55
+ "size": {
56
+ "type": "dimension",
57
+ "value": "{lux.size.icon}"
58
+ }
59
+ }
60
+ }
61
+ }
62
+ }
package/lib/tokens/component/button/icon/end.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "padding-inline-start": {
5
+ "value": "{lux.space.105-x}",
6
+ "type": "dimension"
7
+ },
8
+ "padding-inline-end": {
9
+ "value": "{lux.space.2-x}",
10
+ "type": "dimension"
11
+ }
12
+ }
13
+ },
14
+ "figma": {
15
+ "button": {
16
+ "show-icon": {
17
+ "start": {
18
+ "value": "true",
19
+ "type": "boolean"
20
+ },
21
+ "end": {
22
+ "value": "false",
23
+ "type": "boolean"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
package/lib/tokens/component/button/icon/none.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "padding-inline-start": {
5
+ "value": "{lux.space.2-x}",
6
+ "type": "dimension"
7
+ },
8
+ "padding-inline-end": {
9
+ "value": "{lux.space.2-x}",
10
+ "type": "dimension"
11
+ }
12
+ }
13
+ },
14
+ "figma": {
15
+ "button": {
16
+ "show-icon": {
17
+ "start": {
18
+ "value": "false",
19
+ "type": "boolean"
20
+ },
21
+ "end": {
22
+ "value": "false",
23
+ "type": "boolean"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
package/lib/tokens/component/button/icon/start.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "padding-inline-start": {
5
+ "value": "{lux.space.2-x}",
6
+ "type": "dimension"
7
+ },
8
+ "padding-inline-end": {
9
+ "value": "{lux.space.105-x}",
10
+ "type": "dimension"
11
+ }
12
+ }
13
+ },
14
+ "figma": {
15
+ "button": {
16
+ "show-icon": {
17
+ "start": {
18
+ "value": "false",
19
+ "type": "boolean"
20
+ },
21
+ "end": {
22
+ "value": "true",
23
+ "type": "boolean"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
package/lib/tokens/component/button/variant/primary.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "background-color": {
5
+ "type": "color",
6
+ "value": "{lux.color.brand.default}"
7
+ },
8
+ "border-color": {
9
+ "type": "color",
10
+ "value": "{lux.color.none}"
11
+ },
12
+ "color": {
13
+ "type": "color",
14
+ "value": "{lux.color.foreground.onEmphasis}"
15
+ },
16
+ "hover": {
17
+ "background-color": {
18
+ "type": "color",
19
+ "value": "{lux.color.brand.hover}"
20
+ },
21
+ "border-color": {
22
+ "value": "{lux.color.none}",
23
+ "type": "color"
24
+ },
25
+ "color": {
26
+ "type": "color",
27
+ "value": "{lux.color.foreground.onEmphasis}"
28
+ }
29
+ },
30
+ "active": {
31
+ "background-color": {
32
+ "value": "{lux.color.brand.default}",
33
+ "type": "color"
34
+ },
35
+ "border-color": {
36
+ "value": "{lux.color.none}",
37
+ "type": "color"
38
+ },
39
+ "color": {
40
+ "value": "{lux.color.foreground.onEmphasis}",
41
+ "type": "color"
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
package/lib/tokens/component/button/variant/secondary.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "background-color": {
5
+ "type": "color",
6
+ "value": "{lux.color.none}"
7
+ },
8
+ "border-color": {
9
+ "type": "color",
10
+ "value": "{mode.button.secondary.border-color}"
11
+ },
12
+ "color": {
13
+ "type": "color",
14
+ "value": "{lux.color.brand.default}"
15
+ },
16
+ "hover": {
17
+ "background-color": {
18
+ "type": "color",
19
+ "value": "{lux.color.brand.subdued}"
20
+ },
21
+ "border-color": {
22
+ "value": "{lux.color.brand.hover}",
23
+ "type": "color"
24
+ },
25
+ "color": {
26
+ "type": "color",
27
+ "value": "{lux.color.brand.hover}"
28
+ }
29
+ },
30
+ "active": {
31
+ "background-color": {
32
+ "value": "{lux.color.none}",
33
+ "type": "color"
34
+ },
35
+ "border-color": {
36
+ "value": "{mode.button.secondary.border-color}",
37
+ "type": "color"
38
+ },
39
+ "color": {
40
+ "value": "{mode.button.secondary.color}",
41
+ "type": "color"
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
package/lib/tokens/component/button/variant/tertairy.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "lux": {
3
+ "button": {
4
+ "background-color": {
5
+ "type": "color",
6
+ "value": "{lux.color.none}"
7
+ },
8
+ "border-color": {
9
+ "type": "color",
10
+ "value": "{lux.color.none}"
11
+ },
12
+ "color": {
13
+ "type": "color",
14
+ "value": "{mode.button.tertiary.color}"
15
+ },
16
+ "hover": {
17
+ "background-color": {
18
+ "type": "color",
19
+ "value": "{mode.button.tertiary.hover.background-color}"
20
+ },
21
+ "border-color": {
22
+ "value": "{lux.color.none}",
23
+ "type": "color"
24
+ },
25
+ "color": {
26
+ "type": "color",
27
+ "value": "{mode.button.tertiary.hover.color}"
28
+ }
29
+ },
30
+ "active": {
31
+ "background-color": {
32
+ "value": "{lux.color.none}",
33
+ "type": "color"
34
+ },
35
+ "border-color": {
36
+ "value": "{lux.color.none}",
37
+ "type": "color"
38
+ },
39
+ "color": {
40
+ "value": "{mode.button.tertiary.color}",
41
+ "type": "color"
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
package/lib/tokens/component/button-login/default.json ADDED
@@ -0,0 +1,88 @@
1
+ {
2
+ "lux": {
3
+ "button-login": {
4
+ "active": {
5
+ "background-color": {
6
+ "type": "color",
7
+ "value": "{mode.button-login.active.background-color}"
8
+ },
9
+ "border-color": {
10
+ "type": "color",
11
+ "value": "{lux.color.border.strong}"
12
+ },
13
+ "color": {
14
+ "type": "color",
15
+ "value": "{lux.color.foreground.default}"
16
+ }
17
+ },
18
+ "background-color": {
19
+ "type": "color",
20
+ "value": "{lux.color.background.default}"
21
+ },
22
+ "border-color": {
23
+ "type": "color",
24
+ "value": "{lux.color.border.default}"
25
+ },
26
+ "border-radius": {
27
+ "type": "dimension",
28
+ "value": "{lux.border-radius.default}"
29
+ },
30
+ "border-width": {
31
+ "type": "dimension",
32
+ "value": "{lux.border-width.default}"
33
+ },
34
+ "color": {
35
+ "type": "color",
36
+ "value": "{lux.color.foreground.default}"
37
+ },
38
+ "hover": {
39
+ "background-color": {
40
+ "type": "color",
41
+ "value": "{lux.color.background.hover}"
42
+ },
43
+ "border-color": {
44
+ "type": "color",
45
+ "value": "{lux.color.border.default}"
46
+ },
47
+ "color": {
48
+ "type": "color",
49
+ "value": "{lux.color.foreground.default}"
50
+ }
51
+ },
52
+ "icon": {
53
+ "size": {
54
+ "type": "dimension",
55
+ "value": "40px"
56
+ }
57
+ },
58
+ "margin-inline": {
59
+ "type": "dimension",
60
+ "value": "{lux.space.1-x}"
61
+ },
62
+ "min-block-size": {
63
+ "type": "dimension",
64
+ "value": "{lux.size.target}"
65
+ },
66
+ "min-inline-size": {
67
+ "type": "dimension",
68
+ "value": "{lux.size.target}"
69
+ },
70
+ "padding-block-end": {
71
+ "type": "dimension",
72
+ "value": "{lux.space.05-x}"
73
+ },
74
+ "padding-block-start": {
75
+ "type": "dimension",
76
+ "value": "{lux.space.05-x}"
77
+ },
78
+ "padding-inline-end": {
79
+ "type": "dimension",
80
+ "value": "{lux.space.2-x}"
81
+ },
82
+ "padding-inline-start": {
83
+ "type": "dimension",
84
+ "value": "{lux.space.05-x}"
85
+ }
86
+ }
87
+ }
88
+ }
package/lib/tokens/component/link/default.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "lux": {
3
+ "link": {
4
+ "color": {
5
+ "value": "{lux.color.donkerblauw.300}",
6
+ "type": "color"
7
+ },
8
+ "margin-inline": {
9
+ "value": "{lux.space.05-x}",
10
+ "type": "dimension"
11
+ },
12
+ "icon": {
13
+ "size": {
14
+ "value": "{lux.button.icon.size}",
15
+ "type": "dimension"
16
+ }
17
+ },
18
+ "hover": {
19
+ "color": {
20
+ "value": "{lux.color.donkerblauw.400}",
21
+ "type": "color"
22
+ }
23
+ },
24
+ "active": {
25
+ "color": {
26
+ "value": "{lux.color.paars.300}",
27
+ "type": "color"
28
+ }
29
+ },
30
+ "visited": {
31
+ "color": {
32
+ "value": "{lux.color.paars.300}",
33
+ "type": "color"
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }