@conduction/theme 1.0.13 → 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 (84) hide show
  1. package/.prettierrc +12 -0
  2. package/README.md +2 -0
  3. package/conduction-design-tokens/LICENSE.md +17 -0
  4. package/conduction-design-tokens/dist/design-tokens.css +294 -0
  5. package/conduction-design-tokens/dist/font.css +5 -0
  6. package/conduction-design-tokens/dist/index.css +7 -0
  7. package/conduction-design-tokens/dist/index.js +292 -0
  8. package/conduction-design-tokens/dist/index.json +5699 -0
  9. package/conduction-design-tokens/dist/index.less +291 -0
  10. package/conduction-design-tokens/dist/index.scss +291 -0
  11. package/conduction-design-tokens/dist/tokens.json +6098 -0
  12. package/conduction-design-tokens/package.json +40 -0
  13. package/conduction-design-tokens/src/brand/conduction/color.tokens.json +59 -0
  14. package/conduction-design-tokens/src/brand/conduction/font-size.tokens.json +17 -0
  15. package/conduction-design-tokens/src/brand/conduction/size.tokens.json +17 -0
  16. package/conduction-design-tokens/src/brand/conduction/typography.tokens.json +47 -0
  17. package/conduction-design-tokens/src/common/utrecht/action.tokens.json +9 -0
  18. package/conduction-design-tokens/src/common/utrecht/space.tokens.json +28 -0
  19. package/conduction-design-tokens/src/component/conduction/card.tokens.json +15 -0
  20. package/conduction-design-tokens/src/component/conduction/select.tokens.json +15 -0
  21. package/conduction-design-tokens/src/component/conduction/table.tokens.json +16 -0
  22. package/conduction-design-tokens/src/component/utrecht/alert.tokens.json +47 -0
  23. package/conduction-design-tokens/src/component/utrecht/blockquote.tokens.json +27 -0
  24. package/conduction-design-tokens/src/component/utrecht/button.tokens.json +152 -0
  25. package/conduction-design-tokens/src/component/utrecht/code.tokens.json +27 -0
  26. package/conduction-design-tokens/src/component/utrecht/document.tokens.json +12 -0
  27. package/conduction-design-tokens/src/component/utrecht/form-input.tokens.json +44 -0
  28. package/conduction-design-tokens/src/component/utrecht/heading.tokens.json +53 -0
  29. package/conduction-design-tokens/src/component/utrecht/icon.tokens.json +13 -0
  30. package/conduction-design-tokens/src/component/utrecht/link.tokens.json +33 -0
  31. package/conduction-design-tokens/src/component/utrecht/list.tokens.json +32 -0
  32. package/conduction-design-tokens/src/component/utrecht/page-footer.tokens.json +13 -0
  33. package/conduction-design-tokens/src/component/utrecht/page-header.tokens.json +10 -0
  34. package/conduction-design-tokens/src/component/utrecht/page.tokens.json +11 -0
  35. package/conduction-design-tokens/src/component/utrecht/paragraph.tokens.json +25 -0
  36. package/conduction-design-tokens/src/component/utrecht/table.tokens.json +60 -0
  37. package/conduction-design-tokens/src/component/utrecht/textbox.tokens.json +44 -0
  38. package/conduction-design-tokens/src/config.json +7 -0
  39. package/conduction-design-tokens/src/font/Aldritch.woff2 +0 -0
  40. package/conduction-design-tokens/src/font.scss +6 -0
  41. package/conduction-design-tokens/src/index.scss +8 -0
  42. package/conduction-design-tokens/style-dictionary.config.js +6 -0
  43. package/municipalities/xxllnc-design-tokens/LICENSE.md +17 -0
  44. package/municipalities/xxllnc-design-tokens/dist/design-tokens.css +289 -0
  45. package/municipalities/xxllnc-design-tokens/dist/font.css +1 -0
  46. package/municipalities/xxllnc-design-tokens/dist/index.css +7 -0
  47. package/municipalities/xxllnc-design-tokens/dist/index.js +287 -0
  48. package/municipalities/xxllnc-design-tokens/dist/index.json +5606 -0
  49. package/municipalities/xxllnc-design-tokens/dist/index.less +286 -0
  50. package/municipalities/xxllnc-design-tokens/dist/index.scss +286 -0
  51. package/municipalities/xxllnc-design-tokens/dist/tokens.json +5989 -0
  52. package/municipalities/xxllnc-design-tokens/package.json +40 -0
  53. package/municipalities/xxllnc-design-tokens/src/brand/xxllnc/color.tokens.json +84 -0
  54. package/municipalities/xxllnc-design-tokens/src/brand/xxllnc/font-size.tokens.json +17 -0
  55. package/municipalities/xxllnc-design-tokens/src/brand/xxllnc/size.tokens.json +17 -0
  56. package/municipalities/xxllnc-design-tokens/src/brand/xxllnc/typography.tokens.json +47 -0
  57. package/municipalities/xxllnc-design-tokens/src/common/utrecht/action.tokens.json +9 -0
  58. package/municipalities/xxllnc-design-tokens/src/common/utrecht/space.tokens.json +28 -0
  59. package/municipalities/xxllnc-design-tokens/src/component/conduction/card.tokens.json +15 -0
  60. package/municipalities/xxllnc-design-tokens/src/component/conduction/select.tokens.json +15 -0
  61. package/municipalities/xxllnc-design-tokens/src/component/utrecht/alert.tokens.json +47 -0
  62. package/municipalities/xxllnc-design-tokens/src/component/utrecht/blockquote.tokes.json +27 -0
  63. package/municipalities/xxllnc-design-tokens/src/component/utrecht/button.tokens.json +152 -0
  64. package/municipalities/xxllnc-design-tokens/src/component/utrecht/code.tokens.json +27 -0
  65. package/municipalities/xxllnc-design-tokens/src/component/utrecht/document.tokens.json +12 -0
  66. package/municipalities/xxllnc-design-tokens/src/component/utrecht/footer.tokens.json +13 -0
  67. package/municipalities/xxllnc-design-tokens/src/component/utrecht/form-input.tokens.json +44 -0
  68. package/municipalities/xxllnc-design-tokens/src/component/utrecht/heading.tokens.json +53 -0
  69. package/municipalities/xxllnc-design-tokens/src/component/utrecht/icon.tokens.json +13 -0
  70. package/municipalities/xxllnc-design-tokens/src/component/utrecht/link.tokens.json +33 -0
  71. package/municipalities/xxllnc-design-tokens/src/component/utrecht/list.tokens.json +32 -0
  72. package/municipalities/xxllnc-design-tokens/src/component/utrecht/page-header.tokens.json +10 -0
  73. package/municipalities/xxllnc-design-tokens/src/component/utrecht/page.tokens.json +11 -0
  74. package/municipalities/xxllnc-design-tokens/src/component/utrecht/paragraph.tokens.json +25 -0
  75. package/municipalities/xxllnc-design-tokens/src/component/utrecht/table.tokens.json +60 -0
  76. package/municipalities/xxllnc-design-tokens/src/component/utrecht/textbox.tokens.json +44 -0
  77. package/municipalities/xxllnc-design-tokens/src/config.json +7 -0
  78. package/municipalities/xxllnc-design-tokens/src/font.scss +1 -0
  79. package/municipalities/xxllnc-design-tokens/src/index.scss +11 -0
  80. package/municipalities/xxllnc-design-tokens/style-dictionary.config.js +6 -0
  81. package/municipalities/xxllnc.css +70 -59
  82. package/package.json +1 -1
  83. package/style-dictionary-config.js +80 -0
  84. package/theme.css +51 -39
