@conduction/theme 1.0.6 → 1.0.8

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 +13 -0
  2. package/municipalities/leiden.css +49 -5
  3. package/municipalities/xxllnc.css +103 -5
  4. package/package.json +1 -1
  5. package/theme.css +74 -11
package/README.md CHANGED
@@ -1,2 +1,15 @@
1
1
  # conduction-theme
2
2
  Conduction's design tokens theme
3
+
4
+ ## Changelog
5
+
6
+ - **Version 1**
7
+
8
+ - 1.0.8: Added formField, cards and conduction overwrite tokens to xxllnc theme.
9
+ - 1.0.7: Added button tokens to all themes.
10
+ - 1.0.6: Added xxllnc theme.
11
+ - 1.0.5: Added page-max-inline size to Conduction theme.
12
+ - 1.0.4: Added Leiden theme.
13
+ - 1.0.3: Updated sizes.
14
+ - 1.0.2: Added Aldritch font.
15
+ - 1.0.1: Added Conduction theme.
package/municipalities/leiden.css CHANGED
@@ -113,13 +113,17 @@
113
113
  --utrecht-typography-scale-4xl: var(--leiden-font-size-4xl);
114
114
 
115
115
  /* Document */
116
- --utrecht-document-font-family: var(--leiden-typography-sans-serif-font-family);
116
+ --utrecht-document-font-family: var(
117
+ --leiden-typography-sans-serif-font-family
118
+ );
117
119
  --utrecht-document-font-size: var(--leiden-font-size-md);
118
120
  --utrecht-document-color: var(--leiden-color-black);
119
121
  --utrecht-space-around: 1;
120
122
 
121
123
  /* Typography */
122
- --utrecht-typography-sans-serif-font-family: var(--leiden-typography-sans-serif-font-family);
124
+ --utrecht-typography-sans-serif-font-family: var(
125
+ --leiden-typography-sans-serif-font-family
126
+ );
123
127
 
124
128
  /* Header */
125
129
  --utrecht-page-header-color: var(--leiden-color-white);
@@ -170,7 +174,9 @@
170
174
 
171
175
  /* Paragraph */
172
176
  --utrecht-paragraph-color: var(--utrecht-document-color) inherit;
173
- --utrecht-paragraph-font-family: var(--leiden-typography-sans-serif-font-family);
177
+ --utrecht-paragraph-font-family: var(
178
+ --leiden-typography-sans-serif-font-family
179
+ );
174
180
  --utrecht-paragraph-font-size: var(--leiden-font-size-md);
175
181
  --utrecht-paragraph-font-weight: var(--leiden-font-weight-normal);
176
182
  --utrecht-paragraph-line-height: 1.5;
@@ -287,7 +293,9 @@
287
293
  /* --utrecht-alert-warning-color: <color>; */
288
294
  /* --utrecht-alert-warning-border-color: <color>; */
289
295
  /* --utrecht-alert-warning-border-width: <length>; */
290
- --utrecht-alert-error-background-color: var(--leiden-color-alert-error-background);
296
+ --utrecht-alert-error-background-color: var(
297
+ --leiden-color-alert-error-background
298
+ );
291
299
  --utrecht-alert-error-color: var(--leiden-color-alert-error);
292
300
  /* --utrecht-alert-error-border-color: <color>; */
293
301
  /* --utrecht-alert-error-border-width: <color>; */
@@ -303,4 +311,40 @@
303
311
  /* Icon */
304
312
  --utrecht-alert-icon-gap: var(--leiden-size-xs);
305
313
  --utrecht-icon-gap: var(--leiden-size-xs);
