@webority/theme 0.2.0 → 0.4.0

package/scss/wui/_controls.scss

@@ -0,0 +1,808 @@
+// Checkbox & radio, field/input, status badge, choice chip.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// ── Checkbox & Radio ──
+// Selection controls: a 20px glyph centred in a 36px circular hit area
+// that shows a soft primary-tinted ripple on hover. Unchecked = muted
+// grey-blue outline; checked = solid primary. Checkbox = squircle box + white
+// tick; radio = ring + filled centre dot. Pure CSS, no JS — drives the native
+// input via `appearance: none`, so it stays keyboard- and screen-reader-
+// accessible.
+//
+// Markup:
+//   <label class="lx-control">
+//     <input type="checkbox" class="lx-check">      (or type="radio" class="lx-radio")
+//     <span class="lx-control-label">Full-time</span>
+//   </label>
+// Group rows in a `.lx-control-group` (horizontal, wraps) or stack them.
+.lx-control {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 14px;
+    color: var(--color-text);
+    line-height: 1.4;
+}
+.lx-control-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 20px;
+}
+.lx-control-label {
+    padding-right: 2px;
+}
+
+// The control glyph: 20px box inside a 36px circular tap target (8px ring).
+.lx-check,
+.lx-radio {
+    appearance: none;
+    -webkit-appearance: none;
+    flex: none;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    // 8px transparent ring → 36px hit area + room for the hover ripple
+    margin: 8px;
+    position: relative;
+    border: 1.6px solid var(--color-border-strong);
+    background: transparent;
+    cursor: pointer;
+    transition:
+        border-color 0.15s ease,
+        background-color 0.15s ease;
+}
+.lx-check {
+    border-radius: var(--radius-sm);
+    corner-shape: squircle;
+}
+.lx-radio {
+    border-radius: 50%;
+}
+
+// Soft primary circular ripple behind the glyph on hover (the Minimals halo).
+.lx-check::after,
+.lx-radio::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0.5);
+    background: var(--color-primary-soft);
+    opacity: 0;
+    z-index: -1;
+    pointer-events: none;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
+}
+.lx-control:hover .lx-check::after,
+.lx-control:hover .lx-radio::after,
+.lx-check:hover::after,
+.lx-radio:hover::after {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+}
+
+// Checked — primary fill (checkbox) / primary ring + dot (radio)
+.lx-check:checked {
+    border-color: var(--color-primary);
+    background: var(--color-primary);
+    // white tick drawn with a rotated box-shadow-free pseudo
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
+    background-size: 15px 15px;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+.lx-radio:checked {
+    border-color: var(--color-primary);
+}
+.lx-radio:checked::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    transform: translate(-50%, -50%);
+}
+
+// Keyboard focus ring (only on focus-visible, not mouse)
+.lx-check:focus-visible,
+.lx-radio:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+
+// Disabled
+.lx-check:disabled,
+.lx-radio:disabled,
+.lx-control:has(:disabled) {
+    cursor: not-allowed;
+}
+.lx-check:disabled,
+.lx-radio:disabled {
+    border-color: var(--color-border);
+    background-color: var(--color-bg-muted);
+}
+.lx-check:disabled:checked,
+.lx-radio:disabled:checked {
+    border-color: var(--color-border-strong);
+}
+.lx-check:disabled:checked {
+    background-color: var(--color-border-strong);
+}
+.lx-radio:disabled:checked::before {
+    background: var(--color-border-strong);
+}
+.lx-control:has(:disabled) {
+    color: var(--color-text-subtle);
+}
+.lx-check:disabled::after,
+.lx-radio:disabled::after {
+    display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .lx-check,
+    .lx-radio,
+    .lx-check::after,
+    .lx-radio::after {
+        transition: none;
+    }
+}
+
+// Row-selection checkbox variant used inside a .table-ledger select column.
+.lx-check {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+// ── Field / Input ──
+// Inputs — always-white fill, 16px squircle, soft brand border tint on focus
+// (no glow).
+.input,
+.select,
+.textarea {
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--wui-control-height);
+    padding: 12px;
+    border-radius: var(--radius);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--color-text);
+    transition:
+        border-color 0.12s,
+        box-shadow 0.12s;
+    font-family: inherit;
+}
+.textarea {
+    height: auto;
+    min-height: 120px;
+    padding: 12px 15px 16px;
+    line-height: 1.5;
+    resize: vertical;
+}
+.input:hover:not(:focus):not(:disabled),
+.select:hover:not(:focus):not(:disabled),
+.textarea:hover:not(:focus):not(:disabled) {
+    background-color: var(--color-bg-muted);
+    border-color: var(--color-border-strong);
+}
+.input:focus,
+.select:focus,
+.textarea:focus {
+    outline: none;
+    background-color: var(--color-bg-muted);
+    color: var(--color-text);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    box-shadow: none;
+}
+// Textarea renders as .form-control.textarea (react-bootstrap). Match the
+// shared theme's .form-control:hover specificity so it hovers to
+// --color-border-strong too.
+textarea.textarea.form-control:hover:not(:focus):not(:disabled):not([readonly]) {
+    border-color: var(--color-border-strong);
+}
+textarea.textarea:focus {
+    outline: none;
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    box-shadow: none;
+}
+.input::placeholder,
+.textarea::placeholder {
+    color: var(--color-text-subtle);
+}
+// Edge/IE add a native password reveal (and clear) button — hide them so only
+// the app's own eye toggle shows.
+.input::-ms-reveal,
+.input::-ms-clear {
+    display: none;
+}
+.input:disabled,
+.select:disabled,
+.textarea:disabled {
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+.field:has(.input:disabled) .label {
+    color: var(--color-text-subtle);
+}
+
+// Read-only is NOT disabled, and the two must not look alike: a read-only value is
+// still submitted, still selectable and still copyable, so a `not-allowed` cursor
+// would lie about it. Only the surface says "not yours to edit".
+//
+// Match on `[readonly]`, never the `:read-only` PSEUDO-class — that also matches a
+// DISABLED input (and any non-editable element), so a `:read-only` rule silently
+// repaints disabled fields too.
+.input[readonly],
+.select[readonly],
+.textarea[readonly] {
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+    cursor: default;
+}
+
+// Invalid field state (required-field validation) — soft danger-tinted
+// border on the surface.
+// `[aria-invalid="true"]` is styled alongside `.is-invalid`: React sets the ARIA
+// attribute (it is the accessible source of truth) and does not always add the
+// Bootstrap class, so keying on the class alone left React error states unstyled.
+.input.is-invalid,
+.select.is-invalid,
+.textarea.is-invalid,
+.input.is-invalid:focus,
+.select.is-invalid:focus,
+.textarea.is-invalid:focus,
+.input[aria-invalid="true"],
+.select[aria-invalid="true"],
+.textarea[aria-invalid="true"],
+.input[aria-invalid="true"]:focus,
+.select[aria-invalid="true"]:focus,
+.textarea[aria-invalid="true"]:focus {
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
+    box-shadow: none;
+}
+.input.is-invalid,
+.input[aria-invalid="true"] {
+    padding-right: 41px;
+}
+.field-error {
+    font-size: 12px;
+    line-height: normal;
+    color: var(--color-danger);
+}
+
+// Native select with a rounded squircle, custom chevron, off-surface fill.
+.select {
+    appearance: none;
+    -webkit-appearance: none;
+    padding-right: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95' fill='none' stroke='%234B5675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    background-size: 16px;
+    cursor: pointer;
+}
+
+// Date inputs — a brand calendar glyph that fills the field so a click
+// anywhere opens the native picker; muted text until a value is chosen.
+.input[type="date"] {
+    position: relative;
+    cursor: pointer;
+}
+.input[type="date"]:not(.has-value):not(:focus) {
+    color: var(--color-text-subtle);
+}
+.input[type="date"]::-webkit-calendar-picker-indicator {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
+}
+.input[type="date"]::-webkit-datetime-edit {
+    padding-right: 28px;
+}
+.input-date-wrap {
+    position: relative;
+}
+
+// Number input: hide the native spinner so a custom stepper can be rendered.
+.input[type="number"]::-webkit-inner-spin-button,
+.input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+// Custom number stepper — up/down arrows, no background.
+.num-stepper {
+    position: relative;
+    width: 100%;
+}
+.field > .num-stepper {
+    align-self: stretch;
+}
+.num-stepper .input {
+    width: 100%;
+    padding-right: 36px;
+}
+.num-stepper-btns {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+.num-stepper-btns button {
+    display: grid;
+    place-items: center;
+    width: 20px;
+    height: 15px;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-text-muted);
+}
+.num-stepper-btns button:hover {
+    color: var(--color-text);
+}
+.num-stepper-btns button:active {
+    color: var(--color-primary);
+}
+.input-date-wrap > .input {
+    padding-right: 38px;
+}
+.input-date-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-muted);
+    pointer-events: none;
+}
+
+// Error state — danger-tinted border + room for a trailing affix.
+.input.error,
+.input.error:focus,
+.textarea.error,
+.textarea.error:focus {
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
+    box-shadow: none;
+}
+.input.error {
+    padding-right: 41px;
+}
+// Dark mode: keep the value in an errored field legible.
+:root[data-theme="dark"] .input.error,
+:root[data-theme="dark"] .input.error:focus,
+:root[data-theme="dark"] .input.error:-webkit-autofill,
+:root[data-theme="dark"] .input.error:focus:-webkit-autofill {
+    color: var(--color-text);
+    -webkit-text-fill-color: var(--color-text);
+}
+
+// Field-relative wrap for trailing affixes (error icon, password toggle).
+.input-wrap {
+    position: relative;
+    width: 100%;
+    align-self: stretch;
+}
+.input-wrap .input {
+    width: 100%;
+}
+.input-affix {
+    position: absolute;
+    right: 14px;
+    top: 22.5px;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    color: var(--color-danger);
+}
+
+// Leading-icon input — icon turns brand on focus.
+.input-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+.input-icon > .ic {
+    position: absolute;
+    left: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+    pointer-events: none;
+}
+.input-icon .input {
+    padding-left: 40px;
+}
+.input-icon:focus-within > .ic {
+    color: var(--color-primary);
+}
+
+// Password reveal toggle (place inside .input-wrap).
+.input.pw {
+    padding-right: 44px;
+}
+.input.pw[type="password"]::placeholder {
+    letter-spacing: normal;
+    color: var(--color-text-subtle);
+}
+.pw-toggle {
+    position: absolute;
+    right: 7px;
+    top: 22px;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--color-text-subtle);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition:
+        color 0.12s ease,
+        background 0.12s ease;
+}
+.pw-toggle:hover {
+    color: var(--color-primary);
+    background: transparent;
+}
+
+.hint,
+.field-hint {
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--color-text-subtle);
+}
+.label {
+    display: block;
+    font-size: 14px;
+    line-height: normal;
+    font-weight: 500;
+    color: var(--color-text);
+    margin-bottom: 6px;
+}
+.label-hint {
+    color: var(--color-text-subtle);
+    font-weight: 400;
+    margin-left: 6px;
+    font-size: 12px;
+}
+.label-optional {
+    font-weight: 400;
+    font-size: 14px;
+    color: var(--color-text-subtle);
+}
+.required {
+    color: var(--color-danger);
+    // The gap is CSS, not a significant space in the markup. RequiredMark used to render
+    // `{' '}*` while AppDatePicker and every Razor helper rendered a bare `*`, so the same
+    // asterisk sat 4px further out in some fields than others — and no check could see it,
+    // because HTML comparison collapses whitespace by design.
+    margin-inline-start: 0.25em;
+}
+.field {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+.field > .label,
+.field label {
+    margin-bottom: 0;
+}
+.field-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+.field-row-3 {
+    grid-template-columns: 1fr 1fr 1fr;
+}
+// min-width:0 — grid/flex items default to min-width:auto, which lets a long
+// control (e.g. a search-select label) push its track past 1fr and defeat
+// text truncation. Reset to 0 so the ellipsis engages instead of overflowing.
+.field-row .field {
+    margin-bottom: 0;
+    min-width: 0;
+}
+// Controls fill their field even though .field aligns children flex-start.
+.field > .search-select,
+.field > .input-with-unit,
+.field > .input,
+.field > .datepicker,
+.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,
+    .field-row-3.field-row-3 {
+        grid-template-columns: 1fr;
+    }
+}
+
+// red border around a non-input group (e.g. a structure-form card row)
+.group-invalid {
+    border: 1px solid var(--color-danger);
+    border-radius: var(--radius);
+    padding: 8px;
+}
+
+// One field, one border: the WRAPPER owns the border + hover/focus/error ring
+// so the numeric input and its trailing unit pill light up together.
+.input-with-unit {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    corner-shape: squircle;
+    background: var(--color-surface);
+    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);
+}
+.input-with-unit:has(.num-input.error) {
+    border-color: var(--color-danger);
+}
+
+// Numeric inputs are plain text fields — no native spinner, no stepper. The
+// field flows seamlessly into the trailing unit pill; the wrapper carries the
+// border.
+.input-with-unit .num-input {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+}
+.input-with-unit .num-input:focus {
+    box-shadow: none;
+}
+.input-with-unit .unit {
+    background: var(--color-bg-muted);
+    border: none;
+    border-left: 1px solid var(--color-border);
+    padding: 9px 14px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    font-family: "Inter", sans-serif;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+// ── Status badge ──
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 9px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 500;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    border: 1px solid var(--color-border);
+}
+.badge-primary {
+    background: var(--color-primary-soft);
+    color: 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-strong);
+    border-color: transparent;
+}
+.badge-warn {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-strong);
+    border-color: transparent;
+}
+.badge-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-strong);
+    border-color: transparent;
+}
+.badge-info {
+    background: var(--color-info-soft);
+    color: var(--color-info-strong);
+    border-color: transparent;
+}
+.badge-dot::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: currentColor;
+}
+
+// "Soft" status badge — pill, 12/600, muted tone fill.
+.status-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 0 10px;
+    height: 24px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+}
+// Tones are SEMANTIC — success / warning / danger / info / primary / neutral —
+// the same vocabulary .chip, .badge and every other tone-bearing component uses.
+// A semantic name survives a palette change; a colour name does not (a "green"
+// tone is a lie the moment the brand's success colour stops being green).
+//
+// Two other vocabularies existed and are accepted as DEPRECATED ALIASES so a
+// consumer can migrate without a flag day:
+//   - colour-named  .tone-green / -amber / -red / -blue / -grey  (was the library's)
+//   - short semantic .tone-ok / -warn / -bad                     (was lumex's)
+// Author new markup with the semantic names; the aliases will be removed.
+.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-strong);
+}
+.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-strong);
+}
+.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-strong);
+}
+.status-label.info,
+.status-label.tone-blue {
+    background: color-mix(in srgb, var(--color-info) 16%, transparent);
+    color: var(--color-info-strong);
+}
+.status-label.primary {
+    background: var(--color-primary-soft);
+    color: 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.
+.status-label,
+.status-label.neutral,
+.status-label.tone-grey {
+    background: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
+    color: var(--color-text-subtle);
+}
+
+// ── Choice chip ──
+// Inline selectable chip — native control hidden, pill adopts the primary
+// accent when checked.
+.choice-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 14px;
+    border: 1.5px solid var(--color-border);
+    border-radius: 999px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text);
+    background: var(--color-surface);
+    cursor: pointer;
+    user-select: none;
+    transition:
+        border-color 0.12s ease,
+        background 0.12s ease,
+        color 0.12s ease;
+}
+.choice-chip:hover {
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
+.choice-chip input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+.choice-chip.checked {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+
+// A count badge inside a selectable chip — "Active 12". Inverts on selection for
+// the same reason the nav badge does: the chip already carries the soft tint, so a
+// tinted badge on top of it would disappear.
+.choice-chip .count {
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-subtle);
+}
+.choice-chip.checked .count {
+    background: var(--color-surface);
+    color: var(--color-primary);
+}
+
+// Form section heading — a branded accent bar rather than a full-width hairline,
+// so a long form reads as designed sections instead of raw rules.
+//
+// Block, not flex: an inline subscript in the label (N(SG)) would otherwise be
+// split out as a separate flex item and gain a gap.
+.fld-section {
+    margin: 30px 0 10px;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+}
+.fld-section::before {
+    content: "";
+    display: inline-block;
+    width: 3px;
+    height: 12px;
+    margin-right: 9px;
+    border-radius: 2px;
+    background: var(--color-primary);
+    vertical-align: middle;
+}
+.fld-section:first-child {
+    margin-top: 0;
+}