sdocs 0.0.18 → 0.0.20

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.
@@ -1,12 +1,13 @@
1
- @import './fonts.css';
2
-
3
- /* sdocs design tokens
1
+ /* sdocs theme tokens
4
2
  *
5
- * Layer 1 Primitives (Tailwind v4 oklch, never use directly in components)
6
- * Layer 2 Semantic aliases (per-theme, use these in components)
3
+ * Shared foundation imported by both sdocs.css (shell) and demo.css (iframes).
4
+ * Defines font vars, all color primitives, and light-mode semantic aliases on :root.
7
5
  */
8
6
 
9
- .sdocs-app {
7
+ :root {
8
+ --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9
+ --mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
10
+
10
11
  /* zinc — Tailwind v4 zinc (oklch), 150-850 interpolated */
11
12
  --color-zinc-0: #fff;
12
13
  --color-zinc-50: oklch(0.985 0 0);
@@ -450,17 +451,7 @@
450
451
  --color-rose-900: oklch(0.404 0.152 12.447);
451
452
  --color-rose-950: oklch(0.271 0.105 12.094);
452
453
 
453
- --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
454
- --mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
455
- }
456
-
457
- .sdocs-app {
458
- font-family: var(--sans);
459
- }
460
-
461
- .sdocs-app,
462
- .sdocs-app[data-sdocs-theme="light"] {
463
- /* base — layouts, backgrounds, surfaces, borders, text */
454
+ /* base — layouts, backgrounds, surfaces, borders, text (light mode) */
464
455
  --color-base-0: var(--color-zinc-0);
465
456
  --color-base-50: var(--color-zinc-50);
466
457
  --color-base-100: var(--color-zinc-100);
@@ -482,7 +473,7 @@
482
473
  --color-base-900: var(--color-zinc-900);
483
474
  --color-base-950: var(--color-zinc-950);
484
475
  --color-base-1000: var(--color-zinc-1000);
485
- /* success — positive feedback, confirmations, valid states */
476
+ /* success */
486
477
  --color-success-50: var(--color-green-50);
487
478
  --color-success-100: var(--color-green-100);
488
479
  --color-success-150: var(--color-green-150);
@@ -502,7 +493,7 @@
502
493
  --color-success-850: var(--color-green-850);
503
494
  --color-success-900: var(--color-green-900);
504
495
  --color-success-950: var(--color-green-950);
505
- /* danger — errors, destructive actions, invalid states */
496
+ /* danger */
506
497
  --color-danger-50: var(--color-red-50);
507
498
  --color-danger-100: var(--color-red-100);
508
499
  --color-danger-150: var(--color-red-150);
@@ -522,7 +513,7 @@
522
513
  --color-danger-850: var(--color-red-850);
523
514
  --color-danger-900: var(--color-red-900);
524
515
  --color-danger-950: var(--color-red-950);
525
- /* warning — caution, attention needed */
516
+ /* warning */
526
517
  --color-warning-50: var(--color-orange-50);
527
518
  --color-warning-100: var(--color-orange-100);
528
519
  --color-warning-150: var(--color-orange-150);
@@ -542,7 +533,7 @@
542
533
  --color-warning-850: var(--color-orange-850);
543
534
  --color-warning-900: var(--color-orange-900);
544
535
  --color-warning-950: var(--color-orange-950);
545
- /* focus — selection, highlights, active states */
536
+ /* focus */
546
537
  --color-focus-50: var(--color-yellow-50);
547
538
  --color-focus-100: var(--color-yellow-100);
548
539
  --color-focus-150: var(--color-yellow-150);
@@ -562,7 +553,7 @@
562
553
  --color-focus-850: var(--color-yellow-850);
563
554
  --color-focus-900: var(--color-yellow-900);
564
555
  --color-focus-950: var(--color-yellow-950);
565
- /* component — component doc badges, tags, accents */
556
+ /* component */
566
557
  --color-component-50: var(--color-pink-50);
567
558
  --color-component-100: var(--color-pink-100);
568
559
  --color-component-150: var(--color-pink-150);
@@ -582,7 +573,7 @@
582
573
  --color-component-850: var(--color-pink-850);
583
574
  --color-component-900: var(--color-pink-900);
584
575
  --color-component-950: var(--color-pink-950);
585
- /* layout — layout doc badges, tags, accents */
576
+ /* layout */
586
577
  --color-layout-50: var(--color-purple-50);
587
578
  --color-layout-100: var(--color-purple-100);
588
579
  --color-layout-150: var(--color-purple-150);
@@ -602,7 +593,7 @@
602
593
  --color-layout-850: var(--color-purple-850);
603
594
  --color-layout-900: var(--color-purple-900);
604
595
  --color-layout-950: var(--color-purple-950);
605
- /* example — code examples, snippets, playground accents */
596
+ /* example */
606
597
  --color-example-50: var(--color-cyan-50);
607
598
  --color-example-100: var(--color-cyan-100);
608
599
  --color-example-150: var(--color-cyan-150);
@@ -622,7 +613,7 @@
622
613
  --color-example-850: var(--color-cyan-850);
623
614
  --color-example-900: var(--color-cyan-900);
624
615
  --color-example-950: var(--color-cyan-950);
625
- /* docs — documentation file badges, tags, accents */
616
+ /* docs */
626
617
  --color-docs-50: var(--color-amber-50);
627
618
  --color-docs-100: var(--color-amber-100);
628
619
  --color-docs-150: var(--color-amber-150);
@@ -642,7 +633,7 @@
642
633
  --color-docs-850: var(--color-amber-850);
643
634
  --color-docs-900: var(--color-amber-900);
644
635
  --color-docs-950: var(--color-amber-950);
645
- /* page — page doc badges, tags, accents */
636
+ /* page */
646
637
  --color-page-50: var(--color-yellow-50);
647
638
  --color-page-100: var(--color-yellow-100);
648
639
  --color-page-150: var(--color-yellow-150);
@@ -662,7 +653,7 @@
662
653
  --color-page-850: var(--color-yellow-850);
663
654
  --color-page-900: var(--color-yellow-900);
664
655
  --color-page-950: var(--color-yellow-950);
665
- /* action — links, buttons, interactive accents */
656
+ /* action */
666
657
  --color-action-50: var(--color-blue-50);
667
658
  --color-action-100: var(--color-blue-100);
668
659
  --color-action-150: var(--color-blue-150);
@@ -683,228 +674,3 @@
683
674
  --color-action-900: var(--color-blue-900);
684
675
  --color-action-950: var(--color-blue-950);
685
676
  }
686
-
687
- .sdocs-app[data-sdocs-theme="dark"] {
688
- /* base — layouts, backgrounds, surfaces, borders, text (inverted) */
689
- --color-base-0: var(--color-zinc-1000);
690
- --color-base-50: var(--color-zinc-950);
691
- --color-base-100: var(--color-zinc-900);
692
- --color-base-150: var(--color-zinc-850);
693
- --color-base-200: var(--color-zinc-800);
694
- --color-base-250: var(--color-zinc-750);
695
- --color-base-300: var(--color-zinc-700);
696
- --color-base-350: var(--color-zinc-650);
697
- --color-base-400: var(--color-zinc-600);
698
- --color-base-450: var(--color-zinc-550);
699
- --color-base-500: var(--color-zinc-500);
700
- --color-base-550: var(--color-zinc-450);
701
- --color-base-600: var(--color-zinc-400);
702
- --color-base-650: var(--color-zinc-350);
703
- --color-base-700: var(--color-zinc-300);
704
- --color-base-750: var(--color-zinc-250);
705
- --color-base-800: var(--color-zinc-200);
706
- --color-base-850: var(--color-zinc-150);
707
- --color-base-900: var(--color-zinc-100);
708
- --color-base-950: var(--color-zinc-50);
709
- --color-base-1000: var(--color-zinc-0);
710
- /* success — positive feedback, confirmations, valid states (inverted) */
711
- --color-success-50: var(--color-green-950);
712
- --color-success-100: var(--color-green-900);
713
- --color-success-150: var(--color-green-850);
714
- --color-success-200: var(--color-green-800);
715
- --color-success-250: var(--color-green-750);
716
- --color-success-300: var(--color-green-700);
717
- --color-success-350: var(--color-green-650);
718
- --color-success-400: var(--color-green-600);
719
- --color-success-450: var(--color-green-550);
720
- --color-success-500: var(--color-green-500);
721
- --color-success-550: var(--color-green-450);
722
- --color-success-600: var(--color-green-400);
723
- --color-success-650: var(--color-green-350);
724
- --color-success-700: var(--color-green-300);
725
- --color-success-750: var(--color-green-250);
726
- --color-success-800: var(--color-green-200);
727
- --color-success-850: var(--color-green-150);
728
- --color-success-900: var(--color-green-100);
729
- --color-success-950: var(--color-green-50);
730
- /* danger — errors, destructive actions, invalid states (inverted) */
731
- --color-danger-50: var(--color-red-950);
732
- --color-danger-100: var(--color-red-900);
733
- --color-danger-150: var(--color-red-850);
734
- --color-danger-200: var(--color-red-800);
735
- --color-danger-250: var(--color-red-750);
736
- --color-danger-300: var(--color-red-700);
737
- --color-danger-350: var(--color-red-650);
738
- --color-danger-400: var(--color-red-600);
739
- --color-danger-450: var(--color-red-550);
740
- --color-danger-500: var(--color-red-500);
741
- --color-danger-550: var(--color-red-450);
742
- --color-danger-600: var(--color-red-400);
743
- --color-danger-650: var(--color-red-350);
744
- --color-danger-700: var(--color-red-300);
745
- --color-danger-750: var(--color-red-250);
746
- --color-danger-800: var(--color-red-200);
747
- --color-danger-850: var(--color-red-150);
748
- --color-danger-900: var(--color-red-100);
749
- --color-danger-950: var(--color-red-50);
750
- /* warning — caution, attention needed (inverted) */
751
- --color-warning-50: var(--color-orange-950);
752
- --color-warning-100: var(--color-orange-900);
753
- --color-warning-150: var(--color-orange-850);
754
- --color-warning-200: var(--color-orange-800);
755
- --color-warning-250: var(--color-orange-750);
756
- --color-warning-300: var(--color-orange-700);
757
- --color-warning-350: var(--color-orange-650);
758
- --color-warning-400: var(--color-orange-600);
759
- --color-warning-450: var(--color-orange-550);
760
- --color-warning-500: var(--color-orange-500);
761
- --color-warning-550: var(--color-orange-450);
762
- --color-warning-600: var(--color-orange-400);
763
- --color-warning-650: var(--color-orange-350);
764
- --color-warning-700: var(--color-orange-300);
765
- --color-warning-750: var(--color-orange-250);
766
- --color-warning-800: var(--color-orange-200);
767
- --color-warning-850: var(--color-orange-150);
768
- --color-warning-900: var(--color-orange-100);
769
- --color-warning-950: var(--color-orange-50);
770
- /* focus — selection, highlights, active states (inverted) */
771
- --color-focus-50: var(--color-yellow-950);
772
- --color-focus-100: var(--color-yellow-900);
773
- --color-focus-150: var(--color-yellow-850);
774
- --color-focus-200: var(--color-yellow-800);
775
- --color-focus-250: var(--color-yellow-750);
776
- --color-focus-300: var(--color-yellow-700);
777
- --color-focus-350: var(--color-yellow-650);
778
- --color-focus-400: var(--color-yellow-600);
779
- --color-focus-450: var(--color-yellow-550);
780
- --color-focus-500: var(--color-yellow-500);
781
- --color-focus-550: var(--color-yellow-450);
782
- --color-focus-600: var(--color-yellow-400);
783
- --color-focus-650: var(--color-yellow-350);
784
- --color-focus-700: var(--color-yellow-300);
785
- --color-focus-750: var(--color-yellow-250);
786
- --color-focus-800: var(--color-yellow-200);
787
- --color-focus-850: var(--color-yellow-150);
788
- --color-focus-900: var(--color-yellow-100);
789
- --color-focus-950: var(--color-yellow-50);
790
- /* component — component doc badges, tags, accents (inverted) */
791
- --color-component-50: var(--color-pink-950);
792
- --color-component-100: var(--color-pink-900);
793
- --color-component-150: var(--color-pink-850);
794
- --color-component-200: var(--color-pink-800);
795
- --color-component-250: var(--color-pink-750);
796
- --color-component-300: var(--color-pink-700);
797
- --color-component-350: var(--color-pink-650);
798
- --color-component-400: var(--color-pink-600);
799
- --color-component-450: var(--color-pink-550);
800
- --color-component-500: var(--color-pink-500);
801
- --color-component-550: var(--color-pink-450);
802
- --color-component-600: var(--color-pink-400);
803
- --color-component-650: var(--color-pink-350);
804
- --color-component-700: var(--color-pink-300);
805
- --color-component-750: var(--color-pink-250);
806
- --color-component-800: var(--color-pink-200);
807
- --color-component-850: var(--color-pink-150);
808
- --color-component-900: var(--color-pink-100);
809
- --color-component-950: var(--color-pink-50);
810
- /* layout — layout doc badges, tags, accents (inverted) */
811
- --color-layout-50: var(--color-purple-950);
812
- --color-layout-100: var(--color-purple-900);
813
- --color-layout-150: var(--color-purple-850);
814
- --color-layout-200: var(--color-purple-800);
815
- --color-layout-250: var(--color-purple-750);
816
- --color-layout-300: var(--color-purple-700);
817
- --color-layout-350: var(--color-purple-650);
818
- --color-layout-400: var(--color-purple-600);
819
- --color-layout-450: var(--color-purple-550);
820
- --color-layout-500: var(--color-purple-500);
821
- --color-layout-550: var(--color-purple-450);
822
- --color-layout-600: var(--color-purple-400);
823
- --color-layout-650: var(--color-purple-350);
824
- --color-layout-700: var(--color-purple-300);
825
- --color-layout-750: var(--color-purple-250);
826
- --color-layout-800: var(--color-purple-200);
827
- --color-layout-850: var(--color-purple-150);
828
- --color-layout-900: var(--color-purple-100);
829
- --color-layout-950: var(--color-purple-50);
830
- /* example — code examples, snippets, playground accents (inverted) */
831
- --color-example-50: var(--color-cyan-950);
832
- --color-example-100: var(--color-cyan-900);
833
- --color-example-150: var(--color-cyan-850);
834
- --color-example-200: var(--color-cyan-800);
835
- --color-example-250: var(--color-cyan-750);
836
- --color-example-300: var(--color-cyan-700);
837
- --color-example-350: var(--color-cyan-650);
838
- --color-example-400: var(--color-cyan-600);
839
- --color-example-450: var(--color-cyan-550);
840
- --color-example-500: var(--color-cyan-500);
841
- --color-example-550: var(--color-cyan-450);
842
- --color-example-600: var(--color-cyan-400);
843
- --color-example-650: var(--color-cyan-350);
844
- --color-example-700: var(--color-cyan-300);
845
- --color-example-750: var(--color-cyan-250);
846
- --color-example-800: var(--color-cyan-200);
847
- --color-example-850: var(--color-cyan-150);
848
- --color-example-900: var(--color-cyan-100);
849
- --color-example-950: var(--color-cyan-50);
850
- /* docs — documentation file badges, tags, accents (inverted) */
851
- --color-docs-50: var(--color-amber-950);
852
- --color-docs-100: var(--color-amber-900);
853
- --color-docs-150: var(--color-amber-850);
854
- --color-docs-200: var(--color-amber-800);
855
- --color-docs-250: var(--color-amber-750);
856
- --color-docs-300: var(--color-amber-700);
857
- --color-docs-350: var(--color-amber-650);
858
- --color-docs-400: var(--color-amber-600);
859
- --color-docs-450: var(--color-amber-550);
860
- --color-docs-500: var(--color-amber-500);
861
- --color-docs-550: var(--color-amber-450);
862
- --color-docs-600: var(--color-amber-400);
863
- --color-docs-650: var(--color-amber-350);
864
- --color-docs-700: var(--color-amber-300);
865
- --color-docs-750: var(--color-amber-250);
866
- --color-docs-800: var(--color-amber-200);
867
- --color-docs-850: var(--color-amber-150);
868
- --color-docs-900: var(--color-amber-100);
869
- --color-docs-950: var(--color-amber-50);
870
- /* page — page doc badges, tags, accents (inverted) */
871
- --color-page-50: var(--color-yellow-950);
872
- --color-page-100: var(--color-yellow-900);
873
- --color-page-150: var(--color-yellow-850);
874
- --color-page-200: var(--color-yellow-800);
875
- --color-page-250: var(--color-yellow-750);
876
- --color-page-300: var(--color-yellow-700);
877
- --color-page-350: var(--color-yellow-650);
878
- --color-page-400: var(--color-yellow-600);
879
- --color-page-450: var(--color-yellow-550);
880
- --color-page-500: var(--color-yellow-500);
881
- --color-page-550: var(--color-yellow-450);
882
- --color-page-600: var(--color-yellow-400);
883
- --color-page-650: var(--color-yellow-350);
884
- --color-page-700: var(--color-yellow-300);
885
- --color-page-750: var(--color-yellow-250);
886
- --color-page-800: var(--color-yellow-200);
887
- --color-page-850: var(--color-yellow-150);
888
- --color-page-900: var(--color-yellow-100);
889
- --color-page-950: var(--color-yellow-50);
890
- /* action — links, buttons, interactive accents (inverted) */
891
- --color-action-50: var(--color-blue-950);
892
- --color-action-100: var(--color-blue-900);
893
- --color-action-150: var(--color-blue-850);
894
- --color-action-200: var(--color-blue-800);
895
- --color-action-250: var(--color-blue-750);
896
- --color-action-300: var(--color-blue-700);
897
- --color-action-350: var(--color-blue-650);
898
- --color-action-400: var(--color-blue-600);
899
- --color-action-450: var(--color-blue-550);
900
- --color-action-500: var(--color-blue-500);
901
- --color-action-550: var(--color-blue-450);
902
- --color-action-600: var(--color-blue-400);
903
- --color-action-650: var(--color-blue-350);
904
- --color-action-700: var(--color-blue-300);
905
- --color-action-750: var(--color-blue-250);
906
- --color-action-800: var(--color-blue-200);
907
- --color-action-850: var(--color-blue-150);
908
- --color-action-900: var(--color-blue-100);
909
- --color-action-950: var(--color-blue-50);
910
- }
package/dist/vite.js CHANGED
@@ -62,6 +62,25 @@ export function sdocsPlugin(userConfig) {
62
62
  res.end('Internal error');
63
63
  });
64
64
  });
65
+ // API: highlight code on demand
66
+ server.middlewares.use((req, res, next) => {
67
+ if (req.url !== '/__sdocs/highlight' || req.method !== 'POST')
68
+ return next();
69
+ let body = '';
70
+ req.on('data', (chunk) => { body += chunk; });
71
+ req.on('end', async () => {
72
+ try {
73
+ const { code, lang } = JSON.parse(body);
74
+ const html = await highlight(code, lang);
75
+ res.setHeader('Content-Type', 'application/json');
76
+ res.end(JSON.stringify({ html }));
77
+ }
78
+ catch {
79
+ res.statusCode = 400;
80
+ res.end('Invalid request');
81
+ }
82
+ });
83
+ });
65
84
  // Watch for .sdoc file add/unlink/change
66
85
  server.watcher.on('add', async (filePath) => {
67
86
  if (isDocFile(filePath)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sdocs",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "description": "A lightweight documentation tool for Svelte 5 components",
5
5
  "type": "module",
6
6
  "license": "MIT",