@webority/theme 0.7.4 → 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;
@@ -549,3 +549,30 @@
     cursor: not-allowed;
     opacity: 0.6;
 }
+
+// Breadcrumbs — Bootstrap's .breadcrumb with brand tokens (AppBreadcrumbs / <app-breadcrumbs>).
+// The divider is a CSS ::before glyph, so React (react-bootstrap Breadcrumb) and Razor share it.
+.breadcrumb {
+    --bs-breadcrumb-divider: "›";
+    --bs-breadcrumb-divider-color: var(--color-text-subtle);
+    margin-bottom: 0;
+    font-size: 13px;
+}
+.breadcrumb-item a {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--color-text-muted);
+    text-decoration: none;
+}
+.breadcrumb-item a:hover {
+    color: var(--color-primary);
+    text-decoration: underline;
+}
+.breadcrumb-item.active {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--color-text);
+    font-weight: 500;
+}

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 {