@latty-ds/tokens 0.9.0 → 0.10.2

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 (7) hide show
  1. package/dist/configure.d.ts +21 -0
  2. package/dist/configure.js +43 -10
  3. package/dist/semantic.css +148 -4
  4. package/dist/tokens.js +1 -1
  5. package/dist/tokens.json +2 -2
  6. package/dist/types/public-types.d.ts +21 -0
  7. package/package.json +2 -2
package/dist/configure.d.ts CHANGED
@@ -46,11 +46,32 @@ interface LattyConfig {
46
46
  * referenced independently in your own CSS.
47
47
  */
48
48
  family?: FontFamilyEntry | FontFamilyEntry[];
49
+ /**
50
+ * A single dedicated heading font, resolved to `--lt-typography-fontFamilyHeading`.
51
+ * `lt-text`'s heading/display variants (`h1`–`h6`, `display-*`) read this
52
+ * token automatically, falling back to `fontFamilyPrimary` when unset —
53
+ * the built-in way to do a two-typeface identity without manually
54
+ * rerouting `--lt-typography-fontFamilySecondary` via hand-written CSS.
55
+ */
56
+ heading?: FontFamilyEntry;
49
57
  };
50
58
  border?: {
51
59
  radius?: string;
52
60
  width?: BorderWidth;
61
+ /**
62
+ * Shifts which neutral palette step `--lt-border-default`/`--lt-border-strong`/
63
+ * `--lt-border-subtle` resolve to. `'high'` moves them toward a bolder,
64
+ * higher-contrast step (darker in light mode, lighter in dark mode) without
65
+ * touching theme-switching machinery.
66
+ * @default 'default'
67
+ */
68
+ contrast?: 'default' | 'high';
53
69
  };
