@meshmakers/octo-ui 3.4.1480 → 3.5.0

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

@@ -0,0 +1,123 @@
+@use "variables" as *;
+
+// Disabled solid primary (AB#3444): a muted, neutral surface with muted text — not the accent at
+// reduced opacity, which still read as a clickable primary on the dark canvas. Covers native
+// `disabled`, Kendo's `.k-disabled` and the focusable disabled-with-reason pattern
+// (`aria-disabled="true"`, mm-action-button), and pins the look on hover/active so nothing
+// reacts. Pointer events stay on (Kendo sets none on disabled buttons) so the not-allowed cursor
+// shows; a natively disabled button still fires no clicks, a disabled link is rendered as a
+// button by mm-action-button and aria-disabled buttons swallow their clicks themselves.
+@mixin octo-button-primary-disabled($icons: false) {
+  // One compact selector on purpose: this mixin is included under long parent selector lists,
+  // and nested selector lists multiply with them. `[class]` (always present on a Kendo button)
+  // lifts the rule by one attribute so it also beats the `:hover:not(:disabled)` rules declared
+  // before it — an aria-disabled button is not `:disabled`, so those would otherwise match.
+  // No box-shadow here: the focus ring of a focusable disabled button must stay visible.
+  &:is(:disabled, .k-disabled, [aria-disabled="true"])[class] {
+    opacity: 1;
+    filter: none;
+    background: color-mix(in srgb, var(--theme-text-muted, #77869c) 16%, transparent);
+    border-color: var(--theme-border-default, rgba(128, 128, 128, 0.2));
+    color: var(--theme-text-muted, #77869c);
+    cursor: not-allowed;
+    pointer-events: auto;
+
+    @if $icons {
+      :is(.k-svg-icon, .k-icon, svg) {
+        fill: var(--theme-text-muted, #77869c);
+        color: var(--theme-text-muted, #77869c);
+      }
+    }
+  }
+}
+
+// Deep Sea button (AB#5526): flat base/outline style with a flat primary
+// variant. No gradients, no glows, sentence case. Internal to octo.styles():
+// toolbars, dialogs and widget configs in _styles.scss include it (renamed
+// from the former `lcars-button` in AB#5526; not forwarded to hosts).
+@mixin octo-button {
+  background: transparent;
+  border: 1px solid var(--theme-border-default, var(--octo-mint-30));
+  color: var(--theme-text-primary, var(--octo-text-color));
+  font-family: var(--theme-font-ui, inherit);
+  font-weight: 500;
+  font-size: 0.8125rem;
+  letter-spacing: normal;
+  text-transform: none;
+  border-radius: var(--theme-radius-sm, 4px);
+  box-shadow: none;
+  transition:
+    background-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease),
+    border-color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease),
+    color var(--theme-motion-fast, 120ms) var(--theme-motion-easing, ease);
+
+  &:hover:not(:disabled) {
+    background: var(--theme-bg-hover, var(--octo-mint-10));
+    border-color: var(--theme-border-strong, var(--octo-mint-50));
+    box-shadow: none;
+  }
+
+  &:active:not(:disabled) {
+    background: var(--theme-bg-selected, var(--octo-mint-20));
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--theme-focus-ring, 0 0 0 2px var(--octo-mint));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // Selected state of toggle buttons (Kendo `togglable` / button groups set `.k-selected`,
+  // AB#5623). Without it the reset above hid the state: the a11y tree said "pressed", the eye saw
+  // nothing (quick-view segments in list toolbars). Before the primary branch, so a primary
+  // button keeps its look. z-index lifts the accent border above the next grouped button.
+  &.k-selected {
+    background: var(--theme-bg-selected, var(--octo-mint-20));
+    border-color: var(--theme-accent, var(--octo-mint));
+    color: var(--theme-text-accent, var(--octo-mint));
+    z-index: 1;
+
+    &:hover:not(:disabled) {
+      background: var(--theme-bg-selected, var(--octo-mint-20));
+      border-color: var(--theme-accent, var(--octo-mint));
+    }
+  }
+
+  &.k-button-solid-primary,
+  &.k-button-primary,
+  &[themecolor="primary"] {
+    background: var(--theme-accent, var(--octo-mint));
+    border-color: var(--theme-accent, var(--octo-mint));
+    color: var(--theme-text-on-accent, var(--deep-sea));
+
+    &:hover:not(:disabled) {
+      background: var(--theme-accent-hover, var(--octo-mint));
+      border-color: var(--theme-accent-hover, var(--octo-mint));
+      box-shadow: none;
+    }
+  }
+
+  // One `:is()` instead of nesting in the list above: keeps the output small (AB#3444).
+  &:is(.k-button-solid-primary, .k-button-primary, [themecolor="primary"]) {
+    @include octo-button-primary-disabled;
+  }
+
+  // Selected FLAT toggles (e.g. the list view's row-filter command, `themeColor="primary"
+  // fillMode="flat"`): the primary branch above has the same specificity as `.k-selected` and
+  // comes later, so it would paint selected and unselected alike. This rule is more specific and
+  // comes after it (AB#5623).
+  &.k-button-flat.k-selected {
+    background: var(--theme-bg-selected, var(--octo-mint-20));
+    border-color: var(--theme-accent, var(--octo-mint));
+    color: var(--theme-text-accent, var(--octo-mint));
+
+    &:hover:not(:disabled) {
+      background: var(--theme-bg-selected, var(--octo-mint-20));
+      border-color: var(--theme-accent, var(--octo-mint));
+    }
+  }
+}

package/lib/runtime-browser/styles/_field-input.scss

@@ -0,0 +1,16 @@
+@use "variables" as *;
+
+// Deep Sea input (AB#5526): input surface, neutral border, accent border +
+// focus ring on focus. Internal to octo.styles() (formerly `lcars-input`,
+// renamed in AB#5526).
+@mixin field-input {
+  background: var(--theme-bg-input, var(--deep-sea)) !important;
+  border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
+  color: var(--theme-text-primary, var(--octo-text-color)) !important;
+  border-radius: var(--theme-radius-sm, 4px) !important;
+  &:focus {
+    border-color: var(--theme-accent, var(--octo-mint)) !important;
+    box-shadow: var(--theme-focus-ring) !important;
+    outline: none !important;
+  }
+}

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

@@ -0,0 +1,14 @@
+@use "variables" as *;
+
+// Deep Sea outline button for dialog/window action rows (AB#5526): flat,
+// neutral hairline border, no gradient. Internal to octo.styles() (formerly
+// `lcars-flat-btn`, renamed in AB#5526).
+@mixin flat-button {
+  background: transparent !important;
+  border: 1px solid var(--theme-border-default, var(--octo-mint-30)) !important;
+  color: var(--theme-text-primary, var(--octo-text-color)) !important;
+  &:hover:not(:disabled) {
+    background: var(--theme-bg-hover, var(--octo-mint-10)) !important;
+    border-color: var(--theme-border-strong, var(--octo-mint-50)) !important;
+  }
+}

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

@@ -6,6 +6,6 @@
 
 @forward "variables" show variables;
 @forward "styles" show styles;
-@forward "theme" show theme, theme-overrides, ink-overlays, kendo-bridge, dark-theme-tokens, light-theme-tokens,
+@forward "theme" show theme, theme-overrides, ink-overlays, kendo-bridge, foundation-tokens, dark-theme-tokens, light-theme-tokens,
   light-theme-button-primary, light-theme-button-base,
   light-theme-button-overrides;