@webority/theme 0.7.1 → 0.7.2

package/package.json

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

@@ -49,8 +49,11 @@
 // ---- Display heading -------------------------------------------------
 // Bootstrap's .display-1..6 ladder skews bigger than our locked design.
 // .h-display drops in where the marketing hero needs the locked
-// font-weight 500 + tight letter-spacing.
+// font-weight 500 + tight letter-spacing. font-family reads --wui-font-display
+// so a product can swap in a serif/brand display face by overriding just that
+// token (default: the same body stack .font-display already uses).
 .h-display {
+    font-family: var(--wui-font-display, var(--bs-body-font-family));
     font-weight: 500;
     letter-spacing: -0.03em;
     line-height: 1.05;
@@ -89,6 +92,14 @@
     --bs-btn-hover-border-color:  var(--wui-primary-pressed);
     --bs-btn-active-bg:           var(--wui-primary-pressed);
     --bs-btn-active-border-color: var(--wui-primary-pressed);
+    // Bootstrap computes this label colour at SCSS compile time from the library's
+    // default $primary, so it can never react to a product overriding --wui-primary as a
+    // runtime CSS var. Routing it through the token makes a light-primary brand's
+    // --wui-primary-text override reach the button.
+    --bs-btn-color:               var(--wui-primary-text);
+    --bs-btn-hover-color:         var(--wui-primary-text);
+    --bs-btn-active-color:        var(--wui-primary-text);
+    --bs-btn-disabled-color:      var(--wui-primary-text);
 }
 
 .btn-danger {
@@ -110,6 +121,24 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Themed disabled state (fleet default). Bootstrap's own disabled look is just the
+// variant's colour at --bs-btn-disabled-opacity (.65) — barely different from the active
+// button on a tinted brand palette. Give the ordinary case a real desaturated/muted look
+// instead, reusing the same tokens .input:disabled already uses so a disabled button and
+// a disabled field read as the same state.
+//
+// Excludes .btn-primary and .btn-danger, which already theme their OWN disabled state
+// above (a faded version of their own fill, driven by --bs-btn-disabled-*) — :not() keeps
+// this rule from fighting theirs rather than relying on source order.
+.btn:disabled:not(.btn-primary):not(.btn-danger),
+.btn.disabled:not(.btn-primary):not(.btn-danger) {
+    background-color: var(--color-bg-muted);
+    border-color: var(--color-border);
+    color: var(--color-text-subtle);
+    opacity: 1;
+    cursor: not-allowed;
+}
+
 
 // ---- Component radii from tokens ------------------------------------
 // .btn/.card/.input capture Bootstrap's compiled $*-border-radius (the library
@@ -265,6 +294,30 @@
 }
 
 
+// ---- Ghost button (transparent, brand-tinted hover) ------------------
+// A real ghost button: transparent at rest (no fill, no border), current text colour;
+// only the background lights up — a soft brand tint, the same recipe as a
+// .dropdown-item's hover — on hover/active. AppButton's `ghost` variant emits this class
+// on both surfaces; distinct from Bootstrap's .btn-link, which reads as a hyperlink
+// (underlined, link-coloured text) rather than a quiet button. Marketing anchors reach
+// for it directly for the same look on a plain <a>.
+//
+// No .btn-ghost-sm/-lg rungs: unlike .btn-pill (a bespoke marketing sizing system), this
+// is an ordinary .btn variant, so it sizes the same way .btn-primary/.btn-danger do —
+// Bootstrap's own .btn-sm/.btn-lg.
+.btn-ghost {
+    --bs-btn-color:               var(--color-text);
+    --bs-btn-bg:                  transparent;
+    --bs-btn-border-color:        transparent;
+    --bs-btn-hover-color:         var(--color-text);
+    --bs-btn-hover-bg:            var(--wui-primary-5);
+    --bs-btn-hover-border-color:  transparent;
+    --bs-btn-active-color:        var(--color-text);
+    --bs-btn-active-bg:           var(--wui-primary-10);
+    --bs-btn-active-border-color: transparent;
+}
+
+
 // ---- Card "lifted" (shadowless) -------------------------------------
 // Previously a soft drop-shadow card; now flat. The `.card-lifted`
 // class is preserved so existing call sites don't break — it now