70
+ /**
71
+ * Set to `'none'` to flatten every `--lt-elevation-N` token (box-shadow) to
72
+ * `none` in one call, instead of overriding each level individually.
73
+ */
74
+ elevation?: 'none';
54
75
  /**
55
76
  * Controls which semantic token layer is emitted.
56
77
  * - `'light'` (default) — light tokens only; ignores OS preference
package/dist/configure.js CHANGED
@@ -218,7 +218,10 @@ ${indented.join("\n")}
218
218
  }
219
219
  `;
220
220
  }
221
- return `${wrapper} {
221
+ return `:root${wrapper} {
222
+ ${lines.join("\n")}
223
+ }
224
+ ${wrapper} {
222
225
  ${lines.join("\n")}
223
226
  }
224
227
  `;
@@ -239,11 +242,21 @@ 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 BORDER_STEPS = {
246
+ light: {
247
+ default: { default: "200", strong: "400", subtle: "100" },
248
+ high: { default: "400", strong: "600", subtle: "300" }
249
+ },
250
+ dark: {
251
+ default: { default: "700", strong: "500", subtle: "800" },
252
+ high: { default: "500", strong: "300", subtle: "600" }
253
+ }
254
+ };
242
255
  var buildLightSemanticTokens = (opts = {}) => {
243
256
  const map = {};
244
257
  map["text-default"] = "color-neutral-900";
245
258
  map["text-subtle"] = "color-neutral-600";
246
- map["text-muted"] = "color-neutral-400";
259
+ map["text-muted"] = "color-neutral-600";
247
260
  map["text-disabled"] = "color-neutral-400";
248
261
  map["text-inverse"] = "color-white";
249
262
  map["text-neutral"] = "color-neutral-700";
@@ -263,9 +276,10 @@ var buildLightSemanticTokens = (opts = {}) => {
263
276
  map[`bg-${v}`] = `color-${v}-500`;
264
277
  map[`bg-${v}-subtle`] = `color-${v}-100`;
265
278
  }
266
- map["border-default"] = "color-neutral-200";
267
- map["border-strong"] = "color-neutral-400";
268
- map["border-subtle"] = "color-neutral-100";
279
+ const lightBorderSteps = BORDER_STEPS.light[opts.borderContrast ?? "default"];
280
+ map["border-default"] = `color-neutral-${lightBorderSteps.default}`;
281
+ map["border-strong"] = `color-neutral-${lightBorderSteps.strong}`;
282
+ map["border-subtle"] = `color-neutral-${lightBorderSteps.subtle}`;
269
283
  map["border-focus"] = "color-primary-200";
270
284
  for (const v of VARIANTS) {
271
285
  map[`border-${v}`] = `color-${v}-200`;
@@ -282,7 +296,7 @@ var buildDarkSemanticTokens = (opts = {}) => {
282
296
  const map = {};
283
297
  map["text-default"] = "color-neutral-100";
284
298
  map["text-subtle"] = "color-neutral-300";
285
- map["text-muted"] = "color-neutral-500";
299
+ map["text-muted"] = "color-neutral-400";
286
300
  map["text-disabled"] = "color-neutral-600";
287
301
  map["text-inverse"] = "color-neutral-900";
288
302
  map["text-neutral"] = "color-neutral-200";
@@ -302,9 +316,10 @@ var buildDarkSemanticTokens = (opts = {}) => {
302
316
  map[`bg-${v}`] = `color-${v}-500`;
303
317
  map[`bg-${v}-subtle`] = `color-${v}-900`;
304
318
  }
305
- map["border-default"] = "color-neutral-700";
306
- map["border-strong"] = "color-neutral-500";
307
- map["border-subtle"] = "color-neutral-800";
319
+ const darkBorderSteps = BORDER_STEPS.dark[opts.borderContrast ?? "default"];
320
+ map["border-default"] = `color-neutral-${darkBorderSteps.default}`;
321
+ map["border-strong"] = `color-neutral-${darkBorderSteps.strong}`;
322
+ map["border-subtle"] = `color-neutral-${darkBorderSteps.subtle}`;
308
323
  map["border-focus"] = "color-primary-400";
309
324
  for (const v of VARIANTS) {
310
325
  map[`border-${v}`] = `color-${v}-700`;
@@ -394,16 +409,33 @@ var createStyleSheet = (userConfig = {}) => {
394
409
  tokens = { ...tokens, typography: { ...tokens.typography, ...typographyOverrides } };
395
410
  }
396
411
  }
412
+ if (userConfig.font?.heading) {
413
+ const [resolvedHeading] = resolveFontFamilies(userConfig.font.heading);
414
+ if (resolvedHeading.importUrl) importUrls.push(resolvedHeading.importUrl);
415
+ if (resolvedHeading.family) {
416
+ tokens = { ...tokens, typography: { ...tokens.typography, fontFamilyHeading: resolvedHeading.family } };
417
+ }
418
+ }
397
419
  if (userConfig.border?.radius) {
398
420
  tokens = { ...tokens, border: { ...tokens.border, radius: userConfig.border.radius } };
399
421
  }
400
422
  if (userConfig.border?.width) {
401
423
  tokens = { ...tokens, border: { ...tokens.border, width: resolveBorderWidth(userConfig.border.width) } };
402
424
  }
425
+ if (userConfig.elevation === "none") {
426
+ const flatElevation = Object.fromEntries(
427
+ Object.keys(tokens.elevation).map((level) => [level, "none"])
428
+ );
429
+ tokens = { ...tokens, elevation: flatElevation };
430
+ }
403
431
  const primitives = tokensToCss(tokens);
404
432
  const theme = userConfig.theme ?? "light";
405
433
  const primary = tokens.color.primary;
406
- const semanticOpts = { primary500: primary["500"], primary400: primary["400"] };
434
+ const semanticOpts = {
435
+ primary500: primary["500"],
436
+ primary400: primary["400"],
437
+ borderContrast: userConfig.border?.contrast
438
+ };
407
439
  let body;
408
440
  if (theme === "dark") {
409
441
  body = primitives + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts));
@@ -412,6 +444,7 @@ var createStyleSheet = (userConfig = {}) => {
412
444
  } else {
413
445
  body = primitives + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts)) + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts), "@media (prefers-color-scheme: dark)") + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts), '[data-theme="dark"]') + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts), '[data-theme="light"]');
414
446
  }
447
+ body += "\nbody { font-family: var(--lt-typography-fontFamilyPrimary); }\n";
415
448
  const importLines = importUrls.map((url) => `@import url("${url}");`).join("\n");
416
449
  return importLines ? `${importLines}
417
450
  ${body}` : body;
package/dist/semantic.css CHANGED
@@ -57,7 +57,7 @@
57
57
  --lt-text-error: var(--lt-color-error-700);
58
58
  --lt-text-info: var(--lt-color-info-700);
59
59
  --lt-text-inverse: var(--lt-color-white);
60
- --lt-text-muted: var(--lt-color-neutral-400);
60
+ --lt-text-muted: var(--lt-color-neutral-600);
61
61
  --lt-text-neutral: var(--lt-color-neutral-700);
62
62
  --lt-text-on-error: var(--lt-color-white);
63
63
  --lt-text-on-info: var(--lt-color-white);
@@ -131,7 +131,7 @@
131
131
  --lt-text-error: var(--lt-color-error-300);
132
132
  --lt-text-info: var(--lt-color-info-300);
133
133
  --lt-text-inverse: var(--lt-color-neutral-900);
134
- --lt-text-muted: var(--lt-color-neutral-500);
134
+ --lt-text-muted: var(--lt-color-neutral-400);
135
135
  --lt-text-neutral: var(--lt-color-neutral-200);
136
136
  --lt-text-on-error: var(--lt-color-white);
137
137
  --lt-text-on-info: var(--lt-color-white);
@@ -147,6 +147,78 @@
147
147
  }
148
148
  }
149
149
 
150
+ :root[data-theme="dark"] {
151
+ --lt-bg-default: var(--lt-color-neutral-900);
152
+ --lt-bg-error: var(--lt-color-error-500);
153
+ --lt-bg-error-subtle: var(--lt-color-error-900);
154
+ --lt-bg-info: var(--lt-color-info-500);
155
+ --lt-bg-info-subtle: var(--lt-color-info-900);
156
+ --lt-bg-inverse: var(--lt-color-neutral-50);
157
+ --lt-bg-neutral-subtle: var(--lt-color-neutral-800);
158
+ --lt-bg-overlay: var(--lt-color-neutral-700);
159
+ --lt-bg-primary: var(--lt-color-primary-500);
160
+ --lt-bg-primary-subtle: var(--lt-color-primary-900);
161
+ --lt-bg-secondary: var(--lt-color-secondary-500);
162
+ --lt-bg-secondary-subtle: var(--lt-color-secondary-900);
163
+ --lt-bg-subtle: var(--lt-color-neutral-800);
164
+ --lt-bg-success: var(--lt-color-success-500);
165
+ --lt-bg-success-subtle: var(--lt-color-success-900);
166
+ --lt-bg-surface: var(--lt-color-neutral-800);
167
+ --lt-bg-warning: var(--lt-color-warning-500);
168
+ --lt-bg-warning-subtle: var(--lt-color-warning-900);
169
+ --lt-border-default: var(--lt-color-neutral-700);
170
+ --lt-border-error: var(--lt-color-error-700);
171
+ --lt-border-error-strong: var(--lt-color-error-500);
172
+ --lt-border-focus: var(--lt-color-primary-400);
173
+ --lt-border-info: var(--lt-color-info-700);
174
+ --lt-border-info-strong: var(--lt-color-info-500);
175
+ --lt-border-primary: var(--lt-color-primary-700);
176
+ --lt-border-primary-strong: var(--lt-color-primary-500);
177
+ --lt-border-secondary: var(--lt-color-secondary-700);
178
+ --lt-border-secondary-strong: var(--lt-color-secondary-500);
179
+ --lt-border-strong: var(--lt-color-neutral-500);
180
+ --lt-border-subtle: var(--lt-color-neutral-800);
181
+ --lt-border-success: var(--lt-color-success-700);
182
+ --lt-border-success-strong: var(--lt-color-success-500);
183
+ --lt-border-warning: var(--lt-color-warning-700);
184
+ --lt-border-warning-strong: var(--lt-color-warning-500);
185
+ --lt-interactive-error-bg: var(--lt-color-error-400);
186
+ --lt-interactive-error-bg-active: var(--lt-color-error-500);
187
+ --lt-interactive-error-bg-hover: var(--lt-color-error-300);
188
+ --lt-interactive-info-bg: var(--lt-color-info-400);
189
+ --lt-interactive-info-bg-active: var(--lt-color-info-500);
190
+ --lt-interactive-info-bg-hover: var(--lt-color-info-300);
191
+ --lt-interactive-primary-bg: var(--lt-color-primary-400);
192
+ --lt-interactive-primary-bg-active: var(--lt-color-primary-500);
193
+ --lt-interactive-primary-bg-hover: var(--lt-color-primary-300);
194
+ --lt-interactive-secondary-bg: var(--lt-color-secondary-400);
195
+ --lt-interactive-secondary-bg-active: var(--lt-color-secondary-500);
196
+ --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-300);
197
+ --lt-interactive-success-bg: var(--lt-color-success-400);
198
+ --lt-interactive-success-bg-active: var(--lt-color-success-500);
199
+ --lt-interactive-success-bg-hover: var(--lt-color-success-300);
200
+ --lt-interactive-warning-bg: var(--lt-color-warning-400);
201
+ --lt-interactive-warning-bg-active: var(--lt-color-warning-500);
202
+ --lt-interactive-warning-bg-hover: var(--lt-color-warning-300);
203
+ --lt-text-default: var(--lt-color-neutral-100);
204
+ --lt-text-disabled: var(--lt-color-neutral-600);
205
+ --lt-text-error: var(--lt-color-error-300);
206
+ --lt-text-info: var(--lt-color-info-300);
207
+ --lt-text-inverse: var(--lt-color-neutral-900);
208
+ --lt-text-muted: var(--lt-color-neutral-400);
209
+ --lt-text-neutral: var(--lt-color-neutral-200);
210
+ --lt-text-on-error: var(--lt-color-white);
211
+ --lt-text-on-info: var(--lt-color-white);
212
+ --lt-text-on-primary: var(--lt-color-neutral-900);
213
+ --lt-text-on-secondary: var(--lt-color-white);
214
+ --lt-text-on-success: var(--lt-color-white);
215
+ --lt-text-on-warning: var(--lt-color-warning-800);
216
+ --lt-text-primary: var(--lt-color-primary-300);
217
+ --lt-text-secondary: var(--lt-color-secondary-300);
218
+ --lt-text-subtle: var(--lt-color-neutral-300);
219
+ --lt-text-success: var(--lt-color-success-300);
220
+ --lt-text-warning: var(--lt-color-warning-300);
221
+ }
150
222
  [data-theme="dark"] {
151
223
  --lt-bg-default: var(--lt-color-neutral-900);
152
224
  --lt-bg-error: var(--lt-color-error-500);
@@ -205,7 +277,7 @@
205
277
  --lt-text-error: var(--lt-color-error-300);
206
278
  --lt-text-info: var(--lt-color-info-300);
207
279
  --lt-text-inverse: var(--lt-color-neutral-900);
208
- --lt-text-muted: var(--lt-color-neutral-500);
280
+ --lt-text-muted: var(--lt-color-neutral-400);
209
281
  --lt-text-neutral: var(--lt-color-neutral-200);
210
282
  --lt-text-on-error: var(--lt-color-white);
211
283
  --lt-text-on-info: var(--lt-color-white);
@@ -220,6 +292,78 @@
220
292
  --lt-text-warning: var(--lt-color-warning-300);
221
293
  }
222
294
 
295
+ :root[data-theme="light"] {
296
+ --lt-bg-default: var(--lt-color-white);
297
+ --lt-bg-error: var(--lt-color-error-500);
298
+ --lt-bg-error-subtle: var(--lt-color-error-100);
299
+ --lt-bg-info: var(--lt-color-info-500);
300
+ --lt-bg-info-subtle: var(--lt-color-info-100);
301
+ --lt-bg-inverse: var(--lt-color-neutral-900);
302
+ --lt-bg-neutral-subtle: var(--lt-color-neutral-100);
303
+ --lt-bg-overlay: var(--lt-color-neutral-200);
304
+ --lt-bg-primary: var(--lt-color-primary-500);
305
+ --lt-bg-primary-subtle: var(--lt-color-primary-100);
306
+ --lt-bg-secondary: var(--lt-color-secondary-500);
307
+ --lt-bg-secondary-subtle: var(--lt-color-secondary-100);
308
+ --lt-bg-subtle: var(--lt-color-neutral-50);
309
+ --lt-bg-success: var(--lt-color-success-500);
310
+ --lt-bg-success-subtle: var(--lt-color-success-100);
311
+ --lt-bg-surface: var(--lt-color-neutral-100);
312
+ --lt-bg-warning: var(--lt-color-warning-500);
313
+ --lt-bg-warning-subtle: var(--lt-color-warning-100);
314
+ --lt-border-default: var(--lt-color-neutral-200);
315
+ --lt-border-error: var(--lt-color-error-200);
316
+ --lt-border-error-strong: var(--lt-color-error-500);
317
+ --lt-border-focus: var(--lt-color-primary-200);
318
+ --lt-border-info: var(--lt-color-info-200);
319
+ --lt-border-info-strong: var(--lt-color-info-500);
320
+ --lt-border-primary: var(--lt-color-primary-200);
321
+ --lt-border-primary-strong: var(--lt-color-primary-500);
322
+ --lt-border-secondary: var(--lt-color-secondary-200);
323
+ --lt-border-secondary-strong: var(--lt-color-secondary-500);
324
+ --lt-border-strong: var(--lt-color-neutral-400);
325
+ --lt-border-subtle: var(--lt-color-neutral-100);
326
+ --lt-border-success: var(--lt-color-success-200);
327
+ --lt-border-success-strong: var(--lt-color-success-500);
328
+ --lt-border-warning: var(--lt-color-warning-200);
329
+ --lt-border-warning-strong: var(--lt-color-warning-500);
330
+ --lt-interactive-error-bg: var(--lt-color-error-500);
331
+ --lt-interactive-error-bg-active: var(--lt-color-error-700);
332
+ --lt-interactive-error-bg-hover: var(--lt-color-error-600);
333
+ --lt-interactive-info-bg: var(--lt-color-info-500);
334
+ --lt-interactive-info-bg-active: var(--lt-color-info-700);
335
+ --lt-interactive-info-bg-hover: var(--lt-color-info-600);
336
+ --lt-interactive-primary-bg: var(--lt-color-primary-500);
337
+ --lt-interactive-primary-bg-active: var(--lt-color-primary-700);
338
+ --lt-interactive-primary-bg-hover: var(--lt-color-primary-600);
339
+ --lt-interactive-secondary-bg: var(--lt-color-secondary-500);
340
+ --lt-interactive-secondary-bg-active: var(--lt-color-secondary-700);
341
+ --lt-interactive-secondary-bg-hover: var(--lt-color-secondary-600);
342
+ --lt-interactive-success-bg: var(--lt-color-success-500);
343
+ --lt-interactive-success-bg-active: var(--lt-color-success-700);
344
+ --lt-interactive-success-bg-hover: var(--lt-color-success-600);
345
+ --lt-interactive-warning-bg: var(--lt-color-warning-500);
346
+ --lt-interactive-warning-bg-active: var(--lt-color-warning-700);
347
+ --lt-interactive-warning-bg-hover: var(--lt-color-warning-600);
348
+ --lt-text-default: var(--lt-color-neutral-900);
349
+ --lt-text-disabled: var(--lt-color-neutral-400);
350
+ --lt-text-error: var(--lt-color-error-700);
351
+ --lt-text-info: var(--lt-color-info-700);
352
+ --lt-text-inverse: var(--lt-color-white);
353
+ --lt-text-muted: var(--lt-color-neutral-600);
354
+ --lt-text-neutral: var(--lt-color-neutral-700);
355
+ --lt-text-on-error: var(--lt-color-white);
356
+ --lt-text-on-info: var(--lt-color-white);
357
+ --lt-text-on-primary: var(--lt-color-neutral-900);
358
+ --lt-text-on-secondary: var(--lt-color-white);
359
+ --lt-text-on-success: var(--lt-color-white);
360
+ --lt-text-on-warning: var(--lt-color-warning-800);
361
+ --lt-text-primary: var(--lt-color-primary-700);
362
+ --lt-text-secondary: var(--lt-color-secondary-700);
363
+ --lt-text-subtle: var(--lt-color-neutral-600);
364
+ --lt-text-success: var(--lt-color-success-700);
365
+ --lt-text-warning: var(--lt-color-warning-700);
366
+ }
223
367
  [data-theme="light"] {
224
368
  --lt-bg-default: var(--lt-color-white);
225
369
  --lt-bg-error: var(--lt-color-error-500);
@@ -278,7 +422,7 @@
278
422
  --lt-text-error: var(--lt-color-error-700);
279
423
  --lt-text-info: var(--lt-color-info-700);
280
424
  --lt-text-inverse: var(--lt-color-white);
281
- --lt-text-muted: var(--lt-color-neutral-400);
425
+ --lt-text-muted: var(--lt-color-neutral-600);
282
426
  --lt-text-neutral: var(--lt-color-neutral-700);
283
427
  --lt-text-on-error: var(--lt-color-white);
284
428
  --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-400","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"},"semanticDark":{"text-default":"color-neutral-100","text-subtle":"color-neutral-300","text-muted":"color-neutral-500","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"}};
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"},"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"}};
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-400",
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",
@@ -305,7 +305,7 @@
305
305
  "semanticDark": {
306
306
  "text-default": "color-neutral-100",
307
307
  "text-subtle": "color-neutral-300",
308
- "text-muted": "color-neutral-500",
308
+ "text-muted": "color-neutral-400",
309
309
  "text-disabled": "color-neutral-600",
310
310
  "text-inverse": "color-neutral-900",
311
311
  "text-neutral": "color-neutral-200",
package/dist/types/public-types.d.ts CHANGED
@@ -95,11 +95,32 @@ export interface LattyConfig {
95
95
  * referenced independently in your own CSS.
96
96
  */
