@webority/theme 0.7.7 → 0.7.9

package/scss/wui/_controls.scss

@@ -176,6 +176,24 @@
     // Re-assert the knob — the checkbox :checked tick has equal specificity.
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='white'/%3E%3C/svg%3E");
 }
+
+// Circular variant (shape="circle") — a compact round on/off button instead of a sliding
+// pill. The track is a square-sized circle; the knob dot stays CENTRED in both states (no
+// left/right slide) and the fill flips to primary when on. Placed after the base switch
+// block so the equal-specificity :checked position override wins on source order.
+.form-switch-circle .form-check-input {
+    width: 24px;
+    height: 24px;
+    // The switch is a type="checkbox", which carries `corner-shape: squircle` — on a square
+    // that renders a rounded square, not a circle. Reset to a true round corner.
+    corner-shape: round;
+    border-radius: 999px;
+    background-position: center;
+    background-size: 10px 10px;
+}
+.form-switch-circle .form-check-input:checked {
+    background-position: center;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,
@@ -191,6 +209,11 @@
 // deltas on top of Bootstrap's $input-* vars: shared control height, hover
 // fill, brand-border focus (no glow), soft invalid border.
 //
+// Soft-filled resting look (per the field design reference): the field rests on a
+// muted fill with a barely-there border, then lifts to a white surface + brand
+// border + a soft focus ring on focus. "Filled" is the same resting look with a
+// value; the state ladder is default/filled → hover → focus → disabled → error.
+//
 // Keep shell utilities (.input-wrap, .input-icon, .input-sm, …) — those are
 // structure, not a parallel visual system.
 .form-control,
@@ -204,7 +227,7 @@
     padding: 12px;
     border-radius: var(--radius);
     border: 1px solid var(--color-border);
-    background: var(--color-surface);
+    background: var(--color-bg-muted);
     font-size: 14px;
     line-height: 1.5;
     color: var(--color-text);
@@ -246,7 +269,7 @@ textarea.form-control.autosize {
 // Hover/error guards: without them the hover fill repaints over an invalid border.
 .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),
+.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open),
 .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-bg-muted);