package/theme.css CHANGED
@@ -56,21 +56,22 @@
56
56
  --conduction-color-alert-info: #004085;
57
57
  --conduction-color-alert-info-background: #cce5ff;
58
58
 
59
- --conduction-color-grey: #808080;
59
+ --conduction-color-grey-50: #808080;
60
60
  --conduction-color-grey-29: #4a4a4a;
61
61
  --conduction-color-grey-48: #7a7a7a;
62
62
 
63
- --conduction-color-lightgrey: #f5f5f5;
63
+ --conduction-color-lightgrey-96: #f5f5f5;
64
64
 
65
- --conduction-color-white: #ffffff;
65
+ --conduction-color-white-100: #ffffff;
66
66
  --conduction-color-white-98: #fafafa;
67
67
 
68
- --conduction-color-black: #000000;
68
+ --conduction-color-black-0: #000000;
69
69
 
70
70
  /* Typography */
71
71
  --conduction-typography-sans-serif-font-family: "Noto Sans", Arial, sans-serif;
72
- --conduction-typography-header-font-family: "Aldritch", "Noto Sans", Arial, sans-serif;
73
- --conduction-typography-code-font-family: Monospace, "Lucida Console";
72
+ --conduction-typography-aldritch-font-family: "Aldritch", "Noto Sans", Arial,
73
+ sans-serif;
74
+ --conduction-typography-monospace-font-family: Monospace, "Lucida Console";
74
75
 
