@donotdev/ui 0.0.3 → 0.0.4
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/components/auth/AuthMenu.d.ts.map +1 -1
- package/dist/components/auth/AuthMenu.js +4 -4
- package/dist/components/common/FeatureCard.d.ts +7 -19
- package/dist/components/common/FeatureCard.d.ts.map +1 -1
- package/dist/components/common/FeatureCard.js +4 -28
- package/dist/components/common/TechBento.d.ts +15 -3
- package/dist/components/common/TechBento.d.ts.map +1 -1
- package/dist/components/common/TechBento.js +20 -2
- package/dist/dndev.css +258 -151
- package/dist/index.js +4 -4
- package/dist/internal/devtools/DebugTools.js +1 -1
- package/dist/internal/devtools/components/ConfigTab.d.ts.map +1 -1
- package/dist/internal/devtools/components/ConfigTab.js +8 -6
- package/dist/internal/devtools/components/DesignTab.d.ts.map +1 -1
- package/dist/internal/devtools/components/DesignTab.js +256 -45
- package/dist/internal/devtools/components/StoresTab.d.ts.map +1 -1
- package/dist/internal/initializers/BaseStoresInitializer.d.ts.map +1 -1
- package/dist/internal/initializers/BaseStoresInitializer.js +11 -1
- package/dist/internal/layout/components/AutoMetaTags.d.ts.map +1 -1
- package/dist/internal/layout/components/AutoMetaTags.js +6 -1
- package/dist/internal/layout/zones/DnDevFooter.js +2 -2
- package/dist/styles/index.css +258 -151
- package/dist/utils/assetResolver.d.ts.map +1 -1
- package/dist/utils/assetResolver.js +22 -11
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/tList.d.ts +30 -0
- package/dist/utils/tList.d.ts.map +1 -0
- package/dist/utils/tList.js +51 -0
- package/dist/vite-routing/AppRoutes.d.ts.map +1 -1
- package/package.json +9 -9
package/dist/styles/index.css
CHANGED
|
@@ -18,9 +18,10 @@
|
|
|
18
18
|
Used by: CSS @media queries, JavaScript hooks, responsive components
|
|
19
19
|
Note: CSS variables don't work in @media, so we use hardcoded px values
|
|
20
20
|
=========================== */
|
|
21
|
-
--breakpoint-mobile: 768px;
|
|
22
|
-
--breakpoint-tablet: 1024px;
|
|
23
|
-
--breakpoint-
|
|
21
|
+
--breakpoint-mobile: 768px; /* < 768 = mobile */
|
|
22
|
+
--breakpoint-tablet: 1024px; /* 768-1023 = tablet */
|
|
23
|
+
--breakpoint-laptop: 1440px; /* 1024-1439 = laptop (key layout split) */
|
|
24
|
+
--breakpoint-desktop: 1920px; /* 1440+ = desktop */
|
|
24
25
|
|
|
25
26
|
/* ===========================
|
|
26
27
|
INTERACTIVE ELEMENTS
|
|
@@ -285,28 +286,48 @@
|
|
|
285
286
|
/* Compact (Admin/Data) - Dense, information-dense layouts - Minor Third (1.2×) */
|
|
286
287
|
|
|
287
288
|
[data-density='compact'] {
|
|
288
|
-
|
|
289
|
-
--font-size-
|
|
290
|
-
--font-size-
|
|
291
|
-
--font-size-
|
|
292
|
-
|
|
293
|
-
--
|
|
294
|
-
|
|
295
|
-
|
|
289
|
+
/* Base sizes: Fluid responsiveness for all text, zoom-safe */
|
|
290
|
+
--font-size-base: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14-15px fluid */
|
|
291
|
+
--font-size-lg: clamp(1.05rem, 0.9375rem + 0.5vw, 1.125rem); /* 17-18px fluid */
|
|
292
|
+
--font-size-xl: clamp(1.26rem, 1.125rem + 0.75vw, 1.375rem); /* 20-22px fluid */
|
|
293
|
+
/* Display sizes: Musical scale + fluid responsiveness */
|
|
294
|
+
--font-size-2xl: clamp(
|
|
295
|
+
1.512rem,
|
|
296
|
+
1.375rem + 0.75vw,
|
|
297
|
+
1.625rem
|
|
298
|
+
); /* 24-26px fluid */
|
|
299
|
+
--font-size-3xl: clamp(
|
|
300
|
+
1.814rem,
|
|
301
|
+
1.625rem + 1vw,
|
|
302
|
+
2rem
|
|
303
|
+
); /* 29-32px fluid */
|
|
304
|
+
--gap-sm: clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem); /* 6-8px fluid */
|
|
305
|
+
--gap-md: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem); /* 12-14px fluid, zoom-safe */
|
|
306
|
+
--gap-lg: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24-28px fluid, zoom-safe */
|
|
296
307
|
--line-height: 1.2; /* Minor Third - All text */
|
|
297
308
|
}
|
|
298
309
|
|
|
299
310
|
/* Standard (Docs/SaaS) - DEFAULT, balanced for readability */
|
|
300
311
|
|
|
301
312
|
[data-density='standard'] {
|
|
302
|
-
|
|
303
|
-
--font-size-
|
|
304
|
-
--font-size-
|
|
305
|
-
--font-size-
|
|
306
|
-
|
|
307
|
-
--
|
|
308
|
-
|
|
309
|
-
|
|
313
|
+
/* Base sizes: Fluid responsiveness for all text, zoom-safe */
|
|
314
|
+
--font-size-base: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); /* 16-17px fluid */
|
|
315
|
+
--font-size-lg: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem); /* 20-22px fluid */
|
|
316
|
+
--font-size-xl: clamp(1.563rem, 1.375rem + 0.75vw, 1.75rem); /* 25-28px fluid */
|
|
317
|
+
/* Display sizes: Musical scale + fluid responsiveness */
|
|
318
|
+
--font-size-2xl: clamp(
|
|
319
|
+
1.953rem,
|
|
320
|
+
1.75rem + 1vw,
|
|
321
|
+
2.25rem
|
|
322
|
+
); /* 31-36px fluid */
|
|
323
|
+
--font-size-3xl: clamp(
|
|
324
|
+
2.441rem,
|
|
325
|
+
2rem + 1.5vw,
|
|
326
|
+
3rem
|
|
327
|
+
); /* 39-48px fluid - hero text */
|
|
328
|
+
--gap-sm: clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem); /* 8-10px fluid */
|
|
329
|
+
--gap-md: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16-20px fluid, zoom-safe */
|
|
330
|
+
--gap-lg: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 32-40px fluid, zoom-safe */
|
|
310
331
|
--line-height: 1.25; /* Major Third - All text */
|
|
311
332
|
}
|
|
312
333
|
|
|
@@ -538,49 +559,16 @@ a:focus-visible {
|
|
|
538
559
|
border-radius: var(--radius-interactive);
|
|
539
560
|
}
|
|
540
561
|
|
|
541
|
-
/*
|
|
542
|
-
BASE LIST STYLING
|
|
543
|
-
Use text-base styles for lists
|
|
544
|
-
=========================== */
|
|
545
|
-
|
|
546
|
-
/* Content lists only - not navigation menus */
|
|
547
|
-
|
|
548
|
-
main ul,
|
|
549
|
-
main ol,
|
|
550
|
-
article ul,
|
|
551
|
-
article ol {
|
|
552
|
-
font-weight: 500;
|
|
553
|
-
line-height: var(--line-height);
|
|
554
|
-
color: var(--foreground);
|
|
555
|
-
background: transparent !important;
|
|
556
|
-
list-style-position: outside;
|
|
557
|
-
padding-inline-start: var(--gap-lg);
|
|
558
|
-
margin-block: var(--gap-md);
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
main ul,
|
|
562
|
-
article ul {
|
|
563
|
-
list-style-type: disc;
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
main ol,
|
|
567
|
-
article ol {
|
|
568
|
-
list-style-type: decimal;
|
|
569
|
-
}
|
|
562
|
+
/* Main element - no focus outline (programmatic focus for keyboard nav) */
|
|
570
563
|
|
|
571
|
-
main
|
|
572
|
-
|
|
573
|
-
font-weight: 500;
|
|
574
|
-
line-height: var(--line-height);
|
|
575
|
-
color: var(--foreground);
|
|
576
|
-
background: transparent !important;
|
|
577
|
-
margin-block: var(--gap-sm);
|
|
578
|
-
padding-inline-start: var(--gap-sm);
|
|
564
|
+
main:focus-visible {
|
|
565
|
+
outline: none;
|
|
579
566
|
}
|
|
580
567
|
|
|
581
568
|
/* ===========================
|
|
582
|
-
BASE TYPOGRAPHY
|
|
583
|
-
|
|
569
|
+
BASE TYPOGRAPHY - RESET ONLY
|
|
570
|
+
Zero margins, components own their spacing
|
|
571
|
+
Use .prose wrapper for content pages (docs, markdown)
|
|
584
572
|
=========================== */
|
|
585
573
|
|
|
586
574
|
h1,
|
|
@@ -589,49 +577,71 @@ h3,
|
|
|
589
577
|
h4,
|
|
590
578
|
h5,
|
|
591
579
|
h6 {
|
|
592
|
-
font-weight:
|
|
580
|
+
font-weight: var(--font-weight-medium);
|
|
593
581
|
line-height: var(--line-height);
|
|
594
582
|
color: var(--foreground);
|
|
595
583
|
background: transparent;
|
|
596
|
-
margin-block: var(--gap-md);
|
|
597
584
|
}
|
|
598
585
|
|
|
599
586
|
h1 {
|
|
600
587
|
font-family: var(--font-headline);
|
|
601
588
|
font-size: var(--font-size-3xl);
|
|
602
|
-
font-weight:
|
|
589
|
+
font-weight: var(--font-weight-bold);
|
|
603
590
|
letter-spacing: -0.02em;
|
|
604
591
|
}
|
|
605
592
|
|
|
606
593
|
h2 {
|
|
607
594
|
font-family: var(--font-headline);
|
|
608
595
|
font-size: var(--font-size-2xl);
|
|
609
|
-
font-weight:
|
|
596
|
+
font-weight: var(--font-weight-bold);
|
|
610
597
|
letter-spacing: -0.01em;
|
|
611
598
|
}
|
|
612
599
|
|
|
613
600
|
h3 {
|
|
614
601
|
font-size: var(--font-size-xl);
|
|
615
|
-
font-weight:
|
|
602
|
+
font-weight: var(--font-weight-semibold);
|
|
616
603
|
}
|
|
617
604
|
|
|
618
605
|
h4 {
|
|
619
606
|
font-size: var(--font-size-lg);
|
|
620
|
-
font-weight:
|
|
607
|
+
font-weight: var(--font-weight-semibold);
|
|
621
608
|
}
|
|
622
609
|
|
|
623
610
|
h5,
|
|
624
611
|
h6 {
|
|
625
612
|
font-size: var(--font-size-base);
|
|
626
|
-
font-weight:
|
|
613
|
+
font-weight: var(--font-weight-semibold);
|
|
627
614
|
}
|
|
628
615
|
|
|
629
616
|
p {
|
|
630
|
-
font-weight:
|
|
617
|
+
font-weight: var(--font-weight-medium);
|
|
618
|
+
line-height: var(--line-height);
|
|
619
|
+
color: var(--foreground);
|
|
620
|
+
background: transparent;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
ul,
|
|
624
|
+
ol {
|
|
625
|
+
font-weight: var(--font-weight-medium);
|
|
626
|
+
line-height: var(--line-height);
|
|
627
|
+
color: var(--foreground);
|
|
628
|
+
background: transparent;
|
|
629
|
+
list-style-position: outside;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
ul {
|
|
633
|
+
list-style-type: disc;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
ol {
|
|
637
|
+
list-style-type: decimal;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
li {
|
|
641
|
+
font-weight: var(--font-weight-medium);
|
|
631
642
|
line-height: var(--line-height);
|
|
632
643
|
color: var(--foreground);
|
|
633
644
|
background: transparent;
|
|
634
|
-
margin-block: var(--gap-md);
|
|
635
645
|
}
|
|
636
646
|
|
|
637
647
|
/* Semantic HTML - strong and em */
|
|
@@ -2365,14 +2375,15 @@ em {
|
|
|
2365
2375
|
margin-top: var(--gap-md);
|
|
2366
2376
|
}
|
|
2367
2377
|
|
|
2368
|
-
/* Tech card */
|
|
2378
|
+
/* Tech card - override Card's grid layout for centered content */
|
|
2369
2379
|
|
|
2370
2380
|
.dndev-tech-card {
|
|
2371
2381
|
height: 100%;
|
|
2372
2382
|
min-height: 120px;
|
|
2373
|
-
display: flex;
|
|
2383
|
+
display: flex !important; /* Override Card's grid layout */
|
|
2374
2384
|
align-items: center;
|
|
2375
2385
|
justify-content: center;
|
|
2386
|
+
align-content: center; /* Override Card's align-content: start */
|
|
2376
2387
|
transition:
|
|
2377
2388
|
border-color 0.2s ease,
|
|
2378
2389
|
box-shadow 0.2s ease;
|
|
@@ -2482,7 +2493,8 @@ em {
|
|
|
2482
2493
|
border-inline-end: none;
|
|
2483
2494
|
border-block-start: none;
|
|
2484
2495
|
border-block-end: none;
|
|
2485
|
-
border-radius: var(--radius-interactive) var(--radius-surface)
|
|
2496
|
+
border-radius: var(--radius-interactive) var(--radius-surface)
|
|
2497
|
+
var(--radius-surface) var(--radius-interactive);
|
|
2486
2498
|
overflow: hidden;
|
|
2487
2499
|
}
|
|
2488
2500
|
|
|
@@ -2884,13 +2896,40 @@ em {
|
|
|
2884
2896
|
/* packages/components/src/atomic/CallToAction/CallToAction.css */
|
|
2885
2897
|
|
|
2886
2898
|
.dndev-cta {
|
|
2887
|
-
/*
|
|
2899
|
+
/* Default gradient */
|
|
2888
2900
|
background: linear-gradient(to right, var(--secondary), var(--background));
|
|
2889
2901
|
color: var(--foreground);
|
|
2890
2902
|
/* Padding for background - vertical only, horizontal handled by content */
|
|
2891
2903
|
padding-block: var(--gap-lg);
|
|
2892
2904
|
}
|
|
2893
2905
|
|
|
2906
|
+
/* Tone variants - leverage existing data-tone system */
|
|
2907
|
+
|
|
2908
|
+
.dndev-cta[data-tone='base'] {
|
|
2909
|
+
background: linear-gradient(to right, var(--secondary), var(--background));
|
|
2910
|
+
}
|
|
2911
|
+
|
|
2912
|
+
.dndev-cta[data-tone='muted'] {
|
|
2913
|
+
background: linear-gradient(to right, var(--muted), var(--background));
|
|
2914
|
+
}
|
|
2915
|
+
|
|
2916
|
+
.dndev-cta[data-tone='accent'] {
|
|
2917
|
+
background: linear-gradient(
|
|
2918
|
+
to right,
|
|
2919
|
+
color-mix(in oklab, var(--accent) 10%, transparent),
|
|
2920
|
+
var(--background)
|
|
2921
|
+
);
|
|
2922
|
+
}
|
|
2923
|
+
|
|
2924
|
+
.dndev-cta[data-tone='contrast'] {
|
|
2925
|
+
background: linear-gradient(to right, var(--foreground), var(--background));
|
|
2926
|
+
color: var(--background);
|
|
2927
|
+
}
|
|
2928
|
+
|
|
2929
|
+
.dndev-cta[data-tone='elevated'] {
|
|
2930
|
+
background: linear-gradient(to right, var(--secondary), var(--background));
|
|
2931
|
+
}
|
|
2932
|
+
|
|
2894
2933
|
.dndev-cta-content {
|
|
2895
2934
|
display: flex;
|
|
2896
2935
|
flex-direction: column;
|
|
@@ -2971,19 +3010,35 @@ em {
|
|
|
2971
3010
|
.dndev-card {
|
|
2972
3011
|
display: grid;
|
|
2973
3012
|
gap: var(--gap-md);
|
|
3013
|
+
text-align: start;
|
|
3014
|
+
align-content: start;
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
.dndev-card-header {
|
|
3018
|
+
display: flex;
|
|
3019
|
+
flex-direction: column;
|
|
3020
|
+
}
|
|
3021
|
+
|
|
3022
|
+
.dndev-card-header > .dndev-stack {
|
|
3023
|
+
min-width: 0;
|
|
3024
|
+
}
|
|
3025
|
+
|
|
3026
|
+
.dndev-card-header > .dndev-stack > .dndev-card-title {
|
|
3027
|
+
flex: 1;
|
|
3028
|
+
min-width: 0;
|
|
2974
3029
|
}
|
|
2975
3030
|
|
|
2976
3031
|
.dndev-card-title {
|
|
2977
|
-
font-size: var(--font-size-xl);
|
|
2978
|
-
font-weight: 600;
|
|
2979
|
-
color: inherit; /* Inherit from surface variant */
|
|
2980
3032
|
margin: 0;
|
|
3033
|
+
min-width: 0;
|
|
3034
|
+
word-wrap: break-word;
|
|
2981
3035
|
}
|
|
2982
3036
|
|
|
2983
3037
|
.dndev-card-subtitle {
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
3038
|
+
margin-top: 0;
|
|
3039
|
+
margin-bottom: 0;
|
|
3040
|
+
min-width: 0;
|
|
3041
|
+
word-wrap: break-word;
|
|
2987
3042
|
}
|
|
2988
3043
|
|
|
2989
3044
|
/* packages/components/src/atomic/Checkbox/Checkbox.css */
|
|
@@ -3696,9 +3751,35 @@ em {
|
|
|
3696
3751
|
display: grid;
|
|
3697
3752
|
min-width: 0;
|
|
3698
3753
|
width: 100%;
|
|
3754
|
+
/* Default: use mobile columns */
|
|
3755
|
+
grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
|
|
3756
|
+
}
|
|
3757
|
+
|
|
3758
|
+
/* Responsive columns via media queries */
|
|
3759
|
+
|
|
3760
|
+
/* Tablet: 768px+ */
|
|
3761
|
+
|
|
3762
|
+
@media (min-width: 768px) {
|
|
3763
|
+
.dndev-grid-component {
|
|
3764
|
+
grid-template-columns: repeat(var(--grid-cols-tablet, 1), 1fr);
|
|
3765
|
+
}
|
|
3766
|
+
}
|
|
3767
|
+
|
|
3768
|
+
/* Laptop: 1024px+ (key layout split) */
|
|
3769
|
+
|
|
3770
|
+
@media (min-width: 1024px) {
|
|
3771
|
+
.dndev-grid-component {
|
|
3772
|
+
grid-template-columns: repeat(var(--grid-cols-laptop, 1), 1fr);
|
|
3773
|
+
}
|
|
3699
3774
|
}
|
|
3700
3775
|
|
|
3701
|
-
/*
|
|
3776
|
+
/* Desktop: 1440px+ */
|
|
3777
|
+
|
|
3778
|
+
@media (min-width: 1440px) {
|
|
3779
|
+
.dndev-grid-component {
|
|
3780
|
+
grid-template-columns: repeat(var(--grid-cols-desktop, 1), 1fr);
|
|
3781
|
+
}
|
|
3782
|
+
}
|
|
3702
3783
|
|
|
3703
3784
|
/* Spacing from CSS variables */
|
|
3704
3785
|
|
|
@@ -3843,21 +3924,7 @@ em {
|
|
|
3843
3924
|
}
|
|
3844
3925
|
|
|
3845
3926
|
.dndev-hero-subtitle {
|
|
3846
|
-
font-size: var(--font-size-
|
|
3847
|
-
}
|
|
3848
|
-
|
|
3849
|
-
/* Responsive Content Visibility */
|
|
3850
|
-
|
|
3851
|
-
@media (width < 1024px) {
|
|
3852
|
-
.dndev-hero-section .dndev-desktop-only {
|
|
3853
|
-
display: none !important;
|
|
3854
|
-
}
|
|
3855
|
-
}
|
|
3856
|
-
|
|
3857
|
-
@media (width >= 1024px) {
|
|
3858
|
-
.dndev-hero-section .dndev-mobile-only {
|
|
3859
|
-
display: none !important;
|
|
3860
|
-
}
|
|
3927
|
+
font-size: var(--font-size-lg); /* 20px - muted via component */
|
|
3861
3928
|
}
|
|
3862
3929
|
|
|
3863
3930
|
/* packages/components/src/atomic/HoverCard/HoverCard.css */
|
|
@@ -4170,16 +4237,13 @@ em {
|
|
|
4170
4237
|
.dndev-list {
|
|
4171
4238
|
display: flex;
|
|
4172
4239
|
flex-direction: column;
|
|
4173
|
-
gap: var(--gap-
|
|
4240
|
+
gap: var(--gap-sm);
|
|
4174
4241
|
padding-inline-start: 0; /* Controllable via parent/style prop */
|
|
4242
|
+
margin: 0;
|
|
4175
4243
|
list-style-position: outside;
|
|
4176
|
-
|
|
4244
|
+
text-align: start; /* Always start-aligned, even when parent is centered */
|
|
4177
4245
|
}
|
|
4178
4246
|
|
|
4179
|
-
.dndev-list[data-gap='none'] {
|
|
4180
|
-
gap: var(--gap-none);
|
|
4181
|
-
}
|
|
4182
|
-
|
|
4183
4247
|
.dndev-list[data-gap='tight'] {
|
|
4184
4248
|
gap: var(--gap-sm);
|
|
4185
4249
|
}
|
|
@@ -4228,29 +4292,18 @@ em {
|
|
|
4228
4292
|
font-size: var(--font-size-base);
|
|
4229
4293
|
}
|
|
4230
4294
|
|
|
4231
|
-
/*
|
|
4295
|
+
/* Always use flex layout for consistent alignment */
|
|
4232
4296
|
|
|
4233
4297
|
.dndev-list .dndev-list-item {
|
|
4234
4298
|
font-size: var(--font-size-sm);
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
|
|
4299
|
+
display: flex;
|
|
4300
|
+
align-items: flex-start;
|
|
4301
|
+
gap: var(--gap-sm);
|
|
4302
|
+
list-style: none; /* Remove native marker */
|
|
4303
|
+
margin-block: 0;
|
|
4304
|
+
padding-inline-start: 0;
|
|
4238
4305
|
}
|
|
4239
4306
|
|
|
4240
|
-
:is(.dndev-list .dndev-list-item)::marker {
|
|
4241
|
-
color: currentColor;
|
|
4242
|
-
}
|
|
4243
|
-
|
|
4244
|
-
/* Only use flex when icon is present */
|
|
4245
|
-
|
|
4246
|
-
:is(.dndev-list .dndev-list-item):has(.dndev-list-item-icon) {
|
|
4247
|
-
display: flex;
|
|
4248
|
-
align-items: center; /* Center vertically */
|
|
4249
|
-
gap: var(--gap-sm);
|
|
4250
|
-
list-style: none; /* Remove native marker when using icon */
|
|
4251
|
-
padding-inline-start: 0; /* Reset padding when flex */
|
|
4252
|
-
}
|
|
4253
|
-
|
|
4254
4307
|
:is(.dndev-list .dndev-list-item) .dndev-list-item-icon {
|
|
4255
4308
|
display: flex;
|
|
4256
4309
|
align-items: center;
|
|
@@ -4605,23 +4658,43 @@ em {
|
|
|
4605
4658
|
margin-inline: auto; /* Self-center in parent */
|
|
4606
4659
|
}
|
|
4607
4660
|
|
|
4608
|
-
.dndev-radio-group[data-cols='2'] {
|
|
4661
|
+
.dndev-radio-group[data-cols='2'] {
|
|
4662
|
+
grid-template-columns: repeat(2, auto);
|
|
4663
|
+
}
|
|
4609
4664
|
|
|
4610
|
-
.dndev-radio-group[data-cols='3'] {
|
|
4665
|
+
.dndev-radio-group[data-cols='3'] {
|
|
4666
|
+
grid-template-columns: repeat(3, auto);
|
|
4667
|
+
}
|
|
4611
4668
|
|
|
4612
|
-
.dndev-radio-group[data-cols='4'] {
|
|
4669
|
+
.dndev-radio-group[data-cols='4'] {
|
|
4670
|
+
grid-template-columns: repeat(4, auto);
|
|
4671
|
+
}
|
|
4613
4672
|
|
|
4614
|
-
.dndev-radio-group[data-cols='5'] {
|
|
4673
|
+
.dndev-radio-group[data-cols='5'] {
|
|
4674
|
+
grid-template-columns: repeat(5, auto);
|
|
4675
|
+
}
|
|
4615
4676
|
|
|
4616
|
-
.dndev-radio-group[data-cols='6'] {
|
|
4677
|
+
.dndev-radio-group[data-cols='6'] {
|
|
4678
|
+
grid-template-columns: repeat(6, auto);
|
|
4679
|
+
}
|
|
4617
4680
|
|
|
4618
|
-
.dndev-radio-group[data-cols='10'] {
|
|
4681
|
+
.dndev-radio-group[data-cols='10'] {
|
|
4682
|
+
grid-template-columns: repeat(10, auto);
|
|
4683
|
+
}
|
|
4619
4684
|
|
|
4620
|
-
.dndev-radio-group[data-cols='12'] {
|
|
4685
|
+
.dndev-radio-group[data-cols='12'] {
|
|
4686
|
+
grid-template-columns: repeat(12, auto);
|
|
4687
|
+
}
|
|
4621
4688
|
|
|
4622
|
-
.dndev-radio-group[data-cols='auto-fit'] {
|
|
4689
|
+
.dndev-radio-group[data-cols='auto-fit'] {
|
|
4690
|
+
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
|
|
4691
|
+
width: 100%;
|
|
4692
|
+
}
|
|
4623
4693
|
|
|
4624
|
-
.dndev-radio-group[data-cols='auto-fill'] {
|
|
4694
|
+
.dndev-radio-group[data-cols='auto-fill'] {
|
|
4695
|
+
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
|
4696
|
+
width: 100%;
|
|
4697
|
+
}
|
|
4625
4698
|
|
|
4626
4699
|
/* Variant colors for checked labels - override base pattern */
|
|
4627
4700
|
|
|
@@ -4891,23 +4964,13 @@ em {
|
|
|
4891
4964
|
}
|
|
4892
4965
|
}
|
|
4893
4966
|
|
|
4894
|
-
/* Section title:
|
|
4967
|
+
/* Section title: uppercase, accent color, letter spacing */
|
|
4895
4968
|
|
|
4896
4969
|
.dndev-section-title {
|
|
4897
|
-
display: block;
|
|
4898
|
-
font-size: var(--font-size-lg);
|
|
4899
|
-
font-weight: var(--font-weight-semibold);
|
|
4900
4970
|
text-transform: uppercase;
|
|
4901
4971
|
letter-spacing: 0.2em;
|
|
4902
|
-
color: var(--accent);
|
|
4903
|
-
margin-
|
|
4904
|
-
}
|
|
4905
|
-
|
|
4906
|
-
/* Grid container with default gap */
|
|
4907
|
-
|
|
4908
|
-
.dndev-section-grid {
|
|
4909
|
-
display: grid;
|
|
4910
|
-
gap: var(--gap-md);
|
|
4972
|
+
color: var(--accent) !important;
|
|
4973
|
+
margin-block-end: var(--gap-md);
|
|
4911
4974
|
}
|
|
4912
4975
|
|
|
4913
4976
|
.dndev-section-full-width[data-text-align='start'] .dndev-section-content {
|
|
@@ -6088,7 +6151,7 @@ em {
|
|
|
6088
6151
|
}
|
|
6089
6152
|
|
|
6090
6153
|
.dndev-text-base {
|
|
6091
|
-
font-weight:
|
|
6154
|
+
font-weight: var(--font-weight-medium);
|
|
6092
6155
|
line-height: var(--line-height);
|
|
6093
6156
|
background-color: transparent; /* Text never has background, only color changes */
|
|
6094
6157
|
}
|
|
@@ -6125,28 +6188,36 @@ em {
|
|
|
6125
6188
|
color: var(--destructive);
|
|
6126
6189
|
}
|
|
6127
6190
|
|
|
6191
|
+
.dndev-text-base[data-variant='code'] {
|
|
6192
|
+
font-family: var(--font-mono);
|
|
6193
|
+
font-size: 0.9em;
|
|
6194
|
+
background: var(--muted);
|
|
6195
|
+
padding: 0.1em 0.4em;
|
|
6196
|
+
border-radius: var(--radius-interactive);
|
|
6197
|
+
}
|
|
6198
|
+
|
|
6128
6199
|
/* Level overrides */
|
|
6129
6200
|
|
|
6130
6201
|
.dndev-text-base[data-level='h1'] {
|
|
6131
6202
|
font-size: var(--font-size-3xl);
|
|
6132
|
-
font-weight:
|
|
6203
|
+
font-weight: var(--font-weight-bold);
|
|
6133
6204
|
letter-spacing: -0.02em;
|
|
6134
6205
|
}
|
|
6135
6206
|
|
|
6136
6207
|
.dndev-text-base[data-level='h2'] {
|
|
6137
|
-
font-size: var(--font-size-
|
|
6138
|
-
font-weight:
|
|
6139
|
-
letter-spacing: -0.01em;
|
|
6208
|
+
font-size: var(--font-size-lg);
|
|
6209
|
+
font-weight: var(--font-weight-semibold);
|
|
6140
6210
|
}
|
|
6141
6211
|
|
|
6142
6212
|
.dndev-text-base[data-level='h3'] {
|
|
6143
|
-
font-size: var(--font-size-
|
|
6144
|
-
font-weight:
|
|
6213
|
+
font-size: var(--font-size-lg);
|
|
6214
|
+
font-weight: var(--font-weight-semibold);
|
|
6145
6215
|
}
|
|
6146
6216
|
|
|
6147
6217
|
.dndev-text-base[data-level='h4'] {
|
|
6148
|
-
font-size: var(--font-size-
|
|
6149
|
-
font-weight:
|
|
6218
|
+
font-size: var(--font-size-base);
|
|
6219
|
+
font-weight: var(--font-weight-medium);
|
|
6220
|
+
color: var(--muted-foreground);
|
|
6150
6221
|
}
|
|
6151
6222
|
|
|
6152
6223
|
.dndev-text-base[data-level='body'] {
|
|
@@ -7430,6 +7501,40 @@ h4[data-variant='code'] {
|
|
|
7430
7501
|
border: 0;
|
|
7431
7502
|
}
|
|
7432
7503
|
|
|
7504
|
+
/* ===========================
|
|
7505
|
+
PROSE - SEMANTIC TYPOGRAPHY FOR CONTENT PAGES
|
|
7506
|
+
Wrap docs/markdown/article content in .prose for semantic margins
|
|
7507
|
+
Components are unaffected - they own their own spacing
|
|
7508
|
+
=========================== */
|
|
7509
|
+
|
|
7510
|
+
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
|
|
7511
|
+
margin-block: var(--gap-md);
|
|
7512
|
+
}
|
|
7513
|
+
|
|
7514
|
+
.prose p {
|
|
7515
|
+
margin-block: var(--gap-md);
|
|
7516
|
+
}
|
|
7517
|
+
|
|
7518
|
+
.prose ul,.prose ol {
|
|
7519
|
+
padding-inline-start: var(--gap-lg);
|
|
7520
|
+
margin-block: var(--gap-md);
|
|
7521
|
+
}
|
|
7522
|
+
|
|
7523
|
+
.prose li {
|
|
7524
|
+
margin-block: var(--gap-sm);
|
|
7525
|
+
padding-inline-start: var(--gap-sm);
|
|
7526
|
+
}
|
|
7527
|
+
|
|
7528
|
+
/* First/last child: remove top/bottom margin for clean container edges */
|
|
7529
|
+
|
|
7530
|
+
.prose > :first-child {
|
|
7531
|
+
margin-block-start: 0;
|
|
7532
|
+
}
|
|
7533
|
+
|
|
7534
|
+
.prose > :last-child {
|
|
7535
|
+
margin-block-end: 0;
|
|
7536
|
+
}
|
|
7537
|
+
|
|
7433
7538
|
/* ===========================
|
|
7434
7539
|
SHADOW CONTROL (Universal)
|
|
7435
7540
|
Works with any element
|
|
@@ -7867,18 +7972,20 @@ main[role='main'][data-routing-animation='none'] {
|
|
|
7867
7972
|
display: grid;
|
|
7868
7973
|
/* ONE DRY grid structure: 3 rows, 2 columns */
|
|
7869
7974
|
/* Footer starts at sidebar edge (column 2) - when sidebar-width is 0px, footer starts at left edge */
|
|
7975
|
+
/* Footer grows with content wrapping. For pixel-perfect calc() accuracy when footer wraps,
|
|
7976
|
+
implement ResizeObserver to update --footer-height dynamically. */
|
|
7870
7977
|
grid-template-areas:
|
|
7871
7978
|
'header header'
|
|
7872
7979
|
'sidebar main'
|
|
7873
7980
|
'footer footer';
|
|
7874
|
-
grid-template-rows: var(--header-height) 1fr var(--footer-height);
|
|
7981
|
+
grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
|
|
7875
7982
|
grid-template-columns: var(--sidebar-width) 1fr;
|
|
7876
7983
|
|
|
7877
7984
|
/* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
|
|
7878
7985
|
}
|
|
7879
7986
|
|
|
7880
7987
|
[data-layout='game']:root .dndev-layout {
|
|
7881
|
-
grid-template-rows: var(--header-height) 1fr var(--footer-height);
|
|
7988
|
+
grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
|
|
7882
7989
|
}
|
|
7883
7990
|
|
|
7884
7991
|
/* ===========================
|
|
@@ -8230,7 +8337,7 @@ footer[role='contentinfo'] {
|
|
|
8230
8337
|
grid-area: footer;
|
|
8231
8338
|
box-sizing: border-box;
|
|
8232
8339
|
grid-column: 1 / -1;
|
|
8233
|
-
height: var(--footer-height);
|
|
8340
|
+
min-height: var(--footer-height);
|
|
8234
8341
|
z-index: var(--z-footer);
|
|
8235
8342
|
|
|
8236
8343
|
/* Theme-aware styling - 100% controlled by theme system */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assetResolver.d.ts","sourceRoot":"","sources":["../../src/utils/assetResolver.ts"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,GAAG,CAAC,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE;QACd,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;CAChB;AAKD;;;;;;;GAOG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,KAAK,CAA0B;IAE9C;;OAEG;IACH,MAAM,CAAC,iBAAiB,IAAI,cAAc;IAyC1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAmBlC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAYzC;;OAEG;IACH,MAAM,CAAC,gBAAgB,IAAI,aAAa,GAAG,IAAI;IAM/C;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,IAAI,MAAM,GAAG,IAAI;IAKzC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM;IAe/C;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAgB/B;;;OAGG;IACH,MAAM,CAAC,iBAAiB,IAAI,UAAU;
|
|
1
|
+
{"version":3,"file":"assetResolver.d.ts","sourceRoot":"","sources":["../../src/utils/assetResolver.ts"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,GAAG,CAAC,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE;QACd,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;CAChB;AAKD;;;;;;;GAOG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,KAAK,CAA0B;IAE9C;;OAEG;IACH,MAAM,CAAC,iBAAiB,IAAI,cAAc;IAyC1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAmBlC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAYzC;;OAEG;IACH,MAAM,CAAC,gBAAgB,IAAI,aAAa,GAAG,IAAI;IAM/C;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,IAAI,MAAM,GAAG,IAAI;IAKzC;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM;IAe/C;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAgB/B;;;OAGG;IACH,MAAM,CAAC,iBAAiB,IAAI,UAAU;IA6DtC;;OAEG;IACH,MAAM,CAAC,cAAc,IAAI,MAAM;IAuB/B;;;OAGG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;IASzB;;OAEG;IACH,MAAM,CAAC,YAAY;;;;;;;;CAQpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,IAAI,UAAU,CAE9C;AAgBD,eAAe,aAAa,CAAC"}
|