@discourser/design-system 0.13.0 → 0.14.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 (57) hide show
  1. package/dist/{chunk-BQAXPMOR.js → chunk-F7LHARS4.js} +2 -2
  2. package/dist/{chunk-BQAXPMOR.js.map → chunk-F7LHARS4.js.map} +1 -1
  3. package/dist/{chunk-ZNAYN5UV.js → chunk-M7J7WKJY.js} +178 -242
  4. package/dist/chunk-M7J7WKJY.js.map +1 -0
  5. package/dist/{chunk-XSX6TKJZ.cjs → chunk-QC44JPCA.cjs} +178 -242
  6. package/dist/chunk-QC44JPCA.cjs.map +1 -0
  7. package/dist/{chunk-MIBEMJNS.cjs → chunk-QP4EJI3G.cjs} +2 -2
  8. package/dist/{chunk-MIBEMJNS.cjs.map → chunk-QP4EJI3G.cjs.map} +1 -1
  9. package/dist/components/Badge.d.ts +1 -1
  10. package/dist/components/Badge.d.ts.map +1 -1
  11. package/dist/components/Checkbox.d.ts +2 -2
  12. package/dist/components/index.cjs +33 -33
  13. package/dist/components/index.js +1 -1
  14. package/dist/index.cjs +37 -37
  15. package/dist/index.js +2 -2
  16. package/dist/preset/colors/create-palette-bridge.d.ts +45 -0
  17. package/dist/preset/colors/create-palette-bridge.d.ts.map +1 -0
  18. package/dist/preset/colors/index.d.ts +13 -926
  19. package/dist/preset/colors/index.d.ts.map +1 -1
  20. package/dist/preset/colors/m3-error.d.ts +4 -306
  21. package/dist/preset/colors/m3-error.d.ts.map +1 -1
  22. package/dist/preset/colors/m3-primary.d.ts +1 -306
  23. package/dist/preset/colors/m3-primary.d.ts.map +1 -1
  24. package/dist/preset/colors/m3-secondary.d.ts +7 -0
  25. package/dist/preset/colors/m3-secondary.d.ts.map +1 -0
  26. package/dist/preset/colors/m3-tertiary.d.ts +7 -0
  27. package/dist/preset/colors/m3-tertiary.d.ts.map +1 -0
  28. package/dist/preset/index.cjs +2 -2
  29. package/dist/preset/index.d.ts.map +1 -1
  30. package/dist/preset/index.js +1 -1
  31. package/dist/preset/recipes/radio-group.d.ts.map +1 -1
  32. package/dist/preset/semantic-tokens.d.ts +4 -4
  33. package/dist/preset/shadows.d.ts +12 -26
  34. package/dist/preset/shadows.d.ts.map +1 -1
  35. package/package.json +8 -7
  36. package/src/components/Badge.tsx +1 -1
  37. package/src/languages/__tests__/transform.test.ts +100 -0
  38. package/src/preset/__tests__/shadows.test.ts +83 -0
  39. package/src/preset/__tests__/token-resolution.test.ts +247 -0
  40. package/src/preset/colors/create-palette-bridge.ts +156 -0
  41. package/src/preset/colors/index.ts +4 -0
  42. package/src/preset/colors/m3-error.ts +12 -77
  43. package/src/preset/colors/m3-primary.ts +5 -90
  44. package/src/preset/colors/m3-secondary.ts +13 -0
  45. package/src/preset/colors/m3-tertiary.ts +13 -0
  46. package/src/preset/index.ts +1 -6
  47. package/src/preset/recipes/__tests__/recipe-shadows.test.ts +238 -0
  48. package/src/preset/recipes/button.ts +3 -3
  49. package/src/preset/recipes/radio-group.ts +12 -11
  50. package/src/preset/semantic-tokens.ts +6 -6
  51. package/src/preset/shadows.ts +12 -26
  52. package/src/stories/foundations/Colors.mdx +1 -1
  53. package/src/stories/foundations/Elevation.mdx +37 -8
  54. package/src/stories/foundations/Spacing.mdx +1 -1
  55. package/src/stories/foundations/Typography.mdx +1 -1
  56. package/dist/chunk-XSX6TKJZ.cjs.map +0 -1
  57. package/dist/chunk-ZNAYN5UV.js.map +0 -1
