pict-docuserve 0.1.6 → 0.1.7

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.
Files changed (18) hide show
  1. package/css/docuserve.css +84 -217
  2. package/dist/css/docuserve.css +84 -217
  3. package/dist/index.html +3 -2
  4. package/dist/pict-docuserve.js +4772 -10294
  5. package/dist/pict-docuserve.js.map +1 -1
  6. package/dist/pict-docuserve.min.js +90 -57
  7. package/dist/pict-docuserve.min.js.map +1 -1
  8. package/html/index.html +3 -2
  9. package/package.json +5 -3
  10. package/source/Pict-Application-Docuserve.js +109 -31
  11. package/source/providers/Pict-Provider-Docuserve-Demos.js +211 -0
  12. package/source/views/PictView-Docuserve-Demo.js +377 -0
  13. package/source/views/PictView-Docuserve-Layout.js +147 -46
  14. package/source/views/PictView-Docuserve-Sidebar.js +54 -29
  15. package/source/views/PictView-Docuserve-TopBar-Nav.js +170 -0
  16. package/source/views/PictView-Docuserve-TopBar-User.js +124 -0
  17. package/dist/indoctrinate_content_staging/Indoctrinate-Catalog-AppData.json +0 -6142
  18. package/source/views/PictView-Docuserve-TopBar.js +0 -449
package/css/docuserve.css CHANGED
@@ -1,239 +1,106 @@
1
1
  /* ============================================================================
2
- Pict Docuserve - Base Styles & Theme Variables
3
- ============================================================================ */
4
-
5
- /* ----------------------------------------------------------------------------
6
- Theme variables — light defaults on :root.
7
- Dark mode applies when either:
8
- (a) the user explicitly selected dark via <html data-theme="dark">
9
- (b) the user hasn't chosen anything AND the system prefers dark
10
- An explicit <html data-theme="light"> pins the light palette regardless.
11
- ---------------------------------------------------------------------------- */
2
+ Pict Docuserve - Base Styles
3
+ ============================================================================
4
+
5
+ Every `--docuserve-*` variable below is wired through a corresponding
6
+ `--theme-color-*` token from pict-provider-theme. The original warm-beige
7
+ light-mode hexes are preserved as `var()` fallbacks so apps that don't
8
+ install the theme provider still look the way docuserve always did.
9
+
10
+ Apps that DO install pict-provider-theme get full coherent re-skinning
11
+ when the user changes themes / modes: the underlying theme tokens flip
12
+ and every `var(--docuserve-*)` reference downstream reads the new value
13
+ without further work.
14
+
15
+ The legacy `data-theme="dark"` attribute + `@media (prefers-color-scheme: dark)`
16
+ bifurcation is intentionally gone — pict-section-theme owns mode handling
17
+ now and sets `--theme-color-*` to the appropriate light/dark variant
18
+ itself. Hosts that load docuserve without the theme provider get the
19
+ fallback hexes (light palette) regardless of OS preference, which is
20
+ a reasonable degradation. */
12
21
 
13
22
  :root
