@webority/theme 0.13.4 → 0.14.0

package/scss/wui/_media.scss

@@ -552,7 +552,7 @@
 }
 .file-input:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .file-input-btn {
@@ -614,7 +614,7 @@
 .file-input.file-input-tall:focus-within,
 .file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     background: var(--color-surface);
     box-shadow: none;
 }
@@ -664,7 +664,7 @@
     background: var(--color-bg-muted);
 }
 .file-input.file-input-tall.has-files.dragging {
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     background: var(--color-surface);
 }
 // Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
@@ -820,7 +820,9 @@
     gap: 8px;
     padding: 9px 18px;
     background: rgba(255, 255, 255, 0.96);
-    color: var(--color-text);
+    // The pill stays white in every theme, so its ink is fixed too: --color-text flips light in
+    // dark mode and would vanish on the white pill.
+    color: var(--wui-text-heading);
     font-size: 14px;
     font-weight: 600;
     border-radius: 999px;

package/scss/wui/_overlays.scss

@@ -316,18 +316,23 @@
 // keeps a non-square source whole rather than cropping it.
 .wui-confirm-icon img {
     display: block;
-    width: 80px;
-    height: 80px;
+    width: var(--wui-confirm-icon-size, 80px);
+    height: var(--wui-confirm-icon-size, 80px);
     object-fit: contain;
 }