@@ -463,121 +463,152 @@ function extractLetterSpacings(scale) {
463
463
  ])
464
464
  );
465
465
  }
466
- var m3 = material3Language.colors.primary;
467
- var primary = defineSemanticTokens.colors({
468
- // Base scale mapping M3 tonal to Radix
466
+ function createPaletteBridge({
467
+ name,
468
+ palette: m32,
469
+ includeDefault = false,
470
+ solidFgWhiteBoth = false
471
+ }) {
472
+ const tokens = {
473
+ // Base scale mapping M3 tonal to Radix (same for all chromatic colors)
474
+ "1": { value: { base: m32[99], _dark: m32[10] } },
475
+ "2": { value: { base: m32[95], _dark: m32[20] } },
476
+ "3": { value: { base: m32[90], _dark: m32[30] } },
477
+ "4": { value: { base: m32[80], _dark: m32[30] } },
478
+ "5": { value: { base: m32[70], _dark: m32[40] } },
479
+ "6": { value: { base: m32[60], _dark: m32[40] } },
480
+ "7": { value: { base: m32[50], _dark: m32[50] } },
481
+ "8": { value: { base: m32[40], _dark: m32[60] } },
482
+ "9": { value: { base: m32[40], _dark: m32[80] } },
483
+ // Primary action color
484
+ "10": { value: { base: m32[30], _dark: m32[70] } },
485
+ // Hover state
486
+ "11": { value: { base: m32[30], _dark: m32[90] } },
487
+ // Low-contrast text
488
+ "12": { value: { base: m32[10], _dark: m32[95] } },
489
+ // High-contrast text
490
+ // Alpha variants (for overlays/transparency)
491
+ // Increased opacity for better visibility in UI components
492
+ a1: { value: { base: `${m32[40]}08`, _dark: `${m32[80]}08` } },
493
+ a2: { value: { base: `${m32[40]}20`, _dark: `${m32[80]}20` } },
494
+ // ~13% for surface bg
495
+ a3: { value: { base: `${m32[40]}30`, _dark: `${m32[80]}30` } },
496
+ // ~19% for subtle bg
497
+ a4: { value: { base: `${m32[40]}40`, _dark: `${m32[80]}40` } },
498
+ // ~25% for hover states
499
+ a5: { value: { base: `${m32[40]}50`, _dark: `${m32[80]}50` } },
500
+ // ~31% for active states
501
+ a6: { value: { base: `${m32[40]}80`, _dark: `${m32[80]}80` } },
502
+ // ~50% for visible borders
503
+ a7: { value: { base: `${m32[40]}A0`, _dark: `${m32[80]}A0` } },
504
+ // ~63% for prominent borders
505
+ a8: { value: { base: `${m32[40]}B0`, _dark: `${m32[80]}B0` } },
506
+ // ~69%
507
+ a9: { value: { base: `${m32[40]}C0`, _dark: `${m32[80]}C0` } },
508
+ // ~75%
509
+ a10: { value: { base: `${m32[40]}D0`, _dark: `${m32[80]}D0` } },
510
+ // ~81%
511
+ a11: { value: { base: `${m32[40]}E0`, _dark: `${m32[80]}E0` } },
512
+ // ~88% for text colors
513
+ a12: { value: { base: `${m32[40]}F0`, _dark: `${m32[80]}F0` } },
514
+ // ~94% for high contrast
515
+ // Semantic variants (Park UI component styling)
516
+ solid: {
517
+ bg: {
518
+ DEFAULT: { value: { base: `{colors.${name}.9}`, _dark: `{colors.${name}.9}` } },
519
+ hover: { value: { base: `{colors.${name}.10}`, _dark: `{colors.${name}.10}` } }
520
+ },
521
+ fg: {
522
+ DEFAULT: solidFgWhiteBoth ? { value: { base: "white", _dark: "white" } } : { value: { base: "{colors.white}", _dark: `{colors.${name}.1}` } }
523
+ }
524
+ },
525
+ subtle: {
526
+ bg: {
527
+ DEFAULT: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
528
+ hover: { value: { base: `{colors.${name}.a4}`, _dark: `{colors.${name}.a4}` } },
529
+ active: { value: { base: `{colors.${name}.a5}`, _dark: `{colors.${name}.a5}` } }
530
+ },
531
+ fg: {
532
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
533
+ }
534
+ },
535
+ surface: {
536
+ bg: {
537
+ DEFAULT: { value: { base: `{colors.${name}.a2}`, _dark: `{colors.${name}.a2}` } },
538
+ active: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } }
539
+ },
540
+ border: {
541
+ DEFAULT: { value: { base: `{colors.${name}.a6}`, _dark: `{colors.${name}.a6}` } },
542
+ hover: { value: { base: `{colors.${name}.a7}`, _dark: `{colors.${name}.a7}` } }
543
+ },
544
+ fg: {
545
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
546
+ }
547
+ },
548
+ outline: {
549
+ bg: {
550
+ DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
551
+ hover: { value: { base: `{colors.${name}.a2}`, _dark: `{colors.${name}.a2}` } },
552
+ active: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } }
553
+ },
554
+ border: {
555
+ DEFAULT: { value: { base: `{colors.${name}.a7}`, _dark: `{colors.${name}.a7}` } }
556
+ },
557
+ fg: {
558
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
559
+ }
560
+ },
561
+ plain: {
562
+ bg: {
563
+ DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
564
+ hover: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
565
+ active: { value: { base: `{colors.${name}.a4}`, _dark: `{colors.${name}.a4}` } }
566
+ },
567
+ fg: {
568
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
569
+ }
570
+ }
571
+ };
572
+ if (includeDefault) {
573
+ return defineSemanticTokens.colors({
574
+ DEFAULT: { value: { base: m32[40], _dark: m32[80] } },
575
+ ...tokens
576
+ });
577
+ }
578
+ return defineSemanticTokens.colors(tokens);
579
+ }
580
+
581
+ // src/preset/colors/m3-primary.ts
582
+ var primary = createPaletteBridge({
583
+ name: "primary",
584
+ palette: material3Language.colors.primary
585
+ });
586
+
587
+ // src/preset/colors/m3-secondary.ts
588
+ var secondary = createPaletteBridge({
589
+ name: "secondary",
590
+ palette: material3Language.colors.secondary
591
+ });
592
+
593
+ // src/preset/colors/m3-tertiary.ts
594
+ var tertiary = createPaletteBridge({
595
+ name: "tertiary",
596
+ palette: material3Language.colors.tertiary
597
+ });
598
+ var m3 = material3Language.colors.neutral;
599
+ var neutral = defineSemanticTokens.colors({
469
600
  "1": { value: { base: m3[99], _dark: m3[10] } },
470
601
  "2": { value: { base: m3[95], _dark: m3[20] } },
471
- "3": { value: { base: m3[90], _dark: m3[30] } },
602
+ "3": { value: { base: m3[90], _dark: m3[20] } },
472
603
  "4": { value: { base: m3[80], _dark: m3[30] } },
473
- "5": { value: { base: m3[70], _dark: m3[40] } },
604
+ "5": { value: { base: m3[70], _dark: m3[30] } },
474
605
  "6": { value: { base: m3[60], _dark: m3[40] } },
475
606
  "7": { value: { base: m3[50], _dark: m3[50] } },
476
607
  "8": { value: { base: m3[40], _dark: m3[60] } },
477
- "9": { value: { base: m3[40], _dark: m3[80] } },
478
- // Primary action color
608
+ "9": { value: { base: m3[40], _dark: m3[60] } },
479
609
  "10": { value: { base: m3[30], _dark: m3[70] } },
480
- // Hover state
481
- "11": { value: { base: m3[30], _dark: m3[90] } },
482
- // Low-contrast text
483
- "12": { value: { base: m3[10], _dark: m3[95] } },
484
- // High-contrast text
485
- // Alpha variants (for overlays/transparency)
486
- // Increased opacity for better visibility in UI components
487
- a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
488
- a2: { value: { base: `${m3[40]}20`, _dark: `${m3[80]}20` } },
489
- // ~13% for surface bg
490
- a3: { value: { base: `${m3[40]}30`, _dark: `${m3[80]}30` } },
491
- // ~19% for subtle bg
492
- a4: { value: { base: `${m3[40]}40`, _dark: `${m3[80]}40` } },
493
- // ~25% for hover states
494
- a5: { value: { base: `${m3[40]}50`, _dark: `${m3[80]}50` } },
495
- // ~31% for active states
496
- a6: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } },
497
- // ~50% for visible borders
498
- a7: { value: { base: `${m3[40]}A0`, _dark: `${m3[80]}A0` } },
499
- // ~63% for prominent borders
500
- a8: { value: { base: `${m3[40]}B0`, _dark: `${m3[80]}B0` } },
501
- // ~69%
502
- a9: { value: { base: `${m3[40]}C0`, _dark: `${m3[80]}C0` } },
503
- // ~75%
504
- a10: { value: { base: `${m3[40]}D0`, _dark: `${m3[80]}D0` } },
505
- // ~81%
506
- a11: { value: { base: `${m3[40]}E0`, _dark: `${m3[80]}E0` } },
507
- // ~88% for text colors
508
- a12: { value: { base: `${m3[40]}F0`, _dark: `${m3[80]}F0` } },
509
- // ~94% for high contrast
510
- // Semantic variants (Park UI component styling)
511
- solid: {
512
- bg: {
513
- DEFAULT: { value: { base: "{colors.primary.9}", _dark: "{colors.primary.9}" } },
514
- hover: { value: { base: "{colors.primary.10}", _dark: "{colors.primary.10}" } }
515
- },
516
- fg: {
517
- DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.primary.1}" } }
518
- }
519
- },
520
- subtle: {
521
- bg: {
522
- DEFAULT: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
523
- hover: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } },
524
- active: { value: { base: "{colors.primary.a5}", _dark: "{colors.primary.a5}" } }
525
- },
526
- fg: {
527
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
528
- }
529
- },
530
- surface: {
531
- bg: {
532
- DEFAULT: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
533
- active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
534
- },
535
- border: {
536
- DEFAULT: { value: { base: "{colors.primary.a6}", _dark: "{colors.primary.a6}" } },
537
- hover: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
538
- },
539
- fg: {
540
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
541
- }
542
- },
543
- outline: {
544
- bg: {
545
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
546
- hover: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
547
- active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
548
- },
549
- border: {
550
- DEFAULT: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
551
- },
552
- fg: {
553
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
554
- }
555
- },
556
- plain: {
557
- bg: {
558
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
559
- hover: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
560
- active: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } }
561
- },
562
- fg: {
563
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
564
- }
565
- }
566
- });
567
- var m32 = material3Language.colors.neutral;
568
- var neutral = defineSemanticTokens.colors({
569
- "1": { value: { base: m32[99], _dark: m32[10] } },
570
- "2": { value: { base: m32[95], _dark: m32[20] } },
571
- "3": { value: { base: m32[90], _dark: m32[20] } },
572
- "4": { value: { base: m32[80], _dark: m32[30] } },
573
- "5": { value: { base: m32[70], _dark: m32[30] } },
574
- "6": { value: { base: m32[60], _dark: m32[40] } },
575
- "7": { value: { base: m32[50], _dark: m32[50] } },
576
- "8": { value: { base: m32[40], _dark: m32[60] } },
577
- "9": { value: { base: m32[40], _dark: m32[60] } },
578
- "10": { value: { base: m32[30], _dark: m32[70] } },
579
- "11": { value: { base: m32[30], _dark: m32[80] } },
580
- "12": { value: { base: m32[10], _dark: m32[90] } },
610
+ "11": { value: { base: m3[30], _dark: m3[80] } },
611
+ "12": { value: { base: m3[10], _dark: m3[90] } },
581
612
  // Alpha variants (increased opacity for better visibility)
582
613
  a1: { value: { base: "#00000008", _dark: "#ffffff08" } },
583
614
  a2: { value: { base: "#00000020", _dark: "#ffffff20" } },
@@ -660,93 +691,20 @@ var neutral = defineSemanticTokens.colors({
660
691
  }
661
692
  }
662
693
  });
