@meshmakers/octo-ui 3.4.1100 → 3.4.1130

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

@@ -2,6 +2,10 @@
 
 @use "variables" as *;
 @use "styles" as *;
+@use "theme" as *;
 
 @forward "variables" show variables;
 @forward "styles" show styles;
+@forward "theme" show theme, theme-overrides, ink-overlays, kendo-bridge, dark-theme-tokens, light-theme-tokens,
+  light-theme-button-primary, light-theme-button-base,
+  light-theme-button-overrides;

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

@@ -2417,10 +2417,23 @@
     }
   }
 
+  // --------------------------------------------------------------------------
   // Drawer - LCARS style
+  //
+  // Hierarchy classes: the shared CommandService stamps `mm-drawer-level-<n>`
+  // on every drawer item and Kendo adds its own `k-level-<n>` — but only while
+  // the drawer is expanded (see DrawerListComponent's template). Indentation
+  // therefore keys off the mm-* classes, which survive the collapse into the
+  // mini rail and can be reset there in one place.
+  // --------------------------------------------------------------------------
   .k-drawer {
-    background: linear-gradient(180deg, var(--iron-navy), var(--deep-sea));
-    border-right: 1px solid var(--octo-mint-20);
+    background: linear-gradient(180deg, var(--theme-bg-surface), var(--theme-bg-app));
+    border-right: 1px solid var(--theme-border-subtle);
+    // Kendo's own theme sets `.k-drawer { color: var(--kendo-color-subtle) }`.
+    // That token is not part of our theme contract and resolves to an almost
+    // unreadable dark violet under the Material defaults, so the drawer states
+    // its text colour explicitly from the theme tokens instead of inheriting.
+    color: var(--theme-text-primary);
 
     .k-drawer-wrapper {
       overflow-x: hidden;
@@ -2432,6 +2445,7 @@
     }
 
     .k-drawer-item {
+      color: var(--theme-text-primary);
       border-radius: 0 var(--lcars-radius-md) var(--lcars-radius-md) 0;
       margin: 2px 4px 2px 0;
       padding: 10px 12px;
@@ -2462,116 +2476,196 @@
 
       &:hover {
         background: var(--octo-mint-10);
+        color: var(--theme-text-primary);
       }
 
       &.k-selected {
         background: linear-gradient(90deg, var(--octo-mint-20), transparent);
         border-left: 3px solid var(--octo-mint);
-        color: var(--octo-mint);
+        color: var(--theme-text-accent);
       }
 
-      // Separator styling
+      // Separator: a fading rule that groups entries without eating a row.
+      // CommandService stamps mm-drawer-level-N on separators as well, so every
+      // level rule below carries :not(.k-drawer-separator) — without that guard
+      // the level's min-height/padding win on source order and the hairline
+      // renders as a filled 38 px bar.
       &.k-drawer-separator {
-        display: none;
+        height: 1px;
+        min-height: 1px;
+        padding: 0;
+        margin: 8px 12px;
+        background: linear-gradient(90deg, var(--theme-border-strong), transparent);
+      }
+
+      // Nested entries: indented under their group header with a vertical
+      // guide line, and one step quieter than their section header. The step
+      // is a real colour, not `opacity` on the text — stacking opacity on top
+      // of an inherited colour is what made these entries unreadable once the
+      // inherited colour itself was dark.
+      &.mm-drawer-level-1:not(.k-drawer-separator),
+      &.mm-drawer-level-2:not(.k-drawer-separator) {
+        position: relative;
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: var(--mm-drawer-guide-x);
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          background: var(--theme-border-subtle);
+        }
       }
-    }
 
