Initial commit: HMDesignSystem baseline
This commit is contained in:
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,57 @@
|
||||
/* Radio Group mapping: current HM values built from the shared Semantic tokens (ui-viz has no Radio spec; reference only).
|
||||
States use Radix attributes: [data-state="checked"|"unchecked"], :hover, :focus-visible, :disabled, [aria-invalid="true"]; layout uses data-orientation. */
|
||||
:root, [data-hm-theme] {
|
||||
--hm-radio-size: 18px;
|
||||
--hm-radio-border-width: 1px;
|
||||
--hm-radio-dot-size: 8px;
|
||||
--hm-radio-background: var(--hm-sem-bg-surface);
|
||||
--hm-radio-border-color: var(--hm-sem-stroke-default);
|
||||
--hm-radio-hover-border-color: var(--hm-sem-action-primary);
|
||||
--hm-radio-checked-border-color: var(--hm-sem-state-active);
|
||||
--hm-radio-dot-color: var(--hm-sem-state-active);
|
||||
--hm-radio-error-border-color: var(--hm-sem-action-destructive);
|
||||
--hm-radio-group-gap: 12px;
|
||||
--hm-radio-group-gap-horizontal: 16px;
|
||||
}
|
||||
|
||||
[data-slot="radio-group"] {
|
||||
gap: var(--hm-radio-group-gap);
|
||||
}
|
||||
[data-slot="radio-group"][data-orientation="horizontal"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--hm-radio-group-gap-horizontal);
|
||||
}
|
||||
|
||||
[data-slot="radio-group-item"] {
|
||||
box-sizing: border-box;
|
||||
width: var(--hm-radio-size);
|
||||
height: var(--hm-radio-size);
|
||||
padding: 0;
|
||||
border: var(--hm-radio-border-width) solid var(--hm-radio-border-color);
|
||||
border-radius: 50%;
|
||||
background: var(--hm-radio-background);
|
||||
color: var(--hm-radio-dot-color);
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-slot="radio-group-item"] svg {
|
||||
width: var(--hm-radio-dot-size);
|
||||
height: var(--hm-radio-dot-size);
|
||||
}
|
||||
[data-slot="radio-group-item"]:hover:not(:disabled) {
|
||||
border-color: var(--hm-radio-hover-border-color);
|
||||
}
|
||||
[data-slot="radio-group-item"][data-state="checked"] {
|
||||
border-color: var(--hm-radio-checked-border-color);
|
||||
}
|
||||
/* 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="radio-group-item"]:focus-visible {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
|
||||
}
|
||||
[data-slot="radio-group-item"][aria-invalid="true"] {
|
||||
border-color: var(--hm-radio-error-border-color);
|
||||
}
|
||||
[data-slot="radio-group-item"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
Reference in new issue
Block a user