@meshmakers/octo-ui 3.4.1480 → 3.5.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 (23) hide show
  1. package/README.md +108 -0
  2. package/entity-forms/README.md +462 -0
  3. package/fesm2022/meshmakers-octo-ui-branding-settings.mjs +2 -2
  4. package/fesm2022/meshmakers-octo-ui-branding-settings.mjs.map +1 -1
  5. package/fesm2022/meshmakers-octo-ui-entity-forms.mjs +7944 -0
  6. package/fesm2022/meshmakers-octo-ui-entity-forms.mjs.map +1 -0
  7. package/fesm2022/meshmakers-octo-ui-tree-navigation-settings.mjs +2 -2
  8. package/fesm2022/meshmakers-octo-ui-tree-navigation-settings.mjs.map +1 -1
  9. package/fesm2022/meshmakers-octo-ui.mjs +985 -402
  10. package/fesm2022/meshmakers-octo-ui.mjs.map +1 -1
  11. package/lib/runtime-browser/styles/_button.scss +123 -0
  12. package/lib/runtime-browser/styles/_field-input.scss +16 -0
  13. package/lib/runtime-browser/styles/_flat-button.scss +14 -0
  14. package/lib/runtime-browser/styles/_index.scss +1 -1
  15. package/lib/runtime-browser/styles/_styles.scss +781 -1407
  16. package/lib/runtime-browser/styles/_theme.scss +248 -288
  17. package/lib/runtime-browser/styles/_variables.scss +26 -41
  18. package/package.json +5 -1
  19. package/types/meshmakers-octo-ui-entity-forms.d.ts +2648 -0
  20. package/types/meshmakers-octo-ui.d.ts +197 -4
  21. package/lib/runtime-browser/styles/_lcars-button.scss +0 -57
  22. package/lib/runtime-browser/styles/_lcars-flat-btn.scss +0 -11
  23. package/lib/runtime-browser/styles/_lcars-input.scss +0 -13
package/lib/runtime-browser/styles/_styles.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @use "sass:color";
2
2
  @use "variables" as *;
3
- @use "lcars-flat-btn" as *;
4
- @use "lcars-input" as *;
5
- @use "lcars-button" as *;
3
+ @use "flat-button" as *;
4
+ @use "field-input" as *;
5
+ @use "button" as *;
6
6
 
7
7
  @mixin styles {
8
8
  // Direct dockview element overrides - needed because ViewEncapsulation blocks global styles
@@ -14,30 +14,31 @@
14
14
 
15
15
  .dv-tabs-container,
16
16
  .dv-tabs-and-actions-container {
17
- background-color: var(--iron-navy) !important;
18
- border-bottom: 1px solid var(--octo-mint-20) !important;
17
+ background-color: var(--theme-bg-elevated, var(--iron-navy));
18
+ border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
19
19
  }
20
20
 
21
+ // Dockview tabs: sentence case in the UI face, accent underline when active.
22
+ // Dockview sets its own tab colours inline via --dv-* variables, so the
23
+ // background/colour declarations still need !important to win.
21
24
  .dv-tab {
22
- background-color: var(--iron-navy) !important;
23
- color: var(--ash-blue) !important;
24
- font-family: "Montserrat", "Roboto", sans-serif !important;
25
- font-weight: 500 !important;
26
- text-transform: uppercase !important;
27
- font-size: 11px !important;
28
- letter-spacing: 0.5px !important;
29
- transition: all 0.15s ease !important;
30
- border: none !important;
25
+ background-color: transparent !important;
26
+ color: var(--theme-text-secondary, var(--ash-blue)) !important;
27
+ font-family: var(--theme-font-ui, "Roboto", sans-serif);
28
+ font-weight: 500;
29
+ font-size: 0.75rem;
30
+ transition: background-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease), color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease);
31
+ border: none;
31
32
 
32
33
  &.dv-active-tab {
33
- background-color: var(--surface-elevated) !important;
34
- color: var(--octo-mint) !important;
35
- border-bottom: 2px solid var(--octo-mint) !important;
34
+ background-color: var(--theme-bg-surface, var(--surface-elevated)) !important;
35
+ color: var(--theme-text-primary, var(--octo-text-color)) !important;
36
+ box-shadow: inset 0 -2px 0 var(--theme-accent, var(--octo-mint));
36
37
  }
37
38
 
38
39
  &:hover:not(.dv-active-tab) {
39
- background-color: var(--octo-mint-15) !important;
40
- color: var(--octo-text-color) !important;
40
+ background-color: var(--theme-bg-hover, var(--octo-mint-15)) !important;
41
+ color: var(--theme-text-primary, var(--octo-text-color)) !important;
41
42
  }
42
43
  }
43
44
 
@@ -45,7 +46,7 @@
45
46
  color: var(--ash-blue) !important;
46
47
 
47
48
  &:hover {
48
- color: var(--octo-mint) !important;
49
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
49
50
  background-color: var(--octo-mint-20) !important;
50
51
  }
51
52
  }
@@ -60,17 +61,15 @@
60
61
 
61
62
  &:hover,
62
63
  &.dv-active {
63
- background-color: var(--octo-mint) !important;
64
- box-shadow: 0 0 8px var(--octo-mint-50);
64
+ background-color: var(--theme-text-accent, var(--octo-mint)) !important;
65
+ box-shadow: none;
65
66
  }
66
67
  }
67
68
 
68
69
  .dv-tabs-overflow-container {
69
70
  background-color: var(--iron-navy) !important;
70
- border: 1px solid var(--octo-mint-30) !important;
71
- box-shadow:
72
- 0 4px 20px rgba(0, 0, 0, 0.4),
73
- 0 0 15px var(--octo-mint-10) !important;
71
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
72
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
74
73
  }
75
74
 
76
75
  // Dockview panel content areas
@@ -90,7 +89,7 @@
90
89
  color: var(--octo-text-color) !important;
91
90
  }
92
91
 
93
- // Styles Panel LCARS theming (overrides library defaults)
92
+ // Styles Panel theming (overrides library defaults)
94
93
  // Use ::ng-deep to penetrate Angular's ViewEncapsulation
95
94
  ::ng-deep mm-styles-panel {
96
95
  .panel-container {
@@ -100,7 +99,7 @@
100
99
  }
101
100
 
102
101
  .panel-toolbar {
103
- border-bottom-color: var(--octo-mint-20) !important;
102
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
104
103
  flex-shrink: 0 !important;
105
104
  }
106
105
 
@@ -118,28 +117,28 @@
118
117
 
119
118
  .add-button {
120
119
  background: var(--iron-navy) !important;
121
- border-color: var(--octo-mint-30) !important;
120
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
122
121
  color: var(--ash-blue) !important;
123
122
 
124
123
  &:hover {
125
124
  background: var(--octo-mint-15) !important;
126
- border-color: var(--octo-mint) !important;
127
- color: var(--octo-mint) !important;
125
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
126
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
128
127
  }
129
128
  }
130
129
 
131
130
  .style-item {
132
131
  background: var(--surface-elevated) !important;
133
- border-color: var(--octo-mint-20) !important;
132
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
134
133
 
135
134
  &:hover {
136
135
  background: var(--iron-navy) !important;
137
- border-color: var(--octo-mint) !important;
136
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
138
137
  }
139
138
 
140
139
  &.selected {
141
140
  background: var(--octo-mint-15) !important;
142
- border-color: var(--octo-mint) !important;
141
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
143
142
  }
144
143
  }
145
144
 
@@ -162,7 +161,7 @@
162
161
 
163
162
  .style-editor {
164
163
  background: var(--iron-navy) !important;
165
- border-top-color: var(--octo-mint-20) !important;
164
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
166
165
  }
167
166
 
168
167
  .editor-section h4 {
@@ -175,19 +174,19 @@
175
174
  }
176
175
  input[type="text"],
177
176
  input[type="number"] {
178
- @include lcars-input;
177
+ @include field-input;
179
178
  }
180
179
  input[type="color"] {
181
- border-color: var(--octo-mint-30) !important;
180
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
182
181
  }
183
182
  }
184
183
  .line-type-select {
185
- @include lcars-input;
184
+ @include field-input;
186
185
  }
187
186
 
188
187
  .line-preview {
189
188
  background: var(--deep-sea) !important;
190
- border-color: var(--octo-mint-30) !important;
189
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
191
190
  }
192
191
 
