@webority/theme 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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/wui/_card.scss

@@ -11,6 +11,7 @@
 // pattern nearly every panel header uses, so it belongs here rather than being
 // re-flexed with utilities on each one.
 .card-header {
+    --bs-card-cap-bg: var(--color-surface);
     display: flex;
     align-items: center;
     justify-content: space-between;

package/scss/wui/_controls.scss

@@ -889,9 +889,19 @@ wui-select[compact] {
 .field > .input-with-unit,
 .field > .input,
 .field > .datepicker,
+.field > .file-input,
+.field > .file-preview,
 .field > .field-error {
     align-self: stretch;
 }
+// A file picker fills its column by default (align-self:stretch fills the field on the cross
+// axis, but the field itself collapses to its content when it is a flex item — the showcase
+// lays fields out in a flex row — so stretch the field to its container first). Override per
+// use with a .file-w-* class or the --wui-file-width variable.
+.field:has(> .file-input),
+.field:has(> .file-preview) {
+    width: var(--wui-file-width, 100%);
+}
 // Doubled selectors — see the lg-tier block below: a media query carries no
 // extra specificity, so a consumer's later single-class rule would win.
 @media (max-width: 575.98px) {

package/scss/wui/_media.scss

@@ -183,9 +183,78 @@
     stroke: #fff;
     stroke-width: 2px;
 }
+// Compact attached items — used for every file in `multiple` mode and for a single
+// non-image attachment (a big letterboxed preview only makes sense for one image).
+.attach-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.attach-list:not(:first-child) {
+    margin-top: 8px;
+}
+.attach-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    min-width: 0;
+}
+.attach-item-media {
+    flex: 0 0 auto;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--color-bg-muted);
+    color: var(--color-primary);
+}
+.attach-item-media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.attach-item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+.attach-item-remove {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        border-color 0.2s,
+        color 0.2s,
+        background 0.2s;
+}
+.attach-item-remove:hover {
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+    background: var(--color-danger-soft);
+}
+
 @media (prefers-reduced-motion: reduce) {
     .attach-drop,
-    .attach-remove {
+    .attach-remove,
+    .attach-item-remove {
         transition: none;
     }
 }
@@ -246,7 +315,11 @@
     align-items: center;
     justify-content: center;
     gap: 10px;
-    height: 350px;
+    height: 200px;
+    // Fills its column — a full-width drop target. The .field:has() rule below makes the field
+    // itself stretch first (the showcase lays fields out in a flex row, where a field otherwise
+    // collapses to its content), then align-self:stretch fills the field.
+    width: 100%;
     padding: 20px;
     text-align: center;
     background: var(--color-bg-subtle);
@@ -255,10 +328,79 @@
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
+// Hover, focus and drag-over all take the same soft primary-30% border AppInput shows on
+// focus — a clear hue shift from the resting grey dashed border, without the loud full
+// --color-primary the dropzone used before.
 .file-input.file-input-tall:hover,
+.file-input.file-input-tall:focus-within,
+.file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: var(--color-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-bg-muted);
+    box-shadow: none;
+}
+// A rejected file (wrong type / too large) turns the dropzone border danger to match the
+// inline reason shown below it.
+.file-input.file-input-tall.error {
+    border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-surface));
+}
+// Multiple mode with files: the box grows to hold the picked-file list INSIDE it, below a
+// compact upload prompt — not a separate list beneath the box. The prompt drops from the
+// absolute-fill centred stack to a static compact row at the top; the list scrolls within.
+.file-input.file-input-tall.has-files {
+    height: auto;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 14px;
+    cursor: default;
+}
+.file-input.file-input-tall.has-files > .file-input-zone-label {
+    position: static;
+    inset: auto;
+    flex-direction: row;
+    gap: 10px;
+    padding: 4px;
+    cursor: pointer;
+}
+.file-input.file-input-tall.has-files .file-input-icon {
+    width: 40px;
+    height: 40px;
+}
+.file-input.file-input-tall.has-files .file-input-text {
+    display: none;
+}
+.file-input.file-input-tall.has-files .attach-list {
+    width: 100%;
+    max-height: 240px;
+    overflow-y: auto;
+    // The dropzone sets text-align:center for the centred prompt; the file rows must not
+    // inherit it — name and size read left-aligned next to the thumbnail.
+    text-align: left;
+}
+// While managing files, keep the border calm on hover/focus (it is no longer just a
+// "click to upload" affordance); still highlight when a file is actually dragged over.
+.file-input.file-input-tall.has-files:hover,
+.file-input.file-input-tall.has-files:focus-within {
+    border-color: var(--color-border-strong);
+    background: var(--color-bg-subtle);
+}
+.file-input.file-input-tall.has-files.dragging {
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-bg-muted);
+}
+// Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
+// dropzone to a fixed width instead of the full column. Mirror of the datepicker .date-w-* set.
+.file-w-sm {
+    --wui-file-width: 18rem;
+}
+.file-w-md {
+    --wui-file-width: 24rem;
+}
+.file-w-lg {
+    --wui-file-width: 30rem;
+}
+.file-w-full {
+    --wui-file-width: 100%;
 }
 // Fill-label associates click with the hidden file input; children don't
 // steal drag hits.