306
- }
314
+
315
+ /* Button */
316
+ --utrecht-button-color: var(--leiden-color-primary);
317
+ --utrecht-button-background-color: var(--leiden-color-white);
318
+
319
+ --utrecht-button-border-color: var(--leiden-color-primary);
320
+ --utrecht-button-border-width: var(--leiden-size-3xs);
321
+ --utrecht-button-border-radius: var(--leiden-size-2xs);
322
+ /* --utrecht-button-border-bottom-width: <length>; */
323
+
324
+ --utrecht-button-font-family: var(--leiden-typography-sans-serif-font-family);
325
+ --utrecht-button-font-size: inherit;
326
+ --utrecht-button-font-weight: inherit;
327
+
328
+ /* --utrecht-button-inline-size: <length>; */
329
+ /* --utrecht-button-letter-spacing: <length>; */
330
+ /* --utrecht-button-line-height: <length>; */
331
+
332
+ /* --utrecht-button-min-block-size: <length>; */
333
+ /* --utrecht-button-min-inline-size: <length>; */
334
+
335
+ --utrecht-button-padding-block-end: var(--leiden-size-xs);
336
+ --utrecht-button-padding-block-start: var(--leiden-size-xs);
337
+ --utrecht-button-padding-inline-end: var(--leiden-size-xs);
338
+ --utrecht-button-padding-inline-start: var(--leiden-size-xs);
339
+
340
+ /* --utrecht-button-text-transform: <length>; */
341
+
342
+ --utrecht-button-focus-background-color: var(--leiden-color-primary);
343
+ --utrecht-button-focus-border-color: var(--leiden-color-primary);
344
+ --utrecht-button-focus-color: var(--leiden-color-white);
345
+
346
+ --utrecht-button-hover-background-color: var(--leiden-color-white);
347
+ --utrecht-button-hover-color: var(--leiden-color-primary-hover);
348
+ /* --utrecht-button-hover-border-color: unset; */
349
+ /* --utrecht-button-focus-transform-scale: unset; */
350
+ }
package/municipalities/xxllnc.css CHANGED
@@ -54,19 +54,30 @@
54
54
 
55
55
  --xxllnc-color-info: var(--xxllnc-color-primary);
56
56
  --xxllnc-color-alert-info: var(--xxllnc-color-black);
57
- --xxllnc-color-alert-info-background: var(--xxllncs-color-grey);
57
+ --xxllnc-color-alert-info-background: var(--xxllnc-color-grey);
58
+
59
+ --xxllnc-color-grey: #eaeaea;
60
+ --xxllnc-color-grey-95: #e5e5e5;
61
+ --xxllnc-color-grey-95-hover: #e5e5e5cc;
62
+ --xxllnc-color-grey-43: #6d6d6d;
58
63
 
59
64
  --xxllnc-color-lightgrey: #f5f5f5;
65
+
60
66
  --xxllnc-color-white: #ffffff;
67
+ --xxllnc-color-white-95: #f1f1f1;
68
+ --xxllnc-color-white-100: #ffffff00;
61
69
 
62
- --xxllncs-color-grey: #eaeaea;
63
70
  --xxllnc-color-black: #28282c;
71
+ --xxllnc-color-black-15: #2b2b2b;
72
+ --xxllnc-color-black-15-hover: #2b2b2bcc;
73
+ --xxllnc-color-black-21: #333338;
74
+ --xxllnc-color-black-38: #00000038;
64
75
 
65
76
  /* Typography */
66
77
  --xxllnc-typography-sans-serif-font-family: neue-haas-grotesk-text, sans-serif;
67
- --xxllnc-typography-header-font-family: neue-haas-grotesk-text, sans-serif,
68
- sans-serif;
78
+ --xxllnc-typography-header-font-family: neue-haas-grotesk-text, sans-serif;
69
79
  --xxllnc-typography-code-font-family: Monospace, "Lucida Console";
80
+ --xxllnc-typography-button-font-family: "Inter", sans-serif;
70
81
 
71
82
  /*
72
83
  *
@@ -130,7 +141,7 @@
130
141
 
131
142
  /* Header */
132
143
  --utrecht-page-header-color: var(--xxllnc-color-black);
133
- --utrecht-page-header-background-color: var(--xxllncs-color-grey);
144
+ --utrecht-page-header-background-color: var(--xxllnc-color-grey);
134
145
  --utrecht-page-header-padding-block-start: var(--xxllnc-size-sm);
135
146
  --utrecht-page-header-padding-block-end: var(--xxllnc-size-sm);
136
147
 
@@ -315,4 +326,91 @@
315
326
  /* Icon */
316
327
  --utrecht-alert-icon-gap: var(--xxllnc-size-xs);
317
328
  --utrecht-icon-gap: var(--xxllnc-size-xs);
