pict-section-inlinedocumentation 0.0.5 → 1.0.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.
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 +8 -8
  6. package/source/providers/Pict-Provider-InlineDocumentation.js +3 -3
  7. package/source/views/Pict-View-InlineDocumentation-Content.js +52 -52
  8. package/source/views/Pict-View-InlineDocumentation-Layout.js +6 -6
  9. package/source/views/Pict-View-InlineDocumentation-Nav.js +53 -41
  10. package/source/views/Pict-View-InlineDocumentation-TopicManager.js +64 -64
package/example_applications/basic/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  body {
10
10
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
11
11
  background: #F5F3EE;
12
- color: #3D3229;
12
+ color: var(--theme-color-text-primary, #3D3229);
13
13
  padding: 2em;
14
14
  }
15
15
  h1 {
@@ -26,17 +26,17 @@
26
26
  padding: 0.4em 0.8em;
27
27
  border: 1px solid #C4BAA8;
28
28
  border-radius: 4px;
29
- background: #fff;
30
- color: #3D3229;
29
+ background: var(--theme-color-background-panel, #fff);
30
+ color: var(--theme-color-text-primary, #3D3229);
31
31
  cursor: pointer;
32
32
  font-size: 0.9em;
33
33
  }
34
34
  .controls button:hover {
35
- background: #F0ECE4;
35
+ background: var(--theme-color-background-secondary, #F0ECE4);
36
36
  }
37
37
  .controls button.active {
38
38
  background: #2E7D74;
39
- color: #fff;
39
+ color: var(--theme-color-background-panel, #fff);
40
40
  border-color: #2E7D74;
41
41
  }
42
42
  #InlineDoc-Container {
package/example_applications/bookshop/html/index.html CHANGED
@@ -13,8 +13,8 @@
13
13
 
14
14
  /* --- Header Bar --- */
15
15
  .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
16
- .pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
17
- .pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
16
+ .pict-example-badge { background: #E76F51; color: var(--theme-color-background-panel, #fff); padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
17
+ .pict-example-badge svg { width: 14px; height: 14px; fill: var(--theme-color-background-panel, #fff); flex-shrink: 0; }
18
18
  .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
19
19
  .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
20
20
  .pict-example-header-help-btn {
@@ -41,7 +41,7 @@
41
41
  margin-right: 380px;
42
42
  }
43
43
  #Bookshop-Content-Container {
44
- background: #fff;
44
+ background: var(--theme-color-background-panel, #fff);
45
45
  border: 1px solid #D4A373;
46
46
  border-top: 4px solid #E76F51;
47
47
  border-radius: 6px;
@@ -57,7 +57,7 @@
57
57
  bottom: 0;
58
58
  width: 380px;
59
59
  min-width: 320px;
60
- background: #FDFCFA;
60
+ background: var(--theme-color-background-panel, #FDFCFA);
61
61
  border-left: 1px solid #D4A373;
62
62
  box-shadow: -2px 0 12px rgba(38,70,83,0.08);
63
63
  transform: translateX(100%);
@@ -153,7 +153,7 @@
153
153
  #Bookshop-Help-Panel .pict-inline-doc-nav-item.active {
154
154
  border-left: none;
155
155
  background: #2E7D74;
156
- color: #fff;
156
+ color: var(--theme-color-background-panel, #fff);
157
157
  }
158
158
  #Bookshop-Help-Panel .pict-inline-doc-nav-topic-badge {
159
159
  margin: 0 0.3em;
package/example_applications/bookshop/views/PictView-Bookshop-BookList.js CHANGED
@@ -42,7 +42,7 @@ const _ViewConfiguration =
42
42
  }
43
43
  .bookshop-help-btn:hover {
44
44
  background: #D4A373;
45
- color: #fff;
45
+ color: var(--theme-color-background-panel, #fff);
46
46
  }
47
47
  .bookshop-filter-bar {
48
48
  margin-bottom: 1.25em;
@@ -53,14 +53,14 @@ const _ViewConfiguration =
53
53
  .bookshop-filter-bar label {
54
54
  font-size: 0.85em;
55
55
  font-weight: 600;
56
- color: #5E5549;
56
+ color: var(--theme-color-text-secondary, #5E5549);
57
57
  }
58
58
  .bookshop-filter-bar select {
59
59
  padding: 0.35em 0.7em;
60
60
  border: 1px solid #D4A373;
61
61
  border-radius: 4px;
62
62
  font-size: 0.85em;
63
- background: #fff;
63
+ background: var(--theme-color-background-panel, #fff);
64
64
  color: #264653;
65
65
  }
66
66
  .bookshop-book-grid {
@@ -72,7 +72,7 @@ const _ViewConfiguration =
72
72
  display: flex;
73
73
  gap: 1em;
74
74
  padding: 1em;
75
- background: #fff;
75
+ background: var(--theme-color-background-panel, #fff);
76
76
  border: 1px solid #E5DED4;
77
77
  border-radius: 6px;
78
78
  cursor: pointer;
@@ -88,7 +88,7 @@ const _ViewConfiguration =
88
88
  border-radius: 4px;
89
89
  object-fit: cover;
90
90
  flex-shrink: 0;
91
- background: #F0ECE4;
91
+ background: var(--theme-color-background-secondary, #F0ECE4);
92
92
  }
93
93
  .bookshop-book-info {
94
94
  flex: 1;
@@ -110,7 +110,7 @@ const _ViewConfiguration =
110
110
  font-size: 0.7em;
111
111
  padding: 0.15em 0.5em;
112
112
  background: #E8E3D8;
113
- color: #5E5549;
113
+ color: var(--theme-color-text-secondary, #5E5549);
114
114
  border-radius: 3px;
115
115
  margin-bottom: 0.4em;
116
116
  }
package/example_applications/bookshop/views/PictView-Bookshop-Store.js CHANGED
@@ -20,7 +20,7 @@ const _ViewConfiguration =
20
20
  padding: 0.4em 0.8em;
21
21
  border: 1px solid #D4A373;
22
22
  border-radius: 4px;
23
- background: #fff;
23
+ background: var(--theme-color-background-panel, #fff);
24
24
  color: #264653;
25
25
  cursor: pointer;
26
26
  font-size: 0.85em;
@@ -40,7 +40,7 @@ const _ViewConfiguration =
40
40
  border-radius: 6px;
41
41
  object-fit: cover;
42
42
  flex-shrink: 0;
43
- background: #F0ECE4;
43
+ background: var(--theme-color-background-secondary, #F0ECE4);
44
44
  box-shadow: 0 2px 12px rgba(38,70,83,0.12);
45
45
  }
46
46
  .bookshop-store-info {
@@ -94,7 +94,7 @@ const _ViewConfiguration =
94
94
  display: inline-block;
95
95
  padding: 0.6em 1.5em;
96
96
  background: #E76F51;
97
- color: #fff;
97
+ color: var(--theme-color-background-panel, #fff);
98
98
  border: none;
99
99
  border-radius: 5px;
100
100
  font-size: 1em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pict-section-inlinedocumentation",
3
- "version": "0.0.5",
3
+ "version": "1.0.0",
4
4
  "description": "Pict embeddable inline documentation browser with topic support",
5
5
  "main": "source/Pict-Section-InlineDocumentation.js",
6
6
  "scripts": {
@@ -23,17 +23,17 @@
23
23
  "homepage": "https://github.com/stevenvelozo/pict-section-inlinedocumentation#readme",
24
24
  "dependencies": {
25
25
  "lunr": "^2.3.9",
26
- "pict-provider": "^1.0.12",
27
- "pict-section-content": "^0.1.5",
28
- "pict-section-markdowneditor": "^1.0.9",
29
- "pict-section-modal": "^0.0.4",
26
+ "pict-provider": "^1.0.13",
27
+ "pict-section-content": "^1.0.0",
28
+ "pict-section-markdowneditor": "^1.0.15",
29
+ "pict-section-modal": "^1.0.1",
30
30
  "pict-view": "^1.0.68"
31
31
  },
32
32
  "devDependencies": {
33
- "pict": "^1.0.363",
34
- "pict-docuserve": "^0.1.5",
33
+ "pict": "^1.0.368",
34
+ "pict-docuserve": "^1.0.0",
35
35
  "puppeteer": "^24.40.0",
36
- "quackage": "^1.1.0"
36
+ "quackage": "^1.2.3"
37
37
  },
38
38
  "mocha": {
39
39
  "diff": true,
package/source/providers/Pict-Provider-InlineDocumentation.js CHANGED
@@ -1468,7 +1468,7 @@ class InlineDocumentationProvider extends libPictProvider
1468
1468
 
1469
1469
  let tmpEditorHTML = '<div class="pict-inline-doc-tm-form-group">';
1470
1470
  tmpEditorHTML += '<label class="pict-inline-doc-tm-form-label">Tooltip Key</label>';
1471
- tmpEditorHTML += '<div style="font-family:monospace;font-size:0.85em;color:#8A7F72;padding:0.3em 0;">' + this._escapeTooltipHTML(pTooltipKey) + '</div>';
1471
+ tmpEditorHTML += '<div style="font-family:monospace;font-size:0.85em;color:var(--theme-color-text-muted, #8A7F72);padding:0.3em 0;">' + this._escapeTooltipHTML(pTooltipKey) + '</div>';
1472
1472
  tmpEditorHTML += '</div>';
1473
1473
  tmpEditorHTML += '<div class="pict-inline-doc-tm-form-group">';
1474
1474
  tmpEditorHTML += '<label class="pict-inline-doc-tm-form-label">Content (Markdown)</label>';
@@ -1497,7 +1497,7 @@ class InlineDocumentationProvider extends libPictProvider
1497
1497
  {
1498
1498
  // Initial preview
1499
1499
  let tmpLinkResolver = tmpSelf._createTooltipLinkResolver();
1500
- let tmpInitialHTML = tmpCurrentContent ? tmpSelf._ContentProvider.parseMarkdown(tmpCurrentContent, tmpLinkResolver) : '<span style="color:#8A7F72;">No content yet.</span>';
1500
+ let tmpInitialHTML = tmpCurrentContent ? tmpSelf._ContentProvider.parseMarkdown(tmpCurrentContent, tmpLinkResolver) : '<span style="color:var(--theme-color-text-muted, #8A7F72);">No content yet.</span>';
1501
1501
  tmpPreview.innerHTML = tmpInitialHTML;
1502
1502
 
1503
1503
  // Live preview on input
@@ -1510,7 +1510,7 @@ class InlineDocumentationProvider extends libPictProvider
1510
1510
  }
1511
1511
  else
1512
1512
  {
1513
- tmpPreview.innerHTML = '<span style="color:#8A7F72;">No content yet.</span>';
1513
+ tmpPreview.innerHTML = '<span style="color:var(--theme-color-text-muted, #8A7F72);">No content yet.</span>';
1514
1514
  }
1515
1515
  });
1516
1516
 
package/source/views/Pict-View-InlineDocumentation-Content.js CHANGED
@@ -21,39 +21,39 @@ const _ViewConfiguration =
21
21
  align-items: center;
22
22
  justify-content: center;
23
23
  min-height: 150px;
24
- color: #8A7F72;
24
+ color: var(--theme-color-text-muted, #8A7F72);
25
25
  font-size: 0.95em;
26
26
  }
27
27
  .pict-inline-doc-content h1 {
28
28
  font-size: 1.75em;
29
- color: #3D3229;
30
- border-bottom: 1px solid #DDD6CA;
29
+ color: var(--theme-color-text-primary, #3D3229);
30
+ border-bottom: 1px solid var(--theme-color-border-default, #DDD6CA);
31
31
  padding-bottom: 0.3em;
32
32
  margin-top: 0;
33
33
  }
34
34
  .pict-inline-doc-content h2 {
35
35
  font-size: 1.35em;
36
- color: #3D3229;
37
- border-bottom: 1px solid #EAE3D8;
36
+ color: var(--theme-color-text-primary, #3D3229);
37
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
38
38
  padding-bottom: 0.2em;
39
39
  margin-top: 1.25em;
40
40
  }
41
41
  .pict-inline-doc-content h3 {
42
42
  font-size: 1.15em;
43
- color: #3D3229;
43
+ color: var(--theme-color-text-primary, #3D3229);
44
44
  margin-top: 1em;
45
45
  }
46
46
  .pict-inline-doc-content h4, .pict-inline-doc-content h5, .pict-inline-doc-content h6 {
47
- color: #5E5549;
47
+ color: var(--theme-color-text-secondary, #5E5549);
48
48
  margin-top: 0.8em;
49
49
  }
50
50
  .pict-inline-doc-content p {
51
51
  line-height: 1.65;
52
- color: #423D37;
52
+ color: var(--theme-color-text-primary, #423D37);
53
53
  margin: 0.6em 0;
54
54
  }
55
55
  .pict-inline-doc-content a {
56
- color: #2E7D74;
56
+ color: var(--theme-color-brand-primary, #2E7D74);
57
57
  text-decoration: none;
58
58
  cursor: pointer;
59
59
  }
@@ -61,8 +61,8 @@ const _ViewConfiguration =
61
61
  text-decoration: underline;
62
62
  }
63
63
  .pict-inline-doc-content pre {
64
- background: #3D3229;
65
- color: #E8E0D4;
64
+ background: var(--theme-color-text-primary, #3D3229);
65
+ color: var(--theme-color-text-on-brand, #E8E0D4);
66
66
  padding: 1em;
67
67
  border-radius: 5px;
68
68
  overflow-x: auto;
@@ -71,11 +71,11 @@ const _ViewConfiguration =
71
71
  max-width: 100%;
72
72
  }
73
73
  .pict-inline-doc-content code {
74
- background: #F0ECE4;
74
+ background: var(--theme-color-background-tertiary, #F0ECE4);
75
75
  padding: 0.15em 0.35em;
76
76
  border-radius: 3px;
77
77
  font-size: 0.85em;
78
- color: #9E6B47;
78
+ color: var(--theme-color-brand-accent, #9E6B47);
79
79
  }
80
80
  .pict-inline-doc-content pre code {
81
81
  background: none;
@@ -87,8 +87,8 @@ const _ViewConfiguration =
87
87
  border-left: 3px solid #2E7D74;
88
88
  margin: 0.8em 0;
89
89
  padding: 0.4em 0.8em;
90
- background: #F7F5F0;
91
- color: #5E5549;
90
+ background: var(--theme-color-background-secondary, #F7F5F0);
91
+ color: var(--theme-color-text-secondary, #5E5549);
92
92
  }
93
93
  .pict-inline-doc-content blockquote p {
94
94
  margin: 0.2em 0;
@@ -99,11 +99,11 @@ const _ViewConfiguration =
99
99
  }
100
100
  .pict-inline-doc-content li {
101
101
  margin: 0.2em 0;
102
- color: #423D37;
102
+ color: var(--theme-color-text-primary, #423D37);
103
103
  }
104
104
  .pict-inline-doc-content hr {
105
105
  border: none;
106
- border-top: 1px solid #DDD6CA;
106
+ border-top: 1px solid var(--theme-color-border-default, #DDD6CA);
107
107
  margin: 1.5em 0;
108
108
  }
109
109
  .pict-inline-doc-content table {
@@ -114,20 +114,20 @@ const _ViewConfiguration =
114
114
  overflow-x: auto;
115
115
  }
116
116
  .pict-inline-doc-content table th {
117
- background: #F5F0E8;
118
- border: 1px solid #DDD6CA;
117
+ background: var(--theme-color-background-secondary, #F5F0E8);
118
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
119
119
  padding: 0.5em 0.7em;
120
120
  text-align: left;
121
121
  font-weight: 600;
122
- color: #3D3229;
122
+ color: var(--theme-color-text-primary, #3D3229);
123
123
  }
124
124
  .pict-inline-doc-content table td {
125
- border: 1px solid #DDD6CA;
125
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
126
126
  padding: 0.4em 0.7em;
127
- color: #423D37;
127
+ color: var(--theme-color-text-primary, #423D37);
128
128
  }
129
129
  .pict-inline-doc-content table tr:nth-child(even) {
130
- background: #F7F5F0;
130
+ background: var(--theme-color-background-secondary, #F7F5F0);
131
131
  }
132
132
  .pict-inline-doc-content img {
133
133
  max-width: 100%;
@@ -136,19 +136,19 @@ const _ViewConfiguration =
136
136
  .pict-inline-doc-not-found {
137
137
  text-align: center;
138
138
  padding: 2em 1em;
139
- color: #5E5549;
139
+ color: var(--theme-color-text-secondary, #5E5549);
140
140
  }
141
141
  .pict-inline-doc-not-found h2 {
142
- color: #8A7F72;
142
+ color: var(--theme-color-text-muted, #8A7F72);
143
143
  font-size: 1.3em;
144
144
  border-bottom: none;
145
145
  }
146
146
  .pict-inline-doc-not-found code {
147
- background: #F0ECE4;
147
+ background: var(--theme-color-background-tertiary, #F0ECE4);
148
148
  padding: 0.15em 0.35em;
149
149
  border-radius: 3px;
150
150
  font-size: 0.85em;
151
- color: #9E6B47;
151
+ color: var(--theme-color-brand-accent, #9E6B47);
152
152
  }
153
153
  /* Code block action buttons (copy, fullscreen) from pict-section-content */
154
154
  .pict-content-code-actions {
@@ -178,9 +178,9 @@ const _ViewConfiguration =
178
178
  width: 28px;
179
179
  height: 28px;
180
180
  padding: 0;
181
- background: #FFFFFF;
182
- color: #5E5549;
183
- border: 1px solid #DDD6CA;
181
+ background: var(--theme-color-background-panel, #FFFFFF);
182
+ color: var(--theme-color-text-secondary, #5E5549);
183
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
184
184
  border-radius: 6px;
185
185
  cursor: pointer;
186
186
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
@@ -198,13 +198,13 @@ const _ViewConfiguration =
198
198
  }
199
199
  .pict-content-code-action-btn:hover {
200
200
  background: #2E7D74;
201
- color: #FFFFFF;
202
- border-color: #2E7D74;
201
+ color: var(--theme-color-background-panel, #FFFFFF);
202
+ border-color: var(--theme-color-brand-primary, #2E7D74);
203
203
  }
204
204
  .pict-content-code-action-btn.is-copied {
205
205
  background: #2E7D74;
206
- color: #FFFFFF;
207
- border-color: #2E7D74;
206
+ color: var(--theme-color-background-panel, #FFFFFF);
207
+ border-color: var(--theme-color-brand-primary, #2E7D74);
208
208
  }
209
209
  .pict-inline-doc-edit-toolbar {
210
210
  display: none;
@@ -212,8 +212,8 @@ const _ViewConfiguration =
212
212
  gap: 0.4em;
213
213
  padding: 0.4em 0.6em;
214
214
  margin-bottom: 0.5em;
215
- background: #F5F0E8;
216
- border: 1px solid #E5DED4;
215
+ background: var(--theme-color-background-secondary, #F5F0E8);
216
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
217
217
  border-radius: 4px;
218
218
  font-size: 0.8em;
219
219
  }
@@ -221,7 +221,7 @@ const _ViewConfiguration =
221
221
  display: flex;
222
222
  }
223
223
  .pict-inline-doc-edit-toolbar .edit-label {
224
- color: #8A7F72;
224
+ color: var(--theme-color-text-muted, #8A7F72);
225
225
  margin-right: auto;
226
226
  }
227
227
  .pict-inline-doc-edit-btn {
@@ -231,19 +231,19 @@ const _ViewConfiguration =
231
231
  padding: 0.25em 0.6em;
232
232
  border: 1px solid #D4A373;
233
233
  border-radius: 3px;
234
- background: #fff;
235
- color: #5E5549;
234
+ background: var(--theme-color-background-panel, #fff);
235
+ color: var(--theme-color-text-secondary, #5E5549);
236
236
  font-size: 0.9em;
237
237
  cursor: pointer;
238
238
  transition: background 0.1s;
239
239
  }
240
240
  .pict-inline-doc-edit-btn:hover {
241
- background: #F0ECE4;
241
+ background: var(--theme-color-background-tertiary, #F0ECE4);
242
242
  }
243
243
  .pict-inline-doc-edit-btn.primary {
244
244
  background: #2E7D74;
245
- color: #fff;
246
- border-color: #2E7D74;
245
+ color: var(--theme-color-background-panel, #fff);
246
+ border-color: var(--theme-color-brand-primary, #2E7D74);
247
247
  }
248
248
  .pict-inline-doc-edit-btn.primary:hover {
249
249
  background: #266D65;
@@ -269,7 +269,7 @@ const _ViewConfiguration =
269
269
  width: 14px;
270
270
  height: 14px;
271
271
  background: #2E7D74;
272
- color: #fff;
272
+ color: var(--theme-color-background-panel, #fff);
273
273
  border-radius: 50%;
274
274
  font-size: 9px;
275
275
  line-height: 14px;
@@ -285,7 +285,7 @@ const _ViewConfiguration =
285
285
  width: 16px;
286
286
  height: 16px;
287
287
  font-size: 12px;
288
- color: #2E7D74;
288
+ color: var(--theme-color-brand-primary, #2E7D74);
289
289
  cursor: pointer;
290
290
  vertical-align: middle;
291
291
  }
@@ -304,31 +304,31 @@ const _ViewConfiguration =
304
304
  font-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
305
305
  font-size: 0.85em;
306
306
  line-height: 1.5;
307
- color: #3D3229;
308
- background: #FDFCFA;
309
- border: 1px solid #DDD6CA;
307
+ color: var(--theme-color-text-primary, #3D3229);
308
+ background: var(--theme-color-background-panel, #FDFCFA);
309
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
310
310
  border-radius: 4px;
311
311
  resize: vertical;
312
312
  box-sizing: border-box;
313
313
  }
314
314
  .pict-inline-doc-tooltip-editor-textarea:focus {
315
315
  outline: none;
316
- border-color: #2E7D74;
316
+ border-color: var(--theme-color-brand-primary, #2E7D74);
317
317
  box-shadow: 0 0 0 2px rgba(46, 125, 116, 0.15);
318
318
  }
319
319
  .pict-inline-doc-tooltip-preview {
320
320
  margin-top: 0.5em;
321
321
  padding: 0.5em 0.7em;
322
- background: #F5F0E8;
323
- border: 1px solid #E5DED4;
322
+ background: var(--theme-color-background-secondary, #F5F0E8);
323
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
324
324
  border-radius: 4px;
325
325
  font-size: 0.9em;
326
326
  min-height: 2em;
327
- color: #3D3229;
327
+ color: var(--theme-color-text-primary, #3D3229);
328
328
  }
329
329
  .pict-inline-doc-tooltip-preview-label {
330
330
  font-size: 0.75em;
331
- color: #8A7F72;
331
+ color: var(--theme-color-text-muted, #8A7F72);
332
332
  text-transform: uppercase;
333
333
  letter-spacing: 0.03em;
334
334
  margin-bottom: 0.3em;
package/source/views/Pict-View-InlineDocumentation-Layout.js CHANGED
@@ -18,9 +18,9 @@ const _ViewConfiguration =
18
18
  min-height: 300px;
19
19
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
20
20
  font-size: 15px;
21
- color: #423D37;
22
- background: #FDFCFA;
23
- border: 1px solid #E5DED4;
21
+ color: var(--theme-color-text-primary, #423D37);
22
+ background: var(--theme-color-background-panel, #FDFCFA);
23
+ border: 1px solid var(--theme-color-border-default, #E5DED4);
24
24
  border-radius: 6px;
25
25
  overflow: hidden;
26
26
  }
@@ -28,8 +28,8 @@ const _ViewConfiguration =
28
28
  width: 240px;
29
29
  min-width: 200px;
30
30
  max-width: 300px;
31
- border-right: 1px solid #E5DED4;
32
- background: #F7F5F0;
31
+ border-right: 1px solid var(--theme-color-border-default, #E5DED4);
32
+ background: var(--theme-color-background-secondary, #F7F5F0);
33
33
  overflow-y: auto;
34
34
  flex-shrink: 0;
35
35
  }
@@ -51,7 +51,7 @@ const _ViewConfiguration =
51
51
  min-width: 0;
52
52
  max-width: none;
53
53
  border-right: none;
54
- border-bottom: 1px solid #E5DED4;
54
+ border-bottom: 1px solid var(--theme-color-border-default, #E5DED4);
55
55
  overflow-y: visible;
56
56
  flex-shrink: 0;
57
57
  }
package/source/views/Pict-View-InlineDocumentation-Nav.js CHANGED
@@ -20,17 +20,17 @@ const _ViewConfiguration =
20
20
  align-items: center;
21
21
  padding: 0.5em 0.8em;
22
22
  cursor: pointer;
23
- border-bottom: 1px solid #EAE3D8;
24
- background: #F7F5F0;
23
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
24
+ background: var(--theme-color-background-secondary, #F7F5F0);
25
25
  user-select: none;
26
26
  }
27
27
  .pict-inline-doc-nav-collapsed-header:hover {
28
- background: #EDE8DF;
28
+ background: var(--theme-color-background-tertiary, #EDE8DF);
29
29
  }
30
30
  .pict-inline-doc-nav-chevron {
31
31
  font-size: 0.6em;
32
32
  transition: transform 0.2s ease;
33
- color: #8A7F72;
33
+ color: var(--theme-color-text-muted, #8A7F72);
34
34
  display: inline-flex;
35
35
  align-items: center;
36
36
  margin-right: 0.5em;
@@ -41,7 +41,7 @@ const _ViewConfiguration =
41
41
  .pict-inline-doc-nav-current-title {
42
42
  font-size: 0.9em;
43
43
  font-weight: 500;
44
- color: #3D3229;
44
+ color: var(--theme-color-text-primary, #3D3229);
45
45
  overflow: hidden;
46
46
  text-overflow: ellipsis;
47
47
  white-space: nowrap;
@@ -56,19 +56,19 @@ const _ViewConfiguration =
56
56
  }
57
57
  .pict-inline-doc-nav-filter {
58
58
  padding: 0.3em 0.6em;
59
- border-bottom: 1px solid #EAE3D8;
59
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
60
60
  }
61
61
  .pict-inline-doc-nav-filter input {
62
62
  width: 100%;
63
63
  box-sizing: border-box;
64
64
  padding: 0.3em 0.5em;
65
- border: 1px solid #DDD6CA;
65
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
66
66
  border-radius: 3px;
67
67
  font-size: 0.85em;
68
68
  outline: none;
69
69
  }
70
70
  .pict-inline-doc-nav-filter input:focus {
71
- border-color: #2E7D74;
71
+ border-color: var(--theme-color-brand-primary, #2E7D74);
72
72
  }
73
73
  .pict-inline-doc-nav-group {
74
74
  margin-bottom: 0;
@@ -79,22 +79,30 @@ const _ViewConfiguration =
79
79
  padding: 0.4em 0.8em;
80
80
  font-weight: 600;
81
81
  font-size: 0.7em;
82
- color: #5E5549;
82
+ color: var(--theme-color-text-secondary, #5E5549);
83
83
  text-transform: uppercase;
84
84
  letter-spacing: 0.03em;
85
85
  cursor: pointer;
86
86
  user-select: none;
87
87
  }
88
88
  .pict-inline-doc-nav-group-header:hover {
89
- color: #3D3229;
90
- background: #F0ECE4;
89
+ color: var(--theme-color-text-primary, #3D3229);
90
+ background: var(--theme-color-background-tertiary, #F0ECE4);
91
91
  }
92
92
  .pict-inline-doc-nav-group-toggle {
93
93
  margin-right: 0.35em;
94
- font-size: 0.65em;
95
- transition: transform 0.15s ease;
96
94
  display: inline-flex;
97
95
  align-items: center;
96
+ justify-content: center;
97
+ width: 0.85em;
98
+ height: 0.85em;
99
+ color: currentColor;
100
+ transition: transform 0.15s ease;
101
+ }
102
+ .pict-inline-doc-nav-group-toggle svg {
103
+ width: 100%;
104
+ height: 100%;
105
+ display: block;
98
106
  }
99
107
  .pict-inline-doc-nav-group-toggle.collapsed {
100
108
  transform: rotate(-90deg);
@@ -105,7 +113,7 @@ const _ViewConfiguration =
105
113
  .pict-inline-doc-nav-item {
106
114
  display: block;
107
115
  padding: 0.25em 0.8em 0.25em 1.6em;
108
- color: #5E5549;
116
+ color: var(--theme-color-text-secondary, #5E5549);
109
117
  text-decoration: none;
110
118
  font-size: 0.85em;
111
119
  cursor: pointer;
@@ -113,26 +121,26 @@ const _ViewConfiguration =
113
121
  transition: background 0.1s ease, border-color 0.1s ease;
114
122
  }
115
123
  .pict-inline-doc-nav-item:hover {
116
- background: #EDE8DF;
124
+ background: var(--theme-color-background-tertiary, #EDE8DF);
117
125
  }
118
126
  .pict-inline-doc-nav-item.active {
119
127
  background: #E8E3D8;
120
- color: #2E7D74;
121
- border-left-color: #2E7D74;
128
+ color: var(--theme-color-brand-primary, #2E7D74);
129
+ border-left-color: var(--theme-color-brand-primary, #2E7D74);
122
130
  font-weight: 500;
123
131
  }
124
132
  .pict-inline-doc-nav-heading {
125
133
  display: block;
126
134
  padding: 0.15em 0.8em 0.15em 2.4em;
127
- color: #8A7F72;
135
+ color: var(--theme-color-text-muted, #8A7F72);
128
136
  font-size: 0.78em;
129
137
  cursor: pointer;
130
138
  border-left: 3px solid transparent;
131
139
  transition: background 0.1s ease, color 0.1s ease;
132
140
  }
133
141
  .pict-inline-doc-nav-heading:hover {
134
- background: #EDE8DF;
135
- color: #5E5549;
142
+ background: var(--theme-color-background-tertiary, #EDE8DF);
143
+ color: var(--theme-color-text-secondary, #5E5549);
136
144
  }
137
145
  .pict-inline-doc-nav-heading.h3 {
138
146
  padding-left: 3.2em;
@@ -142,7 +150,7 @@ const _ViewConfiguration =
142
150
  .pict-inline-doc-nav-search-icon {
143
151
  display: inline-flex;
144
152
  align-items: center;
145
- color: #8A7F72;
153
+ color: var(--theme-color-text-muted, #8A7F72);
146
154
  opacity: 0.5;
147
155
  transition: opacity 0.2s;
148
156
  flex-shrink: 0;
@@ -150,17 +158,17 @@ const _ViewConfiguration =
150
158
  }
151
159
  .pict-inline-doc-nav-search-icon:hover {
152
160
  opacity: 1;
153
- color: #2E7D74;
161
+ color: var(--theme-color-brand-primary, #2E7D74);
154
162
  }
155
163
  /* Search results section */
156
164
  .pict-inline-doc-nav-search-results {
157
- border-bottom: 1px solid #EAE3D8;
165
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
158
166
  padding: 0.3em 0;
159
167
  }
160
168
  .pict-inline-doc-nav-search-status {
161
169
  padding: 0.2em 0.8em;
162
170
  font-size: 0.7em;
163
- color: #8A7F72;
171
+ color: var(--theme-color-text-muted, #8A7F72);
164
172
  text-transform: uppercase;
165
173
  letter-spacing: 0.03em;
166
174
  }
@@ -170,13 +178,13 @@ const _ViewConfiguration =
170
178
  padding: 0.25em 0.8em 0.25em 1.2em;
171
179
  cursor: pointer;
172
180
  font-size: 0.82em;
173
- color: #3D3229;
181
+ color: var(--theme-color-text-primary, #3D3229);
174
182
  text-decoration: none;
175
183
  transition: background 0.1s ease;
176
184
  gap: 0.5em;
177
185
  }
178
186
  .pict-inline-doc-nav-search-result:hover {
179
- background: #EDE8DF;
187
+ background: var(--theme-color-background-tertiary, #EDE8DF);
180
188
  }
181
189
  .pict-inline-doc-nav-search-result-title {
182
190
  flex: 1;
@@ -186,15 +194,15 @@ const _ViewConfiguration =
186
194
  }
187
195
  .pict-inline-doc-nav-search-result-group {
188
196
  font-size: 0.75em;
189
- color: #8A7F72;
197
+ color: var(--theme-color-text-muted, #8A7F72);
190
198
  white-space: nowrap;
191
199
  }
192
200
  /* External link indicator */
193
201
  .pict-inline-doc-nav-item-external {
194
- color: #8A7F72;
202
+ color: var(--theme-color-text-muted, #8A7F72);
195
203
  }
196
204
  .pict-inline-doc-nav-item-external:hover {
197
- color: #2E7D74;
205
+ color: var(--theme-color-brand-primary, #2E7D74);
198
206
  }
199
207
  .pict-inline-doc-nav-external-icon {
200
208
  display: inline;
@@ -207,7 +215,7 @@ const _ViewConfiguration =
207
215
  margin: 0.5em 1em;
208
216
  padding: 0.3em 0.7em;
209
217
  background: #2E7D74;
210
- color: #fff;
218
+ color: var(--theme-color-background-panel, #fff);
211
219
  border-radius: 4px;
212
220
  font-size: 0.8em;
213
221
  font-weight: 500;
@@ -225,7 +233,7 @@ const _ViewConfiguration =
225
233
  align-items: center;
226
234
  gap: 0.3em;
227
235
  padding: 0.3em 1em;
228
- border-bottom: 1px solid #EAE3D8;
236
+ border-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);
229
237
  }
230
238
  .pict-inline-doc-nav-toolbar-btn {
231
239
  display: inline-flex;
@@ -233,29 +241,29 @@ const _ViewConfiguration =
233
241
  justify-content: center;
234
242
  width: 28px;
235
243
  height: 28px;
236
- border: 1px solid #DDD6CA;
244
+ border: 1px solid var(--theme-color-border-default, #DDD6CA);
237
245
  border-radius: 3px;
238
- background: #fff;
239
- color: #5E5549;
246
+ background: var(--theme-color-background-panel, #fff);
247
+ color: var(--theme-color-text-secondary, #5E5549);
240
248
  font-size: 0.9em;
241
249
  cursor: pointer;
242
250
  transition: background 0.1s, border-color 0.1s;
243
251
  }
244
252
  .pict-inline-doc-nav-toolbar-btn:hover {
245
- background: #F0ECE4;
246
- border-color: #C4BDB3;
253
+ background: var(--theme-color-background-tertiary, #F0ECE4);
254
+ border-color: var(--theme-color-border-default, #C4BDB3);
247
255
  }
248
256
  .pict-inline-doc-nav-toolbar-btn.accent {
249
- border-color: #2E7D74;
250
- color: #2E7D74;
257
+ border-color: var(--theme-color-brand-primary, #2E7D74);
258
+ color: var(--theme-color-brand-primary, #2E7D74);
251
259
  }
252
260
  .pict-inline-doc-nav-toolbar-btn.accent:hover {
253
261
  background: #F0F9F7;
254
262
  }
255
263
  .pict-inline-doc-nav-toolbar-btn.active {
256
264
  background: #2E7D74;
257
- color: #fff;
258
- border-color: #2E7D74;
265
+ color: var(--theme-color-background-panel, #fff);
266
+ border-color: var(--theme-color-brand-primary, #2E7D74);
259
267
  }
260
268
  .pict-inline-doc-nav-toolbar-btn.active:hover {
261
269
  background: #266D65;
@@ -600,7 +608,11 @@ class InlineDocumentationNavView extends libPictView
600
608
 
601
609
  tmpHTML += '<div class="' + tmpGroupClass + '" data-group="' + this._escapeHTML(tmpGroupKey) + '">';
602
610
  tmpHTML += '<div class="pict-inline-doc-nav-group-header">';
603
- tmpHTML += '<span class="' + tmpToggleClass + '">&#x25BC;</span>';
611
+ tmpHTML += '<span class="' + tmpToggleClass + '" aria-hidden="true">'
612
+ + '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" '
613
+ + 'stroke-linecap="round" stroke-linejoin="round">'
614
+ + '<polyline points="3 6 8 11 13 6"/>'
615
+ + '</svg></span>';
604
616
  tmpHTML += this._escapeHTML(tmpGroup.Name);
605
617
  tmpHTML += '</div>';
606
618
 
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 = '';