@@ -310,7 +452,7 @@
     box-sizing: border-box;
     display: block;
     width: 100%;
-    height: 350px;
+    height: 200px;
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
@@ -417,6 +559,10 @@
 // Round dropzone uploader (workspace/brand logo) and the settings-page photo
 // ring share this same interactive-uploader pattern.
 .set-uploader {
+    // One knob for the whole control — the ring diameter. Presets and the numeric `size`
+    // prop set it (inline); the ring, initials font and icons all derive from it, so any
+    // px value scales the picker proportionally. md (120px) is the default.
+    --wui-logo-size: 120px;
     display: inline-flex;
     padding: 0;
     border: none;
@@ -436,10 +582,10 @@
 }
 .set-uploader-ring {
     position: relative;
-    width: 120px;
-    height: 120px;
+    width: var(--wui-logo-size);
+    height: var(--wui-logo-size);
     border-radius: 50%;
-    padding: 8px;
+    padding: 5px;
     border: 1px dashed color-mix(in srgb, var(--color-border-strong) 75%, transparent);
     cursor: pointer;
     transition: border-color 0.18s;
@@ -455,15 +601,21 @@
     border-radius: 50%;
     display: grid;
     place-items: center;
-    font-size: 38px;
+    // Initials scale with the ring (~32% of the diameter reads well at every size).
+    font-size: calc(var(--wui-logo-size) * 0.32);
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--color-primary);
     background: var(--color-primary-soft);
 }
+// Avatar variant — the standard avatar disc (muted fill) instead of the soft-primary
+// initials plate; used with a person icon when no initials are given.
+.set-uploader--avatar .set-uploader-logo {
+    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
+}
 .set-uploader-overlay {
     position: absolute;
-    inset: 8px;
+    inset: 5px;
     border-radius: 50%;
     display: flex;
     flex-direction: column;
@@ -491,12 +643,78 @@
     cursor: progress;
 }
 .set-uploader-hint {
-    margin: 18px auto 0;
+    margin: 12px 0 0;
     max-width: 240px;
     font-size: 12px;
     line-height: 1.5;
     color: var(--color-text-subtle);
 }
+// The picker field sizes to its content (the ring) rather than stretching to the
+// form width the way a text field does.
+.set-uploader-field {
+    gap: 8px;
+    width: max-content;
+    max-width: 100%;
+}
+// Positioning context for the remove control, which is a sibling of the button.
+.set-uploader-shell {
+    position: relative;
+    display: inline-block;
+}
+// Ring highlights while a file is dragged over it.
+.set-uploader.is-dragging .set-uploader-ring {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+}
+// A plain disabled (not busy) picker: dim it and drop the pointer affordance.
+.set-uploader:disabled:not([aria-busy="true"]) {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+.set-uploader:disabled:not([aria-busy="true"]) .set-uploader-ring {
+    border-style: solid;
+}
+.set-uploader-remove {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 2px solid var(--color-surface);
+    border-radius: 50%;
+    background: var(--color-danger, #dc3545);
+    color: #fff;
+    cursor: pointer;
+    transition: transform 0.15s;
+}
+.set-uploader-remove:hover {
+    transform: scale(1.08);
+}
+// The control's own display would otherwise beat the UA [hidden] rule and keep it visible.
+.set-uploader-remove[hidden] {
+    display: none;
+}
+
+// Size is driven entirely by the --wui-logo-size custom property (set inline from the
+// `size` prop / preset), so there are no per-size class rules to keep in sync.
+
+// Shape variants — every round face (ring, image, logo, overlay) shares one radius.
+.set-uploader--rounded .set-uploader-ring,
+.set-uploader--rounded .set-uploader-img,
+.set-uploader--rounded .set-uploader-logo,
+.set-uploader--rounded .set-uploader-overlay {
+    border-radius: 18px;
+}
+.set-uploader--square .set-uploader-ring,
+.set-uploader--square .set-uploader-img,
+.set-uploader--square .set-uploader-logo,
+.set-uploader--square .set-uploader-overlay {
+    border-radius: 8px;
+}
 
 // Minimals-style rounded logo dropzone (workspace branding form).
 .logo-upload {

package/scss/wui/_navigation.scss

@@ -16,7 +16,7 @@
     --bs-offcanvas-border-width: 1px;
     --bs-offcanvas-padding-x: 0;
     --bs-offcanvas-padding-y: 0;
-    max-width: 100vw;
+    max-width: var(--asm-max-width, 92vw);
     display: flex;
     flex-direction: column;
 }
@@ -202,6 +202,24 @@
     background: var(--color-primary-soft);
     color: var(--color-primary);
 }
+// Semantic tone tints — React `tone` / Razor `Tone`, matching the vocabulary
+// `.status-label` uses (success | warning | danger | info).
+.app-tab-count.success {
+    background: color-mix(in srgb, var(--color-success) 16%, transparent);
+    color: var(--color-success-text);
+}
+.app-tab-count.warning {
+    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
+    color: var(--color-warning-text);
+}
+.app-tab-count.danger {
+    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
+    color: var(--color-danger-text);
+}
+.app-tab-count.info {
+    background: color-mix(in srgb, var(--color-info) 16%, transparent);
+    color: var(--color-info-text);
+}
 
 // Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
 // renders server-side. React composes the strip and its panels itself.