@meshmakers/octo-process-diagrams 3.3.940 → 3.3.950

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/_dockview-lcars-theme.scss +140 -143
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meshmakers/octo-process-diagrams",
3
- "version": "3.3.940",
3
+ "version": "3.3.950",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^21.2.0",
6
6
  "@angular/core": "^21.2.0",
package/styles/_dockview-lcars-theme.scss CHANGED
@@ -1,62 +1,57 @@
1
1
  // ============================================================================
2
- // DOCKVIEW LCARS THEME
3
- // Star Trek LCARS-inspired theme for dockview panels
2
+ // DOCKVIEW THEME (formerly LCARS-specific — now neutral with host fallbacks)
4
3
  //
5
4
  // Usage in host application (styles.scss):
6
5
  // @use '@meshmakers/octo-process-diagrams/styles/dockview-lcars-theme' as dockview;
7
6
  // @include dockview.lcars-theme();
8
7
  //
9
- // Or apply directly via CSS variables in your app's styles.
8
+ // The mixin emits --dv-* variables that reference --theme-* host tokens with
9
+ // neutral fallbacks. Hosts that define --theme-* tokens (e.g., octo-mesh-refinery-studio's
10
+ // dark/light theme system) get a fully themed dockview; hosts that don't get a
11
+ // sensible neutral default. The mixin name `lcars-theme` is preserved for
12
+ // backward compatibility; existing `@include dockview.lcars-theme();` calls
13
+ // continue to work.
10
14
  // ============================================================================
11
15
 
