@pure-ds/core 0.5.28 → 0.5.30
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/types/public/assets/js/pds-manager.d.ts +186 -443
- package/dist/types/public/assets/js/pds-manager.d.ts.map +1 -1
- package/dist/types/public/assets/js/pds.d.ts +3 -4
- package/dist/types/public/assets/js/pds.d.ts.map +1 -1
- package/dist/types/src/js/pds-core/pds-generator.d.ts +30 -18
- package/dist/types/src/js/pds-core/pds-generator.d.ts.map +1 -1
- package/package.json +1 -1
- package/public/assets/js/app.js +138 -143
- package/public/assets/js/pds-manager.js +153 -158
- package/public/assets/pds/pds-css-complete.json +28 -0
- package/public/assets/pds/pds.css-data.json +44 -0
- package/src/js/pds-core/pds-generator.js +146 -69
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
export {
|
|
2
|
-
declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
|
|
1
|
+
export function startLive(PDS2: any, config: any, { emitReady, applyResolvedTheme, setupSystemListenerIfNeeded }: {
|
|
3
2
|
emitReady: any;
|
|
4
3
|
applyResolvedTheme: any;
|
|
5
4
|
setupSystemListenerIfNeeded: any;
|
|
6
5
|
}): Promise<{
|
|
7
6
|
generator: {
|
|
8
|
-
"__#private@#
|
|
9
|
-
"__#private@#
|
|
7
|
+
"__#private@#layers": any;
|
|
8
|
+
"__#private@#stylesheets": any;
|
|
10
9
|
options: {
|
|
11
10
|
debug: boolean;
|
|
12
11
|
};
|
|
@@ -118,9 +117,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
118
117
|
hover: string;
|
|
119
118
|
};
|
|
120
119
|
};
|
|
121
|
-
spacing:
|
|
122
|
-
0: string;
|
|
123
|
-
};
|
|
120
|
+
spacing: string;
|
|
124
121
|
radius: {
|
|
125
122
|
none: string;
|
|
126
123
|
xs: string;
|
|
@@ -174,14 +171,18 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
174
171
|
inner: string;
|
|
175
172
|
};
|
|
176
173
|
layout: {
|
|
177
|
-
maxWidth:
|
|
174
|
+
maxWidth: any;
|
|
175
|
+
maxWidthSm: any;
|
|
176
|
+
maxWidthMd: any;
|
|
177
|
+
maxWidthLg: any;
|
|
178
|
+
maxWidthXl: any;
|
|
178
179
|
minHeight: string;
|
|
179
|
-
containerPadding:
|
|
180
|
+
containerPadding: any;
|
|
180
181
|
breakpoints: {
|
|
181
|
-
sm:
|
|
182
|
-
md:
|
|
183
|
-
lg:
|
|
184
|
-
xl:
|
|
182
|
+
sm: any;
|
|
183
|
+
md: any;
|
|
184
|
+
lg: any;
|
|
185
|
+
xl: any;
|
|
185
186
|
};
|
|
186
187
|
pageMargin: string;
|
|
187
188
|
sectionGap: string;
|
|
@@ -323,9 +324,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
323
324
|
hover: string;
|
|
324
325
|
};
|
|
325
326
|
};
|
|
326
|
-
spacing:
|
|
327
|
-
0: string;
|
|
328
|
-
};
|
|
327
|
+
spacing: string;
|
|
329
328
|
radius: {
|
|
330
329
|
none: string;
|
|
331
330
|
xs: string;
|
|
@@ -379,14 +378,18 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
379
378
|
inner: string;
|
|
380
379
|
};
|
|
381
380
|
layout: {
|
|
382
|
-
maxWidth:
|
|
381
|
+
maxWidth: any;
|
|
382
|
+
maxWidthSm: any;
|
|
383
|
+
maxWidthMd: any;
|
|
384
|
+
maxWidthLg: any;
|
|
385
|
+
maxWidthXl: any;
|
|
383
386
|
minHeight: string;
|
|
384
|
-
containerPadding:
|
|
387
|
+
containerPadding: any;
|
|
385
388
|
breakpoints: {
|
|
386
|
-
sm:
|
|
387
|
-
md:
|
|
388
|
-
lg:
|
|
389
|
-
xl:
|
|
389
|
+
sm: any;
|
|
390
|
+
md: any;
|
|
391
|
+
lg: any;
|
|
392
|
+
xl: any;
|
|
390
393
|
};
|
|
391
394
|
pageMargin: string;
|
|
392
395
|
sectionGap: string;
|
|
@@ -420,7 +423,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
420
423
|
externalPath: any;
|
|
421
424
|
};
|
|
422
425
|
};
|
|
423
|
-
"__#private@#
|
|
426
|
+
"__#private@#generateColorTokens"(colorConfig: any): {
|
|
424
427
|
primary: {
|
|
425
428
|
50: string;
|
|
426
429
|
100: string;
|
|
@@ -527,7 +530,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
527
530
|
hover: string;
|
|
528
531
|
};
|
|
529
532
|
};
|
|
530
|
-
"__#private@#
|
|
533
|
+
"__#private@#generateColorScale"(baseColor: any): {
|
|
531
534
|
50: string;
|
|
532
535
|
100: string;
|
|
533
536
|
200: string;
|
|
@@ -539,9 +542,9 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
539
542
|
800: string;
|
|
540
543
|
900: string;
|
|
541
544
|
};
|
|
542
|
-
"__#private@#
|
|
543
|
-
"__#private@#
|
|
544
|
-
"__#private@#
|
|
545
|
+
"__#private@#deriveSuccessColor"(mainColor: any): string;
|
|
546
|
+
"__#private@#deriveDangerColor"(mainColor: any): string;
|
|
547
|
+
"__#private@#generateGrayScale"(supportingColor: any): {
|
|
545
548
|
50: string;
|
|
546
549
|
100: string;
|
|
547
550
|
200: string;
|
|
@@ -553,7 +556,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
553
556
|
800: string;
|
|
554
557
|
900: string;
|
|
555
558
|
};
|
|
556
|
-
"__#private@#
|
|
559
|
+
"__#private@#generateBackgroundShades"(backgroundBase: any): {
|
|
557
560
|
base: any;
|
|
558
561
|
subtle: string;
|
|
559
562
|
elevated: string;
|
|
@@ -562,16 +565,16 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
562
565
|
inverse: string;
|
|
563
566
|
hover: string;
|
|
564
567
|
};
|
|
565
|
-
"__#private@#
|
|
568
|
+
"__#private@#generateFieldsetAdaptiveColors"(backgroundShades: any): {
|
|
566
569
|
base: any;
|
|
567
570
|
subtle: any;
|
|
568
571
|
elevated: any;
|
|
569
572
|
sunken: string;
|
|
570
573
|
overlay: any;
|
|
571
574
|
};
|
|
572
|
-
"__#private@#
|
|
573
|
-
"__#private@#
|
|
574
|
-
"__#private
|
|
575
|
+
"__#private@#darkenColor"(hexColor: any, factor?: number): string;
|
|
576
|
+
"__#private@#generateSmartDarkBackground"(lightBackground: any): string;
|
|
577
|
+
"__#private@#generateDarkModeColors"(lightColors: any, backgroundBase?: string, overrides?: {}): {
|
|
575
578
|
surface: {
|
|
576
579
|
fieldset: {
|
|
577
580
|
base: any;
|
|
@@ -597,34 +600,48 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
597
600
|
warning: {};
|
|
598
601
|
danger: {};
|
|
599
602
|
};
|
|
600
|
-
"__#private@#
|
|
603
|
+
"__#private@#hexToRgb"(hex: any): {
|
|
601
604
|
r: number;
|
|
602
605
|
g: number;
|
|
603
606
|
b: number;
|
|
604
607
|
};
|
|
605
|
-
"__#private@#
|
|
606
|
-
"__#private@#
|
|
607
|
-
"__#private@#
|
|
608
|
-
"__#private@#
|
|
609
|
-
"__#private@#
|
|
610
|
-
"__#private@#
|
|
611
|
-
"__#private@#
|
|
608
|
+
"__#private@#luminance"(hex: any): number;
|
|
609
|
+
"__#private@#contrastRatio"(aHex: any, bHex: any): number;
|
|
610
|
+
"__#private@#findReadableOnColor"(bgHex: any, target?: number): "#ffffff" | "#000000";
|
|
611
|
+
"__#private@#rgbaFromHex"(hex: any, alpha?: number): string;
|
|
612
|
+
"__#private@#mixTowards"(sourceHex: any, targetHex: any, factor?: number): string;
|
|
613
|
+
"__#private@#rgbToHex"(r: any, g: any, b: any): string;
|
|
614
|
+
"__#private@#generateDarkModeFieldsetColors"(darkSurface: any): {
|
|
612
615
|
base: any;
|
|
613
616
|
subtle: any;
|
|
614
617
|
elevated: string;
|
|
615
618
|
sunken: any;
|
|
616
619
|
overlay: string;
|
|
617
620
|
};
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
"__#private@#
|
|
623
|
-
"__#private@#
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
621
|
+
/**
|
|
622
|
+
* Pick a readable primary shade on a given surface background, targeting AA contrast.
|
|
623
|
+
* Returns the first shade that meets target from a preferred order; falls back to the best ratio.
|
|
624
|
+
*/
|
|
625
|
+
"__#private@#pickReadablePrimaryOnSurface"(primaryScale?: {}, surfaceBg?: string, target?: number): any;
|
|
626
|
+
"__#private@#pickFillShadeForWhite"(scale?: {}, target?: number): any;
|
|
627
|
+
/**
|
|
628
|
+
* Generate smart surface tokens with context-aware colors for text, icons, shadows, and borders.
|
|
629
|
+
* Each surface variant gets its own semantic tokens that automatically adapt to the surface's luminance.
|
|
630
|
+
*
|
|
631
|
+
* @param {Object} surfaceShades - Object with surface color variants (base, subtle, elevated, etc.)
|
|
632
|
+
* @returns {Object} Smart tokens for each surface with text, icon, shadow, and border colors
|
|
633
|
+
*/
|
|
634
|
+
"__#private@#generateSmartSurfaceTokens"(surfaceShades: any): any;
|
|
635
|
+
"__#private@#lightenColor"(hexColor: any, factor?: number): string;
|
|
636
|
+
"__#private@#adjustColorsForDarkMode"(colorScale: any): {};
|
|
637
|
+
"__#private@#dimColorForDarkMode"(hexColor: any, dimFactor?: number): string;
|
|
638
|
+
/**
|
|
639
|
+
* Generate spacing tokens based on the provided configuration.
|
|
640
|
+
* @param {Object} spatialConfig
|
|
641
|
+
* @returns { String } CSS spacing tokens
|
|
642
|
+
*/
|
|
643
|
+
generateSpacingTokens(spatialConfig: any): string;
|
|
644
|
+
"__#private@#generateRadiusTokens"(shapeConfig: any): {
|
|
628
645
|
none: string;
|
|
629
646
|
xs: string;
|
|
630
647
|
sm: string;
|
|
@@ -633,13 +650,13 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
633
650
|
xl: string;
|
|
634
651
|
full: string;
|
|
635
652
|
};
|
|
636
|
-
"__#private@#
|
|
653
|
+
"__#private@#generateBorderWidthTokens"(shapeConfig: any): {
|
|
637
654
|
hairline: string;
|
|
638
655
|
thin: string;
|
|
639
656
|
medium: string;
|
|
640
657
|
thick: string;
|
|
641
658
|
};
|
|
642
|
-
generateTypographyTokens(
|
|
659
|
+
generateTypographyTokens(typographyConfig: any): {
|
|
643
660
|
fontFamily: {
|
|
644
661
|
headings: any;
|
|
645
662
|
body: any;
|
|
@@ -668,7 +685,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
668
685
|
relaxed: any;
|
|
669
686
|
};
|
|
670
687
|
};
|
|
671
|
-
"__#private@#
|
|
688
|
+
"__#private@#generateShadowTokens"(layersConfig: any): {
|
|
672
689
|
sm: string;
|
|
673
690
|
base: string;
|
|
674
691
|
md: string;
|
|
@@ -676,15 +693,19 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
676
693
|
xl: string;
|
|
677
694
|
inner: string;
|
|
678
695
|
};
|
|
679
|
-
"__#private@#
|
|
680
|
-
maxWidth:
|
|
696
|
+
"__#private@#generateLayoutTokens"(layoutConfig: any): {
|
|
697
|
+
maxWidth: any;
|
|
698
|
+
maxWidthSm: any;
|
|
699
|
+
maxWidthMd: any;
|
|
700
|
+
maxWidthLg: any;
|
|
701
|
+
maxWidthXl: any;
|
|
681
702
|
minHeight: string;
|
|
682
|
-
containerPadding:
|
|
703
|
+
containerPadding: any;
|
|
683
704
|
breakpoints: {
|
|
684
|
-
sm:
|
|
685
|
-
md:
|
|
686
|
-
lg:
|
|
687
|
-
xl:
|
|
705
|
+
sm: any;
|
|
706
|
+
md: any;
|
|
707
|
+
lg: any;
|
|
708
|
+
xl: any;
|
|
688
709
|
};
|
|
689
710
|
pageMargin: string;
|
|
690
711
|
sectionGap: string;
|
|
@@ -692,12 +713,20 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
692
713
|
heroSpacing: string;
|
|
693
714
|
footerSpacing: string;
|
|
694
715
|
};
|
|
695
|
-
"__#private@#
|
|
716
|
+
"__#private@#resolveLayoutMaxWidths"(layoutConfig?: {}): {
|
|
717
|
+
sm: any;
|
|
718
|
+
md: any;
|
|
719
|
+
lg: any;
|
|
720
|
+
xl: any;
|
|
721
|
+
};
|
|
722
|
+
"__#private@#formatLength"(value: any, fallback: any): any;
|
|
723
|
+
"__#private@#toNumber"(value: any, fallback: any): any;
|
|
724
|
+
"__#private@#generateTransitionTokens"(behaviorConfig: any): {
|
|
696
725
|
fast: string;
|
|
697
726
|
normal: string;
|
|
698
727
|
slow: string;
|
|
699
728
|
};
|
|
700
|
-
"__#private@#
|
|
729
|
+
"__#private@#generateZIndexTokens"(layersConfig: any): {
|
|
701
730
|
dropdown: any;
|
|
702
731
|
sticky: any;
|
|
703
732
|
fixed: any;
|
|
@@ -707,7 +736,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
707
736
|
tooltip: any;
|
|
708
737
|
notification: any;
|
|
709
738
|
};
|
|
710
|
-
"__#private@#
|
|
739
|
+
"__#private@#generateIconTokens"(iconConfig: any): {
|
|
711
740
|
set: any;
|
|
712
741
|
weight: any;
|
|
713
742
|
defaultSize: string;
|
|
@@ -717,45 +746,45 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
717
746
|
spritePath: any;
|
|
718
747
|
externalPath: any;
|
|
719
748
|
};
|
|
720
|
-
"__#private@#
|
|
721
|
-
"__#private@#
|
|
722
|
-
"__#private@#
|
|
723
|
-
"__#private@#
|
|
724
|
-
"__#private@#
|
|
725
|
-
"__#private@#
|
|
726
|
-
"__#private@#
|
|
727
|
-
"__#private@#
|
|
728
|
-
"__#private@#
|
|
729
|
-
"__#private@#
|
|
730
|
-
"__#private@#
|
|
731
|
-
"__#private@#
|
|
732
|
-
"__#private@#
|
|
733
|
-
"__#private@#
|
|
734
|
-
"__#private@#
|
|
735
|
-
"__#private@#
|
|
736
|
-
"__#private@#
|
|
737
|
-
"__#private@#
|
|
738
|
-
"__#private@#
|
|
739
|
-
"__#private@#
|
|
740
|
-
"__#private@#
|
|
741
|
-
"__#private@#
|
|
742
|
-
"__#private@#
|
|
743
|
-
"__#private@#
|
|
744
|
-
"__#private@#
|
|
745
|
-
"__#private@#
|
|
746
|
-
"__#private@#
|
|
747
|
-
"__#private@#
|
|
748
|
-
"__#private@#
|
|
749
|
-
"__#private@#
|
|
750
|
-
"__#private@#
|
|
751
|
-
"__#private@#
|
|
752
|
-
"__#private@#
|
|
753
|
-
"__#private@#
|
|
749
|
+
"__#private@#generateColorVariables"(colors: any): string;
|
|
750
|
+
"__#private@#generateMeshGradients"(colors: any): string;
|
|
751
|
+
"__#private@#generateSpacingVariables"(spacing: any): string;
|
|
752
|
+
"__#private@#generateRadiusVariables"(radius: any): string;
|
|
753
|
+
"__#private@#generateBorderWidthVariables"(borderWidths: any): string;
|
|
754
|
+
"__#private@#generateTypographyVariables"(typography: any): string;
|
|
755
|
+
"__#private@#generateShadowVariables"(shadows: any): string;
|
|
756
|
+
"__#private@#generateLayoutVariables"(layout: any): string;
|
|
757
|
+
"__#private@#generateTransitionVariables"(transitions: any): string;
|
|
758
|
+
"__#private@#generateZIndexVariables"(zIndex: any): string;
|
|
759
|
+
"__#private@#generateIconVariables"(icons: any): string;
|
|
760
|
+
"__#private@#generateDarkVariablesOnly"(colors: any): string;
|
|
761
|
+
"__#private@#generateDarkVariablesForTokensLayer"(colors: any): string;
|
|
762
|
+
"__#private@#generateMeshGradientsDarkVariablesOnly"(colors: any): string;
|
|
763
|
+
"__#private@#generateMeshGradientsDark"(colors: any): string;
|
|
764
|
+
"__#private@#generateDarkModeComponentRules"(): string;
|
|
765
|
+
"__#private@#generateBodyBackgroundMeshRule"(): string;
|
|
766
|
+
"__#private@#generateLiquidGlassUtility"(): "" | "/* Liquid glass utility (opt-in via options.liquidGlassEffects) */\n.liquid-glass {\n border-radius: var(--radius-lg);\n /* Subtle translucent fill blended with surface */\n background: color-mix(in oklab, var(--color-surface-subtle) 45%, transparent);\n\n background-image: linear-gradient(\n 135deg,\n rgba(255,255,255,0.35),\n rgba(255,255,255,0.12)\n );\n /* Frosted glass blur + saturation */\n -webkit-backdrop-filter: blur(12px) saturate(140%);\n backdrop-filter: blur(12px) saturate(140%);\n /* Soft inner highlight and outer depth */\n box-shadow:\n inset 0 1px 0 rgba(255,255,255,0.6),\n inset 0 -40px 80px rgba(255,255,255,0.12),\n 0 10px 30px rgba(0,0,0,0.10);\n /* Glossy border with slight light and dark edges */\n border: 1px solid color-mix(in oklab, var(--color-primary-500) 22%, transparent);\n outline: 1px solid color-mix(in oklab, #ffffff 18%, transparent);\n outline-offset: -1px;\n}\n\nhtml[data-theme=\"dark\"] .liquid-glass {\n background: color-mix(in oklab, var(--color-surface-inverse) 45%, transparent);\n background-image: linear-gradient(\n 135deg,\n color-mix(in oklab, var(--color-primary-300) 40%, transparent),\n color-mix(in oklab, var(--color-surface-overlay) 48%, transparent)\n );\n box-shadow:\n inset 0 1px 0 rgba(255,255,255,0.12),\n inset 0 -40px 80px rgba(0,0,0,0.55),\n 0 18px 38px rgba(0,0,0,0.65);\n border: 1px solid color-mix(in oklab, var(--color-primary-300) 26%, transparent);\n outline: 1px solid color-mix(in oklab, #ffffff 16%, transparent);\n}\n\n/* Fallback when backdrop-filter isn't supported */\n@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {\n .liquid-glass {\n /* Strengthen fill a bit to compensate for lack of blur */\n background: color-mix(in oklab, var(--color-surface-subtle) 70%, rgba(255,255,255,0.4));\n box-shadow:\n inset 0 1px 0 rgba(255,255,255,0.6),\n 0 10px 24px rgba(0,0,0,0.08);\n }\n\n html[data-theme=\"dark\"] .liquid-glass {\n background: color-mix(in oklab, var(--color-surface-inverse) 70%, transparent);\n box-shadow:\n inset 0 1px 0 rgba(255,255,255,0.1),\n 0 18px 32px rgba(0,0,0,0.58);\n }\n}\n";
|
|
767
|
+
"__#private@#generateBorderGradientUtilities"(): string;
|
|
768
|
+
"__#private@#generateSemanticHTMLStyles"(): string;
|
|
769
|
+
"__#private@#generateFormStyles"(): string;
|
|
770
|
+
"__#private@#generateTableStyles"(): string;
|
|
771
|
+
"__#private@#generateAlertStyles"(): string;
|
|
772
|
+
"__#private@#generateAccordionStyles"(): string;
|
|
773
|
+
"__#private@#generateBadgeStyles"(): string;
|
|
774
|
+
"__#private@#generateDialogStyles"(): string;
|
|
775
|
+
"__#private@#generateTabStripStyles"(): string;
|
|
776
|
+
"__#private@#generateScrollbarStyles"(): string;
|
|
777
|
+
"__#private@#generateIconStyles"(): string;
|
|
778
|
+
"__#private@#generateDropdownStyles"(): string;
|
|
779
|
+
"__#private@#generateLayoutUtilities"(): string;
|
|
780
|
+
"__#private@#generateMediaUtilities"(): string;
|
|
781
|
+
"__#private@#generateMediaQueries"(): string;
|
|
782
|
+
"__#private@#hexToHsl"(hex: any): {
|
|
754
783
|
h: number;
|
|
755
784
|
s: number;
|
|
756
785
|
l: number;
|
|
757
786
|
};
|
|
758
|
-
"__#private@#
|
|
787
|
+
"__#private@#hslToHex"(h: any, s: any, l: any): string;
|
|
759
788
|
getTokens(): {
|
|
760
789
|
colors: {
|
|
761
790
|
primary: {
|
|
@@ -864,9 +893,7 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
864
893
|
hover: string;
|
|
865
894
|
};
|
|
866
895
|
};
|
|
867
|
-
spacing:
|
|
868
|
-
0: string;
|
|
869
|
-
};
|
|
896
|
+
spacing: string;
|
|
870
897
|
radius: {
|
|
871
898
|
none: string;
|
|
872
899
|
xs: string;
|
|
@@ -920,14 +947,18 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
920
947
|
inner: string;
|
|
921
948
|
};
|
|
922
949
|
layout: {
|
|
923
|
-
maxWidth:
|
|
950
|
+
maxWidth: any;
|
|
951
|
+
maxWidthSm: any;
|
|
952
|
+
maxWidthMd: any;
|
|
953
|
+
maxWidthLg: any;
|
|
954
|
+
maxWidthXl: any;
|
|
924
955
|
minHeight: string;
|
|
925
|
-
containerPadding:
|
|
956
|
+
containerPadding: any;
|
|
926
957
|
breakpoints: {
|
|
927
|
-
sm:
|
|
928
|
-
md:
|
|
929
|
-
lg:
|
|
930
|
-
xl:
|
|
958
|
+
sm: any;
|
|
959
|
+
md: any;
|
|
960
|
+
lg: any;
|
|
961
|
+
xl: any;
|
|
931
962
|
};
|
|
932
963
|
pageMargin: string;
|
|
933
964
|
sectionGap: string;
|
|
@@ -962,349 +993,41 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
962
993
|
};
|
|
963
994
|
};
|
|
964
995
|
exportCSS(): string;
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
"__#private@#
|
|
970
|
-
"__#private@#
|
|
971
|
-
"__#private@#
|
|
996
|
+
/**
|
|
997
|
+
* Generate separate CSS layers: tokens, primitives, components, utilities
|
|
998
|
+
* Following the cascade layers pattern from the best practices document
|
|
999
|
+
*/
|
|
1000
|
+
"__#private@#generateLayers"(): void;
|
|
1001
|
+
"__#private@#generateTokensLayer"(): string;
|
|
1002
|
+
"__#private@#generatePrimitivesLayer"(): string;
|
|
1003
|
+
"__#private@#generateComponentsLayer"(): string;
|
|
1004
|
+
"__#private@#generateUtilitiesLayer"(): string;
|
|
1005
|
+
/**
|
|
1006
|
+
* Create constructable stylesheets for each layer
|
|
1007
|
+
*/
|
|
1008
|
+
"__#private@#createConstructableStylesheets"(): void;
|
|
1009
|
+
"__#private@#updateConstructableStylesheets"(): void;
|
|
972
1010
|
get tokensCSS(): any;
|
|
973
1011
|
get primitivesCSS(): any;
|
|
974
1012
|
get componentsCSS(): any;
|
|
975
1013
|
get utilitiesCSS(): any;
|
|
976
1014
|
get layeredCSS(): string;
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
400: string;
|
|
986
|
-
500: any;
|
|
987
|
-
600: string;
|
|
988
|
-
700: string;
|
|
989
|
-
800: string;
|
|
990
|
-
900: string;
|
|
991
|
-
};
|
|
992
|
-
secondary: {
|
|
993
|
-
50: string;
|
|
994
|
-
100: string;
|
|
995
|
-
200: string;
|
|
996
|
-
300: string;
|
|
997
|
-
400: string;
|
|
998
|
-
500: any;
|
|
999
|
-
600: string;
|
|
1000
|
-
700: string;
|
|
1001
|
-
800: string;
|
|
1002
|
-
900: string;
|
|
1003
|
-
};
|
|
1004
|
-
accent: {
|
|
1005
|
-
50: string;
|
|
1006
|
-
100: string;
|
|
1007
|
-
200: string;
|
|
1008
|
-
300: string;
|
|
1009
|
-
400: string;
|
|
1010
|
-
500: any;
|
|
1011
|
-
600: string;
|
|
1012
|
-
700: string;
|
|
1013
|
-
800: string;
|
|
1014
|
-
900: string;
|
|
1015
|
-
};
|
|
1016
|
-
success: {
|
|
1017
|
-
50: string;
|
|
1018
|
-
100: string;
|
|
1019
|
-
200: string;
|
|
1020
|
-
300: string;
|
|
1021
|
-
400: string;
|
|
1022
|
-
500: any;
|
|
1023
|
-
600: string;
|
|
1024
|
-
700: string;
|
|
1025
|
-
800: string;
|
|
1026
|
-
900: string;
|
|
1027
|
-
};
|
|
1028
|
-
warning: {
|
|
1029
|
-
50: string;
|
|
1030
|
-
100: string;
|
|
1031
|
-
200: string;
|
|
1032
|
-
300: string;
|
|
1033
|
-
400: string;
|
|
1034
|
-
500: any;
|
|
1035
|
-
600: string;
|
|
1036
|
-
700: string;
|
|
1037
|
-
800: string;
|
|
1038
|
-
900: string;
|
|
1039
|
-
};
|
|
1040
|
-
danger: {
|
|
1041
|
-
50: string;
|
|
1042
|
-
100: string;
|
|
1043
|
-
200: string;
|
|
1044
|
-
300: string;
|
|
1045
|
-
400: string;
|
|
1046
|
-
500: any;
|
|
1047
|
-
600: string;
|
|
1048
|
-
700: string;
|
|
1049
|
-
800: string;
|
|
1050
|
-
900: string;
|
|
1051
|
-
};
|
|
1052
|
-
info: {
|
|
1053
|
-
50: string;
|
|
1054
|
-
100: string;
|
|
1055
|
-
200: string;
|
|
1056
|
-
300: string;
|
|
1057
|
-
400: string;
|
|
1058
|
-
500: any;
|
|
1059
|
-
600: string;
|
|
1060
|
-
700: string;
|
|
1061
|
-
800: string;
|
|
1062
|
-
900: string;
|
|
1063
|
-
};
|
|
1064
|
-
gray: {
|
|
1065
|
-
50: string;
|
|
1066
|
-
100: string;
|
|
1067
|
-
200: string;
|
|
1068
|
-
300: string;
|
|
1069
|
-
400: string;
|
|
1070
|
-
500: any;
|
|
1071
|
-
600: string;
|
|
1072
|
-
700: string;
|
|
1073
|
-
800: string;
|
|
1074
|
-
900: string;
|
|
1075
|
-
};
|
|
1076
|
-
surface: {
|
|
1077
|
-
base: any;
|
|
1078
|
-
subtle: string;
|
|
1079
|
-
elevated: string;
|
|
1080
|
-
sunken: string;
|
|
1081
|
-
overlay: string;
|
|
1082
|
-
inverse: string;
|
|
1083
|
-
hover: string;
|
|
1084
|
-
};
|
|
1085
|
-
};
|
|
1086
|
-
spacing: {
|
|
1087
|
-
0: string;
|
|
1088
|
-
};
|
|
1089
|
-
radius: {
|
|
1090
|
-
none: string;
|
|
1091
|
-
xs: string;
|
|
1092
|
-
sm: string;
|
|
1093
|
-
md: string;
|
|
1094
|
-
lg: string;
|
|
1095
|
-
xl: string;
|
|
1096
|
-
full: string;
|
|
1097
|
-
};
|
|
1098
|
-
borderWidths: {
|
|
1099
|
-
hairline: string;
|
|
1100
|
-
thin: string;
|
|
1101
|
-
medium: string;
|
|
1102
|
-
thick: string;
|
|
1103
|
-
};
|
|
1104
|
-
typography: {
|
|
1105
|
-
fontFamily: {
|
|
1106
|
-
headings: any;
|
|
1107
|
-
body: any;
|
|
1108
|
-
mono: any;
|
|
1109
|
-
};
|
|
1110
|
-
fontSize: {
|
|
1111
|
-
xs: string;
|
|
1112
|
-
sm: string;
|
|
1113
|
-
base: string;
|
|
1114
|
-
lg: string;
|
|
1115
|
-
xl: string;
|
|
1116
|
-
"2xl": string;
|
|
1117
|
-
"3xl": string;
|
|
1118
|
-
"4xl": string;
|
|
1119
|
-
};
|
|
1120
|
-
fontWeight: {
|
|
1121
|
-
light: any;
|
|
1122
|
-
normal: any;
|
|
1123
|
-
medium: any;
|
|
1124
|
-
semibold: any;
|
|
1125
|
-
bold: any;
|
|
1126
|
-
};
|
|
1127
|
-
lineHeight: {
|
|
1128
|
-
tight: any;
|
|
1129
|
-
normal: any;
|
|
1130
|
-
relaxed: any;
|
|
1131
|
-
};
|
|
1132
|
-
};
|
|
1133
|
-
shadows: {
|
|
1134
|
-
sm: string;
|
|
1135
|
-
base: string;
|
|
1136
|
-
md: string;
|
|
1137
|
-
lg: string;
|
|
1138
|
-
xl: string;
|
|
1139
|
-
inner: string;
|
|
1140
|
-
};
|
|
1141
|
-
layout: {
|
|
1142
|
-
maxWidth: string;
|
|
1143
|
-
minHeight: string;
|
|
1144
|
-
containerPadding: string;
|
|
1145
|
-
breakpoints: {
|
|
1146
|
-
sm: string;
|
|
1147
|
-
md: string;
|
|
1148
|
-
lg: string;
|
|
1149
|
-
xl: string;
|
|
1150
|
-
};
|
|
1151
|
-
pageMargin: string;
|
|
1152
|
-
sectionGap: string;
|
|
1153
|
-
containerGap: string;
|
|
1154
|
-
heroSpacing: string;
|
|
1155
|
-
footerSpacing: string;
|
|
1156
|
-
};
|
|
1157
|
-
transitions: {
|
|
1158
|
-
fast: string;
|
|
1159
|
-
normal: string;
|
|
1160
|
-
slow: string;
|
|
1161
|
-
};
|
|
1162
|
-
zIndex: {
|
|
1163
|
-
dropdown: any;
|
|
1164
|
-
sticky: any;
|
|
1165
|
-
fixed: any;
|
|
1166
|
-
modal: any;
|
|
1167
|
-
drawer: any;
|
|
1168
|
-
popover: any;
|
|
1169
|
-
tooltip: any;
|
|
1170
|
-
notification: any;
|
|
1171
|
-
};
|
|
1172
|
-
icons: {
|
|
1173
|
-
set: any;
|
|
1174
|
-
weight: any;
|
|
1175
|
-
defaultSize: string;
|
|
1176
|
-
sizes: {
|
|
1177
|
-
[k: string]: string;
|
|
1178
|
-
};
|
|
1179
|
-
spritePath: any;
|
|
1180
|
-
externalPath: any;
|
|
1181
|
-
};
|
|
1182
|
-
};
|
|
1183
|
-
layers: {
|
|
1184
|
-
tokens: {
|
|
1185
|
-
css: any;
|
|
1186
|
-
size: any;
|
|
1187
|
-
sizeKB: string;
|
|
1188
|
-
};
|
|
1189
|
-
primitives: {
|
|
1190
|
-
css: any;
|
|
1191
|
-
size: any;
|
|
1192
|
-
sizeKB: string;
|
|
1193
|
-
};
|
|
1194
|
-
components: {
|
|
1195
|
-
css: any;
|
|
1196
|
-
size: any;
|
|
1197
|
-
sizeKB: string;
|
|
1198
|
-
};
|
|
1199
|
-
utilities: {
|
|
1200
|
-
css: any;
|
|
1201
|
-
size: any;
|
|
1202
|
-
sizeKB: string;
|
|
1203
|
-
};
|
|
1204
|
-
combined: {
|
|
1205
|
-
css: string;
|
|
1206
|
-
size: number;
|
|
1207
|
-
sizeKB: string;
|
|
1208
|
-
};
|
|
1209
|
-
};
|
|
1210
|
-
config: {
|
|
1211
|
-
design: any;
|
|
1212
|
-
preset: any;
|
|
1213
|
-
debug: boolean;
|
|
1214
|
-
};
|
|
1215
|
-
capabilities: {
|
|
1216
|
-
constructableStylesheets: boolean;
|
|
1217
|
-
blobURLs: boolean;
|
|
1218
|
-
shadowDOM: boolean;
|
|
1219
|
-
};
|
|
1220
|
-
references: {
|
|
1221
|
-
ontology: any;
|
|
1222
|
-
enums: any;
|
|
1223
|
-
};
|
|
1224
|
-
meta: {
|
|
1225
|
-
generatedAt: string;
|
|
1226
|
-
totalSize: any;
|
|
1227
|
-
totalSizeKB: string;
|
|
1228
|
-
layerCount: number;
|
|
1229
|
-
tokenGroups: number;
|
|
1230
|
-
};
|
|
1231
|
-
helpers: {
|
|
1232
|
-
getColorScales: () => {
|
|
1233
|
-
name: string;
|
|
1234
|
-
scale: {
|
|
1235
|
-
50: string;
|
|
1236
|
-
100: string;
|
|
1237
|
-
200: string;
|
|
1238
|
-
300: string;
|
|
1239
|
-
400: string;
|
|
1240
|
-
500: any;
|
|
1241
|
-
600: string;
|
|
1242
|
-
700: string;
|
|
1243
|
-
800: string;
|
|
1244
|
-
900: string;
|
|
1245
|
-
} | {
|
|
1246
|
-
50: string;
|
|
1247
|
-
100: string;
|
|
1248
|
-
200: string;
|
|
1249
|
-
300: string;
|
|
1250
|
-
400: string;
|
|
1251
|
-
500: any;
|
|
1252
|
-
600: string;
|
|
1253
|
-
700: string;
|
|
1254
|
-
800: string;
|
|
1255
|
-
900: string;
|
|
1256
|
-
} | {
|
|
1257
|
-
base: any;
|
|
1258
|
-
subtle: string;
|
|
1259
|
-
elevated: string;
|
|
1260
|
-
sunken: string;
|
|
1261
|
-
overlay: string;
|
|
1262
|
-
inverse: string;
|
|
1263
|
-
hover: string;
|
|
1264
|
-
};
|
|
1265
|
-
}[];
|
|
1266
|
-
getColorScale: (t: any) => any;
|
|
1267
|
-
getSpacingValues: () => {
|
|
1268
|
-
key: string;
|
|
1269
|
-
value: string;
|
|
1270
|
-
}[];
|
|
1271
|
-
getTypography: () => {
|
|
1272
|
-
fontFamily: {
|
|
1273
|
-
headings: any;
|
|
1274
|
-
body: any;
|
|
1275
|
-
mono: any;
|
|
1276
|
-
};
|
|
1277
|
-
fontSize: {
|
|
1278
|
-
xs: string;
|
|
1279
|
-
sm: string;
|
|
1280
|
-
base: string;
|
|
1281
|
-
lg: string;
|
|
1282
|
-
xl: string;
|
|
1283
|
-
"2xl": string;
|
|
1284
|
-
"3xl": string;
|
|
1285
|
-
"4xl": string;
|
|
1286
|
-
};
|
|
1287
|
-
fontWeight: {
|
|
1288
|
-
light: any;
|
|
1289
|
-
normal: any;
|
|
1290
|
-
medium: any;
|
|
1291
|
-
semibold: any;
|
|
1292
|
-
bold: any;
|
|
1293
|
-
};
|
|
1294
|
-
lineHeight: {
|
|
1295
|
-
tight: any;
|
|
1296
|
-
normal: any;
|
|
1297
|
-
relaxed: any;
|
|
1298
|
-
};
|
|
1299
|
-
};
|
|
1300
|
-
getLayerCSS: (t: any) => any;
|
|
1301
|
-
usesEnumValue: (t: any, e: any) => boolean;
|
|
1302
|
-
};
|
|
1303
|
-
};
|
|
1015
|
+
/**
|
|
1016
|
+
* Get a complete compiled representation of the design system state.
|
|
1017
|
+
* This provides structured access to all generated tokens, scales, layers, and metadata.
|
|
1018
|
+
* Linked to ontology and enums for introspection and tooling.
|
|
1019
|
+
*
|
|
1020
|
+
* @returns {Object} Compiled design system state with tokens, layers, metadata, and references
|
|
1021
|
+
*/
|
|
1022
|
+
get compiled(): any;
|
|
1304
1023
|
get tokensStylesheet(): any;
|
|
1305
1024
|
get primitivesStylesheet(): any;
|
|
1306
1025
|
get componentsStylesheet(): any;
|
|
1307
1026
|
get utilitiesStylesheet(): any;
|
|
1027
|
+
/**
|
|
1028
|
+
* Generate CSS module files for export
|
|
1029
|
+
* Returns object with filename => content
|
|
1030
|
+
*/
|
|
1308
1031
|
getCSSModules(): {
|
|
1309
1032
|
"pds-tokens.css.js": string;
|
|
1310
1033
|
"pds-primitives.css.js": string;
|
|
@@ -1312,13 +1035,33 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
|
|
|
1312
1035
|
"pds-utilities.css.js": string;
|
|
1313
1036
|
"pds-styles.css.js": string;
|
|
1314
1037
|
};
|
|
1315
|
-
"__#private@#
|
|
1038
|
+
"__#private@#generateCSSModule"(name: any, css: any): string;
|
|
1316
1039
|
};
|
|
1317
1040
|
config: {
|
|
1318
1041
|
design: any;
|
|
1319
1042
|
preset: any;
|
|
1320
1043
|
} | {
|
|
1321
|
-
design: {
|
|
1044
|
+
design: {
|
|
1045
|
+
colors: unknown;
|
|
1046
|
+
} | {
|
|
1047
|
+
typography: unknown;
|
|
1048
|
+
} | {
|
|
1049
|
+
spatialRhythm: unknown;
|
|
1050
|
+
} | {
|
|
1051
|
+
shape: unknown;
|
|
1052
|
+
} | {
|
|
1053
|
+
behavior: unknown;
|
|
1054
|
+
} | {
|
|
1055
|
+
layout: unknown;
|
|
1056
|
+
} | {
|
|
1057
|
+
advanced: unknown;
|
|
1058
|
+
} | {
|
|
1059
|
+
a11y: unknown;
|
|
1060
|
+
} | {
|
|
1061
|
+
components: unknown;
|
|
1062
|
+
} | {
|
|
1063
|
+
icons: unknown;
|
|
1064
|
+
};
|
|
1322
1065
|
} | {
|
|
1323
1066
|
debug: boolean;
|
|
1324
1067
|
};
|