@meshmakers/octo-ui 3.3.930 → 3.3.950

package/lib/runtime-browser/styles/_lcars-button.scss

@@ -2,8 +2,10 @@
 
 @mixin lcars-button {
   background: var(--lcars-btn-base);
-  border: 1px solid var(--octo-mint-30);
-  color: var(--octo-mint);
+  // Use theme-aware border + text so the secondary "ghost" style stays
+  // legible on light surfaces. Brand-mint at low alpha washes out on white.
+  border: 1px solid var(--theme-border-strong, var(--octo-mint-30));
+  color: var(--theme-text-accent, var(--octo-mint));
   font-family: var(--lcars-font-primary);
   font-weight: 600;
   font-size: 0.8rem;
@@ -14,7 +16,7 @@
 
   &:hover:not(:disabled) {
     background: var(--lcars-btn-base-hover);
-    border-color: var(--octo-mint-50);
+    border-color: var(--theme-text-accent, var(--octo-mint-50));
     box-shadow: 0 0 10px var(--octo-mint-30);
   }
 

package/lib/runtime-browser/styles/_lcars-flat-btn.scss

@@ -2,10 +2,10 @@
 
 @mixin lcars-flat-btn {
   background: var(--lcars-btn-base) !important;
-  border: 1px solid var(--octo-mint-30) !important;
-  color: var(--octo-mint) !important;
+  border: 1px solid var(--theme-border-strong, var(--octo-mint-30)) !important;
+  color: var(--theme-text-accent, var(--octo-mint)) !important;
   &:hover:not(:disabled) {
     background: var(--lcars-btn-base-hover) !important;
-    border-color: var(--octo-mint-50) !important;
+    border-color: var(--theme-text-accent, var(--octo-mint-50)) !important;
   }
 }

package/lib/runtime-browser/styles/_styles.scss

@@ -1406,33 +1406,33 @@
   mm-symbol-editor,
   mm-symbol-editor-page {
     // Override designer CSS variables for LCARS theme
-    --designer-bg: #{$deep-sea} !important;
-    --designer-surface: #{$surface-elevated} !important;
-    --designer-surface-alt: #{$iron-navy} !important;
+    --designer-bg: var(--deep-sea) !important;
+    --designer-surface: var(--surface-elevated) !important;
+    --designer-surface-alt: var(--iron-navy) !important;
     --designer-border: rgba(100, 206, 185, 0.2) !important;
-    --designer-text: #ffffff !important;
-    --designer-text-muted: #{$ash-blue} !important;
+    --designer-text: var(--octo-text-color) !important;
+    --designer-text-muted: var(--ash-blue) !important;
     --designer-accent: #{$octo-mint} !important;
     --designer-accent-secondary: #{$neo-cyan} !important;
-    --designer-canvas-bg: #{$surface-elevated} !important;
+    --designer-canvas-bg: var(--surface-elevated) !important;
     --designer-hover-bg: rgba(100, 206, 185, 0.1) !important;
 
     // Canvas-specific colors (SVG canvas fill and grid)
-    --designer-canvas-color: #{$iron-navy} !important;
+    --designer-canvas-color: var(--iron-navy) !important;
     --designer-grid-color: rgba(100, 206, 185, 0.15) !important;
 
     // Editor-specific variables (inherited from designer)
-    --editor-bg: #{$deep-sea} !important;
-    --editor-surface: #{$surface-elevated} !important;
-    --editor-surface-alt: #{$iron-navy} !important;
+    --editor-bg: var(--deep-sea) !important;
+    --editor-surface: var(--surface-elevated) !important;
+    --editor-surface-alt: var(--iron-navy) !important;
     --editor-border: rgba(100, 206, 185, 0.2) !important;
-    --editor-text: #ffffff !important;
-    --editor-text-muted: #{$ash-blue} !important;
+    --editor-text: var(--octo-text-color) !important;
+    --editor-text-muted: var(--ash-blue) !important;
     --editor-accent: #{$octo-mint} !important;
     --editor-hover-bg: rgba(100, 206, 185, 0.1) !important;
 
     // Force backgrounds directly on elements
-    background: #{$deep-sea} !important;
+    background: var(--deep-sea) !important;
   }
 
   // Force LCARS styling on process designer internal elements
@@ -1440,16 +1440,16 @@
     mm-process-designer,
     mm-symbol-editor {
       .process-designer {
-        background: #{$deep-sea} !important;
+        background: var(--deep-sea) !important;
       }
 
       .designer-canvas-container {
-        background: #{$surface-elevated} !important;
+        background: var(--surface-elevated) !important;
       }
 
       // Canvas SVG background - LCARS dark theme
       .canvas-background {
-        fill: #{$iron-navy} !important;
+        fill: var(--iron-navy) !important;
       }
 
       // Grid lines - subtle mint-colored grid
@@ -1459,40 +1459,40 @@
 
       .designer-sidebar,
       .designer-inspector-container {
-        background: #{$surface-elevated} !important;
+        background: var(--surface-elevated) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
       }
 
       .sidebar-tab {
-        background: #{$iron-navy} !important;
-        color: #{$ash-blue} !important;
+        background: var(--iron-navy) !important;
+        color: var(--ash-blue) !important;
 
         &.active {
-          background: #{$surface-elevated} !important;
+          background: var(--surface-elevated) !important;
           color: #{$octo-mint} !important;
           border-bottom-color: #{$octo-mint} !important;
         }
       }
 
       .designer-statusbar {
-        background: #{$iron-navy} !important;
+        background: var(--iron-navy) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
-        color: #{$ash-blue} !important;
+        color: var(--ash-blue) !important;
       }
 
       .dockview-panels-container {
-        background: #{$surface-elevated} !important;
+        background: var(--surface-elevated) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
       }
     }
 
     mm-symbol-editor-page {
       .symbol-editor-page-container {
-        background: #{$deep-sea} !important;
+        background: var(--deep-sea) !important;
       }
 
       .editor-header {
-        background: #{$iron-navy} !important;
+        background: var(--iron-navy) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
       }
 
@@ -1501,23 +1501,23 @@
       }
 
       .library-name {
-        color: #{$ash-blue} !important;
+        color: var(--ash-blue) !important;
       }
     }
 
     // Symbol editor container
     mm-symbol-editor {
       .symbol-editor-container {
-        background: #{$deep-sea} !important;
+        background: var(--deep-sea) !important;
       }
 
       .properties-panel {
-        background: #{$surface-elevated} !important;
+        background: var(--surface-elevated) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
       }
 
       .panel-header {
-        background: #{$iron-navy} !important;
+        background: var(--iron-navy) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
       }
 
@@ -1526,13 +1526,13 @@
       }
 
       .panel-collapsed {
-        background: #{$iron-navy} !important;
+        background: var(--iron-navy) !important;
         border-color: rgba(100, 206, 185, 0.2) !important;
       }
 
       .collapsed-label,
       .collapsed-icon {
-        color: #{$ash-blue} !important;
+        color: var(--ash-blue) !important;
       }
     }
   }
