@dictu/design-tokens 1.6.0 → 2.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 (42) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.css +802 -90
  3. package/package.json +6 -3
  4. package/src/$metadata.json +12 -2
  5. package/src/$themes.json +12 -1
  6. package/src/common/common.tokens.json +28 -4
  7. package/src/components/button.tokens.json +68 -8
  8. package/src/components/form-elements/checkbox.tokens.json +160 -0
  9. package/src/components/form-elements/date-input.tokens.json +220 -0
  10. package/src/components/form-elements/fieldset.tokens.json +102 -0
  11. package/src/components/form-elements/form-field.tokens.json +80 -0
  12. package/src/components/form-elements/label.tokens.json +52 -0
  13. package/src/components/form-elements/radio-button.tokens.json +160 -0
  14. package/src/components/form-elements/select.tokens.json +164 -0
  15. package/src/components/form-elements/text-area.tokens.json +136 -0
  16. package/src/components/form-elements/text-input.tokens.json +160 -0
  17. package/src/components/navigation-bar.tokens.json +43 -1
  18. package/src/components/searchbar.tokens.json +28 -0
  19. package/src/components/table.tokens.json +190 -0
  20. package/style-dictionary-build.mjs +4 -24
  21. package/dist/accordion.css +0 -45
  22. package/dist/breadcrumb.css +0 -34
  23. package/dist/button.css +0 -84
  24. package/dist/card.css +0 -49
  25. package/dist/container.css +0 -8
  26. package/dist/figure.css +0 -10
  27. package/dist/grid.css +0 -16
  28. package/dist/heading.css +0 -36
  29. package/dist/hero.css +0 -24
  30. package/dist/icon.css +0 -8
  31. package/dist/link-list.css +0 -13
  32. package/dist/link.css +0 -24
  33. package/dist/list.css +0 -11
  34. package/dist/logo.css +0 -20
  35. package/dist/navigation-bar.css +0 -39
  36. package/dist/page-footer.css +0 -14
  37. package/dist/page-header.css +0 -8
  38. package/dist/paragraph.css +0 -14
  39. package/dist/section.css +0 -7
  40. package/dist/skip-link.css +0 -16
  41. package/dist/timeline.css +0 -34
  42. package/src/components/table.tokens.wip.json +0 -156