-// Icon size tracks the copy: a title+message dialog keeps the full 80px badge (set on
-// the element), but a lone title (no message) is one line and gets a smaller badge.
-// `.wui-confirm-msg` is a real element rendered only when a message exists, so `:has()`
-// is reliable here; CSS width/height override the SVG's own width/height attributes.
+.wui-confirm-icon svg {
+    width: var(--wui-confirm-icon-size, 80px);
+    height: var(--wui-confirm-icon-size, 80px);
+}
+// Icon size tracks the copy: a title+message dialog keeps the full 80px badge, but a lone
+// title (no message) is one line and gets a smaller badge. `.wui-confirm-msg` is a real
+// element rendered only when a message exists, so `:has()` is reliable here; CSS width/height
+// override the SVG's own width/height attributes. An explicit iconSize / icon-size sets
+// --wui-confirm-icon-size on the badge and wins in both cases.
 .wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon svg,
 .wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon img {
-    width: 56px;
-    height: 56px;
+    width: var(--wui-confirm-icon-size, 56px);
+    height: var(--wui-confirm-icon-size, 56px);
 }
 .wui-confirm-title {
     margin: 0 0 10px;

package/scss/wui/_utilities.scss

@@ -432,15 +432,43 @@
 // 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).
-.pw-popover {
+// 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);
+    // 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);
 }
-.pw-popover .popover-body {
+.pw-popover .popover-body,
+.infotip-popover .popover-body {
     padding: 14px 16px;
+}
+.pw-popover .popover-body {
     min-width: 232px;
 }
+// AppInfoTip `width`: how wide the help card may grow before its text wraps. md is Bootstrap's
+// own 276px, so leaving the prop out changes nothing. It sets the MAX width, so a short tip stays
+// as narrow as its text.
+.infotip-popover-sm {
+    --bs-popover-max-width: 220px;
+}
+.infotip-popover-lg {
+    --bs-popover-max-width: 360px;
+}
+.infotip-popover-xl {
+    --bs-popover-max-width: 480px;
+}
+// Help prose takes the checklist's type: 13px medium in the subtle ink. It keeps a little more
+// leading than a one-line rule because it wraps into a paragraph.
+.infotip-popover .popover-body {
+    font-size: 13px;
+    line-height: 1.5;
+    font-weight: 500;
+    color: var(--color-text-subtle);
+}
 .pw-criteria {
     list-style: none;
     margin: 0;
@@ -482,17 +510,20 @@
     color: var(--color-text-subtle);
     --pw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3C/svg%3E");
 }
-// Met: success-green — a filled circle with a knocked-out check.
+// Met: the bright success fill — a filled circle with a knocked-out check. The rule text takes the
+// same fill rather than --color-success-text, a deliberate choice for the brighter look; it sits
+// under AA text contrast on a white card.
 .pw-criteria .pw-rule.met {
-    color: var(--color-success-text);
+    color: var(--wui-success-active);
     --pw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm4.03-11.28a.9.9 0 0 0-1.32-1.22l-4.02 4.35-1.4-1.5a.9.9 0 1 0-1.32 1.22l2.06 2.22a.9.9 0 0 0 1.32 0l4.68-5.07Z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
-// The checklist opens with a PLAIN FADE only — no drop / zoom / scale. It opts out of the shared
+// The checklist and the field help tip open with a PLAIN FADE only — no drop / zoom / scale. It opts out of the shared
 // menu-open motion (_menu-motion.scss animates every `.popover.show`) and lets Bootstrap's own
 // `.fade` opacity transition carry the fade in and out. Both surfaces render `.popover.pw-popover`
 // (React via react-bootstrap's Popover, Razor via Bootstrap's popover), so this makes the two
 // identical. Higher specificity than `.popover.show` so it wins regardless of partial load order.
-.popover.pw-popover.show {
+.popover.pw-popover.show,
+.popover.infotip-popover.show {
     animation: none;
     scale: none;
     translate: none;
@@ -560,6 +591,16 @@
     border-bottom: 1px solid var(--color-border);
 }
 
+// The track. Bootstrap's default is --bs-secondary-bg, which is near-white on a white card in
+// light mode and the card surface itself in dark mode, so the empty part of the bar disappeared
+// in both. Set on .progress because Bootstrap declares --bs-progress-bg there, not on :root.
+.progress {
+    --bs-progress-bg: var(--color-progress-track);
+    // The showLabel text inside the bar: white on the light-mode fills, a dark ink on the bright
+    // dark-mode fills (white reaches only 2.3:1 to 3.9:1 on those).
+    --bs-progress-bar-color: var(--color-progress-label);
+}
+
 // Determinate progress-bar fill tones (AppProgress / AppMeter / <app-progress>) — the fill sits
 // in Bootstrap's .progress track; only the bar colour is brand-toned.
 //
@@ -568,17 +609,21 @@
 // --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).
+//
+// 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
+// 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);
 }
 .wui-progress-success {
-    background-color: var(--wui-success-strong);
+    background-color: var(--color-success-strong);
 }
 .wui-progress-warning {
     background-color: var(--color-warning);
 }
 .wui-progress-danger {
-    background-color: var(--wui-danger-strong);
+    background-color: var(--color-danger-strong);
 }
 .wui-progress-neutral {
     background-color: var(--color-text-subtle);
@@ -668,187 +713,10 @@
     }
 }
 
-// Callout — a soft branded aside that EXPLAINS something and stays (distinct from
-// `.alert`, which reports a state). A thick coloured LEFT edge reads as an aside; a
-// circular icon badge + optional coloured heading keep it visually in the alert family.
-// One local `--callout-accent`/-border/-bg triad, swapped per tone, drives the left
-// edge, the icon badge fill, the heading colour, and the compact body text.
-.info-callout {
-    --callout-accent: var(--color-info-active);
-    // AA-safe text colour for the heading / compact body / <strong> (the vivid --callout-accent
-    // is fine for the badge fill, left edge and halo, but fails AA as text on the soft bg).
-    --callout-text: var(--color-info-text);
-    --callout-border: var(--color-info-30);
-    --callout-bg: var(--color-info-10);
-
-    display: flex;
-    align-items: center;
-    // On phones the trailing action drops onto its own row BELOW the content (the flex `gap`
-    // supplies the vertical space) so a button never crushes the message into a sliver; from md
-    // up it sits inline at the right — a VIEWPORT rule, not the callout's own width. See the
-    // `.info-callout-action` breakpoint below.
-    flex-wrap: wrap;
-    gap: 12px;
-    padding: 14px 18px;
-    border: 1px solid var(--callout-border);
-    // A thick coloured left edge — the callout's signature aside marker.
-    border-left: 4px solid var(--callout-accent);
-    border-radius: 8px;
-    background: var(--callout-bg);
-    font-size: 14px;
-    // Sub-content (the body/subtitle) reads at #252F4A / 400; the heading and the
-    // compact-size text override colour + weight below.
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--wui-text-1);
-}
-.info-callout.tone-success {
-    --callout-accent: var(--color-success-active);
-    --callout-text: var(--color-success-text);
-    --callout-border: var(--color-success-30);
-    --callout-bg: var(--color-success-10);
-}
-.info-callout.tone-warning {
-    --callout-accent: var(--color-warning-active);
-    --callout-text: var(--color-warning-text);
-    --callout-border: var(--color-warning-30);
-    --callout-bg: var(--color-warning-10);
-}
-.info-callout.tone-danger {
-    --callout-accent: var(--color-danger-active);
-    --callout-text: var(--color-danger-text);
-    --callout-border: var(--color-danger-30);
-    --callout-bg: var(--color-danger-10);
-}
-
-// Borderless variant (`bordered={false}` / `bordered="false"`): drop the soft ring AND
-// the thick tone-coloured left edge, keeping only the tint fill. Colours go `transparent`
-// rather than the widths to 0 so the box keeps its 1px / 4px-left footprint — nothing
-// shifts when toggling the border on and off. Mirrors `.alert-borderless`.
-.info-callout-borderless {
-    border-color: transparent;
-}
-
-// The leading glyph is a solid circular badge — tone fill, white glyph centred, with a
-// soft 3px same-colour halo ring. Base is the single-content size (20px badge / 20px
-// glyph); a title+body stack steps it up to 24px. The badge stays VERTICALLY CENTRED
-// against the whole block in both cases (align-items: center on .info-callout).
-.info-callout-icon {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: var(--callout-accent);
-    color: #fff;
-    // 4px translucent ring in the badge's own colour — the "outer shadow".
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--callout-accent) 20%, transparent);
-
-    .wui-icon {
-        line-height: 1;
-    }
-}
-// A title+body stack gets the larger badge (24px / 22px glyph).
-.info-callout-stack .info-callout-icon {
-    width: 24px;
-    height: 24px;
-}
-
-// Custom image in the badge (icon replacement): the image fills the circle, so drop the
-// tone fill and clip it round. Applies to both AppCallout and AppAlert badges.
-.info-callout-icon-image,
-.alert-icon-image {
-    background: transparent;
-    overflow: hidden;
-}
-.info-callout-icon img,
-.alert-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-}
-
-.info-callout-content {
-    // Grows to fill the row so a trailing action (and the dismiss ×) sit at the right edge.
-    flex: 1 1 auto;
-    min-width: 0;
-    font-size: 12px;
-}
-// Trailing action slot — a button (or any node). Mobile-first: on phones it takes its own full
-// row below the content (left-aligned there); from md up it collapses to its natural width and
-// sits inline at the right edge of the content row.
-.info-callout-action {
-    flex: 1 1 100%;
-    align-self: center;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-}
-// From md up the row never wraps — the content shrinks to seat the action inline at the right,
-// so a button stays beside the text on any large screen, even when the callout sits in a narrow
-// column (the wrap-below is a phones-only treatment).
-@include media-breakpoint-up(md) {
-    .info-callout {
-        flex-wrap: nowrap;
-    }
-    .info-callout-action {
-        flex: none;
-        justify-content: initial;
-        margin-left: auto;
-    }
-}
-.info-callout-heading {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.3;
-    margin-bottom: 1px;
-    color: var(--callout-text);
-}
-.info-callout strong {
-    font-weight: 700;
-    color: var(--callout-text);
-}
-
-// Optional dismiss × — pushed to the right edge, vertically centred, subtle.
-.info-callout-close {
-    flex: none;
-    align-self: center;
-    margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    border: none;
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    opacity: 0.7;
-    border-radius: var(--radius-sm);
-    transition: opacity 0.15s;
-}
-.info-callout-close:hover {
-    opacity: 1;
-}
-.info-callout-close:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-}
-
-// Compact size — a single tinted line: tighter padding and the body text itself carries
-// the tone colour. The badge stays the single-content 20px base.
-.info-callout-sm {
-    padding: 9px 14px;
-    gap: 10px;
-    font-weight: 600;
-    color: var(--callout-text);
-}
-
-// AppAlert — a soft tinted status banner with a filled circular icon badge and a
-// coloured heading line. Bootstrap styles the base `.alert`; these rules set the
+// AppAlert — a soft tinted banner with a filled circular icon badge and a
+// coloured heading line. It reports a state (role="alert"/"status") or, with
+// role="none", explains part of the page; `accent`, `size="sm"` and `action` give it the
+// thick left edge, the compact line and the trailing button for that second job. Bootstrap styles the base `.alert`; these rules set the
 // per-variant surface (soft-tint background, soft border, dark body text), lay out
 // the icon column, turn the leading glyph into a solid circular badge, and colour
 // the heading to the variant. Only the heading takes the variant colour — the body