329
+
330
+ /* Button */
331
+ --utrecht-button-color: var(--xxllnc-color-grey-95);
332
+ --utrecht-button-background-color: var(--xxllnc-color-black-15);
333
+
334
+ /* --utrecht-button-border-color: <color>; */
335
+ --utrecht-button-border-width: 0;
336
+ --utrecht-button-border-radius: var(--xxllnc-size-xs);
337
+ /* --utrecht-button-border-bottom-width: <length>; */
338
+
339
+ --utrecht-button-font-family: var(--xxllnc-typography-button-font-family);
340
+ --utrecht-button-font-size: inherit;
341
+ --utrecht-button-font-weight: inherit;
342
+
343
+ /* --utrecht-button-inline-size: <length>; */
344
+ /* --utrecht-button-letter-spacing: <length>; */
345
+ /* --utrecht-button-line-height: <length>; */
346
+
347
+ /* --utrecht-button-min-block-size: <length>; */
348
+ /* --utrecht-button-min-inline-size: <length>; */
349
+
350
+ --utrecht-button-padding-block-end: var(--xxllnc-size-2xs);
351
+ --utrecht-button-padding-block-start: var(--xxllnc-size-2xs);
352
+ --utrecht-button-padding-inline-end: var(--xxllnc-size-sm);
353
+ --utrecht-button-padding-inline-start: var(--xxllnc-size-sm);
354
+
355
+ /* --utrecht-button-text-transform: <length>; */
356
+
357
+ /* --utrecht-button-focus-background-color: <color>; */
358
+ /* --utrecht-button-focus-border-color: <color>; */
359
+ /* --utrecht-button-focus-color: <color>; */
360
+
361
+ --utrecht-button-hover-background-color: var(--xxllnc-color-black-15-hover);
362
+ --utrecht-button-hover-color: var(--xxllnc-color-grey-95-hover);
363
+ /* --utrecht-button-hover-border-color: unset; */
364
+ /* --utrecht-button-focus-transform-scale: unset; */
365
+
366
+ /* InputField */
367
+ --utrecht-form-input-background-color: var(--xxllnc-color-white-100);
368
+ --utrecht-form-input-border-width: var(--xxllnc-size-4xs);
369
+ --utrecht-form-input-border-color: var(--xxllnc-color-black-38);
370
+ --utrecht-form-input-border-radius: 6px;
371
+ --utrecht-form-input-color: var(--xxllnc-color-grey-43);
372
+ --utrecht-form-input-font-family: var(
373
+ --xxllnc-typography-sans-serif-font-family
374
+ );
375
+ --utrecht-form-input-font-size: 15px;
376
+ /* --utrecht-form-input-max-inline-size: ; */
377
+ --utrecht-form-input-padding-block-end: var(--xxllnc-size-xs);
378
+ --utrecht-form-input-padding-block-start: var(--xxllnc-size-xs);
379
+ --utrecht-form-input-padding-inline-end: var(--xxllnc-size-sm);
380
+ --utrecht-form-input-padding-inline-start: var(--xxllnc-size-sm);
381
+
382
+ /* InputField-TextField */
383
+ --utrecht-textbox-background-color: var(--xxllnc-color-white-100);
384
+ --utrecht-textbox-border-width: var(--xxllnc-size-4xs);
385
+ /* --utrecht-textbox-border-bottom-width: ; */
386
+ --utrecht-textbox-border-color: var(--xxllnc-color-black-38);
387
+ --utrecht-textbox-border-radius: 6px;
388
+ --utrecht-textbox-color: var(--xxllnc-color-grey-43);
389
+ --utrecht-textbox-font-family: var(
390
+ --xxllnc-typography-sans-serif-font-family
391
+ );
392
+ --utrecht-textbox-font-size: 15px;
393
+ /* --utrecht-textbox-max-inline-size: ; */
394
+ --utrecht-textbox-padding-block-end: var(--xxllnc-size-xs);
395
+ --utrecht-textbox-padding-block-start: var(--xxllnc-size-xs);
396
+ --utrecht-textbox-padding-inline-end: var(--xxllnc-size-sm);
397
+ --utrecht-textbox-padding-inline-start: var(--xxllnc-size-sm);
398
+
399
+ --utrecht-textbox-placeholder-color: var(--xxllnc-color-grey-43);
400
+
401
+ /* conduction select-field */
402
+ --skeleton-color-white: var(--xxllnc-color-white-100);
403
+ --conduction-input-select-border: var(--xxllnc-size-4xs) solid
404
+ var(--xxllnc-color-black-38);
405
+ --skeleton-border-radius-md: 6px;
406
+ --skeleton-size-xs: var(--xxllnc-size-xs);
407
+
408
+ /* conduction Card */
409
+ --utrecht-card-background-color: var(--xxllnc-color-black-21);
410
+ --utrecht-card-color: var(--xxllnc-color-white-95);
411
+ --utrehct-card-border-radius: 16px;
412
+ --utrecht-card-padding-block-end: var(--xxllnc-size-md);
413
+ --utrecht-card-padding-block-start: var(--xxllnc-size-md);
414
+ --utrecht-card-padding-inline-end: var(--xxllnc-size-md);
415
+ --utrecht-card-padding-inline-start: var(--xxllnc-size-md);
318
416
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/theme",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Conduction's design tokens theme",
5
5
  "main": "index.js",
