@webority/theme 0.36.0 → 0.38.0

package/scss/wui/_media.scss

@@ -537,7 +537,7 @@
     width: 100%;
     border-radius: var(--radius-lg);
     corner-shape: squircle;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     // Match AppInput: muted resting fill, lifts to a clean surface on focus.
     background: var(--color-bg-muted);
     overflow: hidden;
@@ -548,7 +548,7 @@
 }
 .file-input:hover:not(:focus-within) {
     background: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .file-input:focus-within {
     background: var(--color-surface);
@@ -600,14 +600,14 @@
     // Match AppInput: muted resting fill + resting border (dashed kept as the dropzone
     // affordance), border-strong on hover, primary border + surface lift on focus/drag.
     background: var(--color-bg-muted);
-    border: 1px dashed var(--color-border);
+    border: 1px dashed var(--color-field-border);
     transition:
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
 // Hover mirrors AppInput hover — border-strong, fill unchanged.
 .file-input.file-input-tall:hover:not(:focus-within):not(.dragging) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
     background: var(--color-bg-muted);
 }
 // Focus and drag-over mirror AppInput focus — soft primary border, lift onto a clean surface.
@@ -877,7 +877,7 @@
 }
 .file-input.file-input-tall[aria-disabled="true"]:hover:not(:focus-within):not(.dragging) {
     background: var(--color-bg-muted);
-    border-color: var(--color-border);
+    border-color: var(--color-field-border);
 }
 .wui-file-busy {
     position: absolute;

package/scss/wui/_rich-text.scss

@@ -21,7 +21,7 @@ wui-rich-text:not(:defined) > textarea {
     display: flex;
     flex-direction: column;
     width: 100%;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     background: var(--color-field-bg);
     color: var(--color-text);
@@ -33,7 +33,7 @@ wui-rich-text:not(:defined) > textarea {
         background-color 0.12s;
 }
 .wui-rich-text-shell:hover {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .wui-rich-text-shell:focus-within {
     background: var(--color-surface);

package/scss/wui/_shell.scss

@@ -547,12 +547,25 @@
 .app-nav-sub.expanded {
     grid-template-rows: 1fr;
 }
-// Child link indented under the parent label (icon slot + gap), smaller, no icon.
-.app-nav-subitem {
+// Child row indented under the parent label (icon slot + gap), smaller, no icon. A nested
+// group's toggle is a sub-item too (`.app-nav-item.app-nav-subitem` outranks the group button's
+// `font: inherit`), and each level below the first adds a 16px step through --wui-nav-depth
+// (set on the row from depth 2), so a nested group's children sit visibly under it.
+.app-nav-item.app-nav-subitem {
     min-height: 38px;
-    padding-left: 46px;
+    padding-left: calc(46px + (var(--wui-nav-depth, 1) - 1) * 16px);
     font-size: 13px;
 }
+// A sub-item label wraps to two lines before it is cut, so a long child label stays readable.
+// Top-level labels keep the single-line ellipsis.
+.app-nav-subitem .app-nav-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
 
 // ── Collapsed rail: label tooltip ────────────────────────────────────────────
 // The rail hides labels, so surface each on hover/focus as a chip to the right —

package/scss/wui/_utilities.scss

@@ -610,23 +610,22 @@
 // Determinate progress-bar fill tones (AppProgress / AppMeter / <app-progress>) — the fill sits
 // in Bootstrap's .progress track; only the bar colour is brand-toned.
 //
-// success + danger use the DEEPENED -strong fills, not the mid tones: when showLabel is set the
-// bar carries Bootstrap's WHITE label text, and white on the mid --wui-success (#17C653) /
-// --wui-danger (#F8285A) fails AA (2.78:1 / 3.86:1). The -strong fills clear it (both ~5.8:1),
-// the same trick btn-danger uses. info/warning/neutral stay on their mid tones (info/neutral
-// pass with white; warning is not shown with a white label).
+// Every tone fills with its -strong alias, so the label always sits on a fill chosen to carry it.
+// In light mode white label text fails AA on the mid --wui-success (#04B440) / --wui-danger
+// (#E82646) (2.76:1 / 4.38:1), so those two use the deepened fills (both ~5.8:1), the same trick
+// btn-danger uses; info and warning -strong equal their mid tones there.
 //
 // They read the --color-*-strong aliases, not --wui-*-strong, because dark mode remaps the
-// aliases to the bright fills: the deep fills sink into the dark track (about 2:1). The label
+// aliases to the lifted fills: the deep fills sink into the dark track (about 2:1). The label
 // flips to a dark ink there (--color-progress-label), which clears AA on all five dark fills.
 .wui-progress-info {
-    background-color: var(--color-info);
+    background-color: var(--color-info-strong);
 }
 .wui-progress-success {
     background-color: var(--color-success-strong);
 }
 .wui-progress-warning {
-    background-color: var(--color-warning);
+    background-color: var(--color-warning-strong);
 }
 .wui-progress-danger {
     background-color: var(--color-danger-strong);
@@ -1006,15 +1005,51 @@
 .alert-accent.alert-dismissible {
     padding-right: 53px;
 }
-// The dismiss × is Bootstrap's ink-dark glyph; the token whitens it on a dark page.
-.alert .btn-close {
-    filter: var(--color-close-filter);
-}
-// Centre the dismiss × vertically rather than pinning it to the top corner.
+// The dismiss × is a 32px rounded square like the modal close, centred vertically rather
+// than pinned to the top corner. Its 8px glyph takes the variant's text colour: Bootstrap's
+// glyph is a fixed-colour background image, so the button drops it and paints the same
+// shape as a mask on ::before, filled with the colour. Hover tints the square with a
+// transparent wash of the variant. Both colours come from tokens the dark theme remaps, so
+// the close filter is not needed here. A variant without its own tokens falls back to ink.
 .alert-dismissible .btn-close {
     top: 50%;
-    padding: 12px 16px;
+    right: 10px;
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background-image: none;
+    border-radius: var(--radius-lg);
+    corner-shape: squircle;
+    opacity: 1;
+    filter: none;
     transform: translateY(-50%);
+    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.alert-dismissible .btn-close::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background-color: var(--alert-text, var(--color-text-muted));
+    mask: var(--bs-btn-close-bg) center / contain no-repeat;
+}
+.alert-dismissible .btn-close:hover {
+    background-color: color-mix(in srgb, var(--alert-accent, var(--color-text-muted)) 8%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+    .alert-dismissible .btn-close {
+        transition: none;
+    }
+}
+// Bootstrap's .btn-close paints a box-shadow ring on :focus (fires on mouse click too).
+// Drop it; keep a keyboard-only outline so dismissal stays reachable without a mouse.
+.alert .btn-close:focus {
+    box-shadow: none;
+}
+.alert .btn-close:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 
 // ============================================================================