@@ -860,30 +728,41 @@
     border-width: 1px;
 }
 
-// Per-variant surface: soft tint fill + soft border; body text stays dark ink.
+// Per-variant surface: soft tint fill + a -50 border (deep enough to read beside the accent
+// edge); body text stays ink. Every colour comes from a --color-* token that the dark theme
+// remaps (_wui-aliases.scss), so the alert flips with the page in every dark path, the manual
+// data-theme attribute and the auto media query alike, with no per-component dark rules.
 .alert-info {
-    --bs-alert-bg: var(--wui-info-10);
-    --bs-alert-border-color: var(--wui-info-30);
-    --bs-alert-color: var(--wui-text-1);
+    --bs-alert-bg: var(--color-info-soft);
+    --bs-alert-border-color: var(--color-info-50);
+    --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-info-active);
+    // AA-safe text colour for the heading and an accented <strong>.
+    --alert-text: var(--color-info-text-on-soft);
 }
 .alert-success {
-    --bs-alert-bg: var(--wui-success-10);
-    --bs-alert-border-color: var(--wui-success-30);
-    --bs-alert-color: var(--wui-text-1);
+    --bs-alert-bg: var(--color-success-soft);
+    --bs-alert-border-color: var(--color-success-50);
+    --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-success-active);
+    // AA-safe text colour for the heading and an accented <strong>.
+    --alert-text: var(--color-success-text-on-soft);
 }
 .alert-warning {
-    --bs-alert-bg: var(--wui-warning-10);
-    --bs-alert-border-color: var(--wui-warning-30);
-    --bs-alert-color: var(--wui-text-1);
+    --bs-alert-bg: var(--color-warning-soft);
+    --bs-alert-border-color: var(--color-warning-50);
+    --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-warning-active);
+    // AA-safe text colour for the heading and an accented <strong>.
+    --alert-text: var(--color-warning-text-on-soft);
 }
 .alert-danger {
-    --bs-alert-bg: var(--wui-danger-10);
-    --bs-alert-border-color: var(--wui-danger-30);
-    --bs-alert-color: var(--wui-text-1);
+    --bs-alert-bg: var(--color-danger-soft);
+    --bs-alert-border-color: var(--color-danger-50);
+    --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-danger-active);
+    // AA-safe text colour for the heading and an accented <strong>.
+    --alert-text: var(--color-danger-text-on-soft);
 }
 
 // Borderless variant (`bordered={false}` / `bordered="false"`): drop the soft ring and