663
- var m33 = material3Language.colors.error;
664
- var error = defineSemanticTokens.colors({
665
- "1": { value: { base: m33[99], _dark: m33[10] } },
666
- "2": { value: { base: m33[95], _dark: m33[20] } },
667
- "3": { value: { base: m33[90], _dark: m33[30] } },
668
- "4": { value: { base: m33[80], _dark: m33[30] } },
669
- "5": { value: { base: m33[70], _dark: m33[40] } },
670
- "6": { value: { base: m33[60], _dark: m33[40] } },
671
- "7": { value: { base: m33[50], _dark: m33[50] } },
672
- "8": { value: { base: m33[40], _dark: m33[60] } },
673
- "9": { value: { base: m33[40], _dark: m33[80] } },
674
- "10": { value: { base: m33[30], _dark: m33[70] } },
675
- "11": { value: { base: m33[30], _dark: m33[90] } },
676
- "12": { value: { base: m33[10], _dark: m33[95] } },
677
- // Alpha variants (increased opacity for better visibility)
678
- a1: { value: { base: `${m33[40]}08`, _dark: `${m33[80]}08` } },
679
- a2: { value: { base: `${m33[40]}20`, _dark: `${m33[80]}20` } },
680
- // ~13% for surface bg
681
- a3: { value: { base: `${m33[40]}30`, _dark: `${m33[80]}30` } },
682
- // ~19% for subtle bg
683
- a4: { value: { base: `${m33[40]}40`, _dark: `${m33[80]}40` } },
684
- // ~25% for hover states
685
- a5: { value: { base: `${m33[40]}50`, _dark: `${m33[80]}50` } },
686
- // ~31% for active states
687
- a6: { value: { base: `${m33[40]}80`, _dark: `${m33[80]}80` } },
688
- // ~50% for visible borders
689
- a7: { value: { base: `${m33[40]}A0`, _dark: `${m33[80]}A0` } },
690
- // ~63% for prominent borders
691
- a8: { value: { base: `${m33[40]}B0`, _dark: `${m33[80]}B0` } },
692
- // ~69%
693
- a9: { value: { base: `${m33[40]}C0`, _dark: `${m33[80]}C0` } },
694
- // ~75%
695
- a10: { value: { base: `${m33[40]}D0`, _dark: `${m33[80]}D0` } },
696
- // ~81%
697
- a11: { value: { base: `${m33[40]}E0`, _dark: `${m33[80]}E0` } },
698
- // ~88% for text colors
699
- a12: { value: { base: `${m33[40]}F0`, _dark: `${m33[80]}F0` } },
700
- // ~94% for high contrast
701
- // Semantic variants
702
- solid: {
703
- bg: {
704
- DEFAULT: { value: { base: "{colors.error.9}", _dark: "{colors.error.9}" } },
705
- hover: { value: { base: "{colors.error.10}", _dark: "{colors.error.10}" } }
706
- },
707
- fg: { DEFAULT: { value: { base: "white", _dark: "white" } } }
708
- },
709
- subtle: {
710
- bg: {
711
- DEFAULT: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
712
- hover: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } },
713
- active: { value: { base: "{colors.error.a5}", _dark: "{colors.error.a5}" } }
714
- },
715
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
716
- },
717
- surface: {
718
- bg: {
719
- DEFAULT: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
720
- active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
721
- },
722
- border: {
723
- DEFAULT: { value: { base: "{colors.error.a6}", _dark: "{colors.error.a6}" } },
724
- hover: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } }
725
- },
726
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
727
- },
728
- outline: {
729
- bg: {
730
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
731
- hover: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
732
- active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
733
- },
734
- border: { DEFAULT: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } } },
735
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
736
- },
737
- plain: {
738
- bg: {
739
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
740
- hover: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
741
- active: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } }
742
- },
743
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
744
- }
694
+
695
+ // src/preset/colors/m3-error.ts
696
+ var error = createPaletteBridge({
697
+ name: "error",
698
+ palette: material3Language.colors.error,
699
+ includeDefault: true,
700
+ solidFgWhiteBoth: true
745
701
  });
