@mandolin/jsdoc-theme-hia 0.1.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.
@@ -0,0 +1,798 @@
1
+ :root {
2
+ color-scheme: light;
3
+ font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
4
+ color: var(--text);
5
+ background: var(--page-bg);
6
+ --page-bg: #f5f7fa;
7
+ --text: #1f2933;
8
+ --border: #d7dee8;
9
+ --border-strong: #b8c2d1;
10
+ --panel: #ffffff;
11
+ --text-muted: #5d6978;
12
+ --link: #1f5d8f;
13
+ --link-hover: #0d4673;
14
+ --accent: #287c62;
15
+ --accent-soft: #e7f4ef;
16
+ --warn-soft: #fff4dd;
17
+ --warn: #8a5a00;
18
+ --code-bg: #101820;
19
+ --code-line: #d7e1ea;
20
+ --code-font-family: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
21
+ --code-font-size: 12px;
22
+ --code-line-height: 1.55;
23
+ --code-tab-size: 2;
24
+ }
25
+
26
+ * {
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ [hidden] {
31
+ display: none !important;
32
+ }
33
+
34
+ body {
35
+ margin: 0;
36
+ color: var(--text);
37
+ background: var(--page-bg);
38
+ }
39
+
40
+ body.hia-skin-lumen {
41
+ --page-bg: #f7f9fb;
42
+ --text: #202a35;
43
+ --border: #d9e2ec;
44
+ --border-strong: #b6c6d8;
45
+ --panel: #ffffff;
46
+ --text-muted: #526071;
47
+ --link: #245aa5;
48
+ --link-hover: #173f78;
49
+ --accent: #2f7d6d;
50
+ --accent-soft: #e5f4f0;
51
+ --warn-soft: #fff5d8;
52
+ --warn: #7a5300;
53
+ --code-bg: #111827;
54
+ --code-line: #dbe7f2;
55
+ }
56
+
57
+ body.hia-skin-graphite {
58
+ --page-bg: #eef1f4;
59
+ --text: #1f242b;
60
+ --border: #cbd3dc;
61
+ --border-strong: #aeb8c4;
62
+ --panel: #fbfcfd;
63
+ --text-muted: #59636f;
64
+ --link: #1f6581;
65
+ --link-hover: #15485d;
66
+ --accent: #6b6f35;
67
+ --accent-soft: #eef2dc;
68
+ --warn-soft: #fff1db;
69
+ --warn: #7a4d17;
70
+ --code-bg: #151719;
71
+ --code-line: #e5edf3;
72
+ }
73
+
74
+ .skip-link {
75
+ position: fixed;
76
+ top: 8px;
77
+ left: 8px;
78
+ z-index: 10;
79
+ transform: translateY(-140%);
80
+ padding: 8px 10px;
81
+ border-radius: 6px;
82
+ color: #ffffff;
83
+ background: #1f2933;
84
+ }
85
+
86
+ .skip-link:focus {
87
+ transform: translateY(0);
88
+ }
89
+
90
+ a {
91
+ color: var(--link);
92
+ text-decoration: none;
93
+ }
94
+
95
+ a:hover {
96
+ color: var(--link-hover);
97
+ text-decoration: underline;
98
+ }
99
+
100
+ a:focus-visible,
101
+ button:focus-visible,
102
+ input:focus-visible,
103
+ select:focus-visible,
104
+ summary:focus-visible,
105
+ .content:focus-visible {
106
+ outline: 3px solid #8fc8b4;
107
+ outline-offset: 2px;
108
+ }
109
+
110
+ .site-header {
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: space-between;
114
+ gap: 16px;
115
+ padding: 18px 32px;
116
+ background: var(--panel);
117
+ border-bottom: 1px solid var(--border);
118
+ }
119
+
120
+ .site-header h1 {
121
+ margin: 0;
122
+ font-size: 24px;
123
+ font-weight: 650;
124
+ letter-spacing: 0;
125
+ }
126
+
127
+ .site-actions {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: flex-end;
131
+ flex-wrap: wrap;
132
+ gap: 12px;
133
+ }
134
+
135
+ .eyebrow {
136
+ margin: 0 0 4px;
137
+ color: var(--text-muted);
138
+ font-size: 12px;
139
+ font-weight: 700;
140
+ text-transform: uppercase;
141
+ }
142
+
143
+ .summary-stat {
144
+ flex: 0 0 auto;
145
+ color: var(--text-muted);
146
+ font-size: 13px;
147
+ }
148
+
149
+ .language-controls {
150
+ display: inline-flex;
151
+ flex-wrap: wrap;
152
+ gap: 6px;
153
+ }
154
+
155
+ .language-select-control {
156
+ display: inline-flex;
157
+ align-items: center;
158
+ gap: 8px;
159
+ color: var(--text-muted);
160
+ font-size: 13px;
161
+ font-weight: 650;
162
+ }
163
+
164
+ .language-select {
165
+ min-height: 30px;
166
+ padding: 4px 30px 4px 9px;
167
+ border: 1px solid var(--border-strong);
168
+ border-radius: 6px;
169
+ color: #284456;
170
+ background: #ffffff;
171
+ font: inherit;
172
+ font-size: 13px;
173
+ }
174
+
175
+ .language-button,
176
+ .language-link {
177
+ display: inline-flex;
178
+ align-items: center;
179
+ min-height: 30px;
180
+ padding: 4px 9px;
181
+ border: 1px solid var(--border-strong);
182
+ border-radius: 6px;
183
+ color: #284456;
184
+ background: #ffffff;
185
+ font: inherit;
186
+ font-size: 13px;
187
+ line-height: 1;
188
+ }
189
+
190
+ .language-button {
191
+ cursor: pointer;
192
+ }
193
+
194
+ .language-button.active,
195
+ .language-link.active {
196
+ border-color: #8fc8b4;
197
+ color: #1f5f4d;
198
+ background: var(--accent-soft);
199
+ font-weight: 700;
200
+ }
201
+
202
+ .language-link:hover {
203
+ text-decoration: none;
204
+ }
205
+
206
+ .layout {
207
+ display: grid;
208
+ grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
209
+ gap: 24px;
210
+ max-width: 1320px;
211
+ margin: 0 auto;
212
+ padding: 24px;
213
+ }
214
+
215
+ .sidebar {
216
+ align-self: start;
217
+ position: sticky;
218
+ top: 16px;
219
+ display: grid;
220
+ gap: 14px;
221
+ max-height: calc(100vh - 32px);
222
+ overflow: auto;
223
+ padding-right: 4px;
224
+ }
225
+
226
+ .search-label {
227
+ color: var(--text-muted);
228
+ font-size: 12px;
229
+ font-weight: 650;
230
+ }
231
+
232
+ .search-input {
233
+ width: 100%;
234
+ min-height: 36px;
235
+ padding: 7px 10px;
236
+ border: 1px solid var(--border-strong);
237
+ border-radius: 6px;
238
+ color: #1f2933;
239
+ background: #ffffff;
240
+ font: inherit;
241
+ }
242
+
243
+ .code-controls {
244
+ display: grid;
245
+ grid-template-columns: repeat(2, minmax(0, 1fr));
246
+ gap: 8px;
247
+ padding: 10px;
248
+ border: 1px solid var(--border);
249
+ border-radius: 6px;
250
+ background: rgba(255, 255, 255, 0.64);
251
+ }
252
+
253
+ .code-controls-title {
254
+ grid-column: 1 / -1;
255
+ color: var(--text-muted);
256
+ font-size: 12px;
257
+ font-weight: 700;
258
+ }
259
+
260
+ .code-control {
261
+ display: grid;
262
+ gap: 4px;
263
+ color: var(--text-muted);
264
+ font-size: 12px;
265
+ font-weight: 650;
266
+ }
267
+
268
+ .code-control:not(.compact) {
269
+ grid-column: 1 / -1;
270
+ }
271
+
272
+ .code-select,
273
+ .code-input {
274
+ width: 100%;
275
+ min-height: 30px;
276
+ border: 1px solid var(--border-strong);
277
+ border-radius: 5px;
278
+ color: #1f2933;
279
+ background: #ffffff;
280
+ font: inherit;
281
+ font-size: 12px;
282
+ }
283
+
284
+ .code-select {
285
+ padding: 4px 8px;
286
+ }
287
+
288
+ .code-input {
289
+ padding: 4px 6px;
290
+ }
291
+
292
+ .code-toggle {
293
+ display: inline-flex;
294
+ align-items: center;
295
+ gap: 6px;
296
+ color: var(--text-muted);
297
+ font-size: 12px;
298
+ font-weight: 650;
299
+ }
300
+
301
+ .code-reset {
302
+ min-height: 30px;
303
+ border: 1px solid var(--border-strong);
304
+ border-radius: 5px;
305
+ color: #284456;
306
+ background: #ffffff;
307
+ font: inherit;
308
+ font-size: 12px;
309
+ cursor: pointer;
310
+ }
311
+
312
+ .code-reset:hover {
313
+ color: var(--link-hover);
314
+ border-color: var(--link);
315
+ }
316
+
317
+ .nav-group {
318
+ display: grid;
319
+ gap: 6px;
320
+ }
321
+
322
+ .nav-group h2 {
323
+ display: flex;
324
+ align-items: center;
325
+ justify-content: space-between;
326
+ margin: 6px 0 2px;
327
+ color: var(--text-muted);
328
+ font-size: 12px;
329
+ font-weight: 700;
330
+ letter-spacing: 0;
331
+ text-transform: uppercase;
332
+ }
333
+
334
+ .nav-group h2 span {
335
+ color: #7a8594;
336
+ font-weight: 600;
337
+ }
338
+
339
+ .nav-group a {
340
+ display: block;
341
+ min-height: 28px;
342
+ padding: 5px 8px;
343
+ border-left: 2px solid transparent;
344
+ color: #2b4c68;
345
+ font-size: 13px;
346
+ overflow-wrap: anywhere;
347
+ }
348
+
349
+ .nav-group a:hover {
350
+ border-left-color: var(--accent);
351
+ background: var(--accent-soft);
352
+ text-decoration: none;
353
+ }
354
+
355
+ .content {
356
+ display: grid;
357
+ gap: 16px;
358
+ min-width: 0;
359
+ }
360
+
361
+ .doclet {
362
+ background: var(--panel);
363
+ border: 1px solid var(--border);
364
+ border-radius: 6px;
365
+ padding: 18px;
366
+ min-width: 0;
367
+ }
368
+
369
+ .doclet-details {
370
+ display: grid;
371
+ gap: 12px;
372
+ }
373
+
374
+ .doclet-summary,
375
+ .section-summary {
376
+ cursor: pointer;
377
+ list-style: none;
378
+ }
379
+
380
+ .doclet-summary::-webkit-details-marker,
381
+ .section-summary::-webkit-details-marker {
382
+ display: none;
383
+ }
384
+
385
+ .collapse-summary {
386
+ display: flex;
387
+ align-items: flex-start;
388
+ gap: 12px;
389
+ }
390
+
391
+ .collapse-summary::after {
392
+ content: "";
393
+ flex: 0 0 auto;
394
+ width: 8px;
395
+ height: 8px;
396
+ margin-top: 7px;
397
+ margin-left: auto;
398
+ border: solid var(--text-muted);
399
+ border-width: 0 2px 2px 0;
400
+ transform: rotate(45deg);
401
+ transition: transform 120ms ease;
402
+ }
403
+
404
+ .doclet-summary.collapse-summary::after {
405
+ width: 9px;
406
+ height: 9px;
407
+ border-color: #607083;
408
+ }
409
+
410
+ .section-summary.collapse-summary::after {
411
+ width: 7px;
412
+ height: 7px;
413
+ margin-right: 16px;
414
+ border-color: var(--accent);
415
+ opacity: 0.82;
416
+ }
417
+
418
+ details[open] > .collapse-summary::after {
419
+ transform: rotate(225deg);
420
+ }
421
+
422
+ .doclet-summary-main {
423
+ display: grid;
424
+ gap: 8px;
425
+ min-width: 0;
426
+ padding-right: 12px;
427
+ }
428
+
429
+ .doclet-body {
430
+ display: grid;
431
+ gap: 0;
432
+ }
433
+
434
+ .doclet-details:not([open]) > .doclet-body,
435
+ .collapsible-section:not([open]) > .section-body {
436
+ display: none;
437
+ }
438
+
439
+ .doclet h2 {
440
+ margin: 0;
441
+ font-size: 21px;
442
+ font-weight: 700;
443
+ letter-spacing: 0;
444
+ overflow-wrap: anywhere;
445
+ }
446
+
447
+ .badges {
448
+ display: flex;
449
+ flex-wrap: wrap;
450
+ gap: 6px;
451
+ }
452
+
453
+ .badge {
454
+ display: inline-flex;
455
+ align-items: center;
456
+ min-height: 22px;
457
+ padding: 2px 7px;
458
+ border: 1px solid var(--border);
459
+ border-radius: 999px;
460
+ color: #364251;
461
+ background: #f8fafc;
462
+ font-size: 12px;
463
+ font-weight: 650;
464
+ }
465
+
466
+ .badge.muted {
467
+ color: var(--text-muted);
468
+ }
469
+
470
+ .badge.hia {
471
+ border-color: #b7dacd;
472
+ color: #23634f;
473
+ background: var(--accent-soft);
474
+ }
475
+
476
+ .badge.source {
477
+ border-color: #f0d391;
478
+ color: #73520c;
479
+ background: var(--warn-soft);
480
+ }
481
+
482
+ .signature {
483
+ margin: 0;
484
+ padding: 10px 12px;
485
+ border: 1px solid #cdd7e3;
486
+ border-radius: 6px;
487
+ color: #1c2f41;
488
+ background: #f8fafc;
489
+ overflow-x: auto;
490
+ }
491
+
492
+ .signature code {
493
+ font-family: var(--code-font-family);
494
+ font-size: 13px;
495
+ white-space: pre;
496
+ }
497
+
498
+ .description {
499
+ color: #2d3744;
500
+ }
501
+
502
+ .i18n-description-set {
503
+ display: grid;
504
+ gap: 0;
505
+ }
506
+
507
+ .i18n-description[data-hia-fallback-from] {
508
+ border-left: 3px solid #e5c36a;
509
+ padding-left: 10px;
510
+ }
511
+
512
+ .description p,
513
+ .doc-table p {
514
+ margin: 0 0 8px;
515
+ }
516
+
517
+ .description p:last-child,
518
+ .doc-table p:last-child {
519
+ margin-bottom: 0;
520
+ }
521
+
522
+ .doc-section {
523
+ margin-top: 18px;
524
+ }
525
+
526
+ .section-summary {
527
+ display: flex;
528
+ align-items: flex-start;
529
+ border-radius: 4px;
530
+ }
531
+
532
+ .doc-section h3 {
533
+ margin: 0;
534
+ color: #263341;
535
+ font-size: 15px;
536
+ font-weight: 700;
537
+ letter-spacing: 0;
538
+ }
539
+
540
+ .section-body {
541
+ margin-top: 8px;
542
+ }
543
+
544
+ .table-wrap {
545
+ overflow-x: auto;
546
+ border: 1px solid var(--border);
547
+ border-radius: 6px;
548
+ }
549
+
550
+ .doc-table {
551
+ width: 100%;
552
+ border-collapse: collapse;
553
+ min-width: 640px;
554
+ font-size: 13px;
555
+ }
556
+
557
+ .doc-table.compact {
558
+ min-width: 420px;
559
+ }
560
+
561
+ .doc-table th,
562
+ .doc-table td {
563
+ padding: 9px 10px;
564
+ border-bottom: 1px solid var(--border);
565
+ text-align: left;
566
+ vertical-align: top;
567
+ }
568
+
569
+ .doc-table thead th {
570
+ color: #344253;
571
+ background: #f3f6fa;
572
+ font-weight: 700;
573
+ }
574
+
575
+ .doc-table tbody tr:last-child th,
576
+ .doc-table tbody tr:last-child td {
577
+ border-bottom: 0;
578
+ }
579
+
580
+ .doc-table code {
581
+ font-family: "Cascadia Code", Consolas, monospace;
582
+ font-size: 12px;
583
+ overflow-wrap: anywhere;
584
+ }
585
+
586
+ .example-block {
587
+ margin: 0 0 12px;
588
+ }
589
+
590
+ .example-block:last-child {
591
+ margin-bottom: 0;
592
+ }
593
+
594
+ .example-block figcaption,
595
+ .source-caption {
596
+ margin-bottom: 6px;
597
+ color: #344253;
598
+ font-size: 13px;
599
+ font-weight: 700;
600
+ }
601
+
602
+ .code-block {
603
+ margin: 0;
604
+ border-radius: 6px;
605
+ color: var(--code-line);
606
+ background: var(--code-bg);
607
+ overflow: auto;
608
+ }
609
+
610
+ .code-block code {
611
+ display: block;
612
+ min-width: max-content;
613
+ padding: 12px 0;
614
+ font-family: var(--code-font-family);
615
+ font-size: var(--code-font-size);
616
+ line-height: var(--code-line-height);
617
+ tab-size: var(--code-tab-size);
618
+ }
619
+
620
+ .code-line {
621
+ display: block;
622
+ min-height: calc(var(--code-font-size) * var(--code-line-height));
623
+ padding: 0 14px;
624
+ white-space: pre;
625
+ }
626
+
627
+ .hia-code-wrap .code-block {
628
+ overflow-x: hidden;
629
+ }
630
+
631
+ .hia-code-wrap .code-block code {
632
+ min-width: 0;
633
+ }
634
+
635
+ .hia-code-wrap .code-line {
636
+ white-space: pre-wrap;
637
+ overflow-wrap: anywhere;
638
+ }
639
+
640
+ .code-line[data-line]::before {
641
+ content: attr(data-line);
642
+ display: inline-block;
643
+ width: 4ch;
644
+ margin-right: 14px;
645
+ color: #8091a4;
646
+ text-align: right;
647
+ user-select: none;
648
+ }
649
+
650
+ .tok-keyword {
651
+ color: #76d4ff;
652
+ }
653
+
654
+ .tok-comment {
655
+ color: #91a2b4;
656
+ }
657
+
658
+ .source-section {
659
+ display: block;
660
+ }
661
+
662
+ .source-section .section-body {
663
+ display: grid;
664
+ gap: 10px;
665
+ }
666
+
667
+ .source-reference {
668
+ padding: 12px;
669
+ border: 1px solid var(--border);
670
+ border-radius: 6px;
671
+ background: #fbfcfe;
672
+ }
673
+
674
+ .source-reference.unresolved {
675
+ border-color: #efcf8a;
676
+ background: var(--warn-soft);
677
+ }
678
+
679
+ .source-links {
680
+ display: flex;
681
+ flex-wrap: wrap;
682
+ gap: 8px;
683
+ margin-bottom: 8px;
684
+ color: var(--text-muted);
685
+ font-size: 13px;
686
+ }
687
+
688
+ .source-links a,
689
+ .source-links span {
690
+ display: inline-flex;
691
+ align-items: center;
692
+ min-height: 26px;
693
+ padding: 3px 7px;
694
+ border: 1px solid var(--border);
695
+ border-radius: 6px;
696
+ background: #ffffff;
697
+ }
698
+
699
+ .source-preview {
700
+ border-top: 1px solid var(--border);
701
+ padding-top: 8px;
702
+ }
703
+
704
+ .source-preview summary {
705
+ cursor: pointer;
706
+ margin-bottom: 8px;
707
+ color: var(--text-muted);
708
+ font-size: 13px;
709
+ font-weight: 650;
710
+ }
711
+
712
+ .source-fallback {
713
+ margin: 0;
714
+ color: var(--warn);
715
+ font-size: 13px;
716
+ }
717
+
718
+ .meta-list {
719
+ display: grid;
720
+ grid-template-columns: max-content minmax(0, 1fr);
721
+ gap: 6px 12px;
722
+ margin: 0;
723
+ font-size: 13px;
724
+ }
725
+
726
+ .meta-list dt {
727
+ color: #344253;
728
+ font-weight: 700;
729
+ }
730
+
731
+ .meta-list dd {
732
+ margin: 0;
733
+ color: var(--text-muted);
734
+ overflow-wrap: anywhere;
735
+ }
736
+
737
+ .empty {
738
+ margin: 0;
739
+ color: var(--text-muted);
740
+ }
741
+
742
+ @media (max-width: 860px) {
743
+ .site-header {
744
+ align-items: flex-start;
745
+ flex-direction: column;
746
+ padding: 16px;
747
+ }
748
+
749
+ .site-actions {
750
+ justify-content: flex-start;
751
+ }
752
+
753
+ .layout {
754
+ grid-template-columns: 1fr;
755
+ padding: 16px;
756
+ }
757
+
758
+ .sidebar {
759
+ position: static;
760
+ max-height: none;
761
+ padding-right: 0;
762
+ }
763
+
764
+ .doclet {
765
+ padding: 14px;
766
+ }
767
+
768
+ .doclet h2 {
769
+ font-size: 18px;
770
+ }
771
+
772
+ .doc-table {
773
+ min-width: 520px;
774
+ }
775
+ }
776
+
777
+ @media (max-width: 520px) {
778
+ .language-controls,
779
+ .language-select-control,
780
+ .site-actions {
781
+ width: 100%;
782
+ }
783
+
784
+ .language-button,
785
+ .language-link,
786
+ .language-select {
787
+ flex: 1 1 auto;
788
+ justify-content: center;
789
+ }
790
+
791
+ .search-input {
792
+ min-height: 40px;
793
+ }
794
+
795
+ .doc-table {
796
+ min-width: 460px;
797
+ }
798
+ }