@latty-ds/tokens 0.10.0 → 0.10.4
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.
- package/dist/configure.js +13 -3
- package/dist/semantic.css +166 -4
- package/dist/tokens.js +1 -1
- package/dist/tokens.json +10 -4
- package/package.json +3 -3
package/dist/configure.js
CHANGED
|
@@ -218,7 +218,10 @@ ${indented.join("\n")}
|
|
|
218
218
|
}
|
|
219
219
|
`;
|
|
220
220
|
}
|
|
221
|
-
return
|
|
221
|
+
return `:root${wrapper} {
|
|
222
|
+
${lines.join("\n")}
|
|
223
|
+
}
|
|
224
|
+
${wrapper} {
|
|
222
225
|
${lines.join("\n")}
|
|
223
226
|
}
|
|
224
227
|
`;
|
|
@@ -239,6 +242,11 @@ var accessibleTextOn = (bgHex) => {
|
|
|
239
242
|
const darkContrast = (L + 0.05) / 0.059;
|
|
240
243
|
return whiteContrast >= darkContrast ? "color-white" : "color-neutral-900";
|
|
241
244
|
};
|
|
245
|
+
var addNeutralInteractive = (map) => {
|
|
246
|
+
map["interactive-neutral-bg"] = "color-neutral-600";
|
|
247
|
+
map["interactive-neutral-bg-hover"] = "color-neutral-700";
|
|
248
|
+
map["interactive-neutral-bg-active"] = "color-neutral-800";
|
|
249
|
+
};
|
|
242
250
|
var BORDER_STEPS = {
|
|
243
251
|
light: {
|
|
244
252
|
default: { default: "200", strong: "400", subtle: "100" },
|
|
@@ -253,7 +261,7 @@ var buildLightSemanticTokens = (opts = {}) => {
|
|
|
253
261
|
const map = {};
|
|
254
262
|
map["text-default"] = "color-neutral-900";
|
|
255
263
|
map["text-subtle"] = "color-neutral-600";
|
|
256
|
-
map["text-muted"] = "color-neutral-
|
|
264
|
+
map["text-muted"] = "color-neutral-600";
|
|
257
265
|
map["text-disabled"] = "color-neutral-400";
|
|
258
266
|
map["text-inverse"] = "color-white";
|
|
259
267
|
map["text-neutral"] = "color-neutral-700";
|
|
@@ -287,13 +295,14 @@ var buildLightSemanticTokens = (opts = {}) => {
|
|
|
287
295
|
map[`interactive-${v}-bg-hover`] = `color-${v}-600`;
|
|
288
296
|
map[`interactive-${v}-bg-active`] = `color-${v}-700`;
|
|
289
297
|
}
|
|
298
|
+
addNeutralInteractive(map);
|
|
290
299
|
return map;
|
|
291
300
|
};
|
|
292
301
|
var buildDarkSemanticTokens = (opts = {}) => {
|
|
293
302
|
const map = {};
|
|
294
303
|
map["text-default"] = "color-neutral-100";
|
|
295
304
|
map["text-subtle"] = "color-neutral-300";
|
|
296
|
-
map["text-muted"] = "color-neutral-
|
|
305
|
+
map["text-muted"] = "color-neutral-400";
|
|
297
306
|
map["text-disabled"] = "color-neutral-600";
|
|
298
307
|
map["text-inverse"] = "color-neutral-900";
|
|
299
308
|
map["text-neutral"] = "color-neutral-200";
|
|
@@ -327,6 +336,7 @@ var buildDarkSemanticTokens = (opts = {}) => {
|
|
|
327
336
|
map[`interactive-${v}-bg-hover`] = `color-${v}-300`;
|
|
328
337
|
map[`interactive-${v}-bg-active`] = `color-${v}-500`;
|
|
329
338
|
}
|
|
339
|
+
addNeutralInteractive(map);
|
|
330
340
|
return map;
|
|
331
341
|
};
|
|
332
342
|
var buildSemanticTokens = (mode = "light", opts = {}) => mode === "dark" ? buildDarkSemanticTokens(opts) : buildLightSemanticTokens(opts);
|
package/dist/semantic.css
CHANGED
|
@@ -40,6 +40,9 @@
|
|
|
40
40
|
--lt-interactive-info-bg: var(--lt-color-info-500);
|
|
41
41
|
--lt-interactive-info-bg-active: var(--lt-color-info-700);
|
|
42
42
|
--lt-interactive-info-bg-hover: var(--lt-color-info-600);
|
|
43
|
+
--lt-interactive-neutral-bg: var(--lt-color-neutral-600);
|
|
44
|
+
--lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
|
|
45
|
+
--lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
|
|
43
46
|
--lt-interactive-primary-bg: var(--lt-color-primary-500);
|
|
44
47
|
--lt-interactive-primary-bg-active: var(--lt-color-primary-700);
|
|
45
48
|
--lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
|
|
@@ -57,7 +60,7 @@
|
|
|
57
60
|
--lt-text-error: var(--lt-color-error-700);
|
|
58
61
|
--lt-text-info: var(--lt-color-info-700);
|
|
59
62
|
--lt-text-inverse: var(--lt-color-white);
|
|
60
|
-
--lt-text-muted: var(--lt-color-neutral-
|
|
63
|
+
--lt-text-muted: var(--lt-color-neutral-600);
|
|
61
64
|
--lt-text-neutral: var(--lt-color-neutral-700);
|
|
62
65
|
--lt-text-on-error: var(--lt-color-white);
|
|
63
66
|
--lt-text-on-info: var(--lt-color-white);
|
|
@@ -114,6 +117,9 @@
|
|
|
114
117
|
--lt-interactive-info-bg: var(--lt-color-info-400);
|
|
115
118
|
--lt-interactive-info-bg-active: var(--lt-color-info-500);
|
|
116
119
|
--lt-interactive-info-bg-hover: var(--lt-color-info-300);
|
|
120
|
+
--lt-interactive-neutral-bg: var(--lt-color-neutral-600);
|
|
121
|
+
--lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
|
|
122
|
+
--lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
|
|
117
123
|
--lt-interactive-primary-bg: var(--lt-color-primary-400);
|
|
118
124
|
--lt-interactive-primary-bg-active: var(--lt-color-primary-500);
|
|
119
125
|
--lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
|
|
@@ -131,7 +137,7 @@
|
|
|
131
137
|
--lt-text-error: var(--lt-color-error-300);
|
|
132
138
|
--lt-text-info: var(--lt-color-info-300);
|
|
133
139
|
--lt-text-inverse: var(--lt-color-neutral-900);
|
|
134
|
-
--lt-text-muted: var(--lt-color-neutral-
|
|
140
|
+
--lt-text-muted: var(--lt-color-neutral-400);
|
|
135
141
|
--lt-text-neutral: var(--lt-color-neutral-200);
|
|
136
142
|
--lt-text-on-error: var(--lt-color-white);
|
|
137
143
|
--lt-text-on-info: var(--lt-color-white);
|
|
@@ -147,6 +153,81 @@
|
|
|
147
153
|
}
|
|
148
154
|
}
|
|
149
155
|
|
|
156
|
+
:root[data-theme="dark"] {
|
|
157
|
+
--lt-bg-default: var(--lt-color-neutral-900);
|
|
158
|
+
--lt-bg-error: var(--lt-color-error-500);
|
|
159
|
+
--lt-bg-error-subtle: var(--lt-color-error-900);
|
|
160
|
+
--lt-bg-info: var(--lt-color-info-500);
|
|
161
|
+
--lt-bg-info-subtle: var(--lt-color-info-900);
|
|
162
|
+
--lt-bg-inverse: var(--lt-color-neutral-50);
|
|
163
|
+
--lt-bg-neutral-subtle: var(--lt-color-neutral-800);
|
|
164
|
+
--lt-bg-overlay: var(--lt-color-neutral-700);
|
|
165
|
+
--lt-bg-primary: var(--lt-color-primary-500);
|
|
166
|
+
--lt-bg-primary-subtle: var(--lt-color-primary-900);
|
|
167
|
+
--lt-bg-secondary: var(--lt-color-secondary-500);
|
|
168
|
+
--lt-bg-secondary-subtle: var(--lt-color-secondary-900);
|
|
169
|
+
--lt-bg-subtle: var(--lt-color-neutral-800);
|
|
170
|
+
--lt-bg-success: var(--lt-color-success-500);
|
|
171
|
+
--lt-bg-success-subtle: var(--lt-color-success-900);
|
|
172
|
+
--lt-bg-surface: var(--lt-color-neutral-800);
|
|
173
|
+
--lt-bg-warning: var(--lt-color-warning-500);
|
|
174
|
+
--lt-bg-warning-subtle: var(--lt-color-warning-900);
|
|
175
|
+
--lt-border-default: var(--lt-color-neutral-700);
|
|
176
|
+
--lt-border-error: var(--lt-color-error-700);
|
|
177
|
+
--lt-border-error-strong: var(--lt-color-error-500);
|
|
178
|
+
--lt-border-focus: var(--lt-color-primary-400);
|
|
179
|
+
--lt-border-info: var(--lt-color-info-700);
|
|
180
|
+
--lt-border-info-strong: var(--lt-color-info-500);
|
|
181
|
+
--lt-border-primary: var(--lt-color-primary-700);
|
|
182
|
+
--lt-border-primary-strong: var(--lt-color-primary-500);
|
|
183
|
+
--lt-border-secondary: var(--lt-color-secondary-700);
|
|
184
|
+
--lt-border-secondary-strong: var(--lt-color-secondary-500);
|
|
185
|
+
--lt-border-strong: var(--lt-color-neutral-500);
|
|
186
|
+
--lt-border-subtle: var(--lt-color-neutral-800);
|
|
187
|
+
--lt-border-success: var(--lt-color-success-700);
|
|
188
|
+
--lt-border-success-strong: var(--lt-color-success-500);
|
|
189
|
+
--lt-border-warning: var(--lt-color-warning-700);
|
|
190
|
+
--lt-border-warning-strong: var(--lt-color-warning-500);
|
|
191
|
+
--lt-interactive-error-bg: var(--lt-color-error-400);
|
|
192
|
+
--lt-interactive-error-bg-active: var(--lt-color-error-500);
|
|
193
|
+
--lt-interactive-error-bg-hover: var(--lt-color-error-300);
|
|
194
|
+
--lt-interactive-info-bg: var(--lt-color-info-400);
|
|
195
|
+
--lt-interactive-info-bg-active: var(--lt-color-info-500);
|
|
196
|
+
--lt-interactive-info-bg-hover: var(--lt-color-info-300);
|
|
197
|
+
--lt-interactive-neutral-bg: var(--lt-color-neutral-600);
|
|
198
|
+
--lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
|
|
199
|
+
--lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
|
|
200
|
+
--lt-interactive-primary-bg: var(--lt-color-primary-400);
|
|
201
|
+
--lt-interactive-primary-bg-active: var(--lt-color-primary-500);
|
|
202
|
+
--lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
|
|
203
|
+
--lt-interactive-secondary-bg: var(--lt-color-secondary-400);
|
|
204
|
+
--lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
|
|
205
|
+
--lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
|
|
206
|
+
--lt-interactive-success-bg: var(--lt-color-success-400);
|
|
207
|
+
--lt-interactive-success-bg-active: var(--lt-color-success-500);
|
|
208
|
+
--lt-interactive-success-bg-hover: var(--lt-color-success-300);
|
|
209
|
+
--lt-interactive-warning-bg: var(--lt-color-warning-400);
|
|
210
|
+
--lt-interactive-warning-bg-active: var(--lt-color-warning-500);
|
|
211
|
+
--lt-interactive-warning-bg-hover: var(--lt-color-warning-300);
|
|
212
|
+
--lt-text-default: var(--lt-color-neutral-100);
|
|
213
|
+
--lt-text-disabled: var(--lt-color-neutral-600);
|
|
214
|
+
--lt-text-error: var(--lt-color-error-300);
|
|
215
|
+
--lt-text-info: var(--lt-color-info-300);
|
|
216
|
+
--lt-text-inverse: var(--lt-color-neutral-900);
|
|
217
|
+
--lt-text-muted: var(--lt-color-neutral-400);
|
|
218
|
+
--lt-text-neutral: var(--lt-color-neutral-200);
|
|
219
|
+
--lt-text-on-error: var(--lt-color-white);
|
|
220
|
+
--lt-text-on-info: var(--lt-color-white);
|
|
221
|
+
--lt-text-on-primary: var(--lt-color-neutral-900);
|
|
222
|
+
--lt-text-on-secondary: var(--lt-color-white);
|
|
223
|
+
--lt-text-on-success: var(--lt-color-white);
|
|
224
|
+
--lt-text-on-warning: var(--lt-color-warning-800);
|
|
225
|
+
--lt-text-primary: var(--lt-color-primary-300);
|
|
226
|
+
--lt-text-secondary: var(--lt-color-secondary-300);
|
|
227
|
+
--lt-text-subtle: var(--lt-color-neutral-300);
|
|
228
|
+
--lt-text-success: var(--lt-color-success-300);
|
|
229
|
+
--lt-text-warning: var(--lt-color-warning-300);
|
|
230
|
+
}
|
|
150
231
|
[data-theme="dark"] {
|
|
151
232
|
--lt-bg-default: var(--lt-color-neutral-900);
|
|
152
233
|
--lt-bg-error: var(--lt-color-error-500);
|
|
@@ -188,6 +269,9 @@
|
|
|
188
269
|
--lt-interactive-info-bg: var(--lt-color-info-400);
|
|
189
270
|
--lt-interactive-info-bg-active: var(--lt-color-info-500);
|
|
190
271
|
--lt-interactive-info-bg-hover: var(--lt-color-info-300);
|
|
272
|
+
--lt-interactive-neutral-bg: var(--lt-color-neutral-600);
|
|
273
|
+
--lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
|
|
274
|
+
--lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
|
|
191
275
|
--lt-interactive-primary-bg: var(--lt-color-primary-400);
|
|
192
276
|
--lt-interactive-primary-bg-active: var(--lt-color-primary-500);
|
|
193
277
|
--lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
|
|
@@ -205,7 +289,7 @@
|
|
|
205
289
|
--lt-text-error: var(--lt-color-error-300);
|
|
206
290
|
--lt-text-info: var(--lt-color-info-300);
|
|
207
291
|
--lt-text-inverse: var(--lt-color-neutral-900);
|
|
208
|
-
--lt-text-muted: var(--lt-color-neutral-
|
|
292
|
+
--lt-text-muted: var(--lt-color-neutral-400);
|
|
209
293
|
--lt-text-neutral: var(--lt-color-neutral-200);
|
|
210
294
|
--lt-text-on-error: var(--lt-color-white);
|
|
211
295
|
--lt-text-on-info: var(--lt-color-white);
|
|
@@ -220,6 +304,81 @@
|
|
|
220
304
|
--lt-text-warning: var(--lt-color-warning-300);
|
|
221
305
|
}
|
|
222
306
|
|
|
307
|
+
:root[data-theme="light"] {
|
|
308
|
+
--lt-bg-default: var(--lt-color-white);
|
|
309
|
+
--lt-bg-error: var(--lt-color-error-500);
|
|
310
|
+
--lt-bg-error-subtle: var(--lt-color-error-100);
|
|
311
|
+
--lt-bg-info: var(--lt-color-info-500);
|
|
312
|
+
--lt-bg-info-subtle: var(--lt-color-info-100);
|
|
313
|
+
--lt-bg-inverse: var(--lt-color-neutral-900);
|
|
314
|
+
--lt-bg-neutral-subtle: var(--lt-color-neutral-100);
|
|
315
|
+
--lt-bg-overlay: var(--lt-color-neutral-200);
|
|
316
|
+
--lt-bg-primary: var(--lt-color-primary-500);
|
|
317
|
+
--lt-bg-primary-subtle: var(--lt-color-primary-100);
|
|
318
|
+
--lt-bg-secondary: var(--lt-color-secondary-500);
|
|
319
|
+
--lt-bg-secondary-subtle: var(--lt-color-secondary-100);
|
|
320
|
+
--lt-bg-subtle: var(--lt-color-neutral-50);
|
|
321
|
+
--lt-bg-success: var(--lt-color-success-500);
|
|
322
|
+
--lt-bg-success-subtle: var(--lt-color-success-100);
|
|
323
|
+
--lt-bg-surface: var(--lt-color-neutral-100);
|
|
324
|
+
--lt-bg-warning: var(--lt-color-warning-500);
|
|
325
|
+
--lt-bg-warning-subtle: var(--lt-color-warning-100);
|
|
326
|
+
--lt-border-default: var(--lt-color-neutral-200);
|
|
327
|
+
--lt-border-error: var(--lt-color-error-200);
|
|
328
|
+
--lt-border-error-strong: var(--lt-color-error-500);
|
|
329
|
+
--lt-border-focus: var(--lt-color-primary-200);
|
|
330
|
+
--lt-border-info: var(--lt-color-info-200);
|
|
331
|
+
--lt-border-info-strong: var(--lt-color-info-500);
|
|
332
|
+
--lt-border-primary: var(--lt-color-primary-200);
|
|
333
|
+
--lt-border-primary-strong: var(--lt-color-primary-500);
|
|
334
|
+
--lt-border-secondary: var(--lt-color-secondary-200);
|
|
335
|
+
--lt-border-secondary-strong: var(--lt-color-secondary-500);
|
|
336
|
+
--lt-border-strong: var(--lt-color-neutral-400);
|
|
337
|
+
--lt-border-subtle: var(--lt-color-neutral-100);
|
|
338
|
+
--lt-border-success: var(--lt-color-success-200);
|
|
339
|
+
--lt-border-success-strong: var(--lt-color-success-500);
|
|
340
|
+
--lt-border-warning: var(--lt-color-warning-200);
|
|
341
|
+
--lt-border-warning-strong: var(--lt-color-warning-500);
|
|
342
|
+
--lt-interactive-error-bg: var(--lt-color-error-500);
|
|
343
|
+
--lt-interactive-error-bg-active: var(--lt-color-error-700);
|
|
344
|
+
--lt-interactive-error-bg-hover: var(--lt-color-error-600);
|
|
345
|
+
--lt-interactive-info-bg: var(--lt-color-info-500);
|
|
346
|
+
--lt-interactive-info-bg-active: var(--lt-color-info-700);
|
|
347
|
+
--lt-interactive-info-bg-hover: var(--lt-color-info-600);
|
|
348
|
+
--lt-interactive-neutral-bg: var(--lt-color-neutral-600);
|
|
349
|
+
--lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
|
|
350
|
+
--lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
|
|
351
|
+
--lt-interactive-primary-bg: var(--lt-color-primary-500);
|
|
352
|
+
--lt-interactive-primary-bg-active: var(--lt-color-primary-700);
|
|
353
|
+
--lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
|
|
354
|
+
--lt-interactive-secondary-bg: var(--lt-color-secondary-500);
|
|
355
|
+
--lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
|
|
356
|
+
--lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
|
|
357
|
+
--lt-interactive-success-bg: var(--lt-color-success-500);
|
|
358
|
+
--lt-interactive-success-bg-active: var(--lt-color-success-700);
|
|
359
|
+
--lt-interactive-success-bg-hover: var(--lt-color-success-600);
|
|
360
|
+
--lt-interactive-warning-bg: var(--lt-color-warning-500);
|
|
361
|
+
--lt-interactive-warning-bg-active: var(--lt-color-warning-700);
|
|
362
|
+
--lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
|
|
363
|
+
--lt-text-default: var(--lt-color-neutral-900);
|
|
364
|
+
--lt-text-disabled: var(--lt-color-neutral-400);
|
|
365
|
+
--lt-text-error: var(--lt-color-error-700);
|
|
366
|
+
--lt-text-info: var(--lt-color-info-700);
|
|
367
|
+
--lt-text-inverse: var(--lt-color-white);
|
|
368
|
+
--lt-text-muted: var(--lt-color-neutral-600);
|
|
369
|
+
--lt-text-neutral: var(--lt-color-neutral-700);
|
|
370
|
+
--lt-text-on-error: var(--lt-color-white);
|
|
371
|
+
--lt-text-on-info: var(--lt-color-white);
|
|
372
|
+
--lt-text-on-primary: var(--lt-color-neutral-900);
|
|
373
|
+
--lt-text-on-secondary: var(--lt-color-white);
|
|
374
|
+
--lt-text-on-success: var(--lt-color-white);
|
|
375
|
+
--lt-text-on-warning: var(--lt-color-warning-800);
|
|
376
|
+
--lt-text-primary: var(--lt-color-primary-700);
|
|
377
|
+
--lt-text-secondary: var(--lt-color-secondary-700);
|
|
378
|
+
--lt-text-subtle: var(--lt-color-neutral-600);
|
|
379
|
+
--lt-text-success: var(--lt-color-success-700);
|
|
380
|
+
--lt-text-warning: var(--lt-color-warning-700);
|
|
381
|
+
}
|
|
223
382
|
[data-theme="light"] {
|
|
224
383
|
--lt-bg-default: var(--lt-color-white);
|
|
225
384
|
--lt-bg-error: var(--lt-color-error-500);
|
|
@@ -261,6 +420,9 @@
|
|
|
261
420
|
--lt-interactive-info-bg: var(--lt-color-info-500);
|
|
262
421
|
--lt-interactive-info-bg-active: var(--lt-color-info-700);
|
|
263
422
|
--lt-interactive-info-bg-hover: var(--lt-color-info-600);
|
|
423
|
+
--lt-interactive-neutral-bg: var(--lt-color-neutral-600);
|
|
424
|
+
--lt-interactive-neutral-bg-active: var(--lt-color-neutral-800);
|
|
425
|
+
--lt-interactive-neutral-bg-hover: var(--lt-color-neutral-700);
|
|
264
426
|
--lt-interactive-primary-bg: var(--lt-color-primary-500);
|
|
265
427
|
--lt-interactive-primary-bg-active: var(--lt-color-primary-700);
|
|
266
428
|
--lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
|
|
@@ -278,7 +440,7 @@
|
|
|
278
440
|
--lt-text-error: var(--lt-color-error-700);
|
|
279
441
|
--lt-text-info: var(--lt-color-info-700);
|
|
280
442
|
--lt-text-inverse: var(--lt-color-white);
|
|
281
|
-
--lt-text-muted: var(--lt-color-neutral-
|
|
443
|
+
--lt-text-muted: var(--lt-color-neutral-600);
|
|
282
444
|
--lt-text-neutral: var(--lt-color-neutral-700);
|
|
283
445
|
--lt-text-on-error: var(--lt-color-white);
|
|
284
446
|
--lt-text-on-info: var(--lt-color-white);
|
package/dist/tokens.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const tokens = {"color":{"primary":{"50":"#f0e5df","100":"#ffd4b5","200":"#ffbb87","300":"#ffa860","400":"#ff9539","500":"#ff8200","600":"#d56400","700":"#963b00","800":"#5e3c25","900":"#3c1d05"},"primary-muted":{"50":"#e9e7e6","100":"#e8dfda","200":"#dfd1c8","300":"#dac8bd","400":"#d2beb2","500":"#c6b1a5","600":"#a08e82","700":"#6b5c53","800":"#50453e","900":"#2b2521"},"secondary":{"50":"#e5e7f1","100":"#cbd2ff","200":"#a3acf7","300":"#8a93f4","400":"#7076e5","500":"#5252c5","600":"#4544ad","700":"#333187","800":"#2e3254","900":"#202343"},"secondary-muted":{"50":"#e7e8e9","100":"#d5d7df","200":"#b4b7c4","300":"#a0a3b3","400":"#898c9e","500":"#6c6f81","600":"#5a5d6d","700":"#414351","800":"#363742","900":"#25262c"},"success":{"50":"#e1ebe2","100":"#beedc6","200":"#94e4a4","300":"#70df8b","400":"#4bd573","500":"#22c55e","600":"#00a244","700":"#006f22","800":"#2b4d32","900":"#0c2e16"},"success-muted":{"50":"#e7e8e7","100":"#dbe3dc","200":"#cad7cc","300":"#bfcfc1","400":"#b3c5b6","500":"#a5b8a8","600":"#839586","700":"#546256","800":"#404a41","900":"#222823"},"warning":{"50":"#ece7de","100":"#f5e0b5","200":"#f6d289","300":"#f9c962","400":"#f7bf3a","500":"#eeb308","600":"#c38e00","700":"#845a00","800":"#584720","900":"#332400"},"warning-muted":{"50":"#e8e8e6","100":"#e7e4dc","200":"#e2dcd0","300":"#ded7c8","400":"#dad1c0","500":"#d2c9b8","600":"#a9a090","700":"#6d6659","800":"#504c42","900":"#292621"},"error":{"50":"#f3e4e2","100":"#ffc8c1","200":"#ffa198","300":"#ff847b","400":"#ff6560","500":"#ef4444","600":"#cb2d31","700":"#950e18","800":"#5a312e","900":"#3f1917"},"error-muted":{"50":"#e9e7e7","100":"#e6dad8","200":"#d6c3c1","300":"#cdb4b2","400":"#bfa4a1","500":"#ab908d","600":"#8d7572","700":"#624e4c","800":"#4c3d3b","900":"#2d2423"},"info":{"50":"#e1e9ef","100":"#bce4fe","200":"#8fd2fd","300":"#6ac7ff","400":"#43b9fa","500":"#0ea5e9","600":"#0087c4","700":"#005c8d","800":"#1e465d","900":"#082a3c"},"info-muted":{"50":"#e7e8e9","100":"#d9e0e5","200":"#c5d0d7","300":"#b8c6cf","400":"#aab9c4","500":"#99a9b3","600":"#7a8993","700":"#4f5b63","800":"#3d464c","900":"#22272a"},"neutral":{"50":"#fafafa","100":"#f3f3f3","200":"#e4e4e4","300":"#cacaca","400":"#ababab","500":"#868686","600":"#696969","700":"#4d4d4d","800":"#333333","900":"#1b1b1b"},"white":"#FFFFFF","black":"#000000"},"spacing":{"px":{"0":"0px","1":"4px","2":"8px","3":"12px","4":"16px","5":"20px","6":"24px","7":"28px","8":"32px","9":"36px","10":"40px","11":"44px","12":"48px","13":"52px","14":"56px","15":"60px","16":"64px","17":"68px","18":"72px","19":"76px","20":"80px","21":"84px","22":"88px","23":"92px","24":"96px"},"rem":{"0":"0rem","1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","7":"1.75rem","8":"2rem","9":"2.25rem","10":"2.5rem","11":"2.75rem","12":"3rem","13":"3.25rem","14":"3.5rem","15":"3.75rem","16":"4rem","17":"4.25rem","18":"4.5rem","19":"4.75rem","20":"5rem","21":"5.25rem","22":"5.5rem","23":"5.75rem","24":"6rem"}},"border":{"radius":"0.5rem","width":"1px"},"typography":{"fontFamilyPrimary":"\"Hanken Grotesk\", sans-serif"},"elevation":{"0":"none","1":"0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06)","2":"0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06)","3":"0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05)","4":"0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04)","5":"0 25px 50px -12px rgb(27 27 27 / 0.25)"},"semantic":{"text-default":"color-neutral-900","text-subtle":"color-neutral-600","text-muted":"color-neutral-
|
|
1
|
+
export const tokens = {"color":{"primary":{"50":"#f0e5df","100":"#ffd4b5","200":"#ffbb87","300":"#ffa860","400":"#ff9539","500":"#ff8200","600":"#d56400","700":"#963b00","800":"#5e3c25","900":"#3c1d05"},"primary-muted":{"50":"#e9e7e6","100":"#e8dfda","200":"#dfd1c8","300":"#dac8bd","400":"#d2beb2","500":"#c6b1a5","600":"#a08e82","700":"#6b5c53","800":"#50453e","900":"#2b2521"},"secondary":{"50":"#e5e7f1","100":"#cbd2ff","200":"#a3acf7","300":"#8a93f4","400":"#7076e5","500":"#5252c5","600":"#4544ad","700":"#333187","800":"#2e3254","900":"#202343"},"secondary-muted":{"50":"#e7e8e9","100":"#d5d7df","200":"#b4b7c4","300":"#a0a3b3","400":"#898c9e","500":"#6c6f81","600":"#5a5d6d","700":"#414351","800":"#363742","900":"#25262c"},"success":{"50":"#e1ebe2","100":"#beedc6","200":"#94e4a4","300":"#70df8b","400":"#4bd573","500":"#22c55e","600":"#00a244","700":"#006f22","800":"#2b4d32","900":"#0c2e16"},"success-muted":{"50":"#e7e8e7","100":"#dbe3dc","200":"#cad7cc","300":"#bfcfc1","400":"#b3c5b6","500":"#a5b8a8","600":"#839586","700":"#546256","800":"#404a41","900":"#222823"},"warning":{"50":"#ece7de","100":"#f5e0b5","200":"#f6d289","300":"#f9c962","400":"#f7bf3a","500":"#eeb308","600":"#c38e00","700":"#845a00","800":"#584720","900":"#332400"},"warning-muted":{"50":"#e8e8e6","100":"#e7e4dc","200":"#e2dcd0","300":"#ded7c8","400":"#dad1c0","500":"#d2c9b8","600":"#a9a090","700":"#6d6659","800":"#504c42","900":"#292621"},"error":{"50":"#f3e4e2","100":"#ffc8c1","200":"#ffa198","300":"#ff847b","400":"#ff6560","500":"#ef4444","600":"#cb2d31","700":"#950e18","800":"#5a312e","900":"#3f1917"},"error-muted":{"50":"#e9e7e7","100":"#e6dad8","200":"#d6c3c1","300":"#cdb4b2","400":"#bfa4a1","500":"#ab908d","600":"#8d7572","700":"#624e4c","800":"#4c3d3b","900":"#2d2423"},"info":{"50":"#e1e9ef","100":"#bce4fe","200":"#8fd2fd","300":"#6ac7ff","400":"#43b9fa","500":"#0ea5e9","600":"#0087c4","700":"#005c8d","800":"#1e465d","900":"#082a3c"},"info-muted":{"50":"#e7e8e9","100":"#d9e0e5","200":"#c5d0d7","300":"#b8c6cf","400":"#aab9c4","500":"#99a9b3","600":"#7a8993","700":"#4f5b63","800":"#3d464c","900":"#22272a"},"neutral":{"50":"#fafafa","100":"#f3f3f3","200":"#e4e4e4","300":"#cacaca","400":"#ababab","500":"#868686","600":"#696969","700":"#4d4d4d","800":"#333333","900":"#1b1b1b"},"white":"#FFFFFF","black":"#000000"},"spacing":{"px":{"0":"0px","1":"4px","2":"8px","3":"12px","4":"16px","5":"20px","6":"24px","7":"28px","8":"32px","9":"36px","10":"40px","11":"44px","12":"48px","13":"52px","14":"56px","15":"60px","16":"64px","17":"68px","18":"72px","19":"76px","20":"80px","21":"84px","22":"88px","23":"92px","24":"96px"},"rem":{"0":"0rem","1":"0.25rem","2":"0.5rem","3":"0.75rem","4":"1rem","5":"1.25rem","6":"1.5rem","7":"1.75rem","8":"2rem","9":"2.25rem","10":"2.5rem","11":"2.75rem","12":"3rem","13":"3.25rem","14":"3.5rem","15":"3.75rem","16":"4rem","17":"4.25rem","18":"4.5rem","19":"4.75rem","20":"5rem","21":"5.25rem","22":"5.5rem","23":"5.75rem","24":"6rem"}},"border":{"radius":"0.5rem","width":"1px"},"typography":{"fontFamilyPrimary":"\"Hanken Grotesk\", sans-serif"},"elevation":{"0":"none","1":"0 1px 3px 0 rgb(27 27 27 / 0.1), 0 1px 2px 0 rgb(27 27 27 / 0.06)","2":"0 4px 6px -1px rgb(27 27 27 / 0.1), 0 2px 4px -1px rgb(27 27 27 / 0.06)","3":"0 10px 15px -3px rgb(27 27 27 / 0.1), 0 4px 6px -2px rgb(27 27 27 / 0.05)","4":"0 20px 25px -5px rgb(27 27 27 / 0.1), 0 10px 10px -5px rgb(27 27 27 / 0.04)","5":"0 25px 50px -12px rgb(27 27 27 / 0.25)"},"semantic":{"text-default":"color-neutral-900","text-subtle":"color-neutral-600","text-muted":"color-neutral-600","text-disabled":"color-neutral-400","text-inverse":"color-white","text-neutral":"color-neutral-700","text-primary":"color-primary-700","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-700","text-on-secondary":"color-white","text-success":"color-success-700","text-on-success":"color-white","text-warning":"color-warning-700","text-on-warning":"color-warning-800","text-error":"color-error-700","text-on-error":"color-white","text-info":"color-info-700","text-on-info":"color-white","bg-default":"color-white","bg-subtle":"color-neutral-50","bg-surface":"color-neutral-100","bg-overlay":"color-neutral-200","bg-inverse":"color-neutral-900","bg-neutral-subtle":"color-neutral-100","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-100","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-100","bg-success":"color-success-500","bg-success-subtle":"color-success-100","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-100","bg-error":"color-error-500","bg-error-subtle":"color-error-100","bg-info":"color-info-500","bg-info-subtle":"color-info-100","border-default":"color-neutral-200","border-strong":"color-neutral-400","border-subtle":"color-neutral-100","border-focus":"color-primary-200","border-primary":"color-primary-200","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-200","border-secondary-strong":"color-secondary-500","border-success":"color-success-200","border-success-strong":"color-success-500","border-warning":"color-warning-200","border-warning-strong":"color-warning-500","border-error":"color-error-200","border-error-strong":"color-error-500","border-info":"color-info-200","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-500","interactive-primary-bg-hover":"color-primary-600","interactive-primary-bg-active":"color-primary-700","interactive-secondary-bg":"color-secondary-500","interactive-secondary-bg-hover":"color-secondary-600","interactive-secondary-bg-active":"color-secondary-700","interactive-success-bg":"color-success-500","interactive-success-bg-hover":"color-success-600","interactive-success-bg-active":"color-success-700","interactive-warning-bg":"color-warning-500","interactive-warning-bg-hover":"color-warning-600","interactive-warning-bg-active":"color-warning-700","interactive-error-bg":"color-error-500","interactive-error-bg-hover":"color-error-600","interactive-error-bg-active":"color-error-700","interactive-info-bg":"color-info-500","interactive-info-bg-hover":"color-info-600","interactive-info-bg-active":"color-info-700","interactive-neutral-bg":"color-neutral-600","interactive-neutral-bg-hover":"color-neutral-700","interactive-neutral-bg-active":"color-neutral-800"},"semanticDark":{"text-default":"color-neutral-100","text-subtle":"color-neutral-300","text-muted":"color-neutral-400","text-disabled":"color-neutral-600","text-inverse":"color-neutral-900","text-neutral":"color-neutral-200","text-primary":"color-primary-300","text-on-primary":"color-neutral-900","text-secondary":"color-secondary-300","text-on-secondary":"color-white","text-success":"color-success-300","text-on-success":"color-white","text-warning":"color-warning-300","text-on-warning":"color-warning-800","text-error":"color-error-300","text-on-error":"color-white","text-info":"color-info-300","text-on-info":"color-white","bg-default":"color-neutral-900","bg-subtle":"color-neutral-800","bg-surface":"color-neutral-800","bg-overlay":"color-neutral-700","bg-inverse":"color-neutral-50","bg-neutral-subtle":"color-neutral-800","bg-primary":"color-primary-500","bg-primary-subtle":"color-primary-900","bg-secondary":"color-secondary-500","bg-secondary-subtle":"color-secondary-900","bg-success":"color-success-500","bg-success-subtle":"color-success-900","bg-warning":"color-warning-500","bg-warning-subtle":"color-warning-900","bg-error":"color-error-500","bg-error-subtle":"color-error-900","bg-info":"color-info-500","bg-info-subtle":"color-info-900","border-default":"color-neutral-700","border-strong":"color-neutral-500","border-subtle":"color-neutral-800","border-focus":"color-primary-400","border-primary":"color-primary-700","border-primary-strong":"color-primary-500","border-secondary":"color-secondary-700","border-secondary-strong":"color-secondary-500","border-success":"color-success-700","border-success-strong":"color-success-500","border-warning":"color-warning-700","border-warning-strong":"color-warning-500","border-error":"color-error-700","border-error-strong":"color-error-500","border-info":"color-info-700","border-info-strong":"color-info-500","interactive-primary-bg":"color-primary-400","interactive-primary-bg-hover":"color-primary-300","interactive-primary-bg-active":"color-primary-500","interactive-secondary-bg":"color-secondary-400","interactive-secondary-bg-hover":"color-secondary-300","interactive-secondary-bg-active":"color-secondary-500","interactive-success-bg":"color-success-400","interactive-success-bg-hover":"color-success-300","interactive-success-bg-active":"color-success-500","interactive-warning-bg":"color-warning-400","interactive-warning-bg-hover":"color-warning-300","interactive-warning-bg-active":"color-warning-500","interactive-error-bg":"color-error-400","interactive-error-bg-hover":"color-error-300","interactive-error-bg-active":"color-error-500","interactive-info-bg":"color-info-400","interactive-info-bg-hover":"color-info-300","interactive-info-bg-active":"color-info-500","interactive-neutral-bg":"color-neutral-600","interactive-neutral-bg-hover":"color-neutral-700","interactive-neutral-bg-active":"color-neutral-800"}};
|
package/dist/tokens.json
CHANGED
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
"semantic": {
|
|
234
234
|
"text-default": "color-neutral-900",
|
|
235
235
|
"text-subtle": "color-neutral-600",
|
|
236
|
-
"text-muted": "color-neutral-
|
|
236
|
+
"text-muted": "color-neutral-600",
|
|
237
237
|
"text-disabled": "color-neutral-400",
|
|
238
238
|
"text-inverse": "color-white",
|
|
239
239
|
"text-neutral": "color-neutral-700",
|
|
@@ -300,12 +300,15 @@
|
|
|
300
300
|
"interactive-error-bg-active": "color-error-700",
|
|
301
301
|
"interactive-info-bg": "color-info-500",
|
|
302
302
|
"interactive-info-bg-hover": "color-info-600",
|
|
303
|
-
"interactive-info-bg-active": "color-info-700"
|
|
303
|
+
"interactive-info-bg-active": "color-info-700",
|
|
304
|
+
"interactive-neutral-bg": "color-neutral-600",
|
|
305
|
+
"interactive-neutral-bg-hover": "color-neutral-700",
|
|
306
|
+
"interactive-neutral-bg-active": "color-neutral-800"
|
|
304
307
|
},
|
|
305
308
|
"semanticDark": {
|
|
306
309
|
"text-default": "color-neutral-100",
|
|
307
310
|
"text-subtle": "color-neutral-300",
|
|
308
|
-
"text-muted": "color-neutral-
|
|
311
|
+
"text-muted": "color-neutral-400",
|
|
309
312
|
"text-disabled": "color-neutral-600",
|
|
310
313
|
"text-inverse": "color-neutral-900",
|
|
311
314
|
"text-neutral": "color-neutral-200",
|
|
@@ -372,6 +375,9 @@
|
|
|
372
375
|
"interactive-error-bg-active": "color-error-500",
|
|
373
376
|
"interactive-info-bg": "color-info-400",
|
|
374
377
|
"interactive-info-bg-hover": "color-info-300",
|
|
375
|
-
"interactive-info-bg-active": "color-info-500"
|
|
378
|
+
"interactive-info-bg-active": "color-info-500",
|
|
379
|
+
"interactive-neutral-bg": "color-neutral-600",
|
|
380
|
+
"interactive-neutral-bg-hover": "color-neutral-700",
|
|
381
|
+
"interactive-neutral-bg-active": "color-neutral-800"
|
|
376
382
|
}
|
|
377
383
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@latty-ds/tokens",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.4",
|
|
4
4
|
"description": "Design tokens for the Latty design system — generates CSS custom properties, JSON, and JavaScript exports from a single config file",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -55,10 +55,10 @@
|
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@latty-ds/utils": "0.7.0",
|
|
57
57
|
"@types/culori": "^4.0.1",
|
|
58
|
-
"typescript": "^
|
|
58
|
+
"typescript": "^6.0.3"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"culori": "^4.0.2"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "ce56485456ff6ef71d5c4606bdf484928ae30401"
|
|
64
64
|
}
|