@webority/theme 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.8.0",
+  "version": "0.8.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/_display.scss

@@ -12,7 +12,6 @@
     display: flex;
     flex-direction: column;
     padding: 18px 20px;
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
@@ -119,21 +118,18 @@
     margin-top: 2px;
 }
 
-// Surface variants — plain (above) is the bordered card; these swap the fill and drop the
-// border so a dashboard can mix a KPI strip with the surrounding card without every tile
-// drawing its own outline.
+// Surface variants — plain (above) is borderless on the surface fill; these just swap the
+// fill so a dashboard can mix a KPI strip with the surrounding card.
 .kpi.kpi-filled {
-    border-color: transparent;
     background: var(--color-bg-subtle);
 }
 .kpi.kpi-accent {
-    border-color: transparent;
     background: var(--color-primary-soft);
 }
 // Needs-action state — orthogonal to variant, so it composes with plain/filled/accent
-// rather than replacing the surface.
+// rather than replacing the surface. Draws its own outline since the base tile no longer does.
 .kpi.kpi-attention {
-    border-color: var(--color-warning);
+    border: 1px solid var(--color-warning);
     background: var(--color-warning-soft);
 }
 
@@ -153,18 +149,64 @@
     height: 44px;
 }
 
+// Spotlight — an editorial feature tile: the label sits top-left with the icon chip pinned
+// top-right, the value is set in the display face (a product's serif brand face when it
+// overrides --wui-font-display), and an optional caption reads under the number. For the
+// single showcase stat on a marketing/portal surface where the number is the hero.
+.kpi.kpi-spotlight {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 16px;
+    padding: 22px 24px;
+}
+.kpi.kpi-spotlight .kpi-icon {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    margin-bottom: 0;
+}
+.kpi.kpi-spotlight .kpi-label,
+.kpi.kpi-spotlight .kpi-value,
+.kpi.kpi-spotlight .kpi-caption,
+.kpi.kpi-spotlight .kpi-delta {
+    grid-column: 1;
+}
+.kpi.kpi-spotlight .kpi-label {
+    align-self: center;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+}
+.kpi.kpi-spotlight .kpi-value {
+    margin-top: 14px;
+    // The editorial serif is this variant's signature (see the reference tile), so the value gets
+    // a serif stack directly — not --wui-font-display, which defaults to the body sans and so would
+    // never read as serif. A product that wants its own face overrides this one selector.
+    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
+    font-size: 44px;
+    line-height: 1;
+    font-weight: 600;
+}
+// Caption — the sub-line under the value ("Total sent"). Spotlight-only today, but the class
+// is variant-agnostic so a plain tile can carry one too.
+.kpi-caption {
+    margin-top: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--color-text-muted);
+}
+
 // The whole tile as a link (href). Colour/underline reset so the anchor reads as the
 // card, not as text; the hover lift matches .res-card's tint-and-lift treatment.
 a.kpi {
     text-decoration: none;
     color: inherit;
     transition:
-        border-color 0.15s ease,
         box-shadow 0.15s ease,
         transform 0.15s ease;
 }
 a.kpi:hover {
-    border-color: var(--color-primary);
     box-shadow: var(--shadow-md);
     transform: translateY(-2px);
 }
