@webority/theme 0.9.0 → 0.9.2

package/package.json

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

@@ -109,6 +109,25 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Secondary-danger — the destructive counterpart of .btn-secondary: a soft red wash
+// instead of a solid red fill, for a quieter destructive action (e.g. a "Remove" that
+// shouldn't shout like a solid .btn-danger). Mirrors .btn-secondary exactly — low-alpha
+// tint deepening on hover/press, no border — but keyed off the danger tokens. The label
+// uses --wui-danger-text (the AA-safe error red designed to read on a light red tint),
+// not the brighter --color-danger. Disabled falls through to the shared neutral-grey
+// state below (it is not .btn-danger), like .btn-secondary.
+.btn-secondary-danger {
+    --bs-btn-color: var(--wui-danger-text);
+    --bs-btn-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--wui-danger-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--wui-danger-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
+}
+
 // Soft neutral tinted button — a quieter alternative to .btn-light for a secondary
 // action that shouldn't compete with a primary/danger CTA in the same row.
 .btn-subtle {
@@ -177,6 +196,8 @@
 // key the wash and the label off the accent (text) colour so the hue still shows.
 .btn-secondary.is-loading:disabled,
 .btn-secondary.is-loading.disabled,
+.btn-secondary-danger.is-loading:disabled,
+.btn-secondary-danger.is-loading.disabled,
 .btn-ghost.is-loading:disabled,
 .btn-ghost.is-loading.disabled,
 .btn-subtle.is-loading:disabled,

package/scss/wui/_choice.scss

@@ -107,6 +107,12 @@
     opacity: 1;
     transform: scale(1);
 }
+// The tick reads a touch bolder than the icon's default 1.5 hairline, so the confirmation
+// stays crisp at the small top-corner size (CSS beats the glyph's stroke-width attribute;
+// applies on both surfaces since both render the same stroke-based check).
+.struct-card-check svg path {
+    stroke-width: 2.25;
+}
 
 // Tile variant: big centered illustration + label. Opt in with
 // className="struct-card-tile".
@@ -171,8 +177,10 @@
     cursor: not-allowed;
     opacity: 0.6;
 }
-.search-select-control:hover:not(:disabled):not(.open) {
+.search-select-control:hover:not(:disabled):not(.open):not([aria-invalid="true"]) {
     // Not while open — an open control keeps its active (primary) border, not the grey hover one.
+    // Not while invalid — an errored control (aria-invalid mirrored from the host) holds its red
+    // border on hover rather than reverting to the grey hover one.
     border-color: var(--color-border-strong);
 }
 .search-select-control.open {
@@ -484,7 +492,12 @@
     --wui-datepicker-width: 100%;
 }
 .datepicker.open .datepicker-trigger {
-    background-color: var(--color-field-bg);
+    // While the calendar is open the trigger reads as a focused field — clean white surface, not
+    // the muted resting fill. Opening moves focus INTO the popup, so :focus drops off the trigger;
+    // this .open rule keeps it white (matching .search-select-control.open) instead of snapping
+    // back to grey the moment the dropdown appears. It stays white on close too (_close refocuses
+    // the trigger → :focus), greying only on an outside click that blurs it.
+    background-color: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
@@ -805,7 +818,8 @@ button.datepicker-month:hover {
     color: var(--color-text-subtle);
 }
 .daterange.open .daterange-trigger {
-    background-color: var(--color-field-bg);
+    // Stay white while the two-month popover is open — see the note on .datepicker.open above.
+    background-color: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
@@ -906,7 +920,9 @@ button.datepicker-month:hover {
         border-color 0.12s,
         background-color 0.12s;
 }
-.app-phone-number-input .phone-input-wrap:hover:not(:focus-within) {
+// Not while invalid — an errored control holds its red border/fill on hover (the host carries
+// aria-invalid, so scope the hover treatment to a non-invalid host).
+.app-phone-number-input wui-phone:not([aria-invalid="true"]) .phone-input-wrap:hover:not(:focus-within) {
     background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
@@ -1256,7 +1272,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     --wui-timepicker-width: 100%;
 }
 .timepicker.open .timepicker-trigger {
-    background-color: var(--color-field-bg);
+    // Stay white while the time list is open — see the note on .datepicker.open above.
+    background-color: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }

package/scss/wui/_controls.scss

@@ -52,6 +52,23 @@
     user-select: none;
 }
 
+// Checkbox / radio / switch hint & error sit BELOW the label on their own line, indented to
+// align under the label text (past the glyph + gap) — not inline beside it. `.form-check` is a
+// flex row for glyph+label; a full-width flex basis wraps the message to a second line.
+.form-check {
+    flex-wrap: wrap;
+    --wui-check-hint-indent: 28px; // 20px glyph + 8px gap
+}
+.form-switch {
+    --wui-check-hint-indent: 48px; // 40px track + 8px gap
+}
+.form-check > .field-hint,
+.form-check > .field-error {
+    flex-basis: 100%;
+    margin-top: 2px;
+    padding-left: var(--wui-check-hint-indent);
+}
+
 // Glyph — shared by BS form-check-input and the wui-check alias.
 .form-check-input,
 .wui-check,
@@ -299,9 +316,13 @@ textarea.form-control.autosize {
     overflow: hidden;
 }
 // Hover/error guards: without them the hover fill repaints over an invalid border.
+// `:not([aria-expanded="true"])` on the `.input` line: a combobox/dialog trigger whose popup is
+// OPEN (datepicker/date-range/time-picker triggers set aria-expanded on the trigger, but carry
+// their `.open` class on the WRAPPER, not the trigger) must keep its open white fill — without
+// this the resting-hover grey repaints over it the moment the cursor sits on the open trigger.
 .form-control:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .form-select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
-.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open),
+.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open):not([aria-expanded="true"]),
 .select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .textarea:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-field-bg);
