@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.
- package/dist/{chunk-BQAXPMOR.js → chunk-F7LHARS4.js} +2 -2
- package/dist/{chunk-BQAXPMOR.js.map → chunk-F7LHARS4.js.map} +1 -1
- package/dist/{chunk-ZNAYN5UV.js → chunk-M7J7WKJY.js} +178 -242
- package/dist/chunk-M7J7WKJY.js.map +1 -0
- package/dist/{chunk-XSX6TKJZ.cjs → chunk-QC44JPCA.cjs} +178 -242
- package/dist/chunk-QC44JPCA.cjs.map +1 -0
- package/dist/{chunk-MIBEMJNS.cjs → chunk-QP4EJI3G.cjs} +2 -2
- package/dist/{chunk-MIBEMJNS.cjs.map → chunk-QP4EJI3G.cjs.map} +1 -1
- package/dist/components/Badge.d.ts +1 -1
- package/dist/components/Badge.d.ts.map +1 -1
- package/dist/components/Checkbox.d.ts +2 -2
- package/dist/components/index.cjs +33 -33
- package/dist/components/index.js +1 -1
- package/dist/index.cjs +37 -37
- package/dist/index.js +2 -2
- package/dist/preset/colors/create-palette-bridge.d.ts +45 -0
- package/dist/preset/colors/create-palette-bridge.d.ts.map +1 -0
- package/dist/preset/colors/index.d.ts +13 -926
- package/dist/preset/colors/index.d.ts.map +1 -1
- package/dist/preset/colors/m3-error.d.ts +4 -306
- package/dist/preset/colors/m3-error.d.ts.map +1 -1
- package/dist/preset/colors/m3-primary.d.ts +1 -306
- package/dist/preset/colors/m3-primary.d.ts.map +1 -1
- package/dist/preset/colors/m3-secondary.d.ts +7 -0
- package/dist/preset/colors/m3-secondary.d.ts.map +1 -0
- package/dist/preset/colors/m3-tertiary.d.ts +7 -0
- package/dist/preset/colors/m3-tertiary.d.ts.map +1 -0
- package/dist/preset/index.cjs +2 -2
- package/dist/preset/index.d.ts.map +1 -1
- package/dist/preset/index.js +1 -1
- package/dist/preset/recipes/radio-group.d.ts.map +1 -1
- package/dist/preset/semantic-tokens.d.ts +4 -4
- package/dist/preset/shadows.d.ts +12 -26
- package/dist/preset/shadows.d.ts.map +1 -1
- package/package.json +8 -7
- package/src/components/Badge.tsx +1 -1
- package/src/languages/__tests__/transform.test.ts +100 -0
- package/src/preset/__tests__/shadows.test.ts +83 -0
- package/src/preset/__tests__/token-resolution.test.ts +247 -0
- package/src/preset/colors/create-palette-bridge.ts +156 -0
- package/src/preset/colors/index.ts +4 -0
- package/src/preset/colors/m3-error.ts +12 -77
- package/src/preset/colors/m3-primary.ts +5 -90
- package/src/preset/colors/m3-secondary.ts +13 -0
- package/src/preset/colors/m3-tertiary.ts +13 -0
- package/src/preset/index.ts +1 -6
- package/src/preset/recipes/__tests__/recipe-shadows.test.ts +238 -0
- package/src/preset/recipes/button.ts +3 -3
- package/src/preset/recipes/radio-group.ts +12 -11
- package/src/preset/semantic-tokens.ts +6 -6
- package/src/preset/shadows.ts +12 -26
- package/src/stories/foundations/Colors.mdx +1 -1
- package/src/stories/foundations/Elevation.mdx +37 -8
- package/src/stories/foundations/Spacing.mdx +1 -1
- package/src/stories/foundations/Typography.mdx +1 -1
- package/dist/chunk-XSX6TKJZ.cjs.map +0 -1
- package/dist/chunk-ZNAYN5UV.js.map +0 -1
|
@@ -463,121 +463,152 @@ function extractLetterSpacings(scale) {
|
|
|
463
463
|
])
|
|
464
464
|
);
|
|
465
465
|
}
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
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[
|
|
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[
|
|
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[
|
|
478
|
-
// Primary action color
|
|
608
|
+
"9": { value: { base: m3[40], _dark: m3[60] } },
|
|
479
609
|
"10": { value: { base: m3[30], _dark: m3[70] } },
|
|
480
|
-
|
|
481
|
-
"
|
|
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
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
"
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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: "
|
|
879
|
+
boxShadow: "sm",
|
|
922
880
|
border: "none",
|
|
923
881
|
_hover: {
|
|
924
882
|
bg: "colorPalette.surface.bg",
|
|
925
|
-
boxShadow: "
|
|
883
|
+
boxShadow: "md"
|
|
926
884
|
},
|
|
927
885
|
_active: {
|
|
928
|
-
boxShadow: "
|
|
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
|
-
|
|
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-
|
|
3701
|
-
//# sourceMappingURL=chunk-
|
|
3636
|
+
//# sourceMappingURL=chunk-M7J7WKJY.js.map
|
|
3637
|
+
//# sourceMappingURL=chunk-M7J7WKJY.js.map
|