14
23
  {
15
24
  /* Surfaces */
16
- --docuserve-bg: #FDFBF7;
17
- --docuserve-bg-elevated: #FFFFFF;
18
- --docuserve-border: #DDD6CA;
19
- --docuserve-border-soft: #EAE3D8;
25
+ --docuserve-bg: var(--theme-color-background-primary, #FDFBF7);
26
+ --docuserve-bg-elevated: var(--theme-color-background-panel, #FFFFFF);
27
+ --docuserve-border: var(--theme-color-border-default, #DDD6CA);
28
+ --docuserve-border-soft: var(--theme-color-border-light, #EAE3D8);
20
29
 
21
30
  /* Text */
22
- --docuserve-text: #2A241E;
23
- --docuserve-text-strong: #3D3229;
24
- --docuserve-text-muted: #5E5549;
25
- --docuserve-text-dim: #8A7F72;
31
+ --docuserve-text: var(--theme-color-text-primary, #2A241E);
32
+ --docuserve-text-strong: var(--theme-color-text-primary, #3D3229);
33
+ --docuserve-text-muted: var(--theme-color-text-secondary, #5E5549);
34
+ --docuserve-text-dim: var(--theme-color-text-muted, #8A7F72);
26
35
 
27
36
  /* Accent / links */
28
- --docuserve-accent: #2E7D74;
29
- --docuserve-accent-hover: #236660;
30
-
31
- /* Top bar */
32
- --docuserve-topbar-bg: #3D3229;
33
- --docuserve-topbar-text: #E8E0D4;
34
- --docuserve-topbar-text-muted: #B5AA9A;
35
- --docuserve-topbar-text-dim: #8A7F72;
36
- --docuserve-topbar-hover-bg: #524438;
37
- --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.06);
38
- --docuserve-topbar-version-border: rgba(255, 255, 255, 0.08);
39
- --docuserve-topbar-version-text: #B5AA9A;
37
+ --docuserve-accent: var(--theme-color-brand-primary, #2E7D74);
38
+ --docuserve-accent-hover: var(--theme-color-brand-primary-hover, #236660);
39
+
40
+ /* Top bar — themed surface vars. Theme-TopBar uses brand-primary as
41
+ its background by default; we mirror that here so any docuserve
42
+ chrome that still references --docuserve-topbar-* stays consistent
43
+ when the theme switches. */
44
+ --docuserve-topbar-bg: var(--theme-color-text-primary, #3D3229);
45
+ --docuserve-topbar-text: var(--theme-color-text-on-brand, #E8E0D4);
46
+ --docuserve-topbar-text-muted: var(--theme-color-text-on-brand, #B5AA9A);
47
+ --docuserve-topbar-text-dim: var(--theme-color-text-muted, #8A7F72);
48
+ --docuserve-topbar-hover-bg: var(--theme-color-background-hover, #524438);
49
+ --docuserve-topbar-version-bg: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));
50
+ --docuserve-topbar-version-border: var(--theme-color-border-light, rgba(255, 255, 255, 0.08));
51
+ --docuserve-topbar-version-text: var(--theme-color-text-on-brand, #B5AA9A);
40
52
 
41
53
  /* Sidebar */
42
- --docuserve-sidebar-bg: #FAF7F1;
43
- --docuserve-sidebar-border: #DDD6CA;
44
- --docuserve-sidebar-border-soft: #E5DED1;
45
- --docuserve-sidebar-text: #423D37;
46
- --docuserve-sidebar-group-title: #3D3229;
47
- --docuserve-sidebar-module-text: #5E5549;
48
- --docuserve-sidebar-hover-bg: #EAE3D8;
49
- --docuserve-sidebar-hover-text: #2E7D74;
50
- --docuserve-sidebar-active-bg: #E5DED1;
51
- --docuserve-sidebar-active-text: #2E7D74;
52
- --docuserve-sidebar-search-bg: #FFFFFF;
53
- --docuserve-sidebar-search-border: #DDD6CA;
54
+ --docuserve-sidebar-bg: var(--theme-color-background-secondary, #FAF7F1);
55
+ --docuserve-sidebar-border: var(--theme-color-border-default, #DDD6CA);
56
+ --docuserve-sidebar-border-soft: var(--theme-color-border-light, #E5DED1);
57
+ --docuserve-sidebar-text: var(--theme-color-text-primary, #423D37);
58
+ --docuserve-sidebar-group-title: var(--theme-color-text-primary, #3D3229);
59
+ --docuserve-sidebar-module-text: var(--theme-color-text-secondary, #5E5549);
60
+ --docuserve-sidebar-hover-bg: var(--theme-color-background-hover, #EAE3D8);
61
+ --docuserve-sidebar-hover-text: var(--theme-color-brand-primary, #2E7D74);
62
+ --docuserve-sidebar-active-bg: var(--theme-color-background-tertiary, #E5DED1);
63
+ --docuserve-sidebar-active-text: var(--theme-color-brand-primary, #2E7D74);
64
+ --docuserve-sidebar-search-bg: var(--theme-color-background-panel, #FFFFFF);
65
+ --docuserve-sidebar-search-border: var(--theme-color-border-default, #DDD6CA);
54
66
 
55
67
  /* Inline code */
56
- --docuserve-inline-code-bg: #F0ECE4;
57
- --docuserve-inline-code-text: #9E3A50;
68
+ --docuserve-inline-code-bg: var(--theme-color-background-tertiary, #F0ECE4);
69
+ --docuserve-inline-code-text: var(--theme-color-syntax-property, #9E3A50);
58
70
 
59
71
  /* Code block panel */
60
- --docuserve-code-bg: #F6F3EE;
61
- --docuserve-code-border: #E5DED1;
62
- --docuserve-code-gutter-bg: #EFEAE0;
63
- --docuserve-code-gutter-border: #DDD6CA;
64
- --docuserve-code-gutter-text: #A59986;
65
- --docuserve-code-text: #2A241E;
66
-
67
- /* Syntax tokens — low-chroma dark-on-light palette */
68
- --docuserve-tok-keyword: #A03472;
69
- --docuserve-tok-string: #1A6640;
70
- --docuserve-tok-number: #B25A00;
71
- --docuserve-tok-comment: #8A7F72;
72
- --docuserve-tok-operator: #2E7D74;
73
- --docuserve-tok-punctuation: #2A241E;
74
- --docuserve-tok-function: #2A5DB0;
75
- --docuserve-tok-property: #9E3A50;
76
- --docuserve-tok-tag: #9E3A50;
77
- --docuserve-tok-attr-name: #B25A00;
78
- --docuserve-tok-attr-value: #1A6640;
72
+ --docuserve-code-bg: var(--theme-color-background-secondary, #F6F3EE);
73
+ --docuserve-code-border: var(--theme-color-border-light, #E5DED1);
74
+ --docuserve-code-gutter-bg: var(--theme-color-background-tertiary, #EFEAE0);
75
+ --docuserve-code-gutter-border: var(--theme-color-border-default, #DDD6CA);
76
+ --docuserve-code-gutter-text: var(--theme-color-text-muted, #A59986);
77
+ --docuserve-code-text: var(--theme-color-text-primary, #2A241E);
78
+
79
+ /* Syntax tokens — pict-section-code's Color.Syntax.* set drives these. */
80
+ --docuserve-tok-keyword: var(--theme-color-syntax-keyword, #A03472);
81
+ --docuserve-tok-string: var(--theme-color-syntax-string, #1A6640);
82
+ --docuserve-tok-number: var(--theme-color-syntax-number, #B25A00);
83
+ --docuserve-tok-comment: var(--theme-color-syntax-comment, #8A7F72);
84
+ --docuserve-tok-operator: var(--theme-color-syntax-operator, #2E7D74);
85
+ --docuserve-tok-punctuation: var(--theme-color-syntax-punctuation, #2A241E);
86
+ --docuserve-tok-function: var(--theme-color-syntax-function, #2A5DB0);
87
+ --docuserve-tok-property: var(--theme-color-syntax-property, #9E3A50);
88
+ --docuserve-tok-tag: var(--theme-color-syntax-tag, #9E3A50);
89
+ --docuserve-tok-attr-name: var(--theme-color-syntax-attrname, #B25A00);
90
+ --docuserve-tok-attr-value: var(--theme-color-syntax-attrvalue, #1A6640);
79
91
 
80
92
  /* Tables, blockquotes, mermaid */
81
- --docuserve-table-header-bg: #F5F0E8;
82
- --docuserve-table-row-alt-bg: #F9F6F0;
83
- --docuserve-blockquote-bg: #F7F5F0;
84
- --docuserve-blockquote-border: #2E7D74;
85
- --docuserve-blockquote-text: #5E5549;
86
- --docuserve-mermaid-bg: #FFFFFF;
93
+ --docuserve-table-header-bg: var(--theme-color-background-tertiary, #F5F0E8);
94
+ --docuserve-table-row-alt-bg: var(--theme-color-background-secondary, #F9F6F0);
95
+ --docuserve-blockquote-bg: var(--theme-color-background-secondary, #F7F5F0);
96
+ --docuserve-blockquote-border: var(--theme-color-brand-primary, #2E7D74);
97
+ --docuserve-blockquote-text: var(--theme-color-text-secondary, #5E5549);
98
+ --docuserve-mermaid-bg: var(--theme-color-background-panel, #FFFFFF);
87
99
 
88
100
  /* Scrollbars */
89
- --docuserve-scrollbar-track: #F5F0E8;
90
- --docuserve-scrollbar-thumb: #D4CCBE;
91
- --docuserve-scrollbar-thumb-hover: #B5AA9A;
92
- }
93
-
94
- @media (prefers-color-scheme: dark)
95
- {
96
- :root:not([data-theme="light"])
97
- {
98
- --docuserve-bg: #15120F;
99
- --docuserve-bg-elevated: #1B1814;
100
- --docuserve-border: #2F2823;
101
- --docuserve-border-soft: #26211C;
102
-
103
- --docuserve-text: #E8E0D4;
104
- --docuserve-text-strong: #F2ECE0;
105
- --docuserve-text-muted: #B5AA9A;
106
- --docuserve-text-dim: #7A6F62;
107
-
108
- --docuserve-accent: #5DB8A8;
109
- --docuserve-accent-hover: #7FCCB8;
110
-
111
- --docuserve-topbar-bg: #1A1612;
112
- --docuserve-topbar-text: #E8E0D4;
113
- --docuserve-topbar-text-muted: #B5AA9A;
114
- --docuserve-topbar-text-dim: #7A6F62;
115
- --docuserve-topbar-hover-bg: #2A241E;
116
- --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
117
- --docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
118
- --docuserve-topbar-version-text: #B5AA9A;
119
-
120
- --docuserve-sidebar-bg: #1B1814;
121
- --docuserve-sidebar-border: #2F2823;
122
- --docuserve-sidebar-border-soft: #26211C;
123
- --docuserve-sidebar-text: #C9C0B3;
124
- --docuserve-sidebar-group-title: #F2ECE0;
125
- --docuserve-sidebar-module-text: #B5AA9A;
126
- --docuserve-sidebar-hover-bg: #2A241E;
127
- --docuserve-sidebar-hover-text: #7FCCB8;
128
- --docuserve-sidebar-active-bg: #2F2823;
129
- --docuserve-sidebar-active-text: #7FCCB8;
130
- --docuserve-sidebar-search-bg: #26211C;
131
- --docuserve-sidebar-search-border: #2F2823;
132
-
133
- --docuserve-inline-code-bg: #2A241E;
134
- --docuserve-inline-code-text: #E8B07A;
135
-
136
- --docuserve-code-bg: #1E1A17;
137
- --docuserve-code-border: #2F2823;
138
- --docuserve-code-gutter-bg: #17130F;
139
- --docuserve-code-gutter-border: #2F2823;
140
- --docuserve-code-gutter-text: #6A6052;
141
- --docuserve-code-text: #E8E0D4;
142
-
143
- --docuserve-tok-keyword: #C678DD;
144
- --docuserve-tok-string: #98C379;
145
- --docuserve-tok-number: #D19A66;
146
- --docuserve-tok-comment: #7F848E;
147
- --docuserve-tok-operator: #56B6C2;
148
- --docuserve-tok-punctuation: #E8E0D4;
149
- --docuserve-tok-function: #61AFEF;
150
- --docuserve-tok-property: #E06C75;
151
- --docuserve-tok-tag: #E06C75;
152
- --docuserve-tok-attr-name: #D19A66;
153
- --docuserve-tok-attr-value: #98C379;
154
-
155
- --docuserve-table-header-bg: #26211C;
156
- --docuserve-table-row-alt-bg: #1F1B17;
157
- --docuserve-blockquote-bg: #1F1B17;
158
- --docuserve-blockquote-border: #5DB8A8;
159
- --docuserve-blockquote-text: #C9C0B3;
160
- --docuserve-mermaid-bg: #E8E0D4;
161
-
162
- --docuserve-scrollbar-track: #1B1814;
163
- --docuserve-scrollbar-thumb: #3A322B;
164
- --docuserve-scrollbar-thumb-hover: #524438;
165
- }
166
- }
167
-
168
- :root[data-theme="dark"]
169
- {
170
- --docuserve-bg: #15120F;
171
- --docuserve-bg-elevated: #1B1814;
172
- --docuserve-border: #2F2823;
173
- --docuserve-border-soft: #26211C;
174
-
175
- --docuserve-text: #E8E0D4;
176
- --docuserve-text-strong: #F2ECE0;
177
- --docuserve-text-muted: #B5AA9A;
178
- --docuserve-text-dim: #7A6F62;
179
-
180
- --docuserve-accent: #5DB8A8;
181
- --docuserve-accent-hover: #7FCCB8;
182
-
183
- --docuserve-topbar-bg: #1A1612;
184
- --docuserve-topbar-text: #E8E0D4;
185
- --docuserve-topbar-text-muted: #B5AA9A;
186
- --docuserve-topbar-text-dim: #7A6F62;
187
- --docuserve-topbar-hover-bg: #2A241E;
188
- --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
189
- --docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
190
- --docuserve-topbar-version-text: #B5AA9A;
191
-
192
- --docuserve-sidebar-bg: #1B1814;
193
- --docuserve-sidebar-border: #2F2823;
194
- --docuserve-sidebar-border-soft: #26211C;
195
- --docuserve-sidebar-text: #C9C0B3;
196
- --docuserve-sidebar-group-title: #F2ECE0;
197
- --docuserve-sidebar-module-text: #B5AA9A;
198
- --docuserve-sidebar-hover-bg: #2A241E;
199
- --docuserve-sidebar-hover-text: #7FCCB8;
200
- --docuserve-sidebar-active-bg: #2F2823;
201
- --docuserve-sidebar-active-text: #7FCCB8;
202
- --docuserve-sidebar-search-bg: #26211C;
203
- --docuserve-sidebar-search-border: #2F2823;
204
-
205
- --docuserve-inline-code-bg: #2A241E;
206
- --docuserve-inline-code-text: #E8B07A;
207
-
208
- --docuserve-code-bg: #1E1A17;
209
- --docuserve-code-border: #2F2823;
210
- --docuserve-code-gutter-bg: #17130F;
211
- --docuserve-code-gutter-border: #2F2823;
212
- --docuserve-code-gutter-text: #6A6052;
213
- --docuserve-code-text: #E8E0D4;
214
-
215
- --docuserve-tok-keyword: #C678DD;
216
- --docuserve-tok-string: #98C379;
217
- --docuserve-tok-number: #D19A66;
218
- --docuserve-tok-comment: #7F848E;
219
- --docuserve-tok-operator: #56B6C2;
220
- --docuserve-tok-punctuation: #E8E0D4;
221
- --docuserve-tok-function: #61AFEF;
222
- --docuserve-tok-property: #E06C75;
223
- --docuserve-tok-tag: #E06C75;
224
- --docuserve-tok-attr-name: #D19A66;
225
- --docuserve-tok-attr-value: #98C379;
226
-
227
- --docuserve-table-header-bg: #26211C;
228
- --docuserve-table-row-alt-bg: #1F1B17;
229
- --docuserve-blockquote-bg: #1F1B17;
230
- --docuserve-blockquote-border: #5DB8A8;
231
- --docuserve-blockquote-text: #C9C0B3;
232
- --docuserve-mermaid-bg: #E8E0D4;
233
-
234
- --docuserve-scrollbar-track: #1B1814;
235
- --docuserve-scrollbar-thumb: #3A322B;
236
- --docuserve-scrollbar-thumb-hover: #524438;
101
+ --docuserve-scrollbar-track: var(--theme-color-scrollbar-track, #F5F0E8);
102
+ --docuserve-scrollbar-thumb: var(--theme-color-scrollbar-thumb, #D4CCBE);
103
+ --docuserve-scrollbar-thumb-hover: var(--theme-color-scrollbar-hover, #B5AA9A);
237
104
  }
238
105
 
239
106
  /* ----------------------------------------------------------------------------
package/dist/css/docuserve.css CHANGED
@@ -1,239 +1,106 @@
1
1
  /* ============================================================================
2
- Pict Docuserve - Base Styles & Theme Variables
3
- ============================================================================ */
4
-
5
- /* ----------------------------------------------------------------------------
6
- Theme variables — light defaults on :root.
7
- Dark mode applies when either:
8
- (a) the user explicitly selected dark via <html data-theme="dark">
9
- (b) the user hasn't chosen anything AND the system prefers dark
10
- An explicit <html data-theme="light"> pins the light palette regardless.
11
- ---------------------------------------------------------------------------- */
2
+ Pict Docuserve - Base Styles
3
+ ============================================================================
4
+
5
+ Every `--docuserve-*` variable below is wired through a corresponding
6
+ `--theme-color-*` token from pict-provider-theme. The original warm-beige
7
+ light-mode hexes are preserved as `var()` fallbacks so apps that don't
8
+ install the theme provider still look the way docuserve always did.
9
+
10
+ Apps that DO install pict-provider-theme get full coherent re-skinning
11
+ when the user changes themes / modes: the underlying theme tokens flip
12
+ and every `var(--docuserve-*)` reference downstream reads the new value
13
+ without further work.
14
+
15
+ The legacy `data-theme="dark"` attribute + `@media (prefers-color-scheme: dark)`
16
+ bifurcation is intentionally gone — pict-section-theme owns mode handling
17
+ now and sets `--theme-color-*` to the appropriate light/dark variant
18
+ itself. Hosts that load docuserve without the theme provider get the
19
+ fallback hexes (light palette) regardless of OS preference, which is
20
+ a reasonable degradation. */
12
21
 
13
22
  :root
14
23
  {
15
24
  /* Surfaces */
16
- --docuserve-bg: #FDFBF7;
17
- --docuserve-bg-elevated: #FFFFFF;
18
- --docuserve-border: #DDD6CA;
19
- --docuserve-border-soft: #EAE3D8;
25
+ --docuserve-bg: var(--theme-color-background-primary, #FDFBF7);
26
+ --docuserve-bg-elevated: var(--theme-color-background-panel, #FFFFFF);
27
+ --docuserve-border: var(--theme-color-border-default, #DDD6CA);
28
+ --docuserve-border-soft: var(--theme-color-border-light, #EAE3D8);
20
29
 
21
30
  /* Text */
22
- --docuserve-text: #2A241E;
23
- --docuserve-text-strong: #3D3229;
24
- --docuserve-text-muted: #5E5549;
25
- --docuserve-text-dim: #8A7F72;
31
+ --docuserve-text: var(--theme-color-text-primary, #2A241E);
32
+ --docuserve-text-strong: var(--theme-color-text-primary, #3D3229);
33
+ --docuserve-text-muted: var(--theme-color-text-secondary, #5E5549);
34
+ --docuserve-text-dim: var(--theme-color-text-muted, #8A7F72);
26
35
 
27
36
  /* Accent / links */
28
- --docuserve-accent: #2E7D74;
29
- --docuserve-accent-hover: #236660;
30
-
31
- /* Top bar */
32
- --docuserve-topbar-bg: #3D3229;
33
- --docuserve-topbar-text: #E8E0D4;
34
- --docuserve-topbar-text-muted: #B5AA9A;
35
- --docuserve-topbar-text-dim: #8A7F72;
36
- --docuserve-topbar-hover-bg: #524438;
37
- --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.06);
38
- --docuserve-topbar-version-border: rgba(255, 255, 255, 0.08);
39
- --docuserve-topbar-version-text: #B5AA9A;
37
+ --docuserve-accent: var(--theme-color-brand-primary, #2E7D74);
38
+ --docuserve-accent-hover: var(--theme-color-brand-primary-hover, #236660);
39
+
40
+ /* Top bar — themed surface vars. Theme-TopBar uses brand-primary as
41
+ its background by default; we mirror that here so any docuserve
42
+ chrome that still references --docuserve-topbar-* stays consistent
43
+ when the theme switches. */
44
+ --docuserve-topbar-bg: var(--theme-color-text-primary, #3D3229);
45
+ --docuserve-topbar-text: var(--theme-color-text-on-brand, #E8E0D4);
46
+ --docuserve-topbar-text-muted: var(--theme-color-text-on-brand, #B5AA9A);
47
+ --docuserve-topbar-text-dim: var(--theme-color-text-muted, #8A7F72);
48
+ --docuserve-topbar-hover-bg: var(--theme-color-background-hover, #524438);
49
+ --docuserve-topbar-version-bg: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));
50
+ --docuserve-topbar-version-border: var(--theme-color-border-light, rgba(255, 255, 255, 0.08));
51
+ --docuserve-topbar-version-text: var(--theme-color-text-on-brand, #B5AA9A);
40
52
 
41
53
  /* Sidebar */
42
- --docuserve-sidebar-bg: #FAF7F1;
43
- --docuserve-sidebar-border: #DDD6CA;
44
- --docuserve-sidebar-border-soft: #E5DED1;
45
- --docuserve-sidebar-text: #423D37;
46
- --docuserve-sidebar-group-title: #3D3229;
47
- --docuserve-sidebar-module-text: #5E5549;
48
- --docuserve-sidebar-hover-bg: #EAE3D8;
49
- --docuserve-sidebar-hover-text: #2E7D74;
50
- --docuserve-sidebar-active-bg: #E5DED1;
51
- --docuserve-sidebar-active-text: #2E7D74;
52
- --docuserve-sidebar-search-bg: #FFFFFF;
53
- --docuserve-sidebar-search-border: #DDD6CA;
54
+ --docuserve-sidebar-bg: var(--theme-color-background-secondary, #FAF7F1);
55
+ --docuserve-sidebar-border: var(--theme-color-border-default, #DDD6CA);
56
+ --docuserve-sidebar-border-soft: var(--theme-color-border-light, #E5DED1);
57
+ --docuserve-sidebar-text: var(--theme-color-text-primary, #423D37);
58
+ --docuserve-sidebar-group-title: var(--theme-color-text-primary, #3D3229);
59
+ --docuserve-sidebar-module-text: var(--theme-color-text-secondary, #5E5549);
60
+ --docuserve-sidebar-hover-bg: var(--theme-color-background-hover, #EAE3D8);
61
+ --docuserve-sidebar-hover-text: var(--theme-color-brand-primary, #2E7D74);
62
+ --docuserve-sidebar-active-bg: var(--theme-color-background-tertiary, #E5DED1);
63
+ --docuserve-sidebar-active-text: var(--theme-color-brand-primary, #2E7D74);
64
+ --docuserve-sidebar-search-bg: var(--theme-color-background-panel, #FFFFFF);
65
+ --docuserve-sidebar-search-border: var(--theme-color-border-default, #DDD6CA);
54
66
 
55
67
  /* Inline code */
56
- --docuserve-inline-code-bg: #F0ECE4;
57
- --docuserve-inline-code-text: #9E3A50;
68
+ --docuserve-inline-code-bg: var(--theme-color-background-tertiary, #F0ECE4);
69
+ --docuserve-inline-code-text: var(--theme-color-syntax-property, #9E3A50);
58
70
 
59
71
  /* Code block panel */
60
- --docuserve-code-bg: #F6F3EE;
61
- --docuserve-code-border: #E5DED1;
62
- --docuserve-code-gutter-bg: #EFEAE0;
63
- --docuserve-code-gutter-border: #DDD6CA;
64
- --docuserve-code-gutter-text: #A59986;
65
- --docuserve-code-text: #2A241E;
66
-
67
- /* Syntax tokens — low-chroma dark-on-light palette */
68
- --docuserve-tok-keyword: #A03472;
69
- --docuserve-tok-string: #1A6640;
70
- --docuserve-tok-number: #B25A00;
71
- --docuserve-tok-comment: #8A7F72;
72
- --docuserve-tok-operator: #2E7D74;
73
- --docuserve-tok-punctuation: #2A241E;
74
- --docuserve-tok-function: #2A5DB0;
75
- --docuserve-tok-property: #9E3A50;
76
- --docuserve-tok-tag: #9E3A50;
77
- --docuserve-tok-attr-name: #B25A00;
78
- --docuserve-tok-attr-value: #1A6640;
72
+ --docuserve-code-bg: var(--theme-color-background-secondary, #F6F3EE);
73
+ --docuserve-code-border: var(--theme-color-border-light, #E5DED1);
74
+ --docuserve-code-gutter-bg: var(--theme-color-background-tertiary, #EFEAE0);
75
+ --docuserve-code-gutter-border: var(--theme-color-border-default, #DDD6CA);
76
+ --docuserve-code-gutter-text: var(--theme-color-text-muted, #A59986);
77
+ --docuserve-code-text: var(--theme-color-text-primary, #2A241E);
78
+
79
+ /* Syntax tokens — pict-section-code's Color.Syntax.* set drives these. */
80
+ --docuserve-tok-keyword: var(--theme-color-syntax-keyword, #A03472);
81
+ --docuserve-tok-string: var(--theme-color-syntax-string, #1A6640);
82
+ --docuserve-tok-number: var(--theme-color-syntax-number, #B25A00);
83
+ --docuserve-tok-comment: var(--theme-color-syntax-comment, #8A7F72);
84
+ --docuserve-tok-operator: var(--theme-color-syntax-operator, #2E7D74);
85
+ --docuserve-tok-punctuation: var(--theme-color-syntax-punctuation, #2A241E);
86
+ --docuserve-tok-function: var(--theme-color-syntax-function, #2A5DB0);
87
+ --docuserve-tok-property: var(--theme-color-syntax-property, #9E3A50);
88
+ --docuserve-tok-tag: var(--theme-color-syntax-tag, #9E3A50);
89
+ --docuserve-tok-attr-name: var(--theme-color-syntax-attrname, #B25A00);
90
+ --docuserve-tok-attr-value: var(--theme-color-syntax-attrvalue, #1A6640);
79
91
 
80
92
  /* Tables, blockquotes, mermaid */
81
- --docuserve-table-header-bg: #F5F0E8;
82
- --docuserve-table-row-alt-bg: #F9F6F0;
83
- --docuserve-blockquote-bg: #F7F5F0;
84
- --docuserve-blockquote-border: #2E7D74;
85
- --docuserve-blockquote-text: #5E5549;
86
- --docuserve-mermaid-bg: #FFFFFF;
93
+ --docuserve-table-header-bg: var(--theme-color-background-tertiary, #F5F0E8);
94
+ --docuserve-table-row-alt-bg: var(--theme-color-background-secondary, #F9F6F0);
95
+ --docuserve-blockquote-bg: var(--theme-color-background-secondary, #F7F5F0);
96
+ --docuserve-blockquote-border: var(--theme-color-brand-primary, #2E7D74);
97
+ --docuserve-blockquote-text: var(--theme-color-text-secondary, #5E5549);
98
+ --docuserve-mermaid-bg: var(--theme-color-background-panel, #FFFFFF);
87
99
 
88
100
  /* Scrollbars */
89
- --docuserve-scrollbar-track: #F5F0E8;
90
- --docuserve-scrollbar-thumb: #D4CCBE;
91
- --docuserve-scrollbar-thumb-hover: #B5AA9A;
92
- }
93
-
94
- @media (prefers-color-scheme: dark)
95
- {
96
- :root:not([data-theme="light"])
97
- {
98
- --docuserve-bg: #15120F;
99
- --docuserve-bg-elevated: #1B1814;
100
- --docuserve-border: #2F2823;
101
- --docuserve-border-soft: #26211C;
102
-
103
- --docuserve-text: #E8E0D4;
104
- --docuserve-text-strong: #F2ECE0;
105
- --docuserve-text-muted: #B5AA9A;
106
- --docuserve-text-dim: #7A6F62;
107
-
108
- --docuserve-accent: #5DB8A8;
109
- --docuserve-accent-hover: #7FCCB8;
110
-
111
- --docuserve-topbar-bg: #1A1612;
112
- --docuserve-topbar-text: #E8E0D4;
113
- --docuserve-topbar-text-muted: #B5AA9A;
114
- --docuserve-topbar-text-dim: #7A6F62;
115
- --docuserve-topbar-hover-bg: #2A241E;
116
- --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
117
- --docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
118
- --docuserve-topbar-version-text: #B5AA9A;
119
-
120
- --docuserve-sidebar-bg: #1B1814;
121
- --docuserve-sidebar-border: #2F2823;
122
- --docuserve-sidebar-border-soft: #26211C;
123
- --docuserve-sidebar-text: #C9C0B3;
124
- --docuserve-sidebar-group-title: #F2ECE0;
125
- --docuserve-sidebar-module-text: #B5AA9A;
126
- --docuserve-sidebar-hover-bg: #2A241E;
127
- --docuserve-sidebar-hover-text: #7FCCB8;
128
- --docuserve-sidebar-active-bg: #2F2823;
129
- --docuserve-sidebar-active-text: #7FCCB8;
130
- --docuserve-sidebar-search-bg: #26211C;
131
- --docuserve-sidebar-search-border: #2F2823;
132
-
133
- --docuserve-inline-code-bg: #2A241E;
134
- --docuserve-inline-code-text: #E8B07A;
135
-
136
- --docuserve-code-bg: #1E1A17;
137
- --docuserve-code-border: #2F2823;
138
- --docuserve-code-gutter-bg: #17130F;
139
- --docuserve-code-gutter-border: #2F2823;
140
- --docuserve-code-gutter-text: #6A6052;
141
- --docuserve-code-text: #E8E0D4;
142
-
143
- --docuserve-tok-keyword: #C678DD;
144
- --docuserve-tok-string: #98C379;
145
- --docuserve-tok-number: #D19A66;
146
- --docuserve-tok-comment: #7F848E;
147
- --docuserve-tok-operator: #56B6C2;
148
- --docuserve-tok-punctuation: #E8E0D4;
149
- --docuserve-tok-function: #61AFEF;
150
- --docuserve-tok-property: #E06C75;
151
- --docuserve-tok-tag: #E06C75;
152
- --docuserve-tok-attr-name: #D19A66;
153
- --docuserve-tok-attr-value: #98C379;
154
-
155
- --docuserve-table-header-bg: #26211C;
156
- --docuserve-table-row-alt-bg: #1F1B17;
157
- --docuserve-blockquote-bg: #1F1B17;
158
- --docuserve-blockquote-border: #5DB8A8;
159
- --docuserve-blockquote-text: #C9C0B3;
160
- --docuserve-mermaid-bg: #E8E0D4;
161
-
162
- --docuserve-scrollbar-track: #1B1814;
163
- --docuserve-scrollbar-thumb: #3A322B;
164
- --docuserve-scrollbar-thumb-hover: #524438;
165
- }
166
- }
167
-
168
- :root[data-theme="dark"]
169
- {
170
- --docuserve-bg: #15120F;
171
- --docuserve-bg-elevated: #1B1814;
172
- --docuserve-border: #2F2823;
173
- --docuserve-border-soft: #26211C;
174
-
175
- --docuserve-text: #E8E0D4;
176
- --docuserve-text-strong: #F2ECE0;
177
- --docuserve-text-muted: #B5AA9A;
178
- --docuserve-text-dim: #7A6F62;
179
-
180
- --docuserve-accent: #5DB8A8;
181
- --docuserve-accent-hover: #7FCCB8;
182
-
183
- --docuserve-topbar-bg: #1A1612;
184
- --docuserve-topbar-text: #E8E0D4;
185
- --docuserve-topbar-text-muted: #B5AA9A;
186
- --docuserve-topbar-text-dim: #7A6F62;
187
- --docuserve-topbar-hover-bg: #2A241E;
188
- --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
189
- --docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
190
- --docuserve-topbar-version-text: #B5AA9A;
191
-
192
- --docuserve-sidebar-bg: #1B1814;
193
- --docuserve-sidebar-border: #2F2823;
194
- --docuserve-sidebar-border-soft: #26211C;
195
- --docuserve-sidebar-text: #C9C0B3;
196
- --docuserve-sidebar-group-title: #F2ECE0;
197
- --docuserve-sidebar-module-text: #B5AA9A;
198
- --docuserve-sidebar-hover-bg: #2A241E;
199
- --docuserve-sidebar-hover-text: #7FCCB8;
200
- --docuserve-sidebar-active-bg: #2F2823;
201
- --docuserve-sidebar-active-text: #7FCCB8;
202
- --docuserve-sidebar-search-bg: #26211C;
203
- --docuserve-sidebar-search-border: #2F2823;
204
-
205
- --docuserve-inline-code-bg: #2A241E;
206
- --docuserve-inline-code-text: #E8B07A;
207
-
208
- --docuserve-code-bg: #1E1A17;
209
- --docuserve-code-border: #2F2823;
210
- --docuserve-code-gutter-bg: #17130F;
211
- --docuserve-code-gutter-border: #2F2823;
212
- --docuserve-code-gutter-text: #6A6052;
213
- --docuserve-code-text: #E8E0D4;
214
-
215
- --docuserve-tok-keyword: #C678DD;
216
- --docuserve-tok-string: #98C379;
217
- --docuserve-tok-number: #D19A66;
218
- --docuserve-tok-comment: #7F848E;
219
- --docuserve-tok-operator: #56B6C2;
220
- --docuserve-tok-punctuation: #E8E0D4;
221
- --docuserve-tok-function: #61AFEF;
222
- --docuserve-tok-property: #E06C75;
223
- --docuserve-tok-tag: #E06C75;
224
- --docuserve-tok-attr-name: #D19A66;
225
- --docuserve-tok-attr-value: #98C379;
226
-
227
- --docuserve-table-header-bg: #26211C;
228
- --docuserve-table-row-alt-bg: #1F1B17;
229
- --docuserve-blockquote-bg: #1F1B17;
230
- --docuserve-blockquote-border: #5DB8A8;
231
- --docuserve-blockquote-text: #C9C0B3;
232
- --docuserve-mermaid-bg: #E8E0D4;
233
-
234
- --docuserve-scrollbar-track: #1B1814;
235
- --docuserve-scrollbar-thumb: #3A322B;
236
- --docuserve-scrollbar-thumb-hover: #524438;
101
+ --docuserve-scrollbar-track: var(--theme-color-scrollbar-track, #F5F0E8);
102
+ --docuserve-scrollbar-thumb: var(--theme-color-scrollbar-thumb, #D4CCBE);
103
+ --docuserve-scrollbar-thumb-hover: var(--theme-color-scrollbar-hover, #B5AA9A);
237
104
  }
238
105
 
239
106
  /* ----------------------------------------------------------------------------
package/dist/index.html CHANGED
@@ -28,9 +28,10 @@
28
28
  <!-- The root container for the Pict application -->
29
29
  <div id="Docuserve-Application-Container"></div>
30
30
 
31
- <!-- Mermaid diagram rendering -->
31
+ <!-- Mermaid diagram rendering. pict-section-content (v0.1.8+) drives
32
+ initialization with theme: 'base' + themeVariables sourced
33
+ from --theme-color-* so diagrams follow the active theme. -->
32
34
  <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
33
- <script>mermaid.initialize({ startOnLoad: false, theme: 'default' });</script>
34
35
  <!-- KaTeX for LaTeX equation rendering -->
35
36
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"></script>
36
37
  <!-- Load the Docuserve PICT Application Bundle from jsDelivr CDN -->