746
702
 
747
703
  // src/preset/colors/index.ts
748
704
  var colors = {
749
705
  primary,
706
+ secondary,
707
+ tertiary,
750
708
  neutral,
751
709
  error,
752
710
  // Alias gray to neutral (Park UI expects this)
@@ -783,21 +741,21 @@ var m3SemanticTokens = defineSemanticTokens.colors({
783
741
  DEFAULT: { value: { base: semantic.onPrimary, _dark: semanticDark.onPrimary } },
784
742
  container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } }
785
743
  },
786
- // M3 Secondary
787
- secondary: {
744
+ // M3 Secondary (prefixed to avoid conflict with Park UI Radix-scale bridge)
745
+ m3Secondary: {
788
746
  DEFAULT: { value: { base: semantic.secondary, _dark: semanticDark.secondary } },
789
747
  container: { value: { base: semantic.secondaryContainer, _dark: semanticDark.secondaryContainer } }
790
748
  },
791
- onSecondary: {
749
+ onM3Secondary: {
792
750
  DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
793
751
  container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } }
794
752
  },
795
- // M3 Tertiary
796
- tertiary: {
753
+ // M3 Tertiary (prefixed to avoid conflict with Park UI Radix-scale bridge)
754
+ m3Tertiary: {
797
755
  DEFAULT: { value: { base: semantic.tertiary, _dark: semanticDark.tertiary } },
798
756
  container: { value: { base: semantic.tertiaryContainer, _dark: semanticDark.tertiaryContainer } }
799
757
  },
800
- onTertiary: {
758
+ onM3Tertiary: {
801
759
  DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
802
760
  container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } }
803
761
  },
