/* Checkbox mapping: current HM values built from the shared Semantic tokens (ui-viz has no Checkbox spec; reference only). States use Radix attributes: [data-state="checked"|"indeterminate"], :hover, :focus-visible, :disabled, [aria-invalid="true"]. */ :root, [data-hm-theme] { --hm-checkbox-size: 18px; --hm-checkbox-radius: var(--hm-radius-control-md); --hm-checkbox-border-width: 1px; --hm-checkbox-icon-size: 14px; --hm-checkbox-background: var(--hm-sem-bg-surface); --hm-checkbox-border-color: var(--hm-sem-stroke-default); --hm-checkbox-hover-border-color: var(--hm-sem-action-primary); --hm-checkbox-checked-background: var(--hm-sem-state-active); --hm-checkbox-checked-border-color: var(--hm-sem-state-active); --hm-checkbox-checked-hover-overlay: var(--hm-color-action-overlay-hover); --hm-checkbox-indicator-color: var(--hm-sem-on-state-active); --hm-checkbox-error-border-color: var(--hm-sem-action-destructive); } [data-slot="checkbox"] { box-sizing: border-box; width: var(--hm-checkbox-size); height: var(--hm-checkbox-size); padding: 0; border: var(--hm-checkbox-border-width) solid var(--hm-checkbox-border-color); border-radius: var(--hm-checkbox-radius); background-color: var(--hm-checkbox-background); background-image: none; color: var(--hm-checkbox-indicator-color); box-shadow: none; cursor: pointer; } [data-slot="checkbox"] svg { width: var(--hm-checkbox-icon-size); height: var(--hm-checkbox-icon-size); } [data-slot="checkbox"]:hover:not(:disabled):not([data-state="checked"]):not([data-state="indeterminate"]) { border-color: var(--hm-checkbox-hover-border-color); } [data-slot="checkbox"][data-state="checked"], [data-slot="checkbox"][data-state="indeterminate"] { border-color: var(--hm-checkbox-checked-border-color); background-color: var(--hm-checkbox-checked-background); } [data-slot="checkbox"][data-state="checked"]:hover:not(:disabled), [data-slot="checkbox"][data-state="indeterminate"]:hover:not(:disabled) { background-image: linear-gradient(var(--hm-checkbox-checked-hover-overlay), var(--hm-checkbox-checked-hover-overlay)); } /* Focus level is the shadcn ring (ui_viz global focus is TBD); keep the ring variables because the theme sets box-shadow: none. */ [data-slot="checkbox"]:focus-visible { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000); } [data-slot="checkbox"][aria-invalid="true"] { border-color: var(--hm-checkbox-error-border-color); } [data-slot="checkbox"]:disabled { cursor: not-allowed; }