-    // Hierarchy — top-level groups (k-level-0)
-    .k-drawer-item.k-level-0 {
-      color: var(--octo-text-color);
-      text-transform: uppercase;
-      font-weight: 600;
-      letter-spacing: 0.6px;
-      font-size: 12.5px;
-      margin-top: 2px;
-    }
+      &.mm-drawer-level-1:not(.k-drawer-separator) {
+        --mm-drawer-guide-x: 24px;
+        padding-left: 40px;
+        min-height: 38px;
 
-    // Hierarchy — nested items (k-level-1 and k-level-2 share most rules;
-    // per-level overrides set indent, font-size, text colour and the
-    // locally-scoped --guide-x / --icon-scale below).
-    .k-drawer-item.k-level-1,
-    .k-drawer-item.k-level-2 {
-      --guide-x: 22px;
-      --icon-scale: 0.85;
+        &:not(.k-selected) {
+          color: color-mix(in srgb, var(--theme-text-primary) 80%, transparent);
+        }
 
-      font-weight: 400;
-      text-transform: none;
-      position: relative;
+        .k-item-text {
+          font-size: 0.95em;
+        }
 
-      .k-icon, .k-svg-icon, kendo-svgicon, svg {
-        transform: scale(var(--icon-scale));
-        opacity: var(--icon-scale);
+        .k-icon,
+        .k-svg-icon,
+        kendo-svgicon {
+          width: 20px;
+          height: 20px;
+          min-width: 20px;
+        }
       }
 
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: var(--guide-x);
-        width: 1px;
-        background: color-mix(in srgb, var(--octo-text-color) 10%, transparent);
+      &.mm-drawer-level-2:not(.k-drawer-separator) {
+        --mm-drawer-guide-x: 44px;
+        padding-left: 60px;
+        min-height: 34px;
+
+        &:not(.k-selected) {
+          color: color-mix(in srgb, var(--theme-text-primary) 65%, transparent);
+        }
+
+        .k-icon,
+        .k-svg-icon,
+        kendo-svgicon {
+          width: 18px;
+          height: 18px;
+          min-width: 18px;
+        }
+
+        .k-item-text {
+          font-size: 0.9em;
+        }
       }
 
-      &:hover {
-        color: var(--octo-text-color);
-        background: color-mix(in srgb, var(--octo-text-color) 4%, transparent);
+      // Group expand/collapse indicator, rendered by the host's item template.
+      .drawer-group-chevron {
+        margin-left: auto;
+        width: 16px !important;
+        height: 16px !important;
+        min-width: 16px !important;
+        opacity: 0.6;
       }
 
-      &.k-selected {
-        color: var(--octo-mint);
-        background: var(--octo-mint-10);
-        box-shadow: inset 3px 0 0 var(--octo-mint);
-        border-left: none;
+      // Pending-work count badge, rendered by the host's item template.
+      .drawer-badge {
+        margin-left: auto;
+        flex-shrink: 0;
+        padding: 1px 8px;
+        border-radius: 10px;
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        line-height: 1.4;
+        color: var(--theme-text-accent);
+        background: var(--octo-mint-15);
+        border: 1px solid var(--octo-mint-35);
       }
     }
+  }
 
-    .k-drawer-item.k-level-1 {
-      font-size: 13px;
-      color: color-mix(in srgb, var(--octo-text-color) 75%, transparent);
-      padding: 6px 12px 6px 36px;
-    }
+  // Mini (collapsed) drawer strip — Kendo marks the CONTAINER with
+  // k-drawer-mini / k-drawer-expanded; the drawer element itself carries no
+  // state, so an `.k-drawer.k-drawer-mini` selector never matches.
+  .k-drawer-container.k-drawer-mini:not(.k-drawer-expanded) {
+    .k-drawer-item {
+      justify-content: center;
+      padding: 10px 0;
+      margin: 2px 0;
+      border-radius: 0;
+      position: relative;
 
-    .k-drawer-item.k-level-2 {
-      font-size: 12.5px;
-      color: color-mix(in srgb, var(--octo-text-color) 60%, transparent);
-      padding: 6px 12px 6px 60px;
-      --guide-x: 46px;
-      --icon-scale: 0.75;
-    }
+      .k-icon,
+      .k-svg-icon,
+      kendo-svgicon {
+        margin: 0;
+      }
 
-    // Collapsed state (mini mode)
-    &[style*="flex-basis: 50px"],
-    &[style*="flex-basis:50px"],
-    &.k-drawer-mini {
-      .k-drawer-item {
-        justify-content: center;
-        padding: 10px 0;
-        margin: 2px 0;
-        border-radius: 0;
+      .k-item-text {
+        display: none;
+      }
+
+      &.k-selected {
+        border-left: 3px solid var(--octo-mint);
+        padding-left: 0;
+      }
+
+      // No room for indentation on the strip — nested entries shrink to
+      // smaller, dimmer icons instead; guide line and chevron disappear.
+      &.mm-drawer-level-1:not(.k-drawer-separator),
+      &.mm-drawer-level-2:not(.k-drawer-separator) {
+        padding-left: 0;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      &.mm-drawer-level-1:not(.k-drawer-separator) {
+        min-height: 34px;
 
         .k-icon,
         .k-svg-icon,
         kendo-svgicon {
-          margin: 0;
+          width: 18px;
+          height: 18px;
+          min-width: 18px;
+          opacity: 0.8;
         }
+      }
 
-        &.k-selected {
-          border-left: 3px solid var(--octo-mint);
-          padding-left: 0;
+      &.mm-drawer-level-2:not(.k-drawer-separator) {
+        min-height: 30px;
+
+        .k-icon,
+        .k-svg-icon,
+        kendo-svgicon {
+          width: 16px;
+          height: 16px;
+          min-width: 16px;
+          opacity: 0.7;
         }
       }
 
-      .k-drawer-item.mm-drawer-level-0:not(.k-selected) {
-        color: var(--octo-text-color);
-      }
-      .k-drawer-item.mm-drawer-level-1:not(.k-selected) {
-        color: color-mix(in srgb, var(--octo-text-color) 75%, transparent);
-        opacity: 0.85;
+      .drawer-group-chevron {
+        display: none;
       }
-      .k-drawer-item.mm-drawer-level-2:not(.k-selected) {
-        color: color-mix(in srgb, var(--octo-text-color) 60%, transparent);
-        opacity: 0.7;
+
+      // The count badge becomes a small bubble on the icon's corner.
+      .drawer-badge {
+        position: absolute;
+        top: 2px;
+        right: 6px;
+        margin: 0;
+        padding: 0 4px;
+        font-size: 0.6rem;
+        line-height: 1.3;
+        border-radius: 7px;
+        background: var(--theme-bg-app);
       }
     }
   }
@@ -2838,6 +2932,9 @@
   }
 
   kendo-drawer-content {
+    // Kendo pads this by 6px, on top of .octo-body's padding and the page
+    // container's own — three nested paddings indenting the same content.
+    padding: 0;
     display: flex !important;
     flex-direction: column !important;
     flex: 1 1 0% !important;
@@ -3211,17 +3308,25 @@
 
   // LCARS Page Layout Pattern
   // Use for all page-level list components
+  // 80px tall for 29px of text: the height came from a 56px accent bar plus
+  // 12px of padding, not from the content. Compacted to ~37px, which is worth
+  // about one and a half table rows on every list page.
   .lcars-page-header {
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding: 12px 0;
+    gap: 12px;
+    padding: 4px 0;
     flex-shrink: 0;
+
+    .page-title {
+      align-items: center;
+    }
   }
 
   .lcars-header-accent {
     width: 8px;
-    height: 56px;
+    height: 26px;
+    align-self: center;
     background: linear-gradient(180deg, var(--octo-mint), var(--neo-cyan));
     border-radius: 4px 0 0 4px;
     box-shadow: 0 0 15px var(--octo-mint-50);
@@ -4761,5 +4866,6 @@
       display: none !important;
     }
   }
+
 }