@@ -1540,19 +1540,19 @@
   // Process Widget (MeshBoard) - LCARS overrides
   mm-process-widget {
     // Override CSS variables used by the process widget
-    --process-bg: #{$iron-navy};
-    --process-canvas-bg: #{$iron-navy};
+    --process-bg: var(--iron-navy);
+    --process-canvas-bg: var(--iron-navy);
 
     .process-widget {
-      background-color: #{$iron-navy} !important;
+      background-color: var(--iron-navy) !important;
     }
 
     .diagram-container {
-      background-color: #{$iron-navy} !important;
+      background-color: var(--iron-navy) !important;
     }
 
     .loading-overlay {
-      color: #{$ash-blue} !important;
+      color: var(--ash-blue) !important;
     }
 
     .loading-spinner {
@@ -1565,7 +1565,7 @@
     }
 
     .no-config {
-      color: #{$ash-blue} !important;
+      color: var(--ash-blue) !important;
     }
   }
 
@@ -1646,7 +1646,7 @@
     background: linear-gradient(
       180deg,
       var(--iron-navy),
-      color.adjust($iron-navy, $lightness: -5%)
+      color-mix(in srgb, var(--iron-navy), black 5%)
     ) !important;
     border-bottom: 1px solid var(--octo-mint-30);
     box-shadow:
