@conduction/theme 1.0.6 → 1.0.7

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 +12 -0
  2. package/municipalities/leiden.css +49 -5
  3. package/municipalities/xxllnc.css +46 -5
  4. package/package.json +1 -1
  5. package/theme.css +74 -11
package/README.md CHANGED
@@ -1,2 +1,14 @@
1
1
  # conduction-theme
2
2
  Conduction's design tokens theme
3
+
4
+ ## Changelog
5
+
6
+ - **Version 1**
7
+
8
+ - 1.0.7: Added button tokens to all themes.
9
+ - 1.0.6: Added xxllnc theme.
10
+ - 1.0.5: Added page-max-inline size to Conduction theme.
11
+ - 1.0.4: Added Leiden theme.
12
+ - 1.0.3: Updated sizes.
13
+ - 1.0.2: Added Aldritch font.
14
+ - 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,23 @@
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
58
 
59
- --xxllnc-color-lightgrey: #f5f5f5;
60
59
  --xxllnc-color-white: #ffffff;
61
-
62
- --xxllncs-color-grey: #eaeaea;
60
+ --xxllnc-color-lightgrey: #f5f5f5;
61
+ --xxllnc-color-grey: #eaeaea;
62
+ --xxllnc-color-grey-95: #e5e5e5;
63
+ --xxllnc-color-grey-95-hover: #e5e5e5cc;
63
64
  --xxllnc-color-black: #28282c;
65
+ --xxllnc-color-black-15: #2b2b2b;
66
+ --xxllnc-color-black-15-hover: #2b2b2bcc;
64
67
 
65
68
  /* Typography */
66
69
  --xxllnc-typography-sans-serif-font-family: neue-haas-grotesk-text, sans-serif;
67
70
  --xxllnc-typography-header-font-family: neue-haas-grotesk-text, sans-serif,
68
71
  sans-serif;
69
72
  --xxllnc-typography-code-font-family: Monospace, "Lucida Console";
73
+ --xxllnc-typography-button-font-family:"Inter", sans-serif;
70
74
 
71
75
  /*
72
76
  *
@@ -130,7 +134,7 @@
130
134
 
131
135
  /* Header */
132
136
  --utrecht-page-header-color: var(--xxllnc-color-black);
133
- --utrecht-page-header-background-color: var(--xxllncs-color-grey);
137
+ --utrecht-page-header-background-color: var(--xxllnc-color-grey);
134
138
  --utrecht-page-header-padding-block-start: var(--xxllnc-size-sm);
135
139
  --utrecht-page-header-padding-block-end: var(--xxllnc-size-sm);
136
140
 
@@ -315,4 +319,41 @@
315
319
  /* Icon */
316
320
  --utrecht-alert-icon-gap: var(--xxllnc-size-xs);
317
321
  --utrecht-icon-gap: var(--xxllnc-size-xs);
322
+
323
+ /* Button */
324
+ --utrecht-button-color: var(--xxllnc-color-grey-95);
325
+ --utrecht-button-background-color: var(--xxllnc-color-black-15);
326
+
327
+ /* --utrecht-button-border-color: <color>; */
328
+ --utrecht-button-border-width: 0;
329
+ --utrecht-button-border-radius: var(--xxllnc-size-xs);
330
+ /* --utrecht-button-border-bottom-width: <length>; */
331
+
332
+ --utrecht-button-font-family: var(--xxllnc-typography-button-font-family);
333
+ --utrecht-button-font-size: inherit;
334
+ --utrecht-button-font-weight: inherit;
335
+
336
+ /* --utrecht-button-inline-size: <length>; */
337
+ /* --utrecht-button-letter-spacing: <length>; */
338
+ /* --utrecht-button-line-height: <length>; */
339
+
340
+ /* --utrecht-button-min-block-size: <length>; */
341
+ /* --utrecht-button-min-inline-size: <length>; */
342
+
343
+ --utrecht-button-padding-block-end: var(--xxllnc-size-2xs);
344
+ --utrecht-button-padding-block-start: var(--xxllnc-size-2xs);
345
+ --utrecht-button-padding-inline-end: var(--xxllnc-size-sm);
346
+ --utrecht-button-padding-inline-start: var(--xxllnc-size-sm);
347
+
348
+ /* --utrecht-button-text-transform: <length>; */
349
+
350
+ /* --utrecht-button-focus-background-color: <color>; */
351
+ /* --utrecht-button-focus-border-color: <color>; */
352
+ /* --utrecht-button-focus-color: <color>; */
353
+
354
+ --utrecht-button-hover-background-color: var(--xxllnc-color-black-15-hover);
355
+ --utrecht-button-hover-color: var(--xxllnc-color-grey-95-hover);
356
+ /* --utrecht-button-hover-border-color: unset; */
357
+ /* --utrecht-button-focus-transform-scale: unset; */
358
+
318
359
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/theme",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
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
+