@@ -258,10 +281,11 @@ textarea.form-control.autosize {
 .select:focus,
 .textarea:focus {
     outline: none;
-    background-color: var(--color-bg-muted);
+    // Lift off the muted resting fill onto a clean white surface while active.
+    background-color: var(--color-surface);
     color: var(--color-text);
-    // Full-strength brand border is the focus cue (no glow) — WCAG 2.2 SC 1.4.11.
-    border-color: var(--color-primary);
+    // Soft brand border is the focus cue (per the reference) — no ring/shadow.
+    border-color: var(--wui-primary-30);
     box-shadow: none;
 }
 .form-control::placeholder,
@@ -297,8 +321,10 @@ textarea.form-control.autosize {
 .input:disabled,
 .select:disabled,
 .textarea:disabled {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border);
+    // A touch deeper than the resting fill so a disabled field stays distinct now that
+    // the resting state is itself filled (per the reference's disabled field).
+    background: color-mix(in srgb, var(--color-bg-muted) 72%, var(--color-border));
+    border-color: transparent;
     color: var(--color-text-subtle);
     cursor: not-allowed;
 }
@@ -350,7 +376,9 @@ textarea.form-control.autosize {
 .input.error:focus,
 .textarea.error:focus {
     background: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
+    // Soft danger border (danger at 30%, mirroring the primary-30 focus border) — no ring,
+    // so the field reads as a quiet error, not a solid alarm box.
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
     box-shadow: none;
     // Kill Bootstrap's default invalid SVG + extra padding when .is-invalid is used.
     background-image: none;
@@ -618,17 +646,23 @@ textarea.form-control.autosize {
     width: 100%;
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
-    background: var(--color-surface);
-    transition: border-color 0.12s ease;
+    // Soft-filled at rest, white on focus — one shared fill for the whole control so the
+    // prefix/suffix and the input body are always the SAME colour combination as the field.
+    background: var(--color-bg-muted);
+    transition:
+        border-color 0.12s ease,
+        background-color 0.12s ease;
 }
 .input-affixed:hover:not(:focus-within) {
     border-color: var(--color-border-strong);
 }
 .input-affixed:focus-within {
-    border-color: var(--color-primary);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .input-affixed:has(.input.error) {
-    border-color: var(--color-danger);
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 .input-affixed .input {
     flex: 1;
@@ -641,7 +675,9 @@ textarea.form-control.autosize {
     display: flex;
     align-items: center;
     padding: 0 12px;
-    background: var(--color-bg-muted);
+    // Transparent so the affix inherits the wrapper fill — the addon and the input read as
+    // one continuous surface (only the separator border divides them).
+    background: transparent;
     color: var(--color-text-subtle);
     font-size: 14px;
     white-space: nowrap;
@@ -669,19 +705,27 @@ textarea.form-control.autosize {
     transform: translateY(-50%);
     transform-origin: left center;
     margin: 0;
-    padding: 0 4px;
+    padding: 0 6px;
+    // Rounded so the background mask reads as a soft pill sitting on the border, not a sharp
+    // rectangle. Invisible at rest (label fill == field fill); only shows once it floats up.
+    border-radius: var(--radius-sm);
     max-width: calc(100% - 24px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 14px;
     color: var(--color-text-subtle);
-    background: var(--color-surface);
+    // The floated label sits ON the top border, so its background masks the border under the
+    // text. It MUST match the field's own fill, or the mask reads as a separate patch. The
+    // resting/filled fill is --color-bg-muted (a white notch on the grey fill was the tell); it
+    // only lifts to --color-surface on focus/invalid, matched below.
+    background: var(--color-bg-muted);
     pointer-events: none;
     transition:
         top 0.15s var(--wui-ease-ui),
         transform 0.15s var(--wui-ease-ui),
-        color 0.15s var(--wui-ease-ui);
+        color 0.15s var(--wui-ease-ui),
+        background-color 0.12s;
 }
 .field-float .input:focus ~ .float-label,
 .field-float .input:not(:placeholder-shown) ~ .float-label {
@@ -694,6 +738,14 @@ textarea.form-control.autosize {
 .field-float .input.error ~ .float-label {
     color: var(--color-danger-text);
 }
+// Track the field's fill: it lifts to --color-surface while focused or invalid, so the label
+// mask follows to stay seamless in those states too.
+.field-float .input:focus ~ .float-label,
+.field-float .input.error ~ .float-label,
+.field-float .input.is-invalid ~ .float-label,
+.field-float .input[aria-invalid="true"] ~ .float-label {
+    background: var(--color-surface);
+}
 // Floating label for AppSelect — the trigger is a <button>, so there is no
 // :placeholder-shown to key off. :has() raises the label when the control is
 // focused/open, or once a value is chosen (the label span drops
@@ -707,6 +759,9 @@ textarea.form-control.autosize {
 .field-float:has(.search-select-control:focus) .float-label,
 .field-float:has(.search-select-control.open) .float-label {
     color: var(--color-primary);
+    // The control turns white while focused/open, so the label mask follows (a filled-but-closed
+    // select keeps the default muted mask, matching its muted resting fill).
+    background: var(--color-surface);
 }
 
 .hint,
@@ -859,22 +914,24 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
-    background: var(--color-surface);
+    // Soft-filled at rest, white on focus — the numeric input and its unit pill share the
+    // one wrapper fill, same colour combination as every other field.
+    background: var(--color-bg-muted);
     transition:
         border-color 0.12s,
         background-color 0.12s;
     overflow: hidden;
 }
 .input-with-unit:hover:not(:focus-within) {
-    background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
 .input-with-unit:focus-within {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .input-with-unit:has(.num-input.error) {
-    border-color: var(--color-danger);
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 
 // Numeric inputs are plain text fields — no native spinner, no stepper. The
@@ -889,7 +946,8 @@ wui-select[compact] {
     box-shadow: none;
 }
 .input-with-unit .unit {
-    background: var(--color-bg-muted);
+    // Transparent so the pill inherits the wrapper fill — one continuous surface.
+    background: transparent;
     border: none;
     border-left: 1px solid var(--color-border);
     padding: 9px 14px;
@@ -1010,30 +1068,21 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
 }
 .badge-primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
     border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 .badge-success {
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(success);
 }
 .badge-warning,
 .badge-warn {
-    background: var(--color-warning-soft);
-    color: var(--color-warning-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(warning);
 }
 .badge-danger {
-    background: var(--color-danger-soft);
-    color: var(--color-danger-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(danger);
 }
 .badge-info {
-    background: var(--color-info-soft);
-    color: var(--color-info-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(info);
 }
 .badge-dot::before {
     content: "";
@@ -1069,29 +1118,24 @@ wui-select[compact] {
 .status-label.success,
 .status-label.tone-ok,
 .status-label.tone-green {
-    background: color-mix(in srgb, var(--color-success) 16%, transparent);
-    color: var(--color-success-text);
+    @include wui-tone-pill-colors(success);
 }
 .status-label.warning,
 .status-label.tone-warn,
 .status-label.tone-amber {
-    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
-    color: var(--color-warning-text);
+    @include wui-tone-pill-colors(warning);
 }
 .status-label.danger,
 .status-label.tone-bad,
 .status-label.tone-red {
-    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
-    color: var(--color-danger-text);
+    @include wui-tone-pill-colors(danger);
 }
 .status-label.info,
 .status-label.tone-blue {
-    background: color-mix(in srgb, var(--color-info) 16%, transparent);
-    color: var(--color-info-text);
+    @include wui-tone-pill-colors(info);
 }
 .status-label.primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
 }
 // Default/neutral — also the bare `.status-label` look, so an unknown or omitted
 // tone still renders as a proper pill instead of transparent text.
@@ -1311,7 +1355,7 @@ wui-otp {
     background-color: var(--color-primary);
     border: 2px solid var(--color-surface);
     border-radius: 50%;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--wui-shadow-thumb);
     cursor: pointer;
     transition:
         background-color 0.15s ease,
@@ -1319,7 +1363,7 @@ wui-otp {
         border-color 0.15s ease;
 }
 .slider-thumb:hover:not(:disabled) {
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--wui-shadow-thumb-hover);
 }
 .slider-thumb:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -1342,6 +1386,7 @@ wui-otp {
     white-space: nowrap;
 }
 
+// Dark mode: slider shadows need light ink for visibility.
 // Size variants
 .slider-sm {
     height: 28px;

package/scss/wui/_data.scss

@@ -230,6 +230,10 @@
     background: var(--color-bg-muted);
     color: var(--color-text);
 }
+.wui-expand-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .wui-expand-toggle .bi {
     transition: transform 0.18s var(--wui-ease-out-quart, ease);
 }
@@ -429,6 +433,10 @@
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
     color: var(--color-primary);
 }
+.tpg-arrow:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 // Text-5 already reads as "unavailable" — no opacity dimming on top of it.
 .tpg-arrow:disabled {
     color: var(--color-border-strong);
@@ -460,6 +468,10 @@
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
     color: var(--color-primary);
 }
+.tpg-page:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .tpg-page.is-active {
     background: var(--color-primary);
     color: var(--color-primary-text);
@@ -627,6 +639,10 @@
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
     color: var(--color-primary);
 }
+.u-action:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .u-action:disabled {
     opacity: 0.4;
     cursor: not-allowed;
@@ -729,6 +745,10 @@
     cursor: pointer;
     user-select: none;
 }
+.table th.sortable:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
 .table th.sortable .sort-icon {
     // Reserved space so the header does not jump width when the arrow appears.
     display: inline-block;