package/src/components/form-elements/fieldset.tokens.json ADDED
@@ -0,0 +1,102 @@
1
+ {
2
+ "govnl": {
3
+ "fieldset-description": {
4
+ "font-family": {
5
+ "$type": "fontFamilies",
6
+ "$value": "{govnl.form-control.font-family}"
7
+ },
8
+ "font-size": {
9
+ "$type": "fontSizes",
10
+ "$value": "{govnl.typography.font-size.sm}"
11
+ },
12
+ "font-weight": {
13
+ "$type": "fontWeights",
14
+ "$value": "{govnl.form-control.font-weight}"
15
+ },
16
+ "color": {
17
+ "$type": "color",
18
+ "$value": "{govnl.document.subtle.color}"
19
+ }
20
+ },
21
+ "fieldset-error-message": {
22
+ "font-family": {
23
+ "$type": "fontFamilies",
24
+ "$value": "{govnl.form-control.font-family}"
25
+ },
26
+ "font-size": {
27
+ "$type": "fontSizes",
28
+ "$value": "{govnl.typography.font-size.sm}"
29
+ },
30
+ "font-weight": {
31
+ "$type": "fontWeights",
32
+ "$value": "{govnl.form-control.font-weight}"
33
+ },
34
+ "icon": {
35
+ "size": {
36
+ "$type": "sizing",
37
+ "$value": "{govnl.icon.size}"
38
+ },
39
+ "color": {
40
+ "$type": "color",
41
+ "$value": "{govnl.form-control.invalid.color}"
42
+ }
43
+ },
44
+ "column-gap": {
45
+ "$type": "dimension",
46
+ "$value": "{govnl.space.3xs}"
47
+ },
48
+ "color": {
49
+ "$type": "color",
50
+ "$value": "{govnl.form-control.invalid.color}"
51
+ }
52
+ },
53
+ "fieldset-legend-group": {
54
+ "row-gap": {
55
+ "$type": "dimension",
56
+ "$value": "0rem"
57
+ }
58
+ },
59
+ "fieldset": {
60
+ "row-gap": {
61
+ "$type": "dimension",
62
+ "$value": "{govnl.space.2xs}"
63
+ },
64
+ "error": {
65
+ "padding-inline-start": {
66
+ "$type": "dimension",
67
+ "$value": "{govnl.space.sm}"
68
+ },
69
+ "border-inline-start-width": {
70
+ "$type": "borderWidth",
71
+ "$value": "{govnl.border.border-width.md}"
72
+ },
73
+ "border-color": {
74
+ "$type": "color",
75
+ "$value": "{govnl.form-control.invalid.border-color}"
76
+ }
77
+ }
78
+ },
79
+ "fieldset-legend": {
80
+ "font-family": {
81
+ "$type": "fontFamilies",
82
+ "$value": "{govnl.form-control.font-family}"
83
+ },
84
+ "regular": {
85
+ "font-weight": {
86
+ "$type": "fontWeights",
87
+ "$value": "{govnl.form-control.font-weight}"
88
+ }
89
+ },
90
+ "strong": {
91
+ "font-weight": {
92
+ "$type": "fontWeights",
93
+ "$value": "{govnl.form-control.strong.font-weight}"
94
+ }
95
+ },
96
+ "font-size": {
97
+ "$type": "fontSizes",
98
+ "$value": "{govnl.form-control.font-size}"
99
+ }
100
+ }
101
+ }
102
+ }
package/src/components/form-elements/form-field.tokens.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "govnl": {
3
+ "form-field-description": {
4
+ "font-family": {
5
+ "$type": "fontFamilies",
6
+ "$value": "{govnl.form-control.font-family}"
7
+ },
8
+ "font-size": {
9
+ "$type": "fontSizes",
10
+ "$value": "{govnl.typography.font-size.sm}"
11
+ },
12
+ "font-weight": {
13
+ "$type": "fontWeights",
14
+ "$value": "{govnl.form-control.font-weight}"
15
+ },
16
+ "color": {
17
+ "$type": "color",
18
+ "$value": "{govnl.document.subtle.color}"
19
+ }
20
+ },
21
+ "form-field-error-message": {
22
+ "font-family": {
23
+ "$type": "fontFamilies",
24
+ "$value": "{govnl.form-control.font-family}"
25
+ },
26
+ "font-size": {
27
+ "$type": "fontSizes",
28
+ "$value": "{govnl.typography.font-size.sm}"
29
+ },
30
+ "font-weight": {
31
+ "$type": "fontWeights",
32
+ "$value": "{govnl.form-control.font-weight}"
33
+ },
34
+ "icon": {
35
+ "size": {
36
+ "$type": "sizing",
37
+ "$value": "{govnl.icon.size}"
38
+ },
39
+ "color": {
40
+ "$type": "color",
41
+ "$value": "{govnl.form-control.invalid.color}"
42
+ }
43
+ },
44
+ "column-gap": {
45
+ "$type": "dimension",
46
+ "$value": "{govnl.space.3xs}"
47
+ },
48
+ "color": {
49
+ "$type": "color",
50
+ "$value": "{govnl.form-control.invalid.color}"
51
+ }
52
+ },
53
+ "form-field-label-group": {
54
+ "row-gap": {
55
+ "$type": "dimension",
56
+ "$value": "0rem"
57
+ }
58
+ },
59
+ "form-field": {
60
+ "row-gap": {
61
+ "$type": "dimension",
62
+ "$value": "{govnl.space.2xs}"
63
+ },
64
+ "error": {
65
+ "padding-inline-start": {
66
+ "$type": "dimension",
67
+ "$value": "{govnl.space.sm}"
68
+ },
69
+ "border-inline-start-width": {
70
+ "$type": "borderWidth",
71
+ "$value": "{govnl.border.border-width.md}"
72
+ },
73
+ "border-color": {
74
+ "$type": "color",
75
+ "$value": "{govnl.form-control.invalid.border-color}"
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
package/src/components/form-elements/label.tokens.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "govnl": {
3
+ "label": {
4
+ "required": {
5
+ "color": {
6
+ "$type": "color",
7
+ "$value": "{govnl.color.grijs.700}"
8
+ },
9
+ "font-family": {
10
+ "$type": "fontFamilies",
11
+ "$value": "{govnl.form-control.font-family}"
12
+ },
13
+ "font-weight": {
14
+ "$type": "fontWeights",
15
+ "$value": "{govnl.form-control.font-weight}"
16
+ },
17
+ "font-size": {
18
+ "$type": "fontSizes",
19
+ "$value": "{govnl.typography.font-size.xs}"
20
+ }
21
+ },
22
+ "color": {
23
+ "$type": "color",
24
+ "$value": "{govnl.form-control.color}"
25
+ },
26
+ "font-family": {
27
+ "$type": "fontFamilies",
28
+ "$value": "{govnl.form-control.font-family}"
29
+ },
30
+ "regular": {
31
+ "font-weight": {
32
+ "$type": "fontWeights",
33
+ "$value": "{govnl.form-control.font-weight}"
34
+ }
35
+ },
36
+ "font-size": {
37
+ "$type": "fontSizes",
38
+ "$value": "{govnl.form-control.font-size}"
39
+ },
40
+ "column-gap": {
41
+ "$type": "dimension",
42
+ "$value": "{govnl.space.3xs}"
43
+ },
44
+ "strong": {
45
+ "font-weight": {
46
+ "$type": "fontWeights",
47
+ "$value": "{govnl.form-control.strong.font-weight}"
48
+ }
49
+ }
50
+ }
51
+ }
52
+ }
package/src/components/form-elements/radio-button.tokens.json ADDED
@@ -0,0 +1,160 @@
1
+ {
2
+ "govnl": {
3
+ "radio-button": {
4
+ "size": {
5
+ "$type": "sizing",
6
+ "$value": "{govnl.dimension.size.300}"
7
+ },
8
+ "border-radius": {
9
+ "$type": "borderRadius",
10
+ "$value": "{govnl.border.border-radius.round}"
11
+ },
12
+ "icon": {
13
+ "size": {
14
+ "$type": "sizing",
15
+ "$value": "{govnl.icon.size}"
16
+ }
17
+ },
18
+ "unchecked": {
19
+ "background-color": {
20
+ "$type": "color",
21
+ "$value": "{govnl.form-control.background-color}"
22
+ },
23
+ "border-color": {
24
+ "$type": "color",
25
+ "$value": "{govnl.form-control.border-color}"
26
+ },
27
+ "border-width": {
28
+ "$type": "borderWidth",
29
+ "$value": "{govnl.border.border-width.sm}"
30
+ },
31
+ "hover": {
32
+ "background-color": {
33
+ "$type": "color",
34
+ "$value": "{govnl.form-control.hover.background-color}"
35
+ },
36
+ "border-color": {
37
+ "$type": "color",
38
+ "$value": "{govnl.form-control.hover.border-color}"
39
+ },
40
+ "border-width": {
41
+ "$type": "borderWidth",
42
+ "$value": "{govnl.border.border-width.md}"
43
+ }
44
+ },
45
+ "active": {
46
+ "background-color": {
47
+ "$type": "color",
48
+ "$value": "{govnl.form-control.active.background-color}"
49
+ },
50
+ "border-color": {
51
+ "$type": "color",
52
+ "$value": "{govnl.form-control.hover.border-color}"
53
+ },
54
+ "border-width": {
55
+ "$type": "borderWidth",
56
+ "$value": "{govnl.border.border-width.md}"
57
+ }
58
+ },
59
+ "focus": {
60
+ "background-color": {
61
+ "$type": "color",
62
+ "$value": "{govnl.form-control.focus.background-color}"
63
+ },
64
+ "border-color": {
65
+ "$type": "color",
66
+ "$value": "{govnl.form-control.focus.border-color}"
67
+ },
68
+ "outline-color": {
69
+ "$type": "color",
70
+ "$value": "{govnl.form-control.focus.outline-color}"
71
+ },
72
+ "border-width": {
73
+ "$type": "borderWidth",
74
+ "$value": "{govnl.border.border-width.sm}"
75
+ }
76
+ }
77
+ },
78
+ "checked": {
79
+ "background-color": {
80
+ "$type": "color",
81
+ "$value": "{govnl.interaction.color}"
82
+ },
83
+ "border-color": {
84
+ "$type": "color",
85
+ "$value": "transparant"
86
+ },
87
+ "color": {
88
+ "$type": "color",
89
+ "$value": "{govnl.document.inverse.color}"
90
+ },
91
+ "border-width": {
92
+ "$type": "borderWidth",
93
+ "$value": "{govnl.border.border-width.sm}"
94
+ },
95
+ "hover": {
96
+ "background-color": {
97
+ "$type": "color",
98
+ "$value": "{govnl.interaction.hover.color}"
99
+ },
100
+ "border-color": {
101
+ "$type": "color",
102
+ "$value": "transparant"
103
+ },
104
+ "color": {
105
+ "$type": "color",
106
+ "$value": "{govnl.document.inverse.color}"
107
+ },
108
+ "border-width": {
109
+ "$type": "borderWidth",
110
+ "$value": "{govnl.border.border-width.md}"
111
+ }
112
+ },
113
+ "active": {
114
+ "background-color": {
115
+ "$type": "color",
116
+ "$value": "{govnl.interaction.active.color}"
117
+ },
118
+ "border-color": {
119
+ "$type": "color",
120
+ "$value": "transparant"
121
+ },
122
+ "color": {
123
+ "$type": "color",
124
+ "$value": "{govnl.document.inverse.color}"
125
+ },
126
+ "border-width": {
127
+ "$type": "borderWidth",
128
+ "$value": "{govnl.border.border-width.md}"
129
+ }
130
+ },
131
+ "focus": {
132
+ "background-color": {
133
+ "$type": "color",
134
+ "$value": "{govnl.form-control.focus.background-color}"
135
+ },
136
+ "border-color": {
137
+ "$type": "color",
138
+ "$value": "{govnl.form-control.focus.border-color}"
139
+ },
140
+ "color": {
141
+ "$type": "color",
142
+ "$value": "{govnl.form-control.focus.color}"
143
+ },
144
+ "outline-color": {
145
+ "$type": "color",
146
+ "$value": "{govnl.form-control.focus.outline-color}"
147
+ },
148
+ "border-width": {
149
+ "$type": "borderWidth",
150
+ "$value": "{govnl.border.border-width.sm}"
151
+ }
152
+ }
153
+ },
154
+ "column-gap": {
155
+ "$type": "dimension",
156
+ "$value": "{govnl.space.2xs}"
157
+ }
158
+ }
159
+ }
160
+ }
package/src/components/form-elements/select.tokens.json ADDED
@@ -0,0 +1,164 @@
1
+ {
2
+ "govnl": {
3
+ "select": {
4
+ "font-family": {
5
+ "$type": "fontFamilies",
6
+ "$value": "{govnl.form-control.font-family}"
7
+ },
8
+ "font-size": {
9
+ "$type": "fontSizes",
10
+ "$value": "{govnl.form-control.font-size}"
11
+ },
12
+ "font-weight": {
13
+ "$type": "fontWeights",
14
+ "$value": "{govnl.form-control.font-weight}"
15
+ },
16
+ "line-height": {
17
+ "$type": "lineHeights",
18
+ "$value": "{govnl.form-control.line-height}"
19
+ },
20
+ "background-color": {
21
+ "$type": "color",
22
+ "$value": "{govnl.form-control.background-color}"
23
+ },
24
+ "border-color": {
25
+ "$type": "color",
26
+ "$value": "{govnl.form-control.border-color}"
27
+ },
28
+ "color": {
29
+ "$type": "color",
30
+ "$value": "{govnl.form-control.color}"
31
+ },
32
+ "min-block-size": {
33
+ "$type": "dimension",
34
+ "$value": "{govnl.dimension.pointer-target.min-size}"
35
+ },
36
+ "padding-block-start": {
37
+ "$type": "dimension",
38
+ "$value": "{govnl.space.xs}"
39
+ },
40
+ "padding-inline-end": {
41
+ "$type": "dimension",
42
+ "$value": "{govnl.space.xs}"
43
+ },
44
+ "padding-block-end": {
45
+ "$type": "dimension",
46
+ "$value": "{govnl.space.xs}"
47
+ },
48
+ "padding-inline-start": {
49
+ "$type": "dimension",
50
+ "$value": "{govnl.space.xs}"
51
+ },
52
+ "border-radius": {
53
+ "$type": "borderRadius",
54
+ "$value": "{govnl.border.border-radius.sm}"
55
+ },
56
+ "border-width": {
57
+ "$type": "borderWidth",
58
+ "$value": "{govnl.border.border-width.sm}"
59
+ },
60
+ "column-gap": {
61
+ "$type": "dimension",
62
+ "$value": "{govnl.space.3xs}"
63
+ },
64
+ "hover": {
65
+ "background-color": {
66
+ "$type": "color",
67
+ "$value": "{govnl.form-control.hover.background-color}"
68
+ },
69
+ "border-color": {
70
+ "$type": "color",
71
+ "$value": "{govnl.form-control.hover.border-color}"
72
+ },
73
+ "color": {
74
+ "$type": "color",
75
+ "$value": "{govnl.form-control.hover.color}"
76
+ }
77
+ },
78
+ "focus": {
79
+ "background-color": {
80
+ "$type": "color",
81
+ "$value": "{govnl.form-control.focus.background-color}"
82
+ },
83
+ "border-color": {
84
+ "$type": "color",
85
+ "$value": "{govnl.form-control.focus.border-color}"
86
+ },
87
+ "color": {
88
+ "$type": "color",
89
+ "$value": "{govnl.form-control.focus.color}"
90
+ },
91
+ "outline-color": {
92
+ "$type": "color",
93
+ "$value": "{govnl.form-control.focus.outline-color}"
94
+ }
95
+ },
96
+ "error": {
97
+ "background-color": {
98
+ "$type": "color",
99
+ "$value": "{govnl.form-control.invalid.background-color}"
100
+ },
101
+ "border-color": {
102
+ "$type": "color",
103
+ "$value": "{govnl.form-control.invalid.border-color}"
104
+ },
105
+ "color": {
106
+ "$type": "color",
107
+ "$value": "{govnl.form-control.invalid.color}"
108
+ },
109
+ "border-width": {
110
+ "$type": "borderWidth",
111
+ "$value": "{govnl.border.border-width.md}"
112
+ }
113
+ },
114
+ "icon": {
115
+ "color": {
116
+ "$type": "color",
117
+ "$value": "{govnl.form-control.color}"
118
+ }
119
+ },
120
+ "list-item": {
121
+ "background-color": {
122
+ "$type": "color",
123
+ "$value": "{govnl.form-control.background-color}"
124
+ },
125
+ "color": {
126
+ "$type": "color",
127
+ "$value": "{govnl.form-control.color}"
128
+ },
129
+ "active": {
130
+ "background-color": {
131
+ "$type": "color",
132
+ "$value": "{govnl.form-control.active.background-color}"
133
+ },
134
+ "color": {
135
+ "$type": "color",
136
+ "$value": "{govnl.form-control.active.color}"
137
+ },
138
+ "text-decoration": {
139
+ "$type": "textDecoration",
140
+ "$value": "none"
141
+ }
142
+ },
143
+ "hover": {
144
+ "background-color": {
145
+ "$type": "color",
146
+ "$value": "{govnl.form-control.hover.background-color}"
147
+ },
148
+ "color": {
149
+ "$type": "color",
150
+ "$value": "{govnl.form-control.hover.color}"
151
+ },
152
+ "text-decoration": {
153
+ "$type": "textDecoration",
154
+ "$value": "underline"
155
+ }
156
+ },
157
+ "text-decoration": {
158
+ "$type": "textDecoration",
159
+ "$value": "none"
160
+ }
161
+ }
162
+ }
163
+ }
164
+ }
package/src/components/form-elements/text-area.tokens.json ADDED
@@ -0,0 +1,136 @@
1
+ {
2
+ "govnl": {
3
+ "textarea": {
4
+ "font-family": {
5
+ "$type": "fontFamilies",
6
+ "$value": "{govnl.form-control.font-family}"
7
+ },
8
+ "font-size": {
9
+ "$type": "fontSizes",
10
+ "$value": "{govnl.form-control.font-size}"
11
+ },
12
+ "font-weight": {
13
+ "$type": "fontWeights",
14
+ "$value": "{govnl.form-control.font-weight}"
15
+ },
16
+ "line-height": {
17
+ "$type": "lineHeights",
18
+ "$value": "{govnl.form-control.line-height}"
19
+ },
20
+ "min-block-size": {
21
+ "$type": "dimension",
22
+ "$value": "{govnl.dimension.pointer-target.min-size}"
23
+ },
24
+ "padding-block-start": {
25
+ "$type": "dimension",
26
+ "$value": "{govnl.space.xs}"
27
+ },
28
+ "padding-inline-end": {
29
+ "$type": "dimension",
30
+ "$value": "{govnl.space.xs}"
31
+ },
32
+ "padding-block-end": {
33
+ "$type": "dimension",
34
+ "$value": "{govnl.space.xs}"
35
+ },
36
+ "padding-inline-start": {
37
+ "$type": "dimension",
38
+ "$value": "{govnl.space.xs}"
39
+ },
40
+ "border-radius": {
41
+ "$type": "borderRadius",
42
+ "$value": "{govnl.border.border-radius.sm}"
43
+ },
44
+ "border-width": {
45
+ "$type": "borderWidth",
46
+ "$value": "{govnl.border.border-width.sm}"
47
+ },
48
+ "error": {
49
+ "border-width": {
50
+ "$type": "borderWidth",
51
+ "$value": "{govnl.border.border-width.md}"
52
+ }
53
+ }
54
+ },
55
+ "text-area": {
56
+ "background-color": {
57
+ "$type": "color",
58
+ "$value": "{govnl.form-control.background-color}"
59
+ },
60
+ "border-color": {
61
+ "$type": "color",
62
+ "$value": "{govnl.form-control.border-color}"
63
+ },
64
+ "color": {
65
+ "$type": "color",
66
+ "$value": "{govnl.form-control.color}"
67
+ },
68
+ "hover": {
69
+ "background-color": {
70
+ "$type": "color",
71
+ "$value": "{govnl.form-control.hover.background-color}"
72
+ },
73
+ "border-color": {
74
+ "$type": "color",
75
+ "$value": "{govnl.form-control.hover.border-color}"
76
+ },
77
+ "color": {
78
+ "$type": "color",
79
+ "$value": "{govnl.form-control.hover.color}"
80
+ }
81
+ },
82
+ "focus": {
83
+ "background-color": {
84
+ "$type": "color",
85
+ "$value": "{govnl.form-control.focus.background-color}"
86
+ },
87
+ "border-color": {
88
+ "$type": "color",
89
+ "$value": "{govnl.form-control.focus.border-color}"
90
+ },
91
+ "color": {
92
+ "$type": "color",
93
+ "$value": "{govnl.form-control.focus.color}"
94
+ },
95
+ "outline-color": {
96
+ "$type": "color",
97
+ "$value": "{govnl.form-control.focus.outline-color}"
98
+ }
99
+ },
100
+ "error": {
101
+ "background-color": {
102
+ "$type": "color",
103
+ "$value": "{govnl.form-control.invalid.background-color}"
104
+ },
105
+ "border-color": {
106
+ "$type": "color",
107
+ "$value": "{govnl.form-control.invalid.border-color}"
108
+ },
109
+ "color": {
110
+ "$type": "color",
111
+ "$value": "{govnl.form-control.invalid.color}"
112
+ }
113
+ },
114
+ "read-only": {
115
+ "background-color": {
116
+ "$type": "color",
117
+ "$value": "{govnl.form-control.read-only.background-color}"
118
+ },
119
+ "border-color": {
120
+ "$type": "color",
121
+ "$value": "{govnl.form-control.read-only.border-color}"
122
+ },
123
+ "color": {
124
+ "$type": "color",
125
+ "$value": "{govnl.form-control.read-only.color}"
126
+ }
127
+ },
128
+ "placeholder": {
129
+ "color": {
130
+ "$type": "color",
131
+ "$value": "{govnl.form-control.placeholder.color}"
132
+ }
133
+ }
134
+ }
135
+ }
136
+ }