75
76
  /*
76
77
  *
@@ -124,7 +125,7 @@
124
125
  --conduction-typography-sans-serif-font-family
125
126
  );
126
127
  --utrecht-document-font-size: var(--conduction-font-size-md);
127
- --utrecht-document-color: var(--conduction-color-black);
128
+ --utrecht-document-color: var(--conduction-color-black-0);
128
129
  --utrecht-document-background-color: var(--conduction-color-white-98);
129
130
  --utrecht-space-around: 1;
130
131
 
@@ -134,7 +135,7 @@
134
135
  );
135
136
 
136
137
  /* Header */
137
- --utrecht-page-header-color: var(--conduction-color-white);
138
+ --utrecht-page-header-color: var(--conduction-color-white-100);
138
139
  --utrecht-page-header-background-color: var(--conduction-color-primary);
139
140
  --utrecht-page-header-padding-block-start: var(--conduction-size-sm);
140
141
  --utrecht-page-header-padding-block-end: var(--conduction-size-sm);
@@ -143,11 +144,11 @@
143
144
  --utrecht-page-padding-inline-start: var(--conduction-size-lg);
144
145
  --utrecht-page-padding-inline-end: var(--conduction-size-lg);
145
146
  --utrecht-page-max-inline-size: 1140px;
146
- --utrecht-page-content-background-color: var(--conduction-color-black);
147
+ --utrecht-page-content-background-color: var(--conduction-color-black-0);
147
148
 
148
149
  /* Headings */
149
150
  --utrecht-heading-1-font-family: var(
150
- --conduction-typography-header-font-family
151
+ --conduction-typography-aldritch-font-family
151
152
  );
152
153
  --utrecht-heading-1-font-size: var(--conduction-font-size-3xl);
153
154
  --utrecht-heading-1-font-weight: var(--conduction-font-weight-bold);
@@ -156,7 +157,7 @@
156
157
  --utrecht-heading-1-margin-block-end: var(--conduction-size-md);
157
158
 
158
159
  --utrecht-heading-2-font-family: var(
159
- --conduction-typography-header-font-family
160
+ --conduction-typography-aldritch-font-family
160
161
  );
161
162
  --utrecht-heading-2-font-weight: var(--conduction-font-weight-bold);
162
163
  --utrecht-heading-2-font-size: var(--conduction-font-size-2xl);
@@ -165,7 +166,7 @@
165
166
  --utrecht-heading-2-margin-block-end: var(--conduction-size-md);
166
167
 
167
168
  --utrecht-heading-3-font-family: var(
168
- --conduction-typography-header-font-family
169
+ --conduction-typography-aldritch-font-family
169
170
  );
170
171
  --utrecht-heading-3-font-weight: var(--conduction-font-weight-normal);
171
172
  --utrecht-heading-3-font-size: var(--conduction-font-size-xl);
@@ -174,16 +175,16 @@
174
175
  --utrecht-heading-3-margin-block-end: var(--conduction-size-md);
175
176
 
176
177
  --utrecht-heading-4-font-family: var(
177
- --conduction-typography-header-font-family
178
+ --conduction-typography-aldritch-font-family
178
179
  );
179
180
  --utrecht-heading-4-font-size: var(--conduction-font-size-lg);
180
181
  --utrecht-heading-4-font-weight: var(--conduction-font-weight-normal);
181
182
  --utrecht-heading-4-letter-spacing: var(--conduction-letter-spacing-normal);
182
- --utrecht-heading-4-margin-block-start: var(--conduction-size-lf);
183
+ --utrecht-heading-4-margin-block-start: var(--conduction-size-lg);
183
184
  --utrecht-heading-4-margin-block-end: var(--conduction-size-md);
184
185
 
185
186
  --utrecht-heading-5-font-family: var(
186
- --conduction-typography-header-font-family
187
+ --conduction-typography-aldritch-font-family
187
188
  );
188
189
  --utrecht-heading-5-font-size: var(--conduction-font-size-md);
189
190
  --utrecht-heading-5-font-weight: var(--conduction-font-weight-light);