@@ -893,6 +772,73 @@
     border-color: transparent;
 }
 
+// Accent (`accent`): a thick variant-coloured LEFT edge that marks the alert as an aside,
+// flush with the container's outer edge, corners included.
+// A real border cannot do this: a 4px border-left meeting 1px top/bottom borders on a rounded
+// corner is mitred into a point, and an inset shadow drawn inside a 1px border leaves that
+// border curving round the corner outside the edge. So the accent alert has no border at all:
+// the soft ring is an inset 1px shadow, and the accent is a second inset shadow listed first,
+// so it paints over the ring along the left side and fills the corners out to the edge.
+// Padding grows by the 1px the border no longer takes (and by the 4px edge on the left), so
+// the box and its text sit exactly where a bordered alert's do.
+.alert-accent {
+    --alert-ring: var(--bs-alert-border-color);
+    border-width: 0;
+    box-shadow:
+        inset 4px 0 0 var(--alert-accent),
+        inset 0 0 0 1px var(--alert-ring);
+    padding: 17px 19px 17px 22px;
+}
+// `bordered={false}`: only the ring goes; the edge stays.
+.alert-accent.alert-borderless {
+    --alert-ring: transparent;
+}
+.alert-accent strong {
+    font-weight: 700;
+    color: var(--alert-text);
+}
+
+// Compact size (`size="sm"`): a single tinted line with tighter padding. The body keeps the
+// same dark ink and regular weight as md (only the heading is bold and variant-coloured); the
+// badge stays the single-line 20px base.
+.alert-sm {
+    padding: 9px 14px;
+}
+.alert-sm.alert-has-icon {
+    gap: 10px;
+}
+.alert-sm .alert-content {
+    font-size: 11px;
+}
+
+// Trailing action (`action`): a button or any node. Mobile-first, it takes its own full
+// row below the content; from md up it sits inline at the right edge. A viewport rule,
+// not the alert's own width, so a button never crushes the message on a phone.
+.alert-has-action {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+.alert-has-action .alert-content {
+    flex: 1 1 auto;
+}
+.alert-action {
+    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+@include media-breakpoint-up(md) {
+    .alert-has-action {
+        flex-wrap: nowrap;
+    }
+    .alert-action {
+        flex: none;
+        margin-left: auto;
+    }
+}
+
 .alert-has-icon {
     display: flex;
     // Single-line alerts (a lone body, or a lone title) read best with the badge
@@ -913,6 +859,21 @@
 // a soft 3px same-colour halo ring around it. Base size is the SINGLE-line badge (20px,
 // 20px glyph); the .alert-stack override above enlarges it when a title and body appear
 // together. (The glyph itself is a Bootstrap Icons font `<i>` sized by the component.)
+// Custom image in the badge (icon replacement): the image fills the circle, so drop the
+// variant fill and the halo ring and clip it round. Compound selector so it beats the
+// .alert-icon rule below, which sets both.
+.alert-icon.alert-icon-image {
+    background: transparent;
+    box-shadow: none;
+    overflow: hidden;
+}
+.alert-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
 .alert-icon {
     flex: none;
     display: inline-flex;
@@ -948,16 +909,54 @@
 // Use the AA-safe `-text` tokens (not the vivid `-active`, which fails AA as text on
 // the soft `-10` background); the badge fill / halo keep the vivid `-active`.
 .alert-info .alert-heading {
-    color: var(--wui-info-text);
+    color: var(--alert-text);
 }
 .alert-success .alert-heading {
-    color: var(--wui-success-text);
+    color: var(--alert-text);
 }
 .alert-warning .alert-heading {
-    color: var(--wui-warning-text);
+    color: var(--alert-text);
 }
 .alert-danger .alert-heading {
-    color: var(--wui-danger-text);
+    color: var(--alert-text);
+}
+
+// Heading and body type step with the size: sm 13px / 11px, md 14px / 12px (the base above),
+// lg 16px / 14px. Declared after the base heading rule so these override it.
+.alert-sm .alert-heading {
+    font-size: 13px;
+}
+
+// Large size (`size="lg"`): roomier padding, a larger heading and body, and a larger badge
+// (28px, or 32px for a title+body stack). Declared after the heading and stack rules so it
+// overrides them.
+.alert-lg {
+    padding: 20px 22px;
+}
+.alert-lg.alert-has-icon {
+    gap: 16px;
+}
+.alert-lg .alert-heading {
+    font-size: 16px;
+}
+.alert-lg .alert-content {
+    font-size: 14px;
+}
+.alert-lg.alert-has-icon .alert-icon {
+    width: 28px;
+    height: 28px;
+}
+.alert-lg.alert-has-icon.alert-stack .alert-icon {
+    width: 32px;
+    height: 32px;
+}
+// The accent's padding per size: the size's own padding + the 1px the border no longer takes,
+// + the 4px edge on the left. Two-class selectors, so they beat the size blocks above.
+.alert-accent.alert-sm {
+    padding: 10px 15px 10px 18px;
+}
+.alert-accent.alert-lg {
+    padding: 21px 23px 21px 26px;
 }
 
 // The body's trailing paragraph shouldn't add space below the alert.
@@ -971,6 +970,14 @@
 .alert-dismissible {
     padding-right: 52px;
 }
+// An accent alert has no 1px border, so it takes the missing pixel back on the right.
+.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.
 .alert-dismissible .btn-close {
     top: 50%;

package/scss/wui/_workspace.scss

@@ -45,7 +45,7 @@
 .workspace-switcher-trigger[aria-expanded="true"] {
     outline: none;
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .workspace-switcher-trigger.is-compact {