package/scss/_tokens.scss

@@ -119,6 +119,15 @@
     --wui-container-max: 1512px;
     --wui-container-pad: 24px;
 
+    // ---- Primary "on-fill" text --------------------------------------
+    // Unlike the semantic -text tokens below (a legible STANDALONE colour derived
+    // from a fill, for using the status colour AS body text), this is the text/icon
+    // colour to use ON TOP OF a solid --wui-primary fill — a selected datepicker day,
+    // an active pagination page, a checked segmented option, .btn-primary's label.
+    // Default assumes primary is dark enough for white; a brand with a light primary
+    // overrides this to a dark value instead.
+    --wui-primary-text: #fff;
+
     // ---- Semantic status ramps -------------------------------------
     // Canonical info/success/warning/danger scales: `active` (text/icon on
     // light), the base `100` (vivid fills/dots), then tints 50/30/20/10/5.
@@ -189,6 +198,38 @@
     --wui-dark-text-subtle:  #8a90a0;
     --wui-dark-primary:      #6B83EC;
     --wui-dark-primary-hover:#93A6F2;
+
+    // ---- Fluid type scale --------------------------------------------
+    // clamp(min, preferred, max) so type scales smoothly between viewports instead of
+    // stepping at Bootstrap's breakpoints. `base` sits close to Bootstrap's own 1rem body
+    // size; every other step is derived at a consistent ratio, up and down. Additive only —
+    // nothing in the shared theme consumes these yet, a product opts in per element.
+    --wui-fs-xs:   clamp(0.75rem,  0.73rem + 0.1vw,  0.8125rem);
+    --wui-fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
+    --wui-fs-base: clamp(0.95rem,  0.9rem + 0.25vw,  1.05rem);
+    --wui-fs-lg:   clamp(1.05rem,  0.98rem + 0.35vw, 1.25rem);
+    --wui-fs-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
+    --wui-fs-2xl:  clamp(1.5rem,   1.3rem + 1vw,     2rem);
+    --wui-fs-3xl:  clamp(1.875rem, 1.5rem + 1.75vw,  2.75rem);
+
+    // ---- Display font slot --------------------------------------------
+    // A dedicated slot for a display/heading typeface, kept separate from
+    // $font-family-base so a product can point ONLY its display headings (.h-display) at a
+    // serif or another brand face by overriding this one token, without touching body copy.
+    // Defaults to the same stack .font-display already uses.
+    --wui-font-display: var(--bs-body-font-family);
+
+    // ---- Z-index scale -------------------------------------------------
+    // Bootstrap's own ladder ($zindex-dropdown etc.), exposed as CSS vars so a component
+    // or a consuming product can layer against the same scale instead of inventing values.
+    --wui-z-dropdown:       1000;
+    --wui-z-sticky:         1020;
+    --wui-z-fixed:          1030;
+    --wui-z-modal-backdrop: 1040;
+    --wui-z-modal:          1050;
+    --wui-z-popover:        1060;
+    --wui-z-tooltip:        1070;
+    --wui-z-toast:          1080;
 }
 
 // Bootstrap md / xl (not invented px)

package/scss/_wui-aliases.scss

@@ -36,6 +36,9 @@
   --color-primary:       var(--wui-primary);
   --color-primary-hover: var(--wui-primary-pressed);
   --color-primary-soft:  var(--wui-primary-10);
+  // Text/icon colour for content sitting ON a solid --color-primary fill — see
+  // --wui-primary-text for why this is a different axis from the -text tokens below.
+  --color-primary-text:  var(--wui-primary-text);
 
   // Semantic status ramps
   --color-info-active:    var(--wui-info-active);

package/scss/_wui-components.scss

@@ -34,6 +34,7 @@
 @import "wui/disclosure";
 @import "wui/display";
 @import "wui/flow";
+@import "wui/scrollbar";
 
 // Flags belong here because <wui-phone> cannot render without them.
 //

package/scss/wui/_choice.scss

@@ -415,6 +415,11 @@
     color: var(--color-primary);
     font-weight: 500;
 }
