@conduction/theme 1.0.14 → 1.0.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 (44) hide show
  1. package/README.md +1 -0
  2. package/conduction-design-tokens/LICENSE.md +17 -0
  3. package/conduction-design-tokens/dist/design-tokens.css +294 -0
  4. package/conduction-design-tokens/dist/font.css +5 -0
  5. package/conduction-design-tokens/dist/index.css +7 -0
  6. package/conduction-design-tokens/dist/index.js +292 -0
  7. package/conduction-design-tokens/dist/index.json +5699 -0
  8. package/conduction-design-tokens/dist/index.less +291 -0
  9. package/conduction-design-tokens/dist/index.scss +291 -0
  10. package/conduction-design-tokens/dist/tokens.json +6098 -0
  11. package/conduction-design-tokens/package.json +40 -0
  12. package/conduction-design-tokens/src/brand/conduction/color.tokens.json +59 -0
  13. package/conduction-design-tokens/src/brand/conduction/font-size.tokens.json +17 -0
  14. package/conduction-design-tokens/src/brand/conduction/size.tokens.json +17 -0
  15. package/conduction-design-tokens/src/brand/conduction/typography.tokens.json +47 -0
  16. package/conduction-design-tokens/src/common/utrecht/action.tokens.json +9 -0
  17. package/conduction-design-tokens/src/common/utrecht/space.tokens.json +28 -0
  18. package/conduction-design-tokens/src/component/conduction/card.tokens.json +15 -0
  19. package/conduction-design-tokens/src/component/conduction/select.tokens.json +15 -0
  20. package/conduction-design-tokens/src/component/conduction/table.tokens.json +16 -0
  21. package/conduction-design-tokens/src/component/utrecht/alert.tokens.json +47 -0
  22. package/conduction-design-tokens/src/component/utrecht/blockquote.tokens.json +27 -0
  23. package/conduction-design-tokens/src/component/utrecht/button.tokens.json +152 -0
  24. package/conduction-design-tokens/src/component/utrecht/code.tokens.json +27 -0
  25. package/conduction-design-tokens/src/component/utrecht/document.tokens.json +12 -0
  26. package/conduction-design-tokens/src/component/utrecht/form-input.tokens.json +44 -0
  27. package/conduction-design-tokens/src/component/utrecht/heading.tokens.json +53 -0
  28. package/conduction-design-tokens/src/component/utrecht/icon.tokens.json +13 -0
  29. package/conduction-design-tokens/src/component/utrecht/link.tokens.json +33 -0
  30. package/conduction-design-tokens/src/component/utrecht/list.tokens.json +32 -0
  31. package/conduction-design-tokens/src/component/utrecht/page-footer.tokens.json +13 -0
  32. package/conduction-design-tokens/src/component/utrecht/page-header.tokens.json +10 -0
  33. package/conduction-design-tokens/src/component/utrecht/page.tokens.json +11 -0
  34. package/conduction-design-tokens/src/component/utrecht/paragraph.tokens.json +25 -0
  35. package/conduction-design-tokens/src/component/utrecht/table.tokens.json +60 -0
  36. package/conduction-design-tokens/src/component/utrecht/textbox.tokens.json +44 -0
  37. package/conduction-design-tokens/src/config.json +7 -0
  38. package/conduction-design-tokens/src/font/Aldritch.woff2 +0 -0
  39. package/conduction-design-tokens/src/font.scss +6 -0
  40. package/conduction-design-tokens/src/index.scss +8 -0
  41. package/conduction-design-tokens/style-dictionary.config.js +6 -0
  42. package/municipalities/xxllnc-design-tokens/LICENSE.md +17 -0
  43. package/package.json +1 -1
  44. package/theme.css +51 -39
package/README.md CHANGED
@@ -4,6 +4,7 @@ Conduction's design tokens theme
4
4
  ## Changelog
5
5
 
6
6
  - **Version 1**
7
+ - 1.0.15: added conduction theme as JSON format.
7
8
  - 1.0.14: added xxllnc theme as JSON format.
8
9
  - 1.0.13: added secondary button styling for all themes.
9
10
  - 1.0.12: implemented Select Single styling in xxllnc and Leiden