@@ -918,14 +876,14 @@ var button = defineRecipe({
918
876
  elevated: {
919
877
  bg: "colorPalette.surface.bg",
920
878
  color: "colorPalette.solid.fg",
921
- boxShadow: "level2",
879
+ boxShadow: "sm",
922
880
  border: "none",
923
881
  _hover: {
924
882
  bg: "colorPalette.surface.bg",
925
- boxShadow: "level3"
883
+ boxShadow: "md"
926
884
  },
927
885
  _active: {
928
- boxShadow: "level1"
886
+ boxShadow: "xs"
929
887
  }
930
888
  }
931
889
  },
@@ -2086,8 +2044,6 @@ var radioGroup = defineSlotRecipe({
2086
2044
  flexShrink: 0,
2087
2045
  justifyContent: "center",
2088
2046
  verticalAlign: "top",
2089
- boxShadow: "inset 0 0 0 1px var(--shadow-color)",
2090
- boxShadowColor: "gray.surface.border",
2091
2047
  _after: {
2092
2048
  content: '""',
2093
2049
  display: "block",
@@ -2096,14 +2052,6 @@ var radioGroup = defineSlotRecipe({
2096
2052
  },
2097
2053
  _focusVisible: {
2098
2054
  focusVisibleRing: "outside"
2099
- },
2100
- _checked: {
2101
- bg: "colorPalette.solid.bg",
2102
- color: "colorPalette.solid.fg",
2103
- boxShadowColor: "colorPalette.solid.bg",
2104
- _after: {
2105
- background: "colorPalette.solid.fg"
2106
- }
2107
2055
  }
2108
2056
  },
2109
2057
  item: {
@@ -2132,7 +2080,18 @@ var radioGroup = defineSlotRecipe({
2132
2080
  variants: {
2133
2081
  variant: {
2134
2082
  solid: {
2135
- itemControl: {}
2083
+ itemControl: {
2084
+ boxShadow: "inset 0 0 0 1px var(--shadow-color)",
2085
+ boxShadowColor: "gray.surface.border",
2086
+ _checked: {
2087
+ bg: "colorPalette.solid.bg",
2088
+ color: "colorPalette.solid.fg",
2089
+ boxShadowColor: "colorPalette.solid.bg",
2090
+ _after: {
2091
+ background: "colorPalette.solid.fg"
2092
+ }
2093
+ }
2094
+ }
2136
2095
  }
2137
2096
  },
2138
2097
  size: {
@@ -3515,40 +3474,22 @@ var textStyles = defineTextStyles({
3515
3474
  });
3516
3475
  var shadows = defineSemanticTokens.shadows({
3517
3476
  xs: {
3518
- value: {
3519
- base: "0px 1px 2px {colors.neutral.a6}, 0px 0px 1px {colors.neutral.a7}",
3520
- _dark: "0px 1px 1px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3521
- }
3477
+ value: "{shadows.level1}"
3522
3478
  },
3523
3479
  sm: {
3524
- value: {
3525
- base: "0px 2px 4px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3526
- _dark: "0px 2px 4px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3527
- }
3480
+ value: "{shadows.level2}"
3528
3481
  },
3529
3482
  md: {
3530
- value: {
3531
- base: "0px 4px 8px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3532
- _dark: "0px 4px 8px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3533
- }
3483
+ value: "{shadows.level3}"
3534
3484
  },
3535
3485
  lg: {
3536
- value: {
3537
- base: "0px 8px 16px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3538
- _dark: "0px 8px 16px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3539
- }
3486
+ value: "{shadows.level4}"
3540
3487
  },
3541
3488
  xl: {
3542
- value: {
3543
- base: "0px 16px 24px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3544
- _dark: "0px 16px 24px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3545
- }
3489
+ value: "{shadows.level5}"
3546
3490
  },
3547
3491
  "2xl": {
3548
- value: {
3549
- base: "0px 24px 40px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3550
- _dark: "0px 24px 40px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3551
- }
3492
+ value: "{shadows.level5}"
3552
3493
  },
3553
3494
  inset: {
3554
3495
  value: {
@@ -3610,12 +3551,7 @@ var discourserPandaPreset = definePreset({
3610
3551
  value: { base: "{colors.gray.1}", _dark: "{colors.gray.1}" }
3611
3552
  },
3612
3553
  border: {
3613
- default: {
3614
- value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
3615
- },
3616
- muted: {
3617
- value: { base: "{colors.gray.4}", _dark: "{colors.gray.4}" }
3618
- }
3554
+ value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
3619
3555
  },
3620
3556
  // M3 semantic tokens (surface, onSurface, etc.)
3621
3557
  ...m3SemanticTokens,
@@ -3697,5 +3633,5 @@ var discourserPandaPreset = definePreset({
3697
3633
  });
3698
3634
 
3699
3635
  export { discourserPandaPreset, material3Language, transformToPandaTheme };
3700
- //# sourceMappingURL=chunk-ZNAYN5UV.js.map
3701
- //# sourceMappingURL=chunk-ZNAYN5UV.js.map
3636
+ //# sourceMappingURL=chunk-M7J7WKJY.js.map
3637
+ //# sourceMappingURL=chunk-M7J7WKJY.js.map