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