@webority/theme 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/_components.scss

@@ -355,16 +355,16 @@
     font-weight: 500;
     transition: background-color 0.12s ease, color 0.12s ease;
 
-    // Leading glyph: quiet by default, brand-tinted on hover — a font-size so both
-    // the React <Icon> (a sized <i>) and the Razor <i class="bi"> land the same.
-    .bi, i, svg {
+    // Leading glyph: quiet by default, brand-tinted on hover. The library's own icons
+    // are .wui-icon SVGs; bare i/svg keeps product-supplied glyph nodes in step.
+    .wui-icon, i, svg {
         flex-shrink: 0;
         font-size: 1rem;
         color: var(--wui-text-3);
         transition: color 0.12s ease;
     }
-    &:hover .bi, &:hover i, &:hover svg,
-    &:focus .bi, &:focus i, &:focus svg {
+    &:hover .wui-icon, &:hover i, &:hover svg,
+    &:focus .wui-icon, &:focus i, &:focus svg {
         color: var(--wui-primary);
     }
 
@@ -383,9 +383,9 @@
         --bs-dropdown-link-color: var(--wui-danger-text);
         --bs-dropdown-link-hover-color: var(--wui-danger-text);
         --bs-dropdown-link-hover-bg: var(--color-danger-soft);
-        .bi, i, svg { color: var(--wui-danger); }
-        &:hover .bi, &:hover i, &:hover svg,
-        &:focus .bi, &:focus i, &:focus svg { color: var(--wui-danger); }
+        .wui-icon, i, svg { color: var(--wui-danger); }
+        &:hover .wui-icon, &:hover i, &:hover svg,
+        &:focus .wui-icon, &:focus i, &:focus svg { color: var(--wui-danger); }
     }
 }
 

package/scss/wui/_choice.scss

@@ -277,9 +277,10 @@
     min-width: 0;
     vertical-align: middle;
 }
