@conduction/theme 1.0.8 → 1.0.10

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 (5) hide show
  1. package/README.md +6 -0
  2. package/municipalities/leiden.css +60 -0
  3. package/municipalities/xxllnc.css +5 -2
  4. package/package.json +1 -1
  5. package/theme.css +62 -3
package/README.md CHANGED
@@ -5,6 +5,12 @@ Conduction's design tokens theme
5
5
 
6
6
  - **Version 1**
7
7
 
8
+ - 1.0.10:
9
+ - Added document-backgroundcolor to all themes.
10
+ - Added buttonIconGap token to Conduction and Leiden themes.
11
+ - Added formField, cards and conduction overwrite tokens to Conduction and Leiden themes.
12
+ - Added link-text-decoration tokens to xxllnc theme.
13
+ - 1.0.9: Added buttonIconGap token to xxllnc theme.
8
14
  - 1.0.8: Added formField, cards and conduction overwrite tokens to xxllnc theme.
9
15
  - 1.0.7: Added button tokens to all themes.
10
16
  - 1.0.6: Added xxllnc theme.
package/municipalities/leiden.css CHANGED
@@ -60,6 +60,11 @@
60
60
  --leiden-color-white: #ffffff;
61
61
  --leiden-color-black: #0d1921;
62
62
 
63
+ --leiden-color-grey-33: #5f594a;
64
+
65
+ --leiden-color-light-blue-24: #2c3e50;
66
+ --leiden-color-light-blue-89: #dce4ec;
67
+
63
68
  /* Typography */
64
69
  --leiden-typography-sans-serif-font-family: "Open Sans", Arial, sans-serif;
65
70
  --leiden-typography-header-font-family: "Open Sans", Arial, sans-serif;
@@ -118,6 +123,7 @@
118
123
  );
119
124
  --utrecht-document-font-size: var(--leiden-font-size-md);
120
125
  --utrecht-document-color: var(--leiden-color-black);
126
+ --utrecht-document-background-color: var(--leiden-color-white);
121
127
  --utrecht-space-around: 1;
122
128
 
123
129
  /* Typography */
@@ -134,6 +140,8 @@
134
140
  /* Page */
135
141
  --utrecht-page-padding-inline-start: var(--leiden-size-lg);
136
142
  --utrecht-page-padding-inline-end: var(--leiden-size-lg);
143
+ --utrecht-page-max-inline-size: 1140px;
144
+ --utrehct-page-content-background-color: var(--leiden-color-black);
137
145
 
138
146
  /* Headings */
139
147
  --utrecht-heading-1-font-family: var(--leiden-typography-header-font-family);
@@ -316,6 +324,7 @@
316
324
  --utrecht-button-color: var(--leiden-color-primary);
317
325
  --utrecht-button-background-color: var(--leiden-color-white);
318
326
 
327
+ --utrecht-button-icon-gap: var(--leiden-size-xs);
319
328
  --utrecht-button-border-color: var(--leiden-color-primary);
320
329
  --utrecht-button-border-width: var(--leiden-size-3xs);
321
330
  --utrecht-button-border-radius: var(--leiden-size-2xs);
@@ -347,4 +356,55 @@
347
356
  --utrecht-button-hover-color: var(--leiden-color-primary-hover);
348
357
  /* --utrecht-button-hover-border-color: unset; */
349
358
  /* --utrecht-button-focus-transform-scale: unset; */
