@webority/theme 0.2.0 → 0.3.0

package/package.json

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

@@ -556,9 +556,11 @@ textarea.textarea:focus {
 .field > .field-error {
     align-self: stretch;
 }
+// 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) {
-    .field-row,
-    .field-row-3 {
+    .field-row.field-row,
+    .field-row-3.field-row-3 {
         grid-template-columns: 1fr;
     }
 }
@@ -2162,6 +2164,11 @@ textarea.textarea:focus {
     border-bottom: 1px solid var(--color-border);
     overflow-x: auto;
     scrollbar-width: none;
+    // Declared explicitly because the React AppTabs renders a react-bootstrap
+    // <Nav>, so the element also carries `.nav` — whose `flex-wrap: wrap` would
+    // otherwise apply unopposed (equal specificity, and we declared nothing),
+    // wrapping the tabs onto a second line instead of scrolling.
+    flex-wrap: nowrap;
 }
 .app-tabs::-webkit-scrollbar {
     display: none;
@@ -2193,6 +2200,9 @@ textarea.textarea:focus {
 .app-tab.active {
     color: var(--color-primary);
     border-bottom-color: var(--color-primary);
+    // The active tab carries weight as well as colour — colour alone is a weak
+    // signal for anyone who reads the strip at a glance or cannot distinguish it.
+    font-weight: 600;
 }
 .app-tab:disabled {
     color: var(--color-text-subtle);
@@ -2203,10 +2213,21 @@ textarea.textarea:focus {
     outline-offset: -2px;
     border-radius: var(--radius-sm);
 }
+// A destructive tab reads as destructive whether or not it is the active one.
+.app-tab.danger {
+    color: var(--color-danger);
+}
+.app-tab.danger:hover:not(:disabled):not(.active) {
+    color: var(--color-danger-active);
+}
 .app-tab.danger.active {
     color: var(--color-danger);
     border-bottom-color: var(--color-danger);
 }
+.app-tab.danger .app-tab-count {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-strong);
+}
 // Trailing count pill.
 .app-tab-count {
     display: inline-flex;
@@ -2418,8 +2439,22 @@ textarea.textarea:focus {
     color: var(--color-text);
     vertical-align: middle;
     border-color: var(--color-border);
+    // `separate` is required for a cell to render a border-radius at all —
+    // Bootstrap reboot sets `collapse`, under which .table-ledger's rounded
+    // header corners silently do nothing. border-spacing 0 keeps cells flush.
+    border-collapse: separate;
+    border-spacing: 0;
 }
-.table > thead > tr > th {
+
+// The cell rules are wrapped in :where() so they carry ZERO class specificity
+// — `:where(.table) > thead > tr > th` is (0,0,3), which any single-class
+// variant selector such as `.table-ledger thead th` (0,1,2) outranks.
+//
+// Without this the base out-ranks its own variant: written plainly,
+// `.table > thead > tr > th` is (0,1,3) and beats `.table-ledger thead th`,
+// so the ledger lost its own border-bottom/line-height/font-family to the
+// base. A base layer must always sit *under* the variants built on it.
+:where(.table) > thead > tr > th {
     height: 42px;
     padding: 0 12px;
     background: var(--color-bg-muted);
@@ -2431,20 +2466,30 @@ textarea.textarea:focus {
     color: var(--color-text-subtle);
     white-space: nowrap;
     vertical-align: middle;
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease;
 }
-.table > tbody > tr > td {
+:where(.table) > tbody > tr > td {
     padding: 12px;
     border-bottom: 1px solid var(--color-border);
     font-size: 14px;
     color: var(--color-text-muted);
     vertical-align: middle;
+    transition: background-color 0.12s ease;
 }
-.table > tbody > tr:last-child > td {
+:where(.table) > tbody > tr:last-child > td {
     border-bottom: 0;
 }
-.table > tbody > tr:hover > td {
+:where(.table) > tbody > tr:hover > td {
     background: var(--color-bg-subtle);
 }
+@media (prefers-reduced-motion: reduce) {
+    :where(.table) > thead > tr > th,
+    :where(.table) > tbody > tr > td {
+        transition: none;
+    }
+}
 // Numeric / action columns align to the trailing edge.
 .table .cell-end,
 .table thead th.cell-end {
@@ -2665,8 +2710,33 @@ textarea.textarea:focus {
     padding-left: 12px;
     padding-right: 0;
 }
-.table-ledger tbody tr.is-selected {
-    background: var(--color-bg-muted);
+// Selection is a brand-tinted state on the CELLS, not a grey fill on the row:
+// cells carry their own background (hover sets it too), so a background on the
+// <tr> is painted over and never shows. Grey also reads as "disabled" rather
+// than "chosen".
+.table-ledger tbody tr.is-selected > td {
+    background: var(--color-primary-soft);
+}
+.table-ledger tbody tr.is-selected:hover > td {
+    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+}
+
+// Row status affordance — a colour bar on the leading edge, so a row's state is
+// legible without relying on a tint alone.
+.table-ledger tbody tr[data-status] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-border-strong);
+}
+.table-ledger tbody tr[data-status="success"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-success);
+}
+.table-ledger tbody tr[data-status="warning"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-warning);
+}
+.table-ledger tbody tr[data-status="danger"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-danger);
+}
+.table-ledger tbody tr[data-status="info"] > td:first-child {
+    box-shadow: inset 3px 0 0 0 var(--color-info);
 }
 
 // Row actions — icon-only buttons replacing a kebab dropdown.
@@ -3273,23 +3343,29 @@ textarea.textarea:focus {
 // Tablet and below: the masthead stops being a single row — the title block and
 // its actions stack, and the actions stretch to the full width rather than
 // crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
+//
+// Selectors are DOUBLED (`.page-header.page-header`) on purpose. A media query
+// adds no specificity, so a consumer's own single-class rule — written later in
+// the cascade, as a consuming app's stylesheet always is — silently beats the
+// responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
+// so they hold, while still leaving a consumer free to override deliberately.
 @media (max-width: 991.98px) {
-    .page-header {
+    .page-header.page-header {
         flex-direction: column;
         align-items: stretch;
         gap: 12px;
     }
-    .page-actions {
+    .page-actions.page-actions {
         flex-wrap: wrap;
         width: 100%;
     }
     // A two-up field row is too tight for a tablet column.
-    .field-row,
-    .field-row-3 {
+    .field-row.field-row,
+    .field-row-3.field-row-3 {
         grid-template-columns: 1fr;
     }
     // A fixed 420px drawer leaves too little of the page visible on a tablet.
-    .drawer {
+    .drawer.drawer {
         width: 100vw;
         max-width: 420px;
     }