pict-section-inlinedocumentation 0.0.4 → 0.0.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 (10) hide show
  1. package/example_applications/basic/index.html +5 -5
  2. package/example_applications/bookshop/html/index.html +5 -5
  3. package/example_applications/bookshop/views/PictView-Bookshop-BookList.js +6 -6
  4. package/example_applications/bookshop/views/PictView-Bookshop-Store.js +3 -3
  5. package/package.json +9 -8
  6. package/source/providers/Pict-Provider-InlineDocumentation.js +293 -9
  7. package/source/views/Pict-View-InlineDocumentation-Content.js +114 -45
  8. package/source/views/Pict-View-InlineDocumentation-Layout.js +7 -54
  9. package/source/views/Pict-View-InlineDocumentation-Nav.js +678 -130
  10. package/source/views/Pict-View-InlineDocumentation-TopicManager.js +64 -64
package/source/views/Pict-View-InlineDocumentation-TopicManager.js CHANGED
@@ -16,12 +16,12 @@ const _ViewConfiguration =
16
16
  display: flex;
17
17
  align-items: center;
18
18
  padding: 0.6em 0.8em;
19
- border-bottom: 1px solid #EAE3D8;
19
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
20
20
  cursor: pointer;
21
21
  transition: background 0.1s;
22
22
  }
