@webority/theme 0.39.0 → 0.41.0

package/scss/wui/_navigation.scss

@@ -109,7 +109,7 @@
     border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // Sticky tools zone: search + section meta stay put while the list scrolls.
 .drawer-tools {
@@ -238,7 +238,7 @@
     text-decoration: none;
 }
 .app-tab.active {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     // The active tab carries weight as well as colour — colour alone is a weak
     // signal for anyone who reads the strip at a glance or cannot distinguish it.
     font-weight: 600;
@@ -349,7 +349,7 @@
 }
 .app-tab.active .app-tab-count {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // Semantic tone tints — React `tone` / Razor `Tone`, matching the vocabulary
 // `.status-label` uses (success | warning | danger | info).
@@ -540,7 +540,7 @@
     transition: color 0.12s ease;
 }
 .search-wrap:focus-within > .search-icon {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .search-field,
 .search-input {
@@ -663,7 +663,7 @@
     text-decoration: none;
 }
 .breadcrumb-item a:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     text-decoration: underline;
 }
 .breadcrumb-item.active {

package/scss/wui/_overlays.scss

@@ -159,7 +159,7 @@
     corner-shape: squircle;
     flex: none;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // Break long unbroken names so they wrap within the heading instead of
@@ -183,7 +183,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     margin-bottom: 2px;
 }
 // `tone` tints the header icon tile and the eyebrow, so a destructive or a success dialog

package/scss/wui/_shell-parts.scss