@@ -566,6 +608,9 @@ a.info-row:hover .info-value {
 // cannot break into segments when an entry wraps to two lines.
 // ============================================================================
 .timeline {
+    // One knob for the whole component: the dot diameter. The rail, halo and
+    // glyph all derive from it, so `size` (px) scales everything in proportion.
+    --wui-timeline-dot: 24px;
     position: relative;
     margin: 0;
     padding: 0 0 0 6px;
@@ -575,9 +620,9 @@ a.info-row:hover .info-value {
     content: "";
     position: absolute;
     // Inset top and bottom so the rail starts and ends inside the first/last dot.
-    top: 10px;
-    bottom: 10px;
-    left: 17px;
+    top: calc(var(--wui-timeline-dot) / 2 - 2px);
+    bottom: calc(var(--wui-timeline-dot) / 2 - 2px);
+    left: calc(6px + var(--wui-timeline-dot) / 2 - 1px);
     width: 2px;
     background: var(--color-border);
 }
@@ -594,8 +639,8 @@ a.info-row:hover .info-value {
     position: relative;
     z-index: 1;
     flex: none;
-    width: 24px;
-    height: 24px;
+    width: var(--wui-timeline-dot);
+    height: var(--wui-timeline-dot);
     display: inline-grid;
     place-items: center;
     border-radius: 999px;
@@ -659,6 +704,119 @@ a.info-row:hover .info-value {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }
+// Plain inline subtext under the title — a muted line (distinct from the boxed
+// .timeline-note). Works in both variants; used heavily by the progress variant.
+.timeline-desc {
+    margin-top: 2px;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--color-text-muted);
+    overflow-wrap: anywhere;
+}
+
+// ----------------------------------------------------------------------------
+// Progress variant — a status tracker (Initiated → Submitted → … → Disbursed).
+// Solid status dots (done/current/rejected) or a hollow ring (upcoming); the
+// rail is drawn PER SEGMENT so a completed step's outgoing line reads filled.
+// ----------------------------------------------------------------------------
+.timeline--progress {
+    // Halo widths scale with the dot: the coloured ring and the thin blank ring.
+    --wui-timeline-halo: calc(var(--wui-timeline-dot) / 4);
+    --wui-timeline-halo-thin: calc(var(--wui-timeline-dot) / 12);
+    // Room on the left so a status dot's soft halo ring isn't clipped.
+    padding-left: calc(var(--wui-timeline-halo) + 1px);
+}
+// No single list rail — each item owns the segment down to the next dot so it
+// can be tinted independently.
+.timeline--progress::before {
+    display: none;
+}
+.timeline--progress .timeline-item {
+    padding-bottom: 22px;
+}
+// The connector from this dot down into the next one — anchored to the dot's
+// bottom edge and centre, so it stays aligned at any dot size.
+.timeline--progress .timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: var(--wui-timeline-dot);
+    bottom: -2px;
+    left: calc(var(--wui-timeline-dot) / 2 - 1px);
+    width: 2px;
+    background: var(--color-border);
+}
+// The rail fills green only BETWEEN two completed steps, so a lone/last done
+// step doesn't leave a green stub dangling into an incomplete step below it.
+.timeline--progress .timeline-item.is-done:has(+ .timeline-item.is-done)::before {
+    background: var(--color-success);
+}
+// Base / upcoming dot: a hollow ring for a not-yet-reached step. Its 2px grey
+// halo is OPAQUE (mixed toward the surface, not transparent) so it masks the
+// rail behind the dot — the connector only shows in the clear gap, never
+// bleeding through the ring's halo.
+.timeline--progress .timeline-dot,
+.timeline--progress .timeline-item.is-upcoming .timeline-dot {
+    color: var(--color-text-subtle);
+    background: var(--color-surface);
+    box-shadow:
+        inset 0 0 0 2px var(--color-border),
+        0 0 0 var(--wui-timeline-halo-thin) color-mix(in srgb, var(--color-text-subtle) 12%, var(--color-surface));
+}
+// Solid status discs with a white glyph and a soft concentric halo ring in the
+// dot's own hue. The fill is softened a touch (mixed toward the surface) so the
+// states read gentler than the raw brand tones.
+.timeline--progress .timeline-item.is-done .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-success) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-success-soft);
+}
+.timeline--progress .timeline-item.is-current .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-warning) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-warning-soft);
+}
+.timeline--progress .timeline-item.is-rejected .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-danger) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-danger-soft);
+}
+// Blocked / waiting on an external action — informational blue.
+.timeline--progress .timeline-item.is-on-hold .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-info) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-info-soft);
+}
+// Cancelled / skipped — resolved-but-inactive outcomes read as muted slate,
+// with a soft neutral halo, so they sit visually below the live states.
+.timeline--progress .timeline-item.is-cancelled .timeline-dot,
+.timeline--progress .timeline-item.is-skipped .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-text-subtle) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
+}
+// A cancelled step's title is struck through — the plan changed.
+.timeline--progress .timeline-item.is-cancelled .timeline-title {
+    text-decoration: line-through;
+    color: var(--color-text-muted);
+}
+// Title row: title on the left, the timestamp pinned to the right.
+.timeline--progress .timeline-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+}
+.timeline--progress .timeline-head .timeline-at {
+    flex: none;
+    font-size: 12.5px;
+    color: var(--color-text-subtle);
+    white-space: nowrap;
+}
+// An upcoming step greys down — it hasn't happened yet.
+.timeline--progress .timeline-item.is-upcoming .timeline-title {
+    color: var(--color-text-muted);
+    font-weight: 500;
+}
 
 // ============================================================================
 // Feature-comparison table — us vs them. The highlighted column is tinted so