@@ -204,8 +205,8 @@
204
205
  --utrecht-paragraph-margin-block-end: 0;
205
206
 
206
207
  /* Footer */
207
- --utrecht-page-footer-color: var(--conduction-color-black);
208
- --utrecht-page-footer-background-color: var(--conduction-color-lightgrey);
208
+ --utrecht-page-footer-color: var(--conduction-color-black-0);
209
+ --utrecht-page-footer-background-color: var(--conduction-color-lightgrey-96);
209
210
  --utrecht-page-footer-background-image: unset;
210
211
  --utrecht-page-footer-padding-block-start: var(--conduction-size-2xl);
211
212
  --utrecht-page-footer-padding-block-end: var(--conduction-size-2xl);
@@ -245,21 +246,23 @@
245
246
  --utrecht-link-hover-text-decoration-thickness: var(--conduction-size-4xs);
246
247
 
247
248
  /* Blockquote */
248
- --utrecht-blockquote-content-color: var(--conduction-color-black);
249
+ --utrecht-blockquote-content-color: var(--conduction-color-black-0);
249
250
  --utrecht-blockquote-content-font-size: var(--conduction-size-md);
250
251
  --utrecht-blockquote-margin-inline-start: var(--conduction-size-xl);
251
252
  --utrecht-blockquote-margin-inline-end: var(--conduction-size-xl);
252
253
 
253
254
  /* Code */
254
- --utrecht-code-color: var(--conduction-color-black);
255
- --utrecht-code-background-color: var(--conduction-color-lightgrey);
256
- --utrecht-code-font-family: var(--conduction-typography-code-font-family);
255
+ --utrecht-code-color: var(--conduction-color-black-0);
256
+ --utrecht-code-background-color: var(--conduction-color-lightgrey-96);
257
+ --utrecht-code-font-family: var(
258
+ --conduction-typography-monospace-font-family
259
+ );
257
260
  --utrecht-code-font-size: inherit;
258
261
 
259
- --utrecht-code-block-color: var(--conduction-color-black);
260
- --utrecht-code-block-background-color: var(--conduction-color-lightgrey);
262
+ --utrecht-code-block-color: var(--conduction-color-black-0);
263
+ --utrecht-code-block-background-color: var(--conduction-color-lightgrey-96);
261
264
  --utrecht-code-block-font-family: var(
262
- --conduction-typography-code-font-family
265
+ --conduction-typography-monospace-font-family
263
266
  );
264
267
  --utrecht-code-block-font-size: var(--conduction-font-size-md);
265
268
  --utrecht-code-block-font-weight: var(--conduction-font-weight-normal);
@@ -277,7 +280,7 @@
277
280
  --utrecht-unordered-list-marker-color: var(--conduction-color-primary);
278
281
 
279
282
  /* Table */
280
- --utrecht-table-border-color: var(--conduction-color-lightgrey);
283
+ --utrecht-table-border-color: var(--conduction-color-lightgrey-96);
281
284
  --utrecht-table-border-width: var(--conduction-size-4xs);
282
285
  --utrecht-table-font-family: var(--utrecht-document-font-family) inherit;
283
286
  --utrecht-table-font-size: var(--utrecht-document-font-size) inherit;
@@ -288,11 +291,14 @@
288
291
  --utrecht-table-header-font-weight: var(--conduction-font-weight-bold);
289
292
  --utrecht-table-header-text-transform: unset;
290
293
 
291
- --utrecht-table-header-cell-font-size: var(--utrecht-document-font-size) inherit;
294
+ --utrecht-table-header-cell-font-size: var(--utrecht-document-font-size)
295
+ inherit;
292
296
  --utrecht-table-header-cell-font-weight: var(--conduction-font-weight-bold);
293
297
  --utrecht-table-header-cell-text-transform: unset;
294
298
 
295
- --utrecht-table-row-border-block-end-color: var(--conduction-color-lightgrey);
299
+ --utrecht-table-row-border-block-end-color: var(
300
+ --conduction-color-lightgrey-96
301
+ );
296
302
  --utrecht-table-row-border-block-end-width: var(--conduction-size-4xs);
297
303
 
298
304
  --utrecht-table-cell-padding-block-start: var(--conduction-size-md);
@@ -337,10 +343,10 @@
337
343
  --utrecht-icon-gap: var(--conduction-size-xs);
338
344
 
339
345
  /* Button */
