@webority/theme 0.7.3 → 0.7.5

package/scss/wui/_choice.scss

@@ -318,7 +318,7 @@
 // scrollable modal / table card. Sits above the modal layer.
 .search-select-menu-fixed {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     right: auto;
     top: auto;
     left: auto;
@@ -483,7 +483,7 @@
 // sits above the modal layer.
 .datepicker-pop {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     width: 312px;
     max-width: calc(100vw - 16px);
     padding: 18px;
@@ -801,7 +801,7 @@ button.datepicker-month:hover {
 }
 .daterange-pop {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     width: 620px;
     max-width: calc(100vw - 16px);
     padding: 18px;
@@ -998,7 +998,7 @@ button.datepicker-month:hover {
 // modal layer, matching .search-select-menu-fixed and .datepicker-pop.
 .country-dropdown-menu {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     width: 320px;
     max-width: calc(100vw - 16px);
     padding: 4px;

package/scss/wui/_controls.scss

@@ -6,191 +6,56 @@
 // 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.
+// ── Checkbox / radio / switch ──
+// Bootstrap `.form-check` + `.form-check-input` are the public selection skin
+// (AppCheckbox / AppRadio / AppSwitch). `.wui-check` / `.wui-radio` are aliases
+// for the same glyph (AppDataTable select column + legacy `.wui-control`
+// markup) — never a second look. One 20px brand glyph language.
 //
-// Markup:
-//   <label class="wui-control">
-//     <input type="checkbox" class="wui-check">      (or type="radio" class="wui-radio")
-//     <span class="wui-control-label">Full-time</span>
-//   </label>
-// Group rows in a `.wui-control-group` (horizontal, wraps) or stack them.
+// Layout wrappers:
+// .form-check / .form-check-label — App* path
+// .wui-control / .wui-control-label — optional compact label wrap (alias)
+
+.form-check,
 .wui-control {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
+    min-height: 0;
+    margin-bottom: 0;
+    padding-left: 0;
     cursor: pointer;
     user-select: none;
     font-size: 14px;
     color: var(--color-text);
     line-height: 1.4;
 }
+.wui-control {
+    display: inline-flex;
+}
+.form-check-inline {
+    display: inline-flex;
+    margin-right: 16px;
+}
 .wui-control-group {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px 20px;
 }
+.form-check-label,
 .wui-control-label {
-    padding-right: 2px;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.4;
+    color: var(--color-text);
+    user-select: none;
 }
 
-// The control glyph: 20px box inside a 36px circular tap target (8px ring).
+// Glyph — shared by BS form-check-input and the wui-check alias.
+.form-check-input,
 .wui-check,
 .wui-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;
-}
-.wui-check {
-    border-radius: var(--radius-sm);
-    corner-shape: squircle;
-}
-.wui-radio {
-    border-radius: 50%;
-}
-
-// Soft primary circular ripple behind the glyph on hover (the Minimals halo).
-.wui-check::after,
-.wui-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;
-}
-.wui-control:hover .wui-check::after,
-.wui-control:hover .wui-radio::after,
-.wui-check:hover::after,
-.wui-radio:hover::after {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-}
-
-// Checked — primary fill (checkbox) / primary ring + dot (radio)
-.wui-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;
-}
-.wui-radio:checked {
-    border-color: var(--color-primary);
-}
-.wui-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)
-.wui-check:focus-visible,
-.wui-radio:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
-}
-
-// Disabled
-.wui-check:disabled,
-.wui-radio:disabled,
-.wui-control:has(:disabled) {
-    cursor: not-allowed;
-}
-.wui-check:disabled,
-.wui-radio:disabled {
-    border-color: var(--color-border);
-    background-color: var(--color-bg-muted);
-}
-.wui-check:disabled:checked,
-.wui-radio:disabled:checked {
-    border-color: var(--color-border-strong);
-}
-.wui-check:disabled:checked {
-    background-color: var(--color-border-strong);
-}
-.wui-radio:disabled:checked::before {
-    background: var(--color-border-strong);
-}
-.wui-control:has(:disabled) {
-    color: var(--color-text-subtle);
-}
-.wui-check:disabled::after,
-.wui-radio:disabled::after {
-    display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .wui-check,
-    .wui-radio,
-    .wui-check::after,
-    .wui-radio::after {
-        transition: none;
-    }
-}
-
-// Row-selection checkbox variant used inside a .table-ledger select column.
-.wui-check {
-    width: 16px;
-    height: 16px;
-    accent-color: var(--color-primary);
-    cursor: pointer;
-    vertical-align: middle;
-}
-
-// ── Premium checkbox / radio / switch ──
-// AppCheckbox / AppRadio / AppSwitch render Bootstrap's .form-check markup, whose default
-// input is a plain 16px box. This restyles it to the Webority selection-control language
-// (see .wui-check above): a 20px squircle box, brand fill, a crisp white tick, a soft primary
-// hover ring + focus ring, and a themed switch. One block upgrades all three, both surfaces.
-.form-check {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-height: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-}
-.form-check-inline {
-    display: inline-flex;
-    margin-right: 16px;
-}
-.form-check-input {
     box-sizing: border-box;
     flex: none;
     float: none;
@@ -211,65 +76,82 @@
         box-shadow 0.15s ease,
         background-position 0.15s ease;
 }