package/scss/wui/_workspace.scss

@@ -25,21 +25,31 @@
     width: 100%;
     min-height: 48px;
     padding: 6px 10px;
-    background: var(--color-bg-subtle);
-    border: 1px solid var(--color-border-light);
+    // The trigger IS a closed picker, so it wears AppSelect's control skin (.input): a muted
+    // resting fill, a grey border, and the same border/box-shadow transition — nothing bespoke.
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     color: var(--color-text);
     text-align: left;
     cursor: pointer;
-    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition:
+        border-color 0.12s,
+        box-shadow 0.12s;
 }
-.workspace-switcher-trigger:hover {
-    background: var(--color-primary-soft);
+// Hover while closed darkens the border, exactly like a resting AppSelect on hover.
+.workspace-switcher-trigger:hover:not(:focus):not([aria-expanded="true"]) {
+    border-color: var(--color-border-strong);
 }
-.workspace-switcher-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+// Focus / open lifts onto a white surface with the soft brand border — the same active cue
+// AppSelect gives a focused or open control (border is the cue; no ring, no shadow).
+.workspace-switcher-trigger:focus-visible,
+.workspace-switcher-trigger[aria-expanded="true"] {
+    outline: none;
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
+    box-shadow: none;
 }
 .workspace-switcher-trigger.is-compact {
     width: 36px;
@@ -86,6 +96,49 @@
     overflow: hidden;
 }
 
+// ── Size tiers ──
+// md is the base above. sm/lg scale the TRIGGER only — the card (and the compact square),
+// its mark and its name; the dropdown menu is a fixed 280px panel at every size, the same
+// way `compact` is a shape switch rather than a resize.
+.workspace-switcher-sm .workspace-switcher-trigger {
+    min-height: 40px;
+    padding: 4px 8px;
+    gap: 8px;
+}
+.workspace-switcher-sm .workspace-switcher-trigger.is-compact {
+    width: 32px;
+    min-height: 32px;
+    height: 32px;
+    padding: 0;
+}
+.workspace-switcher-sm .workspace-switcher-mark {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+}
+.workspace-switcher-sm .workspace-switcher-trigger-name {
+    font-size: 13px;
+}
+.workspace-switcher-lg .workspace-switcher-trigger {
+    min-height: 56px;
+    padding: 8px 12px;
+    gap: 12px;
+}
+.workspace-switcher-lg .workspace-switcher-trigger.is-compact {
+    width: 44px;
+    min-height: 44px;
+    height: 44px;
+    padding: 0;
+}
+.workspace-switcher-lg .workspace-switcher-mark {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+}
+.workspace-switcher-lg .workspace-switcher-trigger-name {
+    font-size: 15px;
+}
+
 // ── Menu ──
 .workspace-switcher .workspace-switcher-menu {
     width: 280px;