193
192
  .opacity-value {
@@ -196,7 +195,7 @@
196
195
 
197
196
  .panel-footer {
198
197
  background: var(--iron-navy) !important;
199
- border-top-color: var(--octo-mint-20) !important;
198
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
200
199
 
201
200
  .hint {
202
201
  color: var(--ash-blue-70) !important;
@@ -210,7 +209,7 @@
210
209
  background: var(--surface-elevated) !important;
211
210
 
212
211
  .palette-search input {
213
- @include lcars-input;
212
+ @include field-input;
214
213
  &::placeholder {
215
214
  color: var(--ash-blue) !important;
216
215
  }
@@ -222,15 +221,13 @@
222
221
 
223
222
  .palette-category {
224
223
  background: transparent !important;
225
- border-bottom: 1px solid var(--octo-mint-10) !important;
224
+ border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-10)) !important;
226
225
 
227
226
  .category-header {
228
227
  background: var(--iron-navy-50) !important;
229
228
  color: var(--ash-blue) !important;
230
- font-family: "Montserrat", "Roboto", sans-serif !important;
229
+ font-family: var(--theme-font-ui, "Roboto", sans-serif) !important;
231
230
  font-size: 11px !important;
232
- text-transform: uppercase !important;
233
- letter-spacing: 0.5px !important;
234
231
  padding: 8px 12px !important;
235
232
  cursor: pointer;
236
233
  transition: all 0.15s ease;
@@ -261,7 +258,7 @@
261
258
 
262
259
  .palette-element {
263
260
  background: var(--iron-navy-50) !important;
264
- border: 1px solid var(--octo-mint-15) !important;
261
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15)) !important;
265
262
  border-radius: 4px !important;
266
263
  color: var(--octo-text-color) !important;
267
264
  transition: all 0.15s ease !important;
@@ -275,7 +272,7 @@
275
272
 
276
273
  .element-preview {
277
274
  svg {
278
- stroke: var(--octo-mint) !important;
275
+ stroke: var(--theme-text-accent, var(--octo-mint)) !important;
279
276
  fill: none !important;
280
277
  }
281
278
  }
@@ -283,7 +280,6 @@
283
280
  .element-label {
284
281
  color: var(--ash-blue) !important;
285
282
  font-size: 10px !important;
286
- text-transform: uppercase !important;
287
283
  }
288
284
  }
289
285
  }
@@ -300,7 +296,7 @@
300
296
  .no-selection,
301
297
  .multi-selection {
302
298
  color: var(--ash-blue) !important;
303
- font-family: "Montserrat", "Roboto", sans-serif !important;
299
+ font-family: var(--theme-font-ui, "Roboto", sans-serif) !important;
304
300
 
305
301
  .hint {
306
302
  color: var(--ash-blue-70) !important;
@@ -309,9 +305,9 @@
309
305
 
310
306
  // Section headers
311
307
  .section-header {
312
- color: var(--octo-mint) !important;
313
- border-bottom-color: var(--octo-mint-20) !important;
314
- font-family: "Montserrat", "Roboto", sans-serif !important;
308
+ color: var(--theme-text-primary, var(--octo-text-color)) !important;
309
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
310
+ font-family: var(--theme-font-ui, "Roboto", sans-serif) !important;
315
311
  }
316
312
 
317
313
  // Labels
@@ -325,7 +321,7 @@
325
321
  .property-row select,
326
322
  .style-class-select,
327
323
  .line-type-select {
328
- @include lcars-input;
324
+ @include field-input;
329
325
  }
330
326
 
331
327
  .property-row select option,
@@ -337,21 +333,21 @@
337
333
 
338
334
  // Checkboxes
339
335
  .property-row input[type="checkbox"] {
340
- accent-color: var(--octo-mint) !important;
336
+ accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
341
337
  }
342
338
 
343
339
  // Color inputs
344
340
  .property-row input[type="color"] {
345
341
  background: var(--deep-sea) !important;
346
- border: 1px solid var(--octo-mint-30) !important;
342
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
347
343
  border-radius: 4px !important;
348
344
  }
349
345
 
350
346
  // Type badge
351
347
  .type-badge {
352
348
  background: var(--octo-mint-15) !important;
353
- color: var(--octo-mint) !important;
354
- border: 1px solid var(--octo-mint-30) !important;
349
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
350
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
355
351
  }
356
352
 
357
353
  // Opacity value text
@@ -367,51 +363,39 @@
367
363
  // Line preview
368
364
  .line-preview {
369
365
  background: var(--iron-navy) !important;
370
- border-color: var(--octo-mint-20) !important;
366
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
371
367
  }
372
368
 
373
369
  // Opacity slider
374
370
  .opacity-slider {
375
- background: linear-gradient(
376
- to right,
377
- transparent,
378
- var(--octo-mint)
379
- ) !important;
371
+ background: var(--theme-border-default, var(--octo-mint-20)) !important;
380
372
 
381
373
  &::-webkit-slider-thumb {
382
- background: var(--octo-mint) !important;
383
- border-color: var(--surface-elevated) !important;
374
+ background: var(--theme-accent, var(--octo-mint)) !important;
375
+ border-color: var(--theme-bg-surface, var(--surface-elevated)) !important;
384
376
  }
385
377
 
386
378
  &::-moz-range-thumb {
387
- background: var(--octo-mint) !important;
388
- border-color: var(--surface-elevated) !important;
379
+ background: var(--theme-accent, var(--octo-mint)) !important;
380
+ border-color: var(--theme-bg-surface, var(--surface-elevated)) !important;
389
381
  }
390
382
  }
391
383
 
392
384
  // Image preview container
393
385
  .image-preview-container {
394
386
  background: var(--iron-navy) !important;
395
- border-color: var(--octo-mint-20) !important;
387
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
396
388
  }
397
389
 
398
390
  // File upload button
399
391
  .file-upload-button {
400
- background: linear-gradient(
401
- 180deg,
402
- var(--octo-mint-15),
403
- var(--octo-mint-05)
404
- ) !important;
405
- border: 1px solid var(--octo-mint-30) !important;
406
- color: var(--octo-mint) !important;
392
+ background: transparent !important;
393
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
394
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
407
395
 
408
396
  &:hover {
409
- background: linear-gradient(
410
- 180deg,
411
- var(--octo-mint-25),
412
- var(--octo-mint-15)
413
- ) !important;
414
- border-color: var(--octo-mint) !important;
397
+ background: var(--theme-bg-hover) !important;
398
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
415
399
  }
416
400
  }
417
401
 
@@ -439,7 +423,7 @@
439
423
 
440
424
  .editor-toolbar {
441
425
  background: var(--iron-navy) !important;
442
- border-bottom: 1px solid var(--octo-mint-20) !important;
426
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
443
427
  }
444
428
 
445
429
  .section-content {
@@ -450,21 +434,13 @@
450
434
  color: var(--ash-blue) !important;
451
435
 
452
436
  button {
453
- background: linear-gradient(
454
- 180deg,
455
- var(--octo-mint-15),
456
- var(--octo-mint-05)
457
- ) !important;
458
- border: 1px solid var(--octo-mint-30) !important;
459
- color: var(--octo-mint) !important;
437
+ background: transparent !important;
438
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
439
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
460
440
 
461
441
  &:hover {
462
- background: linear-gradient(
463
- 180deg,
464
- var(--octo-mint-25),
465
- var(--octo-mint-15)
466
- ) !important;
467
- border-color: var(--octo-mint) !important;
442
+ background: var(--theme-bg-hover) !important;
443
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
468
444
  }
469
445
  }
470
446
  }
@@ -472,14 +448,14 @@
472
448
  // Animation items
473
449
  .animation-item {
474
450
  background: var(--iron-navy-50) !important;
475
- border-color: var(--octo-mint-15) !important;
451
+ border-color: var(--theme-border-subtle, var(--octo-mint-15)) !important;
476
452
 
477
453
  &:hover {
478
454
  background: var(--iron-navy-70) !important;
479
455
  }
480
456
 
481
457
  &.expanded {
482
- border-color: var(--octo-mint-30) !important;
458
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
483
459
  }
484
460
  }
485
461
 
@@ -505,7 +481,7 @@
505
481
  color: var(--ash-blue) !important;
506
482
 
507
483
  &:hover {
508
- color: var(--octo-mint) !important;
484
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
509
485
  background: var(--octo-mint-10) !important;
510
486
  }
511
487
 
@@ -525,7 +501,7 @@
525
501
  // Edit form
526
502
  .item-edit-form {
527
503
  background: var(--iron-navy) !important;
528
- border-top-color: var(--octo-mint-20) !important;
504
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
529
505
  }
530
506
 
531
507
  .form-row label {
@@ -537,7 +513,7 @@
537
513
  }
538
514
 
539
515
  .hint-text {
540
- color: var(--octo-mint) !important;
516
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
541
517
  }
542
518
 
543
519
  .input-with-unit .unit {
@@ -547,14 +523,14 @@
547
523
  // Anchor grid
548
524
  .anchor-point {
549
525
  background: var(--deep-sea) !important;
550
- border-color: var(--octo-mint-30) !important;
526
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
551
527
 
552
528
  &:hover {
553
- border-color: var(--octo-mint) !important;
529
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
554
530
  }
555
531
 
556
532
  &.selected {
557
- border-color: var(--octo-mint) !important;
533
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
558
534
  background: var(--octo-mint-20) !important;
559
535
  }
560
536
  }
@@ -570,12 +546,12 @@
570
546
  // Preset picker
571
547
  .preset-picker {
572
548
  background: var(--surface-elevated) !important;
573
- border-color: var(--octo-mint) !important;
549
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
574
550
  }
575
551
 
576
552
  .preset-header {
577
553
  background: var(--octo-mint-15) !important;
578
- border-bottom-color: var(--octo-mint-30) !important;
554
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-30)) !important;
579
555
  color: var(--octo-text-color) !important;
580
556
  }
581
557
 
@@ -585,11 +561,11 @@
585
561
 
586
562
  .preset-button {
587
563
  background: var(--deep-sea) !important;
588
- border-color: var(--octo-mint-30) !important;
564
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
589
565
  color: var(--octo-text-color) !important;
590
566
 
591
567
  &:hover {
592
- border-color: var(--octo-mint) !important;
568
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
593
569
  background: var(--octo-mint-15) !important;
594
570
  }
595
571
  }
@@ -597,11 +573,11 @@
597
573
  // Path textarea
598
574
  .path-textarea {
599
575
  background: var(--deep-sea) !important;
600
- border-color: var(--octo-mint-30) !important;
576
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
601
577
  color: var(--octo-text-color) !important;
602
578
 
603
579
  &:focus {
604
- border-color: var(--octo-mint) !important;
580
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
605
581
  outline: none !important;
606
582
  }
607
583
  }
@@ -613,7 +589,7 @@
613
589
 
614
590
  .editor-toolbar {
615
591
  background: var(--iron-navy) !important;
616
- border-bottom: 1px solid var(--octo-mint-20) !important;
592
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
617
593
  }
618
594
 
619
595
  .properties-list {
@@ -631,7 +607,7 @@
631
607
  // Property cards
632
608
  .property-card {
633
609
  background: var(--iron-navy) !important;
634
- border: 1px solid var(--octo-mint-20) !important;
610
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
635
611
  border-radius: 8px !important;
636
612
 
637
613
  &:hover {
@@ -639,7 +615,7 @@
639
615
  }
640
616
 
641
617
  &.editing {
642
- border-color: var(--octo-mint) !important;
618
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
643
619
  box-shadow: 0 2px 8px var(--octo-mint-20) !important;
644
620
  }
645
621
  }
@@ -650,7 +626,7 @@
650
626
 
651
627
  .property-type-badge {
652
628
  background: var(--octo-mint-15) !important;
653
- color: var(--octo-mint) !important;
629
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
654
630
  }
655
631
 
656
632
  .property-unit {
@@ -671,7 +647,7 @@
671
647
  }
672
648
 
673
649
  .color-swatch {
674
- border-color: var(--octo-mint-30) !important;
650
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
675
651
  }
676
652
 
677
653
  // Edit form
@@ -686,12 +662,12 @@
686
662
  .form-row input[type="number"],
687
663
  .form-row select {
688
664
  background: var(--deep-sea) !important;
689
- border: 1px solid var(--octo-mint-30) !important;
665
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
690
666
  color: var(--octo-text-color) !important;
691
667
 
692
668
  &:focus {
693
- border-color: var(--octo-mint) !important;
694
- box-shadow: var(--lcars-input-focus) !important;
669
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
670
+ box-shadow: var(--theme-focus-ring) !important;
695
671
  outline: none !important;
696
672
  }
697
673
 
@@ -703,15 +679,15 @@
703
679
 
704
680
  .form-row input[type="color"] {
705
681
  background: var(--deep-sea) !important;
706
- border: 1px solid var(--octo-mint-30) !important;
682
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
707
683
  }
708
684
 
709
685
  .form-row input[type="checkbox"] {
710
- accent-color: var(--octo-mint) !important;
686
+ accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
711
687
  }
712
688
 
713
689
  .form-actions {
714
- border-top-color: var(--octo-mint-20) !important;
690
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
715
691
  }
716
692
  }
717
693
  }
@@ -722,13 +698,13 @@
722
698
 
723
699
  .panel-toolbar {
724
700
  background: var(--iron-navy) !important;
725
- border-bottom: 1px solid var(--octo-mint-20) !important;
701
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
726
702
 
727
703
  .k-button {
728
704
  color: var(--ash-blue) !important;
729
705
 
730
706
  &:hover {
731
- color: var(--octo-mint) !important;
707
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
732
708
  background: var(--octo-mint-10) !important;
733
709
  }
734
710
  }
@@ -741,7 +717,7 @@
741
717
  // Property control cards
742
718
  .property-control {
743
719
  background: var(--iron-navy) !important;
744
- border: 1px solid var(--octo-mint-20) !important;
720
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
745
721
 
746
722
  &:hover {
747
723
  border-color: var(--octo-mint-40) !important;
@@ -761,33 +737,29 @@
761
737
  // Number control (slider + input)
762
738
  .number-control {
763
739
  .value-slider {
764
- background: linear-gradient(
765
- to right,
766
- var(--octo-mint-20),
767
- var(--octo-mint)
768
- ) !important;
740
+ background: var(--theme-border-default, var(--octo-mint-20)) !important;
769
741
 
770
742
  &::-webkit-slider-thumb {
771
- background: var(--octo-mint) !important;
772
- border-color: var(--deep-sea) !important;
773
- box-shadow: 0 0 8px var(--octo-mint-50) !important;
743
+ background: var(--theme-accent, var(--octo-mint)) !important;
744
+ border-color: var(--theme-bg-app, var(--deep-sea)) !important;
745
+ box-shadow: none !important;
774
746
  }
775
747
 
776
748
  &::-moz-range-thumb {
777
- background: var(--octo-mint) !important;
778
- border-color: var(--deep-sea) !important;
779
- box-shadow: 0 0 8px var(--octo-mint-50) !important;
749
+ background: var(--theme-accent, var(--octo-mint)) !important;
750
+ border-color: var(--theme-bg-app, var(--deep-sea)) !important;
751
+ box-shadow: none !important;
780
752
  }
781
753
  }
782
754
 
783
755
  .value-input {
784
756
  background: var(--deep-sea) !important;
785
- border: 1px solid var(--octo-mint-30) !important;
757
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
786
758
  color: var(--octo-text-color) !important;
787
759
 
788
760
  &:focus {
789
- border-color: var(--octo-mint) !important;
790
- box-shadow: var(--lcars-input-focus) !important;
761
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
762
+ box-shadow: var(--theme-focus-ring) !important;
791
763
  }
792
764
  }
793
765
  }
@@ -799,16 +771,16 @@
799
771
  // Color control
800
772
  .color-control {
801
773
  input[type="color"] {
802
- border-color: var(--octo-mint-30) !important;
774
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
803
775
  }
804
776
 
805
777
  .color-input {
806
778
  background: var(--deep-sea) !important;
807
- border: 1px solid var(--octo-mint-30) !important;
808
- color: var(--octo-mint) !important;
779
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
780
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
809
781
 
810
782
  &:focus {
811
- border-color: var(--octo-mint) !important;
783
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
812
784
  }
813
785
  }
814
786
  }
@@ -816,7 +788,7 @@
816
788
  // Boolean control
817
789
  .boolean-control {
818
790
  .toggle-label input[type="checkbox"] {
819
- accent-color: var(--octo-mint) !important;
791
+ accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
820
792
  }
821
793
 
822
794
  .toggle-text {
@@ -827,12 +799,12 @@
827
799
  // String control
828
800
  .string-control input {
829
801
  background: var(--deep-sea) !important;
830
- border: 1px solid var(--octo-mint-30) !important;
802
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
831
803
  color: var(--octo-text-color) !important;
832
804
 
833
805
  &:focus {
834
- border-color: var(--octo-mint) !important;
835
- box-shadow: var(--lcars-input-focus) !important;
806
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
807
+ box-shadow: var(--theme-focus-ring) !important;
836
808
  }
837
809
  }
838
810
 
@@ -842,7 +814,7 @@
842
814
  color: var(--ash-blue) !important;
843
815
 
844
816
  &:hover {
845
- color: var(--octo-mint) !important;
817
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
846
818
  background: var(--octo-mint-10) !important;
847
819
  }
848
820
  }
@@ -855,10 +827,10 @@
855
827
  background: var(--surface-elevated) !important;
856
828
 
857
829
  .settings-section {
858
- border-bottom-color: var(--octo-mint-20) !important;
830
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
859
831
 
860
832
  h4 {
861
- color: var(--octo-mint) !important;
833
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
862
834
  }
863
835
  }
864
836
 
@@ -870,7 +842,7 @@
870
842
  input,
871
843
  textarea {
872
844
  background: var(--deep-sea) !important;
873
- border: 1px solid var(--octo-mint-30) !important;
845
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
874
846
  color: var(--octo-text-color) !important;
875
847
 
876
848
  &::placeholder {
@@ -878,8 +850,8 @@
878
850
  }
879
851
 
880
852
  &:focus {
881
- border-color: var(--octo-mint) !important;
882
- box-shadow: var(--lcars-input-focus) !important;
853
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
854
+ box-shadow: var(--theme-focus-ring) !important;
883
855
  }
884
856
  }
885
857
 
@@ -887,7 +859,7 @@
887
859
  .k-textbox,
888
860
  .k-input {
889
861
  background: var(--deep-sea) !important;
890
- border-color: var(--octo-mint-30) !important;
862
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
891
863
  color: var(--octo-text-color) !important;
892
864
  }
893
865
 
@@ -895,7 +867,7 @@
895
867
  .k-numerictextbox,
896
868
  kendo-numerictextbox {
897
869
  background: var(--deep-sea) !important;
898
- border-color: var(--octo-mint-30) !important;
870
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
899
871
 
900
872
  .k-input-inner {
901
873
  background: transparent !important;
@@ -906,8 +878,8 @@
906
878
  .k-spinner-increase,
907
879
  .k-spinner-decrease {
908
880
  background: var(--octo-mint-10) !important;
909
- border-color: var(--octo-mint-30) !important;
910
- color: var(--octo-mint) !important;
881
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
882
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
911
883
 
912
884
  &:hover {
913
885
  background: var(--octo-mint-20) !important;
@@ -919,7 +891,7 @@
919
891
  .k-textarea,
920
892
  kendo-textarea {
921
893
  background: var(--deep-sea) !important;
922
- border-color: var(--octo-mint-30) !important;
894
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
923
895
 
924
896
  textarea {
925
897
  background: transparent !important;
@@ -934,11 +906,11 @@
934
906
  background: var(--surface-elevated) !important;
935
907
 
936
908
  .panel-search {
937
- border-bottom: 1px solid var(--octo-mint-20) !important;
909
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
938
910
 
939
911
  input {
940
912
  background: var(--deep-sea) !important;
941
- border: 1px solid var(--octo-mint-30) !important;
913
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
942
914
  color: var(--octo-text-color) !important;
943
915
 
944
916
  &::placeholder {
@@ -946,8 +918,8 @@
946
918
  }
947
919
 
948
920
  &:focus {
949
- border-color: var(--octo-mint) !important;
950
- box-shadow: var(--lcars-input-focus) !important;
921
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
922
+ box-shadow: var(--theme-focus-ring) !important;
951
923
  }
952
924
  }
953
925
  }
@@ -962,8 +934,8 @@
962
934
  }
963
935
 
964
936
  .loading-spinner {
965
- border-color: var(--octo-mint-20) !important;
966
- border-top-color: var(--octo-mint) !important;
937
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
938
+ border-top-color: var(--theme-text-accent, var(--octo-mint)) !important;
967
939
  }
968
940
 
969
941
  // Error state
@@ -993,7 +965,7 @@
993
965
 
994
966
  .library-header {
995
967
  background: var(--iron-navy) !important;
996
- border: 1px solid var(--octo-mint-20) !important;
968
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
997
969
 
998
970
  &:hover {
999
971
  background: var(--octo-mint-10) !important;
@@ -1002,7 +974,7 @@
1002
974
  }
1003
975
 
1004
976
  .expand-icon {
1005
- color: var(--octo-mint) !important;
977
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1006
978
  }
1007
979
 
1008
980
  .library-name {
@@ -1020,18 +992,18 @@
1020
992
 
1021
993
  .symbol-item {
1022
994
  background: var(--iron-navy) !important;
1023
- border: 1px solid var(--octo-mint-20) !important;
995
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
1024
996
 
1025
997
  &:hover {
1026
- border-color: var(--octo-mint) !important;
1027
- box-shadow: 0 0 12px var(--octo-mint-30) !important;
998
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
999
+ box-shadow: none !important;
1028
1000
  }
1029
1001
  }
1030
1002
 
1031
1003
  .symbol-preview {
1032
1004
  // Use a lighter background so dark symbols remain visible
1033
1005
  background: #4a5568 !important;
1034
- border: 1px solid var(--octo-mint-15) !important;
1006
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15)) !important;
1035
1007
  }
1036
1008
 
1037
1009
  .symbol-label {
@@ -1050,7 +1022,7 @@
1050
1022
  background: var(--surface-elevated) !important;
1051
1023
 
1052
1024
  .list-header {
1053
- border-bottom-color: var(--octo-mint-20) !important;
1025
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
1054
1026
  color: var(--octo-text-color) !important;
1055
1027
  }
1056
1028
 
@@ -1066,10 +1038,10 @@
1066
1038
  // Binding cards
1067
1039
  .binding-card {
1068
1040
  background: var(--iron-navy) !important;
1069
- border: 1px solid var(--octo-mint-20) !important;
1041
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
1070
1042
 
1071
1043
  &.expanded {
1072
- border-color: var(--octo-mint) !important;
1044
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
1073
1045
  }
1074
1046
  }
1075
1047
 
@@ -1087,12 +1059,12 @@
1087
1059
 
1088
1060
  .effect-badge {
1089
1061
  background: var(--octo-mint-15) !important;
1090
- color: var(--octo-mint) !important;
1062
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1091
1063
  }
1092
1064
 
1093
1065
  // Binding form
1094
1066
  .binding-form {
1095
- border-top-color: var(--octo-mint-20) !important;
1067
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
1096
1068
  background: var(--surface-elevated) !important;
1097
1069
 
1098
1070
  .form-row label {
@@ -1103,12 +1075,12 @@
1103
1075
  .form-row input[type="text"],
1104
1076
  .form-row input[type="number"] {
1105
1077
  background: var(--deep-sea) !important;
1106
- border: 1px solid var(--octo-mint-30) !important;
1078
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
1107
1079
  color: var(--octo-text-color) !important;
1108
1080
 
1109
1081
  &:focus {
1110
- border-color: var(--octo-mint) !important;
1111
- box-shadow: var(--lcars-input-focus) !important;
1082
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
1083
+ box-shadow: var(--theme-focus-ring) !important;
1112
1084
  outline: none !important;
1113
1085
  }
1114
1086
 
@@ -1126,7 +1098,7 @@
1126
1098
 
1127
1099
  code {
1128
1100
  background: var(--deep-sea) !important;
1129
- color: var(--octo-mint) !important;
1101
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1130
1102
  }
1131
1103
  }
1132
1104
 
@@ -1146,12 +1118,12 @@
1146
1118
 
1147
1119
  .preview-input input[type="number"] {
1148
1120
  background: var(--deep-sea) !important;
1149
- border: 1px solid var(--octo-mint-30) !important;
1121
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
1150
1122
  color: var(--octo-text-color) !important;
1151
1123
  }
1152
1124
 
1153
1125
  .preview-input input[type="checkbox"] {
1154
- accent-color: var(--octo-mint) !important;
1126
+ accent-color: var(--theme-text-accent, var(--octo-mint)) !important;
1155
1127
  }
1156
1128
 
1157
1129
  .boolean-label {
@@ -1163,7 +1135,7 @@
1163
1135
  }
1164
1136
 
1165
1137
  .preview-output .output-value {
1166
- color: var(--octo-mint) !important;
1138
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1167
1139
  }
1168
1140
 
1169
1141
  .preview-output.error .output-value {
@@ -1220,13 +1192,13 @@
1220
1192
  kendo-textbox input,
1221
1193
  kendo-numerictextbox input {
1222
1194
  background: var(--deep-sea) !important;
1223
- border-color: var(--octo-mint-30) !important;
1195
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
1224
1196
  color: var(--octo-text-color) !important;
1225
1197
 
1226
1198
  &:focus,
1227
1199
  &.k-focus {
1228
- border-color: var(--octo-mint) !important;
1229
- box-shadow: var(--lcars-input-focus) !important;
1200
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
1201
+ box-shadow: var(--theme-focus-ring) !important;
1230
1202
  }
1231
1203
  }
1232
1204
 
@@ -1234,7 +1206,7 @@
1234
1206
  .k-dropdownlist,
1235
1207
  kendo-dropdownlist {
1236
1208
  background: var(--deep-sea) !important;
1237
- border-color: var(--octo-mint-30) !important;
1209
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
1238
1210
  color: var(--octo-text-color) !important;
1239
1211
 
1240
1212
  .k-input-inner {
@@ -1248,21 +1220,21 @@
1248
1220
  color: var(--ash-blue) !important;
1249
1221
 
1250
1222
  &:hover {
1251
- color: var(--octo-mint) !important;
1223
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1252
1224
  }
1253
1225
  }
1254
1226
 
1255
1227
  &:focus,
1256
1228
  &.k-focus {
1257
- border-color: var(--octo-mint) !important;
1258
- box-shadow: var(--lcars-input-focus) !important;
1229
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
1230
+ box-shadow: var(--theme-focus-ring) !important;
1259
1231
  }
1260
1232
  }
1261
1233
 
1262
1234
  // Kendo NumericTextBox
1263
1235
  .k-numerictextbox {
1264
1236
  background: var(--deep-sea) !important;
1265
- border-color: var(--octo-mint-30) !important;
1237
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
1266
1238
 
1267
1239
  .k-input-inner {
1268
1240
  background: transparent !important;
@@ -1273,8 +1245,8 @@
1273
1245
  .k-spinner-increase,
1274
1246
  .k-spinner-decrease {
1275
1247
  background: var(--octo-mint-10) !important;
1276
- border-color: var(--octo-mint-30) !important;
1277
- color: var(--octo-mint) !important;
1248
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
1249
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1278
1250
 
1279
1251
  &:hover {
1280
1252
  background: var(--octo-mint-20) !important;
@@ -1287,7 +1259,7 @@
1287
1259
  .svg-file-group,
1288
1260
  .form-group.svg-file-group {
1289
1261
  background: var(--surface-elevated) !important;
1290
- border: 2px dashed var(--octo-mint-30) !important;
1262
+ border: 2px dashed var(--theme-border-default, var(--octo-mint-30)) !important;
1291
1263
  border-radius: 8px !important;
1292
1264
  padding: 16px !important;
1293
1265
  transition: all 0.2s ease;
@@ -1299,22 +1271,14 @@
1299
1271
 
1300
1272
  // File input button
1301
1273
  button {
1302
- background: linear-gradient(
1303
- 180deg,
1304
- var(--octo-mint-15),
1305
- var(--octo-mint-05)
1306
- ) !important;
1307
- border: 1px solid var(--octo-mint-30) !important;
1308
- color: var(--octo-mint) !important;
1274
+ background: transparent !important;
1275
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
1276
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1309
1277
 
1310
1278
  &:hover {
1311
- background: linear-gradient(
1312
- 180deg,
1313
- var(--octo-mint-25),
1314
- var(--octo-mint-15)
1315
- ) !important;
1316
- border-color: var(--octo-mint) !important;
1317
- box-shadow: 0 0 10px var(--octo-mint-30) !important;
1279
+ background: var(--theme-bg-hover) !important;
1280
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
1281
+ box-shadow: none !important;
1318
1282
  }
1319
1283
  }
1320
1284
  }
@@ -1323,7 +1287,7 @@
1323
1287
  .svg-scale-group,
1324
1288
  .form-group.svg-scale-group {
1325
1289
  background: var(--surface-elevated) !important;
1326
- border: 1px solid var(--octo-mint-20) !important;
1290
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
1327
1291
  border-radius: 8px !important;
1328
1292
  padding: 12px 16px !important;
1329
1293
 
@@ -1339,7 +1303,7 @@
1339
1303
  // Kendo numeric textbox
1340
1304
  .k-numerictextbox {
1341
1305
  background: var(--deep-sea) !important;
1342
- border-color: var(--octo-mint-30) !important;
1306
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
1343
1307
 
1344
1308
  .k-input-inner {
1345
1309
  background: var(--deep-sea) !important;
@@ -1348,8 +1312,8 @@
1348
1312
 
1349
1313
  .k-input-button {
1350
1314
  background: var(--octo-mint-10) !important;
1351
- border-color: var(--octo-mint-30) !important;
1352
- color: var(--octo-mint) !important;
1315
+ border-color: var(--theme-border-default, var(--octo-mint-30)) !important;
1316
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
1353
1317
 
1354
1318
  &:hover {
1355
1319
  background: var(--octo-mint-20) !important;
@@ -1385,57 +1349,57 @@
1385
1349
 
1386
1350
  input[type="text"] {
1387
1351
  background: var(--deep-sea) !important;
1388
- border: 1px solid var(--octo-mint-30) !important;
1352
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
1389
1353
  color: var(--octo-text-color) !important;
1390
1354
 
1391
1355
  &:focus {
1392
- border-color: var(--octo-mint) !important;
1393
- box-shadow: var(--lcars-input-focus) !important;
1356
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
1357
+ box-shadow: var(--theme-focus-ring) !important;
1394
1358
  }
1395
1359
  }
1396
1360
  }
1397
1361
 
1398
1362
  .preview-container {
1399
1363
  background: var(--iron-navy) !important;
1400
- border: 1px solid var(--octo-mint-20) !important;
1364
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
1401
1365
  }
1402
1366
  }
1403
1367
 
1404
- // Process Designer & Symbol Editor - LCARS overrides
1368
+ // Process Designer & Symbol Editor - theme overrides
1405
1369
  mm-process-designer,
1406
1370
  mm-symbol-editor,
1407
1371
  mm-symbol-editor-page {
1408
- // Override designer CSS variables for LCARS theme
1372
+ // Override designer CSS variables for the Deep Sea theme
1409
1373
  --designer-bg: var(--deep-sea) !important;
1410
1374
  --designer-surface: var(--surface-elevated) !important;
1411
1375
  --designer-surface-alt: var(--iron-navy) !important;
1412
- --designer-border: rgba(100, 206, 185, 0.2) !important;
1376
+ --designer-border: var(--theme-border-default) !important;
1413
1377
  --designer-text: var(--octo-text-color) !important;
1414
1378
  --designer-text-muted: var(--ash-blue) !important;
1415
1379
  --designer-accent: #{$octo-mint} !important;
1416
1380
  --designer-accent-secondary: #{$neo-cyan} !important;
1417
1381
  --designer-canvas-bg: var(--surface-elevated) !important;
1418
- --designer-hover-bg: rgba(100, 206, 185, 0.1) !important;
1382
+ --designer-hover-bg: var(--theme-bg-hover) !important;
1419
1383
 
1420
1384
  // Canvas-specific colors (SVG canvas fill and grid)
1421
1385
  --designer-canvas-color: var(--iron-navy) !important;
1422
- --designer-grid-color: rgba(100, 206, 185, 0.15) !important;
1386
+ --designer-grid-color: var(--theme-border-default) !important;
1423
1387
 
1424
1388
  // Editor-specific variables (inherited from designer)
1425
1389
  --editor-bg: var(--deep-sea) !important;
1426
1390
  --editor-surface: var(--surface-elevated) !important;
1427
1391
  --editor-surface-alt: var(--iron-navy) !important;
1428
- --editor-border: rgba(100, 206, 185, 0.2) !important;
1392
+ --editor-border: var(--theme-border-default) !important;
1429
1393
  --editor-text: var(--octo-text-color) !important;
1430
1394
  --editor-text-muted: var(--ash-blue) !important;
1431
1395
  --editor-accent: #{$octo-mint} !important;
1432
- --editor-hover-bg: rgba(100, 206, 185, 0.1) !important;
1396
+ --editor-hover-bg: var(--theme-bg-hover) !important;
1433
1397
 
1434
1398
  // Force backgrounds directly on elements
1435
1399
  background: var(--deep-sea) !important;
1436
1400
  }
1437
1401
 
1438
- // Force LCARS styling on process designer internal elements
1402
+ // Force theme styling on process designer internal elements
1439
1403
  ::ng-deep {
1440
1404
  mm-process-designer,
1441
1405
  mm-symbol-editor {
@@ -1447,20 +1411,20 @@
1447
1411
  background: var(--surface-elevated) !important;
1448
1412
  }
1449
1413
 
1450
- // Canvas SVG background - LCARS dark theme
1414
+ // Canvas SVG background
1451
1415
  .canvas-background {
1452
1416
  fill: var(--iron-navy) !important;
1453
1417
  }
1454
1418
 
1455
- // Grid lines - subtle mint-colored grid
1419
+ // Grid lines - neutral hairline grid
1456
1420
  .designer-grid-line {
1457
- stroke: rgba(100, 206, 185, 0.15) !important;
1421
+ stroke: var(--theme-border-default) !important;
1458
1422
  }
1459
1423
 
1460
1424
  .designer-sidebar,
1461
1425
  .designer-inspector-container {
1462
1426
  background: var(--surface-elevated) !important;
1463
- border-color: rgba(100, 206, 185, 0.2) !important;
1427
+ border-color: var(--theme-border-default) !important;
1464
1428
  }
1465
1429
 
1466
1430
  .sidebar-tab {
@@ -1469,20 +1433,20 @@
1469
1433
 
1470
1434
  &.active {
1471
1435
  background: var(--surface-elevated) !important;
1472
- color: #{$octo-mint} !important;
1473
- border-bottom-color: #{$octo-mint} !important;
1436
+ color: var(--theme-text-accent, #{$octo-mint}) !important;
1437
+ border-bottom-color: var(--theme-text-accent, #{$octo-mint}) !important;
1474
1438
  }
1475
1439
  }
1476
1440
 
1477
1441
  .designer-statusbar {
1478
1442
  background: var(--iron-navy) !important;
1479
- border-color: rgba(100, 206, 185, 0.2) !important;
1443
+ border-color: var(--theme-border-default) !important;
1480
1444
  color: var(--ash-blue) !important;
1481
1445
  }
1482
1446
 
1483
1447
  .dockview-panels-container {
1484
1448
  background: var(--surface-elevated) !important;
1485
- border-color: rgba(100, 206, 185, 0.2) !important;
1449
+ border-color: var(--theme-border-default) !important;
1486
1450
  }
1487
1451
  }
1488
1452
 
@@ -1493,7 +1457,7 @@
1493
1457
 
1494
1458
  .editor-header {
1495
1459
  background: var(--iron-navy) !important;
1496
- border-color: rgba(100, 206, 185, 0.2) !important;
1460
+ border-color: var(--theme-border-default) !important;
1497
1461
  }
1498
1462
 
1499
1463
  .symbol-title {
@@ -1513,12 +1477,12 @@
1513
1477
 
1514
1478
  .properties-panel {
1515
1479
  background: var(--surface-elevated) !important;
1516
- border-color: rgba(100, 206, 185, 0.2) !important;
1480
+ border-color: var(--theme-border-default) !important;
1517
1481
  }
1518
1482
 
1519
1483
  .panel-header {
1520
1484
  background: var(--iron-navy) !important;
1521
- border-color: rgba(100, 206, 185, 0.2) !important;
1485
+ border-color: var(--theme-border-default) !important;
1522
1486
  }
1523
1487
 
1524
1488
  .panel-title {
@@ -1527,7 +1491,7 @@
1527
1491
 
1528
1492
  .panel-collapsed {
1529
1493
  background: var(--iron-navy) !important;
1530
- border-color: rgba(100, 206, 185, 0.2) !important;
1494
+ border-color: var(--theme-border-default) !important;
1531
1495
  }
1532
1496
 
1533
1497
  .collapsed-label,
@@ -1537,7 +1501,7 @@
1537
1501
  }
1538
1502
  }
1539
1503
 
1540
- // Process Widget (MeshBoard) - LCARS overrides
1504
+ // Process Widget (MeshBoard) - theme overrides
1541
1505
  mm-process-widget {
1542
1506
  // Override CSS variables used by the process widget
1543
1507
  --process-bg: var(--iron-navy);
@@ -1556,8 +1520,8 @@
1556
1520
  }
1557
1521
 
1558
1522
  .loading-spinner {
1559
- border-color: rgba(100, 206, 185, 0.2) !important;
1560
- border-top-color: #{$octo-mint} !important;
1523
+ border-color: var(--theme-border-default) !important;
1524
+ border-top-color: var(--theme-text-accent, #{$octo-mint}) !important;
1561
1525
  }
1562
1526
 
1563
1527
  .error-container {
@@ -1579,222 +1543,130 @@
1579
1543
  overflow: hidden;
1580
1544
  }
1581
1545
 
1546
+ // Body text uses the UI face (Roboto, concept §6.3); titles, dialog titles
1547
+ // and KPI numbers use --theme-font-display (Montserrat) explicitly.
1582
1548
  body {
1583
1549
  background-color: var(--kendo-color-app-surface, var(--deep-sea, #1a2230));
1584
1550
  color: var(--kendo-color-on-app-surface, var(--octo-text-color, #ffffff));
1585
- font-family: var(--lcars-font-primary);
1551
+ font-family: var(--theme-font-ui);
1586
1552
  }
1587
1553
 
1588
- // LCARS panels
1589
-
1590
- .lcars-panel {
1591
- background: var(--lcars-panel-bg);
1592
- border: var(--lcars-panel-border);
1593
- border-radius: var(--lcars-radius-md);
1594
- padding: 16px;
1595
- position: relative;
1596
-
1597
- &::before {
1598
- content: "";
1599
- position: absolute;
1600
- top: 0;
1601
- left: 0;
1602
- right: 0;
1603
- height: 3px;
1604
- background: linear-gradient(
1605
- 90deg,
1606
- var(--octo-mint),
1607
- var(--neo-cyan),
1608
- var(--royal-violet)
1609
- );
1610
- border-radius: var(--lcars-radius-md) var(--lcars-radius-md) 0 0;
1611
- }
1612
- }
1613
-
1614
- // LCARS-style header bar
1615
- .lcars-header-bar {
1616
- display: flex;
1617
- align-items: center;
1618
- gap: 12px;
1619
- padding: 8px 16px;
1620
- background: linear-gradient(90deg, var(--iron-navy), transparent);
1621
- border-left: 4px solid var(--octo-mint);
1622
- margin-bottom: 16px;
1623
-
1624
- &::after {
1625
- content: "";
1626
- flex: 1;
1627
- height: 2px;
1628
- background: linear-gradient(90deg, var(--octo-mint), transparent);
1629
- }
1630
- }
1631
-
1632
- // LCARS asymmetric panel (characteristic rounded corner on one side)
1633
- .lcars-panel-asymmetric {
1634
- background: var(--lcars-panel-bg);
1635
- border: var(--lcars-panel-border);
1636
- border-radius: var(--lcars-radius-xl) var(--lcars-radius-sm)
1637
- var(--lcars-radius-sm) var(--lcars-radius-xl);
1638
- padding: 16px;
1639
- padding-left: 24px;
1554
+ h1,
1555
+ h2,
1556
+ h3 {
1557
+ font-family: var(--theme-font-display);
1640
1558
  }
1641
1559
 
1642
1560
  // Kendo overrides
1643
1561
 
1644
1562
  // AppBar
1645
1563
  .k-appbar {
1646
- background: linear-gradient(
1647
- 180deg,
1648
- var(--iron-navy),
1649
- color-mix(in srgb, var(--iron-navy), black 5%)
1650
- ) !important;
1651
- border-bottom: 1px solid var(--octo-mint-30);
1652
- box-shadow:
1653
- 0 2px 8px rgba(0, 0, 0, 0.3),
1654
- 0 0 20px var(--octo-mint-10);
1564
+ background: var(--theme-bg-elevated, var(--iron-navy)) !important;
1565
+ border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-30));
1566
+ box-shadow: none;
1655
1567
  }
1656
1568
 
1657
- // Buttons - LCARS style
1569
+ // Buttons - Deep Sea: flat primary / base / outline (AB#5526)
1658
1570
  .k-button {
1659
- font-family: var(--lcars-font-primary);
1571
+ font-family: var(--theme-font-ui, inherit);
1660
1572
  font-weight: 500;
1661
- text-transform: uppercase;
1662
- letter-spacing: 0.5px;
1663
- border-radius: var(--lcars-radius-sm);
1664
- transition: all var(--lcars-transition-fast);
1573
+ text-transform: none;
1574
+ letter-spacing: normal;
1575
+ border-radius: var(--theme-radius-sm, 4px);
1576
+ transition:
1577
+ background-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease),
1578
+ border-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease),
1579
+ color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease);
1580
+
1581
+ &:focus-visible {
1582
+ outline: none;
1583
+ box-shadow: var(--theme-focus-ring, 0 0 0 2px var(--octo-mint));
1584
+ }
1665
1585
 
1666
1586
  &.k-button-solid-primary {
1667
- background: linear-gradient(
1668
- 180deg,
1669
- var(--octo-mint-30),
1670
- var(--octo-mint-15)
1671
- );
1672
- border: 1px solid var(--octo-mint-50);
1673
- color: var(--octo-text-color);
1587
+ background: var(--theme-accent, var(--octo-mint));
1588
+ border: 1px solid var(--theme-accent, var(--octo-mint));
1589
+ color: var(--theme-text-on-accent, var(--deep-sea));
1674
1590
 
1675
1591
  .k-svg-icon,
1676
1592
  .k-icon,
1677
1593
  svg {
1678
- fill: var(--octo-text-color);
1679
- color: var(--octo-text-color);
1594
+ fill: var(--theme-text-on-accent, var(--deep-sea));
1595
+ color: var(--theme-text-on-accent, var(--deep-sea));
1680
1596
  }
1681
1597
 
1682
1598
  &:hover:not(:disabled) {
1683
- background: linear-gradient(
1684
- 180deg,
1685
- var(--octo-mint-45),
1686
- var(--octo-mint-25)
1687
- );
1688
- border-color: var(--octo-mint);
1689
- box-shadow: 0 0 15px var(--octo-mint-40);
1599
+ background: var(--theme-accent-hover, var(--octo-mint));
1600
+ border-color: var(--theme-accent-hover, var(--octo-mint));
1690
1601
  }
1691
1602
 
1692
1603
  &:active:not(:disabled) {
1693
- background: linear-gradient(
1694
- 180deg,
1695
- var(--octo-mint-50),
1696
- var(--octo-mint-30)
1697
- );
1604
+ background: var(--theme-accent-hover, var(--octo-mint));
1698
1605
  }
1606
+
1607
+ // Icons follow: the block above paints them with --theme-text-on-accent explicitly.
1608
+ @include octo-button-primary-disabled($icons: true);
1699
1609
  }
1700
1610
 
1701
1611
  &.k-button-solid-secondary {
1702
- background: linear-gradient(
1703
- 180deg,
1704
- var(--neo-cyan),
1705
- color.adjust($neo-cyan, $lightness: -10%)
1706
- );
1707
-
1708
- &:hover {
1709
- box-shadow: var(--lcars-glow-cyan);
1710
- }
1612
+ background: var(--theme-accent-2, var(--neo-cyan));
1613
+ border-color: var(--theme-accent-2, var(--neo-cyan));
1614
+ color: var(--theme-text-on-accent, var(--deep-sea));
1711
1615
  }
1712
1616
 
1713
1617
  // Default/base solid buttons (no themeColor specified)
1714
1618
  &.k-button-solid-base {
1715
- background: linear-gradient(
1716
- 180deg,
1717
- var(--octo-mint-15),
1718
- var(--octo-mint-05)
1719
- );
1720
- // Theme-aware border/text so secondary/cancel buttons stay legible
1721
- // on light surfaces — brand-mint at low alpha washes out on white.
1722
- border: 1px solid var(--theme-border-strong, var(--octo-mint-30));
1723
- color: var(--theme-text-accent, var(--octo-mint));
1619
+ background: var(--theme-bg-elevated, transparent);
1620
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30));
1621
+ color: var(--theme-text-primary, var(--octo-text-color));
1724
1622
 
1725
1623
  .k-svg-icon,
1726
1624
  .k-icon,
1727
1625
  svg {
1728
- fill: var(--theme-text-accent, var(--octo-mint));
1729
- color: var(--theme-text-accent, var(--octo-mint));
1626
+ fill: var(--theme-text-primary, var(--octo-text-color));
1627
+ color: var(--theme-text-primary, var(--octo-text-color));
1730
1628
  }
1731
1629
 
1732
1630
  &:hover:not(:disabled) {
1733
- background: linear-gradient(
1734
- 180deg,
1735
- var(--octo-mint-25),
1736
- var(--octo-mint-15)
1737
- );
1738
- border-color: var(--theme-text-accent, var(--octo-mint-50));
1739
- box-shadow: 0 0 10px var(--octo-mint-30);
1631
+ background: var(--theme-bg-hover, var(--octo-mint-10));
1632
+ border-color: var(--theme-border-strong, var(--octo-mint-50));
1740
1633
  }
1741
1634
 
1742
1635
  &:active:not(:disabled) {
1743
- background: linear-gradient(
1744
- 180deg,
1745
- var(--octo-mint-30),
1746
- var(--octo-mint-20)
1747
- );
1636
+ background: var(--theme-bg-selected, var(--octo-mint-20));
1748
1637
  }
1749
1638
 
1750
1639
  &:disabled {
1751
1640
  opacity: 0.5;
1752
- color: var(--ash-blue);
1753
- border-color: var(--ash-blue-30);
1754
- background: var(--ash-blue-10);
1641
+ color: var(--theme-text-muted, var(--ash-blue));
1642
+ border-color: var(--theme-border-subtle, var(--ash-blue-30));
1643
+ background: transparent;
1755
1644
 
1756
1645
  .k-svg-icon,
1757
1646
  .k-icon,
1758
1647
  svg {
1759
- fill: var(--ash-blue);
1760
- color: var(--ash-blue);
1648
+ fill: var(--theme-text-muted, var(--ash-blue));
1649
+ color: var(--theme-text-muted, var(--ash-blue));
1761
1650
  }
1762
1651
  }
1763
1652
  }
1764
1653
 
1765
1654
  // Solid error buttons (themeColor="error")
1766
1655
  &.k-button-solid-error {
1767
- background: linear-gradient(
1768
- 180deg,
1769
- var(--bubblegum-20),
1770
- var(--bubblegum-10)
1771
- );
1772
- border: 1px solid var(--bubblegum-40);
1773
- color: var(--bubblegum);
1656
+ background: var(--theme-status-error, var(--bubblegum));
1657
+ border: 1px solid var(--theme-status-error, var(--bubblegum));
1658
+ color: var(--theme-text-on-accent, var(--deep-sea));
1774
1659
 
1775
1660
  .k-svg-icon,
1776
1661
  .k-icon,
1777
1662
  svg {
1778
- fill: var(--bubblegum);
1779
- color: var(--bubblegum);
1663
+ fill: var(--theme-text-on-accent, var(--deep-sea));
1664
+ color: var(--theme-text-on-accent, var(--deep-sea));
1780
1665
  }
1781
1666
 
1782
1667
  &:hover:not(:disabled) {
1783
- background: linear-gradient(
1784
- 180deg,
1785
- var(--bubblegum-30),
1786
- var(--bubblegum-20)
1787
- );
1788
- border-color: var(--bubblegum-60);
1789
- box-shadow: 0 0 10px var(--bubblegum-40);
1790
- }
1791
-
1792
- &:active:not(:disabled) {
1793
- background: linear-gradient(
1794
- 180deg,
1795
- var(--bubblegum-40),
1796
- var(--bubblegum-30)
1797
- );
1668
+ background: color-mix(in srgb, var(--theme-status-error, var(--bubblegum)) 88%, var(--theme-text-primary, white));
1669
+ border-color: color-mix(in srgb, var(--theme-status-error, var(--bubblegum)) 88%, var(--theme-text-primary, white));
1798
1670
  }
1799
1671
 
1800
1672
  &:disabled {
@@ -1803,210 +1675,206 @@
1803
1675
  }
1804
1676
 
1805
1677
  &.k-button-outline {
1806
- border-width: 2px;
1807
-
1808
- &:hover {
1809
- box-shadow: var(--lcars-glow-primary);
1810
- }
1678
+ border-width: 1px;
1811
1679
  }
1812
1680
 
1813
- // Outline base buttons - ensure visibility on dark background
1681
+ // Outline base buttons
1814
1682
  &.k-button-outline-base {
1815
- color: var(--ash-blue);
1816
- border-color: var(--ash-blue-50);
1683
+ color: var(--theme-text-primary, var(--ash-blue));
1684
+ border-color: var(--theme-border-default, var(--ash-blue-50));
1817
1685
  background: transparent;
1818
1686
 
1819
1687
  .k-svg-icon,
1820
1688
  .k-icon,
1821
1689
  svg {
1822
- fill: var(--ash-blue);
1823
- color: var(--ash-blue);
1690
+ fill: currentColor;
1691
+ color: currentColor;
1824
1692
  }
1825
1693
 
1826
1694
  &:hover:not(:disabled) {
1827
- color: var(--octo-mint);
1828
- border-color: var(--octo-mint-50);
1829
- background: var(--octo-mint-10);
1830
- box-shadow: var(--lcars-glow-primary);
1831
-
1832
- .k-svg-icon,
1833
- .k-icon,
1834
- svg {
1835
- fill: var(--octo-mint);
1836
- color: var(--octo-mint);
1837
- }
1695
+ border-color: var(--theme-border-strong, var(--octo-mint-50));
1696
+ background: var(--theme-bg-hover, var(--octo-mint-10));
1838
1697
  }
1839
1698
 
1840
1699
  &:active:not(:disabled) {
1841
- background: var(--octo-mint-15);
1700
+ background: var(--theme-bg-selected, var(--octo-mint-15));
1842
1701
  }
1843
1702
  }
1844
1703
 
1845
1704
  // Outline primary buttons - for selected state
1846
1705
  &.k-button-outline-primary {
1847
- color: var(--octo-mint);
1848
- border-color: var(--octo-mint-50);
1706
+ color: var(--theme-text-accent, var(--octo-mint));
1707
+ border-color: var(--theme-accent, var(--octo-mint-50));
1849
1708
  background: transparent;
1850
1709
 
1851
1710
  .k-svg-icon,
1852
1711
  .k-icon,
1853
1712
  svg {
1854
- fill: var(--octo-mint);
1855
- color: var(--octo-mint);
1713
+ fill: currentColor;
1714
+ color: currentColor;
1856
1715
  }
1857
1716
 
1858
1717
  &:hover:not(:disabled) {
1859
- background: var(--octo-mint-15);
1860
- box-shadow: var(--lcars-glow-primary);
1718
+ background: var(--theme-accent-subtle, var(--octo-mint-15));
1861
1719
  }
1862
1720
  }
1863
1721
 
1864
- // Flat error buttons (delete/remove actions) - make visible on dark background
1722
+ // Flat error buttons (delete/remove actions)
1865
1723
  &.k-button-flat-error {
1866
- color: var(--bubblegum) !important;
1867
- background: var(--bubblegum-10);
1868
- border: 1px solid var(--bubblegum-30);
1724
+ color: var(--theme-status-error, var(--bubblegum)) !important;
1725
+ background: transparent;
1726
+ border: 1px solid transparent;
1869
1727
 
1870
1728
  .k-svg-icon,
1871
1729
  .k-icon,
1872
1730
  svg {
1873
- fill: var(--bubblegum) !important;
1874
- color: var(--bubblegum) !important;
1731
+ fill: var(--theme-status-error, var(--bubblegum)) !important;
1732
+ color: var(--theme-status-error, var(--bubblegum)) !important;
1875
1733
  }
1876
1734
 
1877
1735
  &:hover {
1878
- background: var(--bubblegum-20);
1879
- border-color: var(--bubblegum-50);
1880
- box-shadow: 0 0 8px var(--bubblegum-40);
1736
+ background: var(--theme-status-error-subtle, var(--bubblegum-20));
1881
1737
  }
1882
1738
 
1883
1739
  &:active {
1884
- background: var(--bubblegum-30);
1740
+ background: var(--theme-status-error-subtle, var(--bubblegum-30));
1885
1741
  }
1886
1742
  }
1887
1743
 
1888
- // General flat buttons - ensure visibility
1744
+ // General flat buttons
1889
1745
  &.k-button-flat {
1890
1746
  &:not(.k-button-flat-error):not(.k-button-flat-primary) {
1891
- color: var(--ash-blue);
1747
+ color: var(--theme-text-secondary, var(--ash-blue));
1892
1748
 
1893
1749
  .k-svg-icon,
1894
1750
  .k-icon,
1895
1751
  svg {
1896
- fill: var(--ash-blue);
1897
- color: var(--ash-blue);
1752
+ fill: currentColor;
1753
+ color: currentColor;
1898
1754
  }
1899
1755
 
1900
1756
  &:hover {
1901
- background: var(--ash-blue-15);
1902
- color: var(--octo-mint);
1903
-
1904
- .k-svg-icon,
1905
- .k-icon,
1906
- svg {
1907
- fill: var(--octo-mint);
1908
- color: var(--octo-mint);
1909
- }
1757
+ background: var(--theme-bg-hover, var(--ash-blue-15));
1758
+ color: var(--theme-text-primary, var(--octo-mint));
1910
1759
  }
1911
1760
  }
1912
1761
  }
1762
+
1763
+ // Focusable disabled-with-reason buttons (`aria-disabled="true"`, mm-action-button, AB#3444):
1764
+ // they are not natively disabled, so the `:not(:disabled)` hover rules above would still
1765
+ // light them up. Keep them still and show the not-allowed cursor.
1766
+ &[aria-disabled="true"] {
1767
+ cursor: not-allowed;
1768
+
1769
+ &.k-button-flat:not(.k-button-flat-error):not(.k-button-flat-primary):hover,
1770
+ &.k-button-outline-base:hover {
1771
+ background: transparent;
1772
+ color: var(--theme-text-secondary, var(--ash-blue));
1773
+ }
1774
+
1775
+ &.k-button-solid-base:hover {
1776
+ background: var(--theme-bg-elevated, transparent);
1777
+ border-color: var(--theme-border-default, var(--octo-mint-30));
1778
+ }
1779
+ }
1913
1780
  }
1914
1781
 
1915
- // Grid - LCARS style
1782
+ // Grid - Deep Sea: surface body, elevated header band, neutral hairlines
1916
1783
  .k-grid {
1917
- border: var(--lcars-panel-border);
1918
- border-radius: var(--lcars-radius-md);
1784
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20));
1785
+ border-radius: var(--theme-radius-md, 6px);
1919
1786
  overflow: hidden;
1920
1787
 
1921
1788
  .k-grid-header {
1922
- background: linear-gradient(
1923
- 180deg,
1924
- var(--iron-navy),
1925
- var(--surface-elevated)
1926
- );
1927
- border-bottom: 2px solid var(--octo-mint-30);
1789
+ background: var(--theme-bg-elevated, var(--surface-elevated));
1790
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-30));
1928
1791
 
1929
1792
  th {
1930
- font-family: var(--lcars-font-primary);
1793
+ font-family: var(--theme-font-ui, inherit);
1931
1794
  font-weight: 600;
1932
- text-transform: uppercase;
1933
- font-size: 0.85em;
1934
- letter-spacing: 0.5px;
1935
- color: var(--octo-mint);
1795
+ text-transform: none;
1796
+ letter-spacing: normal;
1797
+ color: var(--theme-text-secondary, var(--octo-mint));
1936
1798
  }
1937
1799
  }
1938
1800
 
1939
1801
  .k-grid-content {
1940
- background: var(--deep-sea-80);
1802
+ background: var(--theme-bg-surface, var(--deep-sea-80));
1941
1803
 
1942
1804
  tr {
1943
- transition: background var(--lcars-transition-fast);
1805
+ transition: background var(--theme-motion-fast) var(--theme-motion-easing);
1944
1806
 
1945
1807
  &:hover {
1946
- background: var(--octo-mint-08) !important;
1808
+ background: var(--theme-bg-hover, var(--octo-mint-08)) !important;
1947
1809
  }
1948
1810
 
1949
1811
  &.k-selected {
1950
- background: var(--octo-mint-15) !important;
1951
- border-left: 3px solid var(--octo-mint);
1812
+ background: var(--theme-bg-selected, var(--octo-mint-15)) !important;
1952
1813
  }
1953
1814
  }
1954
1815
  }
1955
1816
 
1956
1817
  .k-pager {
1957
- background: var(--iron-navy);
1958
- border-top: 1px solid var(--octo-mint-20);
1818
+ background: var(--theme-bg-elevated, var(--iron-navy));
1819
+ border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
1959
1820
  }
1960
1821
  }
1961
1822
 
1962
- // TreeView - LCARS style
1823
+ // A grid inside a content panel must not become a second card: the panel
1824
+ // already supplies the border, the radius and the surface.
1825
+ .lcars-content-panel .k-grid {
1826
+ border: none;
1827
+ border-radius: 0;
1828
+ box-shadow: none;
1829
+ }
1830
+
1831
+ // TreeView
1963
1832
  .k-treeview {
1964
1833
  .k-treeview-item {
1965
1834
  .k-treeview-leaf {
1966
- border-radius: var(--lcars-radius-sm);
1967
- transition: all var(--lcars-transition-fast);
1835
+ border-radius: var(--theme-radius-sm, 4px);
1836
+ transition: background-color var(--theme-motion-fast) var(--theme-motion-easing);
1968
1837
 
1969
1838
  &:hover {
1970
- background: var(--octo-mint-10);
1839
+ background: var(--theme-bg-hover, var(--octo-mint-10));
1971
1840
  }
1972
1841
 
1973
1842
  &.k-selected {
1974
- background: var(--octo-mint-20);
1975
- border-left: 3px solid var(--octo-mint);
1976
- box-shadow: inset 0 0 10px var(--octo-mint-10);
1843
+ background: var(--theme-bg-selected, var(--octo-mint-20));
1844
+ color: var(--theme-text-primary, inherit);
1977
1845
  }
1978
1846
  }
1979
1847
  }
1980
1848
  }
1981
1849
 
1982
- // Input fields - LCARS style
1850
+ // Input fields
1983
1851
  .k-input,
1984
1852
  .k-picker,
1985
1853
  .k-textbox {
1986
- background: var(--deep-sea-80);
1987
- border: 1px solid var(--ash-blue-30);
1988
- border-radius: var(--lcars-radius-sm);
1989
- transition: all var(--lcars-transition-fast);
1854
+ background: var(--theme-bg-input, var(--deep-sea-80));
1855
+ border: 1px solid var(--theme-border-default, var(--ash-blue-30));
1856
+ border-radius: var(--theme-radius-sm, 4px);
1857
+ transition: border-color var(--theme-motion-fast) var(--theme-motion-easing);
1990
1858
 
1991
1859
  &:hover {
1992
- border-color: var(--octo-mint-50);
1860
+ border-color: var(--theme-border-strong, var(--octo-mint-50));
1993
1861
  }
1994
1862
 
1995
1863
  &:focus,
1996
1864
  &.k-focus {
1997
- border-color: var(--octo-mint);
1998
- box-shadow: var(--lcars-glow-primary);
1865
+ border-color: var(--theme-accent, var(--octo-mint));
1866
+ box-shadow: var(--theme-focus-ring);
1999
1867
  }
2000
1868
  }
2001
1869
 
2002
- // Form fields - LCARS style (global for all dialogs)
1870
+ // Form fields (global for all dialogs)
2003
1871
  kendo-formfield,
2004
1872
  .k-form-field {
2005
1873
  kendo-label,
2006
1874
  .k-label,
2007
1875
  > label {
2008
1876
  color: var(--ash-blue) !important;
2009
- font-family: var(--lcars-font-primary);
1877
+ font-family: var(--theme-font-ui, inherit);
2010
1878
  font-weight: 500;
2011
1879
  }
2012
1880
 
@@ -2021,7 +1889,7 @@
2021
1889
  }
2022
1890
  }
2023
1891
 
2024
- // Standalone labels - LCARS style
1892
+ // Standalone labels
2025
1893
  .k-label,
2026
1894
  kendo-label {
2027
1895
  color: var(--ash-blue) !important;
@@ -2078,7 +1946,7 @@
2078
1946
  .form-field {
2079
1947
  > label {
2080
1948
  color: var(--ash-blue) !important;
2081
- font-family: var(--lcars-font-primary);
1949
+ font-family: var(--theme-font-ui, inherit);
2082
1950
  font-weight: 500;
2083
1951
 
2084
1952
  .required {
@@ -2097,9 +1965,9 @@
2097
1965
 
2098
1966
  .form-section {
2099
1967
  h4 {
2100
- color: var(--octo-mint) !important;
2101
- font-family: var(--lcars-font-primary);
2102
- border-bottom-color: var(--octo-mint-20) !important;
1968
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
1969
+ font-family: var(--theme-font-display, inherit);
1970
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-20)) !important;
2103
1971
  }
2104
1972
  }
2105
1973
 
@@ -2114,7 +1982,7 @@
2114
1982
  }
2115
1983
 
2116
1984
  input[type="radio"] {
2117
- accent-color: var(--octo-mint);
1985
+ accent-color: var(--theme-accent, var(--octo-mint));
2118
1986
  }
2119
1987
  }
2120
1988
  }
@@ -2122,13 +1990,13 @@
2122
1990
 
2123
1991
  // Config cards (Columns, Sorting, Filters, Options, Query Info)
2124
1992
  .config-card {
2125
- background: var(--surface-elevated-60) !important;
2126
- border-color: var(--octo-mint-20) !important;
1993
+ background: var(--theme-bg-elevated, var(--surface-elevated-60)) !important;
1994
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
2127
1995
 
2128
1996
  .card-header {
2129
1997
  .card-title {
2130
- color: var(--octo-mint) !important;
2131
- font-family: var(--lcars-font-primary);
1998
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
1999
+ font-family: var(--theme-font-display, inherit);
2132
2000
  }
2133
2001
 
2134
2002
  .card-count {
@@ -2137,7 +2005,7 @@
2137
2005
 
2138
2006
  kendo-svgicon,
2139
2007
  .k-svg-icon {
2140
- color: var(--octo-mint) !important;
2008
+ color: var(--theme-text-secondary, var(--octo-mint)) !important;
2141
2009
  }
2142
2010
  }
2143
2011
 
@@ -2182,17 +2050,17 @@
2182
2050
 
2183
2051
  // Loading indicator
2184
2052
  .loading-indicator {
2185
- color: var(--octo-mint) !important;
2053
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
2186
2054
  }
2187
2055
 
2188
2056
  // Config sections (used in Pie Chart, Bar Chart, etc.)
2189
2057
  .config-section {
2190
- background: var(--surface-elevated-60) !important;
2191
- border-color: var(--octo-mint-20) !important;
2058
+ background: var(--theme-bg-elevated, var(--surface-elevated-60)) !important;
2059
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
2192
2060
 
2193
2061
  .section-title {
2194
- color: var(--octo-mint) !important;
2195
- font-family: var(--lcars-font-primary);
2062
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
2063
+ font-family: var(--theme-font-display, inherit);
2196
2064
  }
2197
2065
 
2198
2066
  .section-hint {
@@ -2202,13 +2070,13 @@
2202
2070
 
2203
2071
  // Form sections (used in Stats Grid Config Dialog, etc.)
2204
2072
  .form-section {
2205
- background: var(--surface-elevated-60) !important;
2206
- border-color: var(--octo-mint-20) !important;
2073
+ background: var(--theme-bg-elevated, var(--surface-elevated-60)) !important;
2074
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
2207
2075
 
2208
2076
  .section-header {
2209
2077
  h4 {
2210
- color: var(--octo-mint) !important;
2211
- font-family: var(--lcars-font-primary);
2078
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
2079
+ font-family: var(--theme-font-display, inherit);
2212
2080
  }
2213
2081
  }
2214
2082
 
@@ -2219,11 +2087,13 @@
2219
2087
 
2220
2088
  // Stat items (used in Stats Grid Config Dialog)
2221
2089
  .stat-item {
2222
- background: var(--surface-elevated-80) !important;
2223
- border-color: var(--octo-mint-20) !important;
2090
+ background: var(--theme-bg-surface, var(--surface-elevated-80)) !important;
2091
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
2224
2092
 
2225
2093
  .stat-number {
2226
- color: var(--octo-mint) !important;
2094
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
2095
+ font-family: var(--theme-font-display, inherit);
2096
+ font-variant-numeric: tabular-nums;
2227
2097
  }
2228
2098
  }
2229
2099
  }
@@ -2245,95 +2115,77 @@
2245
2115
  }
2246
2116
  }
2247
2117
 
2248
- // Input buttons (DatePicker calendar, NumericTextBox spinners, etc.) - LCARS style
2118
+ // Input buttons (DatePicker calendar, NumericTextBox spinners, etc.)
2249
2119
  .k-input-button,
2250
2120
  .sort-button,
2251
2121
  .k-spinner-increase,
2252
2122
  .k-spinner-decrease {
2253
- background: var(--octo-mint-10) !important;
2254
- border-color: var(--octo-mint-30) !important;
2255
- color: var(--octo-mint) !important;
2123
+ background: transparent !important;
2124
+ border-color: var(--theme-border-subtle, var(--octo-mint-30)) !important;
2125
+ color: var(--theme-text-secondary, var(--octo-mint)) !important;
2256
2126
 
2257
2127
  // Make SVG icons visible
2258
2128
  .k-svg-icon,
2259
2129
  .k-icon,
2260
2130
  svg {
2261
- fill: var(--octo-mint) !important;
2262
- color: var(--octo-mint) !important;
2131
+ fill: currentColor !important;
2132
+ color: currentColor !important;
2263
2133
  }
2264
2134
 
2265
2135
  &:hover {
2266
- background: var(--octo-mint-20) !important;
2267
- border-color: var(--octo-mint-50) !important;
2136
+ background: var(--theme-bg-hover, var(--octo-mint-20)) !important;
2137
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
2268
2138
  }
2269
2139
 
2270
2140
  &:active {
2271
- background: var(--octo-mint-30) !important;
2141
+ background: var(--theme-bg-selected, var(--octo-mint-30)) !important;
2272
2142
  }
2273
2143
  }
2274
2144
 
2275
- // Dropdown/Popup - LCARS style
2145
+ // Dropdown/Popup
2276
2146
  .k-popup {
2277
- background: var(--iron-navy);
2278
- border: 1px solid var(--octo-mint-30);
2279
- border-radius: var(--lcars-radius-md);
2280
- box-shadow:
2281
- 0 8px 32px rgba(0, 0, 0, 0.4),
2282
- 0 0 20px var(--octo-mint-10);
2147
+ background: var(--theme-bg-overlay, var(--iron-navy));
2148
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30));
2149
+ border-radius: var(--theme-radius-lg, 8px);
2150
+ box-shadow: var(--theme-shadow-popup, 0 8px 32px rgba(0, 0, 0, 0.4));
2283
2151
 
2284
2152
  .k-list-item {
2285
2153
  padding: 6px 12px !important;
2286
2154
  font-size: 0.8125rem !important; // 13px - compact to match app styling
2287
2155
  line-height: 1.4 !important;
2288
2156
  min-height: auto !important;
2289
- transition: background var(--lcars-transition-fast);
2157
+ transition: background var(--theme-motion-fast) var(--theme-motion-easing);
2290
2158
 
2291
2159
  &:hover {
2292
- background: var(--octo-mint-15);
2160
+ background: var(--theme-bg-hover, var(--octo-mint-15));
2293
2161
  }
2294
2162
 
2295
2163
  &.k-selected {
2296
- background: var(--octo-mint-25);
2297
- color: var(--octo-mint);
2164
+ background: var(--theme-bg-selected, var(--octo-mint-25));
2165
+ color: var(--theme-text-primary, var(--octo-mint));
2298
2166
  }
2299
2167
  }
2300
2168
  }
2301
2169
 
2302
- // Dialog - LCARS style
2170
+ // Dialog - Deep Sea: overlay surface, neutral hairlines, display-face title
2303
2171
  .k-dialog {
2304
- border: 1px solid var(--octo-mint-30);
2305
- border-radius: var(--lcars-radius-lg);
2306
- box-shadow:
2307
- 0 16px 64px rgba(0, 0, 0, 0.5),
2308
- 0 0 40px var(--octo-mint-15);
2172
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30));
2173
+ border-radius: var(--theme-radius-lg, 8px);
2174
+ box-shadow: var(--theme-shadow-popup, 0 16px 64px rgba(0, 0, 0, 0.5));
2309
2175
  overflow: hidden;
2310
2176
 
2311
2177
  .k-dialog-titlebar {
2312
- background: linear-gradient(
2313
- 90deg,
2314
- var(--iron-navy),
2315
- var(--surface-elevated)
2316
- );
2317
- border-bottom: 2px solid var(--octo-mint);
2318
- font-family: var(--lcars-font-primary);
2178
+ background: var(--theme-bg-elevated, var(--surface-elevated));
2179
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint));
2180
+ font-family: var(--theme-font-display, inherit);
2319
2181
  font-weight: 600;
2320
- text-transform: uppercase;
2321
- letter-spacing: 1px;
2322
-
2323
- &::before {
2324
- content: "";
2325
- position: absolute;
2326
- left: 0;
2327
- top: 0;
2328
- bottom: 0;
2329
- width: 4px;
2330
- background: var(--octo-mint);
2331
- }
2182
+ text-transform: none;
2183
+ letter-spacing: normal;
2332
2184
  }
2333
2185
 
2334
2186
  .k-dialog-content,
2335
2187
  .k-window-content {
2336
- background: var(--deep-sea);
2188
+ background: var(--theme-bg-overlay, var(--deep-sea));
2337
2189
  display: flex;
2338
2190
  flex-direction: column;
2339
2191
  overflow: hidden;
@@ -2360,38 +2212,38 @@
2360
2212
  }
2361
2213
 
2362
2214
  .k-dialog-actions {
2363
- background: var(--iron-navy);
2364
- border-top: 1px solid var(--octo-mint-20);
2215
+ background: var(--theme-bg-overlay, var(--iron-navy));
2216
+ border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
2365
2217
  flex-shrink: 0;
2366
2218
 
2367
2219
  .k-button {
2368
- @include lcars-button;
2220
+ @include octo-button;
2369
2221
 
2370
- // Override Kendo flat/outline button styles for consistent LCARS look
2222
+ // Flat/outline buttons in action rows get the same outline look
2371
2223
  &.k-button-flat,
2372
2224
  &.k-button-outline {
2373
- @include lcars-flat-btn;
2225
+ @include flat-button;
2374
2226
  }
2375
2227
  }
2376
2228
  }
2377
2229
  }
2378
2230
 
2379
- // Window action buttons (WindowService dialogs) - LCARS style
2231
+ // Window action buttons (WindowService dialogs)
2380
2232
  .k-window > .k-actions {
2381
- background: var(--iron-navy);
2382
- border-top: 1px solid var(--octo-mint-20);
2233
+ background: var(--theme-bg-overlay, var(--iron-navy));
2234
+ border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
2383
2235
 
2384
2236
  .k-button {
2385
- @include lcars-button;
2237
+ @include octo-button;
2386
2238
 
2387
2239
  &.k-button-flat,
2388
2240
  &.k-button-outline {
2389
- @include lcars-flat-btn;
2241
+ @include flat-button;
2390
2242
  }
2391
2243
  }
2392
2244
  }
2393
2245
 
2394
- // Widget config dialog buttons (inside window content) - LCARS style
2246
+ // Widget config dialog buttons (inside window content)
2395
2247
  // MeshBoard library exposes `mm-dialog-actions` on all dialog button containers
2396
2248
  // and `mm-toolbar-actions` on toolbar button areas for consistent host-app styling.
2397
2249
  .k-window-content {
@@ -2401,37 +2253,30 @@
2401
2253
  .dialog-actions .k-button,
2402
2254
  .toolbar .k-button,
2403
2255
  .dialog-button.k-button {
2404
- @include lcars-button;
2256
+ @include octo-button;
2405
2257
 
2406
2258
  &.k-button-flat {
2407
- @include lcars-flat-btn;
2259
+ @include flat-button;
2408
2260
  }
2409
2261
  }
2410
2262
  }
2411
2263
 
2412
2264
  // Dialog Danger variant - for production/staging confirmation dialogs
2413
2265
  .mm-dialog-danger .k-dialog {
2414
- border-color: var(--bubblegum-50);
2415
- box-shadow:
2416
- 0 16px 64px rgba(0, 0, 0, 0.5),
2417
- 0 0 40px var(--bubblegum-20);
2266
+ border-color: var(--theme-status-error, var(--bubblegum-50));
2418
2267
 
2419
2268
  .k-dialog-titlebar {
2420
- border-bottom-color: var(--bubblegum);
2421
- color: var(--bubblegum);
2422
-
2423
- &::before {
2424
- background: var(--bubblegum);
2425
- }
2269
+ border-bottom-color: var(--theme-status-error, var(--bubblegum));
2270
+ color: var(--theme-status-error, var(--bubblegum));
2426
2271
  }
2427
2272
 
2428
2273
  .k-dialog-actions {
2429
- border-top-color: var(--bubblegum-30);
2274
+ border-top-color: var(--theme-border-subtle, var(--bubblegum-30));
2430
2275
  }
2431
2276
  }
2432
2277
 
2433
2278
  // --------------------------------------------------------------------------
2434
- // Drawer - LCARS style
2279
+ // Drawer - flat elevated surface (Deep Sea)
2435
2280
  //
2436
2281
  // Hierarchy classes: the shared CommandService stamps `mm-drawer-level-<n>`
2437
2282
  // on every drawer item and Kendo adds its own `k-level-<n>` — but only while
@@ -2440,7 +2285,7 @@
2440
2285
  // mini rail and can be reset there in one place.
2441
2286
  // --------------------------------------------------------------------------
2442
2287
  .k-drawer {
2443
- background: linear-gradient(180deg, var(--theme-bg-surface), var(--theme-bg-app));
2288
+ background: var(--theme-bg-elevated);
2444
2289
  border-right: 1px solid var(--theme-border-subtle);
2445
2290
  // Kendo's own theme sets `.k-drawer { color: var(--kendo-color-subtle) }`.
2446
2291
  // That token is not part of our theme contract and resolves to an almost
@@ -2459,11 +2304,11 @@
2459
2304
 
2460
2305
  .k-drawer-item {
2461
2306
  color: var(--theme-text-primary);
2462
- border-radius: 0 var(--lcars-radius-md) var(--lcars-radius-md) 0;
2463
- margin: 2px 4px 2px 0;
2307
+ border-radius: var(--theme-radius-sm, 4px);
2308
+ margin: 2px 4px;
2464
2309
  padding: 10px 12px;
2465
2310
  min-height: 44px;
2466
- transition: all var(--lcars-transition-fast);
2311
+ transition: all var(--theme-motion-fast) var(--theme-motion-easing);
2467
2312
  display: flex;
2468
2313
  align-items: center;
2469
2314
  justify-content: flex-start;
@@ -2488,13 +2333,12 @@
2488
2333
  }
2489
2334
 
2490
2335
  &:hover {
2491
- background: var(--octo-mint-10);
2336
+ background: var(--theme-bg-hover);
2492
2337
  color: var(--theme-text-primary);
2493
2338
  }
2494
2339
 
2495
2340
  &.k-selected {
2496
- background: linear-gradient(90deg, var(--octo-mint-20), transparent);
2497
- border-left: 3px solid var(--octo-mint);
2341
+ background: var(--theme-bg-selected);
2498
2342
  color: var(--theme-text-accent);
2499
2343
  }
2500
2344
 
@@ -2508,7 +2352,7 @@
2508
2352
  min-height: 1px;
2509
2353
  padding: 0;
2510
2354
  margin: 8px 12px;
2511
- background: linear-gradient(90deg, var(--theme-border-strong), transparent);
2355
+ background: var(--theme-border-subtle);
2512
2356
  }
2513
2357
 
2514
2358
  // Nested entries: indented under their group header with a vertical
@@ -2589,14 +2433,14 @@
2589
2433
  margin-left: auto;
2590
2434
  flex-shrink: 0;
2591
2435
  padding: 1px 8px;
2592
- border-radius: 10px;
2436
+ border-radius: var(--theme-radius-xs, 2px);
2593
2437
  font-size: 0.7rem;
2594
- font-weight: 700;
2595
- letter-spacing: 0.5px;
2438
+ font-weight: 600;
2596
2439
  line-height: 1.4;
2440
+ font-variant-numeric: tabular-nums;
2597
2441
  color: var(--theme-text-accent);
2598
- background: var(--octo-mint-15);
2599
- border: 1px solid var(--octo-mint-35);
2442
+ background: var(--theme-accent-subtle);
2443
+ border: 1px solid transparent;
2600
2444
  }
2601
2445
  }
2602
2446
  }
@@ -2623,7 +2467,6 @@
2623
2467
  }
2624
2468
 
2625
2469
  &.k-selected {
2626
- border-left: 3px solid var(--octo-mint);
2627
2470
  padding-left: 0;
2628
2471
  }
2629
2472
 
@@ -2677,217 +2520,85 @@
2677
2520
  padding: 0 4px;
2678
2521
  font-size: 0.6rem;
2679
2522
  line-height: 1.3;
2680
- border-radius: 7px;
2523
+ border-radius: var(--theme-radius-xs, 2px);
2681
2524
  background: var(--theme-bg-app);
2682
2525
  }
2683
2526
  }
2684
2527
  }
2685
2528
 
2686
- // Tabs - LCARS style
2529
+ // Tabs - sentence case, accent underline on the active tab (concept §6.1)
2687
2530
  .k-tabstrip {
2688
2531
  .k-tabstrip-items {
2689
- border-bottom: 2px solid var(--ash-blue-20);
2532
+ border-bottom: 1px solid var(--theme-border-subtle, var(--ash-blue-20));
2690
2533
 
2691
2534
  .k-item {
2692
- font-family: var(--lcars-font-primary);
2535
+ font-family: var(--theme-font-ui, inherit);
2693
2536
  font-weight: 500;
2694
- text-transform: uppercase;
2695
- letter-spacing: 0.5px;
2696
- border-radius: var(--lcars-radius-md) var(--lcars-radius-md) 0 0;
2697
- transition: all var(--lcars-transition-fast);
2537
+ text-transform: none;
2538
+ letter-spacing: normal;
2539
+ border-radius: var(--theme-radius-sm, 4px) var(--theme-radius-sm, 4px) 0 0;
2540
+ transition: background-color var(--theme-motion-fast) var(--theme-motion-easing), color var(--theme-motion-fast) var(--theme-motion-easing);
2698
2541
 
2699
2542
  &:hover {
2700
- background: var(--octo-mint-10);
2543
+ background: var(--theme-bg-hover, var(--octo-mint-10));
2701
2544
  }
2702
2545
 
2703
2546
  &.k-active {
2704
- background: var(--iron-navy);
2705
- border-bottom: 3px solid var(--octo-mint);
2706
- color: var(--octo-mint);
2547
+ background: transparent;
2548
+ border-bottom: 2px solid var(--theme-accent, var(--octo-mint));
2549
+ color: var(--theme-text-accent, var(--octo-mint));
2707
2550
  }
2708
2551
  }
2709
2552
  }
2710
2553
  }
2711
2554
 
2712
- // Cards - LCARS style
2555
+ // Cards
2713
2556
  .k-card {
2714
- background: var(--lcars-panel-bg);
2715
- border: var(--lcars-panel-border);
2716
- border-radius: var(--lcars-radius-md);
2557
+ background: var(--theme-bg-surface);
2558
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20));
2559
+ border-radius: var(--theme-radius-md, 6px);
2717
2560
  overflow: hidden;
2718
2561
 
2719
2562
  .k-card-header {
2720
- background: linear-gradient(90deg, var(--iron-navy), transparent);
2721
- border-left: 4px solid var(--octo-mint);
2722
- font-family: var(--lcars-font-primary);
2563
+ background: transparent;
2564
+ border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
2565
+ font-family: var(--theme-font-display, inherit);
2723
2566
  font-weight: 600;
2724
2567
  }
2725
2568
  }
2726
2569
 
2727
- // Tooltip - LCARS style
2570
+ // Tooltip
2728
2571
  .k-tooltip {
2729
- background: var(--iron-navy);
2730
- border: 1px solid var(--octo-mint-40);
2731
- border-radius: var(--lcars-radius-sm);
2732
- box-shadow:
2733
- 0 4px 16px rgba(0, 0, 0, 0.3),
2734
- var(--lcars-glow-primary);
2572
+ background: var(--theme-bg-overlay, var(--iron-navy));
2573
+ color: var(--theme-text-primary, inherit);
2574
+ border: 1px solid var(--theme-border-default, var(--octo-mint-40));
2575
+ border-radius: var(--theme-radius-sm, 4px);
2576
+ box-shadow: var(--theme-shadow-popup, 0 4px 16px rgba(0, 0, 0, 0.3));
2735
2577
  }
2736
2578
 
2737
- // Progress indicators - LCARS style
2579
+ // Progress indicators
2738
2580
  .k-progressbar {
2739
- background: var(--ash-blue-20);
2740
- border-radius: var(--lcars-radius-pill);
2581
+ background: var(--theme-border-subtle, var(--ash-blue-20));
2582
+ border-radius: var(--theme-radius-xs, 2px);
2741
2583
  overflow: hidden;
2742
2584
 
2743
2585
  .k-selected {
2744
- background: linear-gradient(90deg, var(--octo-mint), var(--neo-cyan));
2745
- box-shadow: var(--lcars-glow-primary);
2586
+ background: var(--theme-accent, var(--octo-mint));
2746
2587
  }
2747
2588
  }
2748
2589
 
2749
- // Chip/Badge - LCARS style
2590
+ // Chip/Badge
2750
2591
  .k-chip {
2751
- font-family: var(--lcars-font-primary);
2592
+ font-family: var(--theme-font-ui, inherit);
2752
2593
  font-weight: 500;
2753
- border-radius: var(--lcars-radius-sm);
2594
+ border-radius: var(--theme-radius-xs, 2px);
2754
2595
 
2755
2596
  &.k-chip-solid-primary {
2756
- background: linear-gradient(
2757
- 180deg,
2758
- var(--octo-mint),
2759
- color.adjust($octo-mint, $lightness: -10%)
2760
- );
2597
+ background: var(--theme-accent, var(--octo-mint));
2598
+ color: var(--theme-text-on-accent, var(--deep-sea));
2761
2599
  }
2762
2600
  }
2763
2601
 
2764
- // LCARS utilities
2765
-
2766
- // Glow effects
2767
- .lcars-glow-mint {
2768
- box-shadow: var(--lcars-glow-primary);
2769
- }
2770
- .lcars-glow-cyan {
2771
- box-shadow: var(--lcars-glow-cyan);
2772
- }
2773
- .lcars-glow-violet {
2774
- box-shadow: var(--lcars-glow-violet);
2775
- }
2776
- .lcars-glow-pink {
2777
- box-shadow: var(--lcars-glow-pink);
2778
- }
2779
-
2780
- // Text colors
2781
- .lcars-text-mint {
2782
- color: var(--octo-mint);
2783
- }
2784
- .lcars-text-cyan {
2785
- color: var(--neo-cyan);
2786
- }
2787
- .lcars-text-violet {
2788
- color: var(--royal-violet);
2789
- }
2790
- .lcars-text-pink {
2791
- color: var(--bubblegum);
2792
- }
2793
- .lcars-text-toffee {
2794
- color: var(--toffee);
2795
- }
2796
-
2797
- // Background colors
2798
- .lcars-bg-panel {
2799
- background: var(--lcars-panel-bg);
2800
- }
2801
- .lcars-bg-deep {
2802
- background: var(--deep-sea);
2803
- }
2804
- .lcars-bg-navy {
2805
- background: var(--iron-navy);
2806
- }
2807
-
2808
- // Borders
2809
- .lcars-border-mint {
2810
- border-color: var(--octo-mint);
2811
- }
2812
- .lcars-border-glow {
2813
- border: 1px solid var(--octo-mint-40);
2814
- box-shadow: var(--lcars-glow-primary);
2815
- }
2816
-
2817
- // LCARS decorative elements
2818
- .lcars-divider {
2819
- height: 2px;
2820
- background: linear-gradient(
2821
- 90deg,
2822
- var(--octo-mint),
2823
- var(--neo-cyan),
2824
- transparent
2825
- );
2826
- margin: 16px 0;
2827
- }
2828
-
2829
- .lcars-corner-accent {
2830
- position: relative;
2831
-
2832
- &::before {
2833
- content: "";
2834
- position: absolute;
2835
- top: 0;
2836
- left: 0;
2837
- width: 40px;
2838
- height: 40px;
2839
- border-left: 3px solid var(--octo-mint);
2840
- border-top: 3px solid var(--octo-mint);
2841
- border-radius: var(--lcars-radius-md) 0 0 0;
2842
- }
2843
- }
2844
-
2845
- // Scan line animation (subtle LCARS effect)
2846
- .lcars-scanline {
2847
- position: relative;
2848
- overflow: hidden;
2849
-
2850
- &::after {
2851
- content: "";
2852
- position: absolute;
2853
- top: 0;
2854
- left: -100%;
2855
- width: 100%;
2856
- height: 100%;
2857
- background: linear-gradient(
2858
- 90deg,
2859
- transparent,
2860
- var(--octo-mint-05),
2861
- transparent
2862
- );
2863
- animation: lcars-scan 3s ease-in-out infinite;
2864
- }
2865
- }
2866
-
2867
- @keyframes lcars-scan {
2868
- 0% {
2869
- left: -100%;
2870
- }
2871
- 100% {
2872
- left: 100%;
2873
- }
2874
- }
2875
-
2876
- // Pulse animation for active/alert elements
2877
- @keyframes lcars-pulse {
2878
- 0%,
2879
- 100% {
2880
- opacity: 1;
2881
- }
2882
- 50% {
2883
- opacity: 0.7;
2884
- }
2885
- }
2886
-
2887
- .lcars-pulse {
2888
- animation: lcars-pulse 2s ease-in-out infinite;
2889
- }
2890
-
2891
2602
  // Layout
2892
2603
 
2893
2604
  .octo-body {
@@ -2911,18 +2622,18 @@
2911
2622
  }
2912
2623
 
2913
2624
  &::-webkit-scrollbar-thumb {
2914
- background: var(--ash-blue-80);
2915
- border-radius: 4px;
2916
- border: 1px solid var(--octo-mint-30);
2625
+ background: var(--theme-border-strong, var(--ash-blue-80));
2626
+ border-radius: var(--theme-radius-sm, 4px);
2627
+ border: none;
2917
2628
 
2918
2629
  &:hover {
2919
- background: var(--octo-mint);
2630
+ background: var(--theme-text-muted, var(--ash-blue));
2920
2631
  }
2921
2632
  }
2922
2633
 
2923
2634
  &::-webkit-scrollbar-track {
2924
- background: var(--iron-navy-60);
2925
- border-radius: 4px;
2635
+ background: transparent;
2636
+ border-radius: var(--theme-radius-sm, 4px);
2926
2637
  }
2927
2638
 
2928
2639
  // Override form container to not handle its own scrolling -
@@ -2966,7 +2677,7 @@
2966
2677
  min-height: 600px;
2967
2678
  }
2968
2679
 
2969
- // Scrollbars
2680
+ // Scrollbars — neutral thumb on a transparent track (Deep Sea)
2970
2681
 
2971
2682
  ::-webkit-scrollbar {
2972
2683
  width: 8px;
@@ -2974,145 +2685,118 @@
2974
2685
  }
2975
2686
 
2976
2687
  ::-webkit-scrollbar-track {
2977
- background: var(--deep-sea-50);
2978
- border-radius: var(--lcars-radius-sm);
2688
+ background: transparent;
2689
+ border-radius: var(--theme-radius-sm, 4px);
2979
2690
  }
2980
2691
 
2981
2692
  ::-webkit-scrollbar-thumb {
2982
- background: linear-gradient(180deg, var(--iron-navy), var(--ash-blue));
2983
- border-radius: var(--lcars-radius-sm);
2984
- border: 1px solid var(--octo-mint-20);
2693
+ background: var(--theme-border-strong, var(--ash-blue));
2694
+ border-radius: var(--theme-radius-sm, 4px);
2695
+ border: none;
2985
2696
 
2986
2697
  &:hover {
2987
- background: linear-gradient(180deg, var(--ash-blue), var(--octo-mint));
2698
+ background: var(--theme-text-muted, var(--ash-blue));
2988
2699
  }
2989
2700
  }
2990
2701
 
2991
2702
  // Firefox scrollbar
2992
2703
  * {
2993
2704
  scrollbar-width: thin;
2994
- scrollbar-color: var(--iron-navy) var(--deep-sea-50);
2705
+ scrollbar-color: var(--theme-border-strong, var(--iron-navy)) transparent;
2995
2706
  }
2996
2707
 
2997
- // Login popup
2708
+ // Login popup — flat overlay surface; start = end so the shared-auth
2709
+ // gradient variables render flat.
2998
2710
 
2999
2711
  mm-login-app-bar-section {
3000
- --mm-login-bg-start: var(--iron-navy);
3001
- --mm-login-bg-end: var(--surface-elevated);
3002
- --mm-login-accent: #{$octo-mint};
2712
+ --mm-login-bg-start: var(--theme-bg-overlay, var(--iron-navy));
2713
+ --mm-login-bg-end: var(--theme-bg-overlay, var(--surface-elevated));
2714
+ --mm-login-accent: var(--theme-accent, #{$octo-mint});
3003
2715
  --mm-login-accent-rgb: 100, 206, 185;
3004
2716
  --mm-login-text: var(--theme-text-on-accent, #ffffff);
3005
- --mm-login-btn-primary-start: #{$octo-mint};
3006
- --mm-login-btn-primary-end: #{color.adjust($octo-mint, $lightness: -10%)};
3007
- --mm-login-btn-primary-text: var(--deep-sea);
3008
- --mm-login-font: var(--lcars-font-primary);
2717
+ --mm-login-btn-primary-start: var(--theme-accent, #{$octo-mint});
2718
+ --mm-login-btn-primary-end: var(--theme-accent, #{$octo-mint});
2719
+ --mm-login-btn-primary-text: var(--theme-text-on-accent, var(--deep-sea));
2720
+ --mm-login-font: var(--theme-font-ui);
3009
2721
  }
3010
2722
 
3011
2723
  // Style the popup container itself
3012
2724
  .k-popup {
3013
- background: var(--iron-navy) !important;
3014
- border: 1px solid var(--octo-mint-30) !important;
3015
- border-radius: 8px !important;
3016
- box-shadow:
3017
- 0 8px 32px rgba(0, 0, 0, 0.4),
3018
- 0 0 20px var(--octo-mint-10) !important;
2725
+ background: var(--theme-bg-overlay, var(--iron-navy)) !important;
2726
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
2727
+ border-radius: var(--theme-radius-lg, 8px) !important;
2728
+ box-shadow: var(--theme-shadow-popup, 0 8px 32px rgba(0, 0, 0, 0.4)) !important;
3019
2729
  // Allow scrolling in dropdowns - do NOT use overflow: hidden
3020
2730
 
3021
- // Login popup content — rendered in body, so CSS variables from
2731
+ // Login popup content — rendered in body, so CSS variables from
3022
2732
  // mm-login-app-bar-section :host don't cascade here. Style directly.
3023
2733
  > .content {
3024
- --mm-login-bg-start: var(--iron-navy);
3025
- --mm-login-bg-end: var(--surface-elevated);
3026
- --mm-login-accent: #{$octo-mint};
2734
+ --mm-login-bg-start: var(--theme-bg-overlay, var(--iron-navy));
2735
+ --mm-login-bg-end: var(--theme-bg-overlay, var(--surface-elevated));
2736
+ --mm-login-accent: var(--theme-accent, #{$octo-mint});
3027
2737
  --mm-login-accent-rgb: 100, 206, 185;
3028
2738
  --mm-login-text: var(--theme-text-on-accent, #ffffff);
3029
- --mm-login-btn-primary-start: #{$octo-mint};
3030
- --mm-login-btn-primary-end: #{color.adjust($octo-mint, $lightness: -10%)};
3031
- --mm-login-btn-primary-text: var(--deep-sea);
3032
- --mm-login-font: var(--lcars-font-primary);
2739
+ --mm-login-btn-primary-start: var(--theme-accent, #{$octo-mint});
2740
+ --mm-login-btn-primary-end: var(--theme-accent, #{$octo-mint});
2741
+ --mm-login-btn-primary-text: var(--theme-text-on-accent, var(--deep-sea));
2742
+ --mm-login-font: var(--theme-font-ui);
3033
2743
 
3034
- background: linear-gradient(
3035
- 180deg,
3036
- var(--iron-navy),
3037
- var(--surface-elevated)
3038
- ) !important;
2744
+ background: var(--theme-bg-overlay, var(--iron-navy)) !important;
3039
2745
 
3040
2746
  .user-avatar {
3041
- border: 2px solid var(--octo-mint-40) !important;
3042
- box-shadow: 0 0 15px var(--octo-mint-30) !important;
2747
+ border: 1px solid var(--theme-border-default, var(--octo-mint-40)) !important;
2748
+ box-shadow: none !important;
3043
2749
 
3044
2750
  .k-avatar-text {
3045
- font-family: var(
3046
- --lcars-font-primary,
3047
- "Montserrat",
3048
- sans-serif
3049
- ) !important;
2751
+ font-family: var(--theme-font-display, "Montserrat", sans-serif) !important;
3050
2752
  font-weight: 600 !important;
3051
- text-transform: uppercase !important;
2753
+ text-transform: uppercase !important; // initials
3052
2754
  }
3053
2755
  }
3054
2756
 
3055
2757
  .user-name {
3056
- font-family: var(
3057
- --lcars-font-primary,
3058
- "Montserrat",
3059
- sans-serif
3060
- ) !important;
3061
- color: var(--octo-text-color) !important;
2758
+ font-family: var(--theme-font-display, "Montserrat", sans-serif) !important;
2759
+ color: var(--theme-text-primary, var(--octo-text-color)) !important;
3062
2760
  }
3063
2761
 
3064
2762
  .buttons {
3065
2763
  .k-button {
3066
- font-family: var(
3067
- --lcars-font-primary,
3068
- "Montserrat",
3069
- sans-serif
3070
- ) !important;
2764
+ font-family: var(--theme-font-ui, sans-serif) !important;
3071
2765
  }
3072
2766
 
3073
2767
  button.k-button-solid-primary {
3074
- background: linear-gradient(
3075
- 180deg,
3076
- var(--octo-mint),
3077
- color.adjust($octo-mint, $lightness: -10%)
3078
- ) !important;
2768
+ background: var(--theme-accent, var(--octo-mint)) !important;
3079
2769
  border: none !important;
3080
- color: var(--deep-sea) !important;
2770
+ color: var(--theme-text-on-accent, var(--deep-sea)) !important;
3081
2771
 
3082
2772
  &:hover {
3083
- background: linear-gradient(
3084
- 180deg,
3085
- color.adjust($octo-mint, $lightness: 5%),
3086
- var(--octo-mint)
3087
- ) !important;
3088
- box-shadow: 0 0 15px var(--octo-mint-50) !important;
2773
+ background: var(--theme-accent-hover, var(--octo-mint)) !important;
2774
+ box-shadow: none !important;
3089
2775
  }
3090
2776
  }
3091
2777
 
3092
2778
  a.k-button-solid {
3093
- background: var(--octo-mint-10) !important;
3094
- border: 1px solid var(--octo-mint-30) !important;
3095
- color: var(--octo-mint) !important;
2779
+ background: transparent !important;
2780
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
2781
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
3096
2782
 
3097
2783
  &:hover {
3098
- background: var(--octo-mint-20) !important;
3099
- box-shadow: 0 0 10px var(--octo-mint-30) !important;
2784
+ background: var(--theme-bg-hover, var(--octo-mint-20)) !important;
2785
+ box-shadow: none !important;
3100
2786
  }
3101
2787
  }
3102
2788
  }
3103
2789
  }
3104
2790
  }
3105
2791
 
3106
- // Context menu
2792
+ // Context menu — overlay surface, sentence case, neutral hover
3107
2793
  .k-context-menu,
3108
2794
  .k-menu.k-context-menu {
3109
- background: var(--iron-navy);
3110
- border: 1px solid var(--octo-mint-30);
3111
- border-radius: 8px;
3112
- box-shadow:
3113
- 0 8px 32px rgba(0, 0, 0, 0.5),
3114
- 0 0 20px var(--octo-mint-15);
3115
- padding: 8px 0;
2795
+ background: var(--theme-bg-overlay, var(--iron-navy));
2796
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30));
2797
+ border-radius: var(--theme-radius-lg, 8px);
2798
+ box-shadow: var(--theme-shadow-popup, 0 8px 32px rgba(0, 0, 0, 0.5));
2799
+ padding: 4px 0;
3116
2800
  min-width: 180px;
3117
2801
  overflow: hidden;
3118
2802
 
@@ -3121,14 +2805,16 @@
3121
2805
  margin: 0;
3122
2806
 
3123
2807
  .k-menu-link {
3124
- padding: 10px 16px;
3125
- color: var(--ash-blue);
3126
- font-family: var(--lcars-font-primary);
2808
+ padding: 8px 14px;
2809
+ color: var(--theme-text-primary, var(--ash-blue));
2810
+ font-family: var(--theme-font-ui, inherit);
3127
2811
  font-size: 0.85rem;
3128
- font-weight: 500;
3129
- text-transform: uppercase;
3130
- letter-spacing: 0.5px;
3131
- transition: all 0.15s ease;
2812
+ font-weight: 400;
2813
+ text-transform: none;
2814
+ letter-spacing: normal;
2815
+ transition:
2816
+ background-color var(--theme-motion-fast) var(--theme-motion-easing),
2817
+ color var(--theme-motion-fast) var(--theme-motion-easing);
3132
2818
  display: flex;
3133
2819
  align-items: center;
3134
2820
  gap: 12px;
@@ -3140,66 +2826,57 @@
3140
2826
  .k-svg-icon,
3141
2827
  .k-icon,
3142
2828
  svg {
3143
- fill: var(--ash-blue);
3144
- color: var(--ash-blue);
3145
- width: 18px;
3146
- height: 18px;
3147
- transition: all 0.15s ease;
2829
+ fill: var(--theme-text-secondary, var(--ash-blue));
2830
+ color: var(--theme-text-secondary, var(--ash-blue));
2831
+ width: 16px;
2832
+ height: 16px;
3148
2833
  }
3149
2834
  }
3150
2835
 
3151
2836
  // Hover state
3152
2837
  &:hover > .k-menu-link,
3153
2838
  &.k-hover > .k-menu-link {
3154
- background: linear-gradient(
3155
- 90deg,
3156
- var(--octo-mint-20),
3157
- var(--octo-mint-05)
3158
- );
3159
- color: var(--octo-mint);
2839
+ background: var(--theme-bg-hover, var(--octo-mint-10));
2840
+ color: var(--theme-text-primary, var(--octo-mint));
3160
2841
 
3161
2842
  .k-svg-icon,
3162
2843
  .k-icon,
3163
2844
  svg {
3164
- fill: var(--octo-mint);
3165
- color: var(--octo-mint);
2845
+ fill: var(--theme-text-primary, var(--octo-mint));
2846
+ color: var(--theme-text-primary, var(--octo-mint));
3166
2847
  }
3167
2848
  }
3168
2849
 
3169
2850
  // Focus state
3170
2851
  &:focus > .k-menu-link,
3171
2852
  &.k-focus > .k-menu-link {
3172
- background: var(--octo-mint-15);
3173
- box-shadow: inset 3px 0 0 var(--octo-mint);
2853
+ background: var(--theme-bg-selected, var(--octo-mint-15));
2854
+ box-shadow: none;
3174
2855
  }
3175
2856
 
3176
2857
  // Delete/destructive action styling
3177
2858
  &[data-command="delete"],
3178
2859
  &.destructive {
3179
2860
  .k-menu-link {
3180
- color: var(--bubblegum);
2861
+ color: var(--theme-status-error, var(--bubblegum));
3181
2862
 
3182
2863
  .k-svg-icon,
3183
2864
  .k-icon,
3184
2865
  svg {
3185
- fill: var(--bubblegum);
3186
- color: var(--bubblegum);
2866
+ fill: var(--theme-status-error, var(--bubblegum));
2867
+ color: var(--theme-status-error, var(--bubblegum));
3187
2868
  }
3188
2869
  }
3189
2870
 
3190
2871
  &:hover > .k-menu-link {
3191
- background: linear-gradient(
3192
- 90deg,
3193
- var(--bubblegum-20),
3194
- var(--bubblegum-05)
3195
- );
3196
- color: var(--bubblegum);
2872
+ background: var(--theme-status-error-subtle, var(--bubblegum-10));
2873
+ color: var(--theme-status-error, var(--bubblegum));
3197
2874
 
3198
2875
  .k-svg-icon,
3199
2876
  .k-icon,
3200
2877
  svg {
3201
- fill: var(--bubblegum);
3202
- color: var(--bubblegum);
2878
+ fill: var(--theme-status-error, var(--bubblegum));
2879
+ color: var(--theme-status-error, var(--bubblegum));
3203
2880
  }
3204
2881
  }
3205
2882
  }
@@ -3208,14 +2885,9 @@
3208
2885
  // Separator
3209
2886
  .k-menu-separator,
3210
2887
  .k-separator {
3211
- margin: 8px 12px;
2888
+ margin: 4px 0;
3212
2889
  height: 1px;
3213
- background: linear-gradient(
3214
- 90deg,
3215
- transparent,
3216
- var(--octo-mint-30),
3217
- transparent
3218
- );
2890
+ background: var(--theme-border-subtle, var(--octo-mint-20));
3219
2891
  border: none;
3220
2892
  }
3221
2893
  }
@@ -3223,14 +2895,14 @@
3223
2895
  // Context menu popup wrapper
3224
2896
  .k-menu-popup {
3225
2897
  .k-context-menu {
3226
- background: var(--iron-navy);
2898
+ background: var(--theme-bg-overlay, var(--iron-navy));
3227
2899
  }
3228
2900
  }
3229
2901
 
3230
2902
  // Animation container for context menu
3231
2903
  .k-animation-container {
3232
2904
  &:has(.k-context-menu) {
3233
- border-radius: 8px;
2905
+ border-radius: var(--theme-radius-lg, 8px);
3234
2906
  overflow: hidden;
3235
2907
  }
3236
2908
  }
@@ -3257,31 +2929,31 @@
3257
2929
  // Context menu button (three-dot icon) - override Kendo default gray background
3258
2930
  .k-icon-button {
3259
2931
  background: transparent;
3260
- border-color: var(--octo-mint-30);
3261
- color: var(--octo-mint);
2932
+ border-color: transparent;
2933
+ color: var(--theme-text-secondary, var(--octo-mint));
3262
2934
 
3263
2935
  &:hover {
3264
- background: var(--octo-mint-10);
3265
- border-color: var(--octo-mint-50);
2936
+ background: var(--theme-bg-hover, var(--octo-mint-10));
2937
+ color: var(--theme-text-primary, var(--octo-mint));
3266
2938
  }
3267
2939
  }
3268
2940
  }
3269
2941
 
3270
2942
  // List view toolbar styling
3271
2943
  .list-view-toolbar {
3272
- background: linear-gradient(90deg, var(--octo-mint-10), transparent);
3273
- border-bottom: 1px solid var(--octo-mint-20);
2944
+ background: var(--theme-bg-elevated, transparent);
2945
+ border-bottom: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
3274
2946
  padding: 12px 16px;
3275
2947
 
3276
2948
  .k-button {
3277
- @include lcars-button;
2949
+ @include octo-button;
3278
2950
  }
3279
2951
  }
3280
2952
 
3281
2953
  // Kendo grid toolbar (rendered by mm-list-view / kendo-grid internally)
3282
2954
  .k-grid-toolbar {
3283
2955
  .k-button {
3284
- @include lcars-button;
2956
+ @include octo-button;
3285
2957
  }
3286
2958
  }
3287
2959
 
@@ -3303,7 +2975,7 @@
3303
2975
  }
3304
2976
 
3305
2977
  .k-button {
3306
- @include lcars-button;
2978
+ @include octo-button;
3307
2979
  }
3308
2980
 
3309
2981
  // Responsive
@@ -3319,15 +2991,18 @@
3319
2991
  }
3320
2992
  }
3321
2993
 
3322
- // LCARS Page Layout Pattern
3323
- // Use for all page-level list components
3324
- // 80px tall for 29px of text: the height came from a 56px accent bar plus
3325
- // 12px of padding, not from the content. Compacted to ~37px, which is worth
3326
- // about one and a half table rows on every list page.
2994
+ // --------------------------------------------------------------------------
2995
+ // Legacy LCARS page pattern — kept ONLY for the Meshmakers App until it
2996
+ // migrates to <mm-page> (AB#5526). The Refinery Studio no longer uses these
2997
+ // classes; new pages use <mm-page> from @meshmakers/octo-ui. Deep Sea look:
2998
+ // no accent bar or header rule, sentence-case display title, a plain
2999
+ // surface card for the content panel, and no "READY" footer (concept §3.4).
3000
+ // --------------------------------------------------------------------------
3327
3001
  .lcars-page-header {
3328
3002
  display: flex;
3329
3003
  align-items: center;
3330
- gap: 12px;
3004
+ flex-wrap: wrap;
3005
+ gap: 8px 12px;
3331
3006
  padding: 4px 0;
3332
3007
  flex-shrink: 0;
3333
3008
 
@@ -3336,14 +3011,9 @@
3336
3011
  }
3337
3012
  }
3338
3013
 
3339
- .lcars-header-accent {
3340
- width: 8px;
3341
- height: 26px;
3342
- align-self: center;
3343
- background: linear-gradient(180deg, var(--octo-mint), var(--neo-cyan));
3344
- border-radius: 4px 0 0 4px;
3345
- box-shadow: 0 0 15px var(--octo-mint-50);
3346
- flex-shrink: 0;
3014
+ .lcars-header-accent,
3015
+ .lcars-header-line {
3016
+ display: none;
3347
3017
  }
3348
3018
 
3349
3019
  .header-content {
@@ -3355,88 +3025,43 @@
3355
3025
  .page-title {
3356
3026
  display: flex;
3357
3027
  align-items: baseline;
3358
- gap: 12px;
3028
+ flex-wrap: wrap;
3029
+ gap: 4px 10px;
3359
3030
  margin: 0;
3360
- font-family: var(--lcars-font-primary);
3031
+ font-family: var(--theme-font-display);
3361
3032
 
3362
3033
  .title-prefix {
3363
- font-size: 0.7rem;
3364
- font-weight: 600;
3365
- letter-spacing: 3px;
3366
- color: var(--ash-blue);
3367
- text-transform: uppercase;
3034
+ font-family: var(--theme-font-ui, inherit);
3035
+ font-size: 0.8125rem;
3036
+ font-weight: 500;
3037
+ letter-spacing: normal;
3038
+ color: var(--theme-text-secondary, var(--ash-blue));
3039
+ text-transform: none;
3368
3040
  }
3369
3041
 
3370
3042
  .title-main {
3371
- font-size: 1.5rem;
3043
+ font-size: 1.25rem;
3044
+ line-height: 1.4;
3372
3045
  font-weight: 600;
3373
- letter-spacing: 2px;
3374
- color: var(--octo-text-color);
3375
- text-transform: uppercase;
3046
+ letter-spacing: normal;
3047
+ color: var(--theme-text-primary, var(--octo-text-color));
3048
+ text-transform: none;
3376
3049
  }
3377
3050
  }
3378
3051
 
3379
- .header-stats {
3380
- display: flex;
3381
- gap: 16px;
3382
- }
3383
-
3384
- .stat-badge {
3385
- display: flex;
3386
- align-items: center;
3387
- gap: 8px;
3388
- padding: 4px 12px;
3389
- background: var(--octo-mint-10);
3390
- border: 1px solid var(--octo-mint-30);
3391
- border-radius: 4px;
3392
-
3393
- .badge-icon {
3394
- font-size: 0.6rem;
3395
- color: var(--octo-mint);
3396
- animation: lcars-pulse 2s ease-in-out infinite;
3397
- }
3398
-
3399
- .badge-label {
3400
- font-size: 0.75rem;
3401
- font-weight: 500;
3402
- color: var(--octo-mint);
3403
- text-transform: uppercase;
3404
- letter-spacing: 1px;
3405
- }
3406
- }
3407
-
3408
- .lcars-header-line {
3409
- flex: 1;
3410
- height: 2px;
3411
- background: linear-gradient(
3412
- 90deg,
3413
- var(--octo-mint),
3414
- var(--neo-cyan),
3415
- transparent
3416
- );
3417
- border-radius: 1px;
3418
- align-self: center;
3419
- }
3420
-
3421
3052
  // Content Panel
3422
3053
  .lcars-content-panel {
3423
3054
  flex: 1;
3424
3055
  display: flex;
3425
3056
  flex-direction: column;
3426
3057
  position: relative;
3427
- background: var(--surface-elevated-40);
3428
- border: 1px solid var(--octo-mint-20);
3429
- border-radius: 8px;
3058
+ background: var(--theme-bg-surface, var(--surface-elevated-40));
3059
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20));
3060
+ border-radius: var(--theme-radius-md, 6px);
3061
+ box-shadow: var(--theme-shadow-panel, none);
3430
3062
  overflow: hidden;
3431
3063
  min-height: 0;
3432
3064
 
3433
- &:hover {
3434
- border-color: var(--octo-mint-35);
3435
- box-shadow:
3436
- 0 4px 30px rgba(0, 0, 0, 0.3),
3437
- 0 0 30px var(--octo-mint-08);
3438
- }
3439
-
3440
3065
  // Ensure child components fill available space
3441
3066
  mm-list-view,
3442
3067
  mm-base-tree-detail {
@@ -3447,245 +3072,79 @@
3447
3072
  }
3448
3073
  }
3449
3074
 
3450
- .panel-accent-top {
3451
- height: 3px;
3452
- background: linear-gradient(
3453
- 90deg,
3454
- var(--octo-mint),
3455
- var(--neo-cyan),
3456
- var(--royal-violet)
3457
- );
3458
- flex-shrink: 0;
3459
- }
3460
-
3075
+ .panel-accent-top,
3461
3076
  .panel-accent-bottom {
3462
- height: 2px;
3463
- background: linear-gradient(
3464
- 90deg,
3465
- transparent,
3466
- var(--octo-mint-30),
3467
- transparent
3468
- );
3469
- flex-shrink: 0;
3470
- }
3471
-
3472
- // LCARS Footer
3473
- .lcars-footer {
3474
- display: flex;
3475
- align-items: center;
3476
- gap: 8px;
3477
- padding: 8px 0;
3478
- flex-shrink: 0;
3479
- }
3480
-
3481
- .footer-bar {
3482
- height: 8px;
3483
- border-radius: 4px;
3484
- transition: all 0.3s ease;
3485
-
3486
- &.bar-1 {
3487
- width: 60px;
3488
- background: linear-gradient(90deg, var(--octo-mint), var(--neo-cyan));
3489
- box-shadow: 0 0 8px var(--octo-mint-40);
3490
- }
3491
-
3492
- &.bar-2 {
3493
- width: 40px;
3494
- background: var(--royal-violet);
3495
- box-shadow: 0 0 8px var(--royal-violet-40);
3496
- }
3497
-
3498
- &.bar-3 {
3499
- width: 24px;
3500
- background: var(--toffee);
3501
- box-shadow: 0 0 8px var(--toffee-40);
3502
- }
3503
- }
3504
-
3505
- .footer-spacer {
3506
- flex: 1;
3077
+ display: none;
3507
3078
  }
3508
3079
 
3080
+ // The "READY" footer is gone; its parts stay defined so stray markup
3081
+ // renders nothing.
3082
+ .lcars-footer,
3083
+ .footer-bar,
3084
+ .footer-spacer,
3509
3085
  .footer-indicator {
3510
- display: flex;
3511
- align-items: center;
3512
- gap: 8px;
3513
- padding: 4px 12px;
3514
- background: rgba(55, 180, 0, 0.1);
3515
- border: 1px solid rgba(55, 180, 0, 0.3);
3516
- border-radius: 4px;
3517
-
3518
- .indicator-dot {
3519
- width: 8px;
3520
- height: 8px;
3521
- border-radius: 50%;
3522
- background: #37b400;
3523
- box-shadow: 0 0 10px rgba(55, 180, 0, 0.6);
3524
- animation: lcars-pulse 2s ease-in-out infinite;
3525
- }
3526
-
3527
- .indicator-text {
3528
- font-family: var(--lcars-font-primary);
3529
- font-size: 0.7rem;
3530
- font-weight: 600;
3531
- letter-spacing: 2px;
3532
- color: #37b400;
3533
- text-transform: uppercase;
3534
- }
3535
- }
3536
-
3537
- // Responsive LCARS Page Layout
3538
- @media (max-width: 1024px) {
3539
- .page-title .title-main {
3540
- font-size: 1.25rem;
3541
- }
3542
-
3543
- .lcars-header-accent {
3544
- height: 48px;
3545
- }
3086
+ display: none;
3546
3087
  }
3547
3088
 
3548
3089
  @media (max-width: 768px) {
3549
- .lcars-page-header {
3550
- flex-wrap: wrap;
3551
- gap: 10px;
3552
- }
3553
-
3554
- .lcars-header-accent {
3555
- width: 6px;
3556
- height: 40px;
3557
- }
3558
-
3559
- .page-title {
3560
- flex-direction: column;
3561
- gap: 2px;
3562
-
3563
- .title-prefix {
3564
- font-size: 0.6rem;
3565
- }
3566
-
3567
- .title-main {
3568
- font-size: 1.1rem;
3569
- }
3570
- }
3571
-
3572
- .header-stats {
3573
- display: none;
3574
- }
3575
-
3576
- .lcars-header-line {
3577
- width: 100%;
3578
- order: 3;
3579
- }
3580
-
3581
- .lcars-footer {
3582
- flex-wrap: wrap;
3583
- gap: 6px;
3584
-
3585
- .footer-bar {
3586
- height: 6px;
3587
-
3588
- &.bar-1 {
3589
- width: 40px;
3590
- }
3591
- &.bar-2 {
3592
- width: 28px;
3593
- }
3594
- &.bar-3 {
3595
- width: 18px;
3596
- }
3597
- }
3598
- }
3599
-
3600
- .footer-indicator {
3601
- padding: 3px 8px;
3602
-
3603
- .indicator-text {
3604
- font-size: 0.6rem;
3605
- }
3606
- }
3607
- }
3608
-
3609
- @media (max-width: 480px) {
3610
3090
  .page-title .title-main {
3611
- font-size: 0.95rem;
3612
- letter-spacing: 1px;
3613
- }
3614
-
3615
- .footer-bar {
3616
- &.bar-2,
3617
- &.bar-3 {
3618
- display: none;
3619
- }
3091
+ font-size: 1.1rem;
3620
3092
  }
3621
3093
  }
3622
3094
 
3623
3095
  // mm-base-form
3624
3096
  .mm-base-form-container {
3625
- // Override form CSS custom properties for LCARS theme
3626
- --mm-form-bg: color-mix(in srgb, var(--surface-elevated) 60%, transparent);
3627
- --mm-form-bg-alt: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
3628
- --mm-form-border: var(--octo-mint-20);
3629
- --mm-form-border-subtle: var(--octo-mint-15);
3630
- --mm-form-text: var(--octo-text-color);
3631
- --mm-form-text-subtle: var(--ash-blue);
3632
- --mm-form-text-label: var(--ash-blue);
3633
- --mm-form-accent: var(--octo-mint);
3097
+ // Form CSS custom properties from the Deep Sea tokens
3098
+ --mm-form-bg: var(--theme-bg-surface, color-mix(in srgb, var(--surface-elevated) 60%, transparent));
3099
+ --mm-form-bg-alt: var(--theme-bg-elevated, color-mix(in srgb, var(--surface-elevated) 80%, transparent));
3100
+ --mm-form-border: var(--theme-border-default, var(--octo-mint-20));
3101
+ --mm-form-border-subtle: var(--theme-border-subtle, var(--octo-mint-15));
3102
+ --mm-form-text: var(--theme-text-primary, var(--octo-text-color));
3103
+ --mm-form-text-subtle: var(--theme-text-secondary, var(--ash-blue));
3104
+ --mm-form-text-label: var(--theme-text-secondary, var(--ash-blue));
3105
+ --mm-form-accent: var(--theme-accent, var(--octo-mint));
3634
3106
  --mm-form-error: var(--theme-status-error, #ec658f);
3635
- --mm-form-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
3107
+ --mm-form-shadow: var(--theme-shadow-panel, 0 4px 20px rgba(0, 0, 0, 0.3));
3636
3108
  --mm-form-overlay-bg: color-mix(in srgb, var(--deep-sea) 95%, transparent);
3637
3109
 
3638
- background: linear-gradient(180deg, var(--deep-sea-95), var(--deep-sea));
3110
+ background: var(--theme-bg-app, var(--deep-sea));
3639
3111
 
3640
3112
  // Extra padding at bottom for scroll visibility
3641
3113
  padding-bottom: 32px !important;
3642
3114
 
3643
- // Form wrapper LCARS styling
3115
+ // Form wrapper
3644
3116
  .mm-form-wrapper {
3645
- border-radius: 8px;
3117
+ border-radius: var(--theme-radius-md, 6px);
3646
3118
  width: 100% !important;
3647
3119
  max-width: 1400px !important;
3648
3120
  margin: 0 0 64px 0 !important; // Left-align with bottom margin for scroll space
3649
-
3650
- &::before {
3651
- content: "";
3652
- display: block;
3653
- height: 3px;
3654
- background: linear-gradient(
3655
- 90deg,
3656
- var(--octo-mint),
3657
- var(--neo-cyan),
3658
- var(--royal-violet)
3659
- );
3660
- border-radius: 8px 8px 0 0;
3661
- }
3662
3121
  }
3663
3122
 
3664
- // Form header LCARS styling
3123
+ // Form header
3665
3124
  .mm-form-header {
3666
- background: var(--octo-mint-05);
3667
- border-bottom-color: var(--octo-mint-20);
3125
+ background: var(--theme-bg-elevated, transparent);
3126
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-20));
3668
3127
 
3669
3128
  .mm-form-title {
3670
- font-family: var(--lcars-font-primary);
3671
- text-transform: uppercase;
3672
- letter-spacing: 1px;
3673
- color: var(--octo-text-color);
3129
+ font-family: var(--theme-font-display);
3130
+ text-transform: none;
3131
+ letter-spacing: normal;
3132
+ color: var(--theme-text-primary, var(--octo-text-color));
3674
3133
  }
3675
3134
  }
3676
3135
 
3677
- // Form actions - LCARS button styling
3136
+ // Form actions
3678
3137
  .mm-form-actions {
3679
- background: var(--octo-mint-05);
3680
- border-top-color: var(--octo-mint-20);
3138
+ background: var(--theme-bg-elevated, transparent);
3139
+ border-top-color: var(--theme-border-subtle, var(--octo-mint-20));
3681
3140
 
3682
3141
  .k-button {
3683
- @include lcars-button;
3142
+ @include octo-button;
3684
3143
  }
3685
3144
  }
3686
3145
  }
3687
3146
 
3688
- // Markdown Widget & Config Dialog - LCARS theme via CSS variable overrides
3147
+ // Markdown Widget & Config Dialog - theme via CSS variable overrides
3689
3148
  mm-markdown-widget,
3690
3149
  mm-markdown-config-dialog {
3691
3150
  --mm-prose-text: #c8d0d8;
@@ -3709,7 +3168,7 @@
3709
3168
  --mm-prose-hr-start: #{$octo-mint};
3710
3169
  --mm-prose-hr-end: #{$neo-cyan};
3711
3170
  --mm-prose-img-border: rgba(#{$octo-mint}, 0.2);
3712
- --mm-prose-font: var(--lcars-font-primary);
3171
+ --mm-prose-font: var(--theme-font-ui);
3713
3172
  }
3714
3173
 
3715
3174
  mm-markdown-config-dialog {
@@ -3728,19 +3187,13 @@
3728
3187
 
3729
3188
  // MeshBoard View Container
3730
3189
  .meshboard-view {
3731
- background: linear-gradient(
3732
- 180deg,
3733
- var(--deep-sea-95),
3734
- var(--deep-sea)
3735
- ) !important;
3190
+ background: var(--theme-bg-app) !important;
3736
3191
 
3737
3192
  // Loading state
3738
3193
  .loading-container {
3739
3194
  .k-loading-text {
3740
- color: var(--octo-mint);
3741
- font-family: var(--lcars-font-primary);
3742
- text-transform: uppercase;
3743
- letter-spacing: 1px;
3195
+ color: var(--theme-text-accent, var(--octo-mint));
3196
+ font-family: var(--theme-font-ui);
3744
3197
  }
3745
3198
  }
3746
3199
 
@@ -3748,26 +3201,22 @@
3748
3201
  .model-unavailable {
3749
3202
  .message-card {
3750
3203
  background: var(--surface-elevated-90);
3751
- border: 1px solid var(--octo-mint-30);
3204
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30));
3752
3205
  border-radius: 8px;
3753
- box-shadow:
3754
- 0 8px 32px rgba(0, 0, 0, 0.4),
3755
- 0 0 20px var(--octo-mint-10);
3206
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
3756
3207
 
3757
3208
  &::before {
3758
3209
  content: "";
3759
3210
  display: block;
3760
3211
  height: 3px;
3761
- background: linear-gradient(90deg, var(--bubblegum), var(--toffee));
3212
+ background: var(--theme-status-error, var(--bubblegum));
3762
3213
  border-radius: 8px 8px 0 0;
3763
3214
  margin: -2rem -2rem 1.5rem -2rem;
3764
3215
  }
3765
3216
 
3766
3217
  h2 {
3767
3218
  color: var(--octo-text-color);
3768
- font-family: var(--lcars-font-primary);
3769
- text-transform: uppercase;
3770
- letter-spacing: 1px;
3219
+ font-family: var(--theme-font-display);
3771
3220
  }
3772
3221
 
3773
3222
  p {
@@ -3778,11 +3227,10 @@
3778
3227
  color: var(--ash-blue);
3779
3228
 
3780
3229
  a {
3781
- color: var(--octo-mint);
3230
+ color: var(--theme-text-accent, var(--octo-mint));
3782
3231
 
3783
3232
  &:hover {
3784
3233
  color: var(--neo-cyan);
3785
- text-shadow: 0 0 8px var(--octo-mint-50);
3786
3234
  }
3787
3235
  }
3788
3236
  }
@@ -3794,22 +3242,18 @@
3794
3242
  }
3795
3243
  }
3796
3244
 
3797
- // MeshBoard Toolbar - LCARS style
3245
+ // MeshBoard Toolbar
3798
3246
  .meshboard-toolbar {
3799
- background: linear-gradient(
3800
- 90deg,
3801
- var(--iron-navy),
3802
- var(--surface-elevated)
3803
- ) !important;
3804
- border-bottom: 2px solid var(--octo-mint-30) !important;
3805
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
3247
+ background: var(--theme-bg-elevated) !important;
3248
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
3249
+ // No drop shadow: the border separates the header (Deep Sea §6.1 — flat surfaces; the shadow
3250
+ // read as a heavy band in the light theme, visual check #18).
3251
+ box-shadow: none;
3806
3252
 
3807
3253
  .toolbar-left {
3808
3254
  .meshboard-title {
3809
3255
  color: var(--octo-text-color) !important;
3810
- font-family: var(--lcars-font-primary);
3811
- text-transform: uppercase;
3812
- letter-spacing: 1px;
3256
+ font-family: var(--theme-font-display);
3813
3257
  }
3814
3258
 
3815
3259
  .meshboard-description {
@@ -3820,30 +3264,28 @@
3820
3264
  .toolbar-right,
3821
3265
  .mm-toolbar-actions {
3822
3266
  .k-button {
3823
- @include lcars-button;
3267
+ @include octo-button;
3824
3268
  }
3825
3269
  }
3826
3270
  }
3827
3271
 
3828
- // MeshBoard Empty State - LCARS style
3272
+ // MeshBoard Empty State
3829
3273
  .meshboard-view .empty-state {
3830
3274
  .empty-state-content {
3831
3275
  background: var(--surface-elevated-60);
3832
- border: 1px solid var(--octo-mint-20);
3276
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20));
3833
3277
  border-radius: 12px;
3834
3278
  padding: 3rem;
3835
3279
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
3836
3280
 
3837
3281
  kendo-svg-icon {
3838
- color: var(--octo-mint) !important;
3282
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3839
3283
  opacity: 0.6;
3840
3284
  }
3841
3285
 
3842
3286
  h3 {
3843
3287
  color: var(--octo-text-color) !important;
3844
- font-family: var(--lcars-font-primary);
3845
- text-transform: uppercase;
3846
- letter-spacing: 1px;
3288
+ font-family: var(--theme-font-display);
3847
3289
  }
3848
3290
 
3849
3291
  p {
@@ -3851,47 +3293,40 @@
3851
3293
  }
3852
3294
 
3853
3295
  .k-button {
3854
- @include lcars-button;
3296
+ @include octo-button;
3855
3297
  }
3856
3298
  }
3857
3299
  }
3858
3300
 
3859
- // Kendo TileLayout - LCARS style
3301
+ // Kendo TileLayout
3860
3302
  kendo-tilelayout {
3861
3303
  background: transparent !important;
3862
3304
 
3863
3305
  kendo-tilelayout-item {
3864
- background: var(--surface-elevated-60) !important;
3865
- border: 1px solid var(--octo-mint-20) !important;
3866
- border-radius: 8px !important;
3306
+ background: var(--theme-bg-surface, var(--surface-elevated-60)) !important;
3307
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
3308
+ border-radius: var(--theme-radius-md, 6px) !important;
3309
+ box-shadow: var(--theme-shadow-panel, none);
3867
3310
  overflow: hidden;
3868
3311
  transition:
3869
- border-color 0.2s ease,
3870
- box-shadow 0.2s ease;
3312
+ border-color var(--theme-motion-base) var(--theme-motion-easing),
3313
+ box-shadow var(--theme-motion-base) var(--theme-motion-easing);
3871
3314
 
3872
3315
  &:hover {
3873
- border-color: var(--octo-mint-40) !important;
3874
- box-shadow:
3875
- 0 4px 20px rgba(0, 0, 0, 0.3),
3876
- 0 0 15px var(--octo-mint-10);
3316
+ border-color: var(--theme-border-strong, var(--octo-mint-40)) !important;
3317
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
3877
3318
  }
3878
3319
 
3879
3320
  // Widget header
3880
3321
  kendo-tilelayout-item-header {
3881
- background: linear-gradient(
3882
- 90deg,
3883
- var(--octo-mint-10),
3884
- transparent
3885
- ) !important;
3886
- border-bottom: 1px solid var(--octo-mint-20) !important;
3322
+ background: var(--theme-bg-elevated) !important;
3323
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
3887
3324
 
3888
3325
  .widget-header {
3889
3326
  .widget-title {
3890
- color: var(--octo-mint) !important;
3891
- font-family: var(--lcars-font-primary);
3327
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
3328
+ font-family: var(--theme-font-display);
3892
3329
  font-weight: 600;
3893
- text-transform: uppercase;
3894
- letter-spacing: 0.5px;
3895
3330
  font-size: 0.85rem;
3896
3331
  }
3897
3332
 
@@ -3901,7 +3336,7 @@
3901
3336
 
3902
3337
  .unconfigured-badge {
3903
3338
  background: var(--toffee) !important;
3904
- box-shadow: 0 0 8px var(--toffee-50);
3339
+ box-shadow: none;
3905
3340
  }
3906
3341
 
3907
3342
  .widget-actions {
@@ -3909,8 +3344,8 @@
3909
3344
  color: var(--ash-blue);
3910
3345
 
3911
3346
  &:hover {
3912
- color: var(--octo-mint);
3913
- background: var(--octo-mint-15);
3347
+ color: var(--theme-text-primary, var(--octo-mint));
3348
+ background: var(--theme-bg-hover, var(--octo-mint-15));
3914
3349
  }
3915
3350
  }
3916
3351
 
@@ -3931,7 +3366,7 @@
3931
3366
 
3932
3367
  // Widget body
3933
3368
  kendo-tilelayout-item-body {
3934
- background: var(--deep-sea-50) !important;
3369
+ background: var(--theme-bg-surface, var(--deep-sea-50)) !important;
3935
3370
  }
3936
3371
  }
3937
3372
  }
@@ -3945,7 +3380,7 @@
3945
3380
  // Widget Error State
3946
3381
  .widget-error {
3947
3382
  color: var(--bubblegum) !important;
3948
- font-family: var(--lcars-font-primary);
3383
+ font-family: var(--theme-font-ui);
3949
3384
  }
3950
3385
 
3951
3386
  // MeshBoard widgets
@@ -3953,9 +3388,9 @@
3953
3388
  // KPI Widget
3954
3389
  .kpi-widget {
3955
3390
  .kpi-value {
3956
- color: var(--octo-mint) !important;
3957
- font-family: var(--lcars-font-primary);
3958
- text-shadow: 0 0 20px var(--octo-mint-30);
3391
+ color: var(--theme-text-primary, var(--octo-mint)) !important;
3392
+ font-family: var(--theme-font-display);
3393
+ font-variant-numeric: tabular-nums;
3959
3394
  }
3960
3395
 
3961
3396
  .kpi-prefix,
@@ -3965,15 +3400,13 @@
3965
3400
 
3966
3401
  .kpi-label {
3967
3402
  color: var(--ash-blue) !important;
3968
- font-family: var(--lcars-font-primary);
3969
- text-transform: uppercase;
3970
- letter-spacing: 1px;
3403
+ font-family: var(--theme-font-ui);
3971
3404
  }
3972
3405
 
3973
3406
  .kpi-trend {
3974
3407
  &.trend-up {
3975
3408
  background: var(--octo-mint-15) !important;
3976
- color: var(--octo-mint) !important;
3409
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3977
3410
  }
3978
3411
 
3979
3412
  &.trend-down {
@@ -3988,18 +3421,17 @@
3988
3421
  }
3989
3422
  }
3990
3423
 
3991
- // Widget Group - LCARS item header styling
3424
+ // Widget Group - item header styling
3992
3425
  .widget-group-item-header {
3993
3426
  background: var(--iron-navy-80) !important;
3994
- border-bottom-color: var(--octo-mint-15) !important;
3427
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-15)) !important;
3995
3428
  }
3996
3429
 
3997
3430
  .widget-group-item-title {
3998
- font-family: var(--lcars-font-primary);
3999
- letter-spacing: 0.5px;
3431
+ font-family: var(--theme-font-display);
4000
3432
  }
4001
3433
 
4002
- // Entity Associations Widget - LCARS background styling
3434
+ // Entity Associations Widget - background styling
4003
3435
  .group-header {
4004
3436
  background: var(--iron-navy-60) !important;
4005
3437
 
@@ -4008,37 +3440,37 @@
4008
3440
  }
4009
3441
  }
4010
3442
 
4011
- // Stats Grid Widget - LCARS theme via CSS variable overrides
3443
+ // Stats Grid Widget - theme via CSS variable overrides
4012
3444
  mm-stats-grid-widget {
4013
3445
  --mm-stat-mint-bg: rgba(#{$octo-mint}, 0.1);
4014
3446
  --mm-stat-mint-border: #{$octo-mint};
4015
3447
  --mm-stat-mint-text: #{$octo-mint};
4016
- --mm-stat-mint-glow: 0 0 15px rgba(#{$octo-mint}, 0.4);
3448
+ --mm-stat-mint-glow: none;
4017
3449
 
4018
3450
  --mm-stat-cyan-bg: rgba(#{$neo-cyan}, 0.1);
4019
3451
  --mm-stat-cyan-border: #{$neo-cyan};
4020
3452
  --mm-stat-cyan-text: #{$neo-cyan};
4021
- --mm-stat-cyan-glow: 0 0 15px rgba(#{$neo-cyan}, 0.4);
3453
+ --mm-stat-cyan-glow: none;
4022
3454
 
4023
3455
  --mm-stat-violet-bg: rgba(#{$royal-violet}, 0.1);
4024
3456
  --mm-stat-violet-border: #{$royal-violet};
4025
3457
  --mm-stat-violet-text: #{$lilac-glow};
4026
- --mm-stat-violet-glow: 0 0 15px rgba(#{$royal-violet}, 0.4);
3458
+ --mm-stat-violet-glow: none;
4027
3459
 
4028
3460
  --mm-stat-toffee-bg: rgba(#{$toffee}, 0.1);
4029
3461
  --mm-stat-toffee-border: #{$toffee};
4030
3462
  --mm-stat-toffee-text: #{$toffee};
4031
- --mm-stat-toffee-glow: 0 0 15px rgba(#{$toffee}, 0.4);
3463
+ --mm-stat-toffee-glow: none;
4032
3464
 
4033
3465
  --mm-stat-lilac-bg: rgba(#{$lilac-glow}, 0.1);
4034
3466
  --mm-stat-lilac-border: #{$lilac-glow};
4035
3467
  --mm-stat-lilac-text: #{$lilac-glow};
4036
- --mm-stat-lilac-glow: 0 0 15px rgba(#{$lilac-glow}, 0.4);
3468
+ --mm-stat-lilac-glow: none;
4037
3469
 
4038
3470
  --mm-stat-bubblegum-bg: rgba(#{$bubblegum}, 0.1);
4039
3471
  --mm-stat-bubblegum-border: #{$bubblegum};
4040
3472
  --mm-stat-bubblegum-text: #{$bubblegum};
4041
- --mm-stat-bubblegum-glow: 0 0 15px rgba(#{$bubblegum}, 0.4);
3473
+ --mm-stat-bubblegum-glow: none;
4042
3474
 
4043
3475
  --mm-stat-default-bg: color-mix(in srgb, var(--ash-blue) 10%, transparent);
4044
3476
  --mm-stat-default-border: var(--ash-blue);
@@ -4046,28 +3478,26 @@
4046
3478
  --mm-stat-default-glow: none;
4047
3479
  }
4048
3480
 
4049
- // Additional stats-grid LCARS styling (hover, fonts, labels)
3481
+ // Additional stats-grid styling (hover, fonts, labels)
4050
3482
  .stats-grid {
4051
3483
  .stat-card {
4052
3484
  background: var(--surface-elevated-40) !important;
4053
- border: 1px solid var(--octo-mint-15);
3485
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
4054
3486
  border-radius: 8px;
4055
3487
 
4056
3488
  &:hover {
4057
- box-shadow:
4058
- 0 4px 16px rgba(0, 0, 0, 0.3),
4059
- 0 0 10px var(--octo-mint-15);
4060
- border-color: var(--octo-mint-30);
3489
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
3490
+ border-color: var(--theme-border-strong, var(--octo-mint-30));
4061
3491
  }
4062
3492
  }
4063
3493
 
4064
3494
  .stat-value {
4065
- font-family: var(--lcars-font-primary);
3495
+ font-family: var(--theme-font-display);
4066
3496
  }
4067
3497
 
4068
3498
  .stat-label {
4069
3499
  color: var(--ash-blue) !important;
4070
- font-family: var(--lcars-font-primary);
3500
+ font-family: var(--theme-font-ui);
4071
3501
  }
4072
3502
 
4073
3503
  .stats-error {
@@ -4078,35 +3508,33 @@
4078
3508
  // Service Health Widget
4079
3509
  .service-health {
4080
3510
  background: var(--surface-elevated-40) !important;
4081
- border: 1px solid var(--octo-mint-15);
3511
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
4082
3512
 
4083
3513
  &.clickable:hover {
4084
3514
  background: var(--surface-elevated-60) !important;
4085
- box-shadow:
4086
- 0 2px 12px rgba(0, 0, 0, 0.3),
4087
- 0 0 10px var(--octo-mint-10);
4088
- border-color: var(--octo-mint-30);
3515
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
3516
+ border-color: var(--theme-border-strong, var(--octo-mint-30));
4089
3517
  }
4090
3518
 
4091
3519
  &.healthy {
4092
3520
  .health-dot {
4093
3521
  background: var(--octo-mint) !important;
4094
- box-shadow: 0 0 12px var(--octo-mint-60);
3522
+ box-shadow: none;
4095
3523
  }
4096
3524
 
4097
3525
  .pulse-ring.pulse-active {
4098
- border-color: var(--octo-mint) !important;
3526
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
4099
3527
  }
4100
3528
 
4101
3529
  .health-status {
4102
- color: var(--octo-mint) !important;
3530
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4103
3531
  }
4104
3532
  }
4105
3533
 
4106
3534
  &.unhealthy {
4107
3535
  .health-dot {
4108
3536
  background: var(--bubblegum) !important;
4109
- box-shadow: 0 0 12px var(--bubblegum-60);
3537
+ box-shadow: none;
4110
3538
  }
4111
3539
 
4112
3540
  .pulse-ring {
@@ -4120,13 +3548,11 @@
4120
3548
 
4121
3549
  .service-name {
4122
3550
  color: var(--octo-text-color) !important;
4123
- font-family: var(--lcars-font-primary);
3551
+ font-family: var(--theme-font-display);
4124
3552
  }
4125
3553
 
4126
3554
  .health-status {
4127
- font-family: var(--lcars-font-primary);
4128
- text-transform: uppercase;
4129
- letter-spacing: 0.5px;
3555
+ font-family: var(--theme-font-ui);
4130
3556
  }
4131
3557
 
4132
3558
  .last-checked {
@@ -4134,17 +3560,13 @@
4134
3560
  }
4135
3561
  }
4136
3562
 
4137
- // Entity Card Widget - UML style with LCARS colors
3563
+ // Entity Card Widget - UML style
4138
3564
  .entity-card {
4139
3565
  background: var(--surface-elevated-60) !important;
4140
- border: 1px solid var(--octo-mint-20) !important;
3566
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
4141
3567
 
4142
3568
  .entity-header {
4143
- background: linear-gradient(
4144
- 180deg,
4145
- var(--octo-mint-30),
4146
- var(--octo-mint-15)
4147
- ) !important;
3569
+ background: var(--theme-accent-subtle) !important;
4148
3570
  border-bottom: 2px solid var(--octo-mint);
4149
3571
 
4150
3572
  .entity-stereotype {
@@ -4153,7 +3575,7 @@
4153
3575
 
4154
3576
  .entity-name {
4155
3577
  color: var(--octo-text-color) !important;
4156
- font-family: var(--lcars-font-primary);
3578
+ font-family: var(--theme-font-display);
4157
3579
  }
4158
3580
  }
4159
3581
 
@@ -4161,7 +3583,7 @@
4161
3583
  background: var(--deep-sea-50);
4162
3584
 
4163
3585
  .attribute-row {
4164
- border-bottom-color: var(--octo-mint-10) !important;
3586
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
4165
3587
 
4166
3588
  &:hover {
4167
3589
  background: var(--octo-mint-08) !important;
@@ -4179,11 +3601,11 @@
4179
3601
 
4180
3602
  .entity-footer {
4181
3603
  background: var(--iron-navy-50) !important;
4182
- border-top-color: var(--octo-mint-20) !important;
3604
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4183
3605
 
4184
3606
  .entity-id {
4185
3607
  color: var(--ash-blue) !important;
4186
- font-family: var(--lcars-font-mono);
3608
+ font-family: var(--theme-font-mono);
4187
3609
  }
4188
3610
  }
4189
3611
  }
@@ -4191,12 +3613,8 @@
4191
3613
  // Status Indicator Widget
4192
3614
  .status-indicator {
4193
3615
  .status-badge {
4194
- font-family: var(--lcars-font-primary);
4195
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
4196
- }
4197
-
4198
- .status-text {
4199
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
3616
+ font-family: var(--theme-font-ui);
3617
+ box-shadow: var(--theme-shadow-panel, none);
4200
3618
  }
4201
3619
 
4202
3620
  .status-error {
@@ -4215,23 +3633,17 @@
4215
3633
 
4216
3634
  .widget-types-list {
4217
3635
  background: var(--deep-sea-50) !important;
4218
- border-color: var(--octo-mint-20) !important;
3636
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4219
3637
 
4220
3638
  .list-header {
4221
- background: linear-gradient(
4222
- 90deg,
4223
- var(--octo-mint-10),
4224
- transparent
4225
- ) !important;
4226
- border-bottom-color: var(--octo-mint-20) !important;
4227
- color: var(--octo-mint) !important;
4228
- font-family: var(--lcars-font-primary);
4229
- text-transform: uppercase;
4230
- letter-spacing: 0.5px;
3639
+ background: var(--theme-bg-elevated) !important;
3640
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
3641
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3642
+ font-family: var(--theme-font-ui);
4231
3643
  }
4232
3644
 
4233
3645
  .widget-type-item {
4234
- border-bottom-color: var(--octo-mint-10) !important;
3646
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
4235
3647
 
4236
3648
  &:hover {
4237
3649
  background: var(--octo-mint-08) !important;
@@ -4244,7 +3656,7 @@
4244
3656
 
4245
3657
  .widget-icon {
4246
3658
  background: var(--octo-mint-10) !important;
4247
- color: var(--octo-mint) !important;
3659
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4248
3660
  }
4249
3661
 
4250
3662
  &.selected .widget-icon {
@@ -4263,14 +3675,14 @@
4263
3675
  }
4264
3676
 
4265
3677
  .selected-indicator {
4266
- color: var(--octo-mint) !important;
3678
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4267
3679
  }
4268
3680
  }
4269
3681
  }
4270
3682
  }
4271
3683
 
4272
3684
  .dialog-actions {
4273
- border-top-color: var(--octo-mint-20) !important;
3685
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4274
3686
  }
4275
3687
  }
4276
3688
 
@@ -4282,29 +3694,27 @@
4282
3694
  }
4283
3695
 
4284
3696
  .header-actions .k-button {
4285
- @include lcars-button;
3697
+ @include octo-button;
4286
3698
  }
4287
3699
  }
4288
3700
 
4289
3701
  .create-form {
4290
3702
  background: var(--surface-elevated-50) !important;
4291
- border-color: var(--octo-mint-20) !important;
3703
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4292
3704
 
4293
3705
  .form-title {
4294
- color: var(--octo-mint) !important;
4295
- font-family: var(--lcars-font-primary);
4296
- text-transform: uppercase;
4297
- letter-spacing: 0.5px;
3706
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3707
+ font-family: var(--theme-font-display);
4298
3708
  }
4299
3709
 
4300
3710
  .form-actions .k-button {
4301
- @include lcars-button;
3711
+ @include octo-button;
4302
3712
  }
4303
3713
  }
4304
3714
 
4305
3715
  .meshboards-list {
4306
3716
  background: var(--deep-sea-50) !important;
4307
- border-color: var(--octo-mint-20) !important;
3717
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4308
3718
 
4309
3719
  .loading-state,
4310
3720
  .empty-state {
@@ -4319,13 +3729,13 @@
4319
3729
  }
4320
3730
 
4321
3731
  kendo-svg-icon {
4322
- color: var(--octo-mint) !important;
3732
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4323
3733
  opacity: 0.5;
4324
3734
  }
4325
3735
  }
4326
3736
 
4327
3737
  .meshboard-item {
4328
- border-bottom-color: var(--octo-mint-10) !important;
3738
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
4329
3739
 
4330
3740
  &:not(.active):not(.editing):hover {
4331
3741
  background: var(--octo-mint-08) !important;
@@ -4343,7 +3753,7 @@
4343
3753
  .item-content {
4344
3754
  .item-icon {
4345
3755
  background: var(--octo-mint-10) !important;
4346
- color: var(--octo-mint) !important;
3756
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4347
3757
  }
4348
3758
 
4349
3759
  .item-info {
@@ -4373,7 +3783,7 @@
4373
3783
 
4374
3784
  .item-edit {
4375
3785
  .edit-actions .k-button {
4376
- @include lcars-button;
3786
+ @include octo-button;
4377
3787
  }
4378
3788
  }
4379
3789
  }
@@ -4398,25 +3808,21 @@
4398
3808
  .form-group {
4399
3809
  label {
4400
3810
  color: var(--ash-blue) !important;
4401
- font-family: var(--lcars-font-primary);
4402
- text-transform: uppercase;
4403
- letter-spacing: 0.5px;
3811
+ font-family: var(--theme-font-ui);
4404
3812
  font-size: 0.8rem;
4405
3813
  }
4406
3814
  }
4407
3815
 
4408
3816
  .section-title {
4409
- color: var(--octo-mint) !important;
4410
- border-bottom-color: var(--octo-mint-20) !important;
4411
- font-family: var(--lcars-font-primary);
3817
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3818
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
3819
+ font-family: var(--theme-font-display);
4412
3820
  }
4413
3821
 
4414
3822
  kendo-formfield {
4415
3823
  kendo-label {
4416
3824
  color: var(--ash-blue) !important;
4417
- font-family: var(--lcars-font-primary);
4418
- text-transform: uppercase;
4419
- letter-spacing: 0.5px;
3825
+ font-family: var(--theme-font-ui);
4420
3826
  font-size: 0.8rem;
4421
3827
  }
4422
3828
 
@@ -4429,7 +3835,7 @@
4429
3835
  kendo-dialog-actions {
4430
3836
  flex-shrink: 0;
4431
3837
  background: var(--iron-navy) !important;
4432
- border-top-color: var(--octo-mint-20) !important;
3838
+ border-top-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4433
3839
  }
4434
3840
  }
4435
3841
 
@@ -4468,33 +3874,31 @@
4468
3874
  mm-variables-editor .variables-editor,
4469
3875
  .variables-editor {
4470
3876
  background: var(--surface-elevated-60) !important;
4471
- border: 1px solid var(--octo-mint-20) !important;
3877
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
4472
3878
  border-radius: 8px !important;
4473
3879
  padding: 1rem !important;
4474
3880
 
4475
3881
  .variables-header {
4476
- border-bottom: 1px solid var(--octo-mint-20) !important;
3882
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20)) !important;
4477
3883
 
4478
3884
  .section-title {
4479
- color: var(--octo-mint) !important;
4480
- font-family: var(--lcars-font-primary) !important;
4481
- text-transform: uppercase;
4482
- letter-spacing: 0.5px;
3885
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3886
+ font-family: var(--theme-font-display) !important;
4483
3887
  }
4484
3888
  }
4485
3889
 
4486
3890
  .variables-list {
4487
3891
  background: var(--deep-sea-50) !important;
4488
- border-color: var(--octo-mint-20) !important;
3892
+ border-color: var(--theme-border-default, var(--octo-mint-20)) !important;
4489
3893
 
4490
3894
  .list-header {
4491
3895
  background: var(--octo-mint-10) !important;
4492
- border-bottom-color: var(--octo-mint-20) !important;
4493
- color: var(--octo-mint) !important;
3896
+ border-bottom-color: var(--theme-border-default, var(--octo-mint-20)) !important;
3897
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4494
3898
  }
4495
3899
 
4496
3900
  .variable-row {
4497
- border-bottom-color: var(--octo-mint-10) !important;
3901
+ border-bottom-color: var(--theme-border-subtle, var(--octo-mint-10)) !important;
4498
3902
 
4499
3903
  &:hover {
4500
3904
  background: var(--octo-mint-05) !important;
@@ -4508,7 +3912,7 @@
4508
3912
 
4509
3913
  .empty-state {
4510
3914
  background: var(--deep-sea-50) !important;
4511
- border: 1px dashed var(--octo-mint-30) !important;
3915
+ border: 1px dashed var(--theme-border-default, var(--octo-mint-30)) !important;
4512
3916
  color: var(--ash-blue) !important;
4513
3917
 
4514
3918
  p {
@@ -4522,17 +3926,17 @@
4522
3926
 
4523
3927
  .usage-hint {
4524
3928
  background: var(--deep-sea-50) !important;
4525
- border: 1px solid var(--octo-mint-15) !important;
3929
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15)) !important;
4526
3930
  color: var(--ash-blue) !important;
4527
3931
 
4528
3932
  strong {
4529
- color: var(--octo-mint) !important;
3933
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
4530
3934
  }
4531
3935
 
4532
3936
  code {
4533
3937
  background: var(--octo-mint-15) !important;
4534
- color: var(--octo-mint) !important;
4535
- font-family: var(--lcars-font-mono) !important;
3938
+ color: var(--theme-text-accent, var(--octo-mint)) !important;
3939
+ font-family: var(--theme-font-mono) !important;
4536
3940
  }
4537
3941
  }
4538
3942
  }
@@ -4541,18 +3945,18 @@
4541
3945
  mm-time-range-picker {
4542
3946
  .time-range-picker {
4543
3947
  .k-button {
4544
- @include lcars-button;
3948
+ @include octo-button;
4545
3949
 
4546
3950
  &.active {
4547
3951
  background: var(--octo-mint-25) !important;
4548
- border-color: var(--octo-mint) !important;
3952
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
4549
3953
  color: var(--octo-text-color) !important;
4550
3954
  }
4551
3955
  }
4552
3956
 
4553
3957
  .date-range-display {
4554
3958
  color: var(--ash-blue);
4555
- font-family: var(--lcars-font-mono);
3959
+ font-family: var(--theme-font-mono);
4556
3960
  font-size: 0.85rem;
4557
3961
  }
4558
3962
  }
@@ -4560,7 +3964,7 @@
4560
3964
 
4561
3965
  // Cron builder
4562
3966
  mm-cron-builder {
4563
- // Override CSS custom properties with LCARS theme colors
3967
+ // Override CSS custom properties with theme colors
4564
3968
  --mm-cron-bg: #{var(--surface-elevated-60)};
4565
3969
  --mm-cron-border: #{var(--octo-mint-20)};
4566
3970
  --mm-cron-border-radius: 8px;
@@ -4575,107 +3979,85 @@
4575
3979
  --mm-cron-success: var(--theme-status-success, #37b400);
4576
3980
  --mm-cron-code-bg: var(--deep-sea);
4577
3981
  --mm-cron-code-text: #{$octo-mint};
4578
- --mm-cron-shadow:
4579
- 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px #{var(--octo-mint-08)};
4580
- --mm-cron-font-family: var(--lcars-font-primary);
4581
- --mm-cron-font-mono: var(--lcars-font-mono);
3982
+ --mm-cron-shadow: var(--theme-shadow-panel, 0 1px 2px rgba(0, 0, 0, 0.35));
3983
+ --mm-cron-font-family: var(--theme-font-ui);
3984
+ --mm-cron-font-mono: var(--theme-font-mono);
4582
3985
 
4583
- // Additional LCARS styling
3986
+ // Additional styling
4584
3987
  .cron-builder {
4585
- border: 1px solid var(--octo-mint-25);
3988
+ border: 1px solid var(--theme-border-default, var(--octo-mint-25));
4586
3989
  transition:
4587
3990
  border-color 0.2s ease,
4588
3991
  box-shadow 0.2s ease;
4589
3992
 
4590
3993
  &:hover:not(.disabled) {
4591
- border-color: var(--octo-mint-40);
4592
- box-shadow:
4593
- 0 4px 30px rgba(0, 0, 0, 0.3),
4594
- 0 0 25px var(--octo-mint-10);
3994
+ border-color: var(--theme-border-strong, var(--octo-mint-40));
4595
3995
  }
4596
3996
  }
4597
3997
 
4598
- // Expression display with LCARS glow
3998
+ // Expression display
4599
3999
  .expression-value {
4600
- border: 1px solid var(--octo-mint-30);
4601
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
4000
+ border: 1px solid var(--theme-border-default, var(--octo-mint-30));
4602
4001
 
4603
- &:not(.invalid) {
4604
- text-shadow: 0 0 8px var(--octo-mint-50);
4605
- }
4606
4002
  }
4607
4003
 
4608
4004
  // Human readable preview
4609
4005
  .human-readable {
4610
- background: linear-gradient(
4611
- 135deg,
4612
- var(--iron-navy-80),
4613
- var(--deep-sea-90)
4614
- );
4615
- border: 1px solid var(--octo-mint-15);
4006
+ background: var(--theme-bg-sunken);
4007
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
4616
4008
  border-left: 3px solid var(--octo-mint);
4617
4009
  }
4618
4010
 
4619
- // Preset buttons LCARS styling
4011
+ // Preset buttons
4620
4012
  .preset-button {
4621
- @include lcars-button;
4013
+ @include octo-button;
4622
4014
 
4623
4015
  &:hover:not(:disabled) {
4624
- border-color: var(--octo-mint);
4625
- color: var(--octo-mint);
4626
- box-shadow: 0 0 10px var(--octo-mint-30);
4016
+ border-color: var(--theme-text-accent, var(--octo-mint));
4017
+ color: var(--theme-text-accent, var(--octo-mint));
4018
+ box-shadow: none;
4627
4019
  }
4628
4020
  }
4629
4021
 
4630
4022
  // Day toggle buttons
4631
4023
  .day-button {
4632
- @include lcars-button;
4024
+ @include octo-button;
4633
4025
 
4634
4026
  &.k-selected,
4635
4027
  &[ng-reflect-selected="true"] {
4636
- background: linear-gradient(
4637
- 180deg,
4638
- var(--octo-mint-30),
4639
- var(--octo-mint-20)
4640
- ) !important;
4641
- border-color: var(--octo-mint) !important;
4028
+ background: var(--theme-bg-selected) !important;
4029
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
4642
4030
  color: var(--octo-text-color) !important;
4643
- box-shadow: 0 0 10px var(--octo-mint-40);
4031
+ box-shadow: none;
4644
4032
  }
4645
4033
  }
4646
4034
 
4647
4035
  // Mode buttons (daily mode, monthly mode)
4648
4036
  .mode-buttons button {
4649
- @include lcars-button;
4037
+ @include octo-button;
4650
4038
 
4651
4039
  &.k-selected,
4652
4040
  &[ng-reflect-selected="true"] {
4653
- background: linear-gradient(
4654
- 180deg,
4655
- var(--octo-mint-30),
4656
- var(--octo-mint-20)
4657
- ) !important;
4658
- border-color: var(--octo-mint) !important;
4041
+ background: var(--theme-bg-selected) !important;
4042
+ border-color: var(--theme-text-accent, var(--octo-mint)) !important;
4659
4043
  color: var(--octo-text-color) !important;
4660
- box-shadow: 0 0 10px var(--octo-mint-40);
4044
+ box-shadow: none;
4661
4045
  }
4662
4046
  }
4663
4047
 
4664
- // TabStrip LCARS overrides
4048
+ // TabStrip overrides
4665
4049
  ::ng-deep .k-tabstrip {
4666
4050
  .k-tabstrip-items-wrapper {
4667
4051
  background: transparent;
4668
- border-bottom: 1px solid var(--octo-mint-20);
4052
+ border-bottom: 1px solid var(--theme-border-default, var(--octo-mint-20));
4669
4053
  }
4670
4054
 
4671
4055
  .k-tabstrip-items .k-item {
4672
4056
  background: transparent;
4673
4057
  color: var(--ash-blue);
4674
- font-family: var(--lcars-font-primary);
4058
+ font-family: var(--theme-font-ui);
4675
4059
  font-weight: 500;
4676
- text-transform: uppercase;
4677
4060
  font-size: 0.75rem;
4678
- letter-spacing: 0.5px;
4679
4061
  border: none;
4680
4062
  transition: all 0.15s ease;
4681
4063
 
@@ -4685,7 +4067,7 @@
4685
4067
  }
4686
4068
 
4687
4069
  &.k-active {
4688
- color: var(--octo-mint);
4070
+ color: var(--theme-text-accent, var(--octo-mint));
4689
4071
  background: var(--octo-mint-15);
4690
4072
  border-bottom: 2px solid var(--octo-mint);
4691
4073
  }
@@ -4700,7 +4082,7 @@
4700
4082
  // Dropdown styling
4701
4083
  ::ng-deep .k-dropdownlist {
4702
4084
  background: var(--deep-sea);
4703
- border: 1px solid var(--octo-mint-20);
4085
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20));
4704
4086
  color: var(--octo-text-color);
4705
4087
 
4706
4088
  &:hover {
@@ -4708,17 +4090,17 @@
4708
4090
  }
4709
4091
 
4710
4092
  &.k-focus {
4711
- border-color: var(--octo-mint);
4712
- box-shadow: var(--lcars-input-focus);
4093
+ border-color: var(--theme-text-accent, var(--octo-mint));
4094
+ box-shadow: var(--theme-focus-ring);
4713
4095
  }
4714
4096
  }
4715
4097
 
4716
4098
  // TextBox styling (custom tab)
4717
4099
  ::ng-deep .k-textbox {
4718
4100
  background: var(--deep-sea);
4719
- border: 1px solid var(--octo-mint-20);
4720
- color: var(--octo-mint);
4721
- font-family: var(--lcars-font-mono);
4101
+ border: 1px solid var(--theme-border-default, var(--octo-mint-20));
4102
+ color: var(--theme-text-accent, var(--octo-mint));
4103
+ font-family: var(--theme-font-mono);
4722
4104
 
4723
4105
  &:hover {
4724
4106
  border-color: var(--octo-mint-40);
@@ -4726,19 +4108,15 @@
4726
4108
 
4727
4109
  &:focus,
4728
4110
  &.k-focus {
4729
- border-color: var(--octo-mint);
4730
- box-shadow: var(--lcars-input-focus);
4111
+ border-color: var(--theme-text-accent, var(--octo-mint));
4112
+ box-shadow: var(--theme-focus-ring);
4731
4113
  }
4732
4114
  }
4733
4115
 
4734
4116
  // Syntax reference box
4735
4117
  .syntax-reference {
4736
- background: linear-gradient(
4737
- 135deg,
4738
- var(--iron-navy-60),
4739
- var(--deep-sea-80)
4740
- );
4741
- border: 1px solid var(--octo-mint-15);
4118
+ background: var(--theme-bg-sunken);
4119
+ border: 1px solid var(--theme-border-subtle, var(--octo-mint-15));
4742
4120
  }
4743
4121
 
4744
4122
  // Next executions list
@@ -4746,24 +4124,20 @@
4746
4124
  color: var(--ash-blue);
4747
4125
 
4748
4126
  &::before {
4749
- color: var(--octo-mint);
4750
- text-shadow: 0 0 6px var(--octo-mint-50);
4127
+ color: var(--theme-text-accent, var(--octo-mint));
4751
4128
  }
4752
4129
  }
4753
4130
 
4754
4131
  // Copy button success state
4755
4132
  .copy-button.copied {
4756
4133
  color: #37b400 !important;
4757
- text-shadow: 0 0 8px rgba(55, 180, 0, 0.5);
4758
4134
  }
4759
4135
 
4760
4136
  // Labels
4761
4137
  kendo-label {
4762
4138
  color: var(--ash-blue);
4763
4139
  font-weight: 500;
4764
- text-transform: uppercase;
4765
4140
  font-size: 0.75rem;
4766
- letter-spacing: 0.5px;
4767
4141
  }
4768
4142
  }
4769
4143