-// Bootstrap floats the input into the label's left padding via `.form-check .form-check-input`
-// (specificity 0,2,0 — it outranks the rule above), which drags the box a negative margin
-// left, out of the card. Our flex row places it directly; undo the float and negative margin
-// at matching specificity.
+// Bootstrap floats the input into the label's left padding via
+// `.form-check .form-check-input` (0,2,0). Undo at matching specificity.
 .form-check .form-check-input {
     float: none;
     margin: 0;
 }
-.form-check-input[type="checkbox"] {
+.form-check-input[type="checkbox"],
+.wui-check {
     border-radius: var(--radius-sm);
     corner-shape: squircle;
 }
-.form-check-input[type="radio"] {
+.form-check-input[type="radio"],
+.wui-radio {
     border-radius: 50%;
 }
-.form-check-input:hover:not(:disabled):not(:checked) {
+.form-check-input:hover:not(:disabled):not(:checked),
+.wui-check:hover:not(:disabled):not(:checked),
+.wui-radio:hover:not(:disabled):not(:checked) {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 4px var(--color-primary-soft);
 }
-.form-check-input:focus-visible {
+.form-check-input:focus-visible,
+.wui-check:focus-visible,
+.wui-radio:focus-visible {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-soft);
 }
-.form-check-input:checked {
+.form-check-input:checked,
+.wui-check:checked,
+.wui-radio:checked {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
 }
-.form-check-input[type="checkbox"]:checked {
+.form-check-input[type="checkbox"]:checked,
+.wui-check:checked {
     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");
 }
-.form-check-input[type="checkbox"]:indeterminate {
+.form-check-input[type="checkbox"]:indeterminate,
+.wui-check:indeterminate {
     border-color: var(--color-primary);
     background-color: var(--color-primary);
     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'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
 }
-.form-check-input[type="radio"]:checked {
+.form-check-input[type="radio"]:checked,
+.wui-radio:checked {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.5' fill='white'/%3E%3C/svg%3E");
     background-size: 20px 20px;
 }
-.form-check-input:disabled {
+.form-check-input:disabled,
+.wui-check:disabled,
+.wui-radio:disabled {
     cursor: not-allowed;
     opacity: 0.55;
     background-color: var(--color-bg-muted);
     border-color: var(--color-border);
     box-shadow: none;
 }
-.form-check-label {
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1.4;
-    color: var(--color-text);
-    user-select: none;
-}
-.form-check-input:disabled ~ .form-check-label {
+.form-check-input:disabled ~ .form-check-label,
+.wui-control:has(:disabled) {
     cursor: not-allowed;
     color: var(--color-text-subtle);
 }
-// Switch — a pill track with a sliding white knob.
+
+// Compact row-select — ONLY inside the select column (AppDataTable / Razor
+// data-table → `.wui-select-cell`). Scope is load-bearing.
+.wui-select-cell .wui-check,
+.wui-select-cell .form-check-input {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    vertical-align: middle;
+    background-size: 12px 12px;
+}
+
+// Switch — pill track + sliding knob (Bootstrap .form-switch only).
 .form-switch {
     padding-left: 0;
 }
@@ -291,19 +173,28 @@
     border-color: transparent;
     background-color: var(--color-primary);
     background-position: right center;
-    // Re-assert the knob — the checkbox :checked tick has equal specificity and would
-    // otherwise win, turning the switch into a ticked box.
+    // 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");
 }
 @media (prefers-reduced-motion: reduce) {
-    .form-check-input {
+    .form-check-input,
+    .wui-check,
+    .wui-radio {
         transition: none;
     }
 }
 
 // ── Field / Input ──
-// Inputs — always-white fill, 16px squircle, soft brand border tint on focus
-// (no glow).
+// Bootstrap `.form-control` / `.form-select` are the field skin. `.input` /
+// `.select` / `.textarea` are aliases (and App* size/shell hooks) that MUST
+// share the same chrome — never a second look. The only WUI
+// deltas on top of Bootstrap's $input-* vars: shared control height, hover
+// fill, brand-border focus (no glow), soft invalid border.
+//
+// Keep shell utilities (.input-wrap, .input-icon, .input-sm, …) — those are
+// structure, not a parallel visual system.
+.form-control,
+.form-select,
 .input,
 .select,
 .textarea {
@@ -322,75 +213,87 @@
         box-shadow 0.12s;
     font-family: inherit;
 }
-// Size steps — sm/lg opt out of the shared 44px control height for dense toolbars or
-// marketing-scale fields. md is the base rule above; AppInput adds .input-sm / .input-lg.
+// Size steps — sm/lg opt out of the shared 44px control height. App* emits
+// .input-sm/.input-lg; Bootstrap's form-control-sm/lg are included so a raw
+// BS field can match without the .input alias.
+.form-control-sm,
 .input-sm {
     height: var(--wui-control-height-sm);
     padding: 6px 10px;
     font-size: 13px;
 }
+.form-control-lg,
 .input-lg {
     height: var(--wui-control-height-lg);
     padding: 14px 16px;
     font-size: 16px;
 }
-.textarea {
+.textarea,
+textarea.form-control {
     height: auto;
     min-height: 120px;
     padding: 12px 15px 16px;
     line-height: 1.5;
     resize: vertical;
 }
-// Auto-grow — JS drives the height to fit the content (Razor: data-app-autosize wired in
-// webority-ui.js; React: the autoGrow prop). The manual grabber and the scrollbar are off
-// so they can't fight the measured height.
-.textarea.autosize {
+// Auto-grow — JS drives the height to fit the content (Razor: data-app-autosize;
+// React: autoGrow). Manual grabber and scrollbar off so they can't fight measure.
+.textarea.autosize,
+textarea.form-control.autosize {
     resize: none;
     overflow: hidden;
 }
-// The `.error` / `.is-invalid` / `[aria-invalid="true"]` guards keep an invalid field's
-// danger border visible on hover — without them the hover rule repaints it grey and the
-// error signal disappears the moment the cursor passes over the field.
-.input:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+// 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),
 .select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
-.textarea: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);
     border-color: var(--color-border-strong);
 }
+.form-control:focus,
+.form-select:focus,
 .input:focus,
 .select:focus,
 .textarea:focus {
     outline: none;
     background-color: var(--color-bg-muted);
     color: var(--color-text);
-    // Full-strength brand border is the focus cue (no glow) — the prior 30% tint read at
-    // ~1.5:1, below WCAG 2.2 SC 1.4.11's 3:1 for a non-text focus indicator.
-    border-color: var(--color-primary);
-    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;
-    // Full-strength brand border is the focus cue (no glow) — the prior 30% tint read at
-    // ~1.5:1, below WCAG 2.2 SC 1.4.11's 3:1 for a non-text focus indicator.
+    // Full-strength brand border is the focus cue (no glow) — WCAG 2.2 SC 1.4.11.
     border-color: var(--color-primary);
     box-shadow: none;
 }
+.form-control::placeholder,
 .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.
+// Borderless variant — no border/background, inherits the container's chrome
+// (inline-rename, command-palette fields where the bordered shell is wrong).
+.input-bare,
+.input-bare:hover,
+.input-bare:focus {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+}
+.input-bare {
+    padding-left: 0;
+    padding-right: 0;
+}
+.input-bare:focus {
+    outline: none;
+}
+// Edge/IE native password reveal — hide so only the app eye toggle shows.
+.form-control::-ms-reveal,
+.form-control::-ms-clear,
 .input::-ms-reveal,
 .input::-ms-clear {
     display: none;
 }
+.form-control:disabled,
+.form-select:disabled,
 .input:disabled,
 .select:disabled,
 .textarea:disabled {
@@ -399,17 +302,16 @@ textarea.textarea:focus {
     color: var(--color-text-subtle);
     cursor: not-allowed;
 }
+.field:has(.form-control:disabled) .label,
 .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.
+// Read-only is NOT disabled — still submitted/selectable/copyable, so no
+// not-allowed cursor. Match `[readonly]`, never `:read-only` (that also hits
+// disabled and non-editable controls).
+.form-control[readonly],
+.form-select[readonly],
 .input[readonly],
 .select[readonly],
 .textarea[readonly] {
@@ -418,26 +320,44 @@ textarea.textarea:focus {
     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.
+// Invalid — soft danger border (one recipe for aria-invalid, .is-invalid, .error).
+// Soft rather than solid --bs-danger so the field still reads as a surface, not a
+// hard alarm box; text errors use --color-danger-text for AA.
+.form-control.is-invalid,
+.form-select.is-invalid,
 .input.is-invalid,
 .select.is-invalid,
 .textarea.is-invalid,
+.form-control.is-invalid:focus,
+.form-select.is-invalid:focus,
 .input.is-invalid:focus,
 .select.is-invalid:focus,
 .textarea.is-invalid:focus,
+.form-control[aria-invalid="true"],
+.form-select[aria-invalid="true"],
 .input[aria-invalid="true"],
 .select[aria-invalid="true"],
 .textarea[aria-invalid="true"],
+.form-control[aria-invalid="true"]:focus,
+.form-select[aria-invalid="true"]:focus,
 .input[aria-invalid="true"]:focus,
 .select[aria-invalid="true"]:focus,
-.textarea[aria-invalid="true"]:focus {
+.textarea[aria-invalid="true"]:focus,
+.form-control.error,
+.input.error,
+.textarea.error,
+.form-control.error:focus,
+.input.error:focus,
+.textarea.error:focus {
     background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
     box-shadow: none;
+    // Kill Bootstrap's default invalid SVG + extra padding when .is-invalid is used.
+    background-image: none;
+}
+.form-control.is-invalid,
+.form-select.is-invalid {
+    padding-right: 0.875rem;
 }
 .field-error {
     font-size: 12px;
@@ -544,20 +464,12 @@ textarea.textarea:focus {
     pointer-events: none;
 }
 
-// Error state — danger-tinted border, plus a danger glyph at the trailing edge.
-.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;
-}
-
-// The trailing error glyph. Scoped with the child combinator to a PLAIN field only:
-// a shell-wrapped input (leading icon / unit / password / trailing action) is nested
-// one level deeper, so it keeps its own right edge and never collides with the glyph.
-// Covers both error paths — the `.error` class and `[aria-invalid]` / `.is-invalid`.
+// Trailing error glyph on a PLAIN field only (child combinator). Shell-wrapped
+// inputs sit one level deeper and keep their own right edge.
+// Note: background-image here re-applies after the shared invalid rule zeroed BS's SVG.
+.field > .form-control.error,
+.field > .form-control.is-invalid,
+.field > .form-control[aria-invalid="true"],
 .field > .input.error,
 .field > .input.is-invalid,
 .field > .input[aria-invalid="true"] {
@@ -568,8 +480,12 @@ textarea.textarea:focus {
     background-size: 18px;
 }
 // Dark mode: keep the value in an errored field legible.
+:root[data-theme="dark"] .form-control.error,
+:root[data-theme="dark"] .form-control.error:focus,
 :root[data-theme="dark"] .input.error,
 :root[data-theme="dark"] .input.error:focus,
+:root[data-theme="dark"] .form-control.error:-webkit-autofill,
+:root[data-theme="dark"] .form-control.error:focus:-webkit-autofill,
 :root[data-theme="dark"] .input.error:-webkit-autofill,
 :root[data-theme="dark"] .input.error:focus:-webkit-autofill {
     color: var(--color-text);
@@ -682,7 +598,7 @@ textarea.textarea:focus {
 }
 @keyframes wui-clear-in {
     from { opacity: 0; transform: translateY(-50%) scale(0.72); }
-    to   { opacity: 1; transform: translateY(-50%) scale(1); }
+    to { opacity: 1; transform: translateY(-50%) scale(1); }
 }
 
 // Prefix / suffix addon — a bordered box before/after the input (₹, https://, .com). The
@@ -1043,8 +959,8 @@ wui-select[compact] {
 //
 // 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                     (a short-semantic set)
+// - colour-named .tone-green / -amber / -red / -blue / -grey (was the library's)
+// - short semantic .tone-ok / -warn / -bad (a short-semantic set)
 // Author new markup with the semantic names; the aliases will be removed.
 .status-label.success,
 .status-label.tone-ok,