97
97
  family?: FontFamilyEntry | FontFamilyEntry[];
98
+ /**
99
+ * A single dedicated heading font, resolved to `--lt-typography-fontFamilyHeading`.
100
+ * `lt-text`'s heading/display variants (`h1`–`h6`, `display-*`) read this
101
+ * token automatically, falling back to `fontFamilyPrimary` when unset —
102
+ * the built-in way to do a two-typeface identity without manually
103
+ * rerouting `--lt-typography-fontFamilySecondary` via hand-written CSS.
104
+ */
105
+ heading?: FontFamilyEntry;
98
106
  };
99
107
  border?: {
100
108
  radius?: string;
101
109
  width?: BorderWidth;
110
+ /**
111
+ * Shifts which neutral palette step `--lt-border-default`/`--lt-border-strong`/
112
+ * `--lt-border-subtle` resolve to. `'high'` moves them toward a bolder,
113
+ * higher-contrast step (darker in light mode, lighter in dark mode) without
114
+ * touching theme-switching machinery.
115
+ * @default 'default'
116
+ */
117
+ contrast?: 'default' | 'high';
102
118
  };
119
+ /**
120
+ * Set to `'none'` to flatten every `--lt-elevation-N` token (box-shadow) to
121
+ * `none` in one call, instead of overriding each level individually.
122
+ */
123
+ elevation?: 'none';
103
124
  /**
104
125
  * Controls which semantic token layer is emitted.
105
126
  * - `'light'` (default) — light tokens only; ignores OS preference
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latty-ds/tokens",
3
- "version": "0.9.0",
3
+ "version": "0.10.2",
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": {
@@ -60,5 +60,5 @@
60
60
  "dependencies": {
61
61
  "culori": "^4.0.2"
62
62
  },
63
- "gitHead": "8d5627a4a71bb4c7efdf3b754198c6450ce5467f"
63
+ "gitHead": "f8b8b747808307e0eab693efe2072a5b8ebf11be"
64
64
  }