@webority/theme 0.7.5 → 0.7.6

package/scss/wui/_media.scss

@@ -6,26 +6,55 @@
 // here may be overridden by a later partial. Never reorder the imports.
 
 // ── Avatar ──
-// A photo fills the avatar disc edge to edge; the circle is the frame, so
-// the image is cropped to it rather than letterboxed.
+// The initials/icon face is the base layer; a photo overlays it edge to edge, cropped
+// to the disc. While the photo loads — or if it breaks — the face shows through.
+.avatar-face {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
 .avatar > .avatar-img {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     border-radius: inherit;
     object-fit: cover;
     display: block;
+    // Photo fades + scales in so a late-arriving blob doesn't pop.
+    animation: wui-avatar-in 0.28s var(--wui-ease-out-quart, ease) both;
 }
 .avatar {
-    width: 32px;
-    height: 32px;
+    // `--avatar-size` drives the default (md, its 32px fallback) and any custom size. It is
+    // read via `var(… , 32px)` rather than declared here, so an avatar with no size INHERITS
+    // one from an AppAvatarGroup that sets it — while a preset class (explicit width below) or
+    // an avatar's own inline `--avatar-size` still wins. Never re-declare it on `.avatar`.
+    position: relative;
+    width: var(--avatar-size, 32px);
+    height: var(--avatar-size, 32px);
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
     color: var(--color-primary);
-    font-size: 12px;
+    font-size: calc(var(--avatar-size, 32px) * 0.375);
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    flex: none;
+    user-select: none;
+}
+
+// ── Size scale ──
+.avatar-xs {
+    width: 20px;
+    height: 20px;
+    font-size: 8px;
+}
+.avatar-sm {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
 }
 .avatar-lg {
     width: 48px;
@@ -37,10 +66,230 @@
     height: 64px;
     font-size: 22px;
 }
-.avatar-sm {
-    width: 24px;
-    height: 24px;
+.avatar-2xl {
+    width: 96px;
+    height: 96px;
+    font-size: 34px;
+}
+
+// ── Shape ── (`shape`): the disc is the default; rounded/square are card-like.
+.avatar-rounded {
+    border-radius: 25%;
+}
+.avatar-square {
+    border-radius: 12%;
+}
+
+// ── Tone ── (`tone`): the initials fill. `auto` derives a stable hue from the name.
+.avatar-neutral {
+    background: color-mix(in srgb, var(--color-text-muted) 16%, var(--color-surface));
+    color: var(--color-text-muted);
+}
+.avatar-success {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.avatar-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.avatar-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.avatar-info {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.avatar-auto {
+    background: hsl(var(--avatar-hue, 0) 60% 90%);
+    color: hsl(var(--avatar-hue, 0) 42% 32%);
+}
+
+// ── Ring ── (`ring`): a tone-coloured ring with a surface gap, separating stacked
+// avatars or marking an active one.
+.avatar-ring {
+    box-shadow:
+        0 0 0 2px var(--color-surface),
+        0 0 0 4px currentColor;
+}
+
+// ── Corner badge ── (`badge`): a small count/marker at the top-right.
+.avatar-badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 999px;
+    background: var(--color-danger);
+    color: #fff;
     font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    box-shadow: 0 0 0 2px var(--color-surface);
+}
+
+// ── Clickable ── (`href` / `onClick`): the whole disc is one control.
+.avatar-clickable {
+    padding: 0;
+    border: 0;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    transition:
+        transform 0.15s var(--wui-ease-out-quart, ease),
+        box-shadow 0.15s ease;
+}
+.avatar-clickable:hover {
+    transform: scale(1.06);
+}
+.avatar-clickable:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+// ── Presence status ── (`status`): a dot at the lower-right, ringed in the surface
+// colour so it reads on a photo. Online quietly pulses.
+.avatar-status {
+    position: absolute;
+    right: 2%;
+    bottom: 2%;
+    width: 28%;
+    height: 28%;
+    min-width: 8px;
+    min-height: 8px;
+    max-width: 16px;
+    max-height: 16px;
+    border-radius: 999px;
+    box-shadow: 0 0 0 2px var(--color-surface);
+}
+.avatar-status-online {
+    background: var(--color-success);
+}
+.avatar-status-away {
+    background: var(--color-warning);
+}
+.avatar-status-busy {
+    background: var(--color-danger);
+}
+.avatar-status-offline {
+    background: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-surface));
+}
+.avatar-status-online::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--color-success);
+    animation: wui-avatar-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+// ── Hover label ── (`label`): a tooltip above the avatar, revealed on hover/focus.
+.avatar-label {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    background: var(--color-text);
+    color: var(--color-surface);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 30;
+    transition:
+        opacity 0.16s ease,
+        transform 0.16s var(--wui-ease-out-quart, ease);
+}
+.avatar-label::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: var(--color-text);
+}
+.avatar:hover > .avatar-label,
+.avatar:focus-visible > .avatar-label,
+.avatar:focus-within > .avatar-label {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+// ── Avatar group ── (AppAvatarGroup): a row of overlapping avatars, each ringed in the
+// surface colour so it reads against its neighbour. Hover raises one to the front.
+.avatar-group {
+    display: inline-flex;
+    align-items: center;
+}
+.avatar-group > .avatar {
+    margin-left: -10px;
+    box-shadow: 0 0 0 2px var(--color-surface);
+    transition: transform 0.15s var(--wui-ease-out-quart, ease);
+}
+.avatar-group > .avatar:first-child {
+    margin-left: 0;
+}
+.avatar-group > .avatar:hover {
+    z-index: 1;
+    transform: translateY(-2px);
+}
+.avatar-group-tight > .avatar {
+    margin-left: -14px;
+}
+.avatar-group-loose > .avatar {
+    margin-left: -4px;
+}
+// The "+N" overflow chip — a muted avatar-shaped tail.
+.avatar-more {
+    background: color-mix(in srgb, var(--color-text-muted) 16%, var(--color-surface));
+    color: var(--color-text-muted);
+    font-weight: 600;
+}
+
+@keyframes wui-avatar-in {
+    from {
+        opacity: 0;
+        transform: scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes wui-avatar-ping {
+    0% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+    70%,
+    100% {
+        opacity: 0;
+        transform: scale(2.2);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .avatar > .avatar-img {
+        animation: none;
+    }
+    .avatar-status-online::after {
+        animation: none;
+    }
+    .avatar-label {
+        transition: opacity 0.16s ease;
+    }
 }
 
 // ── File attach ──
@@ -161,7 +410,7 @@
     width: 28px;
     height: 28px;
     border: 0;
-    background: rgba(0, 0, 0, 0.62);
+    background: var(--color-scrim-strong);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     color: #fff;
@@ -524,8 +773,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    // Subtle dim so the glassy CTA reads on any image, without hiding it.
-    background: rgba(16, 24, 40, 0.22);
+    // Subtle dim so the glassy CTA reads on any image, without hiding it —
+    // half the standard scrim strength.
+    background: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     transition: opacity 0.15s ease;
 }
@@ -560,7 +810,7 @@
     padding: 0;
     border: 2px solid transparent;
     border-radius: 50%;
-    background: rgba(16, 24, 40, 0.55);
+    background: var(--color-scrim-strong);
     color: #fff;
     cursor: pointer;
     opacity: 0;
@@ -646,7 +896,7 @@
     align-items: center;
     justify-content: center;
     gap: 4px;
-    background: rgba(20, 26, 33, 0.62);
+    background: var(--color-scrim-strong);
     color: #fff;
     font-size: 11px;
     font-weight: 600;
@@ -794,7 +1044,7 @@
     align-items: center;
     justify-content: center;
     gap: 4px;
-    background: var(--color-scrim);
+    background: var(--color-scrim-strong);
     color: var(--color-on-scrim);
     font-size: 12px;
     font-weight: 600;

package/scss/wui/_navigation.scss

@@ -54,7 +54,7 @@
 .drawer-backdrop {
     position: fixed;
     inset: 0;
-    background: rgba(15, 23, 42, 0.4);
+    background: var(--color-scrim);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;

package/scss/wui/_overlays.scss

@@ -15,7 +15,7 @@
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
 .modal-backdrop.wui-modal-dim {
-    background: rgba(15, 23, 42, 0.45);
+    background: var(--color-scrim);
     z-index: var(--wui-z-modal-backdrop);
 }
 .modal.wui-modal-shell {
@@ -328,3 +328,47 @@
     font-size: 14px;
     font-weight: 500;
 }
+
+// ── Toast (notifications) ──
+// Bootstrap toast styling + wui extensions for title/action buttons.
+// Used by both React AppToastContainer and Razor WUI.toast.
+
+// Toast header with title
+.wui-toast-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    border: none;
+}
+
+.wui-toast-header strong {
+    font-size: 14px;
+    font-weight: 600;
+    color: inherit;
+}
+
+// Toast action button — inherits text color from the variant tone. Scoped to the
+// component class, not every .btn-link a consumer might place in a toast body.
+.toast .wui-toast-action {
+    color: inherit;
+    text-decoration: none;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 2px 8px;
+    white-space: nowrap;
+    flex: none;
+    opacity: 0.9;
+    transition: opacity 150ms;
+}
+
+.toast .wui-toast-action:hover {
+    opacity: 1;
+    text-decoration: underline;
+}
+
+.toast .wui-toast-action:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}

package/scss/wui/_typography.scss

@@ -279,6 +279,22 @@ wui-multiselect[collapse-chips] .ms-chips {
     align-items: center;
     gap: 8px;
 }
+.ms-input {
+    flex: 1;
+    min-width: 60px;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+    margin: 0;
+}
+.ms-input::placeholder {
+    color: var(--color-text-subtle);
+}
+.ms-input:focus {
+    outline: none;
+}
 
 /* ── Choice card: image / custom-template variant ── */
 .struct-card-img-card {

package/scss/wui/_utilities.scss

@@ -76,10 +76,13 @@
     transform: scaleY(-1);
     transition: color 0.15s;
 }
-.infotip-btn:hover,
+.infotip-btn:hover {
+    color: var(--color-primary);
+}
 .infotip-btn:focus-visible {
     color: var(--color-primary);
-    outline: none;
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 .infotip-pop {
     position: absolute;
@@ -141,9 +144,91 @@
 }
 
 // ── Page header ──
+// `.page-header` stacks an optional breadcrumbs row above `.page-header-bar` — the
+// flex row that holds the title block on the left and the page actions on the right.
 .page-header {
     margin-bottom: 24px;
 }
+.page-header-bar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+}
+// Left block: an optional leading icon tile + the title stack, kept together.
+.page-header-lead {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+// A breadcrumbs row above the masthead row.
+.page-breadcrumbs {
+    margin-bottom: 10px;
+}
+// Leading icon tile — tinted by `tone` (default primary), matching the modal head icon.
+.page-header-icon {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.page-header.tone-success .page-header-icon {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.page-header.tone-warning .page-header-icon {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.page-header.tone-danger .page-header-icon {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.page-header.tone-info .page-header-icon {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.page-header-titles {
+    min-width: 0;
+}
+// Eyebrow — a small kicker label above the title (a section / category marker).
+.page-eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-primary);
+    margin-bottom: 3px;
+}
+.page-header.tone-success .page-eyebrow {
+    color: var(--color-success-text);
+}
+.page-header.tone-warning .page-eyebrow {
+    color: var(--color-warning-text);
+}
+.page-header.tone-danger .page-eyebrow {
+    color: var(--color-danger-text);
+}
+.page-header.tone-info .page-eyebrow {
+    color: var(--color-info-text);
+}
+// Title + an optional inline status pill, on one baseline.
+.page-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.page-status {
+    display: inline-flex;
+    align-items: center;
+}
 .page-title {
     font-size: 24px;
     font-weight: 600;
@@ -162,17 +247,67 @@
     align-items: center;
 }
 
+// ── Size scale ── (`size`): the title and the block's rhythm scale together.
+.page-header-sm {
+    margin-bottom: 16px;
+}
+.page-header-sm .page-title {
+    font-size: 20px;
+}
+.page-header-sm .page-header-icon {
+    width: 34px;
+    height: 34px;
+}
+.page-header-lg {
+    margin-bottom: 32px;
+}
+.page-header-lg .page-title {
+    font-size: 30px;
+}
+.page-header-lg .page-header-icon {
+    width: 48px;
+    height: 48px;
+}
+
+// ── Centre alignment ── (`align="center"`): for empty-state and wizard mastheads.
+.page-header-center .page-header-bar {
+    justify-content: center;
+    text-align: center;
+}
+.page-header-center .page-header-lead {
+    flex-direction: column;
+    align-items: center;
+}
+.page-header-center .page-titlebar {
+    justify-content: center;
+}
+
+// ── Divider ── (`divider`): a hairline rule under the masthead.
+.page-header-divider {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 16px;
+}
+
+// ── Sticky ── (`sticky`): pins the masthead to the top of its scroll container.
+.page-header-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: var(--color-surface);
+    padding-top: 12px;
+}
+
 // Tablet and below: the masthead stops being a single row — the title block and
 // its actions stack, and the actions stretch to the full width rather than
 // crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
 //
-// Selectors are DOUBLED (`.page-header.page-header`) on purpose. A media query
-// adds no specificity, so a consumer's own single-class rule — written later in
-// the cascade, as a consuming app's stylesheet always is — silently beats the
+// Selectors are DOUBLED (`.page-header-bar.page-header-bar`) on purpose. A media
+// query adds no specificity, so a consumer's own single-class rule — written later
+// in the cascade, as a consuming app's stylesheet always is — silently beats the
 // responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
 // so they hold, while still leaving a consumer free to override deliberately.
 @media (max-width: 991.98px) {
-    .page-header.page-header {
+    .page-header-bar.page-header-bar {
         flex-direction: column;
         align-items: stretch;
         gap: 12px;