@@ -1675,7 +1675,7 @@
       .k-svg-icon,
       .k-icon,
       svg {
-        fill: #ffffff;
+        fill: var(--octo-text-color);
         color: var(--octo-text-color);
       }
 
@@ -1717,14 +1717,16 @@
         var(--octo-mint-15),
         var(--octo-mint-05)
       );
-      border: 1px solid var(--octo-mint-30);
-      color: var(--octo-mint);
+      // Theme-aware border/text so secondary/cancel buttons stay legible
+      // on light surfaces — brand-mint at low alpha washes out on white.
+      border: 1px solid var(--theme-border-strong, var(--octo-mint-30));
+      color: var(--theme-text-accent, var(--octo-mint));
 
       .k-svg-icon,
       .k-icon,
       svg {
-        fill: var(--octo-mint);
-        color: var(--octo-mint);
+        fill: var(--theme-text-accent, var(--octo-mint));
+        color: var(--theme-text-accent, var(--octo-mint));
       }
 
       &:hover:not(:disabled) {
@@ -1733,7 +1735,7 @@
           var(--octo-mint-25),
           var(--octo-mint-15)
         );
-        border-color: var(--octo-mint-50);
+        border-color: var(--theme-text-accent, var(--octo-mint-50));
         box-shadow: 0 0 10px var(--octo-mint-30);
       }
 
