@webority/theme 0.6.13 → 0.7.1

package/package.json

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

@@ -111,6 +111,25 @@
 }
 
 
+// ---- Component radii from tokens ------------------------------------
+// .btn/.card/.input capture Bootstrap's compiled $*-border-radius (the library
+// ladder) before a product loads, so a product's --wui-radius* override never
+// reached them. Re-drive the radius from the tokens — the way the dropdown above
+// already does — so overriding the radius tokens once flows to every control.
+// sm/lg are re-asserted so they keep their own rung instead of the base value.
+.btn {
+    --bs-btn-border-radius: var(--wui-radius);
+}
+.btn-sm,
+.btn-group-sm > .btn {
+    --bs-btn-border-radius: var(--wui-radius-sm);
+}
+.btn-lg,
+.btn-group-lg > .btn {
+    --bs-btn-border-radius: var(--wui-radius-lg);
+}
+
+
 // ---- Dropdown menu (AppDropdown / <app-dropdown>) -------------------
 // Bootstrap ships a bare .dropdown-item; the design system gives the menu real
 // padding, an icon–label gap, a rounded hover highlight tinted with the brand,
@@ -259,6 +278,32 @@
 }
 
 
+// ---- Card surface + radius (token-driven) ---------------------------
+// Radius follows the token ladder (see component-radii note) instead of the
+// compiled $card-border-radius. Background is an ELEVATED surface, not the page
+// colour — so a card stays visible on a tinted page, and flips correctly in dark
+// mode because --color-surface is themed in the alias layer.
+.card {
+    --bs-card-border-radius: var(--wui-radius-lg);
+    --bs-card-bg: var(--color-surface);
+}
+
+// Header actions slot (React `headerActions` prop / Razor <app-card-actions>). Both
+// surfaces emit the same .card-header-actions class; the theme owns the right-push
+// so the markup carries no layout utility. Scoped to headers that actually contain
+// actions, so a plain text-only header stays block.
+.card-header:has(.card-header-actions) {
+    display: flex;
+    align-items: center;
+}
+.card-header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
+}
+
+
 // ---- Inputs ---------------------------------------------------------
 // 5 locked states — default / hover / focus / disabled / error —
 // matching the reference `<Input>` component. Bootstrap drives the base
@@ -271,6 +316,10 @@
 
 .form-control,
 .form-select {
+    // Radius follows the token ladder (see component-radii note) rather than the
+    // compiled $input-border-radius, so a product's --wui-radius override reaches
+    // the raw Bootstrap inputs the way it already reaches the .input primitive.
+    border-radius: var(--wui-radius);
     transition: border-color 0.15s ease;
 }
 .form-control:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]),

package/scss/_variables.scss

@@ -34,12 +34,29 @@ $theme-colors: (
     "dark":      $dark,
 );
 
+// Brand helper — set a product's primary ONCE and have the theme-colour map
+// (so every .btn-primary / .bg-primary / .text-primary utility) and $link-color
+// follow, instead of overriding each in turn. Call it in the product's
+// pre-bootstrap variables, BEFORE the `bootstrap/scss/bootstrap` import, e.g.:
+//
+//   @include wui-brand-primary(#0EA5E9);
+//   @import "bootstrap/scss/bootstrap";
+//
+// It rewrites the globals in place, so the whole Bootstrap colour system derives
+// from the one value. Runtime CSS tokens (--wui-primary*) are still overridden
+// separately, as usual.
+@mixin wui-brand-primary($primary) {
+    $primary: $primary !global;
+    $theme-colors: map-merge($theme-colors, ("primary": $primary)) !global;
+    $link-color: $primary !global;
+}
+
 
 // ---- Body / text ----------------------------------------------------
 $body-color:        #252F4A;  // text-1 from locked palette
 $body-bg:           #FFFFFF;
 $body-secondary-color: #4B5675;
-$body-tertiary-color:  #78829D;
+$body-tertiary-color:  #687088;   // AA on white (matches --wui-text-3); #78829D was only 3.5:1
 $body-secondary-bg: #F9FBFC;
 $body-tertiary-bg:  #F5F6FA;
 
@@ -151,7 +168,11 @@ $btn-transition:         color 0.15s ease, background-color 0.15s ease, border-c
 $input-bg:                #FFFFFF;
 $input-disabled-bg:       #F5F6FA;   // --wui-bg-muted
 $input-border-color:      $border-color;
