122 lines
5.7 KiB
CSS
122 lines
5.7 KiB
CSS
/* Dropdown Menu mapping. ui-viz has no Dropdown Menu spec (inventory: design pending), so these are current HM values built from
|
|
the HM Semantic tokens. Radix state attributes (data-highlighted, data-disabled, data-state) drive the states; no HM state attributes.
|
|
Floating surface values repeat in Popover / Tooltip / Hover Card, but each component keeps its own tokens. */
|
|
:root, [data-hm-theme] {
|
|
--hm-dropdown-menu-background: var(--hm-sem-floating-background);
|
|
--hm-dropdown-menu-text: var(--hm-sem-fg-primary);
|
|
--hm-dropdown-menu-border-width: var(--hm-sem-floating-border-width);
|
|
--hm-dropdown-menu-border-color: var(--hm-sem-floating-border-color);
|
|
--hm-dropdown-menu-radius: var(--hm-sem-floating-radius);
|
|
--hm-dropdown-menu-shadow: var(--hm-sem-floating-shadow);
|
|
--hm-dropdown-menu-padding: 4px;
|
|
|
|
--hm-dropdown-menu-item-height: 36px;
|
|
--hm-dropdown-menu-item-padding-x: 12px;
|
|
--hm-dropdown-menu-item-gap: 8px;
|
|
--hm-dropdown-menu-item-radius: 2px;
|
|
--hm-dropdown-menu-font-size: 14px;
|
|
--hm-dropdown-menu-line-height: 20px;
|
|
--hm-dropdown-menu-font-weight: 400;
|
|
|
|
/* Highlighted (hover and keyboard) uses the same face as the Select option: the shadcn accent. */
|
|
--hm-dropdown-menu-highlight-background: var(--hm-sem-surface-highlight);
|
|
--hm-dropdown-menu-highlight-text: var(--accent-foreground);
|
|
--hm-dropdown-menu-destructive-text: var(--hm-sem-action-destructive);
|
|
--hm-dropdown-menu-destructive-highlight-background: var(--hm-color-action-destructive-hover);
|
|
|
|
--hm-dropdown-menu-label-color: var(--hm-sem-fg-secondary);
|
|
--hm-dropdown-menu-label-font-size: 12px;
|
|
--hm-dropdown-menu-label-line-height: 18px;
|
|
--hm-dropdown-menu-label-font-weight: 500;
|
|
--hm-dropdown-menu-shortcut-color: var(--hm-sem-fg-secondary);
|
|
--hm-dropdown-menu-shortcut-font-size: 12px;
|
|
--hm-dropdown-menu-separator-color: var(--hm-sem-stroke-input-default);
|
|
|
|
/* Check / radio indicator column at the start of the item. */
|
|
--hm-dropdown-menu-indicator-size: 16px;
|
|
--hm-dropdown-menu-radio-dot-size: 8px;
|
|
}
|
|
|
|
[data-slot="dropdown-menu-content"],
|
|
[data-slot="dropdown-menu-sub-content"] {
|
|
box-sizing: border-box;
|
|
padding: var(--hm-dropdown-menu-padding);
|
|
border: var(--hm-dropdown-menu-border-width) solid var(--hm-dropdown-menu-border-color);
|
|
border-radius: var(--hm-dropdown-menu-radius);
|
|
background: var(--hm-dropdown-menu-background);
|
|
color: var(--hm-dropdown-menu-text);
|
|
box-shadow: var(--hm-dropdown-menu-shadow);
|
|
font-size: var(--hm-dropdown-menu-font-size);
|
|
line-height: var(--hm-dropdown-menu-line-height);
|
|
font-weight: var(--hm-dropdown-menu-font-weight);
|
|
}
|
|
|
|
[data-slot="dropdown-menu-item"],
|
|
[data-slot="dropdown-menu-checkbox-item"],
|
|
[data-slot="dropdown-menu-radio-item"],
|
|
[data-slot="dropdown-menu-sub-trigger"] {
|
|
box-sizing: border-box;
|
|
min-height: var(--hm-dropdown-menu-item-height);
|
|
gap: var(--hm-dropdown-menu-item-gap);
|
|
padding: 0 var(--hm-dropdown-menu-item-padding-x);
|
|
border-radius: var(--hm-dropdown-menu-item-radius);
|
|
}
|
|
/* Checkbox / radio items reserve the indicator column; `inset` aligns plain items to the same text start. */
|
|
[data-slot="dropdown-menu-checkbox-item"],
|
|
[data-slot="dropdown-menu-radio-item"],
|
|
[data-slot="dropdown-menu-item"][data-inset],
|
|
[data-slot="dropdown-menu-sub-trigger"][data-inset] {
|
|
padding-left: calc(var(--hm-dropdown-menu-item-padding-x) + var(--hm-dropdown-menu-indicator-size) + var(--hm-dropdown-menu-item-gap));
|
|
}
|
|
[data-slot="dropdown-menu-item-indicator"] {
|
|
left: var(--hm-dropdown-menu-item-padding-x);
|
|
width: var(--hm-dropdown-menu-indicator-size);
|
|
height: var(--hm-dropdown-menu-indicator-size);
|
|
}
|
|
[data-slot="dropdown-menu-radio-dot"] {
|
|
width: var(--hm-dropdown-menu-radio-dot-size);
|
|
height: var(--hm-dropdown-menu-radio-dot-size);
|
|
}
|
|
|
|
/* Highlighted: Radix sets data-highlighted for pointer hover and keyboard focus alike. An open sub menu keeps its trigger highlighted. */
|
|
[data-slot="dropdown-menu-item"][data-highlighted],
|
|
[data-slot="dropdown-menu-checkbox-item"][data-highlighted],
|
|
[data-slot="dropdown-menu-radio-item"][data-highlighted],
|
|
[data-slot="dropdown-menu-sub-trigger"][data-highlighted],
|
|
[data-slot="dropdown-menu-sub-trigger"][data-state="open"] {
|
|
background: var(--hm-dropdown-menu-highlight-background);
|
|
color: var(--hm-dropdown-menu-highlight-text);
|
|
}
|
|
[data-slot="dropdown-menu-item"][data-variant="destructive"] {
|
|
color: var(--hm-dropdown-menu-destructive-text);
|
|
}
|
|
[data-slot="dropdown-menu-item"][data-variant="destructive"][data-highlighted] {
|
|
background: var(--hm-dropdown-menu-destructive-highlight-background);
|
|
color: var(--hm-dropdown-menu-destructive-text);
|
|
}
|
|
|
|
[data-slot="dropdown-menu-label"] {
|
|
padding: 6px var(--hm-dropdown-menu-item-padding-x);
|
|
color: var(--hm-dropdown-menu-label-color);
|
|
font-size: var(--hm-dropdown-menu-label-font-size);
|
|
line-height: var(--hm-dropdown-menu-label-line-height);
|
|
font-weight: var(--hm-dropdown-menu-label-font-weight);
|
|
}
|
|
[data-slot="dropdown-menu-label"][data-inset] {
|
|
padding-left: calc(var(--hm-dropdown-menu-item-padding-x) + var(--hm-dropdown-menu-indicator-size) + var(--hm-dropdown-menu-item-gap));
|
|
}
|
|
[data-slot="dropdown-menu-separator"] {
|
|
margin: var(--hm-dropdown-menu-padding) calc(-1 * var(--hm-dropdown-menu-padding));
|
|
background: var(--hm-dropdown-menu-separator-color);
|
|
}
|
|
[data-slot="dropdown-menu-shortcut"] {
|
|
color: var(--hm-dropdown-menu-shortcut-color);
|
|
font-size: var(--hm-dropdown-menu-shortcut-font-size);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
[data-slot="dropdown-menu-item"][data-highlighted] [data-slot="dropdown-menu-shortcut"],
|
|
[data-slot="dropdown-menu-checkbox-item"][data-highlighted] [data-slot="dropdown-menu-shortcut"],
|
|
[data-slot="dropdown-menu-radio-item"][data-highlighted] [data-slot="dropdown-menu-shortcut"] {
|
|
color: inherit;
|
|
}
|