340
- --utrecht-button-color: var(--conduction-color-white);
346
+ --utrecht-button-color: var(--conduction-color-white-100);
341
347
  --utrecht-button-background-color: var(--conduction-color-primary);
342
348
 
343
- --utrecht-button-icon-gap: var(--conduction-size-xs);
349
+ --utrecht-button-icon-gap: var(--conduction-size-xs);
344
350
  /* --utrecht-button-border-color: <color>; */
345
351
  --utrecht-button-border-width: 0;
346
352
  --utrecht-button-border-radius: 3px;
@@ -366,11 +372,17 @@
366
372
 
367
373
  /* --utrecht-button-text-transform: <length>; */
368
374
 
369
- --utrecht-button-secondary-action-background-color: var(--conduction-color-white);
370
- --utrecht-button-secondary-action-border-color: var(--conduction-color-primary);
375
+ --utrecht-button-secondary-action-background-color: var(
376
+ --conduction-color-white-100
377
+ );
378
+ --utrecht-button-secondary-action-border-color: var(
379
+ --conduction-color-primary
380
+ );
371
381
  --utrecht-button-secondary-action-border-width: 2px;
372
382
  --utrecht-button-secondary-action-color: var(--conduction-color-primary);
373
- --utrecht-button-secondary-action-font-weight: var(--conduction-font-weight-normal);
383
+ --utrecht-button-secondary-action-font-weight: var(
384
+ --conduction-font-weight-normal
385
+ );
374
386
 
375
387
  /* --utrecht-button-focus-background-color: <color>; */
376
388
  /* --utrecht-button-focus-border-color: <color>; */
@@ -379,12 +391,12 @@
379
391
  --utrecht-button-hover-background-color: var(
380
392
  --conduction-color-primary-hover
381
393
  );
382
- --utrecht-button-hover-color: var(--conduction-color-white);
394
+ --utrecht-button-hover-color: var(--conduction-color-white-100);
383
395
  /* --utrecht-button-hover-border-color: unset; */
384
396
  /* --utrecht-button-focus-transform-scale: unset; */
385
397
 
386
398
  /* InputField */
387
- --utrecht-form-input-background-color: var(--conduction-color-white);
399
+ --utrecht-form-input-background-color: var(--conduction-color-white-100);
388
400
  --utrecht-form-input-border-width: var(--conduction-size-4xs);
389
401
  --utrecht-form-input-border-color: var(--conduction-color-grey-48);
390
402
  --utrecht-form-input-border-radius: 3px;
@@ -400,7 +412,7 @@
400
412
  --utrecht-form-input-padding-inline-start: var(--conduction-size-sm);
401
413
 
402
414
  /* InputField-TextField */
403
- --utrecht-textbox-background-color: var(--conduction-color-white);
415
+ --utrecht-textbox-background-color: var(--conduction-color-white-100);
404
416
  --utrecht-textbox-border-width: var(--conduction-size-4xs);
405
417
  /* --utrecht-textbox-border-bottom-width: ; */
406
418
  --utrecht-textbox-border-color: var(--conduction-color-grey-48);
@@ -416,18 +428,18 @@
416
428
  --utrecht-textbox-padding-inline-end: var(--conduction-size-sm);
417
429
  --utrecht-textbox-padding-inline-start: var(--conduction-size-sm);
418
430
 
419
- --utrecht-textbox-placeholder-color: var(--conduction-color-grey);
431
+ --utrecht-textbox-placeholder-color: var(--conduction-color-grey-50);
420
432
 
421
433
  /* conduction select-field */
422
- --skeleton-color-white: var(--conduction-color-white);
434
+ --skeleton-color-white: var(--conduction-color-white-100);
423
435
  --conduction-input-select-border: var(--conduction-size-4xs) solid
424
436
  var(--conduction-color-grey-48);
425
437
  --skeleton-border-radius-md: 6px;
426
438
  --skeleton-size-xs: var(--conduction-size-xs);
427
439
 
428
440
  /* conduction Card */
429
- --utrecht-card-background-color: var(--conduction-color-white);
430
- --utrecht-card-color: var(--xxllnc-color-white-95);
441
+ --utrecht-card-background-color: var(--conduction-color-white-100);
442
+ --utrecht-card-color: var(--conduction-color-black-0);
431
443
  --utrecht-card-border-radius: 16px;
432
444
  --utrecht-card-padding-block-end: var(--conduction-size-md);
433
445
  --utrecht-card-padding-block-start: var(--conduction-size-md);