-$input-focus-border-color: $primary;
+// $input-focus-border-color is intentionally NOT overridden. Setting it to $primary here
+// captures the LIBRARY's $primary (this file compiles before a product's brand override),
+// leaking indigo into every product's raw .form-control focus. Bootstrap's !default derives
+// it from the brand $primary after the override; the library's own .input:focus uses
+// var(--wui-primary), which the product overrides at runtime.
 $input-focus-box-shadow:  none;       // border IS the focus cue
 $input-focus-color:       $body-color;
 $input-padding-y:         0.5rem;     // 8px → 40px total height with 1rem font + 1.5 line-height
@@ -197,8 +218,11 @@ $link-hover-decoration: underline;
 
 
 // ---- Focus ring -----------------------------------------------------
+// $focus-ring-color is intentionally NOT overridden. rgba($primary, …) here captures the
+// LIBRARY's $primary (this file compiles before a product's brand override), so the ring
+// leaked indigo into every product. Bootstrap's !default `rgba($primary, $focus-ring-opacity)`
+// is evaluated after the brand override, so it tracks the brand correctly.
 $focus-ring-width:    3px;
-$focus-ring-color:    rgba($primary, 0.30);   // tracks $primary automatically
 $focus-ring-blur:     0;
 
 

package/scss/_wui-aliases.scss

@@ -121,6 +121,32 @@
   --color-text-muted:    var(--wui-dark-text-muted);
   --color-text-subtle:   var(--wui-dark-text-subtle);
 
+  // Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
+  // named-var text/body/border utilities — .text-body-secondary, .text-muted,
+  // .text-body-emphasis, .border, backgrounds — flip with the theme. Declared
+  // here (not only in :root) so the dark theming is explicit and cannot be lost
+  // to a later-loading consumer rule that scopes --bs-* under [data-theme].
+  --bs-body-color:       var(--color-text);
+  --bs-emphasis-color:   var(--color-text);
+  --bs-secondary-color:  var(--color-text-muted);
+  --bs-tertiary-color:   var(--color-text-subtle);
+  --bs-body-bg:          var(--color-bg);
+  --bs-border-color:     var(--color-border);
+  --bs-secondary-bg:     var(--wui-dark-bg-surface);
+  --bs-tertiary-bg:      var(--wui-dark-bg-muted);
+  // Bootstrap's .bg-* / .text-secondary / .bg-body-tertiary utilities read the --bs-*-RGB
+  // triplets (for -opacity support), NOT the plain vars above — without these overrides they
+  // keep their compiled LIGHT triplet in dark mode (a white .bg-body on a dark portal). The
+  // triplets mirror the dark hexes in _tokens.scss (Bootstrap's own --bs-x + --bs-x-rgb pattern).
+  --bs-body-bg-rgb:         15, 17, 23;      // --wui-dark-bg-page  #0f1117
+  --bs-body-color-rgb:      230, 232, 238;   // --wui-dark-text  #e6e8ee
+  --bs-emphasis-color-rgb:  230, 232, 238;   // --wui-dark-text  #e6e8ee
+  --bs-secondary-color-rgb: 180, 185, 198;   // --wui-dark-text-muted  #b4b9c6
+  --bs-tertiary-color-rgb:  138, 144, 160;   // --wui-dark-text-subtle  #8a90a0
+  --bs-secondary-bg-rgb:    24, 27, 35;      // --wui-dark-bg-surface  #181b23
+  --bs-tertiary-bg-rgb:     35, 39, 51;      // --wui-dark-bg-muted  #232733
+  --bs-border-color-rgb:    42, 47, 58;      // --wui-dark-border  #2a2f3a
+
   --color-primary:       var(--wui-dark-primary);
   --color-primary-hover: var(--wui-dark-primary-hover);
   --color-primary-soft:  color-mix(in srgb, var(--wui-primary) 20%, transparent);

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

@@ -1,3 +1,4 @@
+// Component classes use the .wui-* prefix.
 // Checkbox & radio, field/input, status badge, choice chip.
 //
 // Part of the wui-components layer — see _wui-components.scss for the whole
@@ -14,12 +15,12 @@
 // accessible.
 //
 // Markup:
