@webority/theme 0.8.1 → 0.8.3

package/scss/wui/_utilities.scss

@@ -567,65 +567,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);
+
+    .bi {
+        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);
+
+    .bi {
+        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.)