@webority/theme 0.27.1 → 0.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.27.1",
+  "version": "0.27.3",
   "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/_brand-signal.scss

@@ -1,4 +1,5 @@
 // Signal: an opt-in brand layer, a violet-primary palette with ink headings and a serif display face.
+// Its dark mode is pure black with neutral grey surfaces; violet is kept for accents only.
 //
 // Loaded AFTER webority-theme.css; the default theme never contains these values. It re-points the
 // --wui-* tokens, then overrides the few Bootstrap values the theme compiles as literals (button
@@ -74,16 +75,17 @@
     --wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);
     --wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);
 
-    --wui-dark-bg-page: #120830;
-    --wui-dark-bg-elevated: #0E0626;
-    --wui-dark-bg-surface: #1A0F40;
-    --wui-dark-bg-muted: #261853;
-    --wui-dark-border: #35266B;
-    --wui-dark-border-strong: #4B3A8A;
-    --wui-dark-progress-track: #35266B;
-    --wui-dark-text: #EDE9F8;
-    --wui-dark-text-muted: #C2BADB;
-    --wui-dark-text-subtle: #A59BC6;
+    // Dark mode is pure black and neutral grey; violet appears only on accents (fills, links, focus, selection marks).
+    --wui-dark-bg-page: #000000;
+    --wui-dark-bg-elevated: #0F0F0F;
+    --wui-dark-bg-surface: #161616;
+    --wui-dark-bg-muted: #1E1E1E;
+    --wui-dark-border: #2A2A2A;
+    --wui-dark-border-strong: #333333;
+    --wui-dark-progress-track: #333333;
+    --wui-dark-text: #EDEDED;
+    --wui-dark-text-muted: #C0C0C0;
+    --wui-dark-text-subtle: #A0A0A0;
     --wui-dark-primary: #A98BFF;
     --wui-dark-primary-hover: #BFA6FF;
 
@@ -135,7 +137,8 @@
 .page-title,
 .card-title,
 .wui-modal-title,