@@ -2141,7 +2143,7 @@
 
       .card-content {
         .config-summary {
-          color: rgba(#ffffff, 0.9) !important;
+          color: color-mix(in srgb, var(--octo-text-color) 90%, transparent) !important;
         }
       }
 
@@ -2885,14 +2887,14 @@
   // Login popup
 
   mm-login-app-bar-section {
-    --mm-login-bg-start: #{$iron-navy};
-    --mm-login-bg-end: #{$surface-elevated};
+    --mm-login-bg-start: var(--iron-navy);
+    --mm-login-bg-end: var(--surface-elevated);
     --mm-login-accent: #{$octo-mint};
     --mm-login-accent-rgb: 100, 206, 185;
-    --mm-login-text: #ffffff;
+    --mm-login-text: var(--theme-text-on-accent, #ffffff);
     --mm-login-btn-primary-start: #{$octo-mint};
     --mm-login-btn-primary-end: #{color.adjust($octo-mint, $lightness: -10%)};
-    --mm-login-btn-primary-text: #{$deep-sea};
+    --mm-login-btn-primary-text: var(--deep-sea);
     --mm-login-font: var(--lcars-font-primary);
   }
 
@@ -2909,14 +2911,14 @@
     // Login popup content — rendered in body, so CSS variables from
     // mm-login-app-bar-section :host don't cascade here. Style directly.
     > .content {
-      --mm-login-bg-start: #{$iron-navy};
-      --mm-login-bg-end: #{$surface-elevated};
+      --mm-login-bg-start: var(--iron-navy);
+      --mm-login-bg-end: var(--surface-elevated);
       --mm-login-accent: #{$octo-mint};
       --mm-login-accent-rgb: 100, 206, 185;
-      --mm-login-text: #ffffff;
+      --mm-login-text: var(--theme-text-on-accent, #ffffff);
       --mm-login-btn-primary-start: #{$octo-mint};
       --mm-login-btn-primary-end: #{color.adjust($octo-mint, $lightness: -10%)};
-      --mm-login-btn-primary-text: #{$deep-sea};
+      --mm-login-btn-primary-text: var(--deep-sea);
       --mm-login-font: var(--lcars-font-primary);
 
       background: linear-gradient(
@@ -3503,17 +3505,17 @@
   // mm-base-form
   .mm-base-form-container {
     // Override form CSS custom properties for LCARS theme
-    --mm-form-bg: rgba(31, 46, 64, 0.6);
-    --mm-form-bg-alt: rgba(31, 46, 64, 0.8);
+    --mm-form-bg: color-mix(in srgb, var(--surface-elevated) 60%, transparent);
+    --mm-form-bg-alt: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
     --mm-form-border: var(--octo-mint-20);
     --mm-form-border-subtle: var(--octo-mint-15);
-    --mm-form-text: #ffffff;
+    --mm-form-text: var(--octo-text-color);
     --mm-form-text-subtle: var(--ash-blue);
     --mm-form-text-label: var(--ash-blue);
     --mm-form-accent: var(--octo-mint);
-    --mm-form-error: #ec658f;
+    --mm-form-error: var(--theme-status-error, #ec658f);
     --mm-form-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    --mm-form-overlay-bg: rgba(7, 23, 43, 0.95);
+    --mm-form-overlay-bg: color-mix(in srgb, var(--deep-sea) 95%, transparent);
 
     background: linear-gradient(180deg, var(--deep-sea-95), var(--deep-sea));
 
@@ -3574,15 +3576,15 @@
     --mm-prose-link-hover: #{$octo-mint};
     --mm-prose-code-bg: rgba(#{$octo-mint}, 0.1);
     --mm-prose-code-text: #{$octo-mint};
-    --mm-prose-pre-bg: #{$iron-navy};
+    --mm-prose-pre-bg: var(--iron-navy);
     --mm-prose-pre-border: rgba(#{$octo-mint}, 0.2);
     --mm-prose-blockquote-border: #{$royal-violet};
     --mm-prose-blockquote-bg: rgba(#{$royal-violet}, 0.1);
-    --mm-prose-table-header-bg: #{$iron-navy};
+    --mm-prose-table-header-bg: var(--iron-navy);
     --mm-prose-table-header-text: #{$octo-mint};
     --mm-prose-table-border: rgba(#{$octo-mint}, 0.2);
-    --mm-prose-table-row-even: rgba(#{$surface-elevated}, 0.3);
-    --mm-prose-strong: #ffffff;
+    --mm-prose-table-row-even: color-mix(in srgb, var(--surface-elevated) 30%, transparent);
+    --mm-prose-strong: var(--octo-text-color);
     --mm-prose-em: #{$neo-cyan};
     --mm-prose-marker-ul: #{$octo-mint};
     --mm-prose-marker-ol: #{$neo-cyan};
@@ -3593,15 +3595,15 @@
   }
 
   mm-markdown-config-dialog {
-    --mm-prose-editor-bg: #{$surface-elevated};
+    --mm-prose-editor-bg: var(--surface-elevated);
     --mm-prose-editor-text: #c8d0d8;
     --mm-prose-editor-placeholder: #6b7a8c;
     --mm-prose-editor-border: rgba(#{$octo-mint}, 0.3);
     --mm-prose-preview-border: rgba(#{$octo-mint}, 0.3);
-    --mm-prose-form-bg: #{$iron-navy};
+    --mm-prose-form-bg: var(--iron-navy);
     --mm-prose-form-border: rgba(#{$octo-mint}, 0.2);
     --mm-prose-label-text: #c8d0d8;
-    --mm-prose-hint-text: #{$ash-blue};
+    --mm-prose-hint-text: var(--ash-blue);
   }
 
   // MeshBoard view
@@ -3938,9 +3940,9 @@
     --mm-stat-bubblegum-text: #{$bubblegum};
     --mm-stat-bubblegum-glow: 0 0 15px rgba(#{$bubblegum}, 0.4);
 
-    --mm-stat-default-bg: rgba(#{$ash-blue}, 0.1);
-    --mm-stat-default-border: #{$ash-blue};
-    --mm-stat-default-text: #ffffff;
+    --mm-stat-default-bg: color-mix(in srgb, var(--ash-blue) 10%, transparent);
+    --mm-stat-default-border: var(--ash-blue);
+    --mm-stat-default-text: var(--octo-text-color);
     --mm-stat-default-glow: none;
   }
 
@@ -4046,7 +4048,7 @@
       border-bottom: 2px solid var(--octo-mint);
 
       .entity-stereotype {
-        color: rgba(#ffffff, 0.8) !important;
+        color: color-mix(in srgb, var(--octo-text-color) 80%, transparent) !important;
       }
 
       .entity-name {
@@ -4462,16 +4464,16 @@
     --mm-cron-bg: #{var(--surface-elevated-60)};
     --mm-cron-border: #{var(--octo-mint-20)};
     --mm-cron-border-radius: 8px;
-    --mm-cron-text: #ffffff;
-    --mm-cron-text-secondary: #{$ash-blue};
+    --mm-cron-text: var(--octo-text-color);
+    --mm-cron-text-secondary: var(--ash-blue);
     --mm-cron-accent: #{$octo-mint};
     --mm-cron-accent-hover: #{color.adjust($octo-mint, $lightness: 10%)};
     --mm-cron-preview-bg: #{var(--deep-sea-80)};
     --mm-cron-tab-active-bg: #{var(--octo-mint-15)};
     --mm-cron-tab-active-border: #{$octo-mint};
     --mm-cron-error: #{$bubblegum};
-    --mm-cron-success: #37b400;
-    --mm-cron-code-bg: #{$deep-sea};
+    --mm-cron-success: var(--theme-status-success, #37b400);
+    --mm-cron-code-bg: var(--deep-sea);
     --mm-cron-code-text: #{$octo-mint};
     --mm-cron-shadow:
       0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px #{var(--octo-mint-08)};

package/lib/runtime-browser/styles/_variables.scss

@@ -48,13 +48,14 @@ $kendo-success: #37b400;
   --iron-navy: #{$iron-navy};
   --deep-sea: #{$deep-sea};
   --surface-elevated: #{$surface-elevated};
-  --octo-text-color: #{$octo-text-color};
+  // Theme-aware text/surface tokens — fall back to LCARS-dark when host has no theme tokens
+  --octo-text-color: var(--theme-text-primary, #{$octo-text-color});
   --kendo-success: #{$kendo-success};
 
   // Kendo variable overrides - applied when Kendo is imported by host
   --kendo-color-primary: var(--octo-mint);
   --kendo-color-primary-on-surface: var(--octo-mint);
-  --kendo-color-app-surface: var(--deep-sea);
+  --kendo-color-app-surface: var(--theme-bg-app, var(--deep-sea));
   --kendo-color-on-app-surface: var(--octo-text-color);
   font-family: var(--lcars-font-primary);
 
@@ -174,20 +175,20 @@ $kendo-success: #37b400;
   --lcars-transition-fast: 150ms ease;
   --lcars-transition-normal: 250ms ease;
 
-  // Designer/Symbol Editor Panel Variables (LCARS theme)
-  --designer-panel-bg: var(--surface-elevated);
-  --designer-panel-bg-elevated: var(--iron-navy);
+  // Designer/Symbol Editor Panel Variables (theme-aware with LCARS fallbacks)
+  --designer-panel-bg: var(--theme-bg-elevated, var(--surface-elevated));
+  --designer-panel-bg-elevated: var(--theme-bg-surface, var(--iron-navy));
   --designer-panel-border: var(--octo-mint-20);
   --designer-panel-text: var(--octo-text-color);
-  --designer-panel-text-secondary: var(--ash-blue);
+  --designer-panel-text-secondary: var(--theme-text-secondary, var(--ash-blue));
   --designer-panel-text-muted: color-mix(
     in srgb,
-    var(--ash-blue) 70%,
+    var(--theme-text-secondary, var(--ash-blue)) 70%,
     transparent
   );
   --designer-panel-accent: var(--octo-mint);
   --designer-panel-accent-hover-bg: var(--octo-mint-15);
-  --designer-panel-input-bg: var(--deep-sea);
+  --designer-panel-input-bg: var(--theme-bg-input, var(--deep-sea));
   --designer-panel-delete-hover-bg: var(--bubblegum-20);
   --designer-panel-delete-color: var(--bubblegum);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshmakers/octo-ui",
-  "version": "3.3.930",
+  "version": "3.3.950",
   "peerDependencies": {
     "@ngx-translate/core": "^17.0.0",
     "@angular/animations": "^21.0.6",