12
- // LCARS Color Palette
13
- $octo-mint: #64ceb9 !default;
14
- $neo-cyan: #00a8dc !default;
15
- $royal-violet: #6c4da8 !default;
16
- $iron-navy: #394555 !default;
17
- $deep-sea: #07172b !default;
18
- $surface-elevated: #1f2e40 !default;
19
- $ash-blue: #9292a6 !default;
20
-
21
- // Mixin to apply LCARS theme to dockview
16
+ // Mixin to apply LCARS-style theme to dockview, driven by host --theme-* tokens
22
17
  @mixin lcars-theme() {
23
18
  // Override CSS variables for dockview - target the actual dockview elements
24
19
  mm-process-designer,
25
20
  mm-symbol-editor {
26
21
  // Panel backgrounds
27
- --dv-background-color: #{$deep-sea};
28
- --dv-pane-background-color: #{$surface-elevated};
29
- --dv-group-view-background-color: #{$surface-elevated};
30
- --dv-tabs-and-actions-container-background-color: #{$iron-navy};
31
- --dv-tabs-overflow-dropdown-background-color: #{$iron-navy};
32
- --dv-icon-hover-background-color: rgba($octo-mint, 0.2);
33
- --dv-tab-divider-color: rgba($octo-mint, 0.2);
22
+ --dv-background-color: var(--theme-bg-app, #07172b);
23
+ --dv-pane-background-color: var(--theme-bg-elevated, #1f2e40);
24
+ --dv-group-view-background-color: var(--theme-bg-elevated, #1f2e40);
25
+ --dv-tabs-and-actions-container-background-color: var(--theme-bg-surface, #394555);
26
+ --dv-tabs-overflow-dropdown-background-color: var(--theme-bg-surface, #394555);
27
+ --dv-icon-hover-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 20%, transparent);
28
+ --dv-tab-divider-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
34
29
 
35
30
  // Tab colors - active group
36
- --dv-activegroup-visiblepanel-tab-background-color: #{$surface-elevated};
37
- --dv-activegroup-hiddenpanel-tab-background-color: #{$iron-navy};
38
- --dv-activegroup-visiblepanel-tab-color: #{$octo-mint};
39
- --dv-activegroup-hiddenpanel-tab-color: #{$ash-blue};
31
+ --dv-activegroup-visiblepanel-tab-background-color: var(--theme-bg-elevated, #1f2e40);
32
+ --dv-activegroup-hiddenpanel-tab-background-color: var(--theme-bg-surface, #394555);
33
+ --dv-activegroup-visiblepanel-tab-color: var(--theme-text-accent, #64ceb9);
34
+ --dv-activegroup-hiddenpanel-tab-color: var(--theme-text-secondary, #9292a6);
40
35
 
41
36
  // Tab colors - inactive group
42
- --dv-inactivegroup-visiblepanel-tab-background-color: #{$iron-navy};
43
- --dv-inactivegroup-hiddenpanel-tab-background-color: rgba($iron-navy, 0.7);
44
- --dv-inactivegroup-visiblepanel-tab-color: #{$ash-blue};
45
- --dv-inactivegroup-hiddenpanel-tab-color: rgba($ash-blue, 0.7);
37
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(--theme-bg-surface, #394555);
38
+ --dv-inactivegroup-hiddenpanel-tab-background-color: color-mix(in srgb, var(--theme-bg-surface, #394555) 70%, transparent);
39
+ --dv-inactivegroup-visiblepanel-tab-color: var(--theme-text-secondary, #9292a6);
40
+ --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
46
41
 
47
42
  // Borders and separators
48
- --dv-separator-border: 1px solid rgba($octo-mint, 0.2);
43
+ --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
49
44
 
50
45
  // Tab active indicator
51
- --dv-tab-active-border-bottom: 2px solid #{$octo-mint};
46
+ --dv-tab-active-border-bottom: 2px solid var(--theme-text-accent, #64ceb9);
52
47
 
53
48
  // Drag overlay
54
- --dv-drag-over-background-color: rgba($octo-mint, 0.15);
55
- --dv-drag-over-border-color: #{$octo-mint};
49
+ --dv-drag-over-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
50
+ --dv-drag-over-border-color: var(--octo-mint, #64ceb9);
56
51
 
57
52
  // Sash (resizer)
58
- --dv-sash-color: rgba($octo-mint, 0.2);
59
- --dv-sash-hover-color: #{$octo-mint};
53
+ --dv-sash-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
54
+ --dv-sash-hover-color: var(--octo-mint, #64ceb9);
60
55
  }
61
56
 
62
57
  // Direct style overrides for dockview elements (higher specificity)
@@ -64,44 +59,44 @@ $ash-blue: #9292a6 !default;
64
59
  mm-process-designer .dv-grid-view,
65
60
  mm-symbol-editor .dv-dockview,
66
61
  mm-symbol-editor .dv-grid-view {
67
- background-color: $deep-sea !important;
68
- --dv-background-color: #{$deep-sea};
69
- --dv-pane-background-color: #{$surface-elevated};
70
- --dv-group-view-background-color: #{$surface-elevated};
71
- --dv-tabs-and-actions-container-background-color: #{$iron-navy};
72
- --dv-tabs-overflow-dropdown-background-color: #{$iron-navy};
73
- --dv-icon-hover-background-color: rgba($octo-mint, 0.2);
74
- --dv-tab-divider-color: rgba($octo-mint, 0.2);
75
- --dv-activegroup-visiblepanel-tab-background-color: #{$surface-elevated};
76
- --dv-activegroup-hiddenpanel-tab-background-color: #{$iron-navy};
77
- --dv-activegroup-visiblepanel-tab-color: #{$octo-mint};
78
- --dv-activegroup-hiddenpanel-tab-color: #{$ash-blue};
79
- --dv-inactivegroup-visiblepanel-tab-background-color: #{$iron-navy};
80
- --dv-inactivegroup-hiddenpanel-tab-background-color: rgba($iron-navy, 0.7);
81
- --dv-inactivegroup-visiblepanel-tab-color: #{$ash-blue};
82
- --dv-inactivegroup-hiddenpanel-tab-color: rgba($ash-blue, 0.7);
83
- --dv-separator-border: 1px solid rgba($octo-mint, 0.2);
84
- --dv-sash-color: rgba($octo-mint, 0.2);
85
- --dv-sash-hover-color: #{$octo-mint};
86
- --dv-drag-over-background-color: rgba($octo-mint, 0.15);
87
- --dv-drag-over-border-color: #{$octo-mint};
62
+ background-color: var(--theme-bg-app, #07172b) !important;
63
+ --dv-background-color: var(--theme-bg-app, #07172b);
64
+ --dv-pane-background-color: var(--theme-bg-elevated, #1f2e40);
65
+ --dv-group-view-background-color: var(--theme-bg-elevated, #1f2e40);
66
+ --dv-tabs-and-actions-container-background-color: var(--theme-bg-surface, #394555);
67
+ --dv-tabs-overflow-dropdown-background-color: var(--theme-bg-surface, #394555);
68
+ --dv-icon-hover-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 20%, transparent);
69
+ --dv-tab-divider-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
70
+ --dv-activegroup-visiblepanel-tab-background-color: var(--theme-bg-elevated, #1f2e40);
71
+ --dv-activegroup-hiddenpanel-tab-background-color: var(--theme-bg-surface, #394555);
72
+ --dv-activegroup-visiblepanel-tab-color: var(--theme-text-accent, #64ceb9);
73
+ --dv-activegroup-hiddenpanel-tab-color: var(--theme-text-secondary, #9292a6);
74
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(--theme-bg-surface, #394555);
75
+ --dv-inactivegroup-hiddenpanel-tab-background-color: color-mix(in srgb, var(--theme-bg-surface, #394555) 70%, transparent);
76
+ --dv-inactivegroup-visiblepanel-tab-color: var(--theme-text-secondary, #9292a6);
77
+ --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
78
+ --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
79
+ --dv-sash-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
80
+ --dv-sash-hover-color: var(--octo-mint, #64ceb9);
81
+ --dv-drag-over-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
82
+ --dv-drag-over-border-color: var(--octo-mint, #64ceb9);
88
83
  }
89
84
 
90
85
  // Direct element overrides for tabs and containers
91
86
  mm-process-designer,
92
87
  mm-symbol-editor {
93
88
  .dv-tabs-container {
94
- background-color: $iron-navy !important;
89
+ background-color: var(--theme-bg-surface, #394555) !important;
95
90
  }
96
91
 
97
92
  .dv-tabs-and-actions-container {
98
- background-color: $iron-navy !important;
99
- border-bottom: 1px solid rgba($octo-mint, 0.2) !important;
93
+ background-color: var(--theme-bg-surface, #394555) !important;
94
+ border-bottom: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20)) !important;
100
95
  }
101
96
 
102
97
  .dv-tab {
103
- background-color: $iron-navy !important;
104
- color: $ash-blue !important;
98
+ background-color: var(--theme-bg-surface, #394555) !important;
99
+ color: var(--theme-text-secondary, #9292a6) !important;
105
100
  font-family: "Montserrat", "Roboto", sans-serif;
106
101
  font-weight: 500;
107
102
  text-transform: uppercase;
@@ -110,55 +105,55 @@ $ash-blue: #9292a6 !default;
110
105
  transition: all 0.15s ease;
111
106
 
112
107
  &.dv-active-tab {
113
- background-color: $surface-elevated !important;
114
- color: $octo-mint !important;
115
- border-bottom: 2px solid $octo-mint !important;
108
+ background-color: var(--theme-bg-elevated, #1f2e40) !important;
109
+ color: var(--theme-text-accent, #64ceb9) !important;
110
+ border-bottom: 2px solid var(--theme-text-accent, #64ceb9) !important;
116
111
  }
117
112
 
118
113
  &:hover:not(.dv-active-tab) {
119
- background-color: rgba($octo-mint, 0.15) !important;
120
- color: #ffffff !important;
114
+ background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent) !important;
115
+ color: var(--theme-text-primary, #ffffff) !important;
121
116
  }
122
117
  }
123
118
 
124
119
  .dv-default-tab-action {
125
- color: $ash-blue !important;
120
+ color: var(--theme-text-secondary, #9292a6) !important;
126
121
 
127
122
  &:hover {
128
- color: $octo-mint !important;
123
+ color: var(--theme-text-accent, #64ceb9) !important;
129
124
  }
130
125
  }
131
126
 
132
127
  .dv-groupview {
133
- background-color: $surface-elevated !important;
128
+ background-color: var(--theme-bg-elevated, #1f2e40) !important;
134
129
  }
135
130
 
136
131
  .dv-content-container {
137
- background-color: $surface-elevated !important;
132
+ background-color: var(--theme-bg-elevated, #1f2e40) !important;
138
133
  }
139
134
 
140
135
  .dv-sash {
141
- background-color: rgba($octo-mint, 0.2) !important;
136
+ background-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20)) !important;
142
137
 
143
138
  &:hover,
144
139
  &.dv-active {
145
- background-color: $octo-mint !important;
146
- box-shadow: 0 0 8px rgba($octo-mint, 0.5);
140
+ background-color: var(--octo-mint, #64ceb9) !important;
141
+ box-shadow: 0 0 8px color-mix(in srgb, var(--octo-mint, #64ceb9) 50%, transparent);
147
142
  }
148
143
  }
149
144
 
150
145
  .dv-drop-target-dropzone {
151
- background-color: rgba($octo-mint, 0.15) !important;
152
- border: 2px dashed $octo-mint !important;
146
+ background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent) !important;
147
+ border: 2px dashed var(--octo-mint, #64ceb9) !important;
153
148
  }
154
149
 
155
150
  // Floating overflow dropdown
156
151
  .dv-tabs-overflow-container {
157
- background-color: $iron-navy !important;
158
- border: 1px solid rgba($octo-mint, 0.3) !important;
152
+ background-color: var(--theme-bg-surface, #394555) !important;
153
+ border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent) !important;
159
154
  box-shadow:
160
- 0 4px 20px rgba(0, 0, 0, 0.4),
161
- 0 0 15px rgba($octo-mint, 0.1) !important;
155
+ var(--theme-shadow-popup, 0 4px 20px rgba(0, 0, 0, 0.4)),
156
+ 0 0 15px color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent) !important;
162
157
  }
163
158
  }
164
159
 
@@ -167,31 +162,31 @@ $ash-blue: #9292a6 !default;
167
162
  mm-symbol-editor {
168
163
  // View menu dropdown styling
169
164
  .view-menu-dropdown {
170
- background: $surface-elevated;
171
- border: 1px solid rgba($octo-mint, 0.3);
165
+ background: var(--theme-bg-elevated, #1f2e40);
166
+ border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
172
167
  box-shadow:
173
- 0 4px 20px rgba(0, 0, 0, 0.4),
174
- 0 0 15px rgba($octo-mint, 0.1);
168
+ var(--theme-shadow-popup, 0 4px 20px rgba(0, 0, 0, 0.4)),
169
+ 0 0 15px color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent);
175
170
  }
176
171
 
177
172
  .view-menu-item {
178
- color: #ffffff;
173
+ color: var(--theme-text-primary, #ffffff);
179
174
 
180
175
  &:hover {
181
- background: rgba($octo-mint, 0.15);
176
+ background: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
182
177
  }
183
178
  }
184
179
 
185
180
  .view-menu-check {
186
- color: $octo-mint;
181
+ color: var(--theme-text-accent, #64ceb9);
187
182
  }
188
183
 
189
184
  .view-menu-shortcut {
190
- color: $ash-blue;
185
+ color: var(--theme-text-secondary, #9292a6);
191
186
  }
192
187
 
193
188
  .view-menu-divider {
194
- background: rgba($octo-mint, 0.2);
189
+ background: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
195
190
  }
196
191
  }
197
192
 
@@ -206,7 +201,7 @@ $ash-blue: #9292a6 !default;
206
201
  display: flex;
207
202
  flex-direction: column;
208
203
  height: 100%;
209
- background: $surface-elevated !important;
204
+ background: var(--theme-bg-elevated, #1f2e40) !important;
210
205
 
211
206
  .panel-container,
212
207
  .elements-panel,
@@ -216,53 +211,53 @@ $ash-blue: #9292a6 !default;
216
211
  .exposures-panel,
217
212
  .animations-panel,
218
213
  .simulation-panel {
219
- background: $surface-elevated !important;
220
- color: #ffffff;
214
+ background: var(--theme-bg-elevated, #1f2e40) !important;
215
+ color: var(--theme-text-primary, #ffffff);
221
216
  }
222
217
 
223
218
  .panel-content {
224
- background: $surface-elevated !important;
219
+ background: var(--theme-bg-elevated, #1f2e40) !important;
225
220
  }
226
221
 
227
222
  .no-selection {
228
- color: $ash-blue;
223
+ color: var(--theme-text-secondary, #9292a6);
229
224
  font-family: "Montserrat", "Roboto", sans-serif;
230
225
 
231
226
  .hint {
232
- color: rgba($ash-blue, 0.7);
227
+ color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
233
228
  }
234
229
  }
235
230
 
236
231
  // Section headers
237
232
  .section-header,
238
233
  .panel-section-header {
239
- color: $octo-mint;
234
+ color: var(--theme-text-accent, #64ceb9);
240
235
  font-family: "Montserrat", "Roboto", sans-serif;
241
236
  font-weight: 600;
242
237
  text-transform: uppercase;
243
238
  font-size: 11px;
244
239
  letter-spacing: 0.5px;
245
- border-bottom: 1px solid rgba($octo-mint, 0.2);
240
+ border-bottom: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
246
241
  }
247
242
 
248
243
  // Form inputs
249
244
  input,
250
245
  select,
251
246
  textarea {
252
- background: $deep-sea;
253
- border: 1px solid rgba($octo-mint, 0.3);
254
- color: #ffffff;
247
+ background: var(--theme-bg-input, #07172b);
248
+ border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
249
+ color: var(--theme-text-primary, #ffffff);
255
250
  border-radius: 4px;
256
251
 
257
252
  &:focus {
258
- border-color: $octo-mint;
259
- box-shadow: 0 0 8px rgba($octo-mint, 0.3);
253
+ border-color: var(--octo-mint, #64ceb9);
254
+ box-shadow: 0 0 8px color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
260
255
  outline: none;
261
256
  }
262
257
  }
263
258
 
264
259
  label {
265
- color: $ash-blue;
260
+ color: var(--theme-text-secondary, #9292a6);
266
261
  font-family: "Montserrat", "Roboto", sans-serif;
267
262
  font-size: 11px;
268
263
  text-transform: uppercase;
@@ -273,11 +268,11 @@ $ash-blue: #9292a6 !default;
273
268
  button {
274
269
  background: linear-gradient(
275
270
  180deg,
276
- rgba($octo-mint, 0.15),
277
- rgba($octo-mint, 0.05)
271
+ color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent),
272
+ color-mix(in srgb, var(--octo-mint, #64ceb9) 5%, transparent)
278
273
  );
279
- border: 1px solid rgba($octo-mint, 0.3);
280
- color: $octo-mint;
274
+ border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
275
+ color: var(--theme-text-accent, #64ceb9);
281
276
  border-radius: 4px;
282
277
  font-family: "Montserrat", "Roboto", sans-serif;
283
278
  font-weight: 500;
@@ -289,11 +284,11 @@ $ash-blue: #9292a6 !default;
289
284
  &:hover:not(:disabled) {
290
285
  background: linear-gradient(
291
286
  180deg,
292
- rgba($octo-mint, 0.25),
293
- rgba($octo-mint, 0.15)
287
+ color-mix(in srgb, var(--octo-mint, #64ceb9) 25%, transparent),
288
+ color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent)
294
289
  );
295
- border-color: $octo-mint;
296
- box-shadow: 0 0 10px rgba($octo-mint, 0.3);
290
+ border-color: var(--octo-mint, #64ceb9);
291
+ box-shadow: 0 0 10px color-mix(in srgb, var(--octo-mint, #64ceb9) 30%, transparent);
297
292
  }
298
293
 
299
294
  &:disabled {
@@ -307,44 +302,44 @@ $ash-blue: #9292a6 !default;
307
302
  mm-symbols-panel {
308
303
  .palette-category {
309
304
  background: transparent;
310
- border-bottom: 1px solid rgba($octo-mint, 0.1);
305
+ border-bottom: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent);
311
306
 
312
307
  .category-header {
313
- color: $ash-blue;
308
+ color: var(--theme-text-secondary, #9292a6);
314
309
  font-family: "Montserrat", "Roboto", sans-serif;
315
310
  font-size: 11px;
316
311
  text-transform: uppercase;
317
312
 
318
313
  &:hover {
319
- background: rgba($octo-mint, 0.1);
314
+ background: color-mix(in srgb, var(--octo-mint, #64ceb9) 10%, transparent);
320
315
  }
321
316
  }
322
317
 
323
318
  .category-count {
324
- color: rgba($ash-blue, 0.7);
319
+ color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
325
320
  }
326
321
  }
327
322
 
328
323
  .palette-item {
329
- background: rgba($iron-navy, 0.5);
330
- border: 1px solid rgba($octo-mint, 0.15);
324
+ background: color-mix(in srgb, var(--theme-bg-surface, #394555) 50%, transparent);
325
+ border: 1px solid color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
331
326
  border-radius: 4px;
332
- color: #ffffff;
327
+ color: var(--theme-text-primary, #ffffff);
333
328
  transition: all 0.15s ease;
334
329
 
335
330
  &:hover {
336
- background: rgba($octo-mint, 0.15);
337
- border-color: rgba($octo-mint, 0.4);
338
- box-shadow: 0 2px 8px rgba(#000, 0.2);
331
+ background: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
332
+ border-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 40%, transparent);
333
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
339
334
  }
340
335
 
341
336
  .item-label {
342
- color: $ash-blue;
337
+ color: var(--theme-text-secondary, #9292a6);
343
338
  font-size: 10px;
344
339
  }
345
340
 
346
341
  svg {
347
- stroke: $octo-mint;
342
+ stroke: var(--octo-mint, #64ceb9);
348
343
  fill: none;
349
344
  }
350
345
  }
@@ -352,27 +347,29 @@ $ash-blue: #9292a6 !default;
352
347
  }
353
348
 
354
349
  // CSS-only alternative (can be applied without SCSS)
355
- // Add these CSS variables to your :root or component host
350
+ // Add these CSS variables to your :root or component host. These reference
351
+ // --theme-* host tokens with neutral dark fallbacks, so the result adapts to
352
+ // the host's active theme (or stays dark if no host theme is defined).
356
353
  @mixin lcars-css-variables() {
357
- --dv-background-color: #07172b;
358
- --dv-pane-background-color: #1f2e40;
359
- --dv-group-view-background-color: #1f2e40;
360
- --dv-tabs-and-actions-container-background-color: #394555;
361
- --dv-tabs-overflow-dropdown-background-color: #394555;
362
- --dv-icon-hover-background-color: rgba(100, 206, 185, 0.2);
363
- --dv-tab-divider-color: rgba(100, 206, 185, 0.2);
364
- --dv-activegroup-visiblepanel-tab-background-color: #1f2e40;
365
- --dv-activegroup-hiddenpanel-tab-background-color: #394555;
366
- --dv-activegroup-visiblepanel-tab-color: #64ceb9;
367
- --dv-activegroup-hiddenpanel-tab-color: #9292a6;
368
- --dv-inactivegroup-visiblepanel-tab-background-color: #394555;
369
- --dv-inactivegroup-hiddenpanel-tab-background-color: rgba(57, 69, 85, 0.7);
370
- --dv-inactivegroup-visiblepanel-tab-color: #9292a6;
371
- --dv-inactivegroup-hiddenpanel-tab-color: rgba(146, 146, 166, 0.7);
372
- --dv-separator-border: 1px solid rgba(100, 206, 185, 0.2);
373
- --dv-tab-active-border-bottom: 2px solid #64ceb9;
374
- --dv-drag-over-background-color: rgba(100, 206, 185, 0.15);
375
- --dv-drag-over-border-color: #64ceb9;
376
- --dv-sash-color: rgba(100, 206, 185, 0.2);
377
- --dv-sash-hover-color: #64ceb9;
354
+ --dv-background-color: var(--theme-bg-app, #07172b);
355
+ --dv-pane-background-color: var(--theme-bg-elevated, #1f2e40);
356
+ --dv-group-view-background-color: var(--theme-bg-elevated, #1f2e40);
357
+ --dv-tabs-and-actions-container-background-color: var(--theme-bg-surface, #394555);
358
+ --dv-tabs-overflow-dropdown-background-color: var(--theme-bg-surface, #394555);
359
+ --dv-icon-hover-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 20%, transparent);
360
+ --dv-tab-divider-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
361
+ --dv-activegroup-visiblepanel-tab-background-color: var(--theme-bg-elevated, #1f2e40);
362
+ --dv-activegroup-hiddenpanel-tab-background-color: var(--theme-bg-surface, #394555);
363
+ --dv-activegroup-visiblepanel-tab-color: var(--theme-text-accent, #64ceb9);
364
+ --dv-activegroup-hiddenpanel-tab-color: var(--theme-text-secondary, #9292a6);
365
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(--theme-bg-surface, #394555);
366
+ --dv-inactivegroup-hiddenpanel-tab-background-color: color-mix(in srgb, var(--theme-bg-surface, #394555) 70%, transparent);
367
+ --dv-inactivegroup-visiblepanel-tab-color: var(--theme-text-secondary, #9292a6);
368
+ --dv-inactivegroup-hiddenpanel-tab-color: color-mix(in srgb, var(--theme-text-secondary, #9292a6) 70%, transparent);
369
+ --dv-separator-border: 1px solid var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
370
+ --dv-tab-active-border-bottom: 2px solid var(--theme-text-accent, #64ceb9);
371
+ --dv-drag-over-background-color: color-mix(in srgb, var(--octo-mint, #64ceb9) 15%, transparent);
372
+ --dv-drag-over-border-color: var(--octo-mint, #64ceb9);
373
+ --dv-sash-color: var(--theme-border-subtle, rgba(100, 206, 185, 0.20));
374
+ --dv-sash-hover-color: var(--octo-mint, #64ceb9);
378
375
  }