-.wui-opt-label > .bi {
+.wui-opt-label > .wui-icon {
     flex-shrink: 0;
-    font-size: 15px;
+    width: 15px;
+    height: 15px;
 }
 
 // AppSelectMini — the compact single-purpose picker (page size, a range switch). It shares
@@ -460,7 +461,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.datepicker-trigger > .bi {
+.datepicker-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }
@@ -795,7 +796,7 @@ button.datepicker-month:hover {
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.daterange-trigger > .bi {
+.daterange-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }
@@ -1179,7 +1180,7 @@ button.datepicker-month:hover {
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.timepicker-trigger > .bi {
+.timepicker-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }

package/scss/wui/_data.scss

@@ -234,10 +234,10 @@
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-.wui-expand-toggle .bi {
+.wui-expand-toggle .wui-icon {
     transition: transform 0.18s var(--wui-ease-out-quart, ease);
 }
-.wui-expand-toggle.is-open .bi {
+.wui-expand-toggle.is-open .wui-icon {
     transform: rotate(180deg);
 }
 .table-ledger tr.wui-row-expanded > td {

package/scss/wui/_display.scss

@@ -521,7 +521,7 @@ a.info-row:hover .info-value {
     background: transparent;
 }
 // Icon pop — the selected segment's glyph springs up a touch as it becomes active.
-.segmented-option:has(.segmented-input:checked) .bi {
+.segmented-option:has(.segmented-input:checked) .wui-icon {
     transform: scale(1.14);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -561,7 +561,7 @@ a.info-row:hover .info-value {
     // The thumb still jumps to the selected segment — it just does not slide, pop or press.
     .segmented-option,
     .segmented.is-animated .segmented-thumb,
-    .segmented-option:has(.segmented-input:checked) .bi {
+    .segmented-option:has(.segmented-input:checked) .wui-icon {
         transition: none;
     }
 }

package/scss/wui/_overlays.scss

@@ -301,10 +301,24 @@
     line-height: 0;
     margin-bottom: 22px;
 }
+// Lift the badge off the modal surface with a soft outer shadow. `drop-shadow` traces
+// the SVG's circular alpha (a `box-shadow` would cast a square), and takes no spread —
+// so this is authored spread-free rather than reusing the `--wui-shadow-overlay` token.
+.wui-confirm-icon svg {
+    filter: drop-shadow(0 10px 18px rgba(7, 20, 55, 0.18));
+}
+// 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-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon svg {
+    width: 56px;
+    height: 56px;
+}
 .wui-confirm-title {
     margin: 0 0 10px;
     font-size: 22px;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: -0.01em;
     color: var(--color-text);
 }

package/scss/wui/_typography.scss

@@ -76,7 +76,7 @@
 // Bootstrap Icons carry a -.125em baseline nudge meant for inline-with-text use;
 // inside the chip's flex row it just drops the glyph below the label's centre.
 // Reset it so a library-icon leading glyph lines up with the label.
-.chip-ic .bi::before {
+.chip-ic .wui-icon {
     vertical-align: middle;
 }
 .chip-avatar {

package/scss/wui/_utilities.scss

@@ -6,6 +6,14 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
+// ── Icon base ──
+// Every library glyph (React <Icon>, Razor <app-icon>, wui-element internals) is an
+// inline SVG carrying this class; size comes from its width/height attributes.
+.wui-icon {
+    display: inline-block;
+    flex-shrink: 0;
+}
+
 // ── Grid / layout utils ──
 // Responsive card grids (Bootstrap has no grid-template utility).
 .wui-grid {
@@ -567,65 +575,277 @@
     }
 }
 
-// Info callout — a soft branded aside for guidance, distinct from `.alert`.
-// An alert reports a state; a callout explains something and stays.
+// 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;
     gap: 12px;
     padding: 14px 18px;
-    border: none;
-    // A single accent edge instead of a full border: it reads as an aside rather
-    // than a boxed message.
-    border-left: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
-    border-radius: var(--radius-xl);
+    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: var(--radius-lg);
     corner-shape: squircle;
-    background: var(--color-primary-soft);
+    background: var(--callout-bg);
     font-size: 14px;
-    font-weight: 500;
+    // 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(--color-primary);
+    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);
 }
+
+// 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;
-    color: var(--color-primary);
+    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 {
+    min-width: 0;
+    font-size: 12px;
+}
+.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(--color-primary);
+    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
+// 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
+// stays dark ink so the message reads calmly.
+.alert {
+    --bs-alert-border-radius: var(--wui-radius-lg);
+    padding: 16px 18px;
+    border-width: 1px;
+}
+
+// Per-variant surface: soft tint fill + soft border; body text stays dark ink.
+.alert-info {
+    --bs-alert-bg: var(--wui-info-10);
+    --bs-alert-border-color: var(--wui-info-30);
+    --bs-alert-color: var(--wui-text-1);
+    --alert-accent: var(--wui-info-active);
+}
+.alert-success {
+    --bs-alert-bg: var(--wui-success-10);
+    --bs-alert-border-color: var(--wui-success-30);
+    --bs-alert-color: var(--wui-text-1);
+    --alert-accent: var(--wui-success-active);
+}
+.alert-warning {
+    --bs-alert-bg: var(--wui-warning-10);
+    --bs-alert-border-color: var(--wui-warning-30);
+    --bs-alert-color: var(--wui-text-1);
+    --alert-accent: var(--wui-warning-active);
+}
+.alert-danger {
+    --bs-alert-bg: var(--wui-danger-10);
+    --bs-alert-border-color: var(--wui-danger-30);
+    --bs-alert-color: var(--wui-text-1);
+    --alert-accent: var(--wui-danger-active);
+}
+
+// Borderless variant (`bordered={false}` / `bordered="false"`): drop the soft ring and
+// keep only the tint fill. `transparent` rather than `border: 0` so the box keeps its
+// 1px so nothing shifts when toggling the border on and off.
+.alert-borderless {
+    border-color: transparent;
 }
 
-// AppAlert extras — a leading icon and/or a bold heading line. Bootstrap already
-// styles `.alert`/`.alert-{variant}`; these rules only lay out the icon column and
-// give the plain `.alert-heading` div its type treatment (Bootstrap's own rule is
-// just `color: inherit`, meant for an <h4>).
 .alert-has-icon {
     display: flex;
-    align-items: flex-start;
-    gap: 12px;
+    // Single-line alerts (a lone body, or a lone title) read best with the badge
+    // centred against the one line. A heading+body STACK top-aligns instead — the
+    // wrapper adds `.alert-stack` when both a title and a body are present.
+    align-items: center;
+    gap: 14px;
+}
+// A title+body stack gets the larger badge (24px, 22px glyph); a lone line keeps the
+// smaller base below. The badge stays VERTICALLY CENTRED against the whole block in
+// both cases (align-items: center on .alert-has-icon), matching the design.
+.alert-has-icon.alert-stack .alert-icon {
+    width: 24px;
+    height: 24px;
 }
+
+// The leading glyph is a solid circular badge — variant fill, white glyph centred, with
+// 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.)
 .alert-icon {
     flex: none;
     display: inline-flex;
-    // Nudge onto the first line's optical centre.
-    margin-top: 1px;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--alert-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(--alert-accent) 20%, transparent);
+
+    .wui-icon {
+        line-height: 1;
+    }
 }
+
 .alert-content {
     flex: 1;
     min-width: 0;
+    // Body copy sits at 12px; the heading keeps its own explicit 14px above.
+    font-size: 12px;
 }
+
+// Coloured, bold heading line (Bootstrap's own rule is just `color: inherit`).
 .alert .alert-heading {
     margin-bottom: 2px;
-    font-size: 1rem;
-    font-weight: 700;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+// 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);
+}
+.alert-success .alert-heading {
+    color: var(--wui-success-text);
 }
+.alert-warning .alert-heading {
+    color: var(--wui-warning-text);
+}
+.alert-danger .alert-heading {
+    color: var(--wui-danger-text);
+}
+
 // The body's trailing paragraph shouldn't add space below the alert.
 .alert .alert-content > :last-child {
     margin-bottom: 0;
 }
 
+// Reserve room on the right for the absolutely-positioned close button. The theme's
+// base `.alert` padding overrides Bootstrap's own `.alert-dismissible` padding-right, so
+// without this the body text runs under the × (the button is ~48px wide at right:0).
+.alert-dismissible {
+    padding-right: 52px;
+}
+// Centre the dismiss × vertically rather than pinning it to the top corner.
+.alert-dismissible .btn-close {
+    top: 50%;
+    padding: 12px 16px;
+    transform: translateY(-50%);
+}
+
 // ============================================================================
 // Inline help glyph — a hint attached to a word rather than to a field label.
 // (For a field label use `.infotip`, which is a real popover button.)