359
+
360
+ /* InputField */
361
+ --utrecht-form-input-background-color: var(--leiden-color-white-100);
362
+ --utrecht-form-input-border-width: var(--leiden-size-4xs);
363
+ --utrecht-form-input-border-color: var(--leiden-color-grey-33);
364
+ --utrecht-form-input-border-radius: 0px;
365
+ --utrecht-form-input-color: var(--leiden-color-grey-43);
366
+ --utrecht-form-input-font-family: var(
367
+ --leiden-typography-sans-serif-font-family
368
+ );
369
+ --utrecht-form-input-font-size: 15px;
370
+ /* --utrecht-form-input-max-inline-size: ; */
371
+ --utrecht-form-input-padding-block-end: var(--leiden-size-xs);
372
+ --utrecht-form-input-padding-block-start: var(--leiden-size-xs);
373
+ --utrecht-form-input-padding-inline-end: var(--leiden-size-sm);
374
+ --utrecht-form-input-padding-inline-start: var(--leiden-size-sm);
375
+
376
+ /* InputField-TextField */
377
+ --utrecht-textbox-background-color: var(--leiden-color-white-100);
378
+ --utrecht-textbox-border-width: var(--leiden-size-4xs);
379
+ /* --utrecht-textbox-border-bottom-width: ; */
380
+ --utrecht-textbox-border-color: var(--leiden-color-grey-33);
381
+ --utrecht-textbox-border-radius: 0px;
382
+ --utrecht-textbox-color: var(--leiden-color-grey-43);
383
+ --utrecht-textbox-font-family: var(
384
+ --leiden-typography-sans-serif-font-family
385
+ );
386
+ --utrecht-textbox-font-size: 15px;
387
+ /* --utrecht-textbox-max-inline-size: ; */
388
+ --utrecht-textbox-padding-block-end: var(--leiden-size-xs);
389
+ --utrecht-textbox-padding-block-start: var(--leiden-size-xs);
390
+ --utrecht-textbox-padding-inline-end: var(--leiden-size-sm);
391
+ --utrecht-textbox-padding-inline-start: var(--leiden-size-sm);
392
+
393
+ --utrecht-textbox-placeholder-color: var(--leiden-color-light-blue-24);
394
+
395
+ /* conduction select-field */
396
+ --skeleton-color-white: var(--leiden-color-white-100);
397
+ --conduction-input-select-border: var(--leiden-size-4xs) solid
398
+ var(--leiden-color-light-blue-89);
399
+ --skeleton-border-radius-md: 0px;
400
+ --skeleton-size-xs: var(--leiden-size-xs);
401
+
402
+ /* conduction Card */
403
+ --utrecht-card-background-color: var(--leiden-color-lightgrey);
404
+ --utrecht-card-color: var(--leiden-color-black);
405
+ /* --utrecht-card-border-radius: <length>; */
406
+ --utrecht-card-padding-block-end: var(--leiden-size-sm);
407
+ --utrecht-card-padding-block-start: var(--leiden-size-sm);
408
+ --utrecht-card-padding-inline-end: var(--leiden-size-xl);
409
+ --utrecht-card-padding-inline-start: var(--leiden-size-xl);
350
410
  }
package/municipalities/xxllnc.css CHANGED
@@ -132,6 +132,7 @@
132
132
  );
133
133
  --utrecht-document-font-size: var(--xxllnc-font-size-sm);
134
134
  --utrecht-document-color: var(--xxllnc-color-black);
135
+ --utrecht-document-background-color: var(--xxllnc-color-white);
135
136
  --utrecht-space-around: 1;
136
137
 
137
138
  /* Typography */
@@ -237,6 +238,8 @@
237
238
  --utrecht-link-text-underline-offset: var(--xxllnc-size-3xs);
238
239
 
239
240
  --utrecht-link-hover-color: var(--xxllnc-color-primary-hover);
241
+ /* --utrecht-link-hover-text-decoration: none; */
242
+ /* --utrecht-link-hover-text-decoration-thickness: <size>; */
240
243
 
241
244
  /* Blockquote */
242
245
  --utrecht-blockquote-content-color: var(--xxllnc-color-black);
@@ -280,8 +283,7 @@
280
283
  --utrecht-table-header-font-weight: var(--xxllnc-font-weight-bold);
281
284
  --utrecht-table-header-text-transform: unset;
282
285
 
283
- --utrecht-table-header-cell-font-size: var(--utrecht-document-font-size)
284
- inherit;
286
+ --utrecht-table-header-cell-font-size: var(--utrecht-document-font-size) inherit;
285
287
  --utrecht-table-header-cell-font-weight: var(--xxllnc-font-weight-bold);
286
288
  --utrecht-table-header-cell-text-transform: unset;
287
289
 
@@ -331,6 +333,7 @@
331
333
  --utrecht-button-color: var(--xxllnc-color-grey-95);
332
334
  --utrecht-button-background-color: var(--xxllnc-color-black-15);
333
335
 
336
+ --utrecht-button-icon-gap: var(--xxllnc-size-xs);
334
337
  /* --utrecht-button-border-color: <color>; */
335
338
  --utrecht-button-border-width: 0;
336
339
  --utrecht-button-border-radius: var(--xxllnc-size-xs);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/theme",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "Conduction's design tokens theme",
5
5
  "main": "index.js",
6
6
  "repository": {
package/theme.css CHANGED
@@ -56,8 +56,15 @@
56
56
  --conduction-color-alert-info: #004085;
57
57
  --conduction-color-alert-info-background: #cce5ff;
58
58
 
59
+ --conduction-color-grey: #808080;
60
+ --conduction-color-grey-29: #4a4a4a;
61
+ --conduction-color-grey-48: #7a7a7a;
62
+
59
63
  --conduction-color-lightgrey: #f5f5f5;
64
+
60
65
  --conduction-color-white: #ffffff;
66
+ --conduction-color-white-98: #fafafa;
67
+
61
68
  --conduction-color-black: #000000;
62
69
 
63
70
  /* Typography */
@@ -118,6 +125,7 @@
118
125
  );
119
126
  --utrecht-document-font-size: var(--conduction-font-size-md);
120
127
  --utrecht-document-color: var(--conduction-color-black);