-.empty-state-title {
+.empty-state-title,
+.result-title {
     font-family: var(--wui-font-display);
     font-weight: 600;
     font-style: normal;
@@ -145,18 +148,20 @@
 
 @mixin wui-signal-dark {
     --wui-signal-heading: #C4AEFF;
-    --color-primary-soft: color-mix(in srgb, #A98BFF 20%, transparent);
+    // Selected, hover and highlight fills are a neutral lift; the violet stays on the text, border
+    // or edge that marks the state. check-contrast.mjs mirrors the 8%; change them together.
+    --color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);
     // Ink on the lilac fill (--color-primary): 8:1 or better.
     --color-primary-text: #16093A;
     --color-progress-label: #16093A;
-    --bs-body-bg-rgb: 18, 8, 48;
-    --bs-body-color-rgb: 237, 233, 248;
-    --bs-emphasis-color-rgb: 237, 233, 248;
-    --bs-secondary-color-rgb: 194, 186, 219;
-    --bs-tertiary-color-rgb: 165, 155, 198;
-    --bs-secondary-bg-rgb: 26, 15, 64;
-    --bs-tertiary-bg-rgb: 38, 24, 83;
-    --bs-border-color-rgb: 53, 38, 107;
+    --bs-body-bg-rgb: 0, 0, 0;
+    --bs-body-color-rgb: 237, 237, 237;
+    --bs-emphasis-color-rgb: 237, 237, 237;
+    --bs-secondary-color-rgb: 192, 192, 192;
+    --bs-tertiary-color-rgb: 160, 160, 160;
+    --bs-secondary-bg-rgb: 22, 22, 22;
+    --bs-tertiary-bg-rgb: 30, 30, 30;
+    --bs-border-color-rgb: 42, 42, 42;
     --bs-link-color: #A98BFF;
     --bs-link-color-rgb: 169, 139, 255;
     --bs-link-hover-color: #BFA6FF;
@@ -188,6 +193,35 @@
     :where(.stepper:not(.wizard-stepper)) {
         --wui-step-accent-fg: #16093A;
     }
+
+    // Components that mix their violet fill inline rather than through --color-primary-soft.
+    // :where(&) keeps each rule at the component's own specificity, so a tone variant still wins.
+    :where(&) .struct-card.checked,
+    :where(&) .tpg-arrow:hover:not(:disabled),
+    :where(&) .tpg-page:hover:not(.is-active),
+    :where(&) .u-action:hover:not(:disabled),
+    :where(&) .tbl-empty-icon,
+    :where(&) .u-avatar,
+    :where(&) .wui-file-viewer-audio-art {
+        background: var(--color-primary-soft);
+    }
+    :where(&) .wui-calendar-view-btn[aria-pressed="true"],
+    :where(&) .compare-table td.is-highlight {
+        background: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
+    }
+    :where(&) .segmented {
+        --segmented-selected-bg: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
+    }
+    :where(&) .table-ledger tbody tr.is-selected:hover {
+        --bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent);
+    }
+    // A grey row alone reads as disabled; the violet edge says chosen. One step below the row status
+    // bar's specificity, so a status row keeps its own colour bar.
+    :where(&) .table-ledger tbody tr.is-selected > :first-child {
+        box-shadow:
+            inset 3px 0 0 0 var(--color-primary),
+            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+    }
 }
 
 :root[data-theme="dark"],

package/scss/wui/_display.scss

@@ -351,7 +351,10 @@ a.info-row:hover .info-value {
     padding: 0;
 }
 .descs-item {
-    display: contents;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-bottom: 1px solid var(--color-border);
     grid-column: span var(--descs-span, 1);
 }
 .descs-label {
@@ -360,16 +363,14 @@ a.info-row:hover .info-value {
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: var(--color-text-subtle);
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 12px 16px 0;
     margin: 0;
 }
 .descs-value {
     font-size: 14px;
     font-weight: 500;
     color: var(--color-text);
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 4px 16px 12px;
     margin: 0;
     word-break: break-word;
 }
@@ -379,24 +380,22 @@ a.info-row:hover .info-value {
     color: var(--color-text-subtle);
 }
 // Small size variant.
-.descs-sm .descs-label,
+.descs-sm .descs-label {
+    font-size: 12px;
+    padding: 8px 12px 0;
+}
 .descs-sm .descs-value {
     font-size: 12px;
-    padding: 8px 12px;
+    padding: 4px 12px 8px;
 }
-// Bordered variant removes inner dividers (only outer border on cells).
-.descs-bordered .descs-label,
-.descs-bordered .descs-value {
+// Bordered variant draws dividers between neighbouring items instead of under each row.
+.descs-bordered .descs-item {
     border-bottom: none;
     border-right: 1px solid var(--color-border);
 }
-.descs-bordered .descs-item:last-child .descs-label,
-.descs-bordered .descs-item:last-child .descs-value {
+.descs-bordered .descs-item:last-child {
     border-right: none;
 }
-.descs-bordered .descs-list > :nth-child(2n-1) {
-    border-bottom: 1px solid var(--color-border);
-}
 // Column variants — set the grid-template-columns.
 .descs-col-1 .descs-list {
     --descs-cols: 1;

package/scss/wui/_shell.scss

@@ -263,8 +263,8 @@
     flex-direction: column;
     gap: 2px;
     overflow-y: auto;
-    // The rail is chrome, not content: a scrollbar here reads as clutter and, at
-    // 88px collapsed, would eat a meaningful share of the width.
+    // A native scrollbar always takes layout width, and its width differs by browser and OS, so
+    // it stays hidden; the thumb below is drawn over the links instead.
     scrollbar-width: none;
 }
 .app-sidebar-scroll::-webkit-scrollbar {
@@ -272,6 +272,47 @@
     width: 0;
     height: 0;
 }
+// Scroll thumb for a long menu, shown on hover or keyboard focus and only when the links
+// overflow. It is a sticky pseudo-element over the nav's right edge, moved by the nav's own
+// scroll timeline, so it takes no width. The negative bottom margin cancels its height and the
+// flex gap, so no link moves. Browsers without scroll timelines keep the hidden scrollbar.
+@supports (animation-timeline: scroll()) {
+    .app-sidebar-scroll {
+        container-type: scroll-state;
+    }
+    .app-sidebar-scroll::before {
+        content: "";
+        position: sticky;
+        top: 0;
+        flex: none;
+        align-self: flex-end;
+        width: 6px;
+        height: 48px;
+        margin-bottom: -50px;
+        border-radius: 9999px;
+        background: var(--wui-scrollbar);
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s var(--wui-ease-ui);
+        animation: wui-sidebar-thumb linear both;
+        animation-timeline: scroll(nearest);
+    }
+    @container scroll-state(scrollable: y) {
+        .app-sidebar-scroll::before {
+            visibility: visible;
+        }
+    }
+    .app-sidebar-scroll:hover::before,
+    .app-sidebar-scroll:focus-within::before {
+        opacity: 1;
+    }
+}
+@keyframes wui-sidebar-thumb {
+    to {
+        top: calc(100% - 48px);
+    }
+}
 // Between the brand row and the nav — a workspace/tenant switcher, an environment
 // badge. It must not shrink when the nav overflows. The full card has no place on
 // the 88px rail, so the collapsed state hides it (the mobile drawer restores it).