@@ -1052,7 +1073,9 @@ wui-select[compact] {
         background-color 0.12s;
     overflow: hidden;
 }
-.num-wrap:hover:not(:focus-within) {
+// Not while invalid — an errored control holds its red border/fill on hover rather than
+// reverting to the grey hover one (matches AppInput, whose hover rule excludes the error state).
+.num-wrap:hover:not(:focus-within):not(:has(.num-input.error)):not(:has(.num-input.is-invalid)):not(:has(.num-input[aria-invalid="true"])) {
     background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
@@ -1286,7 +1309,9 @@ wui-select[compact] {
     pointer-events: none;
 }
 .choice-chip.checked {
-    border-color: var(--color-primary);
+    // Match AppChoiceCard's checked border: a soft primary-30 edge, not the
+    // full-strength primary line (they read as the same selection language).
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-primary-soft);
     color: var(--color-primary);
 }

package/scss/wui/_overlays.scss

@@ -309,12 +309,6 @@
     line-height: 0;
     margin-bottom: 22px;
 }
-// Lift the badge off the modal surface with a soft outer shadow. `drop-shadow` traces
-// the SVG's circular alpha (a `box-shadow` would cast a square), and takes no spread —
-// so this is authored spread-free rather than reusing the `--wui-shadow-overlay` token.
-.wui-confirm-icon svg {
-    filter: drop-shadow(0 10px 18px rgba(7, 20, 55, 0.18));
-}
 // Icon size tracks the copy: a title+message dialog keeps the full 80px badge (set on
 // the element), but a lone title (no message) is one line and gets a smaller badge.
 // `.wui-confirm-msg` is a real element rendered only when a message exists, so `:has()`
@@ -345,17 +339,18 @@
 .wui-modal-footer:has(.wui-confirm-actions) {
     border-top: none;
     padding-top: 0;
-}
+    // The full-width CTA row makes the footer's insets read as a frame, so the gap below the
+    // buttons matches the 22px on their left and right (the base footer's 16px bottom looked
+    // cramped against the equal side gaps).
+    padding-bottom: 22px;
+}
+// Layout ONLY — the two CTAs share the row equally. Their chrome (radius, height, type
+// scale, weight, padding) comes entirely from AppButton, so a confirm button reads identically
+// to an AppButton anywhere else in the app. No separate button styling lives here: the dialog
+// used to re-skin its buttons (10px radius, 14px/500 type, forced height), which made the confirm
+// CTAs look like a different button than every other AppButton.
 .wui-confirm-actions .btn {
     flex: 1;
-    min-height: var(--wui-control-height);
-    height: var(--wui-control-height);
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    padding-left: 16px;
-    padding-right: 16px;
-    font-size: 14px;
-    font-weight: 500;
 }
 
 // ── Tooltip ──