@discourser/design-system 0.25.3 → 0.26.0

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 (49) hide show
  1. package/README.md +76 -73
  2. package/dist/{chunk-ZPECW4N2.js → chunk-4XOWPACJ.js} +257 -105
  3. package/dist/chunk-4XOWPACJ.js.map +1 -0
  4. package/dist/{chunk-QNCZYFUJ.cjs → chunk-AZ6QU2L2.cjs} +257 -105
  5. package/dist/chunk-AZ6QU2L2.cjs.map +1 -0
  6. package/dist/{chunk-TBLDQATQ.cjs → chunk-EBDNCZF6.cjs} +94 -54
  7. package/dist/chunk-EBDNCZF6.cjs.map +1 -0
  8. package/dist/{chunk-UHSL4N44.js → chunk-MAVUSE4F.js} +94 -55
  9. package/dist/chunk-MAVUSE4F.js.map +1 -0
  10. package/dist/components/Checkbox.d.ts +1 -1
  11. package/dist/components/Icons/LeftArrowIcon.d.ts +6 -0
  12. package/dist/components/Icons/LeftArrowIcon.d.ts.map +1 -0
  13. package/dist/components/Icons/RightArrowIcon.d.ts.map +1 -1
  14. package/dist/components/Icons/index.d.ts +1 -0
  15. package/dist/components/Icons/index.d.ts.map +1 -1
  16. package/dist/components/index.cjs +79 -75
  17. package/dist/components/index.d.ts +1 -0
  18. package/dist/components/index.d.ts.map +1 -1
  19. package/dist/components/index.js +1 -1
  20. package/dist/contracts/design-language.contract.d.ts +52 -18
  21. package/dist/contracts/design-language.contract.d.ts.map +1 -1
  22. package/dist/figma-codex.json +2 -2
  23. package/dist/index.cjs +83 -79
  24. package/dist/index.js +2 -2
  25. package/dist/languages/material3.language.d.ts.map +1 -1
  26. package/dist/languages/transform.d.ts +5 -5
  27. package/dist/languages/transform.d.ts.map +1 -1
  28. package/dist/preset/index.cjs +2 -2
  29. package/dist/preset/index.js +1 -1
  30. package/docs/token-name-mapping.json +614 -42
  31. package/docs/token-name-mapping.md +117 -29
  32. package/package.json +1 -1
  33. package/src/components/Icons/LeftArrowIcon.tsx +28 -0
  34. package/src/components/Icons/RightArrowIcon.tsx +7 -2
  35. package/src/components/Icons/index.ts +1 -0
  36. package/src/components/index.ts +1 -0
  37. package/src/contracts/design-language.contract.ts +69 -20
  38. package/src/languages/material3.language.ts +249 -80
  39. package/src/languages/transform.ts +45 -48
  40. package/src/preset/__tests__/translation-token-accuracy.test.ts +13 -0
  41. package/src/stories/foundations/Colors.mdx +9 -1
  42. package/src/stories/foundations/Elevation.mdx +23 -17
  43. package/src/stories/foundations/TokenReference.stories.tsx +970 -0
  44. package/src/stories/foundations/TonalPaletteDerivation.stories.tsx +782 -0
  45. package/src/stories/foundations/Typography.mdx +125 -25
  46. package/dist/chunk-QNCZYFUJ.cjs.map +0 -1
  47. package/dist/chunk-TBLDQATQ.cjs.map +0 -1
  48. package/dist/chunk-UHSL4N44.js.map +0 -1
  49. package/dist/chunk-ZPECW4N2.js.map +0 -1
@@ -174,119 +174,264 @@ var material3Language = {
174
174
  },
