@webority/theme 0.50.1 → 0.51.0

package/package.json

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

@@ -20,7 +20,7 @@
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
 // separate from the height rule above so sm/lg (which opt out of the shared
 // control height) still get the nudge. A signal, not a depth cue.
-.btn:not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon):active:not(:disabled) {
+.btn:not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon):not(.btn-ghost):active:not(:disabled) {
     transform: translateY(1px);
 }
 
@@ -303,8 +303,8 @@
 }
 
 // --- Sheen (default + .btn-anim-sheen): slim angled glossy band sweeps across.
-.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"])::before,
-.btn-anim-sheen::before {
+.btn:not(.btn-icon):not(.u-action):not(.btn-ghost):not([class*="btn-anim-"])::before,
+.btn-anim-sheen:not(.btn-ghost)::before {
     content: "";
     position: absolute;
     top: 0;
@@ -322,12 +322,12 @@
     transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
     pointer-events: none;
 }
-.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled)::before,
-.btn-anim-sheen:hover:not(:disabled)::before {
+.btn:not(.btn-icon):not(.u-action):not(.btn-ghost):not([class*="btn-anim-"]):hover:not(:disabled)::before,
+.btn-anim-sheen:not(.btn-ghost):hover:not(:disabled)::before {
     transform: translateX(320%) skewX(-18deg);
 }
-.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled),
-.btn-anim-sheen:hover:not(:disabled) {
+.btn:not(.btn-icon):not(.u-action):not(.btn-ghost):not([class*="btn-anim-"]):hover:not(:disabled),
+.btn-anim-sheen:not(.btn-ghost):hover:not(:disabled) {
     transform: translateY(-1px);
 }
 
@@ -489,27 +489,44 @@
     }
 }
 
-// ---- 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>.
+// ---- Ghost button: the tertiary action --------------------------------
+// Brand-coloured, underlined text with no box in any state. It has no visible container,
+// so nothing may draw one: no hover fill, no sheen sweep, no lift or press nudge, and no
+// grey box when disabled or loading. Hover darkens the colour and thickens the underline.
+// AppButton's `ghost` variant emits this class on both surfaces.
 //
-// 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.
+// No .btn-ghost-sm/-lg rungs: it is an ordinary .btn variant and sizes with Bootstrap's
+// own .btn-sm/.btn-lg, like .btn-primary.
 .btn-ghost {
-    --bs-btn-color: var(--color-text);
+    --bs-btn-color: var(--color-primary-ink);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: var(--color-text);
-    --bs-btn-hover-bg: var(--color-primary-soft);
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-primary-ink) 80%, var(--color-text));
+    --bs-btn-hover-bg: transparent;
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: var(--color-text);
-    --bs-btn-active-bg: var(--color-primary-soft);
+    --bs-btn-active-color: color-mix(in srgb, var(--color-primary-ink) 70%, var(--color-text));
+    --bs-btn-active-bg: transparent;
     --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-primary-ink);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+}
+.btn-ghost:hover:not(:disabled) {
+    text-decoration-thickness: 2px;
+}
+.btn.btn-ghost.btn-ghost:disabled,
+.btn.btn-ghost.btn-ghost.disabled {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-primary-ink);
+    opacity: 0.55;
+}
+.btn.btn-ghost.btn-ghost.is-loading:disabled,
+.btn.btn-ghost.btn-ghost.is-loading.disabled {
+    opacity: 1;
 }
 
 // ---- Card hover-lift (name is historical) -----------------------------

package/scss/wui/_choice.scss

@@ -1074,6 +1074,14 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
+.app-phone-number-input {
+    // One size for the tel input, its placeholder and the dial code; the dial is not
+    // inside the input, so it cannot inherit the input's font-size.
+    --wui-phone-font-size: 14px;
+}
+.app-phone-number-input .phone-input-wrap > .input {
+    font-size: var(--wui-phone-font-size);
+}
 // The inner control drops its own chrome — the shell carries it.
 .app-phone-number-input .phone-input-wrap > .input,
 .app-phone-number-input .phone-input-wrap > .input:hover,
@@ -1148,8 +1156,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     transform: rotate(180deg);
 }
 .app-phone-number-input .phone-dial {
-    font-size: 13px;
-    font-weight: 500;
+    font-size: var(--wui-phone-font-size);
+    font-weight: 400;
     color: var(--color-text);
 }
 // Country-adornment toggles (AppPhoneNumberInput showFlag / showDialCode). Driven
@@ -1176,11 +1184,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     height: var(--wui-control-height-sm);
     border-radius: var(--wui-field-radius-sm);
 }
-.app-phone-number-input.phone-sm .input {
-    font-size: 13px;
-}
-.app-phone-number-input.phone-sm .phone-dial {
-    font-size: 12px;
+.app-phone-number-input.phone-sm {
+    --wui-phone-font-size: 13px;
 }
 .app-phone-number-input.phone-sm .phone-country-adornment {
     padding-left: 10px;
@@ -1189,11 +1194,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     height: var(--wui-control-height-lg);
     border-radius: var(--wui-field-radius-lg);
 }
-.app-phone-number-input.phone-lg .input {
-    font-size: 16px;
-}
-.app-phone-number-input.phone-lg .phone-dial {
-    font-size: 14px;
+.app-phone-number-input.phone-lg {
+    --wui-phone-font-size: 16px;
 }
 .app-phone-number-input.phone-lg .phone-country-adornment {
     padding-left: 14px;

package/scss/wui/_controls.scss

@@ -193,9 +193,16 @@
 .wui-radio:disabled {
     cursor: not-allowed;
     opacity: 0.55;
+    box-shadow: none;
+}
+// A disabled box that is ticked keeps its primary fill, only dimmed; the muted fill is for an
+// empty one. :where keeps this at the :disabled specificity so the switch track still wins.
+// A radio in a group with nothing chosen also matches :indeterminate, hence the type test.
+.form-check-input:disabled:where(:not(:checked, [type="checkbox"]:indeterminate)),
+.wui-check:disabled:where(:not(:checked, :indeterminate)),
+.wui-radio:disabled:where(:not(:checked)) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border);
-    box-shadow: none;
 }
 .form-check-input:disabled ~ .form-check-label,
 .wui-control:has(:disabled) {

package/scss/wui/_utilities.scss

@@ -523,6 +523,13 @@
     color: var(--wui-success-active);
     --pw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm4.03-11.28a.9.9 0 0 0-1.32-1.22l-4.02 4.35-1.4-1.5a.9.9 0 1 0-1.32 1.22l2.06 2.22a.9.9 0 0 0 1.32 0l4.68-5.07Z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
+// requirementsPlacement="inline": the same checklist, but in the field under the input and always
+// visible, in place of the hint. `.field` is align-items:flex-start, so it is stretched to the
+// control's width; the rows keep the popover's type and the same met/unmet marks.
+.wui-pw-inline {
+    align-self: stretch;
+    margin-top: 8px;
+}
 // The checklist and the field help tip open with a PLAIN FADE only — no drop / zoom / scale. It opts out of the shared
 // menu-open motion (_menu-motion.scss animates every `.popover.show`) and lets Bootstrap's own
 // `.fade` opacity transition carry the fade in and out. Both surfaces render `.popover.pw-popover`