package/conduction-design-tokens/LICENSE.md ADDED
@@ -0,0 +1,17 @@
1
+ # Auteursrecht Conduction
2
+
3
+ Copyright (c) 2023 Conduction
4
+
5
+ ## Logo en huisstijl
6
+
7
+ Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Conduction.
8
+
9
+ Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Conduction gebruiken en je ontwerpt een eigen huisstijl.
10
+
11
+ ## Lettertype
12
+
13
+ Lettertypes die worden gebruikt voor de huisstijl zijn niet allemaal gratis en open source. Let op dat bij gebruik van die bijgeleverde lettertypes je een (betaalde) licentie regelt. Pas anders de configuratie aan om minder of andere lettertypes te gebruiken.
14
+
15
+ ## Toestemming
16
+
17
+ Wanneer je het logo of de huisstijl wilt gebruiken kun je voor toestemming contact opnemen met Conduction.
package/conduction-design-tokens/dist/design-tokens.css ADDED
@@ -0,0 +1,294 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 09 Aug 2023 12:36:59 GMT
4
+ */
5
+
6
+ .conduction-theme {
7
+ --utrecht-textbox-font-size: 15px;
8
+ --utrecht-textbox-border-radius: 3px;
9
+ --utrecht-paragraph-margin-block-end: 0;
10
+ --utrecht-paragraph-margin-block-start: 0;
11
+ --utrecht-paragraph-line-height: 1.5em;
12
+ --utrecht-page-max-inline-size: 1140px;
13
+ --utrecht-page-footer-background-image: unset;
14
+ --utrecht-unordered-list-item-padding-inline-start: 1ch;
15
+ --utrecht-unordered-list-padding-inline-start: 2ch;
16
+ --utrecht-unordered-list-margin-block-end: 0;
17
+ --utrecht-ordered-list-item-padding-inline-start: 1ch;
18
+ --utrecht-link-hover-text-decoration: underline;
19
+ --utrecht-link-text-decoration-thickness: 0;
20
+ --utrecht-link-text-decoration-color: unset;
21
+ --utrecht-link-text-decoration: none;
22
+ --utrecht-form-input-font-size: 15px;
23
+ --utrecht-form-input-border-radius: 3px;
24
+ --utrecht-code-block-margin-inline-end: 0;
25
+ --utrecht-code-block-margin-inline-start: 0;
26
+ --utrecht-code-font-size: inherit;
27
+ --utrecht-button-primary-action-font-weight: inherit;
28
+ --utrecht-button-primary-action-border-width: 0;
29
+ --utrecht-button-font-weight: inherit;
30
+ --utrecht-button-font-size: inherit;
31
+ --utrecht-button-border-width: 0;
32
+ --utrecht-button-border-radius: 3px;
33
+ --utrecht-table-header-cell-text-transform: unset;
34
+ --utrecht-table-margin-block-end: 0;
35
+ --utrecht-table-header-text-transform: unset;
36
+ --utrecht-card-border-width: unset;
37
+ --utrecht-card-border-radius: 16px;
38
+ --utrecht-action-submit-cursor: pointer;
39
+ --utrecht-action-disabled-cursor: not-allowed;
40
+ --utrecht-action-busy-cursor: wait;
41
+ --conduction-input-select-padding-block-start: 0;
42
+ --conduction-input-select-padding-block-end: 0;
43
+ --conduction-input-select-border-focus: unset;
44
+ --conduction-typography-font-weight-light: 100;
45
+ --conduction-typography-font-weight-normal: 400;
46
+ --conduction-typography-font-weight-bold: 700;
47
+ --conduction-typography-monospace-font-family: Monospace, "Lucida Console";
48
+ --conduction-typography-sans-serif-font-family: "Noto Sans", Arial, sans-serif;
49
+ --conduction-typography-aldritch-font-family: "Aldritch", "Noto Sans", Arial, sans-serif;
50
+ --conduction-size-4xl: 96px;
51
+ --conduction-size-3xl: 72px;
52
+ --conduction-size-2xl: 48px;
53
+ --conduction-size-xl: 32px;
54
+ --conduction-size-lg: 24px;
55
+ --conduction-size-md: 18px;
56
+ --conduction-size-sm: 14px;
57
+ --conduction-size-xs: 8px;
58
+ --conduction-size-2xs: 4px;
59
+ --conduction-size-3xs: 2px;
60
+ --conduction-size-4xs: 1px;
61
+ --conduction-font-size-4xl: 58px;
62
+ --conduction-font-size-3xl: 48px;
63
+ --conduction-font-size-2xl: 32px;
64
+ --conduction-font-size-xl: 24px;
65
+ --conduction-font-size-lg: 20px;
66
+ --conduction-font-size-md: 18px;
67
+ --conduction-font-size-sm: 14px;
68
+ --conduction-font-size-xs: 12px;
69
+ --conduction-font-size-2xs: 10px;
70
+ --conduction-font-size-3xs: 8px;
71
+ --conduction-font-size-4xs: 5px;
72
+ --conduction-color-black-0: #000000; /* Base/Black */
73
+ --conduction-color-white-100: #ffffff; /* Base/White */
74
+ --conduction-color-white-98: #fafafa;
75
+ --conduction-color-lightgrey-96: #f5f5f5; /* Base/LightGrey */
76
+ --conduction-color-grey-97: #f7f7f7;
77
+ --conduction-color-grey-82: #d1d1d1;
78
+ --conduction-color-grey-50: #808080; /* Base/Grey */
79
+ --conduction-color-grey-48: #7a7a7a;
80
+ --conduction-color-grey-29: #4a4a4a;
81
+ --conduction-color-alert-info-background: #cce5ff;
82
+ --conduction-color-alert-info: #004085;
83
+ --conduction-color-alert-succes-background: #d4edda;
84
+ --conduction-color-alert-succes: #155724;
85
+ --conduction-color-succes: #28a745;
86
+ --conduction-color-alert-warning-background: #fff3cd;
87
+ --conduction-color-alert-warning: #856404;
88
+ --conduction-color-warning: #ffc107;
89
+ --conduction-color-alert-error-background: #f8d7da;
90
+ --conduction-color-alert-error: #721c24;
91
+ --conduction-color-error: #dc3545;
92
+ --conduction-color-primary-hover: #2e5ed9;
93
+ --conduction-color-primary: #4376fc;
94
+ --utrecht-textbox-focus-background-color: var(--conduction-color-white-100);
95
+ --utrecht-textbox-placeholder-color: var(--conduction-color-grey-50);
96
+ --utrecht-textbox-padding-inline-start: var(--conduction-size-sm);
97
+ --utrecht-textbox-padding-inline-end: var(--conduction-size-sm);
98
+ --utrecht-textbox-padding-block-start: var(--conduction-size-xs);
99
+ --utrecht-textbox-padding-block-end: var(--conduction-size-xs);
100
+ --utrecht-textbox-font-family: var(--conduction-typography-sans-serif-font-family);
101
+ --utrecht-textbox-color: var(--conduction-color-grey-29);
102
+ --utrecht-textbox-border-width: var(--conduction-size-4xs);
103
+ --utrecht-textbox-border-color: var(--conduction-color-grey-48);
104
+ --utrecht-textbox-background-color: var(--conduction-color-white-100);
105
+ --utrecht-paragraph-font-weight: var(--conduction-typography-font-weight-normal);
106
+ --utrecht-paragraph-font-size: var(--conduction-font-size-md);
107
+ --utrecht-paragraph-font-family: var(--conduction-typography-sans-serif-font-family);
108
+ --utrecht-page-margin-inline-end: var(--conduction-size-lg);
109
+ --utrecht-page-margin-inline-start: var(--conduction-size-lg);
110
+ --utrecht-page-header-padding-block-end: var(--conduction-size-sm);
111
+ --utrecht-page-header-padding-block-start: var(--conduction-size-sm);
112
+ --utrecht-page-header-color: var(--conduction-color-white-100);
113
+ --utrecht-page-header-background-color: var(--conduction-color-primary);
114
+ --utrecht-page-footer-padding-block-start: var(--conduction-size-2xl);
115
+ --utrecht-page-footer-padding-block-end: var(--conduction-size-2xl);
116
+ --utrecht-page-footer-padding-inline-start: var(--conduction-size-sm);
117
+ --utrecht-page-footer-padding-inline-end: var(--conduction-size-sm);
118
+ --utrecht-page-footer-color: var(--conduction-color-black-0);
119
+ --utrecht-page-footer-background-color: var(--conduction-color-lightgrey-96);
120
+ --utrecht-unordered-list-marker-color: var(--conduction-color-primary);
121
+ --utrecht-unordered-list-item-margin-block-end: var(--conduction-size-xs);
122
+ --utrecht-unordered-list-item-margin-block-start: var(--conduction-size-xs);
123
+ --utrecht-unordered-list-margin-block-start: var(--conduction-size-md);
124
+ --utrecht-ordered-list-item-margin-block-end: var(--conduction-size-2xs);
125
+ --utrecht-ordered-list-item-margin-block-start: var(--conduction-size-2xs);
126
+ --utrecht-ordered-list-padding-inline-start: var(--conduction-size-xl);
127
+ --utrecht-ordered-list-margin-block-end: var(--conduction-size-sm);
128
+ --utrecht-ordered-list-margin-block-start: var(--conduction-size-sm);
129
+ --utrecht-link-icon-size: var(--conduction-size-md);
130
+ --utrecht-link-visited-color: var(--conduction-color-primary);
131
+ --utrecht-link-hover-text-decoration-thickness: var(--conduction-size-4xs);
132
+ --utrecht-link-hover-color: var(--conduction-color-primary-hover);
133
+ --utrecht-link-text-underline-offset: var(--conduction-size-3xs);
134
+ --utrecht-link-color: var(--conduction-color-primary);
135
+ --utrecht-icon-gap: var(--conduction-size-xs);
136
+ --utrecht-heading-5-margin-block-start: var(--conduction-size-md);
137
+ --utrecht-heading-5-margin-block-end: var(--conduction-size-lg);
138
+ --utrecht-heading-5-font-weight: var(--conduction-typography-font-weight-light);
139
+ --utrecht-heading-5-font-size: var(--conduction-font-size-md);
140
+ --utrecht-heading-5-font-family: var(--conduction-typography-aldritch-font-family);
141
+ --utrecht-heading-4-margin-block-start: var(--conduction-size-md);
142
+ --utrecht-heading-4-margin-block-end: var(--conduction-size-lg);
143
+ --utrecht-heading-4-font-weight: var(--conduction-typography-font-weight-normal);
144
+ --utrecht-heading-4-font-size: var(--conduction-font-size-lg);
145
+ --utrecht-heading-4-font-family: var(--conduction-typography-aldritch-font-family);
146
+ --utrecht-heading-3-margin-block-start: var(--conduction-size-md);
147
+ --utrecht-heading-3-margin-block-end: var(--conduction-size-xl);
148
+ --utrecht-heading-3-font-weight: var(--conduction-typography-font-weight-normal);
149
+ --utrecht-heading-3-font-size: var(--conduction-font-size-xl);
150
+ --utrecht-heading-3-font-family: var(--conduction-typography-aldritch-font-family);
151
+ --utrecht-heading-2-margin-block-start: var(--conduction-size-md);
152
+ --utrecht-heading-2-margin-block-end: var(--conduction-size-2xl);
153
+ --utrecht-heading-2-font-weight: var(--conduction-typography-font-weight-bold);
154
+ --utrecht-heading-2-font-size: var(--conduction-font-size-2xl);
155
+ --utrecht-heading-2-font-family: var(--conduction-typography-aldritch-font-family);
156
+ --utrecht-heading-1-margin-block-start: var(--conduction-size-md);
157
+ --utrecht-heading-1-margin-block-end: var(--conduction-size-2xl);
158
+ --utrecht-heading-1-font-weight: var(--conduction-typography-font-weight-bold);
159
+ --utrecht-heading-1-font-size: var(--conduction-font-size-3xl);
160
+ --utrecht-heading-1-font-family: var(--conduction-typography-aldritch-font-family);
161
+ --utrecht-form-input-focus-background-color: var(--conduction-color-white-100);
162
+ --utrecht-form-input-placeholder-color: var(--conduction-color-grey-50);
163
+ --utrecht-form-input-padding-inline-start: var(--conduction-size-sm);
164
+ --utrecht-form-input-padding-inline-end: var(--conduction-size-sm);
165
+ --utrecht-form-input-padding-block-start: var(--conduction-size-xs);
166
+ --utrecht-form-input-padding-block-end: var(--conduction-size-xs);
167
+ --utrecht-form-input-font-family: var(--conduction-typography-sans-serif-font-family);
168
+ --utrecht-form-input-color: var(--conduction-color-grey-29);
169
+ --utrecht-form-input-border-width: var(--conduction-size-4xs);
170
+ --utrecht-form-input-border-color: var(--conduction-color-grey-48);
171
+ --utrecht-form-input-background-color: var(--conduction-color-white-100);
172
+ --utrecht-document-font-size: var(--conduction-font-size-md);
173
+ --utrecht-document-font-family: var(--conduction-typography-sans-serif-font-family);
174
+ --utrecht-document-color: var(--conduction-color-black-0);
175
+ --utrecht-document-background-color: var(--conduction-color-white-98);
176
+ --utrecht-code-block-padding-inline-end: var(--conduction-size-md);
177
+ --utrecht-code-block-padding-inline-start: var(--conduction-size-md);
178
+ --utrecht-code-block-padding-block-end: var(--conduction-size-md);
179
+ --utrecht-code-block-padding-block-start: var(--conduction-size-md);
180
+ --utrecht-code-block-margin-block-end: var(--conduction-size-md);
181
+ --utrecht-code-block-margin-block-start: var(--conduction-size-md);
182
+ --utrecht-code-block-line-height: var(--conduction-size-lg);
183
+ --utrecht-code-block-font-size: var(--conduction-font-size-md);
184
+ --utrecht-code-block-font-family: var(--conduction-typography-monospace-font-family);
185
+ --utrecht-code-block-color: var(--conduction-color-black-0);
186
+ --utrecht-code-block-background-color: var(--conduction-color-lightgrey-96);
187
+ --utrecht-code-font-family: var(--conduction-typography-monospace-font-family);
188
+ --utrecht-code-color: var(--conduction-color-black-0);
189
+ --utrecht-code-background-color: var(--conduction-color-lightgrey-96);
190
+ --utrecht-button-secondary-action-hover-color: var(--conduction-color-primary-hover);
191
+ --utrecht-button-secondary-action-hover-border-color: var(--conduction-color-primary-hover);
192
+ --utrecht-button-secondary-action-hover-background-color: var(--conduction-color-white-100);
193
+ --utrecht-button-secondary-action-font-weight: var(--conduction-typography-font-weight-normal);
194
+ --utrecht-button-secondary-action-color: var(--conduction-color-primary);
195
+ --utrecht-button-secondary-action-border-width: var(--conduction-size-3xs);
196
+ --utrecht-button-secondary-action-border-color: var(--conduction-color-primary);
197
+ --utrecht-button-secondary-action-background-color: var(--conduction-color-white-100);
198
+ --utrecht-button-primary-action-hover-color: var(--conduction-color-white-100);
199
+ --utrecht-button-primary-action-hover-background-color: var(--conduction-color-primary);
200
+ --utrecht-button-primary-action-color: var(--conduction-color-white-100);
201
+ --utrecht-button-primary-action-background-color: var(--conduction-color-primary);
202
+ --utrecht-button-hover-color: var(--conduction-color-white-100);
203
+ --utrecht-button-hover-background-color: var(--conduction-color-primary-hover);
204
+ --utrecht-button-icon-gap: var(--conduction-size-xs);
205
+ --utrecht-button-padding-inline-end: var(--conduction-size-sm);
206
+ --utrecht-button-padding-inline-start: var(--conduction-size-sm);
207
+ --utrecht-button-padding-block-end: var(--conduction-size-2xs);
208
+ --utrecht-button-padding-block-start: var(--conduction-size-2xs);
209
+ --utrecht-button-font-family: var(--conduction-typography-sans-serif-font-family);
210
+ --utrecht-button-color: var(--conduction-color-white-100);
211
+ --utrecht-button-background-color: var(--conduction-color-primary);
212
+ --utrecht-blockquote-content-font-size: var(--conduction-font-size-md);
213
+ --utrecht-blockquote-content-color: var(--conduction-color-black-0);
214
+ --utrecht-blockquote-margin-inline-end: var(--conduction-size-xl);
215
+ --utrecht-blockquote-margin-inline-start: var(--conduction-size-xl);
216
+ --utrecht-alert-icon-ok-color: var(--conduction-color-alert-succes);
217
+ --utrecht-alert-icon-warning-color: var(--conduction-color-alert-warning);
218
+ --utrecht-alert-icon-gap: var(--conduction-size-xs);
219
+ --utrecht-alert-icon-error-color: var(--conduction-color-alert-error);
220
+ --utrecht-alert-icon-color: var(--conduction-color-alert-info);
221
+ --utrecht-alert-ok-color: var(--conduction-color-alert-succes);
222
+ --utrecht-alert-ok-background-color: var(--conduction-color-alert-succes-background);
223
+ --utrecht-alert-error-color: var(--conduction-color-alert-error);
224
+ --utrecht-alert-error-background-color: var(--conduction-color-alert-error-background);
225
+ --utrecht-alert-warning-color: var(--conduction-color-alert-warning);
226
+ --utrecht-alert-warning-background-color: var(--conduction-color-alert-warning-background);
227
+ --utrecht-alert-padding-inline-end: var(--conduction-size-lg);
228
+ --utrecht-alert-padding-inline-start: var(--conduction-size-lg);
229
+ --utrecht-alert-padding-block-end: var(--conduction-size-lg);
230
+ --utrecht-alert-padding-block-start: var(--conduction-size-lg);
231
+ --utrecht-alert-color: var(--conduction-color-alert-info);
232
+ --utrecht-alert-background-color: var(--conduction-color-alert-info-background);
233
+ --utrecht-table-cell-padding-inline-start: var(--conduction-size-md);
234
+ --utrecht-table-cell-padding-inline-end: var(--conduction-size-md);
235
+ --utrecht-table-cell-padding-block-start: var(--conduction-size-md);
236
+ --utrecht-table-cell-padding-block-end: var(--conduction-size-md);
237
+ --utrecht-table-header-cell-font-weight: var(--conduction-typography-font-weight-bold);
238
+ --utrecht-table-margin-block-start: var(--conduction-size-md);
239
+ --utrecht-table-row-border-block-end-width: var(--conduction-size-4xs);
240
+ --utrecht-table-row-border-block-end-color: var(--conduction-color-grey-82);
241
+ --utrecht-table-row-hover-background-color: var(--conduction-color-grey-97);
242
+ --utrecht-table-header-font-weight: var(--conduction-typography-font-weight-bold);
243
+ --utrecht-table-header-border-block-end-width: var(--conduction-size-4xs);
244
+ --utrecht-table-header-border-block-end-color: var(--conduction-color-grey-82);
245
+ --utrecht-table-background-color: var(--conduction-color-white-100);
246
+ --utrecht-card-padding-block-start: var(--conduction-size-md);
247
+ --utrecht-card-padding-block-end: var(--conduction-size-md);
248
+ --utrecht-card-padding-inline-start: var(--conduction-size-md);
249
+ --utrecht-card-padding-inline-end: var(--conduction-size-md);
250
+ --utrecht-card-color: var(--conduction-color-black-0);
251
+ --utrecht-card-background-color: var(--conduction-color-white-100);
252
+ --utrecht-space-inline-3xl: var(--conduction-size-3xl);
253
+ --utrecht-space-inline-2xl: var(--conduction-size-2xl);
254
+ --utrecht-space-inline-xl: var(--conduction-size-xl);
255
+ --utrecht-space-inline-lg: var(--conduction-size-lg);
256
+ --utrecht-space-inline-md: var(--conduction-size-md);
257
+ --utrecht-space-inline-sm: var(--conduction-size-sm);
258
+ --utrecht-space-inline-xs: var(--conduction-size-xs);
259
+ --utrecht-space-inline-2xs: var(--conduction-size-2xs);
260
+ --utrecht-space-inline-3xs: var(--conduction-size-3xs);
261
+ --utrecht-space-block-3xl: var(--conduction-size-3xl);
262
+ --utrecht-space-block-2xl: var(--conduction-size-2xl);
263
+ --utrecht-space-block-xl: var(--conduction-size-xl);
264
+ --utrecht-space-block-lg: var(--conduction-size-lg);
265
+ --utrecht-space-block-md: var(--conduction-size-md);
266
+ --utrecht-space-block-sm: var(--conduction-size-sm);
267
+ --utrecht-space-block-xs: var(--conduction-size-xs);
268
+ --utrecht-space-block-2xs: var(--conduction-size-2xs);
269
+ --utrecht-space-block-3xs: var(--conduction-size-3xs);
270
+ --conduction-input-select-invalid-border-color: var(--conduction-color-error);
271
+ --conduction-input-select-border-radius: var(--utrecht-form-input-border-radius);
272
+ --conduction-input-select-border: var(--conduction-size-4xs) solid var(--conduction-color-grey-48);
273
+ --conduction-input-select-background-color: var(--conduction-color-white-100);
274
+ --conduction-typography-scale-4xl: var(--conduction-font-size-4xl);
275
+ --conduction-typography-scale-3xl: var(--conduction-font-size-3xl);
276
+ --conduction-typography-scale-2xl: var(--conduction-font-size-2xl);
277
+ --conduction-typography-scale-xl: var(--conduction-font-size-xl);
278
+ --conduction-typography-scale-lg: var(--conduction-font-size-lg);
279
+ --conduction-typography-scale-md: var(--conduction-font-size-md);
280
+ --conduction-typography-scale-sm: var(--conduction-font-size-sm);
281
+ --conduction-typography-scale-xs: var(--conduction-font-size-xs);
282
+ --conduction-typography-scale-2xs: var(--conduction-font-size-2xs);
283
+ --conduction-typography-scale-3xs: var(--conduction-font-size-3xs);
284
+ --conduction-typography-scale-4xs: var(--conduction-font-size-4xs);
285
+ --conduction-color-info: var(--conduction-color-primary);
286
+ --utrecht-paragraph-color: var(--utrecht-document-color);
287
+ --utrecht-unordered-list-font-size: var(--utrecht-document-font-size);
288
+ --utrecht-ordered-list-font-size: var(--utrecht-document-font-size);
289
+ --utrecht-table-header-cell-color: var(--utrecht-document-color);
290
+ --utrecht-table-header-cell-font-size: var(--utrecht-document-font-size);
291
+ --utrecht-table-font-size: var(--utrecht-document-font-size);
292
+ --utrecht-table-font-family: var(--utrecht-document-font-family);
293
+ --utrecht-table-header-color: var(--utrecht-document-color);
294
+ }
package/conduction-design-tokens/dist/font.css ADDED
@@ -0,0 +1,5 @@
1
+ /* Place any @font-face definitions here */
2
+ @font-face {
3
+ font-family: "Aldritch";
4
+ src: url("../src/font/Aldritch.woff2") format("woff2");
5
+ }
package/conduction-design-tokens/dist/index.css ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * @license SEE LICENSE.md
3
+ * Copyright (c) 2021 NL Design System Community
4
+ * All rights reserved
5
+ */
6
+ @import "./design-tokens.css";
7
+ @import "./font.css";
package/conduction-design-tokens/dist/index.js ADDED
@@ -0,0 +1,292 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 09 Aug 2023 12:36:59 GMT
4
+ */
5
+
6
+ export const conductionColorPrimary = "#4376fc";
7
+ export const conductionColorPrimaryHover = "#2e5ed9";
8
+ export const conductionColorError = "#dc3545";
9
+ export const conductionColorAlertError = "#721c24";
10
+ export const conductionColorAlertErrorBackground = "#f8d7da";
11
+ export const conductionColorWarning = "#ffc107";
12
+ export const conductionColorAlertWarning = "#856404";
13
+ export const conductionColorAlertWarningBackground = "#fff3cd";
14
+ export const conductionColorSucces = "#28a745";
15
+ export const conductionColorAlertSucces = "#155724";
16
+ export const conductionColorAlertSuccesBackground = "#d4edda";
17
+ export const conductionColorInfo = "#4376fc";
18
+ export const conductionColorAlertInfo = "#004085";
19
+ export const conductionColorAlertInfoBackground = "#cce5ff";
20
+ export const conductionColorGrey29 = "#4a4a4a";
21
+ export const conductionColorGrey48 = "#7a7a7a";
22
+ export const conductionColorGrey50 = "#808080"; // Base/Grey
23
+ export const conductionColorGrey82 = "#d1d1d1";
24
+ export const conductionColorGrey97 = "#f7f7f7";
25
+ export const conductionColorLightgrey96 = "#f5f5f5"; // Base/LightGrey
26
+ export const conductionColorWhite98 = "#fafafa";
27
+ export const conductionColorWhite100 = "#ffffff"; // Base/White
28
+ export const conductionColorBlack0 = "#000000"; // Base/Black
29
+ export const conductionFontSize4xs = "5px";
30
+ export const conductionFontSize3xs = "8px";
31
+ export const conductionFontSize2xs = "10px";
32
+ export const conductionFontSizeXs = "12px";
33
+ export const conductionFontSizeSm = "14px";
34
+ export const conductionFontSizeMd = "18px";
35
+ export const conductionFontSizeLg = "20px";
36
+ export const conductionFontSizeXl = "24px";
37
+ export const conductionFontSize2xl = "32px";
38
+ export const conductionFontSize3xl = "48px";
39
+ export const conductionFontSize4xl = "58px";
40
+ export const conductionSize4xs = "1px";
41
+ export const conductionSize3xs = "2px";
42
+ export const conductionSize2xs = "4px";
43
+ export const conductionSizeXs = "8px";
44
+ export const conductionSizeSm = "14px";
45
+ export const conductionSizeMd = "18px";
46
+ export const conductionSizeLg = "24px";
47
+ export const conductionSizeXl = "32px";
48
+ export const conductionSize2xl = "48px";
49
+ export const conductionSize3xl = "72px";
50
+ export const conductionSize4xl = "96px";
51
+ export const conductionTypographyAldritchFontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
52
+ export const conductionTypographySansSerifFontFamily = "\"Noto Sans\", Arial, sans-serif";
53
+ export const conductionTypographyMonospaceFontFamily = "Monospace, \"Lucida Console\"";
54
+ export const conductionTypographyFontWeightBold = "700";
55
+ export const conductionTypographyFontWeightNormal = "400";
56
+ export const conductionTypographyFontWeightLight = "100";
57
+ export const conductionTypographyScale4xs = "5px";
58
+ export const conductionTypographyScale3xs = "8px";
59
+ export const conductionTypographyScale2xs = "10px";
60
+ export const conductionTypographyScaleXs = "12px";
61
+ export const conductionTypographyScaleSm = "14px";
62
+ export const conductionTypographyScaleMd = "18px";
63
+ export const conductionTypographyScaleLg = "20px";
64
+ export const conductionTypographyScaleXl = "24px";
65
+ export const conductionTypographyScale2xl = "32px";
66
+ export const conductionTypographyScale3xl = "48px";
67
+ export const conductionTypographyScale4xl = "58px";
68
+ export const conductionInputSelectBackgroundColor = "#ffffff";
69
+ export const conductionInputSelectBorder = "1px solid #7a7a7a";
70
+ export const conductionInputSelectBorderFocus = "unset";
71
+ export const conductionInputSelectBorderRadius = "3px";
72
+ export const conductionInputSelectInvalidBorderColor = "#dc3545";
73
+ export const conductionInputSelectPaddingBlockEnd = 0;
74
+ export const conductionInputSelectPaddingBlockStart = 0;
75
+ export const utrechtActionBusyCursor = "wait";
76
+ export const utrechtActionDisabledCursor = "not-allowed";
77
+ export const utrechtActionSubmitCursor = "pointer";
78
+ export const utrechtSpaceBlock3xs = "2px";
79
+ export const utrechtSpaceBlock2xs = "4px";
80
+ export const utrechtSpaceBlockXs = "8px";
81
+ export const utrechtSpaceBlockSm = "14px";
82
+ export const utrechtSpaceBlockMd = "18px";
83
+ export const utrechtSpaceBlockLg = "24px";
84
+ export const utrechtSpaceBlockXl = "32px";
85
+ export const utrechtSpaceBlock2xl = "48px";
86
+ export const utrechtSpaceBlock3xl = "72px";
87
+ export const utrechtSpaceInline3xs = "2px";
88
+ export const utrechtSpaceInline2xs = "4px";
89
+ export const utrechtSpaceInlineXs = "8px";
90
+ export const utrechtSpaceInlineSm = "14px";
91
+ export const utrechtSpaceInlineMd = "18px";
92
+ export const utrechtSpaceInlineLg = "24px";
93
+ export const utrechtSpaceInlineXl = "32px";
94
+ export const utrechtSpaceInline2xl = "48px";
95
+ export const utrechtSpaceInline3xl = "72px";
96
+ export const utrechtCardBackgroundColor = "#ffffff";
97
+ export const utrechtCardBorderRadius = "16px";
98
+ export const utrechtCardBorderWidth = "unset";
99
+ export const utrechtCardColor = "#000000";
100
+ export const utrechtCardPaddingInlineEnd = "18px";
101
+ export const utrechtCardPaddingInlineStart = "18px";
102
+ export const utrechtCardPaddingBlockEnd = "18px";
103
+ export const utrechtCardPaddingBlockStart = "18px";
104
+ export const utrechtTableBackgroundColor = "#ffffff";
105
+ export const utrechtTableHeaderBorderBlockEndColor = "#d1d1d1";
106
+ export const utrechtTableHeaderBorderBlockEndWidth = "1px";
107
+ export const utrechtTableHeaderFontWeight = "700";
108
+ export const utrechtTableHeaderColor = "#000000";
109
+ export const utrechtTableHeaderTextTransform = "unset";
110
+ export const utrechtTableRowHoverBackgroundColor = "#f7f7f7";
111
+ export const utrechtTableRowBorderBlockEndColor = "#d1d1d1";
112
+ export const utrechtTableRowBorderBlockEndWidth = "1px";
113
+ export const utrechtTableFontFamily = "\"Noto Sans\", Arial, sans-serif";
114
+ export const utrechtTableFontSize = "18px";
115
+ export const utrechtTableMarginBlockEnd = 0;
116
+ export const utrechtTableMarginBlockStart = "18px";
117
+ export const utrechtTableHeaderCellFontSize = "18px";
118
+ export const utrechtTableHeaderCellFontWeight = "700";
119
+ export const utrechtTableHeaderCellColor = "#000000";
120
+ export const utrechtTableHeaderCellTextTransform = "unset";
121
+ export const utrechtTableCellPaddingBlockEnd = "18px";
122
+ export const utrechtTableCellPaddingBlockStart = "18px";
123
+ export const utrechtTableCellPaddingInlineEnd = "18px";
124
+ export const utrechtTableCellPaddingInlineStart = "18px";
125
+ export const utrechtAlertBackgroundColor = "#cce5ff";
126
+ export const utrechtAlertColor = "#004085";
127
+ export const utrechtAlertPaddingBlockStart = "24px";
128
+ export const utrechtAlertPaddingBlockEnd = "24px";
129
+ export const utrechtAlertPaddingInlineStart = "24px";
130
+ export const utrechtAlertPaddingInlineEnd = "24px";
131
+ export const utrechtAlertWarningBackgroundColor = "#fff3cd";
132
+ export const utrechtAlertWarningColor = "#856404";
133
+ export const utrechtAlertErrorBackgroundColor = "#f8d7da";
134
+ export const utrechtAlertErrorColor = "#721c24";
135
+ export const utrechtAlertOkBackgroundColor = "#d4edda";
136
+ export const utrechtAlertOkColor = "#155724";
137
+ export const utrechtAlertIconColor = "#004085";
138
+ export const utrechtAlertIconErrorColor = "#721c24";
139
+ export const utrechtAlertIconGap = "8px";
140
+ export const utrechtAlertIconWarningColor = "#856404";
141
+ export const utrechtAlertIconOkColor = "#155724";
142
+ export const utrechtBlockquoteMarginInlineStart = "32px";
143
+ export const utrechtBlockquoteMarginInlineEnd = "32px";
144
+ export const utrechtBlockquoteContentColor = "#000000";
145
+ export const utrechtBlockquoteContentFontSize = "18px";
146
+ export const utrechtButtonBackgroundColor = "#4376fc";
147
+ export const utrechtButtonBorderRadius = "3px";
148
+ export const utrechtButtonBorderWidth = 0;
149
+ export const utrechtButtonColor = "#ffffff";
150
+ export const utrechtButtonFontFamily = "\"Noto Sans\", Arial, sans-serif";
151
+ export const utrechtButtonFontSize = "inherit";
152
+ export const utrechtButtonFontWeight = "inherit";
153
+ export const utrechtButtonPaddingBlockStart = "4px";
154
+ export const utrechtButtonPaddingBlockEnd = "4px";
155
+ export const utrechtButtonPaddingInlineStart = "14px";
156
+ export const utrechtButtonPaddingInlineEnd = "14px";
157
+ export const utrechtButtonIconGap = "8px";
158
+ export const utrechtButtonHoverBackgroundColor = "#2e5ed9";
159
+ export const utrechtButtonHoverColor = "#ffffff";
160
+ export const utrechtButtonPrimaryActionBackgroundColor = "#4376fc";
161
+ export const utrechtButtonPrimaryActionBorderWidth = 0;
162
+ export const utrechtButtonPrimaryActionColor = "#ffffff";
163
+ export const utrechtButtonPrimaryActionFontWeight = "inherit";
164
+ export const utrechtButtonPrimaryActionHoverBackgroundColor = "#4376fc";
165
+ export const utrechtButtonPrimaryActionHoverColor = "#ffffff";
166
+ export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
167
+ export const utrechtButtonSecondaryActionBorderColor = "#4376fc";
168
+ export const utrechtButtonSecondaryActionBorderWidth = "2px";
169
+ export const utrechtButtonSecondaryActionColor = "#4376fc";
170
+ export const utrechtButtonSecondaryActionFontWeight = "400";
171
+ export const utrechtButtonSecondaryActionHoverBackgroundColor = "#ffffff";
172
+ export const utrechtButtonSecondaryActionHoverBorderColor = "#2e5ed9";
173
+ export const utrechtButtonSecondaryActionHoverColor = "#2e5ed9";
174
+ export const utrechtCodeBackgroundColor = "#f5f5f5";
175
+ export const utrechtCodeColor = "#000000";
176
+ export const utrechtCodeFontFamily = "Monospace, \"Lucida Console\"";
177
+ export const utrechtCodeFontSize = "inherit";
178
+ export const utrechtCodeBlockBackgroundColor = "#f5f5f5";
179
+ export const utrechtCodeBlockColor = "#000000";
180
+ export const utrechtCodeBlockFontFamily = "Monospace, \"Lucida Console\"";
181
+ export const utrechtCodeBlockFontSize = "18px";
182
+ export const utrechtCodeBlockLineHeight = "24px";
183
+ export const utrechtCodeBlockMarginBlockStart = "18px";
184
+ export const utrechtCodeBlockMarginBlockEnd = "18px";
185
+ export const utrechtCodeBlockMarginInlineStart = 0;
186
+ export const utrechtCodeBlockMarginInlineEnd = 0;
187
+ export const utrechtCodeBlockPaddingBlockStart = "18px";
188
+ export const utrechtCodeBlockPaddingBlockEnd = "18px";
189
+ export const utrechtCodeBlockPaddingInlineStart = "18px";
190
+ export const utrechtCodeBlockPaddingInlineEnd = "18px";
191
+ export const utrechtDocumentBackgroundColor = "#fafafa";
192
+ export const utrechtDocumentColor = "#000000";
193
+ export const utrechtDocumentFontFamily = "\"Noto Sans\", Arial, sans-serif";
194
+ export const utrechtDocumentFontSize = "18px";
195
+ export const utrechtFormInputBackgroundColor = "#ffffff";
196
+ export const utrechtFormInputBorderColor = "#7a7a7a";
197
+ export const utrechtFormInputBorderRadius = "3px";
198
+ export const utrechtFormInputBorderWidth = "1px";
199
+ export const utrechtFormInputColor = "#4a4a4a";
200
+ export const utrechtFormInputFontFamily = "\"Noto Sans\", Arial, sans-serif";
201
+ export const utrechtFormInputFontSize = "15px";
202
+ export const utrechtFormInputPaddingBlockEnd = "8px";
203
+ export const utrechtFormInputPaddingBlockStart = "8px";
204
+ export const utrechtFormInputPaddingInlineEnd = "14px";
205
+ export const utrechtFormInputPaddingInlineStart = "14px";
206
+ export const utrechtFormInputPlaceholderColor = "#808080";
207
+ export const utrechtFormInputFocusBackgroundColor = "#ffffff";
208
+ export const utrechtHeading1FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
209
+ export const utrechtHeading1FontSize = "48px";
210
+ export const utrechtHeading1FontWeight = "700";
211
+ export const utrechtHeading1MarginBlockEnd = "48px";
212
+ export const utrechtHeading1MarginBlockStart = "18px";
213
+ export const utrechtHeading2FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
214
+ export const utrechtHeading2FontSize = "32px";
215
+ export const utrechtHeading2FontWeight = "700";
216
+ export const utrechtHeading2MarginBlockEnd = "48px";
217
+ export const utrechtHeading2MarginBlockStart = "18px";
218
+ export const utrechtHeading3FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
219
+ export const utrechtHeading3FontSize = "24px";
220
+ export const utrechtHeading3FontWeight = "400";
221
+ export const utrechtHeading3MarginBlockEnd = "32px";
222
+ export const utrechtHeading3MarginBlockStart = "18px";
223
+ export const utrechtHeading4FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
224
+ export const utrechtHeading4FontSize = "20px";
225
+ export const utrechtHeading4FontWeight = "400";
226
+ export const utrechtHeading4MarginBlockEnd = "24px";
227
+ export const utrechtHeading4MarginBlockStart = "18px";
228
+ export const utrechtHeading5FontFamily = "\"Aldritch\", \"Noto Sans\", Arial, sans-serif";
229
+ export const utrechtHeading5FontSize = "18px";
230
+ export const utrechtHeading5FontWeight = "100";
231
+ export const utrechtHeading5MarginBlockEnd = "24px";
232
+ export const utrechtHeading5MarginBlockStart = "18px";
233
+ export const utrechtIconGap = "8px";
234
+ export const utrechtLinkColor = "#4376fc";
235
+ export const utrechtLinkTextDecoration = "none";
236
+ export const utrechtLinkTextDecorationColor = "unset";
237
+ export const utrechtLinkTextDecorationThickness = 0;
238
+ export const utrechtLinkTextUnderlineOffset = "2px";
239
+ export const utrechtLinkHoverColor = "#2e5ed9";
240
+ export const utrechtLinkHoverTextDecoration = "underline";
241
+ export const utrechtLinkHoverTextDecorationThickness = "1px";
242
+ export const utrechtLinkVisitedColor = "#4376fc";
243
+ export const utrechtLinkIconSize = "18px";
244
+ export const utrechtOrderedListFontSize = "18px";
245
+ export const utrechtOrderedListMarginBlockStart = "14px";
246
+ export const utrechtOrderedListMarginBlockEnd = "14px";
247
+ export const utrechtOrderedListPaddingInlineStart = "32px";
248
+ export const utrechtOrderedListItemMarginBlockStart = "4px";
249
+ export const utrechtOrderedListItemMarginBlockEnd = "4px";
250
+ export const utrechtOrderedListItemPaddingInlineStart = "1ch";
251
+ export const utrechtUnorderedListFontSize = "18px";
252
+ export const utrechtUnorderedListMarginBlockStart = "18px";
253
+ export const utrechtUnorderedListMarginBlockEnd = 0;
254
+ export const utrechtUnorderedListPaddingInlineStart = "2ch";
255
+ export const utrechtUnorderedListItemMarginBlockStart = "8px";
256
+ export const utrechtUnorderedListItemMarginBlockEnd = "8px";
257
+ export const utrechtUnorderedListItemPaddingInlineStart = "1ch";
258
+ export const utrechtUnorderedListMarkerColor = "#4376fc";
259
+ export const utrechtPageFooterBackgroundColor = "#f5f5f5";
260
+ export const utrechtPageFooterBackgroundImage = "unset";
261
+ export const utrechtPageFooterColor = "#000000";
262
+ export const utrechtPageFooterPaddingInlineEnd = "14px";
263
+ export const utrechtPageFooterPaddingInlineStart = "14px";
264
+ export const utrechtPageFooterPaddingBlockEnd = "48px";
265
+ export const utrechtPageFooterPaddingBlockStart = "48px";
266
+ export const utrechtPageHeaderBackgroundColor = "#4376fc";
267
+ export const utrechtPageHeaderColor = "#ffffff";
268
+ export const utrechtPageHeaderPaddingBlockStart = "14px";
269
+ export const utrechtPageHeaderPaddingBlockEnd = "14px";
270
+ export const utrechtPageMarginInlineStart = "24px";
271
+ export const utrechtPageMarginInlineEnd = "24px";
272
+ export const utrechtPageMaxInlineSize = "1140px";
273
+ export const utrechtParagraphColor = "#000000";
274
+ export const utrechtParagraphFontFamily = "\"Noto Sans\", Arial, sans-serif";
275
+ export const utrechtParagraphFontSize = "18px";
276
+ export const utrechtParagraphFontWeight = "400";
277
+ export const utrechtParagraphLineHeight = "1.5em";
278
+ export const utrechtParagraphMarginBlockStart = 0;
279
+ export const utrechtParagraphMarginBlockEnd = 0;
280
+ export const utrechtTextboxBackgroundColor = "#ffffff";
281
+ export const utrechtTextboxBorderColor = "#7a7a7a";
282
+ export const utrechtTextboxBorderRadius = "3px";
283
+ export const utrechtTextboxBorderWidth = "1px";
284
+ export const utrechtTextboxColor = "#4a4a4a";
285
+ export const utrechtTextboxFontFamily = "\"Noto Sans\", Arial, sans-serif";
286
+ export const utrechtTextboxFontSize = "15px";
287
+ export const utrechtTextboxPaddingBlockEnd = "8px";
288
+ export const utrechtTextboxPaddingBlockStart = "8px";
289
+ export const utrechtTextboxPaddingInlineEnd = "14px";
290
+ export const utrechtTextboxPaddingInlineStart = "14px";
291
+ export const utrechtTextboxPlaceholderColor = "#808080";
292
+ export const utrechtTextboxFocusBackgroundColor = "#ffffff";