-//   <label class="lx-control">
-//     <input type="checkbox" class="lx-check">      (or type="radio" class="lx-radio")
-//     <span class="lx-control-label">Full-time</span>
+//   <label class="wui-control">
+//     <input type="checkbox" class="wui-check">      (or type="radio" class="wui-radio")
+//     <span class="wui-control-label">Full-time</span>
 //   </label>
-// Group rows in a `.lx-control-group` (horizontal, wraps) or stack them.
-.lx-control {
+// Group rows in a `.wui-control-group` (horizontal, wraps) or stack them.
+.wui-control {
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -29,19 +30,19 @@
     color: var(--color-text);
     line-height: 1.4;
 }
-.lx-control-group {
+.wui-control-group {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px 20px;
 }
-.lx-control-label {
+.wui-control-label {
     padding-right: 2px;
 }
 
 // The control glyph: 20px box inside a 36px circular tap target (8px ring).
-.lx-check,
-.lx-radio {
+.wui-check,
+.wui-radio {
     appearance: none;
     -webkit-appearance: none;
     flex: none;
@@ -58,17 +59,17 @@
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
-.lx-check {
+.wui-check {
     border-radius: var(--radius-sm);
     corner-shape: squircle;
 }
-.lx-radio {
+.wui-radio {
     border-radius: 50%;
 }
 
 // Soft primary circular ripple behind the glyph on hover (the Minimals halo).
-.lx-check::after,
-.lx-radio::after {
+.wui-check::after,
+.wui-radio::after {
     content: "";
     position: absolute;
     left: 50%;
@@ -85,16 +86,16 @@
         opacity 0.15s ease,
         transform 0.15s ease;
 }
-.lx-control:hover .lx-check::after,
-.lx-control:hover .lx-radio::after,
-.lx-check:hover::after,
-.lx-radio:hover::after {
+.wui-control:hover .wui-check::after,
+.wui-control:hover .wui-radio::after,
+.wui-check:hover::after,
+.wui-radio:hover::after {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
 }
 
 // Checked — primary fill (checkbox) / primary ring + dot (radio)
-.lx-check:checked {
+.wui-check:checked {
     border-color: var(--color-primary);
     background: var(--color-primary);
     // white tick drawn with a rotated box-shadow-free pseudo
@@ -103,10 +104,10 @@
     background-position: center;
     background-repeat: no-repeat;
 }
-.lx-radio:checked {
+.wui-radio:checked {
     border-color: var(--color-primary);
 }
-.lx-radio:checked::before {
+.wui-radio:checked::before {
     content: "";
     position: absolute;
     left: 50%;
@@ -119,52 +120,52 @@
 }
 
 // Keyboard focus ring (only on focus-visible, not mouse)
-.lx-check:focus-visible,
-.lx-radio:focus-visible {
+.wui-check:focus-visible,
+.wui-radio:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px var(--color-primary-soft);
 }
 
 // Disabled
-.lx-check:disabled,
-.lx-radio:disabled,
-.lx-control:has(:disabled) {
+.wui-check:disabled,
+.wui-radio:disabled,
+.wui-control:has(:disabled) {
     cursor: not-allowed;
 }
-.lx-check:disabled,
-.lx-radio:disabled {
+.wui-check:disabled,
+.wui-radio:disabled {
     border-color: var(--color-border);
     background-color: var(--color-bg-muted);
 }
-.lx-check:disabled:checked,
-.lx-radio:disabled:checked {
+.wui-check:disabled:checked,
+.wui-radio:disabled:checked {
     border-color: var(--color-border-strong);
 }
-.lx-check:disabled:checked {
+.wui-check:disabled:checked {
     background-color: var(--color-border-strong);
 }
-.lx-radio:disabled:checked::before {
+.wui-radio:disabled:checked::before {
     background: var(--color-border-strong);
 }
-.lx-control:has(:disabled) {
+.wui-control:has(:disabled) {
     color: var(--color-text-subtle);
 }
-.lx-check:disabled::after,
-.lx-radio:disabled::after {
+.wui-check:disabled::after,
+.wui-radio:disabled::after {
     display: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .lx-check,
-    .lx-radio,
-    .lx-check::after,
-    .lx-radio::after {
+    .wui-check,
+    .wui-radio,
+    .wui-check::after,
+    .wui-radio::after {
         transition: none;
     }
 }
 
 // Row-selection checkbox variant used inside a .table-ledger select column.
-.lx-check {
+.wui-check {
     width: 16px;
     height: 16px;
     accent-color: var(--color-primary);
@@ -175,7 +176,7 @@
 // ── Premium checkbox / radio / switch ──
 // AppCheckbox / AppRadio / AppSwitch render Bootstrap's .form-check markup, whose default
 // input is a plain 16px box. This restyles it to the Webority selection-control language
-// (see .lx-check above): a 20px squircle box, brand fill, a crisp white tick, a soft primary
+// (see .wui-check above): a 20px squircle box, brand fill, a crisp white tick, a soft primary
 // hover ring + focus ring, and a themed switch. One block upgrades all three, both surfaces.
 .form-check {
     display: flex;
@@ -888,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) {
@@ -1025,7 +1036,7 @@ wui-select[compact] {
 // Two other vocabularies existed and are accepted as DEPRECATED ALIASES so a
 // consumer can migrate without a flag day:
 //   - colour-named  .tone-green / -amber / -red / -blue / -grey  (was the library's)
-//   - short semantic .tone-ok / -warn / -bad                     (was lumex's)
+//   - short semantic .tone-ok / -warn / -bad                     (a short-semantic set)
 // Author new markup with the semantic names; the aliases will be removed.
 .status-label.success,
 .status-label.tone-ok,

package/scss/wui/_data.scss

@@ -1,3 +1,4 @@
+// Component classes use the .wui-* prefix.
 // Empty state, base table, ledger table + pagination.
 //
 // Part of the wui-components layer — see _wui-components.scss for the whole
@@ -88,19 +89,19 @@
     margin-top: 20px;
 }
 
-.lx-table-empty {
+.wui-table-empty {
     padding: 36px 24px;
     text-align: center;
     color: var(--color-text-muted);
 }
 // The empty state owns its own padding and is not a row you can act on — no
 // cell padding, no border, and no hover fill from .table / .table-ledger.
-.table td.lx-table-empty:has(> .tbl-empty) {
+.table td.wui-table-empty:has(> .tbl-empty) {
     padding: 0;
     border-bottom: 0;
 }
-.table tbody tr:hover td.lx-table-empty:has(> .tbl-empty),
-.table-ledger tbody tr:hover td.lx-table-empty:has(> .tbl-empty) {
+.table tbody tr:hover td.wui-table-empty:has(> .tbl-empty),
+.table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
     background: transparent;
 }
 
@@ -196,8 +197,8 @@
 
 // ── Table + pagination ──
 // DataTable cell helpers
-.table-ledger .lx-cell-end,
-.table-ledger thead th.lx-cell-end {
+.table-ledger .wui-cell-end,
+.table-ledger thead th.wui-cell-end {
     text-align: right;
 }
 
@@ -309,9 +310,9 @@
     text-decoration: none;
 }
 // Identity-cell subline. `.u-email` is in the group because an identity cell
-// renders the secondary line as either a generic .lx-text-xs or a .u-email.
+// renders the secondary line as either a generic .wui-text-xs or a .u-email.
 .table-ledger .u-meta > .u-email,
-.table-ledger .u-meta > .lx-text-xs {
+.table-ledger .u-meta > .wui-text-xs {
     font-size: 12px;
     font-weight: 400;
     line-height: 15px;
@@ -432,7 +433,7 @@
 
 // The identity/name column — a STABLE hook, because position is not one.
 //
-// The library owns .lx-select-cell, so a ledger's first cell is the 44px checkbox when
+// The library owns .wui-select-cell, so a ledger's first cell is the 44px checkbox when
 // selection is on and the name when it is off. `:first-child` therefore changes meaning
 // with a permission flag: a consumer's 360px name-column floor landed on the 44px checkbox
 // for any user who could select rows, inflating that column 8x and pushing the table into
@@ -442,14 +443,14 @@
 // min-width:0 is the rule rather than a placeholder: a table cell defaults to min-width:auto,
 // which refuses to shrink below its content and is what makes truncation impossible in the
 // first place.
-.table-ledger th.lx-name-cell,
-.table-ledger td.lx-name-cell {
+.table-ledger th.wui-name-cell,
+.table-ledger td.wui-name-cell {
     min-width: 0;
 }
 
 // Row-selection checkbox column.
-.table-ledger th.lx-select-cell,
-.table-ledger td.lx-select-cell {
+.table-ledger th.wui-select-cell,
+.table-ledger td.wui-select-cell {
     width: 44px;
     min-width: 44px;
     max-width: 44px;