170 lines
6.7 KiB
CSS
170 lines
6.7 KiB
CSS
/* Menubar mapping. ui-viz has no Menubar spec, so these are current HM values built from the HM Semantic tokens. A desktop menu bar:
|
|
a bordered bar of text triggers whose open / focused trigger is highlighted, and menu content with the same item states as
|
|
other Radix menus. Radix state attributes (data-highlighted, data-disabled, data-state) drive the states; no HM state attributes.
|
|
No --hm-dropdown-menu-* token is referenced. */
|
|
:root, [data-hm-theme] {
|
|
/* Bar */
|
|
--hm-menubar-background: var(--hm-sem-bg-surface);
|
|
--hm-menubar-text: var(--hm-sem-fg-primary);
|
|
--hm-menubar-border-width: 1px;
|
|
--hm-menubar-border-color: var(--hm-sem-stroke-input-default);
|
|
--hm-menubar-radius: var(--hm-radius-container);
|
|
--hm-menubar-height: 38px;
|
|
--hm-menubar-padding: 2px;
|
|
--hm-menubar-gap: 2px;
|
|
|
|
/* Top-level trigger */
|
|
--hm-menubar-trigger-padding-x: 12px;
|
|
--hm-menubar-trigger-radius: 2px;
|
|
--hm-menubar-trigger-font-size: 14px;
|
|
--hm-menubar-trigger-line-height: 20px;
|
|
--hm-menubar-trigger-font-weight: 500;
|
|
|
|
/* Content */
|
|
--hm-menubar-content-background: var(--hm-sem-floating-background);
|
|
--hm-menubar-content-border-width: var(--hm-sem-floating-border-width);
|
|
--hm-menubar-content-border-color: var(--hm-sem-floating-border-color);
|
|
--hm-menubar-content-radius: var(--hm-sem-floating-radius);
|
|
--hm-menubar-content-shadow: var(--hm-sem-floating-shadow);
|
|
--hm-menubar-content-padding: 4px;
|
|
|
|
--hm-menubar-item-height: 36px;
|
|
--hm-menubar-item-padding-x: 12px;
|
|
--hm-menubar-item-gap: 8px;
|
|
--hm-menubar-item-radius: 2px;
|
|
--hm-menubar-font-size: 14px;
|
|
--hm-menubar-line-height: 20px;
|
|
|
|
--hm-menubar-highlight-background: var(--hm-sem-surface-highlight);
|
|
/* Top-level trigger highlight/open keeps the full accent; keyboard focus adds a separate ring. */
|
|
--hm-menubar-trigger-highlight-background: var(--accent);
|
|
--hm-menubar-highlight-text: var(--accent-foreground);
|
|
--hm-menubar-destructive-text: var(--hm-sem-action-destructive);
|
|
--hm-menubar-destructive-highlight-background: var(--hm-color-action-destructive-hover);
|
|
|
|
--hm-menubar-label-color: var(--hm-sem-fg-secondary);
|
|
--hm-menubar-label-font-size: 12px;
|
|
--hm-menubar-label-line-height: 18px;
|
|
--hm-menubar-label-font-weight: 500;
|
|
--hm-menubar-shortcut-color: var(--hm-sem-fg-secondary);
|
|
--hm-menubar-shortcut-font-size: 12px;
|
|
--hm-menubar-separator-color: var(--hm-sem-stroke-input-default);
|
|
--hm-menubar-indicator-size: 16px;
|
|
--hm-menubar-radio-dot-size: 8px;
|
|
}
|
|
|
|
[data-slot="menubar"] {
|
|
box-sizing: border-box;
|
|
width: fit-content;
|
|
height: var(--hm-menubar-height);
|
|
gap: var(--hm-menubar-gap);
|
|
padding: var(--hm-menubar-padding);
|
|
border: var(--hm-menubar-border-width) solid var(--hm-menubar-border-color);
|
|
border-radius: var(--hm-menubar-radius);
|
|
background: var(--hm-menubar-background);
|
|
color: var(--hm-menubar-text);
|
|
}
|
|
[data-slot="menubar-trigger"] {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding: 0 var(--hm-menubar-trigger-padding-x);
|
|
border-radius: var(--hm-menubar-trigger-radius);
|
|
font-size: var(--hm-menubar-trigger-font-size);
|
|
line-height: var(--hm-menubar-trigger-line-height);
|
|
font-weight: var(--hm-menubar-trigger-font-weight);
|
|
cursor: default;
|
|
}
|
|
/* Radix sets data-highlighted on the focused top-level trigger and data-state="open" on the open one. */
|
|
[data-slot="menubar-trigger"][data-highlighted],
|
|
[data-slot="menubar-trigger"][data-state="open"] {
|
|
background: var(--hm-menubar-trigger-highlight-background);
|
|
color: var(--hm-menubar-highlight-text);
|
|
}
|
|
[data-slot="menubar-trigger"]:focus-visible:not([data-disabled]) {
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
|
|
}
|
|
[data-slot="menubar-trigger"][data-disabled] {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
[data-slot="menubar-content"],
|
|
[data-slot="menubar-sub-content"] {
|
|
box-sizing: border-box;
|
|
padding: var(--hm-menubar-content-padding);
|
|
border: var(--hm-menubar-content-border-width) solid var(--hm-menubar-content-border-color);
|
|
border-radius: var(--hm-menubar-content-radius);
|
|
background: var(--hm-menubar-content-background);
|
|
color: var(--hm-menubar-text);
|
|
box-shadow: var(--hm-menubar-content-shadow);
|
|
font-size: var(--hm-menubar-font-size);
|
|
line-height: var(--hm-menubar-line-height);
|
|
font-weight: 400;
|
|
}
|
|
|
|
[data-slot="menubar-item"],
|
|
[data-slot="menubar-checkbox-item"],
|
|
[data-slot="menubar-radio-item"],
|
|
[data-slot="menubar-sub-trigger"] {
|
|
box-sizing: border-box;
|
|
min-height: var(--hm-menubar-item-height);
|
|
gap: var(--hm-menubar-item-gap);
|
|
padding: 0 var(--hm-menubar-item-padding-x);
|
|
border-radius: var(--hm-menubar-item-radius);
|
|
}
|
|
[data-slot="menubar-checkbox-item"],
|
|
[data-slot="menubar-radio-item"],
|
|
[data-slot="menubar-item"][data-inset],
|
|
[data-slot="menubar-sub-trigger"][data-inset] {
|
|
padding-left: calc(var(--hm-menubar-item-padding-x) + var(--hm-menubar-indicator-size) + var(--hm-menubar-item-gap));
|
|
}
|
|
[data-slot="menubar-item-indicator"] {
|
|
left: var(--hm-menubar-item-padding-x);
|
|
width: var(--hm-menubar-indicator-size);
|
|
height: var(--hm-menubar-indicator-size);
|
|
}
|
|
[data-slot="menubar-radio-dot"] {
|
|
width: var(--hm-menubar-radio-dot-size);
|
|
height: var(--hm-menubar-radio-dot-size);
|
|
}
|
|
|
|
[data-slot="menubar-item"][data-highlighted],
|
|
[data-slot="menubar-checkbox-item"][data-highlighted],
|
|
[data-slot="menubar-radio-item"][data-highlighted],
|
|
[data-slot="menubar-sub-trigger"][data-highlighted],
|
|
[data-slot="menubar-sub-trigger"][data-state="open"] {
|
|
background: var(--hm-menubar-highlight-background);
|
|
color: var(--hm-menubar-highlight-text);
|
|
}
|
|
[data-slot="menubar-item"][data-variant="destructive"] {
|
|
color: var(--hm-menubar-destructive-text);
|
|
}
|
|
[data-slot="menubar-item"][data-variant="destructive"][data-highlighted] {
|
|
background: var(--hm-menubar-destructive-highlight-background);
|
|
color: var(--hm-menubar-destructive-text);
|
|
}
|
|
|
|
[data-slot="menubar-label"] {
|
|
padding: 6px var(--hm-menubar-item-padding-x);
|
|
color: var(--hm-menubar-label-color);
|
|
font-size: var(--hm-menubar-label-font-size);
|
|
line-height: var(--hm-menubar-label-line-height);
|
|
font-weight: var(--hm-menubar-label-font-weight);
|
|
}
|
|
[data-slot="menubar-label"][data-inset] {
|
|
padding-left: calc(var(--hm-menubar-item-padding-x) + var(--hm-menubar-indicator-size) + var(--hm-menubar-item-gap));
|
|
}
|
|
[data-slot="menubar-separator"] {
|
|
margin: var(--hm-menubar-content-padding) calc(-1 * var(--hm-menubar-content-padding));
|
|
background: var(--hm-menubar-separator-color);
|
|
}
|
|
[data-slot="menubar-shortcut"] {
|
|
color: var(--hm-menubar-shortcut-color);
|
|
font-size: var(--hm-menubar-shortcut-font-size);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
[data-slot="menubar-item"][data-highlighted] [data-slot="menubar-shortcut"],
|
|
[data-slot="menubar-checkbox-item"][data-highlighted] [data-slot="menubar-shortcut"],
|
|
[data-slot="menubar-radio-item"][data-highlighted] [data-slot="menubar-shortcut"] {
|
|
color: inherit;
|
|
}
|