@conduction/theme 1.0.5 → 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 +359 -0
  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 ADDED
@@ -0,0 +1,359 @@
1
+ .xxllnc-theme,
2
+ .xxllnc-theme ::backdrop {
3
+ /* xxllnc Tokens */
4
+
5
+ /* Sizes */
6
+ --xxllnc-size-4xs: 1px;
7
+ --xxllnc-size-3xs: 2px;
8
+ --xxllnc-size-2xs: 4px;
9
+ --xxllnc-size-xs: 8px;
10
+ --xxllnc-size-sm: 14px;
11
+ --xxllnc-size-md: 18px;
12
+ --xxllnc-size-lg: 24px;
13
+ --xxllnc-size-xl: 32px;
14
+ --xxllnc-size-2xl: 48px;
15
+ --xxllnc-size-3xl: 72px;
16
+ --xxllnc-size-4xl: 96px;
17
+
18
+ /* Font sizes */
19
+ --xxllnc-font-size-4xs: 5px;
20
+ --xxllnc-font-size-3xs: 8px;
21
+ --xxllnc-font-size-2xs: 10px;
22
+ --xxllnc-font-size-xs: 12px;
23
+ --xxllnc-font-size-sm: 14px;
24
+ --xxllnc-font-size-md: 18px;
25
+ --xxllnc-font-size-lg: 20px;
26
+ --xxllnc-font-size-xl: 24px;
27
+ --xxllnc-font-size-2xl: 32px;
28
+ --xxllnc-font-size-3xl: 48px;
29
+ --xxllnc-font-size-4xl: 58px;
30
+
31
+ /* Font weights */
32
+ --xxllnc-font-weight-light: 100;
33
+ --xxllnc-font-weight-normal: 400;
34
+ --xxllnc-font-weight-bold: 700;
35
+
36
+ /* Letter Spacing */
37
+ --xxllnc-letter-spacing-normal: normal;
38
+
39
+ /* Colors */
40
+ --xxllnc-color-primary: #000000ad;
41
+ --xxllnc-color-primary-hover: #00000080;
42
+
43
+ --xxllnc-color-error: #dc3545;
44
+ --xxllnc-color-alert-error: #721c24;
45
+ --xxllnc-color-alert-error-background: #f8d7da;
46
+
47
+ --xxllnc-color-warning: #ffc107;
48
+ --xxllnc-color-alert-warning: #856404;
49
+ --xxllnc-color-alert-warning-background: #333338;
50
+
51
+ --xxllnc-color-success: #28a745;
52
+ --xxllnc-color-alert-success: #155724;
53
+ --xxllnc-color-alert-success-background: #d4edda;
54
+
55
+ --xxllnc-color-info: var(--xxllnc-color-primary);
56
+ --xxllnc-color-alert-info: var(--xxllnc-color-black);
57
+ --xxllnc-color-alert-info-background: var(--xxllnc-color-grey);
58
+
59
+ --xxllnc-color-white: #ffffff;
60
+ --xxllnc-color-lightgrey: #f5f5f5;
61
+ --xxllnc-color-grey: #eaeaea;
62
+ --xxllnc-color-grey-95: #e5e5e5;
63
+ --xxllnc-color-grey-95-hover: #e5e5e5cc;
64
+ --xxllnc-color-black: #28282c;
65
+ --xxllnc-color-black-15: #2b2b2b;
66
+ --xxllnc-color-black-15-hover: #2b2b2bcc;
67
+
68
+ /* Typography */
69
+ --xxllnc-typography-sans-serif-font-family: neue-haas-grotesk-text, sans-serif;
70
+ --xxllnc-typography-header-font-family: neue-haas-grotesk-text, sans-serif,
71
+ sans-serif;
72
+ --xxllnc-typography-code-font-family: Monospace, "Lucida Console";
73
+ --xxllnc-typography-button-font-family:"Inter", sans-serif;
74
+
75
+ /*
76
+ *
77
+ * xxllnc COMPONENT OVERRIDES
78
+ *
79
+ */
80
+
81
+ /* Container */
82
+ --xxllnc-container-padding-inline: var(--xxllnc-size-xl);
83
+
84
+ /*
85
+ *
86
+ * UTRECHT COMPONENTS & DEFAULTS
87
+ *
88
+ */
89
+
90
+ /* Sizes */
91
+
92
+ --utrecht-space-block-3xs: var(--xxllnc-size-3xs);
93
+ --utrecht-space-block-2xs: var(--xxllnc-size-2xs);
94
+ --utrecht-space-block-xs: var(--xxllnc-size-xs);
95
+ --utrecht-space-block-sm: var(--xxllnc-size-sm);
96
+ --utrecht-space-block-md: var(--xxllnc-size-md);
97
+ --utrecht-space-block-lg: var(--xxllnc-size-lg);
98
+ --utrecht-space-block-xl: var(--xxllnc-size-xl);
99
+ --utrecht-space-block-2xl: var(--xxllnc-size-2xl);
100
+ --utrecht-space-block-3xl: var(--xxllnc-size-3xl);
101
+
102
+ --utrecht-space-inline-3xs: var(--xxllnc-size-3xs);
103
+ --utrecht-space-inline-2xs: var(--xxllnc-size-2xs);
104
+ --utrecht-space-inline-xs: var(--xxllnc-size-xs);
105
+ --utrecht-space-inline-sm: var(--xxllnc-size-sm);
106
+ --utrecht-space-inline-md: var(--xxllnc-size-md);
107
+ --utrecht-space-inline-lg: var(--xxllnc-size-lg);
108
+ --utrecht-space-inline-xl: var(--xxllnc-size-xl);
109
+ --utrecht-space-inline-2xl: var(--xxllnc-size-2xl);
110
+ --utrecht-space-inline-3xl: var(--xxllnc-size-3xl);
111
+
112
+ --utrecht-typography-scale-2xs: var(--xxllnc-font-size-2xs);
113
+ --utrecht-typography-scale-xs: var(--xxllnc-font-size-xs);
114
+ --utrecht-typography-scale-sm: var(--xxllnc-font-size-sm);
115
+ --utrecht-typography-scale-md: var(--xxllnc-font-size-md);
116
+ --utrecht-typography-scale-lg: var(--xxllnc-font-size-lg);
117
+ --utrecht-typography-scale-xl: var(--xxllnc-font-size-xl);
118
+ --utrecht-typography-scale-2xl: var(--xxllnc-font-size-2xl);
119
+ --utrecht-typography-scale-3xl: var(--xxllnc-font-size-3xl);
120
+ --utrecht-typography-scale-4xl: var(--xxllnc-font-size-4xl);
121
+
122
+ /* Document */
123
+ --utrecht-document-font-family: var(
124
+ --xxllnc-typography-sans-serif-font-family
125
+ );
126
+ --utrecht-document-font-size: var(--xxllnc-font-size-sm);
127
+ --utrecht-document-color: var(--xxllnc-color-black);
128
+ --utrecht-space-around: 1;
129
+
130
+ /* Typography */
131
+ --utrecht-typography-sans-serif-font-family: var(
132
+ --xxllnc-typography-sans-serif-font-family
133
+ );
134
+
135
+ /* Header */
136
+ --utrecht-page-header-color: var(--xxllnc-color-black);
137
+ --utrecht-page-header-background-color: var(--xxllnc-color-grey);
138
+ --utrecht-page-header-padding-block-start: var(--xxllnc-size-sm);
139
+ --utrecht-page-header-padding-block-end: var(--xxllnc-size-sm);
140
+
141
+ /* Page */
142
+ --utrecht-page-padding-inline-start: var(--xxllnc-size-lg);
143
+ --utrecht-page-padding-inline-end: var(--xxllnc-size-lg);
144
+ --utrecht-page-max-inline-size: 1140px;
145
+ --utrehct-page-content-background-color: var(--xxllnc-color-black);
146
+
147
+ /* Headings */
148
+ --utrecht-heading-1-font-family: var(--xxllnc-typography-header-font-family);
149
+ --utrecht-heading-1-font-size: var(--xxllnc-font-size-3xl);
150
+ --utrecht-heading-1-font-weight: var(--xxllnc-font-weight-normal);
151
+ --utrecht-heading-1-letter-spacing: var(--xxllnc-letter-spacing-normal);
152
+ --utrecht-heading-1-margin-block-start: var(--xxllnc-size-2xl);
153
+ --utrecht-heading-1-margin-block-end: var(--xxllnc-size-md);
154
+
155
+ --utrecht-heading-2-font-family: var(--xxllnc-typography-header-font-family);
156
+ --utrecht-heading-2-font-weight: var(--xxllnc-font-weight-normal);
157
+ --utrecht-heading-2-font-size: var(--xxllnc-font-size-2xl);
158
+ --utrecht-heading-2-letter-spacing: var(--xxllnc-letter-spacing-normal);
159
+ --utrecht-heading-2-margin-block-start: var(--xxllnc-size-2xl);
160
+ --utrecht-heading-2-margin-block-end: var(--xxllnc-size-md);
161
+
162
+ --utrecht-heading-3-font-family: var(--xxllnc-typography-header-font-family);
163
+ --utrecht-heading-3-font-weight: var(--xxllnc-font-weight-normal);
164
+ --utrecht-heading-3-font-size: var(--xxllnc-font-size-xl);
165
+ --utrecht-heading-3-letter-spacing: var(--xxllnc-letter-spacing-normal);
166
+ --utrecht-heading-3-margin-block-start: var(--xxllnc-size-xl);
167
+ --utrecht-heading-3-margin-block-end: var(--xxllnc-size-md);
168
+
169
+ --utrecht-heading-4-font-family: var(--xxllnc-typography-header-font-family);
170
+ --utrecht-heading-4-font-size: var(--xxllnc-font-size-lg);
171
+ --utrecht-heading-4-font-weight: var(--xxllnc-font-weight-normal);
172
+ --utrecht-heading-4-letter-spacing: var(--xxllnc-letter-spacing-normal);
173
+ --utrecht-heading-4-margin-block-start: var(--xxllnc-size-lf);
174
+ --utrecht-heading-4-margin-block-end: var(--xxllnc-size-md);
175
+
176
+ --utrecht-heading-5-font-family: var(--xxllnc-typography-header-font-family);
177
+ --utrecht-heading-5-font-size: var(--xxllnc-font-size-md);
178
+ --utrecht-heading-5-font-weight: var(--xxllnc-font-weight-light);
179
+ --utrecht-heading-5-letter-spacing: var(--xxllnc-letter-spacing-normal);
180
+ --utrecht-heading-5-text-transform: unset;
181
+ --utrecht-heading-5-margin-block-start: var(--xxllnc-size-lg);
182
+ --utrecht-heading-5-margin-block-end: var(--conductino-size-md);
183
+
184
+ /* Paragraph */
185
+ --utrecht-paragraph-color: var(--utrecht-document-color) inherit;
186
+ --utrecht-paragraph-font-family: var(
187
+ --xxllnc-typography-sans-serif-font-family
188
+ );
189
+ --utrecht-paragraph-font-size: var(--xxllnc-font-size-sm);
190
+ --utrecht-paragraph-font-weight: var(--xxllnc-font-weight-normal);
191
+ --utrecht-paragraph-line-height: 1.5;
192
+ --utrecht-paragraph-margin-block-start: 0;
193
+ --utrecht-paragraph-margin-block-end: 0;
194
+
195
+ /* Footer */
196
+ --utrecht-page-footer-color: var(--xxllnc-color-primary);
197
+ --utrecht-page-footer-background-color: var(--xxllnc-color-white);
198
+ --utrecht-page-footer-background-image: unset;
199
+ --utrecht-page-footer-padding-block-start: var(--xxllnc-size-2xl);
200
+ --utrecht-page-footer-padding-block-end: var(--xxllnc-size-2xl);
201
+ --utrecht-page-footer-padding-inline-start: var(--xxllnc-size-sm);
202
+ --utrecht-page-footer-padding-inline-end: var(--xxllnc-size-sm);
203
+
204
+ /* List */
205
+ --utrecht-ordered-list-font-size: var(--utrecht-document-font-size) inherit;
206
+ --utrecht-ordered-list-padding-inline-start: var(--xxllnc-size-xl);
207
+ --utrecht-ordered-list-margin-block-start: var(--xxllnc-size-sm);
208
+ --utrecht-ordered-list-margin-block-end: var(--xxllnc-size-sm);
209
+
210
+ --utrecht-ordered-list-item-margin-block-start: var(--xxllnc-size-2xs);
211
+ --utrecht-ordered-list-item-margin-block-end: var(--xxllnc-size-2xs);
212
+ --utrecht-ordered-list-item-padding-inline-start: 1ch;
213
+
214
+ --utrecht-unordered-list-font-size: var(--utrecht-document-font-size);
215
+ --utrecht-unordered-list-margin-block-start: var(--xxllnc-size-md);
216
+ --utrecht-unordered-list-margin-block-end: 0;
217
+ --utrecht-unordered-list-padding-inline-start: 2ch;
218
+
219
+ --utrecht-unordered-list-item-margin-block-start: var(--xxllnc-size-xs);
220
+ --utrecht-unordered-list-item-margin-block-end: var(--xxllnc-size-xs);
221
+ --utrecht-unordered-list-item-padding-inline-start: 1ch;
222
+
223
+ /* Link */
224
+ --utrecht-link-color: var(--xxllnc-color-primary);
225
+ --utrecht-link-visited-color: var(--xxllnc-color-primary);
226
+ --utrecht-link-icon-size: var(--xxllnc-size-md);
227
+ --utrecht-link-text-decoration: none;
228
+ --utrecht-link-text-decoration-color: unset;
229
+ --utrecht-link-text-decoration-thickness: 0;
230
+ --utrecht-link-text-underline-offset: var(--xxllnc-size-3xs);
231
+
232
+ --utrecht-link-hover-color: var(--xxllnc-color-primary-hover);
233
+
234
+ /* Blockquote */
235
+ --utrecht-blockquote-content-color: var(--xxllnc-color-black);
236
+ --utrecht-blockquote-content-font-size: var(--xxllnc-size-md);
237
+ --utrecht-blockquote-margin-inline-start: var(--xxllnc-size-xl);
238
+ --utrecht-blockquote-margin-inline-end: var(--xxllnc-size-xl);
239
+
240
+ /* Code */
241
+ --utrecht-code-color: var(--xxllnc-color-black);
242
+ --utrecht-code-background-color: var(--xxllnc-color-lightgrey);
243
+ --utrecht-code-font-family: var(--xxllnc-typography-code-font-family);
244
+ --utrecht-code-font-size: inherit;
245
+
246
+ --utrecht-code-block-color: var(--xxllnc-color-black);
247
+ --utrecht-code-block-background-color: var(--xxllnc-color-lightgrey);
248
+ --utrecht-code-block-font-family: var(--xxllnc-typography-code-font-family);
249
+ --utrecht-code-block-font-size: var(--xxllnc-font-size-sm);
250
+ --utrecht-code-block-font-weight: var(--xxllnc-font-weight-normal);
251
+ --utrecht-code-block-line-height: var(--xxllnc-size-lg);
252
+ --utrecht-code-block-margin-block-start: var(--xxllnc-size-md);
253
+ --utrecht-code-block-margin-block-end: var(--xxllnc-size-md);
254
+ --utrecht-code-block-margin-inline-start: 0;
255
+ --utrecht-code-block-margin-inline-end: 0;
256
+ --utrecht-code-block-padding-block-start: var(--xxllnc-size-md);
257
+ --utrecht-code-block-padding-block-end: var(--xxllnc-size-md);
258
+ --utrecht-code-block-padding-inline-start: var(--xxllnc-size-md);
259
+ --utrecht-code-block-padding-inline-end: var(--xxllnc-size-md);
260
+
261
+ /* Pseudo Elements */
262
+ --utrecht-unordered-list-marker-color: var(--xxllnc-color-primary);
263
+
264
+ /* Table */
265
+ --utrecht-table-border-color: var(--xxllnc-color-lightgrey);
266
+ --utrecht-table-border-width: var(--xxllnc-size-4xs);
267
+ --utrecht-table-font-family: var(--utrecht-document-font-family) inherit;
268
+ --utrecht-table-font-size: var(--utrecht-document-font-size) inherit;
269
+ --utrecht-table-margin-block-start: var(--xxllnc-size-md);
270
+ --utrecht-table-margin-block-end: 0;
271
+
272
+ --utrecht-table-header-color: var(--utrecht-document-color) inherit;
273
+ --utrecht-table-header-font-weight: var(--xxllnc-font-weight-bold);
274
+ --utrecht-table-header-text-transform: unset;
275
+
276
+ --utrecht-table-header-cell-font-size: var(--utrecht-document-font-size)
277
+ inherit;
278
+ --utrecht-table-header-cell-font-weight: var(--xxllnc-font-weight-bold);
279
+ --utrecht-table-header-cell-text-transform: unset;
280
+
281
+ --utrecht-table-row-border-block-end-color: var(--xxllnc-color-lightgrey);
282
+ --utrecht-table-row-border-block-end-width: var(--xxllnc-size-4xs);
283
+
284
+ --utrecht-table-cell-padding-block-start: var(--xxllnc-size-md);
285
+ --utrecht-table-cell-padding-block-end: var(--xxllnc-size-md);
286
+ --utrecht-table-cell-padding-inline-start: var(--xxllnc-size-md);
287
+ --utrecht-table-cell-padding-inline-end: var(--xxllnc-size-md);
288
+
289
+ /* Alert */
290
+ --utrecht-alert-color: var(--xxllnc-color-alert-info);
291
+ --utrecht-alert-background-color: var(--xxllnc-color-alert-info-background);
292
+ /* --utrecht-alert-border-color: <color>; */
293
+ /* --utrecht-alert-border-width: <length>; */
294
+ --utrecht-alert-padding-block-start: var(--xxllnc-size-lg);
295
+ --utrecht-alert-padding-block-end: var(--xxllnc-size-lg);
296
+ --utrecht-alert-padding-inline-start: var(--xxllnc-size-lg);
297
+ --utrecht-alert-padding-inline-end: var(--xxllnc-size-lg);
298
+ /* --utrecht-alert-margin-block-start: <length>; */
299
+ /* --utrecht-alert-margin-block-end: <length>; */
300
+ /* --utrecht-alert-warning-background-color: <color>; */
301
+ /* --utrecht-alert-warning-color: <color>; */
302
+ /* --utrecht-alert-warning-border-color: <color>; */
303
+ /* --utrecht-alert-warning-border-width: <length>; */
304
+ --utrecht-alert-error-background-color: var(
305
+ --xxllnc-color-alert-error-background
306
+ );
307
+ --utrecht-alert-error-color: var(--xxllnc-color-alert-error);
308
+ /* --utrecht-alert-error-border-color: <color>; */
309
+ /* --utrecht-alert-error-border-width: <color>; */
310
+ /* --utrecht-alert-ok-background-color: <color>; */
311
+ /* --utrecht-alert-ok-color: <color>; */
312
+ /* --utrecht-alert-ok-border-color: <color>; */
313
+ /* --utrecht-alert-ok-border-width: <length>; */
314
+ --utrecht-alert-icon-color: var(--xxllnc-color-alert-info);
315
+ --utrecht-alert-icon-error-color: var(--xxllnc-color-alert-error);
316
+ --utrecht-alert-icon-warning-color: var(--xxllnc-color-alert-warning);
317
+ --utrecht-alert-icon-ok-color: var(--xxllnc-color-alert-success);
318
+
319
+ /* Icon */
320
+ --utrecht-alert-icon-gap: var(--xxllnc-size-xs);
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
+
359
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/theme",
3
- "version": "1.0.5",
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
+