48 lines
1.7 KiB
CSS
48 lines
1.7 KiB
CSS
/* Switch mapping — current HM values built from the shared Semantic tokens (ui-viz has no Switch spec; it was only a candidate there).
|
|
States use Radix attributes: [data-state="checked"|"unchecked"], :hover, :focus-visible, :disabled. Motion is the shadcn default. */
|
|
:root, [data-hm-theme] {
|
|
--hm-switch-width: 36px;
|
|
--hm-switch-height: 20px;
|
|
--hm-switch-thumb-size: 16px;
|
|
--hm-switch-thumb-offset: 2px;
|
|
--hm-switch-off-background: var(--hm-sem-stroke-default);
|
|
--hm-switch-on-background: var(--hm-sem-state-active);
|
|
--hm-switch-thumb-color: var(--hm-sem-bg-surface);
|
|
--hm-switch-hover-overlay: var(--hm-color-action-overlay-hover);
|
|
}
|
|
|
|
[data-slot="switch"] {
|
|
box-sizing: border-box;
|
|
width: var(--hm-switch-width);
|
|
height: var(--hm-switch-height);
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 9999px;
|
|
background-color: var(--hm-switch-off-background);
|
|
background-image: none;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
}
|
|
[data-slot="switch"][data-state="checked"] {
|
|
background-color: var(--hm-switch-on-background);
|
|
}
|
|
[data-slot="switch"]:hover:not(:disabled) {
|
|
background-image: linear-gradient(var(--hm-switch-hover-overlay), var(--hm-switch-hover-overlay));
|
|
}
|
|
[data-slot="switch"]:focus-visible {
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
|
|
}
|
|
[data-slot="switch"]:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
[data-slot="switch-thumb"] {
|
|
width: var(--hm-switch-thumb-size);
|
|
height: var(--hm-switch-thumb-size);
|
|
border-radius: 9999px;
|
|
background: var(--hm-switch-thumb-color);
|
|
transform: translateX(var(--hm-switch-thumb-offset));
|
|
}
|
|
[data-slot="switch-thumb"][data-state="checked"] {
|
|
transform: translateX(calc(var(--hm-switch-width) - var(--hm-switch-thumb-size) - var(--hm-switch-thumb-offset)));
|
|
}
|