@meshmakers/octo-ui 3.4.1480 → 3.4.1490

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

@@ -0,0 +1,87 @@
+@use "variables" as *;
+
+// 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;
+    }
+  }
+
+  // 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;