55 lines
2.5 KiB
CSS
55 lines
2.5 KiB
CSS
/* 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;
|
|
}
|