23
23
  .pict-inline-doc-tm-topic-item:hover {
24
- background: #F5F0E8;
24
+ background: var(--theme-color-background-secondary, #F5F0E8);
25
25
  }
26
26
  .pict-inline-doc-tm-topic-item:last-child {
27
27
  border-bottom: none;
@@ -32,12 +32,12 @@ const _ViewConfiguration =
32
32
  }
33
33
  .pict-inline-doc-tm-topic-title {
34
34
  font-weight: 600;
35
- color: #3D3229;
35
+ color: var(--theme-color-text-primary, #3D3229);
36
36
  font-size: 0.95em;
37
37
  }
38
38
  .pict-inline-doc-tm-topic-meta {
39
39
  font-size: 0.8em;
40
- color: #8A7F72;
40
+ color: var(--theme-color-text-muted, #8A7F72);
41
41
  margin-top: 0.15em;
42
42
  }
43
43
  .pict-inline-doc-tm-topic-actions {
@@ -51,20 +51,20 @@ const _ViewConfiguration =
51
51
  justify-content: center;
52
52
  width: 28px;
53
53
  height: 28px;
54
- border: 1px solid #DDD6CA;
54
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
55
55
  border-radius: 3px;
56
- background: #fff;
57
- color: #5E5549;
56
+ background: var(--theme-color-background-panel, #fff);
57
+ color: var(--theme-color-text-secondary, #5E5549);
58
58
  font-size: 0.85em;
59
59
  cursor: pointer;
60
60
  transition: background 0.1s, border-color 0.1s;
61
61
  }
62
62
  .pict-inline-doc-tm-action-btn:hover {
63
- background: #F0ECE4;
64
- border-color: #C4BDB3;
63
+ background: var(--theme-color-background-tertiary, #F0ECE4);
64
+ border-color: var(--theme-color-border-default, #C4BDB3);
65
65
  }
66
66
  .pict-inline-doc-tm-action-btn.danger:hover {
67
- background: #FDE8E8;
67
+ background: var(--theme-color-background-tertiary, #FDE8E8);
68
68
  border-color: #E57373;
69
69
  color: #C62828;
70
70
  }
@@ -76,7 +76,7 @@ const _ViewConfiguration =
76
76
  margin-top: 0.5em;
77
77
  border: 1px dashed #DDD6CA;
78
78
  border-radius: 4px;
79
- color: #2E7D74;
79
+ color: var(--theme-color-brand-primary, #2E7D74);
80
80
  font-size: 0.9em;
81
81
  font-weight: 500;
82
82
  cursor: pointer;
@@ -84,12 +84,12 @@ const _ViewConfiguration =
84
84
  }
85
85
  .pict-inline-doc-tm-new-topic:hover {
86
86
  background: #F0F9F7;
87
- border-color: #2E7D74;
87
+ border-color: var(--theme-color-brand-primary, #2E7D74);
88
88
  }
89
89
  .pict-inline-doc-tm-empty {
90
90
  text-align: center;
91
91
  padding: 2em 1em;
92
- color: #8A7F72;
92
+ color: var(--theme-color-text-muted, #8A7F72);
93
93
  font-size: 0.9em;
94
94
  }
95
95
  .pict-inline-doc-tm-form-group {
@@ -99,7 +99,7 @@ const _ViewConfiguration =
99
99
  display: block;
100
100
  font-size: 0.8em;
101
101
  font-weight: 600;
102
- color: #5E5549;
102
+ color: var(--theme-color-text-secondary, #5E5549);
103
103
  text-transform: uppercase;
104
104
  letter-spacing: 0.03em;
105
105
  margin-bottom: 0.3em;
@@ -108,24 +108,24 @@ const _ViewConfiguration =
108
108
  width: 100%;
109
109
  padding: 0.45em 0.6em;
110
110
  font-size: 0.9em;
111
- color: #3D3229;
112
- background: #FDFCFA;
113
- border: 1px solid #DDD6CA;
111
+ color: var(--theme-color-text-primary, #3D3229);
112
+ background: var(--theme-color-background-panel, #FDFCFA);
113
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
114
114
  border-radius: 4px;
115
115
  box-sizing: border-box;
116
116
  }
117
117
  .pict-inline-doc-tm-form-input:focus {
118
118
  outline: none;
119
- border-color: #2E7D74;
119
+ border-color: var(--theme-color-brand-primary, #2E7D74);
120
120
  box-shadow: 0 0 0 2px rgba(46, 125, 116, 0.15);
121
121
  }
122
122
  .pict-inline-doc-tm-form-input[readonly] {
123
- background: #F5F0E8;
124
- color: #8A7F72;
123
+ background: var(--theme-color-background-secondary, #F5F0E8);
124
+ color: var(--theme-color-text-muted, #8A7F72);
125
125
  }
126
126
  .pict-inline-doc-tm-form-hint {
127
127
  font-size: 0.75em;
128
- color: #8A7F72;
128
+ color: var(--theme-color-text-muted, #8A7F72);
129
129
  margin-top: 0.2em;
130
130
  }
131
131
  .pict-inline-doc-tm-routes-section {
@@ -144,13 +144,13 @@ const _ViewConfiguration =
144
144
  background: #E8E3D8;
145
145
  border-radius: 12px;
146
146
  font-size: 0.82em;
147
- color: #3D3229;
147
+ color: var(--theme-color-text-primary, #3D3229);
148
148
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
149
149
  }
150
150
  .pict-inline-doc-tm-route-chip-remove {
151
151
  margin-left: 0.4em;
152
152
  cursor: pointer;
153
- color: #8A7F72;
153
+ color: var(--theme-color-text-muted, #8A7F72);
154
154
  font-size: 0.9em;
155
155
  line-height: 1;
156
156
  }
@@ -166,20 +166,20 @@ const _ViewConfiguration =
166
166
  display: inline-flex;
167
167
  align-items: center;
168
168
  padding: 0.25em 0.5em;
169
- border: 1px solid #DDD6CA;
169
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
170
170
  border-radius: 3px;
171
- background: #fff;
172
- color: #5E5549;
171
+ background: var(--theme-color-background-panel, #fff);
172
+ color: var(--theme-color-text-secondary, #5E5549);
173
173
  font-size: 0.8em;
174
174
  cursor: pointer;
175
175
  transition: background 0.1s;
176
176
  }
177
177
  .pict-inline-doc-tm-route-action-btn:hover {
178
- background: #F0ECE4;
178
+ background: var(--theme-color-background-tertiary, #F0ECE4);
179
179
  }
180
180
  .pict-inline-doc-tm-route-action-btn.accent {
181
- border-color: #2E7D74;
182
- color: #2E7D74;
181
+ border-color: var(--theme-color-brand-primary, #2E7D74);
182
+ color: var(--theme-color-brand-primary, #2E7D74);
183
183
  }
184
184
  .pict-inline-doc-tm-route-action-btn.accent:hover {
185
185
  background: #F0F9F7;
@@ -198,21 +198,21 @@ const _ViewConfiguration =
198
198
  padding: 0.35em 0.5em;
199
199
  font-size: 0.85em;
200
200
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
201
- color: #3D3229;
202
- background: #FDFCFA;
203
- border: 1px solid #DDD6CA;
201
+ color: var(--theme-color-text-primary, #3D3229);
202
+ background: var(--theme-color-background-panel, #FDFCFA);
203
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
204
204
  border-radius: 3px;
205
205
  }
206
206
  .pict-inline-doc-tm-route-input:focus {
207
207
  outline: none;
208
- border-color: #2E7D74;
208
+ border-color: var(--theme-color-brand-primary, #2E7D74);
209
209
  }
210
210
  .pict-inline-doc-tm-wc-container {
211
211
  padding: 0.5em 0;
212
212
  }
213
213
  .pict-inline-doc-tm-wc-label {
214
214
  font-size: 0.85em;
215
- color: #5E5549;
215
+ color: var(--theme-color-text-secondary, #5E5549);
216
216
  margin-bottom: 0.6em;
217
217
  }
218
218
  .pict-inline-doc-tm-wc-segments {
@@ -223,7 +223,7 @@ const _ViewConfiguration =
223
223
  margin-bottom: 0.8em;
224
224
  }
225
225
  .pict-inline-doc-tm-wc-slash {
226
- color: #8A7F72;
226
+ color: var(--theme-color-text-muted, #8A7F72);
227
227
  font-size: 1.1em;
228
228
  font-weight: 300;
229
229
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
@@ -232,10 +232,10 @@ const _ViewConfiguration =
232
232
  display: inline-flex;
233
233
  align-items: center;
234
234
  padding: 0.4em 0.7em;
235
- border: 1px solid #DDD6CA;
235
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
236
236
  border-radius: 4px;
237
- background: #fff;
238
- color: #3D3229;
237
+ background: var(--theme-color-background-panel, #fff);
238
+ color: var(--theme-color-text-primary, #3D3229);
239
239
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
240
240
  font-size: 0.9em;
241
241
  cursor: pointer;
@@ -243,13 +243,13 @@ const _ViewConfiguration =
243
243
  user-select: none;
244
244
  }
245
245
  .pict-inline-doc-tm-wc-segment:hover {
246
- border-color: #2E7D74;
246
+ border-color: var(--theme-color-brand-primary, #2E7D74);
247
247
  background: #F0F9F7;
248
248
  }
249
249
  .pict-inline-doc-tm-wc-segment.selected {
250
250
  background: #2E7D74;
251
- color: #fff;
252
- border-color: #2E7D74;
251
+ color: var(--theme-color-background-panel, #fff);
252
+ border-color: var(--theme-color-brand-primary, #2E7D74);
253
253
  }
254
254
  .pict-inline-doc-tm-wc-segment.after-wildcard {
255
255
  opacity: 0.35;
@@ -258,41 +258,41 @@ const _ViewConfiguration =
258
258
  }
259
259
  .pict-inline-doc-tm-wc-segment.after-wildcard:hover {
260
260
  border-color: #DDD6CA;
261
- background: #fff;
261
+ background: var(--theme-color-background-panel, #fff);
262
262
  }
263
263
  .pict-inline-doc-tm-wc-wildcard-star {
264
264
  display: inline-flex;
265
265
  align-items: center;
266
266
  padding: 0.4em 0.6em;
267
- color: #2E7D74;
267
+ color: var(--theme-color-brand-primary, #2E7D74);
268
268
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
269
269
  font-size: 1.1em;
270
270
  font-weight: 700;
271
271
  }
272
272
  .pict-inline-doc-tm-wc-preview {
273
273
  padding: 0.5em 0.7em;
274
- background: #F5F0E8;
275
- border: 1px solid #E5DED4;
274
+ background: var(--theme-color-background-secondary, #F5F0E8);
275
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
276
276
  border-radius: 4px;
277
277
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
278
278
  font-size: 0.9em;
279
- color: #3D3229;
279
+ color: var(--theme-color-text-primary, #3D3229);
280
280
  }
281
281
  .pict-inline-doc-tm-wc-preview-label {
282
282
  font-size: 0.75em;
283
- color: #8A7F72;
283
+ color: var(--theme-color-text-muted, #8A7F72);
284
284
  text-transform: uppercase;
285
285
  letter-spacing: 0.03em;
286
286
  margin-bottom: 0.3em;
287
287
  }
288
288
  .pict-inline-doc-tm-bind-route-display {
289
289
  padding: 0.5em 0.7em;
290
- background: #F5F0E8;
291
- border: 1px solid #E5DED4;
290
+ background: var(--theme-color-background-secondary, #F5F0E8);
291
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
292
292
  border-radius: 4px;
293
293
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
294
294
  font-size: 0.9em;
295
- color: #3D3229;
295
+ color: var(--theme-color-text-primary, #3D3229);
296
296
  margin-bottom: 0.8em;
297
297
  }
298
298
  .pict-inline-doc-tm-bind-topic-list {
@@ -304,12 +304,12 @@ const _ViewConfiguration =
304
304
  display: flex;
305
305
  align-items: center;
306
306
  padding: 0.5em 0.6em;
307
- border-bottom: 1px solid #EAE3D8;
307
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
308
308
  cursor: pointer;
309
309
  transition: background 0.1s;
310
310
  }
311
311
  .pict-inline-doc-tm-bind-topic-option:hover {
312
- background: #F5F0E8;
312
+ background: var(--theme-color-background-secondary, #F5F0E8);
313
313
  }
314
314
  .pict-inline-doc-tm-bind-topic-option.selected {
315
315
  background: #F0F9F7;
@@ -324,7 +324,7 @@ const _ViewConfiguration =
324
324
  position: relative;
325
325
  }
326
326
  .pict-inline-doc-tm-bind-topic-option.selected .pict-inline-doc-tm-bind-radio {
327
- border-color: #2E7D74;
327
+ border-color: var(--theme-color-brand-primary, #2E7D74);
328
328
  }
329
329
  .pict-inline-doc-tm-bind-topic-option.selected .pict-inline-doc-tm-bind-radio::after {
330
330
  content: '';
@@ -344,22 +344,22 @@ const _ViewConfiguration =
344
344
  .pict-inline-doc-tm-bind-route-type-btn {
345
345
  flex: 1;
346
346
  padding: 0.5em;
347
- border: 1px solid #DDD6CA;
347
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
348
348
  border-radius: 4px;
349
- background: #fff;
350
- color: #5E5549;
349
+ background: var(--theme-color-background-panel, #fff);
350
+ color: var(--theme-color-text-secondary, #5E5549);
351
351
  font-size: 0.85em;
352
352
  text-align: center;
353
353
  cursor: pointer;
354
354
  transition: background 0.1s, border-color 0.1s;
355
355
  }
356
356
  .pict-inline-doc-tm-bind-route-type-btn:hover {
357
- background: #F0ECE4;
357
+ background: var(--theme-color-background-tertiary, #F0ECE4);
358
358
  }
359
359
  .pict-inline-doc-tm-bind-route-type-btn.selected {
360
360
  background: #2E7D74;
361
- color: #fff;
362
- border-color: #2E7D74;
361
+ color: var(--theme-color-background-panel, #fff);
362
+ border-color: var(--theme-color-brand-primary, #2E7D74);
363
363
  }
364
364
  .pict-inline-doc-tm-sidebar-list {
365
365
  max-height: 300px;
@@ -369,17 +369,17 @@ const _ViewConfiguration =
369
369
  padding: 0.4em 0.6em;
370
370
  cursor: pointer;
371
371
  font-size: 0.9em;
372
- color: #3D3229;
373
- border-bottom: 1px solid #EAE3D8;
372
+ color: var(--theme-color-text-primary, #3D3229);
373
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
374
374
  transition: background 0.1s;
375
375
  }
376
376
  .pict-inline-doc-tm-sidebar-item:hover {
377
- background: #F5F0E8;
377
+ background: var(--theme-color-background-secondary, #F5F0E8);
378
378
  }
379
379
  .pict-inline-doc-tm-sidebar-item .path {
380
380
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
381
381
  font-size: 0.85em;
382
- color: #8A7F72;
382
+ color: var(--theme-color-text-muted, #8A7F72);
383
383
  margin-left: 0.5em;
384
384
  }
385
385
  .pict-inline-doc-tm-validation-error {
@@ -740,7 +740,7 @@ class InlineDocumentationTopicManagerView extends libPictView
740
740
  {
741
741
  if (!pRoutes || pRoutes.length < 1)
742
742
  {
743
- return '<span style="font-size:0.8em;color:#8A7F72;">No routes bound.</span>';
743
+ return '<span style="font-size:0.8em;color:var(--theme-color-text-muted, #8A7F72);">No routes bound.</span>';
744
744
  }
745
745
 
746
746
  let tmpHTML = '';