175
175
  typography: {
176
176
  fonts: {
177
- display: '"Fraunces", Georgia, serif',
178
- body: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
179
- mono: '"JetBrains Mono", "Fira Code", Consolas, monospace'
177
+ display: {
178
+ family: '"Fraunces", Georgia, serif',
179
+ figmaName: "Fraunces",
180
+ weightMap: {
181
+ "100": "Thin",
182
+ "300": "Light",
183
+ "400": "Regular",
184
+ "500": "Medium",
185
+ "600": "SemiBold",
186
+ "700": "Bold"
187
+ }
188
+ },
189
+ body: {
190
+ family: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
191
+ figmaName: "Poppins",
192
+ weightMap: {
193
+ "100": "Thin",
194
+ "300": "Light",
195
+ "400": "Regular",
196
+ "500": "Medium",
197
+ "600": "SemiBold",
198
+ "700": "Bold"
199
+ }
200
+ },
201
+ mono: {
202
+ family: '"JetBrains Mono", "Fira Code", Consolas, monospace',
203
+ figmaName: "JetBrains Mono",
204
+ weightMap: {
205
+ "400": "Regular",
206
+ "700": "Bold"
207
+ }
208
+ }
180
209
  },
181
210
  scale: {
211
+ // ── Display ─────────────────────────────────────────────────────────────
182
212
  displayLarge: {
183
- fontSize: "57px",
184
- lineHeight: "64px",
185
- fontWeight: "400",
186
- letterSpacing: "-0.25px",
187
- fontFamily: "display",
188
- fontVariationSettings: "'SOFT' 0, 'WONK' 1"
213
+ geometry: {
214
+ fontSize: "57px",
215
+ lineHeight: "64px",
216
+ letterSpacing: "-0.25px",
217
+ fontFamily: "display",
218
+ fontVariationSettings: "'SOFT' 0, 'WONK' 1"
219
+ },
220
+ defaultWeight: "regular",
221
+ weights: {
222
+ regular: { name: "regular", fontWeight: "400" },
223
+ semiBold: { name: "semiBold", fontWeight: "600" }
224
+ }
189
225
  },
190
226
  displayMedium: {
191
- fontSize: "45px",
192
- lineHeight: "52px",
193
- fontWeight: "400",
194
- letterSpacing: "0px",
195
- fontFamily: "display"
227
+ geometry: {
228
+ fontSize: "45px",
229
+ lineHeight: "52px",
230
+ letterSpacing: "0px",
231
+ fontFamily: "display"
232
+ },
233
+ defaultWeight: "regular",
234
+ weights: {
235
+ regular: { name: "regular", fontWeight: "400" },
236
+ semiBold: { name: "semiBold", fontWeight: "600" }
237
+ }
196
238
  },
197
239
  displaySmall: {
198
- fontSize: "36px",
199
- lineHeight: "44px",
200
- fontWeight: "400",
201
- letterSpacing: "0px",
202
- fontFamily: "display"
240
+ geometry: {
241
+ fontSize: "36px",
242
+ lineHeight: "44px",
243
+ letterSpacing: "0px",
244
+ fontFamily: "display"
245
+ },
246
+ defaultWeight: "regular",
247
+ weights: {
248
+ regular: { name: "regular", fontWeight: "400" },
249
+ semiBold: { name: "semiBold", fontWeight: "600" }
250
+ }
203
251
  },
252
+ // ── Headline ────────────────────────────────────────────────────────────
204
253
  headlineLarge: {
205
- fontSize: "32px",
206
- lineHeight: "40px",
207
- fontWeight: "400",
208
- letterSpacing: "0px",
209
- fontFamily: "display"
254
+ geometry: {
255
+ fontSize: "32px",
256
+ lineHeight: "40px",
257
+ letterSpacing: "0px",
258
+ fontFamily: "display"
259
+ },
260
+ defaultWeight: "regular",
261
+ weights: {
262
+ light: { name: "light", fontWeight: "300" },
263
+ regular: { name: "regular", fontWeight: "400" },
264
+ semiBold: { name: "semiBold", fontWeight: "600" }
265
+ }
210
266
  },
211
267
  headlineMedium: {
212
- fontSize: "28px",
213
- lineHeight: "36px",
214
- fontWeight: "400",
215
- letterSpacing: "0px",
216
- fontFamily: "display",
217
- fontVariationSettings: "'SOFT' 0, 'WONK' 1"
268
+ geometry: {
269
+ fontSize: "28px",
270
+ lineHeight: "36px",
271
+ letterSpacing: "0px",
272
+ fontFamily: "display",
273
+ fontVariationSettings: "'SOFT' 0, 'WONK' 1"
274
+ },
275
+ defaultWeight: "regular",
276
+ weights: {
277
+ light: { name: "light", fontWeight: "300" },
278
+ regular: { name: "regular", fontWeight: "400" },
279
+ semiBold: { name: "semiBold", fontWeight: "600" }
280
+ }
218
281
  },
219
282
  headlineSmall: {
220
- fontSize: "24px",
221
- lineHeight: "32px",
222
- fontWeight: "400",
223
- letterSpacing: "0px",
224
- fontFamily: "display"
283
+ geometry: {
284
+ fontSize: "24px",
285
+ lineHeight: "32px",
286
+ letterSpacing: "0px",
287
+ fontFamily: "display"
288
+ },
289
+ defaultWeight: "regular",
290
+ weights: {
291
+ light: { name: "light", fontWeight: "300" },
292
+ regular: { name: "regular", fontWeight: "400" },
293
+ semiBold: { name: "semiBold", fontWeight: "600" }
294
+ }
225
295
  },
296
+ // ── Title ────────────────────────────────────────────────────────────────
226
297
  titleLarge: {
227
- fontSize: "22px",
228
- lineHeight: "28px",
229
- fontWeight: "500",
230
- letterSpacing: "0px",
231
- fontFamily: "body"
298
+ geometry: {
299
+ fontSize: "22px",
300
+ lineHeight: "28px",
301
+ letterSpacing: "0px",
302
+ fontFamily: "body"
303
+ },
304
+ defaultWeight: "medium",
305
+ weights: {
306
+ regular: { name: "regular", fontWeight: "400" },
307
+ medium: { name: "medium", fontWeight: "500" },
308
+ semiBold: { name: "semiBold", fontWeight: "600" },
309
+ bold: { name: "bold", fontWeight: "700" }
310
+ }
232
311
  },
233
312
  titleMedium: {
234
- fontSize: "16px",
235
- lineHeight: "24px",
236
- fontWeight: "500",
237
- letterSpacing: "0.15px",
238
- fontFamily: "body"
313
+ geometry: {
314
+ fontSize: "16px",
315
+ lineHeight: "24px",
316
+ letterSpacing: "0.15px",
317
+ fontFamily: "body"
318
+ },
319
+ defaultWeight: "medium",
320
+ weights: {
321
+ regular: { name: "regular", fontWeight: "400" },
322
+ medium: { name: "medium", fontWeight: "500" },
323
+ semiBold: { name: "semiBold", fontWeight: "600" },
324
+ bold: { name: "bold", fontWeight: "700" }
325
+ }
239
326
  },
240
327
  titleSmall: {
241
- fontSize: "14px",
242
- lineHeight: "20px",
243
- fontWeight: "500",
244
- letterSpacing: "0.1px",
245
- fontFamily: "body"
328
+ geometry: {
329
+ fontSize: "14px",
330
+ lineHeight: "20px",
331
+ letterSpacing: "0.1px",
332
+ fontFamily: "body"
333
+ },
334
+ defaultWeight: "medium",
335
+ weights: {
336
+ regular: { name: "regular", fontWeight: "400" },
337
+ medium: { name: "medium", fontWeight: "500" },
338
+ semiBold: { name: "semiBold", fontWeight: "600" },
339
+ bold: { name: "bold", fontWeight: "700" }
340
+ }
246
341
  },
342
+ // ── Body ─────────────────────────────────────────────────────────────────
247
343
  // Custom override: bodyLarge bumped to 18px/28px (was M3 default 16px/24px)
248
344
  // Decision date: 2026-03-24
249
345
  bodyLarge: {
250
- fontSize: "18px",
251
- lineHeight: "28px",
252
- fontWeight: "400",
253
- letterSpacing: "0.5px",
254
- fontFamily: "body"
346
+ geometry: {
347
+ fontSize: "18px",
348
+ lineHeight: "28px",
349
+ letterSpacing: "0.5px",
350
+ fontFamily: "body"
351
+ },
352
+ defaultWeight: "regular",
353
+ weights: {
354
+ light: { name: "light", fontWeight: "300" },
355
+ regular: { name: "regular", fontWeight: "400" },
356
+ medium: { name: "medium", fontWeight: "500" },
357
+ semiBold: { name: "semiBold", fontWeight: "600" }
358
+ }
255
359
  },
256
360
  bodyMedium: {
257
- fontSize: "14px",
258
- lineHeight: "20px",
259
- fontWeight: "400",
260
- letterSpacing: "0.25px",
261
- fontFamily: "body"
361
+ geometry: {
362
+ fontSize: "14px",
363
+ lineHeight: "20px",
364
+ letterSpacing: "0.25px",
365
+ fontFamily: "body"
366
+ },
367
+ defaultWeight: "regular",
368
+ weights: {
369
+ light: { name: "light", fontWeight: "300" },
370
+ regular: { name: "regular", fontWeight: "400" },
371
+ medium: { name: "medium", fontWeight: "500" },
372
+ semiBold: { name: "semiBold", fontWeight: "600" }
373
+ }
262
374
  },
263
375
  bodySmall: {
264
- fontSize: "12px",
265
- lineHeight: "16px",
266
- fontWeight: "400",
267
- letterSpacing: "0.4px",
268
- fontFamily: "body"
376
+ geometry: {
377
+ fontSize: "12px",
378
+ lineHeight: "16px",
379
+ letterSpacing: "0.4px",
380
+ fontFamily: "body"
381
+ },
382
+ defaultWeight: "regular",
383
+ weights: {
384
+ light: { name: "light", fontWeight: "300" },
385
+ regular: { name: "regular", fontWeight: "400" },
386
+ medium: { name: "medium", fontWeight: "500" },
387
+ semiBold: { name: "semiBold", fontWeight: "600" }
388
+ }
269
389
  },
390
+ // ── Label ────────────────────────────────────────────────────────────────
270
391
  labelLarge: {
271
- fontSize: "14px",
272
- lineHeight: "20px",
273
- fontWeight: "500",
274
- letterSpacing: "0.1px",
275
- fontFamily: "body"
392
+ geometry: {
393
+ fontSize: "14px",
394
+ lineHeight: "20px",
395
+ letterSpacing: "0.1px",
396
+ fontFamily: "body"
397
+ },
398
+ defaultWeight: "medium",
399
+ weights: {
400
+ light: { name: "light", fontWeight: "300" },
401
+ medium: { name: "medium", fontWeight: "500" },
402
+ semiBold: { name: "semiBold", fontWeight: "600" },
403
+ bold: { name: "bold", fontWeight: "700" }
404
+ }
276
405
  },
277
406
  labelMedium: {
278
- fontSize: "12px",
279
- lineHeight: "16px",
280
- fontWeight: "500",
281
- letterSpacing: "0.5px",
282
- fontFamily: "body"
407
+ geometry: {
408
+ fontSize: "12px",
409
+ lineHeight: "16px",
410
+ letterSpacing: "0.5px",
411
+ fontFamily: "body"
412
+ },
413
+ defaultWeight: "medium",
414
+ weights: {
415
+ light: { name: "light", fontWeight: "300" },
416
+ medium: { name: "medium", fontWeight: "500" },
417
+ semiBold: { name: "semiBold", fontWeight: "600" },
418
+ bold: { name: "bold", fontWeight: "700" }
419
+ }
283
420
  },
284
421
  labelSmall: {
285
- fontSize: "11px",
286
- lineHeight: "16px",
287
- fontWeight: "500",
288
- letterSpacing: "0.5px",
289
- fontFamily: "body"
422
+ geometry: {
423
+ fontSize: "11px",
424
+ lineHeight: "16px",
425
+ letterSpacing: "0.5px",
426
+ fontFamily: "body"
427
+ },
428
+ defaultWeight: "medium",
429
+ weights: {
430
+ light: { name: "light", fontWeight: "300" },
431
+ medium: { name: "medium", fontWeight: "500" },
432
+ semiBold: { name: "semiBold", fontWeight: "600" },
433
+ bold: { name: "bold", fontWeight: "700" }
434
+ }
290
435
  }
291
436
  }
292
437
  },