6
6
  "repository": {
package/theme.css CHANGED
@@ -113,13 +113,17 @@
113
113
  --utrecht-typography-scale-4xl: var(--conduction-font-size-4xl);
114
114
 
115
115
  /* Document */
116
- --utrecht-document-font-family: var(--conduction-typography-sans-serif-font-family);
116
+ --utrecht-document-font-family: var(
117
+ --conduction-typography-sans-serif-font-family
118
+ );
117
119
  --utrecht-document-font-size: var(--conduction-font-size-md);
118
120
  --utrecht-document-color: var(--conduction-color-black);
119
121
  --utrecht-space-around: 1;
120
122
 
121
123
  /* Typography */
122
- --utrecht-typography-sans-serif-font-family: var(--conduction-typography-sans-serif-font-family);
124
+ --utrecht-typography-sans-serif-font-family: var(
125
+ --conduction-typography-sans-serif-font-family
126
+ );
123
127
 
124
128
  /* Header */
125
129
  --utrecht-page-header-color: var(--conduction-color-white);
@@ -133,35 +137,45 @@
133
137
  --utrecht-page-max-inline-size: 1140px;
134
138
 
135
139
  /* Headings */
136
- --utrecht-heading-1-font-family: var(--conduction-typography-header-font-family);
140
+ --utrecht-heading-1-font-family: var(
141
+ --conduction-typography-header-font-family
142
+ );
137
143
  --utrecht-heading-1-font-size: var(--conduction-font-size-3xl);
138
144
  --utrecht-heading-1-font-weight: var(--conduction-font-weight-bold);
139
145
  --utrecht-heading-1-letter-spacing: var(--conduction-letter-spacing-normal);
140
146
  --utrecht-heading-1-margin-block-start: var(--conduction-size-2xl);
141
147
  --utrecht-heading-1-margin-block-end: var(--conduction-size-md);
142
148
 
143
- --utrecht-heading-2-font-family: var(--conduction-typography-header-font-family);
149
+ --utrecht-heading-2-font-family: var(
150
+ --conduction-typography-header-font-family
151
+ );
144
152
  --utrecht-heading-2-font-weight: var(--conduction-font-weight-bold);
145
153
  --utrecht-heading-2-font-size: var(--conduction-font-size-2xl);
146
154
  --utrecht-heading-2-letter-spacing: var(--conduction-letter-spacing-normal);
147
155
  --utrecht-heading-2-margin-block-start: var(--conduction-size-2xl);
148
156
  --utrecht-heading-2-margin-block-end: var(--conduction-size-md);
149
157
 
150
- --utrecht-heading-3-font-family: var(--conduction-typography-header-font-family);
158
+ --utrecht-heading-3-font-family: var(
159
+ --conduction-typography-header-font-family
160
+ );
151
161
  --utrecht-heading-3-font-weight: var(--conduction-font-weight-normal);
152
162
  --utrecht-heading-3-font-size: var(--conduction-font-size-xl);
153
163
  --utrecht-heading-3-letter-spacing: var(--conduction-letter-spacing-normal);
154
164
  --utrecht-heading-3-margin-block-start: var(--conduction-size-xl);
155
165
  --utrecht-heading-3-margin-block-end: var(--conduction-size-md);
156
166
 
157
- --utrecht-heading-4-font-family: var(--conduction-typography-header-font-family);
167
+ --utrecht-heading-4-font-family: var(
168
+ --conduction-typography-header-font-family
169
+ );
158
170
  --utrecht-heading-4-font-size: var(--conduction-font-size-lg);
159
171
  --utrecht-heading-4-font-weight: var(--conduction-font-weight-normal);
160
172
  --utrecht-heading-4-letter-spacing: var(--conduction-letter-spacing-normal);
161
173
  --utrecht-heading-4-margin-block-start: var(--conduction-size-lf);
162
174
  --utrecht-heading-4-margin-block-end: var(--conduction-size-md);
163
175
 
164
- --utrecht-heading-5-font-family: var(--conduction-typography-header-font-family);
176
+ --utrecht-heading-5-font-family: var(
177
+ --conduction-typography-header-font-family
178
+ );
165
179
  --utrecht-heading-5-font-size: var(--conduction-font-size-md);
166
180
  --utrecht-heading-5-font-weight: var(--conduction-font-weight-light);
167
181
  --utrecht-heading-5-letter-spacing: var(--conduction-letter-spacing-normal);
@@ -171,7 +185,9 @@
171
185
 
172
186
  /* Paragraph */
173
187
  --utrecht-paragraph-color: var(--utrecht-document-color) inherit;
174
- --utrecht-paragraph-font-family: var(--conduction-typography-sans-serif-font-family);
188
+ --utrecht-paragraph-font-family: var(
189
+ --conduction-typography-sans-serif-font-family
190
+ );
175
191
  --utrecht-paragraph-font-size: var(--conduction-font-size-md);
176
192
  --utrecht-paragraph-font-weight: var(--conduction-font-weight-normal);
177
193
  --utrecht-paragraph-line-height: 1.5;
@@ -233,7 +249,9 @@
233
249
 
234
250
  --utrecht-code-block-color: var(--conduction-color-black);
235
251
  --utrecht-code-block-background-color: var(--conduction-color-lightgrey);
236
- --utrecht-code-block-font-family: var(--conduction-typography-code-font-family);
252
+ --utrecht-code-block-font-family: var(
253
+ --conduction-typography-code-font-family
254
+ );
237
255
  --utrecht-code-block-font-size: var(--conduction-font-size-md);
238
256
  --utrecht-code-block-font-weight: var(--conduction-font-weight-normal);
239
257
  --utrecht-code-block-line-height: var(--conduction-size-lg);
@@ -275,7 +293,9 @@
275
293
 
276
294
  /* Alert */
277
295
  --utrecht-alert-color: var(--conduction-color-alert-info);
278
- --utrecht-alert-background-color: var(--conduction-color-alert-info-background);
296
+ --utrecht-alert-background-color: var(
297
+ --conduction-color-alert-info-background
298
+ );
279
299
  /* --utrecht-alert-border-color: <color>; */
280
300
  /* --utrecht-alert-border-width: <length>; */
281
301
  --utrecht-alert-padding-block-start: var(--conduction-size-lg);
@@ -288,7 +308,9 @@
288
308
  /* --utrecht-alert-warning-color: <color>; */
289
309
  /* --utrecht-alert-warning-border-color: <color>; */
290
310
  /* --utrecht-alert-warning-border-width: <length>; */
291
- --utrecht-alert-error-background-color: var(--conduction-color-alert-error-background);
311
+ --utrecht-alert-error-background-color: var(
312
+ --conduction-color-alert-error-background
313
+ );
292
314
  --utrecht-alert-error-color: var(--conduction-color-alert-error);
293
315
  /* --utrecht-alert-error-border-color: <color>; */
294
316
  /* --utrecht-alert-error-border-width: <color>; */
@@ -304,9 +326,50 @@
304
326
  /* Icon */
305
327
  --utrecht-alert-icon-gap: var(--conduction-size-xs);
306
328
  --utrecht-icon-gap: var(--conduction-size-xs);
329
+
330
+ /* Button */
331
+ --utrecht-button-color: var(--conduction-color-white);
332
+ --utrecht-button-background-color: var(--conduction-color-primary);
333
+
334
+ /* --utrecht-button-border-color: <color>; */
335
+ --utrecht-button-border-width: 0;
336
+ --utrecht-button-border-radius: 3px;
337
+ /* --utrecht-button-border-bottom-width: <length>; */
338
+
339
+ --utrecht-button-font-family: var(
340
+ --conduction-typography-sans-serif-font-family
341
+ );
342
+ --utrecht-button-font-size: inherit;
343
+ --utrecht-button-font-weight: inherit;
344
+
345
+ /* --utrecht-button-inline-size: <length>; */
346
+ /* --utrecht-button-letter-spacing: <length>; */
347
+ /* --utrecht-button-line-height: <length>; */
348
+
349
+ /* --utrecht-button-min-block-size: <length>; */
350
+ /* --utrecht-button-min-inline-size: <length>; */
351
+
352
+ --utrecht-button-padding-block-end: var(--conduction-size-xs);
353
+ --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);
356
+
357
+ /* --utrecht-button-text-transform: <length>; */
358
+
359
+ /* --utrecht-button-focus-background-color: <color>; */
360
+ /* --utrecht-button-focus-border-color: <color>; */
361
+ /* --utrecht-button-focus-color: <color>; */
362
+
363
+ --utrecht-button-hover-background-color: var(
364
+ --conduction-color-primary-hover
365
+ );
366
+ --utrecht-button-hover-color: var(--conduction-color-white);
367
+ /* --utrecht-button-hover-border-color: unset; */
368
+ /* --utrecht-button-focus-transform-scale: unset; */
307
369
  }
308
370
 
309
371
  @font-face {
310
372
  font-family: "Aldritch";
311
373
  src: url("./fonts/Aldritch.woff2") format("woff2");
312
374
  }
375
+