@@ -65,7 +65,7 @@
     text-decoration: none;
 }
 .wui-tabbar-item.active {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 600;
 }
 .wui-tabbar-item:focus-visible {
@@ -272,7 +272,7 @@
     padding: 0 4px;
     border: 0;
     background: none;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font: inherit;
     font-size: 14px;
     font-weight: 500;
@@ -353,7 +353,7 @@ a.wui-bell-item:hover {
     justify-content: center;
     min-height: 44px;
     border-top: 1px solid var(--color-border);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;

package/scss/wui/_shell.scss

@@ -223,9 +223,12 @@
     left: 0;
 }
 
+// Sticky always makes a stacking context, so without a z-index here the page content after the
+// sidebar paints over anything the sidebar lets out, such as an open workspace switcher menu.
 .app-sidebar {
     position: sticky;
     top: 0;
+    z-index: var(--wui-z-shell-sidebar);
     align-self: start;
     height: 100vh;
     display: flex;
@@ -234,7 +237,12 @@
     // The bottom inset matches the gap between the collapse toggle and the rule above it,
     // so the toggle row sits evenly spaced between the rule and the sidebar's bottom edge.
     padding: 20px 16px var(--app-sidebar-toggle-gap);
-    overflow: hidden;
+    // Clipped top to bottom only. The mobile drawer's transform makes it the box a fixed menu
+    // is placed in, so a horizontal clip would cut a 300px switcher menu at the drawer's 260px edge.
+    overflow: visible clip;
+    // A clip, unlike hidden, leaves the grid row free to grow to the whole nav list; this keeps
+    // a shell set in a fixed-height box at the box's height, with the nav scrolling inside it.
+    min-height: 0;
     background: var(--color-surface);
     transition: padding 0.2s var(--wui-ease-ui);
 }
@@ -318,11 +326,11 @@
 // the 88px rail, so the collapsed state hides it (the mobile drawer restores it).
 // The compact twin (`sidebarStartCompact` / `<app-shell-sidebar-start-compact>`) is
 // the inverse: hidden expanded, shown only on the desktop collapsed rail, sized for
-// a 36px monogram control (AppWorkspaceSwitcher compact).
+// a 36px monogram control (AppWorkspaceSwitcher compact). Neither slot clips: a menu opened
+// from it has to reach past the sidebar's edge.
 .app-sidebar-start {
     flex: none;
     margin-bottom: 8px;
-    overflow: hidden;
 }
 .app-sidebar-start-compact {
     display: none;
@@ -331,11 +339,12 @@
     // Centre the fixed square in the 88px rail so it lines up with the icon column.
     justify-content: center;
     align-items: center;
-    overflow: hidden;
 }
+// The sidebar clips only top to bottom, so a footer wider than the 88px rail is clipped here.
 .app-sidebar-foot {
     flex: none;
     padding-top: 12px;
+    overflow-x: clip;
 }
 
 .app-nav-group {
@@ -394,7 +403,7 @@
 }
 .app-nav-item.active {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 600;
 }
 .app-nav-item:focus-visible {
@@ -408,7 +417,7 @@
     color: var(--color-text-subtle);
 }
 .app-nav-item.active .app-nav-icon {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .app-nav-text {
     // Grows to fill the row so every trailing element — badge, trailing marker,
@@ -433,7 +442,7 @@
 // tinted badge on top of it would vanish.
 .app-nav-item.active .app-nav-badge {
     background: var(--color-surface);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // Collapsed rail: icons only, centred. The label is removed from the flow rather
@@ -507,7 +516,7 @@
     color: var(--color-text-subtle);
 }
 .app-nav-item.active .app-nav-trailing {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // ── Expandable sub-items ─────────────────────────────────────────────────────
@@ -646,7 +655,7 @@
     pointer-events: none;
 }
 .app-sidebar-toggle:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     background: var(--color-bg-muted);
 }
 .app-sidebar-toggle:focus-visible {

package/scss/wui/_sortable.scss

@@ -70,7 +70,7 @@ wui-sortable[disabled] .wui-sortable-item,
 // Lifted by the keyboard.
 .wui-sortable-handle[aria-pressed="true"] {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-sortable-handle:disabled {
     cursor: not-allowed;

package/scss/wui/_tone-pill.scss

@@ -7,7 +7,7 @@
 // $text exists because `primary` has no on-tint token: --color-{status}-text-on-soft is the
 // on-tint hue (equal to -text in light, lifted in dark), but --color-primary-text
 // is the text-on-SOLID-primary color (near-black in dark mode) and fails AA on the
-// soft tint — primary pills pass var(--color-primary) instead.
+// soft tint — primary pills pass var(--color-primary-ink) instead.
 //
 // Component-specific overrides (e.g. .badge-primary's colored border) are applied
 // after the mixin call.

package/scss/wui/_tree.scss

@@ -39,7 +39,7 @@ wui-tree {
 }
 .wui-tree-row.wui-tree-row-selected {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-tree-item[aria-disabled="true"] > .wui-tree-row {
     color: var(--color-text-subtle);

package/scss/wui/_typography.scss

@@ -129,7 +129,7 @@
 
 /* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
 .chip.primary {
-    @include wui-tone-pill-colors(primary, var(--color-primary));
+    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
 }
 .chip.success {
     @include wui-tone-pill-colors(success);
@@ -346,7 +346,7 @@ wui-multiselect[collapse-chips] .ms-chips {
     flex-shrink: 0;
     background: var(--color-primary-soft);
     border-color: transparent;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 600;
 }
 .search-select-multi .search-select-caret,
@@ -359,7 +359,7 @@ wui-multiselect[collapse-chips] .ms-chips {
     justify-content: center;
     width: 16px;
     flex: none;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     opacity: 0;
 }
 .search-select-option[aria-selected='true'] .ms-check {

package/scss/wui/_utilities.scss

@@ -84,10 +84,10 @@
     transition: color 0.15s;
 }
 .infotip-btn:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .infotip-btn:focus-visible {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
@@ -192,7 +192,7 @@
     border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .page-header.tone-success .page-header-icon {
     background: var(--color-success-soft);
@@ -219,7 +219,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     margin-bottom: 3px;
 }
 .page-header.tone-success .page-eyebrow {
@@ -392,7 +392,7 @@
 }
 .topbar-icon-btn:hover {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .topbar-icon-btn.has-badge::after {
     content: "";
@@ -436,14 +436,14 @@
 // passwordRequirements) opens on focus. Rendered identically by React (a JSX <ul>) and Razor
 // (the same <ul> built in webority-ui.js), so both surfaces read the same. `.pw-popover` is the
 // custom class both put on Bootstrap's `.popover` panel.
-// The card surface — header and body alike — is pure white, lifted off the page with the shared
-// overlay shadow (the one ink menus/popovers/modals use; not a hand-rolled per-component shadow).
+// The card surface, header and body alike, is the elevated surface (white in light mode), lifted
+// off the page with the shared overlay shadow (the one ink menus/popovers/modals use; not a hand-rolled per-component shadow).
 // The field help popover (AppInfoTip, `.infotip-popover`) shares the same card, so the two
 // help surfaces a form shows read as one family.
 .pw-popover,
 .infotip-popover {
-    --bs-popover-bg: var(--wui-bg-light);
-    --bs-popover-header-bg: var(--wui-bg-light);
+    --bs-popover-bg: var(--color-surface);
+    --bs-popover-header-bg: var(--color-surface);
     // A 14px heading: one step above the 13px body, so the card reads as help, not a dialog.
     --bs-popover-header-font-size: 14px;
     box-shadow: var(--wui-shadow-overlay);
@@ -1066,5 +1066,5 @@
     cursor: help;
 }
 .tip-icon:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }

package/scss/wui/_workspace.scss

@@ -85,7 +85,7 @@
     border-radius: 50%;
     background: var(--color-surface);
     border: 1px solid var(--color-border-light);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.02em;
@@ -228,7 +228,7 @@
 .workspace-switcher .workspace-switcher-option.is-active,
 .workspace-switcher .workspace-switcher-option.is-active:hover {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .workspace-switcher-option-name {
     flex: 1 1 auto;
@@ -261,7 +261,7 @@
     position: relative;
     justify-content: center;
     margin-top: 10px;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 600;
 }
 // Dashed divider above the create row — the list and the "Add …" action read as two zones,
@@ -284,7 +284,7 @@
     padding: 6px;
     border-radius: 50%;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // ── Footer ──
@@ -306,7 +306,7 @@
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: transparent;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-size: 13px;
     font-weight: 600;
     text-align: left;
@@ -315,7 +315,7 @@
 }
 .workspace-switcher .workspace-switcher-footer-action:hover {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // ── Menu size tiers ── the panel scales with the trigger's `size`. Placed AFTER the base Menu