128
+ --utrecht-document-background-color: var(--conduction-color-white-98);
121
129
  --utrecht-space-around: 1;
122
130
 
123
131
  /* Typography */
@@ -331,6 +339,7 @@
331
339
  --utrecht-button-color: var(--conduction-color-white);
332
340
  --utrecht-button-background-color: var(--conduction-color-primary);
333
341
 
342
+ --utrecht-button-icon-gap: var(--conduction-size-xs);
334
343
  /* --utrecht-button-border-color: <color>; */
335
344
  --utrecht-button-border-width: 0;
336
345
  --utrecht-button-border-radius: 3px;
@@ -351,8 +360,8 @@
351
360
 
352
361
  --utrecht-button-padding-block-end: var(--conduction-size-xs);
353
362
  --utrecht-button-padding-block-start: var(--conduction-size-xs);
354
- --utrecht-button-padding-inline-end: var(--conduction-size-xs);
355
- --utrecht-button-padding-inline-start: var(--conduction-size-xs);
363
+ --utrecht-button-padding-inline-end: var(--conduction-size-sm);
364
+ --utrecht-button-padding-inline-start: var(--conduction-size-sm);
356
365
 
357
366
  /* --utrecht-button-text-transform: <length>; */
358
367
 
@@ -366,10 +375,60 @@
366
375
  --utrecht-button-hover-color: var(--conduction-color-white);
367
376
  /* --utrecht-button-hover-border-color: unset; */
368
377
  /* --utrecht-button-focus-transform-scale: unset; */
378
+
379
+ /* InputField */
380
+ --utrecht-form-input-background-color: var(--conduction-color-white);
381
+ --utrecht-form-input-border-width: var(--conduction-size-4xs);
382
+ --utrecht-form-input-border-color: var(--conduction-color-grey-48);
383
+ --utrecht-form-input-border-radius: 3px;
384
+ --utrecht-form-input-color: var(--conduction-color-grey-29);
385
+ --utrecht-form-input-font-family: var(
386
+ --conduction-typography-sans-serif-font-family
387
+ );
388
+ --utrecht-form-input-font-size: 15px;
389
+ /* --utrecht-form-input-max-inline-size: ; */
390
+ --utrecht-form-input-padding-block-end: var(--conduction-size-xs);
391
+ --utrecht-form-input-padding-block-start: var(--conduction-size-xs);
392
+ --utrecht-form-input-padding-inline-end: var(--conduction-size-sm);
393
+ --utrecht-form-input-padding-inline-start: var(--conduction-size-sm);
394
+
395
+ /* InputField-TextField */
396
+ --utrecht-textbox-background-color: var(--conduction-color-white);
397
+ --utrecht-textbox-border-width: var(--conduction-size-4xs);
398
+ /* --utrecht-textbox-border-bottom-width: ; */
399
+ --utrecht-textbox-border-color: var(--conduction-color-grey-48);
400
+ --utrecht-form-input-border-radius: 3px;
401
+ --utrecht-textbox-color: var(--conduction-color-grey-29);
402
+ --utrecht-textbox-font-family: var(
403
+ --conduction-typography-sans-serif-font-family
404
+ );
405
+ --utrecht-textbox-font-size: 15px;
406
+ /* --utrecht-textbox-max-inline-size: ; */
407
+ --utrecht-textbox-padding-block-end: var(--conduction-size-xs);
408
+ --utrecht-textbox-padding-block-start: var(--conduction-size-xs);
409
+ --utrecht-textbox-padding-inline-end: var(--conduction-size-sm);
410
+ --utrecht-textbox-padding-inline-start: var(--conduction-size-sm);
411
+
412
+ --utrecht-textbox-placeholder-color: var(--conduction-color-grey);
413
+
414
+ /* conduction select-field */
415
+ --skeleton-color-white: var(--conduction-color-white);
416
+ --conduction-input-select-border: var(--conduction-size-4xs) solid
417
+ var(--conduction-color-grey-48);
418
+ --skeleton-border-radius-md: 6px;
419
+ --skeleton-size-xs: var(--conduction-size-xs);
420
+
421
+ /* conduction Card */
422
+ --utrecht-card-background-color: var(--conduction-color-white);
423
+ --utrecht-card-color: var(--xxllnc-color-white-95);
424
+ --utrecht-card-border-radius: 16px;
425
+ --utrecht-card-padding-block-end: var(--conduction-size-md);
426
+ --utrecht-card-padding-block-start: var(--conduction-size-md);
427
+ --utrecht-card-padding-inline-end: var(--conduction-size-md);
428
+ --utrecht-card-padding-inline-start: var(--conduction-size-md);
369
429
  }
370
430
 
371
431
  @font-face {
372
432
  font-family: "Aldritch";
373
433
  src: url("./fonts/Aldritch.woff2") format("woff2");
374
434
  }
375
-