@discourser/design-system 0.12.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-GUJTU4IH.js → chunk-F7LHARS4.js} +12 -8
- package/dist/chunk-F7LHARS4.js.map +1 -0
- package/dist/{chunk-5NW4VZJD.js → chunk-M7J7WKJY.js} +192 -243
- package/dist/chunk-M7J7WKJY.js.map +1 -0
- package/dist/{chunk-SQNOAZ2L.cjs → chunk-QC44JPCA.cjs} +192 -243
- package/dist/chunk-QC44JPCA.cjs.map +1 -0
- package/dist/{chunk-X4PNKWSA.cjs → chunk-QP4EJI3G.cjs} +12 -8
- package/dist/chunk-QP4EJI3G.cjs.map +1 -0
- 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/Stepper/Stepper.d.ts +5 -1
- package/dist/components/Stepper/Stepper.d.ts.map +1 -1
- 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/recipes/stepper.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 +14 -8
- package/src/components/Badge.tsx +1 -1
- package/src/components/Stepper/Stepper.tsx +12 -2
- 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/recipes/stepper.ts +15 -1
- 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-5NW4VZJD.js.map +0 -1
- package/dist/chunk-GUJTU4IH.js.map +0 -1
- package/dist/chunk-SQNOAZ2L.cjs.map +0 -1
- package/dist/chunk-X4PNKWSA.cjs.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: {
|
|
@@ -3294,6 +3253,7 @@ var stepper = defineSlotRecipe({
|
|
|
3294
3253
|
"item",
|
|
3295
3254
|
"trigger",
|
|
3296
3255
|
"indicator",
|
|
3256
|
+
"label",
|
|
3297
3257
|
"separator",
|
|
3298
3258
|
"content",
|
|
3299
3259
|
"progress",
|
|
@@ -3333,6 +3293,7 @@ var stepper = defineSlotRecipe({
|
|
|
3333
3293
|
padding: "0",
|
|
3334
3294
|
position: "relative",
|
|
3335
3295
|
zIndex: "2",
|
|
3296
|
+
flexShrink: "0",
|
|
3336
3297
|
_disabled: {
|
|
3337
3298
|
cursor: "not-allowed",
|
|
3338
3299
|
opacity: 0.5
|
|
@@ -3375,10 +3336,21 @@ var stepper = defineSlotRecipe({
|
|
|
3375
3336
|
outlineOffset: "2px"
|
|
3376
3337
|
}
|
|
3377
3338
|
},
|
|
3339
|
+
label: {
|
|
3340
|
+
whiteSpace: "nowrap",
|
|
3341
|
+
textAlign: "center",
|
|
3342
|
+
fontSize: "sm",
|
|
3343
|
+
fontWeight: "medium",
|
|
3344
|
+
color: "fg.default",
|
|
3345
|
+
maxWidth: "120px",
|
|
3346
|
+
overflow: "hidden",
|
|
3347
|
+
textOverflow: "ellipsis"
|
|
3348
|
+
},
|
|
3378
3349
|
separator: {
|
|
3379
3350
|
flex: "1",
|
|
3351
|
+
minWidth: "40px",
|
|
3380
3352
|
height: "2px",
|
|
3381
|
-
bg: "border",
|
|
3353
|
+
bg: "neutral.surface.border",
|
|
3382
3354
|
transition: "background",
|
|
3383
3355
|
transitionDuration: "normal",
|
|
3384
3356
|
marginInline: "4",
|
|
@@ -3502,40 +3474,22 @@ var textStyles = defineTextStyles({
|
|
|
3502
3474
|
});
|
|
3503
3475
|
var shadows = defineSemanticTokens.shadows({
|
|
3504
3476
|
xs: {
|
|
3505
|
-
value: {
|
|
3506
|
-
base: "0px 1px 2px {colors.neutral.a6}, 0px 0px 1px {colors.neutral.a7}",
|
|
3507
|
-
_dark: "0px 1px 1px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
|
|
3508
|
-
}
|
|
3477
|
+
value: "{shadows.level1}"
|
|
3509
3478
|
},
|
|
3510
3479
|
sm: {
|
|
3511
|
-
value: {
|
|
3512
|
-
base: "0px 2px 4px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
|
|
3513
|
-
_dark: "0px 2px 4px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
|
|
3514
|
-
}
|
|
3480
|
+
value: "{shadows.level2}"
|
|
3515
3481
|
},
|
|
3516
3482
|
md: {
|
|
3517
|
-
value: {
|
|
3518
|
-
base: "0px 4px 8px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
|
|
3519
|
-
_dark: "0px 4px 8px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
|
|
3520
|
-
}
|
|
3483
|
+
value: "{shadows.level3}"
|
|
3521
3484
|
},
|
|
3522
3485
|
lg: {
|
|
3523
|
-
value: {
|
|
3524
|
-
base: "0px 8px 16px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
|
|
3525
|
-
_dark: "0px 8px 16px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
|
|
3526
|
-
}
|
|
3486
|
+
value: "{shadows.level4}"
|
|
3527
3487
|
},
|
|
3528
3488
|
xl: {
|
|
3529
|
-
value: {
|
|
3530
|
-
base: "0px 16px 24px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
|
|
3531
|
-
_dark: "0px 16px 24px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
|
|
3532
|
-
}
|
|
3489
|
+
value: "{shadows.level5}"
|
|
3533
3490
|
},
|
|
3534
3491
|
"2xl": {
|
|
3535
|
-
value: {
|
|
3536
|
-
base: "0px 24px 40px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
|
|
3537
|
-
_dark: "0px 24px 40px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
|
|
3538
|
-
}
|
|
3492
|
+
value: "{shadows.level5}"
|
|
3539
3493
|
},
|
|
3540
3494
|
inset: {
|
|
3541
3495
|
value: {
|
|
@@ -3597,12 +3551,7 @@ var discourserPandaPreset = definePreset({
|
|
|
3597
3551
|
value: { base: "{colors.gray.1}", _dark: "{colors.gray.1}" }
|
|
3598
3552
|
},
|
|
3599
3553
|
border: {
|
|
3600
|
-
|
|
3601
|
-
value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
|
|
3602
|
-
},
|
|
3603
|
-
muted: {
|
|
3604
|
-
value: { base: "{colors.gray.4}", _dark: "{colors.gray.4}" }
|
|
3605
|
-
}
|
|
3554
|
+
value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
|
|
3606
3555
|
},
|
|
3607
3556
|
// M3 semantic tokens (surface, onSurface, etc.)
|
|
3608
3557
|
...m3SemanticTokens,
|
|
@@ -3684,5 +3633,5 @@ var discourserPandaPreset = definePreset({
|
|
|
3684
3633
|
});
|
|
3685
3634
|
|
|
3686
3635
|
export { discourserPandaPreset, material3Language, transformToPandaTheme };
|
|
3687
|
-
//# sourceMappingURL=chunk-
|
|
3688
|
-
//# sourceMappingURL=chunk-
|
|
3636
|
+
//# sourceMappingURL=chunk-M7J7WKJY.js.map
|
|
3637
|
+
//# sourceMappingURL=chunk-M7J7WKJY.js.map
|