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