+// allow-custom's freeform row — reads as an action ("Add "…"") rather than a listed value.
+.search-select-option-custom {
+    font-style: italic;
+    color: var(--color-primary);
+}
 .search-select-empty {
     padding: 12px 10px;
     font-size: 13px;
@@ -627,7 +632,7 @@ button.datepicker-month:hover {
 }
 .datepicker-day.is-selected {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .datepicker-day:disabled {
@@ -696,7 +701,7 @@ button.datepicker-month:hover {
 }
 .datepicker-cell.is-selected {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .datepicker-cell:disabled {
@@ -842,7 +847,7 @@ button.datepicker-month:hover {
 .datepicker-day.is-range-start,
 .datepicker-day.is-range-end {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .daterange-hint {

package/scss/wui/_controls.scss

@@ -348,9 +348,12 @@
     resize: none;
     overflow: hidden;
 }
-.input:hover:not(:focus):not(:disabled),
-.select:hover:not(:focus):not(:disabled),
-.textarea:hover:not(:focus):not(:disabled) {
+// The `.error` / `.is-invalid` / `[aria-invalid="true"]` guards keep an invalid field's
+// danger border visible on hover — without them the hover rule repaints it grey and the
+// error signal disappears the moment the cursor passes over the field.
+.input:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+.select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+.textarea:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }

package/scss/wui/_data.scss

@@ -407,6 +407,46 @@
     cursor: not-allowed;
 }
 
+// Numbered mode (mode="numbered") — windowed page buttons sitting between the prev/next
+// arrows in .tpg-nav, same 32px circular hit target as .tpg-arrow.
+.tpg-page {
+    display: grid;
+    place-items: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    border-radius: 50%;
+    font-size: 13px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background 0.14s ease,
+        color 0.14s ease;
+}
+.tpg-page:hover:not(.is-active) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+}
+.tpg-page.is-active {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    cursor: default;
+}
+.tpg-ellipsis {
+    display: grid;
+    place-items: center;
+    min-width: 24px;
+    height: 32px;
+    color: var(--color-text-subtle);
+    font-size: 13px;
+    user-select: none;
+}
+
 // Horizontal scroll guard + flush-fit inside a card. Wrapping the table here
 // also stops `.card > .table` header-corner rounding from applying mid-card.
 .table-wrap {

package/scss/wui/_display.scss

@@ -31,7 +31,9 @@
 .kpi-label {
     font-size: 13px;
     font-weight: 500;
-    color: var(--color-text-subtle);
+    // --color-text-muted (not -subtle): -subtle is ~4.5:1 on white and dips below AA on the
+    // filled/accent variant's tinted surface. -muted clears AA on every kpi variant.
+    color: var(--color-text-muted);
 }
 .kpi-value {
     margin-top: 6px;
@@ -76,6 +78,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.
+.kpi.kpi-filled {
+    border-color: transparent;
+    background: var(--color-bg-subtle);
+}
+.kpi.kpi-accent {
+    border-color: transparent;
+    background: var(--color-primary-soft);
+}
+
 // A row of tiles. Wraps rather than scrolls — a KPI strip that scrolls hides numbers.
 .kpi-row {
     display: grid;
@@ -213,11 +227,34 @@ a.info-row:hover .info-value {
 .segmented-option:hover {
     color: var(--color-text);
 }
+// A per-option sub-label under the main text — optional, so a segment without one keeps the
+// plain single-line layout above untouched.
+.segmented-option-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    line-height: 1.2;
+}
+.segmented-option-label {
+    font: inherit;
+    color: inherit;
+}
+.segmented-option-note {
+    font-size: 10px;
+    font-weight: 400;
+    // Inherits the option's current text colour (muted, hover, or white-on-checked) rather
+    // than a fixed token, so it always matches without a separate state per variant. No opacity
+    // muting — that dropped the sub-label below AA on an unchecked option; the 10px size already
+    // distinguishes it from the label.
+    color: currentColor;
+}
 .segmented-option:has(.segmented-input:checked) {
     background: var(--color-primary);
-    // Fixed white, not a token: the pill is always the brand fill, so its label
-    // must contrast with that fill and not with the page.
-    color: #fff;
+    // Token, not fixed white: the pill is always the brand fill, so its label must
+    // contrast with THAT fill, not the page — a light-primary brand overrides
+    // --wui-primary-text to a dark value and this follows automatically.
+    color: var(--color-primary-text);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {

package/scss/wui/_overlays.scss

@@ -79,58 +79,10 @@
     flex-direction: column;
     overflow: hidden;
 }
-.wui-modal-wide {
-    max-width: var(--wui-modal-max-width, 1240px);
-}
-
-// Side drawer — the dialog docks to the right edge at 30% of the viewport
-// and slides in, instead of sitting centred. Same chrome, different
-// geometry.
-.modal.wui-modal-shell.is-side {
-    align-items: stretch;
-    justify-content: flex-end;
-    padding: 0;
-}
-.modal.wui-modal-shell.is-side .modal-dialog.wui-rb-dialog {
-    height: 100%;
-    width: auto;
-    max-width: none;
-    align-items: stretch;
-    justify-content: flex-end;
-}
-.wui-modal-side {
-    width: 30vw;
-    min-width: 420px;
-    max-width: none;
-    max-height: 100vh;
-    height: 100vh;
-    border-radius: 0;
-    corner-shape: normal;
-    animation: wui-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
-}
-@media (max-width: 991.98px) {
-    .wui-modal-side {
-        width: 70vw;
-    }
-}
-@media (max-width: 575.98px) {
-    .wui-modal-side {
-        width: 100vw;
-    }
-}
-@keyframes wui-drawer-in {
-    from {
-        transform: translateX(100%);
-    }
-    to {
-        transform: translateX(0);
-    }
-}
-@media (prefers-reduced-motion: reduce) {
-    .wui-modal-side {
-        animation: none;
-    }
-}
+// The centred card keeps Bootstrap's own modal transition — a smooth fade + slide-down that
+// Bootstrap already disables under prefers-reduced-motion. Nothing to override here; both
+// react-bootstrap (animation on) and Bootstrap's JS drive it. Width comes from `size`, which
+// both surfaces resolve to `--wui-modal-max-width` on the shell (it inherits to `.wui-modal`).
 .wui-modal-header {
     flex: 0 0 auto;
     display: flex;
@@ -210,6 +162,38 @@
     color: var(--color-text-muted);
     overflow-wrap: anywhere;
 }
+// Eyebrow — a small kicker label above the title (a section / step / category marker).
+.wui-modal-eyebrow {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-primary);
+    margin-bottom: 2px;
+}
+// `tone` tints the header icon tile and the eyebrow, so a destructive or a success dialog
+// carries its intent in the header. Default keeps the neutral primary tint above.
+.wui-modal.tone-danger .wui-modal-headicon {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-modal.tone-danger .wui-modal-eyebrow {
+    color: var(--color-danger-text);
+}
+.wui-modal.tone-success .wui-modal-headicon {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.wui-modal.tone-success .wui-modal-eyebrow {
+    color: var(--color-success-text);
+}
+.wui-modal.tone-warning .wui-modal-headicon {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.wui-modal.tone-warning .wui-modal-eyebrow {
+    color: var(--color-warning-text);
+}
 .wui-form-section {
     margin-top: 24px;
 }

package/scss/wui/_scrollbar.scss

@@ -0,0 +1,32 @@
+// AppScrollbar — a thin, themed scrollbar drawn with NATIVE CSS scrollbar styling: no JavaScript
+// and no dependency (it replaced a wrapped simplebar-react, whose foreign `.simplebar-*` markup
+// and stylesheet had no place in the library). `scrollbar-width` / `scrollbar-color` style the
+// track on Firefox; the `::-webkit-scrollbar` rules cover Chromium and Safari. The track stays
+// transparent so the thumb reads as a slim overlay rather than filling a grey gutter.
+.wui-scroll {
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--wui-text-3) transparent;
+}
+
+.wui-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.wui-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.wui-scroll::-webkit-scrollbar-thumb {
+    background-color: var(--wui-text-3);
+    border-radius: 8px;
+    // A 2px transparent border clipped to padding-box insets the thumb, so it sits as a slim pill
+    // in the middle of the track instead of filling the whole gutter width.
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+
+.wui-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: var(--wui-text-2);
+}