@@ -366,9 +511,9 @@ function transformTokens(language) {
366
511
  language.colors
367
512
  ),
368
513
  fonts: {
369
- display: { value: language.typography.fonts.display },
370
- body: { value: language.typography.fonts.body },
371
- mono: { value: language.typography.fonts.mono }
514
+ display: { value: language.typography.fonts.display.family },
515
+ body: { value: language.typography.fonts.body.family },
516
+ mono: { value: language.typography.fonts.mono.family }
372
517
  },
373
518
  fontSizes: extractFontSizes(
374
519
  language.typography.scale
@@ -410,19 +555,24 @@ function transformSemanticTokens(_language) {
410
555
  function transformTextStyles(language) {
411
556
  const scale = language.typography.scale;
412
557
  return Object.fromEntries(
413
- Object.entries(scale).map(([name, style]) => [
414
- name,
415
- {
416
- value: {
417
- fontFamily: `{fonts.${style.fontFamily || "body"}}`,
418
- fontSize: style.fontSize,
419
- lineHeight: style.lineHeight,
420
- fontWeight: style.fontWeight,
421
- letterSpacing: style.letterSpacing,
422
- ...style.fontVariationSettings ? { fontVariationSettings: style.fontVariationSettings } : {}
558
+ Object.entries(scale).map(([name, step]) => {
559
+ const s2 = step;
560
+ const defaultVariant = s2.weights[s2.defaultWeight];
561
+ const fontWeight = defaultVariant?.fontWeight ?? "400";
562
+ return [
563
+ name,
564
+ {
565
+ value: {
566
+ fontFamily: `{fonts.${s2.geometry.fontFamily}}`,
567
+ fontSize: s2.geometry.fontSize,
568
+ lineHeight: s2.geometry.lineHeight,
569
+ fontWeight,
570
+ letterSpacing: s2.geometry.letterSpacing,
571
+ ...s2.geometry.fontVariationSettings ? { fontVariationSettings: s2.geometry.fontVariationSettings } : {}
572
+ }
423
573
  }
424
- }
425
- ])
574
+ ];
575
+ })
426
576
  );
427
577
  }
428
578
  function transformColorPalettes(palettes) {
@@ -442,24 +592,26 @@ function objectToTokens(obj) {
442
592
  }
443
593
  function extractFontSizes(scale) {
444
594
  return Object.fromEntries(
445
- Object.entries(scale).map(([name, style]) => [
595
+ Object.entries(scale).map(([name, step]) => [
446
596
  name,
447
- { value: style.fontSize }
597
+ { value: step.geometry.fontSize }
448
598
  ])
449
599
  );
450
600
  }
451
601
  function extractLineHeights(scale) {
452
602
  return Object.fromEntries(
453
- Object.entries(scale).map(([name, style]) => [
603
+ Object.entries(scale).map(([name, step]) => [
454
604
  name,
455
- { value: style.lineHeight }
605
+ { value: step.geometry.lineHeight }
456
606
  ])
457
607
  );
458
608
  }
459
609
  function extractFontWeights(scale) {
460
610
  const weights = /* @__PURE__ */ new Map();
461
- Object.values(scale).forEach((style) => {
462
- weights.set(style.fontWeight, style.fontWeight);
611
+ Object.values(scale).forEach((step) => {
612
+ Object.values(step.weights).forEach((variant) => {
613
+ if (variant) weights.set(variant.fontWeight, variant.fontWeight);
614
+ });
463
615
  });
464
616
  return Object.fromEntries(
465
617
  Array.from(weights.entries()).map(([key, value]) => [key, { value }])
@@ -467,9 +619,9 @@ function extractFontWeights(scale) {
467
619
  }
468
620
  function extractLetterSpacings(scale) {
469
621
  return Object.fromEntries(
470
- Object.entries(scale).map(([name, style]) => [
622
+ Object.entries(scale).map(([name, step]) => [
471
623
  name,
472
- { value: style.letterSpacing }
624
+ { value: step.geometry.letterSpacing }
473
625
  ])
474
626
  );
475
627
  }
@@ -4526,5 +4678,5 @@ var discourserPandaPreset = definePreset({
4526
4678
  });
4527
4679
 
4528
4680
  export { discourserPandaPreset, material3Language, transformToPandaTheme };
4529
- //# sourceMappingURL=chunk-ZPECW4N2.js.map
4530
- //# sourceMappingURL=chunk-ZPECW4N2.js.map
4681
+ //# sourceMappingURL=chunk-4XOWPACJ.js.map
4682
+